/* ==========================================================================
   NESA ERBEK — PREMIUM CORPORATE SITE
   Design tokens, base, components, sections, animations, responsive rules
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --bg:#F7F6F2;
  --ink:#1E1E1E;
  --olive:#5F6F52;
  --olive-dark:#4a5740;
  --gold:#B08D57;
  --gold-light:#C9A876;
  --white:#FFFFFF;

  --ink-soft: rgba(30,30,30,.62);
  --ink-faint: rgba(30,30,30,.38);
  --hairline: rgba(30,30,30,.10);
  --hairline-gold: rgba(176,141,87,.35);

  --font-display:'Cormorant Garamond', serif;
  --font-body:'Poppins', sans-serif;

  --container: 1240px;
  --gutter: clamp(24px, 5vw, 64px);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --shadow-soft: 0 20px 60px -30px rgba(30,30,30,.25);
  --shadow-lift: 0 30px 80px -25px rgba(30,30,30,.35);
  --shadow-gold: 0 10px 30px -10px rgba(176,141,87,.45);

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .35s;
  --dur-med: .7s;
  --dur-slow: 1.1s;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font-family:inherit; font-size:1rem; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; letter-spacing:.01em; }

.section{ padding:min(14vw,140px) 0; position:relative; }
.section-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  margin-bottom:14px;
}
.section-title{
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.12;
  color:var(--ink);
  margin-bottom:18px;
}
.section-lede{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:560px;
  font-weight:300;
}
.section-head{ margin-bottom:min(6vw,64px); max-width:640px; }
.section-head.light .eyebrow{ color:var(--gold-light); }
.section-head.light .section-title,
.section-head.light .section-lede{ color:var(--white); }
.section-head.light .section-lede{ color:rgba(255,255,255,.72); }

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 34px;
  border-radius:999px;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:var(--white);
  box-shadow:var(--shadow-gold);
}
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -12px rgba(176,141,87,.55); }
.btn-outline-gold{
  background:transparent;
  color:var(--gold);
  border:1px solid var(--hairline-gold);
}
.btn-outline-gold:hover{ background:rgba(176,141,87,.08); transform:translateY(-3px); }
.btn-whatsapp{
  background:#3f5c3d;
  color:var(--white);
}
.btn-whatsapp:hover{ transform:translateY(-3px); background:#354e33; }

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast);
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{ transform:scale(1.06); box-shadow:0 12px 32px rgba(0,0,0,.28); color:#fff; }

.ripple{ isolation:isolate; }
.ripple .ripple-circle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:ripple-anim .6s var(--ease-soft);
  pointer-events:none;
}
@keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- 4. PRELOADER ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:#0d0d0c;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  animation:preloader-pulse 1.8s ease-in-out infinite;
}
.preloader-mark.leaving{ animation:none; }
.preloader-logo{ width:100%; height:100%; object-fit:contain; }
.preloader-fallback{ display:none; width:100%; height:100%; align-items:center; justify-content:center; }
@keyframes preloader-pulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.08); opacity:1; }
}
.preloader-name{
  font-family:var(--font-display);
  color:var(--white);
  letter-spacing:.4em;
  font-size:.8rem;
  opacity:.75;
}

/* ---------- 5. NAVIGATION ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background var(--dur-fast) var(--ease-soft), padding var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.site-nav.scrolled{
  padding:12px 0;
  background:#9b967e;
  border-bottom-color:var(--hairline);
  box-shadow:0 8px 30px -20px rgba(30,30,30,.3);
}
.home-page .site-nav:not(.scrolled) .nav-links a{ color:var(--white); }
.home-page .site-nav:not(.scrolled) .nav-logo-fallback{ color:var(--white); }
.home-page .site-nav:not(.scrolled) .nav-toggle span{ background:var(--white); }
.home-page .site-nav:not(.scrolled) .nav-icon-link{ color:var(--white); }
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{ display:flex; align-items:center; gap:10px; height:34px; }
.nav-logo img{ height:60px; width:auto; object-fit:contain; }
.nav-logo-fallback{
  display:none; align-items:center; gap:8px;
  color:var(--olive);
  transition:color var(--dur-fast);
}
.nav-logo-fallback em{ font-family:var(--font-display); font-style:normal; font-size:1.15rem; letter-spacing:.02em; }

.nav-links{ display:flex; gap:clamp(18px,2.4vw,34px); }
.nav-links a{
  font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); font-weight:400; position:relative; padding:6px 0;
  transition:color var(--dur-fast);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width var(--dur-fast) var(--ease-soft);
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--gold); }

.nav-icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; gap:0;
  text-transform:none; letter-spacing:0;
}
.nav-icon-svg{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-link-label{ display:none; }
.nav-icon-link::after{ display:none; }
.nav-icon-link:hover{ color:var(--gold); }
.nav-cart{ position:relative; }
.cart-badge{
  position:absolute; top:0; right:0;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--gold); color:var(--white);
  font-size:.65rem; font-weight:600; line-height:16px;
  text-align:center; border-radius:999px;
  transform:translate(25%,-25%);
}
.cart-badge.is-empty{ display:none; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:26px;
}
.nav-toggle span{
  height:1px; width:100%; background:var(--ink);
  transition:background var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#111;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,.55) 0%, rgba(10,10,8,.35) 40%, rgba(10,10,8,.7) 100%);
}
.hero-content{
  position:relative; z-index:2; text-align:center; color:var(--white);
  padding:0 24px; max-width:760px;
}
.hero-logo{ width:64px; height:64px; margin:0 auto 28px; opacity:.95; }
.hero-logo img{ width:100%; }
.hero-eyebrow{
  font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:18px; font-weight:400;
}
.hero-title{
  font-size:clamp(2.4rem, 6vw, 5rem); line-height:1.08; color:var(--white);
  font-weight:500; margin-bottom:20px;
}
.hero-sub{
  font-family:var(--font-display); font-style:italic; font-size:1.35rem;
  color:rgba(255,255,255,.85); margin-bottom:38px; letter-spacing:.03em;
}

.scroll-indicator{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
  color:rgba(255,255,255,.7);
}
.scroll-line{ width:1px; height:40px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.scroll-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--gold-light);
  animation:scroll-drip 2s ease-in-out infinite;
}
@keyframes scroll-drip{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
.scroll-text{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }

/* Hero content visible by default; JS enhances animation */
.hero-content [data-animate]{ opacity:1; transform:translateY(0); }
.hero-content.hero-animate-pending [data-animate]{ opacity:0; }
.hero-content.hero-animate-pending [data-animate="fade-up"]{ transform:translateY(36px); }
.hero-content.hero-animate-pending [data-animate].in-view{ opacity:1; transform:translateY(0); }

/* ---------- 7. ANIMATION UTILITY CLASSES ---------- */
[data-animate]{ opacity:0; transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
[data-animate="fade-up"]{ transform:translateY(36px); }
[data-animate="fade-left"]{ transform:translateX(-36px); }
[data-animate="fade-right"]{ transform:translateX(36px); }
[data-animate="zoom"]{ transform:scale(.92); }
[data-animate].in-view{ opacity:1; transform:translate(0,0) scale(1); }
[data-animate][data-delay="1"]{ transition-delay:.1s; }
[data-animate][data-delay="2"]{ transition-delay:.22s; }
[data-animate][data-delay="3"]{ transition-delay:.34s; }
[data-animate][data-delay="4"]{ transition-delay:.46s; }

/* Hero content is animated immediately after preload, not via IO */
.hero-content.hero-animate-pending [data-animate]{ transition-delay: var(--hero-delay, 0s); }

/* ---------- 8. ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about-image-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-soft); aspect-ratio:4/5;
  background:linear-gradient(155deg, #eae7de, #dedad0);
  display:flex; align-items:flex-end;
}
.about-image-frame > img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-image-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, rgba(176,141,87,.14), transparent 55%),
             radial-gradient(circle at 75% 80%, rgba(95,111,82,.16), transparent 55%);
}
.about-image-caption{
  position:relative; z-index:1; width:100%; padding:22px 26px;
  font-size:.78rem; letter-spacing:.04em; color:var(--white);
  background:linear-gradient(0deg, rgba(20,20,16,.55), transparent);
}
.about-text{ color:var(--ink-soft); margin-bottom:16px; font-weight:300; font-size:1rem; }
.counters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;
  padding-top:34px; border-top:1px solid var(--hairline);
}
.counter-item{ display:flex; flex-direction:column; gap:6px; }
.counter-number{
  font-family:var(--font-display); font-size:clamp(1.8rem,2.6vw,2.4rem);
  color:var(--olive); font-weight:600; line-height:1;
}
.counter-label{ font-size:.72rem; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; }

/* ---------- 9. PRODUCTS ---------- */
.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;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:22px;
}
@media(min-width:900px){
  .product-grid{ grid-template-columns:repeat(3, 1fr); gap:24px; }
}
@media(min-width:1200px){
  .product-grid{ grid-template-columns:repeat(4, 1fr); }
}
.product-card{
  display:flex; flex-direction:column;
  background:var(--white); border-radius:var(--radius-md);
  overflow:hidden; border:1px solid var(--hairline);
  box-shadow:0 6px 24px -12px rgba(30,30,30,.14);
  transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.product-card-media{
  display:block; position:relative; aspect-ratio:1;
  overflow:hidden; background:linear-gradient(155deg,#eceae4,#e0ddd4);
}
.product-card-media img,
.product-card-media .masonry-fill{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-soft);
}
.product-card-media .masonry-fill{ display:flex; align-items:center; justify-content:center; }
.product-card:hover .product-card-media img,
.product-card:hover .product-card-media .masonry-fill{ transform:scale(1.05); }
.product-card-body{
  display:flex; flex-direction:column; gap:8px;
  padding:14px 16px 16px; flex:1;
}
.product-card-meta{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); line-height:1.3;
}
.product-card-title{
  font-family:var(--font-body); font-size:1rem; font-weight:500;
  line-height:1.35; margin:0;
}
.product-card-title a:hover{ color:var(--gold); }
.product-card-price{
  font-size:1.12rem; font-weight:600; color:var(--olive);
  font-family:var(--font-display); margin:0;
}
.product-card-package{
  width:100%; padding:8px 10px; border:1px solid var(--hairline);
  border-radius:var(--radius-sm); font-size:.78rem; background:var(--bg);
  color:var(--ink);
}
.product-card-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px;
}
.product-card-actions .btn-sm{ flex:1; justify-content:center; min-width:0; }
.product-card-actions .product-add-cart{ flex:1.5; }
.product-card-actions .btn-ghost{ flex:0 0 40px; padding:8px; }
.product-out-of-stock{ font-size:.75rem; color:#9b2226; font-weight:500; align-self:center; }
.btn-sm{ padding:10px 14px; font-size:.7rem; letter-spacing:.06em; }
.btn-ghost{
  background:transparent; border:1px solid var(--hairline);
  color:var(--ink-soft); border-radius:999px;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.nesa-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  z-index:3000; padding:12px 22px; border-radius:999px;
  background:var(--olive); color:var(--white); font-size:.88rem;
  box-shadow:var(--shadow-lift); opacity:0; pointer-events:none;
  transition:transform .35s var(--ease-soft), opacity .35s var(--ease-soft);
}
.nesa-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.nesa-toast.err{ background:#9b2226; }
body.has-cart-bar .nesa-toast.show{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }

/* Homepage category rows */
.homepage-categories{
  display:flex; flex-direction:column; gap:clamp(32px, 5vw, 48px);
}
.category-row{ display:flex; flex-direction:column; gap:16px; }
.category-row-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.category-row-title{
  font-family:var(--font-display); font-size:clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight:600; color:var(--ink); margin:0; line-height:1.2;
}
.category-row-desc{
  margin:6px 0 0; font-size:.88rem; color:var(--ink-soft); max-width:52ch;
}
.category-row-link{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; flex:none;
}
.category-row-link:hover{ color:var(--olive); }
.category-scroll-wrap{
  position:relative;
  margin:0 calc(-1 * var(--gutter));
  padding:0 var(--gutter);
}
.category-scroll-wrap::before,
.category-scroll-wrap::after{
  content:""; position:absolute; top:0; bottom:8px; width:28px; z-index:2;
  pointer-events:none; opacity:.9;
}
.category-scroll-wrap::before{
  left:0;
  background:linear-gradient(90deg, var(--bg) 15%, transparent);
}
.category-scroll-wrap::after{
  right:0;
  background:linear-gradient(270deg, var(--bg) 15%, transparent);
}
.category-scroll-track{
  display:flex; gap:14px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gutter);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:4px 0 12px;
  cursor:grab;
  touch-action:pan-x;
}
.category-scroll-track.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}
.category-scroll-track::-webkit-scrollbar{ display:none; }
.category-scroll-track .product-card-scroll{
  flex:0 0 calc(50% - 7px);
  scroll-snap-align:start;
  min-width:0;
}
.category-scroll-track .product-card-scroll:hover{ transform:none; }
@media(min-width:640px){
  .category-scroll-track .product-card-scroll{
    flex-basis:calc(38% - 9px);
  }
}
@media(min-width:900px){
  .category-scroll-track .product-card-scroll{
    flex-basis:calc(28% - 11px);
  }
}
@media(min-width:1200px){
  .category-scroll-track .product-card-scroll{
    flex-basis:calc(22% - 11px);
  }
}

/* Sticky cart bar */
.cart-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  transform:translateY(110%);
  transition:transform .35s var(--ease-soft);
  padding:0 var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}
.cart-sticky-bar.is-visible{
  transform:translateY(0);
  pointer-events:auto;
}
.cart-sticky-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:0 -8px 40px -12px rgba(30,30,30,.22);
  backdrop-filter:blur(10px);
}
.cart-sticky-info{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.cart-sticky-label{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.cart-sticky-total{
  font-family:var(--font-display); font-size:1.2rem; font-weight:600;
  color:var(--olive); line-height:1.2;
}
.cart-sticky-count{
  font-size:.78rem; color:var(--ink-soft);
}
.cart-sticky-btn{
  flex:none; min-width:132px; justify-content:center;
  padding:14px 22px;
}
body.has-cart-bar{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
body.has-cart-bar .wa-float{
  bottom:calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 10. MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(15,15,12,.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity var(--dur-fast) var(--ease-soft), visibility var(--dur-fast);
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  max-width:920px; width:100%; max-height:88vh; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:var(--shadow-lift);
  transform:translateY(24px) scale(.98); transition:transform var(--dur-med) var(--ease);
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:18px; right:22px; z-index:3;
  font-size:1.8rem; line-height:1; color:var(--white);
  width:38px; height:38px; border-radius:50%;
  background:rgba(20,20,16,.35); display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast);
}
.modal-close:hover{ background:rgba(20,20,16,.6); }
.modal-media{ position:relative; min-height:280px; background:linear-gradient(155deg,#e7e4da,#d9d5c9); }
.modal-image{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.modal-body{ padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; }
.modal-body h3{ font-size:2rem; margin-bottom:14px; }
.modal-body p#modal-description{ color:var(--ink-soft); font-size:.96rem; margin-bottom:22px; }
.modal-packages-label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.modal-package-select{ width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,.12); border-radius:8px; font-size:.95rem; margin-bottom:16px; background:#fff; }
.modal-price{ font-size:1.35rem; font-weight:600; color:var(--gold); margin:0 0 20px; }
.modal-image-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.modal-thumb{ padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer; background:none; width:56px; height:56px; }
.modal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal-thumb.active,.modal-thumb:hover{ border-color:var(--gold); }
.modal-packages-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.pkg-chip{
  padding:8px 16px; border:1px solid var(--hairline-gold); border-radius:999px;
  font-size:.78rem; color:var(--olive-dark);
}
.modal-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }

/* ---------- 11. PROCESS / TIMELINE ---------- */
.timeline{ position:relative; max-width:840px; margin:0 auto; }
.timeline::before{
  content:''; position:absolute; left:29px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, var(--hairline-gold), var(--hairline));
}
.timeline-item{ position:relative; padding:0 0 56px 84px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-icon{
  position:absolute; left:0; top:0; width:58px; height:58px; border-radius:50%;
  background:var(--white); border:1px solid var(--hairline-gold);
  display:flex; align-items:center; justify-content:center; color:var(--olive);
  box-shadow:var(--shadow-soft);
}
.timeline-step{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.timeline-item h3{ font-size:1.5rem; margin-bottom:8px; }
.timeline-item p{ color:var(--ink-soft); font-size:.95rem; max-width:480px; }

/* ---------- 12. CERTIFICATES ---------- */
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.cert-card{
  padding:36px 28px; text-align:center; border-radius:var(--radius-md);
  background:var(--white); border:1px solid var(--hairline);
  transition:transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), border-color var(--dur-fast);
}
.cert-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--hairline-gold); }
.cert-icon{ width:52px; height:52px; margin:0 auto 20px; color:var(--gold); }
.cert-card h4{ font-size:1.15rem; margin-bottom:8px; font-family:var(--font-body); font-weight:500; }
.cert-card p{ font-size:.82rem; color:var(--ink-faint); }

/* ---------- 13. EXPORT ---------- */
.export{ background:var(--ink); color:var(--white); }
.export-wrap{ display:grid; grid-template-columns:1.4fr 1fr; gap:50px; align-items:center; }
.world-map{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(155deg,#232320,#181816); border:1px solid rgba(255,255,255,.08); }
.world-map svg{ width:100%; height:100%; }
.export-dot{ fill:var(--gold-light); }
.export-dot circle:first-child{ animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot{
  0%{ r:3; opacity:.9; } 70%{ r:11; opacity:0; } 100%{ r:11; opacity:0; }
}
.export-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 20px; }
.export-list li{
  font-size:.9rem; color:rgba(255,255,255,.78); padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:10px;
}
.export-list li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold-light); flex:none; }

/* ---------- 14. GALLERY / MASONRY ---------- */
.masonry{ columns:4 260px; column-gap:20px; }
.masonry-item{
  break-inside:avoid; margin-bottom:20px; border-radius:var(--radius-md); overflow:hidden;
  position:relative; cursor:pointer; box-shadow:var(--shadow-soft);
}
.masonry-item img,.masonry-fill{ width:100%; display:block; transition:transform .7s var(--ease-soft); }
.masonry-fill{ aspect-ratio:var(--ar,1); background:linear-gradient(155deg,#e7e4da,#d9d5c9); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.nesa-img-fallback,.product-thumb-fallback,.modal-thumb-fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,#e7e4da,#d9d5c9); color:var(--gold); }
.product-thumb-fallback,.modal-thumb-fallback{ width:100%; height:100%; }
.masonry-item:hover img,.masonry-item:hover .masonry-fill{ transform:scale(1.06); }
.masonry-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,20,16,.35), transparent 45%); opacity:0; transition:opacity var(--dur-fast); }
.masonry-item:hover::after{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:2100; background:rgba(10,10,8,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity var(--dur-fast), visibility var(--dur-fast);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-media{ max-width:80vw; max-height:80vh; }
.lightbox-media .masonry-fill{ width:60vw; max-width:640px; }
.lightbox-close{ position:absolute; top:26px; right:32px; color:var(--white); font-size:2.2rem; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); color:var(--white); font-size:1.4rem; padding:16px; opacity:.7; transition:opacity var(--dur-fast); }
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left:14px; } .lightbox-next{ right:14px; }

/* ---------- 15. CATALOG ---------- */
.catalog{ background:linear-gradient(155deg, #eee9df, #e2ddd0); }
.catalog-inner{ text-align:center; max-width:640px; margin:0 auto; }
.catalog-inner .section-lede{ margin:0 auto 34px; }

/* ---------- 16. CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
.contact-list{ margin:28px 0 32px; display:flex; flex-direction:column; gap:16px; }
.contact-list li{ display:flex; align-items:center; gap:14px; font-size:.95rem; color:var(--ink-soft); }
.contact-list li .ci-icon{
  width:40px; height:40px; border-radius:50%; background:var(--white); border:1px solid var(--hairline-gold);
  display:flex; align-items:center; justify-content:center; color:var(--olive); flex:none;
}
.map-placeholder{
  border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/9;
  background:linear-gradient(155deg,#e7e4da,#d9d5c9); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline);
}
.map-placeholder-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-faint); text-align:center; padding:20px; }
.map-placeholder-inner span{ font-size:.78rem; max-width:220px; }

.contact-form{
  background:var(--white); border-radius:var(--radius-lg); padding:clamp(28px,4vw,44px);
  box-shadow:var(--shadow-soft);
}
.contact-form h3{ font-size:1.6rem; margin-bottom:26px; }
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.form-row input,.form-row textarea{
  border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:13px 16px;
  background:var(--bg); transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
  resize:vertical;
}
.form-row input:focus,.form-row textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,87,.14); outline:none; }
.form-note{ margin-top:14px; font-size:.85rem; color:var(--olive); min-height:1.2em; }

/* ---------- 17. FOOTER ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.75); padding-top:70px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-grid-no-aside{ grid-template-columns:1.3fr 1fr; }
.footer-aside{ display:flex; flex-direction:column; gap:18px; }
.footer-logo{ height:34px; margin-bottom:16px; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:.88rem; color:rgba(255,255,255,.55); max-width:280px; }
.footer-address{ margin:0; font-size:.85rem; line-height:1.65; color:rgba(255,255,255,.55); max-width:280px; }
.footer-address strong{ display:block; margin-bottom:6px; color:rgba(255,255,255,.75); font-weight:500; letter-spacing:.04em; }
.footer-address a{ color:rgba(255,255,255,.65); text-decoration:none; transition:color var(--dur-fast); }
.footer-address a:hover{ color:var(--gold-light); }
.footer-nav{ display:flex; flex-direction:column; gap:12px; }
.footer-nav a{ font-size:.88rem; color:rgba(255,255,255,.65); transition:color var(--dur-fast); }
.footer-nav a:hover{ color:var(--gold-light); }
.footer-social{ display:flex; gap:12px; align-items:flex-start; justify-content:flex-start; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.75);
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); transform:translateY(-3px); }
.footer-bottom{ text-align:center; padding:24px; font-size:.78rem; color:rgba(255,255,255,.4); }
.footer-credit{ margin-top:8px; }
.footer-credit a{ color:rgba(255,255,255,.55); }
.footer-credit a:hover{ color:var(--gold); }
.footer-legal{ margin-top:12px; display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:center; }
.footer-legal a{ color:rgba(255,255,255,.55); font-size:.75rem; }
.footer-legal a:hover{ color:var(--gold); }

/* Hero slider */
.hero-slider{ position:absolute; inset:0; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease-soft); pointer-events:none; }
.hero-slide.active{ opacity:1; pointer-events:auto; }
.hero-slide .hero-video,.hero-slide .hero-image{ width:100%; height:100%; object-fit:cover; }
.hero-image-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--olive) 0%, #2a3324 100%); }
.hero-slide-empty{ background:linear-gradient(135deg, var(--olive) 0%, #2a3324 100%); }
.hero-slider-dots{ position:absolute; bottom:100px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:4; }
.hero-dot{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:transparent; cursor:pointer; padding:0; }
.hero-dot.active{ background:var(--gold); border-color:var(--gold); }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:1080px){
  .masonry{ columns:3 220px; }
}
@media (max-width:900px){
  body.nav-open{ overflow:hidden; }
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--white); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px var(--gutter); gap:26px; box-shadow:-20px 0 60px -30px rgba(0,0,0,.3);
    transform:translateX(100%); transition:transform var(--dur-med) var(--ease);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:var(--ink); font-size:1rem; }
  .nav-icon-link{
    width:100%; height:auto; min-height:44px;
    justify-content:flex-start; gap:14px;
    padding:6px 0;
    text-transform:none; letter-spacing:.02em;
  }
  .nav-link-label{ display:inline; font-size:1rem; }
  .nav-icon-svg{ width:24px; height:24px; }
  .nav-icon-svg svg{ width:22px; height:22px; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .about-grid,.contact-grid,.export-wrap{ grid-template-columns:1fr; }
  .counters{ grid-template-columns:repeat(2,1fr); }
  .modal-box{ grid-template-columns:1fr; }
  .modal-media{ min-height:220px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .masonry{ columns:2 200px; }
}
@media (max-width:560px){
  .export-list{ grid-template-columns:1fr; }
  .masonry{ columns:1 100%; }
  .btn{ padding:14px 26px; font-size:.78rem; }
  .modal-actions{ flex-direction:column; }
  .modal-actions .btn{ justify-content:center; }
  .cart-sticky-inner{ padding:12px 14px; gap:12px; }
  .cart-sticky-total{ font-size:1.05rem; }
  .cart-sticky-btn{ min-width:108px; padding:12px 16px; font-size:.72rem; }
  .category-row-head{ align-items:flex-start; }
}