:root, :root[data-theme="light"]{
    --pink:#2F5D42 !important;
    --pink-deep:#1E3F2C !important;
    --display:'Bebas Neue', Georgia, serif !important;
    --body:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;

    /* page-scoped Olay-inspired header/hero tokens (Nova Glow only) */
    --sk-topbar-bg:#1A1A1A;
    --sk-nav-bg:#F5F3F0;
    --sk-accent-line:#1E3F2C;
    --sk-hero-panel:#F3C63D;
    --sk-hero-panel-text:#1A1A1A;
    --sk-trust-bg:#1A1A1A;
    --sk-trust-text:#F5F3F0;
  }
  h1,h2,h3{ text-transform:none; letter-spacing:0; font-weight:500; }
  .eyebrow{ letter-spacing:.2em; font-weight:700; }
  .btn{ text-transform:none; letter-spacing:.01em; font-weight:600; border-radius:30px; }
  .nav-links a, .link-more, .footer-col h4{ text-transform:none; letter-spacing:.01em; }
  /* ============ OLAY-STYLE HEADER ============ */
  .topbar{
    background:var(--sk-topbar-bg);color:#fff;font-weight:500;letter-spacing:.01em;
    text-transform:none;font-size:13.5px;
  }
  header.site{ background:var(--sk-nav-bg) !important;border-bottom:1px solid rgba(0,0,0,.08); }
  header.site .logo{ font-family:'Georgia', 'Fraunces', serif;font-weight:400;letter-spacing:.04em;color:#1A1A1A; }
  header.site .logo span{ color:#1A1A1A; }
  header.site .nav-links a{ text-transform:none;font-weight:500;font-size:14.5px;letter-spacing:0;color:#1A1A1A; }
  header.site .nav-links a:hover{ color:var(--sk-accent-line); }
  header.site .icon-btn, header.site .icon-btn svg, header.site .menu-toggle{ color:#1A1A1A; }
  header.site .nav-home-trigger{ color:#1A1A1A; }
  header.site .nav-home-trigger svg{ color:#1A1A1A; }
  .style-switcher{ display:none !important; }

  /* ============ CLEAN GLASS PANELS (auth, account, order summary, checkout) ============ */
  body{ background:linear-gradient(180deg,#FDFDFC 0%,#F6F4EF 100%); }
  .auth-wrap, .account-card, .order-summary, .sk-checkout-summary, .address-card, .sk-contact-form{
    background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    backdrop-filter:blur(22px) saturate(160%);
    border:1px solid rgba(255,255,255,.65);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(26,26,26,.08), 0 2px 10px rgba(26,26,26,.04);
    transition:box-shadow .3s ease;
  }
  .auth-wrap{ padding:48px 44px; }
  .auth-wrap:hover, .account-card:hover, .order-summary:hover, .sk-checkout-summary:hover{
    box-shadow:0 28px 70px rgba(26,26,26,.1), 0 2px 10px rgba(26,26,26,.05);
  }
  .account-card, .order-summary, .sk-checkout-summary{ padding:28px; }
  .address-card{ background:rgba(255,255,255,.74);box-shadow:0 12px 30px rgba(26,26,26,.06); }
  .form-field-group input, .sk-contact-form input, .sk-contact-form textarea, .sk-form-row input, .sk-form-row select{
    background:rgba(255,255,255,.6);
  }
  .form-field-group input:focus{ box-shadow:0 0 0 3px rgba(47,93,66,.12); }

  /* ============ GLASS: HEADER, DRAWERS, PRODUCT/CATEGORY CARDS ============ */
  header.site{
    background:rgba(245,243,240,.72) !important;
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
  }
  [data-cart-drawer], .qv-panel, [data-mobile-menu]{
    background:rgba(255,255,255,.88) !important;
    -webkit-backdrop-filter:blur(26px) saturate(160%);
    backdrop-filter:blur(26px) saturate(160%);
    border:1px solid rgba(255,255,255,.6);
  }
  .sk-card, .sk-seller-card, .sk-ing-card, .sk-cat-card, .sk-faq-item{
    background:rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 16px 40px rgba(26,26,26,.06);
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .sk-card:hover, .sk-seller-card:hover, .sk-ing-card:hover, .sk-cat-card:hover{
    box-shadow:0 22px 54px rgba(26,26,26,.1);
    transform:translateY(-2px);
  }
  .sk-story, .sk-promo, .sk-banner, .sk-loyalty-media, .sk-page-hero{
    background:rgba(245,243,240,.5);
  }
  .hero-split .eyebrow{ display:none; }
  .sk-new-head{ margin-bottom:32px; }
  .sk-new-head h2{
    font-family:var(--body);font-weight:800;font-size:clamp(24px,2.6vw,32px);
    text-transform:none;font-style:normal;letter-spacing:0;
  }
  .sk-card-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
  @media (max-width:960px){ .sk-card-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .sk-card-grid{ grid-template-columns:1fr; } }
  .sk-card-grid-5{ grid-template-columns:repeat(5,1fr); }
  @media (max-width:1180px){ .sk-card-grid-5{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:960px){ .sk-card-grid-5{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .sk-card-grid-5{ grid-template-columns:1fr; } }
  .sk-card{
    background:var(--surface);border:1px solid var(--line);border-radius:4px;
    padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px;
    transition:box-shadow .25s ease, border-color .25s ease;
  }
  .sk-card:hover{ box-shadow:0 12px 28px var(--shadow);border-color:var(--ink-dim); }
  .sk-card-media{ position:relative;aspect-ratio:1/1; }
  .sk-card-media .ph-img{ position:absolute;inset:0;border-radius:4px; }
  .sk-card-dots{ display:flex;gap:5px; }
  .sk-card-dots span{ width:16px;height:2px;background:var(--line); }
  .sk-card-dots span:first-child{ background:var(--ink); }
  .sk-card-meta{ display:flex;align-items:center;justify-content:space-between;font-size:11px; }
  .sk-card-meta .sk-card-cat{ color:var(--ink-dim);letter-spacing:.05em;text-transform:uppercase;font-weight:700; }
  .sk-card-meta .sk-card-rating{ display:flex;align-items:center;gap:4px;color:var(--ink); }
  .sk-card-meta .sk-card-rating svg{ width:13px;height:13px;color:var(--pink); }
  .sk-card-title{ font-family:var(--body);font-size:15px;font-weight:700;color:var(--ink);line-height:1.35; }
  .sk-card-price-unit{ font-size:12px;color:var(--ink-dim); }
  .sk-card-price{ font-size:20px;font-weight:800;color:var(--ink); }
  .sk-card-add{
    margin-top:4px;width:100%;padding:13px;background:none;border:1.5px solid var(--ink);
    border-radius:2px;color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;cursor:pointer;transition:background .2s ease, color .2s ease;
  }
  .sk-card-add:hover{ background:var(--ink);color:var(--bg); }
  .sk-new-footer{ text-align:center;margin-top:40px; }
  .sk-btn-outline-dark{
    display:inline-block;padding:16px 34px;border:1.5px solid var(--ink);border-radius:2px;
    color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    background:none;transition:background .2s ease, color .2s ease;
  }
  .sk-btn-outline-dark:hover{ background:var(--ink);color:var(--bg); }
  footer.site.sk-footer{ background:#000 !important;border-top:none; }
  .sk-footer-top{ padding-block:22px 12px; }
  .footer-grid{ padding-bottom:16px;gap:22px; }
  .footer-bottom{ padding:12px 0 !important; }
  .sk-footer-brand-block{ display:flex;flex-direction:column;gap:5px;margin-bottom:14px; }
  .sk-footer-brand-block .logo{ font-size:22px; }
  .sk-footer-brand-block .logo, .sk-footer-brand-block .logo span{ color:#fff; }
  .sk-footer-brand-block h4{ font-family:var(--body);font-size:15px;font-weight:600;color:#fff;margin:0; }
  .sk-footer-brand-block p{ font-size:13px;color:rgba(255,255,255,.65);max-width:420px;margin:0; }
  .sk-footer-register{
    display:inline-block;padding:10px 24px;background:#fff;color:#1A1A1A;border-radius:20px;
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;align-self:flex-start;
    margin-top:2px;
  }

  .sk-shop-header{ padding:36px 0 8px; }
  .sk-shop-header h1{ font-family:var(--display);font-size:clamp(34px,5vw,48px);letter-spacing:.03em;margin:0 0 6px; }
  .sk-shop-header p{ color:var(--ink-dim);font-size:14.5px; }
  .sk-shop-toolbar{ display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:28px; }
  .sk-shop-toolbar select{ padding:9px 14px;background:var(--bg-raise);border:1px solid var(--line);border-radius:4px;color:var(--ink);font-family:var(--body);font-size:13.5px; }
  .sk-card-media a{ display:block;position:absolute;inset:0; }

  /* ============ FLOATING CARDS: SHADOW-ONLY ELEVATION, NO HARD BORDERS ============ */
  /* revertible block: everything below is additive polish layered on top of the
     existing design. Delete this block (and the sk-scroll-thread element in the
     body, plus the isSkincareSection() branch in nova.js) to fully undo it. */
  .sk-card, .sk-seller-card, .sk-ing-card, .sk-cat-card{
    border:none !important;
    box-shadow:0 1px 2px rgba(26,26,26,.05), 0 18px 40px rgba(26,26,26,.07);
  }
  .sk-card:hover, .sk-seller-card:hover, .sk-ing-card:hover, .sk-cat-card:hover{
    box-shadow:0 4px 10px rgba(26,26,26,.06), 0 32px 64px rgba(26,26,26,.13);
    transform:translateY(-5px);
  }

  /* asymmetric grid: the first New Arrivals card reads as a featured pick
     instead of every card being identically sized */
  .sk-card-grid-5 > .sk-card:first-child{
    grid-column:span 2;grid-row:span 2;
  }
  .sk-card-grid-5 > .sk-card:first-child .sk-card-media{ min-height:100%; }
  @media (max-width:1180px){
    .sk-card-grid-5 > .sk-card:first-child{ grid-column:span 1;grid-row:span 1; }
  }

  /* richer scroll-reveal for cards: scale + blur-in instead of a flat fade,
     reads as more deliberate / premium than a plain translateY fade */
  [data-reveal-group] .sk-card,
  [data-reveal-group] .sk-seller-card,
  [data-reveal-group] .sk-ing-card,
  [data-reveal-group] .sk-cat-card{
    transform:translateY(34px) scale(.94);
    filter:blur(6px);
    transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium),
      filter .8s var(--ease-premium), box-shadow .3s ease, translate .3s ease;
  }
  [data-reveal-group] .sk-card.is-visible,
  [data-reveal-group] .sk-seller-card.is-visible,
  [data-reveal-group] .sk-ing-card.is-visible,
  [data-reveal-group] .sk-cat-card.is-visible{
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
  @media (prefers-reduced-motion: reduce){
    [data-reveal-group] .sk-card, [data-reveal-group] .sk-seller-card,
    [data-reveal-group] .sk-ing-card, [data-reveal-group] .sk-cat-card{
      transform:none;filter:none;transition:none;
    }
  }

  /* scroll progress thread: a thin accent line down the left edge that fills
     as you scroll, giving the page a sense of continuous motion section to
     section instead of feeling like stacked, disconnected blocks */
  .sk-scroll-thread{
    position:fixed;top:0;left:0;width:3px;height:100vh;z-index:70;
    background:linear-gradient(180deg, var(--pink) 0%, var(--sk-accent-line) 100%);
    transform:scaleY(0);transform-origin:top;
    pointer-events:none;
  }

  /* CTA polish: a soft light sweep across solid-fill buttons on hover, plus a
     gentle press-down scale for tactile feedback */
  .btn, .sk-btn-solid, .sk-card-add, .sk-seller-add, .sk-footer-register{
    position:relative;overflow:hidden;
  }
  .btn::after, .sk-btn-solid::after, .sk-card-add::after, .sk-seller-add::after, .sk-footer-register::after{
    content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-20deg);transition:left .65s ease;pointer-events:none;
  }
  .btn:hover::after, .sk-btn-solid:hover::after, .sk-card-add:hover::after,
  .sk-seller-add:hover::after, .sk-footer-register:hover::after{ left:130%; }
  .btn:active, .sk-btn-solid:active, .sk-card-add:active, .sk-seller-add:active,
  .sk-btn-outline-dark:active, .sk-btn-white:active{ transform:scale(.97); }

  /* de-box the shoppable product cards (New Arrivals / Best Sellers / Shop
     grid / related products): drop the panel background+border and let the
     photo itself carry the elevation, so products read as part of the page
     layout rather than sitting inside a boxed tile */
  .sk-card, .sk-seller-card{
    background:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border:none !important;
    box-shadow:none !important;
  }
  .sk-card:hover, .sk-seller-card:hover{
    box-shadow:none !important;
    transform:none !important;
  }
  .sk-card-media, .sk-seller-media{
    box-shadow:0 14px 34px rgba(26,26,26,.1);
    border-radius:10px;
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .sk-card-media .ph-img, .sk-seller-media .ph-img{ border-radius:10px; }
  .sk-card:hover .sk-card-media, .sk-seller-card:hover .sk-seller-media{
    box-shadow:0 26px 56px rgba(26,26,26,.17);
    transform:translateY(-4px);
  }

  /* final pass: remove the remaining shadow/elevation cue on product photos
     too — a drop shadow on a rectangle still reads as "a box", even with
     no border or panel behind it. Product images now sit flush against the
     page like every other photo on the site (hero, promo, brand story),
     with only a soft corner radius for basic polish. */
  .sk-card, .sk-seller-card, .sk-ing-card, .sk-cat-card, .pcard{
    box-shadow:none !important;
  }
  .sk-card:hover, .sk-seller-card:hover, .sk-ing-card:hover, .sk-cat-card:hover{
    box-shadow:none !important;transform:none !important;
  }
  .sk-card-media, .sk-seller-media, .sk-ing-media, .sk-cat-media, .pcard-media{
    box-shadow:none !important;border-radius:6px;
  }
  .sk-card-media .ph-img, .sk-seller-media .ph-img,
  .sk-ing-media .ph-img, .sk-cat-media .ph-img{ border-radius:6px; }
  .sk-card:hover .sk-card-media, .sk-seller-card:hover .sk-seller-media{
    box-shadow:none !important;transform:none !important;
  }