/*! ============================================================================
  etee-custom.css
  Global styles shared across custom sections and third-party app overrides.
  Loaded in theme.liquid after theme.css.
  Do NOT add section-specific styles here — use {% style %} blocks in the
  section file instead.
============================================================================== *//*! ============================================================================
  Product card radius
  Driven by Theme settings > Layout > Cards > Card image radius (--ETEE-CARD-RADIUS)
============================================================================== */.product-grid-item__container{border-radius:var(--ETEE-CARD-RADIUS)}/*! ============================================================================
  Product badge overrides
  Driven by Theme settings > Products > Product badges
  (--ETEE-BADGE-RADIUS, --ETEE-BADGE-TRANSFORM, --ETEE-BADGE-LETTER-SPACING)
============================================================================== */.product__badge{border-radius:var(--ETEE-BADGE-RADIUS);text-transform:var(--ETEE-BADGE-TRANSFORM);letter-spacing:var(--ETEE-BADGE-LETTER-SPACING)}/*! ============================================================================
  Featured sale badge
  Added to .product__badge--sale when a product's theme.featured_sale metafield
  is true (snippets/product-grid-item-variant.liquid). Larger than the standard
  sale badge. Colours: Theme settings > Products > Featured sale badge.
============================================================================== */.product__badge--featured{font-size:calc(var(--font-2) * var(--FONT-ADJUST-ACCENT) * 1.5);background:var(--ETEE-BADGE-FEATURED);color:var(--ETEE-BADGE-FEATURED-TEXT);text-align:center}/*! ============================================================================
  Tariff badge
  Product grid badge shown to the US market on products flagged with the
  custom.has_tariff metafield. Deliberately understated (thin border, no
  uppercase/bold treatment) so it reads as a notice rather than a sale tag.
  Used by snippets/product-grid-item-variant.liquid. Colours: Theme settings >
  Product card > Tariff badge.
============================================================================== */.product__badge--tariff{background:var(--ETEE-BADGE-TARIFF);color:var(--ETEE-BADGE-TARIFF-TEXT);border:1px solid rgba(0,0,0,.12);font-weight:var(--FONT-WEIGHT-ACCENT);text-transform:none;letter-spacing:normal;padding:3px 8px}/*! ============================================================================
  Responsive flex direction utilities
  (Present in Pipeline 7.5, removed in 8.1.1 — used by landing page sections)
============================================================================== */@media only screen and (min-width:768px){.flex-row--medium-up{flex-direction:row}.flex-row-reverse--medium-up{flex-direction:row-reverse}.flex-col--medium-up{flex-direction:column}.flex-col-reverse--medium-up{flex-direction:column-reverse}.justify-start--medium-up{justify-content:flex-start}.text-left--medium-up{text-align:left!important}}/*! ============================================================================
  Border radius utility classes
  (Pipeline defines --radius-sm/md/lg variables but not these utility classes)
============================================================================== */.radius-sm{border-radius:var(--radius-sm)}.radius-md{border-radius:var(--radius-md)}.radius-lg{border-radius:var(--radius-lg)}.radius-pill{border-radius:9999px}.radius-circle{border-radius:50%}.radius-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.radius-t-md{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.radius-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.radius-b-sm{border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.radius-b-md{border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.radius-b-lg{border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.radius-l-sm{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.radius-l-md{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.radius-l-lg{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.radius-r-sm{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.radius-r-md{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.radius-r-lg{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.radius-tl-sm{border-top-left-radius:var(--radius-sm)}.radius-tl-md{border-top-left-radius:var(--radius-md)}.radius-tl-lg{border-top-left-radius:var(--radius-lg)}.radius-tr-sm{border-top-right-radius:var(--radius-sm)}.radius-tr-md{border-top-right-radius:var(--radius-md)}.radius-tr-lg{border-top-right-radius:var(--radius-lg)}.radius-bl-sm{border-bottom-left-radius:var(--radius-sm)}.radius-bl-md{border-bottom-left-radius:var(--radius-md)}.radius-bl-lg{border-bottom-left-radius:var(--radius-lg)}.radius-br-sm{border-bottom-right-radius:var(--radius-sm)}.radius-br-md{border-bottom-right-radius:var(--radius-md)}.radius-br-lg{border-bottom-right-radius:var(--radius-lg)}/*! ============================================================================
  Shadow utilities
============================================================================== */:root{--custom-shadow-color-hsl: 0, 0%, 0%;--custom-light-angle-right: 180deg;--custom-light-distance: 3px}.dark{--custom-shadow-color-hsl: 0, 0%, 100%}.shadow-right-custom{box-shadow:calc(sin(var(--custom-light-angle-right)) * var(--custom-light-distance) * .5) calc(cos(var(--custom-light-angle-right)) * var(--custom-light-distance) * .5) 2px hsl(var(--custom-shadow-color-hsl) / .15),calc(sin(var(--custom-light-angle-right)) * var(--custom-light-distance) * 1) calc(cos(var(--custom-light-angle-right)) * var(--custom-light-distance) * 1) 4px hsl(var(--custom-shadow-color-hsl) / .1)}.shadow-all-custom{box-shadow:0 1px 3px hsl(var(--custom-shadow-color-hsl) / .12),0 1px 2px hsl(var(--custom-shadow-color-hsl) / .24),0 2px 5px hsl(var(--custom-shadow-color-hsl) / .1),0 3px 8px hsl(var(--custom-shadow-color-hsl) / .08)}.shadow-all-md-custom{box-shadow:0 4px 6px hsl(var(--custom-shadow-color-hsl) / .1),0 2px 4px hsl(var(--custom-shadow-color-hsl) / .12),0 5px 10px hsl(var(--custom-shadow-color-hsl) / .08),0 8px 16px hsl(var(--custom-shadow-color-hsl) / .06)}.shadow-all-lg-custom{box-shadow:0 10px 15px hsl(var(--custom-shadow-color-hsl) / .1),0 4px 6px hsl(var(--custom-shadow-color-hsl) / .12),0 8px 20px hsl(var(--custom-shadow-color-hsl) / .08),0 15px 30px hsl(var(--custom-shadow-color-hsl) / .06)}/*! ============================================================================
  Landing page content styles
  Used by section-list-view-products and section-landing-page-hero
============================================================================== */.metafield-rich_text_field ul{list-style:disc inside}.metafield-rich_text_field ul,.metafield-rich_text_field p{margin:0 0 var(--gutter)}ul.list-benefits{list-style:disc;padding-left:1.5em}.landing-hero .py-r8{padding-top:var(--space-8);padding-bottom:var(--space-8)}/*! ============================================================================
  Reviews modal
  Triggered by custom.js review modal handler on landing pages
============================================================================== */.read-reviews-text{cursor:pointer;color:var(--bundle-primary, #2c7a7b);text-decoration:underline;font-weight:600}.read-reviews-text:hover{opacity:.8}.reviews-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999}.reviews-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.reviews-modal-content{position:relative;max-width:1000px;max-height:80vh;margin:5vh auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.reviews-modal-header{display:flex;justify-content:end;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--colorBorder, #e2e8f0);background:var(--colorBg, white)}.reviews-modal-header h3{margin:0;font-size:1.5rem;font-weight:700}.reviews-modal-close{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:8px;transition:background-color .2s}.reviews-modal-close:hover{background:var(--colorBgAccent, #f7fafc)}.reviews-modal-body{padding:2rem;max-height:calc(80vh - 100px);overflow-y:auto}@media(max-width:768px){.reviews-modal-content{margin:2vh 1rem;max-height:90vh}.reviews-modal-header{padding:1rem 1.5rem}.reviews-modal-body{padding:1.5rem;max-height:calc(90vh - 80px)}}.jdgm-prev-badge,.jdgm-prev-badge *{cursor:default!important}.jdgm-testimonials-carousel .jdgm-average-rating .jdgm-star,.jdgm-videos-carousel .jdgm-average-rating .jdgm-star,.jdgm-cards-carousel .jdgm-average-rating .jdgm-star{color:var(--COLOR-PRIMARY)!important}.jdgm-cards-carousel .jdgm-title{font-size:var(--font-10)!important}@media only screen and (max-width:767px){.jdgm-cards-carousel .jdgm-title{font-size:var(--font-7)!important}}/*! ============================================================================
  Third-party app overrides
============================================================================== */.sw-instagram-container .sw-instagram-item{aspect-ratio:2/3}#smile-ui-container,#smile-ui-lite-container,.needsclick.kl-teaser-TrWtDt{z-index:1!important}.jdgm-widget .jdgm-prev-badge{margin-bottom:10px}.group\/quick-action-button{border-radius:var(--radius-sm)}@media(max-width:767px){.w-r9{width:var(--space-9)}.min-w-\[30px\]{min-width:30px}.min-h-\[30px\]{min-height:30px}}/*! ============================================================================
  Metafield rich text heading spacing
  Shopify wraps rich_text metafield output in .metafield-rich_text_field.
  Pipeline's .rte rule only adds top margin (0.75em) to headings — no bottom.
  Mirror the same value as bottom margin so headings don't run into body text.
============================================================================== */.metafield-rich_text_field h1,.metafield-rich_text_field h2,.metafield-rich_text_field h3,.metafield-rich_text_field h4,.metafield-rich_text_field h5,.metafield-rich_text_field h6{margin-bottom:.75em}/*! ============================================================================
  etee-stars snippet
============================================================================== */.etee-stars{display:inline-flex;align-items:center;gap:.1em}.etee-star{display:block;width:1em;height:1em;flex-shrink:0}/*! ============================================================================
  Judge.me widget overrides
============================================================================== */.jdgm-rev-widg__title{font-size:var(--font-10)!important}/*! ============================================================================
  Footer Klaviyo signup (snippets/etee-footer-klaviyo.liquid)
  Matches live's .footer__newsletter__body, which Pipeline 8.2 no longer has.
============================================================================== */.etee-footer-klaviyo__body{padding:0 var(--outer)}@media only screen and (min-width:768px){.etee-footer-klaviyo__body{flex:0 1 100%}.etee-footer-klaviyo__body:first-child{align-self:baseline}}/*! ============================================================================
  Header account menu, mobile drawer (snippets/etee-header-account.liquid)
  From live's custom-shared-styles.css "MOBILE DROPDOWN MENU FOR ACCOUNT ICON".
============================================================================== */.etee-drawer-account{position:relative;display:flex}.header__dropdown--mobile{position:absolute;top:100%;left:0;right:auto;opacity:1;visibility:visible;z-index:5;min-width:max-content;padding:var(--space-4) var(--space-8);border:1px solid var(--border);border-left:none;background-color:var(--bg)}.header__dropdown--mobile .header__dropdown__wrapper{max-height:none;overflow:visible;padding:0}.header__dropdown--mobile .navlink--child{display:block;padding:var(--space-5) 0;font-weight:var(--FONT-WEIGHT-ACCENT-BOLD);color:var(--COLOR-NAV-TEXT);text-decoration:none}.header__desktop__buttons--icons .header__desktop__button .navlink--child:after{content:none}/*! ============================================================================
  Contact page (snippets/etee-section-contact.liquid)
  Pipeline 8.2 dropped the .p-r10 utility that live's form box uses.
============================================================================== */.section-contact .p-r10{padding:var(--space-10)}@media only screen and (min-width:768px){.product-single .product__media__wrapper:has(>[data-slideshow-desktop-style=slideshow]){position:sticky;top:30px;align-self:flex-start}}/*! ============================================================================
  Theme colour classes
  Pipeline-style text--, bg-- and btn-- classes for the theme colours that
  Pipeline doesn't ship. Variables are set in snippets/css-variables.liquid.
============================================================================== */.text--primary-light{--text: var(--COLOR-PRIMARY-LIGHT);--text-light: var(--COLOR-PRIMARY-LIGHT);--text-dark: var(--COLOR-PRIMARY-LIGHT)}.text--primary-dark{--text: var(--COLOR-PRIMARY-DARK);--text-light: var(--COLOR-PRIMARY-DARK);--text-dark: var(--COLOR-PRIMARY-DARK)}.text--secondary-light{--text: var(--COLOR-SECONDARY-LIGHT);--text-light: var(--COLOR-SECONDARY-LIGHT);--text-dark: var(--COLOR-SECONDARY-LIGHT)}.text--secondary-dark{--text: var(--COLOR-SECONDARY-DARK);--text-light: var(--COLOR-SECONDARY-DARK);--text-dark: var(--COLOR-SECONDARY-DARK)}.text--tertiary-light{--text: var(--COLOR-TERTIARY-LIGHT);--text-light: var(--COLOR-TERTIARY-LIGHT);--text-dark: var(--COLOR-TERTIARY-LIGHT)}.text--tertiary{--text: var(--COLOR-TERTIARY);--text-light: var(--COLOR-TERTIARY);--text-dark: var(--COLOR-TERTIARY)}.text--tertiary-dark{--text: var(--COLOR-TERTIARY-DARK);--text-light: var(--COLOR-TERTIARY-DARK);--text-dark: var(--COLOR-TERTIARY-DARK)}.text--bg{--text: var(--COLOR-BG);--text-light: var(--COLOR-BG);--text-dark: var(--COLOR-BG)}.bg--primary-light{--bg: var(--COLOR-PRIMARY-LIGHT)}.bg--primary-dark{--bg: var(--COLOR-PRIMARY-DARK)}.bg--secondary-light{--bg: var(--COLOR-SECONDARY-LIGHT)}.bg--secondary-dark{--bg: var(--COLOR-SECONDARY-DARK)}.bg--tertiary-light{--bg: var(--COLOR-TERTIARY-LIGHT)}.bg--tertiary{--bg: var(--COLOR-TERTIARY)}.bg--tertiary-dark{--bg: var(--COLOR-TERTIARY-DARK)}.bg--text{--bg: var(--COLOR-TEXT)}.btn--primary-light.btn{--btn-bg: var(--COLOR-PRIMARY-LIGHT);--btn-text: var(--COLOR-PRIMARY-LIGHT-OPPOSITE);--btn-bg-hover: var(--COLOR-PRIMARY-LIGHT-HOVER);--btn-text-hover: var(--COLOR-PRIMARY-LIGHT-OPPOSITE)}.btn--primary-light.btn--soft{--btn-bg: var(--COLOR-PRIMARY-LIGHT-FADE);--btn-text: var(--COLOR-PRIMARY-LIGHT);--btn-bg-hover: var(--COLOR-PRIMARY-LIGHT-FADE-HOVER);--btn-text-hover: var(--COLOR-PRIMARY-LIGHT)}.btn--primary-light.btn--outline{--btn-text: var(--COLOR-PRIMARY-LIGHT);--btn-bg-hover: var(--COLOR-PRIMARY-LIGHT-FADE)}.btn--primary-dark.btn{--btn-bg: var(--COLOR-PRIMARY-DARK);--btn-text: var(--COLOR-PRIMARY-DARK-OPPOSITE);--btn-bg-hover: var(--COLOR-PRIMARY-DARK-HOVER);--btn-text-hover: var(--COLOR-PRIMARY-DARK-OPPOSITE)}.btn--primary-dark.btn--soft{--btn-bg: var(--COLOR-PRIMARY-DARK-FADE);--btn-text: var(--COLOR-PRIMARY-DARK);--btn-bg-hover: var(--COLOR-PRIMARY-DARK-FADE-HOVER);--btn-text-hover: var(--COLOR-PRIMARY-DARK)}.btn--primary-dark.btn--outline{--btn-text: var(--COLOR-PRIMARY-DARK);--btn-bg-hover: var(--COLOR-PRIMARY-DARK-FADE)}.btn--secondary-light.btn{--btn-bg: var(--COLOR-SECONDARY-LIGHT);--btn-text: var(--COLOR-SECONDARY-LIGHT-OPPOSITE);--btn-bg-hover: var(--COLOR-SECONDARY-LIGHT-HOVER);--btn-text-hover: var(--COLOR-SECONDARY-LIGHT-OPPOSITE)}.btn--secondary-light.btn--soft{--btn-bg: var(--COLOR-SECONDARY-LIGHT-FADE);--btn-text: var(--COLOR-SECONDARY-LIGHT);--btn-bg-hover: var(--COLOR-SECONDARY-LIGHT-FADE-HOVER);--btn-text-hover: var(--COLOR-SECONDARY-LIGHT)}.btn--secondary-light.btn--outline{--btn-text: var(--COLOR-SECONDARY-LIGHT);--btn-bg-hover: var(--COLOR-SECONDARY-LIGHT-FADE)}.btn--secondary-dark.btn{--btn-bg: var(--COLOR-SECONDARY-DARK);--btn-text: var(--COLOR-SECONDARY-DARK-OPPOSITE);--btn-bg-hover: var(--COLOR-SECONDARY-DARK-HOVER);--btn-text-hover: var(--COLOR-SECONDARY-DARK-OPPOSITE)}.btn--secondary-dark.btn--soft{--btn-bg: var(--COLOR-SECONDARY-DARK-FADE);--btn-text: var(--COLOR-SECONDARY-DARK);--btn-bg-hover: var(--COLOR-SECONDARY-DARK-FADE-HOVER);--btn-text-hover: var(--COLOR-SECONDARY-DARK)}.btn--secondary-dark.btn--outline{--btn-text: var(--COLOR-SECONDARY-DARK);--btn-bg-hover: var(--COLOR-SECONDARY-DARK-FADE)}.btn--tertiary-light.btn{--btn-bg: var(--COLOR-TERTIARY-LIGHT);--btn-text: var(--COLOR-TERTIARY-LIGHT-OPPOSITE);--btn-bg-hover: var(--COLOR-TERTIARY-LIGHT-HOVER);--btn-text-hover: var(--COLOR-TERTIARY-LIGHT-OPPOSITE)}.btn--tertiary-light.btn--soft{--btn-bg: var(--COLOR-TERTIARY-LIGHT-FADE);--btn-text: var(--COLOR-TERTIARY-LIGHT);--btn-bg-hover: var(--COLOR-TERTIARY-LIGHT-FADE-HOVER);--btn-text-hover: var(--COLOR-TERTIARY-LIGHT)}.btn--tertiary-light.btn--outline{--btn-text: var(--COLOR-TERTIARY-LIGHT);--btn-bg-hover: var(--COLOR-TERTIARY-LIGHT-FADE)}.btn--tertiary.btn{--btn-bg: var(--COLOR-TERTIARY);--btn-text: var(--COLOR-TERTIARY-OPPOSITE);--btn-bg-hover: var(--COLOR-TERTIARY-HOVER);--btn-text-hover: var(--COLOR-TERTIARY-OPPOSITE)}.btn--tertiary.btn--soft{--btn-bg: var(--COLOR-TERTIARY-FADE);--btn-text: var(--COLOR-TERTIARY);--btn-bg-hover: var(--COLOR-TERTIARY-FADE-HOVER);--btn-text-hover: var(--COLOR-TERTIARY)}.btn--tertiary.btn--outline{--btn-text: var(--COLOR-TERTIARY);--btn-bg-hover: var(--COLOR-TERTIARY-FADE)}.btn--tertiary-dark.btn{--btn-bg: var(--COLOR-TERTIARY-DARK);--btn-text: var(--COLOR-TERTIARY-DARK-OPPOSITE);--btn-bg-hover: var(--COLOR-TERTIARY-DARK-HOVER);--btn-text-hover: var(--COLOR-TERTIARY-DARK-OPPOSITE)}.btn--tertiary-dark.btn--soft{--btn-bg: var(--COLOR-TERTIARY-DARK-FADE);--btn-text: var(--COLOR-TERTIARY-DARK);--btn-bg-hover: var(--COLOR-TERTIARY-DARK-FADE-HOVER);--btn-text-hover: var(--COLOR-TERTIARY-DARK)}.btn--tertiary-dark.btn--outline{--btn-text: var(--COLOR-TERTIARY-DARK);--btn-bg-hover: var(--COLOR-TERTIARY-DARK-FADE)}.btn--bg.btn{--btn-bg: var(--COLOR-BG);--btn-text: var(--COLOR-BG-OPPOSITE);--btn-bg-hover: var(--COLOR-BG-HOVER);--btn-text-hover: var(--COLOR-BG-OPPOSITE)}.btn--bg.btn--soft{--btn-bg: var(--COLOR-BG-FADE);--btn-text: var(--COLOR-BG);--btn-bg-hover: var(--COLOR-BG-FADE-HOVER);--btn-text-hover: var(--COLOR-BG)}.btn--bg.btn--outline{--btn-text: var(--COLOR-BG);--btn-bg-hover: var(--COLOR-BG-FADE)}
/*# sourceMappingURL=/cdn/shop/t/118/assets/etee-custom.css.map */