/* Drolette skin — loaded after base/index.css.
   Brand kit: Fraunces (Display/headings: wght 600, SOFT 50, opsz 48) + Nunito Sans (body/buttons/nav).
   Type scale: Display 56/40 · H1 40/32 · H2 28/24 · H3 22/20 · Body 16 · Small 14 · Caption 12 · Button 16/700.
   Headings line-height 1.2, body 1.55, buttons 48px high. */
:root {
  --dr-heading: 'Fraunces', serif;
  --dr-body: 'Nunito Sans', sans-serif;

  --sort-title-font: var(--dr-heading); --sort-title0-font: var(--dr-heading); --sort-title1-font: var(--dr-heading);
  --sort-title2-font: var(--dr-heading); --sort-title3-font: var(--dr-heading); --sort-title4-font: var(--dr-heading);
  --sort-title5-font: var(--dr-heading); --sort-title6-font: var(--dr-heading);
  --sort-title-font-weight: 600; --sort-title0-font-weight: 600; --sort-title1-font-weight: 600; --sort-title2-font-weight: 600;
  --sort-title3-font-weight: 600; --sort-title4-font-weight: 600; --sort-title5-font-weight: 600; --sort-title6-font-weight: 600;
  --sort-title-font-weight-bold: 700;

  --sort-body-font: var(--dr-body); --sort-body0-font: var(--dr-body); --sort-body1-font: var(--dr-body);
  --sort-body2-font: var(--dr-body); --sort-body3-font: var(--dr-body); --sort-body4-font: var(--dr-body);
  --sort-body5-font: var(--dr-body); --sort-body6-font: var(--dr-body);
  --sort-body-font-weight: 400; --sort-body0-font-weight: 400; --sort-body1-font-weight: 400; --sort-body2-font-weight: 400;
  --sort-body3-font-weight: 400; --sort-body4-font-weight: 400; --sort-body5-font-weight: 400; --sort-body6-font-weight: 400;
  --sort-body-font-weight-bold: 700; --sort-body0-font-weight-bold: 700; --sort-body1-font-weight-bold: 700; --sort-body2-font-weight-bold: 700;
  --sort-body3-font-weight-bold: 700; --sort-body4-font-weight-bold: 700; --sort-body5-font-weight-bold: 700; --sort-body6-font-weight-bold: 700;
  --body-bold-font-weight: 700;
  /* body line-height 1.55 (editor setting only allows 0.1 steps) */
  --sort-body-line-height: 1.55; --sort-body0-line-height: 1.55; --sort-body1-line-height: 1.55; --sort-body2-line-height: 1.55;
  --sort-body3-line-height: 1.55; --sort-body4-line-height: 1.55; --sort-body5-line-height: 1.55; --sort-body6-line-height: 1.55;
}

h1, h2, h3, h4, .title, .title0, .title1, .title2, .title3, .title4, .title5, .title6, .dr-display, .dr-h2 {
  font-variation-settings: 'SOFT' 50, 'opsz' 48;
}

/* Buttons: Nunito Sans 16/700, 48px high */
.button:not(.button--link, .button--text, .button--icon), .shopline-element-buy-now {
  min-height: 48px; font-family: var(--dr-body); font-size: 16px; font-weight: 700;
}

.dr-display { font: 600 56px/1.2 var(--dr-heading); }
.dr-h2 { font: 600 28px/1.2 var(--dr-heading); }
.dr-eyebrow { display: block; margin-bottom: 12px; font: 700 14px/1 var(--dr-body); color: #A85A63; }
@media (max-width: 959px) {
  .dr-display { font-size: 40px; }
  .dr-h2 { font-size: 24px; }
}

/* Official wordmark (brand kit logo-primary, outlined SVG) */
.dr-logo { display: block; height: auto; width: var(--desktop-size, 160px); max-width: none; }
@media (max-width: 959px) { .dr-logo { width: var(--mobile-size, 120px); } }

/* Rose deep is for in-text links (and stars) only — nav, product titles, prices stay Ink */
.rte a:not(.button), .rich-text a:not(.button), .product-description a:not(.button) { color: #A85A63; text-decoration: underline; text-underline-offset: 2px; }

/* Rich-text headings follow the brand type scale: H2 28/24 Fraunces, H3 22/20 Nunito Sans Bold */
.rte h2 { font: 600 28px/1.2 var(--dr-heading); font-variation-settings: 'SOFT' 50, 'opsz' 48; margin: 1.4em 0 0.5em; }
.rte h3 { font: 700 22px/1.2 var(--dr-body); font-variation-settings: normal; margin: 1.4em 0 0.4em; }
@media (max-width: 959px) { .rte h2 { font-size: 24px; } .rte h3 { font-size: 20px; } }

/* ===================== Layout QA fixes (2026-09-24) ===================== */

/* Mobile title scale = brand kit: Display 56→40, H1 40→32, H2 28→24, H3 22→20 (Fashion shrank titles to ~50%) */
:root {
  --title1-font-size-mobile-ratio: 40 / 56;
  --title2-font-size-mobile-ratio: 32 / 40;
  --title3-font-size-mobile-ratio: 24 / 28;
  --title4-font-size-mobile-ratio: 20 / 22;
  --title5-font-size-mobile-ratio: 18 / 20;
}

/* One page-title style everywhere: H1 40/32 Fraunces, centered, sentence case */
.main-page__title, .main-search__title, .section-main-not-found__title, .customer__title {
  font-family: var(--dr-heading) !important; font-weight: 600 !important;
  font-size: 40px !important; line-height: 1.2 !important; text-transform: none !important; text-align: center;
  font-variation-settings: 'SOFT' 50, 'opsz' 48;
}
.main-cart-header h2 { font: 600 40px/1.2 var(--dr-heading); font-variation-settings: 'SOFT' 50, 'opsz' 48; }
.main-cart-header { align-items: center; }
.main-cart-header .button--link { font-size: 16px; }
@media (max-width: 959px) {
  .main-page__title, .main-search__title, .section-main-not-found__title, .customer__title { font-size: 32px !important; }
  .main-cart-header h2 { font-size: 32px; }
  .main-cart-header .button--link { font-size: 14px; }
}

/* Product cards: fill the row so prices line up across a row */
.product-card-shadow-space, theme-product-card.block-product-card { height: 100%; }
theme-product-card.block-product-card { display: flex; flex-direction: column; }
theme-product-card.block-product-card > .block-product-card-info { flex: 1 1 auto; flex-direction: column; }
theme-product-card.block-product-card > .block-product-card-info > :last-child { margin-top: auto; }

/* Size buttons: equal-width row on phones instead of wrapping 3XL to a new line */
@media (max-width: 959px) {
  .product-detail__row .variant-picker__options.product-detail__row-main:has(.variant-picker__button--text) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 8px; width: 100%;
  }
  .product-detail__row .variant-picker__options:has(.variant-picker__button--text) > .variant-picker__option { width: 100%; min-width: 0; }
  .product-detail__row .variant-picker__options:has(.variant-picker__button--text) .variant-picker__button--text {
    width: 100%; min-width: 0; padding-inline: 0 !important; justify-content: center; text-align: center;
  }
}
/* Trust rows under the buy buttons: always left-aligned, even when a line wraps */
.product-detail__sell-info .sell-info { text-align: left !important; }

/* Header search box wide enough for its placeholder */
@media (min-width: 960px) {
  .header-action-bar__search-bar, .header-action-bar__search-bar input { min-width: 240px; }
}

/* Short pages (cart, 404, login, search): keep the footer at the bottom of the screen */
#MainContent { min-height: calc(100vh - 420px); }
@media (max-width: 959px) { #MainContent { min-height: calc(100svh - 224px); } }

/* Even line breaks: headings balance their lines (no single-word middle/last line), body text avoids orphans */
h1, h2, h3, .main-page__title, .dr-display, .dr-h2, .rte h2, .rte h3 { text-wrap: balance; }
/* Product titles fill the full width first (balance made them look squeezed); pretty only avoids a lone last word */
.block-product-title, .block-product-title span, h1.product-detail__title { text-wrap: pretty !important; }
p, li, .rte { text-wrap: pretty; }

/* Tablet: 3 product columns instead of 2 oversized ones */
@media (min-width: 600px) and (max-width: 959px) {
  .featured-collection__track, .main-collection__list { --mobile-columns: 3 !important; }
}

/* ===================== Product page — ShawnCraft layout ===================== */
/* Square desktop frame; image is contained (never cropped) on the image's own edge colour */
.media-gallery__item, .media-gallery__item .media, .media-gallery__item img { background-color: #E7DDCD; }
/* Everything in the info column starts on the same left edge */
.product-description, .product-description .product-expander__content, .product-description .rte { padding-inline: 0 !important; margin-inline: 0 !important; }
.social-media-share { justify-content: flex-start !important; }
/* Size Chart link sits right-aligned under the size buttons */
details.product-detail__popup-main { display: flex; justify-content: flex-end; margin-top: -12px; }
details.product-detail__popup-main > summary { margin-left: auto; width: max-content; }
/* Quantity: label left, stepper right */
.product-detail__quantity-selector > .product-detail__row--direction-row { justify-content: space-between !important; align-items: center; }
@media (min-width: 960px) {
  /* Option rows: fixed label column, options start on one vertical line */
  .product-detail__row.product-detail__row--desktop-direction-row { justify-content: flex-start !important; column-gap: 0 !important; }
  .product-detail__row--desktop-direction-row > .variant-picker__group-head { flex: 0 0 88px; }
  .product-detail__row--desktop-direction-row > .variant-picker__options { justify-content: flex-start !important; flex: 1 1 auto; }
}
@media (max-width: 959px) {
  /* Swipe gallery: no sliver of the next image at the right edge */
  ul.media-gallery__list { column-gap: 20px !important; gap: 20px !important; }
  /* Thumbnail arrows would sit on the screen edge; three thumbnails swipe fine */
  .media-gallery__arrow { display: none !important; }
}

@media (min-width: 960px) {
  /* Size buttons: equal-width single row next to the label (no wrapping 3XL) */
  .product-detail__row .variant-picker__options.product-detail__row-main:has(.variant-picker__button--text) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px;
  }
  .product-detail__row .variant-picker__options:has(.variant-picker__button--text) > .variant-picker__option { width: 100%; min-width: 0; }
  .product-detail__row .variant-picker__options:has(.variant-picker__button--text) .variant-picker__button--text {
    width: 100%; min-width: 0; padding-inline: 0 !important; justify-content: center; text-align: center;
  }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .product-detail__row .variant-picker__options.product-detail__row-main:has(.variant-picker__button--text) {
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); gap: 6px;
  }
  .product-detail__row--desktop-direction-row > .variant-picker__group-head { flex-basis: 72px; }
}

/* Header bar: give the wordmark its brand-kit clear space (≈ x-height) on phones/tablets instead of 5px */
@media (max-width: 959px) {
  .header__container-top-wrap { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* Collection page on phones: filters/sorting are off (ShawnCraft style), so the empty filter bar
   (15px padding + bottom border) must not leave a blank strip under the header */
.facets-mobile__modals:not(:has(button, a, select, input, summary)) { display: none !important; }
@media (max-width: 959px) { .facets-mobile-inner { padding-top: 16px !important; } }

/* Size Chart popup: size to its content (no clipped last line on phones, no empty screen on desktop) */
.product-detail__popup-main .modal__content { height: auto !important; max-height: 85vh !important; overflow: auto !important; }
@media (min-width: 960px) { .product-detail__popup-main .modal__content { width: 680px !important; max-width: calc(100% - 80px) !important; } }
.product-detail__popup-main .popup__content { height: auto !important; padding-bottom: 28px !important; }
.product-detail__popup-main .popup__content .rte p { margin: 0 0 8px; }
.product-detail__popup-main .popup__content table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px;
  font-variant-numeric: tabular-nums; table-layout: fixed;
}
.product-detail__popup-main .popup__content th,
.product-detail__popup-main .popup__content td {
  padding: 8px 4px; text-align: center; border-bottom: 1px solid #D9D6D0; white-space: nowrap;
}
.product-detail__popup-main .popup__content thead th { font-weight: 700; border-bottom-color: #2B2A2A; }
.product-detail__popup-main .popup__content th:first-child,
.product-detail__popup-main .popup__content td:first-child { text-align: left; width: 32%; white-space: normal; }

/* ===================== Product Review app — Drolette skin ===================== */
[class*=plugin-product-comment], [class*=plugin-product-comment] *, .isv-web-btn { font-family: var(--dr-body) !important; }
.isv-web-btn { border-radius: 8px !important; font-weight: 700 !important; }
.isv-web-btn-primary { background: #2B2A2A !important; border-color: #2B2A2A !important; color: #FFFFFF !important; }
.plugin-product-comment .isv-web-btn-primary { min-height: 48px; font-size: 16px !important; padding-inline: 28px !important; }
/* Stars in Rose deep (brand kit: stars + in-text links only) */
/* only real ratings — the empty "no reviews yet" row (…--disabled) keeps its grey outline stars */
.custom-star-color:not([class*="--disabled"]), .custom-star-color:not([class*="--disabled"]) [class*=plugin-product-comment--star-full] { color: #A85A63 !important; }
.custom-star-color:not([class*="--disabled"]) svg { fill: currentColor; }
/* read-only ratings (review wall cards, summary rows) carry --disabled too; colour only the filled stars */
.custom-star-color li[class*="--star-full"], .custom-star-color li[class*="--star-full"] * { color: #A85A63 !important; }
/* the under-title summary row is server-rendered with inline #000 stars */
.product-plugin-comment-rate-star > div:first-child, .product-plugin-comment-rate-star > div:first-child > div { color: #A85A63 !important; }
/* review list: grey track (--star-first) stays, filled overlay (--star-second) goes Rose deep */
.plugin-product-comment [class*=plugin-product-comment--star-second] { color: #A85A63 !important; }
/* the app's own 60px top margin doubled the space under the product info section */
.plugin-product-comment-list-wrap { margin-top: 16px !important; }
.product-plugin-comment-rate-star > div:last-child { opacity: 1 !important; color: rgb(var(--color-text), 0.7); font-size: 13px !important; }
/* App blocks in the product info column: when the app renders nothing (no reviews yet / no bundle set up),
   drop the empty wrapper so it doesn't add an extra flex gap between title and price or under the buttons */
[id$="___review-stars"]:not(:has(.custom-star-color, .product-plugin-comment-rate-star)),
[id$="___bundle"]:not(:has(.sales-bundle-products__block > *)) { display: none !important; }
[id$="___review-stars"] { margin-top: -8px; }
.product-plugin-comment-rate-star { margin: 0 !important; }

/* ===================== Design Maker for Campaigns (discount banner under the price) ===================== */
/* the app injects .discount-style-plugin next to the price itself; our placed block stays an empty shell */
[id$="___discount-style"]:not(:has(.discount-style-plugin > *)) { display: none !important; }
.discount-style-plugin [class*=autoCouponBanner-container] { background: rgba(168, 90, 99, 0.08) !important; border-radius: 8px; }
.discount-style-plugin [class*=autoCouponBanner-container] *:not([class*=shopMoreIcon]):not([class*=shopMoreIcon] *):not([class*=moreBtn]):not([class*=moreBtn] *) { color: #A85A63 !important; }
/* Tag template (ShawnCraft-style one-line offers): Rose deep on a light rose tint */
.discount-style-plugin [class*=autoCouponTag-container] { display: flex; flex-wrap: wrap; gap: 8px; }
.discount-style-plugin [class*=autoCouponTag-item] { margin: 0 !important; background: rgba(168, 90, 99, 0.10) !important; border-radius: 4px; padding: 5px 10px !important; }
.discount-style-plugin [class*=autoCouponTag-item], .discount-style-plugin [class*=autoCouponTag-item] * { color: #A85A63 !important; font: 700 14px/1.3 var(--dr-body) !important; }
/* "x2" tier chip: Ink on white text like our primary button */
.discount-style-plugin [class*=autoCoupon-moreBtn] { background: #2B2A2A !important; border-radius: 4px; }

/* ===================== Bundle app (组合销售 auto "Frequently bought together") ===================== */
.bundle-product-title { font: 600 22px/1.2 var(--dr-heading) !important; font-variation-settings: 'SOFT' 50, 'opsz' 48; color: #2B2A2A !important; }
/* square product frames like every other card on the site, image contained on the gallery oat */
.plugin-bundle-product-image-container { width: 100% !important; padding-bottom: 100% !important; background: #E7DDCD; border-radius: 8px; overflow: hidden; border: 0 !important; }
.plugin-bundle-product-image-container img { object-fit: contain !important; width: 100%; height: 100%; }
.bundle-product-subtotal-save { color: #A85A63 !important; font-weight: 700; }
.bundle-button { min-height: 48px; border-radius: 8px !important; background: #2B2A2A !important; color: #FFFFFF !important; font: 700 16px/1 var(--dr-body) !important; text-transform: lowercase !important; letter-spacing: 0 !important; }
/* the app hard-codes "ADD TO CART (2)" in caps: lower it, then capitalise the first letter → "Add to cart (2)" */
.bundle-button::first-letter { text-transform: uppercase; }
@media (max-width: 959px) { .bundle-product-title { font-size: 20px !important; } }
/* cart / cart drawer: the app's "Bundle item: …" line matches the small option text instead of body size */
.slot-cart-item-info, .slot-cart-item-info * { font-size: 13px !important; line-height: 1.4 !important; color: rgba(43, 42, 42, 0.7) !important; }
/* Share row: icon-only, all platforms inline, evenly spaced */
.social-media-share { gap: 20px !important; align-items: center; }
.social-media-share__media { padding: 2px; color: #2B2A2A; }

/* ===================== 2026-09-29: bottom-sheet size chart, description dividers, trust badges, round social badges ===================== */
/* Size Chart as a bottom sheet on every screen: full width on phones, centred 720px card on desktop */
[data-mount-modal][data-placement="bottom"] > .modal__content.dr-sheet {
  width: 100vw !important; max-width: 100vw !important; max-height: 85vh !important;
  margin: 0 auto !important; inset-block: auto 0 !important;
  border-radius: 16px 16px 0 0 !important; padding-top: 8px;
  overscroll-behavior: contain; will-change: transform;
}
/* Desktop: centred popup like ShawnCraft's size chart (the bottom sheet / swipe is phones only) */
@media (min-width: 960px) {
  [data-mount-modal][data-placement="bottom"] > .modal__content.dr-sheet {
    --modal-animation-name: animation-fade-in-center;
    inset: 0 !important; margin: auto !important;
    width: 760px !important; max-width: calc(100vw - 80px) !important;
    height: fit-content !important; max-height: 90vh !important;
    border-radius: 8px !important; padding-top: 0;
  }
  .dr-sheet .dr-sheet-handle { display: none; }
  .dr-sheet .popup__content { padding: 32px 40px 40px !important; }
  .dr-sheet .popup__title { margin: 0 0 24px; font-size: 28px; }
}
.dr-sheet-handle { position: sticky; top: 0; z-index: 11; width: 100%; height: 22px; margin-bottom: -6px; cursor: grab; touch-action: none; background: inherit; }
.dr-sheet-handle::before { content: ""; display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgba(43, 42, 42, 0.25); }
.dr-sheet .modal__close-control { position: absolute; top: 16px !important; z-index: 12 !important; }
.dr-sheet .popup__title { padding-right: 48px; }

/* Product description: each section (Fit / Details / Care / Shipping & returns) sits under a hairline with a small-caps label */
.product-detail__info .product-description .product-expander__content > p:has(> strong:first-child) {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(43, 42, 42, 0.14);
}
.product-detail__info .product-description .product-expander__content > p > strong:first-child {
  display: block; margin-bottom: 6px; font: 700 13px/1.4 var(--dr-body); letter-spacing: 0.08em; text-transform: uppercase; color: #2B2A2A;
}
.product-detail__info .product-description .product-expander__content > p > strong:first-child + br { display: none; }
.product-detail__info .product-description .product-expander__content > p:has(> strong:first-child) + ul { margin-top: 0; }
.product-detail__info .product-description .product-expander__content ul { padding-left: 1.2em; }

/* Trust badges under the buy buttons (custom-sline block "trust-badges") */
.dr-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dr-trust__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 12px; background: rgba(43, 42, 42, 0.045); text-align: center; }
.dr-trust__item svg { width: 22px; height: 22px; color: #2B2A2A; }
.dr-trust__item span { font: 400 14px/1.35 var(--dr-body); color: #2B2A2A; text-wrap: balance; }
@media (max-width: 374px) { .dr-trust__item span { font-size: 13px; } }

/* Social badges: round outlined buttons (share row + footer follow icons) */
.social-media-share { gap: 10px !important; }
.social-media-share__media,
.footer__social-media-content a {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0 !important; border: 1px solid rgba(43, 42, 42, 0.18); border-radius: 50%;
  color: #2B2A2A; transition: border-color 0.2s, background-color 0.2s;
}
.social-media-share__media:hover, .footer__social-media-content a:hover { transform: none !important; border-color: #2B2A2A; background: rgba(43, 42, 42, 0.04); }
.social-media-share__icon, .footer__social-media-content a svg { width: 18px !important; height: 18px !important; }