/* ============================================================
   MERCH ON THE MAIN PAGE: carousel + product dialog.
   Every rule is scoped to .sgm so nothing leaks into the page's
   own .btn, .label, .rail or .panel rules. Tokens come from the
   page's :root; the two it lacks are defined here.
   ============================================================ */

.sgm{ --stroke:4px; --muted:rgba(36,34,32,.72); }
.sgm[hidden]{ display:none !important; }
/* Not a .block on purpose: a hidden .block would still count as the sibling
   in the page's .block + .block rule and draw a rule above Photos. */
.sgm-section{ padding-block:clamp(2.25rem, 7vw, 3.25rem); border-bottom:1px solid var(--rule); }

.sgm__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.sgm__head .label{ margin-bottom:1.1rem; }

.sgm-carousel{ position:relative; }
.sgm-rail{
  display:flex; gap:.75rem;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  scroll-padding-inline:var(--pad);   /* snap cards to the column, not the bleed */
  margin-inline:calc(var(--pad) * -1);
  padding:.25rem var(--pad) .9rem;
  scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent;
}
.sgm-rail::-webkit-scrollbar{ height:6px; }
.sgm-rail::-webkit-scrollbar-thumb{ background:var(--rule-2); border-radius:3px; }
.sgm-rail:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }

.sgm-card{
  appearance:none; padding:0; margin:0; text-align:left; cursor:pointer;
  flex:0 0 min(62%, 13.5rem); scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:none; color:var(--ink); font:inherit; border:0;
}
.sgm-card__img{ display:block; aspect-ratio:1/1; background:#fff; overflow:hidden; }
.sgm-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.sgm-card__body{ display:flex; flex-direction:column; gap:.15rem; padding:.6rem 0 .2rem; flex:1; }
.sgm-card__title{ font-weight:700; font-size:.9375rem; line-height:1.25; }
.sgm-card__price{ font-size:.875rem; font-variant-numeric:tabular-nums; }
.sgm-card__flag{ margin-top:.2rem; font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.72; }
.sgm-card__title{ text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.2em; transition:text-decoration-color .16s ease; }
.sgm-card:hover .sgm-card__title, .sgm-card:focus-visible .sgm-card__title{ text-decoration-color:var(--pink); }
.sgm-card:hover .sgm-card__img img{ transform:scale(1.03); }
.sgm-card:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .sgm-card__img img{ transition:none; } }

.sgm-arrow{
  position:absolute; top:calc(40% - .45rem); transform:translateY(-50%);
  width:2.4rem; height:2.4rem; border-radius:50%;
  display:grid; place-items:center; appearance:none; padding:0; cursor:pointer;
  background:rgba(245,240,230,.9); border:1px solid var(--rule-2); color:var(--ink);
  font-size:1.2rem; line-height:1; z-index:2; transition:opacity .18s ease;
}
.sgm-arrow--prev{ left:.35rem; }
.sgm-arrow--next{ right:.35rem; }
.sgm-arrow[disabled]{ opacity:0; pointer-events:none; }
.sgm-arrow:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.sgm__hint{ font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.72; margin:.4rem 0 0; }

.sgm-bag{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1rem; padding:.8rem 1rem;
  background:var(--pink); color:var(--ink); border:0;
  font-weight:700; text-decoration:none;
}
.sgm-bag[hidden]{ display:none; }
.sgm-bag span:last-child{ font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; }
.sgm-bag:hover{ background:var(--ink); color:var(--pink); }

/* ---------- dialog ---------- */
.sgm-dialog{
  width:min(60rem, calc(100% - 1.5rem)); max-height:calc(100dvh - 1.5rem);
  padding:0; overflow:auto; overscroll-behavior:contain;
  background:var(--cream); color:var(--ink);
  border:0; box-shadow:0 24px 60px rgba(36,34,32,.35);
}
.sgm-dialog::backdrop{ background:rgba(36,34,32,.62); }
.sgm-dialog__bar{
  position:sticky; top:0; z-index:2; display:flex; justify-content:flex-end;
  padding:.6rem .75rem; background:var(--cream); border-bottom:1px solid var(--rule);
}
.sgm-dialog__close{
  appearance:none; background:transparent; border:1px solid var(--rule-2); color:var(--ink); cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  min-height:40px; padding:.5rem .9rem;
}
.sgm-dialog__close:hover{ background:var(--ink); color:var(--cream); }
.sgm-dialog__body{ padding:clamp(1rem,3vw,2rem); }
html.sgm-locked, html.sgm-locked body{ overflow:hidden; }

/* the product view, same as /shop/p/<slug>, scoped */
.sgm .pdp{ display:grid; gap:clamp(1.25rem,4vw,2.5rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:46rem){ .sgm .pdp{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; } }
.sgm .gallery__main{ aspect-ratio:1/1; background:#fff; overflow:hidden; }
.sgm .gallery__main img{ width:100%; height:100%; object-fit:contain; }
.sgm .gallery__thumbs{ display:flex; gap:.5rem; margin-top:.75rem; overflow-x:auto; padding-bottom:.25rem; }
.sgm .thumb{ flex:0 0 4rem; aspect-ratio:1/1; padding:0; background:#fff; border:0; outline:2px solid transparent; outline-offset:2px; cursor:pointer; }
.sgm .thumb img{ width:100%; height:100%; object-fit:cover; }
.sgm .thumb[aria-current="true"]{ outline-color:var(--pink); }
.sgm .pdp__title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2rem,6vw,3rem); line-height:1; letter-spacing:-.02em; margin:0; }
.sgm .pdp__price{ font-size:1.25rem; font-weight:700; margin:.6rem 0 1.1rem; font-variant-numeric:tabular-nums; }
.sgm .pdp__desc{ border-top:1px solid var(--rule); padding-top:1rem; margin-top:1.25rem; font-size:.9375rem; }
.sgm .pdp__desc p{ margin:0 0 .6rem; }
.sgm .opt{ border:0; padding:0; margin:0 0 1rem; min-width:0; }
.sgm .opt legend{ padding:0; margin-bottom:.5rem; font-size:.6875rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.sgm .opt legend span{ font-weight:400; letter-spacing:.04em; text-transform:none; font-size:.875rem; margin-left:.35rem; }
.sgm .chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.sgm .chip{ position:relative; }
.sgm .chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.sgm .chip > span{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.55rem .9rem; border:1px solid var(--rule-2); font-size:.875rem; font-weight:700; cursor:pointer; user-select:none; }
.sgm .chip__swatch{ width:1rem; height:1rem; border-radius:50%; border:1px solid var(--rule-2); flex:0 0 auto; }
.sgm .chip > input:checked + span{ background:var(--pink); border-color:var(--pink); }
.sgm .chip input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:3px; }
.sgm .chip input:disabled + span{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.sgm .chip.is-soldout input:not(:checked) + span{ border-style:dashed; color:var(--muted); }
.sgm .buy{ display:flex; gap:.6rem; align-items:stretch; margin-top:1.25rem; }
.sgm .buy .btn{ flex:1; width:auto; }
.sgm .buy .btn[disabled]{ opacity:.5; cursor:not-allowed; background:transparent; }
.sgm .qty{ display:flex; align-items:stretch; border:1px solid var(--rule-2); }
.sgm .qty button{ appearance:none; border:0; background:transparent; width:44px; font-size:1.2rem; cursor:pointer; color:var(--ink); }
.sgm .qty button:hover{ background:var(--ink); color:var(--cream); }
.sgm .qty button:disabled{ opacity:.35; cursor:not-allowed; background:transparent; color:var(--ink); }
.sgm .qty output{ width:2.6rem; display:grid; place-items:center; font-weight:700; font-variant-numeric:tabular-nums; }
.sgm .added{ margin:.9rem 0 0; font-size:.875rem; font-weight:700; min-height:1.5em; }