is a grid item and defaults to min-width:auto — it refuses to shrink below its content's min-content width. On mobile the product grid's min-content (2×card) exceeds the viewport, forcing horizontal overflow (the "zoom in/out" symptom). min-inline-size:0 lets the shell shrink to the viewport. */ min-inline-size: 0; } .woocommerce-page main.woo-main { min-inline-size: 0; } .pa-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* ================================================= WOOCOMMERCE SUCCESS NOTICE */ .woocommerce-notices-wrapper:not(:empty) { position: relative; z-index: 30; margin-block: 12px 22px; } .woocommerce-notices-wrapper .woocommerce-message { position: relative; isolation: isolate; display: flow-root; min-height: 70px; overflow: hidden; margin: 0 !important; padding: 14px 18px !important; padding-inline-start: 76px !important; border: 1px solid color-mix(in srgb, var(--pa-teal) 30%, rgba(255,255,255,.82)) !important; border-radius: 18px !important; background: linear-gradient(135deg, rgba(255,255,255,.72), color-mix(in srgb, var(--pa-teal) 8%, rgba(235,243,255,.42))) !important; box-shadow: 0 18px 42px rgba(35,45,110,.12), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(85,72,200,.05); -webkit-backdrop-filter: blur(26px) saturate(155%); backdrop-filter: blur(26px) saturate(155%); color: var(--pa-text) !important; font-size: 13.5px; font-weight: 750; line-height: 40px; animation: pa-notice-arrive .38s var(--pa-ease) both; } .woocommerce-notices-wrapper .woocommerce-message::before { content: "\2713"; position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-start: 17px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--pa-teal) 44%, rgba(255,255,255,.82)); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--pa-teal) 16%, rgba(255,255,255,.75)), rgba(255,255,255,.30)); box-shadow: 0 10px 22px rgba(21,154,146,.14), inset 0 1px 0 rgba(255,255,255,.92), 0 0 0 5px color-mix(in srgb, var(--pa-teal) 6%, transparent); color: var(--pa-teal-strong); font-size: 19px; font-weight: 900; line-height: 1; transform: translateY(-50%); } .woocommerce-notices-wrapper .woocommerce-message::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 8% 0, rgba(110,221,220,.24), transparent 36%), radial-gradient(circle at 94% 120%, rgba(85,72,200,.10), transparent 42%); pointer-events: none; } .woocommerce-notices-wrapper .woocommerce-message .wc-forward { float: left; min-height: 40px; margin: 0; margin-inline-start: 18px; padding-inline: 17px; border: 1px solid color-mix(in srgb, var(--pa-indigo) 22%, rgba(255,255,255,.82)); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(240,243,255,.28)); box-shadow: 0 9px 22px rgba(35,45,110,.09), inset 0 1px 0 rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); color: var(--pa-navy); font-size: 11.5px; font-weight: 850; line-height: 1; text-decoration: none; transition: border-color .2s var(--pa-ease), color .2s var(--pa-ease), box-shadow .2s var(--pa-ease), transform .2s var(--pa-ease); } .woocommerce-notices-wrapper .woocommerce-message .wc-forward:hover { border-color: color-mix(in srgb, var(--pa-teal) 48%, rgba(255,255,255,.84)); background: linear-gradient(145deg, rgba(255,255,255,.76), color-mix(in srgb, var(--pa-teal) 9%, rgba(238,244,255,.34))); box-shadow: 0 12px 26px rgba(35,45,110,.13), inset 0 1px 0 rgba(255,255,255,.96); color: var(--pa-teal-strong); transform: translateY(-1px); } [data-theme="dark"] .woocommerce-notices-wrapper .woocommerce-message { border-color: rgba(110,221,220,.23) !important; background: linear-gradient(135deg, rgba(61,72,125,.48), rgba(24,33,70,.68)) !important; box-shadow: 0 20px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.11); } [data-theme="dark"] .woocommerce-notices-wrapper .woocommerce-message::before { border-color: rgba(110,221,220,.28); background: linear-gradient(145deg, rgba(110,221,220,.14), rgba(255,255,255,.045)); box-shadow: 0 10px 22px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.11), 0 0 0 5px rgba(110,221,220,.035); } [data-theme="dark"] .woocommerce-notices-wrapper .woocommerce-message .wc-forward { border-color: rgba(205,220,255,.18); background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.09); color: #e7ecff; } @keyframes pa-notice-arrive { from { opacity: 0; transform: translateY(-8px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 600px) { .woocommerce-notices-wrapper:not(:empty) { margin-block: 8px 17px; } .woocommerce-notices-wrapper .woocommerce-message { min-height: 0; padding: 14px !important; padding-inline-start: 66px !important; border-radius: 16px !important; font-size: 12.5px; line-height: 1.75; } .woocommerce-notices-wrapper .woocommerce-message::before { inset-block-start: 14px; inset-inline-start: 14px; width: 36px; height: 36px; border-radius: 11px; font-size: 17px; transform: none; } .woocommerce-notices-wrapper .woocommerce-message .wc-forward { float: none; width: 100%; min-height: 39px; margin: 11px 0 0; } } @media (prefers-reduced-motion: reduce) { .woocommerce-notices-wrapper .woocommerce-message { animation: none; } } .pa-ambient span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; } .pa-ambient .amb-1 { inset-block-start: -8%; inset-inline-end: -6%; width: 42vw; max-width: 620px; aspect-ratio: 1; background: radial-gradient(circle, rgba(110, 221, 220, .40), transparent 68%); } .pa-ambient .amb-2 { inset-block-end: -12%; inset-inline-start: -8%; width: 46vw; max-width: 680px; aspect-ratio: 1; background: radial-gradient(circle, rgba(118, 103, 233, .30), transparent 68%); } .pa-ambient .amb-3 { inset-block-start: 32%; inset-inline-start: 30%; width: 30vw; max-width: 440px; aspect-ratio: 1; background: radial-gradient(circle, rgba(244, 124, 166, .14), transparent 70%); } [data-theme="dark"] .pa-ambient span { opacity: .38; } [data-theme="dark"] .pa-ambient .amb-1 { background: radial-gradient(circle, rgba(90, 224, 226, .18), transparent 68%); } [data-theme="dark"] .pa-ambient .amb-2 { background: radial-gradient(circle, rgba(113, 109, 224, .20), transparent 68%); } /* ======================================================= GLASS PANELS */ .pa-glass-panel { position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .38)); border: 1px solid var(--pa-glass-border); border-radius: var(--pa-radius-lg); box-shadow: var(--pa-shadow), inset 0 1px 0 rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(var(--pa-blur)) saturate(125%); backdrop-filter: blur(var(--pa-blur)) saturate(125%); } .pa-glass-panel--strong { background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .60)); } [data-theme="dark"] .pa-glass-panel { background: linear-gradient(135deg, rgba(44, 49, 94, .50), rgba(26, 31, 66, .34)); box-shadow: var(--pa-shadow), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(110, 221, 220, .07); } [data-theme="dark"] .pa-glass-panel--strong { background: linear-gradient(135deg, rgba(52, 58, 108, .70), rgba(34, 39, 78, .52)); } /* No-backdrop-filter fallback: solid-ish surface so panels never read as flat white. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pa-glass-panel { background: var(--pa-glass-strong); } [data-theme="dark"] .pa-glass-panel { background: #1b2050; } } /* ============================================================ BUTTONS */ .pa-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding-inline: 24px; border: 0; border-radius: var(--pa-radius-md); background: linear-gradient(135deg, var(--pa-teal), var(--pa-teal-strong)); color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(21, 154, 146, .8), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .16s var(--pa-ease), box-shadow .16s var(--pa-ease), filter .16s var(--pa-ease); } .pa-primary-button:hover { filter: brightness(1.04); box-shadow: 0 16px 32px -12px rgba(21, 154, 146, .9), inset 0 1px 0 rgba(255, 255, 255, .4); } .pa-primary-button:active { transform: translateY(1px); } .pa-primary-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .pa-primary-button[disabled], .pa-primary-button.is-loading { opacity: .6; cursor: not-allowed; filter: none; box-shadow: none; } .pa-glass-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding-inline: 20px; border: 1px solid var(--pa-glass-border); border-radius: var(--pa-radius-md); background: var(--pa-glass); color: var(--pa-text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); transition: transform .16s var(--pa-ease), border-color .16s var(--pa-ease), background .16s var(--pa-ease); } .pa-glass-button:hover { border-color: rgba(255, 255, 255, .95); background: var(--pa-glass-strong); } [data-theme="dark"] .pa-glass-button:hover { border-color: rgba(210, 230, 255, .28); } .pa-glass-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================== FIELDS */ .pa-field { display: flex; flex-direction: column; gap: 7px; } .pa-field > label { font-size: 13.5px; font-weight: 600; color: var(--pa-text); } .pa-field-control { display: flex; align-items: center; gap: 10px; min-height: 52px; padding-inline: 14px; border: 1px solid var(--pa-line); border-radius: var(--pa-radius-md); background: var(--pa-surface); transition: border-color .16s var(--pa-ease), box-shadow .16s var(--pa-ease); } .pa-field-control > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--pa-text-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pa-field-control input, .pa-field-control select, .pa-field-control textarea { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--pa-text); padding: 0; } .pa-field-control input:focus, .pa-field-control select:focus, .pa-field-control textarea:focus { outline: none; } .pa-field-control:focus-within { border-color: var(--pa-indigo); box-shadow: 0 0 0 3px rgba(85, 72, 200, .16); } .pa-field-control.is-error { border-color: var(--pa-danger); box-shadow: 0 0 0 3px var(--pa-danger-tint); } /* WooCommerce injects its password strength pill + hint INSIDE this bordered flex row (field.after), colliding with the input. main.js relocates them below the box; this is the no-JS fallback so they wrap to their own full-width rows instead of overlapping the field. */ .pa-field-control:has(.woocommerce-password-strength), .pa-field-control:has(.woocommerce-password-hint) { flex-wrap: wrap; padding-block: 12px; } .pa-field-control .woocommerce-password-strength, .pa-field-control .woocommerce-password-hint { flex-basis: 100%; order: 99; } /* relocated (normal) position: stacked under the control inside .pa-field */ .pa-field > .woocommerce-password-strength { margin-block-start: 2px; } .pa-field > .woocommerce-password-hint { margin-block-start: 0; } .pa-field-control.is-success { border-color: var(--pa-ok); box-shadow: 0 0 0 3px var(--pa-ok-tint); } .pa-field-msg { font-size: 12.5px; } .pa-field-msg.is-error { color: var(--pa-danger); } .pa-field-msg.is-success { color: var(--pa-ok); } .pa-field-eye { flex: none; display: inline-flex; padding: 4px; border: 0; background: none; cursor: pointer; color: var(--pa-text-muted); border-radius: 8px; } .pa-field-eye:hover { color: var(--pa-text); } /* ================================================= CHIPS / BADGES / STATUS */ .pa-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-inline: 14px; border: 1px solid var(--pa-glass-border); border-radius: var(--pa-radius-pill, 999px); background: var(--pa-glass); color: var(--pa-text); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .16s var(--pa-ease), background .16s var(--pa-ease), color .16s var(--pa-ease); } .pa-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pa-chip:hover { border-color: rgba(255, 255, 255, .95); } .pa-chip.is-active { background: linear-gradient(135deg, rgba(31, 190, 188, .18), rgba(85, 72, 200, .14)); border-color: rgba(31, 190, 188, .4); color: var(--pa-teal-strong); } [data-theme="dark"] .pa-chip.is-active { color: #a9f0ec; } .pa-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1; letter-spacing: .01em; } .pa-badge--hot { background: rgba(244, 124, 166, .16); color: #d24d7c; } .pa-badge--instant { background: var(--pa-ok-tint); color: var(--pa-ok); } [data-theme="dark"] .pa-badge--hot { background: rgba(244, 124, 166, .2); color: #f5a1c0; } .pa-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; } .pa-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } .pa-status--ok { color: var(--pa-ok); } .pa-status--muted { color: var(--pa-text-muted); } .pa-status--off { color: var(--pa-danger); } /* =========================================================== HEADINGS */ .pa-section-heading { display: flex; align-items: baseline; gap: 10px; margin-block-end: 18px; } .pa-section-heading h2 { font-family: var(--font-display, inherit); font-size: clamp(19px, 2.4vw, 24px); font-weight: 800; color: var(--pa-text); margin: 0; letter-spacing: -.01em; } .pa-section-heading .pa-sh-sub { font-size: 13.5px; color: var(--pa-text-muted); } .pa-section-heading .pa-sh-more { margin-inline-start: auto; font-size: 13.5px; font-weight: 700; color: var(--pa-teal-strong); display: inline-flex; align-items: center; gap: 4px; } /* =================================================== UNIVERSAL PRODUCT CARD */ .pa-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; min-inline-size: 0; } .pa-product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1200px) { .pa-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .pa-product-grid, .pa-product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } .pa-product-card { position: relative; display: flex; flex-direction: column; min-inline-size: 0; padding: 16px; border-radius: var(--pa-radius-card); background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .34)); border: 1px solid var(--pa-glass-border); box-shadow: var(--pa-shadow), inset 0 1px 0 rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); transition: transform .18s var(--pa-ease), box-shadow .18s var(--pa-ease), border-color .18s var(--pa-ease); } [data-theme="dark"] .pa-product-card { background: linear-gradient(135deg, rgba(44, 49, 94, .50), rgba(26, 31, 66, .32)); box-shadow: var(--pa-shadow), inset 0 1px 0 rgba(255, 255, 255, .10); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pa-product-card { background: var(--pa-glass-strong); } [data-theme="dark"] .pa-product-card { background: #1b2050; } } .pa-product-card:hover { transform: translateY(-4px); box-shadow: var(--pa-shadow-hover); border-color: rgba(255, 255, 255, .96); } [data-theme="dark"] .pa-product-card:hover { border-color: rgba(110, 221, 220, .3); } @media (hover: none) { .pa-product-card:hover { transform: none; box-shadow: var(--pa-shadow); } } .pa-pc-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .pa-pc-media { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, color-mix(in srgb, var(--gc, var(--pa-cyan)) 22%, transparent), color-mix(in srgb, var(--gc, var(--pa-indigo)) 8%, transparent)); } .pa-pc-media img { width: 100%; height: 100%; object-fit: contain; } .pa-pc-chip { display: inline-flex; align-items: center; justify-content: center; width: 62%; height: 62%; border-radius: 16px; font-weight: 800; font-size: 20px; color: #fff; letter-spacing: .06em; } .pa-pc-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2; } .pa-pc-discount { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 38px; min-block-size: 24px; padding-inline: 7px; border: 1px solid rgba(255, 255, 255, .48); border-radius: 7px; background: #df3f55; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; box-shadow: 0 6px 14px rgba(154, 22, 44, .24); } .pa-pc-title { margin-block: 12px 3px; font-size: 14.5px; font-weight: 700; line-height: 1.55; color: var(--pa-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } .pa-pc-cat { font-size: 12px; color: var(--pa-text-muted); } .pa-pc-meta { display: flex; flex-direction: column; gap: 6px; margin-block-start: 10px; } .pa-pc-price { font-size: 14.5px; font-weight: 800; color: var(--pa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pa-pc-price .from, .pa-pc-price ins { text-decoration: none; } .pa-pc-price del { color: var(--pa-text-muted); font-weight: 600; font-size: 12.5px; margin-inline-start: 6px; } .pa-pc-price del, .pa-pc-price ins { display: block; inline-size: 100%; } .pa-pc-price del { margin-inline-start: 0; line-height: 1.4; } .pa-pc-price ins { margin-block-start: 3px; line-height: 1.45; } .pa-pc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .pa-pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 14px; } .pa-pc-view { display: none; } .pa-pc-cart { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--pa-teal), var(--pa-teal-strong)); color: #fff; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(21, 154, 146, .85), inset 0 1px 0 rgba(255, 255, 255, .3); transition: opacity .18s var(--pa-ease), transform .18s var(--pa-ease), filter .16s var(--pa-ease); } .pa-pc-cart:hover { filter: brightness(1.05); } .pa-pc-cart:active { transform: scale(.94); } .pa-pc-cart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .pa-product-card .pa-pc-cart { opacity: 0; pointer-events: none; transform: translateY(7px) scale(.92); } .pa-product-card:hover .pa-pc-cart, .pa-product-card:focus-within .pa-pc-cart { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } } /* wishlist heart (pa_wish_heart outputs .pa-wish-btn) in the card footer */ .pa-product-card .pa-wish-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pa-line); background: var(--pa-surface); color: var(--pa-text-muted); cursor: pointer; transition: color .16s var(--pa-ease), border-color .16s var(--pa-ease), background .16s var(--pa-ease); } .pa-product-card .pa-wish-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; } .pa-product-card .pa-wish-btn:hover { color: var(--pa-danger); border-color: color-mix(in srgb, var(--pa-danger) 40%, transparent); } .pa-product-card .pa-wish-btn.is-active { color: var(--pa-danger); } .pa-product-card .pa-wish-btn.is-active svg { fill: currentColor; } /* ============================ HORIZONTAL CAROUSELS (home slider / related) */ /* Reuse the one universal card inside scroll rows produced by pa_product_card(). */ .pop-row { display: flex; gap: 16px; overflow-x: auto; list-style: none; margin: 0; padding-block-end: 8px; scrollbar-width: none; scroll-snap-type: x proximity; } .pop-row::-webkit-scrollbar { display: none; } .pop-row .pa-product-card { flex: 0 0 clamp(200px, 44vw, 236px); scroll-snap-align: start; } /* ======================================================= REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { .pa-product-card, .pa-primary-button, .pa-glass-button, .pa-chip, .pa-pc-cart { transition: none; } .pa-product-card:hover { transform: none; } }