/* ==========================================================================
   SNS Shop. Loaded after the main site's theme.css, sns.css, site.css and
   motion.css, and uses only their tokens. Layout here, colour from theme.css,
   transitions only inside the reduced-motion guard at the end.
   ========================================================================== */

/* ---------- nav: cart pill ---------- */
.nav__cart { gap: var(--u6); }
.nav__member { display: inline-flex; align-items: center; gap: var(--u6); cursor: default; }
.nav__cart-n {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.3em;
  border-radius: 999px; background: var(--bg); color: var(--fg);
}

/* ---------- home ---------- */
.pfeat { padding-top: var(--u120); }
.pfeat__head { display: flex; justify-content: space-between; padding-inline: var(--pad); margin-bottom: var(--u64); }
.pfeat__all { padding-bottom: 0; }
.shop-sns { border-top: var(--hair) solid var(--rule-10); margin-top: var(--u64); }
.shop-sns__body { display: grid; gap: var(--u24); align-content: end; }
.shop-sns__links { display: flex; flex-wrap: wrap; gap: var(--u24); }

/* ---------- product grid and card ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u48) var(--gap); }
.pcard { position: relative; display: grid; gap: var(--u12); align-content: start; }
.pcard__stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: clip;
  background: var(--fill-5); perspective: var(--tilt-persp);
}
.pcard__img {
  width: 76%; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
}
.pcard__img img, .pimg__none { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard__tag { position: absolute; left: var(--u12); top: var(--u12); background: var(--bg); color: var(--fg); }
.pcard__tag[data-out] { color: var(--fg-2); }
.pcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u16); }
.pcard__t { font: inherit; }
.pcard__link::after { content: ''; position: absolute; inset: 0; z-index: var(--z-raised); }
.pcard__link:focus-visible { outline: none; }
.pcard:has(.pcard__link:focus-visible) .pcard__stage { outline: 2px solid var(--fg); outline-offset: 2px; }
.pcard__p { flex: none; text-align: right; }
.pcard:hover .pcard__stage, .pcard.is-hover .pcard__stage { background: var(--fill); }
del { color: var(--fg-2); }
ins { text-decoration: none; }

/* ---------- product list ---------- */
.phub { padding-top: var(--u120); }
.phub__head { margin-top: var(--u40); align-items: end; }
.phub__count { color: var(--fg-2); }
.pfilter { display: flex; flex-wrap: wrap; gap: var(--u8); margin-top: var(--u40); }
.pfilter .type-pill { min-height: 2.75rem; padding-inline: var(--u16); }
.pfilter [aria-current] { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }

/* ---------- product detail: facts left, photos centre, buy box right ---------- */
.pdetail .floating-info { grid-row: 1 / span 3; }
.pdetail__intro { grid-column: 3 / span 4; grid-row: 1; min-height: 72vh; }
.pdetail__photos { grid-row: 2; }
.pbuy {
  grid-column: 7 / span 2; grid-row: 1 / span 3; position: sticky; top: 0; align-self: start;
  display: grid; gap: var(--u16); padding-top: calc(80 * var(--dpx));
}
.pbuy__stock { display: flex; align-items: center; gap: var(--u8); }
.pbuy__stock[data-state='ok'] .pill__dot { background: var(--fg); }
.pbuy__stock[data-state='low'] .pill__dot { background: var(--accent); border-color: var(--accent); }
.pbuy__stock[data-state='out'] { color: var(--fg-2); }
.pbuy__form { display: grid; gap: var(--u16); }
.popt { display: grid; gap: var(--u8); margin: 0; padding: 0; border: 0; min-width: 0; }
.popt__row { display: flex; flex-wrap: wrap; gap: var(--u8); }
.popt__o { position: relative; }
.popt__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.popt__o > span {
  display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--u12);
  border: var(--hair) solid var(--rule); border-radius: 999px;
}
.popt__o input:checked + span { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.popt__o input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.popt__o input:disabled { cursor: not-allowed; }
.popt__o input:disabled + span { color: var(--fg-3); border-style: dashed; text-decoration: line-through; }
.pbuy__row { display: flex; align-items: end; gap: var(--u12); }
.pbuy__qty { width: 5rem; flex: none; }
.pbuy__add { flex: 1; }
.pbuy__msg:empty { display: none; }
.pbuy__msg[data-error] { color: var(--accent); }
.pfig img { aspect-ratio: 4 / 5; object-fit: cover; }
.pdetail__h { margin-top: var(--u40); }
.pdetail__desc { display: grid; gap: var(--u16); max-width: var(--measure); line-height: var(--lh-copy); }
.pdetail__desc ul, .pdetail__desc ol { display: grid; gap: var(--u8); padding-left: 1.2em; list-style: disc; }
.pdetail__desc ol { list-style: decimal; }

/* ---------- cart, checkout, order ---------- */
.pcart { padding-block: var(--u120); }
.pcart__h { margin-block: var(--u40) var(--u64); }
.pcart__grid { align-items: start; }
.clines { display: grid; border-top: var(--hair) solid var(--rule-10); }
.cline {
  display: grid; grid-template-columns: max(4.5rem, calc(96 * var(--dpx))) minmax(0, 1fr) auto auto auto;
  align-items: center; gap: var(--u16); padding-block: var(--u16); border-bottom: var(--hair) solid var(--rule-10);
}
.cline__img { display: block; aspect-ratio: 4 / 5; overflow: clip; background: var(--fill-5); }
.cline__img img { width: 100%; height: 100%; object-fit: cover; }
.cline__body { display: grid; gap: var(--u4); min-width: 0; justify-items: start; }
.cline__qty { display: flex; align-items: end; gap: var(--u8); }
.cline__qty .field__c { width: 4rem; }
.cline__total { min-width: 6em; text-align: right; }
.csum {
  position: sticky; top: var(--u80); display: grid; gap: var(--u24); padding: var(--u24);
  background: var(--fill-5);
}
.csum__items { display: grid; gap: var(--u8); }
.csum__items li, .csum__dl { display: flex; justify-content: space-between; gap: var(--u16); }
.csum__dl { display: grid; grid-template-columns: 1fr auto; row-gap: var(--u8); }
.csum__dl dd { text-align: right; }
.csum__dl .csum__total { padding-top: var(--u12); border-top: var(--hair) solid var(--rule); font-size: var(--d2); line-height: 1; }
.csum__go .cta { width: 100%; }
.pcheck__note { margin-bottom: var(--u40); border-color: var(--accent); }
.pcheck__note:focus { outline: 2px solid var(--fg); outline-offset: 2px; }
.pcheck__form { max-width: none; }
.pcheck__set { display: grid; gap: var(--u16); margin: 0 0 var(--u40); padding: 0; border: 0; min-width: 0; }
.pcheck__set > legend { margin-bottom: var(--u16); }
.pcheck__set.is-error .field__e { display: block; }
.ppay { display: grid; gap: var(--u8); }
.ppay__o {
  display: flex; align-items: start; gap: var(--u12); padding: var(--u16); cursor: pointer;
  border: var(--hair) solid var(--rule-10);
}
.ppay__o:has(input:checked) { border-color: var(--fg); }
.ppay__o input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05em 0 0; accent-color: var(--fg); }
.ppay__o > span { display: grid; gap: var(--u4); }
[aria-busy='true'] { cursor: progress; }

/* ---------- added-to-cart toast ---------- */
.ptoast {
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--u16); padding: var(--u12) var(--u16);
  background: var(--fill); color: var(--on-fill); border-radius: var(--u16);
}
.ptoast a { text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 992px) {
  .shop-hero .ident { min-height: calc(420 * var(--dpx)); }
  .shop-hero .hero__head { row-gap: 24vh; }
}

/* ---------- mobile and tablet (the main site's one breakpoint) ---------- */
@media (max-width: 991px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard__meta { flex-direction: column; gap: var(--u4); }
  .pcard__p { text-align: left; }
  .pdetail .grid > * { grid-row: auto; }
  .pdetail__intro { order: 1; min-height: 0; padding-block: var(--u144) var(--u80); display: grid; gap: var(--u24); }
  .pdetail__intro .detail__cap { position: static; }
  .pbuy { order: 2; position: static; grid-column: 1 / -1; padding-top: 0; }
  .pdetail__photos { order: 3; margin-top: var(--u40); }
  .pdetail .floating-info { order: 4; }
  .cline { grid-template-columns: max(4.5rem, calc(80 * var(--dpx))) minmax(0, 1fr) auto; }
  .cline__img { grid-row: span 2; }
  .cline__qty { grid-column: 2; }
  .cline__total { grid-column: 3; grid-row: 1; }
  .cline__rm { grid-column: 3; }
  .csum { position: static; margin-top: var(--u40); }
}
@media (max-width: 767px) {
  .ptoast { left: var(--pad); bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pcard__stage { transition: background-color 0.4s var(--ease-out); }
  .popt__o > span, .ppay__o { transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
}

/* Member commerce */
.pmember { font-size: .75em; letter-spacing: .02em; margin-right: var(--u6, 6px); }
.pbuy__lock { margin-top: 12px; }
.pcheck__tick { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; }
.pcheck__tick input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.foot__reg { padding-block: 12px; }
@media print { .nav, footer, .hero__actions { display: none !important; } }