/** Shopify CDN: Minification failed

Line 3166:0 Unexpected "<"
Line 3204:0 Unexpected "<"

**/
/*// =============================================================================
// Ella Custom CSS - Customize The Style For Layout
// =============================================================================

// =============================================================================
//
// IMPORTANT DISCLAIMER
// Shopify is notifying shop owners about the need to convert scss files to css files.
// Please use only CSS to style the layout.
//
// =============================================================================*/

.card-media > img,
.card-media > video {
  border-radius: 12px; /* match testimonial card + .card-media wrapper */
}

/* =============================================================================
   SIDE CART DRAWER — Chaarmology
   ----------------------------------------------------------------------------
   Color: drenched maroon (#962B50) with cream text and gold accents only on
   actions. Typography: Lemosty for the heading, Glaukon for everything else.
   Hierarchy: header → items list → tool icons → totals → primary action
   stack. Spacing rhythm: tight within an item, generous between sections.
   ============================================================================= */

#halo-cart-sidebar {

    background: var(--cm-maroon) !important;
    color: var(--cm-cream) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.22);
    border-left: none;
}

/* Scrollbar styling (subtle, gold on deep maroon) */
#halo-cart-sidebar *::-webkit-scrollbar { width: 4px; }
#halo-cart-sidebar *::-webkit-scrollbar-track { background: var(--cm-maroon-deep); }
#halo-cart-sidebar *::-webkit-scrollbar-thumb { background: var(--cm-gold); border-radius: 2px; }

/* --- Header --- */
#halo-cart-sidebar .halo-sidebar-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 26px 28px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
#halo-cart-sidebar .halo-sidebar-header .title {
    color: var(--cm-cream) !important;
    font-family: Lemosty, serif !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    text-transform: none !important;
    margin: 0 !important;
}
#halo-cart-sidebar .wrapper-cartCount {
    color: var(--cm-cream-dim) !important;
    font-family: Glaukon, serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin: 4px 0 0 !important;
}
#halo-cart-sidebar .wrapper-cartCount .cartCount {
    color: var(--cm-cream) !important;
    font-weight: 600 !important;
    margin-right: 4px;
}

/* Close X — gold, top-right */
#halo-cart-sidebar .halo-sidebar-close {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.95;
    transition: opacity 0.2s;
}
#halo-cart-sidebar .halo-sidebar-close:hover { opacity: 1; }
#halo-cart-sidebar .halo-sidebar-close svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--cm-gold) !important;
    stroke: transparent;
}
#halo-cart-sidebar .halo-sidebar-close svg path,
#halo-cart-sidebar .halo-sidebar-close svg * {
    fill: var(--cm-gold) !important;
    stroke: var(--cm-gold) !important;
}

/* --- Items list --- */
#halo-cart-sidebar .halo-sidebar-wrapper {
    padding: 0 !important;
}
#halo-cart-sidebar .previewCart-wrapper,
#halo-cart-sidebar .previewCart { padding: 0 !important; }
#halo-cart-sidebar .previewCartList { margin: 0 !important; padding: 0 !important; list-style: none !important; }

#halo-cart-sidebar .previewCartItem {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--cm-gold) !important;
    padding: 18px 28px 20px !important;
    margin: 0 !important;
    position: relative !important;
}

/* Thumbnail */
#halo-cart-sidebar .previewCartItem-image {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--cm-cream-faint);
    margin: 0 !important;
}
#halo-cart-sidebar .previewCartItem-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Content column */
#halo-cart-sidebar .previewCartItem-content {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 32px; /* room for remove × */
}

/* Item title — CREAM with strong override (link-underline rules try to override) */
#halo-cart-sidebar .previewCartItem-name,
#halo-cart-sidebar .previewCartItem-name .text,
#halo-cart-sidebar a.previewCartItem-name,
#halo-cart-sidebar a.previewCartItem-name .text,
#halo-cart-sidebar .previewCartItem-name .text * {
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background-image: none !important;
    background: transparent !important;
    display: block !important;
    margin: 0 0 8px !important;
    -webkit-line-clamp: 3 !important;
}

/* Line-item properties (Expected Date of Delivery, etc.) */
#halo-cart-sidebar .card-properties,
#halo-cart-sidebar dl.cart-item-properties {
    margin: 4px 0 8px !important;
    padding: 0 !important;
    color: var(--cm-cream-dim) !important;
    font-family: Glaukon, serif !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}
#halo-cart-sidebar .card-properties dt {
    display: inline !important;
    font-weight: 600;
    color: var(--cm-cream) !important;
    margin-right: 4px;
}
#halo-cart-sidebar .card-properties dd {
    display: inline !important;
    margin: 0 !important;
}
#halo-cart-sidebar .card-properties dd::after { content: ""; display: block; }

/* Item row: price + qty stepper */
#halo-cart-sidebar .previewCartItem-change {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

/* Price */
#halo-cart-sidebar .previewCartItem-price,
#halo-cart-sidebar .previewCartItem-price .price,
#halo-cart-sidebar .previewCartItem-price .price .money,
#halo-cart-sidebar .previewCartItem-price .discounted-price,
#halo-cart-sidebar .previewCartItem-price * {
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
#halo-cart-sidebar .previewCartItem-price .compare-price,
#halo-cart-sidebar .previewCartItem-price del {
    color: var(--cm-cream-dim) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: line-through;
    margin-right: 4px;
}

/* Qty stepper — transparent on maroon, cream border + digit */
#halo-cart-sidebar .previewCartItem-qty,
#halo-cart-sidebar cart-update-quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 1px solid var(--cm-cream-faint) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    height: 32px;
    margin: 0 !important;
}
#halo-cart-sidebar .previewCartItem-qty label,
#halo-cart-sidebar cart-update-quantity label { display: none !important; }
#halo-cart-sidebar .previewCartItem-qty .btn-quantity,
#halo-cart-sidebar .previewCartItem-qty a.minus,
#halo-cart-sidebar .previewCartItem-qty a.plus,
#halo-cart-sidebar cart-update-quantity a.minus,
#halo-cart-sidebar cart-update-quantity a.plus {
    width: 28px !important;
    height: 100% !important;
    color: var(--cm-cream) !important;
    background: transparent !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    cursor: pointer;
    line-height: 1;
}
#halo-cart-sidebar .previewCartItem-qty .btn-quantity:hover { color: var(--cm-gold) !important; }
#halo-cart-sidebar .previewCartItem-qty input.quantity,
#halo-cart-sidebar cart-update-quantity input {
    width: 32px !important;
    height: 100% !important;
    background: transparent !important;
    color: var(--cm-cream) !important;
    border: none !important;
    text-align: center !important;
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 !important;
}

/* Remove × — circled outline */
#halo-cart-sidebar .previewCartItem-remove {
    position: absolute !important;
    top: 18px !important;
    right: 28px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 1px solid var(--cm-cream-dim) !important;
    background: transparent !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
#halo-cart-sidebar .previewCartItem-remove:hover {
    border-color: var(--cm-cream) !important;
    background: rgba(255, 240, 240, 0.08) !important;
}
#halo-cart-sidebar .previewCartItem-remove svg {
    width: 10px !important;
    height: 10px !important;
    fill: var(--cm-cream) !important;
}
#halo-cart-sidebar .previewCartItem-remove svg path {
    fill: var(--cm-cream) !important;
    stroke: var(--cm-cream) !important;
}

/* --- "You May Also Like" upsell — keep but tame the placeholder example card --- */
#halo-cart-sidebar .previewCartCollection {
    padding: 20px 28px 4px !important;
    margin: 0 !important;
}
#halo-cart-sidebar .previewCartTitle {
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}
/* Hide the "Example Product Title" placeholder card (theme demo content) */
#halo-cart-sidebar .previewCartCollection a[href*="example"],
#halo-cart-sidebar .previewCartCollection [data-product-title*="Example"] {
    display: none !important;
}
/* Card titles in upsell stay cream (overrides the .card-title rule below) */
#halo-cart-sidebar .card-title,
#halo-cart-sidebar .card-title a,
#halo-cart-sidebar .card-title .text {
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    background-image: none !important;
    text-decoration: none !important;
    margin: 0 !important;
}
#halo-cart-sidebar .previewCartCollection .card-media,
#halo-cart-sidebar .previewCartCollection .product-item {
    background: rgba(255, 240, 240, 0.05) !important;
    border: 1px solid var(--cm-cream-faint) !important;
    border-radius: 6px;
    overflow: hidden;
}
#halo-cart-sidebar .previewCartCollection .card-product__wrapper { background: transparent !important; }

/* Slick arrows */
#halo-cart-sidebar .slick-arrow,
#halo-cart-sidebar button.slick-prev,
#halo-cart-sidebar button.slick-next {
    width: 30px !important;
    height: 30px !important;
    background: transparent !important;
    border: 1px solid var(--cm-cream-faint) !important;
    border-radius: 50% !important;
    color: var(--cm-cream) !important;
}
#halo-cart-sidebar .slick-arrow svg path { stroke: var(--cm-cream) !important; fill: var(--cm-cream) !important; }
#halo-cart-sidebar .slick-arrow.slick-disabled { opacity: 0.4 !important; }

/* --- Tool icons row (note / shipping / discount) --- */
#halo-cart-sidebar .previewCartTool {
    display: flex !important;
    justify-content: center !important;
    gap: 32px !important;
    padding: 16px 28px !important;
    margin: 8px 0 !important;
    border-top: 1px solid var(--cm-cream-faint) !important;
}
#halo-cart-sidebar .cartTool-item,
#halo-cart-sidebar .cartTool-item *,
#halo-cart-sidebar .cartTool-item span {
    background: transparent !important;
    background-color: transparent !important;
}
#halo-cart-sidebar .cartTool-item {
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.1s;
}
#halo-cart-sidebar .cartTool-item:hover { opacity: 1; transform: translateY(-1px); }
#halo-cart-sidebar .cartTool-item svg {
    width: 22px !important;
    height: 22px !important;
    fill: var(--cm-cream) !important;
    color: var(--cm-cream) !important;
}
#halo-cart-sidebar .cartTool-item svg * {
    fill: var(--cm-cream) !important;
    color: var(--cm-cream) !important;
}

/* Pop-up panels for note / shipping / discount */
#halo-cart-sidebar .popup-toolDown {
    background: var(--cm-maroon-deep) !important;
    color: var(--cm-cream) !important;
    padding: 16px 24px !important;
}
#halo-cart-sidebar .popup-toolDown label,
#halo-cart-sidebar .popup-toolDown .hidden-cart { color: var(--cm-cream) !important; }
#halo-cart-sidebar .popup-toolDown textarea,
#halo-cart-sidebar .popup-toolDown input,
#halo-cart-sidebar .popup-toolDown select {
    background: rgba(255, 240, 240, 0.08) !important;
    color: var(--cm-cream) !important;
    border: 1px solid var(--cm-cream-faint) !important;
    border-radius: 4px;
    padding: 10px 12px;
    font-family: Glaukon, serif;
}
#halo-cart-sidebar .popup-toolDown .button.button-1 {
    background: var(--cm-gold) !important;
    color: var(--cm-maroon-deep) !important;
    border-color: var(--cm-gold) !important;
}
#halo-cart-sidebar .popup-toolDown .button.button-2 {
    background: transparent !important;
    color: var(--cm-cream) !important;
    border: 1px solid var(--cm-cream-faint) !important;
}

/* --- Totals --- */
#halo-cart-sidebar .previewCartTotalsPrice {
    list-style: none !important;
    margin: 0 !important;
    padding: 12px 28px 4px !important;
}
#halo-cart-sidebar .previewCartTotals {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 6px 0 !important;
    color: var(--cm-cream) !important;
}
#halo-cart-sidebar .previewCartTotals-label {
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
#halo-cart-sidebar .previewCartTotals-value,
#halo-cart-sidebar .previewCartTotals .money,
#halo-cart-sidebar .previewCartTotals .price {
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
#halo-cart-sidebar .previewCartTotals.total .previewCartTotals-value { font-size: 18px !important; }

/* Tax / shipping note */
#halo-cart-sidebar .previewCart-wrapper p,
#halo-cart-sidebar .text-tax,
#halo-cart-sidebar .previewCartTaxNote {
    color: var(--cm-cream-dim) !important;
    font-family: Glaukon, serif !important;
    font-size: 11px !important;
    text-align: left !important;
    padding: 0 28px 8px !important;
    margin: 0 !important;
}

/* Terms checkbox row */
#halo-cart-sidebar .previewCartAction {
    padding: 6px 28px 10px !important;
    color: var(--cm-cream-dim) !important;
    font-family: Glaukon, serif !important;
    font-size: 12px !important;
}
#halo-cart-sidebar .previewCartAction a {
    color: var(--cm-gold) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#halo-cart-sidebar .previewCartAction input[type="checkbox"] {
    accent-color: var(--cm-gold);
    margin-right: 6px;
}

/* --- Bottom action buttons: VIEW CART outlined gold, CHECKOUT filled gold --- */
#halo-cart-sidebar .previewCartGroup {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 28px 28px !important;
}
#halo-cart-sidebar .previewCartGroup .button-checkout,
#halo-cart-sidebar .previewCartGroup .button-view-cart {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* CHECKOUT — solid gold, sits at the bottom (primary action) */
#halo-cart-sidebar .previewCartGroup .button-checkout {
    background: var(--cm-gold) !important;
    color: var(--cm-maroon-deep) !important;
    border: 1px solid var(--cm-gold) !important;
    order: 2 !important;
}
#halo-cart-sidebar .previewCartGroup .button-checkout:hover {
    background: var(--cm-gold-soft) !important;
    border-color: var(--cm-gold-soft) !important;
    color: var(--cm-maroon-deep) !important;
}
/* VIEW CART — outlined gold, sits above CHECKOUT */
#halo-cart-sidebar .previewCartGroup .button-view-cart {
    background: transparent !important;
    color: var(--cm-gold) !important;
    border: 1.5px solid var(--cm-gold) !important;
    order: 1 !important;
}
#halo-cart-sidebar .previewCartGroup .button-view-cart:hover {
    background: rgba(249, 192, 103, 0.12) !important;
    color: var(--cm-gold) !important;
    border-color: var(--cm-gold) !important;
}

/* Empty cart state */
#halo-cart-sidebar .previewCart-empty,
#halo-cart-sidebar .cart-empty-text {
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    padding: 32px !important;
    text-align: center;
}

/* =============================================================================
   MINI-CART DRAWER — overhaul (2026-05-27)
   Wider drawer, readable contrast on the property lines, fixed qty stepper,
   raised/brighter remove-×, one consistent hairline divider, a pinned checkout
   footer, and compact text-link "extras" (note / coupon / shipping) that
   expand inline instead of as fixed pop-ups.
   These rules intentionally override the earlier #halo-cart-sidebar block above.
   ============================================================================= */

/* Width + full-height flex column so the footer can pin to the bottom */
#halo-cart-sidebar {
    width: 490px !important;
    max-width: 94vw !important;
    display: flex !important;
    flex-direction: column !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
}
#halo-cart-sidebar .halo-sidebar-header { flex: 0 0 auto !important; }
/* The body is the single scroll region (items + extras) */
#halo-cart-sidebar .halo-sidebar-wrapper {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    display: block !important;
}
/* Natural flow: items + "you may like" + extras + totals all stack normally;
   the body scrolls only when the content is tall enough to overflow. The
   totals/checkout are NOT pinned — they sit after the content (reference style). */
#halo-cart-sidebar cart-coupon-discount,
#halo-cart-sidebar .previewCart-wrapper,
#halo-cart-sidebar .previewCart {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Item separators — one consistent hairline (was a loud full-saturation gold) */
#halo-cart-sidebar .previewCartItem {
    border-bottom: 1px solid var(--cm-cream-faint) !important;
    padding: 20px 28px 22px !important;
}
#halo-cart-sidebar .previewCartItem-content { padding-right: 42px !important; }

/* Item title + price — slightly larger for readability */
#halo-cart-sidebar .previewCartItem-name,
#halo-cart-sidebar .previewCartItem-name .text,
#halo-cart-sidebar a.previewCartItem-name .text {
    font-size: 14px !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
}
#halo-cart-sidebar .previewCartItem-price,
#halo-cart-sidebar .previewCartItem-price * { font-size: 16px !important; }

/* Line-item properties — bright + readable (labels uppercase, values normal-case) */
#halo-cart-sidebar dl.cart-item-properties,
#halo-cart-sidebar .card-properties {
    color: var(--cm-cream) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    margin: 6px 0 10px !important;
}
#halo-cart-sidebar .card-properties dt,
#halo-cart-sidebar .cart-item-properties .definitionList-key {
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    font-weight: 600 !important;
    color: rgba(255, 247, 239, 0.95) !important;
    margin-right: 5px !important;
}
#halo-cart-sidebar .card-properties dd,
#halo-cart-sidebar .cart-item-properties .definitionList-value {
    color: rgba(255, 247, 239, 0.95) !important;
    font-weight: 400 !important;
}
#halo-cart-sidebar .cart-item-properties .definitionList-value a {
    color: var(--cm-gold) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Quantity stepper — flow the +/- buttons and recolour/centre the glyphs
   (Ella's base draws them dark-grey at a fixed 22px offset built for a 45px pill) */
#halo-cart-sidebar cart-update-quantity,
#halo-cart-sidebar .previewCartItem-qty { height: 34px !important; }
#halo-cart-sidebar .previewCartItem-qty .btn-quantity,
#halo-cart-sidebar cart-update-quantity a.minus,
#halo-cart-sidebar cart-update-quantity a.plus {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 32px !important;
    height: 100% !important;
}
#halo-cart-sidebar .previewCartItem-qty .btn-quantity:before,
#halo-cart-sidebar .previewCartItem-qty .btn-quantity.plus:after {
    background: var(--cm-cream) !important;
    width: 11px !important;
    height: 1.5px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}
#halo-cart-sidebar .previewCartItem-qty .btn-quantity.plus:after {
    transform: translate(-50%, -50%) rotate(90deg) !important;
}
#halo-cart-sidebar cart-update-quantity input.quantity {
    width: 34px !important;
    font-size: 15px !important;
}

/* Remove × — larger, brighter, raised to the row's top corner */
#halo-cart-sidebar .previewCartItem-remove {
    top: 14px !important;
    right: 22px !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid rgba(255, 247, 239, 0.5) !important;
    background: rgba(255, 247, 239, 0.06) !important;
}
#halo-cart-sidebar .previewCartItem-remove svg { width: 12px !important; height: 12px !important; }
#halo-cart-sidebar .previewCartItem-remove:hover {
    border-color: var(--cm-gold) !important;
    background: rgba(249, 192, 103, 0.15) !important;
}

/* --- Extras: note / coupon / shipping as compact text-link triggers --- */
#halo-cart-sidebar .previewCartTool {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 14px 28px !important;
    margin: 0 !important;
    border-top: 1px solid var(--cm-cream-faint) !important;
}
#halo-cart-sidebar .cartTool-item {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    opacity: 0.95 !important;
    cursor: pointer;
}
#halo-cart-sidebar .cartTool-item:hover { opacity: 1 !important; transform: none !important; }
#halo-cart-sidebar .cartTool-item span { background: transparent !important; }
#halo-cart-sidebar .cartTool-item svg { width: 16px !important; height: 16px !important; fill: var(--cm-gold) !important; }
#halo-cart-sidebar .cartTool-item svg * { fill: var(--cm-gold) !important; }
#halo-cart-sidebar .cartTool-label {
    font-family: Glaukon, serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--cm-cream) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--cm-cream-faint);
}
#halo-cart-sidebar .cartTool-item.is-open .cartTool-label {
    color: var(--cm-gold) !important;
    text-decoration-color: var(--cm-gold);
}

/* Panels — hidden until opened, then expand inline (no fixed pop-up) */
#halo-cart-sidebar .popup-toolDown { display: none !important; }
#halo-cart-sidebar .popup-toolDown.show {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 2px 28px 16px !important;
    border: none !important;
}
#halo-cart-sidebar .popup-toolDown.show label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--cm-cream) !important;
    font-family: Glaukon, serif !important;
    font-size: 12px !important;
    letter-spacing: 0.6px !important;
    margin: 0 0 8px !important;
}
#halo-cart-sidebar .popup-toolDown.show label svg * { fill: var(--cm-gold) !important; stroke: var(--cm-gold) !important; }
#halo-cart-sidebar .popup-toolDown.show p {
    font-size: 11px !important;
    color: var(--cm-cream-dim) !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
}
#halo-cart-sidebar .popup-toolDown.show textarea,
#halo-cart-sidebar .popup-toolDown.show input {
    background: rgba(255, 247, 239, 0.08) !important;
    color: var(--cm-cream) !important;
    border: 1px solid var(--cm-cream-faint) !important;
    border-radius: 4px;
    padding: 10px 12px;
    width: 100% !important;
    font-family: Glaukon, serif;
}
#halo-cart-sidebar #popup-tool-discount.show coupon-code {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: stretch !important;
}
#halo-cart-sidebar #popup-tool-discount.show coupon-code label,
#halo-cart-sidebar #popup-tool-discount.show coupon-code p { grid-column: 1 / -1 !important; }
#halo-cart-sidebar .popup-toolDown.show .button.button-1 {
    background: var(--cm-gold) !important;
    color: var(--cm-maroon-deep) !important;
    border-color: var(--cm-gold) !important;
    margin: 8px 0 0 !important;
    white-space: nowrap !important;
}
#halo-cart-sidebar #popup-tool-discount.show .button.button-1 { margin: 0 !important; padding: 0 18px !important; }
/* re-clicking the trigger now closes the panel, so the pop-up cancel button isn't needed */
#halo-cart-sidebar .popup-toolDown .cart-cancel-popup { display: none !important; }

/* Totals/checkout — flow after the content (not pinned); a hairline separates it */
#halo-cart-sidebar .previewCartInfo {
    position: static !important;
    margin-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid var(--cm-cream-faint) !important;
}

/* Reference-style footer: show only Subtotal (Total/Savings stay in the DOM,
   hidden, so the cart-update JS can still write to them) */
#halo-cart-sidebar .previewCartTotals.cart-total-savings,
#halo-cart-sidebar .previewCartTotals.total { display: none !important; }
/* Tax/terms line under the subtotal */
#halo-cart-sidebar .previewCartTaxNote {
    color: var(--cm-cream-dim) !important;
    font-family: Glaukon, serif !important;
    font-size: 11px !important;
    letter-spacing: 0.2px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 2px 20px 4px !important;
}

/* =============================================================================
   MINI-CART — tighten + anchor footer (2026-05-27, pass 2)
   Match the reference: footer sits at the very bottom (no maroon void below
   Checkout), the items + "you may like" fill/scroll above it, snug side
   padding, and a compact, full-width Checkout.
   ============================================================================= */
/* Footer anchored to the bottom; items + carousel are the fill/scroll region */
#halo-cart-sidebar .halo-sidebar-wrapper {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#halo-cart-sidebar cart-coupon-discount,
#halo-cart-sidebar .previewCart-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
#halo-cart-sidebar .previewCart {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
#halo-cart-sidebar .previewCartList { flex: 0 0 auto !important; }
/* the carousel grows to fill leftover space so a short cart doesn't leave a void */
#halo-cart-sidebar .previewCartCollection {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
#halo-cart-sidebar .previewCartInfo { flex: 0 0 auto !important; }

/* Snug, consistent side padding everywhere (was 28px) */
#halo-cart-sidebar .halo-sidebar-header,
#halo-cart-sidebar .previewCartItem,
#halo-cart-sidebar .previewCartTotalsPrice,
#halo-cart-sidebar .previewCartTool,
#halo-cart-sidebar .popup-toolDown.show,
#halo-cart-sidebar .previewCartCollection,
#halo-cart-sidebar .previewCartTitle,
#halo-cart-sidebar .previewCartAction,
#halo-cart-sidebar .previewCartGroup {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Compact footer rhythm */
#halo-cart-sidebar .previewCartInfo { padding: 0 !important; }
#halo-cart-sidebar .previewCartTotalsPrice { padding-top: 12px !important; padding-bottom: 2px !important; }
#halo-cart-sidebar .previewCartTool { padding-top: 10px !important; padding-bottom: 10px !important; }
#halo-cart-sidebar .previewCartAction { padding-top: 0 !important; padding-bottom: 0 !important; }
#halo-cart-sidebar .previewCartGroup { padding-top: 12px !important; padding-bottom: 18px !important; margin: 0 !important; }
/* Checkout — full width, no inset */
#halo-cart-sidebar .previewCartGroup .button-checkout { width: 100% !important; padding: 14px 20px !important; }

/* =============================================================================
   MINI-CART — "You may also like" cleanup (de-choppy)
   Fix the stray near-white divider (Ella default #E8E8E8) to the consistent
   cream hairline, and turn the bordered/boxy product card into a clean
   image-left, text-right row with one clear affordance.
   ============================================================================= */
#halo-cart-sidebar .previewCartCollection {
    border-top: 1px solid var(--cm-cream-faint) !important;
    padding: 16px 20px !important;
}
#halo-cart-sidebar .previewCartTitle { margin: 0 0 12px !important; }

/* drop the boxy border/background on the card itself */
#halo-cart-sidebar .previewCartCollection .product-item,
#halo-cart-sidebar .previewCartCollection .card,
#halo-cart-sidebar .previewCartCollection .card-product,
#halo-cart-sidebar .previewCartCollection .card-product__wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}
/* clean horizontal row: rounded thumbnail + info */
#halo-cart-sidebar .previewCartCollection .card-product {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
#halo-cart-sidebar .previewCartCollection .card-media {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: rgba(255, 247, 239, 0.06) !important;
    margin: 0 !important;
}
#halo-cart-sidebar .previewCartCollection .card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
#halo-cart-sidebar .previewCartCollection .card-information {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}
#halo-cart-sidebar .previewCartCollection .card-information__wrapper { padding: 0 !important; }
#halo-cart-sidebar .previewCartCollection .card-title,
#halo-cart-sidebar .previewCartCollection .card-title .text {
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 2px !important;
    text-transform: none !important;
}
#halo-cart-sidebar .previewCartCollection .card-price,
#halo-cart-sidebar .previewCartCollection .card-price * {
    color: var(--cm-gold) !important;
    font-family: Glaukon, serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
/* "Details" -> a subtle, clear text link (one affordance, not a boxy button) */
#halo-cart-sidebar .previewCartCollection .card-button {
    display: inline-block !important;
    width: auto !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--cm-cream-dim) !important;
    font-family: Glaukon, serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#halo-cart-sidebar .previewCartCollection .card-button:hover { color: var(--cm-gold) !important; }

/* =============================================================================
   MINI-CART — LIGHT (cream) SCHEME (2026-05-27)
   Flip the drawer from maroon-ground to a cream ground with maroon text/accents
   and a maroon Checkout. Cleaner, product-forward (thumbnails pop on cream),
   calmer at the pay-moment, brand voice kept via the maroon CTA + accents.
   This block intentionally overrides the maroon scheme defined above.
   --cm-ink (#43303A): warm near-black tinted toward maroon, for body/values.
   ============================================================================= */
#halo-cart-sidebar {
    background: var(--cm-cream) !important;
    color: #43303A !important;
    box-shadow: -10px 0 40px rgba(60, 20, 40, 0.14) !important;
    border-left: 1px solid rgba(150, 43, 80, 0.10) !important;
}
/* Header */
#halo-cart-sidebar .halo-sidebar-header .title { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .wrapper-cartCount { color: rgba(67, 48, 58, 0.6) !important; }
#halo-cart-sidebar .wrapper-cartCount .cartCount { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .halo-sidebar-close svg,
#halo-cart-sidebar .halo-sidebar-close svg path,
#halo-cart-sidebar .halo-sidebar-close svg * { fill: var(--cm-maroon) !important; stroke: var(--cm-maroon) !important; }
/* Dividers — warm low-opacity hairline */
#halo-cart-sidebar .previewCartItem { border-bottom-color: rgba(150, 43, 80, 0.15) !important; }
#halo-cart-sidebar .previewCartInfo,
#halo-cart-sidebar .previewCartTool,
#halo-cart-sidebar .previewCartCollection { border-top-color: rgba(150, 43, 80, 0.15) !important; }
/* Item title */
#halo-cart-sidebar .previewCartItem-name,
#halo-cart-sidebar .previewCartItem-name .text,
#halo-cart-sidebar a.previewCartItem-name .text,
#halo-cart-sidebar a.previewCartItem-name .text * { color: var(--cm-maroon) !important; }
/* Line-item properties */
#halo-cart-sidebar dl.cart-item-properties,
#halo-cart-sidebar .card-properties { color: #43303A !important; }
#halo-cart-sidebar .card-properties dt,
#halo-cart-sidebar .cart-item-properties .definitionList-key { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .card-properties dd,
#halo-cart-sidebar .cart-item-properties .definitionList-value { color: rgba(67, 48, 58, 0.88) !important; }
#halo-cart-sidebar .cart-item-properties .definitionList-value a { color: var(--cm-maroon) !important; }
/* Price */
#halo-cart-sidebar .previewCartItem-price,
#halo-cart-sidebar .previewCartItem-price * { color: var(--cm-maroon) !important; }
/* Qty stepper */
#halo-cart-sidebar cart-update-quantity,
#halo-cart-sidebar .previewCartItem-qty { border-color: rgba(150, 43, 80, 0.30) !important; }
#halo-cart-sidebar .previewCartItem-qty .btn-quantity,
#halo-cart-sidebar cart-update-quantity a.minus,
#halo-cart-sidebar cart-update-quantity a.plus,
#halo-cart-sidebar cart-update-quantity input.quantity { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .previewCartItem-qty .btn-quantity:before,
#halo-cart-sidebar .previewCartItem-qty .btn-quantity.plus:after { background: var(--cm-maroon) !important; }
#halo-cart-sidebar .previewCartItem-qty .btn-quantity:hover { color: var(--cm-maroon-deep) !important; }
/* Remove × */
#halo-cart-sidebar .previewCartItem-remove { border-color: rgba(150, 43, 80, 0.32) !important; background: rgba(150, 43, 80, 0.04) !important; }
#halo-cart-sidebar .previewCartItem-remove svg,
#halo-cart-sidebar .previewCartItem-remove svg path { fill: var(--cm-maroon) !important; stroke: var(--cm-maroon) !important; }
#halo-cart-sidebar .previewCartItem-remove:hover { border-color: var(--cm-maroon) !important; background: rgba(150, 43, 80, 0.08) !important; }
/* Extras triggers */
#halo-cart-sidebar .cartTool-label { color: var(--cm-maroon) !important; text-decoration-color: rgba(150, 43, 80, 0.3) !important; }
#halo-cart-sidebar .cartTool-item svg,
#halo-cart-sidebar .cartTool-item svg * { fill: var(--cm-maroon) !important; }
#halo-cart-sidebar .cartTool-item.is-open .cartTool-label { color: var(--cm-maroon-deep) !important; text-decoration-color: var(--cm-maroon) !important; }
/* Inline panels */
#halo-cart-sidebar .popup-toolDown.show label { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .popup-toolDown.show label svg * { fill: var(--cm-maroon) !important; stroke: var(--cm-maroon) !important; }
#halo-cart-sidebar .popup-toolDown.show p { color: rgba(67, 48, 58, 0.6) !important; }
#halo-cart-sidebar .popup-toolDown.show textarea,
#halo-cart-sidebar .popup-toolDown.show input { background: #FFFDFA !important; color: #43303A !important; border-color: rgba(150, 43, 80, 0.25) !important; }
#halo-cart-sidebar .popup-toolDown.show .button.button-1 { background: var(--cm-maroon) !important; color: var(--cm-cream) !important; border-color: var(--cm-maroon) !important; }
/* Tax note */
#halo-cart-sidebar .previewCartTaxNote { color: rgba(67, 48, 58, 0.6) !important; }
/* Totals */
#halo-cart-sidebar .previewCartTotals-label { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .previewCartTotals-value,
#halo-cart-sidebar .previewCartTotals .money,
#halo-cart-sidebar .previewCartTotals .price { color: var(--cm-maroon) !important; }
/* Checkout — maroon fill, cream text (primary CTA) */
#halo-cart-sidebar .previewCartGroup .button-checkout,
#halo-cart-sidebar .previewCartGroup .button.button-1.button-checkout {
    background: var(--cm-maroon) !important;
    color: var(--cm-cream) !important;
    border-color: var(--cm-maroon) !important;
}
#halo-cart-sidebar .previewCartGroup .button-checkout:hover,
#halo-cart-sidebar .previewCartGroup .button.button-1.button-checkout:hover {
    background: var(--cm-maroon-deep) !important;
    border-color: var(--cm-maroon-deep) !important;
    color: var(--cm-cream) !important;
}
/* "You may also like" */
#halo-cart-sidebar .previewCartTitle { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .previewCartCollection .card-title,
#halo-cart-sidebar .previewCartCollection .card-title .text { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .previewCartCollection .card-price,
#halo-cart-sidebar .previewCartCollection .card-price * { color: var(--cm-maroon) !important; }
#halo-cart-sidebar .previewCartCollection .card-media { background: rgba(150, 43, 80, 0.05) !important; }
#halo-cart-sidebar .previewCartCollection .card-button { color: rgba(67, 48, 58, 0.55) !important; }
#halo-cart-sidebar .previewCartCollection .card-button:hover { color: var(--cm-maroon) !important; }
/* Scrollbar */
#halo-cart-sidebar *::-webkit-scrollbar-track { background: rgba(150, 43, 80, 0.06) !important; }
#halo-cart-sidebar *::-webkit-scrollbar-thumb { background: rgba(150, 43, 80, 0.3) !important; }

/* =============================================================================
   MINI-CART — type scale (2026-05-27)
   Hold the whole drawer to a small, deliberate set of sizes so the hierarchy
   reads cleanly (hierarchy via weight + colour, not size sprawl):
     22  title (Lemosty)
     16  prices + subtotal value
     14  item title + Checkout
     12  body: properties (label & value), totals label, tax line, links, qty
     11  micro: item count
   ============================================================================= */
#halo-cart-sidebar .halo-sidebar-header .title { font-size: 22px !important; }
#halo-cart-sidebar .wrapper-cartCount { font-size: 11px !important; }
#halo-cart-sidebar .previewCartItem-name,
#halo-cart-sidebar .previewCartItem-name .text { font-size: 14px !important; }
#halo-cart-sidebar .previewCartItem-price,
#halo-cart-sidebar .previewCartItem-price * { font-size: 16px !important; }
/* properties: label and value share one size — hierarchy comes from weight/colour */
#halo-cart-sidebar .card-properties dt,
#halo-cart-sidebar .cart-item-properties .definitionList-key,
#halo-cart-sidebar .card-properties dd,
#halo-cart-sidebar .cart-item-properties .definitionList-value { font-size: 12px !important; }
#halo-cart-sidebar cart-update-quantity input.quantity { font-size: 14px !important; }
#halo-cart-sidebar .cartTool-label { font-size: 12px !important; }
#halo-cart-sidebar .previewCartTotals-label { font-size: 12px !important; }
#halo-cart-sidebar .previewCartTotals-value,
#halo-cart-sidebar .previewCartTotals .money,
#halo-cart-sidebar .previewCartTotals .price { font-size: 16px !important; }
#halo-cart-sidebar .previewCartGroup .button-checkout { font-size: 14px !important; }
/* Tax line: make it visible (was inheriting a cream colour) and a touch larger.
   Higher specificity (.previewCartInfo …) to beat the maroon-era tax rules. */
#halo-cart-sidebar .previewCartInfo .previewCartTaxNote {
    color: rgba(67, 48, 58, 0.72) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* Qty stepper: the value "1" was cream (invisible on cream). The maroon-era
   rule .previewCartItem-qty input.quantity (1,2,1) out-specifies the light
   block, so match its specificity here to make the value maroon + centered. */
#halo-cart-sidebar .previewCartItem-qty input.quantity,
#halo-cart-sidebar .previewCartItem-qty input {
    color: var(--cm-maroon) !important;
    text-align: center !important;
}
#halo-cart-sidebar .previewCartItem-qty .btn-quantity {
    color: var(--cm-maroon) !important;
}

/* Keep the whole bottom block tight — compact expanded panels, totals + buttons */
#halo-cart-sidebar .previewCartTool { padding: 12px 28px !important; }
#halo-cart-sidebar .popup-toolDown.show { padding: 0 28px 12px !important; }
#halo-cart-sidebar .popup-toolDown.show textarea { min-height: 58px !important; }
#halo-cart-sidebar #popup-tool-note.show .button.button-1,
#halo-cart-sidebar #popup-tool-shipping.show .button.button-1 {
    width: auto !important;
    display: inline-flex !important;
    padding: 9px 24px !important;
    margin-top: 8px !important;
}
#halo-cart-sidebar .previewCartTotalsPrice { padding: 10px 28px 2px !important; }
#halo-cart-sidebar .previewCartTotals { padding: 3px 0 !important; }
#halo-cart-sidebar .previewCartTotals.total .previewCartTotals-value { font-size: 17px !important; }
#halo-cart-sidebar .previewCartGroup { gap: 8px !important; padding: 10px 28px 18px !important; }
#halo-cart-sidebar .previewCartGroup .button-checkout,
#halo-cart-sidebar .previewCartGroup .button-view-cart { padding: 12px 20px !important; }

/* OUTSIDE the cart drawer: default card title stays dark on PDP/collections */
.card-title { color: #232323; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: #962B50; }

/* =============================================================================
   CART PAGE — /cart full page polish
   ============================================================================= */

/* --- Page heading "Your cart" + item count chip --- */
.template-cart .page-header {
    padding: 16px 0 20px !important;
    text-align: left !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 16px !important;
    flex-wrap: wrap;
    font-family: Lemosty, serif !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    color: #962B50 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}
.cm-cart-count {
    display: inline-flex !important;
    align-items: center;
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(35, 35, 35, 0.6) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-left: 1px solid rgba(35, 35, 35, 0.25);
    padding-left: 16px !important;
    margin-left: 16px !important;
    line-height: 1;
}

/* Tighten H1 letter-spacing (was looking slightly stretched at 36px) */
.template-cart .page-header { letter-spacing: 0 !important; }

/* --- Free shipping progress bar (cart top) — pop against the page cream --- */
.cm-shipping-bar {
    margin: 0 0 28px;
    padding: 18px 22px;
    background: #FFFFFF;
    border: 1px solid rgba(150, 43, 80, 0.15);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(150, 43, 80, 0.05);
}
.cm-shipping-bar__text {
    font-family: Glaukon, serif;
    font-size: 15px;
    color: #232323;
    letter-spacing: 0.2px;
    margin-bottom: 12px;
    line-height: 1.4;
}
.cm-shipping-bar__text strong { color: #962B50; font-weight: 700; }
.cm-shipping-bar__text--done {
    color: #2C7A3F;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0; /* no progress bar when done */
}
.cm-shipping-bar__text--done strong { color: #2C7A3F; }
.cm-shipping-bar__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C7A3F;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
    margin-right: 0;
}
.cm-shipping-bar__track {
    height: 6px;
    background: rgba(35, 35, 35, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.cm-shipping-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #F9C067 0%, #962B50 100%);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hide the (now redundant) track when the free-shipping state is unlocked */
.cm-shipping-bar:has(.cm-shipping-bar__text--done) .cm-shipping-bar__track { display: none; }

/* --- Brand story line under each cart item title --- */
.cm-item-craft {
    font-family: Glaukon, serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(35, 35, 35, 0.55);
    letter-spacing: 0.3px;
    margin: 4px 0 8px;
    line-height: 1.4;
}

/* --- Shipping status row (replaces calculator) --- */
.cm-shipping-status {
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #232323 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
}
.cm-shipping-status--free {
    color: #2C7A3F !important;
}

/* --- Foldout (details/summary) styling — for the optional shipping calc and discount code --- */
.cm-foldout {
    margin: 0;
    padding: 0;
}
.cm-foldout > summary {
    cursor: pointer;
    list-style: none;
    font-family: Glaukon, serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(35, 35, 35, 0.7);
    letter-spacing: 0.3px;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(35, 35, 35, 0.3);
    user-select: none;
    transition: color 0.15s;
}
.cm-foldout > summary::-webkit-details-marker { display: none; }
.cm-foldout > summary:hover { color: #962B50; text-decoration-color: #962B50; }
.cm-foldout[open] > summary { color: #232323; font-weight: 600; text-decoration: none; margin-bottom: 8px; }
.cm-foldout__body { padding: 4px 0 6px; }

/* --- Column headers (PRODUCT / PRICE / QUANTITY / TOTAL) — smaller uppercase tracking --- */
.cart-header-item,
.cart-header-info,
.cart-header-price,
.cart-header-quantity,
.cart-header-total,
.cart-header-remove {
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(35, 35, 35, 0.7) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 14px 0 !important;
}

/* --- Cart item row — flat (kill the card-around-each-item pattern) --- */
.cart-item,
.cart-item-block-wrapper,
.cart-item .cart-item-inner {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.cart-item {
    border-bottom: 1px solid rgba(35, 35, 35, 0.1) !important;
    padding: 20px 0 !important;
    margin: 0 !important;
}
.cart-item:last-child { border-bottom: none !important; }

/* Tighten the header row + drop the heavy background */
.cart-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(150, 43, 80, 0.2) !important;
    padding: 0 0 12px !important;
    margin-bottom: 4px !important;
}

/* Stop prices from wrapping awkwardly in the total cell */
.cart-item-total,
.cart-item__total,
.cart-item-value,
.cart-item-block.cart-item-price *,
.cart-item-price,
.cart-item-price .price,
.cart-item__discounted-prices,
.cart-item__discounted-prices * {
    white-space: nowrap !important;
}
.cart-item__discounted-prices {
    display: inline-flex !important;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cart container background — remove any panel/card framing */
.cart-content-item, .cart-content-wrapper > * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Item title — dark Glaukon 16px weight 600, no more 20px/weight 400 */
.cart-item-name,
.cart-item-name a,
.cart-item-name a .text {
    font-family: Glaukon, serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #232323 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    background-image: none !important;
    margin: 0 0 6px !important;
}
.cart-item-name a:hover .text { color: #962B50 !important; }

/* Line-item properties (Expected Date of Delivery) — was loud gold 20px, make subtle */
.cart-item-properties {
    margin: 4px 0 0 !important;
    padding: 0 !important;
}
.cart-item-properties .product-option {
    display: block !important;
    margin: 4px 0;
    font-size: 14px;
}
.cart-item-properties .product-option .definitionList-key {
    display: block !important;
    margin: 0 0 2px !important;
}
.cart-item-properties .product-option .definitionList-value {
    display: block !important;
    white-space: nowrap;
}
.cart-item-properties .definitionList-key {
    color: #962B50 !important;
    font-family: Glaukon, serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    margin: 0 4px 0 0 !important;
}
.cart-item-properties .definitionList-value {
    color: #232323 !important;
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Vendor (if shown) */
.cart-item-vendor {
    font-family: Glaukon, serif !important;
    font-size: 13px !important;
    color: rgba(35, 35, 35, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 4px 0 0 !important;
}

/* Variant title */
.cart-item-variant {
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    color: #5a5a5a !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

/* --- Prices in the row --- */
.cart-item-price,
.cart-item-price .price,
.cart-item-price .price--end,
.cart-item__price-wrapper,
.cart-item__price-wrapper * {
    font-family: Glaukon, serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #962B50 !important;
    letter-spacing: 0.3px !important;
}
.cart-item__old-price,
.cart-item-price del,
s.cart-item__old-price {
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(35, 35, 35, 0.5) !important;
    text-decoration: line-through;
    margin-right: 4px;
}

/* --- Qty stepper on cart page — refined --- */
.cart-item-qty {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid rgba(35, 35, 35, 0.18) !important;
    border-radius: 4px !important;
    background: #fff !important;
    overflow: hidden;
    height: 40px;
}
.cart-item-qty .btn-quantity,
.cart-item-qty a.minus,
.cart-item-qty a.plus,
.btn-quantity {
    width: 34px !important;
    height: 100% !important;
    color: #232323 !important;
    background: transparent !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-size: 18px !important;
    line-height: 1;
}
.cart-item-qty .btn-quantity:hover { color: #962B50 !important; }
.cart-item-qty-input,
.cart-item-qty input.quantity {
    width: 40px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    font-family: Glaukon, serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #232323 !important;
    padding: 0 !important;
}

/* --- Remove × button — bigger hit target, clearer --- */
.cart-item-remove,
.cart-item-remove a,
.cart-item__remove,
a.cart-item-remove-button {
    color: rgba(35, 35, 35, 0.5) !important;
    font-size: 20px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.cart-item-remove:hover,
.cart-item-remove a:hover {
    color: #962B50 !important;
    background: rgba(150, 43, 80, 0.08) !important;
}

/* --- Additional Comments section --- */
.template-cart .form-label,
.cart__note label,
label[for="cart-note"] {
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #962B50 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}
#cart-note,
.cart__note textarea {
    font-family: Glaukon, serif !important;
    font-size: 16px !important;
    border: 1px solid rgba(35, 35, 35, 0.18) !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    color: #232323 !important;
}
#cart-note:focus,
.cart__note textarea:focus { border-color: #962B50 !important; outline: none; }

/* --- Secure Shopping Guarantee row --- */
.cart-secure-guarantee,
[class*=secure-guarantee],
.cart-bottom .text {
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    color: #962B50 !important;
    letter-spacing: 0.3px !important;
}

/* =============================================================================
   ORDER SUMMARY (right column on cart page)
   ============================================================================= */

/* Heading — full-column underline, not just text width */
.cart--totals-title,
.cart__totals h2,
.cart-totals h2,
.cart-totals-title,
.cart-totals-summary > .title,
.cart-totals .text-uppercase {
    display: block !important;
    width: 100% !important;
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #962B50 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(150, 43, 80, 0.2) !important;
    margin: 0 0 16px !important;
}
/* Tighten the totals list spacing */
.cart-total { padding: 8px 0 !important; }
.cart-total.cart-total-shipping,
.cart-total.cart-total-coupon { border-top: 1px solid rgba(35, 35, 35, 0.08); padding-top: 14px !important; margin-top: 6px !important; }
.cart-total.cart-total-grandtotal { border-top: 1px solid rgba(150, 43, 80, 0.2); padding-top: 14px !important; margin-top: 10px !important; }
.cart-totals { padding: 0 !important; list-style: none !important; }

/* Subtotal / Total rows */
.cart-total-label,
.cart-total-label .text,
.cart-total .text,
.cart-totals-row .label,
.cart-totals-row .text {
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #232323 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.cart-total-value,
.cart-total-row .value,
.cart-totals-row .value,
.cart-totals-value,
.cart__total .price {
    font-family: Glaukon, serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #962B50 !important;
    letter-spacing: 0.3px !important;
}

/* Bigger Total row */
.cart-total .cart-total-label,
.cart-totals-row.total .label,
.template-cart [class*=total-row].total .text {
    font-size: 16px !important;
    font-weight: 700 !important;
}
.cart-total .cart-total-value,
.cart-totals-row.total .value,
.template-cart [class*=total-row].total .value {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Get Shipping Estimate / Coupon Code labels */
.template-cart .form-group label,
.template-cart .shipping-calculator label,
.template-cart .coupon-code label,
.template-cart h4.text {
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #232323 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

/* Form inputs (country select, postal, coupon) — consistent style */
.template-cart .form-input,
.template-cart .special-select,
.template-cart select,
.template-cart input[type=text]:not(.cart-item-qty-input) {
    font-family: Glaukon, serif !important;
    font-size: 16px !important;
    height: 44px !important;
    border: 1px solid rgba(35, 35, 35, 0.18) !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #232323 !important;
    padding: 0 14px !important;
}
.template-cart .form-input:focus,
.template-cart select:focus { border-color: #962B50 !important; outline: none; }

/* Coupon code help text */
.template-cart .coupon-code + *,
.template-cart .small-text,
.template-cart .help-text,
.template-cart .form-text,
.template-cart .cart-coupon-code .form-text {
    font-family: Glaukon, serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(35, 35, 35, 0.55) !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

/* --- Action buttons in Order Summary --- */
/* CALCULATE SHIPPING — gold filled (secondary action within summary) */
.shipping-calculator-form input.get-rates,
button#get-rates-submit {
    background: #F9C067 !important;
    color: #7A2342 !important;
    border: 1px solid #F9C067 !important;
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 13px !important;
    border-radius: 4px !important;
    height: auto !important;
}

/* PROCEED TO CHECKOUT — primary action, gold filled, weighty */
#cart-checkout,
.template-cart .button.button-1,
.button-checkout {
    background: #F9C067 !important;
    color: #7A2342 !important;
    border: 1px solid #F9C067 !important;
    font-family: Glaukon, serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 16px 20px !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-top: 12px !important;
}
#cart-checkout:hover,
.button-checkout:hover { background: #E8B358 !important; border-color: #E8B358 !important; color: #7A2342 !important; }

/* Trust block above the checkout button — payment icons + Secure SSL */
.cm-checkout-trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0 12px;
    border-top: 1px solid rgba(35, 35, 35, 0.08);
    margin-top: 8px;
}
.cm-checkout-trust__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Glaukon, serif;
    font-size: 14px;
    font-weight: 600;
    color: #232323;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.cm-checkout-trust__lock {
    width: 16px;
    height: 16px;
    color: #2C7A3F;
    flex: 0 0 auto;
}
.cm-checkout-trust__icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cm-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid rgba(35, 35, 35, 0.12);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    line-height: 1;
}
.cm-pay svg {
    height: 18px;
    width: auto;
    display: block;
}
.cm-pay--rzp svg { height: 14px; }
.cm-pay--upi svg { height: 18px; }

/* Move/restyle the existing Secure Shopping Guarantee badge — keep subtle, no random gold */
.cart-securityImage {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(35, 35, 35, 0.08);
}
.cart-securityImage-label {
    font-family: Glaukon, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(35, 35, 35, 0.7) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.cart-securityImage-label svg { width: 18px; height: 18px; color: #962B50; }

/* GO BACK TO PREVIOUS PAGE — secondary, OUTLINED (was filled gold, looked identical to checkout) */
.template-cart #cart-previous-page-btn,
.template-cart .button-continue,
.template-cart .button.button-2.button-continue {
    background: transparent !important;
    color: #962B50 !important;
    border: 1.5px solid #962B50 !important;
    font-family: Glaukon, serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-top: 10px !important;
}
.template-cart #cart-previous-page-btn:hover,
.template-cart .button-continue:hover {
    background: rgba(150, 43, 80, 0.08) !important;
    color: #962B50 !important;
    border-color: #962B50 !important;
}

.header-single-line__content .header__search .search-modal__form .search__input {
    font-size: calc(var(--font-body-size) + -2px) !important;
    width: calc(100% - 50px);
    padding: 10px 18px;
}

/* =============================================================================
   PRODUCT PAGE — match chaarmology.com reference design
   ============================================================================= */

/* Product title — Lemosty serif, 28px, weight 500, maroon, slight letter-spacing */
.productView-title,
.productView-title span {
    font-family: Lemosty, serif !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    color: #962B50 !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* Price — match reference: Glaukon 25px maroon (overrides inline --fontsize-text from customizer) */
.productView-price,
.productView-price .price,
.productView-price .price .money,
.productView-price .price--medium,
.productView-price .price-item,
.productView-price .price-item--regular,
.productView-price .price-item--sale,
.productView-price .price__last,
.productView-price .price__last span {
    font-family: Glaukon, serif !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    color: #962B50 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

/* Add to Cart — maroon background, white text, 20px to match reference */
.product-form__submit,
button.product-form__submit,
.btn-addToCart {
    background: #962B50 !important;
    color: #FFFFFF !important;
    border: 1px solid #962B50 !important;
    font-family: Glaukon, serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 14px 24px !important;
}
.product-form__submit:hover,
button.product-form__submit:hover,
.btn-addToCart:hover {
    background: #7A2342 !important;
    border-color: #7A2342 !important;
    color: #FFFFFF !important;
}

/* Hide noise: Buy It Now, "X viewing", urgency bar, vendor/SKU/type meta rows,
   Free Shipping & Free Returns blocks, subtotal — reference page doesn't show these */
.shopify-payment-button,
.productView-info-item,           /* Vendor / SKU / Availability / Product Type rows */
.productView-hotStock,            /* "Please hurry! Only X left" */
.productView-ViewingProduct,      /* "X customers are viewing this product" */
.product-customInformation,       /* Free Shipping + Free Returns blocks */
.productView-subtotal,            /* "Subtotal: Rs. 8,500.00" line above cart button */
.productView-soldProduct {        /* "3 sold in last 17 hours" social proof */
    display: none !important;
}

/* (Removed: old inline-block hack for qty + cart. Replaced with proper flex row inside the form below — search for .cm-qty-cart-row.) */

/* Hide wishlist + share icons next to ADD TO CART (reference shows none) */
.productView-wishlist,
.productView-share,
.halo-socialShare {
    display: none !important;
}

/* COLLECTION badge — maroon pill above the title */
.cm-collection-badge {
    display: inline-block;
    margin: 8px 0 12px;
    padding: 4px 12px;
    background: #962B50;
    color: #FFFFFF !important;
    font-family: Glaukon, serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
    line-height: 1.6;
    transition: background 0.2s;
}
.cm-collection-badge:hover {
    background: #7A2342;
    color: #FFFFFF !important;
}

/* =============================================================================
   PRODUCT PAGE — custom Chaarmology blocks: NOTE / Delivery Date / BOOK A CALL
   ============================================================================= */

/* NOTE block (from product.metafields.custom.product_note) — 16px to match reference */
.cm-product-note {
    margin: 0 0 18px;
    padding: 0;
    font-family: Glaukon, serif;
    font-size: 18px;
    line-height: 1.5;
    color: #232323;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cm-product-note__label {
    font-weight: 700;
    color: #962B50;
    margin-right: 6px;
}

/* Expected Date of Delivery — label 16px maroon, input larger */
.cm-delivery-date {
    margin: 0 0 20px;
}
.cm-delivery-date__label {
    display: block;
    margin-bottom: 8px;
    font-family: Glaukon, serif;
    font-size: 18px;
    font-weight: 600;
    color: #962B50;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cm-delivery-date__req {
    color: #D93333;
    margin-left: 2px;
}
.cm-delivery-date__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(35, 35, 35, 0.2);
    border-radius: 0;
    background: #FFFFFF;
    font-family: Glaukon, serif;
    font-size: 17px;
    color: #232323;
    transition: border-color 0.2s;
    box-sizing: border-box;
    height: 48px;
}
.cm-delivery-date__input:focus {
    outline: none;
    border-color: #962B50;
}
.cm-delivery-date__input:invalid {
    color: rgba(35, 35, 35, 0.5);
}

/* =============================================================================
   FLORAL SET BUILDER — "Make Your Own Set" configurator (display-only total)
   Renders on products with a custom.set_builder metafield (floral sets).
   ============================================================================= */
/* Product tab content (Product Details + policy tabs) — readable rhythm + brand headings */
.productView-tab .toggle-content { line-height: 1.55; }
.productView-tab .toggle-content p { margin: 0 0 0.8em; }
.productView-tab .toggle-content .cm-spec-label {
    font-family: 'Lemosty', serif !important;
    font-size: 16px;
    color: var(--cm-maroon);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.productView-tab .toggle-content p:last-child { margin-bottom: 0; }
.productView-tab .toggle-content ul { margin: 0 0 0.9em; padding-left: 1.2em; }
.productView-tab .toggle-content li { margin: 0 0 0.35em; }
.productView-tab .toggle-content h3,
.productView-tab .toggle-content h4 {
    font-family: Glaukon, serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--cm-maroon);
    letter-spacing: 0.02em;
    text-transform: none;
    margin: 1.2em 0 0.4em;
}

.cm-setbuilder { margin: 0 0 20px; }
.cm-setbuilder__heading {
    margin: 0 0 12px;
    font-family: Glaukon, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-maroon);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cm-setbuilder__req { color: #D93333; margin-left: 2px; }
.cm-setbuilder__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin-bottom: 22px;
}
.cm-setbuilder__item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: Glaukon, serif;
    font-size: 15px;
    color: var(--cm-maroon);
}
.cm-setbuilder__cb {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: auto !important;
    position: static !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 0 !important;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--cm-maroon);
    cursor: pointer;
    pointer-events: auto;
}
.cm-setbuilder__name { flex: 1; }
.cm-setbuilder__price { font-weight: 600; white-space: nowrap; }

/* Component info (i) tooltip — e.g. Kaleeras */
.cm-setbuilder__info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--cm-maroon);
    border-radius: 50%;
    background: transparent;
    color: var(--cm-maroon);
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
}
.cm-setbuilder__info-mark {
    font-family: Glaukon, serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
}
.cm-setbuilder__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    max-width: 60vw;
    padding: 10px 12px;
    background: var(--cm-maroon);
    color: var(--cm-cream);
    font-family: Glaukon, serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.2px;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(60, 20, 40, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 5;
    pointer-events: none;
}
.cm-setbuilder__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--cm-maroon);
}
.cm-setbuilder__info:hover .cm-setbuilder__tip,
.cm-setbuilder__info:focus .cm-setbuilder__tip,
.cm-setbuilder__info:focus-visible .cm-setbuilder__tip {
    opacity: 1;
    visibility: visible;
}

/* "comes as a pair" note under the component grid */
.cm-setbuilder__pairs {
    margin: -12px 0 22px;
    font-family: Glaukon, serif;
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
    color: rgba(67, 48, 58, 0.7);
}

.cm-setbuilder__field { margin: 0 0 18px; }
.cm-setbuilder__label {
    display: block;
    margin-bottom: 8px;
    font-family: Glaukon, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-maroon);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cm-setbuilder__select,
.cm-setbuilder__textarea,
.cm-setbuilder__file {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(35, 35, 35, 0.2);
    border-radius: 0;
    background: #fff;
    font-family: Glaukon, serif;
    font-size: 16px;
    color: #232323;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.cm-setbuilder__select { height: 48px; }
.cm-setbuilder__textarea { resize: vertical; min-height: 80px; }
.cm-setbuilder__select:focus,
.cm-setbuilder__textarea:focus,
.cm-setbuilder__file:focus { outline: none; border-color: var(--cm-maroon); }
.cm-setbuilder__hint {
    display: block;
    margin-top: 6px;
    font-family: Glaukon, serif;
    font-size: 13px;
    color: rgba(35, 35, 35, 0.55);
}
.cm-setbuilder__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(122, 35, 66, 0.18);
}
.cm-setbuilder__total-label {
    font-family: Glaukon, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-maroon);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cm-setbuilder__total-value {
    font-family: Glaukon, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--cm-maroon);
}
.cm-setbuilder__note {
    margin: 6px 0 16px;
    font-family: Glaukon, serif;
    font-size: 13px;
    font-style: italic;
    color: rgba(35, 35, 35, 0.6);
}
@media (max-width: 600px) {
    .cm-setbuilder__grid { grid-template-columns: 1fr; }
}

/* BOOK A CALL — subtle WhatsApp text link, de-emphasized vs the ATC + Buy Now buttons */
.cm-book-a-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--cm-maroon, #7A2342) !important;
    font-family: Glaukon, serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.cm-book-a-call:hover {
    color: #5E1A33 !important;
    text-decoration: underline;
}
.cm-book-a-call__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #25D366;             /* WhatsApp brand green for instant recognition */
    display: inline-block;
    vertical-align: middle;
}
.cm-book-a-call__text { display: inline-block; vertical-align: middle; }

/* BUY NOW — one-click express checkout; solid maroon to pair with the gold Book a Call pill */
.cm-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 14px 0 0;
    padding: 14px 24px;
    background: var(--cm-maroon, #7A2342);
    color: var(--cm-cream, #FFF7EF) !important;
    border: 1px solid var(--cm-maroon, #7A2342);
    border-radius: 4px;
    font-family: Glaukon, serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s, opacity 0.2s;
}
.cm-buy-now:hover {
    background: #5E1A33;
    border-color: #5E1A33;
    transform: translateY(-1px);
}
.cm-buy-now[disabled],
.cm-buy-now[aria-busy="true"] {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* Breadcrumb — match reference: 19px Glaukon, near-black, weight 500 */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
    font-family: Glaukon, serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}
.breadcrumb a:hover { color: #962B50 !important; text-decoration: underline; }
.breadcrumb-separator,
.breadcrumb > span > i,
.breadcrumb-icon { color: rgba(35, 35, 35, 0.5) !important; margin: 0 6px !important; }

/* Tighten the gap between breadcrumb and the image / product info section below */
.breadcrumb { padding: 6px 0 0 !important; margin: 0 !important; }
.breadcrumb-wrapper,
section.section-breadcrumb,
.productView-breadcrumb { padding-bottom: 8px !important; margin-bottom: 0 !important; }

/* COLLECTION badge — tight to title above and price below */
.productView-title + .cm-collection-badge,
.halo-share-3 + .cm-collection-badge {
    margin-top: 6px;
    margin-bottom: 0;
}

/* Collapse the spacing on the price block (was using --spacing-top: 0 / --spacing-bottom: 17px from customizer) */
.productView-product > .productView-moreItem:has(.productView-price) {
    --spacing-top: 4px !important;
    --spacing-bottom: 12px !important;
    padding-top: 4px !important;
    padding-bottom: 12px !important;
}
/* Also collapse the title block bottom spacing so badge sits close to price */
.productView-product > .productView-moreItem:has(.productView-title) {
    --spacing-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* (Removed: tab-hiding rules.
    They broke two things:
    1. Headings disappeared the moment Description was collapsed (no tab had .is-open).
    2. The other tabs (Additional Info, Shipping & Return, Custom Tab, Review) were
       always hidden, but the user wants them as expandable accordions.
    Let the theme's natural accordion behavior handle collapse/expand for all tabs.) */

/* Recently Viewed Products — re-enabled 2026-07-22 (tracker #55).
   Was hidden during the rebuild because the reference design omitted it; the client
   now wants it live. The block's products load fine (cookie `shopify_recently_viewed`
   -> recently-viewed-product.js); only this rule was suppressing it. */
.halo-recently-viewed-block { opacity: 1 !important; }

/* =============================================================================
   RELATED PRODUCTS — match reference: "Related products" in Lemosty maroon
   ============================================================================= */
/* Kill the hardcoded white background so the section blends with the page cream */
.halo-recommendations-block,
.halo-recommendations-block .halo-block-content,
.halo-recommendations-block .container,
.halo-recommendations-block .wrapper-container {
    background: transparent !important;
    background-color: transparent !important;
}

.halo-recommendations-block .halo-block-header { text-align: left !important; padding: 0 !important; margin-bottom: 24px; }

.halo-recommendations-block .halo-block-header .title {
    font-family: Lemosty, serif !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #962B50 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
/* (Title text stays "Related Products" — Lemosty maroon styles override) */

/* Card titles + price on the related cards — dark, readable on cream */
.halo-recommendations-block .card-title,
.halo-recommendations-block .card-title a {
    color: #232323 !important;
    font-family: Glaukon, serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    text-decoration: none !important;
}
.halo-recommendations-block .card-title a:hover { color: #962B50 !important; }
.halo-recommendations-block .price,
.halo-recommendations-block .price .money,
.halo-recommendations-block .price .price-item {
    color: #962B50 !important;
    font-family: Glaukon, serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

/* Wishlist heart shown on related cards (restored — matches the default product cards) */

/* Round recommendation card images to match the rest (testimonial card = 12px) */
.halo-recommendations-block .card-media,
.halo-recommendations-block .card-media img {
    border-radius: 12px;
}

/* =============================================================================
   QTY + ADD TO CART — clean flex row INSIDE the buy_buttons form
   Architecture:
   - Hide the standalone qty BLOCK (customizer block); we render qty inside the form
     next to ATC so they live in the same flex row, sharing the same alignment lane.
   - .cm-qty-cart-row is a flex container: qty (intrinsic width) + ATC (fills rest).
   - Date input + BOOK A CALL stay full width above and below.
   ============================================================================= */

/* Hide the standalone qty BLOCK so we don't render it twice */
.productView-product > .productView-moreItem:has(> .quantity_selector) {
    display: none !important;
}

/* The pvGroup-row (qty + ATC group) becomes a flex row */
.cm-qty-cart-row {
    display: flex !important;
    align-items: stretch;
    gap: 12px;
    margin: 0 !important;
}

/* qty stepper — intrinsic width, height matches ATC */
.cm-qty-cart-row .productView-quantity {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0 !important;
}
.cm-qty-cart-row .productView-quantity .quantity__label { display: none !important; }
.cm-qty-cart-row .productView-quantity .quantity__container {
    display: inline-flex;
    align-items: center;
    height: 48px;
    border: 1px solid rgba(35, 35, 35, 0.2);
    border-radius: 4px;
    background: #fff;
}
.cm-qty-cart-row .productView-quantity .btn-quantity {
    width: 42px;
    height: 100%;
    background: transparent;
    border: none;
    color: #962B50;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cm-qty-cart-row .productView-quantity .btn-quantity:hover { color: #7A2342; }
.cm-qty-cart-row .productView-quantity .quantity__input {
    width: 48px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-family: Glaukon, serif;
    font-size: 20px;
    font-weight: 500;
    color: #962B50;
    letter-spacing: 1px;
    padding: 0;
    -moz-appearance: textfield;
}
.cm-qty-cart-row .productView-quantity .quantity__input::-webkit-outer-spin-button,
.cm-qty-cart-row .productView-quantity .quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ATC fills the rest of the row */
.cm-qty-cart-row .productView-groupTop {
    flex: 1 1 auto;
    min-width: 0;
}
.cm-qty-cart-row .productView-action { margin: 0 !important; }
.cm-qty-cart-row .product-form__buttons { margin: 0 !important; }
.cm-qty-cart-row .product-form__submit {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
/* =============================================================================
   MOBILE RESPONSIVE — PDP + cart + cart drawer
   ============================================================================= */

/* --- Tablet and below --- */
@media (max-width: 1024px) {
    /* Side cart drawer: a bit narrower padding */
    #halo-cart-sidebar .halo-sidebar-header { padding: 22px 22px 12px !important; }
    #halo-cart-sidebar .previewCartItem { padding: 16px 22px 18px !important; }
    #halo-cart-sidebar .previewCartGroup { padding: 14px 22px 22px !important; }
}

/* --- Mobile portrait + landscape --- */
@media (max-width: 768px) {
    /* PDP — let qty + ATC wrap cleanly: full-width qty above full-width button */
    .productView-product > .productView-moreItem .cm-qty-cart-row,
    .pvGroup-row.cm-qty-cart-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .productView-product > .productView-moreItem .cm-qty-cart-row .productView-quantity {
        flex: 0 0 auto;
    }
    .productView-product > .productView-moreItem .cm-qty-cart-row .productView-groupTop {
        flex: 1 1 100% !important;
    }

    /* Cart page heading + count chip stack on small screens */
    .template-cart .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        font-size: 28px !important;
    }
    .cm-cart-count {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Cart page: drop the cart-header table row — items become stacked cards */
    .cart-header { display: none !important; }
    .cart-item {
        display: grid !important;
        grid-template-columns: 88px 1fr !important;
        grid-template-areas:
            "img info"
            "img controls" !important;
        gap: 12px 14px !important;
        padding: 18px 0 !important;
    }
    .cart-item-block.cart-item-image { grid-area: img; align-self: start; }
    .cart-item-block.cart-item-info { grid-area: info; }
    .cart-item-block.cart-item-price,
    .cart-item-block.cart-item-quantity,
    .cart-item-block.cart-item-total,
    .cart-item-block.cart-item-remove {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 6px;
    }
    .cart-item-block.cart-item-price::before { content: "Price"; font-size: 11px; color: rgba(35,35,35,0.5); letter-spacing: 1.5px; text-transform: uppercase; margin-right: 4px; }
    .cart-item-block.cart-item-quantity::before { content: "Qty"; font-size: 11px; color: rgba(35,35,35,0.5); letter-spacing: 1.5px; text-transform: uppercase; margin-right: 4px; }
    .cart-item-block.cart-item-total::before { content: "Total"; font-size: 11px; color: rgba(35,35,35,0.5); letter-spacing: 1.5px; text-transform: uppercase; margin-right: 4px; }
    .cart-item-block.cart-item-price,
    .cart-item-block.cart-item-quantity,
    .cart-item-block.cart-item-total,
    .cart-item-block.cart-item-remove { grid-column: 2; }

    /* Two-column cart → stacks on mobile (left items above right summary) */
    .template-cart .cart-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }
    .template-cart .cart-content-item { width: 100% !important; max-width: 100% !important; }
    .template-cart .cart-total { padding: 12px 16px !important; }
    .template-cart .cart-totals { padding: 0 4px !important; }

    /* Trust block: stack to keep payment icons readable */
    .cm-checkout-trust { gap: 10px; }
    .cm-checkout-trust__icons { gap: 6px; }
    .cm-pay { height: 26px; padding: 3px 6px; }
    .cm-pay svg { height: 16px; }
    .cm-pay--rzp svg { height: 12px; }

    /* Side cart drawer takes more of the screen on mobile */
    #halo-cart-sidebar {
        width: min(92vw, 420px) !important;
    }
}

/* --- Small mobile --- */
@media (max-width: 480px) {
    .template-cart .page-header { font-size: 26px !important; padding: 14px 0 18px !important; }
    .cm-shipping-bar { padding: 14px 16px; }
    .cm-shipping-bar__text { font-size: 14px; }

    /* Cart item gets compact thumbnail */
    .cart-item {
        grid-template-columns: 72px 1fr !important;
    }
    .cart-item-name,
    .cart-item-name a,
    .cart-item-name a .text { font-size: 15px !important; }

    /* Single-item-row inputs full width */
    .template-cart .form-input,
    .template-cart .special-select,
    .template-cart select { font-size: 16px !important; /* prevent iOS zoom on focus */ }
}

/* =============================================================================
   HEADER UTILITY ITEMS — Need Help / Wishlist / Sign In / Cart
   - All labels match Wishlist/Cart size (18px)
   - "Sign In" stays on one line
   ============================================================================= */
.header-single-line__item--text .customer-service-text,
.header-single-line__item--text .customer-service-text *,
.header-single-line__item--text p {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

/* Sign In: keep on a single line; the parent flex item is too narrow otherwise */
.header-single-line__item--customer .customer-links,
.header-single-line__item--customer .header__icon--account,
.header-single-line__item--customer {
    white-space: nowrap !important;
}

/* =============================================================================
   CHAARMOLOGY CATEGORY NAV — horizontal parents bar, dropdowns on hover
   - Parent labels in Lemosty serif (strong override to beat theme cascade)
   - Child labels in Glaukon at 17px (bigger, per request)
   - Dropdowns reveal on :hover AND :focus-within (keyboard accessible)
   ============================================================================= */
.cm-cat-nav {
    background: var(--cm-cat-bg, var(--cm-gold));
    color: var(--cm-cat-text, var(--cm-maroon-deep));
    border-top: 1px solid rgba(122, 35, 66, 0.08);
    border-bottom: 1px solid rgba(122, 35, 66, 0.12);
    position: relative;
    z-index: 50;
}
.cm-cat-nav__bar {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1440px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
}
.cm-cat-nav__item {
    position: relative;
    margin: 0;
    list-style: none;
}
.cm-cat-nav__parent,
.cm-cat-nav__parent:link,
.cm-cat-nav__parent:visited {
    font-family: Lemosty, "Lemosty Regular", serif !important;
    font-size: var(--cm-text-md) !important;
    font-weight: 500 !important;
    color: var(--cm-cat-text, var(--cm-maroon-deep)) !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background-image: none !important;
    background: transparent !important;
    text-transform: none !important;
    display: inline-flex;
    align-items: center;
    gap: var(--cm-space-2);
    padding: var(--cm-space-5) var(--cm-space-5);
    transition: background-color 0.15s;
    white-space: nowrap;
}
.cm-cat-nav__item--has-children .cm-cat-nav__parent::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--cm-cat-text, var(--cm-maroon-deep));
    border-bottom: 1.5px solid var(--cm-cat-text, var(--cm-maroon-deep));
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
}
.cm-cat-nav__item:hover .cm-cat-nav__parent,
.cm-cat-nav__item:focus-within .cm-cat-nav__parent {
    background: rgba(122, 35, 66, 0.06) !important;
}
.cm-cat-nav__item:hover .cm-cat-nav__parent::after,
.cm-cat-nav__item:focus-within .cm-cat-nav__parent::after {
    transform: rotate(225deg) translateX(2px) translateY(2px);
}

/* Dropdown — absolutely positioned panel below the parent */
.cm-cat-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 360px;
    background: var(--cm-cat-bg, var(--cm-gold));
    border-top: 1px solid rgba(122, 35, 66, 0.15);
    box-shadow: 0 10px 24px rgba(122, 35, 66, 0.2);
    padding: var(--cm-space-3) 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0.18s;
    z-index: 60;
}
.cm-cat-nav__item:hover .cm-cat-nav__dropdown,
.cm-cat-nav__item:focus-within .cm-cat-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0s;
}
.cm-cat-nav__sub-item { margin: 0; list-style: none; }
.cm-cat-nav__child,
.cm-cat-nav__child:link,
.cm-cat-nav__child:visited {
    display: block;
    font-family: Glaukon, "Glaukon Regular", serif !important;
    font-size: var(--cm-text-sm) !important;
    font-weight: 500 !important;
    color: var(--cm-cat-text, var(--cm-maroon-deep)) !important;
    letter-spacing: 0.2px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    background-image: none !important;
    background: transparent !important;
    text-transform: none !important;
    padding: var(--cm-space-2) var(--cm-space-5);
    transition: background-color 0.12s, padding-left 0.15s;
    white-space: nowrap;
}
.cm-cat-nav__child:hover,
.cm-cat-nav__child:focus {
    background: rgba(122, 35, 66, 0.08) !important;
    padding-left: var(--cm-space-6);
}

/* The rightmost dropdown should anchor right so it never spills off-screen */
/* last-child dropdown stays left-aligned so its child text aligns with the parent label */

/* --- Mobile --- */
@media (max-width: 1024px) {
    /* Category strip is hidden on mobile/tablet — categories now live in the hamburger (menu) drawer. */
    .cm-cat-strip-section { display: none !important; }
    .cm-cat-nav__parent { padding: var(--cm-space-4) var(--cm-space-4); font-size: var(--cm-text-md) !important; }
    .cm-cat-nav__child { padding: var(--cm-space-2) var(--cm-space-5); font-size: var(--cm-text-xs) !important; }
}
@media (max-width: 768px) {
    /* Touch screens: row gets horizontal scroll; dropdowns are hidden (no hover on touch).
       Tapping a parent navigates to its collection page. */
    .cm-cat-nav__bar {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .cm-cat-nav__bar::-webkit-scrollbar { display: none; }
    .cm-cat-nav__parent { padding: var(--cm-space-3) var(--cm-space-4); font-size: var(--cm-text-sm) !important; }
    .cm-cat-nav__item--has-children .cm-cat-nav__parent::after { display: none; }
    .cm-cat-nav__dropdown { display: none !important; }
}

/* =============================================================================
   MOBILE NAV DRAWER (hamburger) — maroon panel + brand accordion
   Categories live here on mobile (the gold strip is hidden <=1024px).
   Native <details> accordion: tapping a parent expands sub-categories inline.
   ============================================================================= */
/* Panel + scroll wrapper -> maroon */
#navigation-mobile.custom-mobile-menu,
#navigation-mobile.custom-mobile-menu .halo-sidebar-wrapper {
    background: var(--cm-maroon) !important;
}
/* Single-menu drawer: hide the leftover "Menu" tab bar — only the close X remains */
#navigation-mobile .nav-mobile-menu-tab { display: none !important; }

/* Close control -> just a cream cross, top-right (hide the "Close" word) */
#navigation-mobile .halo-sidebar-close-custom {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;            /* compact — must NOT span the row or it covers item 1 */
    margin: 0;
    padding: var(--cm-space-3) var(--cm-space-4);
    background: transparent;
    border: 0;
    font-size: 0;            /* hides the "Close" text node, keeps the icon */
    line-height: 0;
    color: var(--cm-cream);
    cursor: pointer;
}
/* push the category list below the floating close (×) so taps aren't intercepted */
#navigation-mobile .menu-custom-mobile { padding-top: 56px; }
#navigation-mobile .halo-sidebar-close-custom svg {
    width: 26px;
    height: 26px;
    fill: var(--cm-cream);
    stroke: var(--cm-cream);
}
#navigation-mobile .halo-sidebar-close-custom:hover svg { fill: var(--cm-gold); stroke: var(--cm-gold); }

/* Menu list container — drop Ella's inline-flex; stack the rows vertically */
#navigation-mobile .menu-custom-mobile .list-menu,
#navigation-mobile .menu-custom-mobile .list-menu--inline {
    display: block !important;
    margin: 0;
    padding: 0 0 var(--cm-space-7);
}

/* --- Accordion rows --- */
.cm-mnav__item {
    list-style: none;
    margin: 0;
    border-bottom: 1px solid var(--cm-cream-faint);
}
.cm-mnav__group { margin: 0; }

/* Parent row (tap to expand) + standalone top-level links (no children) */
.cm-mnav__parent,
.cm-mnav__top-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cm-space-3);
    font-family: var(--cm-font-display);
    font-size: var(--cm-text-md);
    font-weight: 400;
    color: var(--cm-cream);
    text-decoration: none;
    padding: var(--cm-space-4) var(--cm-space-5);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.cm-mnav__parent::-webkit-details-marker { display: none; }   /* hide default disclosure triangle */
.cm-mnav__parent::marker { content: ""; }
.cm-mnav__parent:hover .cm-mnav__label,
.cm-mnav__top-link:hover { color: var(--cm-gold); }
/* Force brand fonts past base.css !important: top-level parents = Lemosty
   (matches the desktop category strip); nested child rows = Glaukon. */
.cm-mnav__parent:not(.cm-mnav__parent--child) .cm-mnav__label,
.cm-mnav__top-link { font-family: var(--cm-font-display) !important; }
.cm-mnav__parent--child .cm-mnav__label { font-family: var(--cm-font-body) !important; }

/* Caret — gold chevron pointing down; flips up when the row is open */
.cm-mnav__caret {
    display: block !important;   /* override theme rule that hides empty spans */
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--cm-gold);
    border-bottom: 2px solid var(--cm-gold);
    transform: rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform var(--cm-dur) var(--cm-ease);
}
.cm-mnav__group[open] > .cm-mnav__parent .cm-mnav__caret { transform: rotate(-135deg); }
/* open parent reads as the active section */
.cm-mnav__group[open] > .cm-mnav__parent .cm-mnav__label { color: var(--cm-gold); }

/* Sub-list (inset + slightly darker for depth) */
.cm-mnav__sub {
    margin: 0;
    padding: var(--cm-space-1) 0 var(--cm-space-3);
    background: rgba(0, 0, 0, 0.10);
}
.cm-mnav__sub--deep { background: rgba(0, 0, 0, 0.16); }

.cm-mnav__child {
    display: block;
    font-family: var(--cm-font-body);
    font-size: var(--cm-text-sm);
    color: var(--cm-cream-dim);
    text-decoration: none;
    padding: var(--cm-space-3) var(--cm-space-5) var(--cm-space-3) var(--cm-space-6);
}
.cm-mnav__child:hover { color: var(--cm-gold); }

/* "Shop all X" — gold, uppercase, subtle tracking */
.cm-mnav__shopall {
    display: block;
    font-family: var(--cm-font-body);
    font-size: var(--cm-text-2xs);
    letter-spacing: var(--cm-tracking-subtitle);
    text-transform: uppercase;
    color: var(--cm-gold);
    text-decoration: none;
    padding: var(--cm-space-2) var(--cm-space-5) var(--cm-space-3) var(--cm-space-6);
}
.cm-mnav__shopall:hover { color: var(--cm-cream); }

/* Nested (child) accordion row — body font, indented */
.cm-mnav__parent--child {
    font-family: var(--cm-font-body);
    font-size: var(--cm-text-sm);
    color: var(--cm-cream);
    padding-left: var(--cm-space-6);
}

/* =============================================================================
   PRODUCT PAGE — mobile spacing & alignment polish
   Consistent vertical rhythm in the info column; tidy gaps around the action
   buttons, the info tabs, and the Related Products block.
   ============================================================================= */
@media (max-width: 1024px) {
    /* 1a — breadcrumb: a little left breathing room */
    .productView-moreItem.moreItem-breadcrumb .breadcrumb { padding-left: var(--cm-space-2); }

    /* 1b — consistent rhythm: title -> price -> quantity -> add-to-cart */
    .productView-title  { margin-bottom: var(--cm-space-3) !important; }   /* 12px */
    .productView-price  { margin-bottom: var(--cm-space-4) !important; }   /* 16px */
    .productView-buttons { margin-top: 0 !important; }
    .productView-buttons .product-form__submit { margin-top: var(--cm-space-4) !important; }
    .cm-book-a-call { margin-top: var(--cm-space-3) !important; }

    /* 1c — tighten the gap between the action buttons and the info tabs */
    .productView-tab { margin-top: var(--cm-space-4) !important; }

    /* 1d — remove the oversized gap before Related Products */
    .halo-product-block-sections { margin-top: var(--cm-space-4) !important; padding-top: 0 !important; }
    .halo-product-block-sections .halo-row,
    .halo-product-block-sections .container { padding-top: 0 !important; }
    .halo-product-block-sections .halo-block { padding-top: var(--cm-space-3) !important; }
    .halo-product-block-sections .halo-block-header { margin-top: 0 !important; padding-top: 0 !important; }

    /* 3a — Related Products heading: centered, no stray left indent */
    .halo-product-block-sections .halo-block-header,
    .halo-product-block-sections .halo-block-header .title { text-align: center !important; }
    .halo-product-block-sections .halo-block-header .title .text { padding-left: 0 !important; padding-right: 0 !important; }

    /* 3b — tighten the gap between the heading and the carousel */
    .halo-product-block-sections .halo-block-header { margin-bottom: var(--cm-space-4) !important; }
}

/* =============================================================================
   ANNOUNCEMENT BAR — match the footer marquee treatment
   (bigger, bolder, letter-spaced, uppercase; maroon text on gold)
   ============================================================================= */
.announcement-bar .announcement-bar__message,
.announcement-bar .announcement-bar__item-scroll {
    font-size: var(--cm-text-md);
    font-weight: 600;
    letter-spacing: 2px !important;
    text-transform: uppercase;
}

/* =============================================================================
   HERO — cm-hero  (full-bleed, image-only: crossfade + gold progress bar)
   Markup: sections/cm-hero.liquid. Motion is pure CSS. Height is driven by the
   banner aspect ratio (--cm-hero-ar) so object-fit: cover shows the WHOLE image
   — no crop, no letterbox bars. Override --cm-hero-ar in a media query to give
   mobile its own (taller) banner ratio once mobile banners are supplied.
   ============================================================================= */
.cm-hero {
    --cm-hero-ar: 1500 / 766;                 /* source banner ratio (~1.96:1) → full image, zero crop */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);            /* full-bleed out of any container */
    aspect-ratio: var(--cm-hero-ar);
    overflow: hidden;
    background: var(--cm-maroon);             /* base color while images load */
}
.cm-hero__slides,
.cm-hero__slide,
.cm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-hero__slide { opacity: 0; will-change: opacity; }
.cm-hero__img { object-fit: cover; object-position: center; }

/* --- crossfade (3 slides) --- */
.cm-hero--slides-3 .cm-hero__slide { animation: cmHeroFade var(--cm-hero-cycle, 15s) infinite; }
.cm-hero--slides-3 .cm-hero__slide:nth-child(2) { animation-delay: calc(var(--cm-hero-cycle, 15s) / 3); }
.cm-hero--slides-3 .cm-hero__slide:nth-child(3) { animation-delay: calc(var(--cm-hero-cycle, 15s) / 3 * 2); }
@keyframes cmHeroFade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    33%  { opacity: 1; }
    38%  { opacity: 0; }
    100% { opacity: 0; }
}

/* single-image fallback: static, no motion */
.cm-hero--slides-1 .cm-hero__slide { opacity: 1; animation: none; }
.cm-hero--slides-1 .cm-hero__img { animation: none; }

/* --- progress indicators --- */
.cm-hero__progress {
    position: absolute;
    left: 50%;
    /* Banners have their text baked into the BOTTOM, so the progress bar lives at
       the top to avoid crowding/cutting it (desktop + mobile). */
    top: var(--cm-space-5);
    transform: translateX(-50%);
    display: flex;
    gap: var(--cm-space-2);
    z-index: 3;
}
@media (max-width: 768px) {
    /* a touch lower from the very top edge on phones */
    .cm-hero__progress { top: var(--cm-space-4); }
}
.cm-hero__seg {
    display: block;
    width: 44px;
    height: 3px;
    border-radius: var(--cm-radius-pill);
    background: var(--cm-cream-faint, rgba(255, 247, 239, 0.28));
    overflow: hidden;
}
.cm-hero__seg i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cm-gold);
    border-radius: inherit;
}
.cm-hero--slides-3 .cm-hero__seg i { animation: cmHeroFill var(--cm-hero-cycle, 15s) infinite; }
.cm-hero--slides-3 .cm-hero__seg:nth-child(2) i { animation-delay: calc(var(--cm-hero-cycle, 15s) / 3); }
.cm-hero--slides-3 .cm-hero__seg:nth-child(3) i { animation-delay: calc(var(--cm-hero-cycle, 15s) / 3 * 2); }
@keyframes cmHeroFill {
    0%   { width: 0; }
    33%  { width: 100%; }
    100% { width: 100%; }
}

/* --- clickable slide links + 4/5-slide crossfade (Chaarmology) --- */
.cm-hero__link { position: absolute; inset: 0; display: block; z-index: 2; }
.cm-hero__slide { pointer-events: none; } /* only the visible slide is clickable (re-enabled per keyframe) */
.cm-hero--slides-1 .cm-hero__slide { pointer-events: auto; }
/* keep the existing 3-slide links clickable too */
.cm-hero--slides-3 .cm-hero__slide { animation-name: cmHeroFade; }
@keyframes cmHeroFade {
    0%   { opacity: 0; pointer-events: none; }
    4%   { opacity: 1; pointer-events: auto; }
    33%  { opacity: 1; pointer-events: auto; }
    38%  { opacity: 0; pointer-events: none; }
    100% { opacity: 0; pointer-events: none; }
}

/* crossfade (4 slides) */
.cm-hero--slides-4 .cm-hero__slide { animation: cmHeroFade4 var(--cm-hero-cycle, 20s) infinite; }
.cm-hero--slides-4 .cm-hero__slide:nth-child(2) { animation-delay: calc(var(--cm-hero-cycle, 20s) / 4); }
.cm-hero--slides-4 .cm-hero__slide:nth-child(3) { animation-delay: calc(var(--cm-hero-cycle, 20s) / 4 * 2); }
.cm-hero--slides-4 .cm-hero__slide:nth-child(4) { animation-delay: calc(var(--cm-hero-cycle, 20s) / 4 * 3); }
@keyframes cmHeroFade4 {
    0%   { opacity: 0; pointer-events: none; }
    3%   { opacity: 1; pointer-events: auto; }
    23%  { opacity: 1; pointer-events: auto; }
    25%  { opacity: 0; pointer-events: none; }
    100% { opacity: 0; pointer-events: none; }
}
.cm-hero--slides-4 .cm-hero__seg i { animation: cmHeroFill4 var(--cm-hero-cycle, 20s) infinite; }
.cm-hero--slides-4 .cm-hero__seg:nth-child(2) i { animation-delay: calc(var(--cm-hero-cycle, 20s) / 4); }
.cm-hero--slides-4 .cm-hero__seg:nth-child(3) i { animation-delay: calc(var(--cm-hero-cycle, 20s) / 4 * 2); }
.cm-hero--slides-4 .cm-hero__seg:nth-child(4) i { animation-delay: calc(var(--cm-hero-cycle, 20s) / 4 * 3); }
@keyframes cmHeroFill4 { 0% { width: 0; } 25% { width: 100%; } 100% { width: 100%; } }

/* crossfade (5 slides) */
.cm-hero--slides-5 .cm-hero__slide { animation: cmHeroFade5 var(--cm-hero-cycle, 25s) infinite; }
.cm-hero--slides-5 .cm-hero__slide:nth-child(2) { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5); }
.cm-hero--slides-5 .cm-hero__slide:nth-child(3) { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5 * 2); }
.cm-hero--slides-5 .cm-hero__slide:nth-child(4) { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5 * 3); }
.cm-hero--slides-5 .cm-hero__slide:nth-child(5) { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5 * 4); }
@keyframes cmHeroFade5 {
    0%   { opacity: 0; pointer-events: none; }
    2%   { opacity: 1; pointer-events: auto; }
    18%  { opacity: 1; pointer-events: auto; }
    20%  { opacity: 0; pointer-events: none; }
    100% { opacity: 0; pointer-events: none; }
}
.cm-hero--slides-5 .cm-hero__seg i { animation: cmHeroFill5 var(--cm-hero-cycle, 25s) infinite; }
.cm-hero--slides-5 .cm-hero__seg:nth-child(2) i { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5); }
.cm-hero--slides-5 .cm-hero__seg:nth-child(3) i { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5 * 2); }
.cm-hero--slides-5 .cm-hero__seg:nth-child(4) i { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5 * 3); }
.cm-hero--slides-5 .cm-hero__seg:nth-child(5) i { animation-delay: calc(var(--cm-hero-cycle, 25s) / 5 * 4); }
@keyframes cmHeroFill5 { 0% { width: 0; } 20% { width: 100%; } 100% { width: 100%; } }

@media (max-width: 768px) {
    .cm-hero__seg { width: 30px; }
    /* Mobile banners are 9:16 portrait (cm-hero-m1..5) — match that ratio so the
       whole image shows with no crop. */
    .cm-hero { --cm-hero-ar: 9 / 16; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-hero__slide { animation: none !important; opacity: 0; }
    .cm-hero__slide:first-child { opacity: 1; pointer-events: auto; }
    .cm-hero__img { animation: none !important; transform: none !important; }
    .cm-hero__progress { display: none; }
}

/* --- JS-driven hero (counter + arrows) overrides --------------------------- */
.cm-hero--js .cm-hero__slide {
    animation: none !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.cm-hero--js .cm-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.cm-hero--js .cm-hero__progress { display: none; }

.cm-hero__counter {
    position: absolute;
    bottom: var(--cm-space-5, 24px);
    right: var(--cm-space-5, 24px);
    z-index: 3;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--cm-radius-pill, 999px);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--cm-gold, #f9c067);
    font-family: var(--cm-font-display, serif);
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.cm-hero__counter-current { font-size: 18px; color: #fff; }
.cm-hero__counter-sep { opacity: .6; }
.cm-hero__counter-total { opacity: .85; }

.cm-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.26);
    color: #fff;
    border: 1px solid rgba(255, 247, 239, 0.45);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background .25s cubic-bezier(0.22, 1, 0.36, 1), color .25s ease, border-color .25s ease, transform .25s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cm-hero__arrow:hover {
    background: var(--cm-gold, #f9c067);
    color: var(--cm-maroon, #962b50);
    border-color: var(--cm-gold, #f9c067);
    transform: translateY(-50%) scale(1.06);
}
.cm-hero__arrow:focus-visible {
    outline: 2px solid var(--cm-gold, #f9c067);
    outline-offset: 2px;
}
.cm-hero__arrow svg { width: 20px; height: 20px; display: block; }
.cm-hero__arrow--prev { left: var(--cm-space-4, 16px); }
.cm-hero__arrow--next { right: var(--cm-space-4, 16px); }

@media (max-width: 768px) {
    .cm-hero__arrow { width: 40px; height: 40px; }
    .cm-hero__arrow svg { width: 18px; height: 18px; }
    .cm-hero__arrow--prev { left: 10px; }
    .cm-hero__arrow--next { right: 10px; }
    .cm-hero__counter { bottom: var(--cm-space-4, 16px); right: var(--cm-space-4, 16px); font-size: 12px; padding: 6px 12px; }
    .cm-hero__counter-current { font-size: 15px; }
}

/* =============================================================================
   HOMEPAGE — section headings (.chaarmo-heading) + flower dividers
   Consolidated from per-section inline <style> (was duplicated in every
   Fresh Launch / Best Sellers / etc. block). Colors/fonts tokenized; the
   responsive clamp() sizing is intentionally preserved.
   ============================================================================= */
.chaarmo-heading {
    text-align: center;
    margin: clamp(40px, 6vw, 80px) 0 clamp(20px, 4vw, 40px);
    padding: 0 var(--cm-space-4);
}
.heading-combo {
    font-family: var(--cm-font-display);
    font-size: clamp(26px, 4vw, 40px);
    color: var(--cm-maroon);
    margin-bottom: clamp(8px, 1.5vw, 14px);
    line-height: 1.2;
}
.heading-combo .script {
    font-family: var(--cm-font-script);
    font-size: clamp(28px, 4.5vw, 44px);
    margin-left: 6px;
}
.heading-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
}
.heading-icons img { width: clamp(12px, 1.44vw, 19px); height: auto; display: block; }

/* Flower divider (decorative) */
.flower-divider { position: relative; width: 100%; height: 100px; margin: 0; overflow: visible; }
.flower-divider--gap { margin: var(--cm-space-7) 0; }
.flower { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: auto; }
.flower-left  { left:  max(15px, calc((100vw - 1200px) / 2)); }
.flower-right { right: max(15px, calc((100vw - 1200px) / 2)); transform: translateY(-50%) scaleX(-1); }
@media screen and (max-width: 768px) {
    .flower { width: 32px; }
    .flower-divider { height: 80px; }
    .flower-divider--gap { margin: var(--cm-space-6) 0; }
    .flower-left  { left: 10px; }
    .flower-right { right: 10px; }
}

<style>
/* Wrapper */
#cf-edge-flowers{
    position:relative;
    pointer-events:none;
}

/* Flower Base */
.cf-edge-flower{
    position:absolute;
    /* top:50%; */
    transform:translateY(-50%);
    width:32px;
    z-index:1;
}

/* Left Flower */
.cf-edge-flower--left{
    left:max(15px, calc((100vw - 1200px) / 2));
}

/* Right Flower */
.cf-edge-flower--right{
    right:max(15px, calc((100vw - 1200px) / 2));
    transform:translateY(-50%) scaleX(-1);
}

/* Mobile */
@media (max-width:767px){
    .cf-edge-flower--left{
        left:10px;
    }

    .cf-edge-flower--right{
        right:10px;
    }
}

</style>

/* =============================================================================
   PRODUCT CARD HOVER (Phase 3) — multi-image cards swap+zoom via the theme's
   .media--hover-effect (component-card.css). Add a matching zoom for SINGLE-image
   cards so every card animates consistently (collections + homepage carousels).
   ============================================================================= */
.product-item .card-media:not(.media--hover-effect) { overflow: hidden; }
.product-item .card-media:not(.media--hover-effect) > img { transition: transform 0.6s var(--cm-ease); }
.card-product:hover .card-media:not(.media--hover-effect) > img { transform: scale(1.05); }

/* =============================================================================
   PRODUCT IMAGERY — rounded corners (match the testimonial .chm-card = 12px),
   and keep hover actions inside the card so carousels don't crop the icons.
   ============================================================================= */
/* Product cards everywhere — homepage carousels, collections, recommendations,
   search, upsell. .card-media is overflow:hidden so the image clips to the curve. */
.card-media { border-radius: 12px; }

/* Inset the wishlist / quick-view action group from the card's top edge so the
   icons sit comfortably on the image (and aren't shaved by carousels'
   overflow:hidden). Applies to every product card — grids and carousels. */
.card-product__group { top: 14px !important; }

/* Make the whole product image clickable through to the product page.
   The .card-link overlay was getting buried under the image-swap layer and the
   empty .wrapper-item-size overlay. Lift the link above the images; keep the
   action group (wishlist / quick-view icons) above the link so they stay
   interactive. (wrapper-item-size is pointer-events:none, so clicks pass through
   it to the link.) */
.card-media .card-link { z-index: 2; }
.card-product__group { z-index: 3; }

/* Product page — main gallery image (rounded) + thumbnails (smaller radius) */
.product-single__media .media { border-radius: 12px; overflow: hidden; }
.productView-thumbnail-link { border-radius: 8px; overflow: hidden; }

/* Cart line-item images (drawer + cart page) */
.cart-item-image { border-radius: 8px; overflow: hidden; }

/* =============================================================================
   HOMEPAGE — brand story (.cm-story)  [extracted from inline styles, tokenized]
   Body intentionally kept in brand maroon. Two-font heading per brand guide.
   ============================================================================= */
.cm-story {
    padding: 0 var(--cm-space-5) var(--cm-space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cm-space-8);
    flex-wrap: wrap;
    margin: 0 auto;
}
.cm-story__logo { flex-shrink: 0; }
.cm-story__logo img { width: 260px; height: auto; display: block; }
.cm-story__body { max-width: 600px; }
.cm-story__flowers { display: flex; gap: var(--cm-space-2); margin-bottom: var(--cm-space-4); }
.cm-story__title {
    font-size: clamp(28px, 4vw, 40px);
    color: var(--cm-maroon);
    margin: 0 0 var(--cm-space-5) 0;
    font-weight: 400;
    line-height: 1.3;
}
.cm-story__title .lemosty { font-family: var(--cm-font-display) !important; }
.cm-story__title .script  { font-family: var(--cm-font-script) !important; }
.cm-story__text {
    font-size: var(--cm-text-md);
    line-height: 1.7;
    color: var(--cm-maroon);
    margin: 0 0 var(--cm-space-6) 0;
}
.cm-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--cm-gold);
    color: var(--cm-maroon);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 36px;
    border-radius: 10px;
    transition: background-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}
.cm-story__cta:hover { background-color: var(--cm-orange); color: #fff; }
.cm-story .chm-flower { width: 20px; height: 20px; display: inline-block; }
.cm-story .chm-flower-sm { width: 14px; height: 14px; display: inline-block; }
.cm-story .chm-flower    { background: url('/cdn/shop/files/Chaarmology_Elements-03.png?v=1773863117') center/contain no-repeat; }
.cm-story .chm-flower-sm { background: url('/cdn/shop/files/Chaarmology_Elements-07.png?v=1773564557') center/contain no-repeat; }
@media (max-width: 768px) {
    .cm-story { gap: var(--cm-space-6); padding: 0 var(--cm-space-5) var(--cm-space-7); text-align: center; }
    .cm-story__flowers { justify-content: center; }
}

/* =============================================================================
   GOLD PILL CTA — unified to match the VIEW ALL button (Explore Collections /
   Fresh Launch / Best Sellers). Covers the footer SUBSCRIBE + BOOK NOW buttons.
   (KNOW MORE / .cm-story__cta is matched above; VIEW ALL is the reference.)
   Reference spec: gap 10px; padding 14px 36px; radius 10px; 14px flower icons.
   ============================================================================= */
.chm-book-btn,
.chm-newsletter-form button {
    gap: 10px;
    padding: 14px 36px;
    border-radius: 10px;
    font-size: 18px;
}
.chm-btn-flower { width: 14px; height: 14px; }

/* =============================================================================
   COLLECTION GRID (Phase 3) — balance + tokenize the gutters.
   Was ~20px horizontal / 10px card-margin vertical (border-box, so padding
   changes don't affect the column %). Set both to a balanced, generous 24px.
   Scoped to the collection grid so homepage carousels are untouched.
   ============================================================================= */
.productListing.productGrid { margin-left: calc(-1 * var(--cm-space-3)) !important; margin-right: calc(-1 * var(--cm-space-3)) !important; }
.productListing.productGrid > .product { padding-left: var(--cm-space-3) !important; padding-right: var(--cm-space-3) !important; }
.productListing.productGrid > .product .card { margin-bottom: var(--cm-space-5); }

/* =============================================================================
   COLLECTION FILTERS (Phase 3) — tighten oversized option labels (was 20px).
   Group titles, labels, and sort are already maroon Glaukon; checkbox-checked
   fill is branded to maroon via cm-tokens.css.
   ============================================================================= */
.sidebarBlock .facet-checkbox,
.sidebarBlock .facet-checkbox .text,
.sidebarBlock label.facet-checkbox { font-size: var(--cm-text-sm); }

/* =============================================================================
   COLLECTION TOOLBAR — single row: filters (left) + ITEMS PER PAGE / SORT BY
   (right). The horizontal filter bar (.page-sidebar) and the sort toolbar live
   in separate stacked containers, so on wide screens we float the toolbar to
   the top-right of the filter row. On <=1024px it falls back to its own row
   (wraps to two rows). VIEW AS + the duplicate collection title are turned off
   in the template settings.
   ============================================================================= */
@media (min-width: 1025px) {
    .sidebar--layout_horizontal { position: relative; }
    .sidebar--layout_horizontal .toolbar {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 70%;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5;
    }
    /* sort controls inline on one row, right-aligned */
    .sidebar--layout_horizontal .toolbar .toolbar-wrapper:not(.toolbar-mobile) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: var(--cm-space-6);
        margin: 0;
        padding: 0;
    }
    .sidebar--layout_horizontal .toolbar .toolbar-col,
    .sidebar--layout_horizontal .toolbar .toolbar-colRight {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--cm-space-6);
        width: auto !important;
        margin: 0;
        padding: 0;
    }
    .sidebar--layout_horizontal .toolbar .toolbar-item,
    .sidebar--layout_horizontal .toolbar .toolbar-limitView,
    .sidebar--layout_horizontal .toolbar .toolbar-sort {
        margin: 0;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }
    .sidebar--layout_horizontal .toolbar .toolbar-label,
    .sidebar--layout_horizontal .toolbar .collection-filters__label { white-space: nowrap; }
}

/* Unify every text size across the collection toolbar strip (was 12/18/20/22px):
   filter labels (REFINED BY / Availability / Price) + sort labels (ITEMS PER
   PAGE / SORT BY) + values (20 / Best selling) all share one size. */
.sidebar--layout_horizontal .facets__text,
.sidebar--layout_horizontal .sidebarBlock-heading,
.sidebar--layout_horizontal .widget_filter .sidebar_more,
.sidebar--layout_horizontal .toolbar-label,
.sidebar--layout_horizontal .label-text,
.sidebar--layout_horizontal .label-tab,
.sidebar--layout_horizontal .collection-filters__label,
.sidebar--layout_horizontal .collection-filters__sort,
.sidebar--layout_horizontal .select__select,
.sidebar--layout_horizontal .toolbar select,
.sidebar--layout_horizontal .toolbar option,
.sidebar--layout_horizontal .collection-filters__sort option,
.sidebar--layout_horizontal .dropdown-label,
.sidebar--layout_horizontal .dropdown-toggle {
    font-size: var(--cm-text-sm) !important;   /* 16px — bumped up for prominence */
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;       /* all caps, like SOLD OUT */
}

/* remove the grey divider line above the ITEMS PER PAGE / SORT BY controls */
.sidebar--layout_horizontal .toolbar { border-top: none !important; }

/* =============================================================================
   COLLECTION EMPTY / NO-RESULTS STATE (Phase 3) — on-brand, centered, inviting.
   Renders when a collection/filter returns 0 products (collection--empty).
   ============================================================================= */
.collection--empty { text-align: center; padding: var(--cm-space-9) var(--cm-space-5); }
.collection--empty .collection-product-count {
    color: var(--cm-maroon);
    font-size: var(--cm-text-md);
    margin-bottom: var(--cm-space-4);
}
.collection--empty .title {
    font-family: var(--cm-font-display) !important;
    color: var(--cm-maroon);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}
.collection--empty .title a { color: var(--cm-orange); text-underline-offset: 3px; }

/* Pagination (style--1) — brand the "Showing X of Y" counter (was gray #707070) */
.pagination .pagination-page-total,
.pagination-wrapper .pagination-page-item { color: var(--cm-maroon); }

/* SHOW MORE pagination button — maroon background + white text on hover
   (default stays the gold pill; was hovering to orange). */
.pagination .button--secondary:hover,
.pagination .button--secondary:focus,
.pagination-wrapper .button--secondary:hover,
.pagination-page-item .button--secondary:hover,
.pagination-page-item .button--secondary:focus {
    background: var(--cm-maroon) !important;
    border-color: var(--cm-maroon) !important;
    color: #fff !important;
}

/* =============================================================================
   UTILITY PAGES (Phase 6) — 404 + policy typography
   ============================================================================= */
/* 404 — gold oversized number, maroon heading, branded "Return to Store" button */
.template-404 { text-align: center; }
.template-404 .subtext {
    font-family: var(--cm-font-display);
    color: var(--cm-gold) !important;
    font-size: clamp(64px, 12vw, 120px);
    line-height: 1;
    margin: 0 0 var(--cm-space-3);
}
.template-404 .title { color: var(--cm-maroon); }
.template-404 .content a.link {
    display: inline-flex;
    align-items: center;
    margin-top: var(--cm-space-5);
    padding: var(--cm-space-3) var(--cm-space-6);
    background: var(--cm-gold) !important;
    color: var(--cm-maroon) !important;
    font-size: var(--cm-text-sm);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--cm-radius-md);
    transition: background-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}
.template-404 .content a.link:hover { background: var(--cm-orange); color: #fff; }

/* Policy pages — fix cramped line-height (was ~1.1) for readable long-form legal text */
.shopify-policy__body { line-height: 1.7; }
.shopify-policy__body p,
.shopify-policy__body li { margin-bottom: var(--cm-space-4); }

/* =============================================================================
   MARQUEE (.chm-marquee) — shared by the footer marquee AND the top announcement
   bar so they're identical (speed, type, padding, diamond separator).
   ============================================================================= */
.chm-marquee { overflow: hidden; white-space: nowrap; padding: var(--cm-space-3) 0; background-color: var(--cm-gold); }
.chm-marquee-inner { display: inline-flex; align-items: center; animation: chmMarquee 25s linear infinite; white-space: nowrap; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.chm-marquee-track { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.chm-marquee-track span {
    color: var(--cm-maroon);
    font-size: var(--cm-text-md);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    margin: 0 var(--cm-space-2);
}
.chm-marquee-flower { width: 30px; height: 30px; flex-shrink: 0; vertical-align: middle; }
@keyframes chmMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Top marquee: longer promo text -> slower duration so px/sec matches the footer (61px/s) */
.chm-marquee--top .chm-marquee-inner { animation-duration: 36s; }

/* =============================================================================
   Predictive search panel must sit ABOVE the category strip (.cm-cat-nav z:50),
   otherwise the gold nav bar covers the search results. (Was z-index:3.)
   ============================================================================= */
.predictive-search,
.predictive-search--header { z-index: 100; }
/* ...and the header section itself must out-stack the strip (it traps the panel
   in its own context). The sticky-header JS sets an INLINE z-index:22 on the
   section, so !important is required to beat it (60 > the strip's 50). Header
   sits above the strip in layout, so this never covers the strip's submenus. */
.shopify-section.section-header-single-line { z-index: 60 !important; }

/* =============================================================================
   Predictive search panel — no inner scroll + balanced "VIEW ALL" button
   ============================================================================= */
.quickSearchResults,
.quickSearchResultsBlock { max-height: none !important; overflow-y: visible !important; }
/* Drop the divider borders in the panel (heading underline + row separators) */
.predictive-search__heading { border-bottom: 0 !important; }
.predictive-search__list-item { border-top: 0 !important; }
.predictive-search__list-item.productViewAll { padding: var(--cm-space-4) var(--cm-space-5); }
/* "VIEW ALL" button: maroon by default, gold on hover */
.predictive-search__list-item.productViewAll .button-view-all {
    display: block;
    padding: var(--cm-space-3) var(--cm-space-5) !important;
    font-size: var(--cm-text-sm) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    background: var(--cm-maroon) !important;
    color: var(--cm-cream) !important;
    border: 1px solid var(--cm-maroon) !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
.predictive-search__list-item.productViewAll .button-view-all:hover {
    background: var(--cm-gold) !important;
    color: var(--cm-maroon-deep) !important;
    border-color: var(--cm-gold) !important;
}

/* =============================================================================
   COLLECTION — "Sort & Filter" pop-out drawer (2026-05-27)
   Relocates #main-collection-filters (facets + Sort select) into a brand
   off-canvas drawer. Originals are hidden only once JS confirms the move by
   adding `cm-has-filter-drawer` to <body> (graceful fallback if JS fails).
   ============================================================================= */
/* Trigger: hidden until JS confirms the drawer is wired up */
.cm-filter-trigger { display: none; }
body.cm-has-filter-drawer .cm-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--cm-space-5);
    padding: 11px 24px;
    background: var(--cm-maroon);
    color: var(--cm-cream);
    font-family: var(--font-body-family);
    font-size: var(--cm-text-sm);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid var(--cm-maroon);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
body.cm-has-filter-drawer .cm-filter-trigger:hover {
    background: var(--cm-gold);
    color: var(--cm-maroon-deep);
    border-color: var(--cm-gold);
}
.cm-filter-trigger__icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* Hide the default horizontal filter bar + toolbar — the drawer owns both */
body.cm-has-filter-drawer #halo-sidebar,
body.cm-has-filter-drawer .page-sidebar--horizontal { display: none !important; }
body.cm-has-filter-drawer .toolbar { display: none !important; }
/* Search page renders its own standalone mobile filter toggle — the drawer replaces it */
body.cm-has-filter-drawer .toolbar-mobile { display: none !important; }

/* Search-only sort control inside the Sort & Filter drawer */
.cm-fd__sort { padding: 18px 20px 14px; border-bottom: 1px solid var(--cm-border, #ecdfe2); }
.cm-fd__sort-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cm-maroon, #7A2342); }
.cm-fd__sort-select { width: 100%; padding: 10px 12px; font: inherit; color: inherit; background: #fff; border: 1px solid var(--cm-border, #d9c3c9); border-radius: 8px; cursor: pointer; }

/* Gold page banner — shared so the search page header matches collection pages
   (collection renders the same .chm-collection-banner inline in its section). */
.chm-collection-banner { background-color: var(--cm-gold); padding: var(--cm-space-8) var(--cm-space-5); text-align: center; }
.chm-collection-banner h1 { font-family: var(--cm-font-display) !important; color: var(--cm-maroon); font-size: clamp(28px, 4vw, 40px); font-weight: 400; margin: 0 0 var(--cm-space-4) 0; }
.chm-collection-flowers { display: flex; justify-content: center; gap: var(--cm-space-3); }
.chm-collection-flowers span { width: 25px; height: 25px; display: inline-block; background: url('/cdn/shop/files/Chaarmology_Elements-07.png?v=1773564557') center/contain no-repeat; }
.chm-collection-desc { max-width: 680px; margin: var(--cm-space-5) auto 0; color: var(--cm-maroon); font-size: var(--cm-text-md); line-height: 1.7; }
.chm-collection-desc p { margin: 0; }

/* Lock background scroll while the drawer is open */
body.cm-filter-open { overflow: hidden; }

/* Drawer shell — right-anchored, cream, slides in */
.cm-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 400px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    background: var(--cm-cream);
    color: var(--cm-ink, #43303a);
    box-shadow: -10px 0 40px rgba(60, 20, 40, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    z-index: 1000;
}
body.cm-filter-open .cm-filter-drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cm-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(35, 20, 30, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
    z-index: 999;
}
body.cm-filter-open .cm-filter-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s;
}

/* Drawer header */
.cm-fd__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgba(150, 43, 80, 0.15);
}
.cm-fd__title {
    font-family: var(--font-heading-family);
    font-size: 22px;
    color: var(--cm-maroon);
}
.cm-fd__close {
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--cm-maroon);
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s;
}
.cm-fd__close:hover { color: var(--cm-maroon-deep, #6d1f3a); }

/* Drawer body — holds the relocated #main-collection-filters */
.cm-fd__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 24px 28px;
    -webkit-overflow-scrolling: touch;
}

/* Stack the relocated filters into a clean single column */
.cm-fd__body #main-collection-filters,
.cm-fd__body .collection-filters,
.cm-fd__body .facets {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
/* Remove the "Refined by / Clear all" block (a Clear All now lives in the header).
   Uses the #id to beat component-filter.css `.facets-horizontal .js-filter[style]`
   (0,3,0) which otherwise force-shows inline-hidden filters in horizontal mode. */
#cm-filter-body .refined-widgets,
#cm-filter-body .refined-widgets[style] { display: none !important; }
/* Two-level flex so sections render in order: Sort, Category, Collection, Price, Availability */
.cm-fd__body .facets__form {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
}
.cm-fd__body .collection-filters__item.sorting { order: 1; }
.cm-fd__body .facets__wrapper {
    order: 2;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
}
.cm-fd__body .facets__wrapper .widget_filter { display: none !important; }
.cm-fd__body .facets__wrapper .sidebarBlock.Categories,
.cm-fd__body .facets__wrapper .sidebarBlock.Category { order: 1; }
.cm-fd__body .facets__wrapper .sidebarBlock.Collections,
.cm-fd__body .facets__wrapper .sidebarBlock.Collection { order: 2; }
.cm-fd__body .facets__wrapper .sidebarBlock[data-type-price] { order: 3; }
.cm-fd__body .facets__wrapper .sidebarBlock.Availability { order: 4; }

/* Facet group block — no dividers; sections separated by whitespace */
.cm-fd__body .sidebarBlock {
    border: 0 !important;
    padding: 16px 0 !important;
    margin: 0 !important;
}
.cm-fd__body .sidebarBlock-heading {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    margin: 0 0 12px !important;
    font-family: var(--font-body-family) !important;
    font-size: var(--cm-text-sm) !important;   /* 16px — section heading */
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--cm-maroon) !important;
}
.cm-fd__body .sidebarBlock-contentWrapper,
.cm-fd__body .sidebarBlock-content { display: block !important; }
/* Keep the theme's inline max-height (internal scroll) so long facet lists
   (e.g. the 100-value tag list) stay compact instead of expanding the drawer */
.cm-fd__body .facets__list {
    display: block !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cm-fd__body .facets__item { margin: 0 0 8px !important; }
.cm-fd__body .facet-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cm-ink, #43303a) !important;
    font-family: var(--font-body-family) !important;
    font-size: var(--cm-text-xs) !important;   /* 14px — facet item */
    line-height: 1.4 !important;
}
.cm-fd__body .facet-checkbox .count { color: rgba(67, 48, 58, 0.6) !important; }

/* Sort control — surfaced from the theme's hidden .sorting block */
.cm-fd__body .collection-filters__item.sorting {
    display: block !important;
    border: 0 !important;
    padding: 16px 0 !important;
}
.cm-fd__body .collection-filters__label {
    display: block !important;
    margin: 0 0 10px !important;
    font-family: var(--font-body-family) !important;
    font-size: var(--cm-text-sm) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--cm-maroon) !important;
}
.cm-fd__body .collection-filters__sort,
.cm-fd__body select.collection-filters__sort {
    width: 100% !important;
    font-family: var(--font-body-family) !important;
    font-size: var(--cm-text-xs) !important;   /* 14px — match facet items */
    color: var(--cm-ink, #43303a) !important;
}
/* Sort dropdown: single caret pinned right (the theme's caret svg otherwise
   wraps below the full-width select) */
.cm-fd__body .collection-filters__item.sorting .select { position: relative; display: block; }
.cm-fd__body .collection-filters__item.sorting .select__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 34px 10px 14px !important;
}
.cm-fd__body .collection-filters__item.sorting .select > svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    pointer-events: none;
}

/* Header actions: Clear All sits to the left of the X close button */
.cm-fd__head-actions { display: flex; align-items: center; gap: 16px; }
.cm-fd__clear {
    font-family: var(--font-body-family);
    font-size: 12px;                 /* secondary action — smaller than section headings */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--cm-maroon);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.cm-fd__clear:hover { color: var(--cm-maroon-deep, #6d1f3a); }

/* Secondary actions inside the panel (Show all / Show more / per-facet reset)
   must read smaller than the facet items they sit beneath */
.cm-fd__body .facets__more,
.cm-fd__body .facets__list-more,
.cm-fd__body .show-more,
.cm-fd__body [class*="show-more"],
.cm-fd__body [class*="showmore"],
.cm-fd__body .facets__reset,
.cm-fd__body .facets__clear-all {
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
}

/* Price auto-applies on change (JS debounces) — hide the manual Apply button
   so the whole panel behaves consistently with the auto-applying facets */
.cm-fd__body .filter__price--apply,
.cm-fd__body input.filter__price--apply,
.cm-fd__body #filter__price--apply,
.cm-fd__body .button.filter__price--apply,
.cm-fd__body .form-actions { display: none !important; }

/* Smaller screens: full-width drawer */
@media (max-width: 480px) {
    .cm-filter-drawer { width: 100vw; max-width: 100vw; }
}

/* =============================================================================
   COLLECTION — sibling sub-category tiles (top of floral sub-collection pages)
   ============================================================================= */
.cm-subcat-tiles {
    display: grid;
    /* Auto-fit so 2-, 4-, and 7-tile rows all share one rule. Tiles stay >=150px
       wide on desktop (so all 7 Antique tiles fit in one row), wrap naturally on
       narrower viewports. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--cm-space-4, 16px);
    margin: 0 0 var(--cm-space-5, 24px);
}
/* 2-tile rows (Kundan): cap each tile so they don't stretch absurdly wide */
.cm-subcat-tiles--n2 { grid-template-columns: repeat(2, minmax(180px, 380px)); justify-content: start; }

/* =============================================================================
   ABOUT PAGE — pixel port of chaarmology.com/about/
   ============================================================================= */
.cm-about {
    --about-cream: var(--cm-cream, #fff7ef);
    --about-maroon: var(--cm-maroon, #962b50);
    --about-gold: var(--cm-gold, #f9c067);
    --about-ink: var(--cm-ink, #43303a);
    color: var(--about-ink);
    background: var(--about-cream);
}
/* Kill the theme's MainContent bottom padding on the About page so the final
   maroon section sits flush against the footer instead of leaving an 80px
   cream gap. Uses :has() to target only when the about page is in the main. */
body:has(.cm-about) #MainContent { padding-bottom: 0 !important; }

/* Sections — base + variants */
.cm-about__section {
    position: relative;
    padding: 64px 24px;
    overflow: hidden;
}
.cm-about__section--cream  { background: var(--about-cream); }
.cm-about__section--maroon { background: var(--about-maroon); color: var(--about-cream); }

.cm-about__container          { max-width: 1200px; margin: 0 auto; }
.cm-about__container--narrow  { max-width: 920px; }

/* Corner decorative sprigs */
.cm-about__sprig { position: absolute; z-index: 1; opacity: 0.95; }
.cm-about__sprig img { display: block; }
.cm-about__sprig--tl { top: 18px; left: 24px; }
.cm-about__sprig--tr { top: 18px; right: 24px; }
.cm-about__sprig--bl { bottom: 18px; left: 24px; }
.cm-about__sprig--br { bottom: 18px; right: 24px; }

/* HERO */
.cm-about__hero {
    background: var(--about-maroon);
    color: var(--about-cream);
    padding: 110px 24px 130px;
    text-align: center;
}
.cm-about__hero-inner { max-width: 1100px; margin: 0 auto; }
.cm-about__hero-title {
    font-family: var(--font-heading-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;            /* 38.4px — matches live */
    letter-spacing: 1px;
    margin: 0 0 28px;
    color: #ffffff;              /* pure white, not cream */
}
.cm-about__hero-dots { display: flex; justify-content: center; gap: 18px; }
.cm-about__hero-dots img { width: 22px; height: 22px; opacity: 0.9; filter: brightness(0) invert(1) opacity(0.9); }

/* Headings & body — sizes/weights/colors lifted from the live page's computed CSS */
.cm-about__heading {
    font-family: var(--font-heading-family);
    font-size: 32px;             /* live: 32px flat */
    font-weight: 500;
    line-height: 1.2;            /* 38.4px */
    letter-spacing: 1px;
    color: var(--about-maroon);
    margin: 0 0 22px;
}
.cm-about__heading--center { text-align: center; }
.cm-about__heading--light  { color: #ffffff; }

.cm-about__paragraph {
    font-family: var(--font-body-family); /* Glaukon Regular */
    font-size: 20.8px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--about-maroon);  /* live body text is maroon, not plum */
    text-align: justify;
    margin: 0;
}
.cm-about__paragraph--center { text-align: justify; }
.cm-about__section--maroon .cm-about__paragraph { color: #ffffff; }

/* Small inline asterisk row */
.cm-about__decor { display: flex; gap: 12px; align-items: center; margin: 0 0 18px; }
.cm-about__decor--center { justify-content: center; }
.cm-about__decor img { width: 16px; height: 16px; }
.cm-about__decor--light img { filter: brightness(0) invert(1) opacity(0.95); }
.cm-about__decor--gold  img { filter: invert(78%) sepia(33%) saturate(789%) hue-rotate(341deg) brightness(105%); }

.cm-about__heading-stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cm-about__heading-stack .cm-about__heading { margin: 0; }

/* Mission split (image + text) */
.cm-about__split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.cm-about__split-media img { width: 100%; height: auto; display: block; border-radius: 15px; }
.cm-about__split-body { max-width: 540px; }

/* Values: 4 circular badges with gold asterisk separators */
.cm-about__section--values { padding-top: 80px; padding-bottom: 80px; }
.cm-about__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 48px;
}
.cm-about__badge { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.cm-about__badge img { width: 100%; height: 100%; object-fit: contain; }
.cm-about__badge-sep img { width: 22px; height: 22px; opacity: 0.9; }

/* Videos — live has them stacked (1 column, 2 rows) */
.cm-about__videos { display: grid; grid-template-columns: 1fr; gap: 21px; margin-top: 48px; max-width: 780px; margin-left: auto; margin-right: auto; }
.cm-about__video  { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 15px; overflow: hidden; }
.cm-about__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Design philosophy banner */
.cm-about__section--philosophy { padding: 110px 24px; text-align: center; }

/* Lifestyle image below paragraph — sized to match the live page so the 15px
   border-radius reads (was previously 720px wide which made it look square) */
.cm-about__lifestyle-image { margin: 48px auto 0; max-width: 470px; }
.cm-about__lifestyle-image img { width: 100%; height: auto; display: block; border-radius: 15px; }

/* Founder story */
.cm-about__section--founder { padding-top: 100px; padding-bottom: 100px; }
.cm-about__founder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.cm-about__founder-body { max-width: 560px; }
.cm-about__founder-tag {
    font-family: var(--font-heading-family);
    font-size: clamp(20px, 2.4vw, 28px);
    color: var(--about-gold);
    margin: 0 0 4px;
    font-weight: 400;
}
.cm-about__founder-title {
    font-family: var(--font-heading-family);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--about-cream);
    margin: 0 0 24px;
}
.cm-about__founder-copy p {
    font-family: var(--font-body-family);
    font-size: 20.8px;
    font-weight: 500;
    line-height: 1.3;
    color: #ffffff;
    text-align: justify;
    margin: 0 0 18px;
}
.cm-about__inline-link { color: var(--about-gold); text-decoration: underline; text-underline-offset: 3px; }
.cm-about__inline-link:hover { color: #fff; }
.cm-about__founder-portrait img { width: 100%; height: auto; display: block; border-radius: 15px; }

/* Mobile */
@media (max-width: 800px) {
    .cm-about__section { padding: 48px 20px; }
    .cm-about__hero { padding: 80px 20px 90px; }
    .cm-about__split { grid-template-columns: 1fr; gap: 32px; }
    .cm-about__split-media { max-width: 400px; margin: 0 auto; }
    .cm-about__badges { gap: 8px; }
    .cm-about__badge { width: 110px; height: 110px; }
    .cm-about__badge-sep img { width: 16px; height: 16px; }
    .cm-about__videos { grid-template-columns: 1fr; }
    .cm-about__founder { grid-template-columns: 1fr; gap: 32px; }
    .cm-about__founder-portrait { max-width: 380px; margin: 0 auto; }
    .cm-about__sprig--tl, .cm-about__sprig--tr,
    .cm-about__sprig--bl, .cm-about__sprig--br { display: none; }
}
.cm-subcat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--cm-maroon);
    transition: transform 0.25s ease;
}
.cm-subcat-tile:hover { transform: translateY(-3px); }

.cm-subcat-tile__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--cm-cream);
}
.cm-subcat-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.cm-subcat-tile:hover .cm-subcat-tile__media img { transform: scale(1.04); }

.cm-subcat-tile__label {
    margin-top: var(--cm-space-3, 12px);
    text-align: center;
    font-family: var(--font-heading-family);
    font-size: 24px;
    line-height: 1.2;
    color: var(--cm-maroon);
    letter-spacing: 0.2px;
}

/* Active state — the tile for the collection you're currently viewing.
   Uses a pseudo-element border (not box-shadow) so the outline shows on all
   four sides and follows the rounded corners without spread-rendering quirks. */
.cm-subcat-tile.is-active .cm-subcat-tile__media { position: relative; }
.cm-subcat-tile.is-active .cm-subcat-tile__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--cm-maroon);
    border-radius: inherit;
    pointer-events: none;
}
.cm-subcat-tile.is-active .cm-subcat-tile__label {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Mobile / narrow screens: 2x2 grid */
@media (max-width: 750px) {
    .cm-subcat-tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .cm-subcat-tile__label { font-size: 18px; }
}

/* Landing variant — primary (level-2) category page where the boxes ARE the main content:
   bigger tiles, more breathing room, centered. */
.cm-subcat-tiles--landing {
    max-width: 1120px;
    margin: var(--cm-space-7, 48px) auto var(--cm-space-8, 64px);
    padding: 0 var(--cm-space-5, 24px);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--cm-space-6, 32px);
}
.cm-subcat-tiles--landing .cm-subcat-tile__label {
    margin-top: var(--cm-space-3, 12px);
    font-family: var(--font-heading-family);   /* Lemosty — brand heading font */
    font-size: 20px;
    line-height: 1.3;
}
@media (max-width: 750px) {
    .cm-subcat-tiles--landing {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin: var(--cm-space-5, 24px) auto var(--cm-space-6, 32px);
    }
    .cm-subcat-tiles--landing .cm-subcat-tile__label { font-size: 16px; line-height: 1.3; }
}

/* =============================================================================
   CART PAGE REDESIGN — 2026-05-31
   -----------------------------------------------------------------------------
   All styles for the new /cart page live in this block. They intentionally
   override matching rules in component-cart.css and component-cart-summary.css
   without deleting the originals (the cart drawer reuses some class names).
   Section index:
     A. Trust reassurance row (cm-cart-trust-row.liquid)
     B. Empty state (cm-cart-empty-state.liquid)
     C. Item card (cm-cart-item-card.liquid)
     D. Page layout + header + order summary card + sticky bar (main-cart.liquid)
   ============================================================================= */

/* --- A. Trust reassurance row --- */
.cm-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cm-trust-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.cm-trust-row__icon {
  width: 24px;
  height: 24px;
  color: var(--cm-maroon);
  flex: 0 0 auto;
}
.cm-trust-row__label {
  font-family: var(--cm-font-body);
  font-size: 11px;
  font-weight: 500;
  color: rgba(35, 35, 35, 0.65);
  letter-spacing: 0.3px;
  line-height: 1.35;
}
@media (max-width: 767px) {
  .cm-trust-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* --- B. Empty state --- */
.cm-cart-empty {
  max-width: 520px;
  margin: 0 auto;
  padding: 80px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.cm-cart-empty__sparkle {
  font-family: var(--cm-font-body);
  font-size: 16px;
  color: var(--cm-gold);
  line-height: 1;
  margin: 16px 0;
}
.cm-cart-empty__bag {
  width: 90px;
  height: 110px;
  color: rgba(35, 35, 35, 0.25);
}
.cm-cart-empty__heading {
  font-family: var(--cm-font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--cm-ink);
  line-height: 1.2;
  margin: 16px 0 12px;
  letter-spacing: 0;
}
.cm-cart-empty__body {
  font-family: var(--cm-font-body);
  font-size: 16px;
  color: rgba(35, 35, 35, 0.65);
  line-height: 1.6;
  max-width: 360px;
  margin: 0 0 32px;
}
.cm-cart-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  font-family: var(--cm-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--cm-maroon);
  border: 1px solid var(--cm-maroon);
  border-radius: 0;
  text-decoration: none;
  transition: background var(--cm-dur) var(--cm-ease);
}
.cm-cart-empty__cta:hover {
  background: var(--cm-maroon-deep);
  color: #FFFFFF;
}
.cm-cart-empty__popular {
  font-family: var(--cm-font-body);
  font-size: 13px;
  color: rgba(35, 35, 35, 0.55);
  margin: 40px 0 0;
  line-height: 1.6;
}
.cm-cart-empty__popular-label {
  margin-right: 6px;
}
.cm-cart-empty__popular a {
  color: rgba(35, 35, 35, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(35, 35, 35, 0.25);
  margin: 0 4px;
  transition: color var(--cm-dur-fast) var(--cm-ease), text-decoration-color var(--cm-dur-fast) var(--cm-ease);
}
.cm-cart-empty__popular a:hover {
  color: var(--cm-maroon);
  text-decoration-color: var(--cm-maroon);
}
@media (max-width: 767px) {
  .cm-cart-empty {
    padding: 56px 16px;
  }
  .cm-cart-empty__heading {
    font-size: 26px;
  }
  .cm-cart-empty__body {
    font-size: 15px;
  }
}

/* --- C. Item card --- */
.cm-cart-card {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(150, 43, 80, 0.08);
  border-radius: 10px;
  padding: 24px;
  transition: box-shadow var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease);
}
.cm-cart-card + .cm-cart-card {
  margin-top: 16px;
}
.cm-cart-card:hover {
  box-shadow: 0 4px 16px rgba(150, 43, 80, 0.06);
  border-color: rgba(150, 43, 80, 0.15);
}

.cm-cart-card--addon {
  margin-left: 24px;
  background: #FFFFFF;
  border-color: rgba(150, 43, 80, 0.06);
  grid-template-columns: 80px 1fr;
  border-left: 3px solid rgba(150, 43, 80, 0.18);
}
.cm-cart-card--addon:hover {
  box-shadow: none;
  border-color: transparent;
}
.cm-cart-card--addon .cm-cart-card__image {
  width: 80px;
}
.cm-cart-card__addon-glyph {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--cm-font-body);
  font-size: 14px;
  color: rgba(35, 35, 35, 0.4);
  line-height: 1;
}

.cm-cart-card__image {
  display: block;
  width: 120px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--cm-cream);
}
.cm-cart-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-cart-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cm-cart-card__title {
  font-family: var(--cm-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cm-ink);
  line-height: 1.3;
  margin: 0;
  letter-spacing: 0;
}
.cm-cart-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--cm-dur-fast) var(--cm-ease);
}
.cm-cart-card__title a:hover {
  color: var(--cm-maroon);
}
.cm-cart-card__title a:hover .text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.cm-cart-card__craft {
  font-family: var(--cm-font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(35, 35, 35, 0.55);
  letter-spacing: 0.3px;
  margin: 4px 0 12px;
  line-height: 1.4;
}

.cm-cart-card__variant-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.cm-cart-card__variant-chip {
  display: inline-block;
  background: var(--cm-cream);
  color: rgba(35, 35, 35, 0.75);
  font-family: var(--cm-font-body);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}
.cm-cart-card__variant-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(35, 35, 35, 0.55);
  font-family: var(--cm-font-body);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color var(--cm-dur-fast) var(--cm-ease);
}
.cm-cart-card__variant-edit:hover {
  color: var(--cm-maroon);
}

.cm-cart-card__eta {
  font-family: var(--cm-font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--cm-ink);
  margin: 0 0 8px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cm-cart-card__eta-spark {
  color: var(--cm-gold);
  font-style: normal;
  font-size: 12px;
}

.cm-cart-card__props {
  margin: 4px 0 12px;
  padding: 0;
}
.cm-cart-card__prop {
  display: flex;
  gap: 6px;
  font-family: var(--cm-font-body);
  font-size: 12px;
  color: rgba(35, 35, 35, 0.65);
  line-height: 1.5;
  margin: 0;
}
.cm-cart-card__prop dt {
  font-weight: 600;
  color: rgba(35, 35, 35, 0.75);
}
.cm-cart-card__prop dd {
  margin: 0;
}

.cm-cart-card__allocation {
  font-family: var(--cm-font-body);
  font-size: 12px;
  color: rgba(35, 35, 35, 0.55);
  margin: 0 0 8px;
}

.cm-cart-card__discounts {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-family: var(--cm-font-body);
  font-size: 12px;
  color: var(--cm-maroon);
}

.cm-cart-card__hairline {
  height: 1px;
  background: rgba(150, 43, 80, 0.08);
  margin: 12px 0;
}

.cm-cart-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cm-cart-card__qty {
  display: inline-flex;
  align-items: center;
  background: var(--cm-cream);
  border-radius: 999px;
  height: 36px;
  padding: 0 4px;
  gap: 0;
}
.cm-cart-card__qty-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--cm-ink);
  cursor: pointer;
  transition: color var(--cm-dur-fast) var(--cm-ease), background var(--cm-dur-fast) var(--cm-ease);
  border-radius: 999px;
  text-decoration: none;
}
.cm-cart-card__qty-btn::before {
  content: '';
  display: block;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.cm-cart-card__qty-btn--plus::after {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 10px;
  background: currentColor;
  border-radius: 1px;
}
.cm-cart-card__qty-btn:hover {
  color: var(--cm-maroon);
  background: rgba(150, 43, 80, 0.08);
}
.cm-cart-card__qty-input {
  appearance: textfield;
  -moz-appearance: textfield;
  background: transparent;
  border: 0;
  outline: 0;
  width: 32px;
  text-align: center;
  font-family: var(--cm-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
}
.cm-cart-card__qty-input::-webkit-outer-spin-button,
.cm-cart-card__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cm-cart-card__price-wrap {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cm-cart-card__price-stack {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.cm-cart-card__price-stack dd {
  margin: 0;
}
.cm-cart-card__price-strike {
  font-family: var(--cm-font-body);
  font-size: 12px;
  color: rgba(35, 35, 35, 0.4);
  text-decoration: line-through;
}
.cm-cart-card__price-total {
  font-family: var(--cm-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cm-ink);
  line-height: 1.1;
}
.cm-cart-card__price-savepill {
  display: inline-block;
  background: rgba(150, 43, 80, 0.08);
  color: var(--cm-maroon);
  font-family: var(--cm-font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.cm-cart-card__price-each {
  font-family: var(--cm-font-body);
  font-size: 12px;
  color: rgba(35, 35, 35, 0.55);
}

.cm-cart-card__remove {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(35, 35, 35, 0.55);
  background: transparent;
  transition: background var(--cm-dur-fast) var(--cm-ease), color var(--cm-dur-fast) var(--cm-ease);
  text-decoration: none;
}
.cm-cart-card__remove:hover {
  background: var(--cm-maroon);
  color: #FFFFFF;
}

/* Mobile tightening */
@media (max-width: 767px) {
  .cm-cart-card {
    grid-template-columns: 88px 1fr;
    padding: 20px 16px;
    gap: 16px;
  }
  .cm-cart-card--addon {
    grid-template-columns: 64px 1fr;
    margin-left: 16px;
  }
  .cm-cart-card--addon .cm-cart-card__image {
    width: 64px;
  }
  .cm-cart-card__image {
    width: 88px;
  }
  .cm-cart-card__title {
    font-size: 18px;
  }
  .cm-cart-card__qty-btn {
    width: 44px;
    height: 44px;
  }
  .cm-cart-card__qty {
    height: 44px;
  }
  .cm-cart-card__remove {
    width: 44px;
    height: 44px;
    top: 6px;
    right: 6px;
  }
  .cm-cart-card__price-total {
    font-size: 20px;
  }
}

/* --- D. Page layout + header + order summary card + sticky bar --- */
.template-cart {
  background: var(--cm-cream);
}

.cm-cart.cart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.cm-cart__continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cm-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--cm-maroon);
  text-decoration: none;
  letter-spacing: 0.2px;
  margin-bottom: 24px;
  transition: color var(--cm-dur-fast) var(--cm-ease);
}
.cm-cart__continue:hover {
  color: var(--cm-maroon-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cm-cart__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cm-cart__title {
  font-family: var(--cm-font-display);
  font-size: 40px;
  font-weight: 400;
  color: var(--cm-ink);
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0;
}
.cm-cart__count {
  font-family: var(--cm-font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(150, 43, 80, 0.6);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}

/* Scope the existing cm-shipping-bar inside the cart page — match the left
   column width so the summary card aligns to its top. */
.cm-cart .cm-shipping-bar {
  max-width: 100%;
}

.cm-cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}

.cm-cart__items {
  min-width: 0;
}

.cm-cart__note-foldout {
  margin-top: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(150, 43, 80, 0.08);
  border-radius: 10px;
  padding: 16px 20px;
}
.cm-cart__note-foldout > summary {
  padding: 0;
}
.cm-cart__note-body {
  margin-top: 12px;
}
.cm-cart__note-body textarea {
  width: 100%;
  font-family: var(--cm-font-body);
  font-size: 14px;
  border: 1px solid rgba(35, 35, 35, 0.15);
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 80px;
  resize: vertical;
}

/* Summary card */
.cm-cart__summary {
  position: sticky;
  top: 96px;
  background: #FFFFFF;
  border: 1px solid rgba(150, 43, 80, 0.08);
  border-radius: 10px;
  padding: 24px;
}
.cm-cart__summary form {
  margin: 0;
}

.cm-summary__title {
  font-family: var(--cm-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cm-ink);
  line-height: 1.3;
  margin: 0 0 20px;
  letter-spacing: 0;
  text-transform: none;
}
/* Kill the old decorative underline that ::after the old .cart--totals-title */
.cm-cart__summary .cart--totals-title::after,
.cm-summary__title::after {
  display: none !important;
  content: none !important;
}

.cm-summary__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cm-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Override the cart-total-* ::after hairlines from component-cart-summary.css */
.cm-summary__row::after,
.cm-summary__row::before {
  display: none !important;
  content: none !important;
}
.cm-summary__label {
  font-family: var(--cm-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--cm-ink);
  letter-spacing: 0;
  text-transform: none;
}
.cm-summary__value {
  font-family: var(--cm-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--cm-ink);
}
.cm-summary__row--saving .cm-summary__label,
.cm-summary__row--saving .cm-summary__value {
  color: var(--cm-maroon);
}
/* Override the global .cm-shipping-status size from the free-shipping bar
   block so the cart-summary shipping row matches the summary's 15px scale. */
.cm-summary__row .cm-shipping-status {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.cm-summary__hairline {
  height: 1px;
  background: rgba(150, 43, 80, 0.08);
  margin: 16px 0;
}

.cm-summary__grandtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
.cm-summary__grandtotal::after,
.cm-summary__grandtotal::before {
  display: none !important;
  content: none !important;
}
.cm-summary__grandtotal-label {
  font-family: var(--cm-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Override the .cart-total-value class from component-cart-summary.css
   (the same element carries both classes — JS targets cart-total-value). */
.cm-summary__grandtotal-value {
  font-family: var(--cm-font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--cm-ink);
  line-height: 1.1;
}
.cm-summary__tax {
  font-family: var(--cm-font-body);
  font-size: 11px;
  color: rgba(35, 35, 35, 0.55);
  margin: 4px 0 0;
  letter-spacing: 0.2px;
}

.cm-summary__foldout {
  margin-top: 24px;
}
.cm-summary__foldout + .cm-summary__foldout {
  margin-top: 12px;
}

.cm-summary__customer-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--cm-font-body);
  font-style: italic;
  font-size: 13px;
  color: rgba(35, 35, 35, 0.7);
  margin: 20px 0 16px;
  text-align: center;
}
.cm-summary__customer-count svg {
  color: var(--cm-gold);
  flex: 0 0 auto;
}

.cm-summary__terms {
  margin: 0 0 16px;
}
.cm-summary__terms--flash {
  animation: cm-flash 800ms var(--cm-ease) 2;
}
@keyframes cm-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(150, 43, 80, 0.08); }
}

.cm-summary__checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 18px 24px;
  background: var(--cm-maroon);
  color: #FFFFFF;
  border: 1px solid var(--cm-maroon);
  border-radius: 0;
  font-family: var(--cm-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--cm-dur-fast) var(--cm-ease);
}
.cm-summary__checkout:hover {
  background: var(--cm-maroon-deep);
}
.cm-summary__checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cm-summary__checkout svg {
  transition: transform var(--cm-dur-fast) var(--cm-ease);
}
.cm-summary__checkout:hover svg {
  transform: translateX(4px);
}

.cm-summary__ssl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--cm-font-body);
  font-size: 11px;
  color: rgba(35, 35, 35, 0.55);
  margin: 12px 0 8px;
  letter-spacing: 0.3px;
}

.cm-summary__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cm-summary__pay .cm-pay {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.cm-summary__pay .cm-pay svg {
  height: 20px;
  width: auto;
}

/* Side-cart drawer variant of the same row (snippets/cm-cart-payment-row.liquid).
   Narrower column than the cart-page summary, so tighten the gaps and drop the
   logos a step; the row still wraps rather than overflowing. */
/* .previewCartGroup is a flex column and the theme puts the checkout button at
   order:2, so unordered children float ABOVE it. Order these explicitly so the
   reassurance reads after the CTA, matching the cart page. */
.cm-cartpay__ssl--drawer {
  order: 3;
  margin: 14px 0 8px;
}
.cm-cartpay__pay--drawer {
  order: 4;
  gap: 10px;
  padding-bottom: 2px;
}
.cm-cartpay__pay--drawer .cm-pay {
  height: 18px;
}
.cm-cartpay__pay--drawer .cm-pay svg {
  height: 16px;
}

/* Mobile sticky bottom bar — hidden by default, shown <1024 with items */
.cm-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border-top: 1px solid rgba(150, 43, 80, 0.12);
  box-shadow: 0 -4px 16px rgba(35, 35, 35, 0.04);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
}
.cm-sticky-bar__totalblock {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 2px;
}
.cm-sticky-bar__totallabel {
  font-family: var(--cm-font-body);
  font-size: 11px;
  color: rgba(35, 35, 35, 0.55);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}
.cm-sticky-bar__totalvalue {
  font-family: var(--cm-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cm-ink);
  line-height: 1.1;
}
.cm-sticky-bar__checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 56px;
  padding: 16px 20px;
  background: var(--cm-maroon);
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  font-family: var(--cm-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--cm-dur-fast) var(--cm-ease);
}
.cm-sticky-bar__checkout:hover {
  background: var(--cm-maroon-deep);
}
.cm-sticky-bar__checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive grid + sticky-bar visibility */
@media (max-width: 1023px) {
  .cm-cart__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cm-cart__summary {
    position: static;
  }
  /* On <1024, the inline summary checkout button hides (sticky bar takes over) */
  .cm-cart__summary .cm-summary__checkout {
    display: none;
  }
  .cm-sticky-bar {
    display: flex;
  }
  /* Add bottom padding to the page so the sticky bar doesn't cover content */
  .template-cart .body-content-wrapper {
    padding-bottom: 120px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cm-cart__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
  }
  .cm-cart__summary {
    position: sticky;
    top: 96px;
  }
  /* Bring the inline checkout button back on tablet (sticky bar hides) */
  .cm-cart__summary .cm-summary__checkout {
    display: inline-flex;
  }
  .cm-sticky-bar {
    display: none;
  }
}

@media (max-width: 767px) {
  .cm-cart__title {
    font-size: 28px;
  }
  .cm-summary__title {
    font-size: 20px;
  }
  /* !important chains the desktop !important above — required to override it. */
  .cm-summary__grandtotal-value {
    font-size: 24px !important;
  }
}

/* Hide the empty-state's top "Continue shopping" link (CTA replaces it) */
.cm-cart:has(.cm-cart-empty) .cm-cart__continue {
  display: none;
}

/* Hide the Halo mobile bottom toolbar on /cart only — our sticky checkout
   bar (cm-sticky-bar) takes its place on this template. Both classes
   included as a safety net (the rendered top-level class may be either
   name across Halo theme versions). !important because the theme's own
   CSS uses media queries with high specificity to show the bar. */
body.template-cart .halo-toolbar-mobile,
body.template-cart .toolbar-mobile {
  display: none !important;
}

/* --- Cart page hotfixes 2026-05-31 v2 ---
   Override stubborn legacy cart styles that bleed into the new item card. */

/* Hide native number-input spinners on the new cart-card qty input.
   The legacy .cart-item-qty input::-webkit-...-spin-button rule in
   component-cart.css doesn't match because our parent is
   cart-update-quantity.cm-cart-card__qty, not .cart-item-qty. */
.cm-cart-card__qty-input::-webkit-outer-spin-button,
.cm-cart-card__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
.cm-cart-card__qty-input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Force the cream pill background + flex layout on the qty container,
   overriding any inherited block-display from cart-update-quantity. */
.cm-cart-card .cm-cart-card__qty {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--cm-cream) !important;
  border-radius: 999px !important;
  height: 36px !important;
  padding: 0 4px !important;
  width: auto !important;
}

/* The legacy .cart-item-qty-input rule (custom.css:1454-1466) sets
   width:40px !important; that's fine for desktop but eats real estate
   inside our pill. Narrow it back to 36px and force transparent bg. */
.cm-cart-card__qty-input.cart-item-qty-input,
.cm-cart-card__qty-input {
  width: 36px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: var(--cm-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cm-ink) !important;
  height: 32px !important;
  line-height: 1 !important;
}

/* The − / + buttons share the legacy `btn-quantity` class. The legacy
   styling at custom.css:~1440 applies font-size: 18px !important which
   gets in the way of our pseudo-element cross. Reset so our pseudos win. */
.cm-cart-card__qty-btn.btn-quantity {
  font-size: 0 !important; /* hide any legacy ::before/::after text glyph */
  background: transparent !important;
  border: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
}
.cm-cart-card__qty-btn.btn-quantity:hover {
  background: rgba(150, 43, 80, 0.08) !important;
  color: var(--cm-maroon) !important;
}
.cm-cart-card__qty-btn.btn-quantity::before {
  content: '' !important;
  display: block !important;
  width: 10px !important;
  height: 1.5px !important;
  background: currentColor !important;
  border-radius: 1px !important;
}
.cm-cart-card__qty-btn--plus.btn-quantity::after {
  content: '' !important;
  position: absolute !important;
  width: 1.5px !important;
  height: 10px !important;
  background: currentColor !important;
  border-radius: 1px !important;
}

/* Mobile bumps the buttons to 44×44 hit areas */
@media (max-width: 767px) {
  .cm-cart-card .cm-cart-card__qty { height: 44px !important; }
  .cm-cart-card__qty-btn.btn-quantity { width: 44px !important; height: 44px !important; }
  .cm-cart-card__qty-input.cart-item-qty-input,
  .cm-cart-card__qty-input { width: 40px !important; height: 40px !important; }
}

/* --- Cart page hotfixes 2026-05-31 v3 --- */

/* Square images (1:1) instead of portrait — overrides the inline
   padding-bottom: 133% style that comes from the snippet's
   media_size = 'portrait' branch. The inline style is preserved
   for other contexts; on the cart page we always want square. */
.cm-cart-card .cm-cart-card__image {
  padding-bottom: 0 !important; /* kill the inline aspect */
  height: 120px !important;
  width: 120px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important; /* more rounded than the original 6px */
  overflow: hidden !important;
}
.cm-cart-card--addon .cm-cart-card__image {
  height: 80px !important;
  width: 80px !important;
}
.cm-cart-card .cm-cart-card__image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 767px) {
  .cm-cart-card .cm-cart-card__image {
    height: 88px !important;
    width: 88px !important;
    border-radius: 10px !important;
  }
  .cm-cart-card--addon .cm-cart-card__image {
    height: 64px !important;
    width: 64px !important;
  }
}

/* Qty stepper buttons now use real text content (− and +).
   Reset every legacy rule that would hide or shrink text, then
   style the visible glyphs directly. Override font-size: 0 from
   v2 hotfix and font-size: 18px !important from legacy. */
.cm-cart-card__qty-btn.btn-quantity {
  font-size: 0 !important; /* hide any stray legacy text */
}
.cm-cart-card__qty-btn.btn-quantity > span {
  font-size: 18px !important;
  font-family: var(--cm-font-body) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--cm-ink) !important;
  display: inline-block !important;
  transform: translateY(-1px); /* optical centering for the − glyph */
}
.cm-cart-card__qty-btn.btn-quantity:hover > span {
  color: var(--cm-maroon) !important;
}
/* Disable any background-image / pseudo cross from the v2 hotfix
   so they don't draw on top of the now-visible text. */
.cm-cart-card__qty-btn.btn-quantity::before,
.cm-cart-card__qty-btn.btn-quantity::after {
  content: none !important;
  display: none !important;
}

/* =============================================================================
   ACOWEBS (wcpa) FLORAL SET FORMS — brand styling, hard-coded to match the old
   in-theme set builder. Scoped to .wcpa_form_outer so it only touches Acowebs
   forms (component form + the global bangle/date/photo/customization form).
   Brand: body font Glaukon, maroon #962B50.
   ============================================================================= */
.wcpa_form_outer {
    font-family: var(--cm-font-body, 'Glaukon', 'Helvetica Neue', Arial, sans-serif);
    color: var(--cm-maroon, #962B50);
}
/* Field labels / group headings: "MAKE YOUR OWN SET", "SELECT BANGLE SIZE", "EXPECTED DATE OF DELIVERY"... */
.wcpa_form_outer .wcpa_field_label {
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-maroon, #962B50);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.wcpa_form_outer .wcpa_required_ast { color: #D93333; }

/* Component options (Necklace, Earrings...) */
.wcpa_form_outer .wcpa_checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--cm-maroon, #962B50);
    cursor: pointer;
}
.wcpa_form_outer .wcpa_checkbox label > span:not(.wcpa_checkbox_custom):not(.wcpa_option_price) { flex: 1; }
.wcpa_form_outer .wcpa_option_price {
    font-weight: 600;
    color: var(--cm-maroon, #962B50);
    white-space: nowrap;
}
.wcpa_form_outer input[type="checkbox"] { accent-color: var(--cm-maroon, #962B50); }

/* Inputs: bangle select / date / file / customization textarea */
.wcpa_form_outer select,
.wcpa_form_outer textarea,
.wcpa_form_outer input[type="text"],
.wcpa_form_outer .wcpa-fp-input {
    font-family: inherit;
    font-size: 16px;
    color: #232323;
    padding: 12px 16px;
    border: 1px solid rgba(35, 35, 35, 0.2);
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}
.wcpa_form_outer select { height: 48px; }
.wcpa_form_outer textarea { min-height: 80px; resize: vertical; }
.wcpa_form_outer select:focus,
.wcpa_form_outer textarea:focus,
.wcpa_form_outer .wcpa-fp-input:focus { outline: none; border-color: var(--cm-maroon, #962B50); }
.wcpa_form_outer .wcpa_choose_button {
    font-family: inherit !important;
    color: #fff !important;
    border: 1px solid var(--cm-maroon, #962B50) !important;
    border-radius: 0 !important;
    background: var(--cm-maroon, #962B50) !important;
    box-shadow: none !important;
}
/* Checkbox selected fill -> maroon (Acowebs custom checkbox defaults to blue) */
.wcpa_form_outer .wcpa_checkbox.wcpa_selected .wcpa_checkbox_custom {
    background-color: var(--cm-maroon, #962B50) !important;
    border-color: var(--cm-maroon, #962B50) !important;
}
/* Field subtotal shown under the options grid -> maroon (was dark grey) */
.wcpa_form_outer .wcpa_field_price {
    color: var(--cm-maroon, #962B50) !important;
}

/* Price summary / Total */
.wcpa_form_outer .wcpa_price_summary .wcpa_total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(122, 35, 66, 0.18);
}
.wcpa_form_outer .wcpa_price_summary .wcpa_total > span:first-child {
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-maroon, #962B50);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.wcpa_form_outer .wcpa_price_summary .wcpa_price_outer {
    font-size: 22px;
    font-weight: 700;
    color: var(--cm-maroon, #962B50);
}

/* Acowebs tooltip — "?" icon: maroon fill, white question mark. Hover popup bubble -> maroon. */
.wcpa_form_outer .wcpa_tooltip_icon {
    color: #fff !important;
    background-color: var(--cm-maroon, #962B50) !important;
    border-color: var(--cm-maroon, #962B50) !important;
}
.wcpa_tooltip,
.wcpa_tooltip_content,
.wcpa-tooltip,
.wcpa_tooltip_popup {
    background-color: var(--cm-maroon, #962B50) !important;
    color: var(--cm-cream, #FFF7EF) !important;
    border-color: var(--cm-maroon, #962B50) !important;
}

/* ============================================================
   Sale price presentation — Task 46 (2026-07-21)
   Order (set in snippets/price.liquid): pay price → struck
   compare → "Save ₹X (Y%)" (amount + percentage together).
   PDP: brand-gold pill chip. Cards: small deep-orange note.
   Replaces the off-brand green (--product-sale-price-color)
   everywhere the price snippet renders.
   ============================================================ */

/* Sale (pay) price — brand maroon, never green */
.price.price--on-sale .price-item--sale,
.price.price--on-sale .price-item--sale .money {
    color: var(--cm-maroon, #962B50) !important;
    font-weight: 600 !important;
}

/* Compare (old) price — muted warm mauve-gray, struck, one step smaller */
.price.price--on-sale .price__compare .price-item--regular {
    color: #A18E95 !important;
    font-weight: 400 !important;
    font-size: calc(var(--product-price-font-size, 15px) - 2px) !important;
}

/* Savings note on cards / quick views — quiet festive orange */
.price .price-item--saved,
.price .price-item--saved .money {
    color: #A6522C !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

/* Sale row: baseline-align the pair, breathe when it wraps on cards */
.price--on-sale .price__sale {
    align-items: baseline;
    row-gap: 5px;
}

/* ---------------- PDP (.productView-price) ---------------- */

/* Pay price — dominant */
.productView-price .price--on-sale .price__sale .price__last,
.productView-price .price--on-sale .price__sale .price__last .money {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--cm-maroon, #962B50) !important;
    line-height: 1 !important;
}

/* Old price — clearly secondary */
.productView-price .price--on-sale .price__compare,
.productView-price .price--on-sale .price__compare .price-item--regular {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #A18E95 !important;
    letter-spacing: 0.3px !important;
}

/* Savings chip — brand gold pill, deep maroon text */
.productView-price .price__saved {
    background-color: var(--cm-gold, #F9C067) !important;
    border-radius: 999px !important;
    padding: 7px 14px 6px !important;
    margin-left: 0 !important;
    align-self: auto !important; /* fall back to the row's baseline alignment */
}
.productView-price .price .price-item--saved,
.productView-price .price.price--medium .price-item--saved,
.productView-price .price.price--medium .price-item--saved .money,
.productView-price .price__saved .money {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cm-maroon-deep, #7A2342) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
}

/* ============================================================
   Acowebs tooltip icon: "?" → "i" — Task 50 (2026-07-22)
   The app injects a literal "?" text node, so collapse it
   (font-size: 0) and draw the info glyph via ::before.
   Circle instead of square: universal "information" affordance.
   ============================================================ */
.wcpa_form_outer .wcpa_tooltip_icon {
    font-size: 0 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
}
.wcpa_form_outer .wcpa_tooltip_icon::before {
    /* lowercase i (standard info glyph). Sans-serif on purpose: at 14px
       a serif 'i' reads as a capital I (serifs mimic crossbars). */
    content: "i";
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    /* the form labels have text-transform: capitalize, which silently
       turned the lone "i" into "I" — the actual culprit all along */
    text-transform: none !important;
}

/* ============================================================
   Shop by Occasion + collection intro — Task 58 (2026-07-22)
   Rendered by snippets/cm-collection-intro.liquid inside
   #CollectionProductGrid .collection (survives AJAX filtering).
   ============================================================ */

/* Occasion tiles (unfiltered state) */
.cm-occasions {
    margin: 4px 0 28px;
    text-align: center;
}
.cm-occasions__kicker {
    font-family: Glaukon, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cm-maroon, #962B50);
    margin: 0 0 14px;
}
.cm-occasions__row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cm-occasions__tile {
    display: block;
    min-width: 240px;
    padding: 18px 28px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(122, 35, 66, 0.16);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.cm-occasions__tile:hover {
    border-color: var(--cm-maroon, #962B50);
    box-shadow: 0 2px 10px rgba(122, 35, 66, 0.10);
    text-decoration: none;
}
.cm-occasions__title {
    display: block;
    font-family: Lemosty, Georgia, serif;
    font-size: 21px;
    color: var(--cm-maroon, #962B50);
    line-height: 1.2;
}
.cm-occasions__sub {
    display: block;
    margin-top: 6px;
    font-family: Glaukon, 'Helvetica Neue', sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #A18E95;
}

/* Collection intro (single collection filtered) */
.cm-coll-intro {
    max-width: 720px;
    margin: 4px auto 30px;
    text-align: center;
}
.cm-coll-intro__title {
    font-family: Lemosty, Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--cm-maroon, #962B50);
    margin: 0 0 12px;
}
.cm-coll-intro__check { display: none; }
.cm-coll-intro__body {
    text-align: left;
    font-family: Glaukon, 'Helvetica Neue', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cm-ink, #232323);
    max-height: 7.5em; /* ~4-5 lines collapsed */
    overflow: hidden;
    position: relative;
}
.cm-coll-intro__body::after { /* fade hint while collapsed */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.2em;
    background: linear-gradient(to bottom, rgba(255, 247, 239, 0), var(--cm-cream, #FFF7EF));
}
.cm-coll-intro__check:checked ~ .cm-coll-intro__body { max-height: none; }
.cm-coll-intro__check:checked ~ .cm-coll-intro__body::after { display: none; }
.cm-coll-intro__more {
    display: inline-block;
    margin-top: 10px;
    font-family: Glaukon, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cm-maroon, #962B50);
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}
.cm-coll-intro__more-close { display: none; }
.cm-coll-intro__check:checked ~ .cm-coll-intro__more .cm-coll-intro__more-open { display: none; }
.cm-coll-intro__check:checked ~ .cm-coll-intro__more .cm-coll-intro__more-close { display: inline; }

@media (max-width: 550px) {
    .cm-occasions__row { gap: 10px; }
    .cm-occasions__tile { min-width: 0; flex: 1 1 45%; padding: 14px 12px 12px; }
    .cm-occasions__title { font-size: 17px; }
}

/* Recently Viewed: kill the white band — inherit the cream page ground
   (section setting product_bg is #ffffff per template; override globally) */
.halo-block.halo-recently-viewed-block {
    background: transparent !important;
}
.halo-recently-viewed-block .halo-block-header .title .text {
    /* the span masks the divider line behind the heading; mask in cream, not white */
    background: var(--cm-cream, #FFF7EF) !important;
}

/* ============================================================
   Real-bride video pip — Task 31 (2026-07-22)
   snippets/cm-bride-video.liquid, product pages only.
   Pip bottom-right above the WhatsApp float; tap = expand
   with sound; X = dismiss for the session.
   ============================================================ */
.cm-bride-pip {
    position: fixed;
    right: 16px;
    bottom: 122px;
    width: 150px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: #1a1215;
    box-shadow: 0 6px 24px rgba(35, 23, 28, 0.35);
    cursor: pointer;
    z-index: 998;
}
.cm-bride-pip__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cm-bride-pip__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(26, 18, 21, 0.6);
    color: #FFF7EF;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}
.cm-bride-pip[data-state="expanded"] {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    width: min(86vw, calc(78vh * 9 / 16));
    border-radius: 16px;
    z-index: 1001;
    cursor: default;
}
.cm-bride-pip[data-state="expanded"] .cm-bride-pip__video { object-fit: contain; }
.cm-bride-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(35, 23, 28, 0.62);
    z-index: 1000;
    display: none;
}
.cm-bride-backdrop[data-open] { display: block; }
@media (max-width: 550px) {
    .cm-bride-pip { width: 116px; right: 10px; bottom: 148px; }
}