/* ============================================
   URBANZYLOX  Design Tokens
   Light storefront theme (white/paper body) with a
   single dark cinematic hero  matches the reference site.
   Display: Playfair Display (wordmark, hero headline)
   Body/UI: Inter
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:        #16150f;
  --ink-soft:   #57544a;
  --ink-faint:  #8b8779;
  --paper:      #ffffff;
  --paper-2:    #f5f4f1;
  --paper-3:    #eeece7;
  --line:       #e6e3dc;
  --gold:       #c6a15b;
  --gold-dark:  #a5823f;

  --hero-black:   #0c0b0a;
  --hero-black-2: #1a1712;
  --hero-cream:   #f3ede0;
  --hero-stone:   #b7ae9d;

  --radius: 4px;
  --max-w: 1240px;
  --ease: cubic-bezier(.16,.8,.28,1);
}

/* Return request confirmation */
.return-success-card{ text-align:center; padding:34px 30px; }
.return-success-icon{ width:58px; height:58px; display:grid; place-items:center; margin:0 auto 17px; border-radius:50%; background:#e7f7ee; color:#16794d; font-size:1.8rem; font-weight:800; }
.return-success-card .eyebrow{ display:block; margin-bottom:9px; color:#16794d; font-size:.72rem; letter-spacing:.1em; }
.return-success-card h2{ font-size:1.55rem; margin-bottom:10px; }
.return-success-card p{ max-width:355px; margin:0 auto 18px; }
.return-success-reference{ margin:0 auto 22px; padding:11px 14px; background:var(--paper-2); border:1px solid var(--line); border-radius:10px; color:var(--ink-soft); font-size:.88rem; }
.return-success-reference strong{ color:var(--ink); }
.return-success-button{ width:100%; justify-content:center; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold-dark); outline-offset:3px; }

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }
.eyebrow{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dark); font-weight:700;
}
h1,h2,h3{ margin:0; color:var(--ink); }

/* ---------- Header (white) ---------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap{
  display: flex;
  align-items: center;
  height: 82px;
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;   /* Logo bilkul left */
}

.brand-logo{
  height: 50px;
  width: auto;
  display: block;
  object-fit: contain;
}

.main-nav{
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0 auto;       /* Menu center */
}

.main-nav a{
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color .2s var(--ease);
}

.main-nav a.active{
  color: var(--ink);
}

.main-nav a:hover{
  color: var(--ink);
}

.header-icons{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;    /* Icons right */
  position: relative;
}

.header-icons button{
  background: none;
  border: none;
  color: var(--ink);
  padding: 6px;
  display: flex;
  position: relative;
  cursor: pointer;
}

.account-menu{ display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:100; min-width:210px; padding:14px 16px; background:var(--paper); border:1px solid var(--line); box-shadow:0 12px 28px rgba(22,21,15,.14); text-align:left; }
.account-menu.open{ display:block; }
.account-menu-name{ margin:0 0 4px; font-size:.88rem; font-weight:700; color:var(--ink); }
.account-menu-email{ margin:0 0 12px; font-size:.78rem; color:var(--ink-soft); overflow-wrap:anywhere; }
.account-menu-logout{ padding:0 !important; color:#c62828 !important; font-size:.82rem; font-weight:700; }
.account-menu-logout:hover{ color:#8e1c1c !important; text-decoration:underline; }

.header-icons svg{
  width: 20px;
  height: 20px;
}

.cart-count{
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--ink);
  color: var(--paper);
  font-size: .6rem;
  font-weight: 700;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle{
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
}

.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 190;
}
.mobile-menu-overlay.show{
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 85vw);
  max-width: 360px;
  background: var(--paper);
  box-shadow: -14px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .35s ease;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
}
.mobile-menu.open{
  transform: translateX(0);
}
.mobile-menu-close{
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--ink);
}
.mobile-nav{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mobile-nav a{
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.mobile-nav .btn-primary{
  width: 100%;
  justify-content: center;
}

/* ---------- Hero (dark, text overlaid on the campaign photo) ---------- */
.hero{
  position:relative; overflow:hidden; min-height:88vh;
  display:flex; align-items:center;
  background:var(--hero-black);
}
.hero-photo{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .8s ease;background-size:auto 100%,cover;background-position:left,right center;background-repeat:no-repeat}
.hero-slide.active{opacity:1;pointer-events:auto}
.hero-slide-collection{background-position:left,center 42%;filter:brightness(1.14) contrast(1.03)}
.hero-video-slide{overflow:hidden;background:var(--hero-black)}
.hero-video-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,7,.9) 0%,rgba(8,8,7,.76) 38%,rgba(8,8,7,.28) 62%,rgba(8,8,7,.08) 100%);pointer-events:none}
.hero-video-sound{position:absolute;z-index:2;right:28px;top:28px;padding:9px 14px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:rgba(8,8,7,.55);color:#fff;font:600 13px/1 inherit;cursor:pointer;backdrop-filter:blur(6px)}
.hero-video-sound:hover{background:rgba(8,8,7,.82)}
.hero-content.hero-content-right{position:absolute;top:50%;right:clamp(20px,3vw,48px);width:min(440px,38vw);margin:0;transform:translateY(-50%);text-align:left}
.hero-slider-dots{position:absolute;z-index:3;right:28px;bottom:28px;display:flex;gap:8px}
.hero-slider-dots button{width:26px;height:3px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.42);transition:width .25s var(--ease),background .25s var(--ease)}
.hero-slider-dots button.active{width:42px;background:var(--hero-cream)}
.hero-content{ position:relative; z-index:2; max-width:700px; padding:100px 0 64px; margin-right: 800px;
}
/* HERO CONTENT */
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 100px 0 64px;

    opacity: 0;
    animation: heroFade 1.2s ease forwards;
}

/* MAIN TITLE */
.hero-content h1{
    font-family:'Playfair Display',serif;
    font-weight:600;
    font-size:clamp(4rem,8vw,7rem);
    line-height:.95;
    color:var(--hero-cream);

    opacity:0;
    transform:translateY(60px);
    animation:titleReveal 1.2s ease forwards;
    animation-delay:.3s;

    text-shadow:0 0 0 rgba(198,161,91,0);
}

/* SUB TITLE */
.hero-content h2{

    opacity:0;
    transform:translateY(40px);

    animation:titleReveal .9s ease forwards;
    animation-delay:.7s;
}

/* PARAGRAPH */
.hero-content p{

    opacity:0;
    transform:translateY(40px);

    animation:titleReveal .9s ease forwards;
    animation-delay:1s;
}

/* BUTTONS */

.hero-content .btn{

    opacity:0;
    transform:translateY(40px);

    animation:titleReveal .9s ease forwards;
    animation-delay:1.3s;

    transition:.35s;
}

.hero-content .btn:hover{

    transform:translateY(-6px) scale(1.05);
    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

/* GOLD GLOW */

.hero-content h1:hover{

    text-shadow:
    0 0 15px rgba(198,161,91,.5),
    0 0 35px rgba(198,161,91,.3);

    transition:.5s;

}


/* ANIMATIONS */

@keyframes heroFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes titleReveal{

    from{
        opacity:0;
        transform:translateY(60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
.hero-content .eyebrow{ display:block; margin-bottom:20px; color:var(--hero-stone); font-weight:600; letter-spacing:.22em; }
.hero-content h1{
  font-family:'Playfair Display',serif; font-weight:600;
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02; letter-spacing:.005em;
  color:var(--hero-cream);
}
.hero-content .divider{ width:64px; height:1px; background:var(--gold); margin:22px 0; }
.hero-content h2{
  font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,3.6vw,3rem); color:var(--hero-cream); letter-spacing:.01em; margin-bottom:14px;
}
.hero-content p{ color:var(--hero-stone); font-size:1rem; max-width:420px; margin-bottom:34px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; font-size:.85rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  border-radius:var(--radius); border:1px solid transparent; transition:all .25s var(--ease);
}
.btn-primary{ background:var(--gold); color:var(--hero-black); }
.btn-primary:hover{ background:var(--hero-cream); transform:translateY(-2px); }
.btn-outline{ border-color:var(--line); color:var(--ink); }
.badge:hover{ border-color:var(--ink); }
.hero .btn-outline{ border-color:var(--hero-stone); color:var(--hero-cream); }
.hero .btn-outline:hover{ border-color:var(--hero-cream); background:rgba(255,255,255,.06); }

/* ---------- Feature strip (light) ---------- */
.feature-strip{ border-bottom:1px solid var(--line); background:var(--paper); }
.feature-strip .wrap{ display:grid; grid-template-columns:repeat(3,1fr); padding:30px 28px; }
.feature{ display:flex; align-items:center; gap:14px; justify-content:center; padding:0 16px; }
.feature svg{ width:24px; height:24px; color:var(--ink); flex-shrink:0; }
.feature strong{ display:block; font-size:.86rem; color:var(--ink); }
.feature span{ display:block; font-size:.76rem; color:var(--ink-faint); }

/* ---------- Section shell ---------- */
.section{ padding:80px 0; }
.section-head{ margin:0 auto 40px; }
.section-head h2{ font-size:clamp(1.5rem,3vw,2rem); font-weight:800; }
.section-head p{ color:var(--ink-soft); margin-top:10px; font-size:.94rem; max-width:520px; }
.section-head.center{ text-align:center; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

/* ---------- Collections (flat illustration cards, like Shopify default) ---------- */
.collections-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.collection-card{ display:block; }
.collection-card .thumb{
  aspect-ratio:1/1.5; background:var(--paper-2); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:10px; margin-bottom:10px; transition:background .25s var(--ease);
}
.collection-card:hover .thumb{ background:var(--paper-3); }
.collection-card .thumb img{ width:125%; height:125%; max-width:none; object-fit:contain; transition:transform .45s var(--ease); }
.collection-card:hover .thumb img{ transform:scale(1.04); }
.collection-card h3{ font-size:1.02rem; font-weight:600; color:var(--ink); }
.collection-card .count{ color:var(--ink-faint); font-size:.82rem; margin-top:3px; }

/* ---------- Product grid ---------- */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-bar button{
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
  padding:9px 20px; border-radius:20px; font-size:.82rem; transition:all .2s var(--ease);
}
.filter-bar button.active, .filter-bar button:hover{ border-color:var(--ink); color:var(--ink); }
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 22px; }
.product-card{ display:block; }
.product-thumb{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--paper-2); border-radius:var(--radius); margin-bottom:14px;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.product-card:hover .product-thumb img{ transform:scale(1.04); }
.badge{
  position:absolute; top:12px; right:12px; background:var(--paper); color:var(--ink);
  font-size:.68rem; font-weight:700; letter-spacing:.03em; padding:6px 12px;
  border-radius:20px; text-transform:uppercase; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.badge.sold-out{ background:rgba(255,255,255,.94); color:var(--ink-soft); }
.quick-add{
  position:absolute; left:12px; right:12px; bottom:12px; background:var(--ink); color:var(--paper);
  text-align:center; padding:11px; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; border-radius:var(--radius); border:none; width:100%;
  transform:translateY(12px); opacity:0; transition:all .25s var(--ease);
}
.product-card:hover .quick-add{ transform:translateY(0); opacity:1; }
.product-info .cat{ font-size:.68rem; color:var(--gold-dark); letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.product-info h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem; margin:4px 0; color:var(--ink); }
.product-info .price{ color:var(--ink-soft); font-size:.9rem; }
.product-info .price .strike{ text-decoration:line-through; color:var(--ink-faint); margin-right:8px; }
.center-cta{ text-align:center; margin-top:48px; }

/* ---------- Product detail ---------- */
.pdp{ display:grid; grid-template-columns:minmax(0,520px) 1fr; gap:60px; padding:56px 0 90px; }
.pdp-gallery{ width:100%; max-width:520px; }
.pdp-slider-wrap{ position:relative; }
.pdp-slider{ display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--radius); background:var(--paper-2); }
.pdp-slider::-webkit-scrollbar{ display:none; }
.pdp-slide{ position:relative; flex:0 0 100%; aspect-ratio:4/5; scroll-snap-align:start; overflow:hidden; }
.pdp-slide img{ width:100%; height:100%; display:block; object-fit:contain; }
.pdp-slide span{ position:absolute; right:12px; bottom:12px; padding:6px 10px; border-radius:999px; background:rgba(22,21,15,.72); color:#fff; font-size:.72rem; }
.pdp-slider-arrow{ position:absolute; z-index:2; top:50%; width:40px; height:40px; border:0; border-radius:50%; transform:translateY(-50%); background:rgba(255,255,255,.9); color:var(--ink); box-shadow:0 3px 14px rgba(0,0,0,.16); cursor:pointer; font-size:18px; }
.pdp-slider-arrow.prev{ left:12px; }
.pdp-slider-arrow.next{ right:12px; }
.pdp-slider-dots{ display:none; align-items:center; justify-content:center; gap:7px; margin-top:12px; }
.pdp-slider-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:width .2s,background .2s; }
.pdp-slider-dot.active{ width:18px; border-radius:999px; background:var(--ink); }
.pdp-swipe-hint{ margin:10px 0 0; color:var(--ink-faint); font-size:.75rem; text-align:center; }
@media(max-width:720px){
  .pdp-slider-arrow{ display:none; }
  .pdp-slider-dots{ display:flex; }
  .pdp-slide span{ display:none; }
  .pdp-swipe-hint{ margin-top:7px; }
}
.pdp-thumbs{ display:flex; gap:10px; }
.pdp-thumbs button{ width:76px; height:96px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--paper-2); padding:0; }
.pdp-thumbs button.active{ border-color:var(--ink); }
.pdp-thumbs img{ width:100%; height:100%; object-fit:cover; }
.pdp-info .cat{ font-size:.75rem; color:var(--gold-dark); letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.pdp-info h1{ font-family:'Inter',sans-serif; font-weight:700; font-size:1.7rem; margin:10px 0 6px; }
.pdp-info .price{ font-size:1.25rem; color:var(--ink); margin-bottom:22px; }
.pdp-info .price .strike{ text-decoration:line-through; color:var(--ink-faint); font-size:1rem; margin-right:10px; }
.size-row{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.size-row button{ width:46px; height:46px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:var(--radius); font-size:.85rem; transition:all .2s var(--ease); }
.size-row button.active, .size-row button:hover{ border-color:var(--ink); }
.size-row button:disabled{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }
.pdp-actions{ display:flex; gap:12px; margin-bottom:30px; }
.pdp-actions .btn{ flex:1; justify-content:center; }
.pdp-actions .btn-primary{ background:var(--ink); color:var(--paper); }
.pdp-actions .btn-primary:hover{ background:var(--gold-dark); }
.pdp-desc{ color:var(--ink-soft); font-size:.92rem; border-top:1px solid var(--line); padding-top:22px; }
.pdp-desc p{ margin-bottom:14px; }
.pod-note{
  display:flex; gap:12px; align-items:flex-start; background:var(--paper-2);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:26px;
}
.pod-note svg{ width:20px; height:20px; color:var(--gold-dark); flex-shrink:0; margin-top:2px; }
.pod-note span{ font-size:.82rem; color:var(--ink-soft); }

/* ---------- Newsletter (white section) ---------- */
.newsletter{ background:var(--paper); border-top:1px solid var(--line); }
.newsletter .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:56px 28px; flex-wrap:wrap; }
.newsletter h3{ font-size:1.5rem; font-weight:800; margin-bottom:6px; }
.newsletter p{ color:var(--ink-soft); font-size:.92rem; }
.newsletter form{
  display:flex; align-items:center; background:var(--paper);
  border:1px solid var(--ink-faint); border-radius:30px; padding:6px 6px 6px 22px;
  min-width:360px; flex:1; max-width:440px;
}
.newsletter input{ flex:1; background:none; border:none; color:var(--ink); font-size:.9rem; padding:8px 0; }
.newsletter input::placeholder{ color:var(--ink-faint); }
.newsletter button{
  background:none; border:none; color:var(--ink); width:38px; height:38px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ---------- Footer utility bar (light gray) ---------- */
.site-footer{ margin-top:auto; background:var(--paper-2); }
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; padding:20px 28px; flex-wrap:wrap; gap:14px; }
.site-footer .copy{ font-size:.8rem; color:var(--ink-faint); }
.footer-links{ display:flex; gap:26px; }
.footer-links a{ font-size:.82rem; color:var(--ink-soft); transition:color .2s; }
.footer-links a:hover{ color:var(--ink); }
.footer-social{ display:flex; gap:16px; }
.footer-social svg{ width:16px; height:16px; color:var(--ink-faint); transition:color .2s; }
.footer-social a:hover svg{ color:var(--ink); }

/* ---------- Legal pages ---------- */
.legal{ padding:64px 0 100px; max-width:800px; margin:0 auto; }
.legal .eyebrow{ display:block; margin-bottom:14px; }
.legal h1{ font-size:2rem; margin-bottom:8px; font-weight:800; }
.legal .updated{ color:var(--ink-faint); font-size:.82rem; margin-bottom:40px; }
.legal h2{ font-size:1.1rem; font-weight:700; margin:34px 0 12px; color:var(--ink); }
.legal p, .legal li{ color:var(--ink-soft); font-size:.94rem; line-height:1.75; margin-bottom:10px; }
.legal ul{ padding-left:20px; list-style:disc; }
.legal-toc{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.legal-toc a{ font-size:.8rem; color:var(--ink-soft); border:1px solid var(--line); padding:7px 14px; border-radius:20px; transition:all .2s; }
.legal-toc a:hover{ color:var(--ink); border-color:var(--ink); }

/* ---------- Empty / toast ---------- */
.empty-state{ text-align:center; padding:80px 20px; color:var(--ink-soft); }
.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,120%);
  background:var(--ink); color:var(--paper); padding:14px 26px; border-radius:30px;
  font-size:.85rem; font-weight:600; z-index:200; transition:transform .35s var(--ease);
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.toast.show{ transform:translate(-50%,0); }

/* ---------- Added to bag confirmation ---------- */
.added-to-bag-popup{
  position:fixed; top:72px; right:20px; width:min(300px, calc(100vw - 32px));
  padding:14px; background:var(--paper); color:var(--ink); border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.16); z-index:210; opacity:0;
  transform:translateY(-14px); pointer-events:none; transition:opacity .28s ease, transform .28s var(--ease);
}
.added-to-bag-popup.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.added-to-bag-close{ position:absolute; top:10px; right:10px; padding:4px 8px; background:none; border:0; color:var(--ink-soft); font-size:1.35rem; line-height:1; }
.added-to-bag-title{ margin:0 28px 10px 0; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.added-to-bag-product{ display:flex; gap:10px; align-items:center; }
.added-to-bag-product img{ width:52px; height:64px; object-fit:cover; background:var(--cream); }
.added-to-bag-product div{ display:grid; gap:5px; min-width:0; }
.added-to-bag-product strong{ font-size:.94rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.added-to-bag-product span{ color:var(--ink-soft); font-size:.78rem; }
.added-to-bag-product b{ font-size:.86rem; }
.added-to-bag-message{ margin:10px 0; color:var(--ink-soft); font-size:.76rem; line-height:1.35; }
.added-to-bag-view{ width:100%; padding:9px; border:0; background:var(--ink); color:var(--paper); font:inherit; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:720px){ .added-to-bag-popup{ top:62px; right:12px; } }

/* ---------- Auth modal ---------- */
.auth-modal{
  position:fixed;
  inset:0;
  background:rgba(11,11,12,.76);
  backdrop-filter:blur(8px);
  z-index:250;
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  transition:opacity .25s ease;
}
.auth-modal.show{
  opacity:1;
  pointer-events:auto;
}
.auth-dialog{
  position:relative;
  width:min(560px,100%);
  background:var(--paper);
  border-radius:24px;
  box-shadow:0 32px 80px rgba(0,0,0,.18);
  overflow:hidden;
  transform:translateY(18px);
  transition:transform .25s ease;
}
.auth-modal.show .auth-dialog{
  transform:translateY(0);
}
.auth-panel{
  display:grid;
  gap:24px;
  padding:32px;
  max-width:520px;
  margin:0 auto;
}
.search-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(6px);
  z-index:300;
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  transition:opacity .25s ease;
}
.search-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.search-modal{
  width:min(700px,100%);
  background:var(--paper);
  border-radius:24px;
  box-shadow:0 28px 90px rgba(0,0,0,.24);
  overflow:hidden;
}
.search-header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 24px;
  border-bottom:1px solid var(--line);
}
.search-form{
  flex:1;
}
.search-input{
  width:100%;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  font-size:1rem;
  outline:none;
}
.search-input:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(14,20,30,.08);
}
.close-search{
  border:none;
  background:none;
  color:var(--ink);
  font-size:1.2rem;
  cursor:pointer;
}
.search-results{
  max-height:calc(100vh - 180px);
  overflow:auto;
  padding:24px;
  display:grid;
  gap:18px;
}
.search-result{
  display:flex;
  gap:16px;
  align-items:center;
  padding:18px 16px;
  background:var(--paper-2);
  border-radius:20px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.search-result:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 48px rgba(0,0,0,.12);
}
.search-result img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:18px;
  flex-shrink:0;
}
.search-result-info h4{
  margin:0 0 6px;
  font-size:1rem;
}
.search-result-info p{
  margin:0;
  color:var(--ink-faint);
  font-size:.95rem;
}
.search-empty{
  color:var(--ink-soft);
  font-size:1rem;
  padding:32px 0;
  text-align:center;
}
.auth-panel-copy .eyebrow{
  display:inline-block;
  margin-bottom:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--gold);
}
.auth-panel-copy h2{
  margin:0 0 12px;
  font-size:2rem;
  line-height:1.05;
  color:var(--ink);
}
.auth-panel-copy p{
  margin:0;
  color:var(--ink-faint);
  font-size:.95rem;
  line-height:1.6;
}
.auth-tabs{
  display:flex;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-2);
  overflow:hidden;
}
.auth-tab{
  flex:1;
  padding:14px 18px;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  font-size:.95rem;
  font-weight:700;
  transition:all .2s ease;
}
.auth-tab.active{
  background:var(--ink);
  color:var(--paper);
}
.auth-actions{
  display:grid;
  gap:16px;
}
.auth-actions .btn{
  width:100%;
  justify-content:center;
  min-height:52px;
}
.btn-google{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
  padding:14px 18px;
}
.btn-google svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.auth-mini-separator{
  text-align:center;
  color:var(--ink-faint);
  font-size:.95rem;
  margin:8px 0 12px;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--ink-faint);
  margin:0;
}
.auth-divider span:first-child,
.auth-divider span:last-child{
  flex:1;
  height:1px;
  background:var(--line);
}
.auth-divider span:nth-child(2){
  white-space:nowrap;
  font-size:.85rem;
}
.auth-form{
  display:grid;
  gap:18px;
}
.auth-form label{
  display:grid;
  gap:8px;
  font-size:.85rem;
  color:var(--ink-faint);
  font-weight:700;
}
.auth-form input{
  height:48px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  color:var(--ink);
  font-size:1rem;
}
.auth-form input:focus{
  outline:none;
  border-color:var(--gold);
}
.auth-form .btn{
  display:flex;
  width:100%;
  justify-content:center;
  min-height:52px;
  padding:0 20px;
  border-radius:16px;
}
.auth-form .btn + .btn{
  margin-top:14px;
}

.close-auth{
  position:absolute;
  top:18px;
  right:18px;
  border:none;
  background:none;
  color:var(--ink);
  font-size:1.3rem;
  cursor:pointer;
}

/* ---------- Cart drawer ---------- */
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw;
  background:var(--paper); border-left:1px solid var(--line); z-index:100;
  transform:translateX(100%); transition:transform .38s var(--ease); display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; opacity:0; pointer-events:none; transition:opacity .3s; }
.cart-overlay.show{ opacity:1; pointer-events:auto; }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-size:1.05rem; font-weight:700; }
.cart-head button{ background:none; border:none; color:var(--ink); font-size:1rem; }
.cart-items{ flex:1; overflow-y:auto; padding:18px 24px; }
.cart-line{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-line img{ width:64px; height:80px; object-fit:cover; border-radius:var(--radius); background:var(--paper-2); }
.cart-line-info{ flex:1; }
.cart-line-info h4{ font-size:.88rem; font-weight:600; margin-bottom:4px; }
.cart-line-info .meta{ font-size:.76rem; color:var(--ink-faint); margin-bottom:8px; }
.qty-row{ display:flex; align-items:center; gap:10px; }
.qty-row button{ width:22px; height:22px; border:1px solid var(--line); background:none; color:var(--ink); border-radius:50%; font-size:.8rem; line-height:1; }
.cart-remove{ font-size:.75rem; color:var(--ink-faint); text-decoration:underline; margin-left:auto; background:none; border:none; }
.cart-foot{ padding:22px 24px; border-top:1px solid var(--line); }
.cart-foot .subtotal{ display:flex; justify-content:space-between; margin-bottom:16px; font-size:.95rem; font-weight:600; }
.cart-foot .btn{ width:100%; justify-content:center; background:var(--ink); color:var(--paper); }
.cart-foot .btn:hover{ background:var(--gold-dark); }

/* Product colour selector */
.color-picker{ margin:0 0 20px; }
.color-picker strong{ display:block; margin-bottom:10px; }
.color-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.color-swatch{ width:34px; height:34px; padding:3px; border:1px solid var(--line); border-radius:50%; background:var(--paper); cursor:pointer; }
.color-swatch span{ display:block; width:100%; height:100%; border-radius:50%; border:1px solid rgba(0,0,0,.14); }
.color-swatch.active{ outline:2px solid var(--ink); outline-offset:2px; }

/* Product detail variant selectors */
.pdp-info .variant-picker{margin:0 0 25px;padding:17px 18px 16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#fffefb,#f8f6f0)}
.pdp-info .variant-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.pdp-info .variant-heading strong{font-size:.84rem;letter-spacing:.04em;text-transform:uppercase}
.pdp-info .variant-heading span{font-size:.86rem;color:var(--ink-soft);font-weight:600}
.pdp-info .color-picker{margin-bottom:16px}
.pdp-info .color-swatches{gap:12px}
.pdp-info .color-swatch{width:38px;height:38px;padding:4px;transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
.pdp-info .color-swatch:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 5px 12px rgba(22,21,15,.12)}
.pdp-info .color-swatch.active{outline:0;border:2px solid var(--ink);box-shadow:0 0 0 3px rgba(22,21,15,.12)}
.pdp-info .size-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0}
.pdp-info .size-row button{position:relative;width:100%;height:50px;border-radius:9px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px}
.pdp-info .size-row button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 6px 14px rgba(22,21,15,.16)}
.pdp-info .size-row button:not(:disabled):hover{border-color:var(--ink);transform:translateY(-1px)}
.pdp-info .size-row button:disabled{opacity:.48;text-decoration:none;background:#f1f0ec;font-size:.72rem;flex-direction:column;gap:0}
.pdp-info .size-row button small{font-size:.56rem;font-weight:600;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em}
.variant-status{display:flex;align-items:center;gap:7px;margin:13px 0 0;color:var(--ink-soft);font-size:.77rem}
.variant-status span{width:7px;height:7px;border-radius:50%;background:#329c68;box-shadow:0 0 0 3px rgba(50,156,104,.12)}
.pdp-actions .btn-primary{display:flex;justify-content:space-between;align-items:center;gap:22px;min-width:220px}
.pdp-actions .btn-primary b{font-size:.82rem;font-weight:600;opacity:.78}
@media(max-width:720px){.pdp-info .variant-picker{padding:15px}.pdp-info .size-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.pdp-info .size-row button{height:48px}.pdp-actions .btn-primary{min-width:0;width:100%}}

/* Product information blocks */
.pdp-info .product-details{display:grid;gap:0;margin-top:30px;padding-top:0;border-top:0}
.pdp-info .product-description{margin:0 0 24px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pdp-info .product-description p{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.pdp-info .product-description p.expanded{display:block}
.description-toggle{margin-top:8px;padding:0;border:0;background:none;color:var(--gold-dark);font:inherit;font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.description-toggle:hover{color:var(--ink)}
.description-toggle:focus-visible{outline:2px solid var(--gold-dark);outline-offset:4px;border-radius:2px}
.product-detail-block,.product-details .pod-note{padding:18px 0;border-top:1px solid var(--line)}
.product-detail-label{display:block;margin-bottom:7px;color:var(--gold-dark);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.product-detail-block p{margin:0;line-height:1.7;color:var(--ink-soft)}
.product-collection p{font-weight:700;color:var(--ink);font-size:.96rem}
.product-details .pod-note{margin:0;background:none;border-radius:0}
.product-details .pod-note span{line-height:1.55}
.product-quality{display:flex;align-items:flex-start;gap:12px;margin:0 0 24px;padding:17px 18px;border:1px solid #ded3bf;border-radius:14px;background:linear-gradient(135deg,#fffcf6,#f5eee2)}
.product-quality svg{width:21px;height:21px;flex:0 0 auto;margin-top:1px;color:var(--gold-dark)}
.product-quality strong{display:block;margin-bottom:4px;color:var(--ink);font-size:.84rem;letter-spacing:.045em;text-transform:uppercase}
.product-quality span{display:block;color:var(--ink-soft);font-size:.8rem;line-height:1.55}

/* Checkout delivery details */
.delivery-card{ margin:28px 0 22px; padding:24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,#fff 0%,var(--paper-2) 100%); }
.delivery-card-head{ display:flex; align-items:flex-start; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.delivery-card-head > .delivery-brand-mark{ width:112px; height:44px; display:flex; align-items:center; flex-shrink:0; }
.delivery-brand-mark img{ width:100%; height:100%; object-fit:contain; object-position:left center; }
.delivery-card h3{ margin:0 0 3px; font-size:1rem; }
.delivery-card-head p,.delivery-safe{ margin:0; color:var(--ink-faint); font-size:.8rem; }
.delivery-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:20px; }
.delivery-field{ display:grid; gap:7px; color:var(--ink-soft); font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.delivery-field.full{ grid-column:1 / -1; }
.delivery-field input{ width:100%; height:48px; padding:0 14px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); font:inherit; font-size:.9rem; font-weight:500; outline:none; transition:border-color .2s,box-shadow .2s; }
.delivery-field input::placeholder{ color:#aaa69c; }
.delivery-field input:focus{ border-color:var(--gold-dark); box-shadow:0 0 0 3px rgba(198,161,91,.16); }
.delivery-safe{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }

@media (max-width:960px){
  .pdp{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .collections-grid{ grid-template-columns:1fr; }
  .feature-strip .wrap{ grid-template-columns:1fr; gap:18px; text-align:center; }
  .feature{ justify-content:center; }
  .hero-emblem{ opacity:.5; width:70%; }
}
@media (max-width:720px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .newsletter .wrap{ flex-direction:column; align-items:flex-start; }
  .newsletter form{ min-width:0; width:100%; max-width:none; }
  .site-footer .wrap{ flex-direction:column; text-align:center; }
  .delivery-card{ padding:18px; }
  .delivery-form-grid{ grid-template-columns:1fr; }
  .delivery-field.full{ grid-column:auto; }
}

/* ---------- Responsive refinements: tablet and mobile ---------- */
@media (max-width:960px){
  .wrap{ padding-left:24px; padding-right:24px; }
  .hero{ min-height:72vh; }
  .hero-photo{
    background-image:linear-gradient(90deg, rgba(12,11,10,.92) 0%, rgba(12,11,10,.72) 52%, rgba(12,11,10,.2) 100%), url('../assets/hero-photo-models.jpg');
    background-size:cover;
    background-position:center;
  }
  .hero-content{ max-width:560px; padding:88px 0 72px; margin-right:0; }
  .collections-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
  .feature-strip .wrap{ grid-template-columns:repeat(3, 1fr); gap:0; text-align:left; }
  .feature{ justify-content:flex-start; padding:0 10px; }
  .feature span{ line-height:1.35; }
}

@media (max-width:720px){
  html{ font-size:15px; }
  .wrap{ padding-left:16px; padding-right:16px; }
  .site-header .wrap{ height:66px; padding:0 14px; }
  .brand-logo{ height:40px; }
  .header-icons{ gap:4px; }
  .header-icons button{ padding:7px; }
  .header-icons button:first-child{ display:none; }
  .hero{ min-height:calc(100svh - 66px); align-items:flex-end; }
  .hero-photo{
    background:none;
  }
  .hero-slide{background-size:cover!important;background-position:center!important}
  .hero-slider-dots{right:16px;bottom:18px}
  .hero-content{ max-width:none; padding:72px 0 42px; }
  .hero-content.hero-content-right{position:relative;top:auto;right:auto;width:auto;margin-left:0;margin-right:0;transform:none}
  .hero-content .eyebrow{ margin-bottom:14px; font-size:.64rem; letter-spacing:.14em; }
  .hero-content h1{ font-size:clamp(2.55rem, 12vw, 4.2rem); }
  .hero-content h2{ font-size:clamp(1.45rem, 7vw, 2rem); line-height:1.15; }
  .hero-content p{ font-size:.92rem; margin-bottom:26px; max-width:34rem; }
  .hero-content .divider{ margin:16px 0; }
  .btn{ min-height:46px; padding:12px 20px; font-size:.76rem; }
  .feature-strip .wrap{ grid-template-columns:1fr; padding-top:20px; padding-bottom:20px; gap:14px; }
  .feature{ justify-content:flex-start; padding:0; }
  .section{ padding:52px 0; }
  .section-head{ margin-bottom:26px; }
  .collections-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 12px; }
  .collection-card .thumb{ padding:6px; margin-bottom:8px; }
  .collection-card h3{ font-size:.92rem; }
  .collection-card .count{ font-size:.75rem; }
  .product-grid{ gap:26px 12px; }
  .product-thumb{ margin-bottom:10px; }
  .product-info h3{ font-size:.86rem; line-height:1.35; }
  .product-info .price{ font-size:.82rem; }
  .badge{ top:8px; right:8px; padding:5px 8px; font-size:.6rem; }
  .quick-add{ display:none; }
  .center-cta{ margin-top:34px; }
  .pdp{ gap:30px; padding:30px 0 56px; }
  .pdp-thumbs{ overflow-x:auto; padding-bottom:3px; }
  .pdp-thumbs button{ flex:0 0 62px; width:62px; height:78px; }
  .pdp-actions{ flex-direction:column; }
  .newsletter .wrap{ gap:22px; padding-top:38px; padding-bottom:38px; }
  .site-footer .wrap{ padding:26px 16px; }
  .footer-links{ justify-content:center; flex-wrap:wrap; gap:10px 18px; }
  .footer-social{ gap:20px; }
  .legal{ padding:42px 0 64px; }
  .legal h1{ font-size:1.7rem; }
  .cart-drawer{ width:100%; max-width:100%; }
  .cart-head,.cart-foot{ padding-left:18px; padding-right:18px; }
  .cart-items{ padding-left:18px; padding-right:18px; }
}

@media (max-width:380px){
  #accountBtn{ display:flex !important; }
  .hero-content h1{ font-size:2.35rem; }
  .collections-grid{ gap:14px 10px; }
  .collection-card h3{ font-size:.84rem; }
  .product-info h3{ font-size:.8rem; }
  .footer-links{ flex-direction:column; gap:7px; }
}

/* ---------- Storefront polish ---------- */
body.home-page{background:#fffdf9}.home-page .site-header{box-shadow:0 1px 0 rgba(22,21,15,.04)}.home-page .hero{min-height:min(780px,calc(100vh - 82px))}.home-page .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.16),transparent 55%);pointer-events:none}.home-page .hero-content{max-width:590px}.home-page .hero-content .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid rgba(243,237,224,.22);background:rgba(255,255,255,.05);font-size:.65rem;border-radius:999px}.home-page .hero-content h1{letter-spacing:-.035em}.home-page .hero-content h2{max-width:580px;line-height:1.05}.home-page .hero-content p{font-size:1.03rem;line-height:1.7}.home-page .btn-primary{box-shadow:0 10px 24px rgba(198,161,91,.22)}.home-page .feature-strip{background:#fffdf9}.home-page .feature-strip .wrap{max-width:1180px}.home-page .feature{min-height:58px}.home-page .feature:not(:last-child){border-right:1px solid var(--line)}.home-page .partner-feature{border:0!important;border-radius:0!important;padding:0 16px!important}.home-page .partner-feature:hover{background:transparent!important}.home-page .partner-feature:hover strong,.home-page .partner-feature:hover span,.home-page .partner-feature:hover svg{color:var(--ink)!important}.home-page .section-head{margin-bottom:35px}.home-page .section-head h2{font-size:clamp(1.9rem,3vw,2.65rem);letter-spacing:-.045em}.home-page .collections-grid{gap:22px}.home-page .collection-card{padding:10px;border:1px solid transparent;border-radius:14px;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}.home-page .collection-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:0 20px 40px rgba(22,21,15,.08)}.home-page .collection-card .thumb{border-radius:10px;overflow:hidden}.home-page .collection-card img{transition:transform .55s var(--ease)}.home-page .collection-card:hover img{transform:scale(1.04)}.home-page .product-grid{gap:24px}.home-page .product-card{border:1px solid transparent;border-radius:12px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}.home-page .product-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:0 20px 40px rgba(22,21,15,.09)}.home-page .product-thumb{overflow:hidden}.home-page .product-thumb img{transition:transform .55s var(--ease)}.home-page .product-card:hover .product-thumb img{transform:scale(1.035)}.home-page .newsletter{margin-top:24px;background:#191812;border:0}.home-page .newsletter h3,.home-page .newsletter p{color:#fffdf6}.home-page .newsletter p{opacity:.72}.home-page .newsletter form{background:#fff;border-color:transparent;box-shadow:0 5px 16px rgba(0,0,0,.12)}.home-page .newsletter button{background:var(--gold);color:#17150e}.home-page .newsletter button:hover{background:var(--ink);color:#fff}.home-page .site-footer{background:#11100d;color:#aaa597}.home-page .site-footer .copy,.home-page .footer-links a{color:#aaa597!important}.home-page .footer-links a:hover{color:#fff!important}@media(max-width:720px){.home-page .hero{min-height:calc(100svh - 66px)}.home-page .feature:not(:last-child){border-right:0}.home-page .feature{min-height:0}.home-page .collections-grid{gap:16px 8px}.home-page .collection-card{padding:5px}.home-page .product-grid{gap:20px 10px}.home-page .section-head{margin-bottom:26px}}

/* Homepage category carousel */
.home-page .category-showcase{background:#fff;padding-bottom:82px}
.home-page .category-showcase-wrap{max-width:1600px}
.home-page .category-showcase-head{text-align:center;margin-bottom:34px}
.home-page .category-showcase-head h2{font-size:1.45rem;font-weight:500;letter-spacing:-.025em}
.category-carousel{position:relative}
.home-page .category-showcase .collections-grid{display:flex;justify-content:center;gap:clamp(28px,5vw,76px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 38px 8px}
.home-page .category-showcase .collections-grid::-webkit-scrollbar{display:none}
.home-page .category-showcase .collection-card{flex:0 0 clamp(210px,18vw,280px);padding:0;border:0;border-radius:0;text-align:center;scroll-snap-align:center;box-shadow:none}
.home-page .category-showcase .collection-card:hover{transform:none;border:0;box-shadow:none}
.home-page .category-showcase .collection-card .thumb{width:100%;aspect-ratio:1;margin:0 0 24px;padding:0;border-radius:50%;background:#f1eee7}
.home-page .category-showcase .collection-card .thumb img{width:100%;height:100%;object-fit:cover;max-width:100%;transition:transform .45s var(--ease)}
.home-page .category-showcase .collection-card:hover .thumb img{transform:scale(1.06)}
.home-page .category-showcase .collection-card h3{font-size:1.05rem;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
.category-arrow{position:absolute;z-index:2;top:calc(50% - 28px);width:46px;height:46px;border:1px solid rgba(22,21,15,.16);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-50%);transition:opacity .2s,transform .2s}
.category-arrow:hover{transform:translateY(-50%) scale(1.05)}
.category-arrow:disabled{opacity:.3;cursor:default}
.category-arrow[hidden]{display:none}
.category-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.category-arrow-prev{left:10px}.category-arrow-next{right:10px}
@media(max-width:720px){.home-page .category-showcase{padding-top:60px!important;padding-bottom:60px}.home-page .category-showcase-head{margin-bottom:26px}.home-page .category-showcase-head h2{font-size:1.2rem}.home-page .category-showcase .collections-grid{justify-content:flex-start;gap:18px;padding:2px 22px 8px}.home-page .category-showcase .collection-card{flex-basis:clamp(158px,58vw,220px)}.home-page .category-showcase .collection-card .thumb{margin-bottom:16px}.home-page .category-showcase .collection-card h3{font-size:.88rem}.category-arrow{display:none}}

/* ---------- Navigation refinement ---------- */
.site-header .wrap{height:76px;padding:0 32px}.main-nav{gap:6px;padding:5px;border:1px solid var(--line);border-radius:999px;background:rgba(247,246,242,.82)}.main-nav a{position:relative;padding:8px 14px;border-radius:999px;font-size:.77rem;letter-spacing:.035em;text-transform:uppercase;color:var(--ink-soft)}.main-nav a:hover,.main-nav a.active{background:var(--ink);color:var(--paper)}.header-icons{gap:7px}.header-icons button{width:36px;height:36px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:50%;transition:background .2s,border-color .2s,transform .2s}.header-icons button:hover{background:var(--paper-2);border-color:var(--line);transform:translateY(-1px)}.cart-count{top:0;right:0;border:2px solid var(--paper);width:15px;height:15px}.nav-toggle{font-size:0!important}.nav-toggle::before{content:"";width:18px;height:12px;display:block;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}.mobile-menu{width:min(350px,88vw);padding:26px 22px 28px;background:linear-gradient(145deg,#fffefb,#f6f3eb);box-shadow:-22px 0 60px rgba(16,15,12,.22)}.mobile-menu::before{content:"UrbanZylox";font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:700;letter-spacing:-.04em;color:var(--ink);padding:8px 7px 22px;border-bottom:1px solid var(--line)}.mobile-menu-close{position:absolute;right:20px;top:23px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;font-size:0!important;display:grid;place-items:center}.mobile-menu-close::before,.mobile-menu-close::after{content:"";position:absolute;width:14px;height:1.5px;background:var(--ink);transform:rotate(45deg)}.mobile-menu-close::after{transform:rotate(-45deg)}.mobile-nav{gap:6px;padding-top:4px}.mobile-nav a{display:flex;align-items:center;min-height:49px;padding:0 13px;border-bottom:1px solid var(--line);font-size:.9rem;letter-spacing:.02em;transition:padding .2s,color .2s}.mobile-nav a::after{content:"\2192";margin-left:auto;color:var(--gold-dark);font-size:1rem}.mobile-nav a:hover{padding-left:18px;color:var(--gold-dark)}@media(max-width:720px){.site-header .wrap{height:66px;padding:0 14px}.header-icons button{width:34px;height:34px}.mobile-menu{gap:18px}.mobile-nav{gap:2px}}

/* Keep the desktop menu as simple Home / Catalog / Contact links. */
@media(min-width:721px){.main-nav{gap:32px;padding:0;border:0;border-radius:0;background:transparent}.main-nav a{padding:0;border-radius:0;font-size:.9rem;letter-spacing:0;text-transform:none;background:transparent!important;color:var(--ink-soft)}.main-nav a:hover,.main-nav a.active{color:var(--ink);background:transparent!important}}

/* Unread admin notice indicator */
a[href="notifications.html"]{position:relative}
a[href="notifications.html"].has-unread-notice::before{content:"";position:absolute;top:8px;right:7px;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#e32727;box-shadow:0 1px 5px rgba(190,20,20,.35)}
.mobile-nav a[href="notifications.html"].has-unread-notice::before{top:10px;right:34px}

/* Hide category carousel arrow/dot controls */
.category-showcase .category-arrow {
  display: none !important;
}


/* ===== UZ PRODUCT SHOWCASE START ===== */

/* Premium catalog product grid */
.catalog-page .products-grid,
#productsGrid,
.products-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

/* Premium card */
.catalog-page .product-card,
#productsGrid .product-card,
.products-grid .product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  color:#111;
  text-decoration:none;
  box-shadow:0 3px 16px rgba(0,0,0,.045);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.catalog-page .product-card:hover,
#productsGrid .product-card:hover,
.products-grid .product-card:hover{
  transform:translateY(-5px);
  border-color:rgba(0,0,0,.14);
  box-shadow:0 15px 35px rgba(0,0,0,.10);
}

/* Product photo */
.catalog-page .product-card .product-thumb,
#productsGrid .product-card .product-thumb,
.products-grid .product-card .product-thumb{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  margin:0;
  overflow:hidden;
  background:#f3f3f3;
}

.catalog-page .product-card .product-thumb img,
#productsGrid .product-card .product-thumb img,
.products-grid .product-card .product-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .5s ease;
}

.catalog-page .product-card:hover .thumb img,
#productsGrid .product-card:hover .thumb img,
.products-grid .product-card:hover .thumb img{
  transform:scale(1.035);
}

/* Product details */
.catalog-page .product-card .product-info,
#productsGrid .product-card .product-info,
.products-grid .product-card .product-info{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  padding:17px 17px 18px;
  background:#fff;
}

.catalog-page .product-card .cat,
#productsGrid .product-card .cat,
.products-grid .product-card .cat{
  display:block;
  margin:0 0 7px;
  color:#777;
  font-size:10px;
  font-weight:650;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.catalog-page .product-card h3,
#productsGrid .product-card h3,
.products-grid .product-card h3{
  margin:0 0 9px;
  color:#111;
  font-size:17px;
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.015em;
}

.catalog-page .product-card .price,
#productsGrid .product-card .price,
.products-grid .product-card .price{
  margin-top:auto;
  color:#111;
  font-size:16px;
  font-weight:500;
}

/* Premium View Product bar — card itself remains clickable */
.catalog-page .product-card .product-info::after,
#productsGrid .product-card .product-info::after,
.products-grid .product-card .product-info::after{
  content:"View Product  →";
  min-height:43px;
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#111;
  color:#fff;
  font-size:12px;
  font-weight:650;
  letter-spacing:.01em;
  transition:background .2s ease;
}

.catalog-page .product-card:hover .info::after,
#productsGrid .product-card:hover .info::after,
.products-grid .product-card:hover .info::after{
  background:#292929;
}

/* Tablet */
@media(max-width:1100px){
  .catalog-page .products-grid,
  #productsGrid,
  .products-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Mobile */
@media(max-width:720px){
  .catalog-page .products-grid,
  #productsGrid,
  .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .catalog-page .product-card,
  #productsGrid .product-card,
  .products-grid .product-card{
    border-radius:13px;
  }

  .catalog-page .product-card .product-info,
  #productsGrid .product-card .product-info,
  .products-grid .product-card .product-info{
    padding:12px;
  }

  .catalog-page .product-card h3,
  #productsGrid .product-card h3,
  .products-grid .product-card h3{
    font-size:14px;
  }

  .catalog-page .product-card .price,
  #productsGrid .product-card .price,
  .products-grid .product-card .price{
    font-size:14px;
  }

  .catalog-page .product-card .product-info::after,
  #productsGrid .product-card .product-info::after,
  .products-grid .product-card .product-info::after{
    min-height:38px;
    margin-top:12px;
    font-size:10px;
  }
}

/* ===== UZ PRODUCT SHOWCASE END ===== */


/* ===== FINAL CATALOG SHOWCASE FIX ===== */

.catalog-page #productGrid.product-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px 18px !important;
  align-items:stretch !important;
}

.catalog-page #productGrid .product-card{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:18px !important;
  text-decoration:none !important;
  color:#111 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.05) !important;
  transition:transform .25s ease,box-shadow .25s ease !important;
}

.catalog-page #productGrid .product-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.10) !important;
}

.catalog-page #productGrid .product-thumb{
  position:relative !important;
  width:100% !important;
  aspect-ratio:4/5 !important;
  overflow:hidden !important;
  margin:0 !important;
  background:#f4f4f4 !important;
}

.catalog-page #productGrid .product-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .45s ease !important;
}

.catalog-page #productGrid .product-card:hover .product-thumb img{
  transform:scale(1.035) !important;
}

.catalog-page #productGrid .product-info{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  padding:16px 17px 18px !important;
  background:#fff !important;
}

.catalog-page #productGrid .product-info .cat{
  margin-bottom:7px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:#777 !important;
}

.catalog-page #productGrid .product-info h3{
  margin:0 0 8px !important;
  font-size:16px !important;
  font-weight:650 !important;
  line-height:1.35 !important;
  color:#111 !important;
}

.catalog-page #productGrid .product-info .price{
  margin-top:auto !important;
  font-size:15px !important;
  color:#111 !important;
}

.catalog-page #productGrid .product-info::after{
  content:"View Product  →";
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  margin-top:15px !important;
  border-radius:8px !important;
  background:#111 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:650 !important;
}

/* Keep existing Quick Add working */
.catalog-page #productGrid .quick-add{
  z-index:5 !important;
}

/* Tablet */
@media(max-width:1100px){
  .catalog-page #productGrid.product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Mobile */
@media(max-width:720px){
  .catalog-page #productGrid.product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .catalog-page #productGrid .product-card{
    border-radius:12px !important;
  }

  .catalog-page #productGrid .product-info{
    padding:11px !important;
  }

  .catalog-page #productGrid .product-info h3{
    font-size:13px !important;
  }

  .catalog-page #productGrid .product-info .price{
    font-size:13px !important;
  }

  .catalog-page #productGrid .product-info::after{
    min-height:37px !important;
    margin-top:11px !important;
    font-size:10px !important;
  }
}

/* ===== END FINAL CATALOG SHOWCASE FIX ===== */

/* ===== FINAL CATALOG SHOWCASE FIX ===== */

.catalog-page #productGrid.product-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px 18px !important;
  align-items:stretch !important;
}

.catalog-page #productGrid .product-card{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:18px !important;
  text-decoration:none !important;
  color:#111 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.05) !important;
  transition:transform .25s ease,box-shadow .25s ease !important;
}

.catalog-page #productGrid .product-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.10) !important;
}

.catalog-page #productGrid .product-thumb{
  position:relative !important;
  width:100% !important;
  aspect-ratio:4/5 !important;
  overflow:hidden !important;
  margin:0 !important;
  background:#f4f4f4 !important;
}

.catalog-page #productGrid .product-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .45s ease !important;
}

.catalog-page #productGrid .product-card:hover .product-thumb img{
  transform:scale(1.035) !important;
}

.catalog-page #productGrid .product-info{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  padding:16px 17px 18px !important;
  background:#fff !important;
}

.catalog-page #productGrid .product-info .cat{
  margin-bottom:7px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:#777 !important;
}

.catalog-page #productGrid .product-info h3{
  margin:0 0 8px !important;
  font-size:16px !important;
  font-weight:650 !important;
  line-height:1.35 !important;
  color:#111 !important;
}

.catalog-page #productGrid .product-info .price{
  margin-top:auto !important;
  font-size:15px !important;
  color:#111 !important;
}

.catalog-page #productGrid .product-info::after{
  content:"View Product  →";
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  margin-top:15px !important;
  border-radius:8px !important;
  background:#111 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:650 !important;
}

/* Keep existing Quick Add working */
.catalog-page #productGrid .quick-add{
  z-index:5 !important;
}

/* Tablet */
@media(max-width:1100px){
  .catalog-page #productGrid.product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Mobile */
@media(max-width:720px){
  .catalog-page #productGrid.product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .catalog-page #productGrid .product-card{
    border-radius:12px !important;
  }

  .catalog-page #productGrid .product-info{
    padding:11px !important;
  }

  .catalog-page #productGrid .product-info h3{
    font-size:13px !important;
  }

  .catalog-page #productGrid .product-info .price{
    font-size:13px !important;
  }

  .catalog-page #productGrid .product-info::after{
    min-height:37px !important;
    margin-top:11px !important;
    font-size:10px !important;
  }
}

/* ===== END FINAL CATALOG SHOWCASE FIX ===== */

/* ===== HOMEPAGE PRODUCT SHOWCASE ===== */

.home-page .product-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px 18px !important;
  align-items:stretch !important;
}

.home-page .product-card{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:18px !important;
  color:#111 !important;
  text-decoration:none !important;
  box-shadow:0 4px 18px rgba(0,0,0,.05) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}

.home-page .product-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.10) !important;
}

.home-page .product-thumb{
  position:relative !important;
  width:100% !important;
  aspect-ratio:4/5 !important;
  overflow:hidden !important;
  margin:0 !important;
  background:#f4f4f4 !important;
}

.home-page .product-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .45s ease !important;
}

.home-page .product-card:hover .product-thumb img{
  transform:scale(1.035) !important;
}

.home-page .product-info{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  padding:16px 17px 18px !important;
  background:#fff !important;
}

.home-page .product-info .cat{
  margin-bottom:7px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:#777 !important;
}

.home-page .product-info h3{
  margin:0 0 8px !important;
  font-size:16px !important;
  font-weight:650 !important;
  line-height:1.35 !important;
  color:#111 !important;
}

.home-page .product-info .price{
  margin-top:auto !important;
  font-size:15px !important;
  color:#111 !important;
}

.home-page .product-info::after{
  content:"View Product  →";
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  margin-top:15px !important;
  border-radius:8px !important;
  background:#111 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:650 !important;
}

.home-page .quick-add{
  z-index:5 !important;
}

@media(max-width:1100px){
  .home-page .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:720px){
  .home-page .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .home-page .product-card{
    border-radius:12px !important;
  }

  .home-page .product-info{
    padding:11px !important;
  }

  .home-page .product-info h3{
    font-size:13px !important;
  }

  .home-page .product-info .price{
    font-size:13px !important;
  }

  .home-page .product-info::after{
    min-height:37px !important;
    margin-top:11px !important;
    font-size:10px !important;
  }
}

/* ===== END HOMEPAGE PRODUCT SHOWCASE ===== */



/* =========================================================
   URBANZYLOX_MOBILE_FIRST_V2
   Customer website mobile optimisation
========================================================= */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video{
  max-width:100%;
}

/* =========================================================
   TABLET + MOBILE
========================================================= */

@media(max-width:768px){

  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    width:100%;
    overflow-x:hidden;
  }

  .wrap{
    width:calc(100% - 28px) !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }


  /* =========================
     HEADER
  ========================= */

  .site-header{
    width:100%;
  }

  .site-header .wrap{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .main-nav{
    display:none !important;
  }

  .nav-toggle{
    display:grid !important;
    place-items:center;
    flex:none;
    width:42px !important;
    height:42px !important;
    min-width:42px;
    padding:0 !important;
    border:0;
    background:transparent;
    color:#111;
    font-size:23px;
    cursor:pointer;
  }

  .brand{
    min-width:0;
  }

  .brand-logo{
    max-width:150px;
    max-height:36px;
    object-fit:contain;
  }

  .header-icons{
    display:flex;
    align-items:center;
    gap:2px;
    margin-left:auto;
  }

  .header-icons button,
  .header-icons a{
    width:42px;
    height:42px;
    min-width:42px;
    display:grid;
    place-items:center;
  }


  /* =========================
     MOBILE MENU
  ========================= */

  #mobileMenu,
  .mobile-menu{
    width:min(88vw,360px) !important;
    max-width:360px;
    height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .mobile-nav a,
  #mobileMenu nav a,
  .mobile-menu nav a{
    min-height:56px;
    display:flex;
    align-items:center;
    padding:10px 3px;
    font-size:16px;
  }


  /* =========================
     GENERAL SECTIONS
  ========================= */

  .section{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  .section-head{
    margin-bottom:24px !important;
  }

  .section-head h1,
  .section-head h2{
    line-height:1.1;
  }


  /* =========================
     HOMEPAGE HERO
  ========================= */

  .hero,
  .hero-slider,
  .hero-slide{
    min-height:68svh;
  }

  .hero-content,
  .hero-copy{
    width:100% !important;
    max-width:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .hero h1,
  .hero-heading{
    font-size:clamp(34px,10vw,54px) !important;
    line-height:.98 !important;
  }

  .hero p,
  .hero-copy p{
    max-width:95%;
    font-size:14px;
    line-height:1.55;
  }

  .hero .btn,
  .hero-content .btn{
    min-height:48px;
    padding:13px 20px;
  }

  .hero-slider-dots{
    right:14px !important;
    bottom:16px !important;
  }


  /* =========================
     CATEGORY CARDS
  ========================= */

  .collections-grid{
    gap:12px;
  }

  .collection-card{
    min-width:0;
  }

  .collection-card img{
    width:100%;
    display:block;
  }


  /* =========================
     PRODUCT GRID
  ========================= */

  .products-grid,
  #productsGrid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch;
  }

  .product-card{
    min-width:0 !important;
    width:100% !important;
    border-radius:12px !important;
    overflow:hidden;
  }

  .product-card .thumb{
    width:100%;
    aspect-ratio:4/5;
    overflow:hidden;
  }

  .product-card .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .product-card .info,
  .product-card .product-info{
    padding:12px !important;
  }

  .product-card .cat{
    font-size:9px !important;
    line-height:1.25;
    margin-bottom:5px;
  }

  .product-card h3{
    font-size:14px !important;
    line-height:1.25 !important;
    margin-bottom:7px !important;
  }

  .product-card .price{
    font-size:14px !important;
  }

  .quick-add,
  .uz-card-button{
    width:100%;
    min-height:40px;
    font-size:11px;
  }

  .uz-like-btn{
    width:34px !important;
    height:34px !important;
    top:9px !important;
    right:9px !important;
  }


  /* =========================
     PRODUCT DETAIL PAGE
  ========================= */

  .pdp,
  .pdp-grid,
  .pdp-layout,
  .product-detail,
  .product-detail-grid{
    grid-template-columns:1fr !important;
  }

  .pdp{
    padding-top:20px !important;
  }

  .pdp-slider{
    border-radius:10px !important;
  }

  .pdp-slide{
    aspect-ratio:4/5;
  }

  .pdp-slider-arrow{
    display:none !important;
  }

  .pdp-slider-dots{
    display:flex !important;
  }

  .pdp-swipe-hint{
    display:block;
    text-align:center;
    font-size:11px;
    opacity:.65;
  }

  .pdp-info,
  .product-info-panel,
  .pdp-content{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .pdp-info h1,
  .product-detail h1{
    font-size:clamp(27px,8vw,38px) !important;
    line-height:1.08;
  }

  .variant-picker{
    margin-top:20px;
  }

  .variant-heading{
    gap:10px;
    align-items:center;
  }

  .size-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px !important;
  }

  .size-row button{
    min-width:0 !important;
    min-height:48px;
    width:100%;
  }

  .color-swatches{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .color-swatch{
    min-width:44px;
    min-height:44px;
  }


  /* Add to Cart + Buy button */
  .pdp-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100%;
  }

  .pdp-actions .btn,
  .pdp-actions button{
    width:100% !important;
    min-width:0 !important;
    min-height:52px;
    padding:11px 8px !important;
    justify-content:center;
    text-align:center;
    font-size:13px !important;
    white-space:normal;
  }


  /* =========================
     CART DRAWER
  ========================= */

  .cart-drawer{
    width:min(100vw,420px) !important;
    max-width:100% !important;
  }

  .cart-head{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .cart-items{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .cart-foot{
    padding:16px !important;
    padding-bottom:max(16px,env(safe-area-inset-bottom)) !important;
  }

  .cart-line{
    min-width:0;
  }

  .cart-line img{
    flex:none;
  }

  .cart-line-info{
    min-width:0;
  }

  .cart-line-info h4{
    overflow-wrap:anywhere;
  }


  /* =========================
     CART PAGE
  ========================= */

  .cart-page,
  .cart-layout,
  .cart-grid{
    grid-template-columns:1fr !important;
  }

  .cart-page .cart-line{
    gap:12px;
  }

  .qty-row{
    flex-wrap:wrap;
  }


  /* =========================
     CHECKOUT
  ========================= */

  .checkout-page{
    width:100% !important;
    max-width:100% !important;
  }

  .checkout-summary{
    width:100% !important;
    padding:17px !important;
    border-radius:14px !important;
    box-shadow:0 5px 22px rgba(0,0,0,.07) !important;
  }

  .checkout-summary h3{
    font-size:18px;
  }

  .checkout-summary .cart-line{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }

  .checkout-summary .cart-line img{
    width:68px !important;
    height:82px !important;
    object-fit:cover;
    border-radius:8px;
  }

  .delivery-card{
    margin-top:12px;
  }

  .delivery-card-head{
    align-items:flex-start !important;
  }

  .delivery-brand-mark{
    flex:none;
  }

  .delivery-form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .delivery-field,
  .delivery-field.full{
    grid-column:1 !important;
    width:100%;
  }

  .delivery-field input,
  .delivery-field select,
  .delivery-field textarea{
    width:100% !important;
    min-height:50px;
    font-size:16px !important;
  }

  #confirmCheckout{
    width:100%;
    min-height:54px;
    font-size:15px;
  }

  .checkout-note{
    font-size:13px !important;
    line-height:1.55;
  }


  /* =========================
     FORMS
  ========================= */

  input,
  select,
  textarea{
    max-width:100%;
    font-size:16px;
  }

  button,
  .btn{
    touch-action:manipulation;
  }

  form .btn{
    min-height:46px;
  }


  /* =========================
     REVIEWS
  ========================= */

  .review-list{
    grid-template-columns:1fr !important;
  }

  .review-card{
    padding:16px !important;
  }

  .review-head{
    gap:10px;
  }


  /* =========================
     ORDER PAGE
  ========================= */

  .order-card{
    padding:16px !important;
  }

  .order-top,
  .order-item,
  .order-total{
    gap:10px;
  }

  .order-thumbnail{
    width:58px !important;
    height:68px !important;
  }


  /* =========================
     FOOTER
  ========================= */

  .site-footer{
    padding-top:40px;
    padding-bottom:max(30px,env(safe-area-inset-bottom));
  }

  .site-footer .wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }


  /* =========================
     SAFETY AGAINST OVERFLOW
  ========================= */

  table{
    max-width:100%;
  }

  pre,
  code{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }

  iframe{
    max-width:100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

  .wrap{
    width:calc(100% - 24px) !important;
  }

  .site-header .wrap{
    min-height:60px;
  }

  .brand-logo{
    max-width:132px;
  }

  .products-grid,
  #productsGrid{
    gap:8px !important;
  }

  .product-card .info,
  .product-card .product-info{
    padding:10px !important;
  }

  .product-card h3{
    font-size:13px !important;
  }

  .pdp-actions{
    gap:7px !important;
  }

  .pdp-actions .btn,
  .pdp-actions button{
    min-height:50px;
    font-size:12px !important;
  }

  .checkout-summary{
    padding:14px !important;
  }

  .section{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:340px){

  .products-grid,
  #productsGrid{
    grid-template-columns:1fr !important;
  }

  .pdp-actions{
    grid-template-columns:1fr !important;
  }

}

/* ===== CATALOG MOBILE 3 PRODUCTS ===== */
@media(max-width:768px){

  .catalog-page .products-grid,
  #productsGrid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .catalog-page .product-card,
  #productsGrid .product-card{
    border-radius:8px !important;
    min-width:0 !important;
  }

  .catalog-page .product-card .thumb,
  #productsGrid .product-card .thumb{
    aspect-ratio:4/5 !important;
  }

  .catalog-page .product-card .info,
  #productsGrid .product-card .info{
    padding:7px 6px 9px !important;
  }

  .catalog-page .product-card .cat,
  #productsGrid .product-card .cat{
    font-size:7px !important;
    margin-bottom:3px !important;
    letter-spacing:.04em !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .catalog-page .product-card h3,
  #productsGrid .product-card h3{
    font-size:10px !important;
    line-height:1.25 !important;
    margin:0 0 5px !important;
    min-height:25px;
  }

  .catalog-page .product-card .price,
  #productsGrid .product-card .price{
    font-size:10px !important;
    line-height:1.2 !important;
  }

  #productsGrid .strike{
    font-size:8px !important;
  }

  #productsGrid .quick-add,
  #productsGrid .uz-card-button{
    min-height:28px !important;
    padding:5px 3px !important;
    font-size:8px !important;
  }

  #productsGrid .uz-like-btn{
    width:27px !important;
    height:27px !important;
    top:5px !important;
    right:5px !important;
  }

  #productsGrid .badge,
  #productsGrid .uz-product-badge{
    font-size:6px !important;
    padding:4px 5px !important;
    top:5px !important;
    left:5px !important;
  }
}

/* Keep 3 products even on small phones */
@media(max-width:420px){
  .catalog-page .products-grid,
  #productsGrid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }
}

@media(max-width:340px){
  .catalog-page .products-grid,
  #productsGrid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}