/* ─── Sip & Petals — Shop (listing, product, basket, thanks) ─────── */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #fbf9f4; font-family: 'Manrope', sans-serif; }

.category-label { font-family:'Raleway',sans-serif; font-weight:300; letter-spacing:0.4em; font-size:0.6rem; text-transform:uppercase; color:var(--muted); }
.eyebrow { display:flex; align-items:center; gap:0.9rem; margin-bottom:1rem; }
.eyebrow .rule { display:inline-block; width:40px; height:1px; background:var(--charcoal); opacity:0.5; }
.page-title { font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(2.5rem,6vw,4.5rem); letter-spacing:0.25em; text-transform:uppercase; color:var(--charcoal); margin-bottom:1rem; }
.page-intro { font-size:0.85rem; color:var(--muted); max-width:30rem; line-height:1.8; margin-bottom:3rem; }
.section-title { font-family:'Raleway',sans-serif; font-weight:300; font-size:1.4rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--charcoal); margin-bottom:1rem; }

/* Buttons */
.btn-solid { display:inline-block; width:100%; text-align:center; background:var(--charcoal); color:var(--cream) !important; font-family:'Raleway',sans-serif; font-weight:400; letter-spacing:0.15em; font-size:0.7rem; text-transform:uppercase; padding:1.05rem 2rem; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.2s ease; }
.btn-solid:hover { opacity:0.85; }
.btn-solid[disabled] { opacity:0.3; cursor:not-allowed; }
.btn-line { display:inline-block; border:1px solid var(--charcoal); color:var(--charcoal); font-family:'Raleway',sans-serif; font-weight:400; letter-spacing:0.15em; font-size:0.7rem; text-transform:uppercase; padding:0.9rem 2rem; text-decoration:none; transition:opacity 0.2s ease; }
.btn-line:hover { opacity:0.6; }
.link-under { font-family:'Raleway',sans-serif; letter-spacing:0.15em; font-size:0.65rem; text-transform:uppercase; color:var(--charcoal); text-decoration:none; border-bottom:1px solid var(--charcoal); padding-bottom:1px; }

/* Info tiles */
.shop-info { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.shop-info-item { padding:1.6rem 1.5rem 1.6rem 0; }
.shop-info-item + .shop-info-item { padding-left:1.5rem; border-left:1px solid var(--hairline); }
.shop-info-title { font-family:'Raleway',sans-serif; font-weight:400; letter-spacing:0.12em; font-size:0.75rem; text-transform:uppercase; color:var(--charcoal) !important; margin-bottom:0.4rem; }
.shop-info-text { font-size:0.75rem; color:var(--muted); line-height:1.7; }
@media (max-width: 767px) {
  .shop-info { grid-template-columns:1fr 1fr; }
  .shop-info-item:nth-child(3) { padding-left:0; border-left:none; }
  .shop-info-item:nth-child(n+3) { border-top:1px solid var(--hairline); }
}

/* Toolbar */
.shop-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding-bottom:0.9rem; border-bottom:1px solid var(--hairline); }
.shop-count { font-size:0.7rem; color:var(--muted); }
.shop-toolbar-right { display:flex; align-items:center; gap:1.5rem; }
.shop-sort { font-family:'Raleway',sans-serif; letter-spacing:0.1em; font-size:0.65rem; text-transform:uppercase; color:var(--charcoal); background:transparent; border:none; border-bottom:1px solid var(--hairline); padding:0.2rem 0; cursor:pointer; border-radius:0; }
.basket-link { font-family:'Raleway',sans-serif; letter-spacing:0.15em; font-size:0.65rem; text-transform:uppercase; color:var(--charcoal); text-decoration:none; white-space:nowrap; }

/* Product grid — 4 columns on desktop */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3rem 1.5rem; }
@media (max-width: 1023px) { .product-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 767px)  { .product-grid { grid-template-columns:repeat(2,1fr); gap:2.5rem 1rem; } }

.product-card { display:flex; flex-direction:column; color:inherit; text-decoration:none; opacity:0; transform:translateY(16px); animation:cardIn 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes cardIn { to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .product-card { animation:none; opacity:1; transform:none; } }

.product-media { position:relative; aspect-ratio:3/4; overflow:hidden; background:#f0eee9; margin-bottom:1.1rem; }
.product-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease; }
.product-media img.alt { opacity:0; }
@media (hover: hover) {
  .product-card:hover .product-media img { transform:scale(1.04); }
  .product-card:hover .product-media img.alt { opacity:1; }
}
.product-badge { position:absolute; top:0.8rem; left:0.8rem; z-index:1; background:var(--cream); font-family:'Raleway',sans-serif; letter-spacing:0.2em; font-size:0.55rem; text-transform:uppercase; color:var(--charcoal) !important; padding:0.35rem 0.6rem; }

.product-tag { font-family:'Raleway',sans-serif; font-weight:300; letter-spacing:0.3em; font-size:0.55rem; text-transform:uppercase; color:var(--muted); margin-bottom:0.4rem; }
.product-name { font-family:'Raleway',sans-serif; font-weight:400; letter-spacing:0.08em; font-size:0.85rem; color:var(--charcoal); line-height:1.4; }
.product-sizes { font-size:0.7rem; color:var(--muted); line-height:1.6; margin-top:0.35rem; flex:1; }
.product-foot { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; margin-top:0.9rem; padding-top:0.9rem; border-top:1px solid var(--hairline); }
.product-price { font-family:'Raleway',sans-serif; font-weight:300; font-size:0.85rem; letter-spacing:0.05em; color:var(--charcoal) !important; }

.shop-message { font-size:0.8rem; color:var(--muted); padding:2rem 0; }

/* Quantity stepper */
.qty-stepper { display:inline-flex; align-items:center; border:1px solid var(--charcoal); }
.qty-stepper button { width:28px; height:28px; background:none; border:none; cursor:pointer; color:var(--charcoal); font-size:0.85rem; line-height:1; transition:background 0.2s ease; }
.qty-stepper button:hover { background:rgba(27,28,25,0.06); }
.qty-stepper span { min-width:22px; text-align:center; font-size:0.72rem; color:var(--charcoal) !important; }

/* Basket */
.basket-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; }
@media (max-width: 767px) { .basket-grid { grid-template-columns:1fr; gap:2.5rem; } }
.basket-box { border:1px solid var(--charcoal); padding:2rem 2.5rem; }
@media (max-width: 767px) { .basket-box { padding:1.5rem 1.25rem; } }
.basket-line { display:grid; grid-template-columns:64px 1fr auto; gap:1rem; align-items:start; padding:1rem 0; border-bottom:1px solid var(--hairline); }
.basket-thumb { width:64px; aspect-ratio:3/4; object-fit:cover; background:#f0eee9; }
.basket-name { font-family:'Raleway',sans-serif; letter-spacing:0.06em; font-size:0.78rem; color:var(--charcoal); text-decoration:none; line-height:1.4; display:block; }
.basket-size { font-size:0.7rem; color:var(--muted); margin:0.2rem 0 0.6rem; }
.basket-pre { font-size:0.68rem; color:var(--charcoal) !important; margin:-0.3rem 0 0.6rem; font-style:italic; }
.basket-price { font-family:'Raleway',sans-serif; font-weight:300; font-size:0.8rem; color:var(--charcoal) !important; white-space:nowrap; }
.basket-empty { font-size:0.78rem; color:var(--muted); padding:0.8rem 0; }
.basket-sum { display:flex; justify-content:space-between; padding-top:0.9rem; font-size:0.75rem; color:var(--muted); }
.basket-total { display:flex; justify-content:space-between; padding-top:0.9rem; margin-top:0.6rem; border-top:1px solid var(--hairline); font-family:'Raleway',sans-serif; letter-spacing:0.15em; text-transform:uppercase; font-size:0.75rem; color:var(--charcoal); }
.basket-total span, .basket-sum span { color:inherit !important; }
.basket-note { font-size:0.7rem; color:var(--muted); line-height:1.7; margin-top:1rem; }
.basket-error { font-size:0.75rem; color:#8a3b2e !important; line-height:1.6; margin-top:1rem; }

/* Product page */
.pdp { display:grid; grid-template-columns:1.15fr 1fr; gap:4rem; align-items:start; }
@media (max-width: 899px) { .pdp { grid-template-columns:1fr; gap:2.5rem; } }
.pdp-main { position:relative; aspect-ratio:4/5; overflow:hidden; background:#f0eee9; }
.pdp-main img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumbs { display:grid; grid-template-columns:repeat(6,1fr); gap:0.5rem; margin-top:0.5rem; }
.pdp-thumb { aspect-ratio:3/4; overflow:hidden; background:#f0eee9; border:none; padding:0; cursor:pointer; opacity:0.55; transition:opacity 0.2s ease; outline-offset:2px; }
.pdp-thumb.active, .pdp-thumb:hover { opacity:1; }
.pdp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-info { position:sticky; top:6rem; }
@media (max-width: 899px) { .pdp-info { position:static; } }
.pdp-name { font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal); line-height:1.35; }
.pdp-price { font-family:'Raleway',sans-serif; font-weight:300; font-size:1.1rem; letter-spacing:0.05em; color:var(--charcoal) !important; margin:0.8rem 0 2rem; }
.pdp-label { font-family:'Raleway',sans-serif; letter-spacing:0.2em; font-size:0.6rem; text-transform:uppercase; color:var(--muted); margin-bottom:0.7rem; display:flex; justify-content:space-between; }
.pdp-label b { font-weight:400; color:var(--charcoal) !important; letter-spacing:0.1em; }

.swatches { display:flex; gap:0.6rem; margin-bottom:1.8rem; }
.swatch { width:28px; height:28px; border-radius:50%; display:block; outline:1px solid transparent; outline-offset:3px; transition:outline-color 0.2s ease; }
.swatch:hover { outline-color:var(--hairline); }
.swatch.active { outline-color:var(--charcoal); }

.sizes { display:grid; grid-template-columns:repeat(6,1fr); gap:0.4rem; margin-bottom:0.8rem; }
.size-btn { position:relative; border:1px solid var(--hairline); background:none; padding:0.75rem 0 1.05rem; cursor:pointer; font-family:'Raleway',sans-serif; font-size:0.72rem; letter-spacing:0.08em; color:var(--charcoal); transition:border-color 0.2s ease, background 0.2s ease; }
.size-btn small { position:absolute; left:0; right:0; bottom:0.25rem; font-family:'Manrope',sans-serif; font-size:0.5rem; letter-spacing:0.04em; color:var(--muted); text-transform:uppercase; }
.size-btn:hover { border-color:var(--charcoal); }
.size-btn.active { border-color:var(--charcoal); background:var(--charcoal); color:var(--cream); }
.size-btn.active small { color:rgba(251,249,244,0.7); }
.size-status { font-size:0.72rem; color:var(--muted); min-height:1.2rem; margin-bottom:1.4rem; line-height:1.6; }
.size-status b { color:var(--charcoal) !important; font-weight:500; }
.pdp-added { font-size:0.72rem; color:var(--charcoal) !important; margin-top:0.9rem; min-height:1rem; }
.pdp-added a { color:var(--charcoal); }
.pdp-ship { margin-top:1.6rem; padding:1.1rem 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); font-size:0.72rem; color:var(--muted); line-height:1.8; }
.pdp-desc { margin-top:1.6rem; }
.pdp-desc p { font-size:0.8rem; color:var(--muted); line-height:1.85; margin-bottom:1rem; }
.pdp-desc p:first-child { color:var(--charcoal) !important; }

/* Launching soon — shown until the server says the shop is open */
.shop-pending .shop-content { visibility:hidden; }
.shop-locked .shop-content { display:none !important; }
.launch { display:flex; min-height:calc(100vh - 4.5rem); align-items:center; justify-content:center; text-align:center; padding:5rem 0; }
.launch-when { font-family:'Raleway',sans-serif; font-weight:300; letter-spacing:0.15em; font-size:1.1rem; text-transform:uppercase; color:var(--charcoal); margin:0.6rem 0 2rem; }
.countdown { display:flex; justify-content:center; align-items:flex-start; gap:clamp(1rem,4vw,2.5rem); }
.countdown-unit { min-width:4.5rem; }
.section-cream .countdown .countdown-num { display:block; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(2.5rem,7vw,4.5rem); letter-spacing:0.08em; line-height:1; color:var(--charcoal) !important; font-variant-numeric:tabular-nums; }
.countdown-label { display:block; margin-top:0.6rem; }
.section-cream .countdown .countdown-sep { font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(2rem,5vw,3.5rem); line-height:1; color:var(--muted-light) !important; }
@media (max-width: 767px) { .countdown-unit { min-width:3.5rem; } }