/* catalog-ui.css — hero stamp, color selectors, set pieces, thumb buttons */

/* 1) Hero store sticker */
.hero .hero-copy .hero-stamp{
  display:grid;place-items:center;box-sizing:border-box;
  width:84px;height:84px;padding:10px;margin:0 0 6px;
  border-radius:50%;border:2px solid var(--brand);
  box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 4px rgba(203,58,78,.35);
  background:rgba(252,248,244,.92);color:var(--brand);
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:.74rem;line-height:1.12;
  letter-spacing:0;text-transform:none;text-align:center;
  transform:rotate(-6deg);transform-origin:center;flex:none;
}
.hero .hero-copy .hero-stamp::before,.hero .hero-copy .hero-stamp::after{content:none;display:none}
.hero .hero-copy .hero-stamp + h1{margin-top:8px}
@media(max-width:900px){
  .hero .hero-copy .hero-stamp{width:80px;height:80px;font-size:.7rem;margin-bottom:8px}
}
@media(max-width:380px){
  .hero .hero-copy .hero-stamp{width:76px;height:76px;font-size:.66rem;padding:9px}
}

/* 2) Color selectors */
#view-product .pd-variants{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;max-width:100%}
#view-product .pd-variants > p{flex-basis:100%;font-weight:700;font-size:.88rem}
#view-product .pd-back{background:none;border:0;padding:0}
#view-product .pd-photo-missing{font-size:1rem;color:var(--muted);text-align:center;padding:20px}
#view-product .pd-variants .pd-color{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:8px 14px 8px 9px;border:2px solid var(--border);border-radius:999px;
  background:#fff;color:var(--ink);font-family:inherit;font-weight:700;font-size:.88rem;line-height:1.2;
  text-align:left;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
#view-product .pd-variants .pd-color:hover:not(.on){border-color:var(--brand);color:var(--brand)}
#view-product .pd-variants .pd-color.on{border-color:var(--brand);background:var(--blush);color:var(--brand-deep);box-shadow:0 0 0 2px rgba(203,58,78,.18)}
#view-product .pd-variants .pd-color:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
#view-product .pd-variants .pd-color > span:not(.color-dot){overflow-wrap:anywhere;min-width:0}
.color-dot{
  display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;
  background:var(--swatch,var(--sand));border:1px solid rgba(42,26,29,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
#view-product .pd-variants .pd-color .color-dot{width:18px;height:18px}
.card .card-colors{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:2px 0;font-size:.78rem;color:var(--muted)}
.card .card-colors .color-dot{width:12px;height:12px}

/* 3) Set pieces (text only) */
#view-product .pd-piece-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
#view-product .pd-piece-section h2,#view-product .pd-piece-section h3,#view-product .pd-piece-section h4{
  font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:1.25rem;color:var(--ink);margin:0 0 10px;line-height:1.15}
#view-product .pd-piece-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#view-product ol.pd-piece-list{counter-reset:piece}
#view-product .pd-piece-list .pd-piece{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;min-width:0;overflow-wrap:anywhere}
#view-product .pd-piece .pd-piece-title{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:800;font-size:.98rem;color:var(--ink);line-height:1.3;margin:0}
#view-product .pd-piece .pd-piece-title .pd-piece-price{font-family:"Fraunces",Georgia,serif;font-weight:900;color:var(--brand-deep);white-space:nowrap}
#view-product .pd-piece .pd-piece-meta{font-family:"Space Mono",monospace;font-size:.76rem;color:var(--muted);margin-top:4px}
#view-product .pd-piece .pd-piece-description{font-size:.9rem;color:var(--ink-2);margin-top:6px;line-height:1.5}

/* Thumbnail buttons */
#view-product .pd-thumb-button{
  appearance:none;-webkit-appearance:none;background:#fff;padding:0;margin:0;font:inherit;color:inherit;
  border:2px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;flex:none;line-height:0;
  width:66px;height:66px;transition:border-color .15s}
#view-product .pd-thumb-button img{width:62px;height:62px;object-fit:cover;display:block}
#view-product .pd-thumb-button:hover:not(.on){border-color:var(--sand)}
#view-product .pd-thumb-button.on{border-color:var(--brand)}
#view-product .pd-thumb-button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

@media(max-width:600px){
  #view-product .pd-variants .pd-color{font-size:.84rem;padding:7px 12px 7px 8px}
  #view-product .pd-piece-list .pd-piece{padding:11px 13px}
}