/** Shopify CDN: Minification failed

Line 2059:0 Unexpected "}"

**/
/* NineTwoFive — all cart styling.
   Served as a static asset so the browser caches it once instead of re-downloading it inline
   on every page. It used to be inlined from theme.liquid, which added ~33KB of uncacheable
   HTML to every product and collection page.
   Shared by every cart rewards mode, so it must NOT be gated behind the mode setting. */
.tnums{font-variant-numeric:tabular-nums;}

/* ---- Drawer row: image + copy + segment progress, no arrows (tap anywhere opens the popup) ---- */
/* Very light grey panel so the gifts read as their own section rather than as another cart line.
   .cr-row--page overrides this further down, so the cart page keeps its own treatment. */
.cr-row{display:block;padding:12px;margin-bottom:6px;cursor:pointer;background:#f6f5f3;}
.cr-line{display:flex;align-items:center;gap:11px;}
/* Chip line — the ladder on one row. Class names are deliberately NOT .cr-chip: that belongs to
   the mobile popup's tier chips, and a shared name would let one set inherit the other's box. */
/* Sits inside .cr-body, so it starts level with the headline rather than under the photo. That
   leaves ~244px at 340px drawer width, hence the tighter padding and gap. */
.cr-rchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;}
/* Each chip doubles as its own segment of the progress meter — .cr-rchip-fill is the meter,
   sitting behind the label. That is why there is no bar above the chips any more. */
/* baseline, not center (Kai, 25 Sept: "10% off is lower than the 175 euro"). The price is set a size
   smaller than the label, and centring two boxes of different sizes puts their text on different
   baselines - measured 1.22px apart in the desktop popup (11.5 vs 12.5px). On one baseline they read
   as one line; the chip grows 0.4px there and not at all in the drawer. */
.cr-rchip{position:relative;overflow:hidden;display:inline-flex;align-items:baseline;gap:4px;
  font-size:9.5px;font-weight:400;letter-spacing:.01em;line-height:1.55;padding:4px 7px;
  border:1px solid rgba(0,0,0,.14);color:#8d877e;white-space:nowrap;}
/* The fill grows by transform, not width (Kai, 25 Sept, Fix 9: "it feels like it lags"). A width
   transition re-lays the chip out on every frame on the main thread, which is busiest exactly when
   the drawer is sliding in; scaleX runs on the compositor and stays smooth whatever else is busy. */
.cr-rchip-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:#dfece4;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);z-index:0;pointer-events:none;}
.cr-rchip-d,.cr-rchip-l{position:relative;z-index:1;}
.cr-rchip-d{font-size:9px;font-weight:400;font-variant-numeric:tabular-nums;}
.cr-rchip.is-on{border-color:rgba(63,125,84,.45);color:#2f6341;}
.cr-rchip.is-next{border-color:#121110;color:#121110;}
@media (prefers-reduced-motion:reduce){ .cr-rchip-fill{transition:none;} }
.cr-row:hover .cr-chev{color:#121110;}
.cr-segs{display:flex;gap:4px;margin-top:8px;}
.cr-segs i{height:3px;flex:1;background:rgba(0,0,0,.12);border-radius:2px;transition:background .3s;}
.cr-segs i.on{background:#3f7d54;}
.cr-chev{flex:none;color:#8d877e;font-size:17px;line-height:1;transition:color .15s;}
.cr-thumb{width:52px;height:52px;flex:none;background-size:cover;background-position:center;cursor:pointer;
  border:1px solid rgba(0,0,0,.08);}
/* Break between the words, never inside one: "Free shippin / g" is what a 52px square does to a
   two-word label when word-break is left to fend for itself. Smaller type and tighter leading buy
   the second word a line of its own. */
.cr-thumb-badge{display:flex;align-items:center;justify-content:center;text-align:center;background:#3f7d54;
  color:#fff;font-weight:800;font-size:9.5px;letter-spacing:0;line-height:1.1;padding:2px;
  word-break:normal;overflow-wrap:normal;hyphens:none;}
.cr-body{flex:1;min-width:0;cursor:pointer;}
/* One line, always. The copy is short enough that the ellipsis should never fire, but a long
   campaign name or a Weglot translation must not be allowed to wrap the row taller. */
.cr-headline{font-size:12.5px;font-weight:400;line-height:1.35;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.cr-headline b{color:#3f7d54;font-weight:500;}
.cr-miniprog{height:2px;background:rgba(0,0,0,.1);margin-top:7px;position:relative;}
.cr-miniprog-f{position:absolute;inset:0 auto 0 0;background:#121110;transition:width .35s ease;}
.cr-dots{display:flex;gap:6px;margin-top:8px;}
.cr-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.22);background:transparent;
  color:rgba(0,0,0,.45);font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;line-height:1;transition:.2s;}
.cr-dot.on{background:#3f7d54;border-color:#3f7d54;color:#fff;}
.cr-dot.sel{box-shadow:0 0 0 2px rgba(63,125,84,.45);}

/* ---- Cart-page banner (blocks/cart-progress-bar.liquid) ---- */
.discount-progress__checkpoint--active{ background:#3f7d54 !important; border-color:#3f7d54 !important; }

/* ---- Cart page: one unified "Your order" card (rewards → gift box → totals → checkout) ---- */
/* keeps the theme's light-grey `bg-theme-secondary` fill — only the padding is moved onto
   the individual sections so the dividers can run edge to edge. */
.ntf-order-card{ padding:0 !important; border:1px solid rgba(0,0,0,.08); overflow:hidden; }
@media(min-width:1024px){ .ntf-order-card{ position:sticky; top:calc(var(--height-header, 90px) + 12px); } }
.ntf-osec{ padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.09); }
.ntf-osec:last-child{ border-bottom:0; }
.ntf-osec-lbl{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8d877e;
  font-weight:700; margin:0 0 9px; }
.ntf-osec--main{ padding:16px; }
/* Summary type scale — smaller, closer to the reference (Jaxxon) than the theme default,
   with the rows tightened so Subtotal / You saved / Shipping sit close together. */
.ntf-order-card #js-contents p{ font-size:13px; line-height:1.5; margin-bottom:0 !important; }
.ntf-order-card #js-contents > .flex{ padding:2px 0; }
.ntf-order-card #js-contents li{ font-size:12px; }
.ntf-order-card #js-contents .h4{ font-size:16px; }
.ntf-order-card .ntf-saved{ font-size:13px; }
/* the savings disclosure row and its breakdown */
.ntf-order-card .saverow,
.ntf-order-card #js-contents [x-data] > .flex.justify-between{ margin:2px 0 !important; }
.ntf-order-card #js-contents .border-t.border-b{ padding-top:6px !important; padding-bottom:6px !important;
  margin-bottom:6px !important; }
/* a little air before the Total, which is the one row that should stand apart */
.ntf-order-card #js-contents .ntf-ship-row{ padding-bottom:6px; }
.ntf-order-card .ntf-klarna-inline{ font-size:12.5px; }
.ntf-order-card .ntf-klarna-logo{ height:15px; }
/* The border-t here is the divider UNDER the Order note / Delivery row — keep it. Only the
   padding is trimmed. (The rule between "You saved" and Shipping is the savings block's own
   border-b, removed in the markup.) */
.cart-drawer-price-total{ padding-top:10px !important; }
/* Drawer items area: white at every width. The theme tinted it on mobile
   (bg-[rgba(var(--colors-text),0.05)]) and cleared it from lg: up, so the two breakpoints
   disagreed. Desktop's white is the one to keep, so the tint is overridden rather than extended. */
.ntf-drawer-items{ background:transparent !important; }
/* Drawer header: plain X, no grey pill behind it, and no black item-count badge next to the
   title. The count is already obvious from the list directly beneath it. */
#CloseCart, #CartDrawer #CloseCart{ background:transparent !important; border:0 !important;
  box-shadow:none !important; }
#CartDrawer .x-cart-item-count{ display:none !important; }
/* Shipping row */
.ntf-ship-row{ align-items:baseline; }
.ntf-ship-row p{ margin-bottom:6px; }
.ntf-ship-val{ font-weight:400; white-space:nowrap; }

/* Same summary type scale in the cart DRAWER as on the cart page */
#CartDrawer .cart-drawer-price-total p{ font-size:13px; line-height:1.55; }
#CartDrawer .cart-drawer-price-total li{ font-size:12px; }
#CartDrawer .cart-drawer-price-total .h4{ font-size:16px; }
#CartDrawer .cart-drawer-price-total .ntf-saved{ font-size:13px; }
/* Klarna sits under the checkout button now, so it needs air above rather than below. width:100%
   is the part that matters: in a flex-column parent the row only stretches if nothing shrinks it,
   and justify-content alone cannot centre a box that is narrower than its track. */
/* Keyed off the row's OWN class, not an ancestor. Two ancestor-scoped attempts failed because the
   drawer footer sits outside #CartDrawer and differs between breakpoints — and widening it to
   `body .ntf-klarna-inline` caught the product page, which uses that class too.

   !important is required, not sloppiness: the durable CSS block (header-group-puff custom_liquid)
   carries `.ntf-klarna-inline{justify-content:flex-start !important}` for the product page, and
   only another !important can override it. Scoped to the cart-only class, so the product page
   keeps its left alignment. */
/* (superseded by .ntf-klarna-inline.ntf-klarna-cart below — kept width only) */
.ntf-klarna-cart{ width:100%; }
#CartDrawer .ntf-klarna-inline{ font-size:12.5px; }
#CartDrawer .ntf-klarna-logo{ height:15px; }
/* the pieces drop their own frames inside the card — the card supplies the structure */
.ntf-order-card .cr-row--page{ max-width:none; margin:0; padding:0; border:0; background:transparent; }
.ntf-order-card .gbp-cta--page{ max-width:none; margin:0; }
.ntf-order-card .gbp-cta--page .gbp-cta,
.ntf-order-card .gbp-cta{ padding:0; border:0; background:transparent; }
/* order note + delivery estimate, side by side as compact disclosures under the totals */
/* The drawer's strip: two equal halves, each centred, split by a rule. Left-aligned with a gap —
   which is what this was — reads as two stray links instead of one row of controls. */
.ntf-frow{ display:flex; gap:0; align-items:stretch; margin-top:12px;
  border-top:1px solid rgba(0,0,0,.09); padding-top:0; flex-wrap:nowrap; }
.ntf-fdet{ flex:1 1 50%; min-width:0; padding:11px 8px; }
/* The rule lives on the second half so a row with only one disclosure has no stray line. */
.ntf-fdet + .ntf-fdet{ border-left:1px solid rgba(0,0,0,.09); }
.ntf-fdet .ntf-fdet-sum{ justify-content:center; }
.ntf-fdet-sum{ cursor:pointer; font-size:11.5px; color:#6f6961; list-style:none; display:flex;
  align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ntf-fdet-sum::-webkit-details-marker{ display:none; }
.ntf-fdet-ic{ width:13px; height:13px; flex:none; display:flex; align-items:center; }
.ntf-fdet-ic svg{ width:13px; height:13px; }
.ntf-fdet-sum:hover{ color:#121110; }
.ntf-fdet[open] .ntf-fdet-sum{ color:#121110; font-weight:600; }
/* bodies live outside the 2-column row, so an open panel spans the full card width */
.ntf-fpanel{ display:none; margin-top:9px; }
.ntf-frow:has(.ntf-fdet--note[open]) ~ .ntf-fpanel--note{ display:block; }
/* Driven by a class, not by "is a sibling of an open <details>": the panel is moved to <body>
   while it is open, because its z-index only counts inside the stacking context it lives in and
   that one sits below the header. */
.ntf-fpanel--deliv.is-drawer{ display:block; }
.ntf-fdet-body{ font-size:13px; line-height:1.55; color:#55504a; margin:0; }
.ntf-fdet-body strong{ color:#121110; }
.ntf-fdet-field{ font-size:12px; }
/* ADD TO CART's look (Kai, 25 Sept) - see "One call-to-action look" at the end of this file. It was
   11px / 800 with .08em tracking on #121110 and 37px tall: the bold "GOT IT". */
.ntf-fdet-ok{ display:flex; align-items:center; justify-content:center; width:100%; margin-top:12px;
  border:0; background:#000; color:#fff; font-weight:500; font-size:15.4px; letter-spacing:normal;
  text-transform:uppercase; line-height:15.4px; min-height:47px; padding:14px 16px; border-radius:0;
  cursor:pointer; }
.ntf-fdet-ok:hover{ opacity:.9; }
/* The theme's own estimate-delivery line is the data source for the "Delivery <date>" label.
   It must stay in normal layout until it has been read — the theme populates it with an
   Alpine x-intersect handler, which never fires for a 1px clipped element (that was why the
   drawer's Delivery button came up empty). JS adds .ntf-estimate-read once the date has been
   copied, and only then is it hidden. */
/* Delivery panel — see snippets/delivery-estimate-sheet.liquid */
.ntf-deliv-lead{ font-size:13.5px; line-height:1.5; color:#121110; margin:0 0 12px; }
.ntf-deliv-lead strong{ font-weight:700; }
.ntf-deliv-rows{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column;
  gap:0; border-top:1px solid rgba(0,0,0,.08); }
.ntf-deliv-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(0,0,0,.08); }
.ntf-deliv-k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8d877e;
  font-weight:700; flex:none; }
.ntf-deliv-v{ font-size:13px; font-weight:600; color:#121110; text-align:right; }
.ntf-deliv-fine{ font-size:11.5px; line-height:1.45; color:#8d877e; margin:0 0 5px; }
/* Clipped from the first paint, not after the date has been read out of it — waiting showed the
   theme's old estimate for a beat every time the drawer opened. .ntf-estimate-read remains as the
   marker that the value was captured; it just no longer controls the hiding. */
.ntf-estimate-src{ position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Quantity badge: shown only when a line holds more than one, since there is no stepper.
   The × next to it steps the quantity down and removes the line at 1. */
.ntf-qty-badge{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  font-size:11px; font-weight:700; color:#55504a; background:rgba(0,0,0,.06); border-radius:2px;
  padding:1px 6px; line-height:1.5; margin-right:6px; align-self:center; order:-1; }

/* Remove (×) control — bottom-left of the line item, in the old quantity-stepper position */
/* 24px is the VISIBLE size; the tap target is 44px via a pseudo-element, which is the
   iOS minimum and roughly double the area. Growing the button itself would push the
   line-item layout around, and the product image sits directly behind it — every near
   miss opened the product instead of removing the line. z-index keeps it in front. */
.ntf-remove{ position:relative; z-index:3; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  margin:6px 0 0 -4px; padding:0; border:0; background:transparent; cursor:pointer;
  color:#8a8a8a; font-size:17px; line-height:1; transition:color .15s; }
.ntf-remove::before{ content:""; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); }
.ntf-remove:hover{ color:#121110; }
.ntf-remove:focus-visible{ outline:2px solid #3f7d54; outline-offset:2px; }

/* drawer heading links through to the full cart page */
.ntf-cart-title{ text-decoration:none; color:inherit; }
.ntf-cart-title:hover{ text-decoration:underline; }

/* Drawer "Delivery" button: it carries type="button", which inherits the theme's solid-button
   styling (white text) — the theme's own Order note button has no type attribute and stays
   dark. Force the normal text colour so the label isn't white-on-white. */
.ntf-deliv-btn{ color:rgba(var(--colors-text)) !important; background:transparent !important;
  border:0; }
.ntf-deliv-btn .summary__title,
.ntf-deliv-btn span{ color:inherit !important; }
.ntf-deliv-btn svg{ fill:currentColor; }

/* ---- Tiered gifts strip: full width at the bottom of the cart page (desktop) ---- */
.ntf-strip{ border:1px solid rgba(0,0,0,.1); background:rgb(var(--colors-background,255,255,255));
  padding:14px 16px; margin-top:22px; }
.ntf-strip-hd{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-bottom:12px; flex-wrap:wrap; }
.ntf-strip-lbl{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8d877e; font-weight:700; }
.ntf-strip-nudge{ font-size:12.5px; font-weight:700; color:#121110; }
.ntf-strip-nudge b{ color:#3f7d54; }
.ntf-strip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ntf-strip-c{ display:flex; align-items:center; gap:11px; border:1px solid rgba(0,0,0,.1); padding:9px 11px;
  background:transparent; text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%;
  transition:border-color .15s, background .15s; }
.ntf-strip-c:hover{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.2); }
.ntf-strip-c:focus-visible{ outline:2px solid #3f7d54; outline-offset:2px; }
.ntf-strip-c.is-next{ border-color:#3f7d54; background:#eef4f0; }
.ntf-strip-im{ display:block; width:42px; height:42px; flex:none; background-size:cover;
  background-position:center; background-color:#f2f0ec; border:1px solid rgba(0,0,0,.07); }
.ntf-strip-im.is-locked{ filter:grayscale(1); opacity:.55; }
.ntf-strip-im--badge{ display:flex; align-items:center; justify-content:center; text-align:center;
  background:#3f7d54; color:#fff; font-size:9px; font-weight:800; line-height:1.1; padding:3px; border:0; }
.ntf-strip-tx{ display:block; min-width:0; }
.ntf-strip-tt{ display:block; font-size:12px; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.ntf-strip-st{ display:block; font-size:10.5px; color:#8d877e; margin-top:3px; font-weight:600; }
.ntf-strip-c.is-done .ntf-strip-st{ color:#6f6961; }
.ntf-strip-st .ntf-tick{ color:#3f7d54; font-weight:800; }
/* Mobile: hide the desktop strip and fall back to the compact drawer-style row */
.ntf-strip-mob{ display:none; }
@media (max-width:1023px){
  .ntf-strip .ntf-strip-hd,
  .ntf-strip .ntf-strip-grid{ display:none; }
  .ntf-strip{ padding:12px 14px; }
  .ntf-strip-mob{ display:flex; }
}

/* ---- Rewards row on the CART PAGE: constrain + slightly enlarge for the wider column ---- */
.cr-row--page{max-width:520px;margin:0 auto;padding:14px 16px;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.015);}
.cr-row--page .cr-thumb{width:60px;height:60px;}
.cr-row--page .cr-headline{font-size:13.5px;}
.cr-row--page .cr-dot{width:20px;height:20px;font-size:10px;}

/* ---- Shared gift-box CTA (snippets/gift-box-cta.liquid) ----
   Reads as part of its surrounding panel rather than a card-inside-a-card: no inner
   border or fill, the parent block already provides the divider and padding. Colours are
   set explicitly (they were inheriting a near-white colour in the drawer, making the
   sub-line unreadable). */
.gbp-cta{display:flex;align-items:center;gap:14px;padding:4px 0;background:transparent;border:0;
  transition:opacity .15s;}
.gbp-cta:hover{opacity:.72;}
.gbp-cta:focus-visible{outline:2px solid #3f7d54;outline-offset:3px;}
.gbp-cta-img{width:56px;height:56px;object-fit:cover;flex-shrink:0;}
.gbp-cta-body{flex:1;line-height:1.35;min-width:0;}
.gbp-cta-title{margin:0;font-weight:700;font-size:14px;color:#121110;}
.gbp-cta.is-done .gbp-cta-title{color:#3f7d54;}
.gbp-cta-sub{margin:3px 0 0;font-size:12px;color:#6f6961;opacity:1;}
/* "for free" in brand gold, not underlined — the underline read as a separate link even though
   the whole row is one tap target. */
/* Same ink as the rest of the sentence. The gold made one word of a plain line look like a
   link, and "Free" is already carried by the weight. */
.gbp-cta-free{text-decoration:none;color:inherit;font-weight:600;}
.gbp-cta-link{text-decoration:underline;text-underline-offset:3px;color:#121110;}
/* FREE flag pinned to the photo's top-left. No tile behind the photo: the flag alone does the
   work of separating it from the white row. */
.gbp-cta-imgwrap{position:relative;flex-shrink:0;display:block;line-height:0;}
/* Inside the image, not overhanging it: at top/left -4px the badge relied on every ancestor
   staying overflow:visible, and one of them does not — which is what cut the corner off. Sitting
   flush at 0,0 it cannot be clipped by anything.

   Not bold, at request. And text-indent cancels the trailing letter-space: letter-spacing adds its
   gap AFTER the last letter, so the word sat visibly left of centre inside its own box. */
.gbp-cta-flag{position:absolute;top:0;left:0;background:#a8813f;color:#fff;font-size:8px;
  font-weight:500;letter-spacing:.1em;text-indent:.1em;line-height:1;padding:3px 6px;
  border-radius:0;pointer-events:none;}
.gbp-cta-imgwrap{overflow:visible;}
/* Matched to the Order note / Delivery icons: 16px box (their w-4 h-4) and the same dark text
   colour they inherit, rather than the muted grey this had. */
.gbp-cta-caret{width:16px;height:16px;flex-shrink:0;color:#121110;display:flex;align-items:center;
  justify-content:center;transition:color .15s;}
.gbp-cta-caret svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;}
.gbp-cta-caret svg path{fill:none;}
.gbp-cta:hover .gbp-cta-caret{color:#a8813f;}
.gbp-cta.is-done .gbp-cta-caret{color:#3f7d54;}
/* Cart page: standalone here, so it keeps a light frame and matches the rewards row width */
.gbp-cta--page{max-width:520px;margin:20px auto 0;}
.gbp-cta--page .gbp-cta{padding:14px 16px;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.015);}
.gbp-cta--page .gbp-cta:hover{opacity:1;background:rgba(0,0,0,.04);}

/* ---- Popup ---- */
#cr-modal{position:fixed;inset:0;z-index:2147483647;background:rgba(16,14,10,.62);align-items:center;
  justify-content:center;padding:18px;}
/* padding-bottom is 0 so the sticky footer sits flush against the dialog's bottom edge — any
   padding there leaves a strip the carousel shows through beneath the bar. */
/* height:auto is load-bearing. The theme's popup shell puts a height on this box, which left the
   dialog 14px shorter than its own content and scrolling on a screen with room to spare. */
.cr-dialog{position:relative;width:100%;max-width:420px;height:auto !important;max-height:calc(100vh - 40px);overflow:auto;background:#fff;
  border-radius:2px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);padding:26px 24px 0;}
.cr-side{ display:none; }
/* Desktop only, like the side panel: on a phone the CTA is in .cr-foot. */
.cr-ctarow{ display:none; }
/* ---- Desktop: two columns — tier list + recommendations left, featured reward right ----
   The tier rows stay compact here because the detail lives in the side panel; clicking a row
   swaps the panel rather than expanding inline. Mobile keeps the single-column list. */
@media (min-width:1024px){
  /* The DIALOG scrolls, not the column inside it. As a grid item with overflow:auto, .cr-main has
     an automatic minimum size of min-content — so the row was free to be shorter than its content
     and the dialog sized itself to the side column, leaving 14px of scroll on a screen with 180px
     to spare. With the column in normal flow the dialog grows to fit and only scrolls when the
     viewport genuinely cannot hold it. */
  /* Three rows: ladder + reward panel, then the products across the full width, then the buttons.
     Wider than it was (790 -> 940) because five cards beside a reward panel do not fit in 790, and
     a popup on a desktop is allowed to take the room. */
  .cr-dialog{ max-width:940px; padding:0; display:grid; grid-template-columns:1fr 288px;
    grid-template-areas:"main side" "recs recs" "cta cta";
    align-items:stretch; overflow:auto; height:auto !important; }
  .cr-main{ grid-area:main; padding:20px 24px 2px; min-width:0; }
  .cr-recs{ grid-area:recs; padding:0 24px; margin-top:10px; }
  .cr-ctarow{ grid-area:cta; display:block; padding:8px 24px 12px; }
  /* One row under the products, each button half the width, so the pair reads as one control
     group rather than two stacked blocks. */
  .cr-ctarow .cr-footpair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .cr-ctarow .cr-cta{ margin:0; }
  /* Full height of its row. As a sticky, self-start item the beige stopped halfway down the
     dialog, which read as a half-painted panel. */
  .cr-side{ grid-area:side; align-self:stretch; }
  .cr-side{ display:block; background:transparent; border-left:1px solid rgba(0,0,0,.08);
    padding:24px 20px; }
  .cr-foot{ display:none; }
  .cr-close{ z-index:3; }
  /* compact rows — the detail is shown in the side panel instead */
  .cr-tier{ padding-bottom:14px; }
  .cr-tier .cr-desc, .cr-tier .cr-nextbar{ display:none; }
  .cr-tier .cr-media{ width:44px; height:44px; }
  .cr-tier .cr-th{ display:none; }
  .cr-tier .cr-lb{ font-size:13.5px; margin-top:0; }
  .cr-tier .cr-card{ align-items:center; }
  .cr-tier.is-open .cr-card{ background:transparent; border-color:rgba(63,125,84,.45); padding:10px; }
  .cr-toggle{ display:none; }
  .cr-recs-track{ gap:10px; }   /* five-across sizing lives at the end of this file */
  /* side panel pieces */
  .cr-side-lbl{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:#3f7d54; font-weight:700; }
  .cr-side-media{ position:relative; display:block; width:100%; height:158px; margin-top:12px; background-size:cover;
    background-position:center; background-color:#ece9e3; border:1px solid rgba(0,0,0,.07); }
  .cr-side-media--badge{ display:flex; align-items:center; justify-content:center; text-align:center;
    background:#3f7d54; color:#fff; font-size:19px; font-weight:800; border:0; }
  .cr-side-tt{ font-size:16px; font-weight:800; letter-spacing:-.01em; margin-top:12px; line-height:1.25; }
  /* threshold line — plain light grey, no emphasis; it is a footnote, not a heading */
  .cr-side-th{ font-size:11px; color:#9a948c; font-weight:400; margin-top:5px; }
  .cr-side-ds{ font-size:12px; color:#55504a; line-height:1.5; margin-top:8px; }
  .cr-side-bar{ display:block; height:4px; background:rgba(0,0,0,.09); border-radius:2px; overflow:hidden;
    position:relative; margin-top:14px; }
  .cr-side-bar i{ position:absolute; inset:0 auto 0 0; background:#3f7d54; transition:width .4s ease; }
  .cr-side-st{ font-size:12px; font-weight:800; margin-top:9px; color:#121110; }
  .cr-side-st.is-done{ color:#3f7d54; }
  .cr-side .cr-cta{ margin-top:16px; }
  /* desktop gift gallery — arrows over the photo, thumbnails beneath */
  .cr-side-media .cr-ga{ position:absolute; top:50%; transform:translateY(-50%); width:26px;
    height:26px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#121110;
    font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
    cursor:pointer; }
  .cr-side-media .cr-ga--l{ left:7px; }
  .cr-side-media .cr-ga--r{ right:7px; }
  .cr-side-thumbs{ display:flex; gap:5px; margin-top:6px; overflow-x:auto; }
  .cr-side-thumb{ width:38px; height:38px; flex:none; padding:0; cursor:pointer;
    border:1px solid rgba(0,0,0,.1); background-size:cover; background-position:center;
    background-color:#efece6; }
  .cr-side-thumb.is-on{ outline:2px solid #3f7d54; outline-offset:-2px; }
}
.cr-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:22px;line-height:1;
  color:#8d877e;cursor:pointer;}
.cr-modal-head{margin-bottom:20px;}
.cr-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#3f7d54;font-weight:700;}
.cr-sub{font-size:15px;color:#121110;margin-top:7px;line-height:1.4;font-weight:600;}
.cr-sub b{color:#3f7d54;font-weight:800;}

/* Vertical tier ladder — unlocked tiers collapse, the NEXT reward gets the space.
   Every tier stays clickable so customers can open any reward and read what's inside. */
.cr-list{list-style:none;margin:0;padding:0;}
.cr-tier{position:relative;display:flex;gap:14px;padding:0 0 18px 0;}
.cr-tier:last-child{padding-bottom:12px;}
/* the spine: a vertical line running through the step markers */
.cr-tier::before{content:"";position:absolute;left:65.5px;top:31px;bottom:-6px;width:2px;background:rgba(0,0,0,.1);}
.cr-tier:last-child::before{display:none;}
.cr-tier.done::before{background:#3f7d54;}
/* Milestone gutter + node. The amount labels the node instead of the node counting steps.
 Gutter 46 + gap 14 + node 13 puts the node centre at 66.5px, which is where the spine sits. */
.cr-mile{flex:none;width:46px;margin-top:13px;text-align:right;font-size:12px;font-weight:600;
  line-height:1;color:rgba(0,0,0,.45);letter-spacing:.01em;}
.cr-tier.next .cr-mile{color:#3f7d54;}
.cr-tier.done .cr-mile{color:rgba(0,0,0,.35);}
.cr-step{position:relative;z-index:1;width:13px;height:13px;margin-top:12px;flex:none;border-radius:50%;
  background:#fff;border:2px solid rgba(0,0,0,.18);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:8px;font-weight:800;line-height:1;}
.cr-tier.done .cr-step{background:#3f7d54;border-color:#3f7d54;color:#fff;}
.cr-tier.next .cr-step{border-color:#3f7d54;color:#3f7d54;box-shadow:0 0 0 3px rgba(63,125,84,.16);}

/* the clickable card holding media + copy */
.cr-card{display:flex;gap:12px;flex:1;min-width:0;align-items:flex-start;text-align:left;
  background:transparent;border:1px solid transparent;padding:0;font:inherit;color:inherit;cursor:pointer;
  width:100%;transition:background .15s,border-color .15s;}
.cr-card:hover{background:rgba(0,0,0,.025);}
.cr-card:focus-visible{outline:2px solid #3f7d54;outline-offset:2px;}
.cr-tier.next .cr-card{background:#eef4f0;border-color:rgba(63,125,84,.45);padding:12px;}
/* Same hover as every other row. The green one belonged to the tinted `next` state, which no
   longer exists — it survived as one row in three lighting up differently. */
.cr-tier.next .cr-card:hover{background:rgba(0,0,0,.025);}
.cr-tier.is-open:not(.next) .cr-card{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.08);padding:10px;}

.cr-media{display:block;width:64px;height:64px;flex:none;background-size:cover;background-position:center;
  border:1px solid rgba(0,0,0,.08);position:relative;transition:width .15s,height .15s;}
/* word-break:normal is the fix, not the size: left to itself the browser will split a word across
   lines to fill a 44px box, and "Free shippin / g" is what that looks like. */
.cr-media--badge{display:flex;align-items:center;justify-content:center;text-align:center;background:#3f7d54;
  color:#fff;font-weight:800;font-size:11px;line-height:1.15;padding:3px;
  word-break:normal;overflow-wrap:normal;hyphens:none;}
.cr-tier:not(.done) .cr-media{filter:grayscale(1);opacity:.62;}
/* collapsed rows: small thumb, single line */
.cr-tier.is-collapsed .cr-media{width:38px;height:38px;}
.cr-tier.is-collapsed .cr-media--badge{font-size:8.5px;line-height:1.1;}
.cr-tier.is-collapsed .cr-card{align-items:center;}

/* NB: these are <span>s (valid inside the <button>), so each needs display:block */
.cr-info{display:block;flex:1;min-width:0;padding-top:1px;}
.cr-th{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8d877e;font-weight:700;}
.cr-tier.is-collapsed .cr-th{display:none;}
/* Weight 500, not 800. The storefront has no 800 anywhere — collection card titles are 500 and
   buttons are 500 — so an extra-bold reward name was the heaviest text in the cart and read as a
   different typeface. The negative tracking went with it: -.01em exists to stop heavy weights
   looking loose, and at 500 it just cramps the word. */
.cr-lb{display:block;font-size:15px;font-weight:500;letter-spacing:normal;line-height:1.25;margin-top:3px;
  color:#121110;}
.cr-tier.is-collapsed .cr-lb{font-size:13.5px;margin-top:0;}
.cr-desc{display:block;font-size:12px;color:#55504a;line-height:1.45;margin-top:5px;}
/* Status: keep colour restrained — the green tick already signals "unlocked" */
.cr-status{display:block;font-size:11px;font-weight:700;margin-top:7px;color:#121110;}
.cr-tier.is-collapsed .cr-status{margin-top:2px;}
.cr-status.is-done{color:#6f6961;font-weight:600;}
.cr-status.is-done .cr-tick{color:#3f7d54;font-weight:800;}
.cr-status.is-todo{color:#121110;}
/* chevron hint that a row opens */
.cr-toggle{flex:none;align-self:center;width:16px;height:16px;color:#8d877e;display:flex;align-items:center;
  justify-content:center;font-size:11px;transition:transform .2s;}
.cr-tier.is-open .cr-toggle{transform:rotate(180deg);}
/* progress inside the next reward */
.cr-nextbar{display:block;height:4px;background:rgba(0,0,0,.09);border-radius:2px;overflow:hidden;position:relative;margin-top:10px;}
.cr-nextbar i{position:absolute;inset:0 auto 0 0;background:#3f7d54;transition:width .4s ease;}
.cr-allin{margin:2px 0 14px;text-align:center;font-size:12.5px;font-weight:800;color:#3f7d54;}

/* ---- Popup footer: primary CTA + "pairs with your cart" carousel ---- */
/* Pinned to the bottom of the dialog as a solid bar. It bleeds past .cr-dialog's 24px side
   padding with negative margins, so the upsell carousel cannot scroll through the gutters beside
   it, and the background is fully opaque — the old rule was white with a translucent WHITE glow,
   which let the cards' ADD buttons show through underneath. */
/* No shadow. The 1px top border already separates the bar from the content above it, and the
   drop shadow made the CTA look like it was floating over the panel. */
/* No rule above the buttons: the footer is sticky over a white panel, so the line was drawing
   itself across the content as you scrolled rather than marking any real edge. */
.cr-foot{position:sticky;bottom:0;z-index:6;background:#fff;margin:14px -24px 0;
  padding:12px 24px calc(12px + env(safe-area-inset-bottom, 0px));}
/* Brand button, measured on the live product page: Montserrat 13.86px / weight 500 / normal
   letter-spacing / square. Ours was 12px at weight 800 with .08em tracking — heavier and tighter
   than any button on the storefront, which is why it read as a different system. Uppercase is
   kept: NineTwoFive CTAs are caps (applied via CSS here rather than in the string, unlike the
   product page which uppercases through its own custom rule). */
.cr-cta{display:block;width:100%;border:0;background:#121110;color:#fff;font-weight:500;font-size:13.86px;
  letter-spacing:normal;text-transform:uppercase;padding:14px;cursor:pointer;text-align:center;text-decoration:none;}
/* The storefront's own behaviour: colour and background eased, not an opacity jump — on a black
   button .9 opacity is close to no feedback at all. */
.cr-cta{transition:background-color .3s, color .3s, box-shadow .3s;}
.cr-cta:hover{background:#2f2d2b;opacity:1;}
.cr-cta--ghost{transition:background-color .3s, box-shadow .3s;}
.cr-cta--ghost:hover{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);}
.cr-recs{margin-top:18px;}
.cr-recs-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8d877e;font-weight:700;
  margin-bottom:10px;}
/* No rule under the tab row and none above the block (Kai, 2026-09-23): two full-width grey
   lines stacked within ~30px read as a table header, not as a shelf of products. The active
   tab keeps its green underline, which is the only line that carries meaning here. */
.cr-recs-tabs{display:flex;gap:16px;margin-bottom:11px;}
.cr-tab{background:none;border:0;padding:0 0 7px;font:inherit;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:#a49d93;cursor:pointer;position:relative;}
.cr-tab:hover{color:#55504a;}
.cr-tab.is-on{color:#121110;}
.cr-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#3f7d54;}
.cr-recs-empty{font-size:11.5px;color:#8d877e;padding:6px 0;}
/* 2px, measured on the live collection grid (grid-cols-2 / lg:grid-cols-4, gap 2px). Ours was
   10px, which read as a carousel of separate tiles rather than the tight mosaic the collection
   page uses — the tinted card panels are meant to sit almost flush. */
/* Grab, not just swipe. On a phone the rail is obvious; with a mouse a horizontal scroller has no
   affordance at all, so it also drags — .is-dragging kills the snap mid-drag, because snapping
   while the pointer is still down fights the hand. */
.cr-recs-track{cursor:grab;display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
  scrollbar-width:thin;}
.cr-recs-track::-webkit-scrollbar{height:4px;}
.cr-recs-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);}
/* Cards are equal-height flex columns so every ADD button lines up, regardless of whether the
   product title wraps to one line or two. */
/* ---- Upsell cards: matched to the COLLECTION PAGE product card -------------------
   Values measured off a live collection card rather than eyeballed, so these are the theme's own
   numbers, not an approximation:
       title   Montserrat 14.4px / 600 / line-height 18px   / #191919 / no transform
       price   Montserrat 14.4px / 400 / line-height 19.8px / #242424
   The previous card used 11.5px for both and an 800-weight price, which is heavier than the
   collection page ever renders — it read as a different component from the rest of the store.

   The card had to grow from 116px to 150px to carry 14.4px type: at the old width a two-line
   clamp cut most product names mid-word. Three fit across the desktop dialog; the rest scroll,
   which they already did. */
/* The collection card is a TINTED PANEL, not a bare image with text under it: .card-product
   carries background #e3e6e6 behind both the photo and the copy, with padding 0 0 16px, and the
   text block inset by 20px 10px 0. The thin white line between image and text is the product
   photo's own white backdrop meeting that grey — it comes for free once the panel is there.
   Measured on the live site. */
.cr-rec{scroll-snap-align:start;flex:0 0 150px;min-width:150px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;background:#e3e6e6;padding:0 0 16px;}
/* the card's inner nodes are <span>s inside an <a> — they need display set explicitly */
.cr-rec-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;}
.cr-rec-img{display:block;width:100%;height:150px;background-size:cover;background-position:center;
  background-color:#fff;border:0;}
/* reserve two lines so single-line titles don't pull the price and button upward */
/* Measured on the LIVE site (ninetwofive.com), on the elements that actually paint the text:
       title  11.34px  / 500 / #191919 / line-height 14.175px
       price  11.664px / 400 / #423f3f / line-height 11.664px
   An earlier pass here used 14.4px/600 for the title and #242424 for the price. That came from
   measuring the WRAPPER rather than the text node, so both the size and the price colour were
   wrong — the cards were rendering noticeably larger and heavier than the collection page.
   These figures already include the theme editor's font-size:90% override. */
.cr-rec-t{font-size:11.34px;font-weight:500;line-height:14.175px;margin-top:20px;color:#191919;padding:0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:28.35px;}
.cr-rec-p{display:block;font-size:11.664px;font-weight:400;line-height:11.664px;margin-top:auto;
  padding:5px 10px 0;color:#423f3f;}
/* Same brand values, scaled down for a 150px card — weight 500 and normal tracking, not the
   800/.06em it had. The collection card has no button of its own, so the size is ours; the
   weight and spacing are the storefront's. */
/* Transparent, not white. The card is a tinted #e3e6e6 panel, so a white button sat on it as a
   second surface — two backgrounds stacked where the design has one. Letting the panel show
   through leaves just the outline, which is what an outline button is. */
.cr-rec-btn{display:block;width:calc(100% - 20px);margin:8px 10px 0;border:1px solid #121110;background:transparent;color:#121110;
  font-size:12px;font-weight:500;letter-spacing:normal;text-transform:uppercase;padding:9px 4px;cursor:pointer;
  text-align:center;text-decoration:none;}
.cr-rec-btn:hover{background:#121110;color:#fff;}
.cr-rec-btn[disabled]{opacity:.55;cursor:default;}
/* ---- Mobile popup layout: "thumbnail strip" ----
   Desktop keeps the ladder + side panel. On mobile the selected reward becomes the hero: a large
   image with ‹ › and a thumbnail row beneath it (the pattern customers already know from the
   product pages), then the copy, then the tier chips to switch reward. The vertical ladder and
   the headline are hidden there — the hero and the sticky CTA already carry both. */
.cr-hero, .cr-chips{ display:none; }
@media (max-width:1023px){
  .cr-hero{ display:block; margin:-26px -24px 0; }   /* bleeds past .cr-dialog's 26px/24px padding */
  .cr-chips{ display:flex; gap:6px; margin:14px 0 4px; }
  .cr-modal-head, .cr-list{ display:none; }
  /* Halved, at request: 230px was more than a third of the phone screen for a picture that
     is decoration next to the reward text — and for a reward with no product photo it was a
     giant coloured panel with a word in it. */
  .cr-hero-main{ position:relative; width:100%; height:115px; background-size:cover;
    background-position:center; background-color:#efece6; }
  .cr-hero-main--badge{ display:flex; align-items:center; justify-content:center; text-align:center;
    background:#3f7d54; color:#fff; font-weight:800; font-size:20px; padding:0 18px; }
  .cr-ga{ position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px;
    border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#121110; font-size:16px;
    line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .cr-ga--l{ left:9px; }
  .cr-ga--r{ right:9px; }
  .cr-hero-thumbs{ display:flex; gap:6px; padding:8px 24px 0; overflow-x:auto; }
  .cr-hero-th{ width:44px; height:44px; flex:none; padding:0; cursor:pointer;
    border:1px solid rgba(0,0,0,.1); background-size:cover; background-position:center;
    background-color:#efece6; }
  .cr-hero-th.is-on{ outline:2px solid #3f7d54; outline-offset:-2px; }
  .cr-hero-body{ padding:12px 24px 0; }
  .cr-hero-tt{ font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
  .cr-hero-th2{ font-size:11px; color:#9a948c; font-weight:400; margin-top:5px; }
  .cr-hero-ds{ font-size:12.5px; color:#55504a; line-height:1.5; margin-top:7px; }
  .cr-hero-bar{ display:block; height:4px; background:rgba(0,0,0,.09); border-radius:2px;
    overflow:hidden; position:relative; margin-top:11px; }
  .cr-hero-bar i{ position:absolute; inset:0 auto 0 0; background:#3f7d54; transition:width .4s ease; }
  .cr-hero-st{ font-size:12px; font-weight:800; margin-top:8px; color:#121110; }
  .cr-hero-st.is-done{ color:#3f7d54; }
  .cr-chip{ flex:1; min-width:0; border:1px solid rgba(0,0,0,.12); background:transparent;
    padding:7px 4px; cursor:pointer; font:inherit; font-size:9.5px; font-weight:800; color:#8d877e;
    display:flex; flex-direction:column; align-items:center; gap:4px; }
  .cr-chip-d{ width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(0,0,0,.2);
    display:flex; align-items:center; justify-content:center; font-size:9px; }
  .cr-chip-l{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cr-chip.is-on{ border-color:#3f7d54; background:#eef4f0; color:#2f6341; }
  .cr-chip.is-done .cr-chip-d{ background:#3f7d54; border-color:#3f7d54; color:#fff; }
  /* the close button now sits over the photo, so it needs its own backing */
  .cr-close{ z-index:4; right:10px; top:10px; width:28px; height:28px; border-radius:50%;
    background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; }
}
@media (max-width:400px){
  .cr-media{width:54px;height:54px;}
  .cr-lb{font-size:14px;}
}
@media (prefers-reduced-motion:reduce){.cr-miniprog-f,.cr-nextbar i,.cr-toggle{transition:none!important;}}

/* ================= All rewards earned =================================================
   One markup, two treatments: a centred trio on desktop, stacked rows on mobile. The normal
   head / ladder / upsells are hidden rather than removed, so a cart that drops back below a
   threshold restores them intact. */
.cr-won-wrap{ display:none; }
.cr-dialog--won .cr-won-wrap{ display:block; }
/* .cr-hero and .cr-chips are MOBILE-ONLY (hidden at desktop widths), which is why their absence
   from this list went unnoticed: on a phone the all-unlocked panel rendered and the ordinary
   ladder — hero image, tier line and chips — was still sitting right below it, so two rewards UIs
   appeared stacked in one scroll. Anything the mobile layout switches on has to be switched off
   here too. Specificity alone beats the media query, the !important is belt and braces. */
.cr-dialog--won .cr-modal-head,
.cr-dialog--won .cr-list,
.cr-dialog--won .cr-recs,
.cr-dialog--won .cr-side,
.cr-dialog--won .cr-hero,
.cr-dialog--won .cr-chips,
/* The won view carries its own Proceed to checkout, so the CTA row under the products would be a
   second, quieter pair of buttons under the only one that matters. */
.cr-dialog--won .cr-ctarow,
.cr-dialog--won .cr-foot{ display:none !important; }
.cr-dialog--won{ grid-template-columns:1fr !important; }

.cr-won-head{ text-align:center; padding:4px 0 0; }
.cr-won-kicker{ display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#3f7d54; font-weight:700; }
.cr-won-h{ display:block; font-size:24px; font-weight:800; letter-spacing:-.02em; margin:7px 0 3px; }
.cr-won-amt{ display:block; font-size:13px; color:#55504a; }
.cr-won-amt b{ color:#8a6a33; font-weight:800; font-size:15px; }

.cr-won-list{ list-style:none; margin:18px 0 0; padding:0; }
.cr-won-media{ position:relative; display:block; line-height:0; }
.cr-won-img{ display:block; width:100%; aspect-ratio:1; background-size:cover;
  background-position:center; background-color:#efece6; border:1px solid rgba(0,0,0,.08); }
.cr-won-img--badge{ display:flex; align-items:center; justify-content:center; text-align:center;
  background:#3f7d54; color:#fff; font-weight:800; font-size:13px; border:0; padding:4px; }
.cr-won-worth{ position:absolute; left:-4px; top:-4px; background:#a8813f; color:#fff;
  font-size:8px; font-weight:800; letter-spacing:.07em; line-height:1; padding:3px 5px;
  white-space:nowrap; z-index:2; }
.cr-won-tick{ position:absolute; right:-5px; top:-5px; width:20px; height:20px; border-radius:50%;
  background:#3f7d54; color:#fff; font-size:10px; font-weight:800; display:flex;
  align-items:center; justify-content:center; border:2px solid #fff; z-index:2; }
.cr-won-name{ display:block; font-weight:800; letter-spacing:-.01em; }
.cr-won-val{ display:block; color:#55504a; }
.cr-won-val s{ color:#8d877e; }
/* The all-unlocked popup is as wide as the modal, so a full-width CTA came out far wider than any
 button on the rest of the store. Capped and centred on desktop; on a phone the modal is already
 narrow enough that full width is right. */
.cr-won-cta{ margin-top:16px; }
@media (min-width:761px){
  .cr-won-cta{ display:block; width:100%; max-width:320px; margin-left:auto; margin-right:auto; }
}
.cr-won-note{ font-size:11px; color:#8d877e; text-align:center; margin:9px 0 18px; }

/* announcement banner — mobile only; on desktop the headline already says it */
.cr-won-ann{ display:none; }

/* ---- desktop: centred trio ---- */
@media (min-width:1024px){
  .cr-dialog--won .cr-main{ padding:26px 26px 22px; }
  .cr-won-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .cr-won-item{ text-align:center; }
  .cr-won-name{ font-size:12.5px; margin-top:9px; }
  .cr-won-val{ font-size:11.5px; margin-top:2px; }
  .cr-won-worth{ font-size:9px; padding:4px 6px; }
}

/* ---- mobile: stacked rows ---- */
@media (max-width:1023px){
  .cr-won-ann{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:#3f7d54; color:#fff; padding:11px 14px; margin:-26px -24px 16px; }
  .cr-won-ann-t{ display:block; font-size:12.5px; font-weight:800; letter-spacing:-.01em; }
  .cr-won-ann-s{ display:block; font-size:10.5px; opacity:.9; margin-top:1px; }
  .cr-won-ann-v{ font-size:16px; font-weight:800; white-space:nowrap; }
  .cr-won-h{ font-size:20px; }
  .cr-won-list{ display:flex; flex-direction:column; gap:9px; }
  .cr-won-item{ display:flex; align-items:center; gap:11px; padding:9px;
    border:1px solid rgba(63,125,84,.26); background:#eef4f0; }
  .cr-won-media{ flex:none; width:46px; }
  .cr-won-img{ width:46px; height:46px; aspect-ratio:auto; background-color:#fff; }
  .cr-won-img--badge{ font-size:10px; }
  .cr-won-info{ flex:1; min-width:0; }
  .cr-won-name{ font-size:12.5px; color:#2f6341; }
  .cr-won-val{ font-size:11px; margin-top:2px; }
}

/* Summary block gets its own surface. Everything in the drawer sat on the same white, so the
   gift box CTA, note row, totals and checkout read as one undifferentiated block. Same white,
   but a shadow cast upward so it reads as a panel in front of the cart list. No colour change,
   so it cannot clash with product photography. */
#CartDrawer .footer-cart-drawer-mobile,
.footer-cart-drawer-mobile{ position:relative; z-index:1;
  /* Softened twice on request: .30 -> .21 (-30%) -> .105 (a further -50%). Opacity only; the
     blur and offset are untouched, since shrinking those hardens the edge rather than softening
     it. At .105 this is close to the floor — much less and the panel will read as having no
     separation from the items above it at all. */
  box-shadow:0 -9px 26px -12px rgba(0,0,0,.105); }

/* Klarna as a sub-line under the Total: right-aligned to sit beneath the amount, smaller than
   the totals, with an (i) affordance instead of a "Learn more" link. Overrides the durable
   block's `.ntf-klarna-inline{justify-content:flex-start !important}` — hence !important here. */
/* Compound selector on purpose. The durable CSS block carries
     .ntf-klarna-inline{justify-content:flex-start !important}
   and it renders in <body> (header group), while this stylesheet is in <head>. Equal specificity
   + equal !important means the LATER rule wins, which is theirs. .ntf-klarna-inline.ntf-klarna-cart
   is 0-2-0 and beats it regardless of document order. */
.ntf-klarna-inline.ntf-klarna-cart{ justify-content:flex-end !important; text-align:right !important;
  margin:2px 0 9px !important; font-size:12.7px !important; gap:6px !important; }
.ntf-klarna-inline.ntf-klarna-cart .ntf-klarna-logo{ height:15.5px !important; }
.ntf-klarna-inline.ntf-klarna-cart .ntf-klarna-text{ color:#6f6961; font-weight:400; }
.ntf-klarna-i{ display:inline-flex; align-items:center; justify-content:center; width:17.5px;
  height:17.5px; flex:none; padding:0; border:1px solid rgba(0,0,0,.28); border-radius:50%;
  background:transparent; color:#6f6961; font-family:inherit; font-size:10.5px; font-weight:700;
  line-height:1; cursor:pointer; transition:color .15s, border-color .15s; }
.ntf-klarna-i:hover{ color:#121110; border-color:#121110; }
/* The whole row is the control now: pointer everywhere on it, and the (i) answers to the row's hover. */
.ntf-klarna-tap{ cursor:pointer; }
.ntf-klarna-tap:hover .ntf-klarna-i{ color:#121110; border-color:#121110; }
.ntf-klarna-tap:focus-visible{ outline:2px solid #3f7d54; outline-offset:2px; }

/* --- "Choose a size" flash -------------------------------------------------
   Fired from the add-to-cart button when no variant is selected (see the
   ntf_need_size block in snippets/product-template.liquid). Lives here rather
   than in the vendor snippet so a Tapita update cannot drop it. */
[id^="variant-update-"].ntf-size-flash{
  animation: ntf-size-flash 1.6s ease-out 1;
  border-radius:4px;
}
@keyframes ntf-size-flash{
  0%   { box-shadow:0 0 0 0 rgba(184,145,47,0);   background:rgba(184,145,47,0); }
  18%  { box-shadow:0 0 0 4px rgba(184,145,47,.30); background:rgba(184,145,47,.10); }
  70%  { box-shadow:0 0 0 4px rgba(184,145,47,.18); background:rgba(184,145,47,.06); }
  100% { box-shadow:0 0 0 0 rgba(184,145,47,0);   background:rgba(184,145,47,0); }
}
@media (prefers-reduced-motion: reduce){
  [id^="variant-update-"].ntf-size-flash{ animation:none; box-shadow:0 0 0 3px rgba(184,145,47,.35); }
}

/* ---- Gift-box row: tighten the vertical rhythm ---------------------------
   The wrapper contributed 12px top+bottom and .gbp-cta another 4px each side,
   so a 56px thumbnail sat inside 32px of padding and read as a gap in the
   drawer. Halved; the row still clears the divider above it. */
#CartDrawer .cart-drawer-gift-box-personalizer,
.cart-drawer-gift-box-personalizer{
  padding-top:5px !important;
  padding-bottom:5px !important;
}
.cart-drawer-gift-box-personalizer .gbp-cta{ padding-top:2px; padding-bottom:2px; }

/* ---- Trust + payment row: centre it under CHECK OUT ----------------------
   The row sits in a `flex flex-col pt-1 gap-1` wrapper: 4px above it from the
   gap, and NO bottom padding — so it hugged the checkout button while the
   drawer's own slack pooled underneath. Margin-top pushes it down into the
   middle of that leftover space. Drawer only; the cart page lays out
   differently and is fine as-is. */
#CartDrawer .ntf-trust,
.footer-cart-drawer-mobile .ntf-trust{ margin-top:9px; margin-bottom:2px; }

/* ---- Sticky add-to-cart: centre the label ---------------------------------
   The button also holds a price span and a loading spinner, so a plain inline
   label sits left of centre once the text is short ("Choose a size"). Force the
   text block to fill the button and centre within it. */
div.sticky_add_to_cart .x-atc-text,
.sticky_add_to_cart .add_to_cart_button .x-atc-text{
  display:flex !important;
  width:100%;
  justify-content:center;
  text-align:center;
}
div.sticky_add_to_cart .x-atc-text > .flex{ justify-content:center; width:100%; }
/* Vertical centring too: the button is a fixed-height box holding the label, a price span and an
   absolutely positioned spinner. Without align-items the label block sits at the top of that box.
   line-height is pinned so the text does not ride high on its own leading either. */
div.sticky_add_to_cart .add_to_cart_button,
div.sticky_add_to_cart button[name="add"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
/* The real cause of the label sitting high: the button carries line-height:12px while the text is
   ~15px, so the glyphs overflow their line box and ride upward inside the flex item. The arrow is a
   separate element with its own box, which is why it looked correctly centred and the text did not.
   line-height:1 lets flex centring position the text by its actual glyph box. */
div.sticky_add_to_cart .add_to_cart_button,
div.sticky_add_to_cart button[name="add"]{ line-height:normal !important; }
div.sticky_add_to_cart .x-atc-text,
div.sticky_add_to_cart .x-atc-text .button-text,
div.sticky_add_to_cart .x-atc-text > .flex{
  align-items:center;
  padding-top:0 !important; padding-bottom:0 !important;
}
/* Measured: zeroing the label padding and centring the flex box lands the glyphs at 14.6px above
   and below inside a 48px button. An earlier 1px nudge was added on a stale stylesheet reading and
   overshot to 15.6/13.6 — no offset is needed once the padding rules actually apply. */

/* "Add EUR X more" points at the recommendations. When they are already on screen there is
   nothing to scroll, so the click needs its own feedback. */
@keyframes ntfRecsFlash{
  0%   { box-shadow:0 0 0 0 rgba(63,125,84,0); }
  25%  { box-shadow:0 0 0 3px rgba(63,125,84,.30); }
  100% { box-shadow:0 0 0 0 rgba(63,125,84,0); }
}
.cr-recs-flash{ animation:ntfRecsFlash 1.3s ease-out 1; border-radius:3px; }
@media (prefers-reduced-motion:reduce){ .cr-recs-flash{ animation:none; box-shadow:0 0 0 3px rgba(63,125,84,.3); } }


/* ---- Claim banner in the rewards row -------------------------------------
   Warm parchment strip, not a black block: the reward should be noticed, not
   shouted, and it sits directly above the customer's own cart lines. It must
   never compete with CHECK OUT. Replaces the chip line while it shows. */
.cr-row.is-claim{ padding:0 !important; background:transparent !important; }
.cr-row.is-claim .cr-line{ display:none; }
.cr-band{ background:#f3efe6; border-top:1px solid #e8e2d6; border-bottom:1px solid #e8e2d6;
  padding:8px 13px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.cr-band[hidden]{ display:none; }
.cr-band-t{ font-size:12px; color:#3f3a34; line-height:1.35; }
.cr-band-cta{ margin-left:auto; font-size:12px; color:#121110; text-decoration:underline;
  white-space:nowrap; font-weight:500; }
.cr-row.is-claim:hover .cr-band-cta{ color:#6b5a2a; }

/* ---- Empty cart: category tiles (design 3) --------------------------------
   Replaces a centred column of text that promised collection links and showed
   none. Photography does the selling here, so the tile IS the link: image with
   a white label chip resting on it, mirroring the homepage "Shop by collection"
   gallery the customer has already seen. 2x2 in the drawer at any width — three
   across would put each tile under ~110px in a 375px drawer. */
.ntf-ect-sub{ font-size:12.5px; color:#8d877e; margin:0 0 14px; text-align:center; }
.ntf-ect{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr;
  gap:8px; width:100%; }
.ntf-ect-i{ margin:0; padding:0; }
.ntf-ect-a{ position:relative; display:flex; align-items:flex-end; justify-content:center;
  aspect-ratio:1.35; overflow:hidden; background:#ece9e4; text-decoration:none; padding:8px; }
.ntf-ect-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .45s ease; }
.ntf-ect-img--none{ background:#ece9e4; }
.ntf-ect-a:hover .ntf-ect-img{ transform:scale(1.04); }
/* The chip sits ON the photo, so it needs its own opaque backing — a caption in
   the white space below would cost another 20px per row in a drawer that is
   already the tallest thing on screen. */
.ntf-ect-lb{ position:relative; z-index:1; background:#fff; color:#191919; font-size:11.5px;
  line-height:1.35; letter-spacing:.03em; padding:4px 9px; text-align:center; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* The cart page has real width, so the tiles go four across and grow. */
.ntf-ect--page{ grid-template-columns:repeat(4, 1fr); gap:12px; max-width:1000px;
  margin-left:auto; margin-right:auto; }
.ntf-ect--page .ntf-ect-lb{ font-size:12.5px; padding:5px 11px; }

@media (max-width: 767px){
  .ntf-ect--page{ grid-template-columns:1fr 1fr; gap:8px; }
}

/* A recommendation tab that resolved to nothing is hidden outright — the theme's
   button styling sets display, so [hidden] alone would not win. */
.cr-recs [data-cr-tab][hidden]{ display:none !important; }

/* Empty-cart primary action. Matches the product-page button exactly (measured on the Naim PDP):
   #000/#fff, Montserrat 15.4px/500, square corners, 14px 16px padding, no letter-spacing and
   no text-transform — the caps live in the label string. */
.ntf-ect-cta{ display:block; width:100%; margin-top:16px; background:#000; color:#fff;
  font-family:inherit; font-size:15.4px; font-weight:500; line-height:1.2; letter-spacing:0;
  text-transform:none; text-align:center; text-decoration:none; border:1px solid #000;
  padding:14px 16px; cursor:pointer; transition:background .2s ease; }
.ntf-ect-cta:hover{ background:#2a2a2a; border-color:#2a2a2a; color:#fff; }
/* On the cart page the tiles are capped at 1000px, so an edge-to-edge button would dwarf them. */
.ntf-ect--page + .ntf-ect-cta{ max-width:380px; margin-left:auto; margin-right:auto; }

/* A reward listed in the "all unlocked" view that is not actually secured yet. */
.cr-won-item.is-missing .cr-won-media{ opacity:.5; }
.cr-won-item.is-missing .cr-won-val{ color:#b4541f; }

/* The milestone gutter states the threshold, so the old "Tier 1 · Spend € 75" line inside
   the card would say it twice. Hidden everywhere (mobile already hid it). */
.cr-tier .cr-th{ display:none; }

/* No reserved height for a strip that is not there. This used to hold 44px so the CTA below it
   did not walk up and down when you clicked between rewards — but the CTA now lives in its own row
   under the products, so the only thing the reservation still did was push everything below it
   down the screen. The panel may now change height slightly between tiers; that is a fair trade
   for the products sitting a hundred pixels higher. */
.cr-side-thumbs--empty{ display:none; }
.cr-side-ds{ min-height:0; }

/* ---- Desktop dialog height is FIXED, not content-driven ------------------------
   Clicking between rewards changed the dialog height, which made the whole panel jump under the
   cursor. Two independent causes, so fixing only the images would not have settled it:
     1. right column — a tier with a gallery renders a thumbnail strip, one without does not, and
        descriptions run one to three lines;
     2. left column  — `.cr-tier.is-open .cr-card` adds 10px of padding, so whichever tier is open
        is 20px taller than the others.
   Rather than chase every contributor, the dialog is given one height and the columns scroll
   inside it. 620px clears the tallest natural state (measured 605px) so nothing scrolls in the
   normal case, and min() still yields to short viewports. */
@media (min-width:1024px){
  .cr-dialog{ height:min(620px, 88vh); }
  .cr-side{ overflow:auto; }
}

/* ---- Sticky add-to-cart: typography + true horizontal centring ---------------
   Measured on the Ishak PDP: every `.button.button-solid` on the page computes 15.4px/500 with
   line-height 15.4px — EXCEPT the one inside .sticky_add_to_cart, which computed 12px with
   line-height normal. That is the "font does not match the rest of the theme" report, and it
   applies at every width, so mobile and desktop are both corrected here.
   (line-height:normal was mine, from the earlier vertical-centring fix. Matching the theme's
   explicit 15.4px is better: the line box then equals the glyph box and flex centring is exact,
   which is what the main add-to-cart button already does.)

   Horizontal centring: the label and the arrow sit in ONE centred flex row, and the arrow's
   wrapper `.button-icon` is `w-5` (20px) with `opacity-0` — an invisible box that still takes
   space. The GROUP was centred, so the visible text sat ~10px left of centre. Taking the icon out
   of the flow lets the text centre on the button itself. */
div.sticky_add_to_cart .add_to_cart_button,
div.sticky_add_to_cart button[name="add"],
div.sticky_add_to_cart .x-atc-text,
div.sticky_add_to_cart .x-atc-text .button-text{
  font-size:15.4px !important;
  line-height:15.4px !important;
}
div.sticky_add_to_cart .add_to_cart_button .x-atc-text > .flex,
div.sticky_add_to_cart .add_to_cart_button .x-atc-text{ position:relative; }
div.sticky_add_to_cart .add_to_cart_button .button-icon{
  position:absolute; right:0; top:50%; transform:translateY(-50%); margin:0;
}
/* Even with the icon out of the flow the label still measured 10px right of centre: the theme
   nests it three flex boxes deep and the inner box does not start where its parent does, so
   centring the containers does not centre the text. Pinning the label across the full button and
   letting text-align do the work makes its centre equal the button centre by construction, which
   no amount of inherited padding or sibling width can shift. Measured after: offset 0.00px.
   The button is w-full in the sticky bar, so taking the label out of flow cannot collapse it. */
div.sticky_add_to_cart .add_to_cart_button .x-atc-text .button-text{
  position:absolute; left:0; right:0; width:auto !important; text-align:center;
  top:50%; transform:translateY(-50%);
}
/* Pinning the label removes it from flow, so the button had nothing left to give it height and
   collapsed from 35px to its 10+10 padding alone. min-height restores the natural box (padding +
   one 15.4px line = 35.4px) and, being a floor rather than a fixed height, still lets a taller
   mobile button be taller. */
div.sticky_add_to_cart .add_to_cart_button,
div.sticky_add_to_cart button[name="add"]{ min-height:35.4px; }

/* ---- Desktop popup, +15% -----------------------------------------------------
   The box grows; the TYPE DOES NOT. Scaling text as well would enlarge the content in step with
   the container and leave the white space proportionally identical — the opposite of the point.
   Holding type at 15.4px and giving it a bigger box is what actually buys breathing room.
   Appended at the end of the stylesheet on purpose: these override earlier rules of equal
   specificity inside the same 1024px media query, and CSS resolves that by source order.
     dialog   790 -> 908      side column  264 -> 304
     height   620 -> 713      side media   158 -> 182 */
@media (min-width:1024px){
  .cr-dialog{ max-width:908px; grid-template-columns:1fr 304px; height:min(713px, 90vh); }
  .cr-main{ padding:32px 28px 24px; }
  .cr-side{ padding:28px 23px; }
  .cr-side-media{ height:182px; }
  .cr-tier{ padding-bottom:16px; }
  .cr-recs{ margin-top:23px; }
}


/* ---- All-rewards-unlocked: one band -------------------------------------------
   Replaces the three large tiles. Each cell states the THRESHOLD that earned the reward, which
   the old layout never showed — "You earned all 3" said nothing about what reaching all 3 cost.
   No imagery: at this point the customer has already chosen, so a picture sells nothing and only
   adds height. */
.cr-wonband{ display:flex; border:1px solid #cfe3d6; background:#eef4f0; margin:14px 0 0; }
.cr-band-cell{ flex:1; padding:12px 10px; text-align:center; border-right:1px solid #dbe8e0;
  min-width:0; }
.cr-band-cell:last-child{ border-right:0; }
.cr-band-th{ display:block; font-size:12px; font-weight:800; color:#3f7d54; letter-spacing:.02em; }
.cr-band-ok{ font-style:normal; }
.cr-band-nm{ display:block; font-size:12.5px; font-weight:600; color:#191919; margin-top:3px;
  line-height:1.3; }
.cr-band-sm{ display:block; font-size:11px; color:#b4541f; margin-top:2px; }
.cr-band-cell.is-pending{ background:#fff; }
.cr-band-cell.is-pending .cr-band-th{ color:#8d877e; }

/* The dialog is a FIXED height on desktop so the ladder view does not jump between tiers. This
   view is far shorter than that, so it inherited the difference as a band of empty white under
   the button — which is what made the panel look broken. Content decides the height here. */
@media (min-width:1024px){
  .cr-dialog--won{ height:auto !important; }
}


/* ---- Mobile rewards popup: split hero + tier band (design 1) -------------------
   Was a full-bleed hero image with the copy stacked beneath, then three numbered chips. On a phone
   that pushed the upsells and the CTA a long way down, and the chips said "1 / 2 / 3" — which never
   told the customer what any tier actually cost.

   Now: image left, copy right, then one band stating all three thresholds. Same shape as the
   all-unlocked view, so the two screens read as one system.

   Mobile only — the desktop dialog uses the side panel and hides .cr-hero/.cr-chips entirely. */
@media (max-width:1023px){
  /* Grid rather than flex so the thumbnail strip can sit under the image in column 1 while the
     copy spans both rows in column 2. Works whether or not thumbs are rendered: with a single
     gallery image row 2 is simply empty. */
  .cr-hero{
    display:grid !important;
    /* 25 / 75, at request: a fixed 132px was about half the popup width on a 375px phone, so the
       picture and the words that matter had equal weight. Percentages rather than px so it holds
       from a 320px phone to a tablet. */
    grid-template-columns:25% 1fr;
    column-gap:14px; row-gap:8px;
    align-items:start;
    margin:0 !important;              /* drops the old full-bleed negative margins */
  }
  .cr-hero-main{ grid-column:1; grid-row:1; width:100%; height:auto; aspect-ratio:1;
    border:1px solid rgba(0,0,0,.07); }
  .cr-hero-thumbs{ grid-column:1; grid-row:2; }
  .cr-hero-body{ grid-column:2; grid-row:1 / -1; }
  /* Product-card type, matching the collection page (14.4px is the theme's 16px x the editor's
     font-size:90% override — see platform_customizations.custom_css). */
  /* The reward title is a heading, not a card title, so it stays larger than the 11.34px card
     type — but it drops to weight 600 at the theme's own heading colour rather than inventing a
     third scale. */
  .cr-hero-tt{ font-size:15px; font-weight:600; line-height:19px; color:#191919; }
  .cr-hero-th2{ font-size:12px; color:#8d877e; margin-top:3px; }
  .cr-hero-ds{ font-size:12.5px; line-height:1.45; color:#242424; margin-top:7px; }
  .cr-hero-bar{ display:block; height:4px; background:#e8e6e2; margin-top:9px; position:relative;
    overflow:hidden; }
  .cr-hero-st{ font-size:13px; font-weight:600; color:#191919; margin-top:7px; }

  /* The three tiers as one band, matching .cr-wonband in the all-unlocked view. */
  .cr-chips{ display:block !important; margin:14px 0 0; padding:0;
    border:1px solid #e3e3e3; background:#fff; }
  /* The rail is the only heavy element: one continuous bar across all three tiers, so partial
     progress toward the next one is visible rather than just which tiers are done. */
  .cr-chips-rail{ display:block; height:3px; background:#eceae6; position:relative; }
  .cr-chips-rail i{ position:absolute; left:0; top:0; bottom:0; background:#3f7d54;
    transition:width .5s cubic-bezier(.22,.61,.36,1); }
  .cr-chips-cells{ display:flex; }
  .cr-chip{ flex:1; min-width:0; padding:10px 8px; text-align:left; border:0;
    border-right:1px solid #e3e3e3; display:block; background:transparent; position:relative; }
  .cr-chip:last-child{ border-right:0; }
  /* Earned: a 14px tick in the corner, nothing more. */
  .cr-chip-ok{ position:absolute; right:7px; top:8px; width:14px; height:14px; border-radius:50%;
    background:#3f7d54; color:#fff; font-size:9px; font-style:normal; display:flex;
    align-items:center; justify-content:center; line-height:1; }
  /* The SELECTED tier (the one in the hero) gets a faint wash — distinct from earned. */
  .cr-chip.is-on{ background:#faf9f7; }
  /* The old chip styling is still in the cascade and has to be undone explicitly: .cr-chip-d was
     an 18px circle with a border, which painted a green disc across the "€ 75", and .cr-chip-l
     carried white-space:nowrap + ellipsis, which truncated "Free beaded bracelet" to
     "Free beaded bra...". Setting only colour and size left both of those in place. */
  .cr-chip-d{ display:block; width:auto; height:auto; border:0; border-radius:0;
    background:transparent; font-size:11px; font-weight:700; color:#8d877e; line-height:1.3;
    letter-spacing:.02em; }
  /* The ORIGINAL chip rule is .cr-chip.is-done .cr-chip-d{background:#3f7d54;color:#fff} — a green
     pill for an 18px circular badge. That selector is more specific than the plain .cr-chip-d reset
     above, so it kept winning, and because the span is now display:block it painted a full-width
     green bar across the earned cell instead of a small badge. Neutralised explicitly here. */
  .cr-chip.is-done .cr-chip-d{ color:#3f7d54; background:transparent; border:0; border-radius:0;
    width:auto; height:auto; }
  .cr-chip-l{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; white-space:normal; text-overflow:clip; max-width:none;
    font-size:11.5px; font-weight:600; color:#191919; margin-top:2px; line-height:1.25; }
  /* (The old .is-on tint rules were removed: .is-on marks the SELECTED tier, not an earned one,
     so they highlighted whichever tier happened to be showing in the hero.) */
}

/* ---- Desktop ladder: exactly ONE highlight, and no geometry change on click ----
   Two systems were painting at once. `.next` (the tier being worked towards) drew a green box,
   and `.is-open` (the tier the customer clicked) drew its own box — so after any click there were
   two highlighted rows and no way to tell which one the click had done.

   Sizes moved too: `.cr-tier.is-collapsed .cr-media` is 38px against 44px open, and the card
   padding swings 12px/10px between .next and .is-open. Clicking therefore reflowed the whole
   list, which is the jump visible between the two screenshots.

   Now: the selected tier is the only thing that paints, and every row keeps identical geometry
   whatever its state, so selecting only moves the tint. */
@media (min-width:1024px){
  /* .next no longer paints a box — being next is already conveyed by the step marker and by the
     "€ X to go" line inside the row. */
  .cr-tier.next .cr-card,
  .cr-tier.is-open:not(.next) .cr-card{
    background:transparent;
    border-color:transparent;
  }
  /* The border alone. The green wash was a third way of saying what the border and the reward
     panel on the right already say, and it made the ladder read as a form with one field
     selected rather than a list with one row in focus. */
  .cr-tier.is-open .cr-card{
    background:transparent !important;
    border-color:rgba(63,125,84,.45) !important;
  }
  /* …but it still answers the cursor. Pinning the background to transparent took the hover with
     it, so the selected row was the one row in three that felt dead. */
  .cr-tier.is-open .cr-card:hover{ background:rgba(0,0,0,.025) !important; }
  /* Constant geometry: same padding and same media size in every state, so nothing resizes. */
  .cr-tier .cr-card,
  .cr-tier.next .cr-card,
  .cr-tier.is-open .cr-card,
  .cr-tier.is-collapsed .cr-card{ padding:10px !important; }
  .cr-tier .cr-media,
  .cr-tier.is-collapsed .cr-media,
  .cr-tier.is-open .cr-media{ width:44px !important; height:44px !important; }
}


/* ---- Tier badge text: one size, always ----------------------------------------
   The badge is the fallback shown when a tier has no product image, and its font-size switched
   with the row state: 13px normally, 9px while collapsed. The media box is now a constant 44px
   (so rows stop resizing on click), but the TEXT was still swapping — so the selected tier drew
   13px type inside a 44px square and "Shipping" overflowed its own tile.
   9px is the size that fits 44px; it is now used in every state. */
@media (min-width:1024px){
  .cr-tier .cr-media--badge,
  .cr-tier.is-open .cr-media--badge,
  .cr-tier.is-collapsed .cr-media--badge{
    font-size:7.5px !important;
    line-height:1.15 !important;
    padding:2px !important;
    /* A long label still has to fit rather than spill past the tile — but breaking BETWEEN the
       words first: word-break:break-word split "shipping" itself. */
    overflow:hidden;
    word-break:normal;
    overflow-wrap:anywhere;
  }
}

/* ---- EXPERIMENT: shadow on the drawer checkout button -------------------------
   Trial only, at request. Revert with:  git checkout pre-checkout-shadow -- assets/ntf-cart.css
   Kept as its own block at the end of the file so it can be lifted out cleanly.

   Sized against the button rather than borrowed from the footer: a tight, low-opacity shadow that
   lifts the button off the panel without the halo a large blur would give a full-width black bar. */
#CartDrawer button[name="checkout"],
#CartDrawer [name="checkout"]{
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
  transition:box-shadow .2s ease, transform .2s ease;
}
/* No heavier shadow on hover. At 0 9px 22px -6px the spread pulls the blur into a hard slab that
   sits a few pixels under the button and reads as a grey bar behind the label — which is exactly
   what it looked like. The resting shadow above is enough lift; hover already changes the fill. */


/* ---- Tier thumbnail: icon, no tile (design 2) ---------------------------------
   The icon occupies the same 52px slot as a product photo, so rows with and without an image stay
   aligned — that alignment is the one thing design 4 ("no tile at all") gives up.
   No background and no border: the mark carries it, and the row already sits on its own panel.

   To switch to design 4 instead, this block becomes  .cr-thumb.cr-thumb-icon{display:none}  and
   nothing else has to change. */
.cr-thumb.cr-thumb-icon{
  background:none;
  border:0;
  color:#55504a;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cr-thumb.cr-thumb-icon svg{ width:30px; height:30px; display:block; }

/* ---- Cart drawer: product photo +20% ------------------------------------------
   The image column is Tailwind's w-14 / lg:w-24 — 56px on mobile, 96px on desktop. That is the
   theme default, which came back when the drawer-card experiment was reverted (it had been
   running at 96/138). +20% = 67px / 115px.
   Scoped to #CartDrawer so the cart PAGE, which uses the same markup, is untouched. */
#CartDrawer tr.cart-item .w-14{ width:67px !important; }
@media (min-width:1024px){
  #CartDrawer tr.cart-item .w-14{ width:115px !important; }
}

/* The ladder inside the order card. The card supplies the frame, so the row drops its own box —
   otherwise it is a bordered panel inside a bordered panel. Narrower than the drawer (~290px vs
   ~400px), so the compact cells that already exist for mobile are reused here. */
.ntf-osec--rewards{ padding:12px 14px; }
.ntf-osec--rewards .cr-row{ max-width:none; margin:0; padding:0; border:0; background:transparent; }

/* ---- Drawer height: dvh, not vh (iOS) -------------------------------------
   The drawer is `h-full max-h-screen`, i.e. 100vh — Safari's LARGE viewport,
   which is taller than the page you can actually see while the toolbar is up.
   It is pinned to bottom:0 of the LAYOUT viewport, so its last 60-90px sit
   under the toolbar: the trust row is followed by a strip of drawer that
   nothing ever fills. dvh tracks the VISIBLE viewport, so the drawer ends
   where the page ends. Mobile only — desktop keeps the theme's own sizing.

   This lives here rather than in the durable header block on purpose: that
   block silently drops its whole contents past ~47KB, and it is already at
   46.7KB. Assets have no such ceiling. */
@media (max-width: 767px){
  #CartDrawer{ height:100dvh !important; max-height:100dvh !important; }
}

/* ---- Drawer money panel ---------------------------------------------------
   The list goes white so the totals are the only tinted surface in the drawer.

   The panel was grey on grey: .ntf-drawer-items carries
   bg-[rgba(var(--colors-text),0.05)], so a #f6f5f3 block on top of it barely
   separated. Darkening the panel would only make the drawer heavy; taking the
   wash off the list is what makes one grey block read as the summary.

   Here rather than in the durable header block because that block is at 48.6KB
   against a ~50KB ceiling, and none of this needs Liquid. */
#CartDrawer .ntf-drawer-items{ background:rgba(var(--colors-background),1) !important; }

/* Full bleed. Inset 16px AND carrying its own pl-5/pr-5, the panel put Subtotal
   ~36px from the edge while the product names sat at 20px — nothing lined up
   down the drawer. Edge to edge, with the block's own padding doing the work. */
.ntf-moved [data-ntf-kind="totals"]{ background:#f4f3f1; margin:10px 0 0 !important;
  padding-bottom:14px !important; }

/* The savings row is the only row that opens, and the strongest number on the
   screen — it had no affordance until you tapped it. */
.ntf-saved-label{ text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px; text-decoration-color:rgba(0,0,0,.3); }

/* The arrival date joins the money it belongs to, quieter than the amount. */
.ntf-ship-eta{ color:#6f6961; font-weight:400; }

/* The single milestone line that replaced the progress bar and its cart-value
   readout. Plain sentence weight — it is information, not a trophy. */
.ntf-ship-milestone{ margin:12px 0 2px; font-size:13px; line-height:1.5; color:#191919; }

/* ---- Delivery sheet: title, lead sentence, alignment --------------------- */
/* The title is the first thing in the sheet, so it gets full ink. */
.ntf-ship-title{ color:#121110; font-weight:700; }

/* The promise, in plain words, before the table repeats it in columns. */
.ntf-ship-lead{ margin:2px 0 12px; font-size:14px; line-height:1.5; color:#191919; }
.ntf-ship-lead b{ font-weight:600; }

/* Everything in the sheet reads down one left edge. The fine print was centred,
   so it was the only block in the sheet that started somewhere else — and
   centred text sets a ragged left edge against the table above it. */
.ntf-ship-note{ text-align:left !important; }

/* ---- One very light grey, used twice ---------------------------------------
   #f4f3f1 read as a real fill against a white list rather than a tint. Both
   tinted blocks in the drawer — the rewards row at the top and the money panel
   at the bottom — now share #faf9f8, so they read as the same kind of thing.
   Cart page keeps its own treatment (.cr-row--page overrides below). */
#CartDrawer .cr-row{ background:#faf9f8; }
/* The panel sits INSIDE .ntf-drawer-items, which already pays the drawer's 20/36px side padding —
   and then adds its own on top, so every amount in the summary stopped 36px short of the product
   prices above it. Pulling the panel out by exactly that padding and re-adding it inside keeps the
   grey full-bleed AND puts both columns of figures on the same right edge. */
.ntf-moved [data-ntf-kind="totals"]{ background:#faf9f8;
  /* Not width:auto — the block carries lg:float-left, and an auto-width float shrinks to fit
     (the panel collapsed to 242px of a 512px column). The width has to be stated: 100% of the
     parent PLUS the padding the negative margins gave back. */
  float:none !important;
  width:calc(100% + 40px) !important;
  margin-left:-20px !important; margin-right:-20px !important; }
@media (min-width:1024px){
  .ntf-moved [data-ntf-kind="totals"]{ margin-left:-36px !important; margin-right:-36px !important;
    width:calc(100% + 72px) !important; }
}

/* The footer's upward shadow was being painted over: .ntf-drawer-items carries
   z-20 and the footer only z-1, so the list sat in front of the shadow the
   footer casts onto it. It survived while the list had its own grey wash and
   disappeared the moment the list went white. */
/* ⚠️ NOT by raising the footer. The delivery sheet is a sibling at z-20, so a footer at 21
   painted the gift-box row, CHECK OUT and the payment icons straight over the OPEN sheet.
   Lower the list instead: the stack is list(1) < footer(2) < sheet(20), which shows the shadow
   and leaves every overlay on top. */
#CartDrawer .ntf-drawer-items{ z-index:1 !important; }
#CartDrawer .footer-cart-drawer-mobile{ z-index:2; }

/* ---- Delivery sheet: one card per service --------------------------------
   Replaces the three-column table. On a phone "ARRIVES" and "COST" were
   fighting over ~90px; stacked, each service gets a line for what it is, one
   for when it lands, and a bar for how close the cart is to making it free. */
.ntf-sc-list{ display:flex; flex-direction:column; gap:10px; margin:4px 0 12px; }
.ntf-sc{ border:1px solid #e8e2d6; background:#fdfcfa; padding:12px 14px 11px; }
.ntf-sc.is-free{ border-color:#d7e2d3; }
.ntf-sc-top{ display:flex; align-items:center; gap:11px; }
.ntf-sc-icon{ flex:none; width:32px; height:32px; border-radius:50%; background:#efe9dd;
  color:#8a6f3c; display:flex; align-items:center; justify-content:center; }
.ntf-sc-icon svg{ width:17px; height:17px; }
.ntf-sc.is-free .ntf-sc-icon{ background:#e7efe4; color:#3f7d54; }
.ntf-sc-body{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ntf-sc-body b{ font-size:14px; font-weight:600; color:#121110; }
.ntf-sc-when{ font-size:12px; color:#6f6961; }
.ntf-sc-price{ font-size:15px; font-weight:600; color:#121110; white-space:nowrap; }
.ntf-sc-pill{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#2f6b3a;
  background:#e7efe4; padding:4px 8px; border-radius:11px; white-space:nowrap; }

/* The bar is the same shape in both states so the eye can compare cards; only
   the fill colour changes, and a full green bar needs no separate "done" style. */
.ntf-sc-bar{ height:4px; margin:11px 0 6px; background:#e8e2d6; overflow:hidden; }
.ntf-sc-bar i{ display:block; height:100%; background:#8a6f3c; }
.ntf-sc.is-free .ntf-sc-bar i{ background:#2f6b3a; }
.ntf-sc-note{ font-size:11.5px; color:#8a7f6a; }
/* The bar and the threshold line start at the text column, not the card edge: icon 32px + gap 11px. */
.ntf-sc-bar, .ntf-sc-note{ margin-left:43px; }
/* The gap sits on the same line as the threshold, in full ink so it reads as the
   actionable half of the sentence. */
.ntf-sc-note b{ color:var(--sc-name,#121110); font-weight:600; }
.ntf-sc.is-free .ntf-sc-note{ color:#6f6961; }

/* The closing line is about the NEXT thing to earn, so it carries the same gold
   as the unfinished bars; once everything is free it turns green and stops
   asking for anything. */
.ntf-sc-msg{ margin:0 0 4px; padding:10px 12px; background:#f7f0de; color:#6b5726;
  font-size:12.5px; line-height:1.45; }
.ntf-sc-msg b{ font-weight:700; }
.ntf-sc-msg.is-done{ background:#e7efe4; color:#2f6b3a; }

/* The footnote under the dated title: what the estimate is measured from.
   Same asterisk appears on the cart row's date, which is what points here. */
.ntf-ship-fine{ margin:2px 0 12px; font-size:11.5px; line-height:1.45; color:#6f6961; }

/* The Shipping row is a second door to the delivery sheet: the cost is the
   thing people want to interrogate. Free reads green, like every other free
   line in the cart. */
.ntf-ship-row .ntf-ship-val.is-free{ color:#2f7d4f; font-weight:600; }
/* Underlined at rest, not on hover: hover does not exist on a phone, so the only
   affordance was the cursor — which nobody sees. Dotted rather than solid so it
   reads as "there is more here" instead of a link out of the cart. */
.ntf-ship-row .ntf-ship-val{ text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:rgba(0,0,0,.35); text-underline-offset:3px; }
.ntf-ship-row .ntf-ship-val.is-free{ text-decoration-color:rgba(47,125,79,.45); }
.ntf-ship-row:hover .ntf-ship-val{ text-decoration-style:solid; }

/* Smallest, lightest thing on the card: the dispatch deadline is a nudge, not
   the answer the sheet was opened for. (This rule was lost once already — an
   append ran from the wrong working directory and silently went nowhere.) */
.ntf-sc-cut{ font-size:10.5px; color:#a2988a; }

/* ---- Delivery sheet colour skins -----------------------------------------
   Every colour in the cards comes from a variable, so a skin is a block of
   overrides rather than a second copy of the rules. Pick on a device with
   ?ntf-ship-skin=1..4; it sticks per browser, ?ntf-ship-skin=off clears it.

   1 ink     near-black and warm grey only, green reserved for FREE
   2 sand    the theme's beige surfaces, one darker accent  (current default)
   3 green   the brand green as the single accent, tying the cart together
   4 plain   no tints or borders at all, hairlines and text weight only     */
.ntf-sc-list{
  --sc-border:#e8e2d6; --sc-bg:#fdfcfa;
  --sc-icon-bg:#efe9dd; --sc-icon-fg:#8a6f3c;
  --sc-track:#e8e2d6;   --sc-fill:#8a6f3c;
  --sc-free-border:#d7e2d3; --sc-free-icon-bg:#e7efe4; --sc-free-icon-fg:#3f7d54;
  --sc-free-fill:#2f6b3a; --sc-pill-bg:#e7efe4; --sc-pill-fg:#2f6b3a;
  --sc-note:#8a7f6a;    --sc-name:#121110; --sc-when:#6f6961; --sc-cut:#a2988a;
}
.ntf-sc{ border-color:var(--sc-border); background:var(--sc-bg); }
.ntf-sc.is-free{ border-color:var(--sc-free-border); }
.ntf-sc-icon{ background:var(--sc-icon-bg); color:var(--sc-icon-fg); }
.ntf-sc.is-free .ntf-sc-icon{ background:var(--sc-free-icon-bg); color:var(--sc-free-icon-fg); }
.ntf-sc-body b{ color:var(--sc-name); }
.ntf-sc-when{ color:var(--sc-when); }
.ntf-sc-cut{ color:var(--sc-cut); }
.ntf-sc-bar{ background:var(--sc-track); }
.ntf-sc-bar i{ background:var(--sc-fill); }
.ntf-sc.is-free .ntf-sc-bar i{ background:var(--sc-free-fill); }
.ntf-sc-note{ color:var(--sc-note); }
.ntf-sc-pill{ background:var(--sc-pill-bg); color:var(--sc-pill-fg); }
.ntf-sc-msg{ background:var(--sc-msg-bg,#f7f0de); color:var(--sc-msg-fg,#6b5726); }
.ntf-sc-msg.is-done{ background:var(--sc-done-bg,#e7efe4); color:var(--sc-done-fg,#2f6b3a); }

/* 1 — ink. One colour family, the same near-black the product pages use.
   Green appears once, on FREE, so the only coloured thing is the good news. */
[data-ntf-skin="1"] .ntf-sc-list{
  --sc-border:#e6e4e0; --sc-bg:#ffffff;
  --sc-icon-bg:#f2f1ee; --sc-icon-fg:#121110;
  --sc-track:#eceae6;   --sc-fill:#121110;
  --sc-free-border:#d9ded7; --sc-free-icon-bg:#eef2ec; --sc-free-icon-fg:#2f6b3a;
  --sc-free-fill:#2f6b3a; --sc-pill-bg:#eef2ec; --sc-pill-fg:#2f6b3a;
  --sc-note:#7d7871; --sc-when:#57524c; --sc-cut:#a4a09a;
  --sc-msg-bg:#f4f3f1; --sc-msg-fg:#3d3934;
}
/* 3 — green. The rewards ladder above already ticks in green; using it here
   makes the drawer read as one system rather than two colour schemes. */
[data-ntf-skin="3"] .ntf-sc-list{
  --sc-border:#dfe6dc; --sc-bg:#fbfcfa;
  --sc-icon-bg:#e7efe4; --sc-icon-fg:#3f7d54;
  --sc-track:#e2e8df;   --sc-fill:#3f7d54;
  --sc-free-border:#c9d9c6; --sc-free-icon-bg:#dcead8; --sc-free-icon-fg:#2f6b3a;
  --sc-free-fill:#2f6b3a; --sc-pill-bg:#dcead8; --sc-pill-fg:#2f6b3a;
  --sc-note:#6f7a6c; --sc-when:#5b6459; --sc-cut:#9aa397;
  --sc-msg-bg:#eef4ec; --sc-msg-fg:#3f6b48;
}
/* 4 — plain. No fills, no boxes: a hairline between rows, weight and size
   doing the separating. Lightest thing that can still be read as a list. */
[data-ntf-skin="4"] .ntf-sc-list{
  --sc-border:transparent; --sc-bg:transparent;
  --sc-icon-bg:transparent; --sc-icon-fg:#121110;
  --sc-track:#eceae6;   --sc-fill:#121110;
  --sc-free-border:transparent; --sc-free-icon-bg:transparent; --sc-free-icon-fg:#2f6b3a;
  --sc-free-fill:#2f6b3a; --sc-pill-bg:transparent; --sc-pill-fg:#2f6b3a;
  --sc-note:#8a8580; --sc-when:#57524c; --sc-cut:#a8a49e;
  --sc-msg-bg:transparent; --sc-msg-fg:#6b5726; --sc-done-bg:transparent;
  gap:0;
}
[data-ntf-skin="4"] .ntf-sc{ border:0; border-bottom:1px solid #eceae6; padding:13px 0 12px; }
[data-ntf-skin="4"] .ntf-sc:last-child{ border-bottom:0; }
[data-ntf-skin="4"] .ntf-sc-icon{ width:22px; height:22px; }
[data-ntf-skin="4"] .ntf-sc-pill{ padding:0; font-size:12px; letter-spacing:0; }
[data-ntf-skin="4"] .ntf-sc-msg{ padding:8px 0 0; font-weight:500; }

/* ---- Reward tiles on mobile: one small, constant tile --------------------
   The 44px constant-geometry rule existed only above 1024px, so on a phone the
   open tier still drew a 64px tile — and for a reward with no product photo
   that tile is just a green square with the word "Free shipping" in it, which
   is the largest element on screen for the offer that least needs a picture.
   Same 44px in every state and at every width; the badge keeps the 9px type
   that actually fits inside it. */
@media (max-width:1023px){
  .cr-tier .cr-media,
  .cr-tier.next .cr-media,
  .cr-tier.is-open .cr-media,
  .cr-tier.is-collapsed .cr-media{ width:44px !important; height:44px !important; }
  .cr-tier .cr-media--badge,
  .cr-tier.is-open .cr-media--badge,
  .cr-tier.is-collapsed .cr-media--badge{
    font-size:7.5px !important; line-height:1.15 !important; padding:2px !important;
    overflow:hidden; word-break:normal; overflow-wrap:anywhere;
  }
}

/* Subtitle under the recommendation tabs: who this list is for. Quieter than
   the tabs above it, since it explains rather than switches. */
.cr-recs-sub{ margin:6px 0 10px; font-size:13.4px; line-height:1.5; color:#55504a; }
.cr-recs-sub[hidden]{ display:none; }

/* Title and its footnote are one unit: the theme's mb-4 left 16px between them,
   so the explanation read as a separate paragraph rather than as the title's
   own small print. (Appended separately — the earlier chained write never ran
   because an && chain aborted on the step before it.) */
.ntf-ship-headrow{ margin-bottom:4px !important; }

/* Service and arrival on one line: "Priority — Arrives 31 Aug – 1 Sep".
   Both keep exactly the type they had stacked; only the arrangement changes.
   The dash is drawn by CSS so the copy has no punctuation to keep in step, and
   it disappears with the arrival when a zone has no transit times. Wraps to two
   lines on a narrow phone rather than truncating a date. */
.ntf-sc-line{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
/* The dash now separates the name from the cut-off, since that is what shares the line. */
.ntf-sc-line .ntf-sc-cut::before{ content:"— "; color:var(--sc-cut,#a2988a); }


/* The date label sits beside "Order note" in the same row, so it takes the same weight.
   summary__title gives it the family, size and colour; only the weight differed (500 vs 400),
   which read as one of the two being emphasised for no reason. */
/* Compound selector AND !important on purpose: the durable block carries
     .ntf-ship-rowdate{ font:inherit }
   and renders in <body>, after this stylesheet — so at equal specificity theirs wins, and the
   shorthand resets weight to the button's 500. Same cascade trap as .ntf-klarna-inline. */
.ntf-ship-rowdate.summary__title{ font-weight:400 !important; }

/* The panel has its own surface now, so its border-top drew a second line right where the
   product list already ends — the line that looked like it was colliding with the summary. */
.ntf-moved [data-ntf-kind="totals"]{ border-top:0 !important; }

/* The Shipping value lines up with every other amount in the panel. The row is
   a two-column flex, so the value only looks right-aligned while it is short —
   it is the dotted underline that made the difference visible. */
.ntf-ship-row{ justify-content:space-between; }
.ntf-ship-row .ntf-ship-val{ text-align:right; margin-left:auto; }

/* Popup footer: two actions side by side. Back to cart is the quiet one — it is
   the safe exit — and Continue shopping keeps the solid fill, since that is the
   action that actually earns the next reward. Stacks under 340px, where two
   labels this long would each wrap to two lines. */
.cr-footpair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.cr-cta--ghost{ background:transparent; color:#121110; border:1px solid #121110; }
.cr-cta--ghost:hover{ background:rgba(0,0,0,.04); }
/* No stacking fallback: one row at every width, the type shrinks instead. */

/* ---- Reward popup, mobile: spacing and weight pass ----------------------- */
@media (max-width:1023px){
  /* Threshold lives in the title now, in a lighter colour so the reward and the
     price to reach it stay separable in one line. */
  .cr-hero-at{ color:#8d877e; font-weight:400; }
  .cr-hero-th2{ display:none; }

  /* "Free shipping" at 20px did not fit a 25%-wide square and spilled past its
     own tile. The badge is a label, not a headline: it scales with the tile. */
  .cr-hero-main--badge{ font-size:12px !important; font-weight:700 !important;
    line-height:1.2 !important; padding:0 6px !important; word-break:break-word; }

  /* Column gap and rhythm. With the image column down to 25% the copy had the
     room but kept the old 14px gutter and stacked margins, so the block read as
     two things side by side rather than one card. */
  .cr-hero{ column-gap:12px !important; row-gap:6px !important; }
  .cr-hero-body{ display:flex; flex-direction:column; gap:5px; }
  .cr-hero-tt{ margin:0; }
  .cr-hero-ds{ margin:0; }
  .cr-hero-bar{ margin:3px 0 0; }
  .cr-hero-st{ margin:0; }

  /* The tier cells get the same faint green fill as the unlocked cards in the
     drawer, instead of a second progress rail above them. */
  .cr-chips{ margin-top:12px; border:1px solid #e6e2da; }
  .cr-chip{ padding:9px 8px; }
  .cr-chip.is-done{ background:#eef4f0; }
  /* Underline only: the fill repeated what the underline already said. */
  .cr-chip.is-on{ background:transparent; box-shadow:inset 0 -2px 0 #3f7d54; }
  .cr-chip.is-done.is-on{ background:#eef4f0; }   /* earned keeps its own tint */
}

/* Footer pair on one row, always. Two labels at the CTA's normal size wrapped
   to two lines each and doubled the height of the footer; the buttons are an
   exit and a browse, neither of which needs shouting. */
.cr-footpair .cr-cta{ font-size:11.5px; letter-spacing:.02em; padding-left:6px; padding-right:6px;
  white-space:nowrap; }
@media (max-width:339px){ .cr-footpair .cr-cta{ font-size:10.5px; } }

/* ---- Delivery sheet: the country field reads as one line of copy ---------
   The label sat at 11.5px muted while the select rendered at 16px near-black,
   so a label and its own value looked like two unrelated pieces of interface.
   Both take the sheet's body type now; only the colour separates them.

   16px was there to stop Safari zooming on focus — that rule applies to text
   inputs, not to a <select>, which opens the native picker instead. */
.ntf-ship-where label{ font-size:13px !important; color:#6f6961 !important; }
select.ntf-ship-country{ font-size:13px !important; line-height:1.35 !important;
  padding-top:9px !important; padding-bottom:9px !important; padding-left:12px !important; }
.ntf-ship-selwrap::after{ right:12px; }

/* The threshold is its own line under the title, not an inline tail.

   Inline, it wrapped wherever the column ran out — "Free shipping — At" on one
   line and "€ 75+" on the next, which reads as a broken sentence rather than a
   price. As a caption it always breaks in the same place, and it keeps the
   height saving that removing "Tier 1:" bought (one short line, not two). */
.cr-hero-at{ display:block; margin-top:1px; font-size:11.5px; font-weight:400;
  color:#8d877e; line-height:1.3; white-space:nowrap; }

/* ---- Reward popup: cells, alignment, gutter ------------------------------ */
@media (max-width:1023px){
  /* Every cell shows the same track, so an unearned tier reads as "not yet"
     rather than as a bar that failed to draw. Only the fill colour changes:
     grey track, green when earned, and the selected one keeps the darker line
     it needs to show which tier the panel above is describing. */
  .cr-chip{ box-shadow:inset 0 -2px 0 #e6e2da; }
  .cr-chip.is-done{ background:#eef4f0; box-shadow:inset 0 -2px 0 #cfe0d4; }
  /* Underline only: the fill repeated what the underline already said. */
  .cr-chip.is-on{ background:transparent; box-shadow:inset 0 -2px 0 #3f7d54; }
  .cr-chip.is-done.is-on{ background:#eef4f0; box-shadow:inset 0 -2px 0 #3f7d54; }

  /* Gutter: 12px was still reading as a gap between two blocks rather than the
     space inside one. The copy also started a couple of pixels below the image
     because the title's line-box sits lower than its cap height — nudged up so
     the first letter lines up with the top edge of the tile, not the line box. */
  .cr-hero{ column-gap:10px !important; }
  .cr-hero-tt{ margin-top:-2px; }

  /* The tile fills its column exactly: no letterboxing on the right, which is
     where the leftover width was pooling. */
  .cr-hero-main{ width:100% !important; max-width:none; }
}

/* ---- Tier cells: one track each, filled by cart value -------------------- */
@media (max-width:1023px){
  /* Every cell shows the same grey track, so a tier with no progress reads as
     "not yet" instead of as a bar that failed to draw. The fill is that tier's
     own share of the cart value, not a slice of one shared rail. */
  .cr-chip.is-done{ background:#eef4f0; }
  .cr-chip.is-on{ background:transparent; }
  .cr-chip.is-done.is-on{ background:#eef4f0; }
}

/* ---- Reward hero: the copy starts where its column starts ----------------
   .cr-hero-body carried padding-left:24px and padding-top:12px. That padding
   was the "white space to the right of the image" and the reason the title sat
   ~10px below the top of the tile: the copy simply began 24px into its own
   column. Removing it gives the description its line back as well. */
@media (max-width:1023px){
  .cr-hero-body{ padding-left:0 !important; padding-top:0 !important; }
  .cr-hero-tt{ margin-top:0; }
  /* Threshold rides on the title line again, and never breaks mid-phrase. */
  .cr-hero-at{ display:inline; white-space:nowrap; font-size:12px; }
  .cr-hero-ds{ font-size:12.5px; line-height:1.4; }
}

/* ---- Delivery sheet: the country reads as part of the sentence -----------
   It was a full-width bordered field under its own label, so the country sat
   in a box of its own while the words describing it sat above — two pieces of
   interface for one phrase. Now: "Shipping options for [Netherlands ▾]" on one
   line, no field, no rule under it. The caret is the only affordance, which is
   enough on a control the whole line is asking you to change. */
.ntf-ship-where{ display:flex !important; align-items:baseline; flex-wrap:wrap; gap:4px;
  margin:2px 0 12px; }
.ntf-ship-selwrap{ display:inline-block !important; position:relative; margin:0 !important; }
select.ntf-ship-country{ border:0 !important; background:transparent !important;
  width:auto !important; max-width:none;
  padding:0 16px 0 0 !important; font-weight:600 !important; color:#191919 !important;
  cursor:pointer; }
select.ntf-ship-country:focus{ outline:none; text-decoration:underline;
  text-decoration-style:dotted; text-underline-offset:3px; }
.ntf-ship-selwrap::after{ right:2px; margin-top:-4px; width:6px; height:6px;
  border-right-width:1.4px; border-bottom-width:1.4px; }

/* ---- Footer buttons: guaranteed box, guaranteed ink ----------------------
   Defensive, not diagnosed: reported missing on a device I cannot reproduce,
   where the black one was gone and the outlined one remained. Both failure
   modes that produce exactly that are closed here.

   1. An <a> with display:block collapses to zero height if anything upstream
      neutralises its padding — a 0px-tall button IS an invisible button.
      flex + min-height means it always occupies a real 44px tap target.
   2. The solid variant re-asserts its own ink at higher specificity, so a
      later `a { background: … }` from the theme or an app cannot repaint it. */
.cr-footpair .cr-cta{ display:flex; align-items:center; justify-content:center;
  min-height:44px; box-sizing:border-box; }
.cr-footpair a.cr-cta:not(.cr-cta--ghost){ background:#121110 !important; color:#fff !important; }
.cr-footpair .cr-cta--ghost{ background:transparent !important; color:#121110 !important;
  border:1px solid #121110 !important; }
/* Hover, at the same weight as the guard above — otherwise the !important background wins and the
   buttons are the only ones on the store that do not respond to the cursor. Eased like the
   storefront's own buttons rather than jumping. */
.cr-footpair .cr-cta{ transition:background-color .3s, color .3s, box-shadow .3s !important; }
.cr-footpair a.cr-cta:not(.cr-cta--ghost):hover{ background:#2f2d2b !important; }
.cr-footpair .cr-cta--ghost:hover{ background:rgba(0,0,0,.05) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35) !important; }

/* ---- Button size, matching the homepage --------------------------------
   The site's own rule is `.button{min-width:230px;min-height:45px}`, but it is set in a per-SECTION
   Custom CSS box on the homepage, so Shopify scopes it to that section and it never reaches any
   other page — which is why the retailer button came out 119px wide.

   Setting it here rather than on `.button` globally: this stylesheet loads site-wide, and a blanket
   230px minimum would also stretch quantity steppers, drawer controls and every small button the
   theme draws. The rule is applied to the standalone button BLOCKS, which is what the homepage
   version was written for.

   (Tried first as the section's own custom_css — this theme renders no such setting, so nothing
   was emitted.) */
.x-block-button > a.button,
.x-block-button > button.button{
  min-width:230px; min-height:45px;
  display:inline-flex; align-items:center; justify-content:center;
}
@media (max-width:480px){
  /* A 230px minimum inside a 375px screen with padding leaves no room to breathe. */
  .x-block-button > a.button,
  .x-block-button > button.button{ min-width:min(230px, 100%); }
}

/* ---- No scrollbars inside buttons ----------------------------------------------------------
   Nothing inside a button scrolls. The checkout button's label sits in a flex row that measures a
   few pixels wider than its box while the arrow shifts on hover, and a browser drawing classic
   scrollbars (Windows) renders that as a bar across the bottom of the button. Overlay-scrollbar
   browsers show nothing, which is why it looks fine on a Mac and wrong on a PC.
   Clipped, in every state, on the button and on the wrappers it puts the label in. */
.x-block-button .button,
.x-block-button .button *,
[name='checkout'],
[name='checkout'] *,
.gbp-primary,
.gbp-primary *{ overflow:hidden !important; }

/* ---- The gift-box row, at desktop size -----------------------------------------------------
   Tuned for a phone drawer and then inherited by the desktop cart, where there is room to spare:
   the title sat at 14px beside a 24px Total, which made the one free thing in the cart read as a
   footnote. Mobile is untouched — it is already right there. */
@media (min-width:1024px){
  .gbp-cta-img{ width:72px; height:72px; }
  .gbp-cta-imgwrap{ width:72px; }
  .gbp-cta-title{ font-size:16px; }
  .gbp-cta-sub{ font-size:13.5px; margin-top:4px; }
  .gbp-cta{ gap:16px; }
}

/* ---- Upsell cards: five across on desktop --------------------------------------------------
   At the end of the file on purpose. The base .cr-rec (150px, line ~504) is defined AFTER the
   desktop @media block, so an override written up there loses on source order at equal
   specificity — which is exactly what happened: the cards stayed 150px and the fifth was cut in
   half. Four 10px gaps out of the width, the rest split five ways, so they fill whatever width
   the dialog settles at. Anything past the fifth scrolls, as before. */
@media (min-width:1024px){
  .cr-recs-track .cr-rec{ flex:0 0 calc((100% - 40px) / 5); min-width:0; }
  .cr-recs-track .cr-rec-img{ width:100%; height:auto; aspect-ratio:1; }
}

/* ---- Desktop popup: fitting one screen ------------------------------------------------------
   The dialog is capped at the viewport (100vh - 40px), so on a 900px-tall laptop the last 47px of
   content had nowhere to go and the whole popup scrolled. These are the six places where air can
   be given up without anything getting smaller. At the end of the file for the same reason as the
   card sizing above: the base rules are defined later than the desktop media block. */
@media (min-width:1024px){
  .cr-recs-tabs{ margin-bottom:2px; }
  .cr-recs-sub{ margin:4px 0 8px; }
  .cr-recs-track .cr-rec{ padding-bottom:10px; }
  .cr-side{ padding:18px 20px; }
}

/* ---- The gift-box row on a phone -----------------------------------------------------------
   The copy column is what is short here, not the row: 56px of thumbnail and a 14px gutter left
   the sentence about 230px, which is three lines of it. A smaller tile and a tighter gutter give
   the words ~20px back, which is the difference between three lines and two. Desktop keeps the
   larger version — it has the room. */
@media (max-width:1023px){
  .gbp-cta{ gap:11px; }
  .gbp-cta-img{ width:53px; height:53px; }
  .gbp-cta-imgwrap{ width:53px; }
}

/* ---- Desktop popup on a shorter screen -------------------------------------------------------
   The dialog cannot grow past the viewport, so on anything under ~900px tall the content was
   scrolling again. The height comes out of the three things that can give it — the reward image,
   the product images and the rhythm between blocks — in two steps, so a 800px laptop loses a
   little and a 700px one loses more. Under 640px it scrolls: there is no honest way to fit this
   much into that, and shrinking further would just make it unreadable. */
@media (min-width:1024px) and (max-height:900px){
  .cr-side-media{ height:120px !important; margin-top:8px !important; }
  .cr-side-tt{ margin-top:8px !important; }
  .cr-side-ds{ margin-top:6px !important; }
  .cr-side-bar{ margin-top:10px !important; }
  .cr-main{ padding-top:16px !important; }
  .cr-recs{ margin-top:6px !important; }
  .cr-recs-track .cr-rec-img{ aspect-ratio:1.15; }
  .cr-list{ margin-top:8px !important; }
}
@media (min-width:1024px) and (max-height:780px){
  .cr-side-media{ height:96px !important; }
  .cr-recs-track .cr-rec-img{ aspect-ratio:1.4; }
  .cr-rec-t{ -webkit-line-clamp:1; }
  .cr-recs-sub{ display:none; }
  .cr-main{ padding-top:12px !important; }
}

/* ---- Dragging a rail must not drag its links -------------------------------------------------
   A rail is dragged, not its links. The cards are anchors, so a press-and-move handed the gesture
   to the browser's native link drag — URL ghost on screen, pointer stream gone, rail barely
   moving. user-select goes too: without it the same gesture selects the product titles. */
.cr-recs-track, .cr-side-thumbs, .cr-hero-thumbs,
.cr-recs-track *, .cr-side-thumbs *, .cr-hero-thumbs *{
  -webkit-user-drag:none; -khtml-user-drag:none; user-select:none; -webkit-user-select:none; }
.cr-recs-track img, .cr-side-thumbs img, .cr-hero-thumbs img{ pointer-events:none; }

/* ---- The delivery sheet at the store's own type scale ---------------------------------------
   Built at 11-12px, which is a caption size: the theme's body copy is 13.4px and its buttons
   13.86px, so the sheet read as a different component from the page around it. Raised on wider
   screens only — the phone sheet is tight for room and was tuned at its size. */
/* !important because the 11px originals live in a <style> inside the header section, which the
   theme emits AFTER this stylesheet — a plain rule here loses on source order every time. */
@media (min-width:768px){
  .ntf-ship .ntf-sc-line b{ font-size:15px !important; }
  .ntf-ship .ntf-sc-cut{ font-size:12.5px !important; }
  .ntf-ship .ntf-sc-when{ font-size:13.4px !important; }
  .ntf-ship .ntf-sc-price{ font-size:15px !important; }
  .ntf-ship .ntf-sc-note{ font-size:12.5px !important; }
  .ntf-ship .ntf-ship-fine, .ntf-ship-fine{ font-size:12.5px !important; }
  .ntf-ship .ntf-ship-note, .ntf-ship-note{ font-size:12.5px !important; }
  .ntf-ship .ntf-ship-duty, .ntf-ship-duty{ font-size:13.4px !important; }
  .ntf-ship .ntf-ship-where, .ntf-ship-where{ font-size:13.4px !important; }
  .ntf-ship .ntf-ship-where select, .ntf-ship-where select{ font-size:13.4px !important; }
  .ntf-pdel-where, .ntf-pdel-sel select{ font-size:13.4px; }
}

/* ---- Drawer popups: the same edge as the sticky footer --------------------------------------
   Every in-drawer popup (delivery, note, discount, shipping, insurance) dims what is behind it
   with a 20% black scrim. Against the white panel that made a hard, dark step, while the sticky
   footer beneath is separated by a soft shadow — one drawer, two ways of drawing the same
   boundary, and the popup's looked heavier. 10% dim plus the footer's own shadow on the panel
   that follows the scrim. */
#CartDrawer .bg-black.bg-opacity-20{ background-color:rgba(0,0,0,.10) !important; }
#CartDrawer .bg-black.bg-opacity-20 + div{ box-shadow:0 -9px 26px -12px rgba(0,0,0,.106); }

/* ---- Cart page rows, matched to the drawer ---------------------------------------------------
   The cart page and the drawer are the same list of the same cart, and they were two designs:
   128px images and a 400-weight title on the page, 67/115px and 600 in the drawer. These are the
   drawer's numbers, measured off it — phone 67px/13.86px, desktop 115px/15.4px.

   The remove × now sits on the image (see main-cart-items.liquid), styled here as the drawer
   styles its own: a small disc in the top-left corner of the picture. */
.x-section-main-cart-item .cart-item-image-wrap,
#main-cart-items td:first-child > div{ width:67px !important; }
#main-cart-items td:first-child{ width:67px; }
/* 400, not 600 (Kai, 24 Sept: "remove bold text from product title", cart drawer and page). The
   600 above was copied from the drawer when the page was matched to it; both go to normal now, so
   the name reads as the label for the row rather than competing with the price beside it. */
#main-cart-items .cart-item-title, #main-cart-items a[href*='/products/']{ font-size:13.86px; font-weight:400; }
@media (min-width:768px){
  #main-cart-items td:first-child > div{ width:115px !important; }
  #main-cart-items td:first-child{ width:115px; }
  #main-cart-items .cart-item-title, #main-cart-items a[href*='/products/']{ font-size:15.4px; }
}
/* The × on the picture, as in the drawer. position:absolute against the image cell's own wrapper,
   which is already position:relative for the aspect-ratio box. */
#main-cart-items td:first-child > div{ position:relative; }
.ntf-remove--onimg{ position:absolute; z-index:2; top:6px; left:6px; margin:0; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08); color:#55504a;
  font-size:14px; line-height:1; padding:0; cursor:pointer; }
.ntf-remove--onimg:hover{ background:#fff; color:#121110; }

/* ---- Cart page: the disclosures sit above the button ----------------------------------------
   Same order as the drawer: totals, then Order note / Delivery, then CHECK OUT, then the trust
   row. The theme renders the button inside a section-blocks loop, so the markup cannot be moved
   between them — but they are already siblings here, and flex order costs nothing.
   Within one order group the DOM order still applies, which is what keeps each open panel
   directly under the row that opens it. */
.ntf-osec--main{ display:flex; flex-direction:column; }
.ntf-osec--main > *{ order:3; }
.ntf-osec--main > :first-child{ order:1; }
.ntf-osec--main > .ntf-frow, .ntf-osec--main > .ntf-fpanel{ order:2; }

/* ---- Cart page: one price per fact, and the drawer's discount chip --------------------------
   Every price was on screen twice. Which copy survives depends on what the layout promises:
   desktop has Price and Total columns, so the under-title copy is redundant; a phone has no
   columns, so the quantity line is the one that reads and the top-right copy is redundant. */
@media (min-width:768px){
  /* the title cell's own unit price — the Price column already carries it */
  #main-cart-items td:nth-child(2) .price{ display:none; }
}
@media (max-width:767px){
  /* the phone-only Total cell — the quantity line beneath already carries the same figure */
  #main-cart-items td.md\:hidden.text-right{ visibility:hidden; }
}

/* The drawer's discount chip, not the theme's grey block: same information, at the weight of a
   label rather than of a panel. */
#main-cart-items ul.x-discount-list,
#main-cart-items li.x-discount{ background:transparent !important; }
#main-cart-items li.x-discount{ display:inline-flex; align-items:center; gap:6px; padding:2px 0;
  font-size:11.5px; color:#55504a; }
#main-cart-items li.x-discount .discount-title{ font-size:11.5px; line-height:1.3; }
#main-cart-items ul:has(> li.x-discount){ background:transparent !important; padding:0 !important;
  margin-top:6px !important; }

/* ---- The gift-box row sits at the foot of the card, on white -------------------------------
   It was between the ladder and the totals, on the card's grey, which read as another rung of the
   ladder and pushed the numbers down. Last, on white, it is an offer at the end rather than an
   interruption in the middle. Ordered, not moved: three sections, one container. */
.ntf-order-card{ display:flex; flex-direction:column; }
.ntf-order-card > .ntf-osec--rewards{ order:1; }
.ntf-order-card > .ntf-osec--main{ order:2; }
.ntf-order-card > .ntf-osec:not(.ntf-osec--rewards):not(.ntf-osec--main){
  order:3; background:#fff; border-top:1px solid rgba(0,0,0,.06); }

/* ---- Cart page: the drawer's row, not a table ------------------------------------------------
   Image | title + options + quantity badge | one price. The header row goes with the columns it
   labelled, and the desktop Price column goes because the Total column beside it already answers
   the same question for the line. The markup stays a table: it is the theme's, it carries the
   Alpine handlers, and nothing here needs it to be anything else. */
#main-cart-items thead{ display:none; }
@media (min-width:768px){
  /* the Price column — Total already carries the line's cost */
  #main-cart-items tbody td:nth-child(3){ display:none; }
  /* the Quantity column: as wide as the badge in it, and nothing when there is no badge */
  /* The image cell absorbed the width the Price column left behind — 342px of cell around a 115px
     picture. Shrunk to its contents so the title gets the slack instead. */
  #main-cart-items tbody td:nth-child(1){ width:1%; }
  #main-cart-items tbody td:nth-child(5){ width:1%; white-space:nowrap; padding-left:0; }
  #main-cart-items tbody td:nth-child(6){ width:1%; white-space:nowrap; }
}

/* ---- Cart page: the struck price stays beside the new one -----------------------------------
   Same reading order as the drawer — what it was, then what it costs now, on one line. */
#main-cart-items tbody td:nth-child(6) .price{ flex-wrap:nowrap !important; white-space:nowrap;
  align-items:baseline; gap:6px; justify-content:flex-end; }
#main-cart-items tbody td:nth-child(6) .price s{ margin-right:0; }

/* ---- The cart page's delivery panel is a drawer, not a dropdown ------------------------------
   Inline, it opened inside a 366px summary column and squeezed the sheet's cards to ~250px, where
   "Order before 23:59 / Arrives Sep 7 – Sep 8" broke over four lines. The sheet was built for a
   panel. Same shape as the product page: bottom sheet on a phone, right drawer on desktop.
   Content unchanged — live rates, country picker, spend-more line, all of it. */
.ntf-fpanel--deliv, .ntf-fpanel--note{ margin-top:0; }
.ntf-fpanel--deliv.is-drawer, .ntf-fpanel--note.is-drawer{
  position:fixed; left:0; right:0; bottom:0; margin:0 auto; width:100%; max-width:560px;
  max-height:85vh; overflow-y:auto; overscroll-behavior:contain; background:#fff;
  /* The cart drawer's own panel, value for value (Kai, 25 Sept: "ensure the one currently on the
     cart drawer is enforced across product page and cart page"): square, its soft top shadow,
     20px in from the sides and 16px under the button. */
  border-radius:0; box-shadow:0 -9px 26px -12px rgba(0,0,0,.106);
  padding:20px 20px calc(16px + env(safe-area-inset-bottom)); z-index:99999;
  /* Arrives, rather than appears: off-screen until .is-open lands two frames later (see the
     toggle in ntf-cart.js), then the cart drawer's own 300ms ease. */
  transform:translateY(100%); transition:transform .3s ease-in-out; }
.ntf-fpanel--deliv.is-drawer.is-open, .ntf-fpanel--note.is-drawer.is-open{ transform:none; }
/* The scrim is a real element (see ntf-cart.js), not a pseudo-element. At z-index:-1 a ::before
   sits behind its parent's background but stays inside the nearest stacking context, so anything
   the page had already promoted — the remove × is at z-index 2 on the image — painted straight
   over the dim. */
/* 10%: the drawer's dim behind its own panels, measured. */
.ntf-deliv-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.1); z-index:99998;
  opacity:0; transition:opacity .3s ease-in-out; }
.ntf-deliv-scrim.is-open{ opacity:1; }
@media (min-width:768px){
  .ntf-fpanel--deliv.is-drawer, .ntf-fpanel--note.is-drawer{
    top:0; left:auto; right:0; bottom:0; margin:0; width:520px; max-width:100vw; max-height:none;
    border-radius:0; box-shadow:-4px 0 24px rgba(0,0,0,.12); padding:20px 20px 16px;
    transform:translateX(100%); }
  .ntf-deliv-scrim{ background:rgba(0,0,0,.5); }
}
/* The drawer's panel goes to 28px at the sides from 1024px (lg:pl-7 lg:pr-7); so does this. */
@media (min-width:1024px){
  .ntf-fpanel--deliv.is-drawer, .ntf-fpanel--note.is-drawer{ padding:20px 28px 16px; }
}
/* On a desktop the panel is the full height of the screen, and a short one (the order note is a
   title, a field and a button) sat pinned to the top edge with the rest of the screen empty below
   it (Kai, 25 Sept, Fix 2). Its content starts lower instead - the same on the product page's
   delivery drawer and on the Klarna drawer. First 15vh + the usual 20px; then raised by 40% of that
   white space (Kai: "if the entire white part is 100%, raise it up by 40%"), so 60% of it; then
   "another 20%" up, so 80% of that; then "40% higher than it is now", so 60% of that: 28.8% of
   the first value, 40px on an 800px-tall screen. Written as that fraction, so the relation to the
   first value stays readable. */
@media (min-width:768px){
  .ntf-fpanel--deliv.is-drawer, .ntf-fpanel--note.is-drawer{ padding-top:calc((15vh + 20px) * .288); }
}
/* The note sheet has the drawer note panel's deeper foot (pb-7) under its Save. */
.ntf-fpanel--note.is-drawer{ padding-bottom:calc(28px + env(safe-area-inset-bottom)); }

/* ---- The cart page's Klarna popup is the same drawer --------------------------------------
   Geometry, dim, motion and header copied from the Delivery drawer above, value for value, so
   the two are one component. The modal element itself is the dim; the dialog is the panel. */
#ntf-klarna-modal.is-drawer, #ntf-klarna-modal-cart.is-drawer{ position:fixed; inset:0; z-index:99998; background:rgba(0,0,0,.2);
  padding:0; display:block; opacity:0; transition:opacity .3s ease-in-out; }
#ntf-klarna-modal.is-drawer.is-open, #ntf-klarna-modal-cart.is-drawer.is-open{ opacity:1; }
#ntf-klarna-modal.is-drawer .ntf-klarna-dialog, #ntf-klarna-modal-cart.is-drawer .ntf-klarna-dialog{ position:fixed; left:0; right:0; bottom:0; margin:0 auto;
  width:100%; max-width:560px; max-height:85vh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  /* Square on a phone too (Kai, 28 Sept: "the klarna popup from the product page still has the
     round edges"). This was copied from the Delivery drawer while that was still rounded; the
     Delivery drawer went square on 25 Sept and this copy did not follow. Now its values again: the
     cart drawer's own panel - square, its soft top shadow, 20px sides, 16px under the button. */
  background:#fff; border-radius:0; box-shadow:0 -9px 26px -12px rgba(0,0,0,.106);
  padding:20px 20px calc(16px + env(safe-area-inset-bottom)); z-index:99999;
  transform:translateY(100%); transition:transform .3s ease-in-out; }
/* Kai (18 Sept): a horizontal scrollbar under the Klarna title. Cause: the close × sits at
   top:-8px;right:-8px on purpose (a bigger tap target than its visible circle, see
   snippets/klarna-installments-global.liquid) — 8px past the dialog's own right edge. Setting only
   overflow-y here left overflow-x computed as "auto" too (CSS: an explicit non-visible overflow-y
   with no matching overflow-x still forces auto on both), so the browser drew a scrollbar for
   those 8px instead of just letting the corner overlap as intended. overflow-x:hidden above clips
   it back to "sits at the corner", the look every other close button on this site already has. */
#ntf-klarna-modal.is-drawer.is-open .ntf-klarna-dialog, #ntf-klarna-modal-cart.is-drawer.is-open .ntf-klarna-dialog{ transform:none; }
#ntf-klarna-modal.is-drawer .ntf-klarna-headrow, #ntf-klarna-modal-cart.is-drawer .ntf-klarna-headrow{ position:relative; }
/* (the close-button clearance moved to .ntf-klarna-head on 24 Sept; the title rule that used to
   sit here doubled it to 80px on the cart page - review, 25 Sept) */
#ntf-klarna-modal.is-drawer .ntf-klarna-close, #ntf-klarna-modal-cart.is-drawer .ntf-klarna-close{ position:absolute; top:0; right:0; font-size:0; z-index:2; color:#121110;
  border:0; background:transparent; }
/* Square, like every other card in the drawer. The brief asked for rounded corners here; Kai
   overruled it on 24 Sept, so the 23 Sept rule stands. */
#ntf-klarna-modal.is-drawer .ntf-klarna-card, #ntf-klarna-modal-cart.is-drawer .ntf-klarna-card{ border-radius:0; border-color:#ececec; }
@media (min-width:768px){
  #ntf-klarna-modal.is-drawer, #ntf-klarna-modal-cart.is-drawer{ background:rgba(0,0,0,.5); }
  #ntf-klarna-modal.is-drawer .ntf-klarna-dialog, #ntf-klarna-modal-cart.is-drawer .ntf-klarna-dialog{ top:0; left:auto; right:0; bottom:0; margin:0; width:520px;
    max-width:100vw; max-height:none; border-radius:0; box-shadow:-4px 0 24px rgba(0,0,0,.12);
    padding:calc((15vh + 24px) * .288) 24px 24px; transform:translateX(100%); }
}

/* ---- The rewards heading on the product page ------------------------------------------------
   Same eyebrow the rewards popup uses over the same ladder: small, tracked, quiet, so it labels
   the offers without competing with the sentence underneath that says what to do next. */
.ntf-osec--product .ntf-osec-h{ margin:0 0 8px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:#8d877e; }

/* ---- View all rewards -----------------------------------------------------------------------
   Sits inside the tier panel, under the distance it refers to, so it reads as part of that tier
   rather than as a second call to action competing with the popup's own. */
/* A text link, not a button: it is a look, not an action, and as a full-width outline button it
   sat between the reward and the tier chips with the weight of a call to action. Left-aligned
   under the distance line, underlined, with the chevron the drawer's other "see more" links use. */
.cr-cta.cr-cta--ghost.cr-viewall, .cr-viewall{ display:inline-block; width:auto; margin:8px 0 0; padding:0; border:0;
  background:none; font-size:12.5px; font-weight:500; letter-spacing:normal; text-transform:none;
  color:#121110; text-decoration:underline; text-underline-offset:2px; line-height:1.4; text-align:left; }
.cr-viewall:hover{ color:#6b5a2a; background:none; }

/* The gift chip is a control of its own inside the row: it opens the rewards, not the ladder. */
.cr-rchip[data-cr-giftchip]{ cursor:pointer; }
.cr-rchip[data-cr-giftchip]:hover{ border-color:#121110; color:#121110; }

/* ---- The claim band stays at the top of the drawer while the list scrolls -------------------
   Only in the claim state: a reward has been earned and not yet chosen, which is the one moment
   the row is an action rather than a meter. The row itself is what sticks (the band inside it has
   no room to move within a one-line parent); #CartDrawer-CartItems is tall, so the row can hold
   position against the whole product list. The in-progress row keeps scrolling with the items. */
.ntf-drawer-items .cr-row.is-claim{ position:sticky; top:0; z-index:6; }

/* The product list never scrolls sideways. Nothing in it is meant to; a stray pixel of overflow
   (a full-bleed band measured against the wrong box) should be clipped, not given a scrollbar. */
.ntf-drawer-items{ overflow-x:hidden; }

/* ---- Product page: the tiers as an accordion (Design E) --------------------------------------
   Only where the row is rendered with accordion: true. The drawer's thumbnail/headline/chips line
   stays in the markup for the painter, hidden. Values are the product page's own: 13.86/20.79 body,
   #242424 text, #8d877e muted, #3f7d54 green, #e3e6e6 tint, 1px rgba(0,0,0,.09) rules. */
.cr-row--acc{ padding:0; margin:0; background:transparent; cursor:default; }
.cr-row--acc .cr-line{ display:none; }
.cr-row--acc .cr-band{ margin:0 0 10px; }
.cr-acc-t{ border-bottom:1px solid rgba(0,0,0,.09); cursor:pointer; }
.cr-acc-t:first-child{ border-top:1px solid rgba(0,0,0,.09); }
.cr-acc-head{ display:flex; align-items:center; gap:12px; padding:11px 0; }
.cr-acc-t.is-next .cr-acc-head{ padding:14px 0 0; }
.cr-acc-ok{ width:16px; flex:none; text-align:center; color:#3f7d54; font-size:14px; line-height:1; font-style:normal; font-weight:600; }
.cr-acc-dot{ width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid #121110; box-sizing:border-box; }
.cr-acc-t:not(.is-done):not(.is-next) .cr-acc-dot{ border-color:#c9c4bc; }
.cr-acc-lb{ flex:1; min-width:0; font-size:13.86px; line-height:20.79px; color:#242424; }
/* Unlocked: muted, with the tick — no strike-through; a reward you have earned is not a task you crossed off. */
.cr-acc-t.is-done .cr-acc-lb{ color:#8d877e; }
.cr-acc-t.is-next .cr-acc-lb{ color:#121110; font-weight:500; }
.cr-acc-st{ flex:none; font-size:11px; font-weight:600; color:#8d877e; white-space:nowrap; }
.cr-acc-t.is-done .cr-acc-st{ color:#3f7d54; }
.cr-acc-t.is-next .cr-acc-st{ color:#121110; }
.cr-acc-bar{ height:3px; background:#e3e6e6; margin:10px 0 0 28px; position:relative; overflow:hidden; }
.cr-acc-bar i{ position:absolute; left:0; top:0; bottom:0; background:#3f7d54; transition:width .8s cubic-bezier(.22,.61,.36,1); }
.cr-acc-pics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:12px 0 0 28px; }
.cr-acc-pic{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cr-acc-pic img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#e3e6e6; }
.cr-acc-pic span{ font-size:10px; line-height:1.3; color:#242424; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-acc-note{ margin:12px 0 10px 28px; font-size:11px; line-height:1.4; color:#8d877e; }
.cr-acc-note u{ color:#121110; text-decoration:underline; text-underline-offset:2px; }
.cr-acc-note--won{ margin-left:0; padding:11px 0; border-bottom:1px solid rgba(0,0,0,.09); }
/* While the claim band is on screen it IS the call to action; a second "choose your reward" line
   under the list would be the same ask twice. */
.cr-row--acc.is-claim .cr-acc-note--won{ display:none; }
.cr-acc-t:hover .cr-acc-lb{ color:#121110; }
.cr-acc-t:focus-visible{ outline:2px solid #3f7d54; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .cr-acc-bar i{ transition:none; } }

/* ---- The tiers popup, opened from the product page ------------------------------------------
   A reference, not a shopping surface: no product rails (they lead to other products) and a single
   Go back (the cart and the catalogue are exactly where we do not want to send them from here). */
.cr-dialog--product .cr-recs{ display:none !important; }
.cr-footpair--one{ grid-template-columns:1fr; }
.cr-footpair--one .cr-cta{ width:100%; }

/* The gift box's struck value on its row: quiet, so FREE next to it stays the word that lands. */
.gbp-cta-title .gbp-cta-was{ color:#9a948c; text-decoration:line-through; font-weight:400; font-size:.9em; margin-left:4px; }

/* ---- The reward photo is never cropped -----------------------------------------------------
   The tier images are product shots of any ratio (the reward-of-your-choice artwork is square,
   1254x1254); a fixed-height frame cut the bracelet off the bottom on a phone and the box off the
   side on desktop. Photo media is now a real <img> that sets the frame's height from its own
   ratio, so the whole picture always shows. Badge tiles (Free shipping, 10% off) keep their short
   frame. MUST stay at the end of the sheet: the frames above are set with !important at two widths. */
.cr-hero-main:not([class*="--badge"]), .cr-side-media:not([class*="--badge"]){
  height:auto !important; aspect-ratio:auto !important; background-image:none !important; }
.cr-media-img{ display:block; width:100%; height:auto; }
/* Desktop side panel: EVERY tier is 1:1 — the photo and the Free shipping / 10% off badges alike
   (263x263). Mobile already draws all three at 77x77, so the two widths now agree, and the square
   reward artwork shows whole at both. Replaces the 120px badge-frame experiment. */
@media (min-width:768px){
  .cr-side-media{ height:auto !important; aspect-ratio:1 !important; }
  .cr-side-media:not([class*="--badge"]){ overflow:hidden; }
  .cr-side-media:not([class*="--badge"]) .cr-media-img{ height:100%; object-fit:cover; object-position:50% 50%; }
}
}

/* ---- The popup footer paints whole on iOS -----------------------------------------------------
   .cr-foot is position:sticky at the bottom of a scrolling dialog with negative side margins. iOS
   Safari is known to paint such a footer partially - the second button (Shop all) showed a sliver
   and only completed on scroll - until the element has its own compositing layer. translateZ
   gives it one; min-width:0 lets both grid columns shrink instead of the second one overflowing. */
.cr-foot{ transform:translateZ(0); will-change:transform; }
.cr-footpair > .cr-cta{ min-width:0; }

/* ---- The rewards popup fits the SMALL viewport on a phone --------------------------------------
   .cr-dialog is capped at calc(100vh - 40px). On iOS Safari 100vh is the LARGE viewport - the
   height with the toolbar collapsed - so with the toolbar showing the bottom ~80px of the dialog
   sit under it: the sticky footer (Back to cart / Shop all) peeked out as a sliver and only
   appeared when a scroll collapsed the toolbar. svh is the small viewport, not the large one, so
   the footer is always above the bar. Phone only; desktop keeps its fixed heights. */
@media (max-width:767px){
  @supports (height:1svh){
    .cr-dialog{ max-height:calc(100svh - 40px) !important; }
  }
  .cr-foot{ padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important; }
}

/* ---- Cart page on a phone IS the drawer -------------------------------------------------------
   Measured off the drawer at 390px and applied here value for value: 16px row padding, 1px
   #ededed rule, 67px picture with an 18px × in a 42% white disc at (3,3), title 16px after the
   picture at 13.86/600/18.711, the badge and the UNIT price top-right, the totals on #faf9f8
   without a currency suffix. The theme's table markup stays (the Alpine handlers live on it); the
   row is simply laid out as the drawer's three columns. MUST stay at the end of the sheet. */
@media (max-width:767px){
  #main-cart-items tbody tr.cart-item{ display:grid !important; grid-template-columns:67px minmax(0,1fr) auto;
    column-gap:16px; row-gap:0; align-items:start; padding:16px 0 !important; margin:0 !important;
    border-top:0 !important; border-bottom:1px solid #ededed !important; }
  #main-cart-items tbody tr.cart-item > td{ display:block !important; padding:0 !important; margin:0 !important;
    width:auto !important; float:none !important; }
  #main-cart-items tbody tr.cart-item > td:nth-child(1){ grid-column:1; grid-row:1 / span 3; }
  #main-cart-items tbody tr.cart-item > td:nth-child(1) > div{ width:67px !important; float:none !important; }
  #main-cart-items tbody tr.cart-item > td:nth-child(2){ grid-column:2; grid-row:1; min-width:0; }
  #main-cart-items tbody tr.cart-item > td:nth-child(2) a[href*='/products/']{ display:block; margin:0 !important;
    font-size:13.86px; font-weight:600; line-height:18.711px; color:#191919; }
  /* the unit price beneath the title: the right column carries it now */
  #main-cart-items tbody tr.cart-item > td:nth-child(2) .price{ display:none !important; }
  /* the phone-only line-total cell and the stepper cell: neither exists in the drawer (the ×
     steps the quantity down, as it does there) */
  #main-cart-items tbody tr.cart-item > td.md\:hidden.text-right{ display:none !important; }
  #main-cart-items tbody tr.cart-item > td:nth-child(5){ display:none !important; }
  /* the desktop Price column: the td rule above forces every cell to block, which undid the theme's
     md-only class on this one and printed the unit price a second time under the title */
  #main-cart-items tbody tr.cart-item > td:nth-child(3){ display:none !important; }
  /* badge + unit price, top-right */
  #main-cart-items tbody tr.cart-item > td:nth-child(6){ grid-column:3; grid-row:1; }
  #main-cart-items tbody tr.cart-item > td:nth-child(6) > .flex{ display:flex; align-items:center; justify-content:flex-end;
    gap:0; white-space:nowrap; }
  #main-cart-items tbody tr.cart-item > td:nth-child(6) .ntf-unit{ font-size:12.474px; line-height:17.15px; color:#423f3f; }
  #main-cart-items tbody tr.cart-item > td:nth-child(6) .ntf-unit .price-sale{ color:#a90000; }
  #main-cart-items tbody tr.cart-item > td:nth-child(6) .ntf-unit s{ margin-right:4px; }
  /* the × on the picture, the drawer's size and disc */
  #main-cart-items .ntf-remove--onimg{ top:2px; left:2px; width:18px; height:18px; font-size:12.5px;
    background:rgba(255,255,255,.42); border:0; color:#121110; }
  /* totals: the drawer's panel */
  .ntf-order-card .ntf-osec--main{ background:#faf9f8; }
  #js-contents{ color:#242424; }
  #js-contents .ntf-total, #js-contents [class*='total'] p:not(.ntf-saved){ color:#191919; }
}
@media (max-width:767px){
  /* the moved rewards row: the drawer's spacing above the first product */
  #main-cart-items .ntf-osec--rewards-top{ padding:0 0 4px; margin:0; border:0; }
  #main-cart-items .ntf-osec--rewards-top .cr-row--page{ max-width:none; margin:0; }
}

/* ---- Cart page on a phone: phone parity, second pass --------------------------------------------
   Seen side by side after the first pass: the line total still printed beside the unit price (a
   rule above forces .price to flex), a personaliser app prints the unit price under the title too,
   the rewards row kept its page chrome (chevron, border, tint) and the totals sat in a card with a
   60px gap and 36px rows where the drawer has none and 28px. All measured off the drawer. */
@media (max-width:767px){
  #main-cart-items tbody tr.cart-item > td:nth-child(6) .price{ display:none !important; }
  #main-cart-items tbody tr.cart-item > td:nth-child(2) [class*="pplr"],
  #main-cart-items tbody tr.cart-item > td:nth-child(2) .price{ display:none !important; }
  /* the rewards row: the drawer's row, not the page's card */
  #main-cart-items .ntf-osec--rewards-top .cr-row{ background:#f6f5f3 !important; border:0 !important; padding:12px !important; max-width:none; margin:0 0 6px; }
  /* While it is the "choose your gift" banner, the row is the drawer's claim strip: no tint and no
     padding around it (Kai, 28 Sept: cart page and drawer identical). The rule above outranked the
     drawer's .cr-row.is-claim, so the strip sat in a grey box. */
  #main-cart-items .ntf-osec--rewards-top .cr-row.is-claim{ background:transparent !important; padding:0 !important; }
  #main-cart-items .ntf-osec--rewards-top .cr-chev{ display:none; }
  /* the totals: no card gap, the drawer's 28px rows */
  #main-cart-items .ntf-order-card{ margin-top:12px !important; }
  #js-contents > div, #js-contents > .flex{ margin-bottom:8px !important; padding-bottom:0 !important; }
  /* the You saved row carried pt-3: 12px where every other row has 2px, which is the 42px gap */
  #js-contents > .pt-3{ padding-top:2px !important; }
}

/* ---- Cart page, phone: the cart page's pinned footer -------------------------------------------
   The drawer's footer, moved to the viewport (see dockCartFooter in ntf-cart.js). Same shadow the
   drawer's pinned footer carries — rgba(0,0,0,.106) 0 -9px 26px -12px, measured off it — and the
   drawer's 20px side padding. svh, not vh: on iOS Safari 100vh is the toolbar-collapsed height, so
   a dock capped in vh hides its own last row behind the toolbar. */
@media (max-width:767px){
  .ntf-cart-dock{ position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff;
    box-shadow:0 -9px 26px -12px rgba(0,0,0,.106); max-height:72vh; overflow-y:auto;
    overscroll-behavior:contain; padding:0 20px calc(6px + env(safe-area-inset-bottom)); }
  @supports (height:1svh){ .ntf-cart-dock{ max-height:72svh; } }
  /* The blocks arrive carrying the order card's chrome; inside the dock they are rows of one panel. */
  .ntf-cart-dock > .ntf-osec{ padding:10px 0; border-bottom:0; background:transparent; }
  .ntf-cart-dock > *{ margin-left:0; margin-right:0; }
  .ntf-cart-dock #checkout-submit{ margin-top:0 !important; }
  /* The trust strip sits under the button, as in the drawer, and never scrolls sideways. */
  .ntf-cart-dock .ntf-trust{ overflow-x:hidden; }
}

/* ---- Cart page: the note/delivery row is the drawer's ------------------------------------------
   Measured off the drawer at 390px: 44px row, 12px/8px inside each half, label 13.86px/500 in the
   body colour, 16px icon, 8px between them, a 1px #e3e3e3 rule above and one between the halves. */
.ntf-frow{ border-top:1px solid #e3e3e3; }
/* The <details> carried 11px of its own padding and the <summary> now carries the drawer's 12px:
   stacked, that made a 66px row against the drawer's 44px. The summary owns the padding. */
.ntf-frow .ntf-fdet{ flex:1 1 0; min-width:0; padding:0; }
.ntf-frow .ntf-fdet + .ntf-fdet{ border-left:1px solid #e3e3e3; }
.ntf-frow .ntf-fdet-sum{ display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 8px; font-size:13.86px; font-weight:500; line-height:19px; color:#242424; }
.ntf-frow .ntf-fdet-ic{ width:16px; height:16px; flex:none; }
.ntf-frow .ntf-fdet-ic svg{ width:100%; height:100%; }
/* The panels' header row, as in the drawer. */
.ntf-fpanel-head{ position:relative; display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; }
.ntf-fpanel-title{ margin:0; font-size:15px; font-weight:600; color:#191919; }
.ntf-fpanel-x{ border:0; background:transparent; color:#121110; cursor:pointer; padding:4px; line-height:0; }
.ntf-fpanel--note.is-drawer .ntf-fdet-field{ width:100%; }
.ntf-fpanel--note.is-drawer .ntf-fdet-ok{ margin-top:16px; }

/* ---- Cart page: the two sheets behave as one ---------------------------------------------------
   .ntf-fpanel is display:none and was revealed by a sibling selector from its open <details>. Once
   a panel is teleported to <body> that selector cannot match, so the note sheet opened invisibly:
   the sheet is shown by its own class instead. */
.ntf-fpanel--deliv.is-drawer, .ntf-fpanel--note.is-drawer{ display:block !important; }
/* (The cart page's "Got it" and "Save" were set to sentence case here to match the drawer; every
   call to action is in capitals now, as ADD TO CART is - see the end of this file.) */
@media (max-width:767px){
  /* The row spans the dock edge to edge, as it spans the drawer: at 347px the delivery label wrapped
     to a second line and the row grew to 66px against the drawer's 44px. */
  .ntf-cart-dock .ntf-frow{ margin-left:-20px; margin-right:-20px; }
  .ntf-cart-dock .ntf-fdet-sum{ white-space:nowrap; }
}

/* ---- Cart page: floating widgets clear the dock -----------------------------------------------
   The live-chat bubble is fixed to the bottom-right corner, which is where the dock now is, so it
   sat on top of the checkout button. --ntf-dock-h is published by dockCartFooter(); anything
   anchored to the bottom is lifted by it. html.ntf-has-dock is set by dockCartFooter() too - it was
   body:has(#ntf-cart-dock), which restyled the whole page on insertions (see setHtmlFlag). Selectors cover the usual chat embeds; the transform is
   harmless on anything it does not match. */
@media (max-width:767px){
  html.ntf-has-dock [class*="whatsapp" i],
  html.ntf-has-dock [id*="whatsapp" i],
  html.ntf-has-dock [class*="chat-widget" i],
  html.ntf-has-dock [id*="chat-widget" i],
  html.ntf-has-dock #tidio-chat,
  html.ntf-has-dock .crisp-client,
  html.ntf-has-dock #gorgias-chat-container,
  html.ntf-has-dock [class*="launcher" i]{
    transform:translateY(calc(-1 * var(--ntf-dock-h, 0px))) !important;
    transition:transform .2s ease-out; }
}

/* ---- The drawer's item column fits its scroller -----------------------------------------------
   #CartDrawer-CartItems is a flex item, so it carries the default min-width:auto and refuses to
   shrink below its content's minimum: it measured 390px inside a 347px content box and hung ~43px
   past the padding, which is why the line prices sat against the right edge. (Until the dark
   horizontal scrollbar was removed you could scroll to them; clipping made it visible.) min-width:0
   lets the item column shrink — the title and the reward headline already truncate. */
#CartDrawer-Form, #CartDrawer-CartItems{ min-width:0; max-width:100%; }

/* ---- The header's icon row is centred from the FIRST paint -----------------------------------
   The same rule lives in the theme's Custom CSS setting (config/settings_data.json), which is
   injected late in the document. Until it lands the row stretches its items: the cart link is 71px
   tall with the icon sitting at the top, and the moment the rule arrives the link becomes 54px and
   centres — the icon drops 9px on every page load. This stylesheet is render-blocking in <head>
   (layout/theme.liquid), so the row is centred before anything paints. Same declaration, so the
   late copy changes nothing when it arrives. */
.x-container-header-icons{ align-items:center !important; }

/* ---- The popup's name, and the threshold chip --------------------------------------------------
   NINETWOFIVE REWARDS heads the whole panel; "Your rewards" stays as the label for the ladder.
   The chip carries the tier's own threshold in the top-left corner of its picture, which is where
   it stops competing with the reward's name for the same line. */
.cr-brandhead{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:#121110; margin:0 0 10px; }
.cr-hero-main{ position:relative; }
.cr-hero-at-chip{ position:absolute; top:5px; left:5px; z-index:2; display:inline-block;
  padding:2px 5px; border-radius:2px; background:rgba(255,255,255,.92); color:#121110;
  font-size:9.5px; font-weight:700; letter-spacing:.02em; line-height:1.4; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.14); }
/* On the badge tiles (Free shipping, 10% off) the chip sits over a coloured square, so it takes the
   inverse treatment rather than a white card on a white word. */
.cr-hero-main--badge{ position:relative; }
.cr-hero-main--badge .cr-hero-at-chip{ background:rgba(255,255,255,.85); }
/* The title has its line back. */
.cr-hero-tt{ display:block; }

/* ---- Rewards popup, phone: the tier tiles sit under the heading -------------------------------
   Order on a phone is NINETWOFIVE REWARDS, the three tiles, then the highlighted reward: the tiles
   are the control that switches between the three, so they belong beside the heading rather than
   under the thing they change. DOM order stays as it is (desktop reads it in its own order); this
   is flex order on the column, phone only. */
@media (max-width:1023px){
  .cr-main{ display:flex; flex-direction:column; }
  .cr-main > *{ order:5; }
  .cr-main > .cr-won-wrap{ order:0; }
  .cr-main > .cr-brandhead{ order:1; }
  .cr-main > .cr-chips{ order:2; margin-top:10px; }
  .cr-main > .cr-hero{ order:3; }
  .cr-main > .cr-modal-head{ order:4; }
}

/* ---- Rewards popup: two arrangements, switchable ----------------------------------------------
   #cr-modal carries data-cr-layout, written by snippets/cart-rewards-popup.liquid and overridable
   with ?rewards=tiles|hero. "tiles" is the block further up this sheet (heading, tiles, reward);
   "hero" reorders the same DOM so the reward and its description come first. Phone only — desktop
   hides both and shows the ladder either way.
   (A third arrangement, "reward first", lived here and was removed on request.) */
@media (max-width:1023px){
  #cr-modal[data-cr-layout="hero"] .cr-main > .cr-hero{ order:2; }
  #cr-modal[data-cr-layout="hero"] .cr-main > .cr-chips{ order:3; margin-top:14px; }
}

/* ---- Drawer footer row: Order note / Delivery divider ------------------------------------------
   The inline {% style %} block in snippets/cart-drawer.liquid sets only border-right-WIDTH (no style or
   colour), so it never drew a line. This states the whole border. (The row was also broken by the
   Order note button being parsed as "<buttonx-data=…>", fixed in that snippet on 18 Sept.) */
.x-cart-interact-group{ border-top-color:#e3e3e3 !important; }
.x-cart-interact-group .x-cart-interact-item{ border-right:1px solid #e3e3e3 !important; }
.x-cart-interact-group .x-cart-interact-item:last-child{ border-right:0 !important; }
[dir="rtl"] .x-cart-interact-group .x-cart-interact-item{ border-right:0 !important; border-left:1px solid #e3e3e3 !important; }
[dir="rtl"] .x-cart-interact-group .x-cart-interact-item:last-child{ border-left:0 !important; }

/* ---- Header: Weglot's language flag sits 6px low against the icon row -------------------------
   Kai (18 Sept): the cart icon "floats higher than the flag". Measured: the cart and search glyphs
   center at y=127 (they share the same icon+label column layout); Weglot's own switcher centers
   its flag within a plain 40px flex box instead, landing at y=133. Weglot injects this widget by
   its own dashboard config, not theme markup, so a nudge here is the only lever available. */
@media (max-width:767px){ .header-search .weglot-container .wg-flag{ position:relative; top:-6px; } }  /* phone header only: on desktop the flag sits beside "EN" and is already level */

/* ---- Drawer: the reward banner touches the header line ------------------------------------------
   Kai (18 Sept): "not top touching". The 12px strip above it is .ntf-drawer-items' own padding-top;
   the banner pulls up over it. It stays sticky at top:0 when the list scrolls. */
.ntf-drawer-items .cr-row.is-claim{ margin-top:-12px; top:-12px; }  /* top too: Chrome holds a sticky
   element below its scroll container's padding, which put the 12px straight back */

/* ---- Klarna sheet: no scrollbar under the title -------------------------------------------------
   The grey bar was a horizontal scrollbar on the HEADER ROW, not the dialog: the row computes to
   overflow-x:auto, and the close button sits at right:-8px on purpose (bigger tap target), so the row
   scrolled by 8px. Seen and fixed in a visible desktop drawer on 18 Sept. */
.ntf-klarna-headrow{ overflow:visible !important; }

/* ---- Phone header: the cart icon sits over its "Mandje/Cart" label ---------------------------
   The label is the link's ::after, centred on the link; the icon's 44px wrapper had pl-3 pr-0, which
   put the icon 6px right of that centre (Kai, 18 Sept). Even padding centres it. */
@media (max-width:767px){ #cart-icon > span.w-11{ padding-left:6px !important; padding-right:6px !important; } }

/* ==== Rewards popup — A1 (2026-09-18, Kai's design canvas "A1 — Reward shelf") ===================
   One column at every width: NINETWOFIVE REWARDS, the tier rail with each threshold on it, one
   headline, the reward shelf, then the products. Painted by paintA1() in ntf-cart.js. It is the same
   #cr-modal the drawer, the cart page and the product page all open, so all three get it at once.
   Scoped by #cr-modal .cr-dialog--a1 so it outranks the older layout rules above without touching
   them; the ladder/hero/side/CTA markup those rules styled is no longer rendered. */
#cr-modal .cr-dialog--a1{ padding:0; }
#cr-modal .cr-dialog--a1 .cr-main{ padding:28px 0 0 !important; }
/* 10px under the campaign name, not 22px (Kai, 24 Sept). The name and the "Spend X more" line
   under it are one thought, and at phone width 22px read as two separate blocks. Desktop keeps
   its own 28px in the 1024 block below, where the dialog is wide enough to carry it. */
#cr-modal .cr-dialog--a1 .cr-brandhead{ text-align:center; font-size:16px; font-weight:600;
  letter-spacing:.16em; color:#6f6961; margin:0 52px 10px; }
.cr-a1-track{ position:relative; height:76px; margin:0 32px 12px; }
.cr-a1-rail{ position:absolute; left:0; right:0; top:21px; height:3px; border-radius:2px;
  background:#e8e3da; overflow:hidden; }
.cr-a1-rail i{ display:block; height:100%; background:#3f7d54; }
.cr-a1-node{ position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:8px; }
.cr-a1-node.is-last{ left:auto; right:0; transform:none; align-items:flex-end; }
.cr-a1-dot{ width:44px; height:44px; box-sizing:border-box; border-radius:50%; border:2px solid #121110;
  background:#fff; color:#121110; font-style:normal; font-size:11px; font-weight:700; line-height:40px;
  text-align:center; white-space:nowrap; letter-spacing:-.02em; }
.cr-a1-node.is-done .cr-a1-dot{ background:#3f7d54; border-color:#3f7d54; color:#fff; }
.cr-a1-lb{ font-size:11px; white-space:nowrap; color:#121110; }
.cr-a1-node.is-last .cr-a1-lb{ font-weight:600; }
.cr-a1-amt{ color:#6f6961; font-weight:400; }
.cr-a1-full{ display:none; }
/* Phones: three labels sat on one line each, on a rail about 330px wide, so "10% off € 175" ran
   straight through "Your reward € 275" (Kai, 2026-09-23). The amount drops to its own line and each
   label is capped at a third of the rail, which is what makes them fit; the outer two read from
   their own edge so a long word cannot lean into a neighbour. Desktop puts it back on one line. */
.cr-a1-lb{ white-space:normal; max-width:78px; text-align:center; line-height:1.25; }
.cr-a1-amt{ display:block; }
/* The first node used to sit at the left edge, so its label was left-aligned. With the nodes
   evenly spaced it sits a third of the way along, where centred is correct — the only one still
   anchored to an edge is the last. */
.cr-a1-node:first-child .cr-a1-lb{ text-align:center; }
.cr-a1-node.is-last .cr-a1-lb{ text-align:right; }
.cr-a1-track{ height:84px; }
.cr-a1-h{ margin:0 0 12px; padding:0 20px; font-size:20px; line-height:1.3; font-weight:500;
  text-align:center; color:#121110; text-transform:none; letter-spacing:0; }
.cr-a1-acc{ color:#3f7d54; }
.cr-a1-shelf{ display:flex; gap:10px; overflow-x:auto; padding:0 20px 4px; scroll-snap-type:x mandatory;
  scrollbar-width:none; }
.cr-a1-shelf::-webkit-scrollbar{ display:none; }
.cr-a1-card{ flex:0 0 150px; position:relative; display:flex; flex-direction:column; background:#e4e5e7;
  border:2px solid transparent; scroll-snap-align:start; }
.cr-a1-card.is-on{ border-color:#121110; }
.cr-a1-pick{ display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer;
  text-align:left; color:inherit; font:inherit; }
.cr-a1-img{ display:block; width:100%; aspect-ratio:217/187; object-fit:cover; background:#e3e6e6; }
.cr-a1-nm{ display:block; padding:10px 12px 0; font-size:12px; font-weight:500; line-height:1.3; }
.cr-a1-pr{ display:block; padding:4px 12px 0; font-size:11px; }
.cr-a1-pr s{ color:#8d877e; }
.cr-a1-pr b{ color:#3f7d54; font-weight:600; }
.cr-a1-more{ align-self:flex-start; min-height:44px; padding:0 12px; border:0; background:transparent;
  cursor:pointer; font:inherit; font-size:11px; color:#121110; text-decoration:underline;
  text-underline-offset:3px; }
.cr-a1-ok{ position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:#121110; color:#fff; font-style:normal; font-size:12px; line-height:24px; text-align:center;
  pointer-events:none; }
#cr-modal .cr-dialog--a1 .cr-recs{ margin-top:24px !important; padding:8px 20px 24px; }
.cr-dialog--won .cr-a1{ display:none !important; }
@media (min-width:1024px){
  #cr-modal .cr-dialog--a1{ display:block; max-width:1000px; height:auto !important; }
  #cr-modal .cr-dialog--a1 .cr-main{ padding:40px 48px 0 !important; }
  /* 12px, not 28px: the campaign name and the "Spend X more" line under it are one thought, as on
     a phone - the 28px was spacing for the dot rail, which is gone. */
  #cr-modal .cr-dialog--a1 .cr-brandhead{ font-size:24px; margin:0 40px 12px; }
  .cr-a1-track{ margin:0 12px 11px; }
  .cr-a1-lb{ font-size:12px; white-space:nowrap; max-width:none; text-align:center; }
  .cr-a1-amt{ display:inline; }
  .cr-a1-track{ height:76px; }
  .cr-a1-full{ display:inline; }
  .cr-a1-short{ display:none; }
  .cr-a1-h{ font-size:24px; line-height:1.25; padding:0; margin-bottom:14px; }
  .cr-a1-shelf{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; padding:0;
    overflow:visible; }
  .cr-a1-img{ aspect-ratio:auto; height:187px; }
  .cr-a1-nm{ padding:12px 14px 0; font-size:13px; }
  .cr-a1-pr{ padding:4px 14px 0; font-size:12px; }
  .cr-a1-more{ padding:0 14px; font-size:12px; }
  .cr-a1-ok{ top:10px; right:10px; width:26px; height:26px; line-height:26px; }
  #cr-modal .cr-dialog--a1 .cr-recs{ margin-top:28px !important; padding:8px 48px 32px; }
}

/* ---- Drawer reward row: the image is BACK (Kai, 23 Sept) -----------------------------------------
   Hidden on 18 Sept so the tiers could take the row's full width. That is what made the row read as
   a big empty card: the chips are flex:1 1 auto, so the ~63px the image gave up went straight into
   them and they have looked oversized ever since. Kai compared the two and wants the old row.
   Restoring the image restores the whole proportion in one line, which is why the rule it replaces
   said "delete this rule to bring the drawer's back". */
.cr-dialog--won .cr-brandhead{ display:none !important; }

/* ---- Cart drawer overlay: dark and blurred (Kai, 18 Sept) --------------------------------------
   The blur is from doreandrose.com's cart drawer (10px there, 20% less here: 8px); the tint is our own
   original black at 40%. opacity is reset to 1 because an element below full opacity dilutes its own
   backdrop blur, so the 40% lives in the background colour instead of the theme's opacity-40. */
/* The blur from 768px only (25 Sept): on a phone the drawer is the full width of the screen, so
   the overlay behind it is never seen, but a backdrop blur is still composited on every frame -
   paid for nothing while the drawer and its popups scroll and animate on top of it. */
#CartDrawer-Overlay{ background:rgba(0,0,0,.4) !important; opacity:1 !important; }
@media (min-width:768px){
  #CartDrawer-Overlay{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
}

/* ---- All rewards earned, inside the A1 dialog: the panel had no side gutters (Kai, 2026-09-23)
   .cr-dialog--a1 .cr-main is deliberately padding:28px 0 0 — the reward shelf scrolls edge to edge
   and the rail carries its own margins — but the won view renders into that SAME .cr-main. On a
   phone that left the tier band, the black CTA and the footnote all hard against the dialog border,
   and a full-bleed black strip does not read as a button. Gutters for the won view only, so the
   shelf keeps its bleed in the normal view. Radius stays at the dialog's own 2px: the store's
   buttons are square, so rounding this one would make it the odd one out. */
#cr-modal .cr-dialog--a1.cr-dialog--won .cr-main{ padding:26px 20px 20px !important; }
#cr-modal .cr-dialog--won .cr-wonband{ margin-top:18px; border-radius:2px; overflow:hidden; }
#cr-modal .cr-dialog--won .cr-won-cta{ margin-top:20px; padding:16px 14px; border-radius:2px;
  box-shadow:0 2px 6px rgba(16,14,10,.22); }
#cr-modal .cr-dialog--won .cr-won-cta:active{ box-shadow:0 1px 2px rgba(16,14,10,.22); }
#cr-modal .cr-dialog--won .cr-won-note{ margin:12px 0 0; }
@media (min-width:1024px){
  #cr-modal .cr-dialog--a1.cr-dialog--won .cr-main{ padding:40px 48px 32px !important; }
}

/* ---- All rewards earned: three cards, not one band (Kai's design, 2026-09-23) -----------------
   Was a single bordered strip with the threshold on top in green and the reward's name under it.
   The design that replaced it separates the three, leads each with the tick, and demotes the
   threshold to a grey line below a rule — a confirmation reads as three things secured, not as a
   price list. Square, like every other surface here.
   These rules come after the originals on purpose: same specificity, later wins, and the block
   above stays readable as the history of what this view used to be. */
#cr-modal .cr-dialog--won .cr-wonband{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  border:0; background:none; border-radius:0; overflow:visible; margin:20px 0 0;
}
#cr-modal .cr-dialog--won .cr-band-cell{
  border:1px solid #cfe3d6; background:#f1f7f3; border-right:1px solid #cfe3d6;
  padding:16px 10px 13px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0;
}
#cr-modal .cr-dialog--won .cr-band-tick{
  flex:none; width:32px; height:32px; border-radius:50%; background:#2f7d4f; color:#fff;
  font-style:normal; font-size:15px; font-weight:700; line-height:32px; text-align:center;
}
#cr-modal .cr-dialog--won .cr-band-nm{
  font-size:13.5px; font-weight:700; line-height:1.25; color:#121110; margin:0;
  overflow-wrap:anywhere;
}
/* The threshold: its own line, under a hairline, in the weight of a footnote. */
#cr-modal .cr-dialog--won .cr-band-th{
  display:block; width:100%; margin-top:auto; padding-top:10px;
  border-top:1px solid #d5e5db; color:#8d877e; font-size:12.5px; font-weight:500; letter-spacing:0;
}
/* A tier that is unlocked but unchosen is not a tick: amber, and the card says why. */
#cr-modal .cr-dialog--won .cr-band-cell.is-pending{ background:#fff; border-color:#e6e3dd; }
#cr-modal .cr-dialog--won .cr-band-cell.is-pending .cr-band-tick{ background:#b4541f; }
#cr-modal .cr-dialog--won .cr-band-cell.is-pending .cr-band-th{ color:#a9a29a; }
#cr-modal .cr-dialog--won .cr-band-sm{ font-size:11px; color:#b4541f; margin:0; }
/* The line that used to trail the button, now under the headline. */
#cr-modal .cr-dialog--won .cr-won-sub{
  display:block; margin:8px 0 0; font-size:13.5px; line-height:1.45; color:#6f6961;
}
#cr-modal .cr-dialog--won .cr-won-h{ font-size:26px; line-height:1.15; margin:8px 0 0; }
#cr-modal .cr-dialog--won .cr-won-cta{ margin-top:20px; }
@media (max-width:379px){
  #cr-modal .cr-dialog--won .cr-band-nm{ font-size:12.5px; }
  #cr-modal .cr-dialog--won .cr-band-cell{ padding:14px 7px 11px; }
}
@media (min-width:1024px){
  #cr-modal .cr-dialog--won .cr-won-h{ font-size:30px; }
  #cr-modal .cr-dialog--won .cr-band-nm{ font-size:15px; }
  #cr-modal .cr-dialog--won .cr-band-cell{ padding:20px 14px 16px; gap:11px; }
}

/* ---- Drawer reward row: no image, same proportions (Kai, 2026-09-23) --------------------------
   Hiding the image on its own is what broke this row on 18 Sept: .cr-line is a flex row with an
   11px gap, so the thumb held 52px + 11px, and the chips — flex:1 1 auto, with no size of their
   own — swallowed all 63px the moment it went. Hence the oversized chips and the card that read
   as empty.

   The chips were first capped at the width they had WITH the image, which left the 63px empty at
   the right instead of on the chips. Kai wants that gap closed, so they span the row after all —
   they get wider, but no taller: their padding is fixed and their font is already clamped at
   10.5px, so filling the row costs width only. */
/* The cart PAGE gets it too (Kai, 24 Sept: "the cart page still renders the old tiered gift with
   the image still there on mobile — ensure these both use the same code"). The rule was written
   for the drawer's container only, so the same strip on #main-cart-items kept its thumbnail and
   the two surfaces showed different things. One selector, both. */
#CartDrawer-CartItems .cr-row .cr-thumb,
#main-cart-items .cr-row .cr-thumb,
/* The product page joined this list on 24 Sept, when its accordion was replaced by this same
   row (Kai: "make it identical to the 3 chip tiered banner we have in the cart drawer").
   Identical means identical, thumbnail included. */
.ntf-osec--product .cr-row .cr-thumb{ display:none !important; }

/* ---- A1 rail on phones: room for three evenly-spaced labels (Kai, 2026-09-23) -----------------
   Even spacing puts the nodes a third of the track apart. At 375px that third is ~90px, and two
   78px labels centred on adjacent nodes leave 12px between them — "10% off" and "Your reward" read
   as one run-on line. Reclaiming the track's side margins and taking 4px off the dot gives each
   label ~100px to sit in, which is the whole fix; the dot still holds its amount. */
@media (max-width:599px){
  .cr-a1-track{ margin-left:14px; margin-right:14px; height:80px; }
  .cr-a1-dot{ width:40px; height:40px; line-height:36px; font-size:10.5px; }
  .cr-a1-rail{ top:19px; }
  .cr-a1-lb{ max-width:96px; }
}

/* ---- Drawer reward strip: the tint reaches the edges (Kai, 2026-09-24) ------------------------
   The strip is a tinted box inside .ntf-drawer-items' own padding (pl-5 pr-5 = 20px, lg:pl-9 = 36px,
   pt-2 = 8px), so white showed above it and down both sides. It now starts at the drawer's edges
   and gives that inset back as its OWN padding, so every word and chip stays exactly where it was —
   the box grows outward, the content does not move.

   The arithmetic, because it has to be exact: content sat at 20 + 12 = 32px from the side and
   8 + 12 = 20px from the top (container padding + the row's own 12px). With the margins cancelling
   the container padding, the row's padding must be those same totals. */
#CartDrawer-CartItems .cr-row{
  width:calc(100% + 40px); margin-left:-20px; margin-right:-20px; margin-top:-8px;
  padding:20px 32px 12px;
}
@media (min-width:1024px){
  #CartDrawer-CartItems .cr-row{
    width:calc(100% + 72px); margin-left:-36px; margin-right:-36px;
    padding:20px 48px 12px;
  }
}

/* ---- The popup's ladder on phones IS the drawer's chip row (Kai, 2026-09-24) ------------------
   The dot rail cannot hold three captions side by side on a 330px track: even spacing gives each
   about 100px and "10% korting" ran into "Jouw cadeau" the moment the labels were Dutch. Rather
   than buy pixels inside a layout that cannot afford them, the popup shows the same chip row the
   cart drawer already uses — same builder, same classes, same CSS, so the two cannot drift.
   Desktop keeps the rail, where the width exists and the dots carry their amounts well. */
#cr-modal .cr-a1-chips{ display:flex; margin:2px 20px 14px; }
/* On every width now (Kai, 25 Sept: "the desktop version still shows the old design tiered
   progress bar and not the chips"). One ladder design on the drawer, the product page and the
   popup at any size; the dot rail is no longer shown anywhere. The header group's chip CSS caps the
   type at 10.5px with !important, which is right in a 340px drawer and too small in a 1000px
   dialog, so the desktop sizes are !important at a higher specificity; the row is held to 560px so
   the three chips do not stretch across the whole dialog. */
#cr-modal .cr-dialog--a1 .cr-a1-track{ display:none; }
@media (min-width:768px){
  #cr-modal .cr-a1-chips{ max-width:560px; margin:0 auto 24px; gap:6px !important; }
  #cr-modal .cr-a1-chips .cr-rchip{ font-size:12.5px !important; padding:9px 12px !important; }
  #cr-modal .cr-a1-chips .cr-rchip .cr-rchip-d{ font-size:11.5px; }
}
@media (max-width:767px){
  /* Taller than the drawer's because this dialog has the room — but the AMOUNT stays hidden, as
     it is in the drawer. Showing it ate about a third of each chip and ellipsised every label
     ("Gratis verzendi…", "Jouw cade…"). The amount is already in the headline underneath, and the
     point of the chips is which reward, not how much. */
  #cr-modal .cr-a1-chips .cr-rchip{ padding:7px 8px; font-size:11.5px; }
}

/* ---- The threshold on every chip (Kai, 2026-09-24) --------------------------------------------
   The theme-editor's own custom CSS hides .cr-rchip-d outright with display:none !important, so
   the amounts never appeared and an earlier fix could only bring back the tick by re-showing that
   span on the unlocked chip. Kai now wants the figures: "add the tiered prices in this, before.
   Ensuring everything can still fit on 1 row."

   So it is shown on every chip, which needs a selector that outranks a !important declaration at
   (0,1,0) - .cr-rchip .cr-rchip-d is (0,2,0) and wins. Fitting is the real constraint: the chip
   is white-space:nowrap AND overflow:hidden, so a chip squeezed too far clips its own label
   silently rather than wrapping. Measured at 390px in all four languages, not assumed.

   A reached tier shows the tick INSTEAD of its figure, not as well (Kai, same day): the margin
   with both was 2-3px in NL, DE and FR, and a threshold already passed is not information. */
.cr-rchip .cr-rchip-d{ display:inline !important; margin-right:3px; }
/* One point smaller than the label and tabular, so three different figures occupy the same width
   and the three chips stay the same shape as each other. */
.cr-rchip .cr-rchip-d{ font-size:9px; letter-spacing:0; }

/* ---- Reward cards: smaller and tighter (Kai, 2026-09-24) -------------------------------------- */
@media (max-width:767px){
  #cr-modal .cr-a1-shelf{ gap:8px; padding:0 12px 4px; }
  #cr-modal .cr-a1-card{ flex:0 0 124px; }
  #cr-modal .cr-a1-nm{ padding:8px 9px 0; font-size:11.5px; }
  #cr-modal .cr-a1-pr{ padding:3px 9px 0; font-size:10.5px; }
  #cr-modal .cr-a1-more{ min-height:36px; padding:0 9px; font-size:10.5px; }
  #cr-modal .cr-a1-ok{ top:6px; right:6px; width:20px; height:20px; line-height:20px; font-size:10px; }
}

/* ---- Two adjustments (Kai, 2026-09-24) --------------------------------------------------------
   The totals block goes a shade lighter again — it sits under white rows, so the band only needs
   to be enough to separate them, not to read as a panel of its own. */
.ntf-moved [data-ntf-kind="totals"]{ background:#fcfcfb; }

/* The reward strip had 20px above its text and 12px below: the top padding absorbs the items
   container's own pt-2, which the strip cancels with a negative margin, so the two numbers were
   never the same gap on screen. Equal now, and the text sits in the middle of the band. */
#CartDrawer-CartItems .cr-row{ padding-top:16px; padding-bottom:16px; }
@media (min-width:1024px){
  #CartDrawer-CartItems .cr-row{ padding-top:16px; padding-bottom:16px; }
}

/* The drawer's own "Spend € 26,00 more for 10% off" line, above the chips (Kai, 2026-09-24).
   Same builder as the drawer row — headline() — so the wording, the rounding and the bold amount
   match exactly. Phones only: the desktop rail already carries the amounts on its dots. */
#cr-modal .cr-a1-nudge{ margin:0 20px 8px; font-size:13.5px; line-height:1.35; color:#121110; text-align:center; }
/* The amount is not bold here (Kai, 24 Sept). headline() wraps it in <b> for the drawer row, where
   the line is small and the figure has to carry it; in the popup the line has room and the bold
   made the number shout over the sentence around it. */
#cr-modal .cr-a1-nudge b{ font-weight:400; }
/* Shown on desktop too, with the chips it introduces. */
@media (min-width:768px){ #cr-modal .cr-a1-nudge{ margin:0 32px 12px; font-size:15px; } }

/* ---- Reward cards: 4:5, and the product off the edge (Kai, 2026-09-24) ------------------------
   The image was 217/187 — landscape — and object-fit:cover, so a bracelet was cropped to the card
   edge with nothing around it. 4:5 gives the portrait shape asked for, and contain plus padding
   keeps the product clear of all four sides. The grey stays the card's own, so the padding reads as
   part of the tile rather than as a white border. */
#cr-modal .cr-a1-img{
  aspect-ratio:4/5; height:auto; object-fit:contain; background:#e4e5e7; padding:12px;
  box-sizing:border-box;
}
/* The gap between cards matches the 12px the section below the popup uses. */
#cr-modal .cr-a1-shelf{ gap:12px; }
@media (max-width:767px){ #cr-modal .cr-a1-shelf{ gap:12px; padding:0 12px 4px; } }

/* ---- The gift shelf fits its cards (Kai, 2026-09-24) -------------------------------------------
   "Can the bottom be more like the example image? In terms of sizes." The cards were a fixed 124px
   in a horizontally scrolling flex row: 3 x 124 + 2 x 12 gap + 2 x 12 padding is 420px, wider than
   a 390px phone, so the third card was cut in half by the dialog edge and read as a mistake rather
   than as an invitation to scroll.

   Up to three cards now share the width as equal grid columns — whatever the dialog is wide, minus
   the gaps — so all three are whole and the row ends where the dialog does. Four or more keeps the
   scroll shelf, because at that point equal columns would be too narrow to read a product name in.
   The grid also stretches every card to the tallest, so the name and price lines sit on one
   baseline across the row, which is what makes the example look ordered. */
@media (max-width:767px){
  #cr-modal .cr-a1-shelf[data-cr-n="1"],
  #cr-modal .cr-a1-shelf[data-cr-n="2"],
  #cr-modal .cr-a1-shelf[data-cr-n="3"]{ display:grid; overflow:visible; }
  #cr-modal .cr-a1-shelf[data-cr-n="1"]{ grid-template-columns:minmax(0, 1fr); }
  #cr-modal .cr-a1-shelf[data-cr-n="2"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #cr-modal .cr-a1-shelf[data-cr-n="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  /* flex-basis is meaningless in a grid, but the card also carries a width from the flex rule —
     min-width:0 is what actually lets a long Dutch product name wrap inside its column instead of
     pushing the column wider than its 1fr share. */
  #cr-modal .cr-a1-shelf[data-cr-n="1"] .cr-a1-card,
  #cr-modal .cr-a1-shelf[data-cr-n="2"] .cr-a1-card,
  #cr-modal .cr-a1-shelf[data-cr-n="3"] .cr-a1-card{ flex:1 1 auto; width:auto; min-width:0; }
}

/* ---- The claim band touches the header in gift-choice mode too (Kai, 2026-09-24) ---------------
   "Right above the banner when you unlocked a reward of choice there is a small awkward white
   space." The same 12px of .ntf-drawer-items padding-top that the tiers banner was pulled over on
   18 Sept — but that fix was written against `.cr-row.is-claim`, and gift-choice mode renders
   `.gcr-row` instead, so the drawer's two reward modes have disagreed about this ever since.
   Same numbers, same reason: `top` as well as `margin-top`, because Chrome holds a sticky element
   below its scroll container's padding and would otherwise put the 12px straight back. */
.ntf-drawer-items .gcr-row.is-claim{ margin-top:-12px; top:-12px; }

/* ---- Cart line titles are not bold (Kai, 2026-09-24) ------------------------------------------
   The page's weight is set where its sizes are, further up; the drawer takes its 600 from the
   theme's own heading link styling, so it needs saying here. Scoped to the line-item column so
   the drawer's upsell cards and any other product link inside it keep their own weight. */
#CartDrawer-CartItems .product-info-column-1 a[href*='/products/']{ font-weight:400; }

/* ---- The all-unlocked view, Option A (Kai, 2026-09-24) ----------------------------------------
   Drawn on the canvas first and approved there: "I like Option A. But is there a possibility that
   each tiered gift remains on 1 row? And maybe put the tier value after the checkmark."

   Three changes from what this view was:

   1. The eyebrow is gone. Its job — saying that these are the customer's rewards — moved into a
      tick beside the headline, so the head is two lines instead of three and the tiles start
      higher up the dialog.
   2. The headline holds one line. That is a copy constraint before a CSS one, and German decides
      it: the literal wording is 31 characters and overflows a 322px box at 17px, so the locale
      string drops the "Alle". nowrap here is the guarantee, not the mechanism.
   3. The tile is square, its tick and threshold share the top row, and the name has the second row
      to itself at nowrap. Square is what Kai asked for throughout, so aspect-ratio rather than a
      padding that happens to look square at one width.

   Keyed to .cr-won, the markup, NOT to .cr-dialog--won: the won markup renders inside a dialog the
   A1 arrangement has already classed .cr-dialog--a1, so the 23 Sept rules keyed to --won do not
   reach it at all in the gift-choice popup.

   The :is() prefix is about SPECIFICITY, not reach. In #cr-modal those 23 Sept rules DO match, and
   they carry an id — (1,2,0) — so plain .cr-band-nm lost to them: the labels came back at 13.5px
   and ellipsised, and the headline at 26px ran off the edge of the dialog (Kai, 24 Sept: "did you
   see the all rewards unlocked? looks bad"). :is() takes the specificity of its most specific
   argument, so this matches (1,2,0) too and wins on source order, in BOTH modals. */
/* Centred at every width, and no tick beside the headline (Kai, 2026-09-24). The tick was
   standing in for the eyebrow when the phone layout dropped it; with the head centred it was
   simply a mark sitting off to one side of a centred line, which is what Kai circled. It is out of
   the markup rather than hidden, so there is nothing left to style. */
:is(#cr-modal, #gcp-modal) .cr-won .cr-won-head{ text-align:center; padding:0; }
:is(#cr-modal, #gcp-modal) .cr-won .cr-won-kicker{ display:none; }
/* Padding on BOTH sides, not just the right (Kai, 24 Sept: "the title and subtitle are not
   correctly middle aligned? Maybe this is because of the X in the right corner"). Exactly that:
   26px was reserved on the right to clear the close button, and a centred line inside a box padded
   on one side only sits 13px left of the true centre. Equal padding keeps the clearance and puts
   the centre back where it belongs. */
:is(#cr-modal, #gcp-modal) .cr-won .cr-won-hrow{
  display:flex; align-items:center; justify-content:center; gap:8px; padding:0 26px;
}
:is(#cr-modal, #gcp-modal) .cr-won .cr-won-h{
  font-size:17px; line-height:1.2; font-weight:700; letter-spacing:-.01em; margin:0;
  white-space:nowrap;
}
:is(#cr-modal, #gcp-modal) .cr-won .cr-won-sub{
  margin:6px 0 0; font-size:12px; line-height:1.35; color:#8d877e; text-align:center;
}
/* The band becomes three separate squares. Same trap as display:flex on the cell: the grid was
   declared in the 23 Sept block under .cr-dialog--won, which this dialog is not, so the base rule
   won - display:flex with a border and a fill of its own, which is why the three tiles rendered as
   one strip with hairlines between them instead of the three cards the design shows. */
:is(#cr-modal, #gcp-modal) .cr-won .cr-wonband{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:16px 0 0;
  border:0; background:none; border-radius:0; overflow:visible;
}
:is(#cr-modal, #gcp-modal) .cr-won .cr-band-cell{
  /* display:flex is declared HERE and not inherited from the 23 Sept block: that block is keyed
     to .cr-dialog--won, which this dialog is not, so without it the cell stayed a block and
     justify-content did nothing - the content sat at the top with the square empty beneath it. */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* 10/7, not 1: Kai asked for 30% off the HEIGHT of these blocks. The width is what the dialog
     gives them, so the ratio is the only lever - a square 98px tile becomes 98x69. The contents
     still clear it: a 14px tick row, a 7px gap and a 9.5px label is ~44px inside 16px of padding.
     Above 600px the landscape treatment sets aspect-ratio:auto and this does not apply. */
  aspect-ratio:10/7; padding:8px 3px; gap:7px;
  background:#f2f6f3; border:1px solid #e2ece6;
}
/* Tick and threshold on one row, the tick first — "the tier value after the checkmark". */
:is(#cr-modal, #gcp-modal) .cr-won .cr-band-top{
  display:flex; align-items:center; gap:5px; line-height:1;
}
:is(#cr-modal, #gcp-modal) .cr-won .cr-band-tick{
  width:14px; height:14px; border-radius:0; background:none; color:#2f7d4f;
  font-size:13px; font-weight:700; line-height:14px;
}
:is(#cr-modal, #gcp-modal) .cr-won .cr-band-th{
  display:inline; width:auto; margin:0; padding:0; border-top:0;
  font-size:10.5px; font-weight:400; color:#8d877e; white-space:nowrap;
}
/* One row, always. An unusually long short-label from a future campaign clips rather than wraps,
   so the three tiles keep the same height whatever the campaign is called. */
:is(#cr-modal, #gcp-modal) .cr-won .cr-band-nm{
  /* 9.5px, not 10.5: measured on the live tile, which comes out 97px wide, so the inner width is
     91px and Dutch "Gratis verzending" needs 91px at 10px - it clipped. At 9.5px it is 86px. */
  max-width:100%; font-size:9.5px; font-weight:600; line-height:1.2; color:#121110;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; margin:0;
}
:is(#cr-modal, #gcp-modal) .cr-won .cr-band-cell.is-pending .cr-band-tick{ background:none; color:#b4541f; }
:is(#cr-modal, #gcp-modal) .cr-won .cr-band-sm{ font-size:9.5px; white-space:nowrap; }

/* ---- The quantity badge loses its fill (Kai, 2026-09-24) ---------------------------------------
   "Remove background fill on the 2x in cart." The rgba(0,0,0,.06) chip made a second grey box on a
   line that already has the product image as its only block of tone, and it was competing with the
   price beside it for the same glance. The figure is doing the work; it does not need a container.
   The padding goes with the fill so the number sits against the title rather than floating in a
   box-shaped gap, and the type stays bold so it still reads as a count and not as part of the
   name. */
.ntf-qty-badge{ background:none; padding:1px 0; }

/* ---- The unlocked view on a wide screen (Kai, 2026-09-24) -------------------------------------
   "Redesign this again. It looks bad now. 4 huge squares?" — then a reference of what does work.

   Option A was drawn at 390px, where a third of the dialog is 98px and a square is the right
   shape. On a 1000px dialog a third is ~270px, so aspect-ratio:1 gave three 270px squares with
   9.5px of type adrift in the middle of each: the type was sized for a phone tile and the tile was
   sized for the dialog.

   The reference answers it by changing the SHAPE rather than the scale — landscape cards, the tick
   a disc on the left, the reward's name and its threshold stacked beside it — and by centring the
   head, with the eyebrow back, which there is room for here and not on a phone. So this is the
   desktop treatment and Option A stays exactly as it is below 600px.

   600 and not 768: measured at 716px, where the dialog is already wide enough that a third of it
   is a 133px square with 9.5px of type in the middle - the shape Kai called huge. The phone
   layout is right up to about a 400px dialog and no further.

   The markup does not change: .cr-band-top becomes display:contents so its tick and threshold
   become grid items of the card itself, which is what lets one tick span both rows. */
@media (min-width:600px){
  :is(#cr-modal, #gcp-modal) .cr-won .cr-won-kicker{
    display:block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:#3f7d54; margin:0 0 10px;
  }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-won-hrow{ padding:0; }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-won-h{ font-size:26px; line-height:1.15; }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-won-sub{ margin:8px 0 0; font-size:14px; text-align:center; }

  /* ONE column here, three only when there is room for three. Measured at 716px: the dialog is
     ~530px, so three across gives a 131px card, and a 34px disc plus 16px padding either side
     leaves 57px for the name - "Gratis verzending" does not fit in that at any size worth reading.
     A landscape card needs about 170px before it earns its shape, so below that the three simply
     stack, which is the reference's own proportions one per row. */
  :is(#cr-modal, #gcp-modal) .cr-won .cr-wonband{
    grid-template-columns:minmax(0, 1fr); gap:8px; margin-top:20px;
  }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-band-cell{
    aspect-ratio:auto; display:grid; grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:"tick name" "tick th";
    column-gap:12px; row-gap:2px; align-items:center; align-content:center;
    padding:14px 16px; text-align:left; min-height:82px;
  }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-band-top{ display:contents; }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-band-tick{
    grid-area:tick; width:34px; height:34px; border-radius:50%; background:#3f7d54; color:#fff;
    font-size:16px; font-weight:700; line-height:34px; text-align:center;
  }
  /* Two lines are expected here — "Gratis verzending" sets the height — so no nowrap and no
     ellipsis: on a phone the tile is 98px and clipping is the only option, here it is not. */
  :is(#cr-modal, #gcp-modal) .cr-won .cr-band-nm{
    grid-area:name; font-size:14px; font-weight:700; line-height:1.2; text-align:left;
    white-space:normal; overflow:visible; text-overflow:clip; align-self:end;
  }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-band-th{
    grid-area:th; font-size:13px; color:#8d877e; text-align:left; align-self:start;
  }
  :is(#cr-modal, #gcp-modal) .cr-won .cr-band-cell.is-pending .cr-band-tick{
    background:#b4541f; color:#fff;
  }
}

/* Three across when the DIALOG is wide enough — not when the viewport is.

   This is why the viewport kept giving the wrong answer. The two popups have different dialog
   widths for the same screen: the gift-choice one measured ~430px at a 1100px viewport, while
   #cr-modal's is ~880px, and a media query cannot tell them apart. So a container query asks the
   only thing that matters — how much room this band actually has.

   560px, measured on the band and not guessed from the dialog: a 900px dialog gives a band of
   only 632px once its padding is taken off, so a 780px threshold never fired anywhere real. At
   560 the narrowest three-across card is ~180px, against the ~170px a disc, its padding and
   "Gratis verzending" need; the 412px band of the narrower popup stays stacked. Below it they stack, which is what the
   narrower popup gets. A browser too old for container queries (Safari below 16) simply keeps the
   stacked layout, which is the safe way round. */
:is(#cr-modal, #gcp-modal) .cr-won{ container-type:inline-size; }
@container (min-width:560px){
  :is(#cr-modal, #gcp-modal) .cr-won .cr-wonband{
    grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
  }
}

/* ---- The unlocked dialog is not as wide as the picker (Kai, 2026-09-24) ------------------------
   "On desktop reduce the width of each gift tier box. Now it is a very wide popup for no reason."

   The width was never this view's own: it inherits the A1 arrangement's 1000px, which that layout
   earns because it carries a reward gallery. This one carries three short cards and a button, and
   at 1000px each card was ~265px of mostly empty tint.

   Narrowed to 700px, which is what the CONTENT wants: 96px of dialog padding leaves a 604px band,
   so the three cards come out ~195px each — still clear of the ~170px a disc, its padding and
   "Gratis verzending" need, so the container query above keeps them on one row.

   Keyed with :has() because the won view has no class of its own on the dialog — it renders inside
   whichever arrangement was already there. A browser without :has() keeps today's width, which is
   the safe way round. */
@media (min-width:1024px){
  #cr-modal .cr-dialog:has(.cr-won),
  #gcp-modal .gcp-dialog:has(.cr-won){ max-width:700px; }
}

/* ---- The gift cards lose their dead height on desktop (Kai, 2026-09-24) -----------------------
   "There is a lot of space above the titles of these gift products — can you reduce it so the size
   of these blocks also reduce?" It is the 4:5 crop: that shape was chosen on a phone, where the
   card is ~100px wide and 4:5 is 125px tall. On desktop the card is ~190px, so the same ratio is
   ~240px of box around a bracelet that occupies the middle third of it — the empty space above the
   title IS the aspect ratio.

   Square instead, and less padding. object-fit:contain still fits the tall mug and the wide wallet
   without cropping either; the card simply stops reserving room nothing uses. ~240px to ~190px,
   and the whole shelf comes down with it. */
@media (min-width:1024px){
  #cr-modal .cr-a1-img{ aspect-ratio:1; padding:10px; }
}

/* ---- The gift's price becomes a badge, top-left (Kai, 2026-09-24) ------------------------------
   "Put the price as a badge left top corner on each gift" — and, on the follow-up, the "Free" goes
   in it too, not just the struck figure.

   It is the same .cr-a1-pr element, lifted out of the flow onto the image rather than duplicated,
   so the struck price and the word stay one thing and nothing has to keep them in step. The card
   is already position:relative for the chosen-tick, and that tick sits top-RIGHT, so the corner is
   free.

   Square, white, and in the type the price line already used. I could not measure the theme's own
   product labels to copy them exactly — this product has none active — so this follows the
   conventions the theme does use elsewhere: square corners, #3f7d54 for the free word and #8d877e
   for the struck figure. Point me at a live label and it is a two-line change to match it.

   The title keeps the space the price used to occupy below it, which is why .cr-a1-nm loses its
   bottom padding: the card gets shorter again rather than leaving a gap where the price was. */
#cr-modal .cr-a1-pr{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:baseline; gap:5px;
  margin:0; padding:3px 7px;
  background:#fff; box-shadow:0 1px 2px rgba(16,14,10,.10);
  font-size:10.5px; line-height:1.35; white-space:nowrap;
}
#cr-modal .cr-a1-pr s{ color:#8d877e; }
#cr-modal .cr-a1-pr b{ color:#3f7d54; font-weight:600; }
#cr-modal .cr-a1-nm{ padding-bottom:10px; }

/* ---- The delivery sheet, to the mockup (Kai, 2026-09-24) --------------------------------------
   "Do not use the recommended badge. And the shipping + country choosing look how it looks like."
   Then: no progress bar, and "Order before" on its own line.

   The badge is gone from the markup, so its rules go with it. What is left here is the country
   box, which the mockup draws as a bordered field: a pin, "Shipping to" small and grey above the
   country in bold, a chevron on the right.

   The native <select> is still the control. It lies over the whole box at zero opacity, so a tap
   anywhere opens the system picker while the keyboard and a screen reader still get a real select
   rather than a div dressed up as one. */
.ntf-ship-where{
  position:relative; display:flex; align-items:center; gap:12px; cursor:pointer;
  border:1px solid #e6e3de; background:#fbfaf9; padding:11px 14px; margin:0 0 12px;
}
.ntf-ship-where-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ntf-ship-where-lbl{ font-size:11.5px; line-height:1.3; color:#8d877e; }
.ntf-ship-where-c{ font-size:14.5px; line-height:1.25; font-weight:700; color:#121110; }
.ntf-ship-where-chev{ margin-left:auto; flex:none; display:flex; color:#6f6961; }
/* Covers the box, invisible, and keeps every native affordance. */
/* The overlay has to out-specify select.ntf-ship-country, which carries
   `width:auto !important; padding:0 16px 0 0 !important` from when this control was a bare inline
   select. That auto width was the bug Kai reported twice: the select collapsed to the width of the
   country name and sat at the top-left of the box, so the name was the ONLY place a click landed
   on it. Everything else was the label, and a label click focuses a select without opening it.

   Two classes plus the element beat one, and the !important here beats the !important there. */
.ntf-ship-where select,
.ntf-ship-where select.ntf-ship-country{
  position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important;
  opacity:0; border:0 !important; padding:0 !important; margin:0; cursor:pointer;
  -webkit-appearance:none; appearance:none; font-size:16px !important;
  /* The open list is painted by the browser, not by us, and it inherits the SELECT's own font and
     colour - not the zeroed box's. With no colour set it fell back to the default link blue and
     purple-for-visited, which is why the list read as something from another page (Kai, 24 Sept:
     "the dropdown does not even look like it is part of the dropdown"). opacity:0 does not reach
     the popup, so setting a colour here is safe: the field stays invisible, the list turns black. */
  color:#121110 !important; font-family:Montserrat, sans-serif !important; font-weight:400 !important;
}
.ntf-ship-where select option,
.ntf-ship-where select.ntf-ship-country option{
  color:#121110; background:#ffffff; font-weight:400;
}

/* "Order before 23:59" is its own line under the service name now, not a tail on it. */
.ntf-sc-cut{ display:block; margin-top:1px; }

/* ---- The rate card's emphasis (Kai, 2026-09-24) -----------------------------------------------
   "Make arrives + date bold. Make price not bold." The arrival is what the customer opened this
   sheet to find out; the price was carrying the weight instead, which put the emphasis on the cost
   of a thing they had not decided to buy yet. */
.ntf-ship .ntf-sc-when{ font-weight:700; color:#121110; }
.ntf-ship .ntf-sc-price{ font-weight:400; }

/* ---- The rate card's vertical rhythm (Kai, 2026-09-24) ----------------------------------------
   The 2px gap in .ntf-sc-body was set when the service name and "Order before" shared one line and
   the only gap was between that line and the arrival. Now there are three stacked lines with two
   different jobs, so an even 2px runs them together.

   Grouped instead of evenly spaced: the name and its cut-off time belong together (2px), the
   arrival is the answer and gets air above it (6px), and the free-from note sits just under the
   arrival it qualifies (4px). Explicit margins rather than a flex gap, because a single gap cannot
   say that two of the three belong together. */
.ntf-ship .ntf-sc{ padding:13px 14px 12px; }
.ntf-ship .ntf-sc-body{ gap:0; }
.ntf-ship .ntf-sc-line{ margin:0; }
.ntf-ship .ntf-sc-cut{ margin-top:2px; }
.ntf-ship .ntf-sc-when{ margin-top:6px; }
.ntf-ship .ntf-sc-note{ margin-top:4px; }

/* ---- Country list on a pointer device -------------------------------------------------------
   A native <select> popup is positioned by the browser so the SELECTED option lands on the
   control. With 190 countries and one picked deep in the list that means it opens upward and
   covers the sheet, with clear space underneath (Kai, 24 Sept). Nothing in CSS or JS can move a
   native popup, so on a pointer device it is suppressed here and assets/ntf-ship-sheet.js draws
   its own panel under the field.

   TOUCH is deliberately untouched - no rule below applies there - because the OS wheel is better
   than anything we would build, and getting it is why this field was put on a select at all. */
/* Keyed to the --menu class, NOT to a media query (25 Sept). The class is added by wireMenu() in
   ntf-ship-sheet.js exactly when the custom list is in use, so this CSS and that decision cannot
   disagree - a media query here that differed from the script's test would leave a hybrid laptop
   opening the native list AND ours at once. */
.ntf-ship-where--menu select,
.ntf-ship-where--menu select.ntf-ship-country{ pointer-events:none; }
.ntf-ship-where--menu{ cursor:pointer; }
.ntf-ship-where--menu:focus-visible{ outline:2px solid #3f7d54; outline-offset:2px; }
.ntf-ship-where--menu[aria-expanded="true"] .ntf-ship-where-chev{ transform:rotate(180deg); }
.ntf-ship-where-chev{ transition:transform .15s ease; }
.ntf-ship-menu{
  position:absolute; left:-1px; right:-1px; top:100%; z-index:40;
  max-height:264px; overflow-y:auto; overscroll-behavior:contain;
  background:#fff; border:1px solid #121110; border-top:0;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
/* Only when the field genuinely has no room below it - the flip is decided in openMenu against
   the real viewport, which is the whole point of replacing the native list. */
.ntf-ship-menu.is-up{ top:auto; bottom:100%; border-top:1px solid #121110; border-bottom:0;
  box-shadow:0 -10px 24px rgba(0,0,0,.12); }
.ntf-ship-opt{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  font-family:inherit; font-size:14px; line-height:1.3; color:#121110;
  padding:10px 14px; cursor:pointer;
}
.ntf-ship-opt.is-active{ background:#f3f1ee; }
.ntf-ship-opt.is-on{ font-weight:700; }
.ntf-ship-opt.is-on::after{ content:""; float:right; width:6px; height:11px; margin:3px 2px 0 0;
  border:solid #3f7d54; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ==== The gift popup: one page, three endings (Kai, 25 Sept) ====================================
   Every door opens this one page - a rung on the ladder, the gift chip, the product page's gift
   banner - and it no longer hands off to a second list with "Go back" and "View all tiers". The
   head, the chips, the heading and the shelf are the same markup wherever it was opened; only the
   block underneath changes: .cr-end--product (one button) or .cr-end--cart (a question, whose
   customers bought what, and the Explore sheet). The shelf gains a "View" link per gift when the
   gift tier is unlocked in the cart. Drawn first on the canvas, second row of artboards. */

/* Four across, always on one row: a 4-track grid, so no name, however long, can push a card down. */
#cr-modal .cr-dialog--a1 .cr-a1-shelf,
#cr-modal .cr-dialog--a1 .cr-a1-shelf[data-cr-n]{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:3px; align-items:start;
  overflow:visible; padding:0 16px; scroll-snap-type:none; }
#cr-modal .cr-dialog--a1 .cr-a1-shelf[data-cr-n="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
#cr-modal .cr-dialog--a1 .cr-a1-shelf[data-cr-n="2"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
#cr-modal .cr-dialog--a1 .cr-a1-shelf[data-cr-n="1"]{ grid-template-columns:minmax(0, 1fr); }
#cr-modal .cr-dialog--a1 .cr-a1-card{ flex:none; width:auto; min-width:0; background:none; }
/* THE ALIGNMENT FIX (Kai's screenshot, 25 Sept): the card is a <button>, and a button centres its
   content vertically - so a gift whose name fits on one line carried its image half a line lower
   than a neighbour whose name wraps. A column that starts at the top puts every image at the same
   height whatever the text under it does. */
#cr-modal .cr-dialog--a1 .cr-a1-pick{
  display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
  height:auto; text-align:left; }
#cr-modal .cr-dialog--a1 .cr-a1-img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover; padding:0; background:#f4f3f1; }
#cr-modal .cr-dialog--a1 .cr-a1-nm{
  padding:6px 0 0; font-size:10.5px; line-height:1.25; font-weight:400; color:#242424;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#cr-modal .cr-dialog--a1 .cr-a1-pr{ top:4px; left:4px; padding:2px 4px; gap:3px; font-size:8.5px; line-height:1.3; }
#cr-modal .cr-dialog--a1 .cr-a1-view{
  display:inline-block; margin-top:5px; font-size:11px; line-height:1.3; color:#121110;
  text-decoration:underline; text-underline-offset:3px; }
#cr-modal .cr-dialog--a1 .cr-a1-h{ margin:18px 0 12px; }
@media (min-width:768px){
  #cr-modal .cr-dialog--a1 .cr-a1-shelf{ gap:12px; padding:0; }
  #cr-modal .cr-dialog--a1 .cr-a1-pr{ top:8px; left:8px; padding:3px 7px; gap:5px; font-size:11px; }
  #cr-modal .cr-dialog--a1 .cr-a1-nm{ padding-top:9px; font-size:13px; line-height:1.35; }
  #cr-modal .cr-dialog--a1 .cr-a1-view{ font-size:12px; }
}
/* The old horizontal Mix & match / Add-ons rail is replaced by the Explore sheet. */
#cr-modal .cr-dialog--a1 #cr-recs{ display:none !important; }

/* ---- The ending ---------------------------------------------------------------------------------- */
#cr-modal .cr-end{ padding:20px 16px 20px; }
/* No divider (Kai, 25 Sept: "remove this grey line"); the spacing alone separates the gifts from
   the question under them. */
#cr-modal .cr-end--cart{ margin-top:8px; border-top:0; padding-top:18px; }
#cr-modal .cr-end-q{ margin:0; font-size:15px; line-height:1.3; font-weight:600; color:#121110; }
#cr-modal .cr-end-sub{ margin:5px 0 14px; font-size:13px; line-height:1.4; color:#6f6961; }
#cr-modal .cr-end-sub:empty{ display:none; }
#cr-modal .cr-end .button{ width:100%; justify-content:center; border-radius:0; }
@media (min-width:768px){
  #cr-modal .cr-end{ padding:24px 0 28px; }
  #cr-modal .cr-end--cart{ padding-top:22px; }
  #cr-modal .cr-end .button{ max-width:360px; margin:0 auto; display:flex; }
  #cr-modal .cr-end--cart .cr-end-q, #cr-modal .cr-end--cart .cr-end-sub{ text-align:center; }
}

/* ---- The Explore sheet ------------------------------------------------------------------------
   Slides over the page inside the same dialog, so closing it lands back on the gifts. The grid in
   it is sections/ntf-picks.liquid - the collection page's own grid and card - and the tabs are the
   theme's featured-collection tab markup and utility classes; only their colours are set here,
   because the section sets those per instance and this is not an instance of it. */
#cr-modal .cr-dialog.is-exploring{ overflow:hidden; height:calc(100vh - 40px) !important; }
/* Above z-index 10, not 6: the gift card's button (.cr-a1-pick) and the theme's own .button both
   carry position:relative; z-index:10, and with no stacking context on the dialog they painted
   THROUGH the sheet - the shelf and the Explore button over its product cards (measured, 25 Sept).
   The page underneath is also isolated, so no z-index added inside it later can climb over again. */
#cr-modal .cr-main, #cr-modal .cr-end{ isolation:isolate; }
#cr-modal .cr-ex{
  position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; background:#fff;
  transform:translateX(100%); visibility:hidden; transition:transform .3s ease-in-out, visibility 0s linear .3s; }
#cr-modal .cr-dialog.is-exploring .cr-ex{ transform:none; visibility:visible; transition:transform .3s ease-in-out; }
#cr-modal .cr-ex-head{ position:relative; flex:none; padding:16px 48px 8px; text-align:center; }
#cr-modal .cr-ex-back, #cr-modal .cr-ex-close{
  position:absolute; top:10px; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:#6f6961; cursor:pointer; font-size:22px; line-height:1; padding:0; }
#cr-modal .cr-ex-back{ left:6px; }
#cr-modal .cr-ex-close{ right:6px; }
#cr-modal .cr-ex-title{ margin:4px 0 4px; font-size:19px; line-height:1.25; font-weight:600; color:#121110; }
/* Lined up with the first tab's text: the tab strip sits 16px in and the label pads 10px more. */
#cr-modal .cr-ex-sub{ margin:8px 0 0; padding:0 26px; font-size:13px; line-height:1.4; color:#6f6961; }
@media (min-width:768px){ #cr-modal .cr-ex-sub{ padding:0 24px; text-align:center; } }
#cr-modal .cr-ex-tabs{ flex:none; margin:10px 0 12px; }
#cr-modal .cr-ex .collection-title-container{ margin:0 16px; width:auto; }
#cr-modal .cr-ex .collection-title-container.scrollbar-body::-webkit-scrollbar{ width:1px; height:2px; }
#cr-modal .cr-ex .label-ntf-ex{ background:transparent; color:rgb(var(--colors-heading)); }
/* rgba(var(), a) with a COMMA: the theme stores --colors-heading as "25, 25, 25", and the slash
   form resolved to transparent - the active tab had no pill (measured, 25 Sept). This is exactly
   the value featured-collection computes for its own label tabs. */
#cr-modal .cr-ex .label-ntf-ex.active,
#cr-modal .cr-ex .label-ntf-ex:hover{ background:rgba(var(--colors-heading), .1); }
#cr-modal .cr-ex-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; }
#cr-modal .cr-ex-wait{ padding:0; }
/* The loading state is the grid it is waiting for: the picks grid's own columns and gaps (2 across,
   4 from 1024px; 2px, 3px from 768px), grey blocks for the images and two short lines for the name
   and the price. A slow breathe, not a spinner; still under reduced motion. */
#cr-modal .cr-ex-skel{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; }
@media (min-width:768px){ #cr-modal .cr-ex-skel{ gap:3px; } }
@media (min-width:1024px){ #cr-modal .cr-ex-skel{ grid-template-columns:repeat(4, 1fr); } }
#cr-modal .cr-ex-skel span{ display:block; padding-bottom:18px; }
#cr-modal .cr-ex-skel i{ display:block; aspect-ratio:1 / 1; background:#f2f0ed; }
#cr-modal .cr-ex-skel b{ display:block; height:9px; width:62%; margin:12px 0 0 10px; background:#f2f0ed; }
#cr-modal .cr-ex-skel b + b{ width:34%; margin-top:7px; }
#cr-modal .cr-ex-skel i, #cr-modal .cr-ex-skel b{ animation:crExBreathe 1.1s ease-in-out infinite alternate; }
@keyframes crExBreathe{ from{ opacity:1; } to{ opacity:.5; } }
@media (prefers-reduced-motion:reduce){ #cr-modal .cr-ex-skel i, #cr-modal .cr-ex-skel b{ animation:none; } }
#cr-modal .ntf-picks-empty{ padding:40px 16px; text-align:center; color:#8d877e; font-size:13px; }
@media (min-width:768px){
  #cr-modal .cr-ex-head{ padding:22px 56px 10px; }
  #cr-modal .cr-ex-title{ font-size:24px; }
  #cr-modal .cr-ex .collection-title-container{ margin:0 24px; }
}

/* Which ending shows: data-cr-entry, set by paintModal() from where the popup was opened. The won
   screen (everything earned and the gift chosen) has its own layout and neither ending. While the
   free gift is still to be chosen (.cr-dialog--pick) the cart's "Explore picks for you" goes too
   (Kai, 25 Sept): every tier is earned, so there is nothing left to shop towards - the page is the
   gift. */
#cr-modal .cr-dialog[data-cr-entry="product"] .cr-end--cart,
#cr-modal .cr-dialog[data-cr-entry="cart"] .cr-end--product,
#cr-modal .cr-dialog:not([data-cr-entry]) .cr-end,
#cr-modal .cr-dialog--won .cr-end,
#cr-modal .cr-dialog--pick .cr-end--cart,
#cr-modal .cr-dialog--pick .cr-end--product,
#cr-modal .cr-dialog:not(.cr-dialog--pick) .cr-end--pick{ display:none; }

/* "Explore all" at the foot of the Explore page, centred like featured-collection's "View all". */
#cr-modal .ntf-picks-all{ display:flex; justify-content:center; padding:24px 16px 28px; }
#cr-modal .ntf-picks-all .button{ display:inline-flex; min-width:220px; justify-content:center; border-radius:0; }

/* The closed Explore sheet is out of the page, and the popup never scrolls sideways - a sheet parked
   off to the right with the theme's force-visible card images in it was both visible and reachable
   by a horizontal swipe (Kai, 25 Sept). */
#cr-modal .cr-ex.is-gone{ display:none; }
#cr-modal .cr-dialog{ overflow-x:hidden; }

/* role="button" pulls in the theme's BUTTON styling - [role="button"], [type="button"], .button in
   theme.css.liquid and css-variables.liquid: the button font and weight (500), the button text
   colour, a radius, and position:relative; z-index:10. These two rows are buttons for keyboards and
   screen readers only, and must read exactly like the text around them (Kai, 25 Sept: the
   free-shipping line had gone heavier than "Easy 60 day returns & exchanges" - measured 500 vs 400).
   Three classes of specificity, so the hover-state variants of the theme rule lose as well. */
.text-icon.ntf-ff-line[role="button"],
.text-icon.ntf-ff-line[role="button"]:hover,
.ntf-klarna-inline.ntf-klarna-tap[role="button"],
.ntf-klarna-inline.ntf-klarna-tap[role="button"]:hover{
  font-family:inherit; font-weight:inherit; font-style:inherit; color:inherit;
  border-radius:0; z-index:auto;
}

/* ---- Drawer: a line's price ends where the totals end (Kai, 25 Sept, Fix 10) -------------------
   Measured: the price stopped 17px short of Subtotal on a phone and 1px short at 1280px. The 16px
   is the theme's pr-4 on the item's text column (lg:pr-0 lifts it only from 1024px); the 1px is the
   browser's default padding on a table cell, which the items are. The totals below have neither. */
#CartDrawer .ntf-drawer-items td.flex.relative{ padding-right:0; }
#CartDrawer .ntf-drawer-items td.flex.relative > .pr-4.pl-4.flex-1{ padding-right:0; }

/* ---- The delivery sheet lays out the same in every box (Kai, 25 Sept, Fix 10b) -----------------
   Its first line kept a 2px margin inside the sheet only in the cart drawer, where a blanket
   overflow rule happened to make every element a new formatting context; on the product page and
   the cart page the same margin collapsed out of it. flow-root gives the sheet that context
   everywhere, so the drawer's spacing is the spacing - and it survives the drawer rule's removal. */
.ntf-ship{ display:flow-root; }

/* ---- The popups arrive the way the theme's own do (Kai, 25 Sept, Fixes 4 and 5) ----------------
   The theme's quick view, promotion, age and store-selector popups all enter with
   transition-all ease-in-out duration-500 from opacity-0 translate-y-1/3: the dim fades in and the
   panel rises from a third of its own height. The rewards popup and the gift page appeared in a
   single frame ("it just spawns in your face"). Same curve, same 500ms, same third, as a one-shot
   animation added on opening - how they close and repaint is unchanged. The dim animates its own
   colour rather than opacity, so it does not also fade the panel inside it. */
@keyframes ntfPopDim{ from{ background-color:rgba(16,14,10,0); } }
@keyframes ntfPopRise{ from{ opacity:0; transform:translateY(33%); } to{ opacity:1; transform:none; } }
#cr-modal.ntf-pop-in, #gcp-modal.ntf-pop-in{ animation:ntfPopDim .5s ease-in-out; }
#cr-modal.ntf-pop-in .cr-dialog, #gcp-modal.ntf-pop-in .gcp-dialog{ animation:ntfPopRise .5s ease-in-out; }
@media (prefers-reduced-motion:reduce){
  #cr-modal.ntf-pop-in, #gcp-modal.ntf-pop-in,
  #cr-modal.ntf-pop-in .cr-dialog, #gcp-modal.ntf-pop-in .gcp-dialog{ animation:none; }
}

/* ---- Phones: Picks for you is a page, not a card (Kai, 25 Sept) -------------------------------
   Edge to edge and top to bottom while the sheet is open: the popup's 18px frame and its rounded
   box are dropped, so the grid runs the full width of the screen like the collection page it is
   built from. Back returns to the popup at its own size. The frame is dropped by a class exOpen()
   puts on #cr-modal (not :has(), which is re-evaluated on every insertion - see setHtmlFlag). */
@media (max-width:767px){
  #cr-modal.ntf-exploring{ padding:0; }
  /* !important on max-height as well: the dialog's own cap (100vh - 40px) is !important in the
     popup's base rules, and it clamped this to 804px of an 844px screen - a strip of dim above. */
  #cr-modal .cr-dialog.is-exploring{ width:100%; max-width:none !important; height:100% !important;
    max-height:none !important; border-radius:0; }
}

/* ---- Phones: typing in a field no longer zooms the page (Kai, 25 Sept) --------------------------
   iOS Safari zooms in on any field whose text is smaller than 16px the moment it is focused, and
   stays zoomed after - the order note did exactly that. 16px on every field in the drawer, the
   cart page's panels, the popups and the gift-box personaliser; for the delivery sheet's country
   select the native control is not what is shown, so only the zoom changes. */
@media (max-width:767px){
  #CartDrawer :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
  .ntf-fpanel :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
  .ntf-ship select,
  #cr-modal :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
  #gcp-modal :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
  .gbp-overlay :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select){
    font-size:16px !important; }
}

/* ---- Phone menu: the language list is a dropdown under its row (Kai, 25 Sept) --------------------
   It opened UPWARD from the small EN toggle, calc(100vw - 32px) wide but anchored to the toggle's
   right edge - so it ran off the menu's left side and the codes were cut. Anchored to the whole
   row instead: it drops down below it, the full width of the menu, and each code sits on the
   menu's own 16px content edge like every item above it. */
.ntf-mnav-loc{ position:relative; }
.ntf-mnav-loc .localization-form-child{ position:static; }
.ntf-mnav-loc .locale-options{
  top:100% !important; bottom:auto !important; left:0 !important; right:0 !important;
  width:auto !important; max-width:none !important; max-height:none !important;
  box-shadow:0 10px 18px -8px rgba(0,0,0,.18); z-index:60; }
.ntf-mnav-loc .locale-options li{ padding:14px 16px !important; }

/* ---- Desktop drawer: the payment icons sit close to CHECK OUT (Kai, 25 Sept) --------------------
   Measured at 1280x800: 22px from the button to the icons and 29px under them. Above: the row's
   4px gap and 4px padding, the carousel's 9px margin, and 5px of slack - every carousel slide takes
   the height of the tallest one (the rating slides, 34px with their 4px padding) and the 24px icons
   sat centred in it. Below: the same 5px slack, 2px margin, the footer's 6px and the scroller's
   16px (md:pb-4). Now about 10px above and 12px below. Desktop only; the phone foot is unchanged. */
@media (min-width:768px){
  /* height:auto: the header group caps the row at 34px for the phone (a slide once measured 79px);
     here the tallest slide is the 24px icon row, and auto still grows if "+11" wraps the icons. */
  #CartDrawer .ntf-trust{ margin-top:2px; margin-bottom:0; height:auto; }
  #CartDrawer .ntf-trust-b, #CartDrawer .ntf-trust-c{ padding-top:0; padding-bottom:0; }
  #CartDrawer .footer-cart-drawer-mobile{ padding-bottom:0 !important; }
  #update-cart > .scrollbar-body{ padding-bottom:12px !important; }
}

/* ---- One call-to-action look store-wide: the product page's ADD TO CART (Kai, 25 Sept) ---------
   "Ensure all buttons are exactly the same design ... Check add to cart as example." Measured on the
   store (tools/tb-cta-survey.js): ADD TO CART is Montserrat 15.4px / 500, normal letter-spacing,
   capitals, 47px tall, black, square - 13.86px and 43px on a phone. Against it: "Got it" 11px / 800,
   tracked, 37px (fixed at its rule above); the drawer's CHECK OUT 600 and tracked; Explore picks,
   Explore all, Continue shopping, the note's Save and the gift page's buttons right in size and
   weight but in sentence case, and the gift page kept its desktop size on a phone. All of them take
   ADD TO CART's values here. The ghost and locked gift buttons keep their own fill and border. */
[name="checkout"], [name="checkout"] .button-text,
#CartDrawer .button.button-solid, #CartDrawer .button.button-solid .button-text,
#cr-modal .button.button-solid, #cr-modal .button.button-solid .button-text,
#ntf-klarna-modal .button.button-solid, #ntf-klarna-modal .button.button-solid .button-text,
#gcp-modal .gcp-cta, .gbp-primary{
  font-weight:500 !important; letter-spacing:normal !important; text-transform:uppercase !important; }
#gcp-modal .gcp-cta, .gbp-primary{ font-size:15.4px !important; line-height:15.4px; min-height:47px;
  padding:14px 16px; border-radius:0; }
#gcp-modal .gcp-cta:not(.gcp-cta--ghost):not(.gcp-cta--locked), .gbp-primary{ background:#000; }
/* Klarna's Got it: ADD TO CART's size too (it measured 15.2px everywhere, 13.86px is right on a phone).
   One element, moved between the drawer and the page, so both places follow (28 Sept). */
#ntf-klarna-modal .button.button-solid{ font-size:15.4px !important; line-height:15.4px; min-height:47px; }
@media (max-width:767px){
  .ntf-fdet-ok{ font-size:13.86px; line-height:13.86px; min-height:43px; padding:12px 16px; }
  #gcp-modal .gcp-cta, .gbp-primary{ font-size:13.86px !important; line-height:13.86px; min-height:43px;
    padding:12px 16px; }
  /* The theme's own buttons here measured 41px on a phone (10px padding); ADD TO CART is 43px. */
  [name="checkout"], #CartDrawer .button.button-solid, #cr-modal .button.button-solid,
  #ntf-klarna-modal .button.button-solid{ min-height:43px; }
  #ntf-klarna-modal .button.button-solid{ font-size:13.86px !important; line-height:13.86px; }
}

/* ---- The gift to choose (Kai, 25 Sept) -------------------------------------------------------------
   Every tier earned and no gift in the cart: .cr-dialog--pick (paintModal). The tiers, the shelf and
   the other endings give way to one job, the gift. Design: canvas "Choose Your Gift Popup" - the
   desktop artboard, and Mobile A (2 x 2) on phones. The Choose buttons are the theme's solid button,
   ADD TO CART's own; "Continue without gift" has the same size and type, outlined. */
#cr-modal .cr-pick{ display:none; }
#cr-modal .cr-dialog--pick .cr-pick{ display:block; }
#cr-modal .cr-dialog--pick .cr-a1{ display:none !important; }
#cr-modal .cr-dialog--pick .cr-main{ padding:32px 18px 0 !important; }
#cr-modal .cr-dialog--pick .cr-brandhead{ margin:0 36px 8px; font-size:11px; font-weight:500;
  letter-spacing:.26em; color:#7a7166; }
#cr-modal .cr-pick-h{ margin:0; font-size:22px; line-height:1.25; font-weight:500; color:#121110;
  text-align:center; text-transform:none; letter-spacing:0; }
#cr-modal .cr-pick-sub{ display:flex; justify-content:center; align-items:flex-start; gap:6px;
  margin:8px 0 0; font-size:13px; line-height:1.45; color:#6f6961; text-align:center; }
#cr-modal .cr-pick-sub[hidden]{ display:none; }
#cr-modal .cr-pick-tick{ flex-shrink:0; margin-top:2px; color:#2e6b44; }
#cr-modal .cr-pick-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 12px;
  margin-top:20px; }
#cr-modal .cr-pick-card{ display:flex; flex-direction:column; min-width:0; }
#cr-modal .cr-pick-open{ display:flex; flex-direction:column; width:100%; padding:0; border:0;
  background:transparent; color:#121110; font:inherit; text-align:left; cursor:pointer; }
#cr-modal .cr-pick-img{ position:relative; display:block; aspect-ratio:1 / 1; background:#e7e8e9;
  overflow:hidden; }
#cr-modal .cr-pick-img img{ display:block; width:100%; height:100%; object-fit:cover; }
/* The price: plain text under the name, no badge on the photo (Kai, 25 Sept: "Remove the badge of
   the gifts ... in just text style", then "swap the position of price and gift" and "make the FREE in
   capitals" - uppercase in CSS, so GRATIS / KOSTENLOS / GRATUIT follow). */
#cr-modal .cr-pick-pr{ display:flex; align-items:baseline; gap:5px; margin:3px 0 10px; font-size:12px;
  line-height:1.2; }
#cr-modal .cr-pick-pr s{ color:#77716a; }
#cr-modal .cr-pick-pr b{ font-weight:600; color:#2e6b44; text-transform:uppercase; letter-spacing:.02em; }
/* The button sits just under the name, not under a reserved second line (Kai, 25 Sept: "put the
   buttons on mobile closer to the title", then the same for desktop; the gift names are one line
   now). margin-top:auto keeps the buttons of a row level when one name does wrap - the grid gives
   every card in a row the row's height. */
#cr-modal .cr-pick-nm{ display:block; margin-top:8px; font-size:13px; line-height:1.35; }
#cr-modal .cr-pick-go{ width:100%; margin-top:auto; justify-content:center; border-radius:0; min-height:43px; }
/* CHOOSE 20% smaller than ADD TO CART's type (Kai, 25 Sept); the button keeps its height. */
#cr-modal .cr-pick-go, #cr-modal .cr-pick-go > span{ font-size:11.09px !important; }
#cr-modal .cr-end--pick{ display:flex; flex-direction:column; gap:10px; padding:20px 18px 20px; }
#cr-modal .cr-pick-skip{ width:100%; min-height:43px; box-sizing:border-box; margin:0; padding:12px 16px;
  border:1px solid #121110; border-radius:0; background:#fff; color:#121110; font-family:inherit;
  font-size:13.86px; font-weight:500; line-height:13.86px; letter-spacing:normal; text-transform:uppercase;
  cursor:pointer; }
#cr-modal .cr-pick-note{ margin:0; font-size:12px; line-height:1.4; text-align:center; color:#736d65; }
@media (min-width:768px){
  #cr-modal .cr-dialog--a1.cr-dialog--pick{ max-width:880px; }
  #cr-modal .cr-dialog--pick .cr-main{ padding:46px 48px 0 !important; }
  #cr-modal .cr-dialog--pick .cr-brandhead{ margin:0 40px 10px; font-size:12px; letter-spacing:.28em; }
  #cr-modal .cr-pick-h{ font-size:30px; line-height:1.2; }
  #cr-modal .cr-pick-sub{ margin-top:10px; gap:7px; font-size:14px; line-height:1.5; }
  #cr-modal .cr-pick-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-top:30px; }
  /* Fewer than four gifts: cards keep the four-column width, centred, rather than growing. */
  #cr-modal .cr-pick-grid[data-cr-n="1"]{ grid-template-columns:minmax(0, 183px); justify-content:center; }
  #cr-modal .cr-pick-grid[data-cr-n="2"]{ grid-template-columns:repeat(2, minmax(0, 183px)); justify-content:center; }
  #cr-modal .cr-pick-grid[data-cr-n="3"]{ grid-template-columns:repeat(3, minmax(0, 183px)); justify-content:center; }
  #cr-modal .cr-pick-nm{ margin-top:12px; font-size:14px; }
  #cr-modal .cr-pick-pr{ gap:6px; margin:4px 0 12px; font-size:13px; }
  #cr-modal .cr-pick-go{ min-height:47px; }
  #cr-modal .cr-pick-go, #cr-modal .cr-pick-go > span{ font-size:12.32px !important; }
  #cr-modal .cr-end--pick{ align-items:center; gap:12px; padding:34px 48px 36px; }
  #cr-modal .cr-pick-skip{ width:360px; min-height:47px; padding:14px 16px; font-size:15.4px; line-height:15.4px; }
  #cr-modal .cr-pick-note{ font-size:12.5px; }
}

/* Opened by the checkout gate (ntf-cart.js): the customer is already on the way to checkout, so
   "You can still choose it from your cart before checkout" is not said (Kai, 25 Sept). */
#cr-modal .cr-dialog--checkout .cr-pick-note{ display:none; }

/* ---- Every close X turns like the theme's (Kai, 25 Sept) ------------------------------------------
   The theme turns its X half a turn on hover: .group-close-btn:hover .icon-close-animation,
   rotate(180deg) over .5s cubic-bezier(.3, 1, .3, 1) (theme.css / secondary-css). Ours now do the
   same: the rewards popup, the Explore sheet, the gift picker, the gift-box personaliser, the delivery
   and note panels, Klarna. The four that were a "×" character are an SVG X of the same size (1em of
   their own font-size), because a character is not centred in its box and would wobble as it turns.
   Pointer devices only: on a phone a tap leaves :hover stuck, and the theme's X does not turn there
   either. */
.ntf-x{ display:block; margin:auto; }
@media (hover:hover){
  .ntf-x, .ntf-fpanel-x svg, .ntf-klarna-close svg{ transition:transform .5s cubic-bezier(.3, 1, .3, 1); }
  #cr-close:hover .ntf-x, .cr-ex-close:hover .ntf-x, #gcp-close:hover .ntf-x, #gbp-close:hover .ntf-x,
  .ntf-fpanel-x:hover svg, .ntf-klarna-close:hover svg{ transform:rotate(180deg); }
}

/* The tick before "Free shipping and 10% off are already applied" is a stroke, never a fill (Kai,
   28 Sept: "the checkmark is not showing up fully"). The theme fills icon paths with the text
   colour, which closed the open tick into a small green wedge. */
#cr-modal .cr-pick-tick path{ fill:none !important; }

/* ---- The shelf's price: text under the name, like the gift page (Kai, 28 Sept) -------------------
   "When gift is not unlocked yet, it still shows the badges on the image. Fix this as well just like
   the page when it is unlocked. Price and free under the title." Replaces the 24 Sept badge: the
   struck price in grey and FREE in green capitals, in the flow under the name. */
#cr-modal .cr-dialog--a1 .cr-a1-nm{ padding-bottom:0; }
#cr-modal .cr-dialog--a1 .cr-a1-pr{ position:static; display:flex; align-items:baseline; gap:4px; margin:2px 0 0;
  padding:0; background:none; box-shadow:none; font-size:10px; line-height:1.2; white-space:nowrap; }
#cr-modal .cr-dialog--a1 .cr-a1-pr s{ color:#77716a; }
#cr-modal .cr-dialog--a1 .cr-a1-pr b{ color:#2e6b44; font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
@media (min-width:768px){
  #cr-modal .cr-dialog--a1 .cr-a1-pr{ gap:6px; margin-top:4px; font-size:12.5px; }
}

/* The gift to choose, opened from the cart (the drawer or the cart page): only the heading, the gifts
   and the way out (Kai, 28 Sept: "Remove the Autumn Essentials and the free shipping and 10% off
   already applied. To save more vertical space. Also remove the sentence, You can still choose it
   from your cart before checkout. This is odd, when this popup is in the cart already."). From the
   product page all three stay: there the note is true and the campaign name is the context. */
#cr-modal .cr-dialog--pick[data-cr-entry="cart"] .cr-brandhead,
#cr-modal .cr-dialog--pick[data-cr-entry="cart"] .cr-pick-sub,
#cr-modal .cr-dialog--pick[data-cr-entry="cart"] .cr-pick-note{ display:none !important; }