/** Shopify CDN: Minification failed

Line 39:47 Expected ")" to end URL token
Line 1067:50 Expected ")" to end URL token
Line 1074:47 Expected ")" to end URL token
Line 1081:50 Expected ")" to end URL token

**/
/* production custom css*/

/* MM-1 (feedback_claire.md): cart item-count badge in the header
   defaults to the theme `--accent` colour (gold). Override to black
   with white text so the badge reads consistently in both light and
   dark header contexts without changing the global accent. */
.navlink--cart--icon .header__cart__status {
  background: #000 !important;
  color: #fff !important;
}

/* Global form input focus ring -- override browser default blue with
   a subtle light-grey 1px border. The theme doesn't reset the browser
   `outline: -webkit-focus-ring-color auto 1px` default, so Chrome /
   Safari users see a chunky blue glow on every focused input. Replace
   with a thin grey ring everywhere so the UI matches the theme while
   keeping a visible focus indicator for keyboard users. */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: 1px solid #ccc !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}


@font-face {
  font-family: "Helvetica_Neue_45";src: url({{ "HelveticaNeue45.woff2" | asset_url }}) format("woff2");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}

/* icon */
.divider-icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0px auto 0;
  /* Monogram_Black.svg via the storefront's CDN proxy so the URL
     resolves the same in v2 preview as in production (same store,
     same CDN). Dropping the ?v= cache-bust because Shopify CDN
     files don't require it and an outdated version param can serve
     a stale or 404 response in rare cases. */
  background-image: url('https://www.rosaeparis.com/cdn/shop/files/Monogram_Black.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

/* Header dropdown menus */
/* hide on desktop */
@media (min-width: 750px) {
  .header__dropdown{
      display: none;
  }
}

/* Remove divider line immediately after the product sticker block containing "rse-line-menu" */
.product__block--sticker ~ .product__block--divider { display: none; }

/* Product grid tiles - font sizes */
.product-item__title { font-size: 16px !important; }

.product-item__price { font-size: 12px !important; }

/* 4-column section - text sizes and top border*/
.column__content { font-size: 16px !important; }
.column__text { font-size: 14px !important; }
.column__icon.icon--top { border-top: none !important;}

/* Brick block - title and subtitle font sizes */
.brick__block__text .hero__title { font-size: 24px !important; font-weight: 900;}
.brick__block__text .hero__rte { font-size: 16px !important;}

/* Brick block - reduce padding so title & subtitle fit on one line */
.brick__block__text { padding: 15px !important;}

/* Newsletter - fix underline to span full width including SUBSCRIBE button */
.newsletter-form .input-group { width: max-content !important;}

/* 4-column section - remove bottom padding (robust selector) */
#shopify-section-template--28520394817919__section_multicolumn_rTLwiU .section-columns { padding-bottom: 0 !important;}

/* Newsletter section - add breathing room below */
.shopify-section-group-group-pre-footer:has(.brick__section) { margin-bottom: 10px;}


/* 4-column section - reduce padding above icons/content */
.section-columns .multicolumn .grid-item { padding-top: 10px !important;}

/* Multicolumn image blocks: when button_url is set and button_text is empty
   (e.g. rosae-girls page), the section snippet wraps .column__image in an <a>.
   .column__inner is a flex column with align-items: center (v8 columns.css),
   so that <a> sizes to its content. .column__image inside has width:100% of
   the <a> — circular reference collapses the image to 0x0. Force the wrapper
   <a> to stretch to the full column width. */
.column__inner > a { align-self: stretch; width: 100%; display: block; }

.site-footer-wrapper { padding-top: 10px !important;}

/* Quick add button - fill tile width with 5px margin each side */
.quick-add__button { width: 100%; }

:root { --PRODUCT-GRID-ASPECT-RATIO: 150%; }

/* Quick add - reset conflicting overrides, let theme positioning take effect */
quick-add-product { display: block; width: 100%;}

.quick-add__holder { margin: 0 !important;  width: auto !important;}

.quick-add__button {  width: 100%;}

/* Quick add button - override button text */
.quick-add__button .btn__text {  font-size: 0 !important;  letter-spacing: 0;}

.quick-add__button .btn__text::after {  content: "QUICK ADD";  font-size: 13px;  letter-spacing: 3.6px;}

/* Remove border around product tiles */
body.has-line-design .grid-item.product-item {  border: none !important;}

/* Quick-add drawer — description font size + internal touch-scroll.
   Description used to be hard-truncated to 30 words in
   snippets/product-description.liquid; we now render the full text
   and constrain the visible footprint here so the ATC button below
   stays at the same vertical position. max-height ~= 6 lines at
   font-size 14px * line-height 1.4.

   Scrollbar is fully hidden (no chrome) -- on mobile the customer
   scrolls the text with a finger. -webkit-overflow-scrolling: touch
   enables iOS momentum scroll. overscroll-behavior: contain stops
   the touch from chaining up to the drawer's outer scroll context
   once the inner end is reached. The description's <div> also gets
   data-scroll-lock-scrollable in the snippet so the theme's scroll
   lock system permits this nested scroll. */
.product-quick-add__description {
  font-size: 14px !important;
  max-height: 7.5em !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.product-quick-add__description::-webkit-scrollbar {
  display: none;
}
.product-quick-add__description {
  scrollbar-width: none;
}

/* Quick-add drawer — price font size */
.product-quick-add .product__price {
  font-size: 16px !important;
}

/* Quick-add drawer — color 80%, size 20% */
.product-quick-add .product__selectors {
  grid-template-columns: 4fr 1fr !important;
}

/* Quick-add drawer — legend stacked above selector (not side by side) */
.product-quick-add .select__fieldset,
.product-quick-add .radio__fieldset {
  grid-template-columns: 1fr !important;
}

/* Quick-add drawer — move ATC button below description, remove sticky */
.product-quick-add__form .product__block--buttons {
  position: static !important;
  bottom: auto !important;
  margin: 0 !important;
  padding-top: 30px !important;
}

/* Wishlist card — match recently viewed tile styles */
.shop-customer-wishlist-card__body {
  text-align: center !important;
}

.shop-customer-wishlist-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: rgb(0, 0, 0) !important;
}

.shop-customer-wishlist-card__price {
  font-size: 12px !important;
  color: rgb(100, 100, 100) !important;
}

.shop-customer-wishlist-card__variant {
  font-size: 12px !important;
  color: rgb(100, 100, 100) !important;
}

.shop-customer-wishlist-card__actions {
  padding-top: 10px;
}

.shop-customer-wishlist-page__title {
  font-weight: 400 !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  text-align: center !important;
}



/* display changes on mobile menu */
@media (max-width:749px){
  .popout__toggle{
    font-size:13px !important;
  }
  .popout-list__option {
    font-size:13px !important;
  }
  .drawer__inner {
    width:66%
  }
  .drawer__content {
    flex-direction: column;
  }
  .drawer__menu {
    flex-direction: column;
    flex-basis: 85%;
  }
  .drawer__bottom.mobile {
    margin-top: 0px;
  }
  .sliderow {
    min-height:30px;
  }
  .sliderow__title {
    min-height:30px;
  }
}

/* Desktop-only: cap the outer footer wrapper
   (<footer class="footer-sections"> from layout/theme.liquid:37) at
   75% of the viewport width and centre it. The element was rendering
   at ~604px before this rule -- some upstream constraint we didn't
   trace -- so we force-set width explicitly. .site-footer-wrapper
   (color-scheme background) lives INSIDE .footer-sections, so the
   background also follows this 75% column; 12.5% of the page on
   each side falls back to the body background. Mobile/tablet
   (<990px) keep default width so the footer fits a phone screen. */
@media only screen and (min-width: 990px) {
  .footer-sections {
    width: 75%;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Footer menus */
.footer__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* This will ensure text inside is centered */
}
.footer__block__title {
  font-size: var(--font-2);
  margin-bottom: 5px;
  /* F-2 follow-up: uppercase the 3 footer block titles
     (Placing an Order / May We Help / About). */
  text-transform: uppercase;
}
/* F-4: centre the bottom copyright / policy / terms / powered-by
   row. By default `supporting-menu.css` aligns it LEFT on mobile
   (.supporting-menu__copyright text-align: left + justify-content:
   flex-start) and RIGHT on desktop (.supporting-menu__item--copyright
   :last-child:not(:only-child) text-align: right). Both overridden
   here so the line is centred at every breakpoint. */
.supporting-menu__item--copyright {
  text-align: center !important;
}
.supporting-menu__copyright {
  justify-content: center !important;
}

.footer__quicklinks li {
  /* F-3 follow-up: minimum line spacing between footer menu items.
     The real culprit was footer.css's `.footer__quicklinks li
     { margin: 0 0 1.25em }` -- a 1.25em gap below each item that
     was beating my earlier override on source order. Using
     !important here to win regardless of load order, and
     line-height: 1.0 to remove any leading inside each item. Block
     titles (.footer__block__title) keep margin-bottom 5px so the
     gap between title and first item is preserved. */
  margin: 0 !important;
  line-height: 1.35 !important;
  font-size: var(--font-1);
}

.socials .icon {
  stroke: black;
}

.footer__blocks {
  flex-flow: row wrap;
}

/* F-2: on desktop, spread the 3 footer blocks (Placing an Order /
   May We Help / About) edge-to-edge across the full row instead of
   clustering at the left. Each block keeps its 33%-ish width;
   justify-content: space-between fills the gaps evenly. */
@media (min-width: 990px) {
  .footer__blocks {
    justify-content: space-between;
  }
}

/* F-3: ALL THREE footer blocks (Placing an Order / May We Help /
   About) are now shown on mobile. The previous override that
   display:none'd the third block and forced 50% width on the
   first two has been removed -- mobile falls back to the theme
   default (flex: 1 0 100%, stacked full-width). */

/* CAT-1 (generalised): on mobile, every page-body wrapper goes
   edge-to-edge. Scoped to .main-content so the header and footer
   keep their own lateral padding -- only the templated page body
   between them loses its left/right margin. Covers .wrapper,
   .wrapper--narrow, .wrapper--full-padded (all three use the same
   var(--outer) padding rule in theme.css). Rosae's category pages
   are custom layouts that don't use the page.category-* templates,
   so a narrower selector (e.g. :has(.grid--mobile-vertical)) does
   not catch them -- hence the global approach.
   Side effect to watch: text-heavy pages (about, policy, blog
   articles) will run flush to the edge. Add per-template carve-outs
   if any of them look cramped. */
@media (max-width: 749px) {
  .main-content .wrapper,
  .main-content .wrapper--narrow,
  .main-content .wrapper--full-padded {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Kill the inter-tile gap in section-columns grids so images
     touch when they go edge-to-edge. */
  .main-content .section-columns .grid--mobile-vertical {
    gap: 0 !important;
  }
  /* COL-1: kill the lateral padding on the collection grid so
     product images on /collections/* pages reach the screen edge
     on mobile. The padding comes from `.grid-outer` in theme.css
     line ~2979 (`padding: 0 var(--outer)`). The inter-tile gap is
     driven by `.grid { gap: var(--gap) }` separately and we leave
     that untouched -- merchant wants the current small gap kept. */
  .template-collection .grid-outer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* COL-2: tighten the vertical row-gap on mobile from 16px (the
     theme default `--LAYOUT-GUTTER-SMALL`) to 10px. Only row-gap
     -- the column-gap stays at the 16px COL-1 left in place. */
  .template-collection .grid {
    row-gap: 10px !important;
  }
  /* COL-5: hide the small black "Sold Out" badge on sold-out cards
     -- it's replaced visually by the .product-item__bis-overlay
     button rendered in product-grid-item.liquid. The badge HTML is
     left in the DOM (screen readers still announce the status); we
     only hide the visible chip. */
  .product-item .badge-box.sold-box {
    display: none !important;
  }
  /* COL-5: on mobile use 5px inset to match the (now-hidden) quick-
     add holder position. Desktop override at the bottom of this file. */
  .product-item__bis-overlay {
    bottom: 5px;
    left: 5px;
    right: 5px;
  }
  /* COL-3: shrink the product-item title on mobile from 16px (the
     global rule at line ~61) to 14px so names up to ~20 chars fit
     on one line in a half-width tile. Not scoped to
     .template-collection -- the same tile is used in recently-
     viewed sliders + recommendations, where the narrower-tile
     concern is even stronger. Desktop keeps 16px. */
  .product-item__title {
    font-size: 14px !important;
  }

  /* Give the product name + price a small 5px breathing room from
     the now-flush-to-edge product image. Three selectors because
     Rosae uses three different card snippets across page types:
     - .product-item__info -- standard Shopify collection grid
       (product-grid-item.liquid), used on /collections/* pages.
     - .column__content -- the multicolumn snippet used by
       section-columns AND section-multicolumn, which is what
       custom category pages (pages/rosae-girls etc.) use.
     - .single-lookbook p -- the lookbook-grid look_block snippet
       used by pages/new-in (templates/page.category-01-new-in-*).
       The product text is in an unclassed <p> directly inside the
       .single-lookbook card. */
  .main-content .product-item__info,
  .main-content .column__content,
  .main-content .single-lookbook p {
    padding-left: 5px !important;
  }
}

/* COL-5: sold-out overlay link rendered in product-grid-item.liquid
   as a sibling of .product-link. Position matches the quick-add
   holder (theme.css ~13768) so the BIS button visually slots into
   the same spot the quick-add button occupies for available
   products. Style: transparent fill, white 1px border, white
   uppercase text. Click navigates to the PDP with #notify-me so
   klaviyo-bis.js (rosae-storefront-app) auto-opens the BIS modal
   on arrival. Desktop default inset is 10px; the mobile @media
   block above overrides to 5px to match the quick-add holder. */
.product-item__bis-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* Claire 2026-06-02: bump from 1px to 1.5px so the outline reads
     better against busy product photos. */
  border: 1.5px solid #fff;
  color: #fff;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--BTN-FONT-STACK);
  font-size: 12px;
  /* Claire 2026-06-02: drop from --BTN-FONT-WEIGHT (theme default)
     to a fixed 600. */
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.1;
}
.product-item__bis-overlay:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* QUICK ADD button (in-stock cards on collection pages) -- Claire
   2026-06-02: align visually with .product-item__bis-overlay (above)
   and stop hiding behind a hover-reveal. The default Broadcast 8
   quick-add button is a black solid btn that fades in on
   .product-item__image:hover at >=750px (theme.css ~13919-13930);
   we override both the appearance AND the visibility transition so
   the button is identically-styled to the BIS overlay AND always
   visible at the bottom of every in-stock card.

   The button's label is rendered via a .btn__text::after
   pseudo-element that prints "QUICK ADD" (set up earlier at lines
   ~118-120 of this file). We re-style that pseudo to match the BIS
   overlay's letter-spacing + font-weight + font-size. */
.product-item__image .quick-add__button,
.product-item--overlay-text .quick-add__button {
  background: transparent !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
  padding: 10px 12px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.product-item__image .quick-add__button:hover,
.product-item--overlay-text .quick-add__button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
/* The "QUICK ADD" text comes from the existing .btn__text::after
   pseudo (line ~120). Push it to the same letter-spacing + weight
   + colour as the BIS overlay so the two read identically.
   Important: the global .btn__text rule (lines 557-561 of this
   file) forces color: #000000, which the pseudo inherits. Force
   #fff on both the .btn__text wrapper AND the pseudo so the BIS-
   matching white treatment wins. */
.product-item__image .quick-add__button .btn__text,
.product-item--overlay-text .quick-add__button .btn__text {
  color: #fff !important;
}
.product-item__image .quick-add__button .btn__text::after,
.product-item--overlay-text .quick-add__button .btn__text::after {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Always-visible on desktop: cancel theme.css's no-touch hide-until-
   hover rule. Mobile (<750px) already shows the button without
   the hover gate. */
@media only screen and (min-width: 750px) {
  .no-touch .quick-add__holder,
  .no-touch .quick-add__holder:not(.is-disabled) {
    opacity: 1 !important;
  }
  /* Keep the disabled state hidden (sold-out / OOS variants); BIS
     overlay covers that case instead. */
  .no-touch .quick-add__holder.is-disabled {
    opacity: 0 !important;
  }
}

/* PP-1: product page title -- uppercase + bolder. The h1 inside
   the product__head block (snippets/product-title.liquid) inherits
   --FONT-WEIGHT-HEADING by default; bump to 700 and force uppercase
   so the title reads with more presence on both mobile and desktop. */
.product__title {
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* PP-D1: product tagline (the short marketing line in the
   product__text block below the title) -- bolder on desktop only.
   Default weight is 500; bump to 600 so the line stands out a bit
   more without going all the way to bold. Mobile keeps the
   theme's lighter weight to preserve hierarchy on small screens.
   PP-D2: same 600 weight on the product description tab titles
   (Description / Style / Taille / Composition / Durabilité)
   inside .product-tabs. Mobile is unaffected -- the desktop tabs
   are wrapped with .Desktop_only and only render at this
   breakpoint anyway. */
@media (min-width: 750px) {
  /* Match the specificity of the rule at line ~1396
     (.product__subheading.body-small, ...{ font-weight:500 !important })
     so our 600 wins. The DOM ships the subheading with both classes
     (`<div class="product__subheading body-small">`), so the chained
     selector is correct and not over-restrictive. */
  .product__subheading.body-small,
  .product__subheading.body-small * {
    font-weight: 600 !important;
  }
  .product-tabs .tabs > li {
    font-weight: 600 !important;
  }
}

/* PP-2: place the wishlist heart next to the price. The empty
   `.shop-customer-pdp-heart-slot` div added in product-price.liquid
   is the opt-in placement slot consumed by shop_customer's
   relocatePdpHeart(). Lay the price + slot in a flex row -- price
   takes available width on the left, heart sits on the right.
   !important is needed because a sibling mobile rule below collapses
   every .product__price__wrap > div to display:block (we also
   exclude .product__price__row from that rule, but the desktop side
   still benefits from !important against any future overrides). */
.product__price__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px;
}
.product__price__row > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0;
}
.shop-customer-pdp-heart-slot {
  flex: 0 0 auto !important;
  display: flex;
  align-items: center;
}
/* Trim the heart button's left + right padding when it's hosted in
   the price-side slot so the heart sits visually close to the price
   on the left and flush with the row's right edge (aligned with the
   Add-to-cart button below). Shop_customer's default is 8px all-round
   for the auto-anchor row layout; inside our slot we strip the
   horizontal padding entirely. */
.shop-customer-pdp-heart-slot .shop-customer-heart-host {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Product short description */
.product__block.product__text {
  font-style:italic;
}

/* Color / size selectors*/
.product__block {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.select__fieldset{
  padding-bottom: 10px !important;
}

.product__block.product__text{
  padding-top: 10px;
}

.product__block.product__block--lines.product__block--classic.product__form__holder {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

@media (max-width: 749px) {
  .product__selectors{
    height:45px;
  }
}



/* Cart "Procéder au paiement" / "Proceed to checkout" button.
   Per Claire 2026-06-02: black background, black border, white BOLD
   text, no off-white hover shift. Beats the global rule below that
   paints .btn.btn--primary.btn--solid white -- specificity ladder
   `.cart__buttons .cart__checkout` plus !important locks it in. The
   inner .btn__text span carries the visible label, so we force its
   color + weight too. Hover keeps the same colours (no BRIGHTER
   variant shift). */
.cart__buttons .cart__checkout,
.cart__buttons .cart__checkout:hover,
.cart__buttons .cart__checkout:focus,
.cart__buttons .cart__checkout:focus-visible {
  background: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
  /* The button's label ("Procéder au paiement" / "Proceed to
     checkout") is a direct text node inside the <button>, not
     wrapped in a .btn__text span (cart.liquid:343-353 puts the
     translation key straight inside the button), so font-weight has
     to land on the button itself, not on a child span. */
  font-weight: 700 !important;
}
/* Belt-and-braces: if a future theme update wraps the label in a
   .btn__text span (e.g. to render loading / added / error states
   the way Broadcast's quick-add ATC does), the span would inherit
   font-weight: 600 from the global .btn__text rule below and beat
   our button-level 700. Force the span to 700 too. */
.cart__buttons .cart__checkout .btn__text,
.cart__buttons .cart__checkout:hover .btn__text {
  color: #fff !important;
  font-weight: 700 !important;
}
/* Lock icon next to the checkout label inherits currentColor; force
   white so the icon remains visible on the black background. */
.cart__buttons .cart__checkout svg {
  color: #fff !important;
  fill: currentColor;
}

.btn__plus {
  background: rgba(255,255,255,1);
}
.btn.btn--primary.btn--solid{
  background: rgba(255,255,255,1);
}
.btn__text {
  font-weight: 600;
  font-size:13px;
  color: #000000;
}

/* Banner hero button (Claire 2026-06-02). Bold label + freeze the
   hover state so the background stops shifting to the off-white
   BRIGHTER variant. .hero__button is the wrapper from
   snippets/button.liquid; the actual <a class="btn ..."> is its
   child, and the visible label sits inside a <span>. We override
   the CSS custom properties Broadcast reads for the hover state
   so they map back to the non-hover values -- cleaner than
   chaining :hover { background: ... !important; ... }. */
.hero__button .btn {
  font-weight: 600 !important;
  --btn-bg-hover: var(--btn-bg);
  --btn-border-hover: var(--btn-border);
  --btn-text-hover: var(--btn-text);
}
.hero__button .btn > span {
  font-weight: 600 !important;
}

/* Cart "I accept the terms" checkbox. Force square corners so it
   matches the rest of the storefront's square button border style
   (settings.btn_border_style = "square"). Native checkboxes pick
   up the system shape unless we strip appearance and re-draw. The
   accent-color rule already in this file paints the check mark
   rgb(22,22,22). */
.cart__acceptance__input {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #161616;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}
.cart__acceptance__input:checked {
  background: #161616;
}
.cart__acceptance__input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (min-width: 750px) {
  .btn[data-add-to-cart]:hover {
      background-color: black;
      color: white;
  }
  
  .btn[data-add-to-cart]:hover .btn__text,
  .btn[data-add-to-cart]:hover .btn__added,
  .btn[data-add-to-cart]:hover .btn__loader svg {
    background: black;
      color: white;
      fill: white;
  }
}

/* Product page Add-to-cart button (Claire 2026-06-02).
   The submit <button> lives inside .product__submit__buttons and
   uses Broadcast's .btn--solid styling; the label is wrapped in a
   <span class="btn__text" data-add-to-cart-text>. Earlier version
   of this file painted the inner span white/black -- replaced with
   a button-level rule that paints background rgb(22,22,22), border
   matching, text white 600, and freezes the hover state by
   overriding the --btn-*-hover CSS variables back to the base
   values (so Broadcast's BRIGHTER hover variant doesn't kick in).
   Belt-and-braces: the inner .btn__text span gets explicit
   transparent background + white text so the existing rule (which
   used to paint it white-on-white) doesn't bleed through. */
.product__submit__buttons button[name="add"],
.product__submit__buttons button[name="add"]:hover,
.product__submit__buttons button[name="add"]:focus,
.product__submit__buttons button[name="add"]:focus-visible {
  background: rgb(22, 22, 22) !important;
  border-color: rgb(22, 22, 22) !important;
  color: #fff !important;
  --btn-bg: rgb(22, 22, 22);
  --btn-border: rgb(22, 22, 22);
  --btn-text: #fff;
  --btn-bg-hover: rgb(22, 22, 22);
  --btn-border-hover: rgb(22, 22, 22);
  --btn-text-hover: #fff;
}
.product__submit__buttons button[name="add"] .btn__text,
.product__submit__buttons button[name="add"] .btn__text[data-add-to-cart-text] {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
}


@media (max-width: 749px) {
  .quick-add__button {
    display: flex;
    background: none;
    justify-content: flex-end; /* This will move the button to the right */
  }
  .btn__plus {
    background: rgba(255,255,255,1);
  }
  .btn.btn--primary.btn--solid{
    background: rgba(255,255,255,1);
  }
}


.overlay-size{
  background: rgba(255,255,255,1);
  bottom: 43px;
  margin-left: 13px;
  margin-right: 13px;
  box-sizing: border-box;
}



/** Famille police custom */
:root {
  /*--FONT-STACK-HEADING: 'Helvetica_Neue_45', Arial, sans-serif;
  --FONT-STACK-SUBHEADING: 'Helvetica_Neue_45', Arial, sans-serif;
  --FONT-STACK-BODY: 'Helvetica_Neue_45', Arial, sans-serif;
  --BTN-FONT-STACK: 'Helvetica_Neue_45', Arial, sans-serif; */
  --FONT-WEIGHT-HEADING-BOLD: 700;
  --COLOR-TEXT: rgb(78,78,78);
  --COLOR-SALE: rgb(131,131,131); /* Color for price when exists "old price" */
  --COLOR-BORDER : rgb(255,255,255); /*Remove product grid border */
  --TEXT: rgb(78,78,78);
  --BTN-LETTER-SPACING: 3.6px;
}

/* icon color in variant selection box*/
.icon-nav-arrow-down {
  stroke : rgb(0,0,0);
}

/* border password reset */
#customer_password_confirmation, #customer_password, #customer_email  {
    border: 1px solid grey;
}
 

/* Couleur du texte "placeholder" a l'intérieur des champs email, mot de passe etc... */
input::placeholder, textarea::placeholder {
  color: #909090;
}

input:focus::placeholder, textarea:focus::placeholder {
  color: #b0b0b0;
}

/* Retirer bold des bouton "taille" */
.radio__buttons label {
  font-weight: 400 !important;
  font-family: var(--FONT-STACK-BODY) !important;
}

/* Retirer bold des titres de Tabs */
.tab-link {
  font-weight: 400 !important;
}

/* le contenu à l'intérieur des image banner peut remplir 70% de la largeur au lieu de 50% */
@media only screen and (min-width: 990px) {
  .index-hero .hero__content {
    max-width: 70%;
  }
}

/* style for the size and color variant selector */
  .product__selectors {
    gap: 10px;
  }
  
@media only screen and (max-width: 749px) {
  /* Hide collection-grid overlay color/size variants (overlay-size is the
     parent container; legends inside it disappear with it). NOTE: the
     ported prod rule used to also hide .radio__legend globally which broke
     the product page's variant labels on mobile - removed that. */
  .overlay-size {
    display: none;
  }

  /* Quick add button aligned to the right */
  .quick-add__holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .quick-add__button, btn__loader {
    --btn-size: 27px;
    margin-left: auto; /* Push the button to the right */
  }

  /* le titre du produit et le prix sont mis sur la même ligne sur mobile sur product-price-title.liquid */
  .radio__buttons .radio__button input[type="radio"] {
    width: 27px;
    height: 27px;
    padding: 2px;
  }
  .radio__button {
    display: inline-block;
    width: 27px;
    height: 27px;
    margin:2px;
    margin-bottom:4px;
  }
  .radio__button label {
    display: inline-block;
    width: 27px;
    height: 27px;
    line-height: 27px; /* Optional: to vertically center text */
    text-align: center;
  }
  
  .product_title{
    margin-top:0px;
  }
  .product__title__wrapper {
    /* product.css:500 sets a 70px right padding on the title wrapper
       (Broadcast leaves that space for an absolutely-positioned
       corner icon). On mobile we use the full column width for the
       title text -- force 0 to win against product.css's load order. */
    padding-right: 0 !important;
    display: flex;
    justify-content: space-between;
  }
  .product__price {
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .product__selectors{
    display: flex;
    gap: 5px;
  }
  .selector-wrapper {
    flex: 1; /* Allow both elements to grow and shrink equally */
    min-width: 0; /* Ensure the first element can shrink */
  }


  .select__fieldset {
    width: 100%;
  }
  
  /* PP-M1: mobile price -- smaller and grey, matching the
     production theme. 18px -> 16px, force colour to rgb(33,33,33)
     with !important because the unscoped rule below at line ~1545
     forces price colour to var(--text). */
  .product__price{
    font-size: 16px !important;
    color: rgb(33, 33, 33) !important;
  }
}
  .radio__legend__label .radio__legend__value{
    padding-top : 0px !important;
  }



/* Taille des polices sur mobile, tablette, PC */
/* Taille des polices sur mobile */
:root {
  --font-15: 33px;
  --font-14: 31px;
  --font-13: 29px;
  --font-12: 27px;
  --font-11: 25px;
  --font-10: 23px;
  --font-9: 21px;
  --font-8: 19px;
  --font-7: 17px;
  --font-6: 15px;
  --font-5: 14px;
  --font-4: 12px;
  --font-3: 11px;
  --font-2: 10px;
  --font-1: 9px;
}
/* Taille des polices sur tablette */
@media only screen and (min-width: 750px) and (max-width: 989px) {
  :root {
    --font-15: 44px;
    --font-14: 42px;
    --font-13: 40px;
    --font-12: 38px;
    --font-11: 35px;
    --font-10: 33px;
    --font-9: 31px;
    --font-8: 28px;
    --font-7: 24px;
    --font-6: 20px;
    --font-5: 17px;
    --font-4: 15px;
    --font-3: 13px;
    --font-2: 11px;
    --font-1: 10px;
  }
}
/* Taille des polices sur PC */
@media only screen and (min-width: 990px) {
  :root {
    --font-15: 55px;
    --font-14: 50px;
    --font-13: 46px;
    --font-12: 42px;
    --font-11: 38px;
    --font-10: 35px;
    --font-9: 32px;
    --font-8: 29px;
    --font-7: 24px;
    --font-6: 20px;
    --font-5: 18px;
    --font-4: 16px;
    --font-3: 14px;
    --font-2: 12px;
    --font-1: 11px;
  }
}

/* Taille de police page Search et couleur ligne separation */
.search__caption {
  font-size: var(--font-4);
}
.search-outer {
  margin-bottom: 10px;
}
.divider {
  border-color: rgb(0,0,0);
}


/* set font weight for titles */
.heading-size-14, .heading-size-15{
  font-weight: 700;
}


/* set title size for collections */
.hero__title.h4 {
  font-weight: 400;
  color: #000000;
  font-size: var(--font-13);
}



/* add margin above button: */
@media only screen and (min-width: 990px) {
  .hero__button {
    margin-top: 50px;
  }
}

/* align language selection menu to the right */
.popout-list__item {
    text-align: right;
}

.popout-list__option {
    text-align: right;
}

/* align social icons to the center of the page*/
.footer__block--social {
    display: flex; /* This will make the container a flexbox */
    justify-content: center; /* This centers the flex items (the ul) on the main axis (horizontally) */
}

/* Reduce footer menu size, center elements on mobile */
.supporting-menu__item, .supporting-menu__item--copyright, .supporting-menu__copyright {
  font-size: var(--font-1) !important;
  display: flex; /* Make the container a flexbox */
  justify-content: center; /* Center the content horizontally */
}
.supporting-menu__copyright li {
  height: 15px; /* Sets the height of each list item */
  line-height: 15px;
  padding-top: 2px; /* Sets the top padding to 2px */
  padding-bottom: 2px; /* Sets the bottom padding to 2px */
}


@font-face {
  font-family: "Helvetica_Neue_45_It";src: url({{ "HelveticaNeue45It.woff2" | asset_url }}) format("woff2");
  font-weight: normal;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}
@font-face {
  font-family: "Helvetica_Neue_55";src: url({{ "HelveticaNeue55.woff2" | asset_url }}) format("woff2");
  font-weight: bold;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}
@font-face {
  font-family: "Helvetica_Neue_55_Bd";src: url({{ "HelveticaNeueBd55.woff2" | asset_url }}) format("woff2");
  font-weight: bolder;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}

/* center elements in <body> */
body {
    display: flex;             /* Enable flexbox layout */
    justify-content: center;   /* Center content horizontally */
    flex-direction: column;    /* Stack child elements vertically */
    align-items: center;       /* Center content vertically */
    min-height: 100vh;         /* Ensure the body takes at least the full height of the viewport */
    margin: 0;                 /* Remove default margin */
}
 

/* set max width of desktop version: */
@media only screen and (min-width: 990px) {
  .container[data-site-container] {
      max-width: 1400px;

  }
  div.header__desktop {
      max-width: 1400px;
  }
  div.header__wrapper {
      max-width: 1400px;
  }
}


/* force parallax to display top of image first
[data-parallax-wrapper] .image__hero__pane {
  align-items: start !important; 
}  */

/* force parallax to be stronger on desktop */
@media only screen and (min-width: 990px) {
  [data-parallax-wrapper] .image__hero__scale {
    min-height: 100%;
    max-height: 200%;
  }
}

@media only screen and (max-width: 990px) {
  [data-parallax-wrapper] .image__hero__scale {
    min-height: 100%;
    max-height: 110%;
  }
}

/* force smaller font-size for secondary on mobile */
@media only screen and (max-width: 749px) {
  .product__block {
    margin-bottom: 5px;
    padding-top:0px;
    padding-bottom:0px;
  }
  
  .mobile-hidden{
    display:none;
  }
  
  #secondary-menu ul li {
    font-size: 8px !important;
    padding-top : 0px !important;
    padding-bottom : 0px !important;
  }
}

/*secondary menu hover effect opacity decreased to 50% on "non-hover" elements, to focus on the selected hover element*/
#secondary-menu {
  max-width: 800px;
  margin: 0 auto; /* Optional: centers the div horizontally */
}
#secondary-menu ul li {
    transition: color 0.3s, opacity 0.3s;
}

#secondary-menu ul:hover li {
  opacity: 0.5;
}

#secondary-menu ul li:hover {
  opacity: 1;
}



/* Footer Social Links */
  ul.socials.socials--thick {
    display: flex;
    justify-content: center;
  }

/* Newsletter */
@media only screen and (max-width: 749px) {
  .shopify-section-group-group-pre-footer {
    display: flex;
    justify-content: center;
  }
}

/* Top About Menu */
  .column__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .column__links__item {
    width: 14%;
  }

  .column__links__item a {
    text-transform: uppercase;
    font-size: 12px;
  }
  
@media only screen and (max-width: 749px) {
  .column__links__item {
    width: 25%;
  }
  .column__links__item a {
    font-size: 10px;
  }
}

@media only screen and (max-width: 330px) {
  .column__links__item a {
    font-size: 9px;
  }
}

/* About Page */
  .hero__rte {
    line-height: 2
  }
@media only screen and (min-width: 768px) {
  .index-rte.section-padding {
    display: flex;
    justify-content: center;
  }

  .hero__content__wrapper {
    width: 1300px;
  }
}

/* Manifesto Page */
@media only screen and (min-width: 768px) {
  .main-content{
    width: 1200px;
  }
  .grid.multicolumn {
    width: 1200px;
  }
   .section-columns.section-padding .wrapper {
    display: flex;
    justify-content: center;
  }
}
/* Savoir-Faire Page */
@media only screen and (max-width: 749px) {
  div.shopify-section.index-section {
    padding-bottom: 35px !important;
  }
}

/* Divider */
  .column__icon.icon--top {
    border-top: 1px solid #dddddd;
  }

  .icon__animated .icon {
    display: none !important;
  }

/* Digital Press Page */
  .btn--black.btn--outline {
    border: 2px solid #000;
  }

  .btn--black.btn--outline:hover {
    color: #fff;
    background-color: #000;
  }

  #shopify-section-template--20597096546635__section_multicolumn_DUNtAq .column__inner.aos-animate .column__content {
    margin-top: 17%;
  }
@media only screen and (max-width: 749px) {
  #shopify-section-template--20597096546635__section_multicolumn_DUNtAq .column__inner.aos-animate .column__content {
    margin-top: 5%;
  }
}

/* Product Title UpperCase Bold on the Collection Pages */

  .product-item__title {
    text-transform: uppercase;
    font-weight: bold;
  }

/* Klaviyo button */
  .product__submit{
    width: 100%;
  }
  .product-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .klaviyo-bis-trigger {
    /*visibility: hidden;*/
    display: inline-block;
    text-align: center;
    margin: 0px;
  }

  /* Hide the Klaviyo BIS trigger when it renders inside .shop-pay-terms
     (above Size / Color selectors). The same trigger now lives inside
     the ADD TO CART button — keeping both is a duplicate.
     Scoped to .shop-pay-terms so the in-button trigger (and any other
     legitimate placement of .klaviyo-bis-trigger) is unaffected. */
  .shop-pay-terms .klaviyo-bis-trigger {
    display: none !important;
  }

  /* Desktop only: kill the bottom margin of the variant form holder
     block so the ADD TO CART block sits flush below the Size/Color
     selectors. Mobile keeps the default spacing. */
  @media (min-width: 750px) {
    .product__block--lines.product__form__holder.block-padding {
      margin-bottom: 0 !important;
    }
  }

  /* Sold-out NOTIFY ME button: same row layout as ADD TO CART.
     See git history for rationale; using !important throughout to
     beat any specificity battle with Swym's app-injected CSS, which
     loads from CDN and is hard to reason about statically.

     Bugfix: the theme's ATC click handler sets `disabled` on the
     button immediately and only clears it ~1 second later (after the
     is-loading → is-added animation). During that window the
     :has([data-add-to-cart][disabled]) match below was swapping the
     ATC for the BIS button — a visible flicker even on fully-
     available variants. Excluding .is-loading + .is-added makes the
     swap fire only when the button is truly idle-disabled (i.e. the
     variant is genuinely sold out). */
  .product__submit__item:has([data-add-to-cart][disabled]:not(.is-loading):not(.is-added)) {
    /* PP-2 follow-up: collapsed from 2-col (1fr auto + 8px gap) to
       1-col. The auto column was built to host the Swym wishlist
       heart next to the BIS button; PP-2 moved the heart to the
       price area, so the auto column was empty but its 8px gap was
       still being reserved, shrinking the BIS button by 8px (e.g.
       390px in a 398px slot). 1fr / gap 0 lets the BIS button fill
       the row. */
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .product__submit__item:has([data-add-to-cart][disabled]:not(.is-loading):not(.is-added)) .swym-atw-btn-wrapper,
  .product__submit__item:has([data-add-to-cart][disabled]:not(.is-loading):not(.is-added)) .product-soldout-notification {
    display: contents !important;
  }

  .product__submit__item:has([data-add-to-cart][disabled]:not(.is-loading):not(.is-added)) .swym-atw-button-container {
    grid-column: 2 !important;
    order: 2 !important;
  }

  .product__submit__item:has([data-add-to-cart][disabled]:not(.is-loading):not(.is-added)) .product-soldout-notification > button[data-popup-open] {
    grid-column: 1 !important;
    order: 1 !important;
    width: 100% !important;
  }

  .product__submit__item [data-add-to-cart][disabled]:not(.is-loading):not(.is-added) {
    display: none !important;
  }

  .product__submit__item .swym-button-bar:empty {
    display: none !important;
  }

/* === v8 Broadcast: preserved from initial v2 custom.css === */
/* CART-1: broadened from h2.hero__title so the cart page <h1 class="hero__title">
   also picks up the uppercase styling that matches other page hero titles. */
.hero__title {
  text-transform: uppercase;
}

/* CART-1 follow-up + CART-2: center the cart title on the page.
   .cart__content is `display: flex; flex-flow: row wrap;
   justify-content: space-between` (theme.css), so by default the <h1>
   sits as a flex item on the left of the same row as the "Continue
   Shopping" button. Force flex-basis: 100% so the title takes the full
   row, then center its text. text-transform: uppercase overrides the
   stock .cart__title { text-transform: none } that otherwise wins over
   the .hero__title rule above. */
.cart__title {
  flex: 0 0 100%;
  width: 100%;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}

/* CART-5: replace the boxed "Continue Shopping" button with a small
   X + inline text link, sitting on its own row above the cart items.
   The container keeps flex: 0 0 100% so it takes a full row of the
   cart__content flex layout (the <h1> already does the same). The link
   itself is a small inline-flex group with a bold X icon and matching
   text size; no btn outline. */
.cart__button-continue {
  flex: 0 0 100%;
  width: 100%;
  text-align: left;
  margin-bottom: var(--inner);
}
.cart__continue-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-body-small);
  text-decoration: none;
  color: var(--text);
}
.cart__continue-link:hover {
  text-decoration: underline;
}
.cart__continue-link .icon-cancel {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.cart__continue-link .icon-cancel path {
  stroke-width: 2.5; /* "bold" X — defaults are stroke-width:1 */
}

/* CART-3: desktop two-column layout. Stock .cart__aside is flex: 0 0 300px
   (or 280px in the 750-989px range). Switch to 2/3 - 1/3 of the row width,
   discounting the var(--outer) gap that .cart__content's margin-right adds. */
@media only screen and (min-width: 750px) {
  .cart__content {
    flex: 0 0 calc((100% - var(--outer)) * 2 / 3);
  }
  .cart__aside {
    flex: 0 0 calc((100% - var(--outer)) / 3);
  }
}

/* CART-4: box around the Subtotal block. Mirror the same fine line that
   separates cart items (border-bottom: 1px solid var(--border) on
   .cart__items .cart__item) on all four sides of .cart__price__holder,
   with a comfortable inner padding so the subtotal doesn't touch the
   border. */
.cart__price__holder {
  border: 1px solid var(--border);
  padding: var(--inner);
}

/* RV-1/2/3 follow-up: render the cart Recently Viewed cards in a
   2-products-per-row grid (default theme layout stacked them in a
   single column via the .product__upsell--stacked class, which we
   also removed). Applies to both the cart page (.cart__empty__product)
   and the cart drawer (.drawer__empty__product). data-limit on the
   <recently-viewed> element is now 2 so the row fills exactly. */
.cart__empty__product,
.drawer__empty__product {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--inner);
  width: 100%;
}
.cart__empty__product > *,
.drawer__empty__product > * {
  min-width: 0; /* prevents grid item content overflow */
}

/* CART-10: cart "I agree to the terms" checkbox renders with the OS
   accent (blue on most platforms) when checked. Set accent-color to
   rgb(22, 22, 22) so it fills near-black, matching the rest of the
   cart UI. Scoped to the acceptance input on both the cart page and
   the cart drawer (same class on both). */
.cart__acceptance__input {
  accent-color: rgb(22, 22, 22);
}

/* CART-9: free-shipping progress bar. Stock theme renders an 8px bar
   with a gradient fill on a --bg-accent track. Claire's spec is a 4px
   bar with black fill on light-grey track at the top of the cart
   summary. The bar is rendered via the <progress> element so we need
   to style the WebKit/Firefox pseudo-elements separately. */
.free-shipping__progress-bar {
  height: 4px !important;
  background: #e5e5e5 !important;
  border-radius: 0 !important;
  margin-top: 6px;
}
.free-shipping__progress-bar::-webkit-progress-bar {
  background: #e5e5e5 !important;
  border-radius: 0 !important;
}
.free-shipping__progress-bar::-webkit-progress-value {
  background: #000 !important;
  border-radius: 0 !important;
}
.free-shipping__progress-bar::-moz-progress-bar {
  background: #000 !important;
  border-radius: 0 !important;
}

/* === Ported from prod theme.css (v5 stock) — base styles for sub-menu       === */
/* === section's #secondary-menu / #lookbook-menu / #categories-menu lists.   === */
/* === v8 stock CSS doesn't include these, so the lookbook menus need them   === */
/* === here to render horizontally without bullets.                          === */
#secondary-menu {
  width: 100%;
  background: #fff;
  position: sticky;
  top: var(--header-height);
  z-index: 33;
  padding: 12px 0;
}
#secondary-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 100%;
}
#secondary-menu li {
  padding: 4px;
  text-transform: uppercase;
  display: inline-flex;
  font-size: 11px;
  letter-spacing: 0.06em;
}
#secondary-menu li.active a { font-weight: 700; }
#secondary-menu li a { color: rgba(29, 29, 29, 0.7); }

/* === Remap v8's semantic font-size variables (--font-heading-*,            === */
/* === --font-body-*) onto prod's --font-N scale.                            === */
/* === Note: prod's custom.css already defines --font-1..--font-15 at 3      === */
/* === breakpoints (around line 357+) using a tighter scale than theme.css.  === */
/* === We do NOT redefine --font-N here — that would conflict and shadow     === */
/* === prod's smaller values. Only the semantic-to-numeric mapping is new.   === */
/* === Mapping shifted down 1 step from the original v5 numeric values to    === */
/* === match prod's visual sizing more closely.                              === */
:root {
  --font-heading-mini:    var(--font-1);
  --font-heading-x-small: var(--font-4);
  --font-heading-small:   var(--font-6);
  --font-heading-medium:  var(--font-8);
  --font-heading-large:   var(--font-11);
  --font-heading-x-large: var(--font-13);

  --font-body-x-small: var(--font-1);
  --font-body-small:   var(--font-3);
  --font-body-medium:  var(--font-6);
  --font-body-large:   var(--font-10);
  --font-body-x-large: var(--font-13);
}

/* === Hero text color: prod set section.settings.color "#ffffff" but v8     === */
/* === section-hero ignores that v5 setting (uses color_scheme instead).      === */
/* === The .hero__* rules in v8 inherit color from var(--text) (default      === */
/* === #212121, near-black). Force white in hero/banner context.             === */
.section-overlay-header .hero__title,
.section-overlay-header .hero__subheading,
.section-overlay-header .hero__description,
.section-overlay-header .hero__rte {
  color: #ffffff;
}

/* Reset back to theme default text colour when the overlay-header
   section has NO image. The collection-image-with-title +
   section-hero* sections add `prevent-transparent-header` on the
   inner wrapper when section.settings.show_image is false (or no
   collection.image is set). In that case the title sits on the
   page background, not on a photo, so white is invisible. Selector
   specificity 0,3,0 beats the 0,2,0 rule above, so this wins on
   cascade. Templates like collection.json hit this path because
   their hero is configured `show_image: false` -- the title still
   renders, but no longer reads white-on-white. */
.section-overlay-header .prevent-transparent-header .hero__title,
.section-overlay-header .prevent-transparent-header .hero__subheading,
.section-overlay-header .prevent-transparent-header .hero__description,
.section-overlay-header .prevent-transparent-header .hero__rte {
  color: var(--text);
}

/* === Hero image responsive sizing. Prod's snippets/image-hero.liquid added === */
/* === an inline `style="height: <1/aspect-ratio*100>vw"` on                 === */
/* === .image__hero__scale, making the image height responsive to browser    === */
/* === width. v8 doesn't add that inline style and instead uses              === */
/* === `height: calc(100% + 150px)` (parallax overflow) — image fills the    === */
/* === section's vh-based height and gets cropped, doesn't react to width    === */
/* === changes. Restore prod behavior via CSS using v8's --aspect-ratio var. === */
[data-parallax-wrapper] .image__hero__pane {
  display: flex;
  align-items: center;
}
.image__hero__scale[data-parallax-img] {
  height: calc(1 / var(--aspect-ratio, 1) * 100vw);
}
@media (max-width: 749px) {
  .image__hero__scale[data-parallax-img] {
    height: calc(1 / var(--aspect-ratio-mobile, var(--aspect-ratio, 1)) * 100vw);
  }
}

/* === Lookbook product titles. The lookbook-grid section embeds its own     === */
/* === <style> with `.single-lookbook p a { color: rgba(153,153,153,.7); }`  === */
/* === but in v8 something (color scheme / inherited --link) is overriding   === */
/* === to white, leaving product names invisible. Override here with higher  === */
/* === specificity and explicit colors matching prod.                        === */
.single-lookbook p,
.single-lookbook p strong,
.single-lookbook p span {
  color: rgba(29, 29, 29, 0.7) !important;
}
/* v8 theme.css applies a gradient-text effect to every <p> <a>:
   `background-clip: text; -webkit-text-fill-color: transparent;` so the
   `color` becomes irrelevant — the actual text fill is a linear-gradient
   background. With --link being white in some scope, that gradient is
   invisible. Opt out of the gradient for lookbook links. */
.single-lookbook p a,
.single-lookbook p a strong,
.single-lookbook p a:visited,
.single-lookbook p a:link {
  color: rgba(153, 153, 153, 0.7) !important;
  -webkit-text-fill-color: rgba(153, 153, 153, 0.7) !important;
  background: transparent !important;
  background-image: none !important;
  font-weight: bold !important;
  /* v8 stock makes p a inline-block with bottom-padding for the underline
     pseudo-element; both add visual spacing prod doesn't have. */
  display: inline !important;
  padding: 0 !important;
}
.single-lookbook p a:hover,
.single-lookbook p a:hover strong {
  color: rgba(153, 153, 153, 0.3) !important;
  -webkit-text-fill-color: rgba(153, 153, 153, 0.3) !important;
}
/* === Remove the underline pseudo-element v8 paints on links globally.       === */
/* === v8 theme.css uses an ::after element to draw the link underline       === */
/* === (not text-decoration). Hide it for all link contexts.                 === */
.text-link::after,
.rte a::after,
.hero__rte a::after,
p a::after {
  display: none !important;
}

/* === Product page block reorder to match prod                              === */
/* === v8's product.liquid renders blocks in DOM order:                      === */
/* ===   title -> text (short desc) -> tabs -> variants -> price ->          === */
/* ===   divider -> ATC                                                      === */
/* === Prod's order is:                                                      === */
/* ===   title -> price -> variants -> ATC -> short desc -> tabs            === */
/* === Use flex `order` on the form__width container to rearrange.           === */
/* === Also hide the v8 breadcrumb that prod doesn't have.                   === */
.product__head .breadcrumbs {
  display: none !important;
}
.form__wrapper--classic .form__width {
  display: flex;
  flex-direction: column;
}
.form__wrapper--classic .form__width > .product__block {
  order: 99;
}
.form__wrapper--classic .form__width > .product__head            { order: 1; }
.form__wrapper--classic .form__width > .product__block:has(> .product__price__wrap) { order: 2; }
.form__wrapper--classic .form__width > .product__form__holder    { order: 3; }
.form__wrapper--classic .form__width > .product__block--buttons  { order: 4; }
.form__wrapper--classic .form__width > .product__text            { order: 6; }
.form__wrapper--classic .form__width > .product__block--tabs     { order: 7; }
.form__wrapper--classic .form__width > .product__block--sticker  { order: 8; }
.form__wrapper--classic .form__width > .product__block--divider  { order: 9; }

/* Hide v8's tax / shipping disclaimer below the price */
.product__tax,
.product__shipping {
  display: none !important;
}

/* Sold-out notify button hover: text was staying black (hard to read on    */
/* the dark-grey hover background). Force white on hover to match prod.    */
.product-soldout-notification button:hover,
.product-soldout-notification button:hover .btn__text,
.product-soldout-notification button:hover span {
  color: #ffffff !important;
}

/* PDP sold-out "Prévenez-moi de son retour" notify button: invert the
   ::after fill animation so the dark overlay slides DOWN from the top
   instead of UP from the bottom. Broadcast's base rule
   (theme.css:4682-4706) parks the fill pseudo at translate3d(0, 100%,
   0) (below the button) and lifts it to (0, 0, 0) on hover. Mirror
   the path: park at (0, -100%, 0) (above the button) so the hover
   transition still ends at (0, 0, 0) but the motion is downward.
   Scoped to .product-soldout-notification button so the rest of the
   site's btn--solid / btn--outline animations stay bottom-up. */
.product-soldout-notification button.btn--outline::after,
.product-soldout-notification button.btn--solid::after {
  transform: translate3d(0, -100%, 0);
}
@media (hover: hover) {
  .product-soldout-notification button.btn--outline:hover::after,
  .product-soldout-notification button.btn--solid:hover::after {
    transform: translate3d(0, 0, 0);
  }
}


/* Product variants: render the option selectors as a 2-column grid          */
/* (Color | Size) instead of stacked vertically. Inside each column, the     */
/* "Color" / "Size" label and the selected value sit on a single line.       */
.product__selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  /* Top-align both columns so the legend (label + value) and the popout    */
  /* dropdown sit at the top of each grid cell. Without this, the shorter   */
  /* column (Size) was bottom-aligning its content because the .select__-   */
  /* fieldset's internal grid stretched to fill the cell.                   */
  align-items: start;
  padding-bottom: 16px;
}
.product__selectors .selector-wrapper,
.product__selectors .selector-wrapper .select__fieldset {
  align-self: start;
}
.product__selectors .radio__legend {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline;
  gap: 6px;
}
.product__selectors .radio__legend__label,
.product__selectors .radio__legend__label--text {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  align-items: baseline;
  gap: 6px;
}
/* v8 stock has .radio__legend__values { display: flex; flex-basis: 100%; } */
/* and .radio__legend__value { flex-basis: 100%; display: block; padding-top: 4px } */
/* both force the value onto a second line; override here.                        */
.product__selectors .radio__legend__values {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
}
.product__selectors .radio__legend__value {
  display: inline !important;
  flex-basis: auto !important;
  padding-top: 0 !important;
}
/* Match prod's 13px label/value font size (v8 stock is 15-20px depending on  */
/* breakpoint via --font-body-medium).                                        */
.product__selectors .radio__legend__option-name,
.product__selectors .radio__legend__value {
  font-size: 13px !important;
}
@media (max-width: 749px) {
  /* Mobile: keep the 2-column layout (Color | Size side-by-side) like
     desktop. Earlier this was 1fr (stacked) - reverting to 1fr 1fr to
     match prod's mobile design.
     PP-M2: shrink the inter-column gap from 24px (desktop default at
     line ~1196) to 12px on mobile -- production design has the two
     selectors closer together to recover horizontal room.
     PP-M3: ~40% closer gap between variant selectors and the
     Add-to-cart button. The total visible gap on mobile is the sum
     of two values:
       - .product__selectors padding-bottom (16px desktop default)
       - .product__form__holder block-padding bottom margin (16px
         default; the existing override at line 358 specifies
         .product__block--classic which this form holder does NOT
         carry, so the default 16px applies). Total = 32px.
     Cut both halves to 10px → total 20px (~37%, close to 40%). */
  .product__selectors {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 10px;
  }
  .product__form__holder.block-padding {
    /* PP-M3: halve the form holder's bottom margin from 16px to
       8px so the Add-to-cart button sits closer to the variant
       selectors on mobile. The CSS variable override alone is NOT
       enough -- line ~1445 sets
       `.product__form__holder { margin-bottom: 16px }` directly
       (bypassing .block-padding's var()) and wins source order.
       Must override margin-bottom explicitly with !important. */
    --block-padding-bottom: 8px;
    margin-bottom: 8px !important;
  }
  .product__selectors .radio__legend {
    display: none !important;
  }

  /* Title + Price on the same line: title 60% left, price 40% right-aligned.
     Switch the form column from flex-direction:column to row-wrap so two
     items can share a row. All other items use flex-basis:100% so each
     occupies its own full-width row below.
     align-items:baseline aligns the price NUMBER's text baseline with the
     product TITLE's text baseline (the price block also contains tax/
     shipping info but those wrap below the price within the right column). */
  .form__wrapper--classic .form__width {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
  }
  .form__wrapper--classic .form__width > * {
    flex-basis: 100% !important;
  }
  .form__wrapper--classic .form__width > .product__head {
    flex-basis: 65% !important;
    /* 10px right padding gives a minimum buffer between the title
       text and the price column on its right. Box-sizing is
       border-box globally, so the title content area shrinks by
       10px while the column footprint stays at 65%. */
    padding-right: 10px !important;
  }
  .form__wrapper--classic .form__width > .product__block:has(> .product__price__wrap) {
    flex-basis: 35% !important;
    text-align: right !important;
  }
  /* RIGHT-ALIGN price block contents — collapse all inner flex wrappers to
     display:block so the inline price text right-aligns via text-align alone.
     Previous flex-based attempts failed because nested column-flex was
     stretching .price__container to full width regardless of justify-content. */
  .form__wrapper--classic .form__width > .product__block .product__price__wrap,
  .form__wrapper--classic .form__width > .product__block .product__price__wrap > div:not(.product__tax):not(.shop-pay-terms):not(.product__price__row),
  .form__wrapper--classic .form__width > .product__block .price.product__price,
  .form__wrapper--classic .form__width > .product__block .price__container,
  .form__wrapper--classic .form__width > .product__block .price__regular {
    /* :not(.product__price__row) excludes the PP-2 flex wrapper from
       this collapse rule so the heart stays beside the price on
       mobile too (instead of dropping below it). */
    display: block !important;
    text-align: right !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }
  /* Hide tax/shipping subtitle and shop-pay terms in the mobile price block.
     Use descendant (not >) since there may be an intermediate wrapper. */
  .product__price__wrap .product__tax,
  .product__price__wrap .shop-pay-terms,
  .product__price__wrap popup-component {
    display: none !important;
  }
}

/* Utility classes used by prod's product-tabs.liquid: desktop-only and
   mobile-only show/hide. */
.Desktop_only { display: block; }
.mobile_only { display: none; }
@media (max-width: 749px) {
  .Desktop_only { display: none !important; }
  .mobile_only { display: block !important; }
}

/* Remove any horizontal separator line directly below the variant block
   (we cleared border-top earlier; this catches border-bottom on the
   variants/buttons divider gap that may still appear). */
.product__form__holder,
.product__block--lines,
.product__block--buttons {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Remove the horizontal separator lines that v8 stock CSS draws around
   each <details class="accordion"> in the mobile product description.
   Same for the borders around .product-accordion wrapper.  */
.product-accordion details.accordion,
details.accordion {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Mobile product description accordion: halve the vertical gap between
   each accordion item, set body text to 14px, and section title to 14px. */
.product-accordion .accordion__title {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 14px !important;
}
.product-accordion .accordion__body,
.product-accordion .accordion__body p,
.product-accordion .accordion__body .rte,
.product-accordion .accordion__content,
.product-accordion .accordion__content p {
  font-size: 14px !important;
}

/* Product subheading (body-small variant): bump from 11px -> 14px and
   give it medium weight to match prod's emphasis. */
.product__subheading.body-small,
.product__subheading.body-small * {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Sticker / badge band -- bottom border. Previously zeroed out here to
   avoid stacking with the trailing .product__block--divider's <hr>
   line, but that left the sticker block with an uneven look (top edge
   had a fine 1px line, bottom edge had the heavier <hr>). Now we keep
   #rse-line-menu's matching 1px border-bottom (defined alongside the
   top border below) and hide the divider's <hr> when it follows the
   sticker, so the sticker block is bounded by two identical fine
   lines. */
.product__block--sticker + .product__block--divider hr.divider {
  display: none;
}

@media (max-width: 749px) {
  /* Reduce the top padding above the product wrapper on mobile. v8 default
     scales section padding via CSS vars; force a small top padding here. */
  .index-product.section-padding {
    padding-top: 6px !important;
  }
  /* Cut the extra space below the product image gallery. */
  product-images,
  zoom-images {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }
}

/* Mobile: pictures are ~149% padding-top (vertical aspect), video media
   has its own padding-top reflecting its own aspect (e.g. ~166-180%). The
   tall video slide was sizing the slider container, leaving a gap below
   pictures when an image was active.
   Fix: force video / external_video / model slides to use the pictures'
   aspect (padding-top: 150%) so all slides share the same height.
   Pictures keep their natural rendered size — no cap on the container. */
@media (max-width: 749px) {
  product-images .product__slide[data-type="video"] .product__media,
  product-images .product__slide[data-type="external_video"] .product__media,
  product-images .product__slide[data-type="model"] .product__media,
  zoom-images .product__slide[data-type="video"] .product__media,
  zoom-images .product__slide[data-type="external_video"] .product__media,
  zoom-images .product__slide[data-type="model"] .product__media {
    padding-top: 150% !important;
    overflow: hidden;
  }
  /* Crop the video itself to fill the constrained slide without distortion. */
  product-images .product__slide[data-type="video"] video,
  product-images .product__slide[data-type="video"] iframe,
  product-images .product__slide[data-type="external_video"] video,
  product-images .product__slide[data-type="external_video"] iframe,
  zoom-images .product__slide[data-type="video"] video,
  zoom-images .product__slide[data-type="video"] iframe,
  zoom-images .product__slide[data-type="external_video"] video,
  zoom-images .product__slide[data-type="external_video"] iframe {
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
  }
  /* Collapse residual spacing below the gallery. */
  product-images,
  zoom-images {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }
}

/* Variants <-> ATC overlap: the popout-select dropdown content (the select_
   list) was overlapping with the ATC button below in the flex column
   because the popout's positioning didn't reserve layout space. Add
   bottom margin to the variants block so visually they're separated, and
   keep the dropdown lifted above when expanded. */
.product__form__holder {
  margin-bottom: 16px;
}
.product__selectors popout-select {
  position: relative;
  z-index: 5;
}
.product__selectors popout-select[aria-expanded="true"],
.product__selectors popout-select:has(.popout-list--visible) {
  z-index: 100;
}
.product__selectors .select-popout__list {
  z-index: 100;
}

/* Mobile: 2 stickers per row (2x2 grid). Was wrapping to 4 in single row. */
@media (max-width: 749px) {
  #rse-line-menu ul {
    /* Switch to grid for guaranteed 2 columns regardless of content width. */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  #rse-line-menu li {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* === Product stickers (Rosae custom): bordered list of icon+name pairs    === */
/* === reading from product.metafields.custom.product_stickers. Ported       === */
/* === verbatim from prod theme.css.                                         === */
#rse-line-menu {
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
#rse-line-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
#rse-line-menu li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(29, 29, 29, 0.7);
  /* Each item takes ~1/4 of the row, allowing text to wrap inside its cell. */
  flex: 1 1 0;
  min-width: 0;
}
#rse-line-menu li span {
  white-space: normal;
  word-wrap: break-word;
  min-width: 0;
}
#rse-line-menu img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Product description tabs (desktop) + accordion (mobile): unified 14px body. */
.product__block--tabs .tab-content,
.product__block--tabs .tab-content p,
.product__block--tabs .tab-content .rte,
.product__block--tabs .rte,
.product__block--tabs .rte p {
  font-size: 14px !important;
}

/* Remove v8's separator lines around the variant picker:                  */
/* - .product__block--lines border-top  -> the line between price and Color*/
/* - .selector-wrapper .select__fieldset border-bottom -> the line below   */
/*   Color that misaligns Color/Size columns (Size is :last-child which    */
/*   already clears the border).                                           */
.product__block--lines {
  border-top: 0 !important;
  padding-top: 0 !important;
}
.product__block--lines .selector-wrapper .select__fieldset,
.product__block--lines .selector-wrapper .radio__fieldset,
.product__selectors .select__fieldset,
.product__selectors .radio__fieldset {
  border-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Mobile header: drop the 9px bottom padding from the .section-padding
   wrapper inside .theme__header to reduce overall header height. */
.theme__header > .section-padding {
  padding-bottom: 0 !important;
}

/* Mobile bottom bar: hidden on desktop (fully styled inside the mobile media). */
.mobile-bottom-bar {
  display: none;
}

/* Header search popdown: float at the TOP of the visible viewport
   rather than top: 0 of the document. The base rule (header-search-
   popdown.css:10-32) uses position: absolute; top: 0 -- when the
   customer is scrolled below the fold (e.g. they tap the search
   icon on the mobile bottom bar, which only appears after they've
   scrolled past the top header) the popdown opens off-screen above
   them and looks like a no-op. position: fixed pins it to the
   viewport instead. Selector kept flat (no .header__mobile ancestor)
   so it matches every <header-search-popdown> instance regardless of
   where the theme nests it. */
header-search-popdown .search-popdown {
  position: fixed !important;
  top: 0 !important;
}

/* BB-D1: pad the supporting menu row (the very last element on
   the page -- copyright + privacy / terms / legal links) so it
   isn't permanently hidden behind the floating bottom bar AND
   the Gorgias chat icon. Using the `.supporting-menu` class
   instead of the section's hashed id so this stays correct if
   the section id changes between v2 and a future theme version.
   Production uses the same class. */
.supporting-menu {
  padding-bottom: 60px !important;
}

/* Free delivery (multicolumn) pre-footer block: shrink it overall.
   The section has --PT/--PB = 0 already, but the inner grid item
   and column__inner add their own vertical room. Pull -30px above
   AND -30px below on every viewport (was mobile-only) so the block
   doesn't dominate the gap between the Rosaé monogram divider and
   the footer. */
#shopify-section-sections--28520394588543__section_multicolumn_NDd3t3 {
  margin-top: -30px !important;
  margin-bottom: -30px !important;
}

/* Inside the Free Delivery block, the .icon__animated wrapper
   carries `margin-bottom: var(--inner)` (16px desktop / 12px mobile)
   under the small box icon, separating it from the heading. Shrink
   to 10px to tighten the icon-to-text spacing. Scoped to this
   section so other multicolumn instances keep the theme default. */
#shopify-section-sections--28520394588543__section_multicolumn_NDd3t3 .icon__animated {
  margin-bottom: 10px !important;
  /* Standardise on the Monogram SVG -- replace the theme's inline
     <svg class="icon icon-box"> (shipping-box icon) with the same
     Monogram_Black.svg used by the .divider-icon. The next two rules
     hide the inline SVG and paint the Monogram as a background image
     so the icon size stays driven by --icon-size on the parent
     .column__icon. */
  background-image: url('https://www.rosaeparis.com/cdn/shop/files/Monogram_Black.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#shopify-section-sections--28520394588543__section_multicolumn_NDd3t3 .icon__animated svg {
  display: none !important;
}

/* Cart subtotal: shrink from --font-body-x-large (~46px desktop / 29px mobile)
   down to the regular body size. Applies on desktop AND mobile. */
.cart__total__price {
  font-size: var(--font-body-medium) !important;
}

/* Cart "Is this a gift?" / gift-note widget title: 16px -> 14px. */
.cart__widget__title {
  font-size: 14px !important;
}

/* Mobile-only: lift the Gorgias chat bubble so it doesn't overlap our
   compact bottom bar's cart icon, and pull it closer to the right edge.
   Gorgias sets `right: 20px; bottom: 20px` as inline styles on the
   iframe, so both overrides need !important to win. */
@media (max-width: 749px) {
  #gorgias-chat-container,
  #gorgias-chat-container > div,
  iframe#chat-button,
  iframe[id^="gorgias-chat"],
  iframe[title*="Gorgias" i],
  div[class*="gorgias-chat"] {
    right: 10px !important;
    bottom: 65px !important;
  }
}

/* Force the product price text to the main text color (rgb 33,33,33).
   Some inherited / cascade rule was rendering it lighter than --text. */
.product__price__wrap,
.product__price__wrap .price,
.product__price__wrap .product__price,
.product__price__wrap .price__container,
.product__price__wrap .price__regular,
.product__price__wrap .price-item,
.product__price__wrap .price-item--regular {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Mobile-only: footer block list uses 2-column 50/50 grid (default is full-width
   stacked column). Desktop layout (3-col 33% via --desktop-width) untouched.
   F-M1: hide the 3rd block ("About Rosae") on mobile too -- not enough
   room for 3 columns, and Claire doesn't want it wrapping to a new
   row below. Matches the production footer (2-col on mobile, 3-col
   on desktop). */
@media (max-width: 749px) {
  .footer__blocks {
    flex-flow: row wrap !important;
  }
  .footer__blocks > .footer__block {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
  }
  .footer__blocks > .footer__block--menu:nth-child(3) {
    display: none !important;
  }

  /* Remove separator border below the custom-code section above the footer. */
  #shopify-section-sections--28520394588543__section_custom_code_cKLPkr,
  #shopify-section-sections--28520394588543__section_custom_code_cKLPkr * {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  /* "Get inspired" highlights: shrink huge 100/50 padding to 30/30. */
  #highlights--template--28520395145599__section_highlights_nCWYtb,
  #highlights--template--28520395145599__section_highlights_nCWYtb .section-padding {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* Footer: cut huge 45px top padding to 15px. */
  #shopify-section-sections--28520394490239__footer > footer,
  #shopify-section-sections--28520394490239__footer > footer .section-padding {
    padding-top: 15px !important;
  }

  /* Remove top border on the multicolumn section. */
  #shopify-section-sections--28520394588543__section_multicolumn_NDd3t3,
  #shopify-section-sections--28520394588543__section_multicolumn_NDd3t3 > * {
    border-top: 0 !important;
  }

  /* Hide v8's product "Configure" / sticky cart bar on mobile so it doesn't
     stack on top of our compact bottom bar. Desktop behavior unchanged. */
  cart-bar,
  .cart-bar {
    display: none !important;
  }

  /* Cart line item layout: switch from 3 columns (product | price | qty) to
     2 columns (product | right-stack with price above qty). Bump the price
     font from --font-body-x-small to --font-body-small. */
  .cart .cart__item__content__left {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    flex-flow: initial !important;
  }
  .cart .cart__item__content__left .cart__item__content-inner {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto !important;
  }
  .cart .cart__item__content__left .cart__price {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: var(--font-body-small) !important;
  }
  .cart .cart__item__content__left .cart__quantity-wrapper {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  /* === Mobile compact bottom bar ============================================ */
  /* Hidden by default (translateY off-screen). Shown via .is-visible toggled
     by snippets/mobile-bottom-bar.liquid JS when the user scrolls past the
     top header. Mirrors the top header icons; logo replaced by the monogram
     (.divider-icon).                                                          */
  .mobile-bottom-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--COLOR-BG, #fff);
    /* MBB-2: round the upper-left and upper-right corners. The
       border-top + matching radius keep the bar reading as a
       distinct surface peeking up from the bottom of the viewport. */
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: 16px 16px 0 0;
    /* iOS Safari fix: do NOT use `transform` to hide/show the bar.
       Mobile Safari has a long-standing bug where `transform` on a
       `position: fixed` element re-anchors it to the document (acting
       like position: absolute relative to <body>), so the bar drifts
       up the viewport as you scroll down — proportional to document
       height, which is why the BB-D1 150 px supporting-menu padding
       made the symptom visible. Use opacity + visibility instead,
       same UX (fade instead of slide), no transform on the fixed
       element. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    padding: 6px 12px calc(env(safe-area-inset-bottom, 6px) - 3px);
    /* Shadow slightly stronger so the rounded corners don't look
       cut off against the page background. */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  }
  .mobile-bottom-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
  }
  .mobile-bottom-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: 100%;
  }
  .mobile-bottom-bar__btn,
  .mobile-bottom-bar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
    background: none;
    border: 0;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    position: relative;
  }
  /* MBB-1 follow-up: match header icon size (28px, the theme's
     --icon-size var) and header cart-count badge position
     (.navlink--cart--icon .header__cart__status: top -2px, right -8px,
     17x17 circle, black bg from MM-1) so the bottom bar reads
     identically to the top bar at a glance. */
  .mobile-bottom-bar__btn .icon,
  .mobile-bottom-bar__btn svg {
    width: 28px;
    height: 28px;
  }
  .mobile-bottom-bar__logo .divider-icon {
    width: 28px;
    height: 28px;
    margin: 0;
  }
  /* Tight wrapper around the cart icon + badge so the badge anchors
     to the icon's corner, not the wider flex-stretched button slot. */
  .mobile-bottom-bar__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-bottom-bar__cart-count {
    position: absolute;
    top: -2px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 2px;
    background: #000;
    color: #fff;
    border-radius: 15px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-bottom-bar__cart-count--hidden {
    display: none;
  }

  /* Mobile keeps the original 5-entry layout: hide the desktop-only
     entries (New In, Favorites) and the per-icon labels. The same
     markup serves both viewports; CSS picks what to show. */
  .mobile-bottom-bar__btn--desktop-only,
  .mobile-bottom-bar__label {
    display: none !important;
  }

  /* SBM-3 (revised after Claire's side-by-side comparison): the
     monogram now lives in the MIDDLE of the drawer as an `image`
     block in sections/group-header.json -- between the menu items
     and the locale selectors -- matching the production layout.
     The drawer header just carries the close X (left-aligned). The
     old drawer__head logo override has been removed.

     SBM-1/2 (revised): match production's compact "FR" / "EUR €"
     code-only locale selectors -- side by side at the bottom-left,
     no globe icon, no currency icon, no country name. */
  .mobile-menu__block-localization .popout-header {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
  }
  .mobile-menu__block-localization .popout-header__holder {
    width: auto;
  }
  /* The localization snippet auto-adds a currency icon when
     unique='mobile-menu' AND show_country_flag is false (see
     snippets/localization.liquid line 148-152). We don't want it. */
  .mobile-menu__block-localization .popout__icon-currency {
    display: none !important;
  }

  /* SBM-4 (partial): bold the drawer's top-level menu items so they
     read like production. Size (body-medium, one notch up from
     body-small) is set in sections/group-header.json on the `menu`
     block. The override scopes "not bold" to the actual sub-menu
     entries (inside .sliderow__links), so the sub-menu's PARENT
     title -- rendered in .sliderow--back at the top of the panel --
     stays bold (it's the section name "Shop" / "Lookbooks"). */
  .drawer__main-menu .sliderow__title {
    font-weight: 700;
  }
  .drawer__main-menu .sliderule__panel .sliderow__links .sliderow__title {
    font-weight: 400;
  }

  /* SBM-4: enlarge + embolden the drawer's close X. theme defaults
     to --icon-size 24 px and SVG default stroke-width 1; bumping
     both. */
  .drawer--header .drawer__close {
    --icon-size: 32px !important;
  }
  .drawer--header .drawer__close .icon-cancel path {
    stroke-width: 2 !important;
  }

  /* SBM-5: tighten the spacing between mobile sidebar menu items.
     header-dropdown.css sets --item-height: 50 px on
     .drawer--header .drawer__content; every .sliderow /
     .sliderow__title uses that var for min-height. Cutting to 36 px
     reduces the inter-item gap by ~28% while staying comfortably
     tap-friendly. */
  .drawer--header .drawer__content {
    --item-height: 36px !important;
  }

  /* Klaviyo Back-In-Stock modal: pin to TOP of viewport on mobile so the
     full form is visible (Klaviyo's default position cuts off the bottom on
     short mobile screens). Targets BIS-named selector variants ONLY.
     IMPORTANT do-not-add list (each was tried and removed for the reason):
       - `div[class*="needsclick"][class*="kl-private-reset-css"]` -- every
         Klaviyo-rendered div (teaser tree, modal tree) carries those two
         classes, so the rule shifted everything in the teaser/popup off
         screen.
       - `[data-testid="POPUP"]` and `[role="dialog"][aria-modal="true"]
         [class*="kl-private-reset-css"]` -- Klaviyo's own signup/promo
         modals (e.g. "OFFRE 15%") match these too. The full-screen modal
         has left:0; width:100%, so transform: translateX(-50%) shifts
         it 50% off to the left, leaving the popup blank when it opens. */
  .klaviyo-bis-modal,
  .klaviyo-bis-modal-container,
  .klaviyo-modal,
  .klaviyo-modal-container,
  [class*="klaviyo"][class*="modal"],
  [class*="kl-bis"][class*="modal"],
  [id*="klaviyo"][id*="modal"],
  div[data-testid*="klaviyo"] {
    top: 20px !important;
    bottom: auto !important;
    transform: translateY(0) translateX(-50%) !important;
    margin-top: 0 !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
  }
}

/* === DBB-1: bottom bar on DESKTOP ========================================= */
/* Show the same bottom bar on desktop too, but with a floating layout: 50 px
   from the bottom edge, centered horizontally, all four corners rounded.
   The mobile @media above keeps the edge-to-edge, top-only-rounded look on
   ≤749 px. The button layout still mirrors the mobile version (5 entries);
   DBB-2 will add the missing icons for the 7-entry desktop spec.            */
@media (min-width: 750px) {
  /* All sizes here are ~80% of the previous values (DBB-3 follow-up):
     bar padding, max-width, icon, monogram, label, button min-width,
     cart-count badge. The proportions (monogram 36 -> 29, icons
     28 -> 22, label 10 -> 8) all scale together so the rebalance is
     uniform and the bar still reads coherently. */
  .mobile-bottom-bar {
    display: block;
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 90;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: 13px;
    transition: transform 0.3s ease;
    padding: 8px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    max-width: 610px;
  }
  .mobile-bottom-bar.is-visible {
    transform: translate(-50%, 0);
  }
  .mobile-bottom-bar__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
  }
  .mobile-bottom-bar__btn,
  .mobile-bottom-bar__logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 3px 6px;
    background: none;
    border: 0;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    min-width: 52px;
  }
  .mobile-bottom-bar__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }
  .mobile-bottom-bar__btn .icon,
  .mobile-bottom-bar__btn svg,
  .mobile-bottom-bar__logo svg {
    width: 22px;
    height: 22px;
    display: block;
  }
  /* Monogram scaled the same ~80%: 36 -> 29 px. Still overflows the
     22x22 wrap symmetrically, so its centre lines up with every
     other icon's centre. No negative margins. */
  .mobile-bottom-bar__monogram {
    width: 29px !important;
    height: 29px !important;
    margin: 0 !important;
  }
  .mobile-bottom-bar__label {
    font-size: 8px;
    line-height: 1.2;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .mobile-bottom-bar__cart-count {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 14px;
    height: 14px;
    padding: 1px;
    background: #000;
    color: #fff;
    border-radius: 12px;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-bottom-bar__cart-count--hidden {
    display: none;
  }
}

/* Mobile-only hero subheading tweaks (do NOT leak to desktop). */
@media (max-width: 749px) {
  .hero__subheading {
    font-size: 17px !important;
    /* Zero the margin-bottom so the section's equal top/bottom padding
       leaves the text visually centered (margin-bottom was pushing it up). */
    margin: 0 !important;
  }
  /* The section wrapping the subheading defaults to ~60px top/bottom on mobile;
     cut to 30px. Target .section-padding wrappers that contain a subheading. */
  .section-padding:has(.hero__subheading) {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  /* Also vertically-center any wrapper around the subheading that uses flex. */
  .hero__content:has(> .hero__subheading:only-child),
  .hero__content__wrapper:has(> .hero__subheading:only-child) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Text-only pages: add 15px of horizontal padding around the main content
   so the body of long-form text (privacy / T&Cs / placing-order / help)
   isn't flush against the viewport edges, especially on mobile where
   wrapper padding is zero. Targets the body class Shopify auto-applies
   based on template name + suffix ("template-page-<suffix>"; the suffix
   half added in layout/theme.liquid). Scoped to .main-content so the
   header / pre-footer / footer (which all sit outside <main>) are
   unaffected. */
body.template-page-privacy .main-content,
body.template-page-legal-mentions .main-content,
body.template-page-legal-mentions-offers .main-content,
body.template-page-legal-terms-and-condition .main-content,
body.template-page-placing-order-01-shipping .main-content,
body.template-page-placing-order-02-secure-p .main-content,
body.template-page-placing-order-03-internat .main-content,
body.template-page-placing-order-04-returns .main-content,
body.template-page-help-01-contact .main-content,
body.template-page-help-02-size-guide .main-content,
body.template-page-help-03-care-guide .main-content,
body.template-page-help-04-faqs .main-content {
  padding-left: 15px;
  padding-right: 15px;
}

/* Contact page submit button: the .btn--primary.btn--solid color is white
   on white per the active color scheme. Force the label to rgb(22, 22, 22)
   so it's readable while the surface stays white. Scoped to the help-01
   contact template so other primary-solid buttons aren't affected. */
body.template-page-help-01-contact .custom-form__block button[type="submit"] {
  color: rgb(22, 22, 22) !important;
}