/* ============================================================
   LOKOZET — Global stylesheet
   Palette and type pulled from the brand mark: rich saddle-leather
   brown, cream, and an inscriptional serif for headings — a premium
   leather-goods feel rather than a loud streetwear one.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --black: #1c110b;
  --dark: #2b1a10;
  --leather: #6b3a22;
  --leather-dark: #4a2716;
  --leather-light: #8a5230;
  --accent: #6b3a22;
  --accent-dark: #4a2716;
  --gold: #b8862f;
  --cream: #f6efe3;
  --nav-green: var(--leather);
  --nav-green-dark: var(--leather-dark);
  --light-bg: #f6efe3;
  --border: #e6dac7;
  --text: #241610;
  --muted: #7d6a5a;
  --white: #fff;
  --radius: 3px;
  --maxw: 1280px;
  --font-display: 'Space Grotesk', 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
}

*{ box-sizing: border-box; }
/* Belt-and-braces: without this, any element with its own `display`
   rule (.btn, .pd-preorder-note, etc.) silently overrides the browser's
   built-in `[hidden]` behavior, since author CSS beats the user-agent
   default even at equal/lower specificity. This keeps `hidden` — set
   either in Blade or via el.hidden = true/false in JS — actually hiding
   things everywhere on the site (e.g. the product page's Add to Cart /
   Buy Now / Pre Order Now toggle). */
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.5;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
svg{ display:block; flex-shrink:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1, h2, h3{ font-family: var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}


/* ---------------- Header (fixed on scroll) ---------------- */
.site-header-fixed{
  position:fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.main-header{
  /* Diamond crosshatch leather-grain texture layered over the brand
     gradient, echoing the grain in the LOKOZET logo's leather backdrop.
     Plain gradients (not an SVG noise filter) so it renders reliably. */
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 3px, rgba(255,255,255,.07) 4px, transparent 4px, transparent 7px),
    linear-gradient(180deg, var(--nav-green) 0%, var(--nav-green-dark) 100%);
  color: var(--white);
  position: relative;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:20px;
  padding: 16px 20px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--white);
  white-space:nowrap;
}
.logo-mark{ height:54px; width:auto; }
.logo-fallback{ display:none; }
.logo-fallback.show-fallback{ display:inline; }
.main-header.green-nav .logo{ color:#fff; }
.hamburger{
  display:flex;
  flex-shrink:0;
  width:40px;
  height:40px;
  background:none;
  border:none;
  padding:0;
  color:var(--white);
  align-items:center;
  justify-content:center;
}
.header-search-wrap{ position:relative; flex:1; max-width:640px; }
.header-search{
  display:flex;
  align-items:center;
  background: #eef4f0;
  border-radius: 24px;
  padding: 4px 4px 4px 4px;
  width:100%;
  overflow:hidden;
}
.search-scope{
  display:flex;
  align-items:center;
  flex-shrink:0;
  height:36px;
  gap:6px;
  background:none;
  border:none;
  border-right: 1px solid #d6e2db;
  padding: 0 16px;
  font-size:13px;
  font-weight:600;
  line-height:1;
  color: var(--text);
  white-space:nowrap;
  cursor:pointer;
  max-width:140px;
}
.search-scope span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-scope-menu{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  min-width:180px;
  max-height:280px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding:6px;
  z-index:60;
}
.search-scope-menu.open{ display:block; }
.search-scope-option{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-radius:6px;
  padding:9px 12px;
  font-size:13px;
  font-weight:600;
  color: var(--text);
  cursor:pointer;
}
.search-scope-option:hover{ background:#f1f5f2; }
.search-scope-option.active{ background: var(--nav-green); color:#fff; }
.header-search input{
  background:none;
  border:none;
  outline:none;
  color: var(--text);
  font-size:13px;
  width:100%;
  height:36px;
  padding: 0 12px;
}
.header-search input::placeholder{ color:#8a998f; }
.header-search button[type="submit"]{
  background: none;
  border:none;
  border-radius:50%;
  width:36px;
  height:36px;
  padding:0;
  color: var(--dark);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.header-icons{
  display:flex;
  align-items:center;
  gap: 20px;
  margin-left:auto;
  flex-shrink:0;
}
.header-icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color:#fff;
}
.cart-link, .wishlist-link{ position:relative; }
.cart-count, .wishlist-count{
  position:absolute;
  top:-8px;
  right:-10px;
  background: var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  border-radius:50%;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.search-toggle-btn{
  display:none;
  flex-shrink:0;
  width:40px; height:40px;
  background:none;
  border:none;
  padding:0;
  color:#fff;
  align-items:center;
  justify-content:center;
}

/* ---------------- Category pills bar ---------------- */
.category-pills-bar{
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.category-pills{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 12px 20px;
  overflow-x:auto;
}
.pill{
  background: #eef1f0;
  color: var(--text);
  font-weight:700;
  font-size:13px;
  padding: 9px 20px;
  border-radius: 30px;
  white-space:nowrap;
  transition: background .2s, color .2s;
}
.pill:hover, .pill.active{
  background: var(--nav-green);
  color:#fff;
}

/* ---------------- Nav sidebar (hamburger menu) ---------------- */
.nav-panel-link{
  display:flex;
  align-items:center;
  padding: 13px 4px;
  font-size:14px;
  font-weight:700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-panel-link:hover{ color: var(--leather); }
.nav-panel-group{ border-bottom: 1px solid var(--border); }
.nav-panel-group-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding: 13px 4px;
  background:none;
  border:none;
  font-size:14px;
  font-weight:700;
  text-align:left;
  color: var(--text);
}
.nav-panel-group-toggle svg{ transition: transform .2s; flex-shrink:0; }
.nav-panel-group-toggle.open svg{ transform: rotate(180deg); }
.nav-panel-sub{
  display:none;
  flex-direction:column;
  padding: 0 0 12px 4px;
}
.nav-panel-sub.open{ display:flex; }
.nav-panel-sub a{
  padding: 7px 0 7px 10px;
  font-size:13px;
  color: var(--muted);
  border-left: 2px solid var(--border);
}
.nav-panel-sub a:hover{ color: var(--leather); border-left-color: var(--leather); }
.nav-panel-foot{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:10px;
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  background: linear-gradient(135deg, #1c1c1c, #3a3a3a);
  color:#fff;
  padding: 90px 20px;
  text-align:center;
}
.hero h1{
  font-size: 46px;
  margin:0 0 10px;
  letter-spacing: 2px;
}
.hero p{
  font-size: 16px;
  color:#ddd;
  max-width:520px;
  margin: 0 auto 26px;
}

/* ---------------- Section headings ---------------- */
.section{ padding: 60px 0; }
.section-head{
  text-align:center;
  margin-bottom: 36px;
}
.section-head h2{
  font-size: 36px;
  margin:0 0 8px;
}
.section-head p{ color: var(--muted); margin:0; font-size:14px; }

/* ---------------- Category grid ---------------- */
.category-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.category-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color:#fff;
  text-align:center;
  padding-bottom: 16px;
  transition: transform .25s ease;
}
.category-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
  transition: background .25s ease;
}
.category-card:hover{ transform: translateY(-4px) scale(1.02); }
.category-card:hover::after{ background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 70%); }
.category-card span{
  position:relative;
  z-index:1;
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:.5px;
  font-size:15px;
}

/* ---------------- Product grid & cards ---------------- */
.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.product-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  display:flex;
  flex-direction:column;
}
.product-card:hover{
  box-shadow: 0 16px 30px rgba(0,0,0,.14);
  transform: translateY(-4px);
  border-color: var(--dark);
}
.card-badges{
  position:absolute;
  top:10px; left:10px;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.badge{
  font-family: var(--font-display);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.5px;
  padding: 4px 10px;
  border-radius:3px;
  color:#fff;
}
.badge-new{ background: var(--gold); color: var(--black); }
.badge-sale{ background: var(--accent); }
.quick-add{
  position:absolute;
  left:0; right:0; bottom:0;
  background: var(--dark);
  color:#fff;
  text-align:center;
  padding: 11px;
  font-family: var(--font-display);
  font-size:12.5px;
  letter-spacing:1px;
  width:100%;
  border:none;
  transform: translateY(100%);
  transition: transform .25s ease, background .2s ease;
  z-index:1;
}
.quick-add.added{ background: var(--nav-green); }
.product-card:hover .quick-add{ transform: translateY(0); }
.ph-img{
  position:relative;
  aspect-ratio: 1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  font-weight:800;
  font-size: 34px;
  letter-spacing: 1px;
}
.ph-img .prod-img{
  transition: transform .5s ease;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
.ph-img .ph-fallback{ position:relative; z-index:0; }
.pc-media{ position:relative; overflow:hidden; }
.product-card:hover .prod-img{ transform: scale(1.08); }
.wish-btn{
  position:absolute;
  top:10px; right:10px;
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,.92);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index:1;
}
.wish-btn svg{ width:16px; height:16px; }
.wish-btn.active{ color: var(--accent); }
.wish-btn.active svg{ fill: var(--accent); }
.product-body{ padding: 14px 16px; flex:1; display:flex; flex-direction:column; }
.product-cat{
  font-size:11px;
  text-transform:uppercase;
  color: var(--accent);
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:4px;
}
.product-name{
  font-size:15px;
  font-weight:700;
  margin: 0 0 8px;
}
.product-price{
  margin-top:auto;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.price-now{ font-weight:800; font-size:16px; }
.price-old{ text-decoration: line-through; color:#aaa; font-size:13px; }
.product-card .btn{ margin: 0 16px 16px; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-block;
  background: var(--dark);
  color:#fff;
  border: 2px solid var(--dark);
  padding: 13px 30px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:1px;
  transition: background .2s, transform .15s, box-shadow .2s;
  text-align:center;
  cursor:pointer;
}
.btn:hover{ background: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.18); }
.btn-outline{
  background:none;
  border: 2px solid var(--dark);
  color: var(--dark);
}
.btn-outline:hover{ background: var(--dark); color:#fff; border-color: var(--dark); }
.btn-block{ width:100%; }
.btn-sm{ padding: 9px 20px; font-size:11.5px; }
.btn svg{ display:inline-block; vertical-align:middle; flex-shrink:0; }
.btn:has(svg){ display:inline-flex; align-items:center; justify-content:center; gap:8px; }

/* ---------------- Store map (homepage) ---------------- */
.store-map{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--border);
  line-height:0;
}
.store-map iframe{
  width:100%;
  height:420px;
  display:block;
}
@media (max-width:760px){
  .store-map iframe{ height:320px; }
}
@media (max-width:560px){
  .store-map iframe{ height:260px; }
}

/* ---------------- Outlets ---------------- */
.outlet-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.outlet-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  text-align:center;
  background:#fff;
  transition: box-shadow .2s, transform .2s;
}
.outlet-card:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.08); transform: translateY(-3px); }
.outlet-img{
  height:120px;
  background: var(--leather);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.outlet-img::after{
  content:"";
  width:34px; height:34px;
  border:2px solid rgba(255,255,255,.55);
  border-radius:50%;
}
.outlet-card h4{ margin: 16px 0 2px; font-size:15px; }
.outlet-card a.map-link{
  display:inline-block;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color: var(--leather);
  margin-bottom:16px;
  font-weight:700;
  border-bottom: 1px solid var(--leather);
}

/* ---------------- Customer reviews ---------------- */
.review-card{
  flex: 0 0 340px;
  scroll-snap-align:start;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px 24px;
  display:flex;
  flex-direction:column;
}
.review-quote{ color: var(--gold); opacity:.55; margin-bottom:10px; }
.review-stars{ display:flex; gap:2px; color: var(--gold); margin-bottom:14px; }
.review-text{
  font-size:14px;
  color: var(--text);
  line-height:1.75;
  margin:0 0 22px;
  flex:1;
}
.review-footer{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:16px;
  border-top: 1px solid var(--border);
}
.review-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background: var(--leather);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size:14px;
  flex-shrink:0;
}
.review-meta strong{ display:block; font-size:13.5px; }
.review-meta span{ display:block; font-size:12px; color: var(--muted); margin-top:2px; }
@media (max-width:560px){
  .review-card{ flex-basis:280px; }
}

/* ---------------- Dedicated /reviews page: scattered polaroid wall ---------------- */
.reviews-page{
  background:
    repeating-linear-gradient(45deg, rgba(107,58,34,.05) 0px, rgba(107,58,34,.05) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(107,58,34,.05) 0px, rgba(107,58,34,.05) 1px, transparent 1px, transparent 9px),
    var(--light-bg);
  padding-top: 46px;
  padding-bottom: 60px;
}
.reviews-page-intro{
  text-align:center;
  max-width:560px;
  margin: 0 auto 44px;
}
.reviews-inbox-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background: #edf3ff;
  color: #1877f2;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
  padding:7px 16px;
  border-radius:999px;
  margin-bottom:14px;
}
.reviews-inbox-badge svg{ width:16px; height:16px; flex-shrink:0; }
.reviews-page-intro p{ color: var(--muted); font-size:14.5px; line-height:1.6; margin:0; }

/* Scattered "pinned photo" wall — real screenshots framed like instant
   photos and pinned at slight alternating angles, instead of a flat grid,
   so raw phone screenshots read as intentional social-proof rather than
   clutter. Straightens + lifts on hover. */
.screenshot-wall{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap: 30px 22px;
  padding: 10px 10px 20px;
}
.screenshot-card{
  --rot: 0deg;
  position:relative;
  display:block;
  width: 190px;
  border:none;
  background:#fff;
  padding: 10px 10px 38px;
  border-radius: 3px;
  cursor: zoom-in;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.08);
  transform: rotate(var(--rot));
  transition: transform .25s ease, box-shadow .25s ease;
}
.screenshot-card:nth-child(6n+1){ --rot: -4deg; margin-top: 6px; }
.screenshot-card:nth-child(6n+2){ --rot: 3deg; margin-top: 22px; }
.screenshot-card:nth-child(6n+3){ --rot: -2deg; margin-top: 0; }
.screenshot-card:nth-child(6n+4){ --rot: 5deg; margin-top: 14px; }
.screenshot-card:nth-child(6n+5){ --rot: -3deg; margin-top: 26px; }
.screenshot-card:nth-child(6n+6){ --rot: 2deg; margin-top: 8px; }
.screenshot-card:hover{
  --rot: 0deg;
  transform: translateY(-10px) rotate(var(--rot)) scale(1.05);
  box-shadow: 0 26px 40px rgba(0,0,0,.24);
  z-index: 5;
}
.screenshot-card-tape{
  position:absolute;
  top:-11px; left:50%;
  width:58px; height:22px;
  background: rgba(184,134,47,.6);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.screenshot-card-photo{
  display:block;
  overflow:hidden;
  background: var(--light-bg);
}
.screenshot-card-photo img{
  display:block;
  width:100%;
  height:auto;
}
.screenshot-card-caption{
  position:absolute;
  left:0; right:0; bottom:10px;
  text-align:center;
  font-family: 'Segoe Script','Bradley Hand','Comic Sans MS',cursive;
  font-size:13px;
  color:#3a3a3a;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding: 0 8px;
}
.screenshot-card-check{
  width:14px; height:14px;
  border-radius:50%;
  background: var(--leather);
  color:#fff;
  font-family: Arial, sans-serif;
  font-size:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* Fullscreen lightbox */
.screenshot-lightbox{
  position:fixed;
  inset:0;
  background: rgba(10,10,10,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1200;
  opacity:0;
  visibility:hidden;
  transition: opacity .2s ease;
  padding: 30px;
}
.screenshot-lightbox.is-open{ opacity:1; visibility:visible; }
.screenshot-lightbox-stage{
  max-width: 440px;
  width:100%;
  max-height: 88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.screenshot-lightbox-stage img{
  width:100%;
  max-height: 78vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.screenshot-lightbox-caption{
  color:#fff;
  font-size:13.5px;
  margin-top:14px;
  text-align:center;
}
.screenshot-lightbox-close{
  position:absolute;
  top:20px; right:20px;
  width:40px; height:40px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  color:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.screenshot-lightbox-close:hover{ background: rgba(255,255,255,.22); }
.screenshot-lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  color:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.screenshot-lightbox-nav:hover{ background: rgba(255,255,255,.22); }
.screenshot-lightbox-prev{ left:20px; }
.screenshot-lightbox-next{ right:20px; }

@media (max-width:900px){
  .screenshot-card{ width: 160px; }
}
@media (max-width:560px){
  .screenshot-wall{ gap: 20px 12px; }
  .screenshot-card{ width: 42%; padding: 8px 8px 32px; }
  .screenshot-card:nth-child(n){ margin-top: 10px; }
  .screenshot-card-caption{ font-size:11.5px; }
  .screenshot-lightbox{ padding:16px; }
  .screenshot-lightbox-nav{ width:38px; height:38px; }
  .screenshot-lightbox-prev{ left:8px; }
  .screenshot-lightbox-next{ right:8px; }
  .screenshot-lightbox-close{ top:12px; right:12px; }
}

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--black); color:#ccc; padding-top: 40px; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #262626;
}
.footer-col h4{
  color:#fff;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.5px;
  margin: 0 0 16px;
}
.footer-col a{
  display:block;
  color:#aaa;
  font-size:13px;
  padding: 5px 0;
}
.footer-col a:hover{ color: var(--accent); }
.brand-col p{ color:#888; font-size:13px; margin: 10px 0 16px; }
.footer-social{ display:flex; gap: 10px; flex-wrap:wrap; }
.footer-social a{
  width:38px;
  height:38px;
  border-radius:50%;
  border: 1px solid #3a2a20;
  color: #ccc;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: border-color .2s, color .2s, background .2s;
}
.footer-social a:hover{ border-color: var(--gold); color: var(--gold); background: rgba(184,134,47,.08); }
.footer-bottom{
  text-align:center;
  padding: 18px 20px;
  font-size:12px;
  color:#777;
}

/* ---------------- Floating buttons ---------------- */
.floating-btns{
  position:fixed;
  right: 20px;
  bottom: 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  z-index: 500;
}
.fab{
  width:48px; height:48px;
  border-radius:50%;
  background: var(--leather);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.15);
  transition: transform .2s, background .2s;
}
.fab:hover{ background: var(--gold); transform: translateY(-2px); }
.fab-whatsapp{ background: var(--black); }

.fab-sub-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.fab-sub-group .fab{
  opacity:0;
  transform: translateY(14px) scale(.6);
  pointer-events:none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.floating-btns.open .fab-sub-group .fab{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.floating-btns.open .fab-sub-group a:nth-child(1){ transition-delay:.08s; }
.floating-btns.open .fab-sub-group a:nth-child(2){ transition-delay:.02s; }

.fab-support{
  width:54px;
  height:54px;
  background: var(--gold);
  border-color: rgba(255,255,255,.25);
}
.fab-support:hover{ background: var(--leather-light); }
.floating-btns.open .fab-support{ background: var(--leather); }

/* ---------------- Mobile bottom tab bar ---------------- */
.bottom-nav{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index: 900;
  background:#fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.bn-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding: 6px 2px;
  color: var(--muted);
  font-size:10.5px;
  font-weight:700;
  border-radius: var(--radius);
}
.bn-item svg{ width:21px; height:21px; }
.bn-item.active{ color: var(--leather); }
.bn-icon{ position:relative; display:flex; }
.bn-icon .cart-count, .bn-icon .wishlist-count{
  position:absolute;
  top:-6px; right:-9px;
  width:15px; height:15px;
  font-size:9px;
}

/* ---------------- Cart / wishlist slide-out sidebars ---------------- */
.sidebar-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.5);
  z-index: 1100;
  display:none;
}
.sidebar-overlay.open{ display:block; }
.side-panel{
  position:fixed;
  top:0; right:-420px;
  width: 400px;
  max-width: 90vw;
  height:100%;
  background:#fff;
  z-index: 1200;
  display:flex;
  flex-direction:column;
  transition: right .3s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,.2);
}
.side-panel.open{ right:0; }
.side-panel-left{
  right:auto;
  left:-420px;
  box-shadow: 10px 0 30px rgba(0,0,0,.2);
  transition: left .3s ease;
}
.side-panel-left.open{ left:0; right:auto; }
.side-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink:0;
}
.side-panel-head h3{ margin:0; font-size:15px; text-transform:uppercase; letter-spacing:.5px; }
.side-panel-close{
  background:none; border:none;
  display:flex; align-items:center; justify-content:center;
  color: var(--text);
  width:30px; height:30px;
}
.side-panel-body{ flex:1; overflow-y:auto; padding: 10px 22px; }
.side-panel-footer{ padding: 18px 22px; border-top: 1px solid var(--border); flex-shrink:0; }
.side-item{
  display:flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.side-item .ph-img{ width:72px; height:72px; flex-shrink:0; border-radius: var(--radius); font-size:16px; }
.side-item-info{ flex:1; min-width:0; }
.side-item-info .name{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
.side-item-info .meta{ font-size:12px; color: var(--muted); margin-bottom:8px; }
.side-item-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.side-qty{ display:flex; align-items:center; gap:8px; margin:0; }
.side-qty-btn{
  width:24px; height:24px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  font-size:13px;
  font-weight:700;
  color: var(--text);
}
.side-qty-btn:hover{ border-color: var(--leather); color: var(--leather); }
.side-qty-val{ min-width:16px; text-align:center; font-size:13px; font-weight:700; }
.side-remove{
  background:none; border:none;
  color: var(--accent);
  font-size:12px; font-weight:700;
  padding:0;
}
.side-empty{ text-align:center; padding: 60px 20px; color: var(--muted); }

/* ---------------- Hero slider (image + optional text overlay) ---------------- */
.hero-slider{
  position:relative;
  height: 520px;
  overflow:hidden;
  background: var(--black);
}
.hero-slides{ position:relative; width:100%; height:100%; }
.hero-slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  transition: opacity 1s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding: 0 8%; max-width:560px;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%);
  color:#fff;
}
.hero-slide-content h2{ font-family: var(--font-display); font-size:34px; text-transform:uppercase; margin:0 0 10px; }
.hero-slide-content p{ font-size:14px; opacity:.9; margin:0 0 18px; max-width:420px; }
@media (max-width:560px){
  .hero-slide-content{ padding:0 6%; }
  .hero-slide-content h2{ font-size:22px; }
}
.hero-slider-dots{
  position:absolute;
  left:50%;
  bottom:22px;
  transform: translateX(-50%);
  display:flex;
  gap:9px;
  z-index:2;
}
.hero-slider-dots button{
  width:9px; height:9px;
  border-radius:50%;
  border: none;
  padding:0;
  background: rgba(255,255,255,.5);
  transition: background .2s, width .2s;
}
.hero-slider-dots button.active{
  background: #fff;
  width:26px;
  border-radius:5px;
}
@media (max-width:560px){
  .hero-slider{ height:340px; }
}

/* ---------------- Welcome heading ---------------- */
.welcome-heading{
  text-align:center;
  padding: 54px 20px 8px;
}
.welcome-heading h1{
  font-size: 46px;
  margin:0;
}
.welcome-heading .rule{
  width:60px; height:4px;
  background: var(--accent);
  margin: 16px auto 0;
}

/* ---------------- New In tabs + slider ---------------- */
.new-in-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom: 28px;
}
.new-in-header-left{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap:wrap;
}
.new-in-header-left h2{
  margin:0;
  font-size:28px;
}
.new-in-tabs{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.new-in-tabs button{
  background:none;
  border:none;
  padding: 9px 22px;
  border-radius: 30px;
  font-weight:700;
  font-size:13.5px;
  color: var(--muted);
}
.new-in-tabs button.active{
  background: var(--nav-green);
  color:#fff;
}
.slider-arrows{ display:flex; gap:10px; }
.slider-arrow{
  width:38px; height:38px;
  border-radius:50%;
  border: 1px solid var(--border);
  background:#fff;
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
}
.slider-arrow:hover{ background: var(--light-bg); }
.slider-arrow:disabled{ opacity:.35; cursor:default; }

/* Best Deals slider — prev/next arrows float on the left/right edges of
   the product rail itself instead of sitting in the header next to
   "View All", so the heading + View All always stay on one line. */
.slider-wrap{ position:relative; }
.slider-wrap .slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.slider-wrap .slider-arrow-prev{ left:-19px; }
.slider-wrap .slider-arrow-next{ right:-19px; }
@media (max-width:760px){
  .slider-wrap .slider-arrow{ width:32px; height:32px; }
  .slider-wrap .slider-arrow-prev{ left:4px; }
  .slider-wrap .slider-arrow-next{ right:4px; }
}
.slider-viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.slider-viewport::-webkit-scrollbar{ display:none; }
.slider-track{
  display:flex;
  gap:20px;
}
.slider-track .product-card{
  flex: 0 0 260px;
  scroll-snap-align:start;
}
@media (max-width:560px){
  .slider-track .product-card{ flex-basis:220px; }
  .welcome-heading h1{ font-size:28px; }
}

/* ---------------- Promo banner grid ---------------- */
.promo-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.promo-card{
  position:relative;
  min-height: 240px;
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background-size: cover;
  background-position: center;
  color:#fff;
  padding: 26px;
}
/* Single-banner mode: one promo card fills the whole strip instead of
   sitting alone in a half-width column with empty space beside it. */
.promo-grid--single{
  grid-template-columns: 1fr;
  /* Break out of the centered .container so this single banner runs
     edge-to-edge like a full-bleed hero, instead of sitting inside the
     1280px content column. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.promo-grid--single .promo-card{
  min-height: 300px;
  padding: 36px 8%;
  border-radius: 0;
}
.promo-grid--single .promo-card-content{ max-width: 620px; }
.promo-grid--single .promo-card-content h3{ font-size: 38px; }
@media (max-width: 640px){
  .promo-grid--single .promo-card{ min-height: 240px; padding: 24px 6%; }
  .promo-grid--single .promo-card-content h3{ font-size: 26px; }
}
.promo-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.1) 65%);
  transition: background .3s ease;
}
.promo-card:hover::before{ background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.05) 65%); }
.promo-card-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition: transform .5s ease;
}
.promo-card:hover .promo-card-bg{ transform: scale(1.08); }
.promo-card-content{ position:relative; z-index:1; }
.promo-card-content span{
  display:inline-block;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:2px;
  color: var(--gold);
  background: none;
  padding: 0;
  font-weight:700;
  margin-bottom:10px;
}
.promo-card-content h3{ margin:0 0 14px; font-size:28px; }

/* ---------------- Generic page layout ---------------- */
.page-hero{
  background: var(--dark);
  color:#fff;
  padding: 40px 20px;
  text-align:center;
}
.page-hero h1{ margin:0; text-transform:uppercase; letter-spacing:1px; }
.breadcrumb{ font-size:12px; color:#aaa; margin-top:8px; }
.breadcrumb a{ color:#ccc; }

.shop-layout{
  display:grid;
  grid-template-columns: 250px 1fr;
  gap: 32px;
  align-items:start;
}
.filter-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.filter-box h4{ margin: 0 0 14px; font-family: var(--font-display); font-size:16px; font-weight:600; letter-spacing:.5px; }
.filter-box ul li{ margin-bottom:2px; }
.filter-box ul li a{
  font-size:13px;
  color: var(--muted);
  display:block;
  padding:7px 10px;
  border-left: 2px solid transparent;
  transition: border-color .15s, color .15s, background .15s;
}
.filter-box ul li a:hover{ color: var(--text); background: var(--light-bg); }
.filter-box ul li a.active{ color: var(--dark); font-weight:700; border-left-color: var(--accent); background: var(--light-bg); }

.filter-box-head{
  display:none;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.filter-box-head h4{ margin:0; }
.filter-group + .filter-group{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.filter-group h5{
  margin: 0 0 10px;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:1px;
  color: var(--muted);
}
.filter-options li{ margin-bottom:9px; }
.filter-options label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  color: var(--text);
  cursor:pointer;
}
.filter-options input{ accent-color: var(--leather); flex-shrink:0; }
#clearFiltersBtn{ margin-top:22px; }
.filter-option-sub{ padding-left:20px; }

.filter-options-inline{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-options-inline li{ margin-bottom:0; }
.filter-options-inline label{
  border:1px solid var(--border); border-radius:6px; padding:6px 12px; gap:0;
}
.filter-options-inline input{ position:absolute; opacity:0; width:0; height:0; }
.filter-options-inline label:has(input:checked){ border-color: var(--leather); background: var(--light-bg); color: var(--dark); font-weight:700; }

.filter-price-range{ display:flex; align-items:center; gap:8px; }
.filter-price-input{
  width:0; flex:1; min-width:0; border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; font-size:13px; color: var(--text);
}
.filter-price-range span{ color: var(--muted); flex-shrink:0; }
.filter-price-range .btn{ flex-shrink:0; }

/* ---------------- Active filter chips ---------------- */
.active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.active-filters:empty{ display:none; margin-bottom:0; }
#productGrid.is-loading, #shopPagination.is-loading{ opacity:.45; pointer-events:none; transition:opacity .15s; }
.filter-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  background: var(--light-bg); border:1px solid var(--border); border-radius:20px;
  padding:6px 12px; color: var(--text);
}
.filter-chip:hover{ border-color: var(--leather); color: var(--dark); }
.filter-chip span{ color: var(--muted); font-weight:700; }
.filter-chip-clear{ background:none; color: var(--muted); text-decoration:underline; }

/* ---------------- Account dashboard ---------------- */
.account-sidebar{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  align-self:start;
}
.account-profile-mini{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:18px;
  margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.account-avatar{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--leather);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size:15px;
  flex-shrink:0;
}
.account-profile-mini strong{ display:block; font-size:13.5px; }
.account-profile-mini span{ display:block; font-size:12px; color: var(--muted); margin-top:2px; word-break:break-all; }
.account-nav-list li{ margin-bottom:2px; }
.account-nav-list button{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  text-align:left;
  font:inherit;
  font-size:13px;
  color: var(--muted);
  padding:9px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: border-color .15s, color .15s, background .15s;
}
.account-nav-list button:hover{ color: var(--text); background: var(--light-bg); }
.account-nav-list button.active{ color: var(--dark); font-weight:700; border-left-color: var(--accent); background: var(--light-bg); }
.account-nav-list svg{ flex-shrink:0; }

.account-panel-head{ margin-bottom:24px; }
.account-panel-head h2{ margin:0 0 6px; font-size:24px; }
.account-panel-head p{ color: var(--muted); font-size:13.5px; margin:0; }

.account-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.order-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom:16px;
  overflow:hidden;
}
.order-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding: 14px 18px;
  background: var(--light-bg);
  border-bottom:1px solid var(--border);
}
.order-card-head .order-no{ font-weight:800; font-size:13.5px; }
.order-card-head .order-date{ font-size:12px; color: var(--muted); margin-top:2px; }
.order-status{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding: 4px 11px;
  border-radius: 20px;
  white-space:nowrap;
}
.order-status-delivered{ background:#e4f4e9; color:#227a45; }
.order-status-processing{ background:#fdf1dc; color:#9c711f; }
.order-status-shipped{ background:#e2edfa; color:#2a5f9e; }
.order-status-pending{ background:#f1e6da; color: var(--leather-dark); }
.order-status-cancelled{ background:#f6e4e4; color:#a13a3a; }
.order-card-body{ padding: 14px 18px; display:flex; flex-direction:column; gap:12px; }
.order-item-row{ display:flex; align-items:center; gap:12px; }
.order-item-row .ph-img{ width:52px; height:52px; flex-shrink:0; border-radius: var(--radius); font-size:13px; }
.order-item-row .info{ flex:1; min-width:0; font-size:13px; }
.order-item-row .info .name{ font-weight:700; }
.order-item-row .info .meta{ font-size:12px; color: var(--muted); margin-top:2px; }
.order-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 18px;
  border-top:1px solid var(--border);
  font-size:13px;
}
.order-card-foot .total{ font-weight:800; }

.address-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  margin-bottom:14px;
}
.address-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.address-tag{
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  background: var(--light-bg);
  color: var(--leather);
  padding:3px 9px;
  border-radius:20px;
}
.address-card p{ font-size:13px; color: var(--muted); margin:0 0 10px; line-height:1.6; }
.address-card-actions{ display:flex; gap:14px; }
.address-card-actions button{
  background:none; border:none;
  font-size:12px; font-weight:700;
  color: var(--leather);
  padding:0;
}
.address-card-actions button:hover{ text-decoration:underline; }
.confirm-armed{ color:#c0392b !important; text-decoration:underline; }

.settings-block + .settings-block{ margin-top:30px; padding-top:26px; border-top:1px solid var(--border); }
.settings-block h4{ margin:0 0 16px; font-size:15px; text-transform:uppercase; letter-spacing:.5px; }
.settings-check{ display:flex; align-items:center; gap:9px; font-size:13.5px; margin-bottom:12px; }
.settings-check input{ accent-color: var(--leather); }
.danger-link{ color:#a13a3a; font-size:13px; font-weight:700; }

.filter-toggle-btn{
  display:none;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size:13px;
  font-weight:700;
  background:#fff;
  color: var(--text);
}

.shop-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.shop-toolbar #resultInfo{ font-size:13px; color: var(--muted); }
.sort-wrap{ display:flex; align-items:center; gap:8px; font-size:13px; }
.sort-wrap label{ color: var(--muted); }
.sort-wrap select{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size:13px;
  font-weight:600;
  background:#fff;
  color: var(--text);
}
.shop-pagination{ margin-top: 30px; display:flex; justify-content:center; }
.shop-pagination nav > div:first-child{ display:none; }
.shop-pagination a, .shop-pagination span{ font-size:13px; padding: 4px 8px; }

@media (max-width:860px){
  .filter-toggle-btn{ display:inline-flex; }
  .filter-box{
    position:fixed;
    top:0; left:-320px;
    width:300px;
    max-width:85vw;
    height:100%;
    z-index:1200;
    overflow-y:auto;
    border-radius:0;
    border:none;
    box-shadow: 10px 0 30px rgba(0,0,0,.25);
    transition: left .3s ease;
  }
  .filter-box.open{ left:0; }
  .filter-box-head{ display:flex; }
}

.form-card{
  max-width: 440px;
  margin: 50px auto;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}
.form-card h2{ text-align:center; margin-top:0; text-transform:uppercase; }
.form-group{ margin-bottom: 16px; }
.form-group label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.form-group input, .form-group textarea, .form-group select{
  width:100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  outline:none;
  font-family:inherit;
}
.form-group input:focus, .form-group textarea:focus{ border-color: var(--accent); }
.form-note{ text-align:center; font-size:13px; margin-top:16px; color: var(--muted); }
.form-note a{ color: var(--accent); font-weight:700; }

.form-divider{ display:flex; align-items:center; gap:12px; margin: 18px 0; color: var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.form-divider::before, .form-divider::after{ content:""; flex:1; height:1px; background: var(--border); }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background: var(--white); color: var(--text); border:1px solid var(--border);
  font-weight:600; text-decoration:none;
}
.btn-google:hover{ background: var(--light-bg); transform: translateY(-2px); }

.product-detail{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items:flex-start;
}
.pd-gallery{ position:relative; }
.pd-gallery .ph-img{ border-radius: var(--radius); font-size: 60px; aspect-ratio: 1/1; }
.pd-main-image{
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  transition: opacity .15s ease;
  overflow:hidden;
}
@media (hover:hover) and (pointer:fine){
  .pd-main-image{ cursor: zoom-in; }
}
@media (hover:none){
  .pd-main-image{ cursor: pointer; }
}

/* ---------------- Fullscreen image lightbox ---------------- */
.img-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index: 1300;
  background: rgba(10,6,3,.92);
  align-items:center;
  justify-content:center;
  padding: 50px 20px;
}
.img-lightbox.open{ display:flex; }
.img-lightbox-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  object-fit:contain;
  border-radius: var(--radius);
}
.img-lightbox-close{
  position:absolute;
  top:20px; right:20px;
  width:42px; height:42px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  border:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .2s;
}
.img-lightbox-close:hover{ background: rgba(255,255,255,.24); }
.pd-gallery-thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.pd-gallery-thumb{
  width:72px; height:72px;
  border-radius: var(--radius);
  background-size:cover;
  background-position:center;
  border: 2px solid transparent;
  cursor:pointer;
  flex-shrink:0;
  padding:0;
  transition: border-color .2s;
}
.pd-gallery-thumb:hover{ border-color: var(--gold); }
.pd-gallery-thumb.active{ border-color: var(--leather); }
.pd-info h1{ margin:0 0 10px; font-size:32px; }
.pd-rating{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.pd-rating .stars{ display:flex; gap:2px; color: var(--gold); }
.pd-rating .stars span[data-off]{ opacity:.25; }
.pd-rating-count{ font-size:12.5px; color: var(--muted); }
.pd-trust{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin: 22px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pd-trust div{ font-size:12px; color: var(--muted); }
.pd-trust strong{ display:block; font-size:12.5px; color: var(--text); margin-bottom:2px; }
.pd-price{ font-size:24px; font-weight:800; margin: 10px 0 12px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.pd-price .price-old{ font-size:16px; margin-left:0; }
.pd-save-badge{
  background: var(--gold);
  color: var(--black);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding: 3px 10px;
  border-radius: 20px;
}
.pd-stock{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color: var(--text);
  margin-bottom:22px;
}
.stock-dot{ width:8px; height:8px; border-radius:50%; background:#2e9e4f; flex-shrink:0; }
.pd-label{ color: var(--muted); font-size:13px; margin: 0 0 10px; text-transform:uppercase; letter-spacing:.5px; }
.pd-payment{ margin: 24px 0 4px; }
.pd-payment-label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color: var(--muted); margin-bottom:10px; }
.pd-payment-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pd-payment-badges span{
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size:12px;
  font-weight:700;
  color: var(--text);
  background:#fff;
}
.pd-payment-badges .pay-logo{
  padding:0;
  line-height:0;
  overflow:hidden;
  background:#fff;
}
.pd-payment-badges .pay-logo svg{ display:block; }
.pd-section-title{ font-size:26px; margin:0 0 20px; }
.pd-description-section{ border-top: 1px solid var(--border); }
.pd-reviews-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:24px;
}
.pd-write-review{ font-size:13px; font-weight:700; color: var(--leather); text-decoration:underline; }
.pd-reviews-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.pd-no-reviews{ text-align:center; padding: 40px 20px; color: var(--muted); background: var(--light-bg); border-radius: var(--radius); }
.pd-review-form{ margin-top:32px; padding-top:24px; border-top:1px solid var(--border); max-width:520px; }
.pd-review-form select, .pd-review-form textarea{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:14px; font-family:inherit; margin-bottom:12px;
}
@media (max-width:700px){
  .pd-reviews-grid{ grid-template-columns:1fr; }
}
.size-list{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.size-list button{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  font-weight:700;
  font-size:13px;
}
.size-list button.selected{ background: var(--dark); color:#fff; border-color: var(--dark); }
.size-list button.oos{
  position:relative;
  color: var(--muted);
  border-style:dashed;
  background: var(--light-bg);
}
.size-list button.oos::after{
  content:"";
  position:absolute;
  left:6px; right:6px; top:50%;
  height:1px;
  background: var(--muted);
  transform: rotate(-14deg);
}
.size-list button.oos.selected{
  background:#fff;
  color: var(--leather);
  border-color: var(--leather);
  border-style:solid;
}
.pd-preorder-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12.5px;
  line-height:1.6;
  color: var(--leather-dark);
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom:16px;
}
.badge-preorder{
  display:inline-block;
  background: var(--gold);
  color: var(--black);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding: 2px 7px;
  border-radius:3px;
  margin-left:6px;
  vertical-align:middle;
}
.pd-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.pd-actions .btn{ flex:1 1 140px; border:2px solid var(--dark); }
.pd-wish-btn{
  position:static;
  width:48px;
  height:48px;
  border:1px solid var(--border);
  flex-shrink:0;
}
.qty-row{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.qty-row button{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  font-size:16px;
  font-weight:700;
}
.pd-desc{ color: var(--muted); font-size:14px; line-height:1.8; }
.pd-description-section .pd-desc{ max-width:760px; }

.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{
  text-align:left;
  border-bottom: 2px solid var(--border);
  padding: 10px;
  font-size:13px;
  text-transform:uppercase;
  color: var(--muted);
}
.cart-table td{ padding: 14px 10px; border-bottom: 1px solid var(--border); vertical-align:middle; }
.cart-line-info{ display:flex; align-items:center; gap:14px; }
.cart-line-info .ph-img{ width:64px; height:64px; border-radius:var(--radius); font-size:16px; }
.cart-summary{
  max-width: 360px;
  margin-left:auto;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 24px;
}
.cart-summary-row{ display:flex; justify-content:space-between; margin-bottom:10px; font-size:14px; }
.cart-summary-row.total{ font-weight:800; font-size:18px; border-top:1px solid var(--border); padding-top:12px; }
.empty-state{ text-align:center; padding: 60px 20px; color: var(--muted); }
.product-grid > .empty-state{ grid-column: 1 / -1; }

/* ---------------- Checkout ---------------- */
.checkout-page{ background: var(--light-bg); padding-bottom: 60px; }

/* Step tracker */
.checkout-steps{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:30px;
}
.checkout-step{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color: var(--muted); white-space:nowrap; }
.checkout-step-dot{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:#fff; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color: var(--muted);
}
.checkout-step.is-done .checkout-step-dot{ background: var(--leather); border-color: var(--leather); color:#fff; }
.checkout-step.is-done{ color: var(--black); }
.checkout-step.is-active .checkout-step-dot{ background: var(--black); border-color: var(--black); color:#fff; }
.checkout-step.is-active{ color: var(--black); }
.checkout-step-line{ width:36px; height:1px; background: var(--border); }

.checkout-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items:start;
}
.checkout-form{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.checkout-section + .checkout-section{
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.checkout-section h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 20px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.checkout-section-icon{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background: var(--light-bg);
  color: var(--leather);
  display:flex; align-items:center; justify-content:center;
}
.checkout-section-icon svg{ width:16px; height:16px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Shipping / payment radio cards with a custom circle indicator (native
   input is visually hidden so the checked state can't look like a stray
   unstyled OS radio button next to the card) */
.payment-options{ display:flex; flex-direction:column; gap:10px; }
.payment-option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size:14px;
  cursor:pointer;
  background:#fff;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.payment-option input{ position:absolute; opacity:0; width:0; height:0; }
.payment-option-radio{
  position:relative;
  width:19px; height:19px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--border);
  transition: border-color .2s;
}
.payment-option-radio::after{
  content:"";
  position:absolute; inset:3px;
  border-radius:50%;
  background: var(--leather);
  transform: scale(0);
  transition: transform .15s;
}
.payment-option:has(input:checked){ border-color: var(--leather); background: var(--light-bg); box-shadow: 0 0 0 1px var(--leather); }
.payment-option:has(input:checked) .payment-option-radio{ border-color: var(--leather); }
.payment-option:has(input:checked) .payment-option-radio::after{ transform: scale(1); }
.payment-option-label{ display:flex; flex-direction:column; gap:2px; }
.payment-option-desc{ font-size:12px; color: var(--muted); }
.payment-option-price{ margin-left:auto; font-weight:700; }
.payment-option-logo{ display:inline-flex; line-height:0; }

.footer-credit{ color:#666; }
.footer-credit a{ color:#999; font-weight:700; }
.footer-credit a:hover{ color: var(--gold); }
.checkout-summary{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  position: sticky;
  top: 130px;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.checkout-summary h3{ margin:0 0 18px; font-size:15px; text-transform:uppercase; letter-spacing:.5px; }

.checkout-item-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.checkout-item-thumb{ position:relative; flex-shrink:0; line-height:0; }
.checkout-item-thumb .ph-img{ width:56px; height:56px; border-radius:10px; font-size:14px; }
.checkout-item-qty{
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; border-radius:50%;
  background: var(--black); color:#fff;
  font-size:10.5px; font-weight:700; line-height:0;
  display:flex; align-items:center; justify-content:center;
}
.checkout-item-info{ flex:1; min-width:0; }
.checkout-item-name{ font-weight:700; font-size:13.5px; }
.checkout-item-meta{ font-size:12px; color: var(--muted); margin-top:2px; }
.checkout-item-price{ font-weight:700; font-size:13.5px; white-space:nowrap; }

.checkout-summary-totals{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--border); }
.checkout-summary-totals .cart-summary-row.total{
  background: var(--light-bg);
  margin: 10px -12px -2px;
  padding: 12px 12px;
  border-radius: 10px;
  border-top:none;
}
.checkout-place-btn{ margin-top:18px; }
.checkout-secure-note{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11.5px; color: var(--muted);
  margin: 14px 0 0;
}
.checkout-secure-note svg{ width:14px; height:14px; }

/* Compact collapsible summary shown ABOVE the form on mobile only, so
   shoppers see the total before scrolling through the whole form. The full
   itemised summary still appears at the bottom near Place Order. */
.checkout-summary-mobile{ display:none; }

@media (max-width:860px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .checkout-summary{ position:static; }
  .form-row{ grid-template-columns: 1fr; }

  .checkout-summary-mobile{
    display:block;
    order:-1;
    background:#fff;
    border:1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 18px;
    overflow:hidden;
  }
  .checkout-summary-mobile summary{
    list-style:none;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding: 14px 16px;
    font-weight:700; font-size:13.5px;
  }
  .checkout-summary-mobile summary::-webkit-details-marker{ display:none; }
  .checkout-summary-mobile summary svg{ width:16px; height:16px; vertical-align:-3px; margin-right:6px; }
  .checkout-summary-mobile-count{ font-weight:500; color: var(--muted); font-size:12px; }
  .checkout-summary-mobile-total{ font-weight:800; }
  .checkout-summary-mobile-body{
    padding: 14px 16px 16px;
    border-top:1px solid var(--border);
  }
  .checkout-summary-mobile-body .checkout-item-row:last-child{ margin-bottom:0; }
}

@media (max-width:560px){
  .checkout-steps{ gap:6px; }
  .checkout-step{ font-size:11.5px; gap:6px; }
  .checkout-step-line{ width:18px; }
}

.about-content, .policy-content{ max-width: 820px; margin: 0 auto; color:#333; line-height:1.9; }
.about-content h2, .policy-content h2{ margin-top: 34px; }

/* ---------------- Toast notifications (replaces banner alerts) ---------------- */
/* Small, non-blocking, auto-dismissing — no alert()/confirm() popups and
   no full-width banner boxes on the storefront. */
.toast-container{
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 1400;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width: 360px;
  width: calc(100vw - 40px);
}
.toast{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  border-left: 4px solid var(--leather);
  font-size: 13.5px;
  line-height:1.5;
  opacity:0;
  transform: translateX(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform: translateX(0); }
.toast-success{ border-left-color: #2e9e4f; color:#1d6b37; }
.toast-error{ border-left-color: #c0392b; color:#a13a3a; }
.toast-body{ flex:1; min-width:0; }
.toast-body ul{ margin:4px 0 0; padding-left:16px; list-style:disc; }
.toast-close{
  background:none; border:none; padding:0; cursor:pointer;
  color: inherit; opacity:.6; line-height:1; flex-shrink:0;
}
.toast-close:hover{ opacity:1; }
@media (max-width: 560px){
  .toast-container{ left:16px; right:16px; top:auto; bottom:80px; max-width:none; width:auto; }
  .toast{ transform: translateY(20px); }
  .toast.show{ transform: translateY(0); }
}

.admin-search-form{ display:flex; gap:8px; align-items:center; }
.admin-search-form input, .admin-search-form select{
  border:1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size:13px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .category-grid{ grid-template-columns: repeat(3,1fr); }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .outlet-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .shop-layout{ grid-template-columns: 1fr; }
  .product-detail{ grid-template-columns: 1fr; gap:24px; }
  .pd-reviews-grid{ grid-template-columns: 1fr; }
}

/* Phone breakpoint — bottom tab bar + hamburger sidebar take over as
   primary navigation; the top bar is trimmed down to hamburger / logo
   / search icon only. */
@media (max-width: 760px){
  .bottom-nav{ display:flex; }
  body{ padding-bottom: 62px; }
  .floating-btns{ bottom: 78px; }

  /* Hero slide images are wide (~3:1) business banners. A fixed height:340px
     forced cover to over-zoom and crop off the logo; pure "contain" fixed
     that but made the banner look tiny. height:45vw scales with the
     screen width instead of a fixed px value — a standard, more moderate
     crop (much milder than the old 340px) that keeps the banner a normal
     size while cropping far less aggressively. */
  .hero-slider{ height:45vw; }
  .hero-slide{ background-size:cover; background-position:center; }

  .header-inner{ flex-wrap:wrap; gap:8px; padding: 12px 16px; }
  .logo{ flex:1; justify-content:center; font-size:19px; gap:8px; }
  .logo-mark{ height:42px; }
  .header-icons{ display:none; }
  .search-toggle-btn{ display:flex; }

  /* Category pill nav (Sneakers / Outfits / Luxury / ...) stays visible on
     phones as a horizontally-scrollable row instead of being hidden. */
  .category-pills-bar{ display:block; }
  .category-pills{ justify-content:flex-start; padding:10px 16px; }

  .header-search-wrap{
    display:none;
    order:5;
    flex-basis:100%;
    max-width:none;
    margin-top:10px;
  }
  .header-search-wrap.open{ display:block; }
  .search-scope span{ display:none; }

  .cart-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cart-table{ min-width:560px; }

  .pd-trust{ grid-template-columns: 1fr; gap:10px; text-align:left; }
  .pd-gallery-thumb{ width:60px; height:60px; }

  .checkout-summary{ top:auto; }
  .about-content, .policy-content{ padding: 0 4px; }
  .form-card{ padding: 26px 20px; margin: 30px auto; }
  .checkout-form, .checkout-summary{ padding: 22px 18px; }
}

@media (max-width: 560px){
  .hero h1{ font-size:30px; }
  .category-grid{ grid-template-columns: repeat(2,1fr); }
  .product-grid{ grid-template-columns: 1fr 1fr; }
  .outlet-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .category-pills{ padding: 10px 16px; }
  .size-list button{ width:40px; height:40px; font-size:12px; }
  .pd-actions{ flex-direction:column; }
  .pd-actions .btn, .pd-actions .btn-block{ flex-basis:auto; width:100%; }
  .pd-wish-btn{ width:100%; height:44px; border-radius: var(--radius); }
  .bn-item{ font-size:9.5px; }
  .bn-item svg{ width:19px; height:19px; }
}