/* =========================================================================
   PRINT SHOP ADDON (print_test.html + product pages)
   Reuses variables and fonts from css/style.css. Loaded only on the
   prototype pages, never touches the live print.html.
   ========================================================================= */

/* ---------- Catalog grid (print_test.html) ---------- */
.shop-intro{max-width:640px}

.shop-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.5rem;
}
.shop-grid--compact{grid-template-columns:repeat(4,1fr);gap:1.5rem}

.shop-card{display:block;color:var(--ink)}
.shop-card__img{aspect-ratio:4/5;overflow:hidden;background:var(--ph)}
.shop-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.shop-card:hover .shop-card__img img{transform:scale(1.035)}

.shop-card__info{padding-top:.9rem}
.shop-card__title{font-family:var(--font-display);font-size:1.15rem;margin:0 0 .25rem}
.shop-card__meta{font-family:var(--font-ui);font-weight:300;font-size:.76rem;color:var(--muted);margin:0 0 .4rem;letter-spacing:.01em}
.shop-card__price{font-family:var(--font-ui);font-weight:400;font-size:.82rem;letter-spacing:.03em;margin:0}

@media (max-width:900px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid--compact{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .shop-grid,.shop-grid--compact{grid-template-columns:1fr}
}

/* ---------- Product page (PDP) ---------- */
.pdp{padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(3rem,6vw,5rem)}

.pdp__breadcrumb{font-family:var(--font-ui);font-weight:300;font-size:.78rem;color:var(--muted);margin-bottom:2.2rem}
.pdp__breadcrumb a{color:var(--muted);border-bottom:1px solid transparent;padding-bottom:1px}
.pdp__breadcrumb a:hover{color:var(--ink);border-color:currentColor}

.pdp__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}

.pdp__main-img{background:var(--ph);border:.5px solid var(--line);margin-bottom:.9rem}
.pdp__main-img img{width:100%;display:block}

.pdp__thumbs{display:flex;gap:.6rem}
.pdp__thumb{
  padding:0;border:.5px solid var(--line);background:none;cursor:pointer;
  width:72px;height:72px;overflow:hidden;opacity:.55;transition:opacity .2s,border-color .2s;
}
.pdp__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__thumb.active,.pdp__thumb:hover{opacity:1;border-color:var(--ink)}

.pdp__panel{position:sticky;top:2rem}
.pdp__panel .eyebrow{margin-bottom:1rem}
.pdp__panel h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3vw,2.5rem);margin:0 0 1.1rem;line-height:1.15}
.pdp__desc{line-height:1.75;margin:0 0 1.2rem;max-width:46ch}
.pdp__medium{font-family:var(--font-ui);font-weight:300;font-size:.85rem;color:var(--muted);line-height:1.65;margin:0 0 1.8rem}

.pdp__size-select{margin-bottom:1.2rem}
.pdp__size-select label{display:block;font-family:var(--font-ui);font-weight:300;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.55rem}
.pdp__select{
  width:100%;padding:.75rem .8rem;border:.5px solid var(--ink);
  background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:.88rem;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%231a1916' d='M5 7l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:16px;
}
.pdp__select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.pdp__price{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin:0 0 .35rem}
.pdp__note{font-family:var(--font-ui);font-weight:300;font-size:.78rem;color:var(--muted);line-height:1.65;margin:0 0 1.8rem}

.pdp__cta{
  display:inline-block;height:46px;line-height:44px;padding:0 1.7rem;
  border:.5px solid var(--ink);background:var(--ink);color:#fff;
  font-family:var(--font-ui);font-size:.85rem;letter-spacing:.05em;
  text-align:center;transition:background .2s,color .2s;margin-bottom:2.2rem;
}
.pdp__cta:hover{background:var(--paper);color:var(--ink)}

.pdp__specs{list-style:none;margin:0;padding-top:1.3rem;border-top:.5px solid var(--line)}
.pdp__specs div{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:.65rem 0;border-bottom:.5px solid var(--line)}
.pdp__specs dt{font-family:var(--font-ui);font-weight:300;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0}
.pdp__specs dd{font-family:var(--font-ui);font-weight:300;font-size:.85rem;color:var(--ink);margin:0;line-height:1.5}

.pdp-more{padding:clamp(3rem,6vw,5rem) 0;border-top:.5px solid var(--line)}
.pdp-more .eyebrow{margin-bottom:1.8rem}

@media (max-width:820px){
  .pdp__grid{grid-template-columns:1fr}
  .pdp__panel{position:static}
}