:root{
  --black:#0c0c0c;
  --white:#fff;
  --paper:#f6f4f0;
  --soft:#eeebe6;
  --ink:#121212;
  --muted:#77736e;
  --line:rgba(18,18,18,.12);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;width:100%}
.topbar{
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  height:72px;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:0 4.2vw;
  color:rgba(255,255,255,.82);
  mix-blend-mode:difference;
}
.brand{font-size:24px;font-weight:850;letter-spacing:-.06em;line-height:1}
.ig,.ghost,.lang{border:0;background:transparent;color:inherit;padding:7px;display:grid;place-items:center}
.ig svg,.ghost svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
nav{display:flex;justify-content:center;gap:34px;text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:700}
.actions{display:flex;align-items:center;gap:12px}
.cart-button{position:relative}
.cart-count{position:absolute;right:0;top:0;min-width:17px;height:17px;border-radius:50%;background:currentColor;color:var(--black);font-size:10px;display:grid;place-items:center;font-weight:800}
.lang{font-weight:800;letter-spacing:.12em;font-size:12px}

.hero-cover{
  min-height:100svh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--black);
  color:var(--white);
  isolation:isolate;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 44% 42%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.74) 54%, rgba(0,0,0,.52)),
    url("https://maana.lv/web/image/13789/maana-slider-texture-bg-20260715-101231.png") center/cover;
  filter:grayscale(1) contrast(1.22) brightness(.5);
  transform:scale(1.035);
}
.hero-bg:after{
  content:"";
  position:absolute;
  inset:-8vh -7vw -18vh auto;
  width:min(72vw,1180px);
  background:url("https://maana.lv/maana_quick_checkout/static/src/img/maana-bandana-model-hq-1920.png") 64% 52%/contain no-repeat;
  filter:grayscale(1) contrast(1.18) brightness(.76);
  opacity:.86;
  transform:scale(1.32);
}
.hero-cover:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.08) 36%, rgba(0,0,0,.35)),
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(0,0,0,.44) 72%);
  pointer-events:none;
}
.cover-title{
  position:relative;
  z-index:2;
  text-align:center;
  transform:translateY(11vh);
  width:min(92vw,960px);
}
.cover-title h1{
  margin:0;
  font-size:clamp(82px,12.2vw,176px);
  line-height:.78;
  font-weight:900;
  letter-spacing:-.082em;
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.cover-title p{
  margin:20px 0 0;
  font-size:clamp(18px,2.2vw,30px);
  font-weight:300;
  letter-spacing:-.035em;
  color:rgba(255,255,255,.9);
}
.cover-title p::first-letter{font-family:var(--serif);font-style:italic}
.cover-scroll{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.58);
}

.home-storefront{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100svh;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.storefront-panel{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  border-right:1px solid var(--line);
  display:flex;
  align-items:flex-end;
}
.storefront-panel:last-child{border-right:0}
.storefront-panel img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.storefront-panel:first-child img{
  object-position:70% 50%;
  filter:grayscale(.08) contrast(1.02);
}
.storefront-panel:nth-child(2) img{
  object-fit:contain;
  padding:7vw;
  background:#efede8;
}
.storefront-panel:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 44%, rgba(0,0,0,.55));
}
.storefront-panel:nth-child(2):after{background:linear-gradient(180deg, transparent 48%, rgba(255,255,255,.72))}
.storefront-panel>div{
  position:relative;
  z-index:1;
  padding:0 3vw 4vw;
  color:var(--white);
  max-width:560px;
}
.storefront-panel:nth-child(2)>div{color:var(--ink)}
.storefront-panel h2{
  font-family:var(--sans);
  font-size:clamp(28px,3.2vw,58px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:300;
}
.storefront-panel .quiet-link{color:inherit;border-color:currentColor}
.micro{
  margin:0 0 18px;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
}
h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(44px,5.2vw,92px);
  line-height:.92;
  letter-spacing:-.055em;
  font-weight:400;
}
.price{
  margin:32px 0 0;
  font-size:18px;
  letter-spacing:.03em;
}
.description{
  margin:32px 0 0;
  max-width:420px;
  color:#615d58;
  line-height:1.8;
  font-size:15px;
}
.swatches,.size-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:30px;
}
.swatches button,.size-line button{
  min-width:46px;
  height:42px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
}
.swatches .active,.size-line .active{border-color:var(--black);background:var(--black);color:var(--white)}
.size-line span{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--muted);margin-right:8px}
.button{
  min-height:58px;
  border:1px solid var(--black);
  background:transparent;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 28px;
  margin-top:34px;
  width:min(100%,360px);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11px;
  font-weight:800;
}
.button.dark{background:var(--black);color:var(--white)}
.quiet-link{
  margin-top:22px;
  width:max-content;
  border-bottom:1px solid currentColor;
  padding-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10px;
  color:#5d5954;
}

.intro{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.intro p{
  margin:0;
  padding:24px 4vw;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:700;
  text-align:center;
  color:#5d5954;
  border-right:1px solid var(--line);
}
.intro p:last-child{border-right:0}

.editorial{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:92svh;
  background:var(--black);
  color:var(--white);
}
.editorial-image{display:grid;place-items:center;overflow:hidden}
.editorial-image img{
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.08);
}
.editorial-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vw;
}
.editorial-copy p:not(.micro){
  color:rgba(255,255,255,.68);
  max-width:460px;
  line-height:1.85;
  font-size:15px;
}

.collection{padding:118px 4.6vw 132px;background:#f7f6f3}
.section-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:32px;
  margin-bottom:40px;
}
.filters{display:flex;gap:20px;flex-wrap:wrap}
.filters button{
  border:0;
  background:transparent;
  padding:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10px;
  font-weight:800;
  color:#77736e;
  border-bottom:1px solid transparent;
}
.filters button.active{color:var(--ink);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d7d3cb;border:1px solid #d7d3cb}
.card{
  background:#f9f7f2;
  cursor:pointer;
  min-width:0;
}
.media{position:relative;background:#f6f4ef;padding:34px 26px 18px}
.media img{aspect-ratio:1.18;object-fit:contain;transition:transform .45s ease}
.card:hover .media img{transform:translateY(-5px) scale(1.015)}
.card-copy{padding:0 18px 18px}
.card-copy h3{
  margin:0;
  font-family:var(--sans);
  font-size:11px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.015em;
}
.price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:9px;
  font-size:10px;
  color:#4d4944;
}
.price-row span{text-transform:none}
.price-row b{font-weight:500}

.checkout-preview{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw;
  padding:118px 6vw;
  background:var(--white);
}
.checkout-preview p:not(.micro){max-width:520px;color:#625d58;line-height:1.85}
.checkout-card{background:#f5f3ef;border:1px solid var(--line);padding:34px;display:grid;gap:18px}
label span{display:block;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:10px;font-weight:800;margin-bottom:8px}
input{width:100%;border:1px solid var(--line);background:var(--white);padding:17px;color:var(--ink);outline:0}
.map-preview{height:170px;border:1px solid var(--line);display:grid;place-items:center;color:#6b645b;background:#e5e1da}

.drawer{
  position:fixed;
  z-index:50;
  right:0;
  top:0;
  height:100dvh;
  width:min(520px,92vw);
  background:var(--white);
  transform:translateX(105%);
  transition:.35s ease;
  padding:34px;
  overflow:auto;
  border-left:1px solid var(--line);
}
.drawer.open{transform:translateX(0)}
.close{border:0;background:transparent;padding:0;margin-bottom:24px;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--muted);font-weight:800}
.drawer-body img{background:#f2f0ec;padding:24px;aspect-ratio:4/5;object-fit:contain}
.drawer-body h2{margin:24px 0 14px}
.drawer-body p{line-height:1.75;color:#625d55}
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.options button{border:1px solid var(--line);background:transparent;padding:14px}
.cart-line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:18px 0}
.cart-line img{background:#f2f0ec;padding:7px;aspect-ratio:1;object-fit:contain}
.cart-line h3{font-family:var(--serif);font-size:18px;font-weight:400;margin:0 0 4px}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:28px;margin:28px 0}
.product-modal{
  width:100vw;
  padding:0;
  border-left:0;
}
.product-modal .close{
  position:fixed;
  z-index:3;
  top:28px;
  right:34px;
  color:var(--ink);
}
.product-modal .drawer-body{min-height:100dvh}
.pdp{
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(380px,.62fr);
  background:var(--white);
}
.pdp-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:#d7d3cb;
}
.pdp-image{
  background:#f6f4ef;
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:5vw 3vw;
}
.pdp-image img{
  max-height:78vh;
  object-fit:contain;
  background:transparent;
  padding:0;
  aspect-ratio:auto;
}
.pdp-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vw 5vw 7vw;
  border-left:1px solid var(--line);
}
.pdp-info h2{
  font-family:var(--sans);
  font-size:clamp(34px,4.2vw,74px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.065em;
}
.pdp-price{margin:30px 0 0;font-size:16px}
.pdp-section{
  display:flex;
  align-items:center;
  gap:8px;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.pdp-section span{
  width:70px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:800;
  color:#77736e;
}
.pdp-section button{
  min-width:44px;
  min-height:38px;
  border:1px solid var(--line);
  background:transparent;
}
.pdp-section .active{border-color:var(--black);background:var(--black);color:var(--white)}
.pdp-note{margin-top:18px;color:#77736e;font-size:12px;line-height:1.6}

@media(max-width:1100px){
  nav{display:none}
  .topbar{grid-template-columns:auto auto 1fr}
  .actions{justify-self:end}
  .home-storefront,.editorial,.checkout-preview{grid-template-columns:1fr}
  .storefront-panel,.storefront-panel:first-child{min-height:76svh;border-right:0;border-bottom:1px solid var(--line)}
  .pdp{grid-template-columns:1fr}
  .pdp-gallery{grid-template-columns:1fr 1fr}
  .pdp-image{min-height:62svh}
  .pdp-info{border-left:0}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .topbar{height:66px;padding:0 18px}
  .brand{font-size:25px}
  .ig svg,.ghost svg{width:21px;height:21px}
  .hero-bg{background-position:center}
  .hero-bg:after{inset:8vh -58vw -16vh auto;width:155vw;opacity:.72;transform:scale(1.2)}
  .cover-title{transform:translateY(15vh)}
  .cover-title h1{font-size:clamp(78px,25vw,132px)}
  .cover-title p{font-size:20px}
  .storefront-panel{min-height:74svh}
  .storefront-panel>div{padding:0 22px 28px}
  .storefront-panel:nth-child(2) img{padding:18vw 9vw}
  .intro,.grid{grid-template-columns:1fr}
  .intro p{border-right:0;border-bottom:1px solid var(--line)}
  .editorial{min-height:0}
  .editorial-image img{height:auto;aspect-ratio:4/5}
  .editorial-copy,.collection,.checkout-preview{padding:70px 20px}
  .section-head{grid-template-columns:1fr}
  .pdp-gallery{grid-template-columns:1fr}
  .pdp-image{min-height:auto;padding:84px 22px 24px}
  .pdp-image.secondary{display:none}
  .pdp-info{padding:32px 22px 70px}
}