@charset "UTF-8";
/* =====================================================================
   Cassette-help popup — Core patch p10 (Part 2b)
   The popup this patch writes (data/cassette-help-p10.html, via the "Apply the p10
   updates" button in Tools > My Direct Landing Pages) reuses the same base classes as
   the roller measuring/help popups — .mdb-roller-guide, .mdb-guide-heading,
   .mdb-guide-body, .mdb-guide-section, .mdb-guide-footer, .mdb-guide-back — which
   already have their card, heading and footer-button look in assets/roller-guides.css
   (loaded wherever that popup can be opened from). This file only adds the parts that
   CSS does not already cover for the new markup, scoped to .mdb-cassette-guide so it
   never changes any other guide popup: the picture figure, the dot-bulleted lists, the
   colour chip row and the two footer links as pills, with a little less space between
   sections than the longer roller guides use.

   Loaded on every product page (is_product()), after Style D, priority 1004 — the popup
   can be opened from any product page, not only the one that owns it (includes/shop-p10.php).
   Style D tokens with the same values as fallbacks, so this still looks right without it.
   Undo: delete includes/shop-p10.php's enqueue for this file (or delete this file).
   ===================================================================== */

/* 1. Picture: centred, on a warm tile, with a small muted caption. */
.mdb-cassette-guide .mdb-guide-figure{margin:0;width:100%}
body.mdb-complete-site .mdb-cassette-guide .mdb-guide-figure img{display:block;box-sizing:border-box;width:100%;max-width:560px;height:auto;margin:0 auto;background:#F3F1EC;border-radius:16px;padding:12px}
.mdb-cassette-guide .mdb-guide-figure figcaption{margin:10px 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--sd-muted,#5B6776)}

/* 2. Lists: aqua dot bullets (the colour chip row below is excluded — :not() on every rule here,
      since a plain "ul" selector is more specific than ".mdb-guide-chips" and would otherwise win). */
.mdb-cassette-guide .mdb-guide-section ul:not(.mdb-guide-chips){list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.mdb-cassette-guide .mdb-guide-section ul:not(.mdb-guide-chips) li{position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--sd-slate,#444E60)}
.mdb-cassette-guide .mdb-guide-section ul:not(.mdb-guide-chips) li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--sd-aqua,#49C3C9)}

/* 3. Colour chips: a row of small white pills with a hairline ring (not a dark border). */
.mdb-cassette-guide .mdb-guide-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.mdb-cassette-guide .mdb-guide-chips li{padding:7px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--sd-line,#ECE9E2);font-size:13px;font-weight:600;color:var(--sd-slate,#444E60)}

/* 4. Sections: 18px of breathing room (shorter than the longer roller guides use). */
.mdb-cassette-guide .mdb-guide-section{padding:18px 0}
.mdb-cassette-guide .mdb-guide-section:first-child{padding-top:0}

/* 5. Footer links: pills, like the rest of Style D (the "Back to my blind" button keeps its own look). */
.mdb-cassette-guide .mdb-guide-footer a{border-radius:999px;padding:10px 18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sd-line,#ECE9E2);text-decoration:none;color:var(--sd-ink,#2B3240);font-weight:700;font-size:14px}
.mdb-cassette-guide .mdb-guide-footer a:hover{box-shadow:inset 0 0 0 1.5px var(--sd-aqua,#49C3C9);background:var(--sd-aqua-h,#EEF7F8)}
.mdb-cassette-guide a:focus-visible{outline:2px solid var(--sd-aqua-d,#2F8E94);outline-offset:2px;border-radius:6px}

/* 6. Close-ups (Core p16, Aaron 25 Sep: "get the cassette close up from the cassette pngs in source
      files. u crop and cut them as needed"). Three crops of assets/images/mdb-full-blockout-cassette.png
      (headbox, side channel, bottom channel) sit in a row of three under "What the system does", each on
      the same warm tile as the main picture, with a small caption. Still three in a row on phones, a little tighter.
      Undo: delete this block (the pictures then show at full width, one under another), or press
      "Put back the Products page and the old cassette help" to take the popup back to its old content. */
.mdb-cassette-guide .mdb-cassette-closeups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 4px}
.mdb-cassette-guide .mdb-cassette-closeup{margin:0;min-width:0}
.mdb-cassette-guide .mdb-cassette-closeup img{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#F3F1EC;border-radius:12px;padding:0}
.mdb-cassette-guide .mdb-cassette-closeup figcaption{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.4;font-weight:700;color:var(--sd-slate,#444E60)}
@media (max-width:520px){.mdb-cassette-guide .mdb-cassette-closeups{gap:8px}.mdb-cassette-guide .mdb-cassette-closeup img{border-radius:10px}.mdb-cassette-guide .mdb-cassette-closeup figcaption{font-size:12px}}

/* 7. Three or four sided, side by side (Core p17, Aaron 25 Sep: "cassette popup you do not have a picture of the
      threesided version? why?"). The four sided picture and a three sided one made from it
      (assets/images/mdb-three-sided-cassette.png: the same cassette with the bottom channel taken off, the side
      channels running straight down and the blind ending in its base rail) sit as two tiles above the words.
      "body.mdb-complete-site" on the picture rules: roller-guides.css clears every guide picture's background with
      body.mdb-complete-site .mdb-roller-guide img, which beat the warm tile here (and in block 1's main picture).
      Undo: delete this block (the two pictures then show full width, one under the other), and the
      "body.mdb-complete-site " added in front of block 1's picture rule. */
.mdb-cassette-guide .mdb-cassette-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.mdb-cassette-guide .mdb-cassette-side{margin:0;min-width:0}
body.mdb-complete-site .mdb-cassette-guide .mdb-cassette-side img{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:10px;background:#F3F1EC;border-radius:14px}
.mdb-cassette-guide .mdb-cassette-side figcaption{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.4;font-weight:700;color:var(--sd-slate,#444E60)}
@media (max-width:520px){.mdb-cassette-guide .mdb-cassette-pair{gap:8px}body.mdb-complete-site .mdb-cassette-guide .mdb-cassette-side img{padding:6px;border-radius:10px}.mdb-cassette-guide .mdb-cassette-side figcaption{font-size:12px}}

/* 8. Linked blinds and fascia popups (Core p18, Aaron 26 Sep).
      a) Linked: "the diagrams are also far too small to see. for the layout configs". The layout pictures are now
         tight house-colour drawings (assets/linked-help/*.svg, set by the p18 button); here their tiles get wider
         (two to a row instead of up to four) and keep the drawing's own shape instead of Style D's 2:1 box. Style D's
         tile rules use !important, so these do too, with a longer selector. The shared-join drawing shows full width.
      b) Fascia: "include a real image here or generated image of the fascia". The three example pictures the p18
         button adds sit in a row of square tiles (two to a row on phones), captions under them.
      Undo: delete this block. */
:root body.mdb-complete-site .mdb-roller-guide .mdb-help-choices:has(>figure>img[src*="linked-help"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;gap:18px 16px!important}
:root body.mdb-complete-site .mdb-roller-guide .mdb-help-choices>figure>img[src*="/linked-help/"]{aspect-ratio:auto!important;height:auto!important;max-height:260px;object-fit:contain;padding:16px 14px!important}
:root body.mdb-complete-site .mdb-roller-guide img[src*="/linked-help/shared-join"]{display:block;box-sizing:border-box;width:100%!important;max-width:640px;height:auto!important;margin:0 auto;padding:14px;border-radius:14px;background:#F3F1EC}
:root body.mdb-complete-site .mdb-roller-guide .mdb-fascia-examples__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 10px}
:root body.mdb-complete-site .mdb-roller-guide .mdb-fascia-examples__grid figure{margin:0;min-width:0}
:root body.mdb-complete-site .mdb-roller-guide .mdb-fascia-examples__grid img{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:0 0 0 1px #E6E2DA}
:root body.mdb-complete-site .mdb-roller-guide .mdb-fascia-examples__grid figcaption{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.35;color:var(--sd-slate,#444E60)}
:root body.mdb-complete-site .mdb-roller-guide .mdb-fascia-examples__grid figcaption strong{display:block;font-weight:800;color:var(--sd-ink,#2B3240)}
:root body.mdb-complete-site .mdb-roller-guide .mdb-fascia-examples__grid figcaption span{display:block;color:var(--sd-muted,#5B6776)}
:root body.mdb-complete-site .mdb-roller-guide p.mdb-fascia-examples__note{font-size:13px;color:var(--sd-muted,#5B6776)}
@media (max-width:520px){
  :root body.mdb-complete-site .mdb-roller-guide .mdb-fascia-examples__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  :root body.mdb-complete-site .mdb-roller-guide .mdb-help-choices>figure>img[src*="/linked-help/"]{padding:10px 8px!important}
}

/* 9. CURTAIN FABRIC POPUPS (Core p21) — Aaron, 26 Sep: "the popups for fabric ranges need updating, theres not much
      info there ... including care instructions". The "Update the curtain fabric popups (p21)" button writes the words
      (includes/curtain-fabric-popups-p21.php); this styles them. A slightly larger first line; "Fabric details" and
      "Compare the ranges" as clean rows with hairlines (label muted, value dark); care as a list with aqua dots like
      the cassette popup; the shrinkage line small and muted. Phones: the compare table's text a little smaller.
      Scoped to .mdb-fabric-popup (only those popups). Undo: delete this block. */
:root body.mdb-complete-site .mdb-fabric-popup p.mdb-fabric-lead{margin:0;font-size:16px;line-height:1.6;color:var(--sd-ink,#2B3240)}
:root body.mdb-complete-site .mdb-fabric-popup p.mdb-fabric-lead+.mdb-help-choices{margin-top:16px}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section table:is(.mdb-fabric-facts,.mdb-fabric-compare){width:100%;margin:0;border-collapse:collapse;font-size:14.5px;line-height:1.45}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section :is(.mdb-fabric-facts,.mdb-fabric-compare) :is(th,td){padding:10px 14px 10px 0;border:0;border-bottom:1px solid var(--sd-line,#ECE9E2);background:none;text-align:left;vertical-align:top}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section :is(.mdb-fabric-facts,.mdb-fabric-compare) tr:last-child>:is(th,td){border-bottom:0}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-facts th{width:40%;font-weight:600;color:var(--sd-muted,#5B6776)}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-facts td{font-weight:700;color:var(--sd-ink,#2B3240)}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-compare thead th{padding-top:0;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sd-muted,#5B6776)}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-compare tbody th{font-weight:800;color:var(--sd-ink,#2B3240);white-space:nowrap}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-compare td{color:var(--sd-slate,#444E60)}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-compare td:last-child{padding-right:0;white-space:nowrap}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section ul.mdb-fabric-care{display:grid;gap:8px;margin:0;padding:0;list-style:none}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section ul.mdb-fabric-care li{position:relative;margin:0;padding-left:20px;font-size:15px;line-height:1.55;color:var(--sd-slate,#444E60)}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section ul.mdb-fabric-care li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--sd-aqua,#49C3C9)}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section p+ul.mdb-fabric-care{margin-top:10px}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section p.mdb-fabric-note{margin:12px 0 0;font-size:13.5px;color:var(--sd-muted,#5B6776)}
:root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section p a{color:var(--sd-aqua-d,#2F8E94);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){
  :root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section table:is(.mdb-fabric-facts,.mdb-fabric-compare){font-size:14px}
  :root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-compare :is(th,td){padding-right:10px}
  :root body.mdb-complete-site .mdb-fabric-popup .mdb-guide-section .mdb-fabric-compare tbody th{white-space:normal}
}

/* 10. CURTAIN OPTION POPUPS (Core p24) — Aaron, 26 Sep: "popup for track type needs fixing with correct svgs and made
      bigger the images. that goes for all popups on curtains actually ... and/or also missing proper description of
      those options in detail." The "Update the curtain option popups (p24)" button writes the cards
      (includes/curtain-option-popups-p24.php); this lays them out. Each option is a card: its tile picture in a
      large square white frame (same look as the tile), the option name, then its description. Up to three cards
      a row on desktop (four options: two by two, so the stack drawings are larger still), two on tablets; on phones
      one card a row with the picture on the left and the words beside
      it. Options with no picture: a simple card with a hairline. "Good to know" as a list with aqua dots, like the
      fabric popups. Uses its own class (.mdb-option-choices), so Style D's smaller .mdb-help-choices rule does not
      apply. Scoped to .mdb-option-popup (only those popups). Undo: delete this block. */
:root body.mdb-complete-site .mdb-option-popup p.mdb-option-lead{margin:0;font-size:16px;line-height:1.6;color:var(--sd-ink,#2B3240)}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px 18px;margin:18px 0 0}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-choices--n4:not(.mdb-option-choices--text){grid-template-columns:repeat(2,minmax(0,1fr))}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-choices--text{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-card{display:flex;flex-direction:column;gap:10px;margin:0;min-width:0}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-pic{display:block;box-sizing:border-box;aspect-ratio:1/1;padding:10px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #E6E2DA}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-pic img{display:block;width:100%!important;height:100%!important;max-width:none;margin:0;padding:0;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;object-fit:contain}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-card figcaption{display:flex;flex-direction:column;gap:4px;margin:0;padding:0 2px;text-align:left}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-card figcaption strong{font:800 15px/1.35 var(--sd-font,inherit);color:var(--sd-ink,#2B3240)}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-card figcaption span{font-size:14.5px;line-height:1.55;color:var(--sd-slate,#444E60)}
:root body.mdb-complete-site .mdb-option-popup .mdb-option-card--text{padding:14px 16px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #E6E2DA}
:root body.mdb-complete-site .mdb-option-popup ul.mdb-option-tips{display:grid;gap:8px;margin:0;padding:0;list-style:none}
:root body.mdb-complete-site .mdb-option-popup ul.mdb-option-tips li{position:relative;margin:0;padding-left:20px;font-size:15px;line-height:1.55;color:var(--sd-slate,#444E60)}
:root body.mdb-complete-site .mdb-option-popup ul.mdb-option-tips li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--sd-aqua,#49C3C9)}
@media (max-width:560px){
  :root body.mdb-complete-site .mdb-option-popup .mdb-option-choices{grid-template-columns:1fr;gap:14px}
  :root body.mdb-complete-site .mdb-option-popup .mdb-option-choices--n4:not(.mdb-option-choices--text){grid-template-columns:1fr}
  :root body.mdb-complete-site .mdb-option-popup .mdb-option-card:not(.mdb-option-card--text){display:grid;grid-template-columns:136px minmax(0,1fr);align-items:start;gap:12px}
  :root body.mdb-complete-site .mdb-option-popup .mdb-option-pic{padding:6px;border-radius:12px}
  :root body.mdb-complete-site .mdb-option-popup .mdb-option-card figcaption span{font-size:14px}
}