/* Product page additions: the open "How it works" block, the live shipping and returns lines in the delivery
   box, the line under a personalization field, and the optional demo video. Linked by the server-rendered
   product page only (netlify/lib/seo.mjs PRODUCT_INFO_STYLES); it relies on site.css's tokens and loads after it.
   Raise the ?v= in seo.mjs whenever this file changes. */

/* How it works: open by default, collapsible. */
.how-block{margin-top:20px;border:1px solid var(--line);border-radius:10px;background:var(--white);padding:0 18px}
.how-block summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;font-size:15px;font-weight:750;letter-spacing:-.01em}
.how-block summary::-webkit-details-marker{display:none}
.how-block summary:after{content:"−";font-size:22px;font-weight:400;line-height:1}
.how-block:not([open]) summary:after{content:"+"}
.how-body{padding-bottom:18px}
.how-lead,.how-note{font-size:13px;line-height:1.7}
.how-note{margin-top:8px;color:var(--ink)}
.how-steps{list-style:none;margin:16px 0;padding:0;display:grid;gap:13px}
.how-steps li{display:flex;gap:12px;align-items:flex-start}
.how-num{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.how-steps p{font-size:13px;line-height:1.65;padding-top:2px}
.how-steps strong{color:var(--ink)}
.how-facts{margin:16px 0 0;border-top:1px solid var(--line)}
.how-facts>div{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.how-facts>div:last-child{border-bottom:0;padding-bottom:0}
.how-facts dt{font-size:12px;font-weight:750;color:var(--ink)}
.how-facts dd{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}

/* Delivery box: live US rates and the returns summary. */
.delivery-box p,.delivery-box li{font-size:12px;line-height:1.7}
.delivery-label{font-weight:700;color:var(--ink)}
.delivery-rates{list-style:none;margin:2px 0 0;padding:0}
.delivery-rates li{margin-top:2px;color:var(--muted)}
.delivery-returns{margin-top:9px}

/* Under a personalization field. */
.product-form .field-help{font-size:12px;line-height:1.6}
.product-form .field-help a{text-decoration:underline;text-underline-offset:3px}

/* Demo video (only when a listing has one): in the gallery's second slot beside the wide layout, under the
   buy box on a narrow one, so a phone's first screen never grows. Square, cropped to fit like the photos. */
.product-video{margin:0}
.product-video video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;background:#f1f0e9}
.product-video-gallery{margin-top:15px}
.product-video-detail{display:none;margin-top:20px}
.product-gallery.has-video{position:static}

@media(max-width:800px){
  .product-video video{border-radius:13px}
}
@media(max-width:600px){
  .how-block{padding:0 15px}
  .how-facts>div{grid-template-columns:1fr;gap:2px}
  .product-video-gallery{display:none}
  .product-video-detail{display:block}
  .product-video video{border-radius:16px}
}