/* Frontend Main Styles
   Colors & font come from dynamic CSS variables provided by ThemeService.
   Do NOT hard-code hex colors; always use semantic aliases or raw --site-color-* vars. */
:root {
  /* Semantic aliases referencing site color variables */
  /* NOTE: Do NOT define --font-primary here so the dynamic ThemeService value (settings DB) wins.
     All usages already provide a fallback: font-family: var(--font-primary, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
     If admin sets "Roboto Mono", monospace in Settings it will now apply correctly. */
  --color-bg-base: var(--site-color-bg);
  --color-surface: var(--site-color-extra);
  --color-border-base: var(--site-color-border);
  --color-text: var(--site-color-text-primary);
  --color-text-muted: var(--site-color-text-secondary);
  --color-text-inverse: var(--site-color-text-inverse);
  --color-brand: var(--site-color-accent);
  --color-brand-hover: var(--site-color-accent-hover);
  /* Footer explicit override variable (user-set) */
  --site-footer-color: var(--site-footer-color, var(--site-color-footer));
  /* Ratings (legacy gold / slate mapping) */
  --color-rating-filled: var(--site-color-rating-filled, #FFD700);
  --color-rating-empty: var(--site-color-rating-empty, #E2E8F0);
  --color-navbar-bg: var(--site-color-navbar);
  --color-footer-bg: var(--site-color-footer);
  /* Layout metrics */
  --top-bar-height: 40px;
  --navbar-height: 72px;
  --navbar-height-mobile: 64px;
}
/* Base Reset (lightweight) */
html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; }
body.site-body {
  margin: 0;
  font-family: var(--font-primary, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
  background: var(--color-bg-base);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* Prevent horizontal scroll bleed on mobile */
}

/* Wishlist Table (legacy color/font alignment) */
.wishlist-table-wrap { font-family: var(--font-primary); }
.wishlist-table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; font-weight:600; color: var(--color-text-muted); border-bottom:1px solid var(--color-border-base); }
.wishlist-table tbody td { vertical-align:middle; font-size:.85rem; color: var(--color-text); border-color: var(--color-border-base); }
.wishlist-table tbody tr:hover { background: color-mix(in srgb, var(--color-surface) 85%, transparent); }
.wishlist-price { color: var(--color-brand); font-weight:600; }
.wishlist-action-btn { font:500 .75rem/1 var(--font-primary); display:inline-flex; align-items:center; gap:.45rem; background: var(--color-brand); color: var(--color-text-inverse); border:1px solid var(--color-brand); padding:.55rem .8rem .5rem; border-radius:8px; cursor:pointer; letter-spacing:.4px; transition:background .25s,border-color .25s,box-shadow .25s; }
.wishlist-action-btn:hover, .wishlist-action-btn:focus-visible { background: var(--color-brand-hover); border-color: var(--color-brand-hover); box-shadow:0 4px 14px -4px rgba(0,0,0,.35); outline:none; }
.wishlist-action-btn:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }
.wishlist-action-btn i { font-size:.85rem; }
.wishlist-action-btn .lbl { display:inline-block; }
.wishlist-remove-btn { background:none; border:1px solid var(--color-border-base); width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color: var(--color-text-muted); cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
.wishlist-remove-btn:hover, .wishlist-remove-btn:focus-visible { background: color-mix(in srgb,var(--color-brand) 18%, transparent); color: var(--color-brand); border-color: var(--color-brand); outline:none; }
.wishlist-remove-btn i { font-size:.9rem; }

/* Wishlist name link color (explicit primary text variable) */
.wishlist-name-link { color: var(--site-color-text-primary, var(--color-text)); }
.wishlist-name-link:hover, .wishlist-name-link:focus { color: var(--color-brand-hover); }

/* Cart Table (legacy themed) */
.cart-table-wrap { font-family: var(--font-primary); }
.cart-table thead tr { background: var(--color-surface); }
.cart-table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.55px; font-weight:600; color: var(--color-text-muted); border-bottom:1px solid var(--color-border-base); }
.cart-table tbody td { border-color: var(--color-border-base); font-size:.85rem; color: var(--color-text); vertical-align:middle; }
.cart-img-box img { object-fit:cover; width:100%; height:100%; }
.cart-img-ratio { position:relative; width:70px; }
.cart-img { width:70px; height:70px; object-fit:cover; display:block; background:#f5f5f5; }
.cart-line-total { min-width:90px; }
.btn-legacy-primary { position:relative; display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.9rem; padding:.65rem 1.1rem; border-radius:4px; border:1px solid var(--site-color-accent); background:var(--btn-bg, var(--site-color-accent)); color:var(--site-color-text-inverse,#fff); text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.02); transition:.18s; }
.btn-legacy-primary:hover:not([disabled]) { background:var(--btn-bg-hover,var(--site-color-accent-hover)); color:var(--site-color-text-inverse,#fff); text-decoration:none; box-shadow:0 2px 5px rgba(0,0,0,.15); }
/* Accent button (uses configured icon/accent colors) */
.btn-accent { --btn-bg: var(--site-color-accent); --btn-bg-hover: var(--site-color-accent-hover); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-weight:600; font-size:.9rem; padding:.7rem 1.05rem; border-radius:8px; border:1px solid var(--site-color-accent); background:var(--btn-bg); color:var(--site-color-text-inverse,#fff); text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.02); transition:.22s; }
.btn-accent:hover:not([disabled]) { background:var(--btn-bg-hover); box-shadow:0 2px 6px rgba(0,0,0,.18); color:var(--site-color-text-inverse,#fff); }
.btn-accent:active:not([disabled]) { transform:translateY(1px); }
.btn-accent:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }
.btn-legacy-primary:active:not([disabled]) { transform:translateY(1px); }
.btn-legacy-primary[disabled] { opacity:.6; cursor:not-allowed; }
.wishlist-empty-state .browse-products-btn { min-width:190px; }
.cart-name-link { color: var(--site-color-text-primary, var(--color-text)); font-weight:600; text-decoration:none; }
.cart-name-link:hover, .cart-name-link:focus { color: var(--color-brand-hover); }
.cart-unit { font-weight:600; color: var(--color-brand); }
.cart-line-total { color: var(--color-brand); }
.cart-qty-group { display:flex; align-items:center; gap:.35rem; background:color-mix(in srgb,var(--color-surface) 85%, transparent); padding:.35rem .45rem; border:1px solid var(--color-border-base); border-radius:10px; width:140px; }
.cart-qty-btn { background:none; border:1px solid var(--color-border-base); width:30px; height:32px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; border-radius:8px; cursor:pointer; color: var(--color-text); transition:background .25s,border-color .25s,color .25s; }
.cart-qty-btn:hover, .cart-qty-btn:focus-visible { background:color-mix(in srgb,var(--color-brand) 18%, transparent); border-color: var(--color-brand); color: var(--color-brand); outline:none; }
.cart-qty-input { width:50px; text-align:center; border:1px solid var(--color-border-base); background:var(--color-surface); height:32px; border-radius:8px; font:500 .8rem/1 var(--font-primary); }
.cart-coupon-select { font:500 .7rem/1 var(--font-primary); }
.cart-remove-btn { background:none; border:1px solid var(--color-border-base); width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color: var(--color-text-muted); cursor:pointer; transition:background .25s,border-color .25s,color .25s; }
.cart-remove-btn:hover, .cart-remove-btn:focus-visible { background:color-mix(in srgb,var(--color-brand) 22%, transparent); color: var(--color-brand); border-color: var(--color-brand); outline:none; }

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
a:hover, a:focus { color: var(--color-brand-hover); }

/* Layout */
.site-main { min-height: 50vh; overflow-x: clip; }
.shop, .shop__layout { overflow-x: clip; }

/* Navbar Shell (unstyled placeholders; real styling later) */
.site-navbar { width: 100%; background: var(--color-navbar-bg); position: relative; z-index: 60; transition: background .35s, box-shadow .35s; }
.site-navbar__desktop { width: 100%; align-items: center; }
.site-navbar__mobile { width: 100%; align-items: center; }
.site-navbar__mobile-menu { background: var(--color-bg-base); }

/* Footer Shell */
.site-footer { background: var(--color-footer-bg); color: var(--color-text-inverse); }
.site-footer a { color: var(--color-text-inverse); }
.site-footer a:hover { color: var(--color-brand); }

/* Utility examples (expand later) */
.u-hidden { display: none !important; }

/* =====================
   Shop Mobile Filters (Horizontal Bar + Modal)
   ===================== */
@media (max-width: 1023.98px){
  .shop__filters { display:none !important; visibility:hidden !important; position:absolute !important; left:-9999px !important; }
  .shop-filters-bar { position:sticky; top:calc(var(--navbar-height-mobile,64px) + 0px); z-index:55; display:flex; gap:.6rem; padding:.6rem .65rem; overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--color-bg-base); border-bottom:1px solid var(--color-border-base); scrollbar-width:none; }
  .shop-filters-bar::-webkit-scrollbar { display:none; }
  .filters-pill { flex:0 0 auto; border:1px solid var(--color-border-base); background:color-mix(in srgb,var(--color-surface) 70%, transparent); color:var(--color-text); padding:.55rem .85rem; font:500 .7rem/1 var(--font-primary); border-radius:999px; cursor:pointer; position:relative; display:inline-flex; align-items:center; gap:.35rem; letter-spacing:.4px; transition:background .25s,border-color .25s,color .25s; }
  .filters-pill:hover, .filters-pill:focus-visible { background:color-mix(in srgb,var(--color-brand) 18%, transparent); border-color:var(--color-brand); outline:none; }
  .filters-pill--clear { color:var(--color-brand); border-color:var(--color-brand); background:color-mix(in srgb,var(--color-brand) 12%, transparent); }
  .filters-pill--clear:hover { background:color-mix(in srgb,var(--color-brand) 22%, transparent); }
  .pill-badge { min-width:18px; height:18px; padding:0 5px; font:600 .55rem/18px var(--font-primary); background:var(--color-brand); color:var(--color-text-inverse); border-radius:10px; display:inline-block; text-align:center; }
}

@media (min-width:1024px){
  .shop-filters-bar, .filters-modal { display:none; }
}

.filters-modal { position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; z-index:130; font-family:var(--font-primary); }
.filters-modal[aria-hidden="true"] { pointer-events:none; opacity:0; }
.filters-modal[aria-hidden="false"] { opacity:1; }
.filters-modal__overlay { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s; }
.filters-modal[aria-hidden="false"] .filters-modal__overlay { opacity:1; }
.filters-modal__panel { position:relative; width:100%; max-width:680px; background:linear-gradient(145deg, color-mix(in srgb,var(--color-surface) 82%, transparent), color-mix(in srgb,var(--color-surface) 92%, transparent)); border:1px solid var(--color-border-base); border-top-left-radius:24px; border-top-right-radius:24px; padding:1rem 1rem 1.2rem; box-shadow:0 -4px 24px -6px rgba(0,0,0,.25); transform:translateY(100%); transition:transform .5s cubic-bezier(.65,.05,.36,1); display:flex; flex-direction:column; max-height:82vh; }
.filters-modal[aria-hidden="false"] .filters-modal__panel { transform:translateY(0); }
.filters-modal__header { display:flex; align-items:center; justify-content:space-between; padding:.25rem .25rem .75rem; }
.filters-modal__title { font:600 .9rem/1.1 var(--font-primary); margin:0; letter-spacing:.6px; text-transform:uppercase; color:var(--color-text); }
.filters-modal__close { background:none; border:1px solid var(--color-border-base); width:34px; height:34px; border-radius:10px; font-size:1.15rem; color:var(--color-text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.filters-modal__close:hover, .filters-modal__close:focus-visible { border-color:var(--color-brand); color:var(--color-brand); outline:none; }
.filters-modal__body { flex:1 1 auto; overflow:auto; padding:.25rem .25rem .75rem; display:flex; flex-direction:column; gap:1rem; }
.filters-modal__footer { display:flex; gap:.65rem; padding:.75rem .25rem 0; border-top:1px solid var(--color-border-base); }
.filters-modal__apply, .filters-modal__cancel { flex:1 1 50%; font:600 .75rem/1 var(--font-primary); letter-spacing:.6px; padding:.85rem .95rem; border-radius:14px; cursor:pointer; border:1px solid var(--color-border-base); background:var(--color-surface); color:var(--color-text); transition:background .25s,border-color .25s,color .25s; text-transform:uppercase; }
.filters-modal__apply { background:var(--color-brand); border-color:var(--color-brand); color:var(--color-text-inverse); }
.filters-modal__apply:hover { background:var(--color-brand-hover); }
.filters-modal__cancel:hover { background:color-mix(in srgb,var(--color-brand) 14%, transparent); border-color:var(--color-brand); }

/* Injected group wrapper styling inside modal */
.filters-modal .filter__group { background:color-mix(in srgb,var(--color-surface) 85%, transparent); padding:.8rem .9rem 1rem; border:1px solid var(--color-border-base); border-radius:16px; box-shadow:0 2px 10px -4px rgba(0,0,0,.18); }
.filters-modal .filter__group .filter__title { font:600 .75rem/1 var(--font-primary); letter-spacing:.55px; margin:0 0 .65rem; text-transform:uppercase; color:var(--color-text-muted); }
.filters-modal .filter__list { max-height:240px; overflow:auto; margin:0; }
.filters-modal .price-single { padding:.25rem 0 0; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .filters-modal__panel { transition:none; }
  .filters-modal__overlay { transition:none; }
}

/* End initial scaffold */
/* Top Bar */
.top-bar {
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.8125rem; /* 13px */
  line-height: 1.2;
  border-bottom: 1px solid var(--color-border-base);
}
.top-bar__inner { min-height: 40px; gap: 1rem; }
.top-bar__contact a,
.top-bar__contact span,
.top-bar__link { color: var(--color-text); font-weight: 500; }
.top-bar__contact a:hover,
.top-bar__link:hover { color: var(--color-brand); }
.top-bar__divider { opacity: 0.4; }

/* Ticker */
.top-bar__ticker { flex: 1 1 auto; overflow: hidden; position: relative; }
.top-bar__ticker-track { display: inline-block; white-space: nowrap; animation: topbar-scroll 28s linear infinite; padding-left: 100%; }
.top-bar__ticker-text { display: inline-block; padding-right: 4rem; }
@keyframes topbar-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Auth links */
.top-bar__auth .top-bar__link { font-size: 0.8125rem; }

/* Desktop Navbar */
.site-navbar { border-bottom: 1px solid transparent; }
.site-navbar__inner { min-height: 72px; gap: 2.5rem; }
.site-navbar__logo { flex: 0 0 auto; }
.site-logo-text { font-size: 1.55rem; font-weight: 700; letter-spacing: .5px; color: var(--color-text); display: inline-block; }
.site-logo-link:hover .site-logo-text { color: var(--color-brand); }

/* Grid layout (activated in desktop breakpoint via responsive.css) */
.site-navbar-grid { grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; }

/* Scrolled / fixed state */
.site-navbar.is-scrolled { background: var(--color-navbar-bg); border-bottom-color: var(--color-border-base); box-shadow: 0 4px 18px -8px rgba(0,0,0,.25); position: sticky; top: 0; }

/* When search panel open force background for contrast */
.site-navbar.has-search-open { background: var(--color-navbar-bg); }
.site-navbar-grid .cell-left { justify-self: start; }
.site-navbar-grid .cell-center { justify-self: center; }
.site-navbar-grid .cell-right { justify-self: end; }

/* Ensure menu spans available center cell and stays centered */
.site-navbar-grid .site-navbar__menu { width: 100%; }

/* Primary menu */
.site-navbar__menu { gap: 2rem; }
.site-navbar__item { position: relative; }
.site-navbar__link { font-family: var(--font-primary); font-size: .95rem; font-weight: 500; color: var(--color-text); padding: .5rem 0; display: inline-block; position: relative; }
.site-navbar__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-brand-hover); transition: width .25s; }
.site-navbar__link:hover::after, .site-navbar__link:focus::after { width: 100%; }
.site-navbar__link:hover, .site-navbar__link:focus { color: var(--color-brand-hover); }
/* Enforce hover color in case of Bootstrap link overrides */
.site-navbar .site-navbar__menu .site-navbar__item > .site-navbar__link:hover,
.site-navbar .site-navbar__menu .site-navbar__item > .site-navbar__link:focus {
  color: var(--color-brand-hover) !important;
}

/* Actions (icons) */
.site-navbar__actions { flex: 0 0 auto; }
.nav-icon-btn { background: none; border: none; color: var(--color-brand); font-size: 1.05rem; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; transition: background .2s, color .2s; cursor: pointer; }
.nav-icon-btn:hover, .nav-icon-btn:focus { background: var(--color-surface); color: var(--color-brand-hover); }
.nav-icon-btn i { pointer-events: none; }
.nav-badge { position: absolute; top: 4px; right: 6px; background: var(--color-surface); color: var(--color-text); font-size: 0.6rem; line-height: 1; padding: 3px 5px; border-radius: 10px; font-weight: 600; min-width: 18px; text-align: center; border: 1px solid var(--color-border-base); }

/* Shared logo image (desktop & mobile) */
.site-logo-img { height: 70px; width: auto; display: block; }

/* Mobile / Tablet Navbar (shown <992px) */
.site-navbar__mobile-bar { min-height: 64px; padding: 0 .75rem; gap: .75rem; display: none; }
.hamburger-btn { background: none; border: 0; padding: 0; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; position: relative; transition: background .2s; }
.hamburger-btn:hover, .hamburger-btn:focus { background: var(--color-surface); }
.hamburger-box { width: 22px; height: 16px; position: relative; display: inline-block; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { position: absolute; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .3s, top .3s, opacity .2s; left: 0; }
.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { content: ""; top: -6px; }
.hamburger-inner::after { content: ""; top: 6px; }
.hamburger-btn[aria-expanded="true"] .hamburger-inner { transform: translateY(-50%) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] .hamburger-inner::before { top: 0; transform: rotate(90deg); }
.hamburger-btn[aria-expanded="true"] .hamburger-inner::after { top: 0; opacity: 0; }
.mobile-bar__actions .nav-icon-btn { width: 40px; height: 40px; }

/* Off-Canvas Drawer */
.site-drawer { position: fixed; inset: 0; z-index: 1040; pointer-events: none; }
.site-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .35s; }
.site-drawer__panel { position: absolute; top: 0; left: 0; height: 100%; width: min(310px, 86%); background: var(--color-bg-base); border-right: 1px solid var(--color-border-base); display: flex; flex-direction: column; padding: 1.25rem 1.15rem 1.5rem; transform: translateX(-100%); transition: transform .35s cubic-bezier(.65,.05,.36,1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border-base) 40%, transparent), 0 10px 25px -8px rgba(0,0,0,.25); }
.site-drawer.is-open { pointer-events: auto; }
.site-drawer.is-open .site-drawer__overlay { opacity: 1; }
.site-drawer.is-open .site-drawer__panel { transform: translateX(0); }
.site-drawer__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.drawer-welcome { font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.drawer-close-btn { background: none; border: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-text); font-size: 1.2rem; cursor: pointer; transition: background .2s, color .2s; }
.drawer-close-btn:hover, .drawer-close-btn:focus { background: var(--color-surface); color: var(--color-brand-hover); }
.drawer-user-icon { font-size: 1.15rem; color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); }
.drawer-user-name { font-weight: 600; font-size: .95rem; }
.drawer-search__form { width: 100%; }
.drawer-search__input { flex: 1 1 auto; background: var(--color-bg-base); border: 1px solid var(--color-border-base); border-radius: 6px; padding: .6rem .75rem; font-size: .9rem; color: var(--color-text); outline: none; transition: border-color .2s, box-shadow .2s; }
.drawer-search__input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 35%, transparent); }
.drawer-search__submit { background: var(--color-brand); color: var(--color-text-inverse); border: none; font-size: .8rem; font-weight: 600; padding: .6rem .95rem; border-radius: 6px; cursor: pointer; letter-spacing: .5px; transition: background .2s; }
.drawer-search__submit:hover, .drawer-search__submit:focus { background: var(--color-brand-hover); }
.drawer-nav { margin-bottom: 2rem; }
.drawer-menu li { margin: 0; }
.drawer-link { display: block; padding: .65rem 0; font-size: .95rem; font-weight: 500; color: var(--color-text); position: relative; }
.drawer-link:hover, .drawer-link:focus { color: var(--color-brand-hover); }
.drawer-contact { font-size: .8rem; color: var(--color-text-muted); }
.drawer-contact-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; color: var(--color-text-muted); }
.drawer-contact-item i { color: var(--color-brand); }

/* Accessibility helper for body lock (will add class via JS) */
.is-drawer-open { overflow: hidden; }

/* Desktop Dropdown Panels */
.site-navbar__item--has-dropdown { position: relative; }
.site-navbar__item--has-dropdown > .site-navbar__link { display: inline-flex; align-items: center; gap: .35rem; }
.site-navbar__item--has-dropdown .dropdown-panel { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 12px); min-width: 520px; background: var(--color-navbar-bg); border: 1px solid var(--color-border-base); border-radius: 10px; padding: 1.1rem 1.15rem; box-shadow: 0 6px 28px -10px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transition: opacity .22s, transform .22s; z-index: 50; }
.site-navbar__item--has-dropdown:hover > .dropdown-panel, .site-navbar__item--has-dropdown:focus-within > .dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 4px); }
.dropdown-panel__inner { display: flex; gap: 2rem; }
.dropdown-panel--categories .dropdown-col { flex: 1 1 0; }
.dropdown-col li { margin: 0; }
.dropdown-link { display: block; padding: .4rem 0; font-size: .85rem; color: var(--color-text); }
.dropdown-link:hover, .dropdown-link:focus { color: var(--color-brand-hover); }
.dropdown-empty { padding: .4rem 0; }

/* Active states */
.site-navbar__link.is-active, .site-navbar__item.is-active > .site-navbar__link { color: var(--color-brand); }
.drawer-link.is-active, .drawer-collapse-btn.is-active { color: var(--color-brand); }

/* Drawer collapsible sections */
.drawer-item-collapse { margin: .4rem 0; }
.drawer-collapse-btn { background: none; border: 0; padding: .65rem 0; width: 100%; text-align: left; font: inherit; font-weight: 600; color: var(--color-text); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: color .2s; }
.drawer-collapse-btn i { font-size: .75rem; transition: transform .25s; }
.drawer-collapse-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.drawer-collapse-btn:hover, .drawer-collapse-btn:focus { color: var(--color-brand-hover); }
.drawer-collapse { padding-bottom: .4rem; }
.drawer-sublink { display: block; padding: .45rem 0; font-size: .85rem; color: var(--color-text); }
.drawer-sublink:hover, .drawer-sublink:focus { color: var(--color-brand-hover); }

/* Search (expandable panel hidden by default) */
.navbar-search { background: var(--color-surface); border-bottom: 1px solid var(--color-border-base); }
.navbar-search[hidden] { display: none !important; }
.navbar-search__inner { padding: .75rem 0; }
.navbar-search__form { width: 100%; gap: .75rem; }
.navbar-search__input { flex: 1 1 auto; background: var(--color-bg-base); border: 1px solid var(--color-border-base); border-radius: 6px; padding: .65rem .85rem; font-size: .95rem; color: var(--color-text); outline: none; transition: border-color .2s, box-shadow .2s; }
.navbar-search__input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 35%, transparent); }
.navbar-search__submit { background: var(--color-brand); color: var(--color-text-inverse); border: none; font-size: .85rem; font-weight: 600; padding: .65rem 1.1rem; border-radius: 6px; cursor: pointer; letter-spacing: .5px; transition: background .2s; }
.navbar-search__submit:hover, .navbar-search__submit:focus { background: var(--color-brand-hover); }
.navbar-search__close { background: none; border: none; font-size: 1.1rem; color: var(--color-text-muted); width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s, color .2s; }
.navbar-search__close:hover, .navbar-search__close:focus { background: var(--color-bg-base); color: var(--color-brand); }

/* Future active state utility */
.is-active > .site-navbar__link, .site-navbar__link.is-active { color: var(--color-brand); }

/* Hero carousel removed for redesign */
/* Banner Carousel */
.banner-carousel { position: relative; width: 100%; overflow: hidden; background: var(--color-bg-base); }
.banner-carousel .carousel-track-viewport { width: 100%; overflow: hidden; }
.banner-carousel .carousel-track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .6s ease; will-change: transform; }
.banner-carousel .carousel-slide { flex: 0 0 100%; max-width: 100%; position: relative; }
.banner-carousel .carousel-image { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; background: #000; }
.banner-carousel .carousel-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.banner-carousel .carousel-progress__bar { width: 0%; height: 100%; background: var(--color-brand, #ff6a00); transform-origin: left center; transition: width linear; }
.banner-carousel.is-paused .carousel-progress__bar { animation-play-state: paused; }
.banner-carousel .carousel-track { cursor: grab; }
.banner-carousel.is-dragging .carousel-track { cursor: grabbing; }
.banner-carousel .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); border: 0; padding: 0; margin: -1px; }

/* Banner Link Styles */
.banner-carousel .banner-link { 
  display: block; 
  width: 100%; 
  height: 100%; 
  text-decoration: none; 
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.banner-carousel .banner-link:hover { 
  opacity: 0.9; 
  transform: scale(1.02);
}
.banner-carousel .banner-link:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}
.banner-carousel .banner-link .carousel-image {
  transition: inherit;
}

/* ---------------------------------------------
  Homepage 2025 Skeleton Sections
  --------------------------------------------- */
.home-content { display: block; }
.hp-section { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.hp-section + .hp-section { border-top: 1px solid var(--color-border-base); }
.hp-section__header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.hp-section__title { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); font-weight:600; letter-spacing:-.5px; }
.hp-section__link { font-size:.875rem; color: var(--color-brand); text-decoration:none; position:relative; }
.hp-section__link::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(.35); transform-origin:left; transition:.35s; }
.hp-section__link:hover::after { transform:scaleX(1); }
.hp-section__note { font-size:.75rem; color: var(--color-text-muted); }

/* Features strip (enhanced) */
.hp-features { background: var(--color-surface); padding: .85rem 0; position:relative; }
.hp-features-marquee { position:relative; overflow:hidden; }
.hp-features-marquee::before, .hp-features-marquee::after { content:""; position:absolute; top:0; width:56px; height:100%; pointer-events:none; z-index:2; }
.hp-features-marquee::before { left:0; background:linear-gradient(to right,var(--color-surface) 0%,rgba(255,255,255,0) 100%); }
.hp-features-marquee::after { right:0; background:linear-gradient(to left,var(--color-surface) 0%,rgba(255,255,255,0) 100%); }
.hp-features__list { list-style:none; margin:0; padding:0; display:flex; gap:.75rem; width:max-content; animation:features-marquee var(--features-speed,26s) linear infinite; }
.hp-features__list:hover { animation-play-state:paused; }
.hp-feature-item { background: var(--color-bg-base); border:1px solid var(--color-border-base); border-radius:10px; padding:.6rem .8rem; display:flex; align-items:center; gap:.55rem; font-size:.7rem; font-weight:600; line-height:1.1; letter-spacing:.3px; box-shadow:0 1px 2px rgba(0,0,0,.04); flex:0 0 auto; min-width:160px; }
.hp-feature-item:hover { border-color: color-mix(in srgb, var(--color-border-base) 60%, transparent); }
.hp-feature-icon { width:24px; height:24px; border-radius:8px; background: linear-gradient(135deg,var(--color-brand),var(--color-brand-hover)); display:flex; align-items:center; justify-content:center; color:var(--color-text-inverse); box-shadow:0 2px 4px -2px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.15) inset; }
.hp-feature-icon svg { width:18px; height:18px; stroke-width:1.6; }
@keyframes features-marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@media (min-width:900px){ .hp-features__list { --features-speed:22s; } }
@media (prefers-reduced-motion: reduce){
  .hp-features__list { animation:none; }
  .hp-features-marquee::before, .hp-features-marquee::after { display:none; }
}

/* Category grid */
/* Category slider */
.cat-slider { position:relative; display:flex; align-items:center; gap:.75rem; }
.cat-slider__viewport { overflow:hidden; flex:1 1 auto; }
.cat-slider__track { list-style:none; margin:0; padding:0; display:flex; gap:1rem; scroll-behavior:smooth; }
.cat-slide { width:110px; flex:0 0 auto; text-align:center; position:relative; }
@media (min-width:600px){ .cat-slide { width:120px; } }
@media (min-width:900px){ .cat-slide { width:130px; } }
.cat-avatar { width:100px; height:100px; margin:0 auto .55rem; border-radius:50%; position:relative; background:linear-gradient(145deg, var(--color-surface), var(--color-bg-base)); box-shadow:0 2px 6px -2px rgba(0,0,0,.18), 0 0 0 1px var(--color-border-base); overflow:hidden; }
@media (min-width:600px){ .cat-avatar { width:110px; height:110px; } }
@media (min-width:900px){ .cat-avatar { width:118px; height:118px; } }
.cat-avatar::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.cat-label { font-size:.7rem; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-slider__nav { background:var(--color-bg-base); color:var(--color-text); border:1px solid var(--color-border-base); width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; box-shadow:0 2px 6px -2px rgba(0,0,0,.25); transition:.25s; }
.cat-slider__nav:hover:not([disabled]) { color:var(--color-brand); border-color:var(--color-brand); }
.cat-slider__nav[disabled] { opacity:.35; cursor:default; }
.cat-slider__nav--prev, .cat-slider__nav--next { flex:0 0 auto; }
.cat-slider__nav.is-hidden { display:none !important; }
.cat-slider__viewport::before, .cat-slider__viewport::after { content:""; position:absolute; top:0; width:38px; height:100%; pointer-events:none; z-index:2; transition:opacity .25s; }
.cat-slider__viewport { position:relative; }
.cat-slider__viewport::before { left:0; background:linear-gradient(to right, var(--color-bg-base) 0%, rgba(255,255,255,0) 100%); }
.cat-slider__viewport::after { right:0; background:linear-gradient(to left, var(--color-bg-base) 0%, rgba(255,255,255,0) 100%); }

/* Compact mode (<=4 categories): center and scale avatars */
.cat-slider.is-compact { justify-content:center; }
.cat-slider.is-compact .cat-slider__viewport { flex:0 1 auto; }
.cat-slider.is-compact .cat-slider__track { justify-content:center; }
.cat-slider.is-compact .cat-slider__nav { display:none !important; }
.cat-slider.is-compact .cat-slider__viewport::before,
.cat-slider.is-compact .cat-slider__viewport::after { opacity:0; }
.cat-slider.is-compact .cat-slide { width:130px; }
@media (min-width:600px){ .cat-slider.is-compact .cat-slide { width:150px; } }
@media (min-width:900px){ .cat-slider.is-compact .cat-slide { width:170px; } }
.cat-slider.is-compact .cat-avatar { width:120px; height:120px; }
@media (min-width:600px){ .cat-slider.is-compact .cat-avatar { width:140px; height:140px; } }
@media (min-width:900px){ .cat-slider.is-compact .cat-avatar { width:160px; height:160px; } }
.cat-slide:focus-within .cat-avatar, .cat-slide:hover .cat-avatar { box-shadow:0 4px 10px -3px rgba(0,0,0,.3), 0 0 0 2px var(--color-brand); }
.cat-slider__track { scroll-snap-type:x mandatory; }
.cat-slide { scroll-snap-align:center; }
.cat-slider__track::-webkit-scrollbar { height:8px; }
.cat-slider__track::-webkit-scrollbar-thumb { background:var(--color-border-base); border-radius:4px; }

/* Product rows & grids */
.hp-product-row { display:grid; gap:1rem; grid-auto-flow:column; grid-auto-columns: clamp(140px, 38vw, 220px); overflow-x:auto; overflow-y:hidden; padding-bottom:.35rem; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; scroll-snap-type:x proximity; }
.hp-product-row::-webkit-scrollbar { display:none; }
.hp-product-row::-webkit-scrollbar-track { display:none; }
.hp-product-row::-webkit-scrollbar-thumb { display:none; }
.hp-product-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
@media (min-width:700px){ .hp-product-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }
.hp-product-card { background:var(--color-bg-base); border:1px solid var(--color-border-base); border-radius:14px; padding:.65rem .65rem .9rem; display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden; }
.hp-product-media { aspect-ratio: 3/4; border-radius:10px; background:var(--color-surface); }
.hp-product-info { display:flex; flex-direction:column; gap:.35rem; }

/* Trending product unique cards */
.hp-product-card--trend { --trend-border: color-mix(in srgb, var(--color-border-base) 70%, transparent); position:relative; background:linear-gradient(155deg,var(--color-bg-base),color-mix(in srgb,var(--color-surface) 65%, transparent)); border:1px solid var(--trend-border); border-radius:18px; padding:.75rem .75rem 1rem; display:flex; flex-direction:column; gap:.65rem; overflow:hidden; isolation:isolate; box-shadow:0 4px 18px -8px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb,var(--color-border-base) 60%, transparent); }
.hp-product-card--trend::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 18%, color-mix(in srgb,var(--color-brand) 22%, transparent), transparent 60%); opacity:.85; pointer-events:none; mix-blend-mode:overlay; }
.hp-prod__media-wrap { position:relative; }
.hp-prod__badge { position:absolute; top:8px; left:8px; background:linear-gradient(135deg,var(--color-brand),var(--color-brand-hover)); color:var(--color-text-inverse); font-size:.55rem; font-weight:700; padding:.35rem .5rem .3rem; border-radius:6px; letter-spacing:.8px; box-shadow:0 2px 6px -2px rgba(0,0,0,.4); z-index:2; }
.hp-prod__img-ratio { position:relative; width:100%; aspect-ratio: 5/6; border-radius:14px; overflow:hidden; background:var(--color-surface); display:flex; align-items:center; justify-content:center; }
.hp-prod__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease, filter .6s ease; }
.hp-prod__img.placeholder { font-size:2.2rem; font-weight:600; display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); background:linear-gradient(145deg,var(--color-surface),var(--color-bg-base)); width:100%; height:100%; }
.hp-prod__quick { position:absolute; bottom:10px; right:10px; background:var(--color-brand); color:var(--color-text-inverse); border:none; font-size:.6rem; font-weight:600; padding:.55rem .7rem; border-radius:10px; cursor:pointer; opacity:0; transform:translateY(4px); transition:.35s; letter-spacing:.6px; box-shadow:0 4px 14px -6px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb,var(--color-brand) 45%, transparent); }
.hp-product-card--trend:hover .hp-prod__quick, .hp-product-card--trend:focus-within .hp-prod__quick { opacity:1; transform:translateY(0); }
.hp-prod__quick:hover, .hp-prod__quick:focus { background:var(--color-brand-hover); }
.hp-product-card--trend:hover .hp-prod__img { transform:scale(1.06); filter:contrast(1.07) saturate(1.07); }
.hp-prod__info { display:flex; flex-direction:column; gap:.4rem; }
.hp-prod__title { font-size:.78rem; margin:0; font-weight:600; letter-spacing:.3px; line-height:1.25; }
.hp-prod__title a { color:var(--color-text); }
.hp-prod__title a:hover { color:var(--color-brand-hover); }
.hp-prod__meta { display:flex; align-items:center; gap:.45rem; font-size:.7rem; }
.hp-prod__price { font-weight:700; color:var(--color-brand); font-size:.75rem; letter-spacing:.4px; }
.hp-prod__price--old { font-size:.6rem; text-decoration:line-through; color:var(--color-text-muted); }
.hp-product-card--trend:focus-within { outline:2px solid var(--color-brand); outline-offset:3px; }
.hp-product-card--trend.is-loading { background:var(--color-bg-base); box-shadow:none; }


/* Promo row */
.hp-promo-row { display:grid; gap:1rem; }
@media (min-width:800px){ .hp-promo-row { grid-template-columns:repeat(2,1fr); } }
.hp-promo-row--single { grid-template-columns: minmax(0, 520px); justify-content:center; }
.hp-promo-row--single .hp-promo-card { aspect-ratio: 16/6; }
.hp-promo-card { position:relative; aspect-ratio: 5/3; border-radius:18px; background:var(--color-surface); overflow:hidden; display:block; isolation:isolate; }
.hp-promo-card .hp-promo-media, .hp-promo-media { width:100%; height:100%; position:relative; display:block; }
.hp-promo-card img { width:100%; height:100%; object-fit:cover; display:block; }
.hp-promo-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.55)); padding:1rem 1.1rem; color:#fff; opacity:0; transition:.5s; }
.hp-promo-card:hover .hp-promo-overlay, .hp-promo-card:focus .hp-promo-overlay { opacity:1; }
.hp-promo-meta { display:flex; flex-direction:column; gap:.4rem; }
.hp-promo-title { margin:0; font:600 .9rem/1.2 var(--font-primary,system-ui); letter-spacing:.4px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.hp-promo-cta { font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:var(--color-brand); color:var(--color-text-inverse); align-self:flex-start; padding:.45rem .7rem .4rem; border-radius:10px; box-shadow:0 4px 14px -6px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb,var(--color-brand) 50%, transparent); }
.hp-promo-card:hover .hp-promo-cta { background:var(--color-brand-hover); }
.hp-promo-card:focus { outline:2px solid var(--color-brand); outline-offset:3px; }

/* Personalized picks note */
.hp-personal { background: var(--color-surface); }

/* Blog cards */
.hp-blog-row { display:grid; gap:1.25rem; }
@media (min-width:800px){ .hp-blog-row { grid-template-columns:repeat(3,1fr); } }
.hp-blog-card { background:var(--color-bg-base); border:1px solid var(--color-border-base); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.hp-blog-media { aspect-ratio:16/9; background:var(--color-surface); }
.hp-blog-meta { padding:.85rem .9rem 1.05rem; display:flex; flex-direction:column; gap:.5rem; }

/* Brand row */
.hp-brand-row { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); align-items:center; }
.hp-brand-logo { aspect-ratio:3/2; border-radius:10px; background:var(--color-surface); border:1px solid var(--color-border-base); }

/* Newsletter */
.hp-newsletter { background: linear-gradient(135deg,var(--color-bg-base),var(--color-surface)); }
.hp-newsletter__inner { max-width:680px; margin:0 auto; text-align:center; }
.hp-newsletter__text { font-size:.9rem; color:var(--color-text-muted); margin:.75rem auto 1.25rem; }
.hp-newsletter__form { display:flex; flex-direction:column; gap:.75rem; align-items:center; }
@media (min-width:560px){ .hp-newsletter__form { flex-direction:row; } }
.hp-newsletter__input { flex:1 1 auto; min-width:0; padding:.7rem .9rem; border:1px solid var(--color-border-base); border-radius:10px; font:inherit; background:var(--color-bg-base); }
.hp-newsletter__input:focus { outline:2px solid var(--color-brand); outline-offset:2px; }
.hp-newsletter__btn { padding:.7rem 1.25rem; border:none; border-radius:10px; font:600 .9rem/1 var(--font-primary,system-ui); background:var(--color-brand); color:var(--color-text-inverse); cursor:pointer; transition:.25s; }
.hp-newsletter__btn:hover { background: var(--color-brand-hover); }

/* Skeleton loading primitives */
.skeleton-box { position:relative; overflow:hidden; background:linear-gradient(100deg, var(--color-surface) 20%, var(--color-bg-base) 40%, var(--color-surface) 60%); background-size:200% 100%; animation:skeleton-shimmer 1.4s linear infinite; }
.skeleton-text { height:.85rem; border-radius:4px; background:var(--color-surface); position:relative; overflow:hidden; }
.skeleton-text::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.65) 40%, transparent 80%); transform:translateX(-100%); animation:skeleton-slide 1.2s ease-in-out infinite; }
.skeleton-text--sm { height:.8rem; }
.skeleton-text--xs { height:.6rem; }
.skeleton-text.w-75 { width:75%; }
.skeleton-text.w-50 { width:50%; }
.skeleton-text.w-80 { width:80%; }
.skeleton-text.w-40 { width:40%; }
.skeleton-text.w-70 { width:70%; }
.skeleton-text.w-35 { width:35%; }
.skeleton-text.w-90 { width:90%; }
.skeleton-text.w-55 { width:55%; }
@keyframes skeleton-slide { to { transform:translateX(100%); } }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }

/* Utility */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =============================
   Testimonial / Reviews Slider 2025
   ============================= */
.hp-testimonials { background: linear-gradient(145deg, var(--color-bg-base), color-mix(in srgb, var(--color-surface) 65%, transparent)); position:relative; }
.hp-testimonials::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 70%); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }
.hp-reviews-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 320px); gap:1.15rem; overflow-x:auto; padding:.5rem .25rem 0; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; }
.hp-reviews-row::-webkit-scrollbar { display:none; }
.hp-review-card { scroll-snap-align:start; position:relative; display:flex; flex-direction:column; gap:.75rem; padding:1.1rem 1rem 1.05rem; border-radius:22px; background:linear-gradient(165deg, var(--color-surface), color-mix(in srgb, var(--color-bg-base) 55%, transparent)); border:1px solid color-mix(in srgb, var(--color-border-base) 65%, transparent); box-shadow:0 4px 18px -8px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb,var(--color-border-base) 55%, transparent); backdrop-filter:saturate(150%) blur(12px); isolation:isolate; min-height:190px; }
.hp-review-card:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(255,255,255,.35), rgba(255,255,255,0)); opacity:.55; pointer-events:none; mix-blend-mode:overlay; border-radius:inherit; }
.hp-review-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px -10px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb,var(--color-brand) 40%, transparent); }
.hp-review-card { transition:box-shadow .55s, transform .55s, border-color .5s; }
.hp-review-card .hp-review-stars { display:inline-flex; gap:3px; line-height:1; }
.hp-review-card .star { filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); transition:transform .45s, filter .45s; }
.hp-review-card .star.filled { animation:star-pop .6s cubic-bezier(.65,.2,.2,1); }
@keyframes star-pop { 0% { transform:scale(.4) rotate(-20deg); opacity:0; } 55% { transform:scale(1.15); opacity:1; } 100% { transform:scale(1); } }
.hp-review-text { font-size:.82rem; line-height:1.35; margin:0; color:var(--color-text); font-weight:500; position:relative; }
/* Author line should use secondary/muted text color per theme */
.hp-review-user { font-size:.7rem; letter-spacing:.5px; font-weight:700; text-transform:uppercase; color:var(--color-text-muted); margin-top:auto; }
.hp-review-card.is-loading { background:var(--color-bg-base); box-shadow:none; border-style:dashed; }
.hp-reviews-row:is(:hover,:focus-within) .hp-review-card:not(:hover) { opacity:.92; }
.hp-reviews-row.is-dragging { cursor:grabbing; }
@media (max-width:640px){ .hp-reviews-row { grid-auto-columns: clamp(240px, 78vw, 320px); } }
@media (prefers-color-scheme: dark){
  .hp-review-card { background:linear-gradient(160deg, color-mix(in srgb, var(--color-bg-base) 78%, #000), color-mix(in srgb, var(--color-surface) 22%, transparent)); box-shadow:0 4px 20px -8px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb,var(--color-border-base) 40%, transparent); }
  .hp-review-text { color:var(--color-text); }
  .hp-review-text:before { color:color-mix(in srgb,var(--color-brand) 70%, transparent); }
}

/* Focus outline for accessibility */
.hp-review-card:focus-within, .hp-review-card:focus { outline:2px solid var(--color-brand); outline-offset:3px; }

/* Testimonials nav buttons */
.hp-testimonials__nav { display:flex; gap:.5rem; }
.hp-testimonials-btn { background:var(--color-bg-base); color:var(--color-text); border:1px solid var(--color-border-base); width:42px; height:42px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; box-shadow:0 2px 6px -2px rgba(0,0,0,.25); transition:.3s; }
.hp-testimonials-btn:hover, .hp-testimonials-btn:focus { color:var(--color-brand); border-color:var(--color-brand); }
.hp-testimonials-btn:active { transform:scale(.9); }

/* =============================
   Stats Counters Section 2025
   ============================= */
.hp-stats { background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-bg-base) 65%, transparent)); position:relative; }
.hp-stats::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, color-mix(in srgb,var(--color-brand) 20%, transparent), transparent 70%); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }
.hp-stats-row { display:grid; gap:clamp(1rem,2vw,2.2rem); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); position:relative; }
.hp-stat { background:linear-gradient(160deg, var(--color-bg-base), color-mix(in srgb, var(--color-surface) 55%, transparent)); border:1px solid color-mix(in srgb,var(--color-border-base) 70%, transparent); border-radius:22px; padding:1.25rem 1.1rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; position:relative; overflow:hidden; isolation:isolate; box-shadow:0 4px 22px -10px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb,var(--color-border-base) 55%, transparent); }
.hp-stat:before { content:""; position:absolute; inset:0; background:linear-gradient(150deg,rgba(255,255,255,.4),rgba(255,255,255,0)); opacity:.6; pointer-events:none; mix-blend-mode:overlay; }
.hp-stat__value { font-size:clamp(1.8rem,1.4rem + 2vw,2.6rem); font-weight:700; letter-spacing:-1px; background:linear-gradient(90deg,var(--color-brand),var(--color-brand-hover)); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; line-height:1.05; }
.hp-stat__label { font-size:.72rem; letter-spacing:.45px; font-weight:600; text-transform:uppercase; color:var(--color-text-muted); }
.hp-stat:hover { transform:translateY(-5px); box-shadow:0 14px 34px -14px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb,var(--color-brand) 40%, transparent); }
.hp-stat { transition:transform .6s cubic-bezier(.25,.8,.25,1), box-shadow .6s, border-color .5s; }
@media (prefers-color-scheme: dark){
  .hp-stats { background:linear-gradient(130deg, color-mix(in srgb,var(--color-bg-base) 80%, #000), color-mix(in srgb,var(--color-surface) 25%, transparent)); }
  .hp-stat { background:linear-gradient(150deg, color-mix(in srgb,var(--color-bg-base) 85%, #000), color-mix(in srgb,var(--color-surface) 40%, transparent)); box-shadow:0 4px 24px -10px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb,var(--color-border-base) 40%, transparent); }
}
.hp-stat.is-done .hp-stat__value { filter:drop-shadow(0 4px 10px rgba(0,0,0,.15)); }

/* =============================
   Advanced Footer 2025
   ============================= */
.advanced-footer { --ft-bg: var(--site-footer-color, var(--site-color-footer, var(--color-footer-bg))); --ft-surface: color-mix(in srgb,var(--color-bg-base) 88%, var(--color-surface)); --ft-border: var(--color-border-base); --ft-text: var(--site-color-text-inverse, var(--color-text-inverse)); --ft-text-secondary: var(--site-color-text-secondary, var(--color-text-muted)); --ft-accent: var(--site-color-accent, var(--color-brand)); --ft-accent-hover: var(--site-color-accent-hover,var(--color-brand-hover)); color: var(--ft-text); background: var(--ft-bg); font-size:.85rem; line-height:1.4; position:relative; }
.advanced-footer a { color: var(--color-text-inverse); text-decoration:none; transition:color .25s, opacity .25s; }
.advanced-footer a:hover, .advanced-footer a:focus { color: var(--ft-accent-hover); }
.advanced-footer .container { width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(1rem,3vw,2rem); }
.ft-top { padding: clamp(2.2rem, 4vw, 3.2rem) 0 2.2rem; background: var(--site-footer-color); position:relative; }
.ft-grid { display:grid; gap:2.2rem clamp(1.6rem,2.5vw,2.8rem); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:start; }
.ft-col--brand { grid-column: span 2; min-width:240px; }
@media (max-width:760px){ .ft-col--brand { grid-column: span 1; } }
.ft-logo__text { font:700 clamp(1.15rem, 1rem + 1vw, 1.65rem)/1 var(--font-primary, system-ui); letter-spacing:.5px; display:inline-block; background:linear-gradient(90deg,var(--ft-accent),var(--color-brand-hover)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ft-intro { margin:.9rem 0 1.1rem; font-size:.78rem; max-width:320px; color:var(--color-text-inverse); opacity:.95; }
.ft-social { list-style:none; padding:0; margin:0; display:flex; gap:.65rem; }
.ft-social__link { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--color-text-inverse) 35%, transparent); border-radius:14px; font-size:.95rem; background:rgba(255,255,255,.06); backdrop-filter:saturate(160%) blur(4px); color:var(--ft-accent); }
.ft-social__link:hover { border-color:var(--ft-accent-hover); color:var(--ft-accent-hover); background:rgba(255,255,255,.12); }
.ft-heading { font:600 .8rem/1.2 var(--font-primary); letter-spacing:.8px; text-transform:uppercase; margin:0 0 .9rem; color:var(--color-text-inverse); position:relative; }
.ft-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.ft-links a { font-size:.75rem; letter-spacing:.4px; opacity:.85; }
.ft-links a:hover { opacity:1; }
.ft-col--newsletter { min-width:240px; }
.ft-news-text { margin:.1rem 0 1rem; font-size:.72rem; color:color-mix(in srgb,var(--color-text-inverse) 78%, transparent); max-width:300px; }
.ft-news-form { display:flex; flex-direction:column; gap:.65rem; }
.ft-news-field { display:flex; background:rgba(255,255,255,.08); border:1px solid color-mix(in srgb,var(--color-text-inverse) 25%, transparent); border-radius:14px; overflow:hidden; }
.ft-news-field input { flex:1 1 auto; background:transparent; border:none; padding:.65rem .75rem; font:500 .75rem/1.3 var(--font-primary); color:var(--color-text-inverse); outline:none; }
.ft-news-field input::placeholder { color:color-mix(in srgb,var(--color-text-inverse) 55%, transparent); }
.ft-news-submit { background:var(--ft-accent); color:var(--color-text-inverse); border:none; padding:.6rem .9rem; font:600 .72rem/1 var(--font-primary); letter-spacing:.6px; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; transition:.35s; }
.ft-news-submit:hover { background:var(--ft-accent-hover); }
.ft-news-disclaimer { font-size:.55rem; line-height:1.3; color:color-mix(in srgb,var(--color-text-inverse) 60%, transparent); display:inline-block; max-width:260px; }
.ft-news-disclaimer a { color:var(--ft-accent); }
.ft-news-disclaimer a:hover { color:var(--ft-accent-hover); }
.ft-payments { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1rem; }
.ft-payments__item { font:600 .58rem/1 var(--font-primary); background:rgba(255,255,255,.1); padding:.45rem .55rem .4rem; border-radius:10px; letter-spacing:.6px; border:1px solid color-mix(in srgb,var(--color-text-inverse) 25%, transparent); }

/* Trust bar */
.ft-trust { background:linear-gradient(120deg, var(--ft-bg), color-mix(in srgb,var(--ft-bg) 75%, var(--color-bg-base))); border-top:1px solid color-mix(in srgb,var(--ft-border) 55%, transparent); border-bottom:1px solid color-mix(in srgb,var(--ft-border) 55%, transparent); }
.ft-trust__inner { padding:.8rem 0; }
.ft-trust-list { list-style:none; margin:0; padding:0; display:flex; gap:1.75rem clamp(.75rem,2vw,2.4rem); flex-wrap:wrap; font:600 .6rem/1.2 var(--font-primary); letter-spacing:.6px; text-transform:uppercase; color:color-mix(in srgb,var(--color-text-inverse) 80%, transparent); }
.ft-trust-list i { color:var(--ft-accent); margin-right:6px; }

/* Bottom */
.ft-bottom { background:var(--site-color-extra); padding:1rem ; color:var(--site-color-text-secondary); }
.ft-bottom__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.ft-copy { font-size:.64rem; letter-spacing:.4px; color:var(--site-color-text-secondary); }
.ft-legal { list-style:none; margin:0; padding:0; display:flex; gap:1.1rem; font-size:.62rem; letter-spacing:.5px; text-transform:uppercase; }
.ft-legal a { opacity:.8; }
.ft-legal a:hover { opacity:1; }
.ft-bottom__left { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.ft-backtotop { width:42px; height:42px; border-radius:14px; border:1px solid color-mix(in srgb,var(--color-text-inverse) 30%, transparent); background:rgba(255,255,255,.08); color:var(--color-text-inverse); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem; transition:.35s; }
.ft-backtotop:hover { background:var(--ft-accent); color:var(--color-text-inverse); border-color:var(--ft-accent); }
.ft-credit { font-size:.62rem; letter-spacing:.4px; display:inline-flex; align-items:center; gap:.35rem; color:var(--site-color-text-secondary); }
.ft-credit__link { color:var(--ft-accent); font-weight:600; }
.ft-credit__link:hover { color:var(--ft-accent-hover); }
@media (max-width:920px){ .ft-credit { margin-top:.25rem; } }
.ft-col--contact { min-width:220px; }
.ft-contact-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; font-size:.7rem; }
.ft-contact-item { display:flex; align-items:flex-start; gap:.55rem; line-height:1.3; }
.ft-contact-icon { width:30px; height:30px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:var(--color-text-inverse); font-size:.85rem; flex-shrink:0; border:1px solid color-mix(in srgb,var(--color-text-inverse) 25%, transparent); transition:color .3s,border-color .3s; }
.ft-contact-text a { color:var(--color-text-inverse); word-break:break-all; }
.ft-contact-text a:hover { color:var(--ft-accent-hover); }
.ft-contact-item:hover .ft-contact-icon { color:var(--ft-accent-hover); border-color:var(--ft-accent-hover); }

@media (max-width:920px){
  .ft-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2rem 1.4rem; }
  .ft-bottom__inner { flex-direction:column; align-items:flex-start; }
  .ft-bottom__left { flex-direction:column; align-items:flex-start; gap:.75rem; }
}
@media (max-width:640px){
  .ft-trust-list { gap:1rem .85rem; font-size:.58rem; }
  .ft-social__link { width:34px; height:34px; border-radius:12px; }
  .ft-news-field input { font-size:.7rem; }
  .ft-links a { font-size:.72rem; }
  .ft-intro { font-size:.7rem; }
  .ft-copy { font-size:.6rem; }
}
@media (prefers-color-scheme: dark){
  .advanced-footer { --ft-surface: color-mix(in srgb,var(--color-bg-base) 80%, #000); }
  .ft-social__link { background:rgba(255,255,255,.06); }
  .ft-news-field { background:rgba(255,255,255,.06); }
  .ft-backtotop { background:rgba(255,255,255,.1); }
}

/* =============================
   Product Detail Page (PDP)
   ============================= */
.pdp { padding:clamp(1.5rem,2vw,2.5rem) 0 3rem; }
.pdp__grid { display:grid; gap:clamp(1.5rem,2.5vw,2.75rem); align-items:start; }
@media (min-width:900px){ .pdp__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.pdp-gallery { display:flex; flex-direction:column; gap:1rem; position:relative; }
.pdp-gallery__main { position:relative; border:1px solid var(--color-border-base); border-radius:20px; overflow:hidden; background:var(--color-surface); min-height:300px; display:flex; align-items:center; justify-content:center; }
.pdp-main-slide { inset:0; width:100%; height:100%; display:none; margin:0; }
.pdp-main-slide.is-active { display:flex; align-items:center; justify-content:center; }
.pdp-main-slide img { width:100%; height:100%; object-fit:contain; transition:transform .4s ease; }
.pdp-main-slide img.is-zoom { transform:scale(1.55); }
.pdp-gallery__thumbs { display:grid; gap:.55rem; grid-auto-flow:column; grid-auto-columns:70px; overflow-x:auto; padding:.25rem .25rem .35rem; scrollbar-width:none; -ms-overflow-style:none; }
.pdp-gallery__thumbs::-webkit-scrollbar { display:none; }
.pdp-thumb { border:1px solid var(--color-border-base); background:var(--color-bg-base); padding:0; border-radius:12px; overflow:hidden; cursor:pointer; transition:border-color .3s, box-shadow .3s; width:70px; height:70px; display:inline-flex; align-items:center; justify-content:center; }
.pdp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumb.is-active { border-color: var(--color-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--color-brand) 40%, transparent); }
.pdp-nav { position:absolute; top:50%; transform:translateY(-50%); background:var(--color-bg-base); color:var(--color-text); border:1px solid var(--color-border-base); width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.25rem; box-shadow:0 4px 14px -6px rgba(0,0,0,.4); transition:.3s; }
.pdp-nav:hover, .pdp-nav:focus { color:var(--color-brand); border-color:var(--color-brand); }
.pdp-nav--prev { left:.75rem; }
.pdp-nav--next { right:.75rem; }
.pdp-summary { display:flex; flex-direction:column; gap:1.25rem; }
.pdp-header { display:flex; flex-direction:column; gap:.6rem; }
.pdp-title { font-size:clamp(1.4rem,1.15rem + 1.4vw,2.1rem); line-height:1.15; margin:0; font-weight:700; letter-spacing:.5px; }
.pdp-rating { display:flex; align-items:center; gap:.5rem; font-size:.75rem; }
.pdp-rating__count { color:var(--color-text-muted); font-size:.7rem; }
.pdp-rating__count:hover { color:var(--color-brand); }
.pdp-pricing { display:flex; align-items:center; gap:.75rem; font-size:1.1rem; flex-wrap:wrap; }
.pdp-price-current { font-size:clamp(1.4rem,1.1rem + 1vw,2rem); font-weight:700; color:var(--site-color-text-primary,var(--color-text)); letter-spacing:.5px; }
.pdp-price-old { text-decoration:line-through; color:var(--site-color-text-secondary,var(--color-text-muted)); font-size:.9rem; }
.pdp-discount-pill { --disc-bg:#e63946; background:var(--disc-bg); color:#fff; font-size:.6rem; font-weight:700; padding:.4rem .6rem .35rem; border-radius:20px; letter-spacing:.7px; box-shadow:0 4px 10px -4px rgba(0,0,0,.35); display:inline-flex; align-items:center; gap:.25rem; position:relative; }
.pdp-discount-pill:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(255,255,255,0)); mix-blend-mode:overlay; pointer-events:none; }
.pdp-summary-text {  line-height:1.45; color:var(--color-text-muted); margin:0; }
.pdp-purchase { display:flex; flex-direction:column; gap:1rem; }
.pdp-qty { display:flex; flex-direction:column; gap:.35rem; }
.pdp-qty__label { font-size:.65rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--color-text-muted); }
.pdp-qty__ctrls { display:inline-flex; align-items:stretch; border:1px solid var(--color-border-base); border-radius:10px; overflow:hidden; }
.pdp-qty__btn { background:var(--color-surface); border:none; width:42px; font-size:1.1rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--color-text); transition:.25s; }
.pdp-qty__btn:hover, .pdp-qty__btn:focus { background:var(--color-brand); color:var(--color-text-inverse); }
.pdp-qty__input { width:70px; text-align:center; border:0; background:var(--color-bg-base); font:600 .9rem/1.2 var(--font-primary); color:var(--color-text); outline:none; }
.pdp-actions { display:flex; gap:.65rem; align-items:center; }
.pdp-btn { font:600 .8rem/1 var(--font-primary); letter-spacing:.6px; border-radius:12px; padding:.75rem 1.25rem; border:1px solid var(--color-border-base); background:var(--color-surface); color:var(--color-text); cursor:pointer; transition:.3s; display:inline-flex; align-items:center; gap:.45rem; }
.pdp-btn--primary { background:var(--color-brand); color:var(--color-text-inverse); border-color:var(--color-brand); }
.pdp-btn--primary:hover, .pdp-btn--primary:focus { background:var(--color-brand-hover); border-color:var(--color-brand-hover); }
/* Glass / gradient Add to Cart button */
.pdp-btn--addcart { --btn-grad:linear-gradient(135deg,var(--color-brand),var(--color-brand-hover)); --btn-glass:color-mix(in srgb,var(--color-surface) 55%, transparent); background:var(--btn-grad); color:var(--color-text-inverse); border:1px solid color-mix(in srgb,var(--color-brand) 55%, transparent); position:relative; backdrop-filter:saturate(160%) blur(10px); box-shadow:0 6px 20px -8px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb,var(--color-brand) 45%, transparent); font:600 .75rem/1 var(--font-primary); letter-spacing:.7px; padding:.9rem 1.35rem; }
.pdp-btn--addcart i { font-size:1rem; }
.pdp-btn--addcart:hover, .pdp-btn--addcart:focus { filter:brightness(1.08) saturate(1.1); transform:translateY(-2px); box-shadow:0 10px 28px -10px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb,var(--color-brand-hover) 50%, transparent); }
.pdp-btn--addcart:active { transform:translateY(0); }
.pdp-btn--addcart[disabled] { filter:grayscale(.5) brightness(.8); box-shadow:none; }
.pdp-btn--buynow { --btn-grad:linear-gradient(135deg,#dc3545,#c82333); --btn-glass:color-mix(in srgb,var(--color-surface) 55%, transparent); background:var(--btn-grad); color:var(--color-text-inverse); border:1px solid color-mix(in srgb,#dc3545 55%, transparent); position:relative; backdrop-filter:saturate(160%) blur(10px); box-shadow:0 6px 20px -8px rgba(220,53,69,.4), 0 0 0 1px color-mix(in srgb,#dc3545 45%, transparent); font:600 .75rem/1 var(--font-primary); letter-spacing:.5px; text-transform:uppercase; padding:.8rem 1.2rem; border-radius:8px; transition:all .25s cubic-bezier(.4,0,.2,1); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; }
.pdp-btn--buynow i { font-size:1rem; }
.pdp-btn--buynow:hover, .pdp-btn--buynow:focus { filter:brightness(1.08) saturate(1.1); transform:translateY(-2px); box-shadow:0 10px 28px -10px rgba(220,53,69,.55), 0 0 0 1px color-mix(in srgb,#c82333 50%, transparent); }
.pdp-btn--buynow:active { transform:translateY(0); }
.pdp-btn--buynow[disabled] { filter:grayscale(.5) brightness(.8); box-shadow:none; }

/* ================================
   ENHANCED STAR RATING SYSTEM
   ================================ */

/* Rating Display Stars (for showing current ratings) */
.pdp-stars-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.5rem;
}

.pdp-star-display {
    position: relative;
    display: inline-block;
    color: #ffc107;
    font-size: 1.1rem;
    line-height: 1;
}

.pdp-star-display .pdp-star-empty {
    color: #e0e0e0;
}

.pdp-star-display .pdp-star-filled {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffc107;
    white-space: nowrap;
}

.pdp-rating-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.pdp-rating-score {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--site-color-text-strong);
}

.pdp-rating__count {
    color: var(--site-color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.pdp-rating__count:hover {
    color: var(--site-color-accent);
    text-decoration: underline;
}

/* Interactive Star Rating Input */
.pdp-stars-select {
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 10px;
    margin: 0.5rem 0;
    direction: ltr;
}

.pdp-star-input {
    display: none;
}

.pdp-star-label {
    position: relative;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: #e0e0e0;
    transition: all 0.2s ease;
    user-select: none;
    padding: 0.25rem;
    border-radius: 4px;
    display: inline-block;
}

.pdp-star-label:hover {
    transform: scale(1.1);
}

.pdp-star-label i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.pdp-star-label .fa-regular {
    opacity: 1;
    color: #e0e0e0;
}

.pdp-star-label .fa-solid {
    opacity: 0;
    color: #ffc107;
}

/* Default state - all stars empty */
.pdp-star-label .fa-regular {
    opacity: 1;
    color: #e0e0e0;
}

.pdp-star-label .fa-solid {
    opacity: 0;
    color: #ffc107;
}

/* Hover state - JavaScript handles the logic */
.pdp-star-label:hover {
    transform: scale(1.1);
}

/* Active/filled state */
.pdp-star-label.star-filled .fa-regular {
    opacity: 0;
}

.pdp-star-label.star-filled .fa-solid {
    opacity: 1;
    color: #ffc107;
}

/* Selected state for radio inputs */
.pdp-star-input:checked + .fa-regular {
    opacity: 0;
}

.pdp-star-input:checked + .fa-solid {
    opacity: 1;
    color: #ffc107;
}

/* Rating Text Feedback */
.pdp-rating-text {
    font-size: 0.85rem;
    color: var(--site-color-text-muted);
    margin-top: 0.25rem;
    height: 1.2rem;
    transition: color 0.2s ease;
}

.pdp-rating-text.has-rating {
    color: var(--site-color-accent);
    font-weight: 500;
}

/* Review Stars */
.pdp-review__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.5rem;
}

.pdp-review__rating .pdp-star-display {
    font-size: 0.9rem;
}

.pdp-review__rating .fa-star {
    color: #ffc107;
}

.pdp-review__rating .fa-regular {
    color: #e0e0e0;
}

/* Rating Input Label */
.pdp-rating-input__label {
    font-weight: 600;
    color: var(--site-color-text-strong);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Accessibility Improvements */
.pdp-star-label:focus-visible {
    outline: 2px solid var(--site-color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-star-label,
    .pdp-star-label i,
    .pdp-rating-text {
        transition: none;
    }
    
    .pdp-star-label:hover {
        transform: none;
    }
}

/* Rating Breakdown (Amazon/Flipkart style) */
.pdp-rating-breakdown {
    background: var(--site-color-surface);
    border: 1px solid var(--site-color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.pdp-breakdown-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--site-color-text-strong);
    margin-bottom: 1rem;
}

.pdp-breakdown-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.pdp-breakdown-row:last-child {
    margin-bottom: 0;
}

.pdp-breakdown-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 50px;
    font-size: 0.9rem;
}

.pdp-breakdown-label .star-count {
    font-weight: 500;
    color: var(--site-color-text-strong);
}

.pdp-breakdown-label .fa-star {
    color: #ffc107;
    font-size: 0.8rem;
}

.pdp-breakdown-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.pdp-breakdown-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffc107, #ff9800);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.pdp-breakdown-count {
    min-width: 30px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--site-color-text-muted);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .pdp-star-label {
        font-size: 1.6rem;
        padding: 0.4rem;
    }
    
    .pdp-stars-select {
        gap: 10px;
        justify-content: center;
    }
    
    .pdp-rating-details {
        justify-content: center;
        text-align: center;
    }
    
    .pdp-rating-breakdown {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .pdp-breakdown-row {
        gap: 0.5rem;
    }
    
    .pdp-breakdown-label {
        min-width: 40px;
        font-size: 0.8rem;
    }
    
    .pdp-breakdown-bar {
        height: 6px;
    }
    
    .pdp-breakdown-count {
        min-width: 25px;
        font-size: 0.8rem;
    }
}

/* Attribute badges list */
.pdp-attr-badges { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.pdp-attr-badges { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; -ms-overflow-style:auto; }
.pdp-attr-badges::-webkit-scrollbar { height:6px; }
.pdp-attr-badges::-webkit-scrollbar-track { background:transparent; }
.pdp-attr-badges::-webkit-scrollbar-thumb { background:var(--color-border-base); border-radius:4px; }
.pdp-attr-badge { background:linear-gradient(140deg,var(--color-surface),color-mix(in srgb,var(--color-bg-base) 70%, transparent)); border:1px solid color-mix(in srgb,var(--color-border-base) 65%, transparent); padding:.5rem .7rem .45rem; border-radius:14px; font:600 .58rem/1.1 var(--font-primary); letter-spacing:.6px; display:inline-flex; gap:.3rem; align-items:center; position:relative; box-shadow:0 2px 8px -3px rgba(0,0,0,.2), 0 0 0 1px color-mix(in srgb,var(--color-border-base) 55%, transparent); backdrop-filter:saturate(140%) blur(6px); }
.pdp-attr-badge__label { color:var(--site-color-text-secondary,var(--color-text-muted)); font-weight:700; text-transform:uppercase; }
.pdp-attr-badge a { color:var(--color-text); text-decoration:none; }
.pdp-attr-badge a:hover { color:var(--color-brand-hover); }

/* Ensure summary text uses secondary color */
.pdp-summary-text { color:var(--site-color-text-secondary,var(--color-text-muted)); }
.pdp-btn--icon { width:46px; height:46px; justify-content:center; font-size:1.05rem; }
.pdp-btn--icon:hover { background:var(--color-brand); color:var(--color-text-inverse); border-color:var(--color-brand); }
.pdp-btn[disabled] { opacity:.55; cursor:not-allowed; }
.pdp-stock { font-size:.7rem; display:flex; align-items:center; gap:.45rem; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; -ms-overflow-style:auto; padding:.25rem .35rem .25rem 0; }
.pdp-stock::-webkit-scrollbar { height:6px; }
.pdp-stock::-webkit-scrollbar-track { background:transparent; }
.pdp-stock::-webkit-scrollbar-thumb { background:var(--color-border-base); border-radius:4px; }
.pdp-badge { display:inline-block; font:700 .8rem/1 var(--font-primary); padding:.4rem .55rem .35rem; border-radius:8px; letter-spacing:.6px; }
.pdp-badge--ok { background:color-mix(in srgb,var(--color-brand) 25%, transparent); color:var(--color-brand); }
.pdp-badge--warn { background:linear-gradient(135deg,#f7d470,#f3c24d); color:#553d00; }
.pdp-badge--out { background:#d83d3d; color:#fff; }
.pdp-attrs { width:100%; border-collapse:collapse; font-size:.7rem; }
.pdp-attrs th { text-align:left; font-weight:600; padding:.4rem .4rem .35rem 0; color:var(--color-text-muted); letter-spacing:.5px; text-transform:uppercase; }
.pdp-attrs td { padding:.4rem 0 .35rem; font-size:.7rem; }
.pdp-variants { margin-top:.5rem; display:flex; flex-direction:column; gap:.8rem; }
.pdp-section-title { font:600 1.8rem/1.2 var(--font-primary); text-transform:uppercase; letter-spacing:.8px; margin:0 0 .4rem; color:var(--color-text); padding: 15px;}
.pdp-variants__grid { display:grid; gap:.65rem; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
.pdp-variant-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--color-border-base); background:var(--color-bg-base); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--color-text); padding:0; transition:.3s; }
.pdp-variant-card:hover, .pdp-variant-card:focus { border-color:var(--color-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--color-brand) 45%, transparent); }
.pdp-variant-card.is-active { border-color:var(--color-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--color-brand) 55%, transparent); }
.pdp-variant-card__media { aspect-ratio: 4/3; background:var(--color-surface); display:flex; align-items:center; justify-content:center; }
.pdp-variant-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-variant-card__info { padding:.55rem .6rem .6rem; display:flex; flex-direction:column; gap:.35rem; }
.pdp-variant-card__label { font-size:.6rem; font-weight:600; letter-spacing:.4px; line-height:1.2; }
.pdp-variant-card__price { font-size:.6rem; display:flex; gap:.35rem; align-items:center; }
.pdp-variant-card__price .cur { font-weight:700; color:var(--color-brand); }
.pdp-variant-card__price .old { text-decoration:line-through; color:var(--color-text-muted); font-size:.55rem; }

/* Tabs */
.pdp-tabs { margin-top:3rem; border-top:1px solid var(--color-border-base); padding:2.25rem 0 0; }
.pdp-tablist { display:flex; gap:.85rem; flex-wrap:wrap; margin:0 0 1.25rem; }
.pdp-tab { background:var(--color-surface); border:1px solid var(--color-border-base); padding:.6rem .95rem; border-radius:10px; font:600 .7rem/1 var(--font-primary); letter-spacing:.6px; cursor:pointer; color:var(--color-text); transition:.3s; }
.pdp-tab.is-active, .pdp-tab:hover, .pdp-tab:focus { background:var(--color-brand); color:var(--color-text-inverse); border-color:var(--color-brand); }
.pdp-tabpanels { position:relative; }
.pdp-panel { display:none; animation:fadeIn .3s ease; }
.pdp-panel.is-active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }
.pdp-description { font-size:1.1rem; line-height:1.55; }
.pd-summary { font-size:1.1rem; line-height:1.55; }

/* Reviews */
.pdp-review-form { display:flex; flex-direction:column; gap:1rem; margin:0 0 1.5rem; background:var(--color-surface); border:1px solid var(--color-border-base); padding:1rem 1rem 1.1rem; border-radius:16px; }
/* Duplicate legacy star rating styles removed. Using unified enhanced star rating block earlier in file. */
.pdp-field__label { font:600 .6rem/1 var(--font-primary); letter-spacing:.55px; text-transform:uppercase; color:var(--color-text-muted); display:block; margin:0 0 .4rem; }
.pdp-textarea { width:100%; resize:vertical; min-height:130px; border:1px solid var(--color-border-base); background:var(--color-bg-base); border-radius:10px; padding:.65rem .75rem; font:500 .8rem/1.4 var(--font-primary); color:var(--color-text); outline:none; transition:border-color .25s, box-shadow .25s; }
.pdp-textarea:focus { border-color:var(--color-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand) 40%, transparent); }
.pdp-field-error { display:block; color:var(--color-brand); font-size:.6rem; margin-top:.3rem; }
.pdp-alert { background:color-mix(in srgb,var(--color-brand) 25%, transparent); border:1px solid var(--color-brand); color:var(--color-brand); padding:.75rem .85rem; border-radius:12px; font:600 .7rem/1.2 var(--font-primary); }
.pdp-auth-note { font-size:1.1rem; color:var(--color-text-muted); }
.pdp-auth-note a { color:var(--color-brand); }
.pdp-auth-note a:hover { color:var(--color-brand-hover); }
.pdp-reviews-list { display:grid; gap:1rem; }
.pdp-review { background:linear-gradient(160deg,var(--color-surface),color-mix(in srgb,var(--color-bg-base) 60%, transparent)); border:1px solid color-mix(in srgb,var(--color-border-base) 60%, transparent); padding:1rem .95rem .95rem; border-radius:18px; display:flex; flex-direction:column; gap:.55rem; box-shadow:0 4px 16px -8px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb,var(--color-border-base) 50%, transparent); backdrop-filter:saturate(150%) blur(8px); }
.pdp-review__rating { font-size:.75rem; letter-spacing:2px; display:inline-flex; align-items:center; }
.pdp-star { color:var(--color-rating-empty); font-size:1.4rem; line-height:1; }
.pdp-star.is-filled { color:var(--color-rating-filled); }
.pdp-review__text { font-size:.72rem; line-height:1.4; margin:0; color:var(--color-text); font-weight:500; }
.pdp-review__author { font-style:normal; font-size:.6rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--color-text-muted); }
.pdp-empty { font-size:.7rem; color:var(--color-text-muted); }

/* Reviews Slider */
.pdp-reviews-slider { position:relative; display:flex; flex-direction:column; gap:.75rem; }
.pdp-reviews-viewport { overflow:hidden; width:100%; }
.pdp-reviews-track { display:flex; gap:1rem; transition:transform .5s cubic-bezier(.65,.05,.36,1); will-change:transform; }
.pdp-reviews-track > .pdp-review { flex:0 0 clamp(240px, 42vw, 340px); }
@media (min-width:900px){ .pdp-reviews-track > .pdp-review { flex:0 0 clamp(260px, 24vw, 300px); } }
.pdp-reviews-nav { display:flex; justify-content:flex-end; gap:.5rem; }
.pdp-reviews-btn { background:var(--color-bg-base); color:var(--color-text); border:1px solid var(--color-border-base); width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; box-shadow:0 2px 6px -2px rgba(0,0,0,.25); transition:.3s; }
.pdp-reviews-btn:hover:not([disabled]), .pdp-reviews-btn:focus-visible:not([disabled]) { color:var(--color-brand); border-color:var(--color-brand); }
.pdp-reviews-btn[disabled] { opacity:.4; cursor:default; }
.pdp-reviews-btn:active:not([disabled]) { transform:scale(.9); }
.pdp-review-empty-wrap { flex:1 1 auto; }

/* Related */
.pdp-related { margin-top:3rem; }
.pdp-related__row { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }
@media (min-width:680px){ .pdp-related__row { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }

@media (max-width:900px){
  .pdp-nav { display:none; }
}

/* =============================
   Shop Page 2025
   ============================= */
.shop__layout { display:grid; gap:2rem; align-items:start; grid-template-columns: 280px 1fr; }
@media (max-width:900px){ .shop__layout { grid-template-columns:1fr; } .shop__filters { order:2; } }
.shop__filters { 
  /* Legacy color adaptation: using inverse text color as surface per request */
  background: var(--color-text-inverse); 
  color: var(--font-primary); 
  border:1px solid var(--color-border-base); 
  border-radius:18px; 
  padding:1.25rem 1.1rem 1.4rem; 
  position:sticky; 
  top:90px; 
  max-height:calc(100vh - 120px); 
  overflow:auto; 
  display:flex; 
  flex-direction:column; 
  gap:1.5rem; 
}
/* Force primary font for every descendant textual element inside filters */
.shop__filters, 
.shop__filters h1, .shop__filters h2, .shop__filters h3, .shop__filters h4, .shop__filters h5, .shop__filters h6,
.shop__filters p, .shop__filters span, .shop__filters label, .shop__filters li, .shop__filters button,
.shop__filters input, .shop__filters select, .shop__filters option, .shop__filters .filter__title,
.shop__filters .filter__check, .shop__filters .filter-clear-btn, .shop__filters .price-single__labels {
  font-family: var(--font-primary, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) !important;
}
/* Ensure inner headings and labels contrast on new dark/inverse background */
.shop__filters .filter__title { color: var(--font-primary); }
.shop__filters .filter__check span { color: var(--font-primary); }
.shop__filters .filter__check input { accent-color: var(--color-brand); }
.shop__filters .filter-clear-btn { background: color-mix(in srgb, var(--color-bg-base) 85%, transparent); color: var(--color-text); border-color: color-mix(in srgb, var(--color-bg-base) 70%, transparent); }
.shop__filters .filter-clear-btn:hover, .shop__filters .filter-clear-btn:focus { color: var(--color-brand); border-color: var(--color-brand); }
.shop__filters .filter__select { background: color-mix(in srgb, var(--color-bg-base) 90%, transparent); color: var(--color-text); border-color: color-mix(in srgb, var(--color-bg-base) 70%, transparent); }
.shop__filters .select-wrap__icon { color: var(--color-text); }
.shop__filters .price-single__labels { color: var(--font-primary); }
.shop__filters .price-single__current { color: var(--color-brand); }
.shop__filters input[type=range] { accent-color: var(--color-brand); }
.filter__group { display:flex; flex-direction:column; gap:.65rem; }
.filter__title { margin:0; font:700 .75rem/1.1 var(--font-primary); letter-spacing:.8px; text-transform:uppercase; color:var(--color-text-muted); }
.filter-clear-btn { font:600 .6rem/1 var(--font-primary); letter-spacing:.6px; background:var(--color-bg-base); border:1px solid var(--color-border-base); color:var(--color-text-muted); padding:.45rem .7rem .4rem; border-radius:30px; cursor:pointer; transition:.25s; }
.filter-clear-btn:hover, .filter-clear-btn:focus { color:var(--color-brand); border-color:var(--color-brand); }
.filter__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:.8rem; }
.filter__list, .filter__list li, .filter__check span { font-family: var(--font-primary) !important; }
.filter__check { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:500; }
.filter__check input { width:16px; height:16px; accent-color: var(--color-brand); }
.filter__select { width:100%; padding:.55rem .6rem; border:1px solid var(--color-border-base); border-radius:10px; background:var(--color-bg-base); font:.75rem/1 var(--font-primary); }
.select-wrap { position:relative; }
.select-wrap__icon { position:absolute; top:50%; right:.6rem; transform:translateY(-50%); font-size:.65rem; pointer-events:none; color:var(--color-text-muted); }
.select-wrap select { appearance:none; padding-right:2rem; }
.price-range { display:flex; flex-direction:column; gap:.6rem; }
.price-range__inputs { display:flex; align-items:center; gap:.5rem; }
.price-range__input { width:100%; padding:.45rem .55rem; border:1px solid var(--color-border-base); border-radius:8px; background:var(--color-bg-base); font:.7rem/1 var(--font-primary); }
.price-range__sliders { position:relative; display:flex; flex-direction:column; gap:.4rem; }
.price-range__sliders input[type=range] { width:100%; }
.price-range__labels { display:flex; justify-content:space-between; font:600 .65rem/1 var(--font-primary); color:var(--color-text-muted); }
.price-single { display:flex; flex-direction:column; gap:.55rem; }
.price-single input[type=range] { width:100%; accent-color:var(--color-brand); }
.price-single__labels, .price-single__labels span { font:600 .65rem/1 var(--font-primary); }
.price-single__labels { display:flex; justify-content:space-between; color:var(--color-text-muted); }
.price-single__current { color:var(--color-brand); }
.shop__results { display:flex; flex-direction:column; gap:1.25rem; }
.shop__header { display:flex; flex-direction:column; gap:.4rem; }
.shop__header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1rem; }
.shop__header-left { display:flex; flex-direction:column; gap:.35rem; }
.shop__active-filters { display:flex; flex-wrap:wrap; gap:.5rem; min-height:28px; }
.chip { background:color-mix(in srgb,var(--color-brand) 18%, transparent); color:var(--color-brand); border:1px solid color-mix(in srgb,var(--color-brand) 40%, transparent); padding:.4rem .6rem .35rem; border-radius:30px; font:600 .6rem/1 var(--font-primary); letter-spacing:.5px; cursor:pointer; display:inline-flex; align-items:center; gap:.25rem; transition:.25s; }
.chip:hover { background:color-mix(in srgb,var(--color-brand) 28%, transparent); }
.chip--empty { cursor:default; opacity:.7; }
.shop__title { margin:0; font:700 1.8rem/1.15 var(--font-primary); letter-spacing:.5px; }
.shop__meta { font-size:.7rem; letter-spacing:.6px; font-weight:600; color:var(--color-text-muted); }
.shop-grid__inner { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
@media (min-width:680px){ .shop-grid__inner { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }
@media (max-width: 899.98px){
  .shop-grid__inner { display:flex; flex-direction:column; gap:1rem; }
  .shop-grid__item--horizontal { width:100%; }
}
/* Horizontal card responsiveness */
.shop-grid__item--horizontal { display:block; }
.shop-grid__item--vertical { display:none; }
@media (min-width: 900px){
  .shop-grid__item--horizontal { display:none; }
  .shop-grid__item--vertical { display:block; }
}

/* Horizontal Product Card */
.pcard-horizontal { --pcard-pad:.85rem; display:flex; width:100%; gap:1rem; background:linear-gradient(135deg,var(--color-bg-base) 0%,color-mix(in srgb,var(--color-bg-base) 88%, #000 12%) 100%); border:1px solid var(--color-border-base); border-color:color-mix(in srgb, var(--color-border-base) 55%, #000 45%); border-radius:16px; padding:var(--pcard-pad); position:relative; min-height:120px; transition:border-color .28s, box-shadow .28s, background .35s; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 2px 6px -3px rgba(0,0,0,.18); }
.pcard-horizontal::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.pcard-horizontal:hover { border-color: color-mix(in srgb, var(--color-border-base) 40%, var(--color-brand) 60%); box-shadow:0 4px 14px -6px rgba(0,0,0,.25); }
.pcard-horizontal:focus-within { outline:2px solid var(--color-brand); outline-offset:2px; border-color: var(--color-brand); }
.pcard-h__imgwrap { flex:0 0 110px; position:relative; }
.pcard-h__picture { width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--color-surface); display:block; }
.pcard-h__img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.pcard-horizontal:hover .pcard-h__img, .pcard-horizontal:focus-within .pcard-h__img { transform:scale(1.05); }
.pcard-h__badge { position:absolute; top:6px; left:6px; background:var(--color-brand); color:#fff; font-size:.65rem; padding:2px 6px; border-radius:10px; font-weight:600; line-height:1; }
.pcard-h__badge--discount { background:#d61f1f; }
.pcard-h__badge--sold { background:#555; }
.pcard-h__badge--hot { background:#ff5722; }
.pcard-h__badge--new { background:#1e88e5; }
.pcard-h__body { flex:1 1 auto; display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.pcard-h__title { font-size:.95rem; line-height:1.25; margin:0; max-height:2.5em; overflow:hidden; color:var(--color-text); }
.pcard-h__title a { text-decoration:none; color:var(--color-text); }
.pcard-h__title a:hover, .pcard-h__title a:focus { color:var(--color-brand-hover); }
.pcard-h__summary { margin:0; font-size:.7rem; line-height:1.3; color:var(--color-text-muted); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard-h__rating { display:flex; align-items:center; gap:.4rem; font-size:.65rem; }
.pcard-h__stars { display:inline-flex; gap:1px; }
.pcard-h__reviews { opacity:.75; }
.pcard-h__pricing { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.85rem; }
.pcard-h__price { font-weight:600; color:var(--color-text); }
.pcard-h__old { text-decoration:line-through; opacity:.55; font-size:.65rem; color:var(--color-text-muted); }
.pcard-h__discount { background:#d61f1f; color:#fff; font-size:.6rem; padding:2px 6px; border-radius:6px; font-weight:600; letter-spacing:.5px; }
.pcard-h__actions { margin-top:auto; display:flex; align-items:center; gap:.5rem; }
.pcard-h__btn { background:var(--color-brand); color:#fff; padding:.4rem .75rem; font-size:.7rem; border-radius:8px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; min-width:52px; transition:background .3s, box-shadow .3s; }
.pcard-h__btn:hover, .pcard-h__btn:focus { background:var(--color-brand-hover); box-shadow:0 3px 10px -4px rgba(0,0,0,.35); }
.pcard-h__wish { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--color-border-base); border-radius:50%; color:var(--color-text-muted); font-size:.85rem; transition:background .3s, color .3s, border-color .3s, box-shadow .3s; }
.pcard-h__wish.is-active, .pcard-h__wish:hover, .pcard-h__wish:focus { background:var(--color-brand); color:#fff; border-color:var(--color-brand); box-shadow:0 3px 10px -4px rgba(0,0,0,.35); }
@media (min-width:520px){
  .pcard-horizontal { gap:1rem; }
  .pcard-h__imgwrap { flex:0 0 130px; }
  .pcard-h__title { font-size:1rem; }
  .pcard-h__summary { font-size:.72rem; }
  .pcard-h__pricing { font-size:.85rem; }
}
@media (min-width:760px){
  /* already 2 lines by default; keep breakpoint override for clarity */
  .pcard-h__summary { -webkit-line-clamp:2; line-clamp:2; }
  .pcard-h__imgwrap { flex:0 0 140px; }
}
.shop-empty { font-size:.8rem; color:var(--color-text-muted); padding:1rem 0; }
.shop-pagination { margin-top:1.25rem; display:flex; justify-content:center; }
.pagination-nav { width:100%; display:flex; justify-content:center; }
.pagination-ui { --pag-gap:.4rem; list-style:none; margin:0; padding:0; display:flex; gap:var(--pag-gap); align-items:center; font:600 .7rem/1 var(--font-primary); }
.pag-item { display:flex; }
.pag-link { min-width:38px; height:38px; border-radius:12px;  background:var(--color-bg-base); color:var(--color-text); display:inline-flex; align-items:center; justify-content:center; padding:0 .8rem; font-weight:600; letter-spacing:.5px; transition:.3s; position:relative; }
.pag-link:hover, .pag-link:focus { border-color:var(--color-brand); color:var(--color-brand); }
.pag-item.is-active .pag-link, .pag-item.is-active span.pag-link { background:var(--color-brand); border-color:var(--color-brand); color:var(--color-text-inverse); cursor:default; box-shadow:0 4px 14px -6px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb,var(--color-brand) 45%, transparent); }
.pag-item.is-disabled .pag-link { opacity:.4; cursor:not-allowed; }
.pag-item.is-ellipsis .pag-link { pointer-events:none; background:transparent; border:none; min-width:auto; width:auto; }
.pag-item.is-ellipsis .pag-link { color:var(--color-text-muted); }
.pag-link:active:not(span) { transform:translateY(1px); }
.pagination-ui:focus-within .pag-item:not(.is-active) .pag-link:focus { outline:2px solid var(--color-brand); outline-offset:2px; }
.pag-item.is-active .pag-link::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(255,255,255,0)); mix-blend-mode:overlay; pointer-events:none; }
.pag-link[aria-label*="Previous"], .pag-link[aria-label*="Next"], .pag-item:first-child .pag-link, .pag-item:last-child .pag-link { font-size:1rem; line-height:1; }
.pag-link[aria-label*="Previous"], .pag-item:first-child .pag-link { font-weight:700; }
.pag-link[aria-label*="Next"], .pag-item:last-child .pag-link { font-weight:700; }
[data-grid-wrapper].is-loading { position:relative; opacity:.55; filter:blur(.5px); }
[data-grid-wrapper].is-loading:after { content:"Loading..."; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 .8rem/1 var(--font-primary); background:rgba(0,0,0,.15); backdrop-filter:blur(2px); color:var(--color-text); letter-spacing:.6px; }

/* =============================
   PDP Image Hover Zoom (lens + pane)
   ============================= */
.zoom-pane {
    position: fixed;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    border: 1px solid #D4AF37;
    border-radius: 6px;
    background: #000 center center / cover no-repeat;
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity .15s ease;
    display: none;
    will-change: background-position;
}
.zoom-pane.is-visible { opacity: 1; }

.zoom-lens {
    position: fixed;
    width: 140px;
    height: 140px;
    border: 1px solid #D4AF37;
    background: rgba(212,175,55,0.08);
    border-radius: 4px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity .12s ease;
    display: none;
    will-change: transform;
}
.zoom-lens.is-visible { opacity: 1; }

.pdp-gallery__main img.zoomable { cursor: zoom-in; }

@media (max-width: 991.98px) {
  .zoom-pane, .zoom-lens { display: none !important; }
}