/** Shopify CDN: Minification failed

Line 45:0 All "@import" rules must come first
Line 629:4 Expected identifier but found "#b0ada8"

**/
/* 
    ELYPRO Custom Styles
    Hybrid design: dark brand sections + warm conversion surfaces
    Do not edit variables.css.liquid — all customisations live here
*/

/* fix for ultra wide monitors for hover effect featured products */
.product-item .card .product-item-img {
    width: 100%;
}

/* ── ELYPRO BRAND VARIABLES ── */
:root {
    --elypro-black: #0a0a08;
    --elypro-off-black: #111110;
    --elypro-surface: #1a1a17;
    --elypro-white: #fafaf8;
    --elypro-cream: #f4f1eb;
    --elypro-warm: #edeae3;
    --elypro-warm-mid: #e0dbd2;
    --elypro-gold: #c8a84e;
    --elypro-gold-bright: #e8c86a;
    --elypro-gold-dim: #9a7d3a;
    --elypro-muted-dark: #6a6860;
    --elypro-muted-light: #7a7570;
    --elypro-border-dark: #252522;
    --elypro-border-light: #ddd8d0;
    --elypro-green: #1a5c3a;
    --elypro-green-bg: #f0faf4;
    --elypro-green-border: #b8e8cc;

    /* Display font — loaded via Google Fonts import below */
    --elypro-display: 'Bebas Neue', sans-serif;
    --elypro-serif: 'Playfair Display', Georgia, serif;
    --elypro-sans: 'DM Sans', sans-serif;
}

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── GLOBAL BASE ── */
body {
    font-family: var(--elypro-sans), sans-serif;
    background-color: var(--elypro-cream);
    -webkit-font-smoothing: antialiased;
}

/* ── HEADER / NAV — dark ── */
.header-section,
header.sticky-top,
.navbar,
#shopify-section-header {
    background-color: var(--elypro-black) !important;
}

.header-section .nav-link,
.navbar-nav .nav-link,
header .nav-link {
    color: var(--elypro-muted-dark) !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
    transition: color 0.2s;
}

.header-section .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--elypro-white) !important;
}

/* Logo text on dark header */
.header-section .navbar-brand,
header .logo-text {
    color: var(--elypro-white) !important;
    font-family: var(--elypro-display);
    letter-spacing: 0.15em;
    font-size: 22px;
}

/* Cart icon on dark header */
header .cart-icon,
header .icon-cart {
    color: var(--elypro-white) !important;
}

/* ── ANNOUNCEMENT BAR ── */
.announcement-bar {
    background-color: var(--elypro-gold) !important;
    color: var(--elypro-black) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.announcement-bar a,
.announcement-bar p {
    color: var(--elypro-black) !important;
}

/* ── HERO SECTIONS — dark ── */
.section-hero,
.hero-section,
[class*="hero"] {
    background-color: var(--elypro-black);
}

/* Hero headline — display font */
.hero-section h1,
.hero-section h2,
.section-hero h1,
.section-hero h2 {
    font-family: var(--elypro-display) !important;
    letter-spacing: 0.02em;
    line-height: 0.9;
    color: var(--elypro-white);
}

/* Gold accent on headlines */
.text-gold,
.text-accent {
    color: var(--elypro-gold) !important;
}

/* ── MARQUEE / TICKER ── */
.marquee-section,
.section-marquee {
    background-color: var(--elypro-off-black) !important;
    border-top: 1px solid var(--elypro-border-dark);
    border-bottom: 1px solid var(--elypro-border-dark);
}

.marquee-section .marquee-text,
.marquee-section span,
.marquee-section p {
    color: var(--elypro-muted-dark) !important;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── PRODUCT CARDS — warm light surfaces ── */
.product-item .card,
.product-card,
.card.product-card {
    background-color: var(--elypro-white) !important;
    border: 0.5px solid var(--elypro-border-light) !important;
    border-radius: 2px !important;
    transition: border-color 0.2s;
}

.product-item .card:hover,
.product-card:hover {
    border-color: #c5c0b8 !important;
}

/* Product image background */
.product-item .card-img-top,
.product-item .img-thumbnail,
.product-card .card-img-top {
    background-color: var(--elypro-warm) !important;
}

/* Product title */
.product-item .card-title,
.product-item .product-title,
.product-card .card-title {
    font-family: var(--elypro-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--elypro-black);
    line-height: 1.3;
}

/* Product price */
.product-item .price,
.product-card .price {
    font-size: 13px;
    color: var(--elypro-black);
}

/* Add to cart on hover — reveals black button */
.product-item .card .btn-atc,
.product-item .btn-primary {
    background-color: #c8a84e !important;
    border-color: #c8a84e !important;
    color: #0a0a08 !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px !important;
}

.product-item .card .btn-atc:hover {
    background-color: #b8983e !important;
}

/* Product section background */
.section-featured-products,
.section-collection,
.featured-collection-section {
    background-color: var(--elypro-cream);
}

/* ── SECTION HEADINGS — display font ── */
.section-title,
.section-heading,
h2.h1, h2.display,
.display-heading {
    font-family: var(--elypro-display) !important;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Serif accent for editorial moments */
.section-subtitle,
.eyebrow + h2,
.featured-product-title,
blockquote,
.testimonial-text,
.review-text {
    font-family: var(--elypro-serif) !important;
}

/* Section eyebrow labels */
.section-eyebrow,
.label-eyebrow,
.overline {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--elypro-gold-dim) !important;
}

/* ── BUTTONS — global ── */
.btn-primary {
    background-color: var(--elypro-black) !important;
    border-color: var(--elypro-black) !important;
    color: var(--elypro-white) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    border-radius: 2px !important;
}

.btn-primary:hover {
    background-color: #333 !important;
    border-color: #333 !important;
}

.btn-secondary {
    background-color: transparent !important;
    border-color: var(--elypro-black) !important;
    color: var(--elypro-black) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    border-radius: 2px !important;
}

/* Gold CTA button — for hero and dark sections */
.btn-gold,
.btn-accent {
    background-color: var(--elypro-gold) !important;
    border-color: var(--elypro-gold) !important;
    color: var(--elypro-black) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 2px !important;
}

.btn-gold:hover {
    background-color: var(--elypro-gold-bright) !important;
}

/* Outline button on dark backgrounds */
.btn-outline-light {
    border-color: rgba(255,255,255,0.8) !important;
    color: #ffffff !important;
    background-color: transparent !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    border-radius: 2px !important;
}

.btn-outline-light:hover {
    border-color: #ffffff !important;
    background-color: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

/* ── DARK SECTIONS (brand, story, process) ── */
.section-dark,
.bg-dark-brand,
[data-section-bg="dark"] {
    background-color: var(--elypro-black) !important;
    color: var(--elypro-white);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.bg-dark-brand h1,
.bg-dark-brand h2 {
    color: var(--elypro-white) !important;
    font-family: var(--elypro-display) !important;
    letter-spacing: 0.03em;
}

.section-dark p,
.bg-dark-brand p {
    color: var(--elypro-muted-dark);
    line-height: 1.8;
    font-weight: 300;
}

/* ── STICKY ADD TO CART ── */
.sticky-atc,
.sticky-product-bar,
#sticky-atc-bar {
   background-color: var(--elypro-cream) !important;
    border-top: 1px solid var(--elypro-border-light) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important;
}

.sticky-atc .product-title,
.sticky-product-bar .product-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--elypro-black);
}

.sticky-atc .btn-primary,
.sticky-product-bar .btn-primary {
    background-color: var(--elypro-black) !important;
    color: var(--elypro-white) !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px !important;
}

/* ── CART DRAWER ── */
.cart-drawer,
#cart-offcanvas,
.offcanvas.offcanvas-end[id*="cart"] {
    background-color: var(--elypro-white) !important;
}

/* Cart goal / free shipping bar */
.cart-goal,
.cart-goal-bar,
.cart-progress {
    background-color: var(--elypro-warm) !important;
    border-bottom: 1px solid var(--elypro-border-light);
    padding: 12px 16px;
}

.cart-goal .progress-bar,
.cart-goal-bar .progress {
    background-color: var(--elypro-gold) !important;
    border-radius: 3px;
}

.cart-goal .progress,
.cart-goal-bar .progress-track {
    background-color: var(--elypro-warm-mid) !important;
    border-radius: 3px;
    height: 6px;
}

.cart-goal-text,
.cart-goal p {
    font-size: 12px;
    font-weight: 500;
    color: var(--elypro-black);
}

/* Cart upsell section */
.cart-upsell,
.cart-drawer-upsell {
    background-color: var(--elypro-cream) !important;
    border-top: 1px solid var(--elypro-border-light);
    padding: 14px 16px;
}

.cart-upsell .upsell-title,
.cart-drawer-upsell .section-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--elypro-muted-light);
    margin-bottom: 10px;
}

/* Cart checkout button */
.cart-drawer .btn-primary,
.cart-footer .btn-primary {
    background-color: var(--elypro-black) !important;
    border-color: var(--elypro-black) !important;
    color: var(--elypro-white) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 16px;
    border-radius: 2px !important;
}

/* ── REVIEWS / TESTIMONIALS ── */
.testimonial-card,
.review-card,
.section-reviews .card {
    background-color: var(--elypro-warm) !important;
    border: 1px solid var(--elypro-border-light) !important;
    border-radius: 2px !important;
}

.testimonial-text,
.review-body,
.review-text {
    font-family: var(--elypro-serif) !important;
    font-style: italic;
    font-size: 14px;
    color: var(--elypro-black);
    line-height: 1.7;
}

.review-author,
.testimonial-author {
    font-size: 11px;
    color: var(--elypro-muted-light);
}

.review-stars,
.star-rating {
    color: #b8900a !important;
    letter-spacing: 1px;
}

/* Verified badge */
.verified-badge,
.badge-verified {
    background-color: var(--elypro-green-bg) !important;
    color: var(--elypro-green) !important;
    border: 1px solid var(--elypro-green-border) !important;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── PRODUCT PAGE ── */
/* Trust badges below ATC */
.trust-badges,
.product-trust-bar {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--elypro-border-light);
    border-bottom: 1px solid var(--elypro-border-light);
    margin: 12px 0;
}

.trust-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    text-align: center;
}

.trust-badge-item .label {
    font-size: 10px;
    font-weight: 500;
    color: var(--elypro-muted-light);
    line-height: 1.3;
}

/* Product title on product page */
.product-title,
.product__title,
h1.product-name {
    font-family: var(--elypro-display) !important;
    letter-spacing: 0.03em;
    line-height: 0.95;
    color: var(--elypro-black);
}

/* Product price */
.product-price,
.price__regular,
.price--large {
    font-family: var(--elypro-display) !important;
    font-size: 32px;
    letter-spacing: 0.03em;
    color: var(--elypro-black);
}

/* Quantity discount tiers */
.volume-pricing,
.quantity-breaks,
.discount-tiers {
    background-color: var(--elypro-white);
    border: 1px solid var(--elypro-border-light);
    border-radius: 2px;
    overflow: hidden;
}

.volume-pricing .tier,
.discount-tiers .tier-row {
    border-bottom: 1px solid var(--elypro-border-light);
    padding: 11px 14px;
    transition: background 0.15s;
}

.volume-pricing .tier:hover,
.volume-pricing .tier.active {
    background-color: var(--elypro-warm);
}

.save-badge,
.badge-save {
    background-color: #1a4a2a !important;
    color: #7fdfb0 !important;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 20px;
}

/* ── FAQ ACCORDION ── */
.accordion-button {
    font-size: 13px;
    font-weight: 500;
    color: var(--elypro-black) !important;
    background-color: var(--elypro-white) !important;
    padding: 15px 18px;
    border-radius: 0 !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--elypro-cream) !important;
    color: var(--elypro-black) !important;
    box-shadow: none !important;
}

.accordion-body {
    font-size: 13px;
    color: var(--elypro-muted-light);
    line-height: 1.7;
    background-color: var(--elypro-cream);
    padding: 0 18px 14px;
}

/* ── NEWSLETTER / EMAIL SECTION ── */
.newsletter-section,
.section-newsletter {
    background-color: var(--elypro-black) !important;
}

.newsletter-section h2,
.newsletter-section h3,
.section-newsletter .section-title {
    font-family: var(--elypro-display) !important;
    color: var(--elypro-white) !important;
    letter-spacing: 0.03em;
    line-height: 0.92;
}

.newsletter-section p,
.section-newsletter .section-sub {
    color: var(--elypro-muted-dark);
    font-weight: 300;
    line-height: 1.85;
}

/* Email form card (warm on dark) */
.newsletter-form-card,
.email-signup-card {
    background-color: var(--elypro-cream) !important;
    padding: 28px;
}

.newsletter-input,
.email-signup input[type="email"],
.form-control[type="email"] {
    background-color: var(--elypro-white) !important;
    border: 1px solid var(--elypro-border-light) !important;
    border-radius: 2px !important;
    font-size: 13px;
    color: var(--elypro-black);
    padding: 13px 16px;
}

.newsletter-btn,
.email-signup .btn-primary {
    background-color: var(--elypro-black) !important;
    border-color: var(--elypro-black) !important;
    color: var(--elypro-white) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 2px !important;
}

/* ── FOOTER ── */
footer,
.footer-section,
#shopify-section-footer {
    background-color: var(--elypro-black) !important;
    #b0ada8
}

footer a,
.footer-section a {
    color: #b0ada8 !important;
    font-size: 12px;
    text-decoration: none;
    font-weight: 300;
    transition: color 0.2s;
}

footer a:hover,
.footer-section a:hover {
    color: var(--elypro-muted-dark) !important;
}

footer h4, footer h5, footer h6,
.footer-section .footer-heading {
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #b0ada8 !important;
    margin-bottom: 14px;
}

.footer-logo,
footer .brand-logo {
    font-family: var(--elypro-display) !important;
    font-size: 22px;
    letter-spacing: 0.14em;
    color: var(--elypro-white) !important;
    margin-bottom: 12px;
}

footer hr,
.footer-divider {
    border-color: #1a1a18 !important;
}

footer .copyright,
footer .footer-copy {
    font-size: 11px;
    color: #8a8784 !important;
}

/* ── PRODUCT BADGES ── */
.badge-new,
span[class*="badge"][class*="new"] {
    background-color: #1a3a2a !important;
    color: #7fdfb0 !important;
    border: 1px solid #2a4a3a !important;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-patent,
.badge-patented {
    background-color: var(--elypro-gold) !important;
    color: var(--elypro-black) !important;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-trending {
    background-color: #1a2a4a !important;
    color: #9bc4f5 !important;
    border: 1px solid #2a3a5a !important;
    font-size: 9px;
    font-weight: 500;
}
/* ── Patent Bar text color fix ── */
.text-white.bg-gradient p,
.text-white.bg-gradient span,
.text-white.bg-gradient {
  color: #0a0a08 !important;
  font-weight: 700 !important;
}

/* ── PRESS / SOCIAL PROOF BAR ── */
.press-bar,
.as-seen-in {
    background-color: var(--elypro-cream);
    border-top: 1px solid var(--elypro-border-light);
    border-bottom: 1px solid var(--elypro-border-light);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.press-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--elypro-muted-light);
    white-space: nowrap;
}

.press-logo {
    font-size: 13px;
    color: #b0aa9f;
    font-family: var(--elypro-serif);
    font-weight: 700;
}

/* ── TIKTOK LANDING PAGES ── */
/* Applied when using the tiktok-landing template */
.tiktok-landing header nav,
.tiktok-landing .nav-links,
.tiktok-landing footer .footer-columns {
    display: none !important;
}

.tiktok-landing .announcement-bar {
    font-size: 11px;
    text-align: center;
}

/* ── UTILITY CLASSES ── */
.bg-elypro-black { background-color: var(--elypro-black) !important; }
.bg-elypro-cream { background-color: var(--elypro-cream) !important; }
.bg-elypro-warm { background-color: var(--elypro-warm) !important; }
.bg-elypro-gold { background-color: var(--elypro-gold) !important; }
.text-elypro-gold { color: var(--elypro-gold) !important; }
.text-elypro-white { color: var(--elypro-white) !important; }
.text-elypro-muted { color: var(--elypro-muted-dark) !important; }
.font-display { font-family: var(--elypro-display) !important; letter-spacing: 0.04em; }
.font-serif { font-family: var(--elypro-serif) !important; }
.border-elypro { border: 0.5px solid var(--elypro-border-light) !important; }
.border-radius-sharp { border-radius: 2px !important; }

/* ── MOBILE OPTIMISATIONS ── */
@media (max-width: 768px) {
    .product-price,
    .price--large {
        font-size: 26px;
    }
    
    .sticky-atc,
    .sticky-product-bar {
        padding: 10px 16px;
    }
    
    .cart-goal {
        padding: 10px 14px;
    }
    
    .section-title,
    .section-heading {
        font-size: clamp(24px, 8vw, 42px);
    }
}

/* ── ANIMATIONS ── */
@keyframes elypro-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: elypro-fade-up 0.5s ease both;
}

/* Pulse for social proof dots */
@keyframes elypro-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    animation: elypro-pulse 2s infinite;
    display: inline-block;
}

/* ── QUANTITY BREAKS — radio button visibility fix ── */
.product-qty-break .form-check-input {
    border: 2px solid #a0a098 !important;
    background-color: #fafaf8 !important;
    width: 18px !important;
    height: 18px !important;
}

.product-qty-break .form-check-input:checked {
    border-color: #0a0a08 !important;
    background-color: #0a0a08 !important;
}

.product-qty-break .form-check-label {
    border: 1px solid #ddd8d0 !important;
}
/* Step by step — fix mobile text truncation */
.step-by-step .nav.nav-underline {
  flex-wrap: wrap !important;
  overflow: visible !important;
}

.step-by-step .nav-item {
  flex: 1 1 auto !important;
  max-width: 33.333%;
}

.step-by-step .nav-link {
  white-space: normal;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.5rem 0.25rem;
}

.step-by-step .nav-link span {
  display: block;
  white-space: normal;
}
/* Judge.me star rating badge spacing */
.jdgm-widget.jdgm-preview-badge {
    margin-top: 6px !important;
    margin-bottom: 14px !important;
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.jdgm-preview-badge * {
    padding-left: 0 !important;
}

.jdgm-preview-badge .jdgm-star {
    color: #c8a84e !important;
}

.jdgm-preview-badge .jdgm-numreviews {
    font-size: 12px;
    color: #6a6764;
}
/* ATC button — taller */
.btn-atc.btn.btn-primary {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    font-size: 15px !important;
    letter-spacing: 0.1em !important;
}
/* ── ELYPRO Text Pill Color Swatches ── */
ul.color-swatches-text {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
  list-style: none !important;
}

ul.color-swatches-text li {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

ul.color-swatches-text label {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 22px !important;
  border: 1.5px solid #1a1a18 !important;
  border-radius: 40px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a1a18 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: 70px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.15s ease !important;
}

ul.color-swatches-text label:hover {
  background: #f4f1eb !important;
}

ul.color-swatches-text input:checked + label {
  background: #0a0a08 !important;
  border-color: #0a0a08 !important;
  color: #ffffff !important;
}
/* ── Sticky ATC alignment fix ── */
#sticky-atc .btn-atc {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

#sticky-atc .d-flex {
  align-items: center !important;
}

#sticky-atc input[type="number"],
#sticky-atc .quantity-input {
  height: 48px !important;
}
/* ── Pill swatches fit one line on mobile ── */
@media (max-width: 767px) {
  ul.color-swatches-text {
    gap: 6px !important;
  }

  ul.color-swatches-text label {
    padding: 6px 14px !important;
    font-size: 12px !important;
    min-width: unset !important;
  }
}
/* ── Quantity + ATC button alignment fix ── */
.product-buy-buttons-inner {
  display: flex !important;
  align-items: center !important;
}

/* :not(.d-none) so this never defeats the theme's own hide-on-mobile class —
   that override was why the quantity box still appeared in the phone sticky bar. */
.quantity-wrapper:not(.d-none) {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
}

.quantity-wrapper .form-control {
  height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.quantity-wrapper .btn {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.splide__slide .color-swatches.list-unstyled {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.product-item .color-swatches button img.swatch-custom-image {
  padding: 0 !important;
  border: 2px solid #aaa !important;
}
/* === ELYPRO — ONE CORNER RADIUS FOR EVERY BUTTON =========================
   Each button class above set its own 2px !important, which is why corners
   drifted (2px / 4px / 0 / 999px) across the site. This settles it in one
   place. Cards, inputs and panels are deliberately NOT included. */
.btn,
.btn-primary, .btn-secondary, .btn-gold, .btn-accent,
.btn-dark, .btn-light,
.btn-outline-light, .btn-outline-dark,
.btn-outline-primary, .btn-outline-secondary,
.btn-atc, .btn.btn-atc,
.product-item .card .btn-atc, .product-item .btn-primary,
.sticky-atc .btn-primary, .sticky-product-bar .btn-primary,
.cart-footer .btn-primary,
.newsletter-btn, .email-signup .btn-primary,
.shopify-challenge__button {
  border-radius: 10px !important;
}

/* A button welded to a field (newsletter signup, search) keeps its inner
   edge square so the pair still reads as one control. */
.input-group > .form-control:first-child {
  border-radius: 10px 0 0 10px !important;
}
.input-group > .btn:last-child {
  border-radius: 0 10px 10px 0 !important;
}

/* === ELYPRO — SECTION TONE ALTERNATION ===================================
   The homepage had only TWO tones — cream #F4F1EB and near-black #0A0A08 —
   so whenever two neighbouring sections shared one they read as a single
   block. Fixing it locally just moved the seam somewhere else. A third tone
   settles it. Down the page:

     press band ......... near-black
     OUR INNOVATIONS .... cream
     WHY ELYPRO ......... near-black
     FEATURED ........... cream
     WHAT CUSTOMERS SAY . warm taupe   <- this rule
     footer ............. near-black

   Rule for anything added later: never let two touching sections share a
   tone. Use .ely-tone-warm for the third one. */
.ely-tone-warm,
#shopify-section-template--21068985794698__760bf039-c25b-482c-8e29-635514882d15 > .testimonials,
#shopify-section-template--21068985794698__760bf039-c25b-482c-8e29-635514882d15 > div {
  background-color: #E4DDCB !important;
}


/* === ELYPRO — STICKY ADD TO CART ON PHONES ===============================
   The right half (quantity + button) was locked at 260px and would not
   shrink, leaving 71px for a 50px thumbnail plus name, rating and price.
   The title ended up 9px wide and the bar stood 135px tall. Fix: drop the
   duplicated rating, let the button shrink, and give the text real room. */
@media (max-width: 991.98px) {
  #sticky-atc .ms-4.flex-shrink-0 {
    flex-shrink: 1 !important;
    margin-left: 12px !important;
    min-width: 0;
  }
  #sticky-atc .btn-atc {
    min-width: 128px;
    white-space: nowrap;
  }
  /* The rating already appears twice higher up the page; in here it was
     forcing the left column four rows deep. */
  #sticky-atc .jdgm-widget,
  #sticky-atc .shopify-product-reviews-badge,
  #sticky-atc .loox-rating,
  #sticky-atc .wc_product_review_badge {
    display: none !important;
  }
  #sticky-atc .product-img {
    width: 44px !important;
    height: 44px !important;
    margin-right: 12px !important;
  }
  #sticky-atc .product-title {
    margin-bottom: 2px !important;
    font-size: 13px;
  }
  #sticky-atc .product-price {
    font-size: 13px;
  }
}

/* ===== BUY BOX: rating and press mention share one line =====
   The star rating is drawn by the Judge.me app block, so text cannot be put
   inside it from the theme. Instead the small press line that follows it is
   pulled up onto the same line. Scoped by font size (fs-1) so the benefit
   sentence below — which is fs-2 — is never caught by this rule. */
@supports selector(:has(*)) {
  .shopify-product-form > .shopify-app-block:has(.jdgm-preview-badge){
    display:inline-block; vertical-align:baseline; margin-bottom:0 !important;
  }
  .shopify-product-form > .shopify-app-block:has(.jdgm-preview-badge) + .product-block-text:has(> .description.fs-1){
    display:inline-block; vertical-align:baseline; margin:0 0 0 -1.3rem !important;
  }
  .shopify-product-form > .shopify-app-block:has(.jdgm-preview-badge) + .product-block-text:has(> .description.fs-1) .description{
    display:inline;
  }
  .shopify-product-form > .shopify-app-block:has(.jdgm-preview-badge) + .product-block-text:has(> .description.fs-1) .description p{
    display:inline; margin:0 !important;
  }
  .shopify-product-form > .shopify-app-block:has(.jdgm-preview-badge) + .product-block-text:has(> .description.fs-1) .description p::before{
    content:"\00b7"; margin-right:.5em;
  }
}

/* ===== REVIEW STARS — one gold for every star on the site =====
   Slightly richer than the brand gold (#C8A84E) so the rating reads first,
   without turning orange. Judge.me draws these, so it takes a rule. */
.jdgm-star, .jdgm-star.jdgm--on, .jdgm-star.jdgm--half, .jdgm-star.jdgm--off{
  color:#D8A32B !important;
}

/* ===== PRODUCT PAGE DRAWERS (Details / Shipping / 30-Day Returns) =====
   Closed, each drawer is a pale pill. Open, the body used to fall back to the
   page cream with grey text, so the panel vanished and the copy read faint.
   The open panel now keeps the pill's shell and a readable text colour. */
.product-block-accordion .accordion-item{ margin-bottom:8px; overflow:hidden; border-radius:20px; }
.product-block-accordion .accordion-button:not(.collapsed){
  background:#FAFAF8 !important;
  border-radius:20px 20px 0 0 !important;
  box-shadow:none !important;
}
.product-block-accordion .accordion-collapse{ background:#FAFAF8; }
.product-block-accordion .accordion-body{
  background:#FAFAF8 !important;
  color:#3D3D37 !important;
  border-top:1px solid #ECE7DB;
  border-radius:0 0 20px 20px;
  padding:14px 20px 18px !important;
}
.product-block-accordion .accordion-body p,
.product-block-accordion .accordion-body li,
.product-block-accordion .accordion-body span{ color:#3D3D37; }
.product-block-accordion .accordion-body strong{ color:#1A1A18; }
.product-block-accordion .accordion-body a{ color:#8A7326; text-decoration:underline; text-underline-offset:2px; }
.product-block-accordion .accordion-body a:hover{ color:#6d5b1d; }
/* the drawer icons ship as white-filled art, invisible on a pale pill */
.product-block-accordion .accordion-button .icon-wrapper svg,
.product-block-accordion .accordion-button svg:not(.bi-chevron-down){ color:#1A1A18; }

/* ===== SPEC SHEET inside the Details drawer =====
   Label left, value right, hairline between rows — specs get scanned, not read.
   Stacks to one column on a phone. */
.ely-spec p{
  display:grid; grid-template-columns:148px 1fr; gap:16px;
  margin:0; padding:11px 0; border-bottom:1px solid #EDE8DC; align-items:baseline;
}
.ely-spec p:last-child{ border-bottom:none; }
.ely-spec p strong{
  font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase;
  color:#8A8478 !important; font-weight:700; line-height:1.75;
}
.ely-spec p span{ font-size:14px; line-height:1.55; color:#1A1A18 !important; }
.ely-spec-more{
  margin:15px 0 0 !important; padding-top:13px; border-top:1px solid #EDE8DC; font-size:12.5px;
}
.ely-spec-more strong{
  display:block; font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase;
  color:#8A8478 !important; margin-bottom:5px;
}
@media (max-width:575.98px){
  .ely-spec p{ grid-template-columns:1fr; gap:3px; padding:10px 0; }
  .ely-spec p strong{ line-height:1.4; }
}

/* ===== CONTRAST FIXES (WCAG AA, 4.5:1 for normal text) =====
   Measured on the live site with axe-core, then each replacement colour was
   checked against all three page tones before use.

   Brand gold #C8A84E as TEXT measured 2.03:1 on cream and 2.29:1 on white -
   less than half the required 4.5:1. It stays exactly as it is on buttons,
   borders, badges and large display type; only small text switches to the
   darker gold below, which measures 5.72:1 on cream, 6.44:1 on white and
   4.76:1 on taupe.

   Judge.me's grey #7B7B7B measured 3.75:1 on cream. #5F5F5F measures
   5.66 / 6.39 / 4.71 on the same three tones. */

:root{
  --ely-gold-text:#6F5D1C;   /* gold, dark enough to read as body text */
  --ely-grey-text:#5F5F5F;   /* replaces the reviews app's pale grey */
}

/* breadcrumbs */
.breadcrumb a,
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item.active{ color:var(--ely-gold-text) !important; }

/* product-title links in carousels and cards, and the small gold captions */
.btn-link,
a.btn-link,
small.text-primary,
.text-primary:not(.btn):not(.badge){ color:var(--ely-gold-text) !important; }

/* NOTE: an earlier version of this block tried to "protect" filled buttons with
   .btn.btn-primary{color:inherit}. Two classes outrank the single .btn-primary
   rule above, so it replaced the white button label with the inherited body
   colour and the Add To Cart button became black text on a black background.
   The protection was never needed - the gold rules above only match .btn-link
   and .text-primary, which a filled primary button does not carry. Removed.
   Only the badge case needs saying, and it is said positively. */
.badge.bg-primary, .badge.bg-primary .text-primary{ color:#FFFFFF !important; }

/* reviews app secondary text */
.jdgm-rev__timestamp,
.jdgm-histogram__frequency,
.jdgm-gallery-title,
.jdgm-rev__author-with-verified-badge,
.jdgm-rev__buyer-badge{ color:var(--ely-grey-text) !important; }

/* Links inside written content - article bodies, page bodies, product
   descriptions - were the brand gold at 2.03:1 on cream. Same darker gold as
   above (5.72:1 on cream, 6.44:1 on white). Buttons that happen to sit inside
   this content keep their own colours. */
.article-content a:not(.btn):not([class*="btn-"]),
.rte a:not(.btn):not([class*="btn-"]),
.description.rte a:not(.btn):not([class*="btn-"]),
.ely-spec-more a{
  color:var(--ely-gold-text) !important;
}

/* The comparison table's column headers are gold on near-black at 3.94:1.
   A lighter gold reads correctly against a dark background - the opposite
   direction to the fixes above, for the same reason. */
.table thead th.text-secondary,
th.text-secondary,
.bg-dark .text-secondary{ color:#E0C478 !important; }

/* Last group of measured contrast failures.
   Outline buttons and tag links were the brand gold on a light background:
   2.03:1 on cream, 2.19:1 on near-white. Border and label move together so
   the button still reads as one object. Filled buttons are not touched. */
.btn-outline-primary,
.btn-share,
.article-tags a{
  color:var(--ely-gold-text) !important;
  border-color:var(--ely-gold-text) !important;
}
.btn-outline-primary:hover,
.btn-share:hover{
  background-color:var(--ely-gold-text) !important;
  border-color:var(--ely-gold-text) !important;
  color:#FFFFFF !important;
}

/* Reviews app: the medal score was a pale blue at 3.01:1, the transparency
   badge the same pale grey as the timestamps. */
.jdgm-medal__value{ color:#2B5FA0 !important; }
.jdgm-rev__transparency-badge{ color:var(--ely-grey-text) !important; }

/* Press page: the small "FEATURES" labels were #8A8272 at 10px, 3.81:1. */
.description.rte div[style*="letter-spac"],
.description.rte .text-muted{ color:var(--ely-grey-text) !important; }

/* The previous/next article thumbnails are fixed to the screen edges and peek
   in by half, sliding fully into view on hover. There is no hover on a phone,
   so on mobile they just sit there permanently cut in half, overlapping the
   article and the footer. Desktop keeps the effect; below the theme's 992px
   breakpoint they are hidden. The prev/next links are also in the article
   footer, so nothing is lost. */
@media (max-width: 991.98px){
  #article-prev-next-prev,
  #article-prev-next-next{ display:none !important; }
}

/* Blog index: the article card titles and their links were the brand gold on
   cream, 2.03:1 at 16px and 20px. Same darker gold. */
.article-item a:not(.btn),
.article-item .card-title,
.article-item h2 a,
.article-item h3 a{ color:var(--ely-gold-text) !important; }

/* ===== CART DRAWER: the thing you bought outranks the suggestion =====
   Measured on the live drawer: the cart item's image rendered at 112px and
   the recommended product's at 145px, so the suggestion was 30% larger than
   the purchase. Recommendations are capped below the cart item's size. */
#offcanvas-cart #cart-upsell .product-item-img,
#offcanvas-cart #cart-upsell-list .product-item-img{
  max-width:84px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#offcanvas-cart #cart-upsell-list .product-item{ padding-left:8px !important; padding-right:8px !important; }
#offcanvas-cart #cart-upsell-list .product-item .title,
#offcanvas-cart #cart-upsell-list .product-item h3,
#offcanvas-cart #cart-upsell-list .product-item h4{ font-size:11.5px !important; line-height:1.3 !important; }

/* The recommended product's Add button was 145x61px in a drawer where every
   other control is 33px tall and the product image beside it is 84px wide -
   the suggestion's button was the largest object in the panel. Sized to sit
   under its own image, still comfortably tappable. */
#offcanvas-cart #cart-upsell .btn,
#offcanvas-cart #cart-upsell-list .btn{
  max-width:110px !important;
  padding-top:9px !important;
  padding-bottom:9px !important;
  font-size:11px !important;
  letter-spacing:.8px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* The drawer toggles (Details / Shipping / 30-Day Returns) are a gold disc
   drawn as the button's ::after. At 24px in a 54px row with 13px text it
   read louder than the label beside it. The whole row stays clickable, so
   this is purely visual. */
.product-block-accordion .accordion-button::after{
  width:19px !important;
  height:19px !important;
  background-size:9px 9px !important;
}

/* ============================================================
   STEPPED CHECKOUT on the cart page — one page that unfolds.
   Tokens: cream #F4F1EB · taupe #E4DDCB · near-black #0A0A08
           brand gold #C8A84E (borders/fills) · text gold #6F5D1C (gold text)
   Contrast measured: #6F5D1C on white 6.44 · #6B6B62 on white 5.39
                      #A0392F on white 6.77 · white on #0A0A08 19.9
   ============================================================ */
#ely-sc{ margin-top:.25rem; }

#ely-sc .ely-sc-wallets{ display:grid; gap:.5rem; }
#ely-sc .ely-sc-wallets [role="button"],
#ely-sc .ely-sc-wallets button{ border-radius:10px !important; }
#ely-sc .ely-sc-or{
  display:flex; align-items:center; gap:.65rem; margin:.9rem 0 1rem; }
#ely-sc .ely-sc-or:before, #ely-sc .ely-sc-or:after{
  content:""; flex:1 1 auto; height:1px; background:#E4DDCB; }
#ely-sc .ely-sc-or span{
  font-family:"DM Sans",sans-serif; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#6B6B62; }

/* a folded-away answer */
#ely-sc .ely-sc-chip{
  display:flex; align-items:center; gap:.6rem;
  background:#F4F1EB; border:1px solid #E4DDCB; border-radius:10px;
  padding:.5rem .75rem; margin-bottom:.5rem; }
#ely-sc .ely-sc-chip-label{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#6B6B62; flex:0 0 auto; }
#ely-sc .ely-sc-chip-value{
  font-size:13px; color:#1A1A18; flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ely-sc .ely-sc-edit{
  flex:0 0 auto; background:none; border:0; padding:0;
  font-size:12px; color:#6F5D1C; text-decoration:underline; cursor:pointer; }
#ely-sc .ely-sc-edit:hover{ color:#0A0A08; }

/* the question showing now */
#ely-sc .ely-sc-step{
  border:1.5px solid #C8A84E; border-radius:10px;
  padding:.9rem 1rem 1rem; margin-bottom:.75rem; background:#FFFFFF; }
#ely-sc .ely-sc-q{
  font-family:"Bebas Neue",sans-serif; font-size:19px; line-height:1.15;
  letter-spacing:.02em; text-transform:uppercase; color:#1A1A18;
  margin:0 0 .75rem; }
#ely-sc .ely-sc-lab{
  display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#6B6B62; margin:.65rem 0 .3rem; }
#ely-sc .ely-sc-lab:first-of-type{ margin-top:0; }
#ely-sc .ely-sc-opt{ letter-spacing:.04em; text-transform:none; font-size:11px; }
#ely-sc .ely-sc-in{
  width:100%; box-sizing:border-box; height:46px;
  border:1px solid #D9D2C2; border-radius:10px; background:#FFFFFF;
  padding:0 .8rem; font-family:"DM Sans",sans-serif; font-size:16px; color:#1A1A18; }
#ely-sc select.ely-sc-in{ padding-right:2rem; }
#ely-sc .ely-sc-in:focus{
  outline:none; border-color:#0A0A08; box-shadow:0 0 0 3px rgba(200,168,78,.28); }
#ely-sc .ely-sc-row{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
#ely-sc .ely-sc-hint{ font-size:12px; color:#6B6B62; margin:.35rem 0 0; }
#ely-sc .ely-sc-err{ font-size:12.5px; color:#A0392F; margin:.5rem 0 0; }

#ely-sc .ely-sc-next{
  display:block; width:100%; margin-top:.9rem; min-height:46px;
  background:#0A0A08; color:#FFFFFF; border:0; border-radius:10px;
  font-family:"DM Sans",sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; cursor:pointer; }
#ely-sc .ely-sc-next:hover{ background:#2B2B26; }
#ely-sc .ely-sc-skip{
  display:block; width:100%; margin-top:.6rem; background:none; border:0;
  font-size:12px; color:#6F5D1C; text-decoration:underline; cursor:pointer; }

#ely-sc .ely-sc-pay{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; min-height:54px; margin-top:.25rem;
  background:#0A0A08; color:#FFFFFF; border:0; border-radius:10px;
  font-family:"DM Sans",sans-serif; font-size:15px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; cursor:pointer; }
#ely-sc .ely-sc-pay:hover:not(:disabled){ background:#2B2B26; }
#ely-sc .ely-sc-pay:disabled{
  background:#E4DDCB; color:#6B6B62; cursor:default; }
#ely-sc .ely-sc-foot{
  font-size:12px; color:#6B6B62; text-align:center; margin:.6rem 0 0; }

@media (max-width:575.98px){
  #ely-sc .ely-sc-row{ grid-template-columns:1fr; }
}

/* cart page: recommendations sit in the wide left column — keep the cards
   a sensible size whether there is one of them or three */
#cart #cart-upsell-list{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-start; }
#cart #cart-upsell-list .product-item{
  flex:0 0 190px; max-width:190px; padding-left:0 !important; padding-right:0 !important; }
#cart #cart-upsell-list .product-item-img{ max-width:150px; margin:0 auto; }
#cart #cart-upsell-list .btn{ max-width:150px; margin-left:auto; margin-right:auto; }
#cart #cart-upsell-list .form-select, #cart #cart-upsell-list select{
  max-width:150px; margin-left:auto; margin-right:auto; }

/* ---- stepped checkout: the totals block ------------------------------- */
#ely-sc .ely-sc-totals{
  border-top:1px solid #E4DDCB; margin:.25rem 0 .9rem; padding-top:.8rem; }
#ely-sc .ely-sc-tline{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; padding:.28rem 0; font-size:13.5px; color:#3D3D37; }
#ely-sc .ely-sc-tline b{ color:#1A1A18; font-weight:600; text-align:right; }
#ely-sc .ely-sc-tline b[data-ship].is-free{ color:#1A5C3A; }
#ely-sc .ely-sc-tline b[data-tax]{ font-weight:400; color:#6B6B62; font-size:12.5px; }
#ely-sc .ely-sc-ttotal{
  border-top:1px solid #E4DDCB; margin-top:.4rem; padding-top:.6rem;
  font-size:16px; }
#ely-sc .ely-sc-ttotal span{ color:#1A1A18; font-weight:600; }
#ely-sc .ely-sc-ttotal b{ font-size:19px; }

/* ---- cart page: "your cart" vs "things you could add" ----------------- */
#cart-left-extras{
  margin-top:2.25rem; padding-top:1.75rem; border-top:2px solid #E4DDCB; }
#cart #cart-upsell{
  background:#FFFFFF; border:1px solid #E4DDCB; border-radius:10px;
  padding:1.1rem 1.25rem 1.25rem; margin-top:1.5rem; }
#cart #cart-upsell-title{
  font-size:10px !important; letter-spacing:.14em; text-transform:uppercase;
  color:#6B6B62; margin-bottom:1rem !important; }
#cart #cart-upsell-list{
  display:flex; flex-wrap:wrap; gap:1.25rem; justify-content:flex-start; }
#cart #cart-upsell-list .product-item{
  flex:0 0 148px; max-width:148px;
  padding-left:0 !important; padding-right:0 !important; }
#cart #cart-upsell-list .product-item-img{ max-width:112px; margin:0 auto; }
#cart #cart-upsell-list .product-item-title,
#cart #cart-upsell-list h3, #cart #cart-upsell-list h4{
  font-size:11.5px !important; line-height:1.3 !important; }
#cart #cart-upsell-list .btn{
  max-width:112px; margin-left:auto; margin-right:auto;
  padding-top:.45rem !important; padding-bottom:.45rem !important;
  font-size:11px !important; letter-spacing:.08em; }
#cart #cart-upsell-list .form-select, #cart #cart-upsell-list select{
  max-width:112px; margin-left:auto; margin-right:auto; font-size:12px; }

/* ---- cart drawer: same separation between cart and recommendations ---- */
#offcanvas-cart #cart-upsell{
  margin-top:1.25rem; padding-top:1rem; border-top:2px solid #E4DDCB; }
#offcanvas-cart #cart-upsell-title{
  font-size:10px !important; letter-spacing:.14em; text-transform:uppercase;
  color:#6B6B62; }

/* ---- shipping protection: the link was gold on green, unreadable ------ */
#cart-shipping-protection a,
#cart-shipping-protection .description a,
#cart-shipping-protection .rte a{
  color:#FFFFFF !important; text-decoration:underline !important; }
#cart-shipping-protection a:hover{ color:#F4F1EB !important; }

/* recommendation cards: variant pickers made the buttons sit at different
   heights — give every card the same shape and pin the button to the bottom */
#cart #cart-upsell-list .product-item{
  display:flex; flex-direction:column; }
#cart #cart-upsell-list .product-item .btn{ margin-top:auto; }
#cart #cart-upsell-list .product-item form,
#cart #cart-upsell-list .product-item > div:last-child{
  display:flex; flex-direction:column; flex:1 1 auto; }

/* cart drawer: the recommendations sit in their own cream band so the panel
   reads as "your cart" then "things you could add", and the row scrolls
   sideways instead of being cut off at the edge */
#offcanvas-cart #cart-upsell{
  background:#F4F1EB; border:1px solid #E4DDCB; border-radius:10px;
  padding:.85rem .8rem 1rem; margin-top:1.4rem; border-top-width:1px; }
#offcanvas-cart #cart-upsell-title{ margin-bottom:.75rem !important; }
#offcanvas-cart #cart-upsell-list{
  display:flex; flex-wrap:nowrap; overflow-x:auto; gap:.55rem;
  scroll-snap-type:x mandatory; padding-bottom:.4rem;
  scrollbar-width:thin; }
#offcanvas-cart #cart-upsell-list .product-item{
  flex:0 0 106px; max-width:106px; scroll-snap-align:start;
  display:flex; flex-direction:column;
  padding-left:4px !important; padding-right:4px !important; }
#offcanvas-cart #cart-upsell-list .product-item-img{ max-width:82px !important; }
#offcanvas-cart #cart-upsell-list .product-item .btn{ margin-top:auto; max-width:100% !important; }
#offcanvas-cart #cart-upsell-list .form-select,
#offcanvas-cart #cart-upsell-list select{ font-size:11px; padding:.25rem 1.4rem .25rem .4rem; }

/* drawer recommendation cards are only ~106px wide — the review badge
   overflowed into the next card, so keep the stars, drop the count text,
   and let every card end with its button on the same line */
#offcanvas-cart #cart-upsell-list .jdgm-prev-badge__text,
#offcanvas-cart #cart-upsell-list .jdgm-widget .jdgm-prev-badge__text{ display:none !important; }
#offcanvas-cart #cart-upsell-list .jdgm-prev-badge{
  transform:scale(.8); transform-origin:center; display:block; text-align:center;
  max-width:100%; overflow:hidden; white-space:nowrap; }
#offcanvas-cart #cart-upsell-list .product-item > *:last-child{ margin-top:auto; }
#offcanvas-cart #cart-upsell-list .product-item .product-item-title,
#offcanvas-cart #cart-upsell-list .product-item h3,
#offcanvas-cart #cart-upsell-list .product-item h4{
  min-height:2.6em; display:block; overflow:hidden; }

/* recommendation cards: the colour picker only appears after ADD is pressed,
   so a product with colours is the same height as one without */
#cart-upsell .ely-opt select[name="id"],
#offcanvas-cart .ely-opt select[name="id"]{ display:none !important; }
#cart-upsell .ely-opt.is-open select[name="id"],
#offcanvas-cart .ely-opt.is-open select[name="id"]{ display:block !important; }

/* ============================================================
   FINAL PASS on the recommendation panels (supersedes the drawer
   rules above). Two problems this fixes:
   1. The Add buttons were inline-block, so "margin:auto" never
      centred them — every button hugged the left edge of its card,
      which showed worst on the first card against the panel border.
   2. In the drawer the panel only had a thin border, so it ran into
      "Add a note to your order". It is now a full-width tinted band
      with real space above and below.
   ============================================================ */
#cart #cart-upsell-list .btn,
#offcanvas-cart #cart-upsell-list .btn{
  display:block !important;
  margin-left:auto !important; margin-right:auto !important; }
#cart #cart-upsell-list .form-select,
#cart #cart-upsell-list select,
#offcanvas-cart #cart-upsell-list .form-select,
#offcanvas-cart #cart-upsell-list select{
  display:block; margin-left:auto !important; margin-right:auto !important; }

/* --- the drawer band --- */
#offcanvas-cart #cart-upsell{
  background:#E4DDCB !important;
  border:0 !important;
  border-top:1px solid #D4CAB2 !important;
  border-bottom:1px solid #D4CAB2 !important;
  border-radius:0 !important;
  margin:1.75rem -16px 1.75rem !important;
  padding:.9rem 16px 1rem !important; }
#offcanvas-cart #cart-upsell-title{
  font-size:10px !important; letter-spacing:.14em !important;
  text-transform:uppercase; color:#5F5F5F !important;
  margin:0 0 .7rem !important; }

/* --- condensed drawer cards --- */
#offcanvas-cart #cart-upsell-list{
  display:flex !important; flex-wrap:nowrap !important;
  overflow-x:auto; gap:.5rem !important; padding-bottom:.3rem;
  scroll-snap-type:x mandatory; }
#offcanvas-cart #cart-upsell-list .product-item{
  flex:0 0 96px !important; max-width:96px !important;
  padding:0 !important; scroll-snap-align:start;
  display:flex; flex-direction:column; }
#offcanvas-cart #cart-upsell .product-item-img,
#offcanvas-cart #cart-upsell-list .product-item-img{
  max-width:64px !important; margin:0 auto .4rem !important; }
#offcanvas-cart #cart-upsell-list .product-item-title,
#offcanvas-cart #cart-upsell-list .product-item h3,
#offcanvas-cart #cart-upsell-list .product-item h4{
  font-size:10px !important; line-height:1.25 !important;
  margin-bottom:.2rem !important; }
#offcanvas-cart #cart-upsell-list .product-item-price{
  font-size:10.5px !important; margin-bottom:.45rem !important; }
#offcanvas-cart #cart-upsell-list .jdgm-prev-badge{ transform:scale(.7); }
#offcanvas-cart #cart-upsell .btn,
#offcanvas-cart #cart-upsell-list .btn{
  max-width:100% !important; width:100% !important;
  padding-top:5px !important; padding-bottom:5px !important;
  font-size:9.5px !important; letter-spacing:.06em !important; }

/* Drawer recommendations, second pass: the three cards were left-aligned in a
   full-width band, leaving a gap on the right that read as "shifted". They now
   share the width equally. The band also gets more air and a firmer edge so it
   reads as a different zone from the cart above it. */
#offcanvas-cart #cart-upsell{
  margin:2rem -16px 2rem !important;
  padding:1.1rem 16px 1.2rem !important;
  border-top:1px solid #C9BC98 !important;
  border-bottom:1px solid #C9BC98 !important; }
#offcanvas-cart #cart-upsell-title{
  font-family:"Bebas Neue",sans-serif !important;
  font-size:13px !important; letter-spacing:.16em !important;
  color:#3D3D37 !important; text-align:center;
  padding-bottom:.55rem; margin:0 0 .8rem !important;
  border-bottom:1px solid #D4CAB2; }
#offcanvas-cart #cart-upsell-list{
  overflow-x:visible !important; gap:.6rem !important;
  justify-content:space-between !important; }
#offcanvas-cart #cart-upsell-list .product-item{
  flex:1 1 0 !important; max-width:none !important; min-width:0 !important; }

/* Drawer on a phone: tighten the vertical spend so the recommendations and
   the shipping-protection offer are reachable without scrolling past the fold */
#offcanvas-cart #cart-goal{ margin-bottom:1rem !important; }
#offcanvas-cart .offcanvas-cart-alert{
  padding:.55rem .75rem !important; margin-bottom:1rem !important;
  font-size:13px !important; }
@media (max-width:991.98px){
  #offcanvas-cart #cart-upsell{
    margin-top:1.25rem !important; margin-bottom:1.25rem !important;
    padding-top:.9rem !important; padding-bottom:.95rem !important; }
  #offcanvas-cart .product-list .product-item{
    padding-top:.5rem !important; padding-bottom:.5rem !important; }
}

/* ============================================================
   PHONE: the checkout flow leads the cart page.
   On a phone the summary column stacked BELOW the cart items and the
   recommendations, so the first question was three screens down. The
   order on a phone is now: wallets and the email question, then the
   totals and Pay, then what is in the cart, then the extras.
   Desktop is unchanged - form on the right, cart on the left.
   ============================================================ */
@media (max-width: 991.98px){
  #cart-main-row{ display:flex; flex-direction:column; }
  #cart-main-row > .col-lg-5{ order:1; }
  #cart-main-row > .col-lg-7{ order:2; margin-top:1.5rem; }

  /* inside the summary card, the note / shipping / discount links were
     sitting above the wallets and pushing them off the screen */
  #cart-summary .card-body{ display:flex; flex-direction:column; }
  #cart-summary .card-body > form{ order:-2; }
  #cart-summary .card-body > hr{ display:none; }
  #cart-summary .card-body > #cart-note-wrapper,
  #cart-summary .card-body > #cart-shipping-rates-wrapper,
  #cart-summary .card-body > #cart-delivery-calendar-wrapper,
  #cart-summary .card-body > #cart-discount-wrapper{ order:3; }

  /* give the page back the space the heading was taking */
  #cart .text-center.mb-10{ margin-bottom:1.25rem !important; }
  #cart{ padding-top:1.5rem !important; }
  #cart-summary .card-header{ padding-top:.75rem; padding-bottom:.75rem; }
}

/* Phone: buy back the last of the space above the email question */
@media (max-width: 991.98px){
  #cart h1{ font-size:2rem !important; margin-bottom:.4rem !important; }
  #cart .text-center.mb-10{ margin-bottom:.9rem !important; }
  #cart-summary > .card-header{ display:none !important; }
  #cart-summary .card-body{ padding-top:1rem !important; }
}

/* Phone, cart page: the recommendations were stacking two per row at full
   card size, which made that block about three screens tall. Same condensed
   three-across treatment as the drawer. */
@media (max-width: 991.98px){
  #cart #cart-upsell{ padding:.9rem .85rem 1rem !important; }
  #cart #cart-upsell-list{
    flex-wrap:nowrap !important; gap:.5rem !important;
    justify-content:space-between !important; }
  #cart #cart-upsell-list .product-item{
    flex:1 1 0 !important; max-width:none !important; min-width:0 !important; }
  #cart #cart-upsell-list .product-item-img{ max-width:72px !important; }
  #cart #cart-upsell-list .product-item-title,
  #cart #cart-upsell-list h3, #cart #cart-upsell-list h4{
    font-size:10px !important; line-height:1.25 !important; }
  #cart #cart-upsell-list .product-item-price{ font-size:10.5px !important; }
  #cart #cart-upsell-list .jdgm-prev-badge__text{ display:none !important; }
  #cart #cart-upsell-list .jdgm-prev-badge{ transform:scale(.7); }
  #cart #cart-upsell-list .btn{
    max-width:100% !important; width:100% !important;
    padding-top:5px !important; padding-bottom:5px !important;
    font-size:9.5px !important; }
}

/* Free-shipping bar: gold while there is still a gap to close, green once it
   is earned, so the state is readable at a glance and not only in the words.
   Measured: white text is not used on the bar, and #1A5C3A against the cream
   track (#EDE9DF) is 7.4:1, well past the 3:1 floor for a graphical element. */
#cart-goal[data-goal-completed="3"] .progress-bar{
  background-color:#1A5C3A !important;
  background-image:linear-gradient(45deg,
    rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%,
    transparent 75%, transparent) !important; }
#cart-goal[data-goal-completed="3"] .cart-goal-icons li.active > div{
  background-color:#1A5C3A !important; border-color:#1A5C3A !important; }
#cart-goal[data-goal-completed="3"] .rte strong{ color:#1A5C3A !important; }

/* Drawer footer: the payment-icon strip and its caption are gone, so pull the
   checkout button and the subtotal back together */
#offcanvas-cart .offcanvas-footer,
#offcanvas-cart .offcanvas-bottom{ padding-top:.75rem !important; padding-bottom:.75rem !important; }
#offcanvas-cart #offcanvas-cart-subtotal,
#offcanvas-cart .cart-subtotal{ margin-bottom:.5rem !important; }
#offcanvas-cart .btn-checkout{
  padding-top:.85rem !important; padding-bottom:.85rem !important;
  font-size:1.05rem !important; }

/* Free-shipping bar, chosen 24 Sep: terracotta while there is still a gap,
   green once it is earned. Measured against the track behind it (#EDE9DF):
   terracotta #C2622F = 3.4:1 (passes the 3:1 floor for a graphic, and nearly
   double the 1.9:1 the brand gold was managing); green #1A5C3A = 6.6:1. */
#cart-goal:not([data-goal-completed="3"]) .progress-bar{
  background-color:#C2622F !important;
  background-image:linear-gradient(45deg,
    rgba(255,255,255,.20) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.20) 50%, rgba(255,255,255,.20) 75%,
    transparent 75%, transparent) !important; }
#cart-goal:not([data-goal-completed="3"]) .cart-goal-icons li.active > div{
  background-color:#C2622F !important; border-color:#C2622F !important; }

/* The opt-in line under the email box. Chosen 24 Sep: pre-ticked, wording
   "Email me my order updates, and 10% off my next one." Label #3D3D37 on
   white measures 10.9:1. */
#ely-sc .ely-sc-optin{
  display:flex; align-items:flex-start; gap:.55rem;
  margin:.7rem 0 0; cursor:pointer; }
#ely-sc .ely-sc-optin input[type="checkbox"]{
  flex:0 0 auto; width:18px; height:18px; margin:1px 0 0;
  accent-color:#0A0A08; cursor:pointer; }
#ely-sc .ely-sc-optin span{
  font-size:12.5px; line-height:1.4; color:#3D3D37; }