/* ============ shop.css — shop page ============ */

.shop-header { padding:52px 0 48px; border-bottom:1px solid var(--border); margin-bottom:52px; }
.shop-header-top { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:end; margin-bottom:28px; }
.shop-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:68px; line-height:0.85; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.shop-title em { font-style:italic; color:var(--accent); }
.shop-title .outline { -webkit-text-stroke:2px var(--ink); color:transparent; }
.shop-tagline { font-size:15px; line-height:1.7; color:#555; max-width:520px; padding-bottom:6px; }
.shop-header-bottom { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; padding-top:20px; border-top:1px solid rgba(0,0,0,0.06); }
.shop-body { font-size:13px; line-height:1.8; color:var(--mid); max-width:560px; }
.shop-intro-meta { display:flex; flex-direction:column; gap:10px; align-items:flex-end; flex-shrink:0; }
.meta-item { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mid); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.meta-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* GRID */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-bottom:72px; }
.product-card { cursor:pointer; }
.product-card:hover .paper-frame { transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,0.15); }
.product-card:hover .pc-cta { opacity:1; }

.paper-frame { background:#fff; padding:10px 10px 28px; box-shadow:0 4px 16px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.05); margin-bottom:14px; position:relative; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:nth-child(2) .paper-frame { transform:rotate(0.3deg); }
.product-card:nth-child(2):hover .paper-frame { transform:rotate(0.3deg) translateY(-5px); }
.product-card:nth-child(4) .paper-frame { transform:rotate(-0.35deg); }
.product-card:nth-child(4):hover .paper-frame { transform:rotate(-0.35deg) translateY(-5px); }
.paper-frame img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center; }
.paper-number { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); font-size:10px; color:#bbb; letter-spacing:0.06em; white-space:nowrap; }

.pc-badge { position:absolute; top:-10px; right:10px; background:var(--yellow); color:var(--ink); font-size:9px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:3px 10px; border-radius:100px; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.pc-badge.urgency { background:var(--accent); color:#fff; }
.pc-cta { position:absolute; bottom:32px; left:8px; right:8px; background:var(--ink); color:#fff; text-align:center; padding:10px; font-size:12px; font-weight:500; opacity:0; transition:opacity 0.2s; }

.pc-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px; }
.pc-name { font-size:14px; font-weight:500; }
.pc-price { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:900; }
.pc-meta { font-size:11px; color:var(--mid); }
.pc-avail { display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:11px; color:var(--mid); }
.avd { width:5px; height:5px; border-radius:50%; background:#4CAF50; }
.avd.low { background:var(--accent); }

/* Stripe Buy Button slot */
.buy-slot { margin-top:12px; }

/* ABOUT */
.shop-about { background:var(--soft); border-radius:16px; padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:48px; align-items:center; }
.sa-title { font-family:'Barlow Condensed',sans-serif; font-size:36px; font-weight:900; line-height:1; text-transform:uppercase; margin-bottom:16px; }
.sa-title em { font-style:italic; color:var(--accent); }
.sa-body { font-size:13px; line-height:1.8; color:var(--mid); }
.sa-spec { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border); font-size:13px; }
.sa-spec:last-child { border-bottom:none; }
.sa-sl { color:var(--mid); }
.sa-sv { font-weight:500; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .product-grid { grid-template-columns:repeat(2,1fr); gap:22px; }
  .shop-header-top { grid-template-columns:1fr; gap:20px; }
  .shop-title { font-size:56px; white-space:normal; }
  .shop-header-bottom { grid-template-columns:1fr; gap:24px; }
  .shop-intro-meta { align-items:flex-start; }
  .shop-about { grid-template-columns:1fr; gap:28px; padding:32px; }
}
@media (max-width:520px) {
  .product-grid { grid-template-columns:1fr; }
  .shop-title { font-size:46px; }
}