/* =========================================================
   Vity's Design - Shop frontend clone (demo, no backend)
   Palette / typography adapted for the current demo
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@600;700&family=Russo+One&display=swap');

:root{
  --accent:#f47b20;
  --accent-deep:#da6610;
  --gold:var(--accent);
  --gold-light:var(--accent-deep);
  --gold-soft:rgba(244,123,32,.13);
  --dark:#3f3f3f;
  --dark-2:#383838;
  --dark-3:#2c2c2c;
  --dark-hover:#171717;
  --text:#262626;
  --muted:#6c757d;
  --muted-2:#8f8f8f;
  --border:#ebebeb;
  --bg-light:#f5f5f5;
  --bg-soft:#f2f2f2;
  --success-bg:#e2f2da; --success-text:#44782a;
  --warning-bg:#f2eeda; --warning-text:#786b2a;
  --danger-bg:#f2dada; --danger-text:#993d3d;
  --sale:#be0000;
  --whatsapp:#25d366;
  --radius:4px;
  --container:1320px;
  --font-base:'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading:'Roboto Slab', Georgia, serif;
  --font-display:'Russo One', sans-serif;
  --shadow:0 2px 6px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--text);
  background:#fff;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.is-soft-loading main,
body.is-soft-loading .page-header{
  opacity:.42;
  transition:opacity .16s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--font-heading); font-weight:700; margin:0 0 .5em; color:var(--text); }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:inherit; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   Buttons
   ========================================================= */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  background:var(--gold);
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:background-color .15s, color .15s, border-color .15s;
}
.button:hover{ background:var(--dark-hover); color:#fff; }
.button:active{ background:var(--dark-3); }
.button--ghost{
  background:transparent; color:var(--text); border-color:var(--border);
  text-transform:none; font-weight:500; letter-spacing:normal;
}
.button--ghost:hover{ background:var(--bg-soft); color:var(--text); border-color:var(--border); }
.button--dark{ background:var(--dark); }
.button--dark:hover{ background:var(--gold); }
.button--block{ width:100%; }
.button--small{ padding:8px 16px; font-size:12px; }
.button:disabled{ opacity:.55; cursor:not-allowed; }

.text-link{ color:var(--gold); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.04em; }
.text-link:hover{ color:var(--dark); }

/* =========================================================
   Top bar
   ========================================================= */
.topbar{
  position:relative;
  height:31px;
  overflow:hidden;
  background:#fff;
  font-size:13px;
  z-index:70;
}
.topbar__start{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.topbar__start::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:47%;
  background:var(--gold);
  clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.topbar__start .container{
  position:relative;
  display:flex;
  align-items:center;
  min-height:31px;
  pointer-events:none;
}
.topbar__links{
  display:flex;
  align-items:center;
  gap:24px;
  pointer-events:auto;
}
.topbar__start a, .topbar__start span{ color:#fff; line-height:31px; }
.topbar__start a:hover{ color:var(--dark-3); }
.topbar__whatsapp-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
}
.topbar__whatsapp-link svg{
  width:15px;
  height:15px;
  fill:currentColor;
  flex:0 0 auto;
}
.topbar__end{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.topbar__end::before{
  content:'';
  position:absolute;
  inset:0 0 0 auto;
  width:47%;
  background:var(--dark);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 18px 100%);
}
.topbar__end .container{
  position:relative;
  display:flex;
  justify-content:flex-end;
  min-height:31px;
  align-items:center;
  pointer-events:none;
}
.topbar__notice{
  width:47%;
  padding-left:42px;
  text-align:center;
  pointer-events:auto;
}
.topbar__notice--links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.topbar__notice--links a{
  color:var(--gold);
  font-size:13px;
  font-weight:700;
  line-height:31px;
}
.topbar__notice--links a:hover{
  color:#fff;
}
.topbar__notice-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--gold);
  font-size:13px;
  font-weight:700;
  line-height:31px;
}
.topbar__notice-link svg{
  width:15px;
  height:15px;
  fill:currentColor;
  flex:0 0 auto;
}
.topbar__notice-link:hover{
  color:#fff;
}
.topbar__center-logo{ display:none; }

@media (max-width: 767px){
  .topbar{ height:auto; background:var(--gold); overflow:visible; }
  .topbar__start,
  .topbar__end{ position:static; }
  .topbar__start::before,
  .topbar__end::before{ display:none; }
  .topbar__start .container{ justify-content:center; min-height:36px; text-align:center; }
  .topbar__links{ justify-content:center; gap:6px 16px; flex-wrap:wrap; }
  .topbar__start .topbar__phone{ display:none; }
  .topbar__end{ display:none; }
}

/* =========================================================
   Header / nav
   ========================================================= */
.site-header{ background:#fff; border-bottom:1px solid var(--border); position:relative; z-index:60; }
.navbar{
  display:flex; align-items:center; gap:24px;
  padding:18px 0;
}
.navbar .logo{ flex-shrink:0; }
.navbar .logo img{ height:54px; width:auto; }

.departments{ position:relative; flex-shrink:0; }
.departments__button{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--border);
  padding:12px 18px; border-radius:var(--radius);
  font-weight:700; font-size:14px; color:var(--text);
  transition:background-color .15s, color .15s;
}
.departments__button:hover, .departments.is-open .departments__button{
  background:var(--gold); color:#fff; border-color:var(--gold);
}
.departments__button svg{ width:16px; height:12px; fill:currentColor; }
.departments__panel{
  display:none;
  position:absolute; top:calc(100% + 6px); left:0;
  width:300px; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:8px 0;
  max-height:70vh; overflow:auto;
}
.departments.is-open .departments__panel{ display:block; }
.departments__panel a{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; font-size:14px; color:var(--text);
}
.departments__panel a:hover{ background:var(--bg-soft); color:var(--gold); }
.departments__panel .dep-instock{ color:var(--gold); font-weight:700; border-bottom:1px solid var(--border); margin-bottom:4px; }
.departments__panel .dep-count{ color:var(--muted-2); font-size:12px; }
.departments__group{ position:relative; }
.departments__group > a::after{ content:'›'; font-weight:700; color:var(--muted-2); }
.departments__sub{
  display:none;
  position:absolute; left:100%; top:0;
  width:280px; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:8px 0; max-height:70vh; overflow:auto;
}
.departments__group:hover .departments__sub{ display:block; }
.departments__group:hover > a{ background:var(--bg-soft); color:var(--gold); }

.search-form{ flex:1 1 auto; max-width:560px; margin:0 auto; }
.search-form__body{ display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.search-form__bike{ display:none; }
.search-form__bike img{
  width:32px;
  height:32px;
  object-fit:contain;
}
.search-form__body input{
  flex:1; border:0; padding:13px 16px; font-size:14px; outline:none; min-width:0;
}
.search-form__body button{
  border:0; background:var(--gold); color:#fff; padding:0 22px; font-weight:700; font-size:13px; text-transform:uppercase;
}
.search-form__body button:hover{ background:var(--dark-hover); }

.indicators{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.indicator{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius); border:0; background:transparent; color:var(--text);
}
.indicator:hover{ background:var(--bg-soft); }
.indicator svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; flex-shrink:0; }
.indicator__text{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.indicator__title{ font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; }
.indicator__value{ font-size:13px; font-weight:700; }
.indicator__counter{
  position:absolute; top:2px; left:18px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--gold); color:#fff;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

.mobile-menu-button{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--border); border-radius:var(--radius); background:#fff;
}
.mobile-menu-button svg{ width:18px; height:14px; fill:var(--text); }

@media (min-width: 1200px){
  .site-header{ min-height:104px; }
  .navbar{
    position:relative;
    height:104px;
    padding:0 20px;
  }
  .navbar .logo{
    position:absolute;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
  }
  .navbar .logo img{ height:58px; }
  .departments{
    position:absolute;
    left:20px;
    bottom:13px;
    z-index:4;
  }
  .departments__button{
    background:var(--gold);
    border-color:var(--gold);
    color:#111;
    min-width:200px;
  }
  .search-form{
    position:absolute;
    left:50%;
    bottom:-1px;
    width:min(460px, 44vw);
    max-width:none;
    transform:translateX(-50%);
    margin:0;
    z-index:2;
  }
  .search-form__body{
    position:relative;
    height:44px;
    align-items:center;
    border:0;
    border-radius:0;
    background:#fff;
    box-shadow:0 -1px 0 var(--border), 0 1px 0 var(--border);
    clip-path:polygon(0 0, 70px 0, 86px 100%, calc(100% - 86px) 100%, calc(100% - 70px) 0, 100% 0, calc(100% - 12px) 100%, 12px 100%);
    overflow:visible;
  }
  .search-form__body::before,
  .search-form__body::after{
    content:'';
    position:absolute;
    top:7px;
    bottom:7px;
    width:2px;
    background:#ededed;
    transform:skewX(-28deg);
  }
  .search-form__body::before{ left:78px; }
  .search-form__body::after{ right:78px; }
  .search-form__bike{
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:44px;
    flex:0 0 72px;
    color:#111;
    font-size:25px;
    line-height:1;
    padding-left:4px;
  }
  .search-form__body input{
    height:44px;
    padding:0 22px;
    text-align:center;
    color:#777;
    background:transparent;
  }
  .search-form__body input::placeholder{ color:#777; opacity:.85; }
  .search-form__body button{
    width:72px;
    height:44px;
    padding:0 18px 0 12px;
    background:transparent;
    color:#b7b7b7;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .search-form__body button:hover{ background:transparent; color:var(--gold); }
  .search-form__body button svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
  }
  .indicators{
    position:absolute;
    right:20px;
    bottom:15px;
  }
}

@media (max-width: 1199px){
  .navbar{ flex-wrap:wrap; gap:12px; }
  .departments__button .departments__button-title{ display:none; }
  .indicator__text{ display:none; }
  .search-form{ order:3; flex-basis:100%; max-width:none; margin:0; }
  .search-form__bike{ display:none; }
}
@media (max-width: 767px){
  .mobile-menu-button{ display:flex; }
  .departments{ display:none; }
  .navbar{ justify-content:space-between; }
  .navbar .logo img{ height:84px; }
  .indicator{ padding:8px; }
}

/* =========================================================
   Mobile menu (off-canvas)
   ========================================================= */
.mobile-menu{
  position:fixed; inset:0; z-index:200; visibility:hidden;
}
.mobile-menu.is-open{ visibility:visible; }
.mobile-menu__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  opacity:0; transition:opacity .2s;
}
.mobile-menu.is-open .mobile-menu__backdrop{ opacity:1; }
.mobile-menu__panel{
  position:absolute; top:0; left:0; bottom:0; width:300px; max-width:85vw;
  background:#fff; transform:translateX(-100%); transition:transform .25s;
  display:flex; flex-direction:column; overflow:auto;
}
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }
.mobile-menu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.mobile-menu__close{ border:0; background:none; font-size:22px; line-height:1; color:var(--text); }
.mobile-menu__links a{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 18px; border-bottom:1px solid var(--border); font-size:14px; font-weight:500;
}
.mobile-menu__links a:hover{ color:var(--gold); }
.mobile-menu__links .mm-count{ color:var(--muted-2); font-size:12px; }

/* =========================================================
   Hero / finder
   ========================================================= */
.hero-finder{
  --hero-scene-shift:clamp(0px, calc((100vw - 1320px) * .28), 76px);
  position:relative;
  min-height:380px;
  margin-bottom:0;
  padding:48px max(8px, calc((100vw - var(--container)) / 2 - 78px)) 64px;
  background:
    radial-gradient(circle at 17% 20%, rgba(244,123,32,.42), transparent 25%),
    radial-gradient(circle at 82% 24%, rgba(255,184,92,.24), transparent 28%),
    linear-gradient(135deg, #15120f 0%, #282018 48%, #090a09 100%);
  display:grid;
  grid-template-columns:minmax(520px, .98fr) minmax(430px, 1.02fr);
  align-items:center;
  gap:6px 42px;
  text-align:left;
  overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 130px) calc(100% - 48px), calc(100% - 160px) 100%, 160px 100%, 130px calc(100% - 48px), 0 calc(100% - 48px));
  isolation:isolate;
}
.hero-finder::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0/76px 76px,
    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/76px 76px,
    radial-gradient(circle at 45% 100%, rgba(244,123,32,.18), transparent 36%);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
.hero-finder::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:calc(100% - 48px);
  height:1px;
  background:rgba(255,255,255,.14);
  z-index:3;
}
.hero-finder__content,
.hero-finder__scene{
  position:relative;
  z-index:2;
}
.hero-finder__content{
  max-width:min(760px, 100%);
  color:#fff;
  animation:heroTextIn .7s ease-out both;
}
.hero-finder__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#ffd0a8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}
.hero-finder__eyebrow--deald{
  padding:8px 14px;
  gap:12px;
  text-transform:none;
  letter-spacing:.08em;
}
.hero-finder__eyebrow::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(244,123,32,.16);
}
.hero-finder__eyebrow--deald::before{
  margin-right:2px;
}
.hero-finder__eyebrow--deald span{
  white-space:nowrap;
}
.hero-finder__eyebrow--deald a{
  display:block;
  line-height:0;
}
.hero-finder__eyebrow--deald img{
  display:block;
  width:auto;
  height:28px;
  max-width:min(220px, 44vw);
  object-fit:contain;
}
.hero-finder h1{
  margin:0;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(30px, 3.15vw, 50px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-shadow:0 14px 34px rgba(0,0,0,.42);
}
.hero-finder__title span{
  display:block;
  white-space:nowrap;
}
.hero-finder__title span:first-child{
  font-size:1.16em;
  line-height:.9;
}
.hero-finder__title span:not(:first-child){
  margin-top:8px;
  font-size:clamp(21px, .55em, 29px);
  line-height:1.05;
  letter-spacing:0;
}
.hero-finder__lead{
  max-width:540px;
  margin:18px 0 0;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.6;
}
.hero-finder__stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:28px;
}
.hero-finder__stats span{
  min-height:76px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}
.hero-finder__stats strong{
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-family:var(--font-display);
  font-size:25px;
  font-weight:400;
  line-height:1;
  text-transform:none;
}
.hero-finder__scene{
  position:relative;
  height:280px;
  min-width:0;
  width:min(100%, 680px);
  justify-self:end;
  transform:translateX(var(--hero-scene-shift));
  animation:sceneDrift 9s ease-in-out infinite;
}

/* Ambient floating orbs */
.scene-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(.5px);
  opacity:.5;
  animation:orbRise 9s ease-in-out infinite;
}
.scene-orb--1{
  left:14%; bottom:70px;
  width:10px; height:10px;
  background:radial-gradient(circle, rgba(255,196,128,.9), transparent 70%);
}
.scene-orb--2{
  left:46%; bottom:120px;
  width:6px; height:6px;
  background:radial-gradient(circle, rgba(255,255,255,.85), transparent 70%);
  animation-duration:11s; animation-delay:-3s;
}
.scene-orb--3{
  right:24%; bottom:60px;
  width:14px; height:14px;
  background:radial-gradient(circle, rgba(244,123,32,.7), transparent 70%);
  animation-duration:13s; animation-delay:-6s;
}
.scene-orb--4{
  right:8%; bottom:140px;
  width:8px; height:8px;
  background:radial-gradient(circle, rgba(255,224,180,.8), transparent 70%);
  animation-duration:10s; animation-delay:-1.5s;
}

/* Floating glass info chips */
.scene-chip{
  position:absolute;
  z-index:7;
  min-width:132px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:15px;
  background:rgba(17,15,12,.66);
  color:#fff;
  box-shadow:0 18px 45px rgba(0,0,0,.3);
  backdrop-filter:blur(13px);
  animation:chipFloat 5.2s ease-in-out infinite;
}
.scene-chip strong,
.scene-chip span{ display:block; }
.scene-chip strong{
  font-family:var(--font-display);
  font-size:23px;
  font-weight:400;
  line-height:1;
  color:#fff;
}
.scene-chip span{
  margin-top:5px;
  color:#ffc99d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.scene-chip--margin{ top:6px; left:0; animation-delay:-.4s; }
.scene-chip--lots{ top:0; right:2%; animation-delay:-3.1s; }
.scene-chip--ready{ top:100px; right:9%; animation-delay:-1.7s; }
.scene-chip--margin strong{ color:#7be3a6; }
.scene-chip--lots strong{ color:#7be3a6; }

/* Central pallet that builds up box by box, then ships */
.pallet-build{
  --pb-scale:1;
  position:absolute;
  left:50%; bottom:46px;
  width:150px; height:172px;
  transform:translateX(-50%) scale(var(--pb-scale));
  z-index:5;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.42));
  animation:palletDispatch 8s cubic-bezier(.65,0,.35,1) infinite;
}
.pallet{
  position:absolute;
  left:0; right:0; bottom:0;
  height:24px;
  border-radius:5px;
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(0,0,0,.25) 13% 20%, transparent 20% 46%, rgba(0,0,0,.24) 46% 53%, transparent 53% 79%, rgba(0,0,0,.24) 79% 86%, transparent 86%),
    repeating-linear-gradient(90deg, #8f5528 0 23px, #6e3b1b 23px 28px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12), 0 12px 22px rgba(0,0,0,.3);
}
.cargo{
  position:absolute;
  border:1px solid rgba(120,57,8,.45);
  border-radius:6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px) 0 0/26px 100%,
    linear-gradient(135deg, #ffb45b 0%, #f47b20 52%, #a7470a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 9px 16px rgba(0,0,0,.24);
  opacity:0;
  animation:cargoDrop 8s cubic-bezier(.34,1.4,.5,1) infinite;
}
.cargo::after{
  content:'';
  position:absolute;
  inset:7px auto 7px 50%;
  width:2px;
  background:rgba(105,48,8,.34);
}
/* bottom row */
.cargo--1{ bottom:24px; left:6px;  width:66px; height:40px; animation-delay:-7.7s; }
.cargo--2{ bottom:24px; left:78px; width:66px; height:40px; animation-delay:-7.2s; }
/* middle row */
.cargo--3{ bottom:63px; left:18px; width:56px; height:38px; animation-delay:-6.7s; }
.cargo--4{ bottom:63px; left:76px; width:56px; height:38px; animation-delay:-6.2s; }
/* top row */
.cargo--5{ bottom:100px; left:44px; width:62px; height:38px; animation-delay:-5.7s; }

/* green verification sweep over the stack */
.scan-line{
  position:absolute;
  left:-12%; right:-12%;
  bottom:18px;
  height:16px;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, rgba(90,235,160,.55) 45%, rgba(140,255,200,.75) 50%, rgba(90,235,160,.55) 55%, transparent);
  filter:blur(1px);
  opacity:0;
  z-index:9;
  pointer-events:none;
  animation:scanSweep 8s ease-in-out infinite;
}

/* Conveyor with continuous parcel flow */
.conveyor{
  position:absolute;
  left:-4%; right:-4%;
  bottom:18px;
  height:30px;
  border-radius:8px;
  background:linear-gradient(180deg, #2c251d, #141009);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 20px 32px rgba(0,0,0,.34);
  overflow:visible;
  z-index:2;
}
.conveyor__belt{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 2px, transparent 2px 20px);
  animation:beltScroll 1s linear infinite;
}
.conveyor__roller{
  position:absolute;
  top:50%;
  width:18px; height:18px;
  margin-top:-9px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #5a4a3a, #1c1712);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
}
.conveyor__roller--l{ left:6px; }
.conveyor__roller--r{ right:6px; }
.parcel{
  position:absolute;
  bottom:22px;
  left:-12%;
  width:30px; height:26px;
  border-radius:5px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) 0 0/22px 100%,
    linear-gradient(135deg, #ffc079, #f47b20 60%, #a7470a);
  border:1px solid rgba(120,57,8,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 14px rgba(0,0,0,.3);
  z-index:3;
  animation:parcelRun 6s linear infinite;
}
.parcel::after{
  content:'';
  position:absolute;
  left:6px; right:6px; top:50%;
  height:2px; margin-top:-1px;
  background:rgba(105,48,8,.4);
}
.parcel--1{ animation-delay:0s; }
.parcel--2{ animation-delay:-1.5s; }
.parcel--3{ animation-delay:-3s; }
.parcel--4{ animation-delay:-4.5s; }

@keyframes heroTextIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes sceneDrift{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
@keyframes orbRise{
  0%{ opacity:0; transform:translateY(10px) scale(.8); }
  20%{ opacity:.6; }
  80%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-90px) scale(1.1); }
}
@keyframes chipFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes beltScroll{
  to{ background-position:-20px 0; }
}
@keyframes parcelRun{
  from{ transform:translateX(0); }
  to{ transform:translateX(var(--parcel-travel, 600px)); }
}
@keyframes cargoDrop{
  0%{ opacity:0; transform:translateY(-30px) scale(.9); }
  4%{ opacity:0; transform:translateY(-30px) scale(.9); }
  9%{ opacity:1; transform:translateY(2px) scale(1.02); }
  12%{ opacity:1; transform:translateY(0) scale(1); }
  74%{ opacity:1; transform:translateY(0) scale(1); }
  80%{ opacity:0; transform:translateY(-8px) scale(1); }
  100%{ opacity:0; transform:translateY(-30px) scale(.9); }
}
@keyframes palletDispatch{
  0%,72%{ opacity:1; transform:translateX(-50%) translateY(0) scale(var(--pb-scale)); }
  80%{ opacity:1; transform:translateX(-50%) translateY(-12px) scale(var(--pb-scale)); }
  88%{ opacity:0; transform:translateX(-50%) translateY(-26px) scale(var(--pb-scale)); }
  89%,100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(var(--pb-scale)); }
}
@keyframes scanSweep{
  0%,40%{ opacity:0; bottom:22px; }
  46%{ opacity:.9; bottom:30px; }
  62%{ opacity:.9; bottom:150px; }
  66%,100%{ opacity:0; bottom:150px; }
}
@keyframes truckWheelSpin{
  0%,58%,91%,100%{ transform:rotate(0deg); }
  82%{ transform:rotate(720deg); }
}
.hero-finder__cta{
  grid-column:2;
  grid-row:2;
  display:flex;
  justify-content:center;
  align-items:center;
  justify-self:end;
  width:100%;
  max-width:min(100%, 680px);
  margin-top:0;
  transform:translateX(var(--hero-scene-shift));
  z-index:3;
}
.hero-finder__cta .button{
  min-width:340px;
  height:58px;
  padding:0 28px;
  border-radius:6px;
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-shadow:0 2px 2px rgba(0,0,0,.45);
  box-shadow:none;
}
.hero-finder__cta .button:hover{
  background:var(--dark-hover);
  border-color:var(--dark-hover);
  color:#fff;
}
.hero-finder__cta .button::after{
  content:'';
  width:14px;
  height:14px;
  margin-left:8px;
  background:currentColor;
  flex:0 0 auto;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v16l-7-4-7 4V5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero-finder__cta .button--ghost{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

@media (max-width: 767px){
  .hero-finder{
    min-height:0;
    padding:40px 20px 64px;
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 32px) calc(100% - 34px), calc(100% - 52px) 100%, 52px 100%, 32px calc(100% - 34px), 0 calc(100% - 34px));
  }
  .hero-finder::after{
    top:calc(100% - 34px);
  }
  .hero-finder__content{
    max-width:none;
  }
  .hero-finder__eyebrow--deald{
    gap:10px;
    padding:7px 11px;
    letter-spacing:.04em;
  }
  .hero-finder__eyebrow--deald img{
    height:22px;
    max-width:150px;
  }
  .hero-finder h1{
    font-size:clamp(28px, 9vw, 38px);
  }
  .hero-finder__title span{
    white-space:normal;
  }
  .hero-finder__lead{
    font-size:15px;
  }
  .hero-finder__stats{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:20px;
  }
  .hero-finder__stats span{
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .hero-finder__stats strong{
    margin:0;
    font-size:20px;
  }
  .hero-finder__scene{
    height:248px;
    width:100%;
  }
  .hero-finder__cta{
    grid-column:1;
    grid-row:auto;
    margin-top:6px;
    transform:none;
  }
  .hero-finder__cta .button{
    min-width:250px;
    height:44px;
    padding:0 20px;
    font-size:16px;
  }
  .scene-chip{
    min-width:104px;
    padding:9px 11px;
    border-radius:12px;
  }
  .scene-chip strong{ font-size:18px; }
  .scene-chip span{ font-size:9px; }
  .scene-chip--margin{ top:2px; left:0; }
  .scene-chip--ready{ top:60px; right:0; }
  .scene-chip--lots{ display:none; }
  .pallet-build{
    --pb-scale:.84;
    bottom:42px;
  }
}

@media (min-width: 768px) and (max-width: 1180px){
  .hero-finder{
    --hero-scene-shift:0px;
    grid-template-columns:1fr;
    padding-left:32px;
    padding-right:32px;
  }
  .hero-finder__content{
    max-width:760px;
  }
  .hero-finder__scene{
    height:280px;
    width:100%;
    justify-self:stretch;
    transform:none;
  }
  .hero-finder__cta{
    grid-column:1;
    grid-row:auto;
    justify-self:center;
    max-width:none;
    transform:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-finder__content,
  .hero-finder__scene,
  .scene-orb,
  .scene-chip,
  .pallet-build,
  .cargo,
  .scan-line,
  .conveyor__belt,
  .parcel{
    animation:none !important;
  }
  .cargo{ opacity:1; }
  .scene-orb{ opacity:.4; }
}

/* Loading bay animation: forklift loads the pallet, then the truck leaves. */
.hero-finder__scene{
  --dock-run:clamp(245px, 31vw, 360px);
  --truck-exit:clamp(360px, 46vw, 560px);
  height:292px;
  width:min(100%, 680px);
  justify-self:end;
  transform:translateX(var(--hero-scene-shift));
  animation:none;
}
@media (min-width: 768px) and (max-width: 1180px){
  .hero-finder__scene{
    width:100%;
    justify-self:stretch;
    transform:none;
  }
}
.loading-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:26px;
  background:
    radial-gradient(circle at 14% 18%, rgba(244,123,32,.28), transparent 30%),
    radial-gradient(circle at 82% 42%, rgba(255,196,126,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.18);
}
.loading-stage::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/52px 52px,
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/52px 52px;
  mask:linear-gradient(180deg, #000, transparent 80%);
  pointer-events:none;
}
.loading-stage__glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(18px);
}
.loading-stage__glow--one{
  left:58px;
  top:44px;
  width:118px;
  height:118px;
  background:rgba(244,123,32,.28);
  animation:bayGlow 8s ease-in-out infinite;
}
.loading-stage__glow--two{
  right:70px;
  bottom:72px;
  width:150px;
  height:150px;
  background:rgba(255,195,118,.2);
  animation:bayGlow 8s ease-in-out infinite reverse;
}
.loading-stage__floor{
  position:absolute;
  left:28px;
  right:28px;
  bottom:36px;
  height:45px;
  border-radius:999px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 24px, transparent 24px 48px),
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(244,123,32,.22), rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 20px 38px rgba(0,0,0,.28);
}
.warehouse-rack{
  position:absolute;
  left:18px;
  bottom:84px;
  width:150px;
  height:180px;
  z-index:2;
  opacity:.9;
}
.warehouse-rack::before,
.warehouse-rack::after,
.warehouse-rack__shelf{
  content:'';
  position:absolute;
  background:linear-gradient(180deg, #6b5240, #2b2118);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.warehouse-rack::before{
  left:0;
  top:0;
  bottom:0;
  width:8px;
}
.warehouse-rack::after{
  right:0;
  top:0;
  bottom:0;
  width:8px;
}
.warehouse-rack__shelf{
  left:0;
  right:0;
  height:8px;
}
.warehouse-rack__shelf--top{ top:56px; }
.warehouse-rack__shelf--bottom{ bottom:42px; }
.warehouse-box{
  position:absolute;
  border:1px solid rgba(120,57,8,.42);
  border-radius:6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0/24px 100%,
    linear-gradient(135deg, #ffb45b, #f47b20 58%, #a7470a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 18px rgba(0,0,0,.22);
}
.warehouse-box--one{ left:20px; top:18px; width:48px; height:36px; }
.warehouse-box--two{ right:18px; top:18px; width:56px; height:36px; }
.warehouse-box--three{ left:20px; bottom:50px; width:54px; height:38px; }
.warehouse-box--four{ right:20px; bottom:50px; width:50px; height:38px; }
.warehouse-box--three,
.warehouse-box--four{
  transform-origin:center;
  animation:shelfToFork 11s ease-in-out infinite;
}
.warehouse-box--four{
  animation-delay:.08s;
}
.margin-tag{
  position:absolute;
  top:24px;
  right:34px;
  z-index:8;
  min-width:132px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(17,15,12,.68);
  color:#fff;
  box-shadow:0 18px 45px rgba(0,0,0,.3);
  backdrop-filter:blur(13px);
  animation:tagFloat 5s ease-in-out infinite;
}
.margin-tag strong,
.margin-tag span{
  display:block;
}
.margin-tag strong{
  color:#7be3a6;
  font-family:var(--font-display);
  font-size:23px;
  font-weight:400;
  line-height:1;
}
.margin-tag span{
  margin-top:5px;
  color:#ffc99d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.shipment-load{
  --load-scale:1;
  position:absolute;
  left:116px;
  bottom:104px;
  width:116px;
  height:112px;
  z-index:6;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.38));
  transform:translateX(0) translateY(0) scale(var(--load-scale));
  animation:loadToTruck 11s cubic-bezier(.74, 0, .22, 1) infinite;
}
.shipment-box,
.shipment-pallet{
  position:absolute;
  display:block;
}
.shipment-box{
  border:1px solid rgba(120,57,8,.45);
  border-radius:6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px) 0 0/24px 100%,
    linear-gradient(135deg, #ffbc6c, #f47b20 55%, #a7470a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 9px 16px rgba(0,0,0,.24);
}
.shipment-box::after{
  content:'';
  position:absolute;
  inset:7px auto 7px 50%;
  width:2px;
  background:rgba(105,48,8,.34);
}
.shipment-box--one{ left:4px; bottom:24px; width:52px; height:38px; }
.shipment-box--two{ right:4px; bottom:24px; width:52px; height:38px; }
.shipment-box--three{ left:28px; bottom:60px; width:60px; height:38px; }
.shipment-pallet{
  left:0;
  right:0;
  bottom:0;
  height:24px;
  border-radius:5px;
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(0,0,0,.25) 13% 20%, transparent 20% 46%, rgba(0,0,0,.24) 46% 53%, transparent 53% 79%, rgba(0,0,0,.24) 79% 86%, transparent 86%),
    repeating-linear-gradient(90deg, #8f5528 0 23px, #6e3b1b 23px 28px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12), 0 12px 22px rgba(0,0,0,.3);
}
.forklift-loader{
  --forklift-scale:1;
  position:absolute;
  left:26px;
  bottom:58px;
  width:184px;
  height:122px;
  z-index:5;
  transform:translateX(0) scale(var(--forklift-scale));
  transform-origin:left bottom;
  animation:forkliftDock 11s cubic-bezier(.74, 0, .22, 1) infinite;
}
.forklift-loader__beacon,
.forklift-loader__guard,
.forklift-loader__mast,
.forklift-loader__fork,
.forklift-loader__body,
.forklift-loader__wheel{
  position:absolute;
  display:block;
}
.forklift-loader__body{
  left:32px;
  bottom:21px;
  width:108px;
  height:58px;
  border-radius:18px 24px 9px 13px;
  background:linear-gradient(135deg, #ffb24d 0%, #f47b20 58%, #963d06 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), 0 15px 24px rgba(0,0,0,.28);
}
.forklift-loader__guard{
  left:74px;
  bottom:68px;
  width:42px;
  height:42px;
  border:8px solid rgba(255,255,255,.68);
  border-bottom:0;
  border-radius:22px 22px 0 0;
}
.forklift-loader__beacon{
  left:52px;
  bottom:80px;
  width:14px;
  height:9px;
  border-radius:9px 9px 3px 3px;
  background:#ffd465;
  box-shadow:0 0 16px rgba(255,212,101,.85);
  animation:beaconFlash 1.05s steps(2, end) infinite;
}
.forklift-loader__mast{
  right:32px;
  bottom:28px;
  width:10px;
  height:100px;
  border-radius:8px;
  background:#1d1b18;
  box-shadow:16px 0 0 #1d1b18;
}
.forklift-loader__fork{
  right:-34px;
  bottom:38px;
  width:82px;
  height:9px;
  border-radius:999px;
  background:#1d1b18;
  animation:forkLiftHeight 11s ease-in-out infinite;
}
.forklift-loader__wheel{
  bottom:6px;
  width:34px;
  height:34px;
  border:7px solid #141414;
  border-radius:50%;
  background:#6f6f6f;
  box-shadow:inset 0 0 0 4px #303030;
  transform-origin:center;
  animation:forkWheel 11s linear infinite;
}
.forklift-loader__wheel--rear{ left:24px; }
.forklift-loader__wheel--front{ left:106px; }
.stock-truck{
  --truck-scale:1;
  position:absolute;
  right:14px;
  bottom:58px;
  width:252px;
  height:116px;
  z-index:4;
  transform:translateX(0) scale(var(--truck-scale));
  transform-origin:right bottom;
  animation:truckLeavesDock 11s cubic-bezier(.72, 0, .24, 1) infinite;
}
.stock-truck__trailer,
.stock-truck__load,
.stock-truck__door,
.stock-truck__cab,
.stock-truck__wheel,
.stock-truck__trail{
  position:absolute;
  display:block;
}
.stock-truck__trailer{
  left:0;
  bottom:33px;
  width:166px;
  height:72px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px 4px 4px 11px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0/28px 100%,
    linear-gradient(135deg, #4d4035, #211c17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 15px 24px rgba(0,0,0,.26);
}
.stock-truck__load{
  border:1px solid rgba(120,57,8,.42);
  border-radius:6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0/25px 100%,
    linear-gradient(135deg, #ffc079, #f47b20 62%, #a7470a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  opacity:0;
}
.stock-truck__load::after{
  content:'';
  position:absolute;
  inset:6px auto 6px 50%;
  width:2px;
  background:rgba(105,48,8,.34);
}
.stock-truck__load--one{
  left:19px;
  bottom:46px;
  width:52px;
  height:31px;
  animation:truckCargoFillOne 11s ease-in-out infinite;
}
.stock-truck__load--two{
  left:75px;
  bottom:46px;
  width:52px;
  height:31px;
  animation:truckCargoFillTwo 11s ease-in-out infinite;
}
.stock-truck__load--three{
  left:47px;
  bottom:76px;
  width:58px;
  height:27px;
  animation:truckCargoFillThree 11s ease-in-out infinite;
}
.stock-truck__door{
  left:151px;
  bottom:33px;
  width:15px;
  height:72px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, #f47b20, #9a3f06);
  transform-origin:right center;
  animation:truckDoor 11s ease-in-out infinite;
}
.stock-truck__cab{
  right:8px;
  bottom:33px;
  width:82px;
  height:64px;
  border-radius:9px 24px 8px 2px;
  background:linear-gradient(135deg, #ffbb69, #f47b20 58%, #993f06);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), 0 13px 22px rgba(0,0,0,.23);
}
.stock-truck__cab::before{
  content:'';
  position:absolute;
  top:11px;
  right:14px;
  width:32px;
  height:19px;
  border-radius:4px 12px 3px 3px;
  background:rgba(12,22,24,.72);
}
.stock-truck__wheel{
  bottom:14px;
  width:31px;
  height:31px;
  border:7px solid #111;
  border-radius:50%;
  background:#777;
  box-shadow:inset 0 0 0 3px #2b2b2b;
  transform-origin:center;
  animation:truckWheel 11s linear infinite;
}
.stock-truck__wheel--rear{ left:42px; }
.stock-truck__wheel--front{ right:28px; }
.stock-truck__trail{
  right:-56px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.44);
  opacity:0;
  filter:blur(.2px);
  animation:truckTrail 11s ease-in-out infinite;
}
.stock-truck__trail--one{
  bottom:56px;
  width:58px;
}
.stock-truck__trail--two{
  bottom:42px;
  width:84px;
  animation-delay:.08s;
}
.route-markers{
  position:absolute;
  left:188px;
  right:228px;
  bottom:54px;
  height:10px;
  z-index:3;
  pointer-events:none;
}
.route-markers span{
  position:absolute;
  top:0;
  width:34px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  opacity:.28;
  animation:routePulse 11s ease-in-out infinite;
}
.route-markers span:nth-child(1){ left:0; }
.route-markers span:nth-child(2){ left:30%; animation-delay:.12s; }
.route-markers span:nth-child(3){ left:60%; animation-delay:.24s; }
.route-markers span:nth-child(4){ right:0; animation-delay:.36s; }
@keyframes bayGlow{
  0%,100%{ opacity:.58; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.1); }
}
@keyframes tagFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes beaconFlash{
  50%{ opacity:.45; box-shadow:0 0 4px rgba(255,212,101,.35); }
}
@keyframes shelfToFork{
  0%,6%{ opacity:1; transform:translate(0, 0) scale(1); }
  12%{ opacity:.25; transform:translate(22px, 7px) scale(.72); }
  13%,78%{ opacity:.16; transform:translate(22px, 7px) scale(.72); }
  88%,100%{ opacity:1; transform:translate(0, 0) scale(1); }
}
@keyframes loadToTruck{
  0%,6%{ opacity:0; transform:translateX(-64px) translateY(-18px) scale(var(--load-scale)); }
  11%{ opacity:1; transform:translateX(-46px) translateY(-12px) scale(var(--load-scale)); }
  17%{ opacity:1; transform:translateX(0) translateY(10px) scale(var(--load-scale)); }
  24%{ opacity:1; transform:translateX(0) translateY(-8px) scale(var(--load-scale)); }
  48%,64%{ opacity:1; transform:translateX(var(--dock-run)) translateY(-8px) scale(var(--load-scale)); }
  70%{ opacity:0; transform:translateX(calc(var(--dock-run) + 48px)) translateY(-2px) scale(.62); }
  71%,100%{ opacity:0; transform:translateX(-64px) translateY(-18px) scale(var(--load-scale)); }
}
@keyframes forkliftDock{
  0%,12%{ transform:translateX(0) scale(var(--forklift-scale)); }
  18%,24%{ transform:translateX(0) translateY(-3px) scale(var(--forklift-scale)); }
  48%,74%{ transform:translateX(var(--dock-run)) translateY(-3px) scale(var(--forklift-scale)); }
  84%{ transform:translateX(calc(var(--dock-run) - 72px)) scale(var(--forklift-scale)); }
  96%,100%{ transform:translateX(0) scale(var(--forklift-scale)); }
}
@keyframes forkLiftHeight{
  0%,14%,72%,100%{ transform:translateY(0); }
  20%,64%{ transform:translateY(-14px); }
}
@keyframes forkWheel{
  0%,18%,74%,86%,100%{ transform:rotate(0deg); }
  48%{ transform:rotate(760deg); }
  96%{ transform:rotate(-760deg); }
}
@keyframes truckCargoFillOne{
  0%,62%{ opacity:0; transform:translateX(-18px) scale(.9); }
  66%,88%{ opacity:1; transform:translateX(0) scale(1); }
  94%,100%{ opacity:0; transform:translateX(0) scale(1); }
}
@keyframes truckCargoFillTwo{
  0%,65%{ opacity:0; transform:translateX(-18px) scale(.9); }
  69%,88%{ opacity:1; transform:translateX(0) scale(1); }
  94%,100%{ opacity:0; transform:translateX(0) scale(1); }
}
@keyframes truckCargoFillThree{
  0%,68%{ opacity:0; transform:translateY(12px) scale(.9); }
  72%,88%{ opacity:1; transform:translateY(0) scale(1); }
  94%,100%{ opacity:0; transform:translateY(0) scale(1); }
}
@keyframes truckDoor{
  0%,46%{ transform:scaleX(1); }
  52%,72%{ transform:scaleX(.24); }
  78%,100%{ transform:scaleX(1); }
}
@keyframes truckLeavesDock{
  0%,74%{ opacity:1; transform:translateX(0) translateY(0) scale(var(--truck-scale)); }
  78%{ opacity:1; transform:translateX(0) translateY(-4px) scale(var(--truck-scale)); }
  88%{ opacity:1; transform:translateX(var(--truck-exit)) translateY(-4px) scale(var(--truck-scale)); }
  89%,94%{ opacity:0; transform:translateX(var(--truck-exit)) translateY(-4px) scale(var(--truck-scale)); }
  95%{ opacity:0; transform:translateX(-170px) translateY(0) scale(var(--truck-scale)); }
  100%{ opacity:1; transform:translateX(0) translateY(0) scale(var(--truck-scale)); }
}
@keyframes truckWheel{
  0%,74%,95%,100%{ transform:rotate(0deg); }
  88%{ transform:rotate(900deg); }
}
@keyframes truckTrail{
  0%,76%,88%,100%{ opacity:0; transform:translateX(0); }
  80%,86%{ opacity:.65; transform:translateX(-18px); }
}
@keyframes routePulse{
  0%,15%,68%,100%{ opacity:.22; transform:scaleX(.8); }
  24%,55%{ opacity:.7; transform:scaleX(1); }
}
@media (max-width: 767px){
  .hero-finder__scene{
    --dock-run:clamp(150px, 46vw, 210px);
    --truck-exit:330px;
    height:250px;
    transform:none;
  }
  .loading-stage{
    border-radius:18px;
  }
  .warehouse-rack{
    left:0;
    bottom:76px;
    width:104px;
    height:136px;
    opacity:.52;
  }
  .warehouse-box--one{ left:15px; top:16px; width:34px; height:27px; }
  .warehouse-box--two{ right:14px; top:16px; width:38px; height:27px; }
  .warehouse-box--three{ left:15px; bottom:43px; width:38px; height:28px; }
  .warehouse-box--four{ right:15px; bottom:43px; width:34px; height:28px; }
  .margin-tag{
    top:12px;
    right:12px;
    min-width:104px;
    padding:9px 11px;
    border-radius:12px;
  }
  .margin-tag strong{ font-size:18px; }
  .margin-tag span{ font-size:9px; }
  .shipment-load{
    --load-scale:.58;
    left:74px;
    bottom:88px;
  }
  .forklift-loader{
    --forklift-scale:.62;
    left:2px;
    bottom:48px;
  }
  .stock-truck{
    --truck-scale:.62;
    right:-42px;
    bottom:52px;
  }
  .route-markers{
    left:118px;
    right:120px;
    bottom:50px;
  }
}
@media (prefers-reduced-motion: reduce){
  .loading-stage__glow,
  .margin-tag,
  .shipment-load,
  .forklift-loader,
  .forklift-loader__beacon,
  .forklift-loader__fork,
  .forklift-loader__wheel,
  .stock-truck,
  .stock-truck__load,
  .stock-truck__door,
  .stock-truck__wheel,
  .stock-truck__trail,
  .route-markers span{
    animation:none !important;
  }
  .shipment-load,
  .stock-truck__load{
    opacity:1;
  }
}

/* =========================================================
   Quick links row (Touring 24+ / Catalog)
   ========================================================= */
.quicklinks{ padding:28px 0 0; }
.quicklinks .container{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quicklinks .button{ width:100%; }
@media (max-width: 600px){
  .quicklinks .container{ grid-template-columns:1fr; }
}

/* =========================================================
   Banners (Catalog PDF + custom builds)
   ========================================================= */
.section{ padding:0; }
.section--alt{ background:var(--bg-light); }
.offers-section .container{
  max-width:1560px;
  display:flex;
  flex-direction:column;
  padding-left:12px;
  padding-right:12px;
}
.offers-section__intro{
  display:flex;
  align-items:flex-start;
  padding:40px 0 0;
}
.latest-section{
  margin-top:32px;
  padding-bottom:52px;
}
.latest-section .container{
  max-width:1560px;
  padding-left:12px;
  padding-right:12px;
}
.latest-section__intro{
  padding-top:24px;
}
.latest-carousel{
  margin-top:18px;
  margin-bottom:0;
}
.offers-section__intro .section-heading{
  width:100%;
  margin-bottom:0;
}

.catalog-banner-wrap{
  width:100%;
  margin-bottom:20px;
  background:#000;
}
.catalog-banner-wrap .container{
  max-width:none;
  padding:0;
  background:#000;
}
.catalog-banner{
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
  width:100%;
  background:var(--dark);
  color:#fff;
  border-radius:0;
  padding:28px 32px;
  overflow:hidden;
  position:relative;
}
.catalog-banner img{ width:160px; height:160px; object-fit:contain; flex-shrink:0; }
.catalog-banner__title{ font-family:var(--font-display); font-size:26px; color:var(--gold); margin-bottom:8px; letter-spacing:.03em; }
.catalog-banner__text{ color:#d6d6d6; margin-bottom:16px; max-width:520px; }

.builds-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.build-card{ position:relative; border-radius:6px; overflow:hidden; min-height:260px; display:flex; align-items:flex-end; }
.build-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.build-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 60%); z-index:1; }
.build-card__body{ position:relative; z-index:2; padding:20px; color:#fff; }
.build-card__eyebrow{ color:var(--gold); text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.08em; }
.build-card__body h3{ color:#fff; margin:6px 0 10px; }
@media (max-width: 700px){ .builds-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Section heading + countdown
   ========================================================= */
.section-heading{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  margin-bottom:24px;
}
.section-heading .eyebrow{ color:var(--gold); text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.1em; margin-bottom:6px; }
.section-heading h2{ margin:0; font-size:28px; }
.section-heading p{ color:var(--muted); margin:6px 0 0; max-width:520px; }

.countdown{ display:flex; gap:10px; }
.countdown__cell{
  background:var(--dark); color:#fff; border-radius:var(--radius);
  min-width:64px; padding:10px 8px; text-align:center;
}
.countdown__cell strong{ display:block; font-size:22px; font-family:var(--font-heading); color:var(--gold); }
.countdown__cell span{ font-size:11px; text-transform:uppercase; color:#bbb; letter-spacing:.06em; }

@media (max-width: 767px){
  .latest-section{
    margin-top:24px;
    padding-bottom:36px;
  }
  .latest-section .container{
    padding-left:20px;
    padding-right:20px;
  }
  .offers-section .container{
    padding-left:20px;
    padding-right:20px;
  }
  .offers-section__intro{
    padding:28px 0 0;
  }
  .offers-section .section-heading{
    position:relative;
    align-items:flex-start;
    padding-right:162px;
    min-height:56px;
  }
  .offers-section .countdown{
    position:absolute;
    top:0;
    right:0;
    gap:4px;
  }
  .offers-section .countdown__cell{
    min-width:36px;
    padding:7px 4px 6px;
    border-radius:8px;
  }
  .offers-section .countdown__cell strong{
    font-size:16px;
  }
  .offers-section .countdown__cell span{
    font-size:8px;
    letter-spacing:.04em;
  }
  .latest-section__intro{
    padding-top:18px;
  }
  .latest-carousel{
    margin-top:12px;
    margin-bottom:0;
  }
}

.offers-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:18px;
  padding-left:28px;
  padding-right:28px;
}
.offers-carousel__viewport{
  flex:1;
  overflow:hidden;
  min-width:0;
  padding-bottom:1px;
  touch-action:pan-y;
}
.offers-carousel__track{
  display:flex;
  gap:20px;
  will-change:transform;
}
.offers-carousel__track.is-dragging{
  transition:none !important;
  user-select:none;
}
.offers-carousel__track.is-animating{
  transition:transform .62s cubic-bezier(.34, 1.56, .64, 1);
}
.offers-carousel__track > .product-card{
  flex:0 0 calc((100% - 80px) / 5);
  min-width:0;
  transform-origin:center center;
}
.offers-carousel__track > .product-card.is-exiting-next{
  transform-origin:left center;
  animation:offersCardExitNext .62s ease both;
}
.offers-carousel__track > .product-card.is-entering-next{
  transform-origin:right center;
  animation:offersCardEnterNext .62s ease both;
}
.offers-carousel__track > .product-card.is-exiting-prev{
  transform-origin:right center;
  animation:offersCardExitPrev .62s ease both;
}
.offers-carousel__track > .product-card.is-entering-prev{
  transform-origin:left center;
  animation:offersCardEnterPrev .62s ease both;
}
.offers-carousel__arrow{
  width:48px;
  height:48px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:background-color .15s, color .15s, border-color .15s, transform .15s;
}
.offers-carousel__arrow span{
  font-size:30px;
  line-height:1;
  transform:translateY(-1px);
}
.offers-carousel__arrow:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  transform:translateY(-1px);
}
.offers-carousel__arrow:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

/* =========================================================
   Product grid + cards
   ========================================================= */
.product-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.product-grid--compact{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }

.product-card{
  border:1px solid var(--border); border-radius:6px; background:#fff;
  display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow .15s, transform .15s;
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.product-card__media{ position:relative; aspect-ratio:1/1; background:#fafafa; border-bottom:1px solid var(--border); }
.product-card__media img{ width:100%; height:100%; object-fit:contain; padding:14px; }
.product-card__badges{ position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:6px; }
.badge{ display:inline-block; padding:3px 9px; font-size:11px; font-weight:700; text-transform:uppercase; border-radius:3px; letter-spacing:.04em; }
.badge--sale{ background:var(--sale); color:#fff; }
.badge--backorder{ background:var(--warning-text); color:#fff; }
.product-card__actions{
  position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateX(6px); transition:opacity .15s, transform .15s;
}
.product-card:hover .product-card__actions{ opacity:1; transform:translateX(0); }
.icon-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text);
  transition:background-color .15s, color .15s, border-color .15s;
}
.icon-btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.icon-btn.is-active{ background:var(--gold); color:#fff; border-color:var(--gold); }

.product-card__body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-card__category{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin:0; }
.product-card__name{ font-family:var(--font-base); font-size:14px; font-weight:500; line-height:1.4; margin:0; min-height:2.8em; }
.product-card__name a:hover{ color:var(--gold); }
.product-card__prices{ display:flex; align-items:baseline; gap:8px; margin:2px 0; }
.product-card__prices .price{ font-size:17px; font-weight:700; color:var(--text); }
.product-card__prices del{ color:var(--sale); font-size:13px; }
.product-card__sku{ font-size:11px; color:var(--muted-2); }

.th-stock-status{ padding:5px 8px; font-size:12px; text-align:center; border-radius:3px; }
.th-stock-status.in-stock{ color:var(--success-text); background:var(--success-bg); }
.th-stock-status.on-backorder{ color:var(--warning-text); background:var(--warning-bg); }
.th-stock-status.out-of-stock{ color:var(--danger-text); background:var(--danger-bg); }

.product-card__footer{ margin-top:auto; padding-top:8px; }
.product-card .add-to-cart{ width:100%; }
.product-card .add-to-cart.is-added{ background:var(--success-text); }

@keyframes offersCardExitNext{
  0%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:translateX(-18px) scale(.78);
    opacity:.35;
    filter:blur(1.5px);
  }
}
@keyframes offersCardEnterNext{
  0%{
    transform:translateX(18px) scale(.9);
    opacity:.82;
    filter:blur(1px);
  }
  58%{
    transform:translateX(-4px) scale(1.05);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
}
@keyframes offersCardExitPrev{
  0%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:translateX(18px) scale(.78);
    opacity:.35;
    filter:blur(1.5px);
  }
}
@keyframes offersCardEnterPrev{
  0%{
    transform:translateX(-18px) scale(.9);
    opacity:.82;
    filter:blur(1px);
  }
  58%{
    transform:translateX(4px) scale(1.05);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
}

@media (max-width: 1199px){
  .latest-carousel .offers-carousel__track > .product-card{
    flex-basis:calc((100% - 80px) / 5);
  }
  .offers-carousel__track > .product-card{
    flex-basis:calc((100% - 60px) / 4);
  }
}
@media (min-width: 1200px){
  .latest-carousel .offers-carousel__track > .product-card{
    flex-basis:calc((100% - 100px) / 6);
  }
}
@media (max-width: 991px){
  .latest-carousel .offers-carousel__track > .product-card{
    flex-basis:100% !important;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    min-height:0;
  }
  .latest-carousel .product-card__media{
    flex:0 0 132px;
    width:132px;
    aspect-ratio:auto;
    height:auto;
    min-height:132px;
    border-right:1px solid var(--border);
    border-bottom:0;
  }
  .latest-carousel .product-card__media img{
    padding:12px;
  }
  .latest-carousel .product-card__body{
    min-width:0;
    padding:12px 14px;
    gap:5px;
  }
  .latest-carousel .product-card__name{
    min-height:0;
    font-size:13px;
    line-height:1.3;
  }
  .latest-carousel .product-card__prices .price{
    font-size:16px;
  }
  .latest-carousel .th-stock-status{
    font-size:11px;
    padding:5px 6px;
  }
  .latest-carousel .product-card__footer{
    padding-top:6px;
  }
  .latest-carousel .product-card .add-to-cart{
    min-height:40px;
    font-size:13px;
  }
}
@media (max-width: 767px){
  .offers-carousel{
    gap:0;
    margin-top:14px;
    padding-left:0;
    padding-right:0;
  }
  .offers-carousel__viewport{
    padding:0 26px 1px;
  }
  .offers-carousel__arrow{
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    z-index:4;
    transform:translateY(-50%);
  }
  .offers-carousel__arrow--prev{ left:0; }
  .offers-carousel__arrow--next{ right:0; }
  .offers-carousel__arrow span{
    font-size:24px;
  }
  .offers-carousel__arrow:hover{
    transform:translateY(-50%);
  }
  .offers-carousel__track{
    gap:14px;
  }
  .offers-carousel__track > .product-card{
    flex-basis:calc((100% - 28px) / 3);
  }
}
@media (max-width: 520px){
  .offers-carousel__viewport{
    padding:0 22px 1px;
  }
  .offers-carousel__track > .product-card{
    flex-basis:calc((100% - 14px) / 2);
  }
  .latest-carousel .offers-carousel__track > .product-card{
    flex-basis:100%;
  }
  .latest-carousel .product-card__media{
    flex-basis:104px;
    width:104px;
    min-height:104px;
  }
}
@media (max-width: 420px){
  .offers-carousel__viewport{
    padding:0 18px 1px;
  }
  .offers-carousel__track > .product-card{
    flex-basis:100%;
  }
  .latest-carousel .product-card__media{
    flex-basis:92px;
    width:92px;
  }
  .latest-carousel .product-card__body{
    padding:11px 12px;
  }
  .latest-carousel .product-card .add-to-cart{
    min-height:38px;
    font-size:12px;
  }
}

/* =========================================================
   Category panels
   ========================================================= */
.category-section{
  padding-top:34px;
}
.category-section .section-heading{
  margin-bottom:28px;
}
.category-panels{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  padding-bottom:10px;
}
.category-panel{
  position:relative;
  border:1px solid var(--border);
  border-radius:6px;
  padding:18px 18px 18px 210px;
  min-height:232px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#fff;
  overflow:hidden;
  isolation:isolate;
  transform:translateY(0);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation:categoryCardIn .58s ease both;
}
.category-panel:nth-child(2){ animation-delay:.06s; }
.category-panel:nth-child(3){ animation-delay:.12s; }
.category-panel:nth-child(4){ animation-delay:.18s; }
.category-panel::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:190px;
  background:
    linear-gradient(135deg, rgba(244,123,32,.13), rgba(244,123,32,0) 58%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 18px);
  z-index:-1;
  transition:width .25s ease;
}
.category-panel:hover{
  transform:translateY(-4px);
  border-color:rgba(244,123,32,.36);
  box-shadow:0 18px 38px rgba(0,0,0,.1);
}
.category-panel:hover::before{
  width:230px;
}
.category-panel img{
  position:absolute;
  left:18px;
  top:50%;
  width:158px;
  height:158px;
  transform:translateY(-50%) scale(1);
  object-fit:contain;
  background:#fafafa;
  border-radius:4px;
  border:1px solid var(--border);
  padding:12px;
  transition:transform .24s cubic-bezier(.34, 1.56, .64, 1), border-color .22s ease;
}
.category-panel:hover img{
  transform:translateY(-50%) scale(1.08) rotate(-2deg);
  border-color:rgba(244,123,32,.38);
}
.category-panel .eyebrow{ color:var(--gold); text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.08em; }
.category-panel h3{
  font-size:21px;
  margin-bottom:4px;
}
.category-panel ul{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 12px;
  margin:8px 0 16px;
}
.category-panel li{
  position:relative;
  padding:0 0 0 13px;
  color:var(--muted);
  font-size:13px;
  border-bottom:0;
}
.category-panel li::before{
  content:'';
  position:absolute;
  left:0;
  top:.7em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}
.category-panel li:last-child{ border-bottom:0; }
.category-panel .button{ margin-top:auto; align-self:flex-start; }

@keyframes categoryCardIn{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width: 980px){
  .category-panels{
    grid-template-columns:1fr;
  }
}
@media (max-width: 620px){
  .category-section{
    padding-top:26px;
  }
  .category-panel{
    padding:18px;
    min-height:0;
  }
  .category-panel::before{
    width:100%;
    height:118px;
    inset:0 0 auto;
  }
  .category-panel:hover::before{
    width:100%;
  }
  .category-panel img{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:150px;
    transform:none;
    margin-bottom:10px;
  }
  .category-panel:hover img{
    transform:scale(1.03);
  }
  .category-panel ul{
    grid-template-columns:1fr;
  }
}

/* category landing tiles (categoria.php) */
.subcat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:16px; }
.subcat-tile{
  border:1px solid var(--border); border-radius:6px; padding:16px; text-align:center; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.subcat-tile:hover{ border-color:var(--gold); box-shadow:var(--shadow); }
.subcat-tile img{ width:100%; aspect-ratio:1/1; object-fit:contain; margin-bottom:10px; }
.subcat-tile h3{ font-size:13px; margin:0 0 4px; font-weight:500; font-family:var(--font-base); }
.subcat-tile span{ font-size:12px; color:var(--muted-2); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--dark); color:#adadad; margin-top:60px; }
.site-footer .container{
  max-width:1560px;
  padding:48px 12px 32px;
}
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; }
.footer-contacts__top{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:28px;
  align-items:start;
}
.footer-logo{ max-width:200px; margin-bottom:0; }
.footer-contacts > p{ margin-top:18px; }
.footer-contacts__meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px 28px;
  margin-top:0;
}
.footer-contacts dl{ margin:0 0 14px; }
.footer-contacts dt{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:4px; }
.footer-contacts dd{ margin:0; color:var(--gold); }
.footer-contacts a{ color:var(--gold); }
.footer-contacts a:hover{ color:#fff; }

.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.footer-col h5{ color:var(--gold); font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul a:hover{ color:#fff; }
.footer-link-button{
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  line-height:inherit;
  text-align:left;
}
.footer-link-button:hover{ color:#fff; }

.footer-newsletter h5{ color:var(--gold); font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.footer-newsletter p{ color:#bbb; font-size:13px; }
.newsletter-form{ display:flex; margin-bottom:18px; }
.newsletter-form input{
  flex:1; border:1px solid #585858; background:#585858; color:var(--gold); padding:12px 14px; border-radius:var(--radius) 0 0 var(--radius); outline:none;
}
.newsletter-form input::placeholder{ color:#adadad; }
.newsletter-form button{
  border:0; background:var(--gold); color:#fff; padding:0 18px; border-radius:0 var(--radius) var(--radius) 0; font-weight:700; text-transform:uppercase; font-size:12px;
}
.newsletter-form button:hover{ background:#fff; color:var(--dark); }
.social-links{ display:flex; gap:10px; }
.social-links a{
  width:36px; height:36px; border:1px solid #585858; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff;
}
.social-links a:hover{ background:var(--gold); border-color:var(--gold); }

.site-footer__bottom{ background:var(--dark-2); }
.site-footer__bottom .container{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  max-width:1560px;
  padding:18px 12px; font-size:12.5px;
}
.site-footer__bottom a{ color:var(--gold); }
.site-footer__bottom img{ height:28px; width:auto; }

@media (max-width: 991px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child{ grid-column:1 / -1; }
  .footer-contacts__top{ grid-template-columns:200px minmax(0, 1fr); }
  .footer-contacts__meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-links{ grid-template-columns:1fr 1fr; }
  .footer-contacts__top{ grid-template-columns:1fr; gap:18px; }
  .footer-contacts__meta{ grid-template-columns:1fr; gap:14px; }
  .site-footer__bottom .container{ flex-direction:column; text-align:center; }
}

/* =========================================================
   Page header (catalog/category/cart/auth/contact)
   ========================================================= */
.page-header{ background:var(--bg-light); border-bottom:1px solid var(--border); padding:28px 0; margin-bottom:32px; }
.breadcrumbs{ font-size:12px; color:var(--muted-2); margin-bottom:6px; }
.breadcrumbs a:hover{ color:var(--gold); }
.page-header h1{ margin:0; font-size:30px; }
.page-header p{ color:var(--muted); margin:8px 0 0; max-width:680px; }
.page-header--contact p{ max-width:980px; }
.page-header--about{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 30%, rgba(244,123,32,.12), transparent 30%),
    linear-gradient(180deg, #fbfbfb 0%, #f3f3f3 100%);
}
.page-header--about::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,123,32,.22), transparent);
}
.page-header--about .container{
  position:relative;
  z-index:1;
}
.page-header--about .eyebrow{
  margin:0 0 8px;
}

.about-section{
  padding:18px 0 36px;
}
.about-hero-card{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(320px, .88fr);
  gap:28px;
  padding:30px;
  border:1px solid var(--border);
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(244,123,32,.05), rgba(255,255,255,.92) 44%),
    #fff;
  box-shadow:0 18px 48px rgba(0,0,0,.05);
}
.about-hero-card__copy p:last-of-type{
  margin-bottom:0;
}
.about-audience{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.about-audience span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(244,123,32,.16);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}
.about-hero-card__side{
  display:flex;
  align-items:stretch;
}
.about-highlight-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  width:100%;
}
.about-highlight-card{
  padding:18px 18px 16px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  background:linear-gradient(180deg, #fff, #f6f6f6);
}
.about-highlight-card strong{
  display:block;
  margin-bottom:8px;
  font-size:17px;
  color:var(--text);
}
.about-highlight-card span{
  display:block;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.about-highlight-card--accent{
  background:linear-gradient(135deg, rgba(244,123,32,.14), rgba(244,123,32,.04));
  border-color:rgba(244,123,32,.16);
}
.about-pillars{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}
.about-pillar-card,
.about-offer-card,
.about-hub-card,
.about-legal-card{
  padding:22px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.04);
}
.about-pillar-card h3,
.about-offer-card h3,
.about-hub-card h3,
.about-legal-card h3{
  margin:0 0 10px;
  font-size:20px;
}
.about-pillar-card p,
.about-offer-card p,
.about-hub-card p,
.about-legal-card p{
  margin:0;
  color:var(--muted);
}
.about-offer-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.about-offer-card ul,
.about-hub-card ul{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.about-offer-card li,
.about-hub-card li{
  position:relative;
  padding-left:18px;
  color:var(--muted);
}
.about-offer-card li::before,
.about-hub-card li::before{
  content:'';
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}
.about-hubs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}
.about-hub-card{
  background:
    linear-gradient(180deg, rgba(244,123,32,.04), rgba(255,255,255,.98) 34%),
    #fff;
}
.about-hub-card .eyebrow{
  margin:0 0 8px;
}
.about-rules{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}
.about-rule-item{
  padding:20px 18px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border);
}
.about-rule-item strong{
  display:block;
  margin-bottom:10px;
  font-size:16px;
  color:var(--text);
}
.about-rule-item p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.about-legal-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

@media (max-width: 1180px){
  .about-hero-card,
  .about-offer-grid,
  .about-hubs,
  .about-legal-grid{
    grid-template-columns:1fr;
  }
  .about-pillars,
  .about-rules{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px){
  .about-section{
    padding:12px 0 28px;
  }
  .about-hero-card{
    padding:20px;
    gap:20px;
    border-radius:14px;
  }
  .about-highlight-grid,
  .about-pillars,
  .about-rules{
    grid-template-columns:1fr;
  }
  .about-pillar-card,
  .about-offer-card,
  .about-hub-card,
  .about-legal-card,
  .about-rule-item{
    padding:18px;
    border-radius:14px;
  }
}

/* =========================================================
   Catalog layout (sidebar + grid)
   ========================================================= */
.catalog-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
.catalog-sidebar{ border:1px solid var(--border); border-radius:6px; padding:20px; position:sticky; top:20px; }
.catalog-sidebar h3{ font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.catalog-sidebar .filter-block{ margin-bottom:24px; }
.catalog-sidebar .filter-block:last-child{ margin-bottom:0; }
.catalog-sidebar label{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14px; cursor:pointer; }
.catalog-sidebar input[type="checkbox"], .catalog-sidebar input[type="radio"]{ accent-color:var(--gold); width:15px; height:15px; }
.catalog-sidebar .cat-link{ display:flex; justify-content:space-between; padding:5px 0; font-size:14px; color:var(--text); }
.catalog-sidebar .cat-link:hover, .catalog-sidebar .cat-link.is-active{ color:var(--gold); font-weight:700; }
.catalog-sidebar .cat-link span{ color:var(--muted-2); font-weight:400; }

.catalog-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.catalog-toolbar select{
  border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:13px; background:#fff;
}
.catalog-toolbar .result-count{ color:var(--muted); font-size:13px; }

.active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.active-filters .chip{
  display:flex; align-items:center; gap:6px; background:var(--gold-soft); color:var(--gold);
  border-radius:20px; padding:5px 12px; font-size:12px; font-weight:700;
}
.active-filters .chip button{ border:0; background:none; color:var(--gold); font-size:14px; line-height:1; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); border:1px dashed var(--border); border-radius:6px; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:32px; }
.pagination button{
  min-width:38px; height:38px; border:1px solid var(--border); background:#fff; border-radius:var(--radius); font-weight:700;
}
.pagination button.is-active, .pagination button:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.pagination button:disabled{ opacity:.4; cursor:not-allowed; }

@media (max-width: 900px){
  .catalog-layout{ grid-template-columns:1fr; }
  .catalog-sidebar{ position:static; }
}

/* =========================================================
   Product detail page
   ========================================================= */
.product-detail{ display:grid; grid-template-columns:480px 1fr; gap:48px; align-items:start; }
.product-gallery{ border:1px solid var(--border); border-radius:6px; background:#fafafa; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:30px; }
.product-gallery img{ max-height:100%; object-fit:contain; }
.product-summary h1{ font-size:26px; margin-bottom:8px; }
.product-summary .product-meta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:var(--muted-2); font-size:13px; margin-bottom:16px; }
.product-summary .price-row{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.product-summary .price{ font-size:30px; font-weight:700; }
.product-summary del{ color:var(--sale); font-size:18px; }
.product-summary .short-desc li{ padding:4px 0 4px 22px; position:relative; color:var(--muted); }
.product-summary .short-desc li::before{ content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:700; }
.qty-row{ display:flex; align-items:center; gap:14px; margin:20px 0; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius); }
.qty-control button{ width:40px; height:44px; border:0; background:#fff; font-size:18px; }
.qty-control button:hover{ background:var(--bg-soft); }
.qty-control input{ width:50px; height:44px; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font-size:15px; }
.product-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.product-actions .button{ flex:1; min-width:180px; }
.product-tabs{ margin-top:40px; border-top:1px solid var(--border); padding-top:24px; }
.product-tabs h2{ font-size:18px; }
.product-tabs .description{ color:var(--muted); white-space:pre-line; }
.fitment-box{ background:var(--gold-soft); border-left:3px solid var(--gold); padding:14px 18px; border-radius:4px; margin:16px 0; font-size:13px; }
.related-products{ margin-top:48px; }

@media (max-width: 900px){
  .product-detail{ grid-template-columns:1fr; gap:24px; }
}

/* =========================================================
   Cart page
   ========================================================= */
.cart-layout{ display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:start; }
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); padding:0 0 12px; border-bottom:1px solid var(--border); }
.cart-table td{ padding:16px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.cart-table .cart-product{ display:flex; align-items:center; gap:14px; }
.cart-table .cart-product img{ width:64px; height:64px; object-fit:contain; border:1px solid var(--border); border-radius:4px; padding:4px; background:#fafafa; }
.cart-table .cart-product-name{ font-weight:500; }
.cart-table .cart-product-name:hover{ color:var(--gold); }
.cart-remove{ border:0; background:none; color:var(--muted-2); font-size:18px; }
.cart-remove:hover{ color:var(--sale); }
.cart-summary{ border:1px solid var(--border); border-radius:6px; padding:24px; }
.cart-summary h3{ font-size:16px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.cart-summary .row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px; }
.cart-summary .row.total{ font-weight:700; font-size:18px; border-bottom:0; padding-top:14px; }
.cart-summary .button{ margin-top:16px; }
.coupon-row{ display:flex; gap:8px; margin:16px 0; }
.coupon-row input{ flex:1; border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; }

@media (max-width: 900px){
  .cart-layout{ grid-template-columns:1fr; }
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{ border-bottom:1px solid var(--border); padding:12px 0; }
  .cart-table td{ border:0; padding:6px 0; }
}

/* =========================================================
   Auth pages (login/register) + contact
   ========================================================= */
.auth-layout{ display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:980px; margin:0 auto; }
.auth-layout--account{ display:block; max-width:1240px; }
.account-dashboard{ display:grid; grid-template-columns:minmax(280px, 340px) minmax(0, 1fr); gap:24px; width:100%; align-items:start; }
.auth-card{ border:1px solid var(--border); border-radius:6px; padding:32px; }
.auth-card h2{ font-size:20px; margin-bottom:18px; }
.account-card{ min-width:0; }
.account-card--overview{ grid-column:1; grid-row:1; }
.account-card--profile{ grid-column:2; align-self:stretch; }
.account-card--profile .form-grid{ grid-template-columns:1fr; }
.account-card--password{ grid-column:2; }
.account-card--support{ grid-column:1; grid-row:2; align-self:start; }
.account-card__intro{ margin:-4px 0 18px; color:var(--muted); font-size:14px; line-height:1.6; }
.account-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:18px 0; }
.account-kpi{ padding:14px 16px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.account-kpi strong{ display:block; font-size:22px; color:var(--text); }
.account-kpi span{ display:block; margin-top:4px; color:var(--muted-2); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.account-links{ display:flex; flex-direction:column; gap:10px; }
.form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 16px; }
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; border:1px solid var(--border); border-radius:var(--radius); padding:11px 14px; outline:none;
  transition:border-color .15s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ border-color:var(--gold); }
.form-check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; margin-bottom:16px; line-height:1.55; }
.form-check input{ width:auto; accent-color:var(--gold); }
.form-foot{ font-size:13px; color:var(--muted); margin-top:14px; }
.form-foot a{ color:var(--gold); font-weight:700; }
.form-message{
  display:none; padding:12px 14px; border-radius:var(--radius); font-size:13px; margin-bottom:16px;
}
.form-message.is-success{ display:block; background:var(--success-bg); color:var(--success-text); }
.form-message.is-error{ display:block; background:var(--danger-bg); color:var(--danger-text); }
.utility-page{ max-width:1120px; margin:0 auto; }
.utility-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start; }
.utility-list{ display:flex; flex-direction:column; gap:14px; }
.utility-list__item{ padding:14px 16px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.utility-list__item strong{ display:block; margin-bottom:6px; color:var(--text); }
.utility-list__item p{ margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.utility-note{ margin-top:16px; padding:14px 16px; border-radius:6px; background:var(--bg-light); color:var(--muted); font-size:14px; }
.summary-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.summary-card{ padding:18px 20px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.summary-card strong{ display:block; font-size:24px; color:var(--text); }
.summary-card span{ display:block; margin-top:4px; color:var(--muted-2); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.order-history{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.order-card{ padding:16px 18px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.order-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.order-card__head h2,
.order-card__head h3{ margin:0; font-size:20px; }
.order-card__head p{ margin:6px 0 0; color:var(--muted); }
.order-card__meta{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; color:var(--muted); font-size:14px; }
.status-pill{ display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.status-pill.is-success{ background:var(--success-bg); color:var(--success-text); }
.status-pill.is-ready{ background:var(--warning-bg); color:var(--warning-text); }
.status-pill.is-progress{ background:var(--bg-light); color:var(--gold); }
.tracking-result{ margin-top:28px; }
.tracking-result.is-hidden{ display:none; }
.tracking-steps{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-top:18px; }
.tracking-step{ padding:14px 12px; border:1px solid var(--border); border-radius:6px; background:#fff; text-align:center; color:var(--muted-2); }
.tracking-step span{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0 auto 8px; border-radius:50%; background:var(--bg-light); color:var(--muted); font-weight:700; }
.tracking-step strong{ display:block; font-size:13px; }
.tracking-step.is-active{ border-color:rgba(244,123,32,.28); background:rgba(244,123,32,.06); color:var(--text); }
.tracking-step.is-active span{ background:var(--gold); color:#fff; }

@media (max-width: 800px){
  .auth-layout{ grid-template-columns:1fr; }
  .account-dashboard,
  .account-kpis{ grid-template-columns:1fr; }
  .account-card--overview,
  .account-card--profile,
  .account-card--password,
  .account-card--support{ grid-column:auto; grid-row:auto; }
  .form-grid,
  .utility-grid,
  .summary-grid,
  .tracking-steps{ grid-template-columns:1fr; }
  .order-card__head{ flex-direction:column; }
}

.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; }
.contact-form-card{ display:flex; flex-direction:column; min-height:100%; }
.contact-form-card form{ display:flex; flex:1; flex-direction:column; }
.contact-form-card .form-row--message{ display:flex; flex:1; flex-direction:column; min-height:180px; }
.contact-form-card .form-row--message textarea{ flex:1; min-height:180px; resize:vertical; }
.contact-info dl{ margin-bottom:18px; }
.contact-info dt{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:4px; }
.contact-info dd{ margin:0; font-size:15px; }
.contact-info a:hover{ color:var(--gold); }
.contact-map{ border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:20px; }
.contact-map iframe{ width:100%; height:240px; border:0; display:block; }
@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form-card .form-row--message{ min-height:auto; }
  .contact-form-card .form-row--message textarea{ min-height:180px; }
}

/* =========================================================
   Drawers (cart / wishlist) + toast + quick view
   ========================================================= */
.drawer{ position:fixed; inset:0; z-index:300; visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .2s; }
.drawer.is-open .drawer__backdrop{ opacity:1; }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:380px; max-width:90vw; background:#fff;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s;
}
.drawer.is-open .drawer__panel{ transform:translateX(0); }
.drawer__head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--border); }
.drawer__head h2{ margin:0; font-size:16px; text-transform:uppercase; letter-spacing:.06em; }
.drawer__close{ border:0; background:none; font-size:22px; line-height:1; }
.drawer__body{ flex:1; overflow:auto; padding:16px 20px; }
.drawer__item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.drawer__item img{ width:60px; height:60px; object-fit:contain; border:1px solid var(--border); border-radius:4px; padding:4px; background:#fafafa; }
.drawer__item-body{ flex:1; }
.drawer__item-name{ font-size:13px; font-weight:500; margin-bottom:4px; }
.drawer__item-meta{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); }
.drawer__item-remove{ border:0; background:none; color:var(--muted-2); }
.drawer__item-remove:hover{ color:var(--sale); }
.drawer__foot{ padding:16px 20px; border-top:1px solid var(--border); }
.drawer__foot .row{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:12px; font-size:16px; }
.drawer__empty{ text-align:center; color:var(--muted); padding:40px 0; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%, 20px);
  background:var(--dark); color:#fff; padding:12px 22px; border-radius:30px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:400;
  display:flex; align-items:center; gap:8px;
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }
.toast::before{ content:'✓'; color:var(--gold); font-weight:700; }

/* =========================================================
   Misc
   ========================================================= */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:#fff; padding:10px 16px; z-index:999; }
.skip-link:focus{ left:10px; top:10px; }

.announce-bar{ background:#161616; color:#fff; text-align:center; font-size:13px; font-weight:700; padding:6px 16px; }
.announce-bar span{ color:var(--gold); }

.spinner-overlay{ display:flex; align-items:center; justify-content:center; padding:60px 0; color:var(--muted); }

/* Desktop header matching the angled Vity's reference */
@media (min-width: 1200px){
  .topbar{
    height:31px;
    overflow:visible;
    background:#fff;
    border-top:1px solid #d8d8d8;
    z-index:90;
  }
  .topbar__start::before{
    width:46.5%;
    clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  }
  .topbar__end::before{
    width:46.5%;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 18px 100%);
  }
  .topbar__links{
    padding-left:0;
    gap:26px;
  }
  .topbar__notice{
    width:46.5%;
    padding-left:34px;
  }
  .topbar__center-logo{
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:204px;
    height:104px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4;
  }
  .topbar__center-logo img{
    width:196px;
    height:auto;
  }
  body[data-page="home"] .topbar__center-logo{
    width:204px;
    height:104px;
    top:8px;
  }
  body[data-page="home"] .topbar__center-logo img{
    width:196px;
  }
  .site-header{
    height:108px;
    min-height:108px;
    border-bottom:1px solid #e7e7e7;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
    z-index:70;
  }
  .navbar{
    height:108px;
    max-width:1360px;
    padding:0 20px;
  }
  .navbar > .logo{
    display:none !important;
  }
  .logo--mobile-header{
    display:none !important;
  }
  .departments{
    left:20px;
    bottom:48px;
  }
  .departments__button{
    height:32px;
    min-width:202px;
    padding:0 14px;
    border-radius:2px;
    justify-content:flex-start;
    background:var(--gold);
    border-color:var(--gold);
    color:#111;
    gap:20px;
  }
  .departments__button svg{
    width:15px;
  }
  .indicators{
    right:20px;
    bottom:26px;
  }
  .indicator{
    padding:4px 8px;
  }
  .indicator svg{
    width:31px;
    height:31px;
    stroke-width:1.5;
  }
  .indicator__title{
    font-size:12px;
    text-transform:none;
    letter-spacing:0;
  }
  .indicator__value{
    font-size:16px;
  }
  .search-form{
    bottom:-46px;
    width:470px;
  }
  .search-form__body{
    height:45px;
    clip-path:polygon(0 0, 72px 0, 88px 100%, calc(100% - 88px) 100%, calc(100% - 72px) 0, 100% 0, calc(100% - 12px) 100%, 12px 100%);
    box-shadow:none;
  }
  .search-form__body::before{ left:79px; }
  .search-form__body::after{ right:79px; }
  .search-form__bike{
    width:73px;
    height:45px;
    flex-basis:73px;
  }
  .search-form__bike img{
    width:34px;
    height:34px;
  }
  .search-form__body input{
    height:45px;
    font-size:15px;
  }
  .search-form__body button{
    width:73px;
    height:45px;
    color:#b9b9b9;
  }
}

/* Final spaceship header override from the original RedParts structure */
@media (min-width: 768px){
  .topbar{
    height:31px;
    overflow:visible;
    background:#fff;
    border-top:1px solid #d8d8d8;
    z-index:120;
  }
  .topbar__start,
  .topbar__end{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .topbar__start::before{
    display:block;
    width:46.5%;
    clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  }
  .topbar__end::before{
    display:block;
    width:46.5%;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 18px 100%);
  }
  .topbar__start .container,
  .topbar__end .container{
    min-height:31px;
  }
  .topbar__links{
    gap:26px;
    pointer-events:auto;
  }
  .topbar__notice{
    width:46.5%;
    padding-left:34px;
    pointer-events:auto;
  }
  .topbar__center-logo{
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:204px;
    height:104px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    z-index:130;
  }
  .topbar__center-logo img{
    width:196px;
    height:auto;
  }
  body[data-page="home"] .topbar__center-logo{
    width:204px;
    height:104px;
    top:8px;
  }
  body[data-page="home"] .topbar__center-logo img{
    width:196px;
  }
  .site-header{
    height:108px;
    min-height:108px;
    background:#fff;
    border-bottom:1px solid #e7e7e7;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
    z-index:80;
  }
  .navbar{
    position:relative;
    height:108px;
    padding:0 20px;
    gap:0;
    flex-wrap:nowrap;
  }
  .navbar > .logo,
  .logo--mobile-header{
    display:none !important;
  }
  .departments{
    position:absolute;
    left:20px;
    bottom:48px;
    z-index:4;
  }
  .departments__button{
    height:32px;
    min-width:202px;
    padding:0 14px;
    border-radius:2px;
    justify-content:flex-start;
    background:var(--gold);
    border-color:var(--gold);
    color:#111;
    gap:20px;
  }
  .indicators{
    position:absolute;
    right:20px;
    bottom:40px;
    z-index:4;
  }
  .search-form{
    position:absolute;
    left:50%;
    bottom:-26px;
    width:min(470px, calc(100vw - 96px));
    max-width:none;
    transform:translateX(-50%);
    margin:0;
    z-index:6;
  }
  .search-form__body{
    position:relative;
    display:flex;
    align-items:center;
    height:45px;
    border:0;
    border-radius:0;
    overflow:hidden;
    background:#fff;
    box-shadow:0 -1px 0 #eeeeee;
    clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
  }
  .search-form__body::before,
  .search-form__body::after{
    content:'';
    position:absolute;
    top:7px;
    bottom:7px;
    width:2px;
    background:#eeeeee;
    transform:skewX(-28deg);
    z-index:2;
  }
  .search-form__body::before{ left:82px; }
  .search-form__body::after{ right:82px; }
  .search-form__bike{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:78px;
    height:45px;
    flex:0 0 78px;
    color:#111;
  }
  .search-form__bike img{
    width:34px;
    height:34px;
  }
  .search-form__body input{
    height:45px;
    padding:0 22px;
    text-align:center;
    color:#777;
    background:transparent;
    font-size:15px;
  }
  .search-form__body input::placeholder{
    color:#8f8f8f;
    opacity:1;
  }
  .search-form__body button{
    width:78px;
    height:45px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:#b9b9b9;
  }
  .search-form__body button:hover{
    background:transparent;
    color:var(--gold);
  }
  .search-form__body button svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
  }
}

/* Compact desktop: keep the hero balanced on notebook and low-height browser viewports. */
@media (min-width: 1181px) and (max-width: 1500px){
  .hero-finder{
    --hero-scene-shift:0px;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:4px 24px;
    padding-left:clamp(34px, 3.4vw, 52px);
    padding-right:clamp(34px, 3.4vw, 52px);
    padding-top:42px;
    padding-bottom:58px;
  }
  .hero-finder__content{
    max-width:none;
    min-width:0;
  }
  .hero-finder h1{
    font-size:clamp(34px, 2.65vw, 42px);
    line-height:.98;
    letter-spacing:-.025em;
  }
  .hero-finder__title span:first-child{
    font-size:1.08em;
    line-height:.94;
  }
  .hero-finder__title span:not(:first-child){
    margin-top:6px;
    font-size:clamp(19px, .5em, 24px);
    line-height:1.08;
  }
  .hero-finder__lead{
    max-width:500px;
    margin-top:13px;
    font-size:16px;
    line-height:1.48;
  }
  .hero-finder__stats{
    gap:9px;
    margin-top:20px;
  }
  .hero-finder__stats span{
    min-height:66px;
    padding:10px 12px;
    font-size:11px;
  }
  .hero-finder__stats strong{
    font-size:22px;
  }
  .hero-finder__scene{
    --dock-run:clamp(220px, 27vw, 315px);
    --truck-exit:clamp(330px, 40vw, 500px);
    width:100%;
    max-width:640px;
    height:262px;
    justify-self:stretch;
    transform:none;
  }
  .hero-finder__cta{
    max-width:640px;
    justify-self:stretch;
    transform:none;
  }
  .hero-finder__cta .button{
    min-width:310px;
    height:52px;
    font-size:19px;
  }
  .loading-stage{
    border-radius:22px;
  }
  .loading-stage__floor{
    left:24px;
    right:24px;
    bottom:32px;
    height:40px;
  }
  .warehouse-rack{
    left:16px;
    bottom:72px;
    transform:scale(.88);
    transform-origin:left bottom;
  }
  .margin-tag{
    top:18px;
    right:24px;
    min-width:118px;
    padding:9px 12px;
    border-radius:13px;
  }
  .margin-tag strong{
    font-size:20px;
  }
  .margin-tag span{
    font-size:9px;
  }
  .shipment-load{
    --load-scale:.86;
    left:96px;
    bottom:88px;
  }
  .forklift-loader{
    --forklift-scale:.86;
    left:20px;
    bottom:45px;
  }
  .stock-truck{
    --truck-scale:.86;
    right:10px;
    bottom:45px;
  }
  .route-markers{
    left:160px;
    right:186px;
    bottom:45px;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) and (max-height: 820px){
  .topbar{
    height:29px;
  }
  .topbar__start .container,
  .topbar__end .container{
    min-height:29px;
  }
  .topbar__center-logo,
  body[data-page="home"] .topbar__center-logo{
    top:5px;
    width:184px;
    height:94px;
  }
  .topbar__center-logo img,
  body[data-page="home"] .topbar__center-logo img{
    width:178px;
  }
  .site-header{
    height:98px;
    min-height:98px;
  }
  .navbar{
    height:98px;
  }
  .departments{
    bottom:42px;
  }
  .indicators{
    bottom:34px;
  }
  .search-form{
    bottom:-23px;
    width:min(430px, calc(100vw - 100px));
  }
  .search-form__body,
  .search-form__body input,
  .search-form__body button,
  .search-form__bike{
    height:41px;
  }
  .search-form__bike{
    width:72px;
    flex-basis:72px;
  }
  .search-form__body button{
    width:72px;
  }
  .search-form__body::before{
    left:76px;
  }
  .search-form__body::after{
    right:76px;
  }
  .hero-finder{
    padding-top:34px;
    padding-bottom:54px;
  }
  .hero-finder h1{
    font-size:clamp(34px, 2.55vw, 40px);
  }
  .hero-finder__scene{
    width:min(100%, 600px);
    height:246px;
  }
  .hero-finder__cta{
    max-width:min(100%, 600px);
  }
  .hero-finder__cta .button{
    min-width:300px;
    height:49px;
    font-size:18px;
  }
  .shipment-load{
    --load-scale:.82;
    left:90px;
    bottom:84px;
  }
  .forklift-loader{
    --forklift-scale:.82;
    bottom:42px;
  }
  .stock-truck{
    --truck-scale:.82;
    bottom:42px;
  }
}