/* =====================================================================
   Mothercare x BMB promo card (added 24/09/2026).
   Used on /store/promotions/ and /product-category/promotions/.
   The client's final brochure artwork on one side, the offer and a
   WhatsApp booking button on the other. No Buy button: the offer is not
   in the payment catalogue, so it is booked on WhatsApp.

   Colours are the soft theme (dusty plum and lavender) as literal hex.
   Every rule is scoped under .mc-promo-section (or .promo-hh) because
   the host pages style bare tags: ".wp-content h2 / p / ul / img" in
   style.css set sizes and margins, and service-cream.css / cream-page.css
   force text colours with !important. Colour rules therefore start with
   "html body main" and carry !important too.
   ===================================================================== */

/* The section spans the page (service.css sets margin:0 and wide padding on
   ".service-preview > section"), so the width limit sits on its children. */
.mc-promo-section,
.service-preview > section.mc-promo-section{
  margin:0;
  padding:clamp(2.4rem,5vw,3.8rem) clamp(1rem,3vw,2rem) clamp(1.8rem,4vw,3rem);
}
.mc-promo-section > *{ max-width:1120px; margin-left:auto; margin-right:auto; }
.mc-promo-section.mc-promo-section--list{ padding:0 0 clamp(2rem,4vw,3rem); }

.mc-promo-section .mc-promo-eyebrow{
  max-width:1120px; margin:0 auto clamp(1rem,2vw,1.4rem); text-align:center;
  font-family:var(--sans,'Quicksand',sans-serif); font-size:.8rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}

.mc-promo-section .mc-promo{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.6vw,3.2rem); align-items:center;
  background:#fff; border:1px solid #e7ddef; border-radius:28px;
  padding:clamp(1rem,2.2vw,1.6rem);
  box-shadow:0 26px 60px -38px rgba(85,63,99,.55);
}
.mc-promo-section .mc-promo-art{ margin:0; }
.mc-promo-section .mc-promo-art img{
  display:block; width:100%; max-width:100%; height:auto; aspect-ratio:1122/1402; margin:0;
  border-radius:20px; background:#f3edf7;
}
.mc-promo-section .mc-promo-body{ padding:clamp(.4rem,1.6vw,1.2rem) clamp(.4rem,2vw,1.6rem) clamp(.8rem,2vw,1.4rem) 0; }

.mc-promo-section .mc-promo-flag{
  display:inline-block; margin:0 0 1rem;
  font-family:var(--sans,'Quicksand',sans-serif); font-size:.74rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  background:#f3edf7; border:1px solid #e7ddef; border-radius:999px; padding:.4rem .9rem;
}
.mc-promo-section .mc-promo-title{
  margin:0 0 .8rem;
  font-family:var(--font-display,var(--serif)); font-weight:600;
  font-size:clamp(1.4rem,2.1vw,1.7rem); line-height:1.2; letter-spacing:-.01em;
}
.mc-promo-section .mc-promo-offer{
  display:block; margin-top:.3rem;
  font-size:clamp(2.2rem,4vw,3.1rem); font-weight:700; line-height:1.04; letter-spacing:-.02em;
}
.mc-promo-section .mc-promo-tag{ margin:0 0 1.2rem; font-style:italic; font-size:1.08rem; line-height:1.5; }
.mc-promo-section .mc-promo-list{ list-style:none; margin:0 0 1.3rem; padding:0; display:grid; gap:.6rem; }
.mc-promo-section .mc-promo-list li{ position:relative; margin:0; padding-left:1.7rem; line-height:1.5; font-size:1rem; }
.mc-promo-section .mc-promo-list li::before{
  content:""; position:absolute; left:.15rem; top:.25em;
  width:1rem; height:1rem; border-radius:50%;
  background:#e7ddef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23553f63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.8rem no-repeat;
}
.mc-promo-section .mc-promo-note{
  margin:0 0 1.5rem; padding:.85rem 1rem;
  font-size:.92rem; line-height:1.55;
  background:#faf7fc; border:1px solid #e7ddef; border-radius:14px;
}
.mc-promo-section .mc-promo-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.6rem; border-radius:999px;
  font-family:var(--sans,'Quicksand',sans-serif); font-size:1rem; font-weight:800; letter-spacing:.01em;
  line-height:1.2; text-decoration:none;
  box-shadow:0 14px 28px -16px rgba(85,63,99,.8);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.mc-promo-section .mc-promo-wa svg{ width:1.3rem; height:1.3rem; flex:0 0 auto; }
.mc-promo-section .mc-promo-wa:hover{ transform:translateY(-1px); box-shadow:0 18px 32px -16px rgba(85,63,99,.85); }
.mc-promo-section .mc-promo-wa:focus-visible{ outline:3px solid #a58bbb; outline-offset:3px; }
.mc-promo-section .mc-promo-after{ margin:.9rem 0 0; font-size:.9rem; line-height:1.55; }

/* colours: beat the host pages' forced !important text colours */
html body main .mc-promo-section .mc-promo-eyebrow{ color:#7a6390 !important; }
html body main .mc-promo .mc-promo-flag{ color:#553f63 !important; }
html body main .mc-promo .mc-promo-title{ color:#3f3346 !important; }
html body main .mc-promo .mc-promo-offer{ color:#553f63 !important; }
html body main .mc-promo .mc-promo-tag{ color:#7a6390 !important; }
html body main .mc-promo .mc-promo-list li,
html body main .mc-promo .mc-promo-note,
html body main .mc-promo .mc-promo-after{ color:#62576a !important; }
html body main .mc-promo a.mc-promo-wa{ background:#553f63 !important; color:#fff !important; }
html body main .mc-promo a.mc-promo-wa:hover{ background:#43304f !important; }

@media (max-width:860px){
  .mc-promo-section .mc-promo{ grid-template-columns:1fr; max-width:560px; margin:0 auto; border-radius:24px; }
  .mc-promo-section .mc-promo-body{ padding:.2rem .5rem .8rem; }
  .mc-promo-section .mc-promo-wa{ display:flex; width:100%; padding:.85rem 1rem; }
}
@media (max-width:480px){
  .mc-promo-section .mc-promo{ padding:.75rem; gap:1.2rem; }
  .mc-promo-section .mc-promo-body{ padding:.1rem .35rem .6rem; }
  .mc-promo-section .mc-promo-title{ font-size:1.3rem; }
  .mc-promo-section .mc-promo-offer{ font-size:2.1rem; }
  .mc-promo-section .mc-promo-wa{ font-size:.9rem; gap:.45rem; padding:.85rem .7rem; }
}
@media (prefers-reduced-motion:reduce){
  .mc-promo-section .mc-promo-wa{ transition:none; }
  .mc-promo-section .mc-promo-wa:hover{ transform:none; }
}

/* ---------------------------------------------------------------------
   /store/promotions/ only: the Happy Hour offers (29/09/2026), live at $78,
   Monday to Thursday, booked on WhatsApp. Two image-led cards under a
   centred head. The card frame, flag, title, list and price come from the
   page's own .promo-* rules; these set the image, the body and the button.
   (The ended August National Day block, .promo-past, was removed the same day.)
   --------------------------------------------------------------------- */
.promo-hh,
.service-preview > section.promo-hh{
  margin:0;
  padding:0 clamp(1rem,3vw,2rem) clamp(2.6rem,5vw,3.8rem);
}
.promo-hh::before{
  content:""; display:block; max-width:1120px;
  margin:0 auto clamp(1.8rem,4vw,2.6rem); border-top:1px solid #e7ddef;
}
.promo-hh .promo-hh-head{ max-width:640px; margin:0 auto; text-align:center; }
.promo-hh .promo-hh-eyebrow{
  margin:0 0 .6rem;
  font-family:var(--sans,'Quicksand',sans-serif); font-size:.8rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
/* The class selector beats ".wp-content h2" in style.css. */
.promo-hh .promo-hh-title{
  margin:0 0 .7rem;
  font-family:var(--font-display,var(--serif)); font-weight:600;
  font-size:clamp(1.45rem,2.6vw,1.95rem); line-height:1.2; letter-spacing:-.01em; text-wrap:balance;
}
.promo-hh .promo-hh-lead{ margin:0; font-size:1rem; line-height:1.6; }
.promo-hh .promo-grid{ max-width:1120px; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); align-items:stretch; }
.promo-hh .promo-card{ padding:0; overflow:hidden; border-color:#e7ddef; box-shadow:0 26px 60px -38px rgba(85,63,99,.55); }
.promo-hh .promo-hh-media{ display:block; aspect-ratio:16/9; overflow:hidden; background:#f3edf7; }
.promo-hh .promo-hh-media img{
  display:block; width:100%; height:100%; max-width:none; margin:0; border-radius:0;
  object-fit:cover; object-position:center 40%;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.promo-hh .promo-card:hover .promo-hh-media img{ transform:scale(1.04); }
.promo-hh .promo-hh-body{ display:flex; flex-direction:column; flex:1; padding:clamp(1.4rem,2.8vw,2rem); }
.promo-hh .promo-flag{ background:#f3edf7; border:1px solid #e7ddef; }
/* The card titles are H3s: the class selectors beat ".wp-content h3". */
.promo-hh .promo-card .promo-title{ margin:0 0 .5rem; font-size:clamp(1.3rem,2.4vw,1.6rem); }
/* Tick bullets, as on the Mothercare card above (the page's own list uses a dot). */
.promo-hh .promo-card .promo-list{ margin:0 0 1.2rem; padding:0; gap:.55rem; }
.promo-hh .promo-card .promo-list li{ margin:0; padding-left:1.7rem; font-size:.98rem; line-height:1.5; }
.promo-hh .promo-card .promo-list li::before{
  content:""; left:.15rem; top:.25em;
  width:1rem; height:1rem; border-radius:50%;
  background:#e7ddef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23553f63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.8rem no-repeat;
}
.promo-hh .promo-hh-wa{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; margin-top:1.1rem; padding:.85rem 1.4rem; border-radius:999px;
  font-family:var(--sans,'Quicksand',sans-serif); font-size:1rem; font-weight:800; letter-spacing:.01em;
  line-height:1.2; text-decoration:none;
  box-shadow:0 14px 28px -16px rgba(85,63,99,.8);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.promo-hh .promo-hh-wa svg{ width:1.3rem; height:1.3rem; flex:0 0 auto; }
.promo-hh .promo-hh-wa:hover{ transform:translateY(-1px); box-shadow:0 18px 32px -16px rgba(85,63,99,.85); }
.promo-hh .promo-hh-wa:focus-visible,
.promo-hh .promo-hh-more:focus-visible{ outline:3px solid #a58bbb; outline-offset:3px; }
.promo-hh .promo-hh-more{
  display:inline-flex; align-self:center; align-items:center; gap:.35rem;
  min-height:44px; margin-top:.4rem; padding:0 .4rem;
  font-family:var(--sans,'Quicksand',sans-serif); font-size:.95rem; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .promo-hh .promo-hh-wa, .promo-hh .promo-hh-media img{ transition:none; }
  .promo-hh .promo-hh-wa:hover{ transform:none; }
  .promo-hh .promo-card:hover .promo-hh-media img{ transform:none; }
}

html body main .promo-hh .promo-hh-eyebrow{ color:#7a6390 !important; }
html body main .promo-hh .promo-hh-title{ color:#3f3346 !important; }
html body main .promo-hh .promo-hh-lead{ color:#62576a !important; }
html body main .promo-hh .promo-flag{ color:#553f63 !important; }
html body main .promo-hh .promo-title{ color:#3f3346 !important; }
html body main .promo-hh .promo-sub,
html body main .promo-hh .promo-list li{ color:#62576a !important; }
html body main .promo-hh .promo-now{ color:#553f63 !important; }
html body main .promo-hh a.promo-hh-wa{ background:#553f63 !important; color:#fff !important; }
html body main .promo-hh a.promo-hh-wa:hover{ background:#43304f !important; }
html body main .promo-hh a.promo-hh-more{ color:#553f63 !important; text-decoration-color:#a58bbb !important; }
html body main .promo-hh a.promo-hh-more:hover{ color:#7a6390 !important; }

/* /product-category/promotions/ (29/09/2026): the page keeps its other prices hidden
   (is-promo-paused), but the Happy Hour offers are live at $78, so their cards show it. */
body.is-promo-paused .products-preview .bmb-product-card-price.is-price-live{ display:block !important; }

/* /store/promotions/ closing band: the secondary "Ask a question first" link was
   purple on the plum band and hard to read. Light outline pill while the band is
   plum. (The soft store theme, when it lands, restyles this band and wins.) */
body.svc-cream .service-preview .service-cta .service-cta-actions a.bmb-cta:not(.bmb-cta--primary){
  color:#fff !important; border:1px solid rgba(255,255,255,.6) !important; background:transparent !important;
}

/* /product-category/promotions/ product cards (final audit 24/09/2026): the
   "View details" link was 31px tall on phones. 44px meets the touch target. */
.products-preview .bmb-product-card-cta{ min-height:44px; }

/* /product-category/promotions/ closing block (final audit 24/09/2026): the eyebrow
   "Need help choosing?" was 37px over an 18.7px H2, the old flipped hierarchy the
   homepage has dropped. Small eyebrow, display-size H2, as on the other soft pages.
   Same selectors as products.css; this file loads after it, so these win. */
.products-preview .bmb-products-final-cta .bmb-eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.4; margin-bottom:.8rem;
}
.products-preview .bmb-products-final-cta h2{
  font-family:var(--font-display,var(--serif)); font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:500; line-height:1.15; letter-spacing:-.01em; margin:0 0 1rem;
}