/* ============================================================
   WahahStore — storefront components (Phase 2/3)
   ============================================================ */
.hero__title .accent { color: var(--primary); font-style: italic; }
.hero__trust { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; color: var(--on-surface-variant); font-weight: 600; font-size: .9rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust .material-symbols-outlined { color: var(--primary); font-size: 1.2rem; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; }

/* Marquee */
.marquee { overflow: hidden; background: var(--on-surface); border-radius: var(--radius-xl); padding: 16px 0; }
.marquee__track { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; font-family: var(--font-display); font-weight: 700; color: var(--background); animation: scroll 28s linear infinite; }
.marquee__track .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); display: inline-block; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* Section header */
.section { display: flex; flex-direction: column; gap: 24px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.section__title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.section__sub { color: var(--on-surface-variant); margin-top: 4px; }
.section__link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; white-space: nowrap; }
.section__link:hover { text-decoration: underline; }

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; perspective: 1000px; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 32px 20px; border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid rgba(0,0,0,0.05); transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .4s, border-color .4s; box-shadow: 0 8px 25px rgba(0,0,0,0.03); transform-style: preserve-3d; }
.cat-tile:hover { transform: translateY(-10px) rotateX(4deg) rotateY(-4deg); box-shadow: 15px 15px 35px rgba(0,0,0,0.08), -5px -5px 15px rgba(255,255,255,0.8); border-color: transparent; }
.cat-tile__icon { width: 72px; height: 72px; border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.25)); color: var(--primary); display: grid; place-items: center; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), 0 5px 15px rgba(var(--primary-rgb), 0.2); transform: translateZ(20px); transition: transform 0.3s; }
.cat-tile:hover .cat-tile__icon { transform: translateZ(40px) scale(1.1); }
.cat-tile__icon .material-symbols-outlined { font-size: 2.2rem; filter: drop-shadow(0 2px 4px rgba(var(--primary-rgb), 0.3)); }
.cat-tile__name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; transform: translateZ(15px); }
.cat-tile__count { color: var(--primary); font-size: .85rem; font-weight: 600; background: rgba(var(--primary-rgb), 0.08); padding: 4px 12px; border-radius: 20px; transform: translateZ(10px); }

/* Product grid + card */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; perspective: 1200px; }
.pcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--radius-2xl); overflow: hidden; transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .4s; box-shadow: 0 8px 25px rgba(0,0,0,0.04); transform-style: preserve-3d; }
.pcard:hover { transform: translateY(-12px) rotateX(2deg) rotateY(-2deg); box-shadow: 15px 20px 40px rgba(0,0,0,0.1), -10px -10px 20px rgba(255,255,255,0.7); z-index: 5; }
.pcard__media { position: relative; display: block; aspect-ratio: 1/1; background: radial-gradient(circle, var(--surface-low) 0%, rgba(0,0,0,0.02) 100%); overflow: visible; padding: 20px; transform: translateZ(20px); }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter .5s; filter: drop-shadow(0 8px 15px rgba(0,0,0,0.1)); }
.pcard:hover .pcard__media img { transform: scale(1.15) translateY(-5px); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.18)); }
.pcard__badge { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 2; background: linear-gradient(135deg, var(--error), #ff4b4b); color: #fff; font-weight: 800; font-size: .75rem; padding: 6px 12px; border-radius: var(--radius-full); box-shadow: 0 4px 10px rgba(var(--error-rgb), 0.3); transform: translateZ(25px); }
.pcard__fav { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 2; width: 40px; height: 40px; border-radius: var(--radius-full); background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: grid; place-items: center; color: var(--on-surface-variant); transition: color .3s, transform .3s, background .3s; transform: translateZ(25px); }
.pcard__fav:hover { color: var(--error); transform: scale(1.15) translateZ(30px); background: #fff; }
.pcard__fav .material-symbols-outlined { font-size: 1.2rem; }
.pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; transform: translateZ(10px); background: var(--surface); border-top: 1px solid rgba(0,0,0,0.02); }
.pcard__rating { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; transform: translateZ(5px); }
.pcard__rating .star { color: #f5b301; font-size: 1.1rem; font-variation-settings: "FILL" 1; filter: drop-shadow(0 2px 4px rgba(245,179,1,0.3)); }
.pcard__rating .muted { color: var(--outline); font-weight: 500; }
.pcard__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; line-height: 1.35; transform: translateZ(15px); }
.pcard__title a { color: var(--on-surface); transition: color 0.2s; }
.pcard__title a:hover { color: var(--primary); }
.pcard__desc { color: var(--on-surface-variant); font-size: .88rem; transform: translateZ(5px); }
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; transform: translateZ(20px); }
.pcard__price .now { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; color: var(--primary); }
.pcard__price .was { color: var(--outline); text-decoration: line-through; font-size: .9rem; margin-inline-start: 8px; font-weight: 500; }
.pcard__add { width: 46px; height: 46px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--surface-container), var(--surface-low)); color: var(--on-surface); display: grid; place-items: center; transition: background .3s, color .3s, transform .3s, box-shadow .3s; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.pcard__add:hover { background: linear-gradient(135deg, var(--primary), #4f46e5); color: var(--on-primary); transform: scale(1.1); box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.4); }

/* Promo banner */
.promo { position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary); }
.promo__bg { position: absolute; inset: 0; background: var(--primary-container); opacity: .35; }
.promo__content { position: relative; z-index: 2; padding: clamp(32px, 6vw, 64px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 620px; }
.promo__content .chip { background: rgba(255,255,255,.15); color: #fff; }
.promo__content h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.promo__content p { opacity: .9; }
.btn--light { background: #fff; color: var(--primary); }
.btn--light:hover { transform: translateY(-2px) scale(1.02); }
[data-theme="dark"] .promo { background: var(--primary-container); color: #fff; }

/* Breadcrumbs */
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--on-surface-variant); font-size: .88rem; }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { font-size: 1rem; color: var(--outline); }

/* Listing head + sort */
.listing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.listing-title { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.listing-meta { color: var(--on-surface-variant); margin-top: 4px; }
.sortbar { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.sortbar select { padding: 10px 16px; border-radius: var(--radius-full); border: 1px solid var(--outline-variant); background: var(--surface); color: var(--on-surface); }
.subcats { display: flex; flex-wrap: wrap; gap: 10px; }
.subcat-chip { padding: 8px 18px; border-radius: var(--radius-full); background: var(--surface-container); font-weight: 600; font-size: .9rem; transition: background .2s, color .2s; }
.subcat-chip:hover { background: var(--primary); color: var(--on-primary); }
.cat-desc { color: var(--on-surface-variant); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--on-surface-variant); font-size: 1.05rem; }

/* Pager */
.pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.pager a { min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--outline-variant); font-weight: 600; transition: all .2s; }
.pager a:hover, .pager a.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Product detail */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pdp__main { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-2xl); display: grid; place-items: center; overflow: hidden; padding: 24px; }
.pdp__main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp__badge { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; background: var(--error); color: #fff; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-full); }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pdp__thumb { width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--outline-variant); background: var(--surface); padding: 6px; }
.pdp__thumb.active { border-color: var(--primary); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__info { display: flex; flex-direction: column; gap: 16px; }
.pdp__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.pdp__model { color: var(--on-surface-variant); font-size: .9rem; }
.pdp__price .now { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--primary); }
.pdp__price .was { color: var(--outline); text-decoration: line-through; font-size: 1.1rem; margin-inline-start: 10px; }
.pdp__stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; width: fit-content; }
.pdp__stock.in { color: #16a34a; }
.pdp__stock.out { color: var(--error); }
.pdp__buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); overflow: hidden; }
.qty button { width: 44px; height: 48px; font-size: 1.3rem; background: var(--surface); }
.qty button:hover { background: var(--surface-container); }
.qty input { width: 54px; height: 48px; text-align: center; border: none; background: var(--surface); color: var(--on-surface); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pdp__add { height: 48px; }
.pdp__perks { display: flex; gap: 20px; flex-wrap: wrap; color: var(--on-surface-variant); font-weight: 600; font-size: .9rem; }
.pdp__perks span { display: inline-flex; align-items: center; gap: 6px; }
.pdp__perks .material-symbols-outlined { color: var(--primary); }

/* Rich text + CMS */
.rich { line-height: 1.8; color: var(--on-surface-variant); word-wrap: break-word; }
.rich h1, .rich h2, .rich h3 { color: var(--on-surface); margin: 18px 0 10px; }
.rich p { margin: 10px 0; }
.rich img { border-radius: var(--radius); margin: 12px 0; height: auto; max-width: 100%; }
.rich a { color: var(--primary); text-decoration: underline; }
.rich ul, .rich ol { padding-inline-start: 24px; margin: 10px 0; }
.cms { padding: clamp(24px, 5vw, 48px); border-radius: var(--radius-2xl); }
.cms__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 18px; }

/* Search page bar */
.searchbar-page { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); padding: 12px 20px; min-width: 280px; }
.searchbar-page:focus-within { border-color: var(--primary); }
.searchbar-page input { border: none; outline: none; background: transparent; color: var(--on-surface); width: 100%; }
.searchbar-page .material-symbols-outlined { color: var(--outline); }

/* Wishlist active state */
.pcard__fav.active, [data-wishlist].active { color: var(--error); }
.pcard__fav.active .material-symbols-outlined, [data-wishlist].active .material-symbols-outlined { font-variation-settings: "FILL" 1; }

/* Toasts */
.toast-box { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--on-surface); color: var(--background); padding: 14px 22px; border-radius: var(--radius-full); font-weight: 600; box-shadow: var(--shadow-lg); transform: translateY(20px); opacity: 0; transition: transform .3s, opacity .3s; }
.toast.show { transform: translateY(0); opacity: 1; }

/* Cart */
.cart { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.cart__items { display: flex; flex-direction: column; gap: 12px; }
.cart-row { display: grid; grid-template-columns: 88px 1fr auto auto auto; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 12px; }
.cart-row__img { width: 88px; height: 88px; border-radius: var(--radius); background: var(--surface-low); overflow: hidden; display: grid; place-items: center; }
.cart-row__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-row__name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.cart-row__name:hover { color: var(--primary); }
.cart-row__price { color: var(--on-surface-variant); font-size: .85rem; margin-top: 4px; }
.cart-row__qty input { width: 64px; height: 42px; text-align: center; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: var(--surface); color: var(--on-surface); }
.cart-row__total { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.cart-row__remove { width: 40px; height: 40px; border-radius: var(--radius-full); color: var(--on-surface-variant); display: grid; place-items: center; }
.cart-row__remove:hover { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.cart__summary { padding: 24px; border-radius: var(--radius-xl); position: sticky; top: 110px; display: flex; flex-direction: column; gap: 10px; }
.cart__summary h2 { font-size: 1.2rem; margin-bottom: 6px; }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--on-surface-variant); }
.sum-row--total { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--on-surface); border-top: 1px solid var(--outline-variant); padding-top: 12px; margin-top: 6px; }
.cart__checkout { justify-content: center; margin-top: 10px; }
.cart__continue { text-align: center; color: var(--primary); font-weight: 600; font-size: .9rem; }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.checkout__main { display: flex; flex-direction: column; gap: 20px; }
.checkout-card { padding: 24px; border-radius: var(--radius-xl); }
.checkout-card h2 { font-size: 1.15rem; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field span { font-weight: 600; font-size: .85rem; color: var(--on-surface-variant); }
.field input, .field select, .field textarea { padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--outline-variant); background: var(--surface); color: var(--on-surface); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); }
.field--error input, .field--error select { border-color: var(--error); }
.pay-options { display: flex; flex-direction: column; gap: 12px; }
.pay-option { display: block; cursor: pointer; }
.pay-option input { position: absolute; opacity: 0; }
.pay-option__body { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--outline-variant); border-radius: var(--radius-lg); transition: border-color .2s, background .2s; }
.pay-option__body .material-symbols-outlined { color: var(--primary); font-size: 1.6rem; }
.pay-option__body strong { display: block; }
.pay-option__body small { color: var(--on-surface-variant); }
.pay-option input:checked + .pay-option__body { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.checkout__summary { padding: 24px; border-radius: var(--radius-xl); position: sticky; top: 110px; display: flex; flex-direction: column; gap: 10px; }
.checkout__summary h2 { font-size: 1.15rem; }
.mini-items { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; margin-bottom: 8px; }
.mini-item { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 10px; font-size: .85rem; }
.mini-item img { width: 44px; height: 44px; object-fit: contain; background: var(--surface-low); border-radius: var(--radius-sm); padding: 4px; }
.mini-item__qty { color: var(--outline); }
.mini-item__total { font-weight: 700; white-space: nowrap; }
.checkout__submit { justify-content: center; margin-top: 8px; }

/* Success */
.success { text-align: center; max-width: 520px; margin: 20px auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.success__icon .material-symbols-outlined { font-size: 5rem; color: #16a34a; font-variation-settings: "FILL" 1; }
.success h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.success__msg { color: var(--on-surface-variant); font-size: 1.1rem; }
.success__card { width: 100%; padding: 24px; border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 10px; text-align: start; }
.success__note { color: var(--on-surface-variant); }

@media (max-width: 980px) {
    .cart, .checkout { grid-template-columns: 1fr; }
    .cart__summary, .checkout__summary { position: static; }
}
@media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
    /* Tidy 2-row cart row: image spans both rows, remove top-right, qty + total below */
    .cart-row {
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            "img info   remove"
            "img qty    total";
        column-gap: 12px; row-gap: 8px;
    }
    .cart-row__img    { grid-area: img; width: 64px; height: 64px; }
    .cart-row__info   { grid-area: info; }
    .cart-row__remove { grid-area: remove; align-self: start; }
    .cart-row__qty    { grid-area: qty; align-self: center; }
    .cart-row__total  { grid-area: total; align-self: center; text-align: end; }
}

/* Brand logo in header/footer — contain + cap width so wide custom logos
   (e.g. an uploaded "Software Oasis" wordmark) never stretch, clip or overflow. */
.brand__logo { height: 38px; width: auto; max-width: min(56vw, 200px); object-fit: contain; display: block; }
.footer__brand .brand__logo { height: 44px; max-width: 240px; }
[data-theme="dark"] .brand__logo { filter: brightness(0) invert(1); }

/* ---------- Hero slider (real banners) ---------- */
.hero-slider { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface-container); isolation: isolate; }
.hero-slider__viewport { overflow: hidden; }
.hero-slider__track { display: flex; transition: transform .7s cubic-bezier(.65,.05,.36,1); }
.hero-slide { position: relative; min-width: 100%; aspect-ratio: 21 / 8; display: block; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease; }
.hero-slide.is-active img { transform: scale(1.12); }
.hero-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full); display: grid; place-items: center; z-index: 4; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--on-surface); box-shadow: var(--shadow-sm); transition: transform .2s, background .2s; }
.hero-slider__nav:hover { transform: translateY(-50%) scale(1.08); background: var(--primary); color: var(--on-primary); }
.hero-slider__nav.prev { inset-inline-start: 18px; }
.hero-slider__nav.next { inset-inline-end: 18px; }
.hero-slider__dots { position: absolute; inset-block-end: 16px; inset-inline: 0; display: flex; gap: 8px; justify-content: center; z-index: 4; }
.hero-slider__dots button { width: 9px; height: 9px; border-radius: var(--radius-full); background: rgba(255,255,255,.55); border: none; transition: width .3s, background .3s; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.hero-slider__dots button.is-active { width: 28px; background: #fff; }
.hero-slider__orb { position: absolute; border-radius: 50%; filter: blur(50px); z-index: 0; pointer-events: none; }
.hero-slider__orb.orb1 { width: 280px; height: 280px; background: color-mix(in srgb, var(--primary) 45%, transparent); inset-block-start: -90px; inset-inline-end: -60px; animation: float 7s ease-in-out infinite; }
.hero-slider__orb.orb2 { width: 220px; height: 220px; background: color-mix(in srgb, var(--secondary) 40%, transparent); inset-block-end: -80px; inset-inline-start: -50px; animation: float 9s ease-in-out 1s infinite; }

/* ---------- Brand strip ---------- */
.brandstrip { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding: 8px 0; }
.brandstrip__title { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; margin: 16px 0 14px; }
.brandstrip__title .grad { color: var(--primary); }
.brandstrip__sub { color: var(--on-surface-variant); font-size: 1.1rem; max-width: 52ch; }
.brandstrip__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.brandstrip__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); padding: 22px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; transition: transform .2s, box-shadow .2s; }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--primary); display: inline-flex; align-items: center; }
.stat__num .material-symbols-outlined { font-size: 1.9rem; }
.stat__label { color: var(--on-surface-variant); font-weight: 600; font-size: .9rem; }

/* ---------- Visual category tiles ---------- */
.vcat-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; }
.vcat { position: relative; border-radius: var(--radius-xl); overflow: hidden; display: block; box-shadow: var(--shadow-sm); }
.vcat--lg { grid-column: span 2; grid-row: span 2; }
.vcat__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--surface-low); transition: transform .6s ease; }
.vcat:hover .vcat__img { transform: scale(1.08); }
.vcat__scrim { position: absolute; inset: 0; background: rgba(12,18,32,.42); transition: background .3s; }
.vcat:hover .vcat__scrim { background: rgba(12,18,32,.55); }
.vcat__body { position: absolute; inset-block-end: 16px; inset-inline-start: 16px; inset-inline-end: 16px; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.vcat__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.vcat--lg .vcat__name { font-size: 1.5rem; }
.vcat__count { font-size: .82rem; opacity: .9; }
.vcat__go { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 2; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--glass-bg); backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff; transform: translateY(-6px); opacity: 0; transition: transform .3s, opacity .3s; }
.vcat:hover .vcat__go { transform: translateY(0); opacity: 1; }

@media (max-width: 980px) {
    .brandstrip { grid-template-columns: 1fr; }
    .vcat-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}
@media (max-width: 560px) {
    .hero-slide { aspect-ratio: 4 / 3; }
    .brandstrip__stats { grid-template-columns: 1fr 1fr; }
    .vcat--lg { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 860px) {
    .pdp { grid-template-columns: 1fr; }
}

/* === Product card refinements (white image bg · small shadow · fixed price · smooth hover) === */
.prod-grid, .carousel__track { perspective: none; }
.pcard { transform: none; transform-style: flat; box-shadow: 0 2px 12px rgba(16,24,40,0.06); border: 1px solid var(--outline-variant); transition: transform .3s ease, box-shadow .3s ease; }
.pcard:hover { transform: translateY(-8px); box-shadow: 0 14px 28px rgba(16,24,40,0.12); }
.pcard__media { background: #ffffff; padding: 16px; transform: none; aspect-ratio: 1 / 1; overflow: hidden; }
.pcard__media img { transform: none; filter: none; object-fit: contain; transition: transform .45s ease; }
.pcard:hover .pcard__media img { transform: scale(1.07); }
.pcard__body { transform: none; padding: 16px; gap: 10px; display: flex; flex-direction: column; flex: 1; }
.pcard__title { transform: none; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; }
.pcard__foot { transform: none; margin-top: auto; padding-top: 8px; align-items: center; }
.pcard__add { transform: none; background: var(--surface-container); box-shadow: none; }
.pcard__add:hover { background: var(--primary); color: var(--on-primary); transform: scale(1.06); box-shadow: none; }
.pcard__badge { transform: none; background: var(--error); box-shadow: none; }
.pcard__fav { transform: none; }
.pcard__fav:hover { transform: scale(1.1); }

/* Coupon + cart message */
.coupon-form { display: flex; gap: 8px; margin: 6px 0; }
.coupon-form input { flex: 1; padding: 10px 14px; border-radius: var(--radius-full); border: 1px solid var(--outline-variant); background: var(--surface); color: var(--on-surface); }
.coupon-form button { padding: 10px 18px; border-radius: var(--radius-full); background: var(--on-surface); color: var(--background); font-weight: 700; }
.coupon-remove { color: var(--error); font-weight: 600; font-size: .85rem; text-decoration: underline; }
.cart-msg { font-size: .85rem; color: var(--primary); margin: 4px 0; }

/* ============ Footer (redesigned) ============ */
.site-footer {
    margin-top: var(--section-gap);
    color: #cdd6ee;
    background:
        radial-gradient(130% 90% at 0% 0%, #15306a 0%, transparent 52%),
        linear-gradient(180deg, #0b1b3e 0%, #081530 100%);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--primary), var(--secondary)) 1;
}
.site-footer__inner {
    max-width: var(--container); margin-inline: auto;
    padding: clamp(44px, 6vw, 72px) var(--pad) 44px;
    display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.6fr; gap: clamp(28px, 4vw, 56px);
}

/* Brand */
.sf-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sf-logo { height: 50px; width: auto; max-width: 210px; object-fit: contain; filter: brightness(0) invert(1); }
.sf-tag { margin: 0; color: #9fabce; max-width: 38ch; line-height: 1.75; font-size: .95rem; }
.sf-social { display: flex; gap: 10px; margin-top: 2px; }
.sf-social a { width: 42px; height: 42px; border-radius: var(--radius-full); background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; transition: background .2s, transform .2s; }
.sf-social a:hover { background: var(--primary); transform: translateY(-3px); }

/* Headings + link columns */
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 18px; font-family: var(--font-display); font-weight: 800; }
.sf-col { display: flex; flex-direction: column; gap: 1px; }
.sf-col a { color: #a7b3d4; padding: 7px 0; font-size: .94rem; width: fit-content; transition: color .2s, transform .2s; }
.sf-col a:hover { color: #fff; transform: translateX(4px); }
html[dir="rtl"] .sf-col a:hover { transform: translateX(-4px); }

/* Contact + newsletter */
.sf-contact { display: flex; flex-direction: column; }
.sf-contact__lines { display: flex; flex-direction: column; gap: 3px; margin-bottom: 22px; }
.sf-line { display: flex; align-items: flex-start; gap: 10px; color: #a7b3d4; padding: 5px 0; font-size: .92rem; line-height: 1.5; transition: color .2s; }
.sf-line:hover { color: #fff; }
.sf-line .material-symbols-outlined { font-size: 1.2rem; color: var(--secondary); flex-shrink: 0; }
.sf-news-label { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: 11px; }
.sf-news-label .material-symbols-outlined { font-size: 1.15rem; color: var(--secondary); }
.sf-news { display: flex; gap: 8px; }
.sf-news input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font-size: .9rem; }
.sf-news input::placeholder { color: #8893b5; }
.sf-news input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 22%, transparent); }
.sf-news button { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--secondary); color: #fff; display: grid; place-items: center; transition: filter .2s, transform .2s; }
.sf-news button:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* Bottom bar */
.site-footer__bottom {
    max-width: var(--container); margin-inline: auto;
    padding: 22px var(--pad); display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; color: #8893b5; font-size: .86rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.sf-pay { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-paychip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); background: rgba(255,255,255,.07); color: #cdd6ee; font-weight: 600; font-size: .78rem; }
.sf-paychip .material-symbols-outlined { font-size: 1rem; color: var(--secondary); }

@media (max-width: 880px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
    .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
    .sf-logo { height: 46px; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Category filters ("refine by") ---------- */
.cat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.filters-panel { padding: 18px; border-radius: 18px; position: sticky; top: 90px; }
.filters-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filters-panel__head h3 { margin: 0; font-size: 16px; }
.filters-clear { font-size: 13px; color: var(--primary); text-decoration: underline; }
.filter-group { border-top: 1px solid var(--outline-variant, #e2e3ef); padding: 10px 0; }
.filter-group > summary { cursor: pointer; font-weight: 600; list-style: none; padding: 4px 0; }
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-opt { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 14px; cursor: pointer; }
.filter-opt input { inline-size: 16px; block-size: 16px; accent-color: var(--primary); }
@media (max-width: 860px) {
  .cat-layout { grid-template-columns: 1fr; }
  .filters-panel { position: static; }
}

/* === Product-card images: no shadow on the image itself (the CARD keeps its
   own shadow). Covers the resting AND hover states, overriding the earlier 3D
   drop-shadow rules so the picture sits flat inside the card. === */
.pcard__media img,
.pcard:hover .pcard__media img { filter: none; box-shadow: none; -webkit-filter: none; }

/* Out-of-stock product cards */
.pcard--out .pcard__media img { opacity: .55; }
.pcard__badge--out { background: var(--on-surface-variant, #64748b); }
.pcard__add--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.pcard__add--disabled:hover { transform: none; background: var(--surface-container); }


/* ════════════════════════════════════════════════════════════
   PRODUCT CARD v2  —  hover overlay · stars · description
   ════════════════════════════════════════════════════════════ */
.pcard {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 2px 12px rgba(16,24,40,.06);
    position: relative;
}
.pcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(16,24,40,.13);
}

/* Media */
.pcard__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
    padding: 16px;
}
.pcard__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: none; box-shadow: none;
    transition: transform .45s cubic-bezier(.25,.8,.25,1);
    display: block;
}
.pcard:hover .pcard__media img { transform: scale(1.06); }

/* Badges */
.pcard__badge {
    position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 3;
    background: var(--error); color: #fff;
    font-weight: 800; font-size: .72rem; letter-spacing: .3px;
    padding: 4px 10px; border-radius: var(--radius-full);
}
.pcard__badge--out { background: var(--on-surface-variant); }

/* Wishlist */
.pcard__fav {
    position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 3;
    width: 36px; height: 36px; border-radius: var(--radius-full);
    background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
    display: grid; place-items: center;
    color: var(--on-surface-variant);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: color .2s, transform .2s, background .2s;
}
.pcard__fav .material-symbols-outlined { font-size: 1.1rem; }
.pcard__fav:hover, .pcard__fav.active { color: var(--error); transform: scale(1.12); background: #fff; }
.pcard__fav.active .material-symbols-outlined { font-variation-settings: "FILL" 1; }

/* Hover overlay (quick-add) */
.pcard__overlay {
    position: absolute; inset: 0; z-index: 2;
    background: rgba(15,20,40,.55);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity .3s ease;
}
.pcard:hover .pcard__overlay { opacity: 1; }
.pcard__quick-add {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary); color: var(--on-primary);
    padding: 10px 22px; border-radius: var(--radius-full);
    font-weight: 700; font-size: .88rem;
    transform: translateY(10px);
    transition: transform .3s ease, background .2s;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb),.5);
}
.pcard:hover .pcard__quick-add { transform: translateY(0); }
.pcard__quick-add:hover { background: var(--primary-container); }
.pcard__quick-add .material-symbols-outlined { font-size: 1.1rem; }

.pcard__overlay--out { background: rgba(15,20,40,.45); cursor: not-allowed; }
.pcard__oos-label {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.5); color: #fff;
    padding: 8px 18px; border-radius: var(--radius-full);
    font-weight: 600; font-size: .85rem;
    transform: translateY(10px);
    transition: transform .3s ease;
}
.pcard:hover .pcard__oos-label { transform: translateY(0); }

/* Body */
.pcard__body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px; flex: 1;
    background: var(--surface);
    border-top: 1px solid var(--outline-variant);
}

/* Stars in card */
.pcard__stars {
    display: flex; align-items: center; gap: 2px;
    font-size: .88rem; line-height: 1;
}
.pcard__star { color: #e0e0e0; font-size: 1rem; }
.pcard__star--filled { color: #f5b301; }
.pcard__rcount { color: var(--on-surface-variant); font-size: .8rem; margin-inline-start: 4px; }

.pcard__title {
    font-family: var(--font-display); font-size: .98rem; font-weight: 700;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.6em;
}
.pcard__title a { color: var(--on-surface); transition: color .2s; }
.pcard__title a:hover { color: var(--primary); }

.pcard__desc {
    color: var(--on-surface-variant); font-size: .82rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Foot */
.pcard__foot {
    margin-top: auto; display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--outline-variant);
}
.pcard__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pcard__price-now {
    font-family: var(--font-display); font-weight: 900; font-size: 1.18rem;
    color: var(--primary);
}
.pcard__price-was {
    color: var(--outline); text-decoration: line-through; font-size: .85rem;
}

.pcard__add {
    flex-shrink: 0;
    width: 42px; height: 42px; border-radius: var(--radius-full);
    background: var(--surface-container);
    display: grid; place-items: center;
    color: var(--on-surface);
    transition: background .2s, color .2s, transform .2s;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.pcard__add .material-symbols-outlined { font-size: 1.15rem; }
.pcard__add:hover {
    background: var(--primary); color: var(--on-primary);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb),.35);
}
.pcard__add--disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pcard--out .pcard__media img { opacity: .5; }

/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE v2
   ════════════════════════════════════════════════════════════ */

/* Two-column layout */
.pdp2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

/* ── Gallery ─────────────────────────────────────────── */
.pdp2__gallery {
    display: flex; gap: 14px;
    position: sticky; top: 96px; align-self: start;
    justify-content: center;
}
.pdp2__main-wrap {
    position: relative;
    flex: 1; min-width: 0; max-width: 560px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--outline-variant);
    box-shadow: 0 12px 32px rgba(16,24,40,.07);
}
.pdp2__zoom {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    overflow: hidden;
    padding: clamp(10px, 2.5%, 22px);
    cursor: zoom-in;
}
.pdp2__zoom.is-zoomed { cursor: zoom-out; }
.pdp2__main-img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
    display: block;
}
.pdp2__sale-badge {
    position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 3;
    background: var(--error); color: #fff;
    font-weight: 800; font-size: .85rem;
    padding: 6px 14px; border-radius: var(--radius-full);
    box-shadow: 0 6px 14px rgba(var(--error-rgb),.32);
}
.pdp2__video-pill {
    position: absolute; inset-block-end: 14px; inset-inline-start: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(17,24,39,.82); color: #fff;
    font-weight: 700; font-size: .82rem;
    padding: 8px 14px; border-radius: var(--radius-full);
    cursor: pointer; border: none;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
}
.pdp2__video-pill:hover { background: #111827; transform: translateY(-1px); }
.pdp2__video-pill .material-symbols-outlined { font-size: 1.1rem; }
.pdp2__zoom-hint {
    position: absolute; inset-block-end: 14px; inset-inline-end: 14px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.92); color: var(--on-surface-variant);
    box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events: none;
}
.pdp2__zoom-hint .material-symbols-outlined { font-size: 1.25rem; }

/* Thumbnail rail */
.pdp2__thumbs {
    display: flex; flex-direction: column; gap: 10px;
    flex: 0 0 auto; max-height: 560px; overflow-y: auto;
    scrollbar-width: none;
}
.pdp2__thumbs::-webkit-scrollbar { display: none; }
.pdp2__thumb {
    width: 70px; height: 70px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--outline-variant);
    background: #fff; padding: 5px; overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer; flex: 0 0 auto;
}
.pdp2__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp2__thumb.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.18); }
.pdp2__thumb:hover:not(.is-active) { border-color: var(--on-surface-variant); }

/* ── Info column ─────────────────────────────────────── */
.pdp2__info { display: flex; flex-direction: column; gap: 20px; }
.pdp2__head { display: flex; flex-direction: column; gap: 10px; }

.pdp2__rating-row {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--on-surface-variant); font-size: .9rem; font-weight: 600;
    width: fit-content; transition: color .2s;
}
.pdp2__rating-row:hover { color: var(--primary); }
.pdp2__stars { display: inline-flex; }
.pdp2__star { color: #d6d9e0; font-size: 1.1rem; line-height: 1; }
.pdp2__star--filled { color: #f5b301; }
.pdp2__rating-num { color: var(--on-surface); font-weight: 800; }
.pdp2__rating-count { color: var(--on-surface-variant); font-size: .85rem; text-decoration: underline; text-underline-offset: 2px; }

.pdp2__title {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.25; font-weight: 800; margin: 0;
}
.pdp2__meta {
    display: flex; gap: 16px; flex-wrap: wrap; margin: 0;
    color: var(--on-surface-variant); font-size: .85rem;
}
.pdp2__meta span strong { color: var(--on-surface); }

.pdp2__lead {
    color: var(--on-surface-variant); font-size: .98rem; line-height: 1.7;
    margin: 0; max-width: 60ch;
}

/* Buy box card */
.pdp2__buybox {
    display: flex; flex-direction: column; gap: 18px;
    padding: 24px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-2xl);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%, var(--surface) 120px),
        var(--surface);
    box-shadow: 0 10px 34px rgba(16,24,40,.07);
}

/* Price */
.pdp2__price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.pdp2__price-now {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--primary); line-height: 1;
}
.pdp2__price-was { color: var(--outline); text-decoration: line-through; font-size: 1.05rem; }
.pdp2__price-save {
    background: color-mix(in srgb, var(--error) 12%, transparent);
    color: var(--error); font-weight: 800; font-size: .8rem;
    padding: 4px 11px; border-radius: var(--radius-full); align-self: center;
}
.pdp2__price-vat { color: var(--on-surface-variant); font-size: .8rem; flex-basis: 100%; }

/* Stock */
.pdp2__stock {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: .9rem; width: fit-content;
}
.pdp2__stock--in  { color: #16a34a; }
.pdp2__stock--out { color: var(--error); }
.pdp2__stock .material-symbols-outlined { font-size: 1.15rem; }

/* Buy row */
.pdp2__buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdp2__qty {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--radius-full); overflow: hidden; background: var(--surface);
}
.pdp2__qty-btn {
    width: 46px; height: 52px; display: grid; place-items: center;
    background: var(--surface-container); color: var(--on-surface); transition: background .2s;
}
.pdp2__qty-btn .material-symbols-outlined { font-size: 1.15rem; }
.pdp2__qty-btn:hover { background: var(--surface-high); }
#pdp-qty {
    width: 52px; height: 52px; text-align: center; border: none; outline: none;
    background: var(--surface); color: var(--on-surface);
    font-family: var(--font-body); font-weight: 700; font-size: 1rem; -moz-appearance: textfield;
}
#pdp-qty::-webkit-outer-spin-button,
#pdp-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp2__add-btn {
    height: 52px; padding: 0 24px; font-size: 1.02rem; font-weight: 700;
    flex: 1; min-width: 160px;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.pdp2__add-btn .material-symbols-outlined { font-size: 1.25rem; }
.pdp2__add-btn--out { background: var(--surface-container); color: var(--on-surface-variant); }
.pdp2__add-btn:disabled { opacity: .65; cursor: not-allowed; }

.pdp2__wish-btn {
    width: 52px; height: 52px; border-radius: var(--radius-full);
    border: 1.5px solid var(--outline-variant);
    display: grid; place-items: center; color: var(--on-surface-variant);
    transition: color .2s, border-color .2s, background .2s; background: var(--surface); flex-shrink: 0;
}
.pdp2__wish-btn .material-symbols-outlined { font-size: 1.3rem; }
.pdp2__wish-btn:hover, .pdp2__wish-btn.active {
    color: var(--error); border-color: var(--error); background: rgba(var(--error-rgb),.06);
}
.pdp2__wish-btn.active .material-symbols-outlined { font-variation-settings: "FILL" 1; }

/* Trust badges (inside buy box) */
.pdp2__trust {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px;
    padding-top: 18px; border-top: 1px solid var(--outline-variant);
}
.pdp2__trust-item {
    display: flex; align-items: center; gap: 10px;
    font-size: .85rem; font-weight: 600; color: var(--on-surface);
}
.pdp2__trust-item .material-symbols-outlined {
    color: var(--primary); font-size: 1.2rem;
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center; border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Share */
.pdp2__share {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: .88rem; color: var(--on-surface-variant); font-weight: 600;
}
.pdp2__share-label { display: inline-flex; align-items: center; gap: 4px; }
.pdp2__share-label .material-symbols-outlined { font-size: 1.1rem; }
.pdp2__share-btn {
    width: 38px; height: 38px; border-radius: var(--radius-full);
    background: var(--surface-container); display: grid; place-items: center;
    color: var(--on-surface-variant); transition: background .2s, color .2s, transform .2s;
}
.pdp2__share-btn:hover { background: var(--primary); color: var(--on-primary); transform: translateY(-2px); }

/* ── Sticky mobile add-to-cart bar ───────────────────── */
.pdp-bar { display: none; }

/* ── PDP responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .pdp2 { grid-template-columns: 1fr; gap: 24px; }
    .pdp2__gallery { position: static; flex-direction: column; justify-content: flex-start; }
    .pdp2__main-wrap { max-width: none; order: -1; }
    .pdp2__thumbs {
        flex-direction: row; order: 1; max-height: none;
        overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
    }
    .pdp2__buybox { padding: 18px; }

    .pdp-bar {
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 95;
        display: flex; align-items: center; gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 1px solid var(--outline-variant);
        box-shadow: 0 -8px 28px rgba(16,24,40,.14);
        transform: translateY(120%); transition: transform .28s ease;
    }
    .pdp-bar.is-visible { transform: none; }
    .pdp-bar__media {
        width: 46px; height: 46px; flex: 0 0 auto; border-radius: 10px;
        overflow: hidden; background: #fff; border: 1px solid var(--outline-variant);
    }
    .pdp-bar__media img { width: 100%; height: 100%; object-fit: contain; }
    .pdp-bar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .pdp-bar__price { font-family: var(--font-display); font-weight: 900; color: var(--primary); font-size: 1.1rem; line-height: 1.15; }
    .pdp-bar__name { color: var(--on-surface-variant); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pdp-bar__btn { height: 48px; padding: 0 20px; border-radius: var(--radius-full); white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 560px) {
    .pdp-bar__media { display: none; }
    .pdp-bar__btn-label { display: none; }
    .pdp-bar__btn { padding: 0 18px; }
}
@media (max-width: 480px) {
    .pdp2__trust { grid-template-columns: 1fr; }
    .pdp2__add-btn { min-width: 120px; }
}

/* ── Tabs ──────────────────────────────────────────────────── */
.pdp2-tabs {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}
.pdp2-tabs__nav {
    display: flex;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-low);
}
.pdp2-tabs__tab {
    flex: 1; padding: 16px 24px;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    color: var(--on-surface-variant);
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s, background .2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; background: transparent; border-top: none; border-left: none; border-right: none;
}
.pdp2-tabs__tab:hover { color: var(--primary); background: rgba(var(--primary-rgb),.04); }
.pdp2-tabs__tab.is-active {
    color: var(--primary); border-bottom-color: var(--primary);
    background: var(--surface);
}
.pdp2-tabs__badge {
    background: var(--primary); color: var(--on-primary);
    font-size: .72rem; font-weight: 800;
    padding: 2px 8px; border-radius: var(--radius-full);
    min-width: 22px; text-align: center;
}
.pdp2-tabs__panel {
    display: none;
    padding: clamp(20px, 4vw, 40px);
}
.pdp2-tabs__panel.is-active { display: block; }
.pdp2-desc { max-width: 780px; }

/* ── Product wide banner image ──────────────────────── */
.pdp-wide-img { margin: 32px 0; border-radius: var(--radius); overflow: hidden; }
.pdp-wide-img img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 480px; }

/* ── Product video tab panel ────────────────────────── */
.pdp-video-wrap { display: flex; justify-content: center; }
.pdp-video-wrap video { width: 100%; max-width: 900px; border-radius: var(--radius); background: #000; aspect-ratio: 16/9; }

/* ── Reviews ───────────────────────────────────────────────── */
.reviews { display: flex; flex-direction: column; gap: 32px; }

.reviews__overview {
    display: grid; grid-template-columns: auto 1fr; gap: 32px;
    align-items: center;
    padding: 24px;
    background: var(--surface-low);
    border-radius: var(--radius-xl);
}
@media (max-width: 560px) { .reviews__overview { grid-template-columns: 1fr; } }

.reviews__score {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    min-width: 120px;
}
.reviews__big-num {
    font-family: var(--font-display); font-weight: 900; font-size: 3.5rem;
    color: var(--primary); line-height: 1;
}
.reviews__big-stars { display: flex; gap: 3px; }
.reviews__score-sub { color: var(--on-surface-variant); font-size: .82rem; text-align: center; }

/* Rating bars */
.reviews__bars { display: flex; flex-direction: column; gap: 10px; }
.reviews__bar-row { display: flex; align-items: center; gap: 10px; }
.reviews__bar-label { font-size: .85rem; font-weight: 600; color: var(--on-surface-variant); min-width: 28px; white-space: nowrap; }
.reviews__bar-track {
    flex: 1; height: 8px; border-radius: var(--radius-full);
    background: var(--surface-high);
    overflow: hidden;
}
.reviews__bar-fill {
    height: 100%; border-radius: var(--radius-full);
    background: #f5b301;
    transition: width .5s ease;
}
.reviews__bar-count { font-size: .82rem; color: var(--on-surface-variant); min-width: 22px; text-align: end; }

/* Star helper */
.rvstar { color: #d8d8d8; font-size: 1.1rem; line-height: 1; }
.rvstar--on { color: #f5b301; }

/* Review list */
.reviews__list { display: flex; flex-direction: column; gap: 16px; }

.review-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 10px;
    transition: box-shadow .2s;
}
.review-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); }

.review-card__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.review-card__avatar {
    width: 42px; height: 42px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
    flex-shrink: 0;
}
.review-card__meta {
    display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.review-card__author { font-weight: 700; font-size: .95rem; }
.review-card__date { color: var(--on-surface-variant); font-size: .8rem; }
.review-card__stars { display: flex; gap: 2px; }
.review-card__verified {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(22,163,74,.1); color: #16a34a;
    font-size: .78rem; font-weight: 700;
    padding: 3px 10px; border-radius: var(--radius-full);
    margin-inline-start: auto;
}
.review-card__verified .material-symbols-outlined { font-size: .95rem; }
.review-card__title { font-weight: 700; font-size: .95rem; }
.review-card__body { color: var(--on-surface-variant); font-size: .92rem; line-height: 1.65; }

.reviews__empty { color: var(--on-surface-variant); font-style: italic; }
.reviews__sent {
    display: flex; align-items: center; gap: 10px;
    background: rgba(22,163,74,.1); color: #16a34a;
    padding: 14px 20px; border-radius: var(--radius-xl);
    font-weight: 600;
}
.reviews__sent .material-symbols-outlined { font-size: 1.4rem; }
.reviews__already { color: var(--on-surface-variant); font-style: italic; }
.reviews__errors {
    background: rgba(var(--error-rgb),.1); color: var(--error);
    border-radius: var(--radius-lg); padding: 12px 16px;
    font-size: .9rem; display: flex; flex-direction: column; gap: 4px;
}

/* Write review section */
.reviews__write {
    border-top: 1px solid var(--outline-variant); padding-top: 28px;
    display: flex; flex-direction: column; gap: 18px;
}
.reviews__write-title { font-size: 1.15rem; font-weight: 800; }

/* Review form */
.review-form { display: flex; flex-direction: column; gap: 18px; }

/* Star picker — DOM order is 1→5; flexbox + dir handle which side fills first.
   Fill state ('rf-star--on') is driven entirely by JS, so no CSS sibling trick. */
.review-form__stars {
    display: flex; align-items: center;
    gap: 4px; width: fit-content;
}
.rf-star {
    font-size: 2rem; color: #d8d8d8; cursor: pointer;
    transition: color .15s, transform .15s;
    line-height: 1; background: none; border: none; padding: 2px;
}
.rf-star--on { color: #f5b301; }
.rf-star:hover { transform: scale(1.15); }
.rf-star-label { font-size: .85rem; color: var(--on-surface-variant); margin-inline-start: 8px; }

.review-form__fields { display: flex; flex-direction: column; gap: 12px; }
.review-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .review-form__row { grid-template-columns: 1fr; } }
.review-form__input,
.review-form__textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--on-surface);
    font: inherit;
    transition: border-color .2s;
}
.review-form__input:focus,
.review-form__textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12);
}
.review-form__textarea { resize: vertical; min-height: 100px; }

.review-form__footer {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.review-form__submit {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: var(--radius-full);
}
.review-form__note { color: var(--on-surface-variant); font-size: .82rem; }
.review-form__msg { font-size: .9rem; font-weight: 600; min-height: 1.4em; }
.review-form__msg.ok  { color: #16a34a; }
.review-form__msg.err { color: var(--error); }

/* Admin row highlight */
.admin-row--highlight { background: color-mix(in srgb, var(--secondary) 5%, transparent); }
.admin-badge--warn { background: #fff3cd; color: #856404; }
.admin-badge--ok   { background: #d1e7dd; color: #0a3622; }

/* ═══════════════════════════════════════════════════════════
   MOBILE REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Touch targets: 44 px minimum on tablets / phablets ── */
@media (max-width: 768px) and (min-width: 481px) {
    .pcard__fav  { width: 44px; height: 44px; }
    .pcard__add  { width: 44px; height: 44px; }
    .pager a     { min-width: 44px; height: 44px; }
}

/* ── PDP tabs: horizontal scroll on small phones ── */
@media (max-width: 560px) {
    .pdp2-tabs__nav {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pdp2-tabs__nav::-webkit-scrollbar { display: none; }
    .pdp2-tabs__tab {
        flex: 0 0 auto;
        padding: 14px 16px;
        font-size: .88rem;
        white-space: nowrap;
    }
}

/* ── Compact 2-column product grid on phones (≤ 480 px) ── */
@media (max-width: 480px) {
    .prod-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    /* Tighter card media */
    .pcard__media { padding: 10px; }
    /* Tighter card body */
    .pcard__body  { padding: 10px; gap: 6px; }
    /* Hide secondary info in compact mode */
    .pcard__stars,
    .pcard__desc  { display: none; }
    /* Slightly smaller title — 2 lines still readable */
    .pcard__title { font-size: .85rem; min-height: 0; }
    /* Stack price above add-to-cart button so neither gets clipped */
    .pcard__foot {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 4px;
    }
    .pcard__price   { flex: 0 0 100%; }
    .pcard__add {
        margin-inline-start: auto;
        width: 38px; height: 38px;
    }
    .pcard__add .material-symbols-outlined { font-size: 1rem; }
    /* Wishlist button stays compact on 2-col cards */
    .pcard__fav { width: 36px; height: 36px; }
    /* Pager touch targets */
    .pager a { min-width: 44px; height: 44px; }
}

/* ════════════════════════════════════════════════════════════════
   PDP v3 — Newegg-style 3-column product page
   ════════════════════════════════════════════════════════════════ */
.pdp2--3col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) 342px;
    gap: 30px;
    align-items: start;
}
/* Gallery: main image on top, horizontal thumbnail strip below. Buy card
   sticks instead of the gallery, matching the reference layout. */
.pdp2--3col .pdp2__gallery { position: static; flex-direction: column; gap: 14px; }
.pdp2__thumbs--row { flex-direction: row; flex-wrap: wrap; max-height: none; overflow: visible; }
.pdp2__thumbs--row .pdp2__thumb { width: 66px; height: 66px; }

/* ── Info column highlights box ── */
.pdp2__highlights {
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    padding: 18px 20px;
}
.pdp2__highlights .pdp2__lead { margin: 0; max-width: none; }
.pdp2__more-link {
    margin-top: 12px; display: inline-flex; align-items: center; gap: 4px;
    color: var(--primary); font-weight: 700; font-size: .9rem; background: none; cursor: pointer;
}
.pdp2__more-link .material-symbols-outlined { font-size: 1rem; }

/* ── Buy card (sticky) ── */
.pdp2--3col .pdp2__buybox { position: sticky; top: 88px; align-self: start; }
.pdp2__save {
    display: inline-block; width: fit-content;
    background: color-mix(in srgb, var(--error) 13%, transparent); color: var(--error);
    font-weight: 800; font-size: .85rem; padding: 5px 12px; border-radius: var(--radius-full);
}
.pdp2--3col .pdp2__buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; }
.pdp2--3col .pdp2__add-btn { width: 100%; min-width: 0; }
.pdp2__wish-line {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    font-weight: 600; font-size: .9rem; color: var(--on-surface-variant);
    background: var(--surface-container); border: 1px solid var(--outline-variant);
    border-radius: var(--radius-full); padding: 9px 16px; cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.pdp2__wish-line .material-symbols-outlined { font-size: 1.1rem; }
.pdp2__wish-line:hover, .pdp2__wish-line.active {
    color: var(--error); border-color: var(--error); background: rgba(var(--error-rgb), .06);
}
.pdp2__wish-line.active .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.pdp2__soldby {
    font-size: .85rem; color: var(--on-surface-variant);
    padding-top: 14px; border-top: 1px solid var(--outline-variant);
}
.pdp2__soldby strong { color: var(--on-surface); }

/* ── Rich description: full-width images & video (the "stunning body") ── */
.pdp2-desc { line-height: 1.85; font-size: 1rem; color: var(--on-surface); }
.pdp2-desc img {
    max-width: 100%; height: auto; display: block; margin: 16px auto;
    border-radius: var(--radius-xl); box-shadow: 0 8px 26px rgba(16,24,40,.06);
}
.pdp2-desc iframe, .pdp2-desc video { max-width: 100%; border-radius: var(--radius-xl); }
.pdp2-desc h1, .pdp2-desc h2, .pdp2-desc h3 { margin: 26px 0 12px; line-height: 1.25; }
.pdp2-desc p { margin: 0 0 14px; }

/* ── Sticky sub-nav + mini buy bar (slides down on scroll) ── */
.pdp-subnav {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
    background: var(--surface); border-bottom: 1px solid var(--outline-variant);
    box-shadow: 0 4px 18px rgba(16,24,40,.08);
    transform: translateY(-105%); transition: transform .26s ease;
}
.pdp-subnav.is-visible { transform: translateY(0); }
.pdp-subnav__inner {
    max-width: 1280px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; padding: 9px 24px;
}
.pdp-subnav__tabs { display: flex; gap: 26px; min-width: 0; }
.pdp-subnav__tabs a {
    font-weight: 700; font-size: .95rem; color: var(--on-surface-variant);
    padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.pdp-subnav__tabs a:hover { color: var(--primary); border-color: var(--primary); }
.pdp-subnav__buy { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pdp-subnav__img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--outline-variant); }
.pdp-subnav__price { font-weight: 800; color: var(--primary); font-size: 1.05rem; }
.pdp-subnav__btn { height: 42px; padding: 0 20px; border-radius: var(--radius-full); }

/* ── Responsive ── */
@media (max-width: 1040px) {
    .pdp2--3col { grid-template-columns: 1fr; gap: 22px; }
    .pdp2--3col .pdp2__buybox { position: static; }
    .pdp-subnav { display: none; }
}
@media (max-width: 560px) {
    .pdp2__thumbs--row { flex-wrap: nowrap; overflow-x: auto; }
}

/* PDP v3 — info column refinements (content-rich middle like the reference) */
.pdp2--3col .pdp2__title { font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.pdp2--3col .pdp2__rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp2__rating-row .pdp2__rating-num { color: var(--on-surface); font-weight: 800; }
.pdp2__rating-row .pdp2__rating-count { color: var(--on-surface-variant); font-weight: 600; }
.pdp2__rating-sep { color: var(--outline); }
.pdp2__write-link { color: var(--primary); font-weight: 700; }
.pdp2__write-link:hover { text-decoration: underline; }
.pdp2__hl-title {
    margin: 0 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--on-surface-variant);
}

/* Product cards - vibrant retail stage */
.pcard {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), color-mix(in srgb, var(--primary) 3%, #fff) 100%) padding-box,
        linear-gradient(135deg, rgba(var(--primary-rgb), .55), rgba(var(--secondary-rgb), .42), rgba(34,197,94,.36)) border-box;
    box-shadow:
        0 18px 42px rgba(16,24,40,.10),
        0 2px 0 rgba(255,255,255,.9) inset;
    transform: translateY(0);
    transform-style: flat;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.pcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(145deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 38%),
        linear-gradient(0deg, rgba(var(--primary-rgb), .045), rgba(var(--secondary-rgb), .035));
}

.pcard:hover {
    transform: translateY(-10px);
    box-shadow:
        0 30px 70px rgba(16,24,40,.18),
        0 18px 34px rgba(var(--primary-rgb), .12),
        0 2px 0 rgba(255,255,255,.95) inset;
}

.pcard__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    margin: 10px 10px 0;
    padding: 24px 22px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--outline-variant));
    border-radius: 20px;
    background: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 1px 0 rgba(16,24,40,.04);
    transform: none;
}

.pcard__media::before {
    content: none;
}

.pcard__media::after {
    content: none;
}

.pcard__shine {
    display: none;
}

.pcard:hover .pcard__shine {
    transform: none;
}

.pcard__image-link {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.pcard__image-link img,
.pcard__media img {
    width: 100%;
    height: 100%;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: none !important;
    box-shadow: none !important;
    transform: translateY(0) scale(1);
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}

.pcard:hover .pcard__image-link img,
.pcard:hover .pcard__media img {
    filter: none !important;
    transform: translateY(-8px) scale(1.075) rotate(-1deg);
}

.pcard__badge {
    position: absolute;
    inset-block-start: 13px;
    inset-inline-start: 13px;
    z-index: 5;
    padding: 7px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff316c, var(--secondary));
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(255,49,108,.24);
    transform: none;
}

.pcard__badge--out {
    background: linear-gradient(135deg, #64748b, #334155);
    box-shadow: 0 10px 20px rgba(51,65,85,.18);
}

.pcard__fav {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: var(--on-surface-variant);
    box-shadow: 0 12px 28px rgba(16,24,40,.16);
    backdrop-filter: blur(12px);
    transform: none;
    transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.pcard__fav:hover,
.pcard__fav.active {
    color: var(--error);
    background: #fff;
    transform: scale(1.08);
    box-shadow: 0 16px 32px rgba(16,24,40,.2);
}

.pcard__fav .material-symbols-outlined {
    font-size: 1.22rem;
}

.pcard__fav.active .material-symbols-outlined {
    font-variation-settings: "FILL" 1;
}

.pcard__quick-add {
    display: none;
}

.pcard:hover .pcard__quick-add,
.pcard:focus-within .pcard__quick-add {
    opacity: 1;
    transform: translateY(0);
}

.pcard__quick-add:hover {
    background: var(--primary);
}

.pcard__quick-add .material-symbols-outlined {
    font-size: 1.05rem;
}

.pcard__oos-label {
    display: none;
}

.pcard__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 11px;
    padding: 18px 18px 20px;
    border-top: 0;
    background: transparent;
    transform: none;
}

.pcard__stars {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 18px;
    color: #f6b40b;
    font-size: .9rem;
    line-height: 1;
}

.pcard__star {
    color: #d7dee8;
    font-size: .94rem;
}

.pcard__star--filled {
    color: #f6b40b;
}

.pcard__rcount {
    margin-inline-start: 4px;
    color: var(--on-surface-variant);
    font-size: .78rem;
    font-weight: 700;
}

.pcard__title {
    min-height: 2.62em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.31;
    transform: none;
}

.pcard__title a {
    color: var(--on-surface);
    transition: color .18s ease;
}

.pcard__title a:hover {
    color: var(--primary);
}

.pcard__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    color: var(--on-surface-variant);
    font-size: .84rem;
    line-height: 1.45;
    transform: none;
}

.pcard__foot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 13%, var(--outline-variant));
    transform: none;
}

.pcard__price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    min-width: 0;
}

.pcard__price-now {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 950;
    line-height: 1;
    color: var(--primary);
}

.pcard__price-was {
    color: var(--outline);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: line-through;
}

.pcard__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary), #0877ff 52%, #00a3ff);
    color: #fff;
    box-shadow: 0 14px 26px rgba(var(--primary-rgb), .25);
    font-weight: 900;
    transform: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.pcard__add .material-symbols-outlined {
    font-size: 1.15rem;
}

.pcard__add-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .83rem;
}

.pcard__add:hover {
    color: #fff;
    background: linear-gradient(135deg, #003ed1, var(--primary) 52%, #00a3ff);
    box-shadow: 0 18px 34px rgba(var(--primary-rgb), .35);
    transform: translateY(-2px);
    filter: saturate(1.08);
}

.pcard__add--disabled,
.pcard__add--disabled:hover {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.pcard--out .pcard__image-link img,
.pcard--out .pcard__media img {
    opacity: .52;
}

.pcard:focus-within {
    outline: 3px solid rgba(var(--primary-rgb), .18);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .pcard:hover {
        transform: translateY(-4px);
    }

    .pcard__quick-add {
        display: none;
    }
}

@media (max-width: 480px) {
    .prod-grid {
        gap: 12px;
    }

    .pcard {
        border-radius: 18px;
        box-shadow: 0 12px 26px rgba(16,24,40,.10);
    }

    .pcard__media {
        margin: 6px 6px 0;
        padding: 13px 9px;
        border-radius: 14px;
        background: #fff;
    }

    .pcard__media::before {
        content: none;
    }

    .pcard__media::after {
        content: none;
    }

    .pcard:hover .pcard__image-link img,
    .pcard:hover .pcard__media img {
        transform: translateY(-3px) scale(1.035);
    }

    .pcard__badge {
        inset-block-start: 8px;
        inset-inline-start: 8px;
        padding: 5px 8px;
        font-size: .66rem;
    }

    .pcard__fav {
        inset-block-start: 8px;
        inset-inline-end: 8px;
        width: 34px;
        height: 34px;
        box-shadow: 0 10px 20px rgba(16,24,40,.14);
    }

    .pcard__fav .material-symbols-outlined {
        font-size: 1.05rem;
    }

    .pcard__body {
        padding: 11px;
        gap: 8px;
    }

    .pcard__stars,
    .pcard__desc {
        display: none;
    }

    .pcard__title {
        min-height: 2.55em;
        font-size: .86rem;
        line-height: 1.28;
    }

    .pcard__foot {
        gap: 9px;
        padding-top: 10px;
    }

    .pcard__price-now {
        font-size: 1rem;
    }

    .pcard__price-was {
        font-size: .72rem;
    }

    .pcard__add {
        height: 39px;
        border-radius: 12px;
        padding: 0 10px;
    }

    .pcard__add-label {
        display: none;
    }

    .pcard__oos-label {
        inset-inline: 10px;
        inset-block-end: 10px;
        min-height: 34px;
        padding: 0 10px;
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcard,
    .pcard *,
    .pcard::before,
    .pcard__media::before,
    .pcard__media::after {
        transition: none !important;
    }

    .pcard:hover,
    .pcard:hover .pcard__image-link img,
    .pcard:hover .pcard__media img {
        transform: none;
    }
}

/* Product cards - Noon-style retail tiles */
.cat-main .prod-grid,
.wishlist-page .prod-grid,
.offers-page .prod-grid,
.search-page .prod-grid,
.prod-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 14px;
    perspective: none;
}

.pcard {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    transform: none;
    transform-style: flat;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pcard::before {
    content: none;
}

.pcard:hover {
    transform: translateY(-2px);
    border-color: #d5dbe5;
    box-shadow: 0 8px 18px rgba(16,24,40,.08);
}

.pcard__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.34;
    margin: 0;
    padding: 24px 18px 46px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    transform: none;
}

.pcard__media::before,
.pcard__media::after {
    content: none;
}

.pcard__image-link {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.pcard__image-link img,
.pcard__media img,
.pcard:hover .pcard__image-link img,
.pcard:hover .pcard__media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: none !important;
    box-shadow: none !important;
    transform: none;
}

/* Hover image slideshow: stacked slides that cross-slide while hovering */
.pcard__image-link.has-slides { position: relative; }
.pcard__image-link.has-slides .pcard__slide {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    opacity: 0; transform: translateX(14%) scale(.985);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
}
.pcard__image-link.has-slides .pcard__slide.is-active {
    opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .pcard__image-link.has-slides .pcard__slide { transition: opacity .2s ease; transform: none; }
}

.pcard__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px 0 8px 0;
    background: #00564f;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: none;
    transform: none;
}

.pcard__badge--out { background: #667085; }
.pcard__badge--best_seller { background: #00564f; }
.pcard__badge--new { background: #2563eb; }
.pcard__badge--on_sale { background: #f59e0b; color: #1a1c1c; }
.pcard__badge--mega_sale { background: linear-gradient(135deg, #ff3d3d, #d31027); }

.pcard__fav {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4b5568;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
    transition: color .18s ease, transform .18s ease;
}

.pcard__fav .material-symbols-outlined {
    font-size: 2rem;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.pcard__fav:hover,
.pcard__fav.active {
    color: #d92d20;
    background: transparent;
    box-shadow: none;
    transform: scale(1.04);
}

.pcard__fav.active .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

.pcard__add {
    position: absolute;
    inset-inline-end: 12px;
    inset-block-end: 14px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e4e8ef;
    border-radius: 11px;
    background: #fff;
    color: #111827;
    box-shadow: 0 4px 10px rgba(16,24,40,.07);
    transform: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.pcard__add .material-symbols-outlined {
    font-size: 1.5rem;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.pcard__add-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pcard__add:hover {
    color: #111827;
    background: #fff;
    border-color: #cfd6e2;
    box-shadow: 0 6px 14px rgba(16,24,40,.12);
    transform: translateY(-1px);
    filter: none;
}

.pcard__add--disabled,
.pcard__add--disabled:hover {
    background: #f2f4f7;
    color: #98a2b3;
    border-color: #e4e7ec;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Inline cart widget: cart icon ⇄ quantity stepper */
.pcard__cart { position: absolute; inset-inline-end: 12px; inset-block-end: 14px; z-index: 6; }
.pcard__cart .pcard__add { position: static; }
.pcard__stepper {
    display: none; align-items: center; gap: 2px; height: 36px; padding: 0 3px;
    background: #fff; border: 1px solid #e4e8ef; border-radius: 11px;
    box-shadow: 0 4px 10px rgba(16,24,40,.1);
    animation: pcardStepIn .18s ease;
}
.pcard__cart.is-active .pcard__add { display: none; }
.pcard__cart.is-active .pcard__stepper { display: inline-flex; }
.pcard__step { width: 28px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--primary); border-radius: 8px; cursor: pointer; transition: background .15s; }
.pcard__step:hover { background: rgba(var(--primary-rgb), .12); }
.pcard__step .material-symbols-outlined { font-size: 1.2rem; }
.pcard__step-count { min-width: 22px; text-align: center; font-weight: 800; font-size: .95rem; color: #111827; font-variant-numeric: tabular-nums; }
@keyframes pcardStepIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pcard__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 14px;
    border-top: 1px solid #f0f2f5;
    background: #fff;
    text-align: start;
    transform: none;
}

.pcard__title {
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: .98rem;
    font-weight: 650;
    line-height: 1.26;
    color: #24272d;
    transform: none;
}

.pcard__title a {
    color: inherit;
}

.pcard__title a:hover {
    color: #111827;
}

.pcard__rating-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
}

.pcard__rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #f3f6fa;
    color: #222733;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.pcard__rating-chip--new {
    color: #00564f;
}

.pcard__rating-star {
    color: #008a19;
    font-size: .98rem;
    line-height: 1;
}

.pcard__rcount {
    margin: 0;
    color: #667085;
    font-size: .82rem;
    font-weight: 600;
}

.pcard__stars,
.pcard__desc,
.pcard__quick-add,
.pcard__oos-label {
    display: none;
}

.pcard__foot {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-start;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    transform: none;
}

.pcard__price {
    display: flex;
    flex: 0 1 auto;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    text-align: start;
}

.pcard__price-now {
    color: #101418;
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 950;
    line-height: 1.06;
}

.pcard__price-was {
    color: #98a2b3;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: line-through;
}

.pcard__discount {
    color: #08a735;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1;
}

.pcard__deal-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 18px;
    color: #667085;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
}

.pcard__deal-row .material-symbols-outlined {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: .74rem;
    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 20;
}

.pcard__deal-row span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unified single Fast-Delivery pill, pinned to a static position at the card bottom.
   Soft warm-yellow fill so it reads on white without being harsh. */
.pcard__express {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-top: auto;        /* push to the bottom of every card uniformly */
    height: 25px;
    padding: 0 12px 0 9px;
    border-radius: 999px;
    background: #fff6d6;
    color: #6b5600;
    border: 1px solid #ffe9a6;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.pcard__express-ic {
    color: #e6a100;
    font-size: 1.05rem !important;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20;
}

.pcard__express-txt { letter-spacing: .01em; }

.pcard--out .pcard__image-link img,
.pcard--out .pcard__media img {
    opacity: .48;
}

.pcard:focus-within {
    outline: 2px solid rgba(var(--primary-rgb), .22);
    outline-offset: 2px;
}

.carousel__track > .pcard,
.carousel__track--rows2 > .pcard {
    width: 235px;
}

.carousel__track--rows2 {
    grid-auto-columns: 235px;
}

@media (min-width: 1280px) {
    .cat-main .prod-grid,
    .prod-grid {
        grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
    }
}

@media (max-width: 760px) {
    .cat-layout {
        display: flex;
        flex-direction: column;
    }

    .cat-main {
        order: 1;
    }

    .filters-panel {
        order: 2;
    }

    .cat-main .prod-grid,
    .prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pcard:hover {
        transform: none;
        box-shadow: none;
    }

    .pcard__media {
        aspect-ratio: 1 / 1.18;
        padding: 20px 12px 40px;
    }

    .pcard__title {
        min-height: 0;
        -webkit-line-clamp: 2;
        font-size: .84rem;
        line-height: 1.26;
    }

    .pcard__price-now {
        font-size: .95rem;
    }

    .pcard__foot {
        flex-wrap: nowrap;
    }

    .pcard__price {
        flex: 0 1 auto;
    }

    .pcard__deal-row {
        font-size: .7rem;
    }

    .pcard__express {
        height: 22px;
        font-size: .68rem;
    }
}

@media (max-width: 480px) {
    .cat-main .prod-grid,
    .prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .pcard {
        border-radius: 9px;
        box-shadow: none;
    }

    .pcard__media {
        margin: 0;
        padding: 18px 10px 38px;
        border: 0;
        border-radius: 0;
        background: #fff;
    }

    .pcard__badge {
        min-height: 23px;
        padding: 0 8px;
        border-radius: 7px 0 7px 0;
        font-size: .68rem;
    }

    .pcard__fav {
        inset-block-start: 7px;
        inset-inline-end: 7px;
        width: 30px;
        height: 30px;
    }

    .pcard__fav .material-symbols-outlined {
        font-size: 1.65rem;
    }

    .pcard__add {
        inset-inline-end: 8px;
        inset-block-end: 10px;
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .pcard__cart { inset-inline-end: 8px; inset-block-end: 10px; }
    .pcard__stepper { height: 34px; }
    .pcard__step { width: 26px; height: 30px; }

    .pcard__add .material-symbols-outlined {
        font-size: 1.65rem;
    }

    .pcard__body {
        padding: 9px 10px 11px;
        gap: 6px;
    }

    .pcard__foot {
        flex-wrap: nowrap;
    }

    .pcard__price {
        flex: 0 1 auto;
    }

    .pcard__rating-chip {
        min-height: 20px;
        padding: 2px 5px;
        font-size: .72rem;
    }

    .pcard__rcount,
    .pcard__price-was,
    .pcard__discount {
        font-size: .7rem;
    }

    .pcard__express-time {
        padding-inline-end: 10px;
    }
}