/*
 * Snubbelsaft v3 — the shop placeholder at /butik. Ported from
 * docs/designs/design-merch-snubblaren-v3-butik.html (Obsidian vault).
 */
/* ===== butik ===== */
.butik-head{padding-block:clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px)}
.butik-head h1{font-size:clamp(44px, 7vw, 96px); letter-spacing:-.035em; margin-bottom:16px}
.butik-head h1 em{font-style:normal; color:var(--cone)}
.butik-head .lede{max-width:52ch}
.status{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px;
  background:var(--cone-pale); border:2px dashed var(--cone-deep); font-weight:500; font-size:15px; color:var(--cone-deep);
}
.status::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--cone); flex:none}

.shop{padding-top:0}
.shop-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px}
.item{
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--r); padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:14px; scroll-margin-top:90px;
}
.item:target{box-shadow:8px 8px 0 var(--cone)}
.item .art{background:var(--paper-2); border-radius:14px; padding:10px}
.item .art svg{width:100%; height:auto; aspect-ratio:1}
.item .name{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.item h2{font-size:clamp(22px, 2vw, 26px); max-width:none}
.item .price{font-size:20px}
.item p.desc{font-size:14.5px; color:var(--ink-2)}
.opt{display:grid; gap:8px}
.opt .lbl{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.opt .lbl output{color:var(--ink); letter-spacing:0; text-transform:none; font-family:var(--sans); font-weight:500; margin-left:6px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font:inherit; font-weight:500; font-size:14px; line-height:1; padding:9px 12px; border-radius:999px; border:2px solid var(--ink);
  background:var(--paper); color:var(--ink); cursor:pointer; min-width:44px; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.chip:focus-visible{outline:3px solid var(--cone); outline-offset:2px}
.chip.sw{display:inline-flex; align-items:center; gap:7px}
.chip.sw i{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--ink); display:inline-block}
.chip.sw[aria-pressed="true"] i{border-color:var(--paper)}
.chip.one{cursor:default; border-style:dashed; color:var(--ink-2)}
.item .cart{margin-top:auto; display:grid; gap:10px}
.item .btn{justify-content:center; width:100%}
.item .btn svg{width:18px; height:18px}
.note{
  display:none; background:var(--cone-pale); border:2px dashed var(--cone-deep); border-radius:14px; padding:12px 14px; font-size:14.5px; color:var(--ink);
}
.note.show{display:block}
.note b{color:var(--cone-deep)}
/* färgval på plaggen */
.item[data-color="svart"] .tee-body{fill:var(--ink)}
.item[data-color="svart"] .tee-print{color:var(--paper)}
.item[data-color="svart"] .tee-txt{fill:var(--cone)}
.item[data-color="vit"] .hood-body{fill:var(--paper); stroke:var(--ink)}
.item[data-color="vit"] .hood-line{stroke:var(--ink)}
.item[data-color="vit"] .hood-print{color:var(--ink)}
.item[data-color="vit"] .hood-txt{fill:var(--cone-deep)}
/* rad två: mugg och märke som breda, liggande kort */
@media (min-width:981px){
  .shop-grid{grid-template-columns:repeat(6, minmax(0,1fr))}
  .item{grid-column:span 2}
  .item.wide{grid-column:span 3; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto auto 1fr; column-gap:22px; row-gap:12px; align-items:start}
  .item.wide .art{grid-row:1/-1; align-self:stretch; display:grid; place-items:center}
  .item.wide .art svg{width:100%; max-width:260px}
  .item.wide .cart{align-self:end}
}
@media (max-width:980px){ .shop-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:600px){ .shop-grid{grid-template-columns:minmax(0,1fr); gap:16px} .item{padding:14px 14px 16px} }

/* bra att veta */
.veta{background:var(--paper-2)}
.veta-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:clamp(28px, 4vw, 48px)}
.fact{background:var(--paper); border:2px solid var(--ink); border-radius:18px; padding:20px 20px 22px; display:grid; gap:8px; align-content:start; position:relative}
.fact svg{width:34px; height:34px; color:var(--cone); margin-bottom:4px}
.fact h3{font-size:19px}
.fact p{font-size:15px; color:var(--ink-2)}
.fact .ex{
  position:absolute; top:14px; right:14px; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cone-deep); border:1.5px dashed var(--cone-deep); border-radius:999px; padding:4px 8px; line-height:1;
}
.pay{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.pay span{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.04em; border:2px solid var(--ink); border-radius:8px; padding:6px 9px; line-height:1}
.seller{grid-column:1/-1; background:var(--ink); color:var(--paper); display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center}
.seller svg{color:var(--cone); width:48px; height:48px; margin:0}
.seller h3{color:var(--paper)}
.seller p{color:#CFC9BB}
.seller a{color:var(--paper)}
.seller a:hover{text-decoration:underline; text-decoration-color:var(--cone); text-decoration-thickness:2px}
@media (max-width:900px){ .veta-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .veta-grid{grid-template-columns:minmax(0,1fr)} .seller{grid-template-columns:minmax(0,1fr)} }

/* colour swatches (were inline style="background:…" in the draft) */
.chip.sw i.sw-paper{background:var(--paper)}
.chip.sw i.sw-ink{background:var(--ink)}
.chip.sw i.sw-cone{background:var(--cone)}