/* v8 — photo-forward luxury + product cards */
:root{
  --sage:#c8d1b8;
  --ink:#0b0b0b;
  --muted: rgba(11,11,11,.62);
  --hair: rgba(11,11,11,.08);
  --radius: 30px;
  --max: 1480px;
  --pad: clamp(22px, 4.5vw, 90px);
  --shadow: 0 34px 120px rgba(0,0,0,.13);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Arial,sans-serif;
  background: var(--sage);
  color: var(--ink);
}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Background image layer */
.bg{position:fixed;inset:0;z-index:-2;background:url("/assets/img/bg.jpg") center/cover no-repeat;opacity:.18;filter:saturate(.95) contrast(.98)}
.bgShade{position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 18% 12%, rgba(255,255,255,.22), rgba(255,255,255,0)),radial-gradient(1000px 700px at 80% 60%, rgba(255,255,255,.14), rgba(255,255,255,0))}

/* Header */
header{position:sticky;top:0;z-index:10;background:rgba(200,209,184,.62);backdrop-filter:blur(16px)}
.headerInner{height:92px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:220px}
.logoSquare{height:38px;width:38px;border-radius:12px;overflow:hidden;border:1px solid rgba(11,11,11,.10);background:rgba(255,255,255,.14);display:grid;place-items:center}
.logoSquare img{width:100%;height:100%;object-fit:cover;display:block}
.brandText{font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-size:13px;text-decoration:none;opacity:.72}
.nav a:hover{opacity:1}
.lang a{font-size:12px;text-decoration:none;opacity:.55;font-weight:750;letter-spacing:.06em}
.lang a.active{opacity:1}
.iconbtn{height:40px;width:40px;border-radius:999px;border:1px solid rgba(11,11,11,.10);background:rgba(255,255,255,.14);cursor:pointer}

/* Hero */
.hero{padding:clamp(54px,7vw,120px) 0 0}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.62;margin-bottom:14px}
h1{margin:10px 0 0;font-size:clamp(62px,7.0vw,118px);line-height:.92;letter-spacing:-0.07em;max-width:18ch}
.sub{margin:22px 0 0;font-size:clamp(18px,1.55vw,21px);line-height:1.78;color:var(--muted);max-width:78ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:999px;text-decoration:none;font-size:13px;letter-spacing:.02em;border:1px solid transparent}
.btnPrimary{background:var(--ink);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.20)}
.btnGhost{background:transparent;border-color:rgba(11,11,11,.26);color:var(--ink)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid rgba(11,11,11,.10);background:rgba(255,255,255,.12);font-size:12px;color:rgba(11,11,11,.74)}

/* Big top banner */
.banner{margin-top:34px;border-radius:calc(var(--radius) + 16px);overflow:hidden;border:1px solid rgba(11,11,11,.08);background:rgba(255,255,255,.08);box-shadow:var(--shadow)}
.banner img{width:100%;height:clamp(420px,54vw,860px);object-fit:cover;display:block}

/* Sections */
.section{padding:clamp(78px,8.6vw,142px) 0}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start}
.h2{font-size:34px;margin:0 0 16px;letter-spacing:-0.03em}
.p{margin:0;font-size:16px;line-height:1.9;color:var(--muted)}
.stack{display:grid;gap:14px}

/* Shop */
.shop{padding:54px 0;background:rgba(255,255,255,.08);border-top:1px solid rgba(11,11,11,.08);border-bottom:1px solid rgba(11,11,11,.08)}
.shopHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.shopGrid{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.productCard{border-radius:calc(var(--radius) + 12px);overflow:hidden;border:1px solid rgba(11,11,11,.08);background:rgba(255,255,255,.10)}
.productMedia{aspect-ratio:4 / 5;width:100%;background:rgba(255,255,255,.08)}
.productMedia img{width:100%;height:100%;object-fit:cover;display:block}
.productBody{padding:18px}
.productName{font-weight:900;letter-spacing:-.01em}
.productMeta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.badge{font-size:12px;padding:8px 10px;border-radius:999px;border:1px solid rgba(11,11,11,.10);background:rgba(255,255,255,.10);opacity:.9}
.price{font-weight:900}
.productDesc{margin-top:12px;color:var(--muted);line-height:1.75;font-size:14px}
.productActions{margin-top:16px;display:grid;gap:10px}

.small{font-size:12px;opacity:.68;line-height:1.6}
.hr{height:1px;background:rgba(11,11,11,.10);border:0;margin:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.block{border:1px solid rgba(11,11,11,.08);border-radius:24px;padding:18px;background:rgba(255,255,255,.10)}
.block code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;opacity:.70;white-space:pre-wrap;display:block}

/* Gallery */
.galleryWrap{padding-top:0}
.galleryHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.galleryGrid{margin-top:28px;display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.ph{border-radius:calc(var(--radius) + 10px);overflow:hidden;border:1px solid rgba(11,11,11,.08);background:rgba(255,255,255,.08)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.a{grid-column:1/span 7;grid-row:span 2;height:min(560px,56vw)}
.ph.b{grid-column:8/span 5;height:min(272px,32vw)}
.ph.c{grid-column:8/span 5;height:min(272px,32vw)}
.ph.d{grid-column:1/span 4;height:min(280px,34vw)}
.ph.e{grid-column:5/span 4;height:min(280px,34vw)}
.ph.f{grid-column:9/span 4;height:min(280px,34vw)}
.ph.g{grid-column:1/span 6;height:min(340px,40vw)}
.ph.h{grid-column:7/span 6;height:min(340px,40vw)}

/* Footer */
.footer{padding:clamp(56px,6vw,92px) 0}
.footerGrid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:30px}
.label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.62;margin-bottom:12px}
.footerBottom{margin-top:30px;padding-top:16px;border-top:1px solid rgba(11,11,11,.08);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;opacity:.62}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .9s ease, transform .9s ease}
  [data-reveal].in{opacity:1;transform:none}
}

/* Mobile */
@media (max-width:1100px){
  .nav .links{display:none}
  .grid,.footerGrid{grid-template-columns:1fr}
  h1{max-width:none}
  .shopGrid{grid-template-columns:1fr}
  .ph.a,.ph.b,.ph.c,.ph.d,.ph.e,.ph.f,.ph.g,.ph.h{grid-column:1/span 12;height:auto}
  .ph img{height:clamp(280px,70vw,520px)}
  .banner img{height:clamp(340px,70vw,620px)}
}


/* Cookie banner */
.cookieBanner{
  position: fixed;
  inset: auto 0 0 0;
  padding: 16px;
  display:flex;
  justify-content:center;
  z-index: 50;
  pointer-events:none;
}
.cookieCard{
  pointer-events:auto;
  width: min(720px, calc(100vw - 32px));
  border-radius: 24px;
  border: 1px solid rgba(11,11,11,.12);
  background: rgba(200,209,184,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 90px rgba(0,0,0,.18);
  padding: 16px 16px 14px;
}
.cookieTitle{
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.cookieMsg{
  font-size: 13px;
  line-height: 1.55;
  opacity: .78;
}
.cookieLinks{
  margin-top: 8px;
  font-size: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  opacity:.78;
}
.cookieLinks a{ text-decoration:none; border-bottom:1px solid rgba(11,11,11,.22) }
.cookieActions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.cookieBtn{
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid rgba(11,11,11,.14);
  cursor:pointer;
  background: rgba(255,255,255,.18);
}
.cookieBtn.primary{
  background:#0b0b0b;
  color:#fff;
  border-color: transparent;
}
.cookieBtn.ghost{
  background: transparent;
}

/* --- Photo treatment: no framed placeholders (clean, edge-to-edge) --- */
.heroBanner,
.figure,
.productMedia,
.gItem{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.heroBanner img,
.figure img,
.productMedia img,
.gItem img{
  border-radius: 0 !important;
}


/* Hero banner (text over image) */
.heroWrap{padding: clamp(22px, 2.6vw, 44px) 0 0;}
.heroBanner{
  position:relative;
  border-radius: calc(var(--radius) + 18px);
  overflow:hidden;
  border:1px solid rgba(11,11,11,.08);
  background: rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.heroBanner img{
  width:100%;
  height: clamp(520px, 72vw, 900px);
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
.heroOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.06) 70%, rgba(0,0,0,0) 100%);
}
.heroContent{
  position:absolute;
  inset:auto auto 0 0;
  width: min(880px, calc(100% - 44px));
  padding: clamp(26px, 4vw, 56px);
  color: rgba(255,255,255,.95);
}
.heroKicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .88;
  margin-bottom: 14px;
}
.heroTitle{
  margin:0;
  font-size: clamp(62px, 6.8vw, 118px);
  line-height:.90;
  letter-spacing:-.07em;
}
.heroSub{
  margin: 18px 0 0;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.75;
  opacity:.90;
  max-width: 70ch;
}
.heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.heroPills{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.heroPills .pill{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.10);color:rgba(255,255,255,.92)}
@media (max-width:1100px){
  .heroContent{width: calc(100% - 18px);padding: 22px}
  .heroOverlay{background: linear-gradient(0deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%)}
}

/* Photo treatment: remove framed/boxed look */
.heroBanner,
.figure,
.productMedia,
.gItem{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.heroBanner img,
.figure img,
.productMedia img,
.gItem img{
  border-radius: 0 !important;
}

/* Keep a touch of polish on products: spacing instead of boxes */
.productCard{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}