:root{
    --ink:#0B0D10;
    --paper:#F5F6F7;
    --accent:#E31E24;      /* LYCKA red, pulled from the logo */
    --gold:#C9974A;        /* warm gold used only for the recognition/award section */
    --header-h:84px;
    --ease:cubic-bezier(.4,0,.2,1);
  }

  @media (max-width:1024px){
    :root{ --header-h:72px; }
  }
  @media (max-width:600px){
    :root{ --header-h:60px; }
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--ink);
    color:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  h1,h2,h3{ font-family:'Poppins',sans-serif; }
  .sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* ---------------- HEADER ---------------- */
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    height:var(--header-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(20px,5vw,64px);
    background:transparent;
    transition:transform .5s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
    border-bottom:1px solid transparent;
  }

  .site-header.hide-nav{
    transform:translateY(-110%);
  }

  /* tone = opposite of the current slide's own background color.
     Only governs the NAV TEXT while the header is transparent (top of page).
     The logo itself never recolors — it always stays brand-color. */
  .site-header[data-tone="light"]{ --tone-color: var(--ink); }   /* slide bg is light -> nav text is dark (opposite) */
  .site-header[data-tone="dark"]{ --tone-color: var(--paper); }  /* slide bg is dark -> nav text is light (opposite) */

  .site-header .main-nav a,
  .site-header .nav-toggle span{
    color:var(--tone-color);
    transition:color .45s var(--ease);
  }

  .logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .logo img{
    height:clamp(16px, 3vw, 20px);
    width:auto;
    display:block;
  }

  .main-nav{
    display:flex;
    gap:clamp(20px,3vw,48px);
    list-style:none;
  }
  .main-nav a{
    font-size:.92rem;
    font-weight:500;
    letter-spacing:.02em;
    position:relative;
    padding:6px 0;
  }
  .main-nav a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0%; height:2px;
    background:var(--accent);
    transition:width .3s var(--ease);
  }
  .main-nav a:hover::after{ width:100%; }

  .nav-toggle{
    display:none;
    width:26px; height:20px;
    position:relative;
    cursor:pointer;
    background:none; border:none;
  }
  .nav-toggle span{
    position:absolute; left:0; width:100%; height:2px;
    background:var(--tone-color);
    transition:transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease), background-color .45s var(--ease);
  }
  .nav-toggle span:nth-child(1){ top:0; }
  .nav-toggle span:nth-child(2){ top:9px; }
  .nav-toggle span:nth-child(3){ top:18px; }

  /* Scrolled state: header shown while scrolling UP -> solid WHITE bar.
     Nav text matches it (dark). Logo stays exactly as-is (original color). */
  .site-header.scrolled{
    background:#FFFFFF;
    box-shadow:0 1px 0 rgba(11,13,16,.08), 0 12px 24px -16px rgba(11,13,16,.18);
    border-bottom-color:transparent;
  }
  .site-header.scrolled .main-nav a{
    color:var(--accent) !important;
  }
  .site-header.scrolled .nav-toggle span{
    background:var(--accent) !important;
  }
  .site-header.scrolled .main-nav a::after{
    background:var(--accent);
  }

  /* ---------------- HERO ---------------- */
  .hero{
    position:relative;
    height:100vh;
    min-height:520px;
    width:100%;
    overflow:hidden;
    background:#050506;
  }

  .hero-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity 1.1s var(--ease);
    z-index:1;
  }
  .hero-slide.is-active{
    opacity:1;
    visibility:visible;
    z-index:2;
  }

  .hero-slide img{
    height:100%;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
    transform:scale(1);
    transition:transform 6s linear;
  }
  .hero-slide.is-active img{
    transform:scale(1.045);
  }

  @media (max-aspect-ratio: 130/100){
    .hero-slide img{
      height:auto;
      width:100%;
    }
  }

  /* Mobile gets its own portrait hero artwork; desktop/tablet keep the wide banners untouched. */
  .hero-slide .hero-img-mobile{
    display:none;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  @media (max-width:600px){
    .hero-slide .hero-img-desktop{ display:none; }
    .hero-slide .hero-img-mobile{ display:block; }
  }

  .hero-controls{
    position:absolute;
    left:50%;
    bottom:clamp(22px,4vh,44px);
    transform:translateX(-50%);
    z-index:5;
    display:flex;
    gap:10px;
  }

  .charge-bar{
    width:64px;
    height:4px;
    border-radius:2px;
    background:rgba(255,255,255,.28);
    overflow:hidden;
    cursor:pointer;
    position:relative;
  }
  .charge-bar i{
    display:block;
    height:100%;
    width:0%;
    background:var(--accent);
    border-radius:2px;
  }
  .charge-bar.filling i{
    animation:fillbar 5s linear forwards;
  }
  .charge-bar.done i{ width:100%; }

  @keyframes fillbar{
    from{ width:0%; }
    to{ width:100%; }
  }

  .hero-scroll-cue{
    position:absolute;
    right:clamp(20px,5vw,48px);
    bottom:clamp(22px,4vh,44px);
    z-index:5;
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
    opacity:.75;
    mix-blend-mode:difference;
  }
  .hero-scroll-cue .line{
    width:28px; height:1px; background:#fff;
    position:relative; overflow:hidden;
  }
  .hero-scroll-cue .line::after{
    content:"";
    position:absolute; inset:0;
    background:var(--accent);
    animation:scrollcue 1.8s ease-in-out infinite;
  }
  @keyframes scrollcue{
    0%{ transform:translateX(-100%); }
    50%{ transform:translateX(0); }
    100%{ transform:translateX(100%); }
  }

  /* ---------------- SHOP BY CATEGORY ---------------- */
  .category-section{
    background:var(--paper);
    color:var(--ink);
    padding:110px clamp(20px,6vw,80px) 120px;
  }
  .category-header{
    max-width:640px;
    margin:0 auto 64px;
    text-align:center;
  }
  .category-header .eyebrow{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:14px;
  }
  .category-header h2{
    font-weight:600;
    font-size:clamp(1.8rem,4vw,2.75rem);
    line-height:1.15;
    margin-bottom:14px;
  }
  .category-header p{
    font-family:'Inter',sans-serif;
    font-size:1rem;
    line-height:1.6;
    color:#4b4f54;
  }

  .category-slider{
    position:relative;
    max-width:1240px;
    margin:0 auto;
  }

  .category-grid{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    padding:4px 4px 12px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .category-grid::-webkit-scrollbar{ display:none; }

  .category-card{
    flex:0 0 150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    scroll-snap-align:start;
  }

  .category-thumb{
    width:100%;
    aspect-ratio:1/1;
    border-radius:18px;
    background:#fff;
    box-shadow:0 1px 0 rgba(11,13,16,.04), 0 10px 24px -14px rgba(11,13,16,.28);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .category-card:hover .category-thumb{
    transform:translateY(-5px);
    box-shadow:0 1px 0 rgba(227,30,36,.05), 0 16px 30px -14px rgba(227,30,36,.38);
  }
  .category-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .category-thumb svg{
    width:38%;
    height:38%;
    stroke:var(--ink);
    opacity:.75;
  }

  .category-name{
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:.86rem;
    line-height:1.3;
  }

  /* ---------------- SHARED: section header row (used by New Arrivals / Best Sellers) ---------------- */
  .shop-section{
    background:var(--paper);
    color:var(--ink);
    padding:0 clamp(20px,6vw,80px) 96px;
  }
  #new-arrivals{
    padding-top:50px;
    padding-bottom:50px;
  }
  .shop-section-header{
    max-width:1240px;
    margin:0 auto 32px;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
  }
  .shop-section-header h2{
    font-weight:600;
    font-size:clamp(1.4rem,2.6vw,1.9rem);
  }
  .view-all-link{
    font-family:'Inter',sans-serif;
    font-size:.86rem;
    font-weight:500;
    color:#4b4f54;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    transition:color .25s var(--ease);
  }
  .view-all-link svg{ width:14px; height:14px; stroke:currentColor; transition:transform .3s var(--ease); flex-shrink:0; }
  .view-all-link:hover{ color:var(--accent); }
  .view-all-link:not(.is-open):hover svg{ transform:translateX(3px); }
  .view-all-link.is-open svg{ transform:rotate(-90deg); }
  .view-all-link.is-open:hover svg{ transform:rotate(-90deg) translateX(3px); }

  /* extra products revealed by "View All" */
  .extra-grid{
    max-width:1240px;
    margin:28px auto 0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
    gap:20px;
  }
  .extra-grid[hidden]{ display:none; }
  .extra-bestsellers{
    max-width:1240px;
    margin:24px auto 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .extra-bestsellers[hidden]{ display:none; }

  /* ---------------- EXPLORE OUR PRODUCTS (category dropdown filter) ---------------- */
  .explore-filter-dropdown{
    position:relative;
    display:flex;
    flex-shrink:0;
  }
  .explore-filter-trigger{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-width:260px;
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:.88rem;
    color:var(--ink);
    background:#fff;
    border:1px solid rgba(11,13,16,.18);
    border-radius:12px;
    padding:13px 16px 13px 18px;
    cursor:pointer;
    transition:border-color .25s var(--ease);
  }
  .explore-filter-trigger:hover{ border-color:var(--accent); }
  .explore-filter-dropdown.open .explore-filter-trigger{ border-color:var(--ink); }
  .explore-filter-trigger svg{
    width:16px; height:16px;
    stroke:var(--ink);
    flex-shrink:0;
    transition:transform .3s var(--ease);
  }
  .explore-filter-dropdown.open .explore-filter-trigger svg{ transform:rotate(180deg); }

  .explore-filter-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:260px;
    max-height:340px;
    overflow-y:auto;
    list-style:none;
    background:#fff;
    border:1px solid rgba(11,13,16,.1);
    border-radius:14px;
    box-shadow:0 20px 45px -18px rgba(11,13,16,.32);
    padding:8px;
    z-index:30;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .explore-filter-dropdown.open .explore-filter-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
  }
  .explore-filter-option{
    font-family:'Inter',sans-serif;
    font-size:.88rem;
    color:var(--ink);
    padding:10px 14px;
    border-radius:8px;
    cursor:pointer;
    transition:background .2s var(--ease), color .2s var(--ease);
  }
  .explore-filter-option:hover{ background:var(--paper); }
  .explore-filter-option.active{ background:var(--ink); color:#fff; font-weight:500; }

  .explore-grid{
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
    gap:20px;
    transition:opacity .2s var(--ease);
  }
  .explore-grid.fading{ opacity:0; }
  .explore-grid .product-card[data-hidden]{ display:none; }
  .explore-empty{
    display:none;
    max-width:1240px;
    margin:0 auto;
    padding:48px 20px;
    text-align:center;
    font-family:'Inter',sans-serif;
    font-size:.92rem;
    color:#9a9da1;
  }
  .explore-empty.show{ display:block; }

  /* ---------------- NEW ARRIVALS ---------------- */
  .arrivals-slider{ position:relative; max-width:1240px; margin:0 auto; }
  .arrivals-grid{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    padding:4px 4px 8px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .arrivals-grid::-webkit-scrollbar{ display:none; }

  .product-card{
    flex:0 0 208px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 1px 0 rgba(11,13,16,.04), 0 10px 24px -16px rgba(11,13,16,.22);
    scroll-snap-align:start;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .product-card:hover{
    transform:translateY(-4px);
    box-shadow:0 1px 0 rgba(227,30,36,.05), 0 16px 30px -16px rgba(227,30,36,.32);
  }
  .product-card .card-media{
    position:relative;
    aspect-ratio:1/1;
    background:var(--paper);
  }
  .product-card .card-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .card-badge{
    position:absolute;
    top:10px; left:10px;
    background:var(--ink);
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.02em;
    padding:4px 10px;
    border-radius:20px;
    z-index:2;
  }
  .card-badge.discount{ background:var(--accent); }
  .wishlist-btn{
    position:absolute;
    top:10px; right:10px;
    width:28px; height:28px;
    border-radius:50%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(11,13,16,.18);
    z-index:2;
    cursor:pointer;
    border:none;
    padding:0;
  }
  .wishlist-btn svg{ width:14px; height:14px; stroke:var(--ink); fill:none; transition:fill .2s var(--ease), stroke .2s var(--ease); }
  .wishlist-btn:hover svg{ stroke:var(--accent); }
  .wishlist-btn.active svg{ fill:var(--accent); stroke:var(--accent); }

  .card-body{ padding:14px 16px 16px; }
  .card-body .p-name{
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:.88rem;
    line-height:1.35;
    margin-bottom:6px;
    min-height:2.7em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .card-footer{ display:flex; align-items:center; gap:8px; margin-top:6px; }

  /* Shared "View Product" button — sits alongside the WhatsApp icon everywhere */
  .view-product-btn{
    font-family:'Poppins',sans-serif;
    font-weight:500;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    color:#fff;
    background:var(--ink);
    border:1px solid var(--ink);
    border-radius:10px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .25s var(--ease), border-color .25s var(--ease);
  }
  .view-product-btn:hover{ background:var(--accent); border-color:var(--accent); }
  /* compact variant inside the small product-card footer */
  .card-footer .view-product-btn{ flex:1; min-width:0; font-size:.72rem; padding:8px 10px; }

  /* Shared WhatsApp icon button — one elegant style, reused at two sizes */
  .whatsapp-btn{
    width:34px; height:34px;
    border-radius:10px;
    background:#fff;
    border:1px solid rgba(11,13,16,.16);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    cursor:pointer;
    transition:background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  }
  .whatsapp-btn svg{ width:16px; height:16px; fill:var(--ink); transition:fill .25s var(--ease); }
  .whatsapp-btn:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
  .whatsapp-btn:hover svg{ fill:#fff; }

  /* ---------------- BEST SELLERS ---------------- */
  .bestsellers-grid{
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .bestseller-card{
    display:flex;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 1px 0 rgba(11,13,16,.04), 0 10px 24px -16px rgba(11,13,16,.22);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .bestseller-card:hover{
    transform:translateY(-4px);
    box-shadow:0 1px 0 rgba(227,30,36,.05), 0 16px 30px -16px rgba(227,30,36,.32);
  }
  .bestseller-card .media{
    position:relative;
    flex:0 0 36%;
    aspect-ratio:1/1;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px;
    box-sizing:border-box;
  }
  .bestseller-card .media img{
    width:100%; height:100%;
    object-fit:contain;
    display:block;
  }
  .badge-gold{
    position:absolute;
    top:12px; left:12px;
    background:var(--gold);
    color:var(--ink);
    font-family:'Poppins',sans-serif;
    font-size:.64rem;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:20px;
  }
  .bestseller-card .content{
    flex:1;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    min-width:0;
  }
  .bestseller-card .p-name{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:1.05rem;
  }
  .bestseller-card .desc{
    font-family:'Inter',sans-serif;
    font-size:.86rem;
    line-height:1.55;
    color:#6b6f73;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bestseller-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
  }
  /* larger variants for the wider bestseller card */
  .bestseller-actions .view-product-btn{ flex:1; min-width:0; font-size:.8rem; padding:10px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bestseller-actions .whatsapp-btn{ width:38px; height:38px; border-radius:11px; }
  .bestseller-actions .whatsapp-btn svg{ width:17px; height:17px; }

  /* ---------------- BRAND STORY ---------------- */
  .brand-story-section{
    background:var(--paper);
    padding:110px clamp(20px,6vw,80px);
  }
  .brand-story-inner{
    max-width:1100px;
    margin:0 auto;
  }
  .brand-story-section .eyebrow{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:16px;
  }
  .brand-story-section h2{
    font-weight:700;
    font-size:clamp(2rem,4vw,2.75rem);
    color:var(--ink);
    margin-bottom:26px;
  }
  .brand-story-intro{
    font-family:'Inter',sans-serif;
    font-size:1.05rem;
    line-height:1.75;
    color:#4b4f54;
    max-width:760px;
    margin-bottom:52px;
  }
  .brand-story-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:48px;
  }
  .brand-story-block h3{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:1.15rem;
    color:var(--accent);
    margin-bottom:12px;
  }
  .brand-story-block p{
    font-family:'Inter',sans-serif;
    font-size:.95rem;
    line-height:1.75;
    color:#4b4f54;
  }

  /* ---------------- WHY US ---------------- */
  .why-us-section{
    background:var(--accent);
    color:#fff;
    padding:100px clamp(20px,6vw,80px);
  }
  .why-us-inner{
    max-width:1100px;
    margin:0 auto;
  }
  .why-us-section h2{
    font-weight:700;
    font-size:clamp(2rem,4vw,2.75rem);
    color:#fff;
    margin-bottom:18px;
  }
  .why-us-intro{
    font-family:'Inter',sans-serif;
    font-size:1rem;
    line-height:1.7;
    color:rgba(255,255,255,.88);
    max-width:640px;
    margin-bottom:56px;
  }
  .why-us-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:48px 60px;
  }
  .why-us-divider{
    height:1px;
    background:rgba(255,255,255,.28);
    margin:44px 0;
  }
  .why-us-item svg{
    width:38px;
    height:38px;
    stroke:#fff;
    margin-bottom:18px;
  }
  .why-us-item h3{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:1.15rem;
    margin-bottom:8px;
  }
  .why-us-item p{
    font-family:'Inter',sans-serif;
    font-size:.92rem;
    line-height:1.65;
    color:rgba(255,255,255,.85);
  }

  /* ---------------- CONTACT ---------------- */
  .contact-section{
    background:var(--paper);
    padding:110px clamp(20px,6vw,80px);
  }
  .contact-grid{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }
  .contact-info .eyebrow{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:16px;
  }
  .contact-info h2{
    font-weight:700;
    font-size:clamp(2rem,4vw,2.6rem);
    line-height:1.2;
    color:var(--ink);
    margin-bottom:20px;
  }
  .contact-info > p{
    font-family:'Inter',sans-serif;
    font-size:1rem;
    line-height:1.7;
    color:#4b4f54;
    max-width:440px;
    margin-bottom:36px;
  }
  .contact-detail{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
  }
  .contact-detail.address{ align-items:flex-start; }
  .contact-detail.address .contact-detail-icon{ margin-top:2px; }
  .contact-detail-icon{
    width:44px; height:44px;
    border-radius:12px;
    background:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .contact-detail-icon svg{ width:20px; height:20px; stroke:#fff; fill:none; }
  .contact-detail-icon svg.filled{ fill:#fff; stroke:none; }
  .contact-detail-text{ display:flex; flex-direction:column; gap:2px; }
  .contact-detail-label{
    font-family:'Inter',sans-serif;
    font-size:.76rem;
    color:#9a9da1;
  }
  .contact-detail-value{
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:.94rem;
    color:var(--ink);
    text-decoration:none;
  }
  a.contact-detail-value:hover{ color:var(--accent); }
  .contact-detail.address .contact-detail-value{ max-width:320px; line-height:1.5; }

  .contact-form-card{
    background:#fff;
    border-radius:24px;
    padding:44px;
    box-shadow:0 1px 0 rgba(11,13,16,.04), 0 30px 60px -30px rgba(11,13,16,.25);
  }
  .contact-field{
    margin-bottom:20px;
  }
  .contact-field label{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:.82rem;
    font-weight:500;
    color:#4b4f54;
    margin-bottom:8px;
  }
  .contact-field input,
  .contact-field select,
  .contact-field textarea{
    width:100%;
    font-family:'Inter',sans-serif;
    font-size:.9rem;
    color:var(--ink);
    background:var(--paper);
    border:1px solid transparent;
    border-radius:10px;
    padding:12px 14px;
    box-sizing:border-box;
    transition:border-color .25s var(--ease);
  }
  .contact-field input::placeholder,
  .contact-field textarea::placeholder{ color:#a2a5a9; }
  .contact-field input:focus,
  .contact-field select:focus,
  .contact-field textarea:focus{
    outline:none;
    border-color:var(--accent);
    background:#fff;
  }
  .contact-field textarea{ resize:vertical; min-height:96px; }
  .contact-field select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
    padding-right:38px;
    cursor:pointer;
  }

  .contact-submit{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:.92rem;
    color:#fff;
    background:var(--ink);
    border:none;
    border-radius:999px;
    padding:8px 24px 8px 8px;
    cursor:pointer;
    transition:background .25s var(--ease);
  }
  .contact-submit:hover{ background:var(--accent); }
  .contact-submit-icon{
    width:34px; height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .contact-submit-icon svg{ width:16px; height:16px; stroke:#fff; }
  .contact-submit-icon svg.filled{ stroke:none; fill:#fff; }
  .contact-form-note{
    margin-top:14px;
    font-family:'Inter',sans-serif;
    font-size:.84rem;
    color:var(--accent);
    display:none;
  }
  .contact-form-note.show{ display:block; }

  /* ---------------- SITE FOOTER ---------------- */
  .site-footer{
    background:var(--ink);
    padding:36px clamp(20px,6vw,80px);
  }
  .footer-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-brand img{ height:20px; width:auto; display:block; }
  .footer-links{
    display:flex;
    gap:28px;
    list-style:none;
  }
  .footer-links a{
    font-family:'Inter',sans-serif;
    font-size:.86rem;
    color:rgba(245,246,247,.75);
    transition:color .25s var(--ease);
  }
  .footer-links a:hover{ color:#fff; }
  .footer-copy{
    font-family:'Inter',sans-serif;
    font-size:.8rem;
    color:rgba(245,246,247,.5);
  }

  /* ---------------- RECOGNITION / AWARD ---------------- */
  .recognition-section{
    background:radial-gradient(ellipse 80% 100% at 50% 40%, #16191d 0%, #050506 72%);
    color:var(--paper);
    padding:35px clamp(20px,6vw,80px);
    text-align:center;
  }
  .recognition-inner{
    max-width:780px;
    margin:0 auto;
  }
  .recognition-section h2{
    font-weight:700;
    font-size:clamp(2rem,5vw,3.25rem);
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:30px;
  }
  .gold-divider{
    display:block;
    width:130px;
    height:2px;
    margin:0 auto 36px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .recognition-section p{
    font-family:'Inter',sans-serif;
    font-size:1.05rem;
    line-height:1.75;
    color:rgba(245,246,247,.82);
  }
  .recognition-section a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color .25s var(--ease);
  }
  .recognition-section a:hover{ color:var(--gold); }

  .slider-arrow{
    position:absolute;
    top:calc(50% - 24px);
    transform:translateY(-50%);
    width:44px; height:44px;
    border-radius:50%;
    border:1px solid rgba(11,13,16,.12);
    background:#fff;
    box-shadow:0 10px 24px -12px rgba(11,13,16,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:4;
    transition:background .25s var(--ease), border-color .25s var(--ease), opacity .2s var(--ease);
  }
  .slider-arrow:hover{ background:var(--accent); border-color:var(--accent); }
  .slider-arrow:hover svg{ stroke:#fff; }
  .slider-arrow svg{ width:18px; height:18px; stroke:var(--ink); transition:stroke .2s var(--ease); }
  .slider-arrow.prev{ left:-22px; }
  .slider-arrow.next{ right:-22px; }
  .slider-arrow[disabled]{ opacity:0; pointer-events:none; }

  /* ---------------- PRODUCT PREVIEW (slide-in drawer from the right) ---------------- */
  .preview-overlay{
    position:fixed;
    inset:0;
    background:rgba(11,13,16,.5);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s var(--ease), visibility 0s linear .35s;
    z-index:1000;
  }
  .preview-overlay.open{
    opacity:1;
    visibility:visible;
    transition:opacity .35s var(--ease), visibility 0s;
  }

  .preview-collapse{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    height:100dvh;
    width:min(560px, 94vw);
    background:#fff;
    box-shadow:-24px 0 60px -20px rgba(11,13,16,.35);
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    z-index:1001;
  }
  .preview-overlay.open .preview-collapse{ transform:translateX(0); }

  .preview-close-btn{
    position:sticky;
    top:14px;
    align-self:flex-end;
    margin:14px 20px -10px 0;
    width:36px; height:36px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(11,13,16,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    z-index:2;
    box-shadow:0 4px 14px -6px rgba(11,13,16,.25);
    transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  }
  .preview-close-btn svg{ width:16px; height:16px; stroke:var(--ink); transition:stroke .25s var(--ease); }
  .preview-close-btn:hover{ background:var(--accent); border-color:var(--accent); transform:translateX(3px); }
  .preview-close-btn:hover svg{ stroke:#fff; }

  .preview-media{
    position:relative;
    align-self:center;
    width:calc(100% - 20px);
    margin:8px 0 0;
    aspect-ratio:1/1;
    background:var(--paper);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    box-sizing:border-box;
    flex-shrink:0;
    overflow:hidden;
  }
  .preview-media img{
    max-width:92%;
    max-height:92%;
    width:auto;
    height:auto;
    object-fit:contain;
    margin:auto;
    display:block;
  }

  .preview-media-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:34px; height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(11,13,16,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:3;
    transition:background .25s var(--ease), border-color .25s var(--ease);
  }
  .preview-media-arrow svg{ width:16px; height:16px; stroke:var(--ink); transition:stroke .25s var(--ease); }
  .preview-media-arrow:hover{ background:var(--accent); border-color:var(--accent); }
  .preview-media-arrow:hover svg{ stroke:#fff; }
  .preview-media-arrow.prev{ left:12px; }
  .preview-media-arrow.next{ right:12px; }
  .preview-media-arrow[hidden]{ display:none; }

  .preview-media-dots{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:3;
  }
  .preview-media-dots[hidden]{ display:none; }
  .preview-media-dot{
    width:6px; height:6px;
    border-radius:50%;
    background:rgba(11,13,16,.28);
    cursor:pointer;
    transition:background .25s var(--ease), transform .25s var(--ease);
  }
  .preview-media-dot.active{ background:var(--accent); transform:scale(1.35); }
  .preview-badge{
    position:absolute;
    top:16px; left:16px;
    font-family:'Poppins',sans-serif;
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.02em;
    padding:5px 12px;
    border-radius:20px;
    background:var(--ink);
    color:#fff;
    z-index:2;
  }
  .preview-badge.discount{ background:var(--accent); }
  .preview-badge.bestseller{
    background:var(--gold);
    color:var(--ink);
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .preview-badge[hidden]{ display:none; }

  .preview-body{
    flex:1;
    padding:16px 32px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
  }
  .preview-eyebrow{
    font-family:'Poppins',sans-serif;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .preview-name{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:1.35rem;
    line-height:1.25;
    color:var(--ink);
  }
  .preview-desc{
    font-family:'Inter',sans-serif;
    font-size:.95rem;
    line-height:1.6;
    color:#4b4f54;
    text-align:justify;
    text-justify:inter-word;
  }
  .preview-desc[hidden]{ display:none; }
  .preview-features{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    column-gap:20px;
    row-gap:9px;
    margin-top:2px;
  }
  .preview-features[hidden]{ display:none; }
  .preview-features li{
    display:flex;
    align-items:flex-start;
    gap:9px;
    font-family:'Inter',sans-serif;
    font-size:.9rem;
    line-height:1.5;
    color:#4b4f54;
  }
  .preview-features li svg{
    width:15px; height:15px;
    stroke:var(--accent);
    flex-shrink:0;
    margin-top:2px;
  }
  .preview-divider{
    height:1px;
    background:rgba(11,13,16,.08);
    margin:8px 0 2px;
  }
  .preview-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:4px;
  }
  .preview-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:.95rem;
    color:#fff;
    background:var(--ink);
    border:none;
    border-radius:12px;
    padding:15px 22px;
    cursor:pointer;
    text-decoration:none;
    transition:background .25s var(--ease);
  }
  .preview-whatsapp:hover{ background:var(--accent); }
  .preview-whatsapp svg{ width:18px; height:18px; fill:#fff; }



  /* Tablet */
  @media (max-width:1024px){
    .site-header{ padding:0 28px; }
    .main-nav{ gap:26px; }
    .main-nav a{ font-size:.86rem; }
    .hero-controls{ gap:8px; }
    .charge-bar{ width:52px; }
    .category-section{ padding:90px 32px 100px; }
    .shop-section{ padding:0 32px 80px; }
    .product-card{ flex:0 0 190px; }
    .bestsellers-grid{ grid-template-columns:repeat(2,1fr); }
    .extra-bestsellers{ grid-template-columns:repeat(2,1fr); }
    .extra-grid{ grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); }
    /* A 2-column grid at tablet widths leaves too little room for the horizontal
       image-left/content-right card, which was clipping the "View Product" button
       text. Stacking it (image on top, full-width content below) fixes that
       properly instead of continuing to shrink text to fit. */
    .bestseller-card{ flex-direction:column; }
    .bestseller-card .media{ flex-basis:auto; aspect-ratio:1/1; }
  }

  /* Tablet / small laptop -> mobile nav takes over here */
  @media (max-width:860px){
    .main-nav{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:min(78vw,320px);
      background:var(--ink);
      flex-direction:column;
      justify-content:center;
      align-items:flex-start;
      gap:28px;
      padding:0 40px;
      transform:translateX(100%);
      transition:transform .45s var(--ease);
    }
    .main-nav.open{ transform:translateX(0); }
    .main-nav a{ color:var(--paper) !important; font-size:1.2rem; }
    .main-nav a::after{ background:var(--accent) !important; }
    .site-header.scrolled .main-nav a{ color:var(--paper) !important; }
    .site-header.scrolled .main-nav.open{ background:var(--ink); }
    .nav-toggle{ display:block; }
    .category-slider{ padding:0 6px; }
    .arrivals-slider{ padding:0 6px; }
    .slider-arrow.prev{ left:-8px; }
    .slider-arrow.next{ right:-8px; }
    .hero-scroll-cue{ display:none; }
  }

  /* Mobile */
  @media (max-width:600px){
    .site-header{ padding:0 18px; }
    .logo img{ height:15px; }
    .hero{ min-height:auto; height:100svh; }
    .hero-controls{ bottom:18px; gap:6px; }
    .charge-bar{ width:34px; height:3px; }
    .category-section{ padding:64px 0 72px; }
    .category-header{ padding:0 20px; margin-bottom:40px; }
    .category-grid{ padding:4px 20px 12px; gap:16px; }
    .category-card{ flex-basis:104px; }
    .slider-arrow{ display:none; }
    .recognition-section{ padding:35px 24px; }
    .brand-story-section{ padding:64px 24px; }
    .brand-story-grid{ grid-template-columns:1fr; gap:32px; }
    .why-us-section{ padding:64px 24px; }
    .why-us-row{ grid-template-columns:1fr; gap:32px; }
    .why-us-divider{ margin:32px 0; }
    .contact-section{ padding:64px 24px; }
    .contact-grid{ grid-template-columns:1fr; gap:40px; }
    .contact-form-card{ padding:28px; }
    .footer-inner{ flex-direction:column; text-align:center; gap:16px; }
    .footer-links{ flex-wrap:wrap; justify-content:center; gap:18px; }
    .shop-section{ padding:0 0 64px; }
    .shop-section-header{ padding:0 20px; margin-bottom:24px; }
    .arrivals-grid{ padding:4px 20px 12px; gap:14px; }
    .product-card{ flex-basis:158px; }
    .bestsellers-grid{ grid-template-columns:1fr; padding:0 20px; gap:18px; }
    .extra-bestsellers{ grid-template-columns:1fr; padding:0 20px; gap:18px; }
    .extra-grid{ grid-template-columns:repeat(2,1fr); padding:0 20px; }
    .explore-filter-dropdown{ flex:1 1 100%; }
    .explore-filter-trigger{ width:100%; min-width:0; }
    .explore-filter-menu{ left:20px; right:20px; min-width:0; width:auto; }
    .explore-grid{ grid-template-columns:repeat(2,1fr); padding:0 20px; }
    .preview-collapse{ width:100vw; }
    .preview-media{ width:calc(100% - 20px); margin:6px 0 0; padding:8px; }
    .preview-body{ padding:14px 20px 18px; gap:7px; }
    .preview-name{ font-size:1.15rem; }
    .preview-desc{ font-size:.85rem; line-height:1.45; }
    .preview-features{ grid-template-columns:1fr; }
    .bestseller-card{ flex-direction:column; }
    .bestseller-card .media{ flex-basis:auto; aspect-ratio:1/1; }
    .bestseller-card .content{ padding:18px 20px 22px; }
  }

  /* Small phones */
  @media (max-width:380px){
    .logo img{ height:13px; }
    .charge-bar{ width:26px; }
  }

  /* Landscape phones (short viewport height) -> keep the hero from feeling cramped */
  @media (max-height:480px) and (orientation:landscape){
    .hero{ height:100vh; min-height:340px; }
    .hero-controls{ bottom:12px; }
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce){
    .hero-slide, .hero-slide img, .site-header, .main-nav a::after, .category-thumb{
      transition-duration:.01ms !important;
      animation-duration:.01ms !important;
    }
  }