/** Shopify CDN: Minification failed

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

**/
/* =========================================================
   TW1 SKIN — overlays the Dawn-based theme with the
   TheraWear v2 design system (DM Sans + green/cream palette).
   Loaded LAST so it wins the cascade over component CSS.
   ========================================================= */

:root {
  --tw-green: #1a8a5c;
  --tw-green-dark: #156e49;
  --tw-green-light: #E8F5E9;
  --tw-green-lighter: #C8E6C9;
  --tw-ink: #1a1a1a;
  --tw-ink-soft: #4a4a4a;
  --tw-ink-muted: #6b7280;
  --tw-gray-bg: #f5f5f5;
  --tw-gray-50: #f9fafb;
  --tw-cream: #f7f5f2;
  --tw-border: rgba(0, 0, 0, 0.06);
  --tw-red: #ef4444;
  --tw-red-light: #fef2f2;
  --tw-radius-sm: 8px;
  --tw-radius-md: 12px;
  --tw-radius-lg: 16px;
  --tw-radius-xl: 20px;
  --tw-radius-pill: 100px;
  --tw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tw-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tw-font-serif: 'Instrument Serif', Georgia, serif;
  --tw-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --tw-shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.08);
  --tw-shadow-green: 0 8px 24px rgba(26, 138, 92, 0.3);
  --tw-max-width: 1280px;
}

/* ─── Global typography ─── */
html, body { font-family: var(--tw-font) !important; color: var(--tw-ink); -webkit-font-smoothing: antialiased; }
body { background: #ffffff; }
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--tw-font) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}
.hero__heading em, .banner__heading em,
.section-header__heading em, .rich-text__heading em {
  font-family: var(--tw-font-serif);
  font-style: italic;
  color: var(--tw-green);
  font-weight: 400;
}
.page-width { max-width: var(--tw-max-width); padding: 0 32px; }
@media (max-width: 640px) { .page-width { padding: 0 16px; } }

/* ─── Buttons ─── */
.button, .shopify-payment-button__button--unbranded, button.button--primary {
  border-radius: var(--tw-radius-pill) !important;
  font-family: var(--tw-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  padding: 16px 32px !important;
  transition: all 0.3s var(--tw-ease-out) !important;
  min-height: 0 !important;
}
.button--primary, .button.button--primary,
button[type="submit"].button,
.shopify-payment-button__button--unbranded {
  background: var(--tw-green) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
.button--primary:hover, button[type="submit"].button:hover,
.shopify-payment-button__button--unbranded:hover {
  background: var(--tw-green-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--tw-shadow-green) !important;
}
.button--secondary {
  background: transparent !important;
  color: var(--tw-ink-soft) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}
.button--secondary:hover { border-color: var(--tw-ink) !important; color: var(--tw-ink) !important; }
.button::after, .button:hover::after, .button:focus::after { display: none !important; }
.button--small { padding: 10px 20px !important; font-size: 13px !important; }

/* ─── Announcement bar ─── */
.announcement-bar, .utility-bar {
  background: var(--tw-ink) !important;
  color: #ffffff !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.announcement-bar__message, .announcement-bar a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  margin: 0 !important;
}
.announcement-bar::before {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  animation: tw-shimmer 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tw-shimmer { 0% { left: -40%; } 100% { left: 140%; } }

/* ─── Header ─── */
.section-header, .header-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--tw-border) !important;
  transition: box-shadow 0.3s ease;
}
.header-wrapper.header-wrapper--border-bottom { border-bottom: 1px solid var(--tw-border) !important; }
.shopify-section-header-sticky.shopify-section-header-hidden { transform: translateY(-100%); }
.header {
  max-width: var(--tw-max-width);
  padding: 0 32px !important;
  height: 64px;
  min-height: 64px;
}
.header__heading, .header__heading-link, .header__heading-logo-wrapper {
  font-family: var(--tw-font) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--tw-ink) !important;
}
.header__heading-logo { max-height: 40px; width: auto; }
.header__inline-menu .list-menu--inline > li > a,
.header__menu-item {
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tw-ink-soft) !important;
  border-radius: var(--tw-radius-sm) !important;
  transition: all 0.2s ease;
  text-decoration: none !important;
  /* gap between label and the dropdown chevron — without this, the SVG
     sits flush against the text (e.g. "Recovery⌄") */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.header__inline-menu .list-menu--inline > li > a {
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}
/* Chevron sizing + smooth flip on open, matching tw1 reference.
   base-css.liquid sets the caret to position:absolute + right:0.8rem,
   which made it overlap the label tail (e.g. "Recovery⌄"). Force it
   into the flex flow so the parent's gap:6px actually applies. */
.header__menu-item .icon-caret {
  width: 10px !important;
  height: 10px !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Drop the right-padding base-css adds for the absolute caret —
   flex+gap handles spacing now. */
summary.header__menu-item {
  padding-right: 14px !important;
}
header details[open] > summary.header__menu-item .icon-caret {
  transform: rotate(180deg);
}
.header__inline-menu .list-menu--inline > li > a:hover,
.header__menu-item:hover { color: var(--tw-green) !important; background: transparent !important; }
.header__menu-item span { text-decoration: none !important; }
.header__icons {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header__icon, .header__icon--cart, .header__icon--account, .header__icon--search {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  color: var(--tw-ink-soft) !important;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.header__icon:hover { background: var(--tw-gray-50) !important; color: var(--tw-ink) !important; }
.header__icon svg { width: 22px !important; height: 22px !important; }
/* Balance perceived icon size: the hamburger & cart glyphs only fill ~58% of
   their viewBox while the search glyph fills ~75%, so at an equal box the search
   looks bigger. Enlarge burger/cart and match search visually to them. */
.header__icon svg.icon-hamburger { width: 27px !important; height: 27px !important; }
.header__icon svg.icon-cart { width: 25px !important; height: 25px !important; }
.header__icon svg.icon-search { width: 22px !important; height: 22px !important; }
.cart-count-bubble {
  background: var(--tw-green) !important;
  color: #ffffff !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: none !important;
  top: 2px !important;
  right: 0 !important;
}

/* ─── Mega menu / dropdowns ─── */
.mega-menu__content, .header__submenu {
  background: #ffffff !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-md) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
  padding: 6px !important;
}
.mega-menu__link, .header__submenu .header__menu-item {
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--tw-ink-soft) !important;
  border-radius: var(--tw-radius-sm) !important;
  transition: all 0.15s ease;
}
.mega-menu__link:hover { background: var(--tw-gray-50) !important; color: var(--tw-ink) !important; }
/* Anchor desktop dropdown menus directly under their parent item.
   The theme is missing the base.css rule that did this, so .list-menu--disclosure
   was absolute with left:auto and floated off to the right. */
@media screen and (min-width: 990px) {
  .header__inline-menu details { position: relative !important; }
  .header__inline-menu details > .header__submenu {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    margin-top: 0.6rem !important;
  }
  /* Transparent bridge over the gap so the dropdown doesn't close while the
     mouse travels from the menu item down to the submenu. */
  .header__inline-menu details > .header__submenu::before {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: 0;
    right: 0;
    height: 0.8rem;
    background: transparent;
  }
}

/* ─── Banner / Hero ─── */
.banner, .banner--medium, .banner--large {
  background: var(--tw-cream) !important;
  position: relative;
  overflow: hidden;
}
.banner--adapt_image .banner__content,
.banner__box {
  background: transparent !important;
  color: var(--tw-ink) !important;
  padding: 0 !important;
}
.banner__heading, .banner h1, .banner h2 {
  font-family: var(--tw-font) !important;
  font-size: clamp(40px, 5vw, 70px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  color: var(--tw-ink) !important;
  margin-bottom: 20px !important;
}
.banner__text, .banner p {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--tw-ink-muted) !important;
  font-weight: 400 !important;
  max-width: 480px;
}
.banner__buttons { gap: 16px !important; margin-top: 32px !important; }

/* ─── Sections / spacing ─── */
.section, .shopify-section { background: transparent; }
.section-header, .title-wrapper-with-link {
  text-align: center;
  margin-bottom: 48px;
}
.title--primary, h2.title, .section-header__heading {
  font-family: var(--tw-font) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}
.collection__description, .section__subheading {
  text-align: center !important;
  color: var(--tw-ink-muted) !important;
  font-size: 16px !important;
  margin-top: 12px !important;
}

/* ─── Collection list (category cards) ─── */
.collection-list-wrapper { padding-top: 80px; padding-bottom: 80px; }
.collection-list { gap: 24px !important; }
.collection-list .card-wrapper { border: none !important; }
.card--collection, .collection-list__item .card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.card--collection .card__media,
.collection-list__item .media,
.card__inner .media {
  aspect-ratio: 1 !important;
  border-radius: var(--tw-radius-lg) !important;
  overflow: hidden;
}
.card--collection .media img,
.collection-list__item .media img {
  transition: transform 0.4s var(--tw-ease-out);
}
.card--collection:hover .media img,
.collection-list__item:hover .media img { transform: scale(1.05); }
.card--collection .card__heading, .collection-list__item .card__heading {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-top: 12px !important;
}
.card--collection .card__content, .card__content {
  padding: 0 !important;
}

/* ─── Product cards / grid ─── */
.grid--2-col-tablet-down.grid--3-col,
.grid--4-col-desktop,
.product-grid {
  gap: 24px !important;
}
.card--product, .card--standard, .product-card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.card--product .card__media,
.card-wrapper .card__media {
  aspect-ratio: 3/4 !important;
  border-radius: var(--tw-radius-md) !important;
  overflow: hidden;
  background: var(--tw-gray-50);
}
.card--product img, .card-wrapper img {
  transition: transform 0.4s var(--tw-ease-out);
}
.card--product:hover img, .card-wrapper:hover img { transform: scale(1.05); }
.card__heading, .card-information .card__heading {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}
.card-information { padding: 0 !important; }
.price__regular .price-item, .price-item--regular {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--tw-ink) !important;
}
.price__sale .price-item--sale, .price-item--sale {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--tw-ink) !important;
}
.price__sale .price-item--regular, s.price-item {
  font-size: 14px !important;
  color: var(--tw-ink-muted) !important;
  text-decoration: line-through !important;
}
.badge {
  background: var(--tw-green) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.badge--bottom-left { left: 10px !important; bottom: 10px !important; }
/* Percentage-discount price badge ("Save 29%" / "-29%") — soft mint pill w/ dark-green text (ref) */
.price__badge-sale {
  background: var(--tw-green-light) !important;
  color: var(--tw-green-dark) !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ─── Rich text ─── */
.rich-text__wrapper { max-width: 800px; margin: 0 auto; text-align: center; }
.rich-text__heading {
  font-family: var(--tw-font) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}
.rich-text__text {
  color: var(--tw-ink-muted) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ─── Image with text ─── */
.image-with-text__content {
  background: transparent !important;
  padding: 32px !important;
}
.image-with-text__heading {
  font-family: var(--tw-font) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}
.image-with-text__text {
  color: var(--tw-ink-muted) !important;
  line-height: 1.7 !important;
  font-size: 15px !important;
}
.image-with-text__media, .image-with-text__image {
  border-radius: var(--tw-radius-lg) !important;
  overflow: hidden;
}

/* ─── Multicolumn (benefits icons) — scoped to homepage so PDP/PLP
       multicolumns can render larger images (sleeper types, etc.) ─── */
.multicolumn { padding: 80px 0 !important; }
.multicolumn-card {
  text-align: center;
  background: transparent !important;
}
.template-index .multicolumn-card__image-wrapper,
.template-index .multicolumn-card__info .media {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 12px !important;
  background: #ffffff !important;
  border-radius: var(--tw-radius-lg) !important;
  box-shadow: var(--tw-shadow-card);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease;
  padding: 14px;
}
.template-index .multicolumn-card:hover .multicolumn-card__image-wrapper {
  transform: scale(1.05);
  box-shadow: var(--tw-shadow-lift);
}
.template-index .multicolumn-card__image-wrapper img { width: 40px !important; height: 40px !important; object-fit: contain; }
.multicolumn-card__info h3, .multicolumn-card-spacing .multicolumn-card__info h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
.multicolumn-card__info .rte, .multicolumn-card__info p {
  font-size: 12px !important;
  color: var(--tw-ink-muted) !important;
}
/* Multicolumn on accent (green-tinted) sections */
.color-accent-2.multicolumn, .multicolumn.color-accent-2,
.shopify-section .color-accent-2 {
  background: var(--tw-green-light) !important;
}

/* USP image tiles on the product page — round the corners of full-bleed images */
.template-product .multicolumn-card__image-wrapper--full-width,
.template-product .multicolumn-card__image-wrapper--full-width .media,
.template-product .multicolumn-card__image-wrapper--full-width .multicolumn-card__image {
  border-radius: var(--tw-radius-lg, 16px) !important;
  overflow: hidden !important;
}

/* ─── Testimonials ─── */
.testimonials__item, .testimonial-card {
  background: var(--tw-gray-50) !important;
  border-radius: var(--tw-radius-md) !important;
  padding: 24px !important;
  border: none !important;
}

/* ─── USP icons / trust bar ─── */
.usp-icons, .usp-bar {
  background: var(--tw-cream) !important;
  border-top: 1px solid var(--tw-border);
}
.usp-icons__item, .usp-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tw-ink) !important;
}

/* ─── Cart drawer / notification ─── */
.cart-drawer, .cart-notification {
  font-family: var(--tw-font) !important;
}
.cart-drawer__header, .cart-notification__header {
  border-bottom: 1px solid var(--tw-border) !important;
}
.cart-drawer .cart__checkout-button, .cart__checkout-button.button {
  background: var(--tw-green) !important;
  color: #ffffff !important;
  border-radius: var(--tw-radius-pill) !important;
}

/* ─── Product (PDP) ─── */
.product__media-wrapper {
  align-self: flex-start;
  background: transparent !important;
}
.product__media-item .media,
.product__media-wrapper .product__media {
  border-radius: var(--tw-radius-xl) !important;
  overflow: hidden;
  background: var(--tw-cream) !important;
}
.product__title, .product__title h1 {
  font-family: var(--tw-font) !important;
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.product__info-container .price .price-item--sale,
.product__info-container .price .price-item--regular {
  font-size: 28px !important;
  font-weight: 700 !important;
}
.product-form__buttons .button {
  width: 100%;
  padding: 16px 24px !important;
}
.product__description, .product__description.rte {
  color: var(--tw-ink-muted) !important;
  line-height: 1.7 !important;
  font-size: 15px !important;
}
/* Variant swatches */
.product-form__input input[type='radio'] + label {
  border-radius: var(--tw-radius-sm) !important;
  transition: all 0.2s ease;
}
.product-form__input input[type='radio']:checked + label {
  border-color: var(--tw-green) !important;
  background: var(--tw-green-light) !important;
  color: var(--tw-ink) !important;
}
/* Quantity selector */
.quantity {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-pill) !important;
  overflow: hidden;
}
.quantity__input { font-weight: 600 !important; }

/* ─── Collection page (PLP) ─── */
.collection-hero, .collection__header {
  background: var(--tw-cream);
  padding: 48px 0 !important;
  border-radius: 0 !important;
}
.collection-hero__title, .collection__title {
  font-family: var(--tw-font) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-align: center;
}
/* Filters */
.facets, .facets-wrapper {
  border-radius: var(--tw-radius-md) !important;
  font-size: 14px !important;
}
.facets__summary {
  font-weight: 600 !important;
  color: var(--tw-ink) !important;
}
.facets-pill, .active-facets__button {
  border-radius: var(--tw-radius-pill) !important;
  font-size: 12px !important;
}

/* ─── Footer ─── */
.footer {
  background: #ffffff !important;
  border-top: 1px solid var(--tw-border) !important;
  padding: 64px 0 32px !important;
}
.footer__content-top, .footer-block__heading {
  margin-bottom: 48px;
}
.footer-block__heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--tw-ink) !important;
  margin-bottom: 16px !important;
}
.footer-block__details-content .list-menu__item,
.footer a:not(.button) {
  font-size: 14px !important;
  color: var(--tw-ink-muted) !important;
  transition: color 0.2s ease;
}
.footer-block__details-content .list-menu__item:hover,
.footer a:not(.button):hover { color: var(--tw-green) !important; }
.footer__copyright {
  border-top: 1px solid var(--tw-border) !important;
  padding-top: 24px !important;
  font-size: 14px !important;
  color: var(--tw-ink-muted) !important;
}
.footer__list-social .list-social__link {
  width: 40px !important;
  height: 40px !important;
  background: var(--tw-ink) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  transition: background 0.2s ease;
}
.footer__list-social .list-social__link:hover { background: var(--tw-green) !important; }

/* ─── Form inputs ─── */
.field__input, .select__select, input[type='text'], input[type='email'], input[type='tel'], textarea, select {
  border-radius: var(--tw-radius-sm) !important;
  border: 1px solid var(--tw-border) !important;
  font-family: var(--tw-font) !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease;
}
.field__input:focus, .select__select:focus, input:focus, textarea:focus {
  border-color: var(--tw-green) !important;
}
.field__label { color: var(--tw-ink-muted) !important; }

/* ─── Search predictive ─── */
.predictive-search {
  border-radius: var(--tw-radius-md) !important;
  border: 1px solid var(--tw-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
}

/* ─── Animations ─── */
@keyframes tw-fade-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes tw-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .header { padding: 0 20px !important; }
  .page-width { padding: 0 20px; }
  .banner__heading { font-size: 45px !important; }
}

@media (max-width: 640px) {
  .header { padding: 0 16px !important; }
  .header-wrapper { border-bottom: 1px solid var(--tw-border); }
  .button { padding: 14px 24px !important; font-size: 14px !important; }
  .multicolumn { padding: 48px 0 !important; }
  .collection-list-wrapper { padding-top: 48px; padding-bottom: 48px; }
  .rich-text__heading { font-size: 28px !important; }
}

/* ─── Instrument Serif font (used for italic emphasis in headings) ─── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* ─── Global em italic emphasis on tw1 headings ─── */
/* NOTE: .tw1-coll-hero h1 em intentionally excluded — the collection hero
   matches the tw1 reference (normal-weight DM Sans green, not serif italic);
   see sections/tw1-collection-hero.liquid. */
.section-tw1-fg h2 em,
.section-tw1-fg .tw1-fg-header h2 em,
.section-tw1-faq h2 em,
.section-tw1-comparison h2 em,
.section-tw1-reviews h2 em,
.section-tw1-anecdote h2 em,
.section-tw1-stats h2 em,
.section-tw1-vs h2 em,
.section-tw1-cond h2 em,
.section-tw1-au h2 em,
.section-tw1-seo h2 em {
  font-family: var(--tw-font-serif), Georgia, serif !important;
  font-style: italic;
  color: var(--tw-green) !important;
  font-weight: 400;
}

/* ─── Trust bar tweaks (remove bottom border, tighten gap) ─── */
.tw1-trust-bar { border-bottom: none !important; }

/* ─── Hover states ─── */
.tw1-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
.tw1-tile img { transition: transform 0.6s var(--tw-ease-out); }
.tw1-tile:hover img { transform: scale(1.04); }
.section-tw1-benefits .tw1-benefit-item,
.section-tw1-fg .tw1-fg-card {
  transition: background 0.25s var(--tw-ease-out), transform 0.25s var(--tw-ease-out), box-shadow 0.25s var(--tw-ease-out);
}
.section-tw1-benefits .tw1-benefit-item:hover,
.section-tw1-fg .tw1-fg-card:hover {
  background: var(--tw-green-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ─── Hero radial gradient decoration ─── */
.banner:has(.tw1-hero-tiles)::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(26, 138, 92, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Standardise tw1 section spacing baseline ─── */
.section-tw1-coll-hero, .section-tw1-trust-bar, .section-tw1-benefits,
.section-tw1-how, .section-tw1-comparison, .section-tw1-fg, .section-tw1-faq,
.section-tw1-anecdote, .section-tw1-bundle, .section-tw1-reviews,
.section-tw1-stats, .section-tw1-vs, .section-tw1-cond, .section-tw1-au, .section-tw1-seo {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 640px) {
  .section-tw1-benefits, .section-tw1-how, .section-tw1-comparison,
  .section-tw1-fg, .section-tw1-faq, .section-tw1-anecdote, .section-tw1-bundle,
  .section-tw1-reviews, .section-tw1-stats, .section-tw1-vs, .section-tw1-cond,
  .section-tw1-au, .section-tw1-seo {
    /* let inner padding-top/padding-bottom variables handle mobile */
  }
}

/* ─── Color hex alignment fixes from audit ─── */
.tw1-review-card, .section-tw1-reviews .tw1-review-card { background: #f9fafb !important; }
.tw1-review-card-body { color: #4a4a4a !important; }
.tw1-verified-row svg { fill: var(--tw-green) !important; stroke: none !important; }

/* ─── PLP clinical fixes (match tw1 reference layout) ─── */

/* Hide breadcrumb on collection pages — reference doesn't show it */
.collection .breadcrumb,
.collection-hero + .breadcrumb,
.section-tw1-coll-hero ~ * .breadcrumb,
nav.breadcrumb { display: none !important; }

/* Hide "Sort by:" caption label — visual noise that the reference doesn't have */
.facet-filters__label,
.facet-filters .caption {
  display: none !important;
}
/* Filter row layout: facets LEFT, product count MIDDLE, sort RIGHT (matches tw1 ref) */
.facets-wrapper.page-width,
.facets-container {
  background: transparent !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.facets-container {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
/* Flatten facet-filters-form > form so pills + sort + count become siblings of one flex container */
.facets-container > facet-filters-form { display: contents !important; }
.facets-container > facet-filters-form > .facets__form { display: contents !important; }
.facets-container > facet-filters-form > .facets__form > .facets__wrapper {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  order: 1;
}
.facets-container > .product-count,
.facets-container .product-count {
  order: 2 !important;
  margin: 0 !important;
}
html body .facets-container .product-count h2.product-count__text,
html body .facets-container .product-count h2.product-count__text.text-body,
html body .product-count h2,
html body .product-count h2.product-count__text,
html body .product-count h2.product-count__text.text-body,
html body .product-count #ProductCountDesktop,
html body .product-count #ProductCount,
html body .product-count h2 span {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--tw-ink-muted) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
/* Hide the leftover Filter: heading and other order-0 stragglers */
.facets-container .facets__heading { display: none !important; }
/* Active facets count (mobile) shouldn't show as a flex item on desktop */
.facets-container > .active-facets.active-facets-mobile,
.facets-container > menu-drawer.mobile-facets__wrapper {
  flex-basis: 0;
  width: 0;
  overflow: hidden;
}
.facets-container > facet-filters-form > .facets__form > .facet-filters.sorting {
  order: 3;
  margin-left: auto;
}
/* Compact the sort select inside the row */
.facet-filters__field { display: flex !important; align-items: center; gap: 8px; }

/* Trust bar — remove top border for seamless join with hero (reference flows seamlessly) */
.section-tw1-trust-bar { background: var(--tw-cream); }
.tw1-trust-bar { border-top: none !important; border-bottom: none !important; }
/* Add a subtle divider only between the trust bar and the next section (filter area) */
.section-tw1-trust-bar + .shopify-section { border-top: 1px solid rgba(0,0,0,0.06); }

/* Hero — vertical padding matches tw1 reference (64px desktop / 40px mobile) */
.section-tw1-coll-hero .tw1-coll-hero,
section.tw1-coll-hero { padding-top: 64px !important; padding-bottom: 64px !important; }
@media (max-width: 749px) {
  .section-tw1-coll-hero .tw1-coll-hero,
  section.tw1-coll-hero { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ─── Phase 8.1 — Facet pill chip restyle (LOOK like ref pills) ─── */
.facets__form-vertical, .facets__form { gap: 12px !important; }
.facets__heading { display: none !important; }
.facets__summary,
.facets-vertical-form details > summary,
.facets-form details > summary {
  background: var(--tw-ink) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-family: var(--tw-font) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.facets__summary:hover,
.facets-form details > summary:hover {
  background: var(--tw-green) !important;
}
.facets__summary svg, .facets-form details > summary svg {
  width: 14px !important; height: 14px !important;
  fill: currentColor !important;
}
/* Active filter chips */
.active-facets__button {
  background: var(--tw-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
}
.active-facets__button:hover { background: var(--tw-green-dark) !important; }
/* Sort by select */
.facets__form .select__select,
.facet-filters__sort {
  border-radius: 100px !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  padding: 8px 32px 8px 16px !important;
  font-family: var(--tw-font) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  background: #ffffff !important;
  color: var(--tw-ink) !important;
}

/* ─── Accordion +/× toggle (replace Dawn check_mark) ─── */
.tw1-faq-item summary,
.collapsible-content details summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px;
}
.tw1-faq-item summary::after,
.collapsible-content details summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--tw-ink);
  flex-shrink: 0;
  transition: transform 0.3s var(--tw-ease-out);
  display: inline-block;
}
.tw1-faq-item details[open] summary::after,
.collapsible-content details[open] summary::after {
  transform: rotate(45deg);
}
/* hide default Dawn accordion icons — the ::after rule above is the toggle.
   Without this, the FAQ row shows three glyphs: Dawn's .icon-accordion
   (boxy check) on the left, Dawn's .icon-caret on the right, and our +. */
.tw1-faq summary .icon,
.tw1-faq summary svg.icon-caret,
.collapsible-content details summary .icon-accordion,
.collapsible-content details summary svg.icon-accordion,
.collapsible-content details summary svg.icon-caret { display: none !important; }


/* ─── Product Detail Page (PDP) — gallery + buy box ─── */
.product__media-wrapper .product__media,
.product .media-gallery .product__media-item .product__media {
  aspect-ratio: 1 !important;
}
.product__media-list .product__media-item .product__media img,
.product__media .product__media-item img {
  object-fit: cover;
}
/* Product H1: uniform sans-serif bold across every PDP. (Previously serif-italic,
   which only won on some templates due to h1-vs-h2.h1 markup differences, leaving
   knee/slides serif while the rest rendered sans.) */
.product__title h1, .product .h1 {
  font-family: var(--tw-font), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--tw-ink) !important;
}
.product__title h1 em {
  color: var(--tw-green);
  font-style: italic;
}

/* ─── Product card category pill (above title) — matches tw1 ref
   .product-tag (green fill, white text, small pill). Per-category
   colour swap for bronze/teal/grey variants. */
.category-badge-green,
.category-badge-bronze,
.category-badge-grey,
.category-badge-teal {
  display: inline-block !important;
  background: var(--tw-green) !important;
  color: #ffffff !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-family: var(--tw-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}
.category-badge-bronze { background: #b97c2f !important; color: #ffffff !important; }
.category-badge-teal   { background: #1a8a8a !important; color: #ffffff !important; }
.category-badge-grey   { background: #6b7280 !important; color: #ffffff !important; }

/* ─── Product card discount badge (sale pill) ─── */
.card__badge .badge.badge--bottom-left.color-scheme-1,
.card__badge .badge.badge--bottom-left[class*="color-"] {
  background: var(--tw-green) !important;
  color: #fff !important;
  font-family: var(--tw-font) !important;
  font-size: 11px !important; /* ref 11.2px; was 0.7rem = 7px under Dawn 10px root */
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  margin: 0 !important; /* kill Dawn's 4px badge margin-top so pill sits at 10px */
}
/* Position the product-card discount badge top-left to match the tw1 reference.
   Dawn defaults `.card__badge` to bottom-left (align-self:flex-end; grid-row:3);
   `.top` uses flex-start/row 1. The container is `card__badge bottom left`. */
.card-wrapper .card__badge.bottom {
  align-self: flex-start !important;
  grid-row-start: 1 !important;
}
/* flex container removes inline line-box leading above the pill (was ~5px),
   so the pill sits flush at the 10px margin = exact reference top inset */
.card-wrapper .card__badge { display: flex !important; line-height: 1 !important; }
/* media cards render the badge twice (overlay over image + lower content block).
   The reference shows one badge over the image — hide the lower-content dup. */
.card-wrapper .card.card--media > .card__content > .card__badge { display: none !important; }
.card-wrapper .card__badge {
  margin: 10px !important; /* ref badge sits 10px from top/left of the image */
}

/* ─── Product card: borderless like the tw1 reference ─── */
/* Dawn's "card" style draws a panel (shadow + radius) via .card--card::after.
   The reference product cards have no box — just the rounded image + text. */
.card-wrapper .card--card::after,
.card-wrapper .card--standard::after {
  box-shadow: none !important;
  border: none !important;
}
.card-wrapper .card--card { background: transparent !important; }
/* keep .card__inner's light bg — that's the image area (ref img-wrap uses gray-50) */

/* ─── Product card image (portrait) ─── */
.card-wrapper .media,
.card__inner .media {
  border-radius: var(--tw-radius-md) !important;
}
.card-wrapper .card__heading {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.card-wrapper .price {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--tw-ink) !important;
}
.card-wrapper .price__sale .price-item--regular {
  font-size: 0.85rem !important;
  color: var(--tw-ink-muted) !important;
  font-weight: 400 !important;
}
.card-wrapper .price__sale .price-item--last {
  color: var(--tw-ink) !important; /* ref current price is dark ink, not green */
}
/* Judge.me review badge on product cards — match tw1 reference:
   small yellow (#facc15) stars + 12px muted count. Scoped to .card-wrapper
   so the PDP review widget is unaffected. */
.card-wrapper .jdgm-prev-badge { display: flex !important; align-items: center !important; gap: 4px !important; }
.card-wrapper .jdgm-prev-badge .jdgm-star { font-size: 12px !important; } /* ref star glyph 12px */
.card-wrapper .jdgm-prev-badge .jdgm--on,
.card-wrapper .jdgm-prev-badge .jdgm--half { color: #facc15 !important; }
.card-wrapper .jdgm-prev-badge__text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--tw-ink-muted) !important;
}
/* Under-image text spacing — match tw1 reference exactly:
   img→category 10px, category→title 6px, title→rating 4px, rating→price 6px.
   The block wrapper added inline line-box leading above the inline-block
   category + jdgm widget (uneven gaps); flex-column removes that leading so
   the explicit margins are the only spacing. */
.product-grid .card-wrapper .card > .card__content > .card__information {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 10px 0 0 0 !important;
}
.product-grid .card-wrapper .card__information > .category-badge-green {
  margin: 0 0 6px !important;
  line-height: 1 !important;
}
.product-grid .card-wrapper .card__information > .card__heading {
  margin: 0 0 4px !important;
}
.product-grid .card-wrapper .card__information > .card-information {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.product-grid .card-wrapper .card-information .jdgm-widget { margin: 0 !important; } /* kill 3px wrapper top so title→rating = 4px */
.product-grid .card-wrapper .card-information .jdgm-prev-badge { margin: 0 0 6px !important; } /* rating→price = 6px */
.product-grid .card-wrapper .card-information .card__price-row,
.product-grid .card-wrapper .card-information .price { margin: 0 !important; }

/* ─── Advertising cards in the product grid ─── */
/* Hide the flat green promo cards; keep only the uploaded full-colour image
   (USP) cards. Size those to match the product cards and round their corners. */
.product-grid .grid__item--promo { display: none !important; }
.product-grid .grid__item--usp .card-usp-wrapper,
.product-grid .grid__item--usp .card-usp { height: 100% !important; }
.product-grid .grid__item--usp .card-usp,
.product-grid .grid__item--usp .card-usp__img {
  border-radius: var(--tw-radius-md) !important; /* 12px, matches product image */
  overflow: hidden !important;
}
.product-grid .grid__item--usp .card-usp__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ─── Hero tile collage (homepage hero-banner-enhanced) ─── */
.banner:has(.tw1-hero-tiles) { position: relative; }
.tw1-hero-tiles {
  position: absolute;
  top: 50%;
  right: max(32px, calc((100vw - 1280px) / 2 + 32px));
  transform: translateY(-50%);
  width: calc(50% - max(32px, calc((100vw - 1280px) / 2 + 32px)) - 24px);
  max-width: 620px;
  height: calc(100% - 160px);
  max-height: 520px;
  box-sizing: border-box;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  justify-items: stretch;
}
.tw1-hero-tiles > .tw1-tile { align-self: stretch; justify-self: stretch; min-height: 0; min-width: 0; }
.tw1-tile {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #eeebe6;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--tw-ease-out), box-shadow 0.4s var(--tw-ease-out);
}
.tw1-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
.tw1-tile--feature { grid-row: span 2; }
.tw1-tile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.6s var(--tw-ease-out);
}
.tw1-tile:hover img { transform: scale(1.04); }
.tw1-tile__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--tw-ink); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  padding: 5px 10px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.08em;
  z-index: 2;
}
.tw1-tile__badge--sale { background: var(--tw-red); }
.tw1-tile__badge--green { background: var(--tw-green); }
.tw1-tile__badge--dark { background: var(--tw-ink); }
.tw1-tile__info {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  z-index: 2;
}
.tw1-tile__name {
  font-size: 0.78rem; font-weight: 600; color: var(--tw-ink);
  line-height: 1.2;
}
.tw1-tile__price {
  font-size: 0.78rem; font-weight: 700; color: var(--tw-green);
  white-space: nowrap;
}
/* "20% OFF" savings pill sitting right next to the 4-pack price.
   On-brand green tint (matches the green price + theme palette) with a bold
   dark-green label — high contrast, replaces the old jarring rose-red pill.
   Selector is intentionally specific (.tw1-tile__price em.tw1-tile__save) and
   uses !important on the type props: the pill is an <em>, and the global
   "fancy em" rule (Instrument Serif + italic + green, via `.banner em`) would
   otherwise turn it into a low-contrast serif-italic — the "trashy" look. */
.tw1-tile__price em.tw1-tile__save {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tw-green-light);
  color: var(--tw-green-dark) !important;
  border: 1px solid var(--tw-green-lighter);
  font-family: var(--tw-font) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  /* px not rem — theme root is 10px, so rem renders the text ~⅔ size (illegible) */
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.tw1-tile--feature .tw1-tile__info { padding: 14px 18px; }
.tw1-tile--feature .tw1-tile__name,
.tw1-tile--feature .tw1-tile__price { font-size: 0.95rem; }
.tw1-tile--feature .tw1-tile__save { font-size: 11px; }
.tw1-tile__floating-badge {
  position: absolute;
  top: 24px;
  left: -12px;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  z-index: 3;
}
.tw1-tile__floating-icon {
  width: 40px; height: 40px;
  background: var(--tw-green-light);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tw-green);
  flex-shrink: 0;
}
.tw1-tile__floating-icon svg { width: 20px; height: 20px; }
.tw1-tile__floating-text {
  display: flex; flex-direction: column;
  font-size: 0.8rem; line-height: 1.3; color: var(--tw-ink);
}
.tw1-tile__floating-text strong { font-weight: 700; }
.tw1-tile__floating-text span { color: var(--tw-ink-muted); font-size: 0.72rem; }

/* Tablet / iPad range: stack the text over the product-tile grid.
   Raised from 989px to 1129px so the whole 750–1130px range uses the clean
   vertical stack instead of the cramped 50/50 side-by-side that clipped the
   tiles (see the matching override in hero-banner-enhanced.liquid). */
@media screen and (max-width: 1129px) {
  .banner:has(.tw1-hero-tiles) { display: flex; flex-direction: column; }
  .tw1-hero-tiles {
    position: relative;
    width: 100%;
    padding: 24px 20px 40px;
    aspect-ratio: 4 / 3.5;
    max-height: none;
  }
}
@media screen and (max-width: 640px) {
  .tw1-hero-tiles {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    aspect-ratio: 4 / 4;
  }
  .tw1-tile { border-radius: 14px; }
  .tw1-tile__badge { font-size: 0.55rem; padding: 4px 8px; }
  .tw1-tile__info { padding: 8px 10px; border-radius: 10px; }
  .tw1-tile__name, .tw1-tile__price { font-size: 0.7rem; }
  .tw1-tile--feature .tw1-tile__name,
  .tw1-tile--feature .tw1-tile__price { font-size: 0.82rem; }
  .tw1-tile__floating-badge { padding: 10px 12px; gap: 8px; top: 12px; left: 6px; }
  .tw1-tile__floating-icon { width: 32px; height: 32px; }
  .tw1-tile__floating-icon svg { width: 16px; height: 16px; }
  .tw1-tile__floating-text { font-size: 0.7rem; }
  .tw1-tile__floating-text span { font-size: 0.62rem; }
}

/* tw1 PDP: 5-star + "89% 5-star · 40,000+ customers" line at top of product info */
.tw1-social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px 0;
}
.tw1-social-proof__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.tw1-social-proof__stars svg { display: block; }
.tw1-social-proof__text {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted, #6b7280);
}

/* tw1 PDP: tagline paragraph below H1 (italic-serif feel) */
.tw1-product-tagline {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-muted, #6b7280);
  margin: 14px 0 22px 0;
  max-width: 48ch;
}
@media screen and (max-width: 749px) {
  .tw1-product-tagline { font-size: 0.95rem; margin: 12px 0 18px 0; }
}

/* tw1 PDP: green discount badge overlay on product gallery (matches ref) */
media-gallery { position: relative; }
.tw1-gallery-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  background: var(--tw-green);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  padding: 9px 15px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(26, 138, 92, 0.25);
  pointer-events: none;
}
@media screen and (max-width: 749px) {
  .tw1-gallery-badge { top: 10px; left: 10px; font-size: 14px; padding: 7px 12px; }
}

/* tw1 PDP: breadcrumb trail polish (snippet renders Home > Collection > Title) */
.product .breadcrumb,
.product__info-container .breadcrumb,
.shopify-section .breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-muted, #6b7280);
  margin: 0 0 14px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.shopify-section .breadcrumb a { color: inherit; text-decoration: none; }
.shopify-section .breadcrumb a:hover { color: var(--ink, #1a1a1a); }

/* tw1 hero primary button gets a trailing arrow that nudges on hover */
.banner__buttons .tw1-btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tw1-btn-arrow .tw1-btn-arrow__icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--tw-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.tw1-btn-arrow:hover .tw1-btn-arrow__icon { transform: translateX(3px); }

/* Feedback: collection "Featured" sort menu renders tiny (caption class on 10px root) */
#SortBy,
.facet-filters__sort,
.facets__label,
.facet-filters .sorting label,
.facet-filters__field label { font-size: 14px !important; }

/* Feedback: remove the custom "Show only in stock" toggle from the filter bar.
   Both the desktop and mobile controls carry .stock-filter. */
.stock-filter { display: none !important; }