:root{
  --bg:#eef0e6;
  --ink:#121212;
  --muted:rgba(18,18,18,.68);
  --hair:rgba(18,18,18,.12);
  --card:rgba(255,255,255,.38);
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background: var(--bg);
  letter-spacing:-.01em;
}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max), calc(100vw - 44px)); margin:0 auto}
.smallcaps{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* Header */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(238,240,230,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--hair);
}
.headerRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brandLogo{width:60px;height:60px;border-radius:16px}
.brandLogo img{width:100%;height:100%;object-fit:cover;display:block}
.brandName{font-weight:700}
.brandSub{font-size:12px;color:var(--muted);margin-top:2px}
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:8px 0;border-bottom:1px solid rgba(0,0,0,0)}
.nav a:hover{border-bottom-color:rgba(0,0,0,.22);opacity:1}
.nav a.active{color:var(--ink)}
.lang{display:flex;gap:10px;align-items:center;padding-left:10px;border-left:1px solid var(--hair)}
#cart-toggle{
  width:44px;height:44px;border-radius:999px;
  border:1px solid var(--hair);
  background: rgba(255,255,255,.35);
  cursor:pointer;
}
/* Hero */
.hero{
  padding: 16px 0 0;
}
.heroBanner{
  position:relative;
  height: clamp(520px, 72vh, 760px);
  border-radius: calc(var(--radius) + 10px);
  overflow:hidden;
  background: #000;
}
.heroVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.heroOverlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 560px at 18% 22%, rgba(255,255,255,.12), rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.06) 75%, rgba(0,0,0,0) 100%);
}
.heroContent{
  position:absolute; left:0; bottom:0;
  padding: clamp(22px, 3.6vw, 54px);
  width: min(900px, calc(100% - 44px));
  color: rgba(255,255,255,.96);
}
.heroTitle{
  margin: 10px 0 14px;
  font-size: clamp(58px, 6.6vw, 120px);
  line-height: .88;
  letter-spacing: -.07em;
}
.heroText{
  margin: 0;
  max-width: 70ch;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.75;
  opacity:.92;
}
.heroActions{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.26);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
}
.btnPrimary{background:#fff;color:#111;border-color:transparent}
.btnGhost{background:rgba(255,255,255,.06);color:#fff}
/* Sections */
.section{padding: 64px 0}
.sectionHead{display:flex;flex-direction:column;gap:8px;max-width: 80ch}
.h2{margin:0;font-size:26px;letter-spacing:-.02em}
.p{margin:0;color:rgba(18,18,18,.74);line-height:1.85;font-size:16px}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;margin-top:22px}
.media img{width:100%;height:420px;object-fit:cover;display:block;border-radius:18px}
.media.small img{height:320px}
.twoPhoto{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.twoPhoto img{width:100%;height:320px;object-fit:cover;border-radius:18px;display:block}
@media (max-width: 980px){
  .grid2{grid-template-columns:1fr}
  .media img{height:320px}
  .twoPhoto{grid-template-columns:1fr}
  .twoPhoto img{height:240px}
  .heroOverlay{background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 58%, rgba(0,0,0,0) 100%)}
}
/* Shop */
.products{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.product{
  border:1px solid var(--hair);
  background: rgba(255,255,255,.32);
  border-radius: 22px;
  overflow:hidden;
}
.product img{
  width:100%;
  height: 220px;
  object-fit:cover;
  display:block;
}
.productBody{padding:16px}
.productName{font-weight:700}
.productMeta{color:var(--muted);font-size:13px;margin-top:6px}
.productBuy{margin-top:12px}
@media (max-width: 980px){ .products{grid-template-columns:1fr} }
/* Gallery */
.galleryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.galleryGrid img{width:100%;height:200px;object-fit:cover;border-radius:16px;display:block}
@media (max-width: 980px){ .galleryGrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .galleryGrid{grid-template-columns:1fr} .galleryGrid img{height:220px} }
/* Footer */
footer{padding:40px 0 64px;border-top:1px solid var(--hair);color:var(--muted);font-size:13px}
.footerRow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footerLinks{display:flex;gap:14px;flex-wrap:wrap}
.footerLinks a{border-bottom:1px solid rgba(0,0,0,.18)}
/* Lightbox */
.lb{position:fixed;inset:0;display:none;z-index:90}
.lb.open{display:block}
.lbBg{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.lbWrap{position:absolute;inset:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.lbImg{max-width:min(1100px,94vw);max-height:80vh;border-radius:16px;box-shadow:0 30px 120px rgba(0,0,0,.45)}
.lbCap{color:rgba(255,255,255,.82);font-size:13px;text-align:center;max-width:80ch}
.lbClose{
  position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.28);color:#fff;cursor:pointer;font-size:16px
}

/* v17: full-bleed hero video + subtle text fade */
.heroFull{padding:0}
.heroFull .container{width:min(var(--max), calc(100vw - 44px)); margin:0 auto}

/* Full-bleed banner (break out of container) */
.heroBanner{
  width:100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
}

.heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Keep overlay consistent */
.heroOverlay{position:absolute; inset:0}

/* Text sits inside container but overlays banner */
.heroContent{
  animation: heroFadeUp .9s ease-out both;
}
@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Better poster appearance during load */
.heroBanner{
  background: #0b0b0b;
}


/* v18: mobile header + hamburger */
.heroBanner{
  height: clamp(620px, 80vh, 900px); /* taller on desktop */
}

/* Hamburger */
#menu-toggle{
  display:none;
  width:44px;height:44px;border-radius:999px;
  border:1px solid var(--hair);
  background: rgba(255,255,255,.35);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
@media (max-width: 980px){
  /* header becomes compact */
  .headerRow{padding:10px 0}
  .brand{min-width:0}
  .brandLogo{width:34px;height:34px;border-radius:10px}
  .brandName{font-size:14px}
  .brandSub{display:none} /* saves vertical space */
  .nav{gap:10px}
  .nav > a{display:none} /* hide desktop links */
  .lang{border-left:none;padding-left:0}
  #menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  #cart-toggle{width:42px;height:42px}

  /* Mobile menu panel */
  #mobile-menu{
    position:fixed;
    top:62px; /* below header */
    left:0; right:0;
    background: rgba(238,240,230,.98);
    border-bottom:1px solid var(--hair);
    backdrop-filter: blur(10px);
    transform: translateY(-110%);
    transition: transform .22s ease;
    z-index:45;
    padding: 14px 0 18px;
  }
  #mobile-menu.open{ transform: translateY(0); }
  #mobile-menu .container{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  #mobile-menu a{
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color: var(--muted);
    padding: 10px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  #mobile-menu a:last-child{border-bottom:none}
  body.menuOpen{overflow:hidden}

  /* Hero a bit shorter on mobile so content appears */
  .heroBanner{height: min(64vh, 520px);}
  .heroContent{width: calc(100% - 44px);}
}


/* v19: header cleanup + proper mobile hamburger */
.brandLogo{width:58px;height:58px;border-radius:16px}
@media (max-width: 980px){ .brandLogo{width:50px;height:50px;border-radius:14px} }

.brandSub{display:none !important}

#menu-toggle{display:none}
.navLinks{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.langLinks{display:flex;gap:10px;align-items:center;padding-left:10px;border-left:1px solid var(--hair)}

@media (max-width: 980px){
  .headerRow{padding:10px 0}
  .brandName{font-size:15px}
  .navLinks,.langLinks{display:none !important}
  #menu-toggle{display:inline-flex;align-items:center;justify-content:center}

  #mobile-menu{display:block}
  #mobile-menu{position:fixed;inset:0;z-index:70;pointer-events:none}
  #mobile-menu .mobileMenuOverlay{
    position:absolute;inset:0;background:rgba(0,0,0,.38);
    opacity:0;transition:opacity .2s ease;
  }
  #mobile-menu .mobileMenuPanel{
    position:absolute;top:0;right:0;bottom:0;
    width:min(320px, 86vw);
    background: rgba(238,240,230,.98);
    backdrop-filter: blur(12px);
    border-left:1px solid var(--hair);
    transform: translateX(105%);
    transition: transform .24s ease;
    padding: 18px 18px 22px;
    display:flex;flex-direction:column;gap:14px;
  }
  #mobile-menu.open{pointer-events:auto}
  #mobile-menu.open .mobileMenuOverlay{opacity:1}
  #mobile-menu.open .mobileMenuPanel{transform: translateX(0)}
  .mobileMenuTop{display:flex;align-items:center;justify-content:space-between}
  .mobileMenuTitle{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .mobileMenuClose{
    width:40px;height:40px;border-radius:999px;
    border:1px solid var(--hair);background: rgba(255,255,255,.40);
    cursor:pointer;font-size:16px;
  }
  .mobileMenuNav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
  .mobileMenuNav a{
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color: var(--muted);
    padding: 12px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .mobileMenuNav a:last-child{border-bottom:none}
  .mobileMenuLang{display:flex;gap:14px;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
  .mobileMenuLang a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .mobileMenuLang a.active{color:var(--ink);font-weight:700}
}

@media (min-width: 981px){
  #mobile-menu{display:none !important}
}

.legacyNavStrip{display:none !important}


/* v20: header visibility rules (desktop clean, mobile drawer only) */
/* Default (desktop) */
.navLinks{display:flex !important}
.langLinks{display:flex !important}
#menu-toggle{display:none !important}
#mobile-menu{display:none !important}

/* Mobile */
@media (max-width: 980px){
  .navLinks{display:none !important}
  .langLinks{display:none !important}
  #menu-toggle{display:inline-flex !important;align-items:center;justify-content:center}
  #mobile-menu{display:block !important}
}


/* v21: pro animations + product 1:1 + shop button styling + cookie popup */

/* Reveal animation */
[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease;}
[data-reveal].is-visible{opacity:1; transform: translateY(0);}

/* Product images square (1:1) */
.product img{
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Shopify product image wrapper: force 1:1 and crop nicely */
.shopify-buy__product-img-wrapper{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
}
.shopify-buy__product-img-wrapper img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Story gallery: smaller, centered, not full-bleed */
.storyGallery{margin-top:22px; display:flex; justify-content:center;}
.storyGallery .galleryGrid{width:min(900px, 100%);}
.storyGallery .galleryGrid img{height:140px;}
@media (max-width: 560px){ .storyGallery .galleryGrid img{height:200px;} }

/* Shopify Buy Button: premium style */
.shopify-buy__btn{
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  transition: transform .12s ease, opacity .12s ease !important;
}
.shopify-buy__btn:hover{transform: translateY(-1px) !important; opacity: .95 !important;}
.shopify-buy__btn:active{transform: translateY(0) !important; opacity: .9 !important;}
.shopify-buy__btn[disabled]{opacity:.6 !important;}
.shopify-buy__quantity-container,
.shopify-buy__quantity-decrement,
.shopify-buy__quantity-increment,
.shopify-buy__quantity{
  border-radius: 999px !important;
}

/* Cookie popup */
.cookiePopup{
  position:fixed;
  left: 18px;
  bottom: 18px;
  width: min(520px, calc(100vw - 36px));
  z-index: 120;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(18,18,18,.12);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 90px rgba(0,0,0,.12);
}
.cookiePopup.hide{opacity:0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease;}
.cookiePopupInner{display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding: 14px;}
.cookiePopupText{font-size:13px; color: rgba(18,18,18,.74); line-height:1.55;}
.cookiePopupText strong{display:block; color:#111; margin-bottom:2px}
.cookiePopupText a{border-bottom:1px solid rgba(0,0,0,.22)}
.cookiePopupActions{display:flex; gap:10px; flex-shrink:0; align-items:center}
.cookieBtn{
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#111;
  color:#fff;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.cookieBtn.ghost{
  background: rgba(255,255,255,.35);
  color:#111;
}
@media (max-width: 560px){
  .cookiePopupInner{flex-direction:column; align-items:stretch}
  .cookiePopupActions{justify-content:flex-start}
}


/* v22: shopify image square */
.shopify-buy__product-img-wrapper img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/* v23: make layout feel fuller + premium */
body{
  background-image: radial-gradient(transparent 1px, rgba(0,0,0,0) 1px);
  background-size: 18px 18px;
}

/* Section breathing & separators */
.section{padding: 84px 0}
.section + .section{border-top: 1px solid rgba(0,0,0,.06)}
.kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(18,18,18,.55);
  margin-bottom: 10px;
}
.h2{margin-bottom: 10px}
.p{max-width: 56ch}

/* Feature ticks */
.ticks{list-style:none; padding:0; margin: 18px 0 0; display:flex; gap:18px; flex-wrap:wrap; color: rgba(18,18,18,.65); font-size: 13px;}
.ticks li{display:flex; align-items:center; gap:10px}
.ticks .dot{width:6px;height:6px;border-radius:99px;background: rgba(18,18,18,.35); display:inline-block}

/* Product cards: more premium */
.products{margin-top: 18px}
.product{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
}
.product .shopify-buy__product__title{letter-spacing:.02em}
.shopify-buy__product__price{color: rgba(18,18,18,.72)}

/* Make Shopify button not look like browser default even if inline styles fail */
.shopify-buy__btn{appearance:none; -webkit-appearance:none}
.shopify-buy__btn:focus{outline: 2px solid rgba(0,0,0,.25); outline-offset: 2px}

/* Gallery: make it feel more editorial */
.galleryGrid{gap:12px}
.galleryGrid img{border-radius: 14px}

/* Responsive */
@media (max-width: 980px){
  .section{padding: 64px 0}
  .ticks{gap:12px}
}


/* v24: shopify square images + nicer spacing */
.shopify-buy__product-img-wrapper,
.shopify-buy__product__image{
  aspect-ratio: 1 / 1;
}
.shopify-buy__product__image{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
}
.shopify-buy__product__image-wrapper{
  width:100% !important;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius: 14px;
}
.shopify-buy__btn{cursor:pointer}
.shopify-buy__cart-toggle{
  box-shadow: 0 14px 50px rgba(0,0,0,.18);
}

/* Hide floating cart toggle: cart is accessed from header icon */
.shopify-buy__cart-toggle{display:none !important;}

/* Testimonials */
.heroNote{
  margin: 10px 0 0;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.7;
  opacity: .88;
}
.testimonialsWrap{margin-top:24px}
.testimonialsGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tCard{
  border:1px solid var(--hair);
  background: rgba(255,255,255,.32);
  border-radius: 22px;
  padding: 18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.tAvatar{
  width:56px;height:56px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid rgba(0,0,0,.10);
}
.tQuote{margin:0;color:rgba(18,18,18,.78);line-height:1.75;font-size:15px}
.tName{margin-top:10px;color:rgba(18,18,18,.60);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width: 980px){
  .testimonialsGrid{grid-template-columns:1fr}
}