/* ═══════════════════════════════════════════════
   OLEUMAPP — Commerce Design System
   Brand aligned with main site (Fraunces + Manrope)
   ═══════════════════════════════════════════════ */

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Design Tokens ── */
:root{
  /* Palette — aligned with site.css */
  --c-bg:       #f8f2e9;
  --c-surface:  #ffffff;
  --c-surface-2:#fff8ef;
  --c-surface-3:#f3e7d8;
  --c-border:   #d9cec0;
  --c-border-2: #c8b8a4;
  --c-text:     #1f252b;
  --c-text-2:   #616b74;
  --c-text-3:   #8a8f96;
  --c-accent:   #e56b2f;
  --c-accent-h: #cd4f17;
  --c-accent-s: #ffe1cf;
  --c-pop:      #0f8b8d;
  --c-pop-h:    #0a6f70;
  --c-danger:   #d64545;
  --c-success:  #137a63;

  /* Typography */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Manrope', 'Segoe UI', sans-serif;
  --f-mono:    'Space Mono', monospace;

  /* Spacing (8px base, tightened ~20% for premium density) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px;
  --s-9: 96px; --s-10: 140px;

  /* Radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 30px; --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 8px 18px rgba(32,64,111,.07);
  --shadow-md: 0 14px 28px rgba(32,64,111,.11);
  --shadow-lg: 0 22px 46px rgba(25,37,43,.14);
  --shadow-xl: 0 30px 58px rgba(25,37,43,.18);

  /* Transitions */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .3s;
  --dur-slow: .6s;

  /* Layout */
  --container: 1240px;
  --container-narrow: 720px;
  --container-wide: 1400px;

  /* ── Signature: Tech Label token ── */
  --tl-font: var(--f-mono);
  --tl-size: .62rem;
  --tl-color: var(--c-text-3);
  --tl-bg: transparent;
  --tl-border: var(--c-border);
  --tl-tracking: .1em;

  /* Legacy compat tokens (used by ecommerce.js / portfolio.js) */
  --primary-color: var(--c-accent);
  --secondary-color: var(--c-text);
  --accent-color: var(--c-accent);
  --text-primary: var(--c-text);
  --text-secondary: var(--c-text-2);
  --border-light: var(--c-border);
  --bg-subtle: var(--c-surface-2);
  --shadow-card: var(--shadow-sm);
  --gradient-primary: linear-gradient(120deg,var(--c-accent),var(--c-accent-h));
  --gradient-secondary: linear-gradient(120deg,#20406f,#1f252b);
  --card-bg: var(--c-surface);
}

/* Dark mode intentionally disabled for brand consistency */

/* ── Base ── */
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--f-body);
  background:
    radial-gradient(circle at 10% 10%, #fff4e7 0%, rgba(255,244,231,0) 38%),
    radial-gradient(circle at 88% 14%, #def6f3 0%, rgba(222,246,243,0) 36%),
    var(--c-bg);
  color:var(--c-text);
  overflow-x:hidden;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.35;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:80px 80px;
}

::selection{background:var(--c-accent);color:#fff}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
.container--narrow{max-width:var(--container-narrow)}
.container--wide{max-width:var(--container-wide)}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ═══════════════════════════════════════
   NAVIGATION — editorial minimal
   ═══════════════════════════════════════ */
.navbar{
  position:sticky;top:0;width:100%;z-index:1000;
  background:rgba(248,242,233,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--c-border);
  padding:var(--s-4) 0;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.navbar.scrolled{
  background:rgba(255,255,255,.94);
  border-color:transparent;
  box-shadow:0 1px 0 var(--c-border);
}

.nav-container{
  max-width:var(--container);margin:0 auto;padding:0 var(--s-5);
  display:flex;justify-content:space-between;align-items:center;
}

.nav-logo{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-body);font-weight:700;font-size:.95rem;
  color:var(--c-text);text-decoration:none;letter-spacing:.06em;
  text-transform:uppercase;
}
.nav-logo i{display:none}
.nav-logo img{height:28px;width:28px;object-fit:cover;border-radius:var(--r-full)}

.nav-menu{display:flex;list-style:none;gap:var(--s-7);align-items:center}

.nav-link{
  color:var(--c-text-3);text-decoration:none;
  font-weight:400;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;
  transition:color var(--dur) var(--ease);
  position:relative;
}
.nav-link::after{content:none}
.nav-link:hover,.nav-link.active{color:var(--c-text)}

.nav-actions{display:flex;align-items:center;gap:var(--s-4)}

.nav-toggle{display:none;flex-direction:column;cursor:pointer;gap:5px;padding:var(--s-2)}
.nav-toggle span{width:20px;height:1.5px;background:var(--c-text);transition:var(--dur) var(--ease)}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Cart Icon */
.cart-icon{
  position:relative;color:var(--c-text-2);font-size:.95rem;
  padding:var(--s-2);
  transition:color var(--dur) var(--ease);text-decoration:none;
}
.cart-icon:hover{color:var(--c-text)}
.cart-count{
  position:absolute;top:-4px;right:-6px;
  background:var(--c-pop);color:#fff;
  font-size:.6rem;font-weight:700;
  padding:1px 4px;border-radius:var(--r-full);min-width:14px;text-align:center;
  line-height:1.4;
}

/* User Menu */
.user-menu{position:relative;display:none}
.user-menu.show{display:flex}
.user-btn{
  background:none;border:none;color:var(--c-text-2);font-size:.9rem;
  padding:var(--s-2);
  display:inline-flex;align-items:center;gap:var(--s-2);
  transition:color var(--dur) var(--ease);
}
.user-btn span{font-size:.8rem;font-weight:500}
.user-btn:hover{color:var(--c-text)}
.user-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--s-2) 0;min-width:180px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:all var(--dur) var(--ease);
  box-shadow:var(--shadow-lg);
}
.user-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{
  display:block;padding:var(--s-3) var(--s-5);
  color:var(--c-text-2);font-size:.82rem;letter-spacing:.02em;
  transition:all var(--dur) var(--ease);
}
.dropdown-item:hover{background:var(--c-surface-2);color:var(--c-text)}

.login-btn{
  background:transparent;color:var(--c-text);border:1px solid var(--c-border);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
  font-weight:500;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;
  transition:all var(--dur) var(--ease);
}
.login-btn:hover{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}

/* ═══════════════════════════════════════
   BUTTONS — editorial refined
   ═══════════════════════════════════════ */
.btn{
  padding:var(--s-3) var(--s-6);border:none;border-radius:var(--r-full);
  font-family:var(--f-body);font-weight:500;font-size:.82rem;
  text-decoration:none;cursor:pointer;letter-spacing:.04em;
  text-transform:uppercase;
  transition:all var(--dur) var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
}
.btn-primary{
  color:#fff;
  background:var(--gradient-primary);
  box-shadow:0 12px 25px rgba(229,107,47,.3);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(229,107,47,.36);
}
.btn-accent{background:var(--c-accent);color:#fff}
.btn-accent:hover{background:var(--c-accent-h)}
.btn-secondary{background:transparent;color:var(--c-text);border:1px solid var(--c-border-2)}
.btn-secondary:hover{border-color:var(--c-text)}
.btn-ghost{background:transparent;color:var(--c-text-2);padding:var(--s-2) var(--s-3);text-transform:none;letter-spacing:0}
.btn-ghost:hover{color:var(--c-text)}
.btn-icon{
  width:40px;height:40px;padding:0;border-radius:var(--r-full);
  background:var(--c-surface-2);color:var(--c-text);border:1px solid var(--c-border);
  text-transform:none;letter-spacing:0;
}
.btn-icon:hover{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}

/* ═══════════════════════════════════════
   HERO — asymmetric editorial masthead
   ═══════════════════════════════════════ */
.hero{
  min-height:100svh;display:flex;align-items:flex-end;
  position:relative;overflow:hidden;
  background:var(--c-bg);
  padding:var(--s-10) 0 var(--s-8);
  border-bottom:1px solid var(--c-border);
}

.hero-background{
  position:absolute;inset:0;
  background:var(--c-bg);
  pointer-events:none;
}
.hero-background::before,.hero-background::after{content:none}

.particles{display:none}

.hero-content{
  max-width:var(--container);margin:0 auto;padding:0 var(--s-5);
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-7);align-items:end;
  text-align:left;width:100%;
}

.hero--store{
  min-height:82svh;
}

.hero--store .hero-content{
  grid-template-columns:minmax(0, 1fr);
  align-items:center;
}

.hero--store .hero-title{
  font-size:clamp(2.7rem, 6.8vw, 5rem);
  max-width:920px;
}

.hero--store .hero-subtitle{
  max-width:760px;
}

.hero--store .hero-stats{
  flex-wrap:wrap;
  gap:var(--s-6);
}

.hero-text{max-width:none}

.hero-title{
  font-family:var(--f-display);
  font-size:clamp(3rem,7vw,5.5rem);
  font-weight:400;line-height:1.08;
  margin-bottom:var(--s-6);
  letter-spacing:-.02em;color:var(--c-text);
  font-style:italic;
}

.title-line{display:block;color:inherit}
.title-line:nth-child(2){color:var(--c-text-2);font-style:normal}

/* Emphasis word — editorial underline */
.hero-title .em{
  color:var(--c-accent);font-style:italic;
  display:inline;position:relative;
}
.hero-title .em::after{content:none}

.hero-subtitle{
  font-size:clamp(.9rem,1.2vw,1.05rem);
  color:var(--c-text-2);line-height:1.8;
  margin:0 0 var(--s-7);max-width:480px;
}

.hero-stats{
  display:flex;gap:var(--s-8);margin-bottom:var(--s-7);
}
.stat{text-align:left}
.stat-number{
  display:block;font-family:var(--f-display);
  font-size:clamp(2rem,4vw,3.5rem);font-weight:400;
  color:var(--c-text);letter-spacing:-.02em;
  font-style:italic;
}
.stat-label{font-size:.7rem;color:var(--c-text-3);font-weight:500;text-transform:uppercase;letter-spacing:.1em;margin-top:var(--s-1)}

.hero-buttons{display:flex;gap:var(--s-3);flex-wrap:wrap}

.hero-visual{display:none}
.floating-card{display:none}
.card-content,.card-image,.card-info,.card-code{display:none}

/* ═══════════════════════════════════════
   SECTIONS — Shared editorial system
   ═══════════════════════════════════════ */
.section-label{
  font-size:.7rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--c-text-3);
  margin-bottom:var(--s-4);display:block;
}
.section-header{text-align:left;margin-bottom:var(--s-8)}
.section-header--center{text-align:center}
.section-title{
  font-family:var(--f-display);
  font-size:clamp(2rem,5vw,3.5rem);font-weight:400;
  letter-spacing:-.01em;color:var(--c-text);
  margin-bottom:var(--s-4);line-height:1.15;
  font-style:italic;
}
.section-subtitle{
  font-size:.95rem;color:var(--c-text-2);
  max-width:480px;line-height:1.8;
}
.section-header--center .section-subtitle{margin:0 auto}

/* Editorial divider — thin line with optional number */
.editorial-divider{
  display:flex;align-items:center;gap:var(--s-4);
  margin-bottom:var(--s-7);
}
.editorial-divider::after{
  content:'';flex:1;height:1px;background:var(--c-border);
}
.editorial-divider span{
  font-size:.7rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--c-text-3);white-space:nowrap;
}

/* ═══════════════════════════════════════
   ABOUT / STUDIO — editorial split
   ═══════════════════════════════════════ */
.about{padding:var(--s-9) 0;background:var(--c-surface);border-top:1px solid var(--c-border)}
.about-content{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9);
  align-items:start;
}
.about-text h3{
  font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:400;color:var(--c-text);letter-spacing:-.01em;
  margin-bottom:var(--s-5);line-height:1.2;font-style:italic;
}
.about-text p{font-size:.95rem;color:var(--c-text-2);line-height:1.85;margin-bottom:var(--s-6)}

/* Capabilities list */
.capabilities{display:flex;flex-direction:column;gap:0}
.capability{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--c-border);
  transition:all var(--dur) var(--ease);
}
.capability:first-child{border-top:1px solid var(--c-border)}
.capability:hover{padding-left:var(--s-3)}
.capability i{color:var(--c-text-3);font-size:.7rem;width:16px;text-align:center}
.capability span{font-weight:400;font-size:.88rem;color:var(--c-text)}

/* Legacy skill bars compat */
.skills{display:flex;flex-direction:column;gap:var(--s-3)}
.skill{display:flex;flex-direction:column;gap:var(--s-1)}
.skill-name{font-weight:600;font-size:.85rem;color:var(--c-text)}
.skill-bar{height:2px;background:var(--c-border);border-radius:0;overflow:hidden}
.skill-progress{height:100%;background:var(--c-text);border-radius:0;animation:skillFill 2s ease-out}
.skill-progress::after{content:none}

/* Creator / Studio card */
.creator-card{
  background:var(--c-surface-2);border-radius:var(--r-lg);padding:var(--s-7) var(--s-6);
  text-align:center;border:1px solid var(--c-border);
  transition:all var(--dur) var(--ease);
}
.creator-card::before{content:none}
.creator-card:hover{box-shadow:var(--shadow-md)}
.creator-avatar{
  width:64px;height:64px;background:var(--c-surface);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--s-4);font-size:1.5rem;color:var(--c-text);
  border:1px solid var(--c-border);transition:all var(--dur) var(--ease);
}
.creator-card:hover .creator-avatar{border-color:var(--c-text)}
.creator-avatar img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full)}
.creator-info h4{font-family:var(--f-display);font-size:1.4rem;font-weight:400;font-style:italic;color:var(--c-text);margin-bottom:var(--s-1)}
.creator-info p{color:var(--c-text-2);margin-bottom:var(--s-5);font-size:.85rem}
.creator-stats{display:flex;justify-content:center;gap:var(--s-4)}
.creator-stat{
  display:flex;align-items:center;gap:var(--s-2);color:var(--c-text-2);font-size:.78rem;
  padding:var(--s-2) var(--s-3);background:var(--c-surface);border-radius:var(--r-sm);
  border:1px solid var(--c-border);
}
.creator-stat i{color:var(--c-text-3);font-size:.75rem}

/* ═══════════════════════════════════════
   SERVICES — editorial numbered list
   ═══════════════════════════════════════ */
.services-overview{padding:var(--s-9) 0;background:var(--c-bg);border-top:1px solid var(--c-border)}
.services-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--c-border);
  counter-reset:svc;
}
.service-card{
  background:transparent;border:none;
  border-bottom:1px solid var(--c-border);
  border-radius:0;padding:var(--s-7) var(--s-6) var(--s-7) 0;
  transition:all var(--dur) var(--ease);position:relative;overflow:visible;
}
.service-card:nth-child(odd){border-right:1px solid var(--c-border);padding-right:var(--s-7);padding-left:0}
.service-card:nth-child(even){padding-left:var(--s-7)}
.service-card::before{
  counter-increment:svc;content:counter(svc,decimal-leading-zero);
  display:block;font-family:var(--f-display);font-size:2rem;font-weight:400;
  color:var(--c-border-2);margin-bottom:var(--s-4);line-height:1;
  font-style:italic;
}
.service-card:hover::before{color:var(--c-text)}
.service-card:hover{background:transparent}
.service-card .service-icon{
  width:40px;height:40px;background:transparent;border-radius:0;
  display:none;
}
.service-card h3{font-family:var(--f-display);font-size:1.3rem;font-weight:400;font-style:italic;margin-bottom:var(--s-3);color:var(--c-text)}
.service-card p{font-size:.88rem;color:var(--c-text-2);line-height:1.75}

/* ═══════════════════════════════════════
   PROCESS — horizontal editorial timeline
   ═══════════════════════════════════════ */
.process{padding:var(--s-9) 0;background:var(--c-surface);border-top:1px solid var(--c-border)}
.process-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  counter-reset:step;
  border-top:1px solid var(--c-border);
}
.process-step{
  text-align:left;padding:var(--s-6) var(--s-5) var(--s-6) 0;position:relative;
  border-right:1px solid var(--c-border);
}
.process-step:last-child{border-right:none}
.process-step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-family:var(--f-display);font-size:3rem;font-weight:400;
  color:var(--c-border-2);margin-bottom:var(--s-4);line-height:1;
  font-style:italic;letter-spacing:-.02em;
}
.process-step h4{font-family:var(--f-body);font-size:.82rem;font-weight:600;margin-bottom:var(--s-2);color:var(--c-text);text-transform:uppercase;letter-spacing:.06em}
.process-step p{font-size:.85rem;color:var(--c-text-2);line-height:1.7}

/* ═══════════════════════════════════════
   TESTIMONIALS — editorial quotes
   ═══════════════════════════════════════ */
.testimonials{padding:var(--s-9) 0;background:var(--c-bg);border-top:1px solid var(--c-border)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--c-border);max-width:var(--container);margin:0 auto}
.testimonial-card{
  background:transparent;border:none;border-right:1px solid var(--c-border);
  border-radius:0;padding:var(--s-7) var(--s-6);
  transition:all var(--dur) var(--ease);
}
.testimonial-card:last-child{border-right:none}
.testimonial-card:hover{background:var(--c-surface)}
.testimonial-card blockquote{
  font-family:var(--f-display);
  font-size:1.15rem;color:var(--c-text);line-height:1.6;
  margin-bottom:var(--s-6);font-style:italic;font-weight:400;
}
.testimonial-card blockquote::before{
  content:none;
}
.testimonial-author{display:flex;align-items:center;gap:var(--s-3)}
.testimonial-author img{width:36px;height:36px;border-radius:var(--r-full);object-fit:cover}
.testimonial-author .author-name{font-weight:500;font-size:.8rem;color:var(--c-text);letter-spacing:.02em}
.testimonial-author .author-role{font-size:.72rem;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.06em}

/* ═══════════════════════════════════════
   MAPS / PORTFOLIO (legacy compat)
   ═══════════════════════════════════════ */
.maps{padding:var(--s-9) 0;background:var(--c-bg);border-top:1px solid var(--c-border)}
.maps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-5)}
.map-card{
  background:var(--c-surface);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--c-border);transition:all var(--dur) var(--ease);
  display:flex;flex-direction:column;height:100%;
}
.map-card:hover{box-shadow:var(--shadow-md)}
.map-card.featured{border:2px solid var(--c-accent)}
.map-image{position:relative;height:220px;overflow:hidden}
.map-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.map-card:hover .map-image img{transform:scale(1.04)}
.map-overlay{position:absolute;top:var(--s-3);right:var(--s-3)}
.map-badge{
  background:var(--c-text);color:var(--c-bg);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}
.map-content{padding:var(--s-5);display:flex;flex-direction:column;flex:1}
.map-content h3{font-family:var(--f-display);font-size:1.2rem;font-weight:400;font-style:italic;margin-bottom:var(--s-2);color:var(--c-text)}
.map-content p{color:var(--c-text-2);margin-bottom:var(--s-3);line-height:1.7;font-size:.88rem}
.map-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.tag{
  background:transparent;color:var(--c-text-3);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);
  font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--c-border);
}
.tag.difficulty{background:var(--c-accent-s);color:var(--c-accent);border-color:transparent}
.map-meta{display:flex;gap:var(--s-4);margin-bottom:var(--s-3)}
.meta-item{display:flex;align-items:center;gap:var(--s-2);color:var(--c-text-3);font-size:.82rem}
.map-code{
  background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:var(--s-3);display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--s-3);font-size:.82rem;color:var(--c-accent);gap:var(--s-2);flex-wrap:wrap;
}
.copy-btn{background:none;border:none;color:var(--c-accent);padding:var(--s-2);border-radius:var(--r-sm);transition:all var(--dur) var(--ease)}
.copy-btn:hover{background:var(--c-accent);color:#fff}
.map-actions{display:flex;gap:var(--s-3);align-items:center;margin-top:auto}

.placeholder-image{
  width:100%;height:100%;background:var(--c-surface-2);
  display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease);
}
.placeholder-image::before{content:none}
.placeholder-content{text-align:center;color:var(--c-text-3);z-index:2;position:relative}
.placeholder-content i{font-size:2rem;margin-bottom:var(--s-2);color:var(--c-text-3)}
.placeholder-content h4{font-size:.9rem;margin-bottom:var(--s-1);color:var(--c-text-2)}
.placeholder-content p{font-size:.82rem;color:var(--c-text-3)}

/* ═══════════════════════════════════════
   SHOP — editorial product grid
   ═══════════════════════════════════════ */
.shop{padding-top:var(--s-9);min-height:80vh}

.shop .section-header{
  max-width:760px;
  margin:0 auto var(--s-8);
  text-align:center;
}
.shop .section-header .section-subtitle{margin:0 auto}
.shop .category-chips{justify-content:center}

.no-products{grid-column:1/-1;text-align:center;padding:var(--s-9);color:var(--c-text-2)}
.no-products i{font-size:2rem;margin-bottom:var(--s-3);color:var(--c-text-3);display:block}
.no-products h3{color:var(--c-text);margin-bottom:var(--s-2);font-family:var(--f-display);font-style:italic;font-weight:400}
.no-products p{max-width:400px;margin:0 auto;font-size:.9rem}

.shop-filters{display:flex;justify-content:flex-start;gap:var(--s-2);margin-bottom:var(--s-7);flex-wrap:wrap}
.filter-btn{
  background:transparent;border:1px solid var(--c-border);
  color:var(--c-text-3);padding:var(--s-2) var(--s-4);
  border-radius:var(--r-full);font-size:.75rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  transition:all var(--dur) var(--ease);
}
.filter-btn:hover{border-color:var(--c-text);color:var(--c-text)}
.filter-btn.active{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,340px));justify-content:center;gap:var(--s-5)}

.product-card{
  background:var(--c-surface);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--c-border);transition:all var(--dur) var(--ease);
}
.product-card:hover{box-shadow:var(--shadow-md)}
.product-image{position:relative;height:220px;overflow:hidden;background:var(--c-surface-2)}
.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.product-card:hover .product-image img{transform:scale(1.03)}
.product-content{padding:var(--s-5)}
.product-title{font-family:var(--f-display);font-size:1.15rem;font-weight:400;font-style:italic;margin-bottom:var(--s-2);color:var(--c-text)}
.product-description{color:var(--c-text-2);margin-bottom:var(--s-3);font-size:.85rem;line-height:1.7}
.feature-tag{
  display:inline-block;background:transparent;color:var(--c-text-3);
  padding:2px var(--s-2);border-radius:var(--r-sm);font-size:.68rem;
  margin-right:var(--s-1);margin-bottom:var(--s-1);
  border:1px solid var(--c-border);text-transform:uppercase;letter-spacing:.04em;
}
.product-price{font-family:var(--f-display);font-size:1.5rem;font-weight:400;font-style:italic;color:var(--c-text);margin-bottom:var(--s-3)}
.product-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);align-items:stretch}
.add-to-cart-btn{
  flex:1;background:var(--c-text);color:var(--c-bg);border:none;
  padding:var(--s-3);border-radius:var(--r-full);font-weight:500;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;
  transition:all var(--dur) var(--ease);
}
.add-to-cart-btn:hover{opacity:.8}
.view-details-btn{
  background:transparent;color:var(--c-text-2);border:1px solid var(--c-border);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-full);font-size:.78rem;
  min-width:92px;display:inline-flex;align-items:center;justify-content:center;
  text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;
  transition:all var(--dur) var(--ease);
}
.view-details-btn:hover{border-color:var(--c-text);color:var(--c-text)}

/* ═══════════════════════════════════════
   PRODUCT PAGE — SEO detail layout
   ═══════════════════════════════════════ */
.product-page{padding:var(--s-8) 0 var(--s-10)}
.product-page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-6)}
.product-breadcrumbs{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-size:.78rem;color:var(--c-text-3)}
.product-breadcrumbs a{color:var(--c-text-3);text-decoration:none}
.product-breadcrumbs a:hover{color:var(--c-text)}
.product-page-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-7);align-items:start}
.product-page-media-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-4)}
.product-page-main-media{
  border-radius:var(--r-lg);overflow:hidden;background:var(--c-surface-2);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
}
.product-page-main-media img,.product-page-main-media video{width:100%;height:100%;object-fit:cover;display:block}
.product-page-thumbnails{display:flex;gap:var(--s-2);margin-top:var(--s-3);overflow-x:auto;padding-bottom:2px}
.product-page-thumb{
  border:1px solid var(--c-border);border-radius:var(--r-sm);background:transparent;
  width:74px;height:52px;overflow:hidden;cursor:pointer;flex-shrink:0;padding:0;
}
.product-page-thumb.active{border-color:var(--c-text)}
.product-page-thumb img,.product-page-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.product-page-summary{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:var(--s-6);position:sticky;top:calc(var(--nav-h) + var(--s-3));
}
.product-page-eyebrow{display:flex;align-items:center;justify-content:flex-start;margin-bottom:var(--s-3)}
.product-type-badge{
  display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  border:1px solid var(--c-border);border-radius:var(--r-full);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2);background:var(--c-bg);
}
.product-type-badge i{font-size:.72rem;color:var(--c-text-3)}
.product-page-title{font-family:var(--f-display);font-size:2rem;font-weight:400;font-style:italic;color:var(--c-text);margin-bottom:var(--s-3)}
.product-page-subtitle{font-size:.86rem;color:var(--c-text-2);line-height:1.8;margin-bottom:var(--s-4)}
.product-page-summary .product-description{margin-bottom:var(--s-4)}
.product-page-highlights{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.product-page-highlights li{display:flex;align-items:flex-start;gap:var(--s-2);color:var(--c-text-2);font-size:.84rem;line-height:1.55}
.product-page-highlights i{margin-top:3px;color:var(--c-text-3);font-size:.72rem}
.product-page-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-bottom:var(--s-5)}
.product-page-fact{
  border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-bg);
  padding:var(--s-3);display:flex;align-items:flex-start;gap:var(--s-2);
}
.product-page-fact-icon{width:18px;flex-shrink:0;color:var(--c-text-3);font-size:.78rem;padding-top:1px}
.product-page-fact small{display:block;color:var(--c-text-3);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.product-page-fact strong{display:block;color:var(--c-text);font-size:.8rem;line-height:1.45;margin-top:2px}
.product-page-price{font-family:var(--f-display);font-size:2.2rem;font-style:italic;color:var(--c-text);margin-bottom:var(--s-5)}
.product-page-actions{display:flex;flex-direction:column;gap:var(--s-3)}
.product-page-sections{margin-top:var(--s-8);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6)}
.product-page-section{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:var(--s-5);
}
.product-page-section-accent{background:linear-gradient(180deg,var(--c-surface) 0%,#f4f7f3 100%)}
.product-page-section h3{font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s-3)}
.product-page-section p{color:var(--c-text-2);line-height:1.8;font-size:.9rem}
.product-page-list{list-style:none;padding:0;margin:0}
.product-page-list li{padding-left:1rem;position:relative;margin-bottom:var(--s-2);color:var(--c-text-2)}
.product-page-list li::before{content:'—';position:absolute;left:0;color:var(--c-text-3)}

/* ═══════════════════════════════════════
   CONTACT — editorial split
   ═══════════════════════════════════════ */
.contact{padding:var(--s-9) 0;background:var(--c-bg);border-top:1px solid var(--c-border)}
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9)}
.contact-content.single{display:flex;justify-content:center}
.contact-content.single .contact-form{max-width:700px;width:100%;margin:0 auto}

.contact-info{display:flex;flex-direction:column;gap:0;justify-content:center}
.contact-item{
  display:flex;align-items:flex-start;gap:var(--s-4);
  padding:var(--s-5) 0;
  border-bottom:1px solid var(--c-border);
  transition:all var(--dur) var(--ease);
}
.contact-item:first-child{border-top:1px solid var(--c-border)}
.contact-item:hover{padding-left:var(--s-3)}
.contact-item i{
  font-size:.9rem;color:var(--c-text-3);
  width:20px;text-align:center;flex-shrink:0;margin-top:2px;
}
.contact-item h4{color:var(--c-text);margin-bottom:var(--s-1);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.contact-item p{color:var(--c-text-2);font-size:.88rem}

.contact-form{
  background:var(--c-surface);border-radius:var(--r-lg);
  padding:var(--s-7);border:1px solid var(--c-border);
}
.contact-form form{display:flex;flex-direction:column}
.contact-form .btn.btn-primary{align-self:flex-start}

/* ═══════════════════════════════════════
   FORMS — editorial minimal
   ═══════════════════════════════════════ */
.form-group{margin-bottom:var(--s-4)}
.form-group input,
.form-group textarea{
  width:100%;padding:var(--s-4);
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-md);color:var(--c-text);
  font-family:var(--f-body);font-size:.88rem;
  transition:all var(--dur) var(--ease);
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--c-text);
  box-shadow:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--c-text-3)}

/* ═══════════════════════════════════════
   BOOKING CTA — editorial dark band
   ═══════════════════════════════════════ */
.booking-cta{
  padding:var(--s-9) 0;
  background:var(--c-text);color:var(--c-bg);text-align:center;
}
.booking-cta h2{font-family:var(--f-display);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;font-style:italic;letter-spacing:-.01em;margin-bottom:var(--s-4)}
.booking-cta p{color:rgba(255,255,255,.5);font-size:.95rem;max-width:440px;margin:0 auto var(--s-7);line-height:1.8}
.booking-cta .btn-accent{font-size:.82rem;padding:var(--s-3) var(--s-6)}

/* ═══════════════════════════════════════
   MODALS — Cart
   ═══════════════════════════════════════ */
.cart-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.3);
  backdrop-filter:blur(8px);display:none;
  justify-content:center;align-items:center;z-index:2000;
}
.cart-modal.active{display:flex}
.cart-content{
  background:var(--c-surface);border-radius:var(--r-xl);
  width:90%;max-width:520px;max-height:85vh;overflow-y:auto;
  box-shadow:var(--shadow-xl);display:flex;flex-direction:column;
  border:1px solid var(--c-border);
}
.cart-content::-webkit-scrollbar{width:4px}
.cart-content::-webkit-scrollbar-track{background:transparent}
.cart-content::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--r-full)}
.cart-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--c-border);
}
.cart-header h3{font-family:var(--f-display);font-size:1.3rem;font-weight:400;font-style:italic;color:var(--c-text)}
.close-cart{background:none;border:none;color:var(--c-text-3);font-size:1.1rem;transition:color var(--dur) var(--ease)}
.close-cart:hover{color:var(--c-text)}
.cart-items{flex:1;overflow-y:auto;padding:var(--s-4) var(--s-6);min-height:80px}
.cart-item{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--c-border)}
.cart-item:last-child{border-bottom:none}
.cart-item-image{width:52px;height:52px;border-radius:var(--r-md);overflow:hidden;flex-shrink:0}
.cart-item-image img{width:100%;height:100%;object-fit:cover}
.cart-item-details{flex:1}
.cart-item-title{font-weight:500;font-size:.88rem;color:var(--c-text);margin-bottom:2px}
.cart-item-price{color:var(--c-text-2);font-weight:500;font-size:.82rem}
.cart-item-actions{display:flex;align-items:center;gap:var(--s-2)}
.quantity-btn{
  background:transparent;border:1px solid var(--c-border);color:var(--c-text);
  width:26px;height:26px;border-radius:var(--r-sm);font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur) var(--ease);
}
.quantity-btn:hover{border-color:var(--c-text)}
.quantity-display{color:var(--c-text);font-weight:500;min-width:20px;text-align:center;font-size:.82rem}
.remove-item{
  background:transparent;border:1px solid var(--c-danger);color:var(--c-danger);
  padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);font-size:.72rem;
  transition:all var(--dur) var(--ease);text-transform:uppercase;letter-spacing:.04em;
}
.remove-item:hover{background:var(--c-danger);color:#fff}
.cart-footer{
  padding:var(--s-5) var(--s-6);border-top:1px solid var(--c-border);
  background:var(--c-surface);position:sticky;bottom:0;z-index:10;
}
.cart-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-4);font-size:1rem;font-weight:500}
.total-amount{color:var(--c-text);font-family:var(--f-display);font-size:1.3rem;font-style:italic}
.checkout-btn{
  width:100%;padding:var(--s-3) var(--s-5);font-size:.82rem;
  background:var(--c-text);color:var(--c-bg);border:none;border-radius:var(--r-full);
  font-weight:500;text-transform:uppercase;letter-spacing:.04em;
  transition:all var(--dur) var(--ease);
}
.checkout-btn:hover{opacity:.8}

/* PayPal */
#paypal-button-container{margin-top:var(--s-4)}
.zoid-outlet,.zoid-component-frame,.zoid-component-container{background:rgba(255,255,255,.98)!important}
.zoid-overlay{background:rgba(0,0,0,.5)!important}
iframe[name*="__paypal"],iframe[name*="__zoid__"],iframe[title*="PayPal"]{background:#fff!important;border-radius:var(--r-md)!important}
.zoid-close{color:#fff!important;background:var(--c-text)!important;border-radius:var(--r-full)!important;width:36px!important;height:36px!important}
.paypal-checkout-sandbox,.paypal-checkout-iframe{background:#fff!important}

/* ═══════════════════════════════════════
   MODALS — Login
   ═══════════════════════════════════════ */
.login-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.3);
  backdrop-filter:blur(8px);display:none;
  justify-content:center;align-items:center;z-index:2000;
}
.login-modal.active{display:flex}
.login-content{
  background:var(--c-surface);border-radius:var(--r-xl);
  width:90%;max-width:400px;padding:var(--s-7);
  box-shadow:var(--shadow-xl);border:1px solid var(--c-border);
}
.login-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-6)}
.login-header h3{font-family:var(--f-display);font-size:1.4rem;font-weight:400;font-style:italic;color:var(--c-text)}
.close-login{background:none;border:none;color:var(--c-text-3);font-size:1.1rem;transition:color var(--dur) var(--ease)}
.close-login:hover{color:var(--c-text)}
.login-tabs{display:flex;margin-bottom:var(--s-5);border-bottom:1px solid var(--c-border)}
.tab-btn{
  flex:1;background:none;border:none;color:var(--c-text-3);
  padding:var(--s-3);border-bottom:1px solid transparent;
  font-weight:500;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  transition:all var(--dur) var(--ease);
}
.tab-btn.active{color:var(--c-text);border-bottom-color:var(--c-text)}
.login-form,.register-form{display:flex;flex-direction:column;gap:var(--s-3)}
.login-form.hidden,.register-form.hidden{display:none}
.forgot-password-link{text-align:right;margin-top:calc(-1 * var(--s-2));margin-bottom:var(--s-2)}
.forgot-password-link a{color:var(--c-text-2);font-size:.78rem;transition:color var(--dur) var(--ease)}
.forgot-password-link a:hover{color:var(--c-text);text-decoration:underline}

/* Shared modal shell (orders/profile pages) */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:2100;
  padding:var(--s-4);
}
.modal.active{display:flex}
.modal .modal-content{
  width:min(92vw,520px);
  max-height:90vh;
  overflow-y:auto;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  padding:var(--s-6);
}
.modal .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--s-5);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--c-border);
}
.modal .modal-header h3{
  font-family:var(--f-display);
  font-size:1.35rem;
  font-weight:400;
  font-style:italic;
  color:var(--c-text);
}
.modal .modal-header button{
  background:none;
  border:none;
  color:var(--c-text-3);
  width:32px;
  height:32px;
  border-radius:var(--r-full);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all var(--dur) var(--ease);
}
.modal .modal-header button:hover{
  background:var(--c-surface-2);
  color:var(--c-text);
}
.modal .form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:var(--s-5);
}
.form-footer{
  margin-top:var(--s-3);
  font-size:.82rem;
  color:var(--c-text-2);
}
.form-footer a{color:var(--c-text);text-decoration:underline}

/* ═══════════════════════════════════════
   MODALS — Product Details
   ═══════════════════════════════════════ */
.product-details-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.3);
  backdrop-filter:blur(8px);display:flex;
  justify-content:center;align-items:center;z-index:2000;
  opacity:0;visibility:hidden;transition:all var(--dur) var(--ease);
}
.product-details-modal.active{opacity:1;visibility:visible}
.product-details-content{
  background:var(--c-surface);border-radius:var(--r-xl);
  width:min(92vw,1100px);max-width:1100px;max-height:92vh;overflow-y:auto;
  transform:translateY(12px);transition:transform var(--dur) var(--ease);
  box-shadow:var(--shadow-xl);border:1px solid var(--c-border);
}
.product-details-modal.active .product-details-content{transform:translateY(0)}
.product-details-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--c-border);
  position:sticky;top:0;background:var(--c-surface);z-index:10;
}
.product-details-header h3{font-family:var(--f-display);font-size:1.2rem;font-weight:400;font-style:italic;color:var(--c-text)}
.close-product-details{
  background:none;border:none;color:var(--c-text-3);font-size:1.1rem;
  padding:var(--s-2);transition:color var(--dur) var(--ease);
}
.close-product-details:hover{color:var(--c-text)}
.product-details-body{padding:var(--s-6)}

/* Product Gallery */
.product-gallery{margin:0 auto var(--s-6);max-width:860px;width:100%}
.gallery-main{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  margin-bottom:var(--s-3);background:var(--c-surface-2);aspect-ratio:16/9;
}
.gallery-main img,.gallery-main video{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.gallery-main:hover img,.gallery-main:hover video{transform:scale(1.02)}
.gallery-thumbnails{display:flex;gap:var(--s-2);overflow-x:auto;padding:var(--s-1) 0}
.gallery-thumbnail{
  flex-shrink:0;width:64px;height:48px;border-radius:var(--r-sm);
  overflow:hidden;cursor:pointer;border:1px solid var(--c-border);
  transition:all var(--dur) var(--ease);position:relative;
}
.gallery-thumbnail.active{border-color:var(--c-text)}
.gallery-thumbnail img,.gallery-thumbnail video{width:100%;height:100%;object-fit:cover}
.gallery-thumbnail:hover{border-color:var(--c-text-3)}
.gallery-thumbnail .media-type{
  position:absolute;top:2px;right:2px;background:rgba(0,0,0,.7);color:#fff;
  padding:1px 4px;border-radius:2px;font-size:.55rem;
}

/* Product Info (modal) */
.product-info{display:grid;grid-template-columns:1fr 260px;gap:var(--s-7);margin-bottom:var(--s-6)}
.product-info-main h2{font-family:var(--f-display);font-size:1.6rem;font-weight:400;font-style:italic;color:var(--c-text);margin-bottom:var(--s-3);letter-spacing:-.01em}
.product-info-main .product-category{
  display:inline-block;background:transparent;color:var(--c-text-3);
  padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);font-size:.7rem;
  font-weight:500;border:1px solid var(--c-border);margin-bottom:var(--s-3);
  text-transform:uppercase;letter-spacing:.06em;
}
.product-info-main .product-description{font-size:.95rem;line-height:1.85;color:var(--c-text-2);margin-bottom:var(--s-5)}
.product-features{margin-bottom:var(--s-5)}
.product-features h4{color:var(--c-text);margin-bottom:var(--s-3);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.features-list{list-style:none;padding:0}
.features-list li{padding:var(--s-2) 0;color:var(--c-text-2);position:relative;padding-left:var(--s-5);font-size:.88rem;border-bottom:1px solid var(--c-border)}
.features-list li:last-child{border-bottom:none}
.features-list li::before{content:'—';position:absolute;left:0;color:var(--c-text-3);font-weight:400}

/* Product Sidebar (modal) */
.product-sidebar{
  background:var(--c-surface-2);border-radius:var(--r-lg);
  padding:var(--s-6);border:1px solid var(--c-border);height:fit-content;
}
.product-sidebar .product-price{
  font-family:var(--f-display);font-size:2rem;font-weight:400;font-style:italic;
  color:var(--c-text);margin-bottom:var(--s-5);text-align:center;
}
.product-actions-details{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-5)}
.add-to-cart-btn-details{
  background:var(--c-text);color:var(--c-bg);border:none;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-full);
  font-size:.82rem;font-weight:500;display:flex;align-items:center;
  justify-content:center;gap:var(--s-2);text-transform:uppercase;letter-spacing:.04em;
  transition:all var(--dur) var(--ease);
}
.add-to-cart-btn-details:hover{opacity:.8}
.demo-btn-details{
  background:transparent;color:var(--c-text-2);border:1px solid var(--c-border);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-full);
  font-size:.8rem;font-weight:500;display:flex;align-items:center;
  justify-content:center;gap:var(--s-2);text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;transition:all var(--dur) var(--ease);
}
.demo-btn-details:hover{border-color:var(--c-text);color:var(--c-text)}
.product-notice{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:var(--s-4);margin-bottom:var(--s-3);
}
.product-notice h5{color:var(--c-text);margin-bottom:var(--s-2);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.product-notice p{color:var(--c-text-2);font-size:.8rem;line-height:1.7}
.product-notice .notice-icon{color:var(--c-text-3);margin-right:var(--s-2)}
.product-details-section{margin-bottom:var(--s-6)}
.product-details-section h4{
  color:var(--c-text);margin-bottom:var(--s-3);font-size:.85rem;font-weight:600;
  border-bottom:1px solid var(--c-border);padding-bottom:var(--s-2);
  text-transform:uppercase;letter-spacing:.04em;
}
.product-details-section p{color:var(--c-text-2);line-height:1.7;font-size:.9rem}

/* ═══════════════════════════════════════
   SIGNATURE MOTIF — Tech Labels
   Mono-spaced micro-labels used on sections,
   cards, modals, and UI elements.
   Tweak via --tl-* tokens in :root.
   ═══════════════════════════════════════ */
.tl{
  font-family:var(--tl-font);font-size:var(--tl-size);
  color:var(--tl-color);text-transform:uppercase;
  letter-spacing:var(--tl-tracking);line-height:1;
  background:var(--tl-bg);border:1px solid var(--tl-border);
  padding:3px 8px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap;user-select:none;
}
.tl--accent{color:var(--c-accent);border-color:var(--c-accent-s)}
.tl--pop{color:var(--c-pop);border-color:rgba(232,93,4,.2)}
.tl--success{color:var(--c-success);border-color:rgba(22,163,74,.2)}
.tl--filled{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.tl--ghost{border-color:transparent;padding:0}
.tl i,.tl .fa-solid,.tl .fas{font-size:.55rem}

/* Tech label on sections — top-left spec */
.section-tl{margin-bottom:var(--s-4)}

/* ═══════════════════════════════════════
   BRAND MICRO-DETAIL — Animated underline
   Appears on .brand-ul elements (links, headings).
   A thin accent line that expands from left on hover.
   ═══════════════════════════════════════ */
.brand-ul{position:relative;display:inline}
.brand-ul::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1.5px;background:var(--c-accent);
  transition:width .4s var(--ease);
}
.brand-ul:hover::after{width:100%}

/* Static version for hero emphasis */
.hero-title .em::after{
  content:'';position:absolute;bottom:2px;left:0;
  width:100%;height:2px;background:var(--c-accent);
  transform:scaleX(0);transform-origin:left;
  animation:brandLine .8s var(--ease) .6s forwards;
}
@keyframes brandLine{to{transform:scaleX(1)}}

/* ═══════════════════════════════════════
   COMMERCE PROOF — trust strip
   ═══════════════════════════════════════ */
.commerce-proof{
  display:flex;gap:var(--s-5);flex-wrap:wrap;
  padding:var(--s-5) 0;margin:var(--s-5) 0 0;
  border-top:1px solid var(--c-border);
}
.proof-item{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:.72rem;color:var(--c-text-2);
  text-transform:uppercase;letter-spacing:.06em;
  font-weight:500;
}
.proof-item i{font-size:.65rem;color:var(--c-text-3)}

/* ═══════════════════════════════════════
   FEATURED DROP — hero product gallery
   ═══════════════════════════════════════ */
.featured-drop{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s-3);margin-top:0;
}
.drop-card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:all var(--dur) var(--ease);cursor:pointer;
  position:relative;
}
.drop-card:hover{border-color:var(--c-text-3);box-shadow:var(--shadow-sm)}
.drop-card-image{
  height:120px;background:var(--c-surface-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.drop-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.drop-card:hover .drop-card-image img{transform:scale(1.04)}
.drop-card-image .placeholder-icon{font-size:1.5rem;color:var(--c-text-3)}
.drop-card-body{padding:var(--s-3) var(--s-4)}
.drop-card-title{font-size:.78rem;font-weight:500;color:var(--c-text);margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop-card-price{font-family:var(--f-display);font-size:.95rem;font-style:italic;color:var(--c-text)}
.drop-card .tl{position:absolute;top:var(--s-2);left:var(--s-2)}

/* ═══════════════════════════════════════
   CATEGORY CHIPS — shop page
   ═══════════════════════════════════════ */
.category-chips{
  display:flex;gap:var(--s-2);flex-wrap:wrap;
  margin-bottom:var(--s-6);
}
.chip{
  font-family:var(--tl-font);font-size:var(--tl-size);
  color:var(--c-text-2);text-transform:uppercase;
  letter-spacing:var(--tl-tracking);
  padding:6px 14px;border:1px solid var(--c-border);
  border-radius:var(--r-full);cursor:pointer;
  transition:all var(--dur) var(--ease);
  background:transparent;display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{border-color:var(--c-text);color:var(--c-text)}
.chip.active{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.chip i{font-size:.6rem}
.chip .chip-count{
  font-size:.55rem;background:var(--c-surface-2);color:var(--c-text-3);
  padding:1px 5px;border-radius:var(--r-full);margin-left:2px;
}
.chip.active .chip-count{background:rgba(255,255,255,.2);color:var(--c-bg)}

/* ═══════════════════════════════════════
   PRODUCT CARD — upgraded with badges
   ═══════════════════════════════════════ */
.product-card-badges{
  position:absolute;top:var(--s-3);left:var(--s-3);
  display:flex;flex-direction:column;gap:4px;z-index:2;
}
.product-card-badge{
  font-family:var(--tl-font);font-size:.58rem;
  padding:2px 7px;border-radius:var(--r-sm);
  text-transform:uppercase;letter-spacing:.08em;
  backdrop-filter:blur(8px);
}
.product-card-badge.format{background:rgba(255,255,255,.9);color:var(--c-text);border:1px solid var(--c-border)}
.product-card-badge.license{background:var(--c-accent);color:#fff;border:none}
.product-card-badge.new{background:var(--c-pop);color:#fff;border:none}

/* Product card hover overlay */
.product-image{position:relative}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Better empty state */
.shop-empty{
  grid-column:1/-1;text-align:center;padding:var(--s-8) var(--s-5);
}
.shop-empty-icon{
  width:64px;height:64px;border-radius:var(--r-full);
  background:var(--c-surface-2);border:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--s-5);font-size:1.3rem;color:var(--c-text-3);
}
.shop-empty h3{font-family:var(--f-display);font-size:1.3rem;font-style:italic;font-weight:400;color:var(--c-text);margin-bottom:var(--s-3)}
.shop-empty p{color:var(--c-text-2);font-size:.88rem;max-width:360px;margin:0 auto var(--s-5);line-height:1.7}
.shop-empty-actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}

/* ═══════════════════════════════════════
   BOOKING PANEL — mini scheduling UI
   ═══════════════════════════════════════ */
.booking-panel{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--s-6);
  margin-top:var(--s-6);
}
.booking-panel-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--s-5);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--c-border);
}
.booking-panel-header h4{
  font-family:var(--f-display);font-size:1.2rem;
  font-weight:400;font-style:italic;color:var(--c-text);
}
.booking-tz{
  font-family:var(--tl-font);font-size:var(--tl-size);
  color:var(--c-text-3);text-transform:uppercase;
  letter-spacing:var(--tl-tracking);
}
.booking-days{display:flex;gap:var(--s-2);margin-bottom:var(--s-4);overflow-x:auto;padding-bottom:var(--s-2)}
.booking-day{
  flex-shrink:0;text-align:center;padding:var(--s-3) var(--s-4);
  border:1px solid var(--c-border);border-radius:var(--r-md);
  cursor:pointer;transition:all var(--dur) var(--ease);
  min-width:56px;
}
.booking-day:hover{border-color:var(--c-text-3)}
.booking-day.active{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.booking-day-name{font-family:var(--tl-font);font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6;display:block;margin-bottom:2px}
.booking-day-num{font-family:var(--f-display);font-size:1.1rem;font-style:italic;display:block}

.booking-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--s-2);margin-bottom:var(--s-5)}
.booking-slot{
  text-align:center;padding:var(--s-2) var(--s-3);
  border:1px solid var(--c-border);border-radius:var(--r-md);
  font-family:var(--tl-font);font-size:.65rem;
  letter-spacing:.04em;color:var(--c-text-2);
  cursor:pointer;transition:all var(--dur) var(--ease);
}
.booking-slot:hover{border-color:var(--c-text);color:var(--c-text)}
.booking-slot.active{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.booking-slot.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

.booking-confirm{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.booking-confirm .btn{flex-shrink:0}
.booking-summary{font-size:.78rem;color:var(--c-text-2)}
.booking-summary strong{color:var(--c-text);font-weight:500}

/* ═══════════════════════════════════════
   FOOTER — editorial minimal
   ═══════════════════════════════════════ */
.footer{
  background:var(--c-text);color:rgba(255,255,255,.45);
  padding:var(--s-8) 0 var(--s-7);
}
.footer-content{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--s-5);
}
.footer-logo{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-body);font-weight:700;font-size:.85rem;
  color:rgba(255,255,255,.8);letter-spacing:.06em;
  text-transform:uppercase;
}
.footer-logo i{display:none}
.footer-logo img{height:24px;width:24px;object-fit:cover;border-radius:var(--r-full)}
.footer p{color:rgba(255,255,255,.3);font-size:.78rem;letter-spacing:.02em}
.footer-social{display:flex;gap:var(--s-3)}
.footer-social a{
  width:32px;height:32px;background:transparent;
  border:1px solid rgba(255,255,255,.15);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4);font-size:.8rem;
  transition:all var(--dur) var(--ease);
}
.footer-social a:hover{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.8)}

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes skillFill{from{width:0%}to{width:var(--width)}}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Scroll Reveal — editorial stagger */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}
.reveal-delay-5{transition-delay:.4s}
.reveal-delay-6{transition-delay:.48s}

/* Legacy compat */
.fade-in{opacity:0;transform:translateY(20px);transition:all var(--dur-slow) var(--ease)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Marquee ticker */
.marquee{
  overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
  padding:var(--s-4) 0;
}
.marquee-track{
  display:inline-flex;gap:var(--s-8);
  animation:marqueeScroll 30s linear infinite;
}
.marquee-item{
  font-family:var(--f-display);font-size:clamp(1.2rem,2.5vw,2rem);
  font-weight:400;font-style:italic;color:var(--c-text-3);
  display:inline-flex;align-items:center;gap:var(--s-4);
  white-space:nowrap;
}
.marquee-item .dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--c-border-2)}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ═══════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════ */
.notification{
  position:fixed;top:var(--s-5);right:var(--s-5);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-lg);
  background:var(--c-accent);
  color:#fff;font-weight:500;font-size:.82rem;z-index:10000;
  display:flex;align-items:center;gap:var(--s-2);
  animation:slideInRight .3s var(--ease);box-shadow:var(--shadow-lg);
  letter-spacing:.02em;
}
.notification-content{display:flex;align-items:center;gap:var(--s-3)}
.notification-content button{background:none;border:none;color:#fff;font-size:1rem;cursor:pointer;opacity:.6}
.notification-content button:hover{opacity:1}
.notification.show{opacity:1}
.notification.success{background:var(--c-success)}
.notification.error{background:var(--c-danger)}
.notification.info{background:var(--c-accent)}
.notification.warning{background:var(--c-pop)}

/* ═══════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════ */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-3)}

/* ═══════════════════════════════════════
   PROFILE & ORDERS PAGES
   ═══════════════════════════════════════ */
.user-profile-section,.orders-section{min-height:80vh;padding:var(--s-9) 0;background:var(--c-bg)}
.profile-header,.orders-header{
  text-align:left;
  margin:0 auto var(--s-7);
  max-width:800px;
  width:100%;
}
.profile-header h1,.orders-header h1{
  font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:400;font-style:italic;color:var(--c-text);letter-spacing:-.01em;margin-bottom:var(--s-3);
}
.profile-header p,.orders-header p{font-size:.95rem;color:var(--c-text-2);max-width:500px}
.profile-content,.orders-content{
  width:100%;max-width:800px;margin:0 auto;background:var(--c-surface);
  border-radius:var(--r-lg);padding:var(--s-7);border:1px solid var(--c-border);
  box-shadow:var(--shadow-sm);
}
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s-3);
  margin-bottom:var(--s-6);
}
.dashboard-stat{
  background:var(--c-surface-2);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:var(--s-4);
}
.dashboard-stat strong{
  display:block;
  font-family:var(--f-display);
  font-size:1.6rem;
  font-weight:600;
  color:var(--c-text);
  line-height:1.1;
}
.dashboard-stat span{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--c-text-2);
}
.loading-spinner{text-align:center;padding:var(--s-7);color:var(--c-text-2)}
.loading-spinner i{font-size:1.2rem;margin-bottom:var(--s-3);color:var(--c-text-3)}
.error-message{text-align:center;padding:var(--s-7);color:var(--c-text-2)}
.error-message i{font-size:2rem;color:var(--c-danger);margin-bottom:var(--s-3)}
.error-message h3{color:var(--c-text);margin-bottom:var(--s-3)}
.profile-info{display:flex;flex-direction:column;gap:0;margin-bottom:var(--s-6)}
.profile-field{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--c-border);
}
.profile-field:first-child{border-top:1px solid var(--c-border)}
.profile-field label{font-weight:500;color:var(--c-text-2);display:flex;align-items:center;gap:var(--s-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.profile-field span{color:var(--c-text);font-size:.9rem}
.role-badge{padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.role-badge.admin{background:rgba(251,191,36,.12);color:#d97706}
.role-badge.user{background:rgba(22,163,74,.12);color:var(--c-success)}
.profile-actions,.orders-actions{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* Orders */
.no-orders{text-align:center;padding:var(--s-7);color:var(--c-text-2)}
.no-orders i{font-size:2rem;color:var(--c-text-3);margin-bottom:var(--s-3);display:block}
.no-orders h3{color:var(--c-text);margin-bottom:var(--s-3);font-family:var(--f-display);font-style:italic;font-weight:400}
.orders-list{display:flex;flex-direction:column;gap:0;margin-bottom:var(--s-6)}
.order-item{
  background:transparent;border-radius:0;padding:var(--s-5) 0;
  border-bottom:1px solid var(--c-border);transition:all var(--dur) var(--ease);
}
.order-item:first-child{border-top:1px solid var(--c-border)}
.order-item:hover{padding-left:var(--s-3)}
.order-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--s-3);flex-wrap:wrap;gap:var(--s-3)}
.order-info h3{color:var(--c-text);margin-bottom:var(--s-1);font-weight:500;font-size:.9rem}
.order-id{font-weight:500;color:var(--c-accent)}
.order-status{padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.order-status.pending{background:rgba(251,191,36,.12);color:#d97706}
.order-status.completed{background:rgba(22,163,74,.12);color:var(--c-success)}
.order-status.cancelled{background:rgba(220,38,38,.1);color:var(--c-danger)}
.order-date,.order-total{color:var(--c-text-2);font-size:.82rem;margin-bottom:var(--s-1);display:flex;align-items:center;gap:var(--s-2)}
.status-badge{padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.status-badge.completed{background:rgba(22,163,74,.12);color:var(--c-success)}
.status-badge.pending{background:rgba(251,191,36,.12);color:#d97706}
.status-badge.cancelled{background:rgba(220,38,38,.1);color:var(--c-danger)}
.order-products h4{color:var(--c-text);margin-bottom:var(--s-3);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.product-list{display:flex;flex-direction:column;gap:0}
.product-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--c-border);gap:var(--s-3);
}
.product-item:last-child{border-bottom:none}
.product-item .product-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.product-item .product-name{font-weight:500;color:var(--c-text);word-break:break-word;font-size:.88rem}
.product-item .product-quantity,.product-item .product-price{font-size:.78rem;color:var(--c-text-2)}
.product-item .product-actions{display:flex;gap:var(--s-2);flex-shrink:0}
.download-btn{padding:var(--s-2) var(--s-4);font-size:.78rem;white-space:nowrap}
.order-items{display:flex;flex-direction:column;gap:0}
.order-item-detail{display:flex;justify-content:space-between;padding:var(--s-2) 0;border-bottom:1px solid var(--c-border);font-size:.82rem}
.order-item-detail:last-child{border-bottom:none}

/* ═══════════════════════════════════════
   SERVICES PAGE — shared styles (from inline)
   ═══════════════════════════════════════ */
.services-hero{padding:var(--s-10) 0 var(--s-8);background:var(--c-bg);text-align:left;border-bottom:1px solid var(--c-border)}
.services-hero h1{font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:400;font-style:italic;color:var(--c-text);letter-spacing:-.01em;margin-bottom:var(--s-4)}
.services-hero p{color:var(--c-text-2);font-size:.95rem;max-width:480px;line-height:1.8}

.services-section{padding:var(--s-9) 0;border-bottom:1px solid var(--c-border)}

.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9);align-items:start}
.service-detail.reverse{direction:rtl}
.service-detail.reverse>*{direction:ltr}

.service-icon-large{width:100%;max-width:320px;margin:0 auto;aspect-ratio:1;background:var(--c-surface-2);border-radius:var(--r-lg);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center}
.service-icon-large i{font-size:2.5rem;color:var(--c-text-3)}
.service-icon-large.green{background:#f0fdf4;border-color:#dcfce7}
.service-icon-large.green i{color:var(--c-success)}
.service-icon-large.purple{background:#faf5ff;border-color:#f3e8ff}
.service-icon-large.purple i{color:#7c3aed}
.service-icon-large.amber{background:#fffbeb;border-color:#fef3c7}
.service-icon-large.amber i{color:#d97706}

.service-text h2{font-family:var(--f-display);font-size:1.8rem;font-weight:400;font-style:italic;color:var(--c-text);margin-bottom:var(--s-5);letter-spacing:-.01em}
.service-text p{color:var(--c-text-2);font-size:.95rem;line-height:1.85;margin-bottom:var(--s-5)}

.service-features{list-style:none;padding:0;margin:0 0 var(--s-6)}
.service-features li{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) 0;color:var(--c-text-2);font-size:.88rem;border-bottom:1px solid var(--c-border)}
.service-features li:last-child{border-bottom:none}
.service-features li i{color:var(--c-text-3);margin-top:3px;flex-shrink:0;font-size:.7rem}
.service-features.green li i{color:var(--c-success)}
.service-features.purple li i{color:#7c3aed}
.service-features.amber li i{color:#d97706}

.pricing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;margin-top:var(--s-6);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.pricing-card{background:var(--c-surface);border:none;border-right:1px solid var(--c-border);border-radius:0;padding:var(--s-7) var(--s-6);text-align:center;transition:all var(--dur) var(--ease);position:relative}
.pricing-card:last-child{border-right:none}
.pricing-card:hover{background:var(--c-surface-2)}
.pricing-card.featured{background:var(--c-surface-2)}
.pricing-card.featured::before{content:'Popular';position:absolute;top:var(--s-4);right:var(--s-4);background:var(--c-text);color:var(--c-bg);padding:2px var(--s-3);border-radius:var(--r-sm);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pricing-card h3{font-family:var(--f-display);font-size:1.1rem;color:var(--c-text);margin-bottom:var(--s-2);font-weight:400;font-style:italic}
.pricing-price{font-family:var(--f-display);font-size:2.5rem;font-weight:400;font-style:italic;color:var(--c-text);margin:var(--s-3) 0;letter-spacing:-.02em}
.pricing-price span{font-size:.85rem;font-weight:400;color:var(--c-text-3);font-style:normal;font-family:var(--f-body)}
.pricing-features{list-style:none;padding:0;margin:var(--s-5) 0;text-align:left}
.pricing-features li{padding:var(--s-2) 0;color:var(--c-text-2);display:flex;align-items:center;gap:var(--s-2);font-size:.85rem;border-bottom:1px solid var(--c-border)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li i{color:var(--c-text-3);font-size:.7rem}

.cta-section{padding:var(--s-9) 0;background:var(--c-text);text-align:center}
.cta-section h2{font-family:var(--f-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:400;font-style:italic;color:var(--c-bg);margin-bottom:var(--s-4);letter-spacing:-.01em}
.cta-section p{color:rgba(255,255,255,.45);font-size:.95rem;margin-bottom:var(--s-7);max-width:480px;margin-left:auto;margin-right:auto;line-height:1.8}
.cta-buttons{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap}

/* ═══════════════════════════════════════
   CALCULATOR PAGE — shared styles (from inline)
   ═══════════════════════════════════════ */
.calc-hero{padding:var(--s-10) 0 var(--s-7);background:var(--c-bg);text-align:left;border-bottom:1px solid var(--c-border)}
.calc-hero h1{font-family:var(--f-display);font-size:clamp(2rem,5vw,3.2rem);font-weight:400;font-style:italic;color:var(--c-text);letter-spacing:-.01em;margin-bottom:var(--s-4)}
.calc-hero p{color:var(--c-text-2);font-size:.95rem;max-width:520px;line-height:1.8}

.calculator-section{padding:var(--s-8) 0 var(--s-9);background:var(--c-bg)}
.calculator-container{display:grid;grid-template-columns:1fr 340px;gap:var(--s-8);max-width:1100px;margin:0 auto}
.calc-options{display:flex;flex-direction:column;gap:var(--s-5)}

.calc-group{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-6)}
.calc-group h3{font-family:var(--f-body);font-size:.82rem;font-weight:600;color:var(--c-text);margin-bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-3);text-transform:uppercase;letter-spacing:.06em}
.calc-group h3 i{color:var(--c-text-3);font-size:.75rem}

.calc-option{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) var(--s-4);background:transparent;border:1px solid var(--c-border);border-radius:var(--r-md);margin-bottom:var(--s-2);cursor:pointer;transition:all var(--dur) var(--ease);user-select:none}
.calc-option:hover{border-color:var(--c-text-3)}
.calc-option.selected{border-color:var(--c-text);background:var(--c-surface-2)}
.calc-option-left{display:flex;align-items:center;gap:var(--s-3)}
.calc-option-left .calc-checkbox{width:18px;height:18px;border:1px solid var(--c-border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.calc-option.selected .calc-checkbox{background:var(--c-text);border-color:var(--c-text)}
.calc-option.selected .calc-checkbox::after{content:'✓';color:var(--c-bg);font-size:.7rem;font-weight:700}
.calc-option-label{color:var(--c-text-2);font-size:.88rem}
.calc-option-price{color:var(--c-text);font-weight:500;font-size:.85rem;white-space:nowrap}

.calc-radio-group{display:flex;flex-direction:column;gap:var(--s-2)}
.calc-radio{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) var(--s-4);background:transparent;border:1px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--dur) var(--ease);user-select:none}
.calc-radio:hover{border-color:var(--c-text-3)}
.calc-radio.selected{border-color:var(--c-text);background:var(--c-surface-2)}
.calc-radio-left{display:flex;align-items:center;gap:var(--s-3)}
.calc-radio-dot{width:18px;height:18px;border:1px solid var(--c-border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.calc-radio.selected .calc-radio-dot{border-color:var(--c-text)}
.calc-radio.selected .calc-radio-dot::after{content:'';width:8px;height:8px;background:var(--c-text);border-radius:50%}

.page-count-control{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-2)}
.page-count-control button{width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--c-border);background:transparent;color:var(--c-text);font-size:1rem;cursor:pointer;transition:all var(--dur) var(--ease);display:flex;align-items:center;justify-content:center}
.page-count-control button:hover{border-color:var(--c-text)}
.page-count-display{font-family:var(--f-display);font-size:1.3rem;font-weight:400;font-style:italic;color:var(--c-text);min-width:40px;text-align:center}

.calc-summary{position:sticky;top:100px;height:fit-content}
.summary-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-6)}
.summary-card h3{font-family:var(--f-display);font-size:1.2rem;font-weight:400;font-style:italic;color:var(--c-text);margin-bottom:var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--c-border)}
.summary-items{margin-bottom:var(--s-4)}
.summary-item{display:flex;justify-content:space-between;align-items:center;padding:var(--s-2) 0;color:var(--c-text-2);font-size:.82rem}
.summary-item-price{color:var(--c-text);font-weight:500}
.summary-divider{height:1px;background:var(--c-border);margin:var(--s-3) 0}
.summary-total{display:flex;justify-content:space-between;align-items:center;padding:var(--s-3) 0}
.summary-total-label{font-size:.85rem;font-weight:500;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.04em}
.summary-total-price{font-family:var(--f-display);font-size:2rem;font-weight:400;font-style:italic;color:var(--c-text);letter-spacing:-.02em}
.summary-note{font-size:.72rem;color:var(--c-text-3);text-align:center;margin-top:var(--s-3);line-height:1.6}
.summary-cta{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.summary-cta .btn{width:100%;justify-content:center}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:768px){
  .nav-menu{
    position:fixed;left:-100%;top:56px;flex-direction:column;
    background:rgba(250,249,247,.97);width:100%;text-align:center;
    transition:.3s var(--ease);backdrop-filter:blur(20px);
    padding:var(--s-7) 0;border-bottom:1px solid var(--c-border);
  }
  .nav-menu.active{left:0}
  .nav-toggle{display:flex}
  .hero{padding:var(--s-9) 0 var(--s-7);min-height:auto}
  .hero-stats{gap:var(--s-5);flex-wrap:wrap}
  .hero-content{grid-template-columns:1fr}
  .featured-drop{grid-template-columns:repeat(2,1fr);margin-top:var(--s-5)}
  .commerce-proof{gap:var(--s-3);flex-direction:column}
  .about-content,.contact-content{grid-template-columns:1fr;gap:var(--s-6)}
  .maps-grid{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .services-grid{grid-template-columns:1fr}
  .service-card:nth-child(odd){border-right:none;padding-right:0}
  .service-card:nth-child(even){padding-left:0}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-step{border-right:none;border-bottom:1px solid var(--c-border)}
  .process-step:last-child{border-bottom:none}
  .testimonials-grid{grid-template-columns:1fr}
  .testimonial-card{border-right:none;border-bottom:1px solid var(--c-border)}
  .testimonial-card:last-child{border-bottom:none}
  .footer-content{flex-direction:column;text-align:center;gap:var(--s-4)}
  .product-details-content{width:100%;max-width:100%;max-height:100%;border-radius:0;height:100vh}
  .product-details-header{padding:var(--s-4) var(--s-5)}
  .product-details-body{padding:var(--s-4)}
  .product-info{grid-template-columns:1fr;gap:var(--s-4)}
  .cart-content{width:95%;max-height:90vh}
  .profile-content,.orders-content{margin:0 var(--s-4);padding:var(--s-5)}
  .profile-field{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
  .product-item{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .service-detail{grid-template-columns:1fr;gap:var(--s-5)}
  .service-detail.reverse{direction:ltr}
  .service-icon-large{max-width:200px}
  .product-page{padding:var(--s-6) 0 var(--s-8)}
  .product-page-layout{grid-template-columns:1fr;gap:var(--s-5)}
  .product-page-summary{position:static;padding:var(--s-5)}
  .product-page-title{font-size:1.6rem}
  .product-page-facts{grid-template-columns:1fr}
  .product-page-price{font-size:1.9rem}
  .product-page-sections{grid-template-columns:1fr;gap:var(--s-4);margin-top:var(--s-6)}
  .calculator-container{grid-template-columns:1fr}
  .calc-summary{position:relative;top:0}
  .pricing-cards{grid-template-columns:1fr}
  .pricing-card{border-right:none;border-bottom:1px solid var(--c-border)}
  .pricing-card:last-child{border-bottom:none}
  .details-anchor{display:block;text-decoration:none;color:var(--c-text);font-size:.85rem}
  .details-anchor:hover{text-decoration:none}
  .booking-days{gap:var(--s-1)}
  .booking-day{min-width:48px;padding:var(--s-2) var(--s-3)}
  .booking-slots{grid-template-columns:repeat(3,1fr)}
  .booking-confirm{flex-direction:column;align-items:stretch}
  .category-chips{gap:var(--s-1)}
}

@media(max-width:480px){
  .hero-stats{flex-direction:column;gap:var(--s-4)}
  .hero-buttons{flex-direction:column;width:100%}
  .hero-buttons .btn{width:100%;justify-content:center}
  .process-steps{grid-template-columns:1fr}
  .gallery-thumbnail{width:48px;height:36px}
  .featured-drop{grid-template-columns:1fr 1fr}
  .drop-card-image{height:90px}
  .booking-slots{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:769px) and (max-width:1024px){
  .container{max-width:95%}
  .maps-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:repeat(auto-fit,minmax(300px,340px));justify-content:center}
  .about-content,.contact-content{grid-template-columns:1fr}
  .product-info{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .service-card:nth-child(odd){border-right:none;padding-right:0}
  .service-card:nth-child(even){padding-left:0}
  .hero-content{grid-template-columns:1fr 1fr}
  .featured-drop{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1440px){
  .container{max-width:var(--container-wide)}
  .shop-grid{grid-template-columns:repeat(auto-fit,minmax(300px,340px));justify-content:center}
  .featured-drop{grid-template-columns:repeat(2,1fr)}
}