/* ============================================
   QILLA INTERNATIONAL — EXPORT WEBSITE
   Design tokens:
   --charcoal      #16100A  (primary dark / ink, also the general accent)
   --graphite      #2E1C12  (secondary dark surface / hover shade)
   --steel         #5A5652  (muted text on light, neutral — no brown)
   --off-white     #F7F5F2  (primary light surface)
   --white         #FFFFFF  (pure white surface)
   --safety-yellow #F5C400  (accent reserved for Safety Footwear pages/sections only)
   Type: Fraunces (display) + Inter (body/UI)
   ============================================ */

:root{
  --deep-green: #16100A;       /* charcoal — replaces deep-green */
  --green-mid: #2E1C12;        /* graphite — replaces green-mid */
  --green-pale: #3A2618;
  --gold: var(--ink);          /* small accent text on light backgrounds — charcoal */
  --gold-light: #FFFFFF;       /* accent text/numbers on DARK backgrounds — white */
  --accent-fill: var(--ink);   /* solid fill for buttons & icon-badges — charcoal */
  --accent-fill-hover: var(--green-mid); /* hover shade for solid accent buttons */
  --gold-ink: #FFFFFF;         /* text/icon colour paired with --accent-fill */
  --safety-yellow: #F5C400;    /* safety-footwear-only accent */
  --cream: #F7F5F2;            /* near-white surface, was warm off-white #EBE3D2 */
  --white: #FFFFFF;
  --ink: #16100A;              /* charcoal text */
  --ink-soft: #5A5652;         /* neutral muted text — no brown */
  --line: rgba(22,16,10,0.11);
  --line-light: rgba(255,255,255,0.13);
  --shadow: 0 20px 50px rgba(0,0,0,0.12);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Safety Footwear pages/section: charcoal + white everywhere else on the
   site stays as-is, but the accent shifts to safety yellow here — solid
   fills (buttons, icon badges) use dark ink text for contrast, and
   accent text on dark bands (stats, checkmarks, hovers) turns yellow.
   Small light-background text (--gold) is left charcoal for legibility. */
#safety-footwear-page, #safety-industrial-page, #safety-foundry-page,
#safety-heat-page, #safety-electrical-page, #safety-chemical-page,
#safety-oil-page, #safety-construction-page, #safety-composite-page,
#safety-core{
  --gold-light: var(--safety-yellow);
  --accent-fill: var(--safety-yellow);
  --accent-fill-hover: #D9AE00;
  --gold-ink: var(--ink);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--deep-green);
}
h2{font-size:clamp(1.9rem, 3.2vw, 2.8rem); line-height:1.15; margin-bottom:1rem;}
h3{font-size:1.4rem; line-height:1.25;}
h4{font-size:1.05rem; margin-bottom:0.4rem;}
.italic{font-style:italic; color:var(--gold);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

.section-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}
section{padding:96px 0;}
@media (max-width:768px){
  section{padding:64px 0;}
  .section-inner{padding:0 20px;}
}

.eyebrow{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.75rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:14px;
}
.eyebrow.light{color:var(--gold-light);}
.center{text-align:center; margin-left:auto; margin-right:auto;}
.sub-text{
  max-width:560px;
  color:var(--ink-soft);
  font-size:1.02rem;
  margin-top:-6px;
  margin-bottom:48px;
}
.lead-text{color:var(--ink-soft); font-size:1.05rem; margin-bottom:1.4rem;}

/* grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px;
  font-family:'Inter',sans-serif;
  font-size:0.88rem;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all 0.3s var(--ease);
  white-space:nowrap;
}
.btn-gold{background:var(--accent-fill); color:var(--gold-ink);}
.btn-gold:hover{background:var(--accent-fill-hover);}
.btn-ghost{background:transparent; color:var(--deep-green); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--gold);}
.btn-gold-lg{background:var(--accent-fill); color:var(--gold-ink); padding:16px 34px; font-size:0.92rem;}
.btn-gold-lg:hover{background:var(--accent-fill-hover); transform:translateY(-2px);}
.btn-outline-lg{background:transparent; color:var(--white); border-color:var(--line-light); padding:16px 34px; font-size:0.92rem;}
.btn-outline-lg:hover{border-color:var(--gold-light); color:var(--gold-light);}
.btn-dark-lg{background:var(--deep-green); color:var(--white); padding:16px 36px; font-size:0.92rem;}
.btn-dark-lg:hover{background:var(--green-mid);}
.full{width:100%;}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(22,16,10,0.0);
  backdrop-filter:none;
  transition:background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
  padding:18px 0;
}
.site-header.scrolled{
  background:rgba(22,16,10,0.96);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,0.18);
  padding:12px 0;
}
.header-inner{
  max-width:1280px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{
  width:38px; height:38px; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; color:var(--gold); font-size:1.1rem; font-weight:600;
  flex-shrink:0;
}
.logo-text{
  font-family:'Fraunces',serif; color:var(--white); font-size:1.05rem;
  letter-spacing:0.06em; line-height:1.1; display:flex; flex-direction:column;
}
.logo-sub{font-family:'Inter',sans-serif; font-size:0.55rem; letter-spacing:0.22em; color:var(--gold-light); font-weight:600;}

.main-nav{display:flex; align-items:center; gap:30px;}
.main-nav > a{
  color:rgba(255,255,255,0.85); font-size:0.86rem; font-weight:500;
  display:flex; align-items:center; gap:4px;
  transition:color 0.25s;
  padding:6px 0;
}
.main-nav > a:hover{color:var(--gold-light);}
.caret{font-size:0.7rem;}
.nav-dropdown{position:relative;}
.nav-dropdown > a{
  color:rgba(255,255,255,0.85); font-size:0.86rem; font-weight:500;
  display:flex; align-items:center; gap:4px;
  transition:color 0.25s; padding:6px 0;
}
.nav-dropdown > a:hover{color:var(--gold-light);}
.dropdown-panel{
  position:absolute; top:100%; left:-10px; margin-top:8px;
  background:var(--white); box-shadow:var(--shadow); border-radius:var(--radius);
  min-width:200px; padding:10px; z-index:200;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all 0.25s var(--ease);
}
.nav-dropdown:hover .dropdown-panel{opacity:1; visibility:visible; transform:translateY(0);}
.nav-dropdown.touch-open .dropdown-panel{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-panel a{display:block; color:var(--ink); padding:9px 12px; font-size:0.86rem; border-radius:2px;}
.dropdown-panel a:hover{background:var(--cream); color:var(--deep-green);}

.header-cta{display:flex; gap:12px;}
.header-cta .btn-ghost{color:var(--white); border-color:var(--line-light); padding:10px 20px; font-size:0.82rem;}
.header-cta .btn-ghost:hover{border-color:var(--gold);}
.header-cta .btn-gold{padding:10px 22px; font-size:0.82rem;}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{width:24px; height:2px; background:var(--white); display:block;}

@media (max-width:1024px){
  .main-nav{display:none;}
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
  .main-nav.open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--deep-green); padding:20px 28px; gap:16px; align-items:flex-start;
  }
  .main-nav.open .dropdown-panel{position:static; opacity:1; visibility:visible; transform:none; background:var(--green-mid); margin-top:10px; width:100%;}
  .main-nav.open .dropdown-panel a{color:var(--white);}
  .main-nav.open .nav-dropdown{width:100%;}
}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--deep-green); overflow:hidden;
  padding:140px 24px 60px;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hide-texture{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(22,16,10,0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(46,28,18,0.6), transparent 60%),
    linear-gradient(135deg, #16100A 0%, #111111 50%, #16100A 100%);
}
.stitch-line{
  position:absolute; border-top:1px dashed rgba(22,16,10,0.22);
  width:140%; transform:rotate(-8deg);
}
.stitch-1{top:18%; left:-20%;}
.stitch-2{top:72%; left:-20%; transform:rotate(-8deg);}

.hero-content{position:relative; z-index:1; max-width:880px; text-align:center;}
.hero-eyebrow{
  color:var(--gold-light); text-transform:uppercase; letter-spacing:0.18em;
  font-size:0.78rem; font-weight:600; margin-bottom:22px;
}
.hero h1{
  color:var(--white); font-size:clamp(2.3rem, 5.2vw, 4rem); line-height:1.08;
  margin-bottom:22px;
}
.hero-sub{
  color:rgba(255,255,255,0.78); font-size:clamp(1.02rem,1.6vw,1.18rem);
  max-width:620px; margin:0 auto 40px;
}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:64px;}
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  border-top:1px solid var(--line-light); padding-top:36px; max-width:760px; margin:0 auto;
}
.hstat{display:flex; flex-direction:column; align-items:center; gap:6px;}
.hstat-num{font-family:'Fraunces',serif; font-size:2rem; color:var(--gold-light);}
.hstat-label{font-size:0.76rem; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.06em; text-align:center;}
@media (max-width:640px){
  .hero-stats{grid-template-columns:repeat(2,1fr); gap:24px;}
}

.hero-scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,0.5); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  z-index:1;
}
.hero-scroll-cue span{
  width:1px; height:30px; background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scrollPulse 2s infinite var(--ease);
}
@keyframes scrollPulse{0%{opacity:0.3;}50%{opacity:1;}100%{opacity:0.3;}}

/* ============ TRUST STRIP ============ */
.trust-strip{background:var(--ink); padding:16px 0; overflow:hidden;}
.trust-strip-inner{
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:0.72rem; letter-spacing:0.12em; color:rgba(255,255,255,0.55); text-transform:uppercase;
  font-weight:600;
}
.trust-strip .dot{color:var(--gold-light);}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:80px; align-items:start;}
.about-points{margin-top:36px; display:flex; flex-direction:column; gap:24px;}
.point{display:flex; gap:18px;}
.point-num{
  font-family:'Fraunces',serif; color:var(--gold); font-size:1.3rem; flex-shrink:0; width:36px;
}
.point h4{margin-bottom:4px;}
.point p{color:var(--ink-soft); font-size:0.94rem;}

.about-visual{display:flex; flex-direction:column; gap:24px; position:sticky; top:120px;}
.badge-card{
  background:var(--deep-green); color:var(--white); border-radius:var(--radius);
  padding:40px 30px; text-align:center; position:relative; overflow:hidden;
}
.badge-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 20%, rgba(22,16,10,0.16), transparent 60%);
}
.badge-card-num{font-family:'Fraunces',serif; font-size:4.5rem; color:var(--gold-light); display:block; position:relative;}
.badge-card-label{font-size:0.85rem; letter-spacing:0.05em; color:rgba(255,255,255,0.8); position:relative;}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr; gap:48px;}
  .about-visual{position:static;}
}

/* ============ PLACEHOLDER IMAGE FRAME ============ */
/* Reusable component for any section awaiting a real photo.
   Swap by replacing the inner <div class="img-placeholder"> with
   <img src="..." alt="..." class="real-img"> — wrapper classes stay the same. */
.img-frame{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--deep-green);
}
.img-placeholder{
  width:100%; height:100%; min-height:160px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:20px; text-align:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--green-mid), var(--deep-green));
  border:1px dashed rgba(255,255,255,0.18);
}
.img-placeholder-icon{
  width:40px; height:40px; border:1.5px solid var(--gold-light); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold-light); font-size:1.1rem;
}
.img-placeholder-label{
  font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:600;
}
.real-img{width:100%; height:100%; object-fit:cover; display:block;}

/* ============ IMAGE GALLERY GRID ============ */
.gallery-section{background:var(--white);}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:20px;
}
.gallery-caption{
  margin-top:10px; font-size:0.8rem; color:var(--ink-soft); text-align:center;
}
@media (max-width:980px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* ============ FOUNDER SECTION ============ */
.founder{background:var(--cream);}
.about{background:var(--white);}
.founder-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.founder-photo{position:relative;}
.founder-photo .img-frame{aspect-ratio:4/5; box-shadow:var(--shadow);}
.founder-photo-tag{
  position:absolute; bottom:-16px; left:24px; right:24px;
  background:var(--deep-green); color:var(--white);
  padding:12px 20px; text-align:center; border-radius:var(--radius);
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  box-shadow:var(--shadow);
}
.founder-copy .eyebrow{margin-bottom:14px;}
.founder-name{font-size:1.5rem; color:var(--deep-green); margin-bottom:4px; display:block; font-family:'Fraunces',serif;}
.founder-title{
  font-size:0.82rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em;
  font-weight:600; margin-bottom:22px; display:block;
}
.founder-stats{display:flex; gap:32px; margin-top:28px; flex-wrap:wrap;}
.founder-stat{border-left:2px solid var(--gold); padding-left:14px;}
.founder-stat-num{font-family:'Fraunces',serif; font-size:1.8rem; color:var(--deep-green); display:block;}
.founder-stat-label{font-size:0.76rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}
.founder-note{margin-top:24px; font-size:0.82rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:18px;}
@media (max-width:860px){
  .founder-grid{grid-template-columns:1fr; gap:36px;}
  .founder-photo{max-width:320px; margin:0 auto 36px;}
}
.manufacturing{background:var(--white);}
.factory-capacity{
  margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-light); border:1px solid var(--line-light);
}
.capacity-block{background:var(--deep-green); padding:26px 22px; text-align:center;}
.capacity-num{font-family:'Fraunces',serif; font-size:1.9rem; color:var(--gold-light); display:block;}
.capacity-label{font-size:0.76rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.04em;}
@media (max-width:980px){
  .factory-capacity{grid-template-columns:repeat(2,1fr);}
}


/* ============ TRUST & VERIFICATION ============ */
.verification{background:var(--white);}
.verify-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:20px;}
.verify-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:border-color 0.3s, transform 0.3s;
}
.verify-card:hover{border-color:var(--gold); transform:translateY(-4px);}
.verify-card .img-frame{aspect-ratio:4/3;}
.verify-card-body{padding:18px 20px;}
.verify-card-body h4{font-size:0.92rem; margin-bottom:6px;}
.verify-number{
  font-size:0.78rem; color:var(--ink-soft); font-family:'Inter',monospace;
  display:block; margin-top:4px;
}
.verify-number .pending{color:var(--gold); font-style:italic;}
.verify-note{
  margin-top:32px; padding:16px 20px; background:var(--cream); border-radius:var(--radius);
  font-size:0.84rem; color:var(--ink-soft); text-align:center;
}
@media (max-width:980px){.verify-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.verify-grid{grid-template-columns:1fr;}}

/* ============ EXPORT EXPERIENCE / SOCIAL PROOF ============ */
.social-proof{background:var(--cream);}
.proof-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:20px; background:var(--line); border:1px solid var(--line);}
.proof-block{background:var(--white); padding:32px 20px; text-align:center;}
.proof-num{font-family:'Fraunces',serif; font-size:2.2rem; color:var(--deep-green); display:block;}
.proof-label{font-size:0.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; display:block;}
@media (max-width:980px){.proof-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.proof-grid{grid-template-columns:repeat(2,1fr);}}



/* ============ PRODUCT SPEC ROWS (MOQ / Lead Time / OEM) ============ */
.spec-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.spec-item{font-size:0.74rem;}
.spec-label{display:block; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; font-size:0.66rem; margin-bottom:2px;}
.spec-value{color:var(--deep-green); font-weight:600;}
.card-wide .spec-row, .card-wide-full .spec-row{grid-template-columns:repeat(3,1fr);}
@media (max-width:480px){.spec-row{grid-template-columns:1fr 1fr;}}

/* ============ PRODUCTS ============ */
/* Grid: 3 columns. card-wide spans 2 of 3 columns (used in pairs for bags/safety).
   card-wide-full spans the entire row (used once, for hides). */
.products{background:var(--cream);}
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; gap:24px; margin-top:20px;
}
.product-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,0.07);
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  display:flex; flex-direction:column;
}
.product-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.16);}
.card-wide{grid-column:span 2;}
.card-wide-full{grid-column:1 / -1; flex-direction:row;}
.card-wide-full .card-media{width:38%; height:auto;}
.card-wide-full .card-body{width:62%;}

.card-media{
  height:240px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--green-mid), var(--deep-green));
}
.card-media .real-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
.card-media::after{
  content:''; position:absolute; inset:0; opacity:0.5; z-index:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 12px);
}
/* suppress texture overlay and darken-gradient when real photo fills the card */
.card-media:has(.real-img)::after{display:none;}
.media-bags{background:linear-gradient(135deg,#3C2A18,#1A1208);}
.media-safety{background:linear-gradient(135deg,#16100A,#100A06);}
.media-belts{background:linear-gradient(135deg,#3A2210,#1C1008);}
.media-wallets{background:linear-gradient(135deg,#2E1C12,#140E08);}

.card-body{padding:26px;}
.card-tag{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold);
  font-weight:700; margin-bottom:8px; display:block;
}
.card-body h3{margin-bottom:8px;}
.card-body p{color:var(--ink-soft); font-size:0.92rem; margin-bottom:14px;}
.card-list{display:flex; flex-wrap:wrap; gap:8px;}
.card-list li{
  font-size:0.76rem; background:var(--cream); padding:5px 11px; border-radius:20px; color:var(--ink-soft);
}

.products-cta{text-align:center; margin-top:48px;}

@media (max-width:980px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .card-wide{grid-column:1 / -1;}
  .card-wide-full{flex-direction:column;}
  .card-wide-full .card-media, .card-wide-full .card-body{width:100%;}
}
@media (max-width:640px){
  .product-grid{grid-template-columns:1fr;}
  .card-wide{grid-column:1;}
}

/* ============ WHY US ============ */
.why-us{background:var(--deep-green); color:var(--white);}
.why-us h2, .why-us h4{color:var(--white);}
.why-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:48px;
  background:var(--line-light); border:1px solid var(--line-light);
}
.why-item{background:var(--deep-green); padding:32px 26px;}
.why-icon{color:var(--gold-light); font-size:1.4rem; margin-bottom:14px;}
.why-item p{color:rgba(255,255,255,0.65); font-size:0.88rem;}
@media (max-width:980px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}

/* ============ MANUFACTURING ============ */
.process-rail{
  display:grid; grid-template-columns:repeat(7,1fr); gap:0 18px; margin-top:20px;
  position:relative;
}
.process-rail::before{
  content:''; position:absolute; top:18px; left:0; right:0; height:1px; background:var(--line); z-index:0;
}
.process-step{
  position:relative; z-index:1;
}
.process-index{
  display:block; font-family:'Fraunces',serif; color:var(--gold); font-size:1.1rem;
  background:var(--white); width:36px; margin-bottom:14px;
}
.process-step h4{font-size:0.95rem; margin-bottom:6px;}
.process-step p{font-size:0.82rem; color:var(--ink-soft);}

@media (max-width:980px){
  .process-rail{grid-template-columns:repeat(2,1fr); gap:32px 24px;}
  .process-rail::before{display:none;}
}
@media (max-width:560px){.process-rail{grid-template-columns:1fr;}}

/* ============ QUALITY ============ */
.quality{background:var(--cream);}
.markets{background:var(--cream);}
.quality-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px;}
.stat-block{text-align:left;}
.stat-num{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--deep-green); display:block;}
.stat-label{font-size:0.76rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}

.quality-list{display:flex; flex-direction:column; gap:1px; background:var(--line);}
.qa-row{
  background:var(--white); padding:18px 24px; display:flex; justify-content:space-between; align-items:center;
  font-size:0.92rem;
}
.qa-status{
  color:var(--deep-green); font-weight:600; font-size:0.76rem; text-transform:uppercase;
  letter-spacing:0.04em; background:rgba(22,16,10,0.16); padding:5px 12px; border-radius:20px;
}
@media (max-width:900px){
  .quality-grid{grid-template-columns:1fr; gap:40px;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
}

/* ============ MARKETS ============ */
.markets-layout{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; margin-top:20px;}
.markets-map{
  background:var(--deep-green); border-radius:var(--radius); padding:30px; position:relative;
}
.world-svg{width:100%; height:auto; display:block;}
.route-dots .dot{fill:var(--gold); opacity:0.85;}
.route-dots .dot-origin{fill:var(--gold-light);}
.continents path{transition:fill 0.3s;}

.markets-list{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.market-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--cream);
  border-radius:var(--radius); font-size:0.92rem; font-weight:500;
}
.market-flag{
  font-family:'Inter',sans-serif; font-size:0.68rem; font-weight:700; color:var(--deep-green);
  background:var(--gold-light); padding:3px 7px; border-radius:3px; letter-spacing:0.02em;
}
@media (max-width:860px){
  .markets-layout{grid-template-columns:1fr; gap:32px;}
}
@media (max-width:480px){.markets-list{grid-template-columns:1fr;}}

/* ============ CERTIFICATIONS ============ */
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:20px;}
.cert-card{
  text-align:center; padding:36px 22px; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color 0.3s, transform 0.3s;
}
.cert-card:hover{border-color:var(--gold); transform:translateY(-4px);}
.cert-mark{
  width:64px; height:64px; border-radius:50%; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  font-family:'Fraunces',serif; color:var(--deep-green); font-weight:600; font-size:0.95rem;
}
.cert-card p{font-size:0.86rem; color:var(--ink-soft);}
@media (max-width:860px){.cert-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.cert-grid{grid-template-columns:1fr;}}

/* ============ CTA BAND ============ */
.cta-band{background:var(--ink); padding:80px 0;}
.cta-band-inner{text-align:center; max-width:760px;}
.cta-quote{
  font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--white); line-height:1.4; margin-bottom:20px;
}
.cta-quote-attr{color:var(--gold-light); font-size:0.85rem; letter-spacing:0.04em;}

/* ============ CONTACT ============ */
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px;}
.contact-detail{display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line);}
.cd-label{width:150px; flex-shrink:0; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); font-weight:600;}
.cd-value{font-size:0.94rem;}
.social-row{display:flex; flex-direction:column; gap:8px; margin:24px 0;}
.social-row a{font-size:0.88rem; color:var(--deep-green); font-weight:500;}
.social-row a:hover{color:var(--gold);}
.whatsapp-btn{background:var(--deep-green); color:var(--white); border-color:var(--deep-green); margin-top:8px;}
.whatsapp-btn:hover{background:var(--green-mid);}

.contact-form{
  background:var(--cream); padding:40px; border-radius:var(--radius);
  display:flex; flex-direction:column; gap:18px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.contact-form label{
  display:flex; flex-direction:column; gap:8px; font-size:0.8rem; font-weight:600;
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em;
}
.contact-form input, .contact-form select, .contact-form textarea{
  font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:400; text-transform:none;
  padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
  color:var(--ink); letter-spacing:0;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}
.form-note{font-size:0.78rem; color:var(--ink-soft); text-align:center; text-transform:none; letter-spacing:0;}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .form-row{grid-template-columns:1fr;}
  .contact-form{padding:28px;}
}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink); color:rgba(255,255,255,0.7); padding-top:72px;}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:48px;
  border-bottom:1px solid var(--line-light);
}
.footer-brand p{font-size:0.86rem; margin-top:16px; color:rgba(255,255,255,0.5); max-width:280px;}
.footer-col{display:flex; flex-direction:column; gap:12px;}
.footer-col h5{
  color:var(--white); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:6px; font-weight:700; font-family:'Inter',sans-serif;
}
.footer-col a{font-size:0.86rem; color:rgba(255,255,255,0.6); transition:color 0.25s;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  max-width:1240px; margin:0 auto; padding:24px 32px;
  display:flex; justify-content:space-between; font-size:0.78rem; color:rgba(255,255,255,0.4);
  flex-wrap:wrap; gap:10px;
}
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px 24px;}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}
.contact{background:var(--cream);}


/* ============ CONTACT: action row + map ============ */
.contact-action-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
.contact-action-row .btn{flex:1; min-width:200px;}
.map-embed{
  margin-top:28px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); line-height:0;
}
@media (max-width:560px){
  .contact-action-row{flex-direction:column;}
  .contact-action-row .btn{width:100%;}
}

/* ============ ICON BUTTONS (header, social row, footer) ============ */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--ink-soft);
  transition:background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.icon-btn svg{width:18px; height:18px; flex-shrink:0;}
.icon-btn span{display:none;}
.icon-btn:hover{transform:translateY(-2px);}

/* header icon row sits on dark hero background while unscrolled, so default to light icons */
.header-icons{display:flex; align-items:center; gap:8px; margin:0 4px;}
.header-icons .icon-btn{background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.85);}
.header-icons .icon-whatsapp:hover{background:#25D366; color:#fff;}
.header-icons .icon-email:hover{background:var(--accent-fill); color:var(--gold-ink);}
.header-icons .icon-instagram:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); color:#fff;}
.header-icons .icon-linkedin:hover{background:#0A66C2; color:#fff;}

/* social row (contact section) sits on light background */
.social-row{display:flex; gap:10px; margin:24px 0; flex-wrap:wrap;}
.social-row .icon-btn{
  width:auto; height:auto; border-radius:20px; padding:9px 16px;
  background:var(--white); border:1px solid var(--line); color:var(--ink);
}
.social-row .icon-btn span{display:inline; font-size:0.82rem; font-weight:600;}
.social-row .icon-whatsapp:hover{background:#25D366; border-color:#25D366; color:#fff;}
.social-row .icon-email:hover{background:var(--deep-green); border-color:var(--deep-green); color:#fff;}
.social-row .icon-instagram:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); border-color:transparent; color:#fff;}
.social-row .icon-linkedin:hover{background:#0A66C2; border-color:#0A66C2; color:#fff;}

/* footer icon row sits on dark footer background */
.footer-social-icons{display:flex; gap:10px; margin-top:20px;}
.footer-social-icons .icon-btn{background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.8);}
.footer-social-icons .icon-whatsapp:hover{background:#25D366; color:#fff;}
.footer-social-icons .icon-email:hover{background:var(--accent-fill); color:var(--gold-ink);}
.footer-social-icons .icon-instagram:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); color:#fff;}
.footer-social-icons .icon-linkedin:hover{background:#0A66C2; color:#fff;}

/* visual cue on any link still needing a real URL before launch */
.needs-link{position:relative;}
.needs-link::after{
  content:''; position:absolute; top:-2px; right:-2px;
  width:8px; height:8px; border-radius:50%;
  background:#D9822B; border:1.5px solid var(--white);
}

@media (max-width:860px){
  .header-icons{display:none;}
}

/* ============ FLOATING WHATSAPP BUTTON ============ */
.float-whatsapp{
  position:fixed; right:24px; bottom:24px; z-index:900;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:14px; border-radius:50px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  transition:padding 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  overflow:hidden;
}
.float-whatsapp svg{width:26px; height:26px; flex-shrink:0;}
.float-whatsapp-label{
  font-size:0.86rem; font-weight:700; white-space:nowrap;
  max-width:0; opacity:0; transition:max-width 0.3s var(--ease), opacity 0.2s var(--ease);
}
.float-whatsapp:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,0.32);}
.float-whatsapp:hover .float-whatsapp-label{max-width:110px; opacity:1;}
.float-whatsapp:hover{padding:14px 20px;}
@media (max-width:640px){
  .float-whatsapp{right:16px; bottom:84px;}
  .float-whatsapp-label{display:none;}
  .float-whatsapp:hover{padding:14px;}
}

/* ============ STICKY MOBILE CONTACT BAR ============ */
.sticky-contact-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:899;
  background:var(--deep-green);
  box-shadow:0 -8px 24px rgba(0,0,0,0.2);
}
@media (max-width:640px){
  .sticky-contact-bar{display:grid; grid-template-columns:1fr 1fr 1.3fr;}
  body{padding-bottom:64px;}
}
.scb-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px 12px; color:rgba(255,255,255,0.85);
  font-size:0.68rem; font-weight:600; letter-spacing:0.02em;
  border-right:1px solid rgba(255,255,255,0.1);
}
.scb-item svg{width:20px; height:20px;}
.scb-item:last-child{border-right:none;}
.scb-primary{background:var(--accent-fill); color:var(--gold-ink);}

/* ============ FORM SUCCESS STATE ============ */
.contact-form-wrap{position:relative;}
.form-success{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:56px 44px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.form-success-icon{
  width:56px; height:56px; border-radius:50%;
  background:var(--deep-green); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:6px;
}
.form-success h3{font-size:1.4rem; color:var(--deep-green);}
.form-success p{color:var(--ink-soft); max-width:420px; font-size:0.92rem; line-height:1.6;}
.form-success .btn{margin-top:10px;}
.form-error{
  margin-top:14px; padding:12px 16px; border-radius:var(--radius);
  background:rgba(217,130,43,0.12); border:1px solid rgba(217,130,43,0.35);
  color:#904015; font-size:0.85rem;
}

/* ============ PAGE HERO (collection / inner pages) ============ */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--deep-green);
  padding:150px 24px 64px;
}
.page-hero .hide-texture{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(22,16,10,0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(46,28,18,0.6), transparent 60%),
    linear-gradient(135deg, #16100A 0%, #111111 50%, #16100A 100%);
}
.page-hero-inner{position:relative; z-index:1; max-width:1240px; margin:0 auto;}
.page-hero-media{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.page-hero-copy .hero-eyebrow{
  color:var(--gold-light); text-transform:uppercase; letter-spacing:0.18em;
  font-size:0.78rem; font-weight:600; margin-bottom:18px;
}
.page-hero-copy h1{
  color:var(--white); font-size:clamp(2rem, 4.2vw, 3.1rem); line-height:1.12; margin-bottom:18px;
}
.page-hero-copy .hero-sub{
  color:rgba(255,255,255,0.78); font-size:clamp(1rem,1.4vw,1.1rem); max-width:540px; margin-bottom:28px;
}
.page-hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.page-hero-image .img-frame{aspect-ratio:4/3; box-shadow:var(--shadow);}
@media (max-width:860px){
  .page-hero{padding:120px 20px 48px;}
  .page-hero-media{grid-template-columns:1fr; gap:32px;}
  .page-hero-image{order:-1;}
}

/* ============ BREADCRUMBS ============ */
.breadcrumb-bar{background:var(--cream); border-bottom:1px solid var(--line); padding-top:72px;}
.breadcrumb-bar .section-inner{padding-top:16px; padding-bottom:16px;}
.breadcrumbs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:0.82rem; color:var(--ink-soft);
}
.breadcrumbs a{color:var(--ink-soft); transition:color 0.2s var(--ease);}
.breadcrumbs a:hover{color:var(--gold);}
.breadcrumbs .crumb-sep{color:var(--line); opacity:0.7;}
.breadcrumbs .crumb-current{color:var(--deep-green); font-weight:600;}

/* ============ OEM / PRIVATE LABEL BAND ============ */
.oem-band{background:var(--cream);}
.oem-band-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.oem-points{display:flex; flex-direction:column; gap:20px; margin-top:8px;}
.oem-point{display:flex; gap:14px; align-items:flex-start;}
.oem-point-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--deep-green); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700;
}
.oem-point h4{font-size:0.98rem; margin-bottom:2px;}
.oem-point p{font-size:0.88rem; color:var(--ink-soft);}
.oem-visual .img-frame{aspect-ratio:1/1; box-shadow:var(--shadow);}
@media (max-width:860px){
  .oem-band-grid{grid-template-columns:1fr; gap:32px;}
  .oem-visual{order:-1; max-width:320px; margin:0 auto;}
}

/* ============ COLLECTION CATEGORY GRID (bags / wallets detail pages) ============ */
.collection-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:36px;
}
.collection-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.collection-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.collection-card .img-frame{aspect-ratio:4/3;}
.collection-card-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;}
.collection-card-body h3{margin-bottom:8px;}
.collection-card-body p{font-size:0.9rem; color:var(--ink-soft); margin-bottom:16px;}
.collection-detail-row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;
  padding-top:14px; border-top:1px solid var(--line); margin-bottom:18px;
}
.cd-pair{display:flex; flex-direction:column; gap:2px;}
.cd-pair-label{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); font-weight:600;}
.cd-pair-value{font-size:0.86rem; color:var(--deep-green); font-weight:600;}
.collection-card-body .btn{margin-top:auto; align-self:flex-start;}
@media (max-width:760px){
  .collection-grid{grid-template-columns:1fr;}
}

/* ============ HOMEPAGE: VIEW-COLLECTION CARDS ============ */
.view-collection-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,0.07);
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display:flex; flex-direction:column;
}
.view-collection-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.16);}
.view-collection-card .img-frame{aspect-ratio:16/10;}
.view-collection-body{padding:28px 30px 32px;}
.view-collection-body h3{margin-bottom:10px;}
.view-collection-body p{font-size:0.92rem; color:var(--ink-soft); margin-bottom:20px;}

/* ============ CUSTOM MANUFACTURER CTA BAND (collection pages) ============ */
.custom-cta-band{background:var(--deep-green); padding:80px 0; position:relative; overflow:hidden;}
.custom-cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 70% 30%, rgba(22,16,10,0.1), transparent 60%);
}
.custom-cta-inner{position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center;}
.custom-cta-inner h2{color:var(--white); margin-bottom:28px;}
.custom-cta-checklist{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px;
  max-width:520px; margin:0 auto 36px; text-align:left;
}
.custom-cta-checklist li{
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,0.85); font-size:0.92rem; font-weight:500;
}
.custom-cta-checklist li::before{
  content:'✓'; color:var(--gold-light); font-weight:700; font-size:1rem; flex-shrink:0;
}
.custom-cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
@media (max-width:600px){
  .custom-cta-checklist{grid-template-columns:1fr; text-align:center;}
  .custom-cta-checklist li{justify-content:center;}
}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ============================================
   COLLECTION PAGES — leather-bags.html etc.
   Inherits all global tokens, adds page-specific
   layout: breadcrumb, collection hero, product
   category cards, and custom CTA band.
   ============================================ */

/* --- Breadcrumb --- */
.breadcrumb{
  background:var(--cream); border-bottom:1px solid var(--line);
  padding:14px 0;
  padding-top:88px; /* Clear fixed header */
}
.breadcrumb-inner{
  max-width:1240px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; gap:8px;
  font-size:0.8rem; color:var(--ink-soft); font-weight:500;
}
.breadcrumb-inner a{color:var(--ink-soft);}
.breadcrumb-inner a:hover{color:var(--gold);}
.breadcrumb-sep{opacity:0.4; font-size:0.7rem;}
.breadcrumb-current{color:var(--ink); font-weight:600;}

/* --- Collection Hero --- */
.col-hero{
  position:relative; min-height:72vh; display:flex; align-items:center;
  background:linear-gradient(135deg, #16100A 0%, #111111 55%, #16100A 100%);
  overflow:hidden; color:var(--white);
  padding:140px 32px 80px;
}
.col-hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 50%, rgba(22,16,10,0.15), transparent 65%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(46,28,18,0.5), transparent 60%);
}
.col-hero-stitch{
  position:absolute; border-top:1px dashed rgba(22,16,10,0.2);
  width:140%; transform:rotate(-5deg);
}
.col-hero-stitch-1{top:22%;left:-20%;}
.col-hero-stitch-2{bottom:28%;left:-20%;}
.col-hero-inner{
  position:relative; z-index:1;
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;
}
.col-hero-copy{ max-width:640px;}
.col-hero-eyebrow{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--gold-light); font-weight:600; margin-bottom:18px;
}
.col-hero h1{
  font-family:'Fraunces',serif; font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:500; line-height:1.1; color:var(--white); margin-bottom:20px;
}
.col-hero h1 em{font-style:italic; color:var(--gold-light);}
.col-hero-sub{
  font-size:1.05rem; line-height:1.65; color:rgba(255,255,255,0.75);
  margin-bottom:36px; max-width:500px;
}
.col-hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.col-hero-badges{
  display:flex; flex-direction:column; gap:16px;
  border-left:1px solid rgba(255,255,255,0.12); padding-left:48px;
}
.col-hero-badge{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(22,16,10,0.3);
  border-radius:var(--radius); padding:18px 22px;
  display:flex; align-items:center; gap:14px;
}
.col-hero-badge-icon{
  width:36px; height:36px; background:var(--accent-fill);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--gold-ink); flex-shrink:0;
}
.col-hero-badge-label{font-size:0.82rem; color:rgba(255,255,255,0.85); font-weight:500; line-height:1.3;}
@media (max-width:900px){
  .col-hero-inner{grid-template-columns:1fr; gap:48px;}
  .col-hero-badges{border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,0.1); padding-top:36px; flex-direction:row; flex-wrap:wrap;}
  .col-hero{padding:120px 20px 64px; min-height:auto;}
}

/* --- OEM Highlight Strip --- */
.col-oem-strip{
  background:var(--green-mid); color:var(--white); padding:36px 0;
}
.col-oem-strip .section-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.col-oem-copy h3{font-size:1.2rem; color:var(--white); margin-bottom:6px;}
.col-oem-copy p{font-size:0.88rem; color:rgba(255,255,255,0.7); margin:0;}
.col-oem-badges{display:flex; gap:12px; flex-wrap:wrap;}
.oem-badge{
  font-size:0.78rem; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; padding:7px 16px;
  border:1px solid rgba(22,16,10,0.5); color:var(--gold-light);
  border-radius:20px;
}
@media (max-width:700px){
  .col-oem-strip .section-inner{flex-direction:column; align-items:flex-start; gap:22px;}
}

/* --- Category Section Heading --- */
.col-section-header{text-align:center; margin-bottom:56px;}
.col-section-header h2{margin:0 auto 16px;}
.col-section-header p{color:var(--ink-soft); max-width:540px; margin:0 auto; font-size:0.95rem;}

/* --- Product Category Grid --- */
.col-cat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
@media (max-width:1100px){.col-cat-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:750px){.col-cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.col-cat-grid{grid-template-columns:1fr;}}

/* --- Product Category Card --- */
.cat-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.cat-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,0.13);
  border-color:rgba(22,16,10,0.35);
}
.cat-card-img{
  height:200px; background:var(--green-mid);
  position:relative; overflow:hidden;
}
/* unique gradient per category — applied via data-bg attribute in JS or inline */
.cat-card[data-cat="backpack"] .cat-card-img{background:linear-gradient(135deg,#321C0C,#16100A);}
.cat-card[data-cat="messenger"] .cat-card-img{background:linear-gradient(135deg,#2E1E10,#111);}
.cat-card[data-cat="duffel"] .cat-card-img{background:linear-gradient(135deg,#281A0E,#100A04);}
.cat-card[data-cat="satchel"] .cat-card-img{background:linear-gradient(135deg,#301A0C,#180E08);}
.cat-card[data-cat="travel"] .cat-card-img{background:linear-gradient(135deg,#201A0A,#120C06);}
.cat-card[data-cat="bifold"] .cat-card-img{background:linear-gradient(135deg,#321C0C,#1C1008);}
.cat-card[data-cat="trifold"] .cat-card-img{background:linear-gradient(135deg,#2C1A0A,#160A06);}
.cat-card[data-cat="cardholder"] .cat-card-img{background:linear-gradient(135deg,#281610,#120A06);}
.cat-card[data-cat="passport"] .cat-card-img{background:linear-gradient(135deg,#201810,#120A06);}
.cat-card[data-cat="rfid"] .cat-card-img{background:linear-gradient(135deg,#241210,#140A06);}
.cat-card[data-cat="long"] .cat-card-img{background:linear-gradient(135deg,#2C1A08,#160A06);}
.cat-card[data-cat="moneyclip"] .cat-card-img{background:linear-gradient(135deg,#2E1A0A,#180A06);}
.cat-card[data-cat="travel-wallet"] .cat-card-img{background:linear-gradient(135deg,#201810,#120A06);}

.cat-img-ph{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  color:rgba(255,255,255,0.3); font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; position:relative;
  background-size:cover; background-position:center;
}
/* When a real background-image is set on cat-img-ph, hide placeholder children */
.cat-img-ph[style*="background-image"]>*{display:none;}
.cat-img-ph[style*="background-image"]::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 60%);
}
.cat-img-ph svg{width:28px; height:28px; opacity:0.4;}
/* real image swap: replace <div class="cat-img-ph"> with <img src="..." alt="..." class="cat-real-img"> */
.cat-real-img{width:100%; height:100%; object-fit:cover; display:block;}

.cat-card-body{padding:22px 22px 0;}
.cat-card-tag{
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--gold); font-weight:700; margin-bottom:8px;
}
.cat-card-body h3{font-size:1.1rem; margin-bottom:8px;}
.cat-card-body .cat-desc{font-size:0.86rem; color:var(--ink-soft); line-height:1.55; margin-bottom:14px;}

.cat-specs{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; border-top:1px solid var(--line); margin-top:auto;
}
.cat-spec{
  padding:11px 14px; border-right:1px solid var(--line);
  font-size:0.72rem;
}
.cat-spec:nth-child(even){border-right:none;}
.cat-spec:nth-child(n+3){border-top:1px solid var(--line);}
.cat-spec-label{color:var(--ink-soft); letter-spacing:0.04em; text-transform:uppercase; display:block; margin-bottom:2px;}
.cat-spec-value{color:var(--ink); font-weight:600; font-size:0.78rem;}
.cat-spec-value.avail{color:#2E7D32;}

.cat-card-footer{padding:16px 22px 22px;}
.cat-card-footer .btn{width:100%; font-size:0.84rem; padding:11px 18px;}

/* --- Custom CTA Band --- */
.col-cta{
  background:var(--deep-green); color:var(--white); padding:80px 0;
  position:relative; overflow:hidden;
}
.col-cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 80% 50%, rgba(22,16,10,0.12), transparent 65%);
}
.col-cta-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.col-cta h2{color:var(--white); margin-bottom:12px; font-size:clamp(1.7rem,3vw,2.4rem);}
.col-cta-sub{color:rgba(255,255,255,0.7); font-size:0.95rem; margin-bottom:32px; line-height:1.6;}
.col-cta-checks{display:flex; flex-direction:column; gap:10px; margin-bottom:38px;}
.col-cta-check{
  display:flex; align-items:center; gap:12px;
  font-size:0.9rem; color:rgba(255,255,255,0.88);
}
.col-cta-check-mark{
  width:22px; height:22px; border-radius:50%;
  background:rgba(22,16,10,0.25); border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; color:var(--gold-light); flex-shrink:0;
}
.col-cta-actions{display:flex; gap:14px; flex-wrap:wrap;}
.col-cta-aside{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); padding:36px 32px;
}
.col-cta-aside h4{color:var(--gold-light); margin-bottom:20px; font-size:1rem;}
.col-cta-aside ul{display:flex; flex-direction:column; gap:12px;}
.col-cta-aside li{
  font-size:0.86rem; color:rgba(255,255,255,0.75);
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; align-items:center;
}
.col-cta-aside li:last-child{border-bottom:none; padding-bottom:0;}
.col-cta-aside .detail{font-size:0.78rem; color:var(--gold-light); font-weight:600;}
@media (max-width:860px){
  .col-cta-inner{grid-template-columns:1fr; gap:40px;}
}

/* --- Homepage "View Collection" cards (replacing detail cards for bags/wallets) --- */
.collection-teaser{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--deep-green); color:var(--white);
  min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; cursor:pointer;
  transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.collection-teaser:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,0.22);}
.collection-teaser-bg{position:absolute; inset:0;}
.ct-bags .collection-teaser-bg{background:linear-gradient(160deg,#2E1E0E,#16100A);}
.ct-wallets .collection-teaser-bg{background:linear-gradient(160deg,#1E1810,#1A1008);}
.collection-teaser-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 55%);
}
.ct-bags .collection-teaser-overlay{background:linear-gradient(to top, rgba(10,10,10,0.90) 0%, rgba(10,10,10,0.64) 38%, rgba(10,10,10,0.06) 100%);}
.ct-bags .collection-teaser-content{text-shadow:0 1px 6px rgba(0,0,0,0.55);}
.collection-teaser-content{position:relative; z-index:1;}
.collection-teaser-tag{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--gold-light); font-weight:700; margin-bottom:6px;
}
.collection-teaser h3{color:var(--white); font-size:1.3rem; margin-bottom:8px;}
.collection-teaser p{font-size:0.85rem; color:rgba(255,255,255,0.72); margin-bottom:18px; line-height:1.5;}
.collection-teaser .btn-view{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:700; color:var(--gold-light);
  text-transform:uppercase; letter-spacing:0.08em;
  transition:gap 0.2s var(--ease);
}
.collection-teaser:hover .btn-view{gap:14px;}
.collection-teaser .btn-view svg{width:14px; height:14px;}

/* Active nav link on collection subpages */
.main-nav .active-link,
.dropdown-panel .active-link{
  color:var(--gold) !important;
  font-weight:700;
}

/* ============ MULTI-PAGE SPA ============ */
.page { display: none; opacity: 0; }
.page.active { display: block; animation: pageFadeIn 0.28s ease forwards; }
#page-container { min-height: 60vh; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============ CATEGORY LANDING HERO ============ */
.cat-landing-hero {
  position:relative; overflow:hidden; background:var(--deep-green);
  padding:150px 32px 80px; color:var(--white);
}
.cat-landing-hero .hide-texture {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(22,16,10,0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(46,28,18,0.6), transparent 60%),
    linear-gradient(135deg, #16100A 0%, #111111 50%, #16100A 100%);
}
.cat-landing-hero-inner {
  position:relative; z-index:1; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;
}
.cat-landing-hero-copy h1 {
  color:var(--white); font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:500; line-height:1.1; margin-bottom:20px;
}
.cat-landing-hero-copy h1 em { font-style:italic; color:var(--gold-light); }
.cat-landing-hero-sub {
  font-size:1.05rem; line-height:1.65; color:rgba(255,255,255,0.75);
  margin-bottom:36px; max-width:500px;
}
.cat-landing-hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.cat-landing-hero-badges {
  display:flex; flex-direction:column; gap:14px;
  border-left:1px solid rgba(255,255,255,0.12); padding-left:48px;
}
.cat-landing-hero-badge {
  background:rgba(255,255,255,0.05); border:1px solid rgba(22,16,10,0.3);
  border-radius:var(--radius); padding:16px 20px;
  display:flex; align-items:center; gap:14px;
}
.cat-landing-hero-badge-icon {
  width:38px; height:38px; border-radius:50%; background:rgba(22,16,10,0.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-light); font-size:1rem; flex-shrink:0;
}
.cat-landing-hero-badge-text strong { display:block; color:var(--white); font-size:0.88rem; font-weight:600; }
.cat-landing-hero-badge-text span { color:rgba(255,255,255,0.6); font-size:0.78rem; }
.stitch-line { position:absolute; border-top:1px dashed rgba(22,16,10,0.22); width:140%; transform:rotate(-8deg); }
.stitch-1 { top:18%; left:-20%; }
.stitch-2 { top:72%; left:-20%; transform:rotate(-8deg); }
@media (max-width:860px) {
  .cat-landing-hero { padding:120px 20px 48px; }
  .cat-landing-hero-inner { grid-template-columns:1fr; gap:32px; }
  .cat-landing-hero-badges { border-left:none; padding-left:0; }
}

/* ============ SUBCATEGORY GRID (on category pages) ============ */
.subcat-section { background:var(--white); }
.subcat-section.alt { background:var(--cream); }
.subcat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:36px;
}
@media (max-width:1100px) { .subcat-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .subcat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .subcat-grid { grid-template-columns:1fr; } }

.subcat-card {
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
  cursor:pointer;
}
.subcat-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,0.12); border-color:rgba(22,16,10,0.35); }
/* Safety-footwear tile on the category page: show the whole boot, never crop */
.card-media.card-media--fit{background:#fff; padding:clamp(8px,2.2vw,18px); box-sizing:border-box;}
.card-media.card-media--fit .real-img{position:absolute; top:clamp(8px,2.2vw,18px); left:clamp(8px,2.2vw,18px);
  inset:auto; width:calc(100% - 2 * clamp(8px,2.2vw,18px)); height:calc(100% - 2 * clamp(8px,2.2vw,18px));
  object-fit:contain; object-position:center; mix-blend-mode:multiply;}

/* home page product cards: four equal cards, same photo frame, details below the photo */
.product-grid{grid-template-columns:repeat(2,1fr); align-items:stretch;}
.product-grid .card-media.img-frame{height:auto; aspect-ratio:3 / 2; box-shadow:none; border-radius:0;}
.product-grid .card-media .real-img{object-fit:cover;}
.product-grid .product-card .card-body{flex:1; display:flex; flex-direction:column; align-items:flex-start;}
.product-grid .product-card .card-body .spec-row{margin-top:auto; width:100%; align-self:stretch;}
.product-grid .product-card .card-body .card-list{margin-bottom:16px;}
@media (max-width:640px){.product-grid{grid-template-columns:1fr;}}

/* brand logo: header and footer use a transparent version with light lettering */
.logo .logo-img{display:block; height:var(--logo-h,36px); width:calc(var(--logo-h,36px) * 2.554); flex-shrink:0;
  background:url('/images/site/qilla-logo.webp') center / contain no-repeat;}
.site-header .logo{padding:6px 14px; --logo-h:46px;} /* white box removed; spacing kept so nothing shifts */
.site-header .logo .logo-img{background-image:url('/images/site/qilla-logo-dark.png');}
.footer-brand .logo{padding:8px 16px; --logo-h:58px; display:inline-flex; margin-bottom:6px;} /* white box removed; spacing kept so nothing shifts */
.footer-brand .logo .logo-img{background-image:url('/images/site/qilla-logo-dark.png');}
@media (max-width:640px){.site-header .logo{padding:5px 11px; --logo-h:34px;}}

/* long e-mail addresses must wrap on narrow phones (was forcing sideways scroll) */
.contact-detail .cd-value{overflow-wrap:anywhere;word-break:break-word;min-width:0;}
.contact-grid > *{min-width:0;}

/* ============ PRODUCT IMAGE FIT (cards + detail pages) ============
   One shared container. The wrapper owns the fixed responsive space; the image
   is always fully contained, never cropped, stretched or zoomed.
   Any image ratio (landscape / portrait / square / close-up) is letterboxed
   inside the same box. Change --media-ratio here to resize every product at once. */
.product-media{
  --media-ratio:1 / 1;
  --media-pad:clamp(8px, 2.2vw, 18px);
  position:relative; display:block; width:100%;
  aspect-ratio:var(--media-ratio);
  overflow:hidden; background:#fff; box-sizing:border-box;
}
.product-media > .product-img{
  position:absolute; top:var(--media-pad); left:var(--media-pad);
  width:calc(100% - 2 * var(--media-pad));
  height:calc(100% - 2 * var(--media-pad));
  object-fit:contain; object-position:center center;
  display:block; max-width:none; max-height:none;
  mix-blend-mode:multiply;           /* near-white JPEG backgrounds merge into the white card */
}
.product-media.is-empty::after{
  content:'Image coming soon'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:0.78rem; color:#9a9a9a;
}
.product-image-container.product-media{ border-radius:var(--radius); }
.related-card .related-card-img.product-media{ height:auto; background:#fff; }
.subcat-card-img-ph {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  background:linear-gradient(135deg, var(--green-mid), var(--deep-green));
  color:rgba(255,255,255,0.35); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
}
.subcat-card-img-ph svg { width:32px; height:32px; opacity:0.4; }
.subcat-card-body { padding:20px 20px 0; flex:1; }
.subcat-card-tag { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); font-weight:700; margin-bottom:6px; display:block; }
.subcat-card-body h3 { font-size:1.05rem; margin-bottom:8px; }
.subcat-card-body p { font-size:0.85rem; color:var(--ink-soft); margin-bottom:12px; line-height:1.5; }
.subcat-detail-row {
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line); margin-top:auto;
}
.subcat-detail-cell { padding:10px 12px; font-size:0.72rem; border-right:1px solid var(--line); }
.subcat-detail-cell:last-child { border-right:none; }
.subcat-detail-cell:nth-child(n+3) { border-top:1px solid var(--line); }
.subcat-detail-label { color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:2px; }
.subcat-detail-value { color:var(--ink); font-weight:600; font-size:0.78rem; }
.subcat-detail-value.avail { color:#2E7D32; }
.subcat-card-footer { padding:14px 20px 20px; }
.subcat-card-footer .btn { width:100%; font-size:0.84rem; padding:10px 16px; }

/* ============ COLLECTION DETAIL PAGE ============ */
.coll-spec-table { width:100%; border-collapse:collapse; margin-top:24px; }
.coll-spec-table tr { border-bottom:1px solid var(--line); }
.coll-spec-table tr:last-child { border-bottom:none; }
.coll-spec-table td { padding:14px 18px; font-size:0.9rem; vertical-align:top; }
.coll-spec-table td:first-child {
  width:38%; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-soft); font-weight:600; background:var(--cream);
}
.coll-spec-table td:last-child { color:var(--ink); font-weight:500; }

.coll-options-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;
}
@media (max-width:760px) { .coll-options-grid { grid-template-columns:repeat(2,1fr); } }
.coll-option-card {
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  text-align:center;
}
.coll-option-card h4 { font-size:0.92rem; margin-bottom:4px; }
.coll-option-card p { font-size:0.82rem; color:var(--ink-soft); }

.faq-list { margin-top:24px; display:flex; flex-direction:column; gap:1px; background:var(--line); }
.faq-item { background:var(--white); }
.faq-q {
  padding:18px 24px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-size:0.95rem; font-weight:600; color:var(--deep-green);
  transition:background 0.2s;
}
.faq-q:hover { background:var(--cream); }
.faq-q .faq-icon { color:var(--gold); font-size:1.1rem; transition:transform 0.25s; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { display:none; padding:0 24px 18px; font-size:0.9rem; color:var(--ink-soft); line-height:1.65; }
.faq-item.open .faq-a { display:block; }

.related-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:24px;
}
@media (max-width:900px) { .related-grid { grid-template-columns:repeat(2,1fr); } }
.related-card {
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform 0.28s, box-shadow 0.28s; cursor:pointer;
}
.related-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.related-card-img { height:130px; background:linear-gradient(135deg, var(--green-mid), var(--deep-green)); }
.related-card-body { padding:14px 16px; }
.related-card-body h4 { font-size:0.88rem; margin-bottom:4px; }
.related-card-body p { font-size:0.78rem; color:var(--ink-soft); }

/* ============ BACK BUTTON ============ */
.back-btn {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-soft); font-size:0.85rem; font-weight:600;
  transition:color 0.2s; cursor:pointer; background:none; border:none; padding:0;
}
.back-btn:hover { color:var(--gold); }
.back-btn svg { width:16px; height:16px; }

/* ============ COLOR SWATCH ROW ============ */
.color-swatches-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.color-swatch-pill {
  display:flex; align-items:center; gap:8px; padding:7px 14px;
  border:1px solid var(--line); border-radius:20px; font-size:0.8rem; color:var(--ink-soft);
}
.color-swatch-dot { width:16px; height:16px; border-radius:50%; flex-shrink:0; }

/* ============ BREADCRUMB (reuse existing .breadcrumb) ============ */
/* Already in base CSS */

/* ============ CATEGORY PAGE SECTIONS ============ */
.coll-two-col { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.coll-two-col.reverse .coll-visual { order:-1; }
@media (max-width:860px) {
  .coll-two-col { grid-template-columns:1fr; gap:36px; }
  .coll-two-col.reverse .coll-visual { order:0; }
}

.oem-tag-cloud { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.oem-tag {
  padding:8px 16px; border:1px solid var(--gold); color:var(--gold);
  font-size:0.78rem; font-weight:600; border-radius:20px; letter-spacing:0.02em;
}

/* ============ EXPORT MARKETS MINI ============ */
.export-flags-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.export-flag-pill {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--cream); border-radius:var(--radius); font-size:0.84rem; font-weight:500;
}
.export-flag-code {
  font-size:0.68rem; font-weight:700; color:var(--deep-green);
  background:var(--gold-light); padding:2px 6px; border-radius:3px;
}

/* ============ PACKAGING SECTION ============ */
.packaging-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; }
@media (max-width:760px) { .packaging-grid { grid-template-columns:1fr; } }
.packaging-card {
  border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.packaging-card .pkg-icon { font-size:1.6rem; margin-bottom:12px; }
.packaging-card h4 { margin-bottom:8px; font-size:0.95rem; }
.packaging-card p { font-size:0.85rem; color:var(--ink-soft); }

/* ============ SAFETY FOOTWEAR SPECIFIC ============ */
.application-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
@media (max-width:760px) { .application-grid { grid-template-columns:repeat(2,1fr); } }
.application-tag {
  border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  display:flex; align-items:center; gap:10px; font-size:0.88rem; font-weight:500;
}
.application-tag-icon { font-size:1.2rem; flex-shrink:0; }

.cert-standards-band { background:var(--deep-green); padding:56px 0; }
.cert-standards-band h2 { color:var(--white); }
.cert-standards-band .eyebrow { color:var(--gold-light); }
.cert-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px; }
@media (max-width:900px) { .cert-row { grid-template-columns:repeat(2,1fr); } }
.cert-pill {
  background:rgba(255,255,255,0.05); border:1px solid rgba(22,16,10,0.3);
  border-radius:var(--radius); padding:20px;
  text-align:center;
}
.cert-pill strong { display:block; color:var(--gold-light); font-family:'Fraunces',serif; font-size:1.3rem; margin-bottom:6px; }
.cert-pill span { color:rgba(255,255,255,0.65); font-size:0.82rem; }


/* ═══ BUTTON PRESS FEEL ═══ */
.btn:active,.btn-gold:active,.btn-gold-lg:active,.btn-dark-lg:active,.btn-outline-lg:active,.btn-ghost:active{transform:translateY(1px) scale(0.98);opacity:0.88;}
/* ═══ SMOOTH FOCUS OUTLINES ═══ */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* ═══ SMOOTH FORM INPUTS ═══ */
select,input,textarea{transition:border-color 0.2s,box-shadow 0.2s;}
select:focus,input:focus,textarea:focus{box-shadow:0 0 0 3px rgba(22,16,10,0.15);}
/* ═══ SMOOTH CARDS ═══ */
.subcat-card,.related-card,.product-card{will-change:transform;}
.subcat-card-img-ph svg{transition:opacity 0.2s;}
.subcat-card:hover .subcat-card-img-ph svg{opacity:0.6;}
/* ═══ BREADCRUMB LINK HOVER ═══ */
.breadcrumb a{transition:color 0.18s;}
.breadcrumb a:hover{color:var(--gold);}
/* ═══ BACK BUTTON ═══ */
.back-btn{transition:color 0.18s;}
/* ═══ STICKY HEADER SMOOTH ═══ */
.site-header{transition:background 0.3s,box-shadow 0.3s,padding 0.3s;}
/* ═══ FAQ OPEN ANIMATION ═══ */
.faq-a{animation:faqOpen 0.22s ease;}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
/* ═══ WA FLOAT PULSE ═══ */
.float-whatsapp{animation:waPulse 2.8s ease infinite;}
@keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.4);}50%{box-shadow:0 4px 28px rgba(37,211,102,0.7),0 0 0 8px rgba(37,211,102,0.08);}}
/* ═══ PAGE LOADER BAR ═══ */
#page-loader{position:fixed;top:0;left:0;height:3px;background:var(--accent-fill);z-index:9999;width:0;transition:width 0.3s ease,opacity 0.3s;}
/* ═══ ACTIVE NAV LINK ═══ */
.main-nav > a.active-link,.nav-dropdown > a.active-link{color:var(--gold-light) !important;}
/* ═══ TOUCH OPEN DROPDOWN ═══ */
.nav-dropdown.touch-open .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0);}
/* ═══ CURSOR ON CLICKABLE CARDS ═══ */
.subcat-card,.related-card,.product-card[onclick]{cursor:pointer;}
article.product-card{cursor:pointer;}

/* ---------- feature photo cards (Built for the Working Environment) ---------- */
.feat-sec{ background:linear-gradient(180deg,#f4f2ee 0%,#e9e6e0 100%); padding:96px 0; }
.feat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:52px; }
.feat-card{ position:relative; overflow:hidden; display:flex; background:#fbfaf8; border-radius:16px; border:1px solid rgba(22,16,10,.05); box-shadow:0 1px 2px rgba(22,16,10,.04),0 14px 34px rgba(22,16,10,.08); padding:34px 36px; min-height:310px; }
.feat-photo{ position:absolute; top:0; right:0; bottom:0; width:46%; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to bottom,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 42%),linear-gradient(to bottom,#000 62%,transparent 100%); mask-composite:intersect; }
.feat-img{ width:100%; height:100%; object-fit:cover; object-position:right top; display:block; }
.feat-body{ position:relative; z-index:1; max-width:64%; }
.feat-head{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.feat-hex{ flex:none; width:58px; height:66px; display:grid; place-items:center; background:var(--safety-yellow); color:var(--ink); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.feat-hex svg{ width:28px; height:28px; }
.feat-num{ font-family:'Fraunces',serif; font-size:1.75rem; color:var(--ink); line-height:1; }
.feat-rule{ width:38px; height:2px; background:var(--safety-yellow); }
.feat-card h3{ font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; line-height:1.2; color:var(--ink); margin:0 0 12px; }
.feat-card p{ color:var(--ink-soft); font-size:1rem; line-height:1.6; margin:0; }
.feat-also{ text-align:center; color:var(--ink-soft); font-size:.92rem; margin:36px 0 0; }
.feat-also strong{ color:var(--ink); font-weight:600; }
@media (max-width:900px){ .feat-card{ padding:28px; min-height:280px; } .feat-body{ max-width:66%; } .feat-card h3{ font-size:1.3rem; } }
@media (max-width:700px){
  .feat-sec{ padding:64px 0; } .feat-grid{ grid-template-columns:1fr; gap:20px; margin-top:36px; }
  .feat-card{ flex-direction:column; padding:0 0 24px; min-height:0; }
  .feat-photo{ position:relative; width:100%; height:170px; flex:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); -webkit-mask-composite:source-over; mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); mask-composite:add; }
  .feat-img{ object-position:center top; }
  .feat-card:nth-child(1) .feat-img{ object-position:center 40%; }
  .feat-body{ max-width:none; padding:0 24px; margin-top:-18px; }
  .feat-head{ margin-bottom:18px; }
}

form.contact-form[hidden], .form-success[hidden]{ display:none !important; }

/* spam trap: hidden from people, visible to bots */
.hp-field{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden;}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
/* footer legal links + address */
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal a{color:inherit;}
.footer-legal a:hover{color:var(--gold-light);}
.footer-col .footer-address{font-size:0.86rem;color:rgba(255,255,255,0.6);line-height:1.55;}
/* legal pages */
.legal-sec{background:var(--cream);padding:140px 0 100px;}
.legal-doc{max-width:780px;margin:0 auto;}
.legal-doc h1{margin:6px 0 8px;}
.legal-updated{color:var(--ink-soft);font-size:0.85rem;margin-bottom:34px;}
.legal-doc h2{font-size:1.3rem;margin:34px 0 10px;}
.legal-doc p,.legal-doc li{color:var(--ink-soft);line-height:1.75;font-size:1rem;}
.legal-doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
/* founder section without a photo: single centred column */
.founder-grid{grid-template-columns:minmax(0,860px);justify-content:center;}
/* very small phones (<=359px): allow wide items to shrink instead of forcing sideways scroll */
@media (max-width:359px){
  .breadcrumb-inner,.breadcrumb-inner *{min-width:0;}
  .breadcrumb-current{overflow-wrap:anywhere;}
  .cat-landing-hero-inner>*,.cat-landing-hero-copy,.cat-landing-hero-badges{min-width:0;max-width:100%;}
  .cat-landing-hero-badges{flex-wrap:wrap;}
  .form-row>*,.form-row label{min-width:0;max-width:100%;}
  .form-row select,.form-row input,.form-row textarea{min-width:0;max-width:100%;}
  .application-grid>*,.application-tag{min-width:0;}
  .application-tag{overflow-wrap:anywhere;}
}
.footer-legal a{color:#9b9791;}
/* readability fixes: these two had text the same colour as its background */
.hero h1 .italic{color:var(--safety-yellow);}
.export-flag-pill{color:var(--ink);}
/* hero statistics: two items now, keep them centred */
.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px;}

/* real-link navigation */
[data-href]{cursor:pointer;}
/* links that replaced <button> CTAs keep the button metrics */
.btn-conv{line-height:normal;text-align:center;}
/* card title is a real link; its ::after stretches over the whole card so right-click / middle-click work anywhere on the card */
.card-link{color:inherit;text-decoration:none;font:inherit;}
[data-href]:not(h3){position:relative;}
[data-href]:not(h3) .card-link::after{content:"";position:absolute;inset:0;z-index:1;}
[data-href]:not(h3) a.btn,[data-href]:not(h3) button{position:relative;z-index:2;}
.faq-q:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}

/* accessibility additions (no visual change to existing design) */
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;background:#fff;color:#111;padding:10px 16px;border-radius:4px;font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px;outline:2px solid var(--gold)}
#page-container:focus{outline:none}
.cd-value a{color:inherit;text-decoration:none}
.cd-value a:hover,.cd-value a:focus-visible{text-decoration:underline}

/* catalogue request dialog (WhatsApp / Email) */
.cat-modal[hidden]{display:none}
.cat-modal{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:16px}
.cat-modal-backdrop{position:absolute;inset:0;background:rgba(22,16,10,.6)}
.cat-modal-dialog{position:relative;background:var(--white);color:var(--ink);width:min(100%,460px);max-height:calc(100vh - 32px);overflow:auto;padding:36px 32px 32px;border-radius:var(--radius);box-shadow:var(--shadow);outline:none}
.cat-modal-close{position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;background:none;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer}
.cat-modal-close:focus-visible{outline:2px solid var(--gold)}
.cat-modal-title{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.cat-modal-name{font-family:'Fraunces',serif;font-size:1.45rem;line-height:1.25;margin:0 0 14px}
.cat-modal-note{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin:0 0 24px}
.cat-modal-actions{display:flex;flex-direction:column;gap:12px}
.cat-modal-actions .btn{width:100%;text-align:center;justify-content:center;min-height:48px;box-sizing:border-box}
.cat-modal-alt{color:var(--ink);border-color:var(--ink)}
.cat-modal-alt:hover{color:var(--ink);border-color:var(--ink);background:var(--cream)}
html.cat-modal-open{overflow:hidden}
@media (max-width:480px){.cat-modal-dialog{padding:32px 20px 24px}}

/* Find Us - Google Map section above the footer */
.find-us{background:var(--white);padding:64px 0}
.find-us-text{margin:0 auto 28px;max-width:640px}
.find-us-map{max-width:1100px;margin:0 auto;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);line-height:0;height:clamp(280px,42vw,420px)}
.find-us-map iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:600px){.find-us{padding:48px 0}}

/* cookie consent banner (only appears when Google Analytics is switched on) */
.consent-banner[hidden]{display:none}
.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9500;max-width:720px;margin:0 auto;background:var(--ink);color:#fff;padding:16px 20px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.16);display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap}
.consent-banner p{margin:0;flex:1 1 280px;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.88)}
.consent-banner a{color:var(--gold-light);text-decoration:underline}
.consent-actions{display:flex;gap:10px;flex:0 0 auto}
.consent-btn{min-height:44px;padding:0 20px;border-radius:var(--radius);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff}
.consent-btn.consent-accept{background:#fff;border-color:#fff;color:var(--ink)}
.consent-btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
@media (max-width:640px){.consent-banner{bottom:76px}}

/* World map: export destinations (dotted map, pins and routes from Kanpur) */
.wm-arc{fill:none;stroke:#fff;stroke-opacity:.38;stroke-width:1.3;stroke-dasharray:4 5;transition:stroke-opacity .2s,stroke-width .2s}
.wm-dot{fill:#fff;transition:r .2s}
.wm-pulse{fill:none;stroke:#fff;stroke-opacity:.55;stroke-width:1.5}
.wm-origin-ring{fill:rgba(255,255,255,.16);stroke:#fff;stroke-width:1.5}
.wm-origin-dot{fill:#fff}
.wm-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.78rem;color:rgba(255,255,255,.78)}
.wm-legend li{display:flex;align-items:center;gap:8px}
.wm-key{width:9px;height:9px;border-radius:50%;background:#fff;display:inline-block}
.wm-key-origin{width:13px;height:13px;background:rgba(255,255,255,.16);border:1.5px solid #fff;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){
  .wm-arc{animation:wm-flow 14s linear infinite}
  .wm-pulse{animation:wm-pulse 2.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes wm-flow{to{stroke-dashoffset:-90}}
@keyframes wm-pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@media (max-width:600px){.wm-dot{r:7}.wm-origin-ring{r:13}.wm-origin-dot{r:8}.markets-map{padding:18px}}
.markets-layout:has(.market-item[data-c="de"]:hover) .wm-pin[data-c="de"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="de"]:hover) .wm-arc[data-c="de"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="nl"]:hover) .wm-pin[data-c="nl"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="nl"]:hover) .wm-arc[data-c="nl"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="dk"]:hover) .wm-pin[data-c="dk"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="dk"]:hover) .wm-arc[data-c="dk"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="fr"]:hover) .wm-pin[data-c="fr"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="fr"]:hover) .wm-arc[data-c="fr"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="it"]:hover) .wm-pin[data-c="it"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="it"]:hover) .wm-arc[data-c="it"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="uk"]:hover) .wm-pin[data-c="uk"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="uk"]:hover) .wm-arc[data-c="uk"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="us"]:hover) .wm-pin[data-c="us"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="us"]:hover) .wm-arc[data-c="us"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="ca"]:hover) .wm-pin[data-c="ca"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="ca"]:hover) .wm-arc[data-c="ca"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="ae"]:hover) .wm-pin[data-c="ae"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="ae"]:hover) .wm-arc[data-c="ae"]{stroke-opacity:.95;stroke-width:2;}
.markets-layout:has(.market-item[data-c="sa"]:hover) .wm-pin[data-c="sa"] .wm-dot{r:8;}
.markets-layout:has(.market-item[data-c="sa"]:hover) .wm-arc[data-c="sa"]{stroke-opacity:.95;stroke-width:2;}

/* Real map (OpenStreetMap tiles, no library) with export pins; the dotted map above is the fallback if tiles cannot load */
.wm-tiles{position:relative;overflow:hidden;aspect-ratio:1 / 0.4924;border-radius:2px;background:#aad3df}
.wm-world{position:relative;width:100%;aspect-ratio:1;transform:translateY(-17.73%);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,25%)}
.wm-world img{display:block;width:100%;height:100%;filter:saturate(1.2) contrast(1.03)}
.wm-overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.wm-tiles .wm-dot{r:6}
.wm-attr{position:absolute;right:0;bottom:0;padding:3px 8px;font-size:.66rem;color:rgba(255,255,255,.8);background:rgba(22,16,10,.72);text-decoration:none}
.wm-attr:hover,.wm-attr:focus-visible{color:#fff;text-decoration:underline}
.wm-dotted{display:none}
.wm-fallback .wm-tiles{display:none}
.wm-fallback .wm-dotted{display:block}
@media (max-width:600px){.wm-tiles .wm-dot{r:9}.wm-tiles .wm-origin-ring{r:16}.wm-tiles .wm-origin-dot{r:10}}

/* export countries: flag badges on the map, flags in the list */
.wm-badge{position:absolute;transform:translate(-50%,-50%);display:block;line-height:0;z-index:2}
.wm-badge img{display:block;width:30px;height:auto;border-radius:3px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.35);transition:transform .2s}
.wm-badge-name{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;padding:2px 6px;background:rgba(22,16,10,.88);color:#fff;font-size:.66rem;line-height:1.3;border-radius:2px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.wm-badge:hover .wm-badge-name,.wm-badge:focus-within .wm-badge-name{opacity:1}
.wm-leader{stroke:#16100A;stroke-opacity:.55;stroke-width:1.2}
.wm-spot{fill:#16100A;stroke:#fff;stroke-width:1.5}
.wm-tiles .wm-origin-ring{fill:rgba(22,16,10,.2);stroke:#16100A;stroke-width:1.5}
.wm-tiles .wm-origin-dot{fill:#16100A;stroke:#fff;stroke-width:2}
.wm-key-origin{background:#16100A;border:0;box-shadow:0 0 0 2px #fff}
.market-flag-img{width:28px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(22,16,10,.18);flex:0 0 auto}
@media (max-width:600px){.wm-badge img{width:21px;border-radius:2px;box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(0,0,0,.35)}.wm-badge-name{display:none}.wm-spot{r:4}}
.markets-layout:has(.market-item[data-c="de"]:hover) .wm-badge[data-c="de"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="de"]:hover) .wm-badge[data-c="de"]{z-index:5}
.markets-layout:has(.market-item[data-c="nl"]:hover) .wm-badge[data-c="nl"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="nl"]:hover) .wm-badge[data-c="nl"]{z-index:5}
.markets-layout:has(.market-item[data-c="dk"]:hover) .wm-badge[data-c="dk"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="dk"]:hover) .wm-badge[data-c="dk"]{z-index:5}
.markets-layout:has(.market-item[data-c="fr"]:hover) .wm-badge[data-c="fr"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="fr"]:hover) .wm-badge[data-c="fr"]{z-index:5}
.markets-layout:has(.market-item[data-c="it"]:hover) .wm-badge[data-c="it"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="it"]:hover) .wm-badge[data-c="it"]{z-index:5}
.markets-layout:has(.market-item[data-c="uk"]:hover) .wm-badge[data-c="uk"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="uk"]:hover) .wm-badge[data-c="uk"]{z-index:5}
.markets-layout:has(.market-item[data-c="us"]:hover) .wm-badge[data-c="us"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="us"]:hover) .wm-badge[data-c="us"]{z-index:5}
.markets-layout:has(.market-item[data-c="ca"]:hover) .wm-badge[data-c="ca"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="ca"]:hover) .wm-badge[data-c="ca"]{z-index:5}
.markets-layout:has(.market-item[data-c="ae"]:hover) .wm-badge[data-c="ae"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="ae"]:hover) .wm-badge[data-c="ae"]{z-index:5}
.markets-layout:has(.market-item[data-c="sa"]:hover) .wm-badge[data-c="sa"] img{transform:scale(1.35)}
.markets-layout:has(.market-item[data-c="sa"]:hover) .wm-badge[data-c="sa"]{z-index:5}