/* Misfit Mixers product pages.
   Loaded after product.css,product-dark.css,product-ui.css and offers.css,so it wins where it overlaps. The product pages are dark; every colour
   here is picked against #070313. */

:root{
  --pdp-ink:#070313;
  --pdp-panel:#0e0820;
  --pdp-panel-2:#140c28;
  --pdp-line:#f4ead61f;
  --pdp-line-2:#f4ead636;
  --pdp-cream:#f4ead6;
  --pdp-muted:#b9aec4;
  --pdp-pink:#dc3c72;
  --pdp-blue:#38b7d9;
  --pdp-gold:var(--mm-gold-soft,#e6b96f);
}

/* ---------- Breadcrumb ----------
   The body carries a paper texture that is light in places,so the crumb
   strip gets its own surface rather than sitting on whatever is behind it. */
.crumb-band{
  background:var(--pdp-ink);
  border-bottom:1px solid var(--pdp-line);
}
.crumbs{
  padding:13px 0;
  font-size:calc(.78rem * var(--mm-fs-body, 1));
  color:var(--pdp-muted);
}
.crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.crumbs a{color:var(--pdp-muted);text-decoration:none}
.crumbs a:hover{color:var(--pdp-cream)}
.crumbs li+li:before{
  content:"/";
  margin-right:8px;
  color:#f4ead63d;
}
.crumbs [aria-current]{color:var(--pdp-cream)}

/* ---------- Gallery ---------- */
.gallery-stage{position:relative}
.gallery-badge{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  padding:6px 11px;
  background:var(--pdp-pink);
  color:#fff;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.6rem * var(--mm-fs-head, 1));
  letter-spacing:.11em;
  text-transform:uppercase;
}
/* product-ui.css hid the thumb rail back when the two edition pages had no
   second image. Every product page has a gallery now,so bring it back. */
.thumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.thumb{
  border-radius:2px;
  transition:border-color .18s, transform .18s;
}
.thumb:hover{transform:translateY(-2px)}
.thumb:focus-visible{outline:2px solid var(--pdp-blue);outline-offset:2px}

/* ---------- Buy column ---------- */
.kind-tag{
  display:inline-block;
  margin-bottom:12px;
  padding:5px 11px;
  border:1px solid var(--pdp-line-2);
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.58rem * var(--mm-fs-head, 1));
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--pdp-gold);
}
.price-row{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin:14px 0 4px;
}
.price-row .price{margin:0}
.price-compare{
  font-size:calc(.86rem * var(--mm-fs-head, 1));
  color:var(--pdp-muted);
}
.price-compare b{color:var(--pdp-cream);font-weight:400}

/* Add-on list with a live running total */
.addons{margin:0;padding:0;list-style:none}
.addons li{margin:0 0 8px}
.addons label{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--pdp-line);
  border-radius:3px;
  background:#f4ead608;
  cursor:pointer;
  transition:border-color .18s, background .18s;
}
.addons label:hover{border-color:var(--pdp-line-2);background:#f4ead612}
.addons input:checked+span+em,.addons label:has(input:checked){border-color:#38b7d977;background:#38b7d914}
.addons strong{display:block;font-size:calc(.92rem * var(--mm-fs-body, 1));font-weight:600}
.addons small{
  display:block;
  margin-top:2px;
  font-size:calc(.74rem * var(--mm-fs-body, 1));
  color:var(--pdp-muted);
}
.addons em{font-style:normal;font-family:var(--mm-font-display,Cinzel,Georgia,serif);font-size:calc(.82rem * var(--mm-fs-head, 1))}
.addons-title{
  margin:26px 0 12px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.66rem * var(--mm-fs-head, 1));
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--pdp-blue);
}
.addon-total{
  margin:12px 0 0;
  padding:12px 14px;
  border:1px dashed var(--pdp-line-2);
  border-radius:3px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.84rem * var(--mm-fs-head, 1));
}
.addon-total span{color:var(--pdp-muted);font-family:var(--mm-font-body,Garamond,Georgia,serif);font-size:calc(.84rem * var(--mm-fs-body, 1))}

/* ---------- Links ----------
   product-ui.css colours .details h2/p/li but not anchors inside them,so
   every link in the details panel and the accordions was falling back to the
   browser's default blue and visited purple. One base rule fixes the lot. */
main a{color:var(--pdp-blue)}
.misfit-page a:visited{color:var(--pdp-blue)}
.details a,.accordions a{
  color:var(--pdp-blue);
  text-decoration:none;
  border-bottom:1px solid #38b7d959;
  padding-bottom:1px;
  transition:.18s;
}
.details a:hover,.accordions a:hover{color:var(--pdp-cream);border-bottom-color:var(--pdp-cream)}

/* Bundle contents,as linked rows rather than a list of blue words. */
.inside-links{columns:auto;display:grid;gap:10px}
.inside-links li{margin:0;padding:0}
.inside-links li:before{content:none}
.inside-links a{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:14px;
  padding:11px 14px;
  border:1px solid var(--pdp-line);
  border-bottom:1px solid var(--pdp-line);
  border-radius:3px;
  background:#f4ead60a;
  color:var(--pdp-cream);
  text-decoration:none;
  transition:border-color .18s, background .18s, transform .18s;
}
.inside-links a:hover{
  border-color:#38b7d980;
  background:#38b7d912;
  color:var(--pdp-cream);
  transform:translateX(3px);
}
.inside-links img{
  width:46px;height:46px;
  object-fit:contain;
  background:#f4ead60f;
  border:1px solid var(--pdp-line);
}
.inside-links strong{display:block;font-size:calc(.95rem * var(--mm-fs-body, 1));font-weight:600;line-height:1.25}
.inside-links small{display:block;margin-top:2px;font-size:calc(.76rem * var(--mm-fs-body, 1));color:var(--pdp-muted);font-style:italic}
.inside-links b{
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.86rem * var(--mm-fs-head, 1));
  font-weight:400;
  color:var(--pdp-gold);
}
@media(max-width:560px){
  .inside-links a{grid-template-columns:38px 1fr auto;gap:11px;padding:10px 12px}
  .inside-links img{width:38px;height:38px}
}

/* ---------- Bundle contents ---------- */
.bundle-contents{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--pdp-line);
}
.bundle-contents li{
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--pdp-line);
}
.bundle-contents img{
  width:54px;height:54px;
  object-fit:contain;
  background:#f4ead60f;
  border:1px solid var(--pdp-line);
}
.bundle-contents a{color:var(--pdp-cream);text-decoration:none;font-size:calc(.94rem * var(--mm-fs-body, 1))}
.bundle-contents a:hover{color:var(--pdp-blue);text-decoration:underline}
.bundle-contents small{display:block;color:var(--pdp-muted);font-size:calc(.76rem * var(--mm-fs-body, 1));margin-top:2px}
.bundle-contents b{font-family:var(--mm-font-display,Cinzel,Georgia,serif);font-size:calc(.8rem * var(--mm-fs-head, 1));font-weight:400;color:var(--pdp-muted)}
.bundle-sum{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:13px 0 0;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.84rem * var(--mm-fs-head, 1));
}

/* ---------- Sticky buy bar ---------- */
.buy-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:80;
  display:none;
  align-items:center;
  gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#0b0619f2;
  backdrop-filter:blur(8px);
  border-top:1px solid var(--pdp-line-2);
  transform:translateY(105%);
  transition:transform .28s ease;
}
.buy-bar.is-up{transform:none}
.buy-bar-info{flex:1;min-width:0}
.buy-bar-info b{
  display:block;
  font-size:calc(.86rem * var(--mm-fs-body, 1));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.buy-bar-info span{
  display:block;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.92rem * var(--mm-fs-head, 1));
  color:var(--pdp-gold);
}
.buy-bar .btn{min-height:46px;padding:10px 22px;box-shadow:0 5px 0 #92294f}

/* The details band is a fixed-ratio torn-paper panel (aspect-ratio 19/5,
   then 24/5 on wide screens). Bundle pages put linked rows in it instead of
   a short bullet list,which is taller than that ratio allows,so the last
   row fell out of the panel. The design scoped that to body[data-page-type],
   which no section can set; the band grows itself in
   sections/misfit-product-details/misfit-product-details.css instead, keyed
   off the section root's own data-product-kind. */
.misfit-page[data-product-kind="bundle"] .details-grid{align-items:center}

/* ---------- Social proof ---------- */
.proof{
  padding:74px 0;
  background:var(--pdp-panel);
  border-block:1px solid var(--pdp-line);
}
.proof h2{
  margin:0 0 10px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(clamp(1.5rem,2.6vw,2.3rem) * var(--mm-fs-head, 1));
  text-align:center;
}
.proof-intro{
  margin:0 auto 38px;
  max-width:560px;
  text-align:center;
  color:var(--pdp-muted);
  font-size:calc(.94rem * var(--mm-fs-body, 1));
}
.proof-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:38px;
}
.proof-stat{
  padding:22px 16px;
  text-align:center;
  border:1px solid var(--pdp-line);
  background:#f4ead608;
}
.proof-stat img{width:44px;height:44px;object-fit:contain;margin-bottom:10px}
.proof-stat b{
  display:block;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(1.25rem * var(--mm-fs-head, 1));
  color:var(--pdp-cream);
}
.proof-stat span{
  display:block;
  margin-top:4px;
  font-size:calc(.78rem * var(--mm-fs-body, 1));
  color:var(--pdp-muted);
}
.proof-quotes{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:820px;
  margin:0 auto;
}
.proof-players{grid-template-columns:repeat(3,1fr);margin-top:18px}
.proof-quote{
  margin:0;
  padding:24px 22px;
  border:1px solid var(--pdp-line);
  border-left:3px solid var(--pdp-blue);
  background:#f4ead608;
}
.proof-players .proof-quote{border-left-color:var(--pdp-gold)}
.proof-quote blockquote{
  margin:0;
  font-size:calc(1.02rem * var(--mm-fs-body, 1));
  line-height:1.5;
  font-style:italic;
}
.proof-quote blockquote:before{content:"\201C"}
.proof-quote blockquote:after{content:"\201D"}
.proof-quote figcaption{
  margin-top:12px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.7rem * var(--mm-fs-head, 1));
  letter-spacing:.07em;
  color:var(--pdp-muted);
}
.proof-quote figcaption a{color:var(--pdp-blue);text-decoration:none}
.proof-quote figcaption a:hover{text-decoration:underline}
.proof-quote .stars{color:var(--pdp-gold);letter-spacing:.14em;margin-bottom:8px}

/* ---------- Complete your set ---------- */
.set{padding:78px 0;background:var(--pdp-panel-2)}
.set h2{
  margin:0 0 8px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(clamp(1.5rem,2.6vw,2.3rem) * var(--mm-fs-head, 1));
  text-align:center;
}
.set-intro{
  margin:0 auto 34px;
  max-width:600px;
  text-align:center;
  color:var(--pdp-muted);
  font-size:calc(.94rem * var(--mm-fs-body, 1));
}
.set-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.set-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:16px;
  border:1px solid var(--pdp-line);
  background:#f4ead60a;
  transition:border-color .18s, background .18s;
}
.set-card.is-picked{border-color:#38b7d980;background:#38b7d912}
.set-card.is-owned{opacity:.55}
.set-card-img{
  height:132px;
  margin-bottom:12px;
  background:#f4ead60f;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.set-card-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.set-card h3{margin:0;font-family:var(--mm-font-display,Cinzel,Georgia,serif);font-size:calc(.86rem * var(--mm-fs-head, 1))}
.set-card h3 a{color:var(--pdp-cream);text-decoration:none}
.set-card h3 a:hover{color:var(--pdp-blue);text-decoration:underline}
.set-card .sub{margin:3px 0 8px;font-size:calc(.76rem * var(--mm-fs-body, 1));color:var(--pdp-muted);font-style:italic}
.set-card p{margin:0 0 14px;font-size:calc(.84rem * var(--mm-fs-body, 1));line-height:1.4;flex:1;color:#d6cbdb}
.set-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.set-card-foot .price{margin:0;font-size:calc(1.1rem * var(--mm-fs-head, 1))}
.set-pick{
  min-height:38px;
  padding:8px 13px;
  border:1px solid var(--pdp-line-2);
  border-radius:3px;
  background:transparent;
  color:var(--pdp-cream);
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.64rem * var(--mm-fs-head, 1));
  letter-spacing:.07em;
  cursor:pointer;
  transition:.18s;
}
.set-pick:hover{border-color:var(--pdp-blue);color:var(--pdp-blue)}
.set-card.is-picked .set-pick{background:var(--pdp-blue);border-color:var(--pdp-blue);color:#05131a}
.set-card-tag{
  position:absolute;
  top:10px;right:10px;
  padding:4px 9px;
  background:#0b0619cc;
  border:1px solid var(--pdp-line-2);
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.54rem * var(--mm-fs-head, 1));
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--pdp-gold);
}
.set-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:24px;
  padding:20px 22px;
  border:1px solid var(--pdp-line-2);
  background:#f4ead60d;
}
.set-bar-copy{flex:1;min-width:230px}
.set-bar-copy b{
  display:block;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(1.05rem * var(--mm-fs-head, 1));
  color:var(--pdp-cream);
}
.set-bar-copy span{
  display:block;
  margin-top:5px;
  font-size:calc(.86rem * var(--mm-fs-body, 1));
  color:var(--pdp-muted);
}
.set-bar-copy span b{
  display:inline;
  font-size:calc(.86rem * var(--mm-fs-body, 1));
  color:var(--pdp-gold);
}
.set-bar .btn{flex:0 0 auto;width:auto;min-width:230px;white-space:nowrap}
.set-bar .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
@media(max-width:560px){.set-bar .btn{width:100%;min-width:0}}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .set-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .proof{padding:58px 0}
  .proof-stats{grid-template-columns:1fr;gap:12px}
  .proof-stat{display:flex;align-items:center;gap:14px;text-align:left;padding:16px}
  .proof-stat img{margin:0;width:36px;height:36px;flex:none}
  .proof-quotes,.proof-players{grid-template-columns:1fr}
  .set{padding:56px 0}
  .set-grid{grid-template-columns:1fr 1fr}
  .buy-bar{display:flex}
}
@media(max-width:560px){
  .set-grid{grid-template-columns:1fr}
  .set-card{flex-direction:row;gap:14px;align-items:center}
  .set-card-img{width:86px;height:86px;flex:none;margin:0}
  .set-card-body{flex:1;min-width:0}
  .set-card p{display:none}
  .set-card-tag{top:6px;right:6px;font-size:calc(.5rem * var(--mm-fs-body, 1));padding:3px 7px}
  .set-card-body{padding-right:96px}
  .bundle-contents li{grid-template-columns:44px 1fr auto;gap:11px}
  .bundle-contents img{width:44px;height:44px}
  .addons label{grid-template-columns:auto 1fr;row-gap:4px}
  .addons em{grid-column:2;justify-self:start;color:var(--pdp-gold)}
  .crumbs{font-size:calc(.72rem * var(--mm-fs-body, 1))}
}

/* ---------- Recommended and recently viewed products (F-09) ----------
   The stock recommended-product and recently-viewed-product sections,
   restyled to sit on the dark product page like the "Complete your set"
   cards. The stock markup is untouched; every rule is scoped to pages that
   carry the Misfit product hero, so the sections keep their stock look
   anywhere else. Colours come from the section's colour
   scheme (scheme-8 in the product templates) and the --pdp-* tokens above. */
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product){
  color:var(--pdp-cream);
  font-family:var(--mm-font-body,Garamond,Georgia,serif);
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) > .block-heading{
  margin:0;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(clamp(1.5rem,2.6vw,2.3rem) * var(--mm-fs-head, 1));
  font-weight:700;
  line-height:1.1;
  color:var(--pdp-cream);
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:16px;
  border:1px solid var(--pdp-line);
  background:color-mix(in srgb, var(--pdp-cream) 4%, transparent);
  transition:border-color .18s, background .18s;
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-card:hover{
  border-color:var(--pdp-line-2);
  background:color-mix(in srgb, var(--pdp-cream) 7%, transparent);
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-image__layer-image-wrapper{
  background:color-mix(in srgb, var(--pdp-cream) 6%, transparent);
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-title{
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.86rem * var(--mm-fs-head, 1));
  color:var(--pdp-cream);
  text-decoration:none;
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-title:hover{
  color:var(--pdp-blue);
  text-decoration:underline;
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-price .product-price__sale{
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  color:var(--pdp-gold);
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-price .product-price__origin{
  color:var(--pdp-muted);
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-card-info{
  color:var(--pdp-muted);
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-buy-button{
  border-radius:3px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  letter-spacing:.06em;
}
body:has(.product-hero.misfit-page) :is(.section-recommended-product,.section-recently-viewed-product) .block-product-list__button{
  color:var(--pdp-cream);
  border-color:var(--pdp-line-2);
}

/* ---------- Pre-order app (B13) ----------
   The buy row sits in the stock <theme-product-detail> root the Pre-order app
   and the platform bridge look for (components/misfit/product-detail-root).
   The root adds no box: the buy column lays out exactly as before. */
theme-product-detail.misfit-product-detail{display:contents}

/* The app's description, inserted after the Add to Cart button inside the
   flattened form (a .buy-row grid cell), takes the whole row under it. */
.buy-row [data-pre-order-spu-message-root]{
  grid-column:1 / -1;
  flex-basis:100%;
  width:100%;
  min-width:0;
}
/* The app pads its line with an inline 20px below only; even it out so the
   box is not top-heavy. */
.buy-row [data-pre-order-spu-message-root] div{padding-block:8px !important}

/* The app's text on the dark hero: Misfit body face, gold on ink, never the
   app's stock colours. Covers the description line and the option block's
   own copy (the app renders it into .pre-order-purchase-option__app-block). */
.product-info [data-pre-order-spu-message-root],
.product-info .pre-order-purchase-option__app-block{
  font-family:var(--mm-font-body,Garamond,Georgia,serif);
  font-size:calc(.95rem * var(--mm-fs-body, 1));
  font-style:italic;
  line-height:1.4;
  color:var(--pdp-gold);
}
/* The app's text sits in a child carrying the theme's .body4 and a hashed
   colour class, which set font and colour directly; hand the parent's down.
   Stable hooks only: the hashed class name changes with every app build. */
.product-info [data-pre-order-spu-message-root] *{
  font-family:inherit;
  font-size:inherit;
  font-style:inherit;
  color:inherit;
}
.product-info .pre-order-purchase-option-container{
  margin:0 0 14px;
}
.product-info .pre-order-purchase-option__app-block *{
  font-family:inherit;
  color:inherit;
}
/* When the app takes over the button, its own button keeps the Misfit .btn
   look rather than the app's stock fill. */
.product-info .pre-order-purchase-option__app-block button{
  width:100%;
  min-height:52px;
  border:0;
  border-radius:3px;
  background:var(--pdp-pink);
  box-shadow:0 5px 0 #92294f;
  color:#fff;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-style:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.product-info .pre-order-purchase-option__app-block button:focus-visible{
  outline:2px solid var(--pdp-blue);
  outline-offset:3px;
}
/* The app writes its button label into .pre-order-text inside Add to Cart. */
.buy-row .btn .pre-order-text{font:inherit;color:inherit;letter-spacing:inherit}