/** Shopify CDN: Minification failed

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

**/
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&display=swap');
/* ============================================================================
   KneeReset palette + typography overrides
   Generated 2026-05-25 from reference analysis (RYZE-inspired warm wellness)
   Source: reference/store-emulation/extracted-patterns.md
   ============================================================================ */

:root {
  /* ---- BASE PALETTE (RYZE-derived warm wellness) ---- */
  --kr-bg-primary:    #ffffff;   /* golden parchment — main page bg (matches lamp-glow photos) */
  --kr-bg-section:    #f3f3f3;   /* wheat — alternating sections (drops pink, gains amber) */
  --kr-bg-card:       #ffffff;   /* cream paper — feature cards (was clinical white) */
  --kr-bg-section-alt:#ffffff;   /* deeper wheat — alt sections */

  /* ---- TEXT ---- */
  --kr-text-primary:  #121212;   /* warm dark brown — body text */
  --kr-text-secondary:#3d2a24;   /* deep terracotta — sub-headlines, eyebrows */
  --kr-text-muted:    rgba(18, 18, 18, 0.55);   /* warm brown muted — captions (was cool gray) */

  /* ---- ACCENT (the brand voice) ---- */
  --kr-accent:        #121212;   /* signature terracotta — CTAs, links, badges */
  --kr-accent-deep:   #000000;   /* deeper terracotta — hover */
  --kr-accent-soft:   #f3f3f3;   /* warm wheat tint — soft highlights */
  --kr-accent-amber:  #d99655;   /* brass-lamp glow — secondary accent for ✓ pips, save badges, halo rings */

  /* ---- FUNCTIONAL ---- */
  --kr-border:        rgba(18, 18, 18, 0.10);
  --kr-border-strong: rgba(18, 18, 18, 0.25);
  --kr-success:       #22ab4c;
  --kr-shadow-card:   0 1px 2px rgba(18, 18, 18, 0.04), 0 4px 12px rgba(18, 18, 18, 0.06);
  --kr-shadow-lift:   0 4px 8px rgba(18, 18, 18, 0.08), 0 16px 32px rgba(18, 18, 18, 0.12);

  /* ---- TYPOGRAPHY ---- */
  --kr-font-body:     'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --kr-font-display:  'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- ELIXIR THEME TOKEN OVERRIDES (the variables Elixir reads) ---- */
  /* Note: Elixir stores RGB as comma-separated triplets, used as rgb(var(--token)) */
  --color-button:               18, 18, 18;          /* LumiFlux black */
  --color-button-text:          255, 255, 255;       /* white (kept) */
  --color-secondary-button:     255, 255, 255;        /* LumiFlux white */
  --color-secondary-button-text:255, 255, 255;
  --color-link:                 163, 69, 44;         /* deep terracotta */
}

/* ---- IMPORT FONTS (Inter + DM Sans from Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

/* ============================================================================
   GLOBAL TYPOGRAPHY APPLICATION
   ============================================================================ */

body, .body-typography, p, li, td, th, label, input, textarea, select, button {
  font-family: var(--kr-font-body) !important;
  color: var(--kr-text-primary);
}

h1, h2, h3, h4, h5, h6, .heading-typography {
  font-family: var(--kr-font-display) !important;
  color: var(--kr-text-primary);
  letter-spacing: -0.01em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* ============================================================================
   BACKGROUND PALETTE APPLICATION
   ============================================================================ */

/* Main body bg → warm cream */
body { background-color: var(--kr-bg-primary); }

/* Apply alternating section pattern for shopify-section wrappers
   (these wrap every theme section; we tint each odd one warm-pink-cream) */
.shopify-section:nth-of-type(even) > section,
.shopify-section:nth-of-type(even) > div {
  background-color: var(--kr-bg-section);
}

/* ============================================================================
   ACCENT APPLICATION (CTAs, links, badges)
   ============================================================================ */

/* Primary buttons → terracotta */
button.button--primary,
.button--primary,
button[type="submit"],
.btn-primary,
a.btn-primary,
.product-form__submit,
.shopify-payment-button__button--unbranded,
.add-to-cart {
  background-color: var(--kr-accent) !important;
  color: #ffffff !important;
  border-color: var(--kr-accent) !important;
  font-family: var(--kr-font-display) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

button.button--primary:hover,
.button--primary:hover,
button[type="submit"]:hover,
.btn-primary:hover,
a.btn-primary:hover,
.product-form__submit:hover,
.add-to-cart:hover {
  background-color: var(--kr-accent-deep) !important;
  border-color: var(--kr-accent-deep) !important;
}

/* Links → deep terracotta */
a:not(.button):not(.btn-primary) {
  color: var(--kr-accent-deep);
}

a:not(.button):not(.btn-primary):hover {
  color: var(--kr-accent);
}

/* Compare-at price strikethrough → muted */
.price--compare, .price__compare, s.price-item--regular {
  color: var(--kr-text-muted);
}

/* Sale price (the $119.99) → terracotta */
.price__sale, .price--sale .price-item--sale {
  color: var(--kr-accent-deep);
}

/* ============================================================================
   CARD + SECTION POLISH
   ============================================================================ */

/* Cards (review cards, benefit cards, stat cards) */
.product-card, .review-card, .stat-card, .benefit-card,
[class*="card"], [class*="-card"] {
  background-color: var(--kr-bg-card);
  border: 1px solid var(--kr-border);
  border-radius: 12px;
  box-shadow: var(--kr-shadow-card);
}

[class*="card"]:hover, [class*="-card"]:hover {
  box-shadow: var(--kr-shadow-lift);
}

/* Verified / trust badges */
.verified-badge, .trust-badge, [class*="verified"] {
  background-color: var(--kr-accent-soft);
  color: var(--kr-accent-deep);
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 8px;
}

/* ============================================================================
   ANNOUNCEMENT / GUARANTEE STRIP (top bar)
   ============================================================================ */

.announcement-bar, [class*="announcement"] {
  background-color: var(--kr-text-primary);  /* dark brown bar */
  color: var(--kr-bg-primary);                /* cream text */
}

.announcement-bar a, [class*="announcement"] a {
  color: var(--kr-bg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   FORM POLISH
   ============================================================================ */

input, select, textarea {
  border-color: var(--kr-border-strong);
  background-color: var(--kr-bg-card);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--kr-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(202, 88, 57, 0.12);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  h1 { font-size: clamp(2rem, 6vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
}


/* ============================================================================
   TIER 2 ADDITIONS — 2026-05-25 21:25
   ============================================================================ */

/* Fix the customer-reviews-carousel section heading where the rating badge
   was overlapping the title text */
.customer-reviews-carousel,
[class*="customer-reviews-carousel"] {
  padding-top: 64px !important;
}

.customer-reviews-carousel__header,
[class*="reviews-carousel__header"],
[class*="reviews-carousel"] .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: 32px;
  position: relative;
}

/* Move the rating summary badge BELOW the title rather than overlapping it */
.customer-reviews-carousel .rating-summary,
[class*="reviews-carousel"] .rating-summary,
[class*="reviews-carousel"] [class*="rating-summary"],
[class*="reviews-carousel"] [class*="rating_summary"] {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin-top: 12px;
  order: 2;
}

/* Make the title heading more prominent */
[class*="reviews-carousel"] h1,
[class*="reviews-carousel"] h2,
[class*="reviews-carousel"] h3 {
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.15 !important;
  margin-bottom: 8px;
  order: 1;
}

/* Style the new KR sections to integrate with the page rhythm */
.kr-section-five-pillars + .shopify-section,
.kr-section-guarantee-strip + .shopify-section {
  margin-top: 0;
}

/* Section-padding consistency for new KR sections */
.kr-pillars {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

@media (max-width: 768px) {
  .kr-pillars {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* Make sure the satisfaction-guarantee button now matches our terracotta */
[class*="satisfaction-guarantee"] button,
[class*="satisfaction-guarantee"] .button,
[class*="satisfaction-guarantee"] a[role="button"] {
  background: var(--kr-accent, #ca5839) !important;
  color: #ffffff !important;
  border-color: var(--kr-accent, #ca5839) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* RYZE-style ALL-CAPS treatment for primary CTAs */
.button--primary,
button.button--primary,
.product-form__submit,
button[type="submit"]:not([class*="search"]):not([class*="filter"]) {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* Photo grid empty-state — until Sawyer's images land, hide that empty section */
.shopify-section [class*="photo-grid"]:empty,
.shopify-section [class*="photo_grid"]:empty {
  display: none;
}


/* ============================================================================
   TIER 2 FIX-UP — correct selectors after DOM inspection
   ============================================================================ */

/* Reviews carousel — actual class is .reviews-transformation-section,
   title is h2.reviews-subtitle.section-title.heading.h1,
   rating badge is .rating-summary-wrapper */
.reviews-transformation-section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.reviews-transformation-section h2.reviews-subtitle,
.reviews-transformation-section .section-title.heading {
  display: block !important;
  text-align: center !important;
  padding: 12px 0 !important;
  margin-bottom: 8px !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.15 !important;
}

.reviews-transformation-section .rating-summary-wrapper {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 auto 24px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  background: var(--kr-accent-soft, #f9f1e9);
  color: var(--kr-text-primary, #533a2d);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--kr-border, #f5f0ec);
  order: -1;
}

/* Container should arrange children vertically so badge sits ABOVE title */
.reviews-transformation-section .section-header,
.reviews-transformation-section .reviews-header,
.reviews-transformation-section > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}


/* ============================================================================
   TIER 3 POLISH — 2026-05-25 21:45
   White cards · comparison highlight · verified badges · mobile · sticky CTA
   ============================================================================ */

/* ---- Benefit grid (RYZE pattern: white cards on cream) ---- */
.scrolling-features-bar,
[class*="scrolling-features-bar"] {
  background: var(--kr-bg-section, #f9f1e9) !important;
  padding: 28px 16px !important;
}

.scrolling-features-bar [class*="feature"],
[class*="scrolling-features-bar"] [class*="feature"] {
  background: var(--kr-bg-card, #ffffff);
  border: 1px solid var(--kr-border, #f5f0ec);
  border-radius: 999px;
  padding: 10px 20px !important;
  color: var(--kr-text-primary, #533a2d) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- Statistics column → 3 white stat cards on cream ---- */
.statistics-column,
[class*="statistics-column"] {
  background: var(--kr-bg-primary, #fcfbf3);
  padding: 80px 24px !important;
}

[class*="statistics-column"] [class*="statistic-item"],
[class*="statistics-column"] [class*="stat-card"],
[class*="statistics-column"] [class*="column"] > div {
  background: var(--kr-bg-card, #ffffff);
  border: 1px solid var(--kr-border, #f5f0ec);
  border-radius: 14px;
  padding: 28px 22px !important;
  box-shadow: var(--kr-shadow-card);
  text-align: center;
}

[class*="statistics-column"] [class*="title"],
[class*="statistics-column"] [class*="number"] {
  color: var(--kr-accent-deep, #a3452c) !important;
  font-family: var(--kr-font-display, 'DM Sans', sans-serif);
  font-weight: 700;
}

/* ---- Comparison table → KneeReset column highlighted, competitor muted ---- */
.product-comparison,
[class*="product-comparison"] {
  background: var(--kr-bg-section, #f9f1e9) !important;
  padding: 80px 24px !important;
}

[class*="product-comparison"] [class*="product_column"]:nth-of-type(1),
[class*="product-comparison"] [class*="product-column"]:nth-of-type(1) {
  background: var(--kr-bg-card, #ffffff) !important;
  border: 2px solid var(--kr-accent, #ca5839) !important;
  border-radius: 14px;
  padding: 24px !important;
  box-shadow: var(--kr-shadow-lift);
  transform: scale(1.02);
  position: relative;
  z-index: 2;
}

[class*="product-comparison"] [class*="product_column"]:nth-of-type(1)::before,
[class*="product-comparison"] [class*="product-column"]:nth-of-type(1)::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kr-accent, #ca5839);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 999px;
}

[class*="product-comparison"] [class*="product_column"]:nth-of-type(2),
[class*="product-comparison"] [class*="product-column"]:nth-of-type(2) {
  background: var(--kr-bg-section-alt, #fcfbf3) !important;
  border: 1px solid var(--kr-border, #f5f0ec) !important;
  border-radius: 14px;
  padding: 24px !important;
  opacity: 0.78;
  filter: saturate(0.7);
}

[class*="product-comparison"] [class*="feature_row"],
[class*="product-comparison"] [class*="feature-row"] {
  border-bottom: 1px solid var(--kr-border, #f5f0ec);
  padding: 12px 0 !important;
}

/* ---- Verified badges on review cards ---- */
.reviews-transformation-section [class*="verified"],
.reviews-transformation-section [class*="verified-badge"],
.reviews-transformation-section .verified-buyer-text {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--kr-accent-soft, #f9f1e9) !important;
  color: var(--kr-accent-deep, #a3452c) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: 999px;
  border: 1px solid var(--kr-border-strong, #e8ddd3) !important;
}

.reviews-transformation-section [class*="verified"]::before,
.reviews-transformation-section [class*="verified-badge"]::before,
.reviews-transformation-section .verified-buyer-text::before {
  content: '✓';
  font-size: 12px;
  margin-right: 2px;
  color: var(--kr-accent, #ca5839);
  font-weight: 900;
}

/* Review cards themselves get cream → white treatment */
.reviews-transformation-section [class*="review-card"],
.reviews-transformation-section [class*="review_card"],
.reviews-transformation-section .review-item {
  background: var(--kr-bg-card, #ffffff) !important;
  border: 1px solid var(--kr-border, #f5f0ec) !important;
  border-radius: 14px !important;
  box-shadow: var(--kr-shadow-card);
}

/* ---- Steps section → numbered cards (kr-pillars style) ---- */
.steps,
[class*="steps"] {
  background: var(--kr-bg-primary, #fcfbf3) !important;
  padding: 80px 24px !important;
}

[class*="steps"] [class*="step"]:not([class*="steps"]) {
  background: var(--kr-bg-card, #ffffff);
  border: 1px solid var(--kr-border, #f5f0ec);
  border-radius: 14px;
  padding: 28px 22px !important;
  box-shadow: var(--kr-shadow-card);
}

[class*="steps"] [class*="step_title"],
[class*="steps"] [class*="step-title"] {
  color: var(--kr-text-primary, #533a2d) !important;
  font-family: var(--kr-font-display, 'DM Sans', sans-serif);
  font-weight: 700;
}

/* ---- FAQ section polish ---- */
.store-faq,
[class*="store-faq"] {
  background: var(--kr-bg-primary, #fcfbf3) !important;
  padding: 80px 24px !important;
}

[class*="store-faq"] [class*="faq_item"],
[class*="store-faq"] [class*="faq-item"] {
  background: var(--kr-bg-card, #ffffff);
  border: 1px solid var(--kr-border, #f5f0ec);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

[class*="store-faq"] [class*="faq_item"] summary,
[class*="store-faq"] [class*="faq-item"] summary,
[class*="store-faq"] [class*="faq_item"] [class*="question"],
[class*="store-faq"] [class*="faq-item"] [class*="question"] {
  padding: 18px 22px;
  color: var(--kr-text-primary, #533a2d);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

[class*="store-faq"] [class*="faq_item"] [class*="answer"],
[class*="store-faq"] [class*="faq-item"] [class*="answer"] {
  padding: 0 22px 18px;
  color: var(--kr-text-primary, #533a2d);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- Video testimonials section ---- */
.video-testimonials,
[class*="video-testimonials"] {
  background: var(--kr-bg-section, #f9f1e9) !important;
  padding: 80px 24px !important;
}

/* ---- Sticky CTA bar (rendered by kr-sticky-cta.liquid) ---- */
.kr-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--kr-bg-card, #ffffff);
  border-top: 1px solid var(--kr-border-strong, #e8ddd3);
  box-shadow: 0 -8px 24px rgba(83, 58, 45, 0.12);
  z-index: 9999;
  padding: 12px 16px;
}

.kr-sticky-cta.is-visible {
  transform: translateY(0);
}

.kr-sticky-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kr-sticky-cta__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--kr-border, #f5f0ec);
  flex-shrink: 0;
}

.kr-sticky-cta__info {
  flex: 1;
  min-width: 0;
}

.kr-sticky-cta__name {
  color: var(--kr-text-primary, #533a2d);
  font-family: var(--kr-font-display, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kr-sticky-cta__price {
  color: var(--kr-accent-deep, #a3452c);
  font-size: 13px;
  font-weight: 700;
}

.kr-sticky-cta__price-compare {
  color: var(--kr-text-muted, #7a7376);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 6px;
  font-size: 12px;
}

.kr-sticky-cta__btn {
  background: var(--kr-accent, #ca5839);
  color: #ffffff;
  font-family: var(--kr-font-display, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.16s ease;
}

.kr-sticky-cta__btn:hover {
  background: var(--kr-accent-deep, #a3452c);
}

@media (max-width: 600px) {
  .kr-sticky-cta__inner { gap: 10px; }
  .kr-sticky-cta__btn { padding: 10px 14px; font-size: 12px; }
  .kr-sticky-cta__thumb { width: 40px; height: 40px; }
  .kr-sticky-cta__name { font-size: 13px; }
}

/* ---- Mobile 390px polish ---- */
@media (max-width: 600px) {
  /* Tighter section padding on mobile */
  .kr-pillars { padding: 48px 16px !important; }
  .kr-strip { padding: 14px 16px; }
  .kr-strip__inner { gap: 10px 18px; font-size: 13px; }

  /* Hero compaction */
  [class*="new-hero"] h1,
  [class*="new-hero"] h2 { font-size: clamp(28px, 7vw, 38px) !important; line-height: 1.15 !important; }

  /* Reviews carousel padding */
  .reviews-transformation-section { padding: 32px 12px !important; }
  .reviews-transformation-section h2.reviews-subtitle { font-size: 26px !important; line-height: 1.2 !important; }

  /* Bottom-pad for sticky CTA */
  main, [role="main"] { padding-bottom: 88px !important; }
}


/* ============================================================================
   LUMIFLUX-style yellow-checkmark feature bullets in the buy box
   (richtext field can't have classes, so we target by section container)
   ============================================================================ */

[class*="shop-product-details"] ul,
[class*="shop_product_details"] ul,
.product-details ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 12px !important;
}

[class*="shop-product-details"] ul li,
[class*="shop_product_details"] ul li,
.product-details ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 5px 0 !important;
  color: var(--kr-text-primary, #533a2d) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  list-style: none !important;
}

[class*="shop-product-details"] ul li::before,
[class*="shop_product_details"] ul li::before,
.product-details ul li::before {
  content: '\2713';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kr-accent, #ca5839);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}


/* ============================================================================
   CLEANSEAT PURGE — hide menu items + fall-back content until Sawyer cleans nav
   ============================================================================ */

/* Footer Shop column — hide items pointing to deleted/CleanSeat products */
.footer__nav a[href*="cleanseat"],
.footer__nav a[href*="cloudstep"],
.footer__nav a[href*="touchclean"],
.footer__nav a[href*="bathroom-hygiene"],
.footer__nav a[href*="memory-foam-bath-mat"],
.footer-bottom a[href*="cleanseat"],
.footer-bottom a[href*="cloudstep"],
.footer-bottom a[href*="touchclean"],
[class*="footer"] a[href*="cleanseat"],
[class*="footer"] a[href*="cloudstep"],
[class*="footer"] a[href*="touchclean"],
[class*="footer"] a[href*="bathroom-hygiene"],
[class*="footer"] a[href*="memory-foam-bath-mat"] {
  display: none !important;
}

/* Photo grid — if all images get cleared, hide the section entirely */
.shopify-section [class*="photo-grid"]:has(picture[src=""]),
.shopify-section [class*="photo_grid"]:has(img[src=""]) {
  display: none;
}

/* Hide empty photo-grid items (no image and no caption) */
[class*="photo-grid"] [class*="image"]:has(img:not([src])) {
  display: none;
}

/* "Our Best Sellers" SEE EVERYTHING button -> match terracotta */
[class*="collection-grid"] [class*="view-all"],
[class*="collection-grid"] a[class*="view_all"],
[class*="collection-grid"] .button {
  background: var(--kr-accent, #ca5839) !important;
  color: #ffffff !important;
  border-color: var(--kr-accent, #ca5839) !important;
}

/* Hide the Shopify-native "Shop with AI" floating overlays during preview */
shop-pay-modal-button,
[class*="shop-pay-modal"],
[id*="shop-with-ai"] {
  /* Don't actually hide — they're useful — but ensure they don't overlap content */
}

/* Hide hero background image fallback if it's pointing to CleanSeat-era file */
[class*="new-hero"] img[src*="Gemini_Generated_Image"],
[class*="new-hero"] img[src*="cleanseat"],
[class*="new-hero"] img[src*="bidet"] {
  visibility: hidden;
}


/* ============================================================================
   Hide empty homepage sections until Sawyer images land
   ============================================================================ */

/* Photo grid section — hide entirely on storefront until images are uploaded */
.shopify-section--photo-grid,
[class*="photo-grid"][class*="section-template"],
[id*="photo_grid"]:not([class*="product-grid"]) {
  display: none !important;
}

/* satisfaction-guarantee homepage instance — we have kr-guarantee-hero on product page
   and email signup serves as final CTA on homepage */
.shopify-section--satisfaction-guarantee,
[class*="satisfaction-guarantee"][class*="8heP99"] {
  display: none !important;
}

/* Empty review card images — hide the picture block when there is no image src */
.review-card picture:not(:has(img[src])),
[class*="review"] [class*="image"]:has(img:not([src])),
[class*="review"] [class*="image"]:has(img[src=""]) {
  display: none;
}

/* When a review card has no image, restyle the card so it doesn't have the gap where the image was */
[class*="review-card"]:has(picture:not(:has(img[src]))),
[class*="review_card"]:has(picture:not(:has(img[src]))) {
  min-height: auto;
}


/* ============================================================================
   ITER 2 — fix CleanSeat-era pink-purple gradient on satisfaction-guarantee
   ============================================================================ */

/* The accent_text "Money-Back" used a pink->purple gradient hardcoded in JSON.
   Override to use the KneeReset terracotta palette. */
[class*="satisfaction-guarantee"] [class*="accent"],
[class*="satisfaction_guarantee"] [class*="accent"],
.satisfaction-guarantee__accent-text,
.satisfaction-guarantee [class*="accent-text"],
.satisfaction-guarantee [class*="accent_text"] {
  background: linear-gradient(135deg, var(--kr-accent, #ca5839), var(--kr-accent-deep, #a3452c)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--kr-accent-deep, #a3452c) !important;
  font-style: italic;
  font-family: var(--kr-font-display, 'DM Sans', sans-serif) !important;
}

/* Satisfaction guarantee CTA — make it solid terracotta not weird gradient */
[class*="satisfaction-guarantee"] .button,
[class*="satisfaction-guarantee"] button,
[class*="satisfaction-guarantee"] a[role="button"] {
  background: var(--kr-accent, #ca5839) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--kr-accent, #ca5839) !important;
}

/* Shield icon in satisfaction-guarantee — make terracotta */
[class*="satisfaction-guarantee"] svg path,
[class*="satisfaction-guarantee"] [class*="icon"] svg {
  fill: var(--kr-accent, #ca5839);
  stroke: var(--kr-accent, #ca5839);
}

/* ============================================================================
   ITER 2 — Trust strip text contrast fix (some variants had faded text)
   ============================================================================ */
.kr-strip__inner { color: inherit !important; opacity: 1 !important; }
.kr-strip--accent .kr-strip__inner { color: #ffffff; }
.kr-strip--brown .kr-strip__inner { color: var(--kr-bg-primary, #fcfbf3); }
.kr-strip--cream .kr-strip__inner { color: var(--kr-text-primary, #533a2d); }


/* ============================================================================
   RYZE-MATCH PASS — 2026-05-26
   Dawn-layout-aware overrides + RYZE-pattern alignment
   ============================================================================ */

/* Dawn's announcement-bar → dark brown like our kr-countdown */
.utility-bar, .announcement-bar {
  background: var(--kr-text-primary, #533a2d) !important;
  color: var(--kr-bg-primary, #fcfbf3) !important;
}
.utility-bar a, .announcement-bar a { color: var(--kr-bg-primary, #fcfbf3) !important; }

/* Dawn's price block — terracotta sale, muted compare */
.price--on-sale .price-item--sale,
.price__regular .price-item.price-item--last {
  color: var(--kr-accent-deep, #a3452c) !important;
  font-family: var(--kr-font-display, 'DM Sans', sans-serif);
  font-weight: 700;
}
.price--on-sale .price-item--regular,
.price__compare .price-item.price-item--last {
  color: var(--kr-text-muted, #7a7376) !important;
}

/* Dawn's "Sale" badge */
.badge, .price__badge-sale {
  background: var(--kr-accent, #ca5839) !important;
  color: #ffffff !important;
  border-color: var(--kr-accent, #ca5839) !important;
  font-family: var(--kr-font-display, 'DM Sans', sans-serif);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Dawn's quantity selector — warm */
.quantity__button, .quantity__input {
  border-color: var(--kr-border-strong, #e8ddd3) !important;
  color: var(--kr-text-primary, #533a2d) !important;
  background: var(--kr-bg-card, #ffffff) !important;
}

/* Dawn's ATC button — terracotta */
.product-form__submit, .shopify-payment-button__button--unbranded,
.button--primary, button.button--primary {
  background: var(--kr-accent, #ca5839) !important;
  color: #ffffff !important;
  border-color: var(--kr-accent, #ca5839) !important;
  font-family: var(--kr-font-display, 'DM Sans', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-form__submit:hover, .button--primary:hover {
  background: var(--kr-accent-deep, #a3452c) !important;
  border-color: var(--kr-accent-deep, #a3452c) !important;
}

/* Dawn's accordion (Shipping & Returns / Dimensions) */
.product__accordion .accordion summary, .collapsible-tab__heading {
  color: var(--kr-text-primary, #533a2d) !important;
  border-color: var(--kr-border, #f5f0ec) !important;
}

/* Header palette */
.header-wrapper { background: var(--kr-bg-primary, #fcfbf3); }
.header__menu-item { color: var(--kr-text-primary, #533a2d) !important; }
.header__icon { color: var(--kr-text-primary, #533a2d) !important; }
.header__icon:hover { color: var(--kr-accent, #ca5839) !important; }
.header__heading-link span { color: var(--kr-text-primary, #533a2d); }

/* Bundle picker tablet breakpoint */
@media (max-width: 1100px) and (min-width: 561px) {
  .kr-section-bundle-picker .kr-bp__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Photo testimonial mobile */
@media (max-width: 700px) {
  .kr-section-photo-testimonial .kr-pt__grid { gap: 16px; }
}

/* CTA band dark variant guarantee */
.kr-section-cta-band.kr-cta-band--dark .kr-cta-band__guarantee {
  color: rgba(252, 251, 243, 0.85);
}

/* Dawn default footer — hide once kr-footer is in place via footer-group */
section.shopify-section--footer-group .footer:not(.kr-footer) {
  /* If kr-footer is sibling — hide the default */
}

/* Tighten Dawn's product-info area to give room for our sections below */
@media (min-width: 990px) {
  .product__info-wrapper { padding-bottom: 24px; }
}


/* ============================================================================
   HEADER-MOBILE-FIX — 2026-05-26 Round 2C
   Fix UrbanLaneShop logo wrap on tight viewports + general header polish
   ============================================================================ */

.header__heading,
.header__heading-link {
  white-space: nowrap !important;
  font-size: clamp(16px, 4vw, 22px) !important;
  letter-spacing: 0.01em;
  flex-shrink: 1 !important;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}

.header__heading-link span,
.header__heading-link h1 {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tighten header padding on small screens */
@media (max-width: 560px) {
  .header-wrapper { padding-left: 12px; padding-right: 12px; }
  .header { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .header__icons { gap: 4px; }
  .header__icon { padding: 6px; }
  .header__inline-menu { display: none; }
}

/* Make sure sticky CTA never overlaps important content on mobile */
@media (max-width: 560px) {
  main, [role="main"] { padding-bottom: 96px !important; }
}


/* ============================================================================
   POLISH ROUND 3 — 2026-05-26
   - Scoped Subscribe & Save to main-product only (no more bleed)
   - Intentional placeholder designs for empty image slots
   - Typography hierarchy polish (RYZE-style contrast)
   - Bundle card hover lift + smooth transitions
   - Trust strip icon glyphs
   ============================================================================ */

/* Subscribe & Save block removed 2026-05-27 */


/* --- 2. Intentional placeholder designs (until images land) --- */

/* Photo testimonial card placeholders — branded gradient with icon hint */
.kr-section-photo-testimonial .kr-pt__photo:not([style*="background-image"]) {
  background: linear-gradient(135deg, var(--kr-accent-soft, #f9f1e9), var(--kr-bg-section, #f9f1e9), var(--kr-bg-card, #ffffff)) !important;
  position: relative;
  overflow: hidden;
}

.kr-section-photo-testimonial .kr-pt__photo:not([style*="background-image"])::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(202, 88, 57, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(83, 58, 45, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.kr-section-photo-testimonial .kr-pt__photo:not([style*="background-image"])::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--kr-bg-card, #ffffff);
  border: 2px solid var(--kr-accent-soft, #f9f1e9);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ca5839' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2'/></svg>");
  background-size: 36px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 6px 18px rgba(83, 58, 45, 0.12);
}

.kr-section-photo-testimonial .kr-pt__photo-note { display: none !important; }

/* Ritual card photo placeholder — branded with bigger icon */
.kr-section-ritual-card .kr-ritual__photo:not(.kr-ritual__photo--has-image) {
  background: linear-gradient(135deg, var(--kr-accent-soft, #f9f1e9) 0%, var(--kr-bg-card, #ffffff) 60%, var(--kr-bg-section, #f9f1e9) 100%) !important;
  position: relative;
}

.kr-section-ritual-card .kr-ritual__photo:not(.kr-ritual__photo--has-image)::before {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 14px;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(202, 88, 57, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(83, 58, 45, 0.08) 0%, transparent 60%);
}

.kr-section-ritual-card .kr-ritual__photo:not(.kr-ritual__photo--has-image)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: var(--kr-bg-card, #ffffff);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ca5839' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>");
  background-size: 48px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 12px 28px rgba(83, 58, 45, 0.16);
}

.kr-section-ritual-card .kr-ritual__photo-note { display: none !important; }

/* Lifestyle band placeholder — replace bare gradient with subtle pattern */
.kr-section-lifestyle-band:not([style*="background-image"]) .kr-life:not(.kr-life--with-image) {
  background:
    linear-gradient(135deg, var(--kr-bg-section, #f9f1e9) 0%, var(--kr-bg-card, #ffffff) 50%, var(--kr-accent-soft, #f9f1e9) 100%) !important;
  position: relative;
  overflow: hidden;
}

.kr-section-lifestyle-band .kr-life:not(.kr-life--with-image)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(202, 88, 57, 0.18) 0%, rgba(202, 88, 57, 0.04) 60%, transparent 80%);
  pointer-events: none;
}

@media (max-width: 700px) {
  .kr-section-lifestyle-band .kr-life:not(.kr-life--with-image)::after { width: 180px; height: 180px; top: auto; bottom: 12%; right: 4%; }
}

.kr-section-lifestyle-band .kr-life__placeholder-note { display: none !important; }

/* --- 3. Typography hierarchy polish (RYZE-style heading sizes) --- */

/* Bigger section headings overall */
.kr-section-bundle-picker .kr-bp__heading,
.kr-section-ritual-card .kr-ritual__heading,
.kr-section-photo-testimonial .kr-pt__heading,
.kr-section-five-pillars .kr-pillars__heading,
.kr-section-progress-timeline .kr-timeline__heading,
.kr-section-guarantee-hero .kr-ghero__heading,
.kr-section-email-signup .kr-signup__heading {
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* Bigger eyebrow letter-spacing for that editorial pop */
.kr-section-bundle-picker .kr-bp__eyebrow,
.kr-section-ritual-card .kr-ritual__eyebrow,
.kr-section-photo-testimonial .kr-pt__eyebrow,
.kr-section-five-pillars .kr-pillars__eyebrow,
.kr-section-progress-timeline .kr-timeline__eyebrow,
.kr-section-guarantee-hero .kr-ghero__eyebrow,
.kr-section-email-signup .kr-signup__eyebrow,
.kr-section-cta-band .kr-cta-band__eyebrow {
  letter-spacing: 0.22em !important;
  font-size: 12px !important;
}

/* --- 4. Bundle card hover + smooth transitions --- */
.kr-section-bundle-picker .kr-bp__card {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s, box-shadow 0.22s !important;
  will-change: transform;
}

.kr-section-bundle-picker .kr-bp__card:hover {
  transform: translateY(-6px) !important;
}

.kr-section-bundle-picker .kr-bp__cta {
  transition: background 0.16s ease;
}

.kr-section-bundle-picker .kr-bp__card:hover .kr-bp__cta {
  background: var(--kr-accent-deep, #a3452c);
}

/* --- 5. Trust strip glyph icons (subtle visual upgrade) --- */
.kr-section-guarantee-strip .kr-strip__item {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kr-section-guarantee-strip .kr-strip__check {
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  padding: 3px;
  box-sizing: content-box;
}

.kr-section-guarantee-strip.kr-strip--cream .kr-strip__check {
  background: var(--kr-accent-soft, #f9f1e9);
  color: var(--kr-accent, #ca5839);
}

/* --- 6. Soft hover lift on all KR cards (cohesion) --- */
.kr-section-five-pillars .kr-pillar,
.kr-section-photo-testimonial .kr-pt__card,
.kr-section-progress-timeline .kr-step {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kr-section-five-pillars .kr-pillar:hover {
  transform: translateY(-3px);
}

/* --- 7. Hero / lifestyle band typography polish --- */
.kr-section-lifestyle-band .kr-life__heading {
  letter-spacing: -0.025em;
  font-weight: 800;
}

/* --- 8. Reduce visual noise: tighten Dawn buy-box accordion padding --- */
.product .accordion summary,
.collapsible-tab__heading {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* MARQUEE-FIX-V1 — force explicit colors with hex fallback specificity */
.shopify-section.kr-section-marquee .kr-marquee,
section.kr-marquee {
  background: #121212 !important;
  color: #ffffff !important;
}

.shopify-section.kr-section-marquee .kr-marquee--accent,
section.kr-marquee.kr-marquee--accent {
  background: #ca5839 !important;
  color: #ffffff !important;
}

.shopify-section.kr-section-marquee .kr-marquee--cream,
section.kr-marquee.kr-marquee--cream {
  background: #f9f1e9 !important;
  color: #533a2d !important;
}

.kr-marquee__item {
  color: inherit !important;
}

.kr-marquee__star {
  color: rgba(255, 255, 255, 0.75) !important;
}

.kr-marquee--cream .kr-marquee__star {
  color: #ca5839 !important;
}


/* ============================================================================
   RYZE BUY-BOX TRANSFORMATION — 2026-05-26
   Target Dawn's main-product DOM to look like RYZE's above-the-fold
   ============================================================================ */

/* Hide Dawn's auto-rating widget (we use our own rating block) */
.product__info-container .rating,
.product__info-container > .rating-wrap {
  display: none !important;
}

/* Hide vendor + share (RYZE doesn't have them, looks cleaner) */
.product__info-container .product__text.caption-with-letter-spacing,
.product__info-container > .vendor,
.product__info-container .share-button {
  display: none !important;
}

/* Hide Dawn's default rating component if it auto-shows on product info */
.product__info-container .reviews-rating {
  display: none !important;
}

/* Product TITLE — bigger + bolder (RYZE-style) */
.product__title h1,
.product__info-container .product__title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(28px, 3.6vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 8px 0 8px !important;
  color: #1f1410 !important;
}

/* Rating block (Dawn's `rating` block — shows ★★★★★ + count) */
.product__info-container .rating-star,
.product__rating .rating-star {
  color: #ca5839 !important;
  font-size: 18px !important;
}

.product__rating-count,
.product__info-container .rating-text {
  color: #533a2d !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Caption / sub-headline (RYZE has bold lead-in like "30 Serving Coffee:") */
.product__info-container .product__text:not(.caption-with-letter-spacing) {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #533a2d !important;
  margin: 6px 0 14px !important;
  max-width: 100%;
}

/* PRICE — make it BIG + bold like RYZE */
.product__info-container .price {
  position: relative;
  margin: 4px 0 0 !important;
}

.price__container {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.price__regular .price-item--regular,
.price__sale .price-item--last,
.price-item.price-item--last,
.price-item.price-item--sale {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  color: #ca5839 !important;
  line-height: 1 !important;
}

.price__sale .price-item--regular,
.price__compare .price-item.price-item--last,
s.price-item {
  color: #7a7376 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

/* "Sale" badge → "25% OFF TODAY" (set in Dawn via badge text, or override with CSS content) */
.price__badge-sale,
.badge.price__badge-sale {
  background: #ca5839 !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  border: none !important;
  font-size: 0 !important;
}

.price__badge-sale::after {
  content: '25% OFF TODAY';
  font-size: 11px;
}

/* VARIANT picker — style as RYZE-style big pills */
.product__info-container variant-radios fieldset,
.product__info-container fieldset.product-form__input,
.product-form__input--pill {
  border: none !important;
  padding: 0 !important;
  margin: 18px 0 16px !important;
}

.product__info-container fieldset.product-form__input legend,
.product-form__input legend {
  color: #533a2d !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 10px !important;
}

.product__info-container fieldset .product-form__input label,
.product-form__input--pill label {
  border: 2px solid #e8ddd3 !important;
  background: #ffffff !important;
  color: #533a2d !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  cursor: pointer;
  transition: border-color 0.16s, transform 0.16s;
}

.product__info-container fieldset .product-form__input input:checked + label,
.product-form__input--pill input:checked + label {
  border-color: #ca5839 !important;
  background: #f9f1e9 !important;
  color: #a3452c !important;
}

.product__info-container fieldset .product-form__input label:hover,
.product-form__input--pill label:hover {
  transform: translateY(-1px);
}

/* QUANTITY selector — tighter + cream */
quantity-input,
.quantity {
  background: #f9f1e9 !important;
  border: 1px solid #e8ddd3 !important;
  border-radius: 10px !important;
  height: 48px !important;
}

.quantity__button {
  width: 42px !important;
  color: #533a2d !important;
}

.quantity__input {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #533a2d !important;
}

/* ADD TO CART → make HUGE full-width like RYZE's GET STARTED */
.product-form__submit,
button[name="add"],
.product-form__buttons .button {
  background: #ca5839 !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 22px 36px !important;
  width: 100% !important;
  min-height: 64px !important;
  border-radius: 14px !important;
  border: none !important;
  position: relative;
  transition: background 0.16s, transform 0.16s;
}

.product-form__submit:hover,
button[name="add"]:hover {
  background: #a3452c !important;
  transform: translateY(-1px);
}

/* Replace "Add to cart" → "GET KNEERESET TODAY" via CSS content trick won't work
   on button (innerText). Instead use the after-pseudo with visibility hidden.
   Actually we'll just override the visible text via Liquid in a later step. */

/* Add arrow ➜ after ATC button text */
.product-form__submit::after {
  content: ' →';
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.16s;
}

.product-form__submit:hover::after {
  transform: translateX(4px);
}

/* Buy with Shop button — secondary style */
.shopify-payment-button__button--unbranded,
.shopify-payment-button__more-options {
  background: #f9f1e9 !important;
  color: #533a2d !important;
  border: 2px solid #e8ddd3 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* Icon-with-text blocks — RYZE-style trust marks below ATC */
.product__info-container .icon-with-text,
[data-block-handle*="icon-with-text"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 0 !important;
  color: #533a2d !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.product__info-container .icon-with-text svg {
  width: 18px !important;
  height: 18px !important;
  color: #ca5839 !important;
  flex-shrink: 0;
}

/* Stack Buy buttons vertically + tighter gap */
.product-form__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 16px 0 14px !important;
}

/* Tighten the description spacing */
.product__description {
  margin-top: 18px !important;
}

/* Mobile tweaks */
@media (max-width: 749px) {
  .product__title h1 { font-size: clamp(24px, 6vw, 32px) !important; }
  .price__regular .price-item--regular,
  .price__sale .price-item--last,
  .price-item--last { font-size: 30px !important; }
  .product-form__submit { padding: 18px 24px !important; min-height: 58px !important; font-size: 15px !important; }
}


/* ============================================================================
   GALLERY-RYZE-FIX — 2026-05-26
   Single hero image + small thumbnail row (RYZE pattern), tighter buy-box spacing
   ============================================================================ */

/* Container — give it warm cream background like RYZE */
.product__media-wrapper {
  background: #f9f1e9;
  border-radius: 16px;
  padding: 16px;
  overflow: hidden;
  align-self: flex-start;
  position: sticky;
  top: 24px;
}

@media (max-width: 989px) {
  .product__media-wrapper { position: static; }
}

/* Main image — constrain max-height so it doesn'''t dominate */
.product__media-list {
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

.product__media-list .product__media-item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.product__media,
.product__media-wrapper .product__media {
  aspect-ratio: 1 / 1 !important;
  max-height: 600px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff;
}

.product__media img,
.product__media-list img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* Hide all but the active slide (single-hero behavior) */
.product__media-list .product__media-item:not(.is-active) {
  display: none !important;
}

/* Thumbnail row — small squares below hero, RYZE-style */
.thumbnail-slider,
.thumbnail-list,
.product__media-thumbnails {
  margin-top: 12px !important;
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
}

.thumbnail-list__item,
.thumbnail-slider__slide {
  flex: 0 0 80px !important;
  width: 80px !important;
  height: 80px !important;
}

.thumbnail {
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.16s;
}

.thumbnail[aria-current=true],
.thumbnail:hover {
  border-color: #ca5839 !important;
}

.thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

/* Slider arrows — make them visible and on-brand */
.slider-button {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid #e8ddd3 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  color: #533a2d !important;
}

.slider-button:hover {
  background: #ca5839 !important;
  color: #ffffff !important;
}

/* Product page grid — tighter columns, RYZE-style 1:1 ratio with proper gap */
.product--medium,
.product--large {
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px !important;
}

@media (max-width: 989px) {
  .product--medium, .product--large {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Right info column — tighten spacing between blocks */
.product__info-wrapper {
  padding: 0 !important;
  max-width: 540px;
}

.product__info-container > * {
  margin-bottom: 12px !important;
}

.product__info-container > *:last-child {
  margin-bottom: 0 !important;
}

/* Title and price get more breathing room */
.product__title { margin-bottom: 4px !important; }
.product__info-container .price { margin-bottom: 14px !important; }

/* Tighten the description + accordion section */
.product__description { margin-top: 12px !important; }
.product__accordion { margin: 8px 0 !important; }


/* ============================================================================
   PRODUCT-GRID-FORCE-V2 — 2026-05-26
   Force .product to use grid layout (Dawn uses flex by default)
   ============================================================================ */

@media (min-width: 990px) {
  .product,
  .product--medium,
  .product--large {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 48px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px !important;
    align-items: start !important;
  }

  .product__media-wrapper {
    grid-column: 1 / 2 !important;
    min-width: 0 !important;
  }

  .product__info-wrapper {
    grid-column: 2 / 3 !important;
    min-width: 0 !important;
  }
}

/* Tablet — keep 2 columns but tighter */
@media (min-width: 750px) and (max-width: 989px) {
  .product,
  .product--medium,
  .product--large {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 20px !important;
  }
}

/* Mobile — single column */
@media (max-width: 749px) {
  .product,
  .product--medium,
  .product--large {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 16px !important;
  }
}


/* ============================================================================
   PRODUCT-GRID-NUCLEAR — 2026-05-26
   Highest-possible specificity: chained classes + ID-less selector path
   ============================================================================ */

@media (min-width: 990px) {
  section .product.product.product,
  div .product.product--medium.grid,
  .shopify-section .product.grid.grid--1-col.grid--2-col-tablet {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 48px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px !important;
    align-items: start !important;
    width: 100% !important;
  }

  section .product .product__media-wrapper.grid__item,
  .shopify-section .product .product__media-wrapper {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  section .product .product__info-wrapper.grid__item,
  .shopify-section .product .product__info-wrapper {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* CAPTION-LEAD-IN — RYZE-style bold lead-in caption */
.product__info-container .product__text:not(.caption-with-letter-spacing) {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #533a2d !important;
  margin: 8px 0 16px !important;
}

.product__info-container .product__text strong,
.product__info-container .product__text b {
  color: #1f1410 !important;
  font-weight: 700 !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   Collection card thumbnail fix — Dawn stacks card__content (relative)
   on top of card__media (absolute, z-index:0). On our config the inner
   color-scheme-2 makes that overlay paint solid white over the image.
   Force the media + image to render above. (2026-05-26)
   ────────────────────────────────────────────────────────────────────────── */
.card-wrapper .card__inner .card__media { z-index: 1 !important; }
.card-wrapper .card__inner .card__media .media { background: transparent !important; }
.card-wrapper .card__inner .card__content { background: transparent !important; }
.card-wrapper .card__inner.color-scheme-2,
.card-wrapper .card__inner.gradient { background-color: var(--kr-bg-card, #ffffff); }
.card-wrapper .card__inner .card__media img { opacity: 1 !important; }


/* Sale badge must sit above card__media after z-index fix above */
.card-wrapper .card__inner .card__badge { z-index: 2; position: relative; }
.card-wrapper .card__inner .card__content { z-index: 2; position: relative; }


/* ──────────────────────────────────────────────────────────────────────────
   LumiFlux typography adoption (2026-05-26)
   All headings use Assistant — same family as body, hierarchy via SIZE.
   Letter-spacing matches LumiFlux body (0.06rem ≈ 0.06em).
   ────────────────────────────────────────────────────────────────────────── */
body,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.04em;
}
body { letter-spacing: 0.04em; line-height: 1.5; }

/* LumiFlux's heading default weight is 400. Our hero h1/h2 keep 700 for
   conversion impact, but smaller h3/h4 drop to 600 for elegance. */
h3, .h3 { font-weight: 600; }
h4, .h4 { font-weight: 600; }
.kr-section h5, .kr-section h6 { font-weight: 500; }

/* LumiFlux buttons are black-on-white with sharp corners — kill our rounded look */
.kr-btn, .kr-mega__cta, .kr-ritual__btn, .kr-how__btn, .kr-bundle__btn {
  border-radius: 0 !important;
  letter-spacing: 0.08em !important;
}


/* BUTTON TEXT LEGIBILITY OVERRIDE — 2026-05-26 */
/* ──────────────────────────────────────────────────────────────────────────
   Force white text on every dark/black button across the site.
   LumiFlux palette made --kr-accent #121212 (black) which means all default
   button-color rules now paint #121212 on #121212 → invisible label.

   Append-only. Does not touch Sawyer's theme-editor edits.
   ────────────────────────────────────────────────────────────────────────── */

/* Dawn-native primary buttons (Add to cart, ATC, submit, etc.) */
.button,
.button--primary,
.button.button--primary,
.product-form__submit,
button[name="add"],
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
button[type="submit"],
.cart__checkout-button,
input[type="submit"].button {
  color: #ffffff !important;
}

/* Our kr-* section buttons */
.kr-btn,
.kr-mega__cta,
.kr-ritual__btn,
.kr-how__btn,
.kr-bundle__btn,
.kr-bundle-picker__btn,
.kr-guarantee__btn,
.kr-conditions__btn,
.kr-life__btn,
.kr-press__btn,
.kr-newsletter__btn,
.kr-sticky-cta__btn,
.kr-marquee__btn,
.kr-email-signup__btn,
.kr-photo-grid__btn,
.kr-five-pillars__btn,
.kr-mega-buy-box__cta,
.kr-progress-timeline__btn {
  color: #ffffff !important;
}

/* Catch ALL buttons whose computed background is #121212 / #000 / accent-black
   by targeting any element with the kr- prefix or generic .btn class on dark bg */
button.kr-btn,
a.kr-btn,
.kr-btn--primary,
.kr-btn--solid,
.button--solid,
.btn--solid,
.btn-primary {
  color: #ffffff !important;
}

/* Force descendants inside buttons (spans, icons) to inherit white */
.button *,
.button--primary *,
.product-form__submit *,
.shopify-payment-button__button *,
.kr-btn *,
.kr-mega__cta *,
.kr-ritual__btn *,
.kr-how__btn *,
.kr-bundle__btn *,
.kr-mega-buy-box__cta * {
  color: inherit !important;
}

/* Hover state — keep white (some themes flip to bg-color on hover) */
.button:hover,
.button--primary:hover,
.product-form__submit:hover,
button[name="add"]:hover,
.shopify-payment-button__button:hover,
.kr-btn:hover,
.kr-mega__cta:hover,
.kr-ritual__btn:hover,
.kr-how__btn:hover,
.kr-bundle__btn:hover {
  color: #ffffff !important;
}

/* Newsletter "Send me the code" + similar form submits */
.kr-newsletter form button,
.kr-newsletter form input[type="submit"],
.email-signup form button,
form button.button {
  color: #ffffff !important;
}

/* Secondary buttons that have a light bg (cream/wheat) need DARK text — opposite case */
.shopify-payment-button__more-options,
.button--secondary,
.kr-btn--secondary {
  color: #121212 !important;
}


/* BUTTON TEXT LEGIBILITY V2 — 2026-05-26 */
/* ──────────────────────────────────────────────────────────────────────────
   Round 2: classes my first pass missed (per DOM audit).
   Same append-only contract — does not edit anything else.
   ────────────────────────────────────────────────────────────────────────── */

/* Guarantee-hero CTA — "TRY KNEERESET TODAY" on white bg with black pill button */
.kr-ghero__btn,
a.kr-ghero__btn,
.kr-ghero .kr-ghero__btn,
.kr-section-guarantee-hero .kr-ghero__btn {
  color: #ffffff !important;
  background: #121212 !important;
  border: none !important;
}
.kr-ghero__btn:hover {
  color: #ffffff !important;
  background: #000000 !important;
}

/* CTA band — covers BOTH the light "Try It For 30 Days" strip AND the dark
   "Twenty Minutes A Night" footer-band, in both --accent and --dark variants */
.kr-cta-band__btn,
a.kr-cta-band__btn,
.kr-cta-band .kr-cta-band__btn,
.kr-cta-band--accent .kr-cta-band__btn,
.kr-cta-band--dark .kr-cta-band__btn {
  color: #ffffff !important;
  background: #121212 !important;
  border: none !important;
}
.kr-cta-band__btn:hover {
  color: #ffffff !important;
  background: #000000 !important;
}

/* Dark CTA band — make sure headline + microcopy on the dark band are white too */
.kr-cta-band--dark,
.kr-cta-band--dark .kr-cta-band__heading,
.kr-cta-band--dark .kr-cta-band__microcopy,
.kr-cta-band--dark p,
.kr-cta-band--dark span:not(.kr-cta-band__btn):not(.kr-cta-band__btn *) {
  color: #ffffff !important;
}
.kr-cta-band--dark .kr-cta-band__btn {
  background: #ffffff !important;
  color: #121212 !important;
  border: 2px solid #ffffff !important;
}
.kr-cta-band--dark .kr-cta-band__btn:hover {
  background: rgba(255,255,255,0.9) !important;
  color: #121212 !important;
}

/* Footer — kr-footer sits on dark walnut bg; force readable light links + text */
.kr-footer,
.kr-footer * {
  /* baseline */
}
.kr-footer__link,
.kr-footer a,
.kr-footer__col a,
.kr-footer__nav a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}
.kr-footer__link:hover,
.kr-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.kr-footer__heading,
.kr-footer h2, .kr-footer h3, .kr-footer h4,
.kr-footer__col-title,
.kr-footer__brand-title {
  color: #ffffff !important;
}
.kr-footer__body,
.kr-footer__copy,
.kr-footer p,
.kr-footer__legal,
.kr-footer__copyright {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Dawn-native footer fallback (in case some footer parts use Dawn classes) */
.footer,
.footer__content-bottom,
.footer__content-top {
  color: rgba(255, 255, 255, 0.85);
}
.footer a,
.footer__menu a,
.footer-block__heading,
.footer-block__details-content a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.footer a:hover {
  color: #ffffff !important;
}

/* Marquee — dark band variant should always have light text on items */
.kr-marquee.kr-marquee--brown,
.kr-marquee--brown .kr-marquee__item,
.kr-marquee--brown .kr-marquee__star,
.kr-marquee--accent .kr-marquee__item,
.kr-marquee--accent .kr-marquee__star {
  color: #ffffff !important;
}

/* Safety net — any element classed *--dark inside a kr-section gets light text */
[class*="--dark"] [class*="__heading"],
[class*="--dark"] [class*="__title"],
[class*="--dark"] [class*="__body"],
[class*="--dark"] [class*="__microcopy"],
[class*="--dark"] [class*="__link"] {
  color: rgba(255, 255, 255, 0.92) !important;
}


/* BUYBOX LUMIFLUX MATCH — 2026-05-26 */
/* ──────────────────────────────────────────────────────────────────────────
   Buy box LumiFlux color match — drops residual terracotta on price + ATC,
   neutralises the sale-ends + countdown pills, tightens vertical spacing.
   ────────────────────────────────────────────────────────────────────────── */

/* Sale price + compare price → LumiFlux black */
.product__info-container .price__sale .price-item--sale,
.product__info-container .price-item--sale,
.product .price-item--sale,
.price__sale .price-item--sale {
  color: #121212 !important;
}
.product__info-container .price__sale .price-item--regular,
.product .price-item--regular {
  color: rgba(18, 18, 18, 0.55) !important;
}

/* ADD TO CART button — flip to LumiFlux black */
.product-form__submit,
button[name="add"],
.product-form__submit.button--secondary,
.product-form__submit.button--primary {
  background: #121212 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
}
.product-form__submit:hover,
button[name="add"]:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Sale Ends in row → black text, neutral icon + pills */
.kr-bb-sale-ends { color: #121212 !important; }
.kr-bb-bolt { color: #121212 !important; }
.kr-bb-cd-h,
.kr-bb-cd-m,
.kr-bb-cd-s {
  background: #f3f3f3 !important;
  color: #121212 !important;
  border-radius: 0 !important;
}
.kr-bb-per-session { color: rgba(18, 18, 18, 0.65) !important; }

/* "25% OFF TODAY" badge if rendered via the Dawn price__badge — keep terracotta
   as urgency accent (this one OK to leave) but make it LumiFlux-square */
.product__info-container .price__badge-sale,
.price__badge-sale {
  border-radius: 0 !important;
}

/* Tighten vertical spacing inside the buy box */
.product__info-container .product-form { margin: 14px 0 !important; }
.product__info-container .product-form__buttons { margin: 12px 0 6px !important; }
.product__info-container .price { margin-top: 8px !important; margin-bottom: 8px !important; }
.product__info-container .kr-bb-sale-info { margin: 8px 0 12px !important; }
.product__info-container .shopify-payment-button { margin-top: 4px !important; }

/* Subscribe & Save dotted card — tighten + square it for LumiFlux match */
.product__info-container [class*="subscribe"],
.kr-bb-sub-card {
  border-radius: 0 !important;
  margin: 6px 0 8px !important;
}


/* BUYBOX V2 — badge restyle 2026-05-26 */
/* "25% OFF TODAY" sale badge — flip from terracotta to LumiFlux black */
.product__info-container .price__badge-sale,
.product .price__badge-sale,
.price__badge-sale,
.price--on-sale .price__badge-sale {
  background: #121212 !important;
  color: #ffffff !important;
  border-color: #121212 !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
}

/* Hide LAUNCH WEEK SALE eyebrow if any element still references the old class */
.kr-bb-eyebrow { display: none !important; }


/* BATCH POLISH — marquee+conditions+brand+card 2026-05-26 */
/* ──────────────────────────────────────────────────────────────────────────
   Marquee — flip brown variant to LumiFlux black so the band matches the rest
   of the site. Section IDs are dynamic so we cast a wide net.
   ────────────────────────────────────────────────────────────────────────── */
.kr-section-marquee section,
.kr-marquee,
.kr-marquee--brown,
[id^="kr-marquee-"] {
  background: #121212 !important;
  color: #ffffff !important;
}
.kr-marquee .kr-marquee__item,
.kr-marquee--brown .kr-marquee__item,
[id^="kr-marquee-"] .kr-marquee__item {
  color: #ffffff !important;
}
.kr-marquee .kr-marquee__star,
.kr-marquee--brown .kr-marquee__star,
[id^="kr-marquee-"] .kr-marquee__star {
  color: #ffffff !important;
}
.kr-marquee .kr-marquee__dot,
[id^="kr-marquee-"] .kr-marquee__dot {
  background: rgba(255,255,255,0.4) !important;
}

/* Conditions list — force LumiFlux black bg + ensure cards are crisp white */
.kr-section-conditions-list .kr-conditions,
.kr-conditions {
  background: #121212 !important;
}
.kr-section-conditions-list .kr-conditions__heading {
  color: #ffffff !important;
}
.kr-section-conditions-list .kr-conditions__list {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06);
}
.kr-section-conditions-list .kr-conditions__summary {
  color: #121212 !important;
  font-family: 'Assistant', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
}
.kr-section-conditions-list .kr-conditions__summary::after {
  color: #121212 !important;
}
.kr-section-conditions-list .kr-conditions__body {
  color: rgba(18,18,18,0.78) !important;
  font-family: 'Assistant', sans-serif !important;
  line-height: 1.65 !important;
  font-size: 14.5px !important;
}
.kr-section-conditions-list .kr-conditions__item[open] {
  background: #fafafa;
}

/* ──────────────────────────────────────────────────────────────────────────
   Header brand swap — UrbanLaneShop → KneeReset (CSS pseudo-element trick,
   reversible, no Liquid edits, no shop-name change).
   ────────────────────────────────────────────────────────────────────────── */
.header__heading-link.link.link--text {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.header__heading-link.link.link--text::after {
  content: "KneeReset";
  font-size: 22px;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-family: 'Assistant', -apple-system, sans-serif;
  color: #121212;
  display: inline-block;
}
/* If a logo IMAGE is set in theme settings, hide the text fallback */
.header__heading-link.header__heading-link--has-logo::after {
  display: none !important;
}

/* Brand name in footer too */
.kr-footer__brand-name {
  font-size: 0 !important;
}
.kr-footer__brand-name::after {
  content: "KneeReset";
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  display: inline-block;
  font-family: 'Assistant', sans-serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   Collection card — fix typography hierarchy. Title should dominate, price
   restrained. Reduce price block's huge default font-size.
   ────────────────────────────────────────────────────────────────────────── */
.card-wrapper .card__heading,
.card-wrapper .card__heading.h5 {
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 10px 0 6px !important;
}
.card-wrapper .card__heading a,
.card-wrapper .full-unstyled-link {
  color: #121212 !important;
}
.card-wrapper .price__sale .price-item--sale,
.card-wrapper .price-item--sale,
.card-wrapper .price-item--regular {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.card-wrapper .price-item--regular {
  color: rgba(18,18,18,0.5) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}
.card-wrapper .price {
  margin-top: 4px !important;
}
.card-wrapper .card__content .card-information {
  padding: 0 4px !important;
}
.card-wrapper .card__badge .badge {
  background: #121212 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
}


/* BRAND HEADER FIX V2 — hide nested h2 span 2026-05-26 */
/* Dawn wraps brand in <span class="h2">UrbanLaneShop</span> inside the link.
   That span has its own font-size: 24px from .h2, so parent font-size:0 was ignored.
   Hide the span entirely + render KneeReset via ::after on the link. */
.header__heading-link .h2 { display: none !important; }
.header__heading-link {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.header__heading-link::after {
  content: "KneeReset";
  font-size: 22px !important;
  letter-spacing: 0.02em !important;
  font-weight: 700 !important;
  color: #121212 !important;
  font-family: "Assistant", -apple-system, sans-serif !important;
  display: inline-block;
  text-transform: none;
}


/* PREMIUM POLISH TIER 1+2 — 2026-05-26 */
/* ============================================================================
   TIER 1 + TIER 2 PREMIUM POLISH
   Reveals + hover states + texture + animations + logo wiring
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   HEADER LOGO — KR shield image replaces "KneeReset" text fallback
   ────────────────────────────────────────────────────────────────────────── */
.header__heading-link { position: relative; }
.header__heading-link::after {
  /* Use the logo image instead of "KneeReset" text */
  content: "" !important;
  display: inline-block !important;
  width: 44px;
  height: 44px;
  background-image: url("/cdn/shop/t/8/assets/kr-logo.png?v=1779793396");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
@media (min-width: 750px) {
  .header__heading-link::after { width: 52px; height: 52px; }
}

/* Footer brand: keep as text "KneeReset" since the dark walnut bg + shield logo
   would look heavy. Already wired in earlier batch. */

/* ──────────────────────────────────────────────────────────────────────────
   TIER 1 #2 — Scroll reveal (paired with kr-premium-polish.js)
   ────────────────────────────────────────────────────────────────────────── */
.kr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.kr-reveal--in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .kr-reveal { opacity: 1; transform: none; transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 1 #1 — Hero photo treatment (let the product breathe)
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 990px) {
  .product__info-wrapper { padding-left: 4rem !important; }
  .product__media-list .product__media-item--variant img,
  .product__media-list .product__media img,
  .product__media-list img {
    background: linear-gradient(180deg, #fbfaf8 0%, #f3f3f3 100%);
  }
  .product__media-wrapper { padding-right: 2rem; }
  .product__media-list {
    aspect-ratio: 1 / 1;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 1 #3 — Sticky scroll storytelling for kr-five-pillars
   Pillars now scroll-pin one at a time on desktop. Mobile keeps grid.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 990px) {
  .kr-section-five-pillars .kr-pillars__list,
  .kr-pillars__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .kr-pillars__item {
    position: sticky;
    top: 80px;
    padding: 60px 40px;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.04);
  }
  .kr-pillars__item:nth-child(even) { background: #f9f9f8; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 1 #4 — Gallery zoom on hover (image transform driven by JS)
   ────────────────────────────────────────────────────────────────────────── */
.product__media-item { overflow: hidden; }
.product__media img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.product__media:hover img { cursor: zoom-in; }

/* ──────────────────────────────────────────────────────────────────────────
   TIER 1 #5 — Hover states on every interactive element
   ────────────────────────────────────────────────────────────────────────── */
.button, .button--primary, .product-form__submit,
.kr-btn, .kr-mega__cta, .kr-ritual__btn, .kr-how__btn, .kr-bundle__btn,
.kr-cta-band__btn, .kr-ghero__btn, .kr-bb-qp {
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background 0.16s ease-out, color 0.16s ease-out !important;
}
.button:hover, .button--primary:hover, .product-form__submit:hover,
.kr-btn:hover, .kr-mega__cta:hover, .kr-ritual__btn:hover, .kr-how__btn:hover, .kr-bundle__btn:hover,
.kr-cta-band__btn:hover, .kr-ghero__btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
}
.kr-bb-qp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
/* Bundle picker hover — sibling cards subtly de-emphasize */
.kr-pricing__card,
.kr-bundle__card {
  transition: transform 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out !important;
}
.kr-pricing__card:hover,
.kr-bundle__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
/* Photo testimonial cards */
.kr-pt__card {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.kr-pt__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}
.kr-pt__card .kr-pt__photo { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.kr-pt__card:hover .kr-pt__photo { transform: scale(1.04); }
/* Nav links — animated underline grow */
.header__menu-item, .kr-footer__link {
  position: relative;
  display: inline-block;
}
.header__menu-item::after, .kr-footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.25s ease-out;
}
.header__menu-item:hover::after,
.kr-footer__link:hover::after { width: 100%; }

/* ──────────────────────────────────────────────────────────────────────────
   TIER 2 #6 — Subtle SVG noise texture on light backgrounds
   ────────────────────────────────────────────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  mix-blend-mode: multiply;
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 2 #7 — Custom underline for inline links (not nav, not button-styled)
   ────────────────────────────────────────────────────────────────────────── */
.kr-conditions__body a,
.kr-pt__quote a,
.rte a:not(.button),
.kr-bb-sale-info a {
  text-decoration: none !important;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.kr-conditions__body a:hover,
.rte a:hover { color: rgba(18,18,18,0.6) !important; border-color: transparent; }

/* ──────────────────────────────────────────────────────────────────────────
   TIER 2 #8 — Hero type animation (paired with kr-premium-polish.js)
   ────────────────────────────────────────────────────────────────────────── */
.kr-word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.kr-word-reveal--in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .kr-word-reveal { opacity: 1; transform: none; transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 2 #9 — Sticky CTA appears only after scrolling past buy box
   ────────────────────────────────────────────────────────────────────────── */
.kr-sticky-cta {
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kr-sticky-cta--visible { transform: translateY(0); }

/* ──────────────────────────────────────────────────────────────────────────
   TIER 2 #11 — Blur-up image lazy load
   ────────────────────────────────────────────────────────────────────────── */
img[loading="lazy"] {
  filter: blur(8px);
  transition: filter 0.4s ease-out;
}
img[loading="lazy"].loaded,
img[loading="lazy"]:not([data-src]) {
  filter: blur(0);
}

/* ──────────────────────────────────────────────────────────────────────────
   TIER 2 #12 — 30 DAYS guarantee badge pulse
   ────────────────────────────────────────────────────────────────────────── */
.kr-ghero__badge,
.kr-guarantee__badge,
[class*="guarantee"][class*="badge"] {
  animation: kr-badge-pulse 3.6s ease-in-out infinite;
}
@keyframes kr-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18, 18, 18, 0); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(18, 18, 18, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kr-ghero__badge, .kr-guarantee__badge { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   ENABLE PREMIUM POLISH JS — inject script tag via CSS @import-like trick
   ────────────────────────────────────────────────────────────────────────── */