/* ===== Vazir (self-host) ===== */







/* ===== Design tokens ===== */
:root{
  --brand-blue:#00366E;
  --brand-white:#ffffff;
  --brand-muted:#f5f7fb;
  --text:#0f172a;
  --text-muted:#475569;
  --accent:#0ea5e9;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
html{color-scheme:light}
html.dark{color-scheme:dark}
html.dark{
  --brand-white:#0A1424;
  --brand-muted:#0f223d;
  --text:#e5e7eb;
  --text-muted:#94a3b8;
  --accent:#60a5fa;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Vazir', sans-serif;
  color:var(--text);
  background:var(--brand-white);
  line-height:1.75;
}
.container{max-width:1200px; margin-inline:auto; padding:0 16px}
.section{padding:56px 0}
.section--alt{background:var(--brand-muted)}
.section__title{margin:0 0 10px; font-size:24px; font-weight:900; color:var(--brand-blue)}
.section__lead{margin:0 0 18px; color:var(--text-muted)}

.btn{
  appearance:none; border:0; cursor:pointer;
  padding:10px 14px; border-radius:999px;
  font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand-blue); color:#fff; box-shadow:var(--shadow)}
.btn--primary:hover{filter:brightness(1.05)}
.btn--secondary{background:#eaf2fb; color:var(--brand-blue)}
.btn--secondary:hover{filter:brightness(1.02)}
.btn--ghost{background:transparent; color:var(--brand-blue); border:2px solid #e3ecfa}

/* ===== Header ===== */
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eef2f7}
html.dark .header{background:rgba(10,20,36,.7); border-color:rgba(255,255,255,.08)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--brand-blue); font-weight:900}
.brand__logo{height:36px}
.nav{display:none}
.nav__link{color:var(--text); text-decoration:none; font-weight:700}
.nav__link:hover{color:var(--brand-blue)}
.header__actions{display:flex; align-items:center; gap:8px}

/* ===== Hero ===== */
.hero{position:relative; min-height:64vh; display:grid; place-items:center; color:#fff; overflow:hidden}
.hero__bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6)}
.hero__content{position:relative; text-align:center; padding:28px 0}
.eyebrow{font-weight:900; letter-spacing:.4px; opacity:.95}
.hero__title{font-size:28px; margin:10px 0 8px; font-weight:900}
.hero__subtitle{font-size:16px; max-width:760px; margin:0 auto 16px; opacity:.95}
.hero__cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ===== Grids & Cards ===== */
.grid{display:grid; gap:14px}
.grid--services{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid--process{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); counter-reset:step}
.grid--why{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.card, .process, .why, .service{
  background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)
}
html.dark .card, html.dark .process, html.dark .why, html.dark .service{background:#0e1b30}
.card__title{margin:0 0 6px; font-size:18px; color:var(--brand-blue)}
.card__text{margin:0; color:var(--text-muted)}

.service{display:flex; gap:10px; align-items:flex-start}
.service .icon{width:28px; height:28px; flex:0 0 28px; fill:var(--brand-blue)}
.service__title{margin:0 0 6px; font-weight:900}
.service__desc{margin:0; color:var(--text-muted)}

.process{position:relative; padding:18px}
.process:before{
  counter-increment:step;
  content: counter(step);
  position:absolute; top:-12px; inset-inline-start:-12px;
  width:32px; height:32px; display:grid; place-items:center;
  background:var(--brand-blue); color:#fff; border-radius:50%; font-weight:900; box-shadow:var(--shadow)
}
.process__title{margin:0 0 6px; color:var(--brand-blue); font-weight:900}
.process__desc{margin:0; color:var(--text-muted)}

/* ===== Contact & Form ===== */
.contact__cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:18px}
.contact__list{list-style:none; padding:0; margin:0}
.contact__list li{display:flex; align-items:center; gap:10px; margin:6px 0}
.icon{width:20px; height:20px; fill:var(--brand-blue)}

.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:8px}
.form__row{display:flex; flex-direction:column; gap:6px}
.form__row--full{grid-column:1/-1}
.form__label{font-weight:800}
.form__input{border:1.5px solid #e2e8f0; border-radius:12px; padding:10px 12px; outline:none; background:#fff}
.form__input:focus{border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(0,54,110,.08)}

/* ===== Footer & Toast ===== */
.footer{background:#0a1a30; color:#cbd5e1; padding:24px 0}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer__brand img{height:28px}
.footer__copy{margin:0; font-size:13px}
.toast{
  position:fixed; bottom:20px; inset-inline:20px;
  background:#05213f; color:#fff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transform:translateY(10px); transition:all .25s ease;
}
.toast.show{opacity:1; transform:translateY(0); pointer-events:auto}

/* ===== Preloader ===== */
.preload{position:fixed; inset:0; display:grid; place-items:center; background:var(--brand-white); z-index:9999; transition:opacity .35s ease, visibility .35s ease}
.preload.hide{opacity:0; visibility:hidden}
.preload__inner{display:grid; place-items:center; gap:12px}
.preload__logo{height:48px; opacity:.95}
.preload__spinner{width:34px; height:34px; border-radius:999px; border:3px solid rgba(0,0,0,.08); border-top-color: var(--brand-blue); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Responsive: show nav on >=820px ===== */
@media (min-width: 820px){
  .nav{display:flex; align-items:center; gap:14px}
  .hero{min-height:72vh}
  .hero__title{font-size:36px}
  .section{padding:80px 0}
}

input, textarea, button, select, label { font-family: 'Vazir', sans-serif; }


/* Input theming */
:root{ --input-bg:#ffffff; --input-border:#e2e8f0; --placeholder: #9aa4b2; }
html.dark{ --input-bg:#0e1b30; --input-border:#334155; --placeholder:#7c8aa1; }
.form__input{
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
.form__input::placeholder{ color: var(--placeholder); opacity:.9; }
html.dark .form__input{ color: var(--text); background: var(--input-bg); }
html.dark .form__input:focus{ box-shadow:0 0 0 4px rgba(96,165,250,.18); }

/* Mobile CTA fixed bar */
@media (min-width: 600px){ }

/* Gallery – horizontal scroll with snap on mobile */
.gallery{
  display: grid; grid-auto-flow: column; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
}
.gallery__item{ min-width: 78%; scroll-snap-align: start; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background:#000 }
.gallery__item img{ width: 100%; height: 200px; object-fit: cover; display:block; opacity:.9 }
@media (min-width: 720px){
  .gallery{ grid-template-columns: repeat(4, 1fr); grid-auto-flow: initial; overflow: visible }
  .gallery__item{ min-width: auto }
  .gallery__item img{ height: 220px }
}

/* Service variety: alternate cards */
.service:nth-child(odd){ background: linear-gradient(0deg, rgba(0,54,110,.05), rgba(255,255,255,1) 60%) }
html.dark .service:nth-child(odd){ background: linear-gradient(0deg, rgba(96,165,250,.08), rgba(14,27,48,1) 60%) }


/* ===== Animations ===== */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .15s ease, box-shadow .25s ease, background .2s ease, color .2s ease}
  .btn:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.12)}
  .service, .process, .why, .card{transition:transform .2s ease, box-shadow .25s ease}
  .service:hover, .process:hover, .why:hover, .card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.14)}
  a.nav__link{position:relative}
  a.nav__link:after{content:""; position:absolute; inset-inline:0; bottom:-6px; height:2px; background:linear-gradient(90deg, var(--brand-blue), transparent); transform:scaleX(0); transform-origin:inset-inline-start; transition:transform .25s ease}
  a.nav__link:hover:after{transform:scaleX(1)}
}

/* Hero overlay for readability */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.25) 100%);
}
.hero__title{letter-spacing:.2px}
.hero__subtitle{opacity:.96}

/* Placeholder visibility in dark */
.form__input::placeholder{ color: var(--placeholder); opacity:.95 }
html.dark .form__input{ background: var(--input-bg); color: var(--text) }
html.dark .form__input::placeholder{ color: var(--placeholder) }

/* Section title accent */
.section__title{position:relative; display:inline-block; padding-inline-end:10px}
.section__title:after{content:""; position:absolute; inset-inline-end:-4px; bottom:-6px; width:36px; height:3px; background:linear-gradient(90deg, var(--brand-blue), transparent); border-radius:999px}

/* Buttons micro shine */
.btn--primary{ position:relative; overflow:hidden }
.btn--primary:before{
  content:""; position:absolute; top:0; inset-inline-start:-60%; width:40%; height:100%;
  background:linear-gradient(75deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg); transition:transform .6s ease;
}
.btn--primary:hover:before{ transform:translateX(260%) skewX(-20deg) }


/* Footer socials */
.footer__social{list-style:none; display:flex; gap:12px; padding:0; margin:0; flex-wrap:wrap}
.footer__social a{color:#cbd5e1; text-decoration:none; font-weight:800}
.footer__social a:hover{color:#fff}

/* Stats section (neutral) */
.section--alt{background:var(--brand-muted)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; text-align:center}
.stat{padding:18px; border-radius:16px; background:#fff; box-shadow:var(--shadow)}
html.dark .stat{background:#0e1b30}
.stat__icon{font-size:28px; margin-bottom:8px}
.stat__num{font-size:28px; font-weight:900; color:var(--brand-blue)}
.stat__label{opacity:.95; color:var(--text-muted)}

/* Textarea not resizable */
textarea{resize:none}


/* Preloader auto-hide fallback (in case JS fails or load blocks) */
.preload.auto-hide{animation:preAutoHide 1s ease 1.4s forwards}
@keyframes preAutoHide{to{opacity:0; visibility:hidden}}


/* ===== v4-style cards & interactions (restored) ===== */
.service, .process, .why{
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.service:hover, .process:hover, .why:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.14);
}
/* alternating subtle gradient for services (odd) */
.service:nth-child(odd){
  background:linear-gradient(180deg, rgba(0,54,110,.04) 0%, rgba(255,255,255,1) 60%);
}
html.dark .service:nth-child(odd){
  background:linear-gradient(180deg, rgba(96,165,250,.08) 0%, rgba(14,27,48,1) 60%);
}
/* Process step badge (like v4) already exists via :before, tweak for pop */
.process:before{ box-shadow:0 6px 16px rgba(0,54,110,.25) }
/* reveal per-item */
.reveal-item{opacity:0; transform:translateY(14px)}
.reveal-item.is-visible{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}

/* Footer SVG icons */
.icon-social{width:22px; height:22px; display:block}
.footer__social li{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.08)}
.footer__social a{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#cbd5e1; text-decoration:none}
.footer__social a:hover{color:#fff; background:rgba(255,255,255,.14)}

.footer__copy a{color:#fff !important;text-decoration:underline;text-underline-offset:3px}

.contact__list .icon{width:18px;height:18px;color:var(--brand-blue)}
.contact__list li{display:flex;align-items:center;gap:8px}

/* Highlights Slider */
.slider{--gap:14px; --per-view:1; position:relative; user-select:none}
.slider__viewport{overflow:hidden}
.slider__track{display:flex; gap:var(--gap); transition:transform .45s ease}
.slide{flex:0 0 calc((100% - (var(--gap)*(var(--per-view) - 1))) / var(--per-view)); background:var(--card); border-radius:18px; box-shadow:var(--shadow); overflow:hidden}

.slider__btn{position:absolute; top:50%; transform:translateY(-50%); border:0; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.92); color:#0b1a30; box-shadow:var(--shadow); cursor:pointer; display:grid; place-items:center; font-size:22px}
html.dark .slider__btn{background:#16223b; color:#e2e8f0}
.slider__btn.prev{inset-inline-start: -6px}
.slider__btn.next{inset-inline-end: -6px}
@media(min-width:560px){ .slider{--per-view:2} }
@media(min-width:980px){ .slider{--per-view:4}  }
.slider__dots{display:flex; gap:6px; justify-content:center; margin-top:12px}
.slider__dots button{width:8px; height:8px; border-radius:999px; border:0; background:#cbd5e1; opacity:.6; cursor:pointer}
.slider__dots button[aria-current="true"]{opacity:1; background:var(--brand-blue)}


/* Slider fixes */
.slider{width:100%; position:relative}
.slider__viewport{width:100%; position:relative}
.slider__track{width:max-content; will-change:transform}
.slide{position:relative}

.slider__btn{z-index:5; inset-block-start:50%; transform:translateY(-50%);}
.slider__btn.prev{inset-inline-start:8px}
.slider__btn.next{inset-inline-end:8px}
/* Show more cards on desktop confidently */


/* Mobile CTA show/hide */
@media(min-width:600px){}

/* Slider sizing refinement */
.slide img{display:block;width:100%;height:clamp(160px, 26vw, 240px);object-fit:contain;background:#0b1a30}
@media(max-width:600px){ .slide img{height:clamp(150px, 44vw, 210px)} }

/* Slider per-view breakpoints (mobile->desktop=4 cards) */
@media(min-width:540px){ .slider{--per-view:2} }
@media(min-width:820px){ .slider{--per-view:3} }
@media(min-width:1200px){ .slider{--per-view:4} }

/* ===== Card-based Slider (desktop 4 cards) ===== */
.cardslider{--gap:16px; --per:1; position:relative; width:100%}
.cs-viewport{overflow:hidden; width:100%}
.cs-track{display:flex; gap:var(--gap); will-change:transform; transition:transform .5s ease}
.cs-card{flex:0 0 calc((100% - (var(--gap)*(var(--per) - 1))) / var(--per)); background:var(--card); border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
.cs-card img{display:block; width:100%; height:clamp(170px, 26vw, 220px); object-fit:cover; transform:scale(1); transition:transform .35s ease}
.cs-card:hover img{transform:scale(1.05)}
.cs-btn{position:absolute; top:50%; transform:translateY(-50%); border:0; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.96); color:#0b1a30; box-shadow:var(--shadow); cursor:pointer; display:grid; place-items:center; font-size:22px; z-index:5}
html.dark .cs-btn{background:#16223b; color:#e2e8f0}
.cs-btn.prev{inset-inline-start:-8px}
.cs-btn.next{inset-inline-end:-8px}
.cs-dots{display:flex; justify-content:center; gap:6px; margin-top:12px}
.cs-dots button{width:8px; height:8px; border:0; border-radius:999px; background:#cbd5e1; opacity:.6; cursor:pointer}
.cs-dots button[aria-current="true"]{opacity:1; background:var(--brand-blue)}
@media(min-width:560px){ .cardslider{--per:2} .cs-card img{height:clamp(180px, 26vw, 240px)} }
@media(min-width:900px){ .cardslider{--per:3} }
@media(min-width:1200px){ .cardslider{--per:4} }



/* Cleared Goods (carousel) */
.services__goods{padding-block:32px}
.services__goods .goods__header{margin-block-end:12px;text-align:center}
.services__goods .goods__subtitle{opacity:.8;font-size:.95rem;margin:0}

.goods__carousel-wrap{position:relative}
.goods__carousel{
  display:grid; grid-auto-flow:column; grid-auto-columns:80%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-inline:8px; padding-block:8px;
}
@media(min-width:680px){ .goods__carousel{ grid-auto-columns:45%; } }
@media(min-width:992px){ .goods__carousel{ grid-auto-columns:22%; } }

.goods__card{
  background:var(--card-bg, #fff); color:var(--card-fg, inherit);
  border:1px solid var(--card-border, rgba(2,6,23,.08));
  border-radius:16px; padding:14px; box-shadow:0 6px 18px rgba(2,6,23,.06);
  scroll-snap-align:center; transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s;
  min-height:92px; display:flex; align-items:center; justify-content:center; text-align:center;
}
@media (prefers-color-scheme: dark){
  .goods__card{ background:var(--card-bg-dark, #0b1220); border-color:rgba(148,163,184,.18); box-shadow:0 6px 18px rgba(0,0,0,.35); }
}
.goods__card:hover,.goods__card:focus-within{ transform:scale(1.03); box-shadow:0 8px 24px rgba(2,6,23,.12) }
.goods__card-title{ font-weight:600; line-height:1.6; }

.goods__nav{
  position:absolute; inset-block:0; margin:auto 0; inline-size:40px; block-size:40px;
  border-radius:999px; border:1px solid rgba(2,6,23,.15); background:var(--card-bg,#fff);
  box-shadow:0 6px 18px rgba(2,6,23,.12); cursor:pointer; font-size:20px; display:grid; place-items:center; opacity:.9;
}
.goods__nav--prev{ inset-inline-start:-6px; }
.goods__nav--next{ inset-inline-end:-6px; }
@media (hover:hover){ .goods__nav:hover{ transform: translateY(-50%); box-shadow:0 10px 26px rgba(2,6,23,.2); opacity:1 }
.goods__dot{ inline-size:6px; block-size:6px; border-radius:999px; background:rgba(2,6,23,.25) }
.goods__dot.is-active{ background:var(--brand, #00366E) }


/* Adjustments v3 */
.services__goods .goods__title{color:#00366E;font-weight:700}
.goods__carousel{scrollbar-width:none;-ms-overflow-style:none}
.goods__carousel::-webkit-scrollbar{display:none}
.goods__nav--prev{inset-inline-start:-48px}
.goods__nav--next{inset-inline-end:-48px}
.goods__dots{margin-top:12px}


/* --- Cleared Goods: tweaks per feedback --- */
.services__goods .goods__header .goods__title{ color: var(--brand, #00366E); }

.goods__carousel{
  overflow-x:auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.goods__carousel::-webkit-scrollbar{ display:none; }

.goods__nav{
  top:50%; inset-block:auto; transform: translateY(-50%);
  z-index:2; opacity:.96;
}
.goods__nav--prev{ inset-inline-start:-18px; }
.goods__nav--next{ inset-inline-end:-18px; }

/* Add small side padding so arrows don't overlap cards */
.services__goods .goods__carousel-wrap{ padding-inline:14px; }

/* Fine-tune card spacing and hover */
.goods__card{ will-change: transform; }


/* v4 layout fixes */
.goods__carousel{ position: relative; padding-inline: 28px; direction:ltr; }
.goods__card-title{ direction: rtl; } /* Persian text remains RTL inside cards */

.goods__nav{
  position:absolute; top:50%; transform: translateY(-50%);
  inline-size:40px; block-size:40px; border-radius:999px;
  display:grid; place-items:center;
  z-index:3;
 z-index:5; pointer-events:auto; }
.goods__nav--prev{ left:6px; right:auto; }
.goods__nav--next{ right:6px; left:auto; }

/* v5 nav cleanup */
.goods__nav{ transition:transform .2s ease; }
.goods__nav:hover{ transform: translateY(-50%); box-shadow:0 10px 26px rgba(2,6,23,.2); opacity:1 }

.goods__nav:hover{ transform: translateY(-50%); box-shadow:0 10px 26px rgba(2,6,23,.2); opacity:1 }
.goods__nav{ padding:6px; box-sizing:content-box; }


/* ===== Cleared Goods (clean v6) ===== */
.services__goods{padding-block:32px}
.services__goods .goods__header{text-align:center;margin-block-end:12px}
.services__goods .goods__title{color:var(--brand,#00366E)}

.goods__carousel-wrap{position:relative; padding-inline:42px;}
.goods__carousel{
  position:relative;
  display:grid; grid-auto-flow:column; grid-auto-columns:80%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-block:8px; scrollbar-width:none; -ms-overflow-style:none; direction:ltr;
}
.goods__carousel::-webkit-scrollbar{display:none}

@media(min-width:680px){ .goods__carousel{ grid-auto-columns:45%; } }
@media(min-width:992px){ .goods__carousel{ grid-auto-columns:22%; } }

.goods__card{
  background:var(--card-bg,#fff); color:var(--card-fg,inherit);
  border:1px solid var(--card-border,rgba(2,6,23,.08));
  border-radius:16px; padding:14px; box-shadow:0 6px 18px rgba(2,6,23,.06);
  scroll-snap-align:center; transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
  min-height:92px; display:flex; align-items:center; justify-content:center; text-align:center; will-change:transform;
}
@media (prefers-color-scheme: dark){
  .goods__card{ background:var(--card-bg-dark,#0b1220); border-color:rgba(148,163,184,.18); box-shadow:0 6px 18px rgba(0,0,0,.35) }
}
.goods__card:hover{ transform:scale(1.03); box-shadow:0 8px 24px rgba(2,6,23,.12) }
.goods__card-title{ font-weight:600; line-height:1.6; direction:rtl; }

/* arrows */
.goods__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  inline-size:40px; block-size:40px; border-radius:999px; border:1px solid rgba(2,6,23,.15);
  background:var(--card-bg,#fff); box-shadow:0 8px 22px rgba(2,6,23,.16);
  cursor:pointer; display:grid; place-items:center; opacity:.95; z-index:5; padding:6px; box-sizing:content-box;
}
.goods__nav:hover{ transform: translateY(-50%); box-shadow:0 10px 26px rgba(2,6,23,.2); opacity:1 }
.goods__nav--prev{ left:8px }
.goods__nav--next{ right:8px }
@media(max-width:679px){ .goods__nav{ display:none } } /* hide on phones */

/* dots */
.goods__dots{ display:flex; gap:6px; justify-content:center; margin-top:8px }
.goods__dot{ inline-size:6px; block-size:6px; border-radius:999px; background:rgba(2,6,23,.25) }
.goods__dot.is-active{ background:var(--brand,#00366E) }

.goods__carousel.is-flinging .goods__card{ transition: transform .12s; transform: translateZ(0); }



/* === Fix 1: remove page-level horizontal scroll without changing layout === */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* === Fix 2: make header CTA button responsive on small screens === */
@media (max-width: 480px){
  .header .btn--primary{
    padding: 6px 12px;
    font-size: 0.875rem; /* ~14px */
  }
}



/* === Fix 3: keep header always visible (desktop & mobile) === */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Prevent content jump under fixed header */
body{ padding-top: 64px; }



/* === Fix 4: hide goods carousel arrow buttons on mobile, keep swipe only === */
@media (max-width: 600px){
  .goods__nav{ display: none !important; }
}