/* Misfit Mixers promotional offer UI.
   Shared by murder-on-the-rocks.html and both product pages.
   Colours are literal (not var()) so the file works on pages that do and
   do not declare the :root palette. */

/* ---------- Cart reward ladder ---------- */
.cart-ladder{
  padding:16px 22px 34px;
  border-bottom:1px solid #ffffff22;
  background:var(--mm-surface-cart-ladder,#1d1936);
}
.ladder-msg{
  margin:0 0 16px;
  font-size:calc(.84rem * var(--mm-fs-body, 1));
  line-height:1.4;
  color:#e8dfd0;
  text-align:center;
}
.ladder-msg b{
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  color:var(--mm-gold-soft,#e6b96f);
  font-weight:700;
}
.ladder-track{
  position:relative;
  height:4px;
  margin:0 8px;
  border-radius:2px;
  background:#ffffff1f;
}
.ladder-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  border-radius:2px;
  background:linear-gradient(90deg,var(--mm-pink,#d63e72),var(--mm-gold-soft,#e6b96f));
  transition:width .35s ease;
}
.ladder-node{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
}
.ladder-node i{
  display:block;
  width:13px; height:13px;
  border-radius:50%;
  border:2px solid #4a4266;
  background:var(--mm-surface-cart-ladder,#1d1936);
  transition:.25s;
}
.ladder-node.is-hit i{
  border-color:var(--mm-gold-soft,#e6b96f);
  background:var(--mm-gold-soft,#e6b96f);
  box-shadow:0 0 0 4px var(--mm-gold-soft-tint,#e6b96f2e);
}
.ladder-node em{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:84px;
  font-style:normal;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.56rem * var(--mm-fs-head, 1));
  line-height:1.45;
  letter-spacing:.03em;
  text-align:center;
  color:#9f97ae;
  transition:.25s;
}
.ladder-node.is-hit em{color:var(--mm-gold-soft,#e6b96f)}
.ladder-node-end em{left:auto;right:-6px;transform:none;text-align:right}

/* ---------- Free gift lines in the cart ---------- */
.gift-stack{
  margin-top:6px;
  padding-top:14px;
  border-top:1px dashed #ffffff33;
}
.gift-stack-title{
  margin:0 0 4px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.6rem * var(--mm-fs-head, 1));
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mm-gold-soft,#e6b96f);
}
.cart-line.gift-line{border-bottom:1px solid #ffffff14}
.cart-line.gift-line:last-child{border-bottom:0;padding-bottom:2px}
.gift-tile{
  width:68px; height:68px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--mm-surface-gift-tile,#241f42);
  border:1px solid var(--mm-gold-soft-tint,#e6b96f4d);
}
.gift-tile img{width:100%;height:100%;object-fit:contain;display:block}
.gift-tile-mark{
  background:var(--mm-surface-gift-tile,#241f42);
  color:var(--mm-gold-soft,#e6b96f);
  font-size:calc(1.5rem * var(--mm-fs-body, 1));
  line-height:1;
}
.gift-line h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gift-note{
  display:block;
  margin-top:4px;
  font-size:calc(.68rem * var(--mm-fs-body, 1));
  font-style:italic;
  color:var(--mm-gold-soft-tint,#e6b96fcc);
}
.gift-price{
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.78rem * var(--mm-fs-head, 1));
  letter-spacing:.06em;
  color:var(--mm-gold-soft,#e6b96f);
}

/* ---------- On-page offer callouts ---------- */
.offer-strip{
  background:var(--mm-ink,#17142f);
  color:var(--mm-cream,#f3ead5);
  border-block:1px solid #ffffff1a;
}
.offer-strip-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.offer-strip-item{
  padding:26px 22px;
  text-align:center;
}
.offer-strip-item+.offer-strip-item{border-left:1px solid #ffffff1f}
.offer-strip-item b{
  display:block;
  margin-bottom:6px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.74rem * var(--mm-fs-head, 1));
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mm-gold-soft,#e6b96f);
}
.offer-strip-item > span{
  display:block;
  font-size:calc(.92rem * var(--mm-fs-body, 1));
  line-height:1.45;
  color:#d9d0e0;
}
.offer-strip-item small{
  display:block;
  margin-top:6px;
  font-size:calc(.72rem * var(--mm-fs-body, 1));
  font-style:italic;
  color:#9f97ae;
}

/* Gift callout inside a bundle tier */
.tier-gift{
  margin:0 0 15px;
  padding:11px 12px;
  border:1px solid var(--mm-pink-tint,#d63e7233);
  border-radius:3px;
  background:var(--mm-pink-tint,#d63e720f);
  text-align:center;
}
.tier-gift b{
  display:block;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.6rem * var(--mm-fs-head, 1));
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--mm-pink-deep,#a32a52);
  margin-bottom:5px;
}
.tier-gift span{
  /* display:block; */
  font-size:calc(.82rem * var(--mm-fs-body, 1));
  line-height:1.4;
  color:#3d3350;
}
.tier-gift small{
  display:block;
  margin-top:5px;
  font-size:calc(.7rem * var(--mm-fs-body, 1));
  font-style:italic;
  color:#776876;
}

/* PDP gift note. The dark product pages already style .gift in
   product-dark.css,so only the inner marks are set here. */
.gift b{
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.8rem * var(--mm-fs-head, 1));
  letter-spacing:.02em;
  color:#38b7d9;
}
.gift a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- Card links added when every product got its own page ---------- */
.shop-info h3 a,.tier h3 a{color:inherit;text-decoration:none}
.shop-info h3 a:hover,.tier h3 a:hover{color:var(--mm-pink,#d63e72)}
.shop-image a{display:block;width:100%;height:100%}
.shop-detail,.tier-detail{
  display:inline-block;
  margin:0 0 14px;
  font-family:var(--mm-font-display,Cinzel,Georgia,serif);
  font-size:calc(.64rem * var(--mm-fs-head, 1));
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#7a6a86;
  text-decoration:none;
  border-bottom:1px solid #7a6a8655;
  padding-bottom:2px;
  transition:.18s;
}
.shop-detail:hover,.tier-detail:hover{color:var(--mm-pink-deep,#a32a52);border-bottom-color:var(--mm-pink-deep,#a32a52)}
.tier-detail{margin:13px auto 0}
.tier a img{display:block;width:100%}

/* ---------- Choose Your Edition card imagery ----------
   The section is locked to aspect-ratio 1760/624,so its height is a pure
   function of its width and cannot grow for its content. The art was sized
   height:100% and scaled up 1.18 on top of that.

   height:100% never resolved: the card's height is indefinite,so the image
   fell back to auto and took its height from its own width and aspect ratio.
   The old deluxe render was landscape (1536x1024) so that happened to look
   fine; deluxe-box.webp is near-square,so it grew far taller than its column
   and spilled out of the torn-paper frame over the section below,covering
   the offer strip headings. max-height:100% and vw-based caps do not help
   either: percentages are just as indefinite,and this page sets
   body{zoom:1.25},which puts vw units 25% out of step with layout pixels.

   Fix: give the art a definite landscape box of its own with aspect-ratio,which resolves from the column width,and let object-fit letterbox any
   render inside it. Art of any shape now behaves the same.

   Specific selectors on purpose: the landing page's own rules live in an
   inline \3c style> after this file,so equal specificity would lose. */
.editions .edition-grid .edition-card > img,.editions .edition-grid .edition-card.deluxe > img{
  height:auto;
  max-height:none;
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  object-position:center;
  align-self:center;
}
.editions .edition-grid .edition-card > img{transform:translateX(-6%) scale(1.06)}
.editions .edition-grid .edition-card.deluxe > img{transform:translateX(-2%) scale(1.02)}
/* Below about 1120px the copy column alone is taller than aspect-ratio
   1760/624 allows,so the cards overflow the section no matter how the art
   is sized. Release the ratio there and let the section size to its content.
   `section.editions` outranks the inline `.editions` rule that sets it. */
@media(min-width:901px) and (max-width:1120px){
  section.editions{
    aspect-ratio:auto;
    padding:46px 4.8% 40px;
  }
}
/* Between 901 and 1240 the section's fixed ratio squeezes hardest,so the
   art box goes flatter there rather than taller,and flatter again at the
   narrowest desktop widths where the copy column needs the room. */
@media(min-width:901px) and (max-width:1240px){
  .editions .edition-grid .edition-card > img,
  .editions .edition-grid .edition-card.deluxe > img{aspect-ratio:16/9}
  .editions .edition-grid .edition-card > img{transform:translateX(-4%) scale(1)}
  .editions .edition-grid .edition-card.deluxe > img{transform:translateX(-1%) scale(1)}
}
@media(min-width:901px) and (max-width:1060px){
  .editions .edition-grid .edition-card > img,.editions .edition-grid .edition-card.deluxe > img{aspect-ratio:21/9;transform:none}
}
@media(max-width:900px){
  .editions .edition-grid .edition-card > img,.editions .edition-grid .edition-card.deluxe > img{
    aspect-ratio:auto;
    height:clamp(165px,30vw,235px);
    transform:none;
  }
}

/* The Most Popular ribbon hangs above its card,which collides with the
   card above once the tier grid wraps to two columns. Tuck it inside. */
@media(max-width:900px){
  .tier.popular{padding-top:38px}
  .tier.popular .ribbon{top:0;left:0;right:0}
  .offer-strip-grid{grid-template-columns:1fr}
  .offer-strip-item+.offer-strip-item{
    border-left:0;
    border-top:1px solid #ffffff1f;
  }
  .offer-strip-item{padding:20px 22px}
}
@media(max-width:480px){
  .cart-ladder{padding:14px 18px 38px}
  .ladder-track{margin:0 10px}
  .ladder-node em{width:78px;font-size:calc(.5rem * var(--mm-fs-body, 1));letter-spacing:.02em}
  .ladder-node-end em{right:-8px}
  .gift-tile{width:58px;height:58px}
}
/* ---------- Pre-order notice (B13) ----------
   components/misfit/preorder-notice: the Theme settings line under the price
   or button wherever a product is added outside the product form. Those
   quick-add buttons also take the Theme settings pre-order label. Small and
   italic so it reads as a note, never as a second price or button. */
.mm-preorder-notice{
  margin:6px 0 0;
  font-family:var(--mm-font-body,Garamond,Georgia,serif);
  font-size:calc(.8rem * var(--mm-fs-body, 1));
  font-style:italic;
  line-height:1.35;
}
/* Bar menu card: cream card, ink copy, centred under the full-width button. */
.tier .mm-preorder-notice{
  margin-top:8px;
  text-align:center;
  color:var(--mm-pink-deep,#a32a52);
}
/* Shop the Collection card: cream card like the tier, centred under the
   price-and-button row. The card is a flex column whose copy absorbs spare
   height, so cards with and without this line stay the same height. */
.shop-card .mm-preorder-notice{
  margin-top:10px;
  text-align:center;
  color:var(--mm-pink-deep,#a32a52);
}
/* Complete the Set band: dark band, under the total and its hint. */
.set-bar-copy .mm-preorder-notice{
  color:var(--pdp-gold,#e6b96f);
}
/* Sticky buy bar: one truncating line under the price, so the bar keeps its
   height and the 78px the page reserves for it. */
.buy-bar-info .mm-preorder-notice{
  margin-top:2px;
  overflow:hidden;
  font-size:calc(.7rem * var(--mm-fs-body, 1));
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--pdp-muted,#b9aec4);
}