/** Shopify CDN: Minification failed

Line 177:0 All "@import" rules must come first

**/
/* ============================================
   SUNLIT HOURS - Custom Fonts
   Safe from theme updates. Do not delete.
   ============================================ */

/* Zalando Sans (Google Font) -- the site-wide default for both headings and body text.
   Must precede every other rule in this file (including the @font-face blocks below) since
   @import is only valid before other CSS rules. */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,400;0,500&display=swap');

/* Zalando Sans Expanded (titles, body, text) */
@font-face {
  font-family: "ZalandoSansExpanded";
  src: url('/cdn/shop/files/ZalandoSansExpanded-Regular.woff2?v=1777323584') format("woff2"),
       url('/cdn/shop/files/ZalandoSansExpanded-Regular.woff?v=1777323584') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZalandoSansExpanded";
  src: url('/cdn/shop/files/ZalandoSansExpanded-Medium.woff2?v=1777323584') format("woff2"),
       url('/cdn/shop/files/ZalandoSansExpanded-Medium.woff?v=1777323584') format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZalandoSansExpanded";
  src: url('/cdn/shop/files/ZalandoSansExpanded-SemiBold.woff2?v=1777323584') format("woff2"),
       url('/cdn/shop/files/ZalandoSansExpanded-SemiBold.woff?v=1777323584') format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* EB Garamond (subtitles) */
@font-face {
  font-family: "EBGaramond";
  src: url('/cdn/shop/files/EBGaramond-Regular.woff2?v=1777323584') format("woff2"),
       url('/cdn/shop/files/EBGaramond-Regular.woff?v=1777323584') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EBGaramond";
  src: url('/cdn/shop/files/EBGaramond-Italic.woff2?v=1777323584') format("woff2"),
       url('/cdn/shop/files/EBGaramond-Italic.woff?v=1777323584') format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Pinyon Script (details/accents) */
@font-face {
  font-family: "PinyonScript";
  src: url('/cdn/shop/files/PinyonScript-Regular.woff2?v=1777323584') format("woff2"),
       url('/cdn/shop/files/PinyonScript-Regular.woff?v=1777323584') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Override Prestige's font variables */
:root {
  --heading-font-family: "ZalandoSansExpanded", sans-serif !important;
  --heading-font-weight: 400 !important;
  --heading-font-style: normal !important;
  --text-font-family: "ZalandoSansExpanded", sans-serif !important;
  --text-font-weight: 400 !important;
  --text-font-style: normal !important;
}

/* Several custom (CRO) sections render bare heading tags (h1-h6) with no explicit font-family,
   which otherwise fall through to whatever they inherit from body (--text-font-family). That
   was invisible while heading/text pointed at the same font, but now that they're split, bare
   headings need their own default -- anything more specific (a section's own font-family rule)
   still wins normally, this only fills the gap. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
}

/* ============================================
   SUNLIT HOURS - Contact page form polish
   Fixes uneven field-box heights on desktop and
   tightens spacing on mobile. Safe from theme updates.
   ============================================ */
.shopify-section--contact .fieldset-row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.shopify-section--contact .fieldset-row > .form-control{
  flex:1 1 240px;
  display:flex;
  flex-direction:column;
}
.shopify-section--contact .fieldset-row > .form-control .input{
  flex:1 1 auto;
  height:100%;
  box-sizing:border-box;
}
.shopify-section--contact .fieldset{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.shopify-section--contact .form-control{
  box-sizing:border-box;
}
.shopify-section--contact .form-control .input,
.shopify-section--contact .form-control .textarea,
.shopify-section--contact .form-control .select{
  box-sizing:border-box;
  width:100%;
}
@media (max-width:749px){
  .shopify-section--contact .fieldset-row{
    gap:1.1rem;
  }
  .shopify-section--contact .fieldset-row > .form-control{
    flex:1 1 100%;
  }
  .shopify-section--contact .container--xs{
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
}

/* ============================================
   SUNLIT HOURS - Product gallery tablet clipping fix
   Root cause: assets/theme.css defines
     @media screen and (max-width: 999px) {
       .product-gallery__carousel-with-arrows .product-gallery__media { width: 45vw; margin-inline: auto; }
     }
   This 45vw width rule stays active all the way up to 999px, well past
   the point (700px) where the prev/next arrow buttons themselves are
   hidden (arrows use the sm:hidden utility, which fires at min-width:700px).
   In that 700-999px tablet band the gallery image is still forced into a
   centered 45vw-wide flex box while the rest of the layout has already
   moved on, which produces the cropped/clipped image at tablet widths
   (this layout is used by product.billet-doux.json, mobile_controls: arrows).
   Fix: neutralize the 45vw rule from 700px up to 999px so the gallery
   image goes back to its normal full-width box in that range, matching
   the non-clipped mobile and desktop behavior.
   Safe from theme updates.
   ============================================ */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .product-gallery__carousel-with-arrows .product-gallery__media {
    width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* ============================================
   SUNLIT HOURS - Policy page typography match
   Shopify's built-in /policies/* pages (Privacy Policy, Terms of
   Service, etc.) render through hardcoded .shopify-policy__* wrapper
   markup, not an editable theme section, so they fell back to the
   theme's default heading font ("ZalandoSansExpanded", weight 500)
   instead of the "Zalando Sans" Google Font / weight 400 / colors
   used on FAQ, About Us, and Shipping & Delivery. Matched here to the
   same font, weight, size, and color those pages use. Also resizes h2
   subheadings down from the page-title size to the smaller
   category-label size those other pages use.
   Safe from theme updates.
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,400;0,500&display=swap');

.shopify-policy__title {
  font-family: 'ZalandoSansExpanded', sans-serif !important;
  font-weight: 400 !important;
  color: #101217 !important;
}
.shopify-policy__body h2 {
  font-family: 'ZalandoSansExpanded', sans-serif !important;
  font-size: var(--text-h4);
  font-weight: 400 !important;
  color: #101217 !important;
}
.shopify-policy__body h3 {
  font-family: 'ZalandoSansExpanded', sans-serif !important;
  font-weight: 400 !important;
  color: #101217 !important;
}
.shopify-policy__body p,
.shopify-policy__body li {
  font-family: 'ZalandoSansExpanded', sans-serif !important;
  font-size: 16px !important;
  color: #4a4a4a !important;
}
/* This previously had no mobile-specific size, so it stayed at 16px on phones while every other
   page's body copy (About Us, FAQ, Shipping & Delivery, etc.) steps down to 15px on mobile. */
@media screen and (max-width: 749px) {
  .shopify-policy__body p,
  .shopify-policy__body li {
    font-size: 15px !important;
  }
}

/* Footer column headings and cart drawer headings previously fell back to the theme's
   --heading-font-family (plain Zalando Sans). Brand font is ZalandoSansExpanded, so these are
   scoped to match, without touching the shared --heading-font-family variable site-wide. */
.footer .h6,
.cart-drawer .h4,
.cart-drawer .h5 {
  font-family: 'ZalandoSansExpanded', sans-serif !important;
}
/* theme.css has a base rule (`.prose :where(* + span...))`) that forces spans following another
   element to display:inline-block, for spacing badge/pill-style content elsewhere in the theme.
   Shop policy bodies (address blocks, etc.) often contain plain <span style="font-size:..."><br></span>
   runs pasted from the policy editor -- inline-block isolates each span into its own atomic box,
   which silently swallows the <br> line breaks inside them (a <br> at the end of an inline-block
   has nothing to wrap onto). Restoring plain inline here fixes those line breaks without touching
   the base rule or affecting any other .prose content on the site. */
.shopify-policy__body span {
  display: inline !important;
}

/* ============================================
   SUNLIT HOURS - Desktop/laptop typography + navigation refinement (DRAFT)
   Follows the Studio Impulso brand board hierarchy: (1) Zalando for titles and body, (2) EB Garamond for
   subtitles, (3) Pinyon Script for optional details. At >=1000px the Expanded face is set smaller, lighter
   and more tracked so supporting text no longer competes with the jewelry; Garamond carries intro/subtitle
   lines. Phones/tablets are untouched.
   ============================================ */
@media screen and (min-width: 750px) {
  /* Titles: brand Zalando, quieter scale, light tracking */
  h1, .h1 { font-size: 1.875rem; line-height: 1.2; letter-spacing: 0.03em; }
  h2, .h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: 0.03em; }
  h3, .h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.03em; }

  /* Small headings / labels (footer, trust blocks): small tracked caps */
  h4, h5, h6, .h4, .h5, .h6, p.h6, .footer h3, .footer .h6 {
    font-family: "ZalandoSansExpanded", sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
  }
  .shopify-section[id*="trust_signals"] p.h6 { font-size: 0.8125rem !important; letter-spacing: 0.14em !important; }

  /* Body: Expanded at a comfortable reading size and line height */
  body, .prose p, .prose li { font-size: 0.875rem; line-height: 1.75; }

  /* Subtitles / intro lines: EB Garamond */
  .cch__body, body .product-info .cro-intro, body .product-info .cro-intro p {
    font-family: "EBGaramond", Georgia, serif !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
  }
  .cch__body { max-width: 62ch; }
  .cch__body em, body .product-info .cro-intro em { font-family: inherit !important; }
  body .product-info .cro-intro p { font-size: 1.1875rem !important; line-height: 1.6 !important; }
  /* Hero CTA stays Zalando for legibility over photography */
  .cch__discover { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 0.8125rem !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase; }

  /* Homepage editorial statements (intro, craftsmanship, presentation): subtitle-role copy in Garamond */
  .shopify-section--blocks .prose p, .shopify-section--image-with-text .prose p:not(.h6), .shopify-section--image-with-text p:not(.h6):not(.link) {
    font-family: "EBGaramond", Georgia, serif !important; font-size: 1.375rem !important; line-height: 1.5 !important; letter-spacing: 0 !important;
  }
  /* Section titles that render as p.h6 / social-proof h2: same quiet title scale as h2 */
  .shopify-section--image-with-text p.h6, .social-proof__heading { font-size: 1.5rem !important; letter-spacing: 0.03em !important; text-transform: none !important; }
  /* Footer column headings (theme sets these with its own !important sizing) */
  body .footer__block--links .h6, body .footer__block--cro_newsletter_social .h6, body #shopify-section-sections--31135831687249__footer .footer__block .h6 { font-size: 0.75rem !important; letter-spacing: 0.16em !important; }

  /* Collection hero title */
  .cch__head, .cch__media-head { font-size: 2.25rem !important; letter-spacing: 0.03em !important; }
  .cch__sub { font-size: 0.6875rem !important; letter-spacing: 0.22em !important; }

}

@media screen and (min-width: 1000px) {
  /* One collection only: Fine Jewelry is a direct link, so the empty Categories > Necklace dropdown is hidden */
  .shopify-section--header .header__primary-nav .header__dropdown-menu { display: none !important; }

  /* The empty search-clone wrapper adds a phantom gap that pushed the links off-center */
  .shopify-section--header .header__primary-nav .cro-search-clone-wrap { display: none !important; }

  /* Menu button: centered vertically across the whole header band (logo row + links row) */
  .shopify-section--header .header .cro-burger-left-slot { grid-row: 1 / span 2 !important; align-self: center !important; }

  /* Desktop row shows only Shop and About Us (injected links); the theme's own Fine Jewelry item is hidden here, not in the drawer */
  .shopify-section--header .header__primary-nav .header__primary-nav-item { display: none !important; }
  .shopify-section--header .header__primary-nav .header__primary-nav-item:has(.cro-extra-link) { display: list-item !important; }

  /* Header navigation row: quiet, tracked, evenly spaced */
  .shopify-section--header .header__primary-nav { gap: 2.5rem !important; }
  .shopify-section--header .header__primary-nav summary,
  .shopify-section--header .header__primary-nav .header__primary-nav-item > a,
  .shopify-section--header .cro-extra-link {
    font-family: "ZalandoSansExpanded", sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
}

/* ============================================
   Product titles, subtitles and prices at every screen size (DRAFT)
   Title: Zalando, scaled with the viewport so it always fits on one line.
   Subtitle (material) and price: EB Garamond.
   ============================================ */
.product-card .product-title {
  font-size: clamp(0.8125rem, 0.72rem + 0.35vw, 1rem) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
.product-card .product-card__material {
  font-family: "EBGaramond", Georgia, serif !important;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem) !important;
  letter-spacing: 0.01em !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
.product-card price-list, .product-card price-list *, .product-card sale-price {
  font-family: "EBGaramond", Georgia, serif !important;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem) !important;
  letter-spacing: 0.01em !important;
}
body .product-info .product-title, body .product-info h1.product-title {
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.875rem) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}
body .product-info .cro-material-gemstone {
  font-family: "EBGaramond", Georgia, serif !important;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
body .product-info [data-block-type="price"], body .product-info [data-block-type="price"] * {
  font-family: "EBGaramond", Georgia, serif !important;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem) !important;
  letter-spacing: 0.01em !important;
}

/* ============================================
   Pop-ups follow the same hierarchy (DRAFT): Zalando titles/body/UI, EB Garamond subtitle lines
   ============================================ */
/* Cookie banner */
body .privacy-banner p.h6 { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 0.8125rem !important; font-weight: 400 !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
body .privacy-banner .prose, body .privacy-banner .prose p { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 0.8125rem !important; line-height: 1.65 !important; letter-spacing: 0 !important; }
body .privacy-banner .button, body .privacy-banner button { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 0.75rem !important; letter-spacing: 0.12em; }
/* Waitlist form: the intro sentence is the subtitle (Garamond), field labels/buttons stay Zalando */
body #cro-waitlist-title { font-family: "EBGaramond", Georgia, serif !important; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
body .cro-waitlist-success__title { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem) !important; letter-spacing: 0.03em !important; }
body .cro-waitlist-modal__panel, body .cro-waitlist-modal__panel input, body .cro-waitlist-modal__panel button { font-family: "ZalandoSansExpanded", sans-serif; }
body #cro-waitlist-title { font-family: "EBGaramond", Georgia, serif !important; }
/* Newsletter pop-up */
body .newsletter-popup p.h4 { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 1rem !important; font-weight: 400 !important; letter-spacing: 0.08em !important; }
body .newsletter-popup .prose, body .newsletter-popup .prose p { font-family: "EBGaramond", Georgia, serif !important; font-size: 1.1875rem !important; line-height: 1.5 !important; }
/* Cart drawer */
body .cart-drawer p.h4, body .cart-drawer p.h6 { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 0.8125rem !important; font-weight: 400 !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
body .cart-drawer p.h5 { font-family: "EBGaramond", Georgia, serif !important; font-size: 1.375rem !important; letter-spacing: 0 !important; text-transform: none; }
body .cart-drawer__assurance, body .cart-drawer__tax-note { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 0.75rem !important; letter-spacing: 0.02em; }
/* Shopify's consent banner and preferences dialog (rendered by Shopify, not the theme) */
body [class*="shopify-pc__"] { font-family: "ZalandoSansExpanded", sans-serif !important; }
body #shopify-pc__banner__body-title, body [class*="shopify-pc__prefs__header"] h2, body [class*="shopify-pc__"] h2 { font-size: 0.8125rem !important; font-weight: 400 !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
body [class*="shopify-pc__banner__body"] p, body [class*="shopify-pc__prefs"] p { font-size: 0.8125rem !important; line-height: 1.65 !important; }
body [class*="shopify-pc__"] button { font-size: 0.75rem !important; letter-spacing: 0.1em !important; }

/* ============================================
   SUNLIT HOURS - Unified fluid type scale (DRAFT)
   One scale for every device. Roles (brand board): Zalando for titles/headings/body/labels,
   EB Garamond for lead (subtitle) lines. Sizes grow smoothly with the viewport; Expanded runs wide, so
   headings are kept close to the Garamond lead size so nothing shouts over the jewelry.
     hero title   28 -> 40px   page title 24 -> 32px   heading 18 -> 22px
     lead (serif) 18 -> 22px   body 13 -> 15px         label 11 -> 13px
   ============================================ */
:root {
  --sh-title-xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --sh-title: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  --sh-heading: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --sh-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --sh-body: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --sh-label: clamp(0.6875rem, 0.66rem + 0.12vw, 0.8125rem);
}
/* Hero / collection titles */
body .cch__head, body .cch__media-head { font-size: var(--sh-title-xl) !important; letter-spacing: 0.03em !important; line-height: 1.12 !important; }
/* Page titles */
body h1, body .h1, body .product-info .product-title, body .product-info h1.product-title { font-size: var(--sh-title) !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; }
/* Section headings */
body h2:not(.cro-waitlist-success__title):not([class*="shopify-pc"]), body .h2, body .social-proof__heading,
body .shopify-section--image-with-text p.h6, body .Mageplaza-MediaBlock__TopHeading {
  font-size: var(--sh-heading) !important; letter-spacing: 0.04em !important; line-height: 1.25 !important;
}
body h3, body .h3 { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem) !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
/* Lead lines (Garamond) */
body .cch__body, body .shopify-section--blocks .prose p, body .shopify-section--image-with-text .prose p:not(.h6),
body .shopify-section--image-with-text p:not(.h6):not(.link), body .product-info .cro-intro, body .product-info .cro-intro p,
body .cro-collection-hero .cch__text p:not(.cch__head) {
  font-family: "EBGaramond", Georgia, serif !important; font-size: var(--sh-lead) !important; line-height: 1.5 !important; letter-spacing: 0 !important;
}
/* Body copy and links */
body .shopify-section--text-with-icons p:not(.h6), body .footer .link-faded, body .footer p:not(.h6), body .prose li { font-size: var(--sh-body) !important; line-height: 1.7 !important; }
body .shopify-section--image-with-text a.link, body .cro-cta-note { font-size: var(--sh-body) !important; letter-spacing: 0.04em; }
/* Labels (small tracked caps) */
body .shopify-section--text-with-icons p.h6, body .footer p.h6, body .footer .h6 { font-size: var(--sh-label) !important; letter-spacing: 0.14em !important; }
/* Homepage editorial sections size their text through an inline variable; point it at the shared lead size */
html:root { --cro-home-body-size: var(--sh-lead); }
html body [id*="_home"] .image-with-text p.h6, html body [id*="_home"] .image-with-text .prose p.h6 { font-size: var(--sh-heading) !important; letter-spacing: 0.04em !important; text-transform: none !important; }
html body [id*="_home"] .image-with-text a.link, html body [id*="_home"] .image-with-text .prose a { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: var(--sh-body) !important; letter-spacing: 0.04em !important; }
html body .Mageplaza-MediaBlock__TopHeading, html body [class*="MediaBlock__TopHea"] { font-size: var(--sh-heading) !important; letter-spacing: 0.04em !important; }
html body .social-proof__caption-title { font-size: var(--sh-body) !important; letter-spacing: 0.03em !important; }
html body .social-proof__caption-price { font-family: "EBGaramond", Georgia, serif !important; font-size: 1.0625rem !important; }

/* Shoppable tiles: product name on one line (scaled to the tile so it never truncates), stone and price beneath in Garamond */
html body .social-proof__caption { container-type: inline-size; }
html body .social-proof__caption-title { font-size: clamp(0.625rem, 5.6cqw, 0.9375rem) !important; letter-spacing: 0.02em !important; white-space: nowrap !important; text-overflow: clip !important; overflow: visible !important; }
html body .social-proof__caption-meta { display: flex; gap: 0.6em; align-items: baseline; font-family: "EBGaramond", Georgia, serif; }
html body .social-proof__caption-sub, html body .social-proof__caption-price { font-family: "EBGaramond", Georgia, serif !important; font-size: clamp(0.9375rem, 8cqw, 1.125rem) !important; letter-spacing: 0.01em !important; opacity: 0.8; }

/* Product cards: name, material and price always on ONE line; type scales with each card's own width */
html body .product-card__info { container-type: inline-size; }
html body .product-card .product-title { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; font-size: min(1rem, 6.3cqw) !important; letter-spacing: 0.02em !important; }
html body .product-card .product-card__material { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; font-size: min(1.125rem, 7.2cqw) !important; letter-spacing: 0 !important; }
html body .product-card price-list, html body .product-card price-list *, html body .product-card sale-price { white-space: nowrap !important; font-size: min(1.1875rem, 8cqw) !important; }

/* Product page (laptop/desktop): the title's cap line sits level with the top edge of the lead photo.
   Both start from the header height, so the alignment holds when the header is one or two rows tall. */
@media screen and (min-width: 1000px) {
  html body .product-info { padding-top: calc(var(--header-height, 0px) - 2.5rem) !important; }
}

/* Product detail tabs/accordions (Details, The Design, Shipping & Returns, Care): descriptive prose in EB Garamond */
html body .product-info .accordion__content, html body .product-info .accordion__content p, html body .product-info .accordion__content li {
  font-family: "EBGaramond", Georgia, serif !important; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important; line-height: 1.55 !important; letter-spacing: 0 !important;
}

/* Any descriptive rich text inside the product info column (e.g. "A Signature Presentation") follows the same Garamond prose style */
html body .product-info .product-info__block-item .prose p, html body .product-info .product-info__block-item .prose li {
  font-family: "EBGaramond", Georgia, serif !important; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important; line-height: 1.55 !important; letter-spacing: 0 !important;
}
/* Specificity bump: the product template sets its intro/packaging text sizes inline, which kept Garamond at 14px */
html body main .product-info .cro-intro, html body main .product-info .cro-intro p { font-size: var(--sh-lead) !important; line-height: 1.5 !important; }
html body .product-info [data-block-type="text"][data-block-id] .prose p, html body .product-info [data-block-type="text"][data-block-id] .prose li {
  font-family: "EBGaramond", Georgia, serif !important; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important; line-height: 1.55 !important;
}

/* Every piece of text inside the product dropdowns (spec labels, spec values, links) is EB Garamond; the dropdown titles stay Zalando */
html body .product-info .accordion__content *, html body .product-info .accordion__content a, html body .product-info .accordion__content span {
  font-family: "EBGaramond", Georgia, serif !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body .product-info .accordion__content span:not(:only-child):first-child:not(:last-child) { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem) !important; opacity: 0.65; }
html body .product-info .accordion__content span:last-child:not(:only-child), html body .product-info .accordion__content a {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important;
}

/* Homepage text links ("Discover the inspiration", "Discover our signature packaging"): small tracked Zalando caps, underlined -
   the same call-to-action style as the hero CTA and buttons, and always smaller than the paragraph above.
   Specificity matches the section's own inline sizing rule. */
html body [id$="__craftsmanship_home"] .image-with-text > .prose > a.link,
html body [id$="__presentation_home"] .image-with-text > .prose > a.link,
html body [id*="_home"] .image-with-text .prose a.link {
  font-family: "ZalandoSansExpanded", sans-serif !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* ============================================
   FINAL RULE (client direction): Zalando Expanded = titles, headings, menus, labels, buttons.
   EB Garamond = body copy and subtitles (descriptions, prices, paragraphs) on every page.
   ============================================ */
:root { --sh-prose: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
html body main :is(.prose, .rte, .shopify-policy__body, .accordion__content, .text-with-icons, .multi-column, .faq, .contact) :is(p, li, dd, blockquote):not(.h6):not(.h5):not(.h4):not([class*="label"]):not(.cro-cta-note):not(.footer *):not(footer *):not([class*="footer"] *),
html body main :is(.shopify-section--text-with-icons, .shopify-section--rich-text, .shopify-section--multi-column, .shopify-section--faq, .shopify-section--main-page, .shopify-section--contact) p:not(.h6):not(.h5):not(.h4),
html body .shopify-policy__body :is(p, li, span),
html body .privacy-banner .prose p, html body [class*="shopify-pc__banner__body"] p, html body [class*="shopify-pc__prefs"] p {
  font-family: "EBGaramond", Georgia, serif !important;
  font-size: var(--sh-prose) !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* Prices everywhere are subtitle-role Garamond */
html body :is(price-list, sale-price, .price, .price-list, [class*="price"]) { font-family: "EBGaramond", Georgia, serif !important; }
/* About Us body paragraphs */
html body .cro-about__paragraph, html body .cro-about__paragraph p, html body .cro-about__paragraph li {
  font-family: "EBGaramond", Georgia, serif !important; font-size: var(--sh-prose) !important; line-height: 1.6 !important; letter-spacing: 0 !important;
}
/* CTA buttons: brand Zalando (Expanded) everywhere */
html body :is(.button, button.button, .cro-waitlist-trigger, .cro-waitlist-form button[type="submit"], .cro-waitlist-success__close, .cro-cta-button, [class*="shopify-pc__"] button, .shopify-payment-button__button, .product-form__submit) {
  font-family: "ZalandoSansExpanded", sans-serif !important;
}

/* Footer (menus, newsletter line, copyright) stays Zalando Expanded */
html body :is(.footer, footer, .shopify-section--footer) :is(p, li, a, span, label, input, button, div) {
  font-family: "ZalandoSansExpanded", sans-serif !important;
}
/* Cookie banner: links inherit the body face and size so "Privacy Policy" no longer looks oversized */
html body [class*="shopify-pc__banner__body"] a, html body [class*="shopify-pc__prefs"] a { font-family: inherit !important; font-size: inherit !important; }
html body .footer__block .prose, html body .footer__block .prose p, html body .footer__block p { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: var(--sh-body) !important; letter-spacing: 0 !important; line-height: 1.7 !important; }

/* Garamond body copy is brand black (#101217): its thin strokes read weak in the theme's gray, so full-strength color keeps it level with the Zalando text */
html body main :is(.prose, .rte, .shopify-policy__body, .accordion__content, .text-with-icons, .multi-column, .faq, .contact, .cro-about__paragraph) :is(p, li, dd, blockquote, span, a):not(.h6):not(.h5):not(.h4):not(.footer *):not(footer *):not([class*="footer"] *),
html body main .cro-about__paragraph, html body main .cro-about__paragraph p,
html body .shopify-policy__body :is(p, li, span),
html body .product-info .accordion__content :is(p, li, span, a),
html body .product-info .cro-intro p, html body .product-info .cro-material-gemstone,
html body [class*="shopify-pc__banner__body"] p, html body [class*="shopify-pc__prefs"] p {
  color: #101217 !important;
  opacity: 1 !important;
}

/* FAQ questions and product dropdown titles are titles: Zalando Expanded, sized to the scale */
html body .faq__content summary, html body .faq__content summary .text-with-icon, html body .faq__content summary span,
html body .product-info .accordion__disclosure summary, html body .product-info .accordion__disclosure summary * {
  font-family: "ZalandoSansExpanded", sans-serif !important;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem) !important;
  letter-spacing: 0.01em !important; text-transform: none !important; color: #101217 !important;
}
html body .product-info .accordion__disclosure summary svg { width: auto; height: auto; }

/* ============================================
   Footer pages (Shipping & Returns, Care, FAQs, Contact, Packaging, About, Privacy, Terms): one consistent set of sizes
     page title   -> --sh-title   (Zalando, caps)       section heading -> --sh-heading (Zalando, caps)
     sub-heading  -> 17-18px (Zalando, caps)             body / links    -> --sh-prose   (EB Garamond, black)
   ============================================ */
html body main :is(h1, .h1):not(.cch__head):not(.product-title):not(.product-info *),
html body .shopify-section--contact h2:first-of-type {
  font-family: "ZalandoSansExpanded", sans-serif !important; font-size: var(--sh-page-title) !important;
  line-height: 1.2 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; font-weight: 400 !important;
}
html body main :is(h2, .h2):not(h1):not(.product-info *):not(.social-proof__heading):not(.cro-waitlist-success__title),
html body .shopify-section--faq .faq__category, html body .shopify-section--faq p.h4 {
  font-family: "ZalandoSansExpanded", sans-serif !important; font-size: var(--sh-page-heading) !important;
  line-height: 1.25 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; font-weight: 400 !important;
}
html body .shopify-section--contact h2:first-of-type { font-size: var(--sh-page-title) !important; }
html body main :is(h3, .h3):not(.product-info *) {
  font-family: "ZalandoSansExpanded", sans-serif !important; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem) !important;
  letter-spacing: 0.05em !important; text-transform: uppercase !important; font-weight: 400 !important;
}
/* Body inside policy/service text: bold run-ins and links follow the body face */
html body main :is(.prose, .rte, .shopify-policy__body) :is(strong, b) { font-family: "EBGaramond", Georgia, serif !important; font-size: inherit !important; font-weight: 600 !important; }
html body main :is(.prose, .rte, .shopify-policy__body) a:not(.button) { font-family: "EBGaramond", Georgia, serif !important; font-size: inherit !important; text-decoration: underline; color: #101217 !important; }
/* Contact page has no h1: its "Get in Touch" heading is the page title, so it takes the page-title size */
html body main .shopify-section--contact :is(h2, .h2):not(h1):not(.product-info *):not(.social-proof__heading):not(.cro-waitlist-success__title) { font-size: var(--sh-page-title) !important; letter-spacing: 0.05em !important; }

/* Homepage text-link CTAs: the theme draws its own 1px underline with a background gradient, which doubled up with the text underline
   (and ran as a long rule under wrapped text). One underline only: the text underline, which follows each line. */
html body [id*="_home"] .image-with-text .prose a.link {
  background-image: none !important;
  background-size: 0 0 !important;
  display: inline !important;
  line-height: 1.8 !important;
}

/* Footer-page title scale (smaller than the homepage/product scale so caps titles never dominate, especially on phones):
     page title 18 -> 26px, section heading 15 -> 18px */
:root { --sh-page-title: clamp(1.125rem, 1rem + 0.6vw, 1.625rem); --sh-page-heading: clamp(0.9375rem, 0.88rem + 0.28vw, 1.125rem); }
/* CTA link: space above it, still one underline */
html body [id*="_home"] .image-with-text .prose a.link { display: inline-block !important; margin-top: 1.1rem !important; }
/* Sub-headings on footer pages sit below section headings (they were a hair larger on the privacy page) */
html body main :is(h3, .h3):not(.product-info *) { font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem) !important; letter-spacing: 0.05em !important; }

/* Product page title: always ONE line. The size is the smaller of the normal fluid size and a size derived from the info column's own width,
   so it scales down on narrow columns/phones instead of wrapping. */
html body .product-info { container-type: inline-size; }
html body .product-info .product-title, html body .product-info h1.product-title {
  white-space: nowrap !important;
  font-size: min(clamp(1.125rem, 0.9rem + 1.1vw, 1.875rem), 5.6cqw) !important;
  letter-spacing: 0.01em !important;
  overflow: visible !important;
}
/* Italic phrases inside Garamond copy stay Garamond Italic (they were falling back to Zalando italic) */
html body main :is(p, li, .cro-intro) :is(em, i) { font-family: inherit !important; font-size: inherit !important; }

/* Phones: homepage tile captions (name, stone, price) sit closer to the body copy size (14-15px) instead of the larger tablet/desktop sizes */
@media screen and (max-width: 749px) {
  html body .social-proof__caption-title { font-size: min(0.8125rem, 5cqw) !important; letter-spacing: 0.02em !important; }
  html body .social-proof__caption-sub, html body .social-proof__caption-price { font-size: 0.9375rem !important; line-height: 1.25 !important; }
  html body .social-proof__caption { padding: 0.4rem 0.6rem !important; gap: 0.1rem !important; }
  html body .social-proof__caption-meta { gap: 0.5em !important; }
}

/* Wishlist / Send a hint / Share row: always one line that fits its width (scales down on narrow phones instead of cutting off "Share") */
html body .cro-actions { container-type: inline-size; justify-content: space-between !important; gap: 0.5rem !important; flex-wrap: nowrap !important; }
html body .cro-actions > *, html body .cro-actions button { font-size: min(0.75rem, 3cqw) !important; letter-spacing: 0.05em !important; white-space: nowrap !important; flex: 0 1 auto; min-width: 0; }

/* Desktop/laptop: collapse the Shop / About Us row while scrolling down (class set by the script in layout/theme.liquid) */
@media screen and (min-width: 1000px) {
  .shopify-section--header .header__primary-nav { transition: opacity 0.2s ease; }
  html.sh-nav-collapsed .shopify-section--header .header__primary-nav { display: none !important; }
  /* the theme overlaps the header with the content below via a negative margin tied to --header-height, so only that variable is held constant
     (a min-height on the wrapper would cancel the overlap and push the page down) */
  html.sh-nav-collapsed { --header-height: var(--sh-header-full) !important; }
  /* the shorter header overlaps the page by exactly its own height, so the content below does not move when the row hides */
  html.sh-nav-collapsed.cro-transparent-page .shopify-section--header .header,
  html.sh-nav-collapsed .shopify-section--header .header { margin-block-end: calc(-1 * var(--sh-header-collapsed, var(--sh-header-full))) !important; }
}

/* Collection page, phones: center the pink sapphire pendant in its portrait card.
   The 16:9 source has the pendant slightly right of the image's center (about 54%), so a plain 50% crop pushed it right.
   58% shifts the crop window so the pendant sits in the middle of the card. */
@media screen and (max-width: 749px) {
  html body product-card.product-card--collection[handle="lettre-douce-necklace-pink-sapphire"] img.product-card__image--sapphire-front { object-position: 58% 50% !important; }
}

/* Collection filter/count bar (sticky): on desktop the header never actually slides away, but the theme's hide-on-scroll logic sets this bar to top:0,
   so it rode up over the header. Keep it directly below the header, whether the Shop / About Us row is showing or collapsed. */
@media screen and (min-width: 1000px) {
  html:not(.sh-nav-collapsed) body .collection-toolbar { top: var(--header-height, 109px) !important; }
  html.sh-nav-collapsed body .collection-toolbar { top: var(--sh-header-collapsed, 85px) !important; }
}

/* Search results cards: the notify (bell) icon is always visible, as on the collection page */
html body .product-card--collection .product-card__quick-add-button { opacity: 1 !important; visibility: visible !important; }

/* Search results: same card grid as the collection page (four columns on desktop, two on tablet, one on phones) instead of one giant column */
html body .csr product-list { display: grid !important; gap: 2.5rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media screen and (min-width: 750px) { html body .csr product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (min-width: 1000px) { html body .csr product-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Notify (bell) icon on product cards: a little more air from the image's bottom and right edges (was 8px) */
html body .product-card .product-card__quick-add-button { inset-block-end: 16px !important; inset-inline-end: 16px !important; bottom: 16px !important; right: 16px !important; }
@media screen and (max-width: 749px) { html body .product-card .product-card__quick-add-button { inset-block-end: 14px !important; inset-inline-end: 14px !important; bottom: 14px !important; right: 14px !important; } }

/* ============================================
   Homepage vertical rhythm (DRAFT): one gap between every content block.
   --sh-block-gap is the space between the content of two neighbouring sections (48px on phones, up to 96px on large screens);
   each section contributes half of it above and below, so the gap is the same everywhere.
   ============================================ */
:root { --sh-block-gap: clamp(3rem, 2rem + 3.2vw, 6rem); }
html body [id$="__1780880511d8093d60"] .section-spacing { padding-top: var(--sh-block-gap) !important; padding-bottom: calc(var(--sh-block-gap) / 2) !important; }
html body [id$="__social_proof_home"] .social-proof { padding-block: calc(var(--sh-block-gap) / 2) !important; }
html body [id$="__craftsmanship_home"] .section-spacing,
html body [id$="__presentation_home"] .section-spacing,
html body [id$="__trust_signals_home"] .section-spacing { padding-block: calc(var(--sh-block-gap) / 2) !important; }

/* Notify (bell) icon on every product card: no rotation or slide on hover. Hovering (desktop/laptop) only fills the bell.
   The theme's default spins the icon 90deg and slides it up 5px; the collection page already cancelled that, search results and others had not. */
html body .product-card .product-card__quick-add-button,
html body .product-card .product-card__quick-add-button:hover,
html body .product-card .product-card__quick-add-button:focus,
html body .product-card:hover .product-card__quick-add-button,
html body .product-card:focus-within .product-card__quick-add-button { transform: none !important; transition: opacity 0.2s ease-in-out !important; }
html body .product-card .product-card__quick-add-button svg,
html body .product-card .product-card__quick-add-button:hover svg,
html body .product-card .product-card__quick-add-button:focus svg { transform: none !important; rotate: none !important; }

/* Search results title: the section-heading size used on the footer pages (it was a fixed 25.6px, large on every screen) */
html body .csr__title { font-family: "ZalandoSansExpanded", sans-serif !important; font-size: var(--sh-page-heading) !important; letter-spacing: 0.05em !important; line-height: 1.2 !important; font-weight: 400 !important; text-transform: uppercase; }
html body .csr__head { margin-bottom: calc(var(--sh-block-gap) / 1.5) !important; }

/* Search empty state: message and "Did you mean" are body copy (EB Garamond, black); the title above them keeps the heading size */
html body .csr__empty p, html body .csr__empty .csr__suggest { font-family: "EBGaramond", Georgia, serif !important; font-size: var(--sh-prose) !important; line-height: 1.5 !important; letter-spacing: 0 !important; color: #101217 !important; }
html body .csr__empty .csr__suggest a { font-family: inherit !important; font-size: inherit !important; text-decoration: underline; text-underline-offset: 0.2em; color: #101217 !important; }

/* ---- Fixes from phone/laptop review ---- */

/* 1) Footer (desktop/laptop): "The Art of the Presentation" always on one line; its column sizes to fit the link instead of wrapping it */
@media screen and (min-width: 1000px) {
  html body .footer a[href$="/pages/packaging"] { white-space: nowrap !important; }
  html body .footer .footer__block:has(a[href$="/pages/packaging"]) { flex: 0 0 auto !important; min-width: max-content; }
}

/* 2) Links in product-page copy: one underline only. The theme also paints a 1px gradient underline on prose links, which doubled up with the text underline. */
html body main :is(.prose, .accordion__content, .rte) a, html body .product-info a.link { background-image: none !important; background-size: 0 0 !important; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* 3) Product video fullscreen button: it sat above the sticky header (z-index 7 vs the header's 4) and overlapped it on phones.
      The gallery now keeps its own stacking order inside a layer that sits below the header. */
html body .product-gallery { isolation: isolate; }

/* 4) Sticky "Notify me / Add to cart" bar: name, stone and price share the button's width; stone and price are EB Garamond at one size */
html body .cro-sticky__info { container-type: inline-size; justify-content: space-between !important; gap: 0.5em !important; max-width: 480px !important; }
html body .cro-sticky__name { font-size: min(0.8125rem, 3.7cqw) !important; letter-spacing: 0.02em !important; white-space: nowrap; }
html body .cro-sticky__stone, html body .cro-sticky__price {
  font-family: "EBGaramond", Georgia, serif !important; font-size: min(1.0625rem, 4.8cqw) !important; color: #101217 !important; letter-spacing: 0 !important; white-space: nowrap;
}
html body .cro-sticky__dot { color: #9a9188; font-size: 0.6rem; }
@media screen and (min-width: 750px) { html body .cro-sticky__info { max-width: 560px !important; } }

/* Burgundy diamond photo as a square thumbnail (side menu, search panel): the pendant is centered and enlarged.
   Background crop worked out from the photo: pendant center at about 52% across / 76% down; 310% width with this offset puts it in the middle of the square with no empty strip. */
html body .sh-pendant-thumb { display: block; width: 100%; height: 100%; background-color: #3b1626; background-repeat: no-repeat; background-size: 310% auto; background-position: 51% 92.1%; border-radius: inherit; }
html body .header-sidebar__bestseller-image.sh-pendant-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 4px; }

/* ---- Desktop/laptop product details: the tabs (Details, The Design, Shipping, Care) use .cro-tabpanel, not the phone accordion.
   Same rules as the accordion: every line of text EB Garamond, black; spec labels small, values larger; titles (the tab names) stay Zalando. ---- */
html body .product-info .cro-tabpanel, html body .product-info .cro-tabpanel :is(p, li, span, a, em, strong, dd, dt, div) {
  font-family: "EBGaramond", Georgia, serif !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body .product-info .cro-tabpanel :is(p, li) { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; color: #101217 !important; }
html body .product-info .cro-tabpanel .cro-specs li > span:first-child:not(:only-child) { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem) !important; opacity: 0.65; }
html body .product-info .cro-tabpanel .cro-specs li > span:last-child:not(:only-child) { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important; color: #101217 !important; }
html body .product-info .cro-tabpanel a { background-image: none !important; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; font-size: inherit !important; color: #101217 !important; }

/* Sticky bar on desktop/tablet: name, stone and price stay together in the middle of the bar instead of spreading to its edges */
@media screen and (min-width: 750px) {
  html body .cro-sticky__info { justify-content: center !important; gap: 0.7em !important; }
  html body .cro-sticky__name { font-size: 0.9375rem !important; }
  html body .cro-sticky__stone, html body .cro-sticky__price { font-size: 1.125rem !important; }
}

/* Image viewer (lightbox): no boxes. The close (x) and previous/next arrows are the theme's black on every photo except the dark burgundy one,
   where they turn white for contrast. The class is set by a small script in layout/theme.liquid that checks which photo is showing. */
html body .pswp.sh-pswp-dark .pswp__button.circle-button,
html body .pswp.sh-pswp-dark .pswp__top-bar .circle-button { color: #ffffff !important; }
html body .pswp.sh-pswp-dark .pswp__button.circle-button svg,
html body .pswp.sh-pswp-dark .pswp__button.circle-button svg path,
html body .pswp.sh-pswp-dark .pswp__top-bar .circle-button svg,
html body .pswp.sh-pswp-dark .pswp__top-bar .circle-button svg path { color: #ffffff !important; stroke: #ffffff !important; }

/* DRAFT: image viewer controls stay visible -- tapping the photo on touch screens used to toggle them off and they never came back */
html body .pswp.pswp--open .pswp__hide-on-close {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* DRAFT: mobile sticky bar -- name, stone and price sit together in the centre instead of spreading edge to edge */
@media screen and (max-width: 749px) {
  html body .cro-sticky__info { justify-content: center !important; gap: 0.45em !important; }
}

/* DRAFT: mobile side menu -- account rows with icons (Login / Wish list / Client Care) */
html body .header-sidebar__account-rows { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 1.15rem; }
html body .header-sidebar__account-row {
  display: flex; align-items: center; gap: 0.9rem; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; text-decoration: none;
  font-family: "ZalandoSansExpanded", sans-serif !important; font-size: 0.875rem; letter-spacing: 0.01em; text-transform: none; color: #101217;
}
html body .header-sidebar__account-row svg { width: 22px; height: 22px; flex-shrink: 0; }
html body .header-sidebar__jewelry-link { color: #101217; }
html body .header-sidebar__account-rows { padding: 0 1rem 1.25rem 1rem; }

/* DRAFT: side menu "Jewelry" expands in place to By Collection / By Category */
html body .header-sidebar__jewelry-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; margin: 0; }
html body .header-sidebar__jewelry-toggle svg { transition: transform .2s; }
html body .header-sidebar__jewelry-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
html body .header-sidebar__jewelry-panel { padding-top: 1rem; display: grid; row-gap: .7rem; }
html body .header-sidebar__jewelry-panel[hidden] { display: none; }
html body .header-sidebar__jewelry-label { margin: .35rem 0 0; font-family: "ZalandoSansExpanded", sans-serif; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #6b645c; }
html body .header-sidebar__jewelry-panel .header-sidebar__discover-link { padding-left: .5rem; }
html body .header-sidebar__account-login { display: block; --button-padding: 0; }
html body .header-sidebar__account-login::part(signed-out-avatar) { padding: 0; margin: 0; width: auto; height: auto; justify-content: flex-start; background: none; border: 0; }

/* DRAFT: pink sapphire collection card -- photo is widened and anchored to the top so both chains rise to the top edge behind the badge (as on the product page), with the pendant near the middle of the frame; the strip below the photo matches its background */
html body product-card.product-card--collection[handle="lettre-douce-necklace-pink-sapphire"] .product-card__media { background: #fbfbfb; position: relative !important; overflow: hidden !important; }
html body product-card.product-card--collection[handle="lettre-douce-necklace-pink-sapphire"] .product-card__image--primary.product-card__image--sapphire-front {
  position: absolute !important; top: 0 !important; left: -53.2% !important; width: 186% !important; max-width: none !important; height: auto !important;
  object-fit: fill !important; transform: none !important;
}

/* DRAFT: diamond card -- bust photo is the default image, close-up bust photo is the hover image */
html body .product-card--collection .product-card__image--bust-close { transform: none !important; object-fit: cover !important; object-position: 52% 50% !important; }
html body .product-card--collection .product-card__image--flower { transform: none !important; object-fit: cover !important; object-position: 79% 50% !important; }
html body #cro-search .csp__thumb img.csp__bust { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }

html body #cro-search .csp__thumb img.csp__flower { object-position: 90% 50%; }

/* DRAFT: desktop has the inline Jewelry / About Us links plus account, search and cart icons, so the side-menu button would only repeat them; it stays on phones and tablets */
@media screen and (min-width: 1000px) {
  html body .shopify-section--header .header .cro-burger-left-slot { display: none !important; }
}

/* DRAFT: phones held sideways -- the hero is a short wide strip, so keep the pendant (about 57% down the photo) in view instead of anchoring the crop to the bottom of the photo */
@media screen and (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  html body .cch__img { object-position: 68% 59% !important; }
  /* no gray box behind the hero text; a soft shadow keeps the white text readable on the pink photo */
  html body .cch__text.cch__text--corner { background: none !important; background-image: none !important; box-shadow: none !important; }
  html body .cch__text.cch__text--corner :is(h1, h2, p, a) { text-shadow: 0 1px 14px rgba(40, 10, 25, .45); }
  /* text scales with the screen height so the title never slides under the header on short sideways screens */
  html body .cch__text.cch__text--corner .cch__head { font-size: clamp(1.3rem, 8.5vh, 2.1rem) !important; line-height: 1.12 !important; margin-bottom: 3px !important; }
  html body .cch__text.cch__text--corner .cch__body, html body .cch__text.cch__text--corner .cch__body * { font-size: clamp(0.9rem, 5.4vh, 1.2rem) !important; line-height: 1.35 !important; }
  html body .cch__text.cch__text--corner .cch__discover { margin-top: clamp(8px, 3.5vh, 24px) !important; }
}

/* DRAFT: short screens (phones held sideways) -- Login / Wish list / Client Care sit in one row so the Jewelry links above stay visible */
@media screen and (max-height: 520px) {
  html body .header-sidebar__account-rows { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding-bottom: .75rem; }
  html body .header-sidebar__account-row svg { width: 20px; height: 20px; }
}