/** Shopify CDN: Minification failed

Line 754:0 Unexpected "}"

**/
/* ============================================================
   Fortuna TCG — custom.css
   The single home for site-wide custom CSS (replaces the theme
   Custom CSS box). Loaded once via snippets/custom-styles.liquid.

   Rules of the road:
   - Brand tokens live in :root below. Change a colour here, not in
     30 places. Reference them with var(--ft-*).
   - Everything here OVERRIDES native Horizon classes, so these
     selectors depend on Horizon's current class names. If a style
     silently stops applying after a theme update, the class was
     renamed — re-check it in DevTools. Function never breaks; only
     the styling drops off.
   - Component-specific CSS does NOT belong here. Keep that in the
     section/block's own scoped {% style %} (as the hero already does).
   ============================================================ */

:root {
  /* Brand palette — single source of truth */
  --ft-purple:        var(--color-primary, #5b3fd6);  /* accent — inherits Theme settings → Colors → scheme 1 → Primary (#5b3fd6); logo keeps its own lighter purple */
  --ft-purple-hover:  #3f2a9e;
  --ft-purple-deep:   var(--color-primary, #5b3fd6);
  --ft-lilac-surface: #f7f4fe;
  --ft-lilac-pill:    #f1eefe;
  --ft-lilac-border:  #e6e0fb;
  --ft-pink:          #ff5d8f;
  --ft-ink:           #1c1530;
  --ft-muted:         #6a6280;
  --ft-border:        #ece8f4;
  --ft-mint:          #10b5a3;  /* "New" badge — use INK text on it (white fails contrast) */
  --ft-sale:          #d0262b;  /* "Sale" badge + sale price (Option 1 "Signal red", 14 Oct 2026; replaced pink) */
  --ft-gold:          #ffc23d;
  --ft-green:         #15803d;

  /* Layout */
  --ft-maxw:          1240px;   /* page content width */
}
/* --ft-purple inherits the theme's scheme-1 Primary (Horizon writes --color-primary to :root),
   so changing Theme settings → Colors → Primary recolours these overrides too (since 14 Oct 2026).
   The fallback hex only applies if Horizon ever stops emitting --color-primary. */


/* ---------- Navigation / global ---------- */
.menu-list__link {
  font-weight: 500 !important;
}


/* ---------- Product page ---------- */
/* Selected gallery thumbnail */
.slideshow-controls__thumbnail[aria-selected="true"] {
  border-color: var(--ft-purple) !important;
  outline-color: var(--ft-purple) !important;
}

/* Variant pills — visual only; native variant picker behaviour untouched */
.variant-option__button-label {
  min-width: 140px;
}
.variant-option__button-label__pill {
  transition: none !important;
}
.variant-option__button-label__text,
.variant-option legend {
  font-weight: 700 !important;
}
/* Selected-pill colours (white fill, purple border + text) are now driven by
   the native Selected variants colour settings — see Theme settings > Colors.
   No CSS needed; base.css maps those to --color-selected-variant-*. */

/* Product title on mobile */
@media (max-width: 749px) {
  .product-details h1 {
    font-size: 1.6rem !important;
    line-height: 1.15 !important;
  }
}

/* Constrain product info block to page width */
.product-information {
  max-width: var(--ft-maxw);
  margin-inline: auto;
}


/* ---------- Collection / facets ---------- */
.facets__label {
  font-family: Fredoka, sans-serif !important;  /* requires Fredoka loaded globally — see custom-styles.liquid */
  font-weight: 700 !important;
}
.facets__summary .icon-caret {
  color: var(--ft-purple);
}
/* Checked filter checkbox: purple box + white tick. The native tick stroke is
   var(--color-background), which is transparent in this collection's scheme, so
   the tick was invisible — force it white. */
.facets .checkbox__input:checked + .checkbox__label .icon-checkmark {
  background-color: var(--ft-purple);
  border-color: var(--ft-purple);
}
.facets .checkbox__input:checked + .checkbox__label .icon-checkmark path {
  stroke: #fff;
}
/* Reset / Clear all link */
.facets__clear-all-link {
  color: var(--ft-purple);
}
.facets-remove__pill,
.pills__pill {
  background: var(--ft-lilac-pill) !important;
  border-color: var(--ft-lilac-border) !important;
  color: var(--ft-purple) !important;
}
.price-facet__input:focus {
  border-color: var(--ft-purple) !important;
  outline-color: var(--ft-purple) !important;
}


/* ---------- Collection — product cards ---------- */
/* Constrain the collection to page width, like the home & product pages */
.product-grid-container {
  max-width: var(--ft-maxw);
  margin-inline: auto;
}

/* (Lilac image tile is set in the card's own custom_css: .product-media-container) */

/* Native review stars: gold per brand; keep the review-count text dark + aligned */
.rating-wrapper {
  --star-fill-color: var(--ft-gold);
  --star-fill-color-rgb: 255 194 61;
}
.rating-count,
.rating-count-separator {
  color: var(--ft-ink) !important;
}
.product-card .rating-wrapper {
  padding-inline-start: 8px;
}
@media (max-width: 749px) {
  /* Purple quick-add "+" so it reads against the lilac tile */
  .product-card .quick-add__button {
    background: var(--ft-purple) !important;
    color: #fff !important;
    border-color: var(--ft-purple) !important;
  }
}


/* ---------- Product cards: collection + search grids (single source of truth) ----------
   Relocated here from per-template section custom_css that was duplicated across the
   collection, 4 language, and search templates. Scoped to .product-grid-container — the
   wrapper rendered ONLY by main-collection + search-results — so it matches the old
   per-template scope exactly and never touches the product-page gallery or related-products
   carousels (which share .product-media-* / .product-card classes but not this container). */
.product-grid-container .product-card,
.product-grid-container .product-card__content { height: 100%; }
/* The grid card is laid out to match snippets/ft-product-card (the carousel card): lilac tile,
   LANGUAGE · TYPE eyebrow, 3-line Figtree title, Fredoka price with the stars beside it (desktop) /
   language-only eyebrow with the stars beside it (phones), pill button on desktop only.
   Blocks come from the template JSON (ft_eyebrow, ft_eyebrow_mobile, product-title, review,
   price, buy-buttons); this CSS only places and styles them — native card behaviour untouched. */
.product-grid-container .product-card__content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "gallery gallery" "eyebrow eyebrow" "title title" "price rating" "buy buy";
  grid-template-rows: auto auto 1fr auto auto;
  align-items: start; column-gap: 8px; row-gap: 0;
  border: 1px solid var(--ft-border);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  padding: 0 0 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
  .product-grid-container product-card:hover .product-card__content { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(80,40,200,.28); }
}
.product-grid-container .product-card__content > .card-gallery { grid-area: gallery; }
.product-grid-container .product-card__content > .product-grid-view-zoom-out--details { display: none; }
.product-grid-container .product-card__content > .text-block[class*="__ft_eyebrow"] { grid-area: eyebrow; padding: 16px 16px 0 !important; min-width: 0; }
.product-grid-container .product-card__content > .text-block[class*="__ft_eyebrow_mobile"] { display: none; }
.product-grid-container .product-card__content > .text-block[class*="__ft_eyebrow"] p { font-family: "Figtree", sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--ft-purple) !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-grid-container .product-card__content > a > .text-block { grid-area: title; padding: 6px 16px 0 !important; }
.product-grid-container .product-card [role="heading"] { font-family: "Figtree", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--ft-ink) !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.3em * 3); text-wrap: wrap !important; } /* the block's "pretty" wrap rebalanced each title differently, so identical prefixes broke at different points */
.product-grid-container .product-card__content > product-price { grid-area: price; align-self: center; padding: 0 0 0 16px !important; margin-top: 10px; }
.product-grid-container .product-card__content > product-price .price { font-family: "Fredoka", sans-serif !important; font-size: 19px !important; font-weight: 800 !important; color: var(--ft-ink); letter-spacing: 0 !important; }
.product-grid-container .product-card__content > product-price .compare-at-price { font-family: "Figtree", sans-serif; font-size: 13px; color: var(--ft-muted); }
.product-grid-container .product-card__content > .rating-wrapper { grid-area: rating; align-self: center; justify-self: end; padding: 0 16px 0 0 !important; margin-top: 10px; gap: 6px; --star-fill-color: var(--ft-gold); color: var(--ft-gold); }
.product-grid-container .product-card__content > .rating-wrapper .rating svg { width: 13px; height: 13px; }
.product-grid-container .product-card__content > .rating-wrapper .rating-count { font-size: 12px !important; color: var(--ft-muted) !important; white-space: nowrap; }
/* Two review blocks per card: the first (five stars + count) shows from tablet up beside the price; the second
   (single star + score, template block ft_rating_mobile) shows on phones on the eyebrow row */
.product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper { display: none; }
.product-grid-container .product-card__content > .buy-buttons-block { grid-area: buy; padding: 12px 16px 0 !important; }
.product-grid-container .product-card__content > .buy-buttons-block .product-form-buttons { padding: 0 !important; }
@media (max-width: 749px) {
  .product-grid-container .product-card__content { grid-template-areas: "gallery gallery" "eyebrow rating" "title title" "price price"; grid-template-rows: auto auto 1fr auto; padding: 0 0 12px !important; } /* Horizon adds 8px inline padding on phones — the blocks carry their own */
  .product-grid-container .product-card__content > .rating-wrapper:has(+ .rating-wrapper) { display: none; }
  /* star + score boxes are 14px tall like the eyebrow line, so the row's centres line up */
  .product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper { display: flex; align-items: center; gap: 3px; align-self: start; }
  .product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper .rating { display: flex; align-items: center; height: 14px; line-height: 14px; }
  .product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper .rating svg { display: block; width: 12px; height: 12px; }
  .product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper .rating-count { display: flex; align-items: center; height: 14px; margin: 0; padding: 0; font-family: "Figtree", sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; color: #000 !important; line-height: 14px !important; }
  .product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper .rating-count-separator { display: none; }
  /* Horizon colours the score's inner span from its --color variable (the scheme Primary) — force it black */
  .product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper { --color: #000; }
  .product-grid-container .product-card__content > .rating-wrapper + .rating-wrapper .rating-count span { color: #000 !important; }
  .product-grid-container .product-card__content > .text-block[class*="__ft_eyebrow"] { display: none; }
  .product-grid-container .product-card__content > .text-block[class*="__ft_eyebrow_mobile"] { display: flex; padding: 12px 0 0 12px !important; }
  .product-grid-container .product-card__content > a > .text-block { padding: 4px 12px 0 !important; }
  .product-grid-container .product-card [role="heading"] { font-size: 13px !important; -webkit-line-clamp: 4; min-height: calc(1.3em * 4); }
  .product-grid-container .product-card__content > .rating-wrapper { padding: 12px 12px 0 0 !important; margin-top: 0; }
  .product-grid-container .product-card__content > .rating-wrapper .rating svg { width: 11px; height: 11px; }
  .product-grid-container .product-card__content > .rating-wrapper:has(+ .rating-wrapper) .rating-count { display: none; }
  .product-grid-container .product-card__content > product-price { padding: 0 12px !important; margin-top: 4px; }
  .product-grid-container .product-card__content > product-price .price { font-size: 17px !important; }
  .product-grid-container .product-card__content > .buy-buttons-block { display: none; }
}
.product-grid-container .product-media-container { background: var(--ft-lilac-surface) !important; }
.product-grid-container .product-media__image { object-fit: contain !important; mix-blend-mode: multiply; }
/* Grid "Sold out" button (disabled add-to-cart): white with greyed text, like the secondary hover state */
.product-grid-container .add-to-cart-button:disabled, .product-grid-container .add-to-cart-button[disabled] { background: #fff !important; color: var(--ft-muted, #6a6280) !important; box-shadow: inset 0 0 0 1px var(--ft-border, #ece8f4) !important; opacity: 1 !important; }
@media (max-width: 749px) {
  .product-grid-container .product-card .add-to-cart-button:not(.quick-add__button) { display: none !important; }
}

/* Sold-out / sale badge → top-right + carousel pill look (matches ft-product-carousel).
   Colour comes from each badge's theme colour scheme (set Sold-out scheme to grey to
   match the carousel — Theme settings → Product cards → badge colour schemes). */
.product-grid-container .product-badges { top: 12px !important; right: 12px !important; left: auto !important; bottom: auto !important; z-index: 3; }
.product-grid-container .product-badges__badge { border-radius: 999px !important; font-family: "Figtree", sans-serif; font-weight: 800 !important; font-size: 11px !important; letter-spacing: .02em; text-transform: none; padding: 5px 10px !important; }


/* ---------- Cart (page + drawer) ---------- */
/* The free-shipping bar (theme block) renders in .cart-page__more-blocks, after
   the items by default. Reorder so it sits above the items. Summary is explicitly
   grid-placed, so order only affects the auto-placed title/items/more-blocks. */
.cart-page__title {
  order: 1;
}
.cart-page__more-blocks {
  order: 2;
  margin-block-start: var(--margin-lg);
}
.cart-page__items {
  order: 3;
}
.cart-page__summary {
  order: 4; /* keep summary after items on mobile (default order:0 floated it above) */
}

/* Headings → Fredoka (applies to /cart and the drawer) */
.cart-title,
.cart-drawer__heading,
.cart-drawer__heading--empty {
  font-family: Fredoka, sans-serif !important;
  font-weight: 700 !important;
}

/* Lilac product tiles, contained images */
.cart-items__media-container {
  background: var(--ft-lilac-surface);
  border-radius: 12px;
  overflow: hidden;
}
.cart-items__media-image {
  object-fit: contain !important;
}

/* Item title + Fredoka price */
.cart-items__title {
  font-weight: 700 !important;
}
/* Cap the title height so an extremely narrow column (e.g. just before the cart
   stacks, or in the drawer) can't grow a tall sliver of text — clamp to 3 lines
   and break only long words. */
.cart-items__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}
/* Money values → Fredoka, not bold (subtotal, discount, item price, total) */
.cart-items__price,
.cart-items__price-unit,
.cart-totals__original-value,
.cart-totals__original-label,
.cart-discounts,
.cart-totals__total-value,
.cart-totals__total-label {
  font-family: Fredoka, sans-serif !important;
  font-weight: 500 !important;
}
/* Subtotal + discount match the line-item price size */
.cart-items__price,
.cart-totals__original-value,
.cart-totals__original-label,
.cart-discounts {
  font-size: 1.05rem !important;
}

/* Remove → muted */
.cart-items__remove {
  color: var(--ft-muted) !important;
}

/* Quantity stepper → brand pill */
.cart-items__quantity .quantity-selector {
  border-radius: 999px !important;
  border: 2px solid var(--ft-border) !important;
}

/* Order total → Fredoka */
.cart-totals__total-value {
  font-weight: 600 !important;
  font-size: 1.3rem !important;
}
.cart-totals__total-label {
  font-weight: 500 !important;
  font-size: 1.05rem !important;
}

/* Discount code input → pill */
.cart-discount .field__input,
.cart-discount input[type='text'] {
  border-radius: 999px !important;
}

/* Checkout button → black pill, slightly larger theme-font text */
.cart__checkout-button {
  background: var(--ft-ink) !important;
  border-color: var(--ft-ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: Fredoka, sans-serif !important;
  font-size: 1.1rem !important;
}
.cart__checkout-button:hover {
  background: #000 !important;
  border-color: #000 !important;
}

/* Empty cart → purple pill "Continue shopping" (page + drawer) */
.cart-items__empty-button {
  background: var(--ft-purple) !important;
  border-color: var(--ft-purple) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* Drawer empty state — branded icon + centred layout to match the cart-page empty
   block (blocks/ft-cart-empty). Anchored on the empty heading via :has() so it works
   for BOTH the server-rendered empty cart AND the JS "emptied to zero" template (which
   can omit the .cart-drawer--empty modifier). !important beats Horizon's own rule,
   which is inline in the body and so wins the cascade otherwise. Populated drawer is
   untouched (its .cart-drawer__content has no empty heading). */
.cart-drawer__content:has(.cart-drawer__heading--empty) {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px;
  padding: 24px 24px 40px !important;
}
.cart-drawer__heading--empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 1.5rem !important;
  line-height: 1.2;
  margin: 0 0 4px !important;
  max-width: 22rem;
}
.cart-drawer__heading--empty::before {
  content: "";
  flex: none;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background-color: var(--ft-lilac-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23776dfd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='11.5' height='13.5' rx='2'/%3E%3Cpath d='M8 7V5.6A1.6 1.6 0 0 1 9.6 4h8.8A1.6 1.6 0 0 1 20 5.6v11a1.6 1.6 0 0 1-1.6 1.6H15'/%3E%3Cpath d='M9.25 11.5l.9 1.85 1.85.9-1.85.9-.9 1.85-.9-1.85-1.85-.9 1.85-.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}
.cart-drawer__content:has(.cart-drawer__heading--empty) .cart-items__empty-button {
  margin-top: 12px;
}

/* Drop the orphaned top divider above "Discount": .cart-actions carries a
   border-block (top + bottom); when no cart-level discount applies, the subtotal
   container above it is :empty/hidden, leaving that top border stranded. */
.cart-totals__original-container:empty + .cart-actions {
  border-block-start: none;
}

/* Dispatch countdown lives in cart more-blocks (under the free-shipping bar);
   hide it on the empty cart — "order now" makes no sense with nothing in it. */
.cart-page--empty .ft-dc {
  display: none;
}

/* Make the dispatch strip match the free-shipping bar (same green surface,
   border, radius, padding, font + a plain green icon instead of the filled
   circle) so the two read as a matched pair. Scoped to cart + drawer only;
   the product page keeps the block's own styling. */
.cart-page .ft-dc,
.cart-drawer .ft-dc {
  gap: 8px;
  background: #eafaf0;
  border: 1px solid #c6efd6;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--ft-green);
}
/* Higher specificity than the block's inline .ft-dc--<uid> .ft-dc__icon rule
   (which renders later in the body), so the plain icon wins. */
.cart-page .ft-dc .ft-dc__icon,
.cart-drawer .ft-dc .ft-dc__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--ft-green);
}
/* Tighter in the narrow drawer, mirroring .ft-fsb--compact */
.cart-drawer .ft-dc {
  padding: 13px 15px;
  border-radius: 14px;
  margin-bottom: 10px;
  font-size: 12.5px;
}

/* Merge the free-shipping bar + dispatch strip into ONE segmented card: square
   off the touching corners, drop the gap, and let the free-shipping bar's bottom
   border be the single divider (so remove the dispatch strip's top border). The
   rows are allowed to differ in height — they read as rows of one card. */
.cart-page .ft-fsb,
.cart-drawer .ft-fsb {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.cart-page .ft-dc,
.cart-drawer .ft-dc {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* In the drawer the card sits in the zero-padding .cart-drawer__content, so inset
   it to match the items' horizontal padding (same vars Horizon uses on the rows). */
.cart-drawer .ft-fsb,
.cart-drawer .ft-dc {
  margin-inline: var(--cart-drawer-padding);
}
@media (min-width: 750px) {
  .cart-drawer .ft-fsb,
  .cart-drawer .ft-dc {
    margin-inline: var(--cart-drawer-padding-desktop);
  }
}

/* Mobile cart page: bigger product images — there's room (drawer stays compact) */
@media (max-width: 749px) {
  .cart-page .cart-items__table-row {
    grid-template-columns: clamp(3.5rem, 19cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
  }
}

/* Desktop cart layout */
@media (min-width: 750px) {
  /* Theme page width is "normal" (1920px), so cap the cart on big screens.
     IMPORTANT: cap with justify-self + max-width, NOT margin-inline:auto — auto
     margins on a grid item disable stretch and shrink-wrap it to its content,
     which collapsed the whole cart (and squashed the item titles).
     Wider, capped summary so it reads as a substantial card but never bleeds to
     the page edge; items keep a stable minmax(0,1fr) that can't be squeezed. */
  .section .cart-page {
    width: 100%;
    max-width: 1500px;
    justify-self: center;
    /* Proportional summary track: ~42% of the cart so it shrinks with the cart
       in the narrow desktop band (keeping the items column usable, no squashed
       titles just before stacking) yet still reads big at normal width and is
       capped at 34rem on large screens. */
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 42%, 34rem);
  }
  /* Summary as a soft contained card. With "extend summary" off, the white
     background + padding live on .cart-summary__inner, so the card border/radius
     must sit there (styling the outer cell would leave square white corners). */
  .cart-page .cart-summary__inner {
    border: 1px solid var(--ft-border);
    border-radius: 20px;
  }
  /* Keep the free-shipping bar from forcing the items column wider when the £50
     message swaps length. (Item images use Horizon's native 7.5rem column here —
     overriding the row template fought its 4-area desktop grid and squashed the
     title; the mobile image bump below is safe because it matches the 3-area row.) */
  .cart-page__more-blocks {
    min-width: 0;
  }
}


/* ---------- Search (results page header + predictive popup) ---------- */
/* Visual only — native search behaviour (form submit, predictive fetch) untouched.
   The results grid reuses the collection's already-styled .product-grid cards. */

/* Results-page header: the purple title band is the ft-collection-banner section in search mode
   (templates/search.json). Hide the native plain h3 so it isn't duplicated and keep the native
   search input compact under the band; the result count is in the band's intro line. */
.search-page__header {
  max-width: var(--ft-maxw);
  margin-inline: auto;
  padding-block: 0 !important;
}
.search-page__header .search-page-input__parent { margin-block: 0 !important; }
.search-page__header search-page-input-component { margin-block: 6px 8px !important; } /* Horizon gives the input 24px above / 13px below; band pb 10 + 6 = 16 above, 8 + section pb 8 = 16 below */
.section:has(> .search-page__header) { padding-block: 0 8px !important; }
.search-page__header h3 {
  display: none !important;
}
.search-page-input__parent {
  position: relative;
}
.search-page-input {
  border: 1px solid var(--ft-border) !important;
  border-radius: 999px !important;
  background: var(--ft-lilac-surface) !important;
  color: var(--ft-ink) !important;
  padding-block: 0.85rem !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.search-page-input:focus,
.search-page-input:focus-visible {
  border-color: var(--ft-purple) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-purple) 18%, transparent) !important;
  outline: none !important;
}
.search-page__header .search__icon { color: var(--ft-purple); }
.search__reset-button { color: var(--ft-muted); }
.search__reset-button:hover { color: var(--ft-purple); }

/* /search + collection grids: 10px side gutter on mobile (grids are full-width on mobile
   by setting). Scoped to those templates ([data-template^="collection"] also covers the
   language variants collection.english/japanese/korean/chinese). */
@media (max-width: 749px) {
  [data-template="search"] .product-grid-container,
  [data-template^="collection"] .product-grid-container {
    padding-inline: 10px;
  }
}

/* Collection pages: 20px desktop side gutters (was 40px). The banner and the product
   grid both reference --page-margin, so overriding it keeps them aligned. The first rule
   covers the custom banner (inherits from <main>); the .page-width-* rules override
   Horizon's per-section 40px so the native grid matches. Mobile keeps the 10px above. */
@media (min-width: 750px) {
  [data-template^="collection"] { --page-margin: 20px; }
  [data-template^="collection"] .page-width-wide,
  [data-template^="collection"] .page-width-normal,
  [data-template^="collection"] .page-width-narrow,
  [data-template^="collection"] .page-width-content { --page-margin: 20px; }
}

/* Predictive search results container — no border/shadow: it renders inside the search
   modal, which already provides the card. (Earlier border was redundant → showed as an
   outer box around all the products.) */
.predictive-search-dropdown {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.predictive-search-results__inner { padding: 4px !important; }
.predictive-search-results__wrapper-queries .predictive-search-results__list { gap: 8px; }
/* Suggestion / query pills → brand lilac chips */
.predictive-search-results__pill,
.predictive-search-dropdown .pills__pill {
  background: var(--ft-lilac-pill) !important;
  border: 1px solid var(--ft-lilac-border) !important;
  color: var(--ft-purple) !important;
  border-radius: 999px !important;
  font-weight: 600;
}
.predictive-search-results__pill:hover,
.predictive-search-dropdown .pills__pill:hover {
  background: var(--ft-purple) !important;
  color: #fff !important;
  border-color: var(--ft-purple) !important;
}
.predictive-search-results__card--query { font-family: Fredoka, sans-serif; }
.predictive-search-results__no-results,
.search-results__no-results { color: var(--ft-muted); }
.predictive-search-results__title { font-family: Fredoka, sans-serif !important; font-weight: 600 !important; }

/* /search page input: centre + widen the box (the native component caps width at the
   block's 50% setting, leaving it tiny), and hide the browser's native type=search
   clear button so only the theme's reset X shows (was a double-X). */
.search-page__header .search-page-input__parent { align-items: center !important; }
.search-page__header search-page-input-component {
  max-width: 600px !important;
  width: 100% !important;
  margin-inline: auto !important;
}
.search-page-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-page-input::-webkit-search-decoration { -webkit-appearance: none; }

/* Search popup / predictive results: product images were rendered via Horizon's
   resource-card at a hardcoded 4/5 ratio (cropping the box art). Force square tiles
   with the product contained on lilac, matching the collection cards. */
.predictive-search-results__card--product .resource-card__media {
  --resource-card-aspect-ratio: 1 / 1 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: var(--ft-lilac-surface);
  border-radius: 12px;
}
.predictive-search-results__card--product .resource-card__media img,
.predictive-search-results__card--product .resource-card__image {
  object-fit: contain !important;
  background: var(--ft-lilac-surface);
}
.predictive-search-results__card--product .resource-card__title { font-weight: 600; }
.predictive-search-results__card--product .price { font-family: Fredoka, sans-serif; font-weight: 700; }

/* ---- Search MODAL popup (search-modal / predictive-search-form) ----
   Verified against snippets/search-modal.liquid. The modal reuses the
   .predictive-search-results__* + resource-card classes styled above; these rules
   brand the modal's own chrome (input box, icon, footer "View all"). Visual only —
   the predictive-search web component behaviour is untouched. */

/* Round the popup product/result cards to match the brand (native corner settings
   default to 0/sharp). The radius is on .resource-card__image via
   var(--resource-card-corner-radius), which the component sets INLINE from the theme
   setting — so the override must be !important ON the component (beats inline) plus on
   the image itself. No theme-settings change needed. */
.search-modal predictive-search-component,
.predictive-search-dropdown {
  --product-corner-radius: 12px !important;
  --card-corner-radius: 12px !important;
  --resource-card-corner-radius: 12px !important;
}
.search-modal .resource-card__image,
.search-modal .resource-card__image--secondary,
.search-modal .resource-card__media,
.predictive-search-results__card--product .resource-card__image {
  border-radius: 12px !important;
}

/* Give popup PRODUCT cards a white card with border + lilac tile, like the
   collection/search cards. Scoped to product results only (collections/pages/article
   result cards keep their plain look). The card's overflow:hidden + radius rounds the
   tile, so the lilac sits FLUSH (no padding on the card → no white gap); only the text
   is padded. */
.search-modal .predictive-search-results__card--product .resource-card {
  border: 1px solid var(--ft-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.search-modal .predictive-search-results__card--product .resource-card__media {
  background: var(--ft-lilac-surface) !important;
  border-radius: 0 !important;
}
.search-modal .predictive-search-results__card--product .resource-card__image {
  border-radius: 0 !important;
}
.search-modal .predictive-search-results__card--product .resource-card__content {
  padding: 8px 10px 10px;
}

/* Breathing room around the search bar + results (modal content is flush by default) */
.search-modal__content { padding: 16px !important; }

/* Input box → ONE lilac pill. Only the inner box is styled; the outer header wrapper is
   reset to transparent (styling both made two stacked pill borders that looked like an
   overflowing border on focus). Native focus outline killed so there's a single clean
   ring. */
.search-modal .predictive-search-form__header {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.search-modal .predictive-search-form__header-inner {
  background: var(--ft-lilac-surface) !important;
  border-radius: 999px !important;
  border: 1px solid var(--ft-border) !important;
}
.search-modal .predictive-search-form__header-inner:focus-within {
  border-color: var(--ft-purple) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-purple) 18%, transparent) !important;
  outline: none !important;
}
.search-modal .predictive-search__icon { color: var(--ft-purple) !important; }
.search-modal .predictive-search__reset-button:hover { color: var(--ft-purple) !important; }
/* Hide the browser's native type=search clear button so only the theme's reset X shows
   (was a double-X in the popup, same issue as the /search page input). */
.search-modal .search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-modal .search-input::-webkit-search-decoration { -webkit-appearance: none; }

/* Section titles ("Recently viewed", "Products") → Fredoka */
.search-modal .predictive-search-results__title { font-family: Fredoka, sans-serif !important; font-weight: 600 !important; }

/* Footer "View all results" → brand purple pill */
.search-modal .predictive-search__search-button {
  background: var(--ft-purple) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  border: none !important;
}
.search-modal .predictive-search__search-button:hover { background: var(--ft-purple-hover) !important; }

/* "Clear" recently-viewed link → purple */
.search-modal .predictive-search-results__header a,
.search-modal .predictive-search-results__clear { color: var(--ft-purple) !important; font-weight: 600; }


/* ---------- Header width ---------- */
/* Constrain the header content to the same 1440px container as the homepage
   sections (ft-hero-carousel / ft-product-carousel / ft-language-list use
   max-width:1440px incl. 20px side padding → 1400px content), on EVERY page
   (Simon, 2026-10-12; product/collection content stays 1240 inside it).
   Horizon's header uses section_width="page-width", which follows the theme
   Page width setting ("normal" = 120rem/1920px content) — far wider, so the
   logo/nav/icons sat well outside the homepage columns.
   We override ONLY the header section's page-width custom properties (set on
   #header-component, inherited by its .section rows); Horizon's grid math is
   untouched. Verified against sections/header.liquid (the .header__row .section
   central column = min(--page-content-width, 100% - 2*--page-margin)). */
#header-component {
  --page-content-width: 1400px;
  --page-width: calc(1400px + (var(--page-margin) * 2));
}
/* Horizon's desktop --page-margin is 40px; our sections use 20px side padding, so
   below ~1480px wide the logo/icons sat 20px inside the hero edges. Match it. */
@media (min-width: 750px) {
  #header-component { --page-margin: 20px; }
}
}


/* ---------- Policy pages (/policies/*): Shopify renders its own .shopify-policy__* markup inside the
   theme layout — no theme template applies — so style those classes directly. ---------- */
.shopify-policy__container { max-width: 760px; margin: 0 auto; padding: 36px 20px 72px; }
.shopify-policy__title h1 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.01em; color: var(--ft-ink, #1c1530); margin: 0 0 20px; text-align: left; }
.shopify-policy__body { color: var(--ft-ink, #1c1530); font-size: 16px; line-height: 1.7; }
.shopify-policy__body h2, .shopify-policy__body h3 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; color: var(--ft-ink, #1c1530); margin: 1.6em 0 .5em; }
.shopify-policy__body h2 { font-size: 22px; } .shopify-policy__body h3 { font-size: 18px; }
.shopify-policy__body p, .shopify-policy__body li { margin: 0 0 .9em; }
.shopify-policy__body a { color: var(--ft-purple, #5b3fd6); text-decoration: underline; text-underline-offset: 3px; }
.shopify-policy__body a:hover { color: var(--ft-purple-hover, #3f2a9e); }
@media (max-width: 749px) { .shopify-policy__container { padding: 24px 20px 56px; } }

/* ---------- Product page review stars (native Horizon block, gold) ---------- */
/* The product-page rating now uses Horizon's native `review` block (server-rendered,
   reads the reviews.rating metafield Judge.me syncs) instead of the Judge.me preview
   badge that flashed black→gold. Force the stars to brand gold (the native block only
   offers text/link colours). Scoped to the product page so card ratings are unaffected. */
[data-template="product"] .rating-wrapper {
  --star-fill-color: #ffc23d;
  --star-fill-color-rgb: 255 194 61;
}


/* ---------- Judge.me ---------- */
.jdgm-carousel-wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.jdgm-carousel-wrapper > section:empty {
  display: none !important;
}

/* ---------- Product page: bold-theme pass (14 Oct 2026) ----------
   Native Horizon markup — logged in THEME-OVERRIDES.md. Verify selectors in snippets/price.liquid and
   sections/product-information.liquid after a theme update. */
/* Sale price in the brand sale red (matches the carousel cards); regular price untouched */
product-price .price__sale .price-item--sale { color: var(--ft-sale, #d0262b); }
/* "Tax included" + instalments lines inherit Fredoka from the price block — body font instead */
product-price .tax-note, product-price .installments, .product-information .tax-note, .installments { font-family: var(--font-body--family, "Figtree", system-ui, sans-serif); }
/* Sticky add-to-cart bar: price in Fredoka like the main price */
.sticky-add-to-cart__price .price, .sticky-add-to-cart__price .price-item--sale { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; }
/* Product gallery dots: active dot in the brand purple. Horizon blends the dots with
   mix-blend-mode:difference and colours them from --color-active; over our lilac tile that reads
   black, so blend normally and point the active colour at the accent. */
[data-template^="product"] media-gallery slideshow-controls:has(.slideshow-controls__dots) { mix-blend-mode: normal; --color-active: var(--ft-purple, #5b3fd6); }
[data-template^="product"] media-gallery .slideshow-controls__dots button { --color: rgba(28, 21, 48, .22); }
[data-template^="product"] media-gallery .slideshow-controls__dots button[aria-selected="true"] { --color: var(--ft-purple, #5b3fd6); }
/* "In stock" chip (native product-inventory block) — green pill, matches the dispatch strip's green */
[data-template^="product"] product-inventory .product-inventory__status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #e8f5ec; color: #15803d; font-weight: 700; font-size: 13px; line-height: 1.2; }
[data-template^="product"] product-inventory .product-inventory__icon { width: 16px; height: 16px; color: #15803d; }
[data-template^="product"] product-inventory .product-inventory__icon svg { width: 16px; height: 16px; }
[data-template^="product"] product-inventory:has(.product-inventory__icon-low_stock) .product-inventory__status { background: #fff4e0; color: #b45309; }
[data-template^="product"] product-inventory:has(.product-inventory__icon-low_stock) .product-inventory__icon { color: #b45309; }
[data-template^="product"] product-inventory:has(.product-inventory__icon-out_of_stock) .product-inventory__status { background: var(--ft-border, #ece8f4); color: var(--ft-muted, #6a6280); }
[data-template^="product"] product-inventory:has(.product-inventory__icon-out_of_stock) .product-inventory__icon { color: var(--ft-muted, #6a6280); }
/* Review badge + In-stock chip share one row: the Judge.me badge app block is a full-width div, which made the
   row wrap on phones — size it to its content and keep the row on one line */
[data-template^="product"] .group-block-content:has(> product-inventory) { flex-wrap: nowrap !important; }
[data-template^="product"] .group-block-content:has(> product-inventory) > .shopify-app-block { width: auto !important; flex: 0 1 auto !important; min-width: 0; }
[data-template^="product"] .group-block-content:has(> product-inventory) > product-inventory { flex: 0 0 auto; }
/* Judge.me hides its badge (inline display:none) on products with no reviews; drop the empty wrapper too, or its gap indents the chip */
[data-template^="product"] .group-block-content:has(> product-inventory) > .shopify-app-block:has(> .jdgm-preview-badge[style*="display: none"]) { display: none; }