/* shop/pages.css — the Original paintings and Commissions pages, and each piece's own page,
   in the site's own dress: the white box with the ink border, Fraunces titles, the rainbow ground. */
.sp{ padding:clamp(14px,2vw,26px) clamp(12px,2.4vw,32px) clamp(48px,6vw,90px) }
.sp > .wrap{ max-width:none; background:#fff; border:3px solid var(--ink); border-radius:22px; box-shadow:var(--sh-sticker); padding:clamp(20px,2.6vw,36px) clamp(18px,2.6vw,40px) clamp(26px,3vw,44px) }
.sp .kh{ margin-bottom:clamp(18px,2.6vw,32px) }
.sp .kh__line{ display:inline-flex; align-items:center; gap:clamp(10px,1.6vw,22px) }
.sp .kh--s2 h2{ margin:0 }
.sp-count{ margin:6px 0 0; text-align:center; font-size:var(--fs-sm); color:var(--ink-soft) }

/* the grid of pieces */
.sp-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(18px,2.4vw,32px) clamp(16px,2vw,26px) }
.sp-card a{ display:block; position:relative; color:inherit; text-decoration:none; border-radius:16px }
.sp-card a:focus-visible{ outline:3px solid var(--ink); outline-offset:4px }
.sp-card__pic{ margin:0; aspect-ratio:1; border:2.5px solid var(--ink); border-radius:16px; overflow:hidden; background:#fff }
.sp-card__pic img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease-out) }
.sp-card a:hover img{ transform:scale(1.04) }
.sp-card__name{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 48; font-size:1.3rem; line-height:1.15; margin:12px 0 2px; letter-spacing:-.01em }
.sp-card__size{ margin:0; font-size:var(--fs-sm); color:var(--ink-soft) }
.sp-card__price{ margin:6px 0 0; font-weight:700; font-family:var(--font-display) }
.sp-sold{ position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; padding:5px 11px; border-radius:999px; box-shadow:var(--sh-chip) }
.sp-card--sold .sp-card__pic img{ filter:saturate(.55) }
.sp-card--sold .sp-card__price{ color:var(--ink-soft); font-weight:600 }

/* one piece */
.sp-back{ margin:0 0 16px; font-size:var(--fs-sm) }
.sp-back a{ color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem }
.sp-back a:hover{ text-decoration:underline; text-underline-offset:3px }
.sp-one{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(22px,3.6vw,56px); align-items:start }
.sp-main{ margin:0; border:3px solid var(--ink); border-radius:20px; overflow:hidden; box-shadow:var(--sh-sticker); background:#fff }
.sp-main button{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in }
.sp-main img{ display:block; width:100%; height:auto }
.sp-thumbs{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.sp-thumbs--one{ display:none }
.sp-thumbs button{ width:74px; height:74px; padding:0; border:2.5px solid var(--ink); border-radius:12px; overflow:hidden; background:#fff; cursor:pointer; opacity:.62; transition:opacity .15s, transform .15s var(--ease-out) }
.sp-thumbs button:hover{ opacity:1; transform:translateY(-2px) }
.sp-thumbs button[aria-current="true"]{ opacity:1; box-shadow:0 0 0 3px var(--accent) }
.sp-thumbs button:focus-visible{ outline:none; opacity:1; box-shadow:0 0 0 3px var(--ink) }
.sp-thumbs img{ display:block; width:100%; height:100%; object-fit:cover }
.sp-info h1{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 96; font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.05; letter-spacing:-.01em; margin:0 0 8px }
.sp-price{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0; font-size:1.45rem; font-weight:700; font-family:var(--font-display) }
.sp-stock{ display:inline-block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; padding:5px 11px; border-radius:999px; border:2px solid var(--ink) }
.sp-stock--sold{ background:var(--ink); color:#fff }
.sp-cta{ margin:18px 0 22px; padding-bottom:22px; border-bottom:1.5px dashed var(--hairline) }
.sp-cta .small{ margin:10px 0 0; color:var(--ink-soft) }
.sp-cta .small{ margin:8px 0 0; color:var(--ink-soft) }
.sp-desc p{ margin:0 0 .85em; max-width:58ch }
.sp-desc h3{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.01em; margin:1.5em 0 .45em }
.sp-desc h3:first-child{ margin-top:0 }
.sp-desc .sp-q{ font-weight:700; margin:1.1em 0 .3em }
.sp-desc .sp-prices{ list-style:none; margin:0 0 1.1em; padding:0; display:grid; gap:2px; max-width:360px }
.sp-desc .sp-prices li{ display:flex; justify-content:space-between; gap:16px; padding:5px 0; border-bottom:1.5px dashed var(--hairline) }
.sp-desc .sp-prices b{ font-family:var(--font-display); font-weight:700 }
@media (max-width:760px){ .sp-one{ grid-template-columns:1fr } .sp-info h1{ font-size:2rem } }
/* a prose page (the shipping policy): one comfortable column inside the box */
.sp-prose{ max-width:66ch; margin:0 auto }
.sp-prose h3{ font-size:1.15rem }
.sp-prose p{ max-width:none; font-size:var(--fs-md); line-height:1.65 }

/* phones: roomier taps */
.sp-back a{ font-size:.8rem; display:inline-block; padding:6px 0 }
@media (max-width:760px){ .sp-buy .btn{ min-height:44px } .sp-buy__wix{ padding:8px 0 } .sp-thumbs button{ width:64px; height:64px } }

/* buying: Add to cart beside Buy now */
.sp-buy__now{ background:#fff }
.sp-cta [data-buy-note]{ line-height:1.5 }