@charset "UTF-8";
/* =====================================================================
   My Direct Free Samples library — build s1 (Style D · Soft cards look)
   Styles templates/sample-library-v139.php. Loads on the Free Samples page
   and the sample category pages only.

   The filters work with CSS alone: each choice is a radio button or checkbox,
   and the rules below (plus the product/range rules printed with the page,
   <style id="mdb-fs-rules">) hide the colours that do not match.

   TO UNDO EVERYTHING: see the Undo note at the top of includes/sample-library.php.
   TO UNDO ONE PART:   delete that numbered block below and re-upload.
   Colours follow the Style D tokens and fall back to the same values without it.
   !important only where Core forces square navy buttons with !important
   (site.css ".woocommerce a.button", samples-v13918.css ".mdb-samples button").
   ===================================================================== */

/* 1. TOKENS AND SPACING — one place for the colours used below.
   Undo: delete this block (everything falls back to the values after the commas). */
:root body.mdb-complete-site .mdb-fs-page{
  --fs-ink:var(--sd-ink,#2B3240);--fs-slate:var(--sd-slate,#444E60);--fs-muted:var(--sd-muted,#5B6776);
  --fs-aqua:var(--sd-aqua,#49C3C9);--fs-aqua-d:var(--sd-aqua-d,#2F8E94);--fs-aqua-t:var(--sd-aqua-t,#E4F5F6);--fs-aqua-h:var(--sd-aqua-h,#EEF7F8);
  --fs-line:var(--sd-line,#ECE9E2);--fs-warm:#F3F1EC;--fs-card:#fff;
  --fs-shadow:0 6px 20px rgba(43,50,64,.06);--fs-shadow-lg:0 14px 34px rgba(43,50,64,.12);
  --fs-top:118px; /* height of the sticky site header (announcement + header, measured 23 Sep), so the filter bar parks just under it */
  color:var(--fs-slate)}

/* 2. HIDDEN INPUTS — the real radio buttons and checkboxes stay in the page (keyboard and
   screen readers use them) but are drawn as the tiles, range cards and chips beside them.
   Undo: do not delete (the raw inputs would show). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none;clip-path:inset(50%)}

/* 3. POLICY LINE AND SECTION HEADINGS. Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-sample-policy{border:0;border-radius:16px;background:var(--fs-aqua-t);padding:16px 20px;font-size:16px;color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-head{margin:0 0 18px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-head h2,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-step h2{margin:0;font-size:clamp(22px,2.4vw,28px);line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--fs-slate)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-step{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:40px 0 14px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-step p{flex-basis:100%;margin:0;font-size:14.5px;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-step__n{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--fs-aqua);color:var(--fs-ink);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

/* 4. SAMPLE TIPS — four numbered white cards. Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips{margin:36px 0 8px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:fstip}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips__list li{position:relative;padding:18px 18px 18px 58px;border-radius:18px;background:var(--fs-card);box-shadow:var(--fs-shadow);counter-increment:fstip}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips__list li::before{content:counter(fstip,decimal-leading-zero);position:absolute;left:16px;top:18px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--fs-aqua-h);color:var(--fs-aqua-d);font-size:12px;font-weight:800}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips__list h3{margin:3px 0 6px;font-size:16px;font-weight:700;color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips__list p{margin:0;font-size:14px;line-height:1.5;color:var(--fs-muted)}

/* 5. STEP 1 — product tiles (radio buttons). The chosen one gets an aqua ring.
   Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:14px 16px 16px;border-radius:18px;background:var(--fs-card);box-shadow:var(--fs-shadow);cursor:pointer;transition:box-shadow .15s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tile:hover{box-shadow:var(--fs-shadow-lg)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tile__icon{display:grid;place-items:center;width:42px;height:42px;padding:8px;margin-bottom:6px;box-sizing:border-box;border-radius:12px;background:var(--fs-aqua-h);color:var(--fs-slate)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tile b{font-size:15.5px;font-weight:700;color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-tile span:last-child{font-size:13px;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:checked+.mdb-fs-tile{box-shadow:0 0 0 2px var(--fs-aqua),var(--fs-shadow-lg)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:checked+.mdb-fs-tile .mdb-fs-tile__icon{background:var(--fs-slate);color:#fff}

/* 6. ICONS — slate line drawings with aqua fills (same set as the mega menu).
   Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
:root body.mdb-complete-site .mdb-fs-page svg .a{fill:var(--fs-aqua);stroke:none}
:root body.mdb-complete-site .mdb-fs-page svg .a2{fill:var(--fs-aqua);opacity:.32;stroke:none}
:root body.mdb-complete-site .mdb-fs-page svg .as{stroke:var(--fs-aqua)}
:root body.mdb-complete-site .mdb-fs-page svg .w{fill:#fff;stroke:currentColor;stroke-width:.9}

/* 7. STEP 2 — the range rail: one sideways-scrolling row of range cards for the product
   chosen in Step 1 (the page prints which rail to show). Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-rail{display:none;gap:10px;overflow-x:auto;padding:6px 6px 16px;margin:0 -6px;scroll-snap-type:x proximity;scrollbar-width:thin}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;width:170px;margin:0;padding:12px 14px 14px;border-radius:16px;background:var(--fs-card);box-shadow:var(--fs-shadow);cursor:pointer;scroll-snap-align:start;transition:box-shadow .15s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range:hover{box-shadow:var(--fs-shadow-lg)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range b{font-size:14.5px;font-weight:700;line-height:1.25;color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range>span:last-child{font-size:12.5px;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range--all{width:120px;justify-content:center;background:var(--fs-warm)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range__dots{display:flex;margin-bottom:6px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range__dots i{width:18px;height:18px;margin-right:-5px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(43,50,64,.08)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:checked+.mdb-fs-range{box-shadow:0 0 0 2px var(--fs-aqua),var(--fs-shadow-lg);background:var(--fs-card)}

/* 8. STEP 3 BAR — type and colour chips, Clear filters and the sample bag. It stays
   under the site header while you scroll the colours. Undo: delete this block
   (the bar then scrolls away with the page). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-results{display:flex;flex-direction:column;margin-top:36px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar{order:1;position:sticky;top:calc(var(--mdb-admin-offset,0px) + var(--fs-top));z-index:20;margin:0 -12px;padding:12px;border-radius:0 0 18px 18px;background:rgba(246,244,239,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-count{order:2}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-grid{order:3}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar__title{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--fs-slate)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-ftoggle{display:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-reset{margin-left:auto;padding:9px 14px;border:0;border-radius:999px!important;background:transparent;color:var(--fs-aqua-d);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-reset:hover{background:var(--fs-aqua-h)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-fpanel{display:flex;flex-direction:column;gap:8px;margin-top:10px}
:root body.mdb-complete-site .mdb-fs-page :is(.mdb-fs-types,.mdb-fs-groups){display:flex;flex-wrap:wrap;gap:8px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-chip{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 14px;border-radius:999px;background:var(--fs-card);box-shadow:inset 0 0 0 1px var(--fs-line);color:var(--fs-slate);font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-chip:hover{box-shadow:inset 0 0 0 1px var(--fs-aqua)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-chip i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(43,50,64,.18)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:checked+.mdb-fs-chip{background:var(--fs-slate);box-shadow:none;color:#fff}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-count{margin:12px 0 14px;font-size:14px;color:var(--fs-muted)}

/* 9. KEYBOARD — the tile, range card or chip whose input has keyboard focus gets a ring.
   Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:focus-visible+label{outline:2px solid var(--fs-aqua-d);outline-offset:3px}

/* 10. FILTERS — fabric type, colour groups and the count. Each colour card carries classes
   for its products (p-), range (r-), type (t-) and colour group (f-). Product, range and
   type rules are printed with the page; the colour-group rules are here.
   Undo: delete this block (the colour buttons then do nothing). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked) .mdb-fs-card.f-none,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked):not(:has(#fs-c-white:checked)) .mdb-fs-card.f-white,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked):not(:has(#fs-c-cream:checked)) .mdb-fs-card.f-cream,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked):not(:has(#fs-c-earth:checked)) .mdb-fs-card.f-earth,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked):not(:has(#fs-c-grey:checked)) .mdb-fs-card.f-grey,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked):not(:has(#fs-c-dark:checked)) .mdb-fs-card.f-dark,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked):not(:has(#fs-c-brown:checked)) .mdb-fs-card.f-brown,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(.mdb-fs-c:checked):not(:has(#fs-c-cool:checked)) .mdb-fs-card.f-cool{display:none}
/* the count: every colour still showing adds one; the number is printed after "Samples shown:" */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-grid{counter-reset:fsshown}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card{counter-increment:fsshown}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-count__n::before{content:counter(fsshown);color:var(--fs-ink)}

/* 11. COLOUR GRID AND CARDS — photo, colour name, range, which products it suits,
   Add sample. Cards must not get transforms or z-index (the large-photo view relies on it).
   Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--fs-card);box-shadow:var(--fs-shadow);transition:box-shadow .2s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card:hover{box-shadow:var(--fs-shadow-lg)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__photo{position:relative;aspect-ratio:1/1;background:#EDE9E1}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__in{position:absolute;left:10px;bottom:10px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--fs-slate);color:#fff;font-size:12px;font-weight:700}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__in::before{content:"\2713  "}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__body{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card h3{margin:0;font-size:16px;font-weight:700;line-height:1.25;color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__range{margin:2px 0 0;font-size:13.5px;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__for{margin:6px 0 12px;font-size:12.5px;line-height:1.4;color:var(--fs-muted)}

/* 12. ADD SAMPLE BUTTON — aqua outline pill; turns into "Added" (WooCommerce adds the
   "added" class after the click) and "In your bag" when the sample is already in the cart.
   !important on background, colour and padding: Core's site.css forces a navy square
   button on every ".woocommerce a.button" with !important. Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:42px;padding:10px 14px!important;box-sizing:border-box;border:0;border-radius:999px!important;background:var(--fs-card)!important;box-shadow:inset 0 0 0 1.5px var(--fs-aqua);color:var(--fs-ink)!important;font-size:14px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;text-transform:none;letter-spacing:0;cursor:pointer;transition:background .15s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card a.mdb-fs-add:hover{background:var(--fs-aqua-h)!important;color:var(--fs-ink)!important}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.loading{opacity:.6;pointer-events:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.loading::after{display:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card :is(.mdb-fs-add.added,.mdb-fs-add--in),:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card :is(.mdb-fs-add.added,.mdb-fs-add--in):hover{background:var(--fs-aqua)!important;box-shadow:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.added{font-size:0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.added::before{content:"\2713  Added";font-size:14px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.added::after{display:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add--in::before{content:"\2713"}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add--off{box-shadow:inset 0 0 0 1px var(--fs-line);color:var(--fs-muted)!important;cursor:default}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .added_to_cart{display:block;margin:8px 0 0;font-size:13px;font-weight:600;text-align:center;color:var(--fs-aqua-d)}

/* 13. LARGE PHOTO — the round magnifier button on each photo opens the large photo over the
   page; click anywhere to close it. Plain HTML (details/summary): the large picture only
   downloads when opened. Undo: delete this block (the magnifier disappears). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-zoom{position:absolute;right:10px;top:10px;margin:0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-zoom>summary{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(20,25,35,.15);cursor:zoom-in;list-style:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-zoom>summary::-webkit-details-marker{display:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-zoom>summary::before{content:"";width:16px;height:16px;background:var(--fs-slate);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-zoom[open]>summary{position:fixed;inset:0;z-index:100000;width:auto;height:auto;border-radius:0;background:rgba(20,25,35,.86) var(--mdb-fs-big) center/min(88vw,760px,78vh) auto no-repeat;box-shadow:none;cursor:zoom-out}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-zoom[open]>summary::before{position:absolute;top:18px;right:18px;width:22px;height:22px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center/contain no-repeat}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-zoom[open]>summary::after{content:attr(data-name);position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--fs-ink);font-size:14px;font-weight:700;white-space:nowrap}

/* 14. SAMPLE BAG — small summary at the right of the Step 3 bar: thumbnails, how many
   samples are in the cart, and a Checkout pill. WooCommerce refreshes it after each add.
   Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--fs-card);box-shadow:var(--fs-shadow);font-size:14px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag__thumbs{display:flex}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag__thumbs img{width:26px;height:26px;margin-right:-7px;border-radius:50%;border:2px solid #fff;object-fit:cover}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag__thumbs img:last-child{margin-right:0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag__text{color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag__text b{color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag:not(.mdb-fs-bag--full){padding:9px 14px}
:root body.mdb-complete-site .mdb-fs-page a.mdb-fs-bag__go{padding:8px 14px;border-radius:999px;background:var(--fs-aqua);color:var(--fs-ink);font-weight:700;text-decoration:none}
:root body.mdb-complete-site .mdb-fs-page a.mdb-fs-bag__go::after{content:" \2192"}
:root body.mdb-complete-site .mdb-fs-page a.mdb-fs-bag__go:hover{background:#5BCDD2}

/* 15. CLOSING BAND — "Not sure where to start?" on a rounded slate card.
   Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-cta{margin:56px 0 0;padding:44px 32px;border-radius:22px;background:var(--fs-slate);color:#fff;text-align:center}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-cta .mdb-eyebrow{color:var(--fs-aqua)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-cta h2{margin:6px 0 10px;color:#fff;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-cta p{margin:0 auto 22px;max-width:560px;color:rgba(255,255,255,.82)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-cta .mdb-button{border-radius:999px!important;background:var(--fs-aqua);color:var(--fs-ink);text-transform:none;letter-spacing:0;font-weight:700;padding:15px 24px}

/* 16. TABLETS (1050px and narrower) — tips in two columns.
   Undo: delete this block. */
@media (max-width:1050px){
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 17. PHONES (680px and narrower) — product tiles scroll sideways, the type and colour chips
   fold behind a "Filters" button, two colours per row.
   Undo: delete this block. */
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-fs-page{--fs-top:106px} /* the phone header is 106px tall (measured 23 Sep with Style D) */
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-tips__list{grid-template-columns:1fr}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-tiles{display:flex;overflow-x:auto;gap:10px;padding:6px 6px 14px;margin:0 -6px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-tile{flex:0 0 132px;padding:12px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-range{width:150px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar{margin:0 -16px;padding:10px 16px;border-radius:0}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar__top .mdb-fs-step__n,
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar__title{display:none}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-ftoggle{display:inline-flex;align-items:center;gap:6px;margin:0;padding:9px 14px;border-radius:999px;background:var(--fs-slate);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-ftoggle::after{content:"";width:7px;height:7px;margin:-3px 0 0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-reset{margin-left:0;padding:9px 10px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-bag{flex:1 1 100%;justify-content:space-between}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-fpanel{display:none}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(#fs-ftoggle:checked) .mdb-fs-fpanel{display:flex;max-height:50vh;overflow-y:auto}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__body{padding:10px 10px 12px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__for{display:none}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-cta{padding:32px 20px}
}

/* 18. REDUCED MOTION. Undo: delete this block. */
@media (prefers-reduced-motion:reduce){
  :root body.mdb-complete-site .mdb-fs-page :is(.mdb-fs-tile,.mdb-fs-range,.mdb-fs-chip,.mdb-fs-card,.mdb-fs-add){transition:none}
}

/* s2 (Core p6, 24 Sep 2026) — Aaron: "the fabric range tiles need to be different, u cant actually see each
   ranges fabrics like u can on myDIY". Each range card now opens with a strip of up to six of that range's own
   swatch photos side by side (like the fabric strips on the product page), with the range name and colour
   count underneath. Ranges without photos keep the colour dots. Undo: delete this block (and the template's
   s2 lines put the dots back). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range:not(.mdb-fs-range--all){width:210px;padding:8px 8px 12px;gap:3px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range:not(.mdb-fs-range--all)>:is(b,span:last-child){padding:0 6px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range__strip{display:flex;height:86px;margin:0 0 8px;border-radius:12px;overflow:hidden;background:#EDE9E1;box-shadow:inset 0 0 0 1px rgba(43,50,64,.06)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range__strip img{flex:1 1 0;min-width:0;width:auto;height:100%;margin:0;border-radius:0;box-shadow:none;object-fit:cover}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range--all{min-height:150px}
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-range:not(.mdb-fs-range--all){width:172px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-range__strip{height:70px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-range--all{min-height:128px}
}

/* s3 (Core p10, 24 Sep 2026) — three things Aaron asked for on the Free Samples page:
   1) a small "backing" bubble on the blockout swatches that have one (data/sample-library.json
      "backing"), bottom-left of the photo, never over the zoom button (top-right).
   2) round arrow buttons at the right of the Step 2 heading, and the sample-packs head, that
      scroll whichever row is on screen. Click-to-scroll only: assets/sample-library-p10.js,
      no DOM changes. Hidden on phones (swipe instead).
   3) the sample packs band (data/sample-packs.json): product tabs, one scroll-snap row of pack
      cards per product (only the checked tab's row shows — same :has()-off-a-real-id technique
      as the Step 2 rail), and the "Add all 4 samples" pill.
   Undo: delete this whole block, then the matching HTML in the template (search "s3"). */

/* 19. BACKING BUBBLE. The label sits in its own inner span so long text ellipsises on the
   narrowest phone cards instead of running past the pill (flexbox only applies text-overflow
   to a text-only box, not to the row that also lays out the aqua dot). box-sizing:border-box
   matters here: without it, max-width caps the content box and the row's own 16px of padding
   is added back on top, undoing the cap. Undo: delete this block (and the template's
   "mdb-fs-backing" spans). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-backing{box-sizing:border-box;position:absolute;left:8px;bottom:8px;z-index:1;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 16px);margin:0;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(20,25,35,.15);color:var(--fs-slate);font-size:11px;line-height:1.2;font-weight:700;overflow:hidden}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-backing__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-backing--matched::before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--fs-aqua)}

/* 20. RAIL/ROW ARROWS — reused by the Step 2 rail and the sample-packs head.
   p12 (24 Sep, Aaron: "should they not be circles?"): they were meant to be round, but Core's older
   samples-v13918.css forces every button on the page square (border-radius:0 !important), so the
   radius here now carries !important too. To undo only that, remove the !important after 50%.
   Undo: delete this block (and stop enqueuing assets/sample-library-p10.js). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-arrows{display:flex;align-items:center;gap:8px;margin-left:auto}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-arrow{display:grid;place-items:center;width:36px;height:36px;padding:0;margin:0;border:0;border-radius:50%!important;background:#fff;box-shadow:var(--fs-shadow);color:var(--fs-slate);font:inherit;font-size:16px;line-height:1;cursor:pointer;transition:background .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-arrow:hover{background:var(--fs-aqua-h);box-shadow:var(--fs-shadow-lg)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-arrow:focus-visible{outline:2px solid var(--fs-aqua-d);outline-offset:2px}

/* 21. SAMPLE PACKS — pale-aqua band, product tabs, one scroll-snap row of cards per product,
   photo strip, colour list, "Add all 4 samples" pill. Undo: delete this block (and the
   template's <section class="mdb-fs-packs">). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-packs{margin:48px 0 0;padding:32px;border-radius:24px;background:linear-gradient(180deg,#E9F6F7,#F3FAFA)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-packs__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-packs .mdb-fs-head{margin:0;max-width:640px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-packs__intro{margin:8px 0 0;font-size:15px;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 22px;padding:0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 16px 10px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--fs-line);color:var(--fs-slate);font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-tab:hover{box-shadow:inset 0 0 0 1px var(--fs-aqua)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-tab__icon{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;color:var(--fs-slate)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-tab__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--fs-aqua-h);color:var(--fs-aqua-d);font-size:11px;font-weight:800}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:checked+.mdb-fs-pk-tab{background:var(--fs-slate);box-shadow:none;color:#fff}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:checked+.mdb-fs-pk-tab .mdb-fs-pk-tab__icon{color:#fff}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-in:checked+.mdb-fs-pk-tab .mdb-fs-pk-tab__count{background:rgba(255,255,255,.2);color:#fff}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-row{display:none;gap:16px;overflow-x:auto;padding:4px 4px 14px;margin:0 -4px;scroll-snap-type:x proximity;scrollbar-width:thin}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk{flex:0 0 auto;width:300px;display:flex;flex-direction:column;margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--fs-shadow);scroll-snap-align:start}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__strip{display:flex;height:120px;background:#EDE9E1}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__strip img{width:25%;height:120px;margin:0;border-radius:0;box-shadow:none;object-fit:cover}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk h3{margin:0 0 4px;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__body>p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__list{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:0;list-style:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__list li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__dot{width:14px;height:14px;flex:0 0 auto;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(43,50,64,.18)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__colour{font-weight:700;color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__meta{margin-left:auto;text-align:right;white-space:nowrap}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__add{margin-top:auto;display:flex;align-items:center;justify-content:center;width:100%;height:52px;padding:0 14px!important;box-sizing:border-box;border:0;border-radius:999px!important;background:var(--fs-aqua)!important;color:var(--fs-ink)!important;font-size:15px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s}
:root body.mdb-complete-site .mdb-fs-page a.mdb-fs-pk__add:hover{background:#5BCDD2!important}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__add--in{background:#fff!important;box-shadow:inset 0 0 0 1.5px var(--fs-aqua);color:var(--fs-ink)!important;cursor:default}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__add--in::before{content:"\2713  "}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-note{margin:8px 0 0;font-size:12.5px;color:var(--fs-muted)}

/* 22. PHONES (680px) — arrows hidden (swipe instead), tabs scroll in one line, cards fit the viewport.
   Undo: delete this block. */
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-arrows{display:none}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-packs{padding:24px 18px;border-radius:20px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;margin:20px -4px 18px;padding-left:4px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk{width:min(300px,82vw)}
}

/* 23. REDUCED MOTION for the new bits (the JS itself also checks prefers-reduced-motion before
   scrolling smoothly). Undo: delete this block. */
@media (prefers-reduced-motion:reduce){
  :root body.mdb-complete-site .mdb-fs-page :is(.mdb-fs-arrow,.mdb-fs-pk-tab){transition:none}
}

/* 24. THE "ADDED TO YOUR BAG" MESSAGE (p13, Aaron's screenshot after adding a sample pack: a tick filled the page).
   Block 6's rule for this page's own drawings (".mdb-fs-page svg": full width and height, outline only) also caught
   the tick icon in WooCommerce's message, so the tick grew to the width of the page. The message is now a rounded
   card in the page's colours with a 26px white tick on an aqua circle (a red "!" circle for an error message).
   After "Add all 4 samples" it sits in the packs section, under the heading (template, p13), white on the aqua band.
   Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .wc-block-components-notice-banner{display:flex;align-items:center;gap:12px;box-sizing:border-box;margin:0 0 18px;padding:14px 18px;border:0;border-radius:16px;background:var(--fs-aqua-h);box-shadow:var(--fs-shadow);color:var(--fs-slate);font-size:15px;line-height:1.45;font-weight:600}
:root body.mdb-complete-site .mdb-fs-page .wc-block-components-notice-banner>svg{display:block;flex:0 0 26px;width:26px;height:26px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--fs-aqua-d);fill:#fff;stroke:none;overflow:hidden}
:root body.mdb-complete-site .mdb-fs-page .wc-block-components-notice-banner.is-error{background:#FDF0EF}
:root body.mdb-complete-site .mdb-fs-page .wc-block-components-notice-banner.is-error>svg{background:#C2410C}
:root body.mdb-complete-site .mdb-fs-page .wc-block-components-notice-banner__content{flex:1 1 auto;min-width:0}
:root body.mdb-complete-site .mdb-fs-page .wc-block-components-notice-banner__content a{color:var(--fs-aqua-d);font-weight:700}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-notices{margin:16px 0 4px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk-notices .wc-block-components-notice-banner:not(.is-error){background:#fff}

/* 25. ONE FILTER CARD (s6, Core p15) — Aaron, 25 Sep: "the fabric range, the product, all should be in the filter,
   part of the filter below. like mydiy is." Step 1 (product tiles), Step 2 (range cards) and Step 3 (type and colour)
   are now four labelled rows of one white card: Product, Range, Type, Colour. Above it, a slim strip with the title,
   "Change filters ↑" (jumps back to the card), "Clear filters" and the bag stays under the site header while you
   scroll the colours. Products are pills with their small icon and colour count; ranges keep their swatch strip,
   smaller, in one sideways row with the round arrows at the end; type and colour keep their chips. Phones: Product
   stays open (it scrolls sideways); Range, Type and Colour fold behind the "Filters" button in the strip.
   Blocks 5, 7 and 8 still apply underneath; these rules come later and win. Undo: delete this block (and put
   the Step markup back in the template). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-results{margin-top:28px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-results>.mdb-fs-fpanel{order:2}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-results>.mdb-fs-count{order:3}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-results>.mdb-fs-grid{order:4}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar{padding:10px 12px;border-radius:0 0 18px 18px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar__title{font-size:22px}
:root body.mdb-complete-site .mdb-fs-page a.mdb-fs-tofilters{margin-left:auto;padding:9px 14px;border-radius:999px;color:var(--fs-slate);font-size:14px;font-weight:700;text-decoration:none}
:root body.mdb-complete-site .mdb-fs-page a.mdb-fs-tofilters:is(:hover,:focus-visible){background:var(--fs-aqua-h);color:var(--fs-ink)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-bar .mdb-fs-reset{margin-left:0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-results>.mdb-fs-fpanel{display:flex;flex-direction:column;gap:0;margin:6px 0 0;padding:6px 22px;border-radius:20px;background:var(--fs-card);box-shadow:var(--fs-shadow);scroll-margin-top:calc(var(--mdb-admin-offset,0px) + var(--fs-top) + 70px)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:8px 16px;padding:14px 0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow+.mdb-fs-frow{border-top:1px solid var(--fs-line)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow--range{grid-template-columns:96px minmax(0,1fr) auto}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow__label{align-self:center;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-arrows{margin:0}
/* product pills */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tiles{display:flex;flex-wrap:wrap;gap:8px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tile{flex-direction:row;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fs-line)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tile:hover{box-shadow:inset 0 0 0 1px var(--fs-aqua)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tile__icon{width:30px;height:30px;padding:5px;margin:0;border-radius:50%}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tile b{font-size:14px;font-weight:700;white-space:nowrap}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tile span:last-child{padding:1px 7px;border-radius:999px;background:var(--fs-warm);font-size:11.5px;font-weight:700;white-space:nowrap}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-in:checked+.mdb-fs-tile{background:var(--fs-slate);box-shadow:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-in:checked+.mdb-fs-tile b{color:#fff}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-in:checked+.mdb-fs-tile span:last-child{background:rgba(255,255,255,.16);color:#fff}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-in:checked+.mdb-fs-tile .mdb-fs-tile__icon{background:#fff;color:var(--fs-slate)}
/* range pills: a small swatch strip, the name and the count, in one sideways row */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-rail{gap:8px;padding:4px 4px 8px;margin:0 -4px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range,
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range:not(.mdb-fs-range--all){flex-direction:row;align-items:center;gap:8px;width:auto;min-height:0;padding:5px 12px 5px 5px;border-radius:999px;background:var(--fs-card);box-shadow:inset 0 0 0 1px var(--fs-line)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range--all{padding:5px 14px;min-height:40px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range:hover{box-shadow:inset 0 0 0 1px var(--fs-aqua)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range:not(.mdb-fs-range--all)>:is(b,span:last-child){padding:0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range b{font-size:14px;white-space:nowrap}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range>span:last-child{padding:1px 7px;border-radius:999px;background:var(--fs-warm);font-size:11.5px;font-weight:700;white-space:nowrap}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range__strip{flex:0 0 52px;width:52px;height:30px;margin:0;border-radius:999px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range__dots{margin:0 4px 0 2px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range__dots i{width:16px;height:16px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-in:checked+.mdb-fs-range{background:var(--fs-slate);box-shadow:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-in:checked+.mdb-fs-range b{color:#fff}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-in:checked+.mdb-fs-range>span:last-child{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-fs-page a.mdb-fs-tofilters{display:none}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-results>.mdb-fs-fpanel,
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(#fs-ftoggle:checked) .mdb-fs-results>.mdb-fs-fpanel{display:flex;max-height:none;overflow:visible;padding:2px 14px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow,
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow--range{grid-template-columns:minmax(0,1fr);padding:12px 0}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow:not(.mdb-fs-frow--product){display:none}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs:has(#fs-ftoggle:checked) .mdb-fs-frow:not(.mdb-fs-frow--product){display:grid}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tiles{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-tile{flex:0 0 auto;padding:5px 12px 5px 5px}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow .mdb-fs-range:not(.mdb-fs-range--all){width:auto}
}

/* 26. "ADD SAMPLE" WHILE IT ADDS (s6, Core p15) — Aaron: "when i click add sample, i like that it greys out but perhaps
   that + some sort of loading animation on that button while adding to cart?" While WooCommerce adds the sample
   (it puts .loading on the button), the button reads "Adding" with a small spinning ring, still greyed. Reduced
   motion: the ring stands still. Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.loading{font-size:0!important;opacity:.7}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.loading::before{content:"Adding";font-size:14px}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.loading::after{content:""!important;display:inline-block!important;position:static!important;width:14px;height:14px;margin:0 0 0 2px!important;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mdbFsSpin .7s linear infinite;font-size:0}
@keyframes mdbFsSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.loading::after{animation:none}
}

/* 27. SHADE'S BACKING BUBBLE (s7, Core p16) — Aaron, 25 Sep: Shade is "same fabric colour front and back
   without any additional backing". data/sample-library.json gives Shade its own bubble kind, "same"
   ("Same colour both sides"); this gives it the same aqua dot as the colour-matched bubble.
   Undo: delete this block and set "shade-blockout" back to "matched" in data/sample-library.json. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-backing--same::before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--fs-aqua)}

/* 28. STEPS BACK ABOVE, SMALL SYNCED PILLS IN THE FILTER (s8, Core p17) — Aaron, 25 Sep: "the fabric range was fine
   above displaying in the steps and so was the product. they just need to ALSO be on the filter in smaller pills as
   well 1:1 synced." Step 1 tiles and Step 2 range cards look as they did in Core p14 (blocks 5–8). In the filter card
   the Product and Range rows are small pills. Each pill is a second label for the same input as the tile or card
   above, so they always agree; the pill's "chosen" look (slate) is printed per input in #mdb-fs-rules. Range pills
   show the current product's ranges only (also printed there). Range cards get a small line naming their types
   ("Blockout · Light filter"), since a range now holds both. Phones: the Product pills stay in one sideways line;
   Range, Type and Colour stay behind "Filters", as in block 25.
   Undo: delete this block (and put back the p16 template). */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range__types{display:block;font-style:normal;font-size:12px;font-weight:600;line-height:1.3;color:var(--fs-muted)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-range:not(.mdb-fs-range--all)>.mdb-fs-range__types{padding:0 6px}
@media (min-width:681px){:root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow--range{grid-template-columns:96px minmax(0,1fr)}}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pills{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-prail{display:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pill{display:inline-flex;align-items:center;margin:0;padding:7px 13px;border-radius:999px;background:var(--fs-card);box-shadow:inset 0 0 0 1px var(--fs-line);font-size:13.5px;font-weight:700;line-height:1.2;color:var(--fs-slate);white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pill:hover{box-shadow:inset 0 0 0 1px var(--fs-aqua)}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pill:focus-visible{outline:2px solid var(--fs-aqua-d,#2F8E94);outline-offset:2px}
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-frow--product .mdb-fs-pills{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none}
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-pill{flex:0 0 auto;padding:7px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-pill{transition:none}
}

/* 29. "ADD ALL 4 SAMPLES" WHILE IT ADDS (s9, Core p20) — Aaron, 26 Sep: "the 'add all 4 samples' needs some progress
   and intermediate button while its adding like how mydiyblinds has one." assets/sample-packs-p20.js adds the pack's
   samples in place and puts .is-adding on the button while it works: the button greys a little, reads
   "Adding 4 samples" (or "Adding 2 samples" when two are already in the bag) with the same small spinning ring as
   "Add sample" (block 26), and can't be pressed again. It then reads "All 4 in your bag" in the in-the-bag look (white with an aqua ring and a tick).
   Reduced motion: the ring stands still. Undo: delete this block. */
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__add.is-adding{gap:8px;opacity:.75;cursor:progress;pointer-events:none}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__add.is-adding::after{content:"";display:inline-block;flex:0 0 auto;width:15px;height:15px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mdbFsSpin .7s linear infinite}
:root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__add.mdb-fs-pk__add--in:not([href]){pointer-events:none}
@media (prefers-reduced-motion:reduce){
  :root body.mdb-complete-site .mdb-fs-page .mdb-fs-pk__add.is-adding::after{animation:none}
}