/** Shopify CDN: Minification failed

Line 2557:15 Expected identifier but found whitespace
Line 2557:16 Unexpected "32px"
Line 2563:0 Unexpected "}"

**/
/* Premium UI/UX Overrides for KTLife */

/* DEFINITIVE FIX: Prevent Blog Card Image Cropping */
.featured-blog-posts-card__image,
.featured-blog-posts-card__image .resource-image__image {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  position: relative !important;
}
.featured-blog-posts-card__image .resource-image__image {
  object-fit: contain !important;
  display: block !important;
  width: 100% !important;
}

/* FIX: Visibility for buttons on dark backgrounds (e.g. scheme-2) */
.color-scheme-2 .button-secondary,
.color-scheme-2 .button,
.color-scheme-2 .button-primary {
  background-color: #f7f2ea !important; /* Lite/Cream background */
  color: #23A998 !important; /* Dark Green text */
  border: none !important;
}
.color-scheme-2 .button-secondary:hover,
.color-scheme-2 .button:hover,
.color-scheme-2 .button-primary:hover {
  background-color: #ffffff !important;
  opacity: 1 !important;
}


/* FORCE: White background for buttons on dark green sections (Brand Story, Ads Video) */
.media-with-content .button-secondary,
.media-with-content .button {
  background-color: #ffffff !important;
  color: #23A998 !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  padding: 10px 28px !important;
  border: none !important;
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
}

.media-with-content .button-secondary:hover,
.media-with-content .button:hover {
  background-color: #f0f0f0 !important;
  color: #23A998 !important;
}

/* --- SECTION HEADER STANDARDIZATION (Matches "Why People Trust Us") --- */
/* Target explicit top-level text headers and section containers directly across ALL devices */
.text-block h1,
.text-block h2,
.text-block h3,
.media-with-content h1,
.media-with-content h2,
.media-with-content h3,
.text-block.custom-typography h1,
.text-block.custom-typography h2,
.text-block.custom-typography h3,
.section > .text-block h1,
.section > .text-block h2,
.section > .text-block h3,
.section > .text-block p,
.section > div > .text-block h1,
.section > div > .text-block h2,
.section > div > .text-block h3,
.section > div > .text-block p,
[class*="section-"] > [class*="header"] h1,
[class*="section-"] > [class*="header"] h2,
[class*="section-"] > [class*="header"] h3,
.section-resource-list__header h1,
.section-resource-list__header h2,
.section-resource-list__header h3,
.scrolling-promotion__heading,
.rich-text__heading,
.title-wrapper-with-link h2 {
  font-family: var(--font-heading--family) !important;
  font-size: 1.75rem !important;
  color: #23A998 !important; /* Standardizing to Reference Green */
  font-weight: 700 !important; /* Added explicit boldness per user request */
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important; /* 16px uniform bottom space */
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  text-transform: none !important; /* Prevents forced uppercasing */
}

/* --- OVERRIDES: Allow specific sections to break the 'Green/Center' rule if custom set --- */
.text-block.custom-color h1, 
.text-block.custom-color h2, 
.text-block.custom-color h3 {
  color: var(--color) !important;
}

.text-block.custom-font-size h1,
.text-block.custom-font-size h2,
.text-block.custom-font-size h3 {
  font-size: var(--font-size) !important;
}

.text-block.text-block--align-left h1,
.text-block.text-block--align-left h2,
.text-block.text-block--align-left h3 {
  text-align: left !important;
}

.text-block.text-block--align-right h1,
.text-block.text-block--align-right h2,
.text-block.text-block--align-right h3 {
  text-align: right !important;
}

/* Mobile optimization: Slightly scale down font size to look perfect on phones */
@media screen and (max-width: 749px) {
  .text-block h1,
  .text-block h2,
  .text-block h3,
  .media-with-content h1,
  .media-with-content h2,
  .media-with-content h3,
  .text-block.custom-typography h1,
  .text-block.custom-typography h2,
  .text-block.custom-typography h3,
  .section > .text-block h1,
  .section > .text-block h2,
  .section > .text-block h3,
  .section > .text-block p,
  .section > div > .text-block h1,
  .section > div > .text-block h2,
  .section > div > .text-block h3,
  .section > div > .text-block p,
  [class*="section-"] > [class*="header"] h1,
  [class*="section-"] > [class*="header"] h2,
  [class*="section-"] > [class*="header"] h3,
  .section-resource-list__header h1,
  .section-resource-list__header h2,
  .section-resource-list__header h3,
  .scrolling-promotion__heading,
  .rich-text__heading,
  .title-wrapper-with-link h2 {
    font-size: 1.4rem !important; /* Slightly smaller for optimal Phone display */
    margin-bottom: 12px !important;
    text-align: center !important;
    margin-inline: auto !important;
  }
}

/* --- 0. Global Overflow Fix (No Horizontal Scroll) --- */
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: clip; /* Prevents horizontal scroll without locking vertical scroll */
  max-width: 100vw;
}


@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
}

* {
  box-sizing: border-box;
}

/* --- KT Premium Tokens (page-aware) --- */
:root {
  --kt-accent: #23A998;
  --kt-accent-foreground: #ffffff;
  --kt-highlight: #fbd704;

  --kt-page-bg: var(--color-background);
  --kt-card-bg: #ffffff;
  --kt-surface-border: rgba(var(--color-foreground-rgb), 0.08);
  --kt-price-color: var(--kt-accent);

  --kt-shadow-1: 0 6px 18px rgba(0, 0, 0, 0.08);
  --kt-shadow-2: 0 14px 36px rgba(0, 0, 0, 0.12);

  --kt-radius-md: 12px;
  --kt-radius-lg: 16px;

  --kt-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sub-brand palettes */
.template-page-ktkids {
  --kt-accent: #232a63;
  --kt-accent-foreground: #ffffff;
  --kt-highlight: #fbd704;
  --kt-page-bg: #f7f2ea;
}

.template-page-ktmen {
  --kt-accent: #23A998;
  --kt-accent-foreground: #ffffff;
  --kt-highlight: #fbd704;
  --kt-page-bg: #f7f2ea;
}

.template-page-ktprofessional {
  --kt-accent: #84f2b2;
  --kt-accent-foreground: #0b0b0b;
  --kt-highlight: #fbd704;
  --kt-page-bg: #f7f2ea;
  --kt-price-color: rgba(var(--color-foreground-rgb), 0.92);
}

/* --- 0.1 Smooth Scroll Reveal Animations --- */

/* Base state: hidden before revealed */
.kt-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered delay variants for child elements */
.kt-reveal:nth-child(1) {
  transition-delay: 0s;
}

.kt-reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.kt-reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.kt-reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.kt-reveal:nth-child(5) {
  transition-delay: 0.32s;
}

.kt-reveal:nth-child(6) {
  transition-delay: 0.40s;
}

/* Revealed state: triggered by JS IntersectionObserver */
.kt-reveal.kt-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Horizontal reveal variant */
.kt-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.kt-reveal-left.kt-in-view {
  opacity: 1;
  transform: translateX(0);
}

.kt-reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.kt-reveal-right.kt-in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Scale-in for cards/images */
.kt-reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.kt-reveal-scale.kt-in-view {
  opacity: 1;
  transform: scale(1);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

  .kt-reveal,
  .kt-reveal-left,
  .kt-reveal-right,
  .kt-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* --- 1. Typography & Hierarchy --- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-bottom: 0.4em;
}

.rte p {
  line-height: 1.6;
  color: rgba(var(--color-foreground-rgb), 0.85);
}

/* --- 2. Depth & Shadows (Premium Feel) --- */
/* Add subtle shadows and rounded corners to visual components */
.card,
.product-card,
.media-with-content__media,
.slideshow__slide,
.carousel__item {
  border-radius: var(--kt-radius-md);
  overflow: visible !important;
  transition: transform 0.35s var(--kt-motion-ease), box-shadow 0.35s var(--kt-motion-ease);
}

/* Apply shadow to the actual content container */
.product-card__content,
.product-grid__card {
  box-shadow: var(--kt-shadow-1) !important;
  background: var(--kt-card-bg) !important;
  border-radius: var(--kt-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--kt-surface-border) !important;
  padding: 12px !important;
  /* Equal padding on all 4 sides */
}

/* Remove separate child padding logic to maintain equality */
.product-card__content>*:not(.card-gallery) {
  padding-inline: 0 !important;
}

.product-card__content>*:last-child {
  padding-bottom: 0 !important;
}

/* Remove any accidental styles on the gallery itself */
.card-gallery {
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card:hover,
  .product-card:hover,
  .carousel__item:hover {
    box-shadow: var(--kt-shadow-2) !important;
    transform: translateY(-2px);
  }
}

/* --- 3. Buttons & Micro-interactions --- */
.button,
.button-secondary,
.button-primary,
.button-outline {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--kt-motion-ease),
    box-shadow 0.3s ease, opacity 0.3s ease !important;
  border-radius: 10px !important;
  /* Softer, modern edges */
  font-weight: 600;
  letter-spacing: 0.02em;
}

.button:hover,
.button-secondary:hover,
.button-primary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  opacity: 0.95;
}

.button:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* --- 4. Sub-Brand Identity Enhancements --- */
/* Sub-brand banners should have slight top/bottom spacing if they are not the main hero */
.shopify-section:not(:first-child) .slideshow {
  margin-top: 24px;
  margin-bottom: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Make product cards in lists look unified and breathable */
.product-list .product-card {
  background: var(--color-background);
  padding: 12px;
}

/* Premium Zoom and Lift Effects for Cards */
.product-card__media img,
.card__media-wrapper img,
.card__media img,
.card__media-wrapper video {
  transition: transform 0.9s var(--kt-motion-ease), opacity 0.4s ease !important;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card:hover .product-card__media img,
  .card:hover .card__media-wrapper img,
  .card:hover .card__media img,
  .card:hover .card__media-wrapper video {
    transform: scale(1.05) !important;
    opacity: 0.96 !important;
  }
}

/* --- 5. Mobile Optimization --- */
@media screen and (max-width: 749px) {

  .slideshow__text-wrapper {
    padding: 24px !important;
  }

  .product-card .product-card__content {
    padding: 12px !important;
    gap: 8px !important;
  }
}

/* --- 5b. Product Grid Separation & Shadows --- */
/* Ensure cards feel separate and shadows aren't clipped */
.product-grid {
  gap: 16px !important;
  /* Reduced gap for desktop */
  padding: 12px !important;
}

@media screen and (max-width: 749px) {
  .product-grid {
    gap: 8px !important;
    /* Tightened gap for mobile */
    padding: 4px !important;
  }
}

.product-grid__item {
  padding: 4px !important;
  /* Reduced padding to tighten spacing between cards */
  overflow: visible !important;
}

.product-card {
  background-color: transparent !important;
  /* Move bg to content */
  overflow: visible !important;
}

.product-grid {
  overflow: visible !important;
}

/* --- 6. Animations (Disabled as per user request) --- */
/*
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll.is-visible .carousel__item,
.reveal-on-scroll.is-visible .product-card-wrapper {
  animation: staggerFadeUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  opacity: 0;
}

@keyframes staggerFadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
*/

/* Enhancing typography for emotional connection */
.media-with-content__text-wrapper h2,
.slideshow__text-wrapper h2 {
  font-family: var(--font-heading--family);
  letter-spacing: -0.03em;
}

.media-with-content__text-wrapper p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(var(--color-foreground-rgb), 0.9);
}

/* --- 7. KT Custom Accordion Styles --- */
.kt-accordion-wrapper {
  margin: 4px 0;
  border-top: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  font-family: var(--font-body--family);
}

.kt-acc-item {
  border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.kt-acc-item:hover,
.kt-acc-item.active {
  background-color: rgba(var(--color-foreground-rgb), 0.02);
}

.kt-acc-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-foreground);
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
}

.kt-acc-btn:hover {
  color: var(--kt-accent);
}

.kt-acc-item.active .kt-acc-btn {
  color: var(--kt-accent);
  padding-bottom: 8px;
}

.kt-acc-btn::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-right: 12px;
  flex-shrink: 0;
}

.kt-acc-item.active .kt-acc-btn::after {
  transform: rotate(-135deg);
}

.kt-acc-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  padding: 0;
}

.kt-acc-item.active .kt-acc-content {
  max-height: 2000px;
  opacity: 1;
  padding-bottom: 16px;
}

.kt-acc-content>*:first-child {
  margin-top: 0 !important;
}

.kt-acc-content p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: rgba(var(--color-foreground-rgb), 0.75);
  font-size: 0.95rem;
}

.kt-acc-content strong {
  color: var(--kt-accent);
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
}

.kt-acc-content p:last-child {
  margin-bottom: 0;
}

/* --- 7b. Standard Product Accordion Styles (User Provided Classes) --- */
.accordion {
  margin: 12px 0;
  border-top: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  background: transparent;
}

.accordion-item {
  border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.08);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-foreground);
  font-family: var(--font-heading--family);
  transition: all 0.3s ease;
}

.accordion-header::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s ease;
  color: var(--kt-accent);
}

.accordion-item.active .accordion-header::after {
  content: '−';
  transform: rotate(180deg);
}

.accordion-item.active .accordion-header {
  color: var(--kt-accent);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  padding: 0;
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: 1500px;
  padding: 4px 0 12px 0;
  opacity: 1;
}

.accordion-content p {
  margin-bottom: 8px;
  line-height: 1.7;
  color: rgba(var(--color-foreground-rgb), 0.8);
  font-size: 0.95rem;
}

.accordion-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.accordion-content li {
  margin-bottom: 8px;
  color: rgba(var(--color-foreground-rgb), 0.8);
  font-size: 0.95rem;
}

.accordion-content strong {
  color: var(--kt-accent);
  font-weight: 600;
}

/* --- 7. Product Recommendations Polish --- */
/* Truncate titles to 2 lines with ellipsis - Strict enforcement */
.product-recommendations .product-title,
.product-recommendations .product-title h1,
.product-recommendations .product-title h2,
.product-recommendations .product-title h3,
.product-recommendations .product-title h4,
.product-recommendations .product-title h5,
.product-recommendations .card-information__text,
.product-recommendations .card__heading,
.product-recommendations [class*="product-title"] {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 2.6em !important;
  /* Hard cap to prevent 3rd line */
  line-height: 1.2 !important;
  min-height: 0 !important;
  /* Remove min-height that might be pushing it */
}

/* Ensure images show original aspect ratio without cropping */
.product-recommendations .product-card__media img,
.product-recommendations .card__media img,
.product-recommendations .media img {
  object-fit: contain !important;
  aspect-ratio: auto !important;
}


/* --- 8. Shop with Confidence - User Custom Design --- */
.product-info [data-block-id="shop_with_confidence"],
.trust-section-bg {
  margin-top: 30px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
}

.product-info [data-block-id="shop_with_confidence"] .group-block-content>div:first-child {
  margin-bottom: 15px !important;
  display: block !important;
}

.product-info [data-block-id="shop_with_confidence"] .group-block-content>div:first-child * {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  /* Adjusted from #f1f1f1 to be visible on light theme, matching user's border-style color */
  text-align: left !important;
  margin: 0 !important;
}

.product-info [data-block-id="shop_with_confidence"] .layout-panel-flex--row,
.trust-section-bg .layout-panel-flex--row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.product-info [data-block-id="shop_with_confidence"] .group-block-content>.group-block,
.trust-section-bg .group-block-content>.group-block {
  display: flex !important;
  flex-direction: row !important;
  /* Horizontal as per user code */
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: #0f172a !important;
  /* Dark background as requested */
  border: 1px solid #1e293b !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: auto !important;
}

.product-info [data-block-id="shop_with_confidence"] .group-block-content>.group-block:hover,
.trust-section-bg .group-block-content>.group-block:hover {
  border-color: #0ea6ec !important;
  transform: translateY(-2px) !important;
}

/* SVG styling */
.product-info [data-block-id="shop_with_confidence"] .group-block-content>.group-block [data-block-id*="icon"],
.product-info [data-block-id="shop_with_confidence"] .group-block-content>.group-block svg {
  width: 22px !important;
  height: 22px !important;
  color: #F9A245 !important;
  /* Orange highlight as requested */
  flex-shrink: 0 !important;
}

.product-info [data-block-id="shop_with_confidence"] .group-block-content>.group-block p,
.trust-section-bg .group-block-content>.group-block p {
  font-size: 14px !important;
  color: #94a3b8 !important;
  /* Muted text as requested */
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}

/* Mobile Alignment */
@media (max-width: 480px) {

  .product-info [data-block-id="shop_with_confidence"] .layout-panel-flex--row,
  .trust-section-bg .layout-panel-flex--row {
    grid-template-columns: 1fr !important;
  }
}




/* --- 9. Review Stars Styling --- */
.rating-wrapper .stars.filled-star {
  color: #ffb800 !important;
  /* Premium Golden Yellow */
  fill: #ffb800 !important;
}

.rating-wrapper .rating-count {
  font-size: 0.75rem !important;
  /* Decreased size */
  opacity: 0.5;
  margin-left: 4px;
  font-weight: 400;
  color: var(--color-foreground) !important;
}

/* Mobile Review Optimization */
@media screen and (max-width: 749px) {
  .product-card .rating-wrapper svg {
    width: 12px !important;
    height: 12px !important;
  }

  .product-card .rating-count {
    font-size: 0.65rem !important;
    /* Further decreased for mobile */
    margin-left: 3px !important;
  }
}

/* Left-align reviews on product cards */
.product-card .rating-wrapper,
.card-information .rating-wrapper {
  justify-content: flex-start !important;
  text-align: left;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Fix for spacing in cards and ellipsis alignment */
.product-title-clamp {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 2.6em !important;
  /* Hard cap on 2 lines */
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
  word-break: break-word;
  font-size: 1.0rem !important;
  /* Reduced for sleeker look */
}

/* Fix ellipsis on mobile - strict clipping */
@media screen and (max-width: 749px) {
  .product-card .product-title-clamp {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 2.4em !important;
    line-height: 1.2 !important;
    /* Tighter for mobile */
    font-size: 1.0rem !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    word-break: break-word !important;
  }
}

/* Hide all Product badges (Sale, Sold Out, etc.) */
.product-badges__badge,
.product-badges {
  display: none !important;
}

.product-card .product-title {
  margin-bottom: 0 !important;
}

.product-card__content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 16px !important;
  gap: 4px !important;
  /* Reduced gap */
  background: var(--kt-card-bg) !important;
}

@media screen and (max-width: 749px) {
  .product-card__content {
    padding: 10px !important;
    gap: 2px !important;
    /* Tightest gap for mobile */
  }
}

/* Ensure price and button stay aligned and bold */
.product-card .price {
  margin-top: 4px !important;
  /* Fixed small gap */
  margin-bottom: 4px !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  /* Reduced from 1.45rem */
  color: var(--kt-price-color) !important;
}

.product-card .compare-at-price {
  font-size: 1.1rem !important;
  /* Increased for desktop */
  color: rgba(var(--color-foreground-rgb), 0.45) !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
  margin-right: 4px;
}

@media screen and (max-width: 749px) {
  .product-card .price {
    font-size: 1.2rem !important;
    /* Bold, high-impact size for mobile */
    margin-bottom: 0 !important;
    margin-top: 2px !important;
  }
}

/* Left-align reviews on product cards */
.product-card .rating-wrapper,
.card-information .rating-wrapper {
  justify-content: flex-start !important;
  text-align: left;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- 11. Custom Dropdown Menu Panels --- */
/* Transform full-width mega menus into sleek, centered dropdown panels */

.menu-list__list-item {
  position: relative !important;
  /* Anchor for the submenu */
}

.menu-list__submenu {
  width: auto !important;
  min-width: 260px !important;
  max-width: 350px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(10px) !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 30px 0px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 8px !important;
  clip-path: none !important;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease !important;
  margin-top: 0 !important;
  top: 100% !important;
  height: auto !important;
  border-top: 4px solid var(--kt-accent) !important;
  /* Brand Green Accent */
}

/* Position adjustment when open */
.menu-list__list-item:has([aria-expanded='true'])>.menu-list__submenu,
.menu-list__submenu:hover {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.menu-list__submenu-inner {
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  max-height: none !important;
  overflow: visible !important;
}

.mega-menu {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.mega-menu__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mega-menu__column {
  width: 100% !important;
}

.mega-menu__link {
  padding: 8px 12px !important;
  /* Reduced padding */
  border-radius: 6px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  width: 100% !important;
  display: block !important;
  font-size: 0.85rem !important;
  /* Slightly smaller text */
  font-weight: 400 !important;
  /* Normal weight */
  color: var(--color-foreground) !important;
  text-transform: none !important;
}

.mega-menu__link:hover {
  background: rgba(var(--color-foreground-rgb), 0.05) !important;
  color: var(--kt-accent) !important;
}

/* Remove any sub-brand specific padding that might break the panel */
.mega-menu__content-list {
  display: block !important;
  padding: 0 !important;
}

/* Ensure header background stays visible while menus are floating panels */
.header__underlay-open {
  height: var(--header-height) !important;
  background-color: var(--color-scheme-top-row) !important;
  background-image: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.header__underlay-open::after {
  content: none !important;
}

.header__underlay-closed {
  background-color: var(--color-scheme-top-row) !important;
  background-image: none !important;
}

.product-details {
  font-family: var(--font-body--family) !important;
}

.product-details .product-title h1,
.product-details [class*="title"] h1,
.product-recommendations .card__heading {
  font-family: var(--font-heading--family) !important;
}

.product-details .product-title h1,
.product-details [class*="title"] h1,
.product-details h1,
.product-info h1,
.product__title h1 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: rgba(var(--color-foreground-rgb), 0.95) !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  width: 100% !important;
}

.product-details [data-block-type="text"] h1,
.product-details .group-block-content > div:first-child,
.product__title,
.view-product-title,
.product-details .group-block > .text-block {
  text-align: left !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.product-details .price .price-item {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--color-foreground) !important;
}

.product-details .accordion__title {
  font-size: 0.85rem !important; /* Smaller font size */
  font-weight: 600 !important;
  line-height: 1.1 !important; /* Tighter line height */
  margin: 0 !important;
}

/* Aggressively tighten Product Page FAQs (JSON Meta) and reduce gaps after Shop with Confidence */
.product__accordion,
.product-details .accordion {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
}

.product-info .product__accordion,
.product-info .accordion {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.product__accordion summary,
.product-details .accordion summary,
.product-details .accordion-header {
  padding: 4px 0 !important; /* Extremely tight vertical, 0 horizontal */
  margin: 0 !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important; /* Reduced horizontal gap between text and icon */
}

.product__accordion .accordion__content,
.product-details .accordion-content {
  padding: 0 0 4px 0 !important;
  margin: 0 !important;
  font-size: 0.8rem !important; /* Smaller text for content */
  line-height: 1.3 !important;
}

.product__accordion .accordion__content p,
.product__accordion .accordion__content ul,
.product__accordion .accordion__content li {
  font-size: 0.8rem !important;
  margin-bottom: 4px !important;
}

.product-details details,
.product-info details {
  margin: 0 !important;
  padding: 0 !important;
}

.product-info .accordion + .accordion,
.product-info .product__accordion + .product__accordion {
  border-top: none !important;
}

.product__accordion .icon-accordion,
.product-details .accordion .icon-accordion {
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
}

.product-details .rte,
.product-details .product-description,
.product-details p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.product-details .variant-picker__label,
.product-details .quantity-selector__label {
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

/* --- 11. Price-Side Badges --- */
.price-badge-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.price-badge-wrapper .product-badges__badge {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  height: fit-content;
  white-space: nowrap;
}

/* Discount percentage badge */
.price-discount-badge {
  display: inline-flex;
  align-items: center;
  background-color: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
}

/* Ensure price containers don't wrap awkwardly */
.price__sale:not(.price__hidden),
.price__regular:not(.price__hidden) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* Footer Mobile Optimization */
@media screen and (max-width: 749px) {
  .footer-content {
    gap: 1.5rem !important;
    /* Tighten the space between blocks */
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .footer-content .menu__heading,
  .footer-content h2,
  .footer-content h3 {
    font-size: 1.1rem !important;
    /* Smaller headings */
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
  }

  .footer-content .menu__item,
  .footer-content p,
  .footer-content a,
  .footer-content .rte,
  .footer-content .link {
    font-size: 0.85rem !important;
    /* Smaller body text */
    line-height: 1.4 !important;
  }

  .footer-content .menu__item {
    margin-block-start: 4px !important;
    /* Tighten menu link spacing */
  }

  .footer-content .menu__details {
    --spacing--size: 4px !important;
    /* Internal spacing variable override */
  }

  /* Reduce padding on the footer section wrapper */
  .section-wrapper footer,
  .footer-content.spacing-style {
    padding-block-start: 24px !important;
    padding-block-end: 24px !important;
  }
}

/* Premium Footer Styling - Innovist Match */
.footer-content .menu__heading,
.footer-content .footer-block__heading,
.footer-content .h6,
.footer-content h3,
.footer-content h6 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100%;
  display: block;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-family: var(--font-heading--family);
  color: #fff !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

.footer-content .menu__list {
  list-style: none;
  padding: 0;
}

.footer-content .menu__item {
  position: relative;
  padding-left: 18px !important;
  margin-bottom: 12px !important;
  display: flex;
  align-items: center;
}

.footer-content .menu__item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.6;
}

.footer-content .menu__item a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-content .menu__item a:hover {
  color: #fff !important;
}

/* Social Icons Premium */
.footer-content .social-icons__wrapper {
  margin-top: 24px;
  flex-direction: row !important;
  overflow: visible !important;
  padding: 6px !important;
  padding-left: 8px !important;
  /* Increased move from left side */
  margin-left: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
}

.footer-content .social-icons__list {
  display: flex !important;
  gap: 16px !important;
  /* Increased gap between icons */
  overflow: visible !important;
}

.footer-content .social-icons__icon-wrapper a {
  width: 40px !important;
  height: 40px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  margin-left: 1px !important;
  /* Prevent left side cutting */
}

.footer-content .social-icons__icon-wrapper a:hover {
  background: #fff !important;
  border-color: #fff !important;
  transform: translateY(-3px);
}

.footer-content .social-icons__icon-wrapper a svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  fill: #fff !important;
  transition: fill 0.3s ease;
  display: block;
}

.footer-content .social-icons__icon-wrapper a:hover svg {
  fill: #333 !important;
}

/* Payment Icons */
.footer-content .payment-icons {
  display: block;
  width: 100%;
}

.footer-content .payment-icons__list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px !important;
  /* Increased gap slightly for better balance */
  padding: 0;
  list-style: none;
  justify-content: flex-start !important;
}

.footer-content .payment-icons img,
.footer-content .payment-icons svg {
  height: 24px !important;
  width: auto !important;
  opacity: 1 !important;
  transition: all 0.3s ease;
  display: block;
}

.footer-content .payment-icons *:hover {
  opacity: 1;
  filter: none;
}

/* Column spacing adjustment */
@media screen and (min-width: 750px) {
  .footer-content {
    justify-content: space-between !important;
    gap: 40px !important;
  }
}

/* Footer EXPLORE column optimization */
.group-block-content {
  gap: 12px !important;
}

.footer-explore-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-explore-wrapper .header-brand-logos {
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 5px;
}

.social-icons__wrapper-main {
  width: 100%;
}

.social-icons__wrapper {
  gap: 12px !important;
  margin-top: 5px;
}

.footer-block__heading {
  margin-bottom: 8px !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

@media screen and (max-width: 749px) {
  .footer-explore-wrapper .header-brand-logos {
    justify-content: center !important;
  }

  .social-icons__wrapper {
    justify-content: center !important;
  }
}

/* --- 13. Desktop Header (Premium Polish) --- */
@media screen and (min-width: 990px) {
  #header-component {
    --header-padding: 4px;
  }

  /* Premium sticky underlay: crisper shadow, glassmorphism, hairline divider */
  #header-component[data-sticky-state='active'] .header__underlay-closed {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.04) !important;
  }

  /* Make top-level links feel intentional + add subtle underline cue */
  #header-component[data-menu-style='menu'] .menu-list__link {
    border-radius: 999px;
    padding: 6px 12px;
    transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
  }

  #header-component[data-menu-style='menu'] .menu-list__link:hover {
    background: rgb(var(--color-foreground-rgb) / 0.03);
  }

  /* Fix gap issue causing submenus to close prematurely on hover */
  #header-component .menu-list__list-item:not([slot='overflow'])::after {
    height: 20px !important;
    margin-bottom: -20px !important;
    z-index: 10;
  }

  /* --- PREMIUM MEGA MENU PANEL --- */
  #header-component .menu-list__submenu-inner {
    padding: 24px 0 !important;
  }
  
  #header-component .mega-menu__list {
    gap: 40px !important;
    justify-content: flex-start !important;
  }

  #header-component .mega-menu__link, 
  #header-component .mega-menu__link--parent {
    color: #1a1a1a !important;
    font-family: var(--font-body--family) !important;
    text-shadow: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    white-space: nowrap !important;
    text-align: left !important;
    display: inline-block !important;
  }
  
  #header-component .mega-menu__list {
    text-align: left !important;
    align-items: flex-start !important;
  }

  #header-component .mega-menu__link:hover, 
  #header-component .mega-menu__link--parent:hover {
    color: var(--kt-highlight, #23A998) !important;
    transform: translateX(2px) !important;
  }

  #header-component .mega-menu__link--parent {
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  #header-component .mega-menu__link {
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    opacity: 0.85 !important;
  }
  #header-component .mega-menu__link:hover {
    opacity: 1 !important;
  }

  #header-component[data-menu-style='menu'] .menu-list__link-title {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  #header-component[data-menu-style='menu'] .menu-list__link-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
    opacity: 0.7;
    pointer-events: none;
  }

  #header-component[data-menu-style='menu'] .menu-list__link:hover .menu-list__link-title::after,
  #header-component[data-menu-style='menu'] .header__active-menu-item .menu-list__link-title::after,
  #header-component[data-menu-style='menu'] .menu-list__link[aria-current='page'] .menu-list__link-title::after {
    transform: scaleX(1);
  }

  /* Icon actions: subtle pill background on hover (premium) */
  #header-component .header-actions__action,
  #header-component .header__icon {
    border-radius: 999px;
    transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s var(--kt-motion-ease),
      opacity 0.22s ease;
  }

  #header-component .header-actions__action:hover,
  #header-component .header__icon:hover {
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  #header-component .header-actions__action:active,
  #header-component .header__icon:active {
    transform: translateY(0);
  }

  /* Transparent header readability: keep colors, add tiny shadow instead of forcing white */
  #header-component[transparent]:not([data-sticky-state='active']) :is(.menu-list__link-title, .header-actions__action, .header__icon) {
    text-shadow: 0 1px 2px rgb(0 0 0 / 15%);
  }

  /* --- COMPACT HEADER REFINEMENTS --- */
  .header__columns {
    grid-gap: var(--gap-md) !important;
  }

  .menu-list__link-title,
  .menu-drawer__menu-item,
  .mega-menu__link--parent,
  .header__menu-item span,
  .footer-block__heading,
  .header-brand-tabs__text {
    text-transform: none !important;
  }



  .menu-list__link-title {
    padding-inline: 8px !important;
  }

  .header__row--top {
    padding-block: 2px !important;
  }

  .header__row--bottom {
    padding-block: 2px !important;
  }

  .header-search__input {
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  }
  .header-search__input:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important;
  }

  .header-logo__image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 65px !important;
    width: auto !important;
    transition: transform 0.3s ease !important;
  }
  
  .header-logo:hover .header-logo__image {
    transform: scale(1.03) !important;
  }

  
  
  
  
  
  

}

/* --- 13.1 Global Header Brand Polish (Tabs style) --- */
.header-brand-logos {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.header-brand-logos__item {
  width: auto !important;
  min-width: fit-content !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.header-brand-logos__item:not(:last-child)::after {
  content: '';
  display: block;
  width: 1px;
  height: 14px;
  background: var(--color-foreground) !important;
  opacity: 0.3;
  margin-left: 16px;
}

/* Ensure it shows in the mobile drawer despite global hide rules */
.menu-drawer .header-brand-logos {
  display: flex !important;
}

/* Make text and dividers white in the mobile drawer to contrast the green header */
.menu-drawer .header-brand-tabs__text {
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
.menu-drawer .header-brand-logos__item:not(:last-child)::after {
  background: #ffffff !important;
  margin-left: 10px !important;
}

.header-brand-tabs__text {
  font-family: var(--font-body--family) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: var(--color-foreground) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  opacity: 0.9 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.header-brand-logos__item:hover .header-brand-tabs__text {
  opacity: 1 !important;
}


/* --- 13.1 Global Header Brand Polish (Tabs style) --- */
.header-brand-logos {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.header-brand-logos__item {
  width: auto !important;
  min-width: fit-content !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.header-brand-logos__item:not(:last-child)::after {
  content: '';
  display: block;
  width: 1px;
  height: 14px;
  background: var(--color-foreground) !important;
  opacity: 0.3;
  margin-left: 16px;
}

/* Ensure it shows in the mobile drawer despite global hide rules */
.menu-drawer .header-brand-logos {
  display: flex !important;
}

/* Make text and dividers white in the mobile drawer to contrast the green header */
.menu-drawer .header-brand-tabs__text {
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
.menu-drawer .header-brand-logos__item:not(:last-child)::after {
  background: #ffffff !important;
  margin-left: 10px !important;
}


/* --- 15. PREMIUM BLOG CARDS --- */
.featured-blog-posts-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.03) !important;
}

.featured-blog-posts-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

.featured-blog-posts-card__content {
  padding: 24px 32px !important;
}

.featured-blog-posts-card__content h4 {
  font-family: var(--font-heading--family) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  transition: color 0.2s ease !important;
}

.featured-blog-posts-card:hover .featured-blog-posts-card__content h4 {
  color: var(--kt-highlight, #23A998) !important;
}

.blog-post-info-text {
  font-family: var(--font-body--family) !important;
  font-size: 0.85rem !important;
  color: #888888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 16px !important;
}

.blog-post-card__content-text {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  color: #4a4a4a !important;
  line-height: 1.6 !important;
}

@media screen and (max-width: 749px) {
  .featured-blog-posts-card {
    border-radius: 12px !important;
  }
  
  .featured-blog-posts-card__content {
    padding: 16px 16px !important;
  }
  
  .featured-blog-posts-card__content h4 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }

  .blog-post-info-text {
    font-size: 0.75rem !important;
    margin-bottom: 10px !important;
  }

  .blog-post-card__content-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.featured-blog-posts h3 {
  font-family: var(--font-heading--family) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--kt-highlight, #1a1a1a) !important;
}

/* --- 14. Testimonials Section - Equal Height & Premium Polish --- */
/* Target the testimonials carousel to ensure uniform card heights and professional layout */
#shopify-section-testimonials_carousel .carousel__scroller,
.testimonials-carousel .carousel__scroller {
  align-items: stretch !important;
  /* Force all items to take full height of the row */
  display: flex !important;
}

#shopify-section-testimonials_carousel .carousel__item,
.testimonials-carousel .carousel__item {
  height: auto !important;
  /* Allow flex stretch to work */
  display: flex !important;
}

#shopify-section-testimonials_carousel .card,
#shopify-section-testimonials_carousel .product-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 0 !important;
  /* Let content handle padding */
  overflow: hidden !important;
}

#shopify-section-testimonials_carousel .card__content,
#shopify-section-testimonials_carousel .product-card__content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 48px 32px !important;
  text-align: center !important;
  gap: 16px !important;
}

/* Style the testimonial text for better readability */
#shopify-section-testimonials_carousel .card__content p,
#shopify-section-testimonials_carousel .product-card__content p {
  margin: 0 !important;
  line-height: 1.6 !important;
  font-style: italic;
}

/* Highlight the author */
#shopify-section-testimonials_carousel .card__content strong,
#shopify-section-testimonials_carousel .product-card__content strong {
  display: block;
  margin-top: 8px;
  color: var(--kt-accent);
  font-style: normal !important;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Star styling */
#shopify-section-testimonials_carousel .card__content [style*="color: #ffb800"] {
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 749px) {
  #shopify-section-testimonials_carousel .card__content {
    padding: 32px 20px !important;
  }
}


/* --- 12. KT MEN Hair Accordion Styles --- */
.ktm-hair-accordion {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ktm-hair-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ktm-hair-header {
  padding: 10px 5px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kt-accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ktm-hair-header span {
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform 0.3s ease;
  margin-left: 10px;
}

.ktm-hair-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4b5563;
}

.ktm-hair-item.active .ktm-hair-content {
  max-height: 500px;
  padding-top: 5px;
  padding-bottom: 20px;
}

.ktm-hair-item.active .ktm-hair-header span {
  transform: rotate(45deg);
}

.ktm-hair-content strong {
  display: block;
  margin-bottom: 5px;
  color: var(--kt-accent);
}


/* --- 13. Instagram Story Style for Round Collections --- */
/* --- 13. Instagram Story Style for Round Collections --- */
section[id*="round_collections_carousel"],
div[id*="round_collections_carousel"] {
  padding-bottom: 0 !important;
}


[id*="round_collections_carousel"] .carousel-content slideshow-slides {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 30px !important;
  padding: 15px var(--page-margin) !important;
  justify-content: center !important;
}

[id*="round_collections_carousel"] .carousel-content slideshow-slides::-webkit-scrollbar {
  display: none;
}

[id*="round_collections_carousel"] .card {
  flex: 0 0 240px !important;
  width: 240px !important;
  text-align: center;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: none !important;
}

[id*="round_collections_carousel"] .card__content {
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

[id*="round_collections_carousel"] .card__inner {
  overflow: visible !important;
}

[id*="round_collections_carousel"] .image-block {
  width: 220px !important;
  height: 220px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  padding: 5px !important;
  background: var(--kt-accent) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


[id*="round_collections_carousel"] .image-block__image,
[id*="round_collections_carousel"] img {
  border: 5px solid #fff !important;
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-ratio: 1 / 1 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
  display: block !important;
}

[id*="round_collections_carousel"] .text-block {
  position: relative !important;
  margin-top: 20px !important;
  text-align: center !important;
}

[id*="round_collections_carousel"] .text-block p {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}


@media screen and (max-width: 749px) {
  [id*="round_collections_carousel"] .carousel-content slideshow-slides {
    justify-content: center !important;
    flex-wrap: nowrap !important; /* Force all 4 in one row */
    gap: 8px !important; 
    padding: 10px 4px !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* Hide Carousel Arrows and Dots on Mobile */
  [id*="round_collections_carousel"] .carousel-navigation,
  [id*="round_collections_carousel"] .carousel-pagination,
  [id*="round_collections_carousel"] .slideshow-arrows,
  [id*="round_collections_carousel"] .slideshow-dots {
    display: none !important;
  }



  [id*="round_collections_carousel"] .card {
    flex: 0 0 80px !important; 
    width: 80px !important;
    height: 80px !important;
  }

  [id*="round_collections_carousel"] .image-block {
    width: 80px !important;
    height: 80px !important;
    background: var(--kt-accent) !important;
    padding: 2px !important; /* Thinner green border */
  }

  [id*="round_collections_carousel"] .image-block__image,
  [id*="round_collections_carousel"] img {
    border: none !important; /* Removed white border */
  }





  /* Restored subtitle visibility with mobile adjustments */
  [id*="round_collections_carousel"] .text-block {
    display: block !important;
    margin-top: 10px !important;
  }
  [id*="round_collections_carousel"] .text-block p {
    font-size: 13px !important; /* Scaled down for small devices */
  }
}






/* --- 14. Custom Video Controls --- */
.video-custom-controls {
  position: absolute !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  gap: 12px !important;
  z-index: 20 !important; /* Above almost everything */
  pointer-events: auto !important;
}

.video-custom-controls .deferred-media__poster-button {
  position: relative !important;
  transform: none !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important; /* Force visibility even when video is playing */
  visibility: visible !important;
  pointer-events: auto !important;
  transition: all 0.3s ease !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  margin: 0 !important;
}

.video-custom-controls .deferred-media__poster-button:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  transform: scale(1.05) !important;
}

.video-custom-controls .deferred-media__poster-icon {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.video-custom-controls .deferred-media__poster-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: static !important;
}

/* Hidden state for icons */
.video-custom-controls .hidden {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .video-custom-controls {
    bottom: 15px !important;
    right: 15px !important;
    gap: 8px !important;
  }

  .video-custom-controls .deferred-media__poster-button {
    width: 38px !important;
    height: 38px !important;
  }

  .video-custom-controls .deferred-media__poster-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* --- 15. Force Full Width for Ads Video 2 --- */
#shopify-section-ads_video_2 .section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

#shopify-section-ads_video_2 .slideshow-slides,
#shopify-section-ads_video_2 slideshow-slide,
#shopify-section-ads_video_2 .slide__image-container,
#shopify-section-ads_video_2 .slide__media,
#shopify-section-ads_video_2 video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* --- 16. Shop By Category (Brands That Lead) - Circular Instagram Style --- */
#shopify-section-collection_grid_4 .carousel-content slideshow-slides {
  gap: 30px !important;
  padding: 20px var(--page-margin) !important;
}


#shopify-section-collection_grid_4 .card {
  width: 280px !important;
  height: 280px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  overflow: visible !important; /* Allow border to show */
  background: none !important;
  border: none !important;
  flex: 0 0 280px !important;
}

#shopify-section-collection_grid_4 .card__media-container {
  width: 100% !important;
  height: 100% !important;
  padding: 5px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-radius: 50% !important;
}

#shopify-section-collection_grid_4 .card__media {
  border: 4px solid #fff;
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

#shopify-section-collection_grid_4 .card__media img {
  border-radius: 50% !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

#shopify-section-collection_grid_4 .card__content {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 50% !important;
  margin: 4px; /* Match the border spacing */
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  z-index: 2;
}

#shopify-section-collection_grid_4 .button {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  padding: 0 !important;
}

#shopify-section-collection_grid_4 .button .icon {
  display: none !important; /* Clean text look */
}

@media screen and (max-width: 749px) {
  #shopify-section-collection_grid_4 .card {
    width: 200px !important;
    height: 200px !important;
    flex: 0 0 200px !important;
  }
  #shopify-section-collection_grid_4 .button {
    font-size: 14px !important;
  }
}

/* Instagram Story styles handled in section 13 above */


/* --- 18. REFINED CIRCULAR STYLE FOR SHOP BY CATEGORY (1024x1024 ready) --- */
#shopify-section-collection_grid_4 .card {
  width: 280px !important;
  height: 280px !important;
  flex: 0 0 280px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
}

#shopify-section-collection_grid_4 .card__media-container {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 6px;
}

#shopify-section-collection_grid_4 .card__media {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 4px solid #fff;
  overflow: hidden !important;
}

#shopify-section-collection_grid_4 .card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

#shopify-section-collection_grid_4 .card__content {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.4) !important;
  z-index: 10;
}

#shopify-section-collection_grid_4 .button {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
}

@media screen and (max-width: 749px) {
  #shopify-section-collection_grid_4 .card {
    width: 220px !important;
    height: 220px !important;
    flex: 0 0 220px !important;
  }
}

/* --- 19. Fix for Ads Video 1 - Equal Gaps and Alignment --- */
#shopify-section-ads_video_1 .section {
  padding-left: var(--page-margin) !important;
  padding-right: var(--page-margin) !important;
  max-width: var(--page-width) !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#shopify-section-ads_video_1 .media-with-content {
  gap: 40px !important; /* Balanced space between content and video */
  align-items: center !important;
}

#shopify-section-ads_video_1 .content {
  padding: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure the content block within media-with-content doesn't have inherited asymmetrical padding */
#shopify-section-ads_video_1 .media-with-content__content > .group-block-content {
  padding: 0 !important;
}

#shopify-section-ads_video_1 .media {
  border-radius: 12px !important;
  overflow: hidden !important;
  height: 100% !important;
}

#shopify-section-ads_video_1 .media img,
#shopify-section-ads_video_1 .media video {
  border-radius: 12px !important;
}

#shopify-section-ads_video_1 .media-with-content .button,
#shopify-section-ads_video_1 .media-with-content .button-secondary {
  margin-top: 20px !important;
  background-color: #ffffff !important;
  color: #23A998 !important;
  border: 1px solid #ffffff !important;
}

#shopify-section-ads_video_1 .media-with-content .button:hover,
#shopify-section-ads_video_1 .media-with-content .button-secondary:hover {
  background-color: #23A998 !important;
  color: #ffffff !important;
  border-color: #23A998 !important;
}

@media screen and (max-width: 749px) {
  #shopify-section-ads_video_1 .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  #shopify-section-ads_video_1 .media-with-content {
    gap: 20px !important;
  }

  #shopify-section-ads_video_1 .content {
    padding: 30px 20px !important;
  }
}


/* --- 20. Mobile Reordering - Shop By Category First --- */
@media screen and (max-width: 749px) {
  #MainContent {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Move Shop By Category to the very top */
  [id*="round_collections_carousel"] {
    order: -2 !important;
  }
  
  /* Ensure Hero Slider is next */
  [id*="slideshow_dNn4kz"] {
    order: -1 !important;
  }
  
  /* Re-enabled the heading/title for Shop By Category on mobile */
  [id*="round_collections_carousel"] .group-block {
    display: flex !important;
    margin-top: 15px !important; /* Provides nice spacing below announcement */
    margin-bottom: 10px !important;
  }
  
  /* Restore spacing for the top section content */
  [id*="round_collections_carousel"] {
    padding-top: 15px !important;
    padding-bottom: 10px !important;
  }

  [id*="round_collections_carousel"] .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  
  /* Show Hero Slider but hide the banner after categories on mobile */
  [id*="slideshow_dNn4kz"] {
    display: block !important;
    order: -1 !important;
  }

  /* 
  [id*="slideshow_iPKQtg"] {
    display: none !important;
  }
  */
}




/* Desktop spacing refinement */
@media screen and (min-width: 750px) {
  [id*="slideshow_dNn4kz"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  [id*="round_collections_carousel"] {
    padding-top: 0px !important;
    margin-top: 0 !important;
  }
}


/* --- 15. Final Navigation Arrow Overrides --- */
/* Legacy arrow/gallery rules removed for restoration of product media */
    min-height: 32px !important;
  }
  .slideshow-control svg, .slider-button svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* --- 15. Global Premium Tweaks (Lightweight & Safe) --- */

/* Preserve per-page palettes (avoid forcing all templates to one background). */
.template-page-ktkids #MainContent,
.template-page-ktmen #MainContent,
.template-page-ktprofessional #MainContent {
  background-color: var(--kt-page-bg) !important;
}

/* Subtle button lift on desktop hover only. */
@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover,
  .button-secondary:hover,
  .button-primary:hover {
    transform: translateY(-1px) !important;
  }
}

/* --- 16. (Removed) Overly-aggressive global overrides --- */

/* (Removed) brittle section-id-specific color forcing; rely on section color schemes instead. */

/* (Removed) forced per-section text colors and spacing hacks; rely on section settings + tokens instead. */

/* --- FIX: MOBILE PRODUCT GALLERY COLOR LAYER --- */
/* 
   The user reported an unintended 'color layer' in the product gallery on phone view. 
   This forces transparency and resets visual overrides on the gallery container 
   to ensure the page background (e.g., cream on KT Men) shows through correctly.
*/
@media screen and (max-width: 749px) {
  /* NUCLEAR OVERRIDE: Remove all backgrounds, boxes, and tints from product gallery on mobile */
  .template-product .product-media-container,
  .template-product .product-media-container img,
  .template-product .product-media,
  .template-product .product-media__image,
  .template-product .media-gallery,
  .template-product .media-gallery__grid,
  .template-product slideshow-component,
  .template-product .slideshow-slides,
  .template-product slideshow-slide,
  .template-product .slideshow-container,
  .quick-add-modal .product-media-container,
  .quick-add-modal .product-media,
  .quick-add-modal slideshow-slide {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    outline: none !important;
  }

  /* Reset any pseudo-elements that might be adding overlays */
  .template-product .product-media-container::before,
  .template-product .product-media-container::after,
  .template-product .product-media::before,
  .template-product .product-media::after,
  .template-product slideshow-slide::before,
  .template-product slideshow-slide::after,
  .quick-add-modal .product-media-container::after,
  .quick-add-modal .product-media::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
  }

  /* Ensure the main container doesn't have a background that leaks */
  .template-product .product-information__media,
  .template-product .product-information__grid {
    background-color: transparent !important;
    background: transparent !important;
  }
}

/* --- BLOG FEATURED IMAGE OPTIMIZATION --- */
/* Force horizontal aspect ratio for blog cards and ensure images fill the container properly */
.featured-blog-posts-card__image {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: top center !important;
  width: 100% !important;
  height: 100% !important;
}

.featured-blog-posts-card__image img {
  object-fit: cover !important;
  object-position: top center !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- SINGLE BLOG POST PAGE --- */
/* Compact, readable layout for the article page */
.shopify-section .section:has(.blog-post-featured-image) {
  max-width: 860px !important;
  margin-inline: auto !important;
}

/* Featured image: perfect landscape ratio, rounded corners */
.blog-post-featured-image {
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-block: 24px 32px !important;
}

.blog-post-featured-image__image {
  aspect-ratio: var(--ratio) !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Blog post body content — clean readable typography */
.blog-post-content {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #2d2d2d !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

/* Mobile: compact, tight, readable */
@media screen and (max-width: 749px) {
  .blog-post-featured-image {
    border-radius: 8px !important;
    margin-block: 16px 20px !important;
  }

  .blog-post-content {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
  }
}

/* --- NUCLEAR SCROLL FIX (Mobile Footer & Body) --- */
/* Prevent horizontal scroll and extra vertical space after footer */
html {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
body {
  overflow-x: clip !important; /* Prevents horizontal scroll without locking vertical scroll */
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

main[role="main"] {
  overflow-x: clip !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
}

/* Fix for potential rogue empty elements or spacers */
#MainContent, #main, main {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 749px) {
  body {
    /* Allow native elastic scrolling on mobile */
    overscroll-behavior-y: auto !important;
  }
  
  .shopify-section-group-footer-group {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Force the document to end at the footer */
  #shopify-section-footer-group,
  .footer-group {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 100 !important;
  }
  
  /* Kill any rogue margins on the last section of the main content */
  main[role="main"] > .shopify-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Eliminate phantom space at the very bottom */
#MainContent, 
.main-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


footer:last-of-type {
  margin-bottom: -5px !important; /* Pull up slightly to hide any rounding errors */
}

/* --- 21. Tablet Device Optimization (750px to 1024px) --- */
@media screen and (min-width: 750px) and (max-width: 1024px) {
  /* Optimize Product Tabs (Concern-Wise Picks, etc.) */
  [id*="product_tabs"] .kt-derma-tabs__products > *,
  [class*="product-tabs"] .kt-derma-tabs__products > * {
    flex: 0 0 calc(33.333% - 1rem) !important;
    min-width: 160px !important;
  }
  
  /* Optimize Shop By Category (Round Circles) */
  [id*="round_collections_carousel"] .card {
    flex: 0 0 160px !important;
    width: 160px !important;
    height: 160px !important;
  }
  
  [id*="round_collections_carousel"] .image-block {
    width: 140px !important;
    height: 140px !important;
  }
  
  [id*="round_collections_carousel"] .text-block p {
    font-size: 14px !important;
  }

  /* Header Optimization for Tablet */
  .header-brand-logos {
    gap: 10px !important;
  }
  
  .header-brand-tabs__text {
    font-size: 0.85rem !important;
  }
  
  .header-brand-logos__item:not(:last-child)::after {
    margin-left: 10px !important;
  }
}

/* --- PRODUCT CARD PREMIUM EFFECTS --- */
.product-card__content {
  background: #ffffff !important;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.3s ease !important;
  overflow: hidden !important;
  padding: 8px 12px !important; /* Top/Bottom: 8px, Left/Right: 12px */
}



/* Ensure price order and styling looks clean */
.price-badge-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.price-item--sale.price {
  color: #23A998 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.price-item--regular.compare-at-price {
  text-decoration: line-through !important;
  color: #999 !important;
  font-size: 0.9rem !important;
}

.price-discount-badge {
  background: #eef5ee !important;
  color: #23A998 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

@media screen and (max-width: 749px) {
  .product-card__content {
    border-radius: 8px !important;
    padding: 6px 10px !important; /* Top/Bottom: 6px, Left/Right: 10px */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px !important;
  }
  
  .price-item--sale.price {
    font-size: 0.9rem !important;
  }
  
  .price-item--regular.compare-at-price {
    font-size: 0.8rem !important;
  }
}

/* Compact button style for Media-with-Content sections */
.media-with-content .button,
.media-with-content .button-secondary,
.media-with-content .button--reduced-padding {
  background-color: #23A998 !important;
  color: #ffffff !important;
  border: none !important;
  padding-inline: 32px !important; /* Reduced for a sleeker look */
  padding-block: 8px !important;
  min-height: 42px !important; /* Reduced height */
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.media-with-content .button:hover,
.media-with-content .button-secondary:hover {
  background-color: #1a1b18 !important;
  transform: translateY(-2px) !important;
}

@media screen and (max-width: 749px) {
  /* Force entire content block to center on mobile for Ads Video / Media-with-content */
  .media-with-content .media-with-content__content,
  .media-with-content .media-with-content__content .text-block,
  .media-with-content .media-with-content__content .rte {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Broad mobile centering for all text and paragraphs in these blocks */
  .media-with-content p, 
  .media-with-content h2,
  .media-with-content .rte p {
    text-align: center !important;
    margin-inline: auto !important;
  }

  .media-with-content .button,
  .media-with-content .button-secondary,
  .media-with-content .button--reduced-padding {
    padding-inline: 24px !important; /* Keep mobile compact but clear */
    min-height: 42px !important;
  }
}

/* Tighten up blog card internal spacing */
.featured-blog-posts-card {
  padding: 0 !important;
}
.featured-blog-posts-card__content {
  padding: 4px 12px !important;
}
.featured-blog-posts-card__title,
.featured-blog-posts-card__info,
.featured-blog-posts-card__description {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-top: 0 !important;
}

.featured-blog-posts-card__description {
  margin-top: 4px !important;
}

/* --- BLOG SECTION POLISH --- */
@media screen and (max-width: 749px) {
  .featured-blog-posts-card__title {
    font-size: 1rem !important; /* Slightly smaller for mobile single-column */
    margin-top: 8px !important;
  }
  .featured-blog-posts-card__info {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }
  .featured-blog-posts-card__description {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
}

@media screen and (min-width: 750px) {
  .featured-blog-posts-card__title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  }
}

/* --- UNIFIED GREEN 'VIEW ALL' BUTTONS --- */
.section-footer .button, 
.section-footer .button-secondary,
.featured-blog-posts__footer .button,
.section-button-wrapper .button,
[class*="button_view_all"] .button,
[class*="button_view_all"] .button-secondary {
  background-color: #23A998 !important;
  color: #ffffff !important;
  border: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
  min-height: auto !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.section-footer .button:hover,
.featured-blog-posts__footer .button:hover,
[class*="button_view_all"] .button:hover {
  background-color: #1a1b18 !important; /* Slightly darker on hover */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* --- AGGRESSIVE VIEW ALL BUTTON STANDARDIZATION --- */
/* Target buttons specifically used as 'View All' at the bottom of sections */
[data-testid="carousel-section"] a,
[data-testid="product-list"] a,
.section-carousel a,
.section-resource-list a,
.featured-blog-posts__footer a {
  /* Targeted specifically for secondary/view-all style buttons */
}

/* Force Green Style on all section-level footer buttons */
.section-carousel a.button, 
.section-carousel a.button-secondary,
.section-resource-list a.button,
.section-resource-list a.button-secondary,
.featured-blog-posts__footer a.button,
.featured-blog-posts__footer a.button-secondary,
[class*="button_view_all"] a {
  background-color: #23A998 !important;
  color: #ffffff !important;
  border: none !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
}

.section-carousel a.button:hover,
.section-carousel a.button-secondary:hover,
.section-resource-list a.button:hover,
.section-resource-list a.button-secondary:hover {
  background-color: #1a1b18 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* --- UNIFIED PREMIUM CAROUSEL ARROWS (FINAL GLADIATOR OVERRIDE) --- */
/* Force Global CSS Variables for navigation to bypass theme color schemes */
:root, html body {
  --color-slideshow-button-background: #ffb800 !important;
  --color-slideshow-button-foreground: #23A998 !important;
  --color-button-background: #ffb800 !important;
  --color-button-background: #fbd704 !important;
  --color-button-text: #23A998 !important;
}

/* Target all carousel buttons at the global body level */
/* --- UNIFIED PREMIUM CAROUSEL ARROWS (FINAL GLADIATOR OVERRIDE) --- */
/* Target only Homepage and Collection page carousels to avoid breaking the Product Details gallery */
:is(.template-index, .template-collection) html body slideshow-arrows {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  inset: 0 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  z-index: 100 !important;
}

:is(.template-index, .template-collection) html body .slideshow-control,
:is(.template-index, .template-collection) html body [class*="slideshow-control"],
:is(.template-index, .template-collection) html body button[name="next"],
:is(.template-index, .template-collection) html body button[name="previous"],
:is(.template-index, .template-collection) html body .carousel__button,
:is(.template-index, .template-collection) html body .slider-button,
:is(.template-index, .template-collection) html body .flickity-button,
:is(.template-index, .template-collection) html body slideshow-arrows button,
:is(.template-index, .template-collection) html body slideshow-arrows .slideshow-control {
  pointer-events: auto !important;
  background-color: #fbd704 !important; /* KT Highlight Yellow */
  color: #23A998 !important; /* Brand Green */
  border: none !important;
  
  /* FORCE PERFECT CIRCLE */
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease !important;
  z-index: 100 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Scope Icon Colors */
:is(.template-index, .template-collection) html body .slideshow-control svg,
:is(.template-index, .template-collection) html body button[name="next"] svg,
:is(.template-index, .template-collection) html body button[name="previous"] svg,
:is(.template-index, .template-collection) html body .carousel__button svg,
:is(.template-index, .template-collection) html body .slider-button svg,
:is(.template-index, .template-collection) html body [class*="slideshow-control"] svg,
:is(.template-index, .template-collection) html body slideshow-arrows svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #23A998; 
  fill: #23A998;
  color: #23A998;
  stroke-width: 3px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}

/* Hover States */
:is(.template-index, .template-collection) html body .slideshow-control:hover,
:is(.template-index, .template-collection) html body button[name="next"]:hover,
:is(.template-index, .template-collection) html body button[name="previous"]:hover {
  background-color: #23A998 !important;
}

:is(.template-index, .template-collection) html body .slideshow-control:hover svg {
  stroke: #ffb800 !important;
  fill: #ffb800 !important;
}

/* Position adjustment for main carousels */
.resource-list__carousel slideshow-arrows,
.resource-list__carousel .slideshow-arrows {
  position: absolute !important;
  top: 0 !important;
  height: 65% !important; 
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

/* AGGRESSIVELY HIDE arrows inside homepage product cards ONLY */
.template-index .product-card .slideshow-control,
.template-index .product-card button[name="next"],
.template-index .product-card button[name="previous"],
.template-index .card-gallery .slideshow-control,
.template-index .card-gallery button[name="next"],
.template-index .card-gallery button[name="previous"] {
  display: none !important;
}

/* Mobile size optimization */
@media screen and (max-width: 749px) {
  :is(.template-index, .template-collection) html body .slideshow-control,
  :is(.template-index, .template-collection) html body button[name="next"],
  :is(.template-index, .template-collection) html body button[name="previous"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
  }
}
/* --- PREMIUM SECTION BUTTONS (WHITE STANDOUT) --- */
/* Targeting buttons in Media with Content, Product List, and Slideshow to stand out from section backgrounds */
:is(.media-with-content, .product-list, .slideshow, .section-carousel) .button-secondary,
:is(.media-with-content, .product-list, .slideshow, .section-carousel) .button:not(.product-card-atc__button) {
  background-color: #ffffff !important;
  color: #23A998 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 32px !important;
  min-height: auto !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:is(.media-with-content, .product-list, .slideshow, .section-carousel) .button-secondary:hover,
:is(.media-with-content, .product-list, .slideshow, .section-carousel) .button:not(.product-card-atc__button):hover {
  background-color: #fbd704 !important; /* KT Highlight Yellow on hover */
  color: #23A998 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Specific fix for "SHOP KT KIDS" and "SHOP KT MEN" to ensure they are never green-on-green */
[href*="/collections/kt-kids"], 
[href*="/collections/kt-men"],
[href*="/collections/kt-professional"],
[href*="/collections/kt-derma"] {
  &.button, &.button-secondary {
    background-color: #ffffff !important;
    color: #23A998 !important;
  }
}

/* --- MOBILE MENU HIERARCHY FIX --- */
.menu-drawer__menu-item--child,
.menu-drawer__menu-item--grandchild,
.menu-drawer__submenu .menu-drawer__menu-item {
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  padding-left: 36px !important;
  display: flex !important;
  align-items: center !important;
  opacity: 0.85 !important;
}

.menu-drawer__menu-item--child::before,
.menu-drawer__menu-item--grandchild::before,
.menu-drawer__submenu .menu-drawer__menu-item::before {
  content: "→";
  margin-right: 12px;
  opacity: 0.5;
  font-size: 1.1rem;
  color: var(--color-foreground);
  display: inline-block;
}

/* --- COMPREHENSIVE TABLET OPTIMIZATION (750px - 1100px) --- */
@media screen and (min-width: 750px) and (max-width: 1100px) {
  /* 1. Global Spacing - Give cards more room */
  :root {
    --page-margin: 20px !important;
    --util-page-margin-offset: 20px !important;
  }

  .section {
    padding-inline: 20px !important;
  }

  /* 2. Header Navigation - Prevent crowded menus */
  .header__row--bottom .menu-list__link {
    font-size: 10px !important;
    padding-inline: 6px !important;
    letter-spacing: 0.02em !important;
  }
  
  .header__row--bottom .header__columns {
    gap: 12px !important;
  }

  /* 3. Carousel 3.5 Item Rule - Fix "cut off" look */
  .resource-list__carousel .resource-list__slide {
    --slide-width: 27% !important; /* Perfectly fits ~3.5 items with gaps */
    flex: 0 0 27% !important;
    width: 27% !important;
  }

  /* 4. Grid Layouts - Switch from 4 to 3 columns for legibility */
  .resource-list--grid {
    --resource-list-columns: repeat(3, 1fr) !important;
  }

  /* 5. Center Section Headers for Balance */
  .section-resource-list__header {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .section-resource-list__header .group-block-content {
    justify-content: center !important;
    text-align: center !important;
  }

  /* 6. Blog Cards Optimization */
  .featured-blog-posts .resource-list--grid {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    padding-bottom: 20px !important;
  }

  .featured-blog-posts .resource-list__item {
    flex: 0 0 70% !important; /* Show 1.4 cards to indicate scroll */
    max-width: 320px !important;
  }

  /* 7. Round Category Cards - Make them fit */
  .round-collections-carousel .resource-list__slide {
    flex: 0 0 22% !important; /* Fits ~4.5 items */
    width: 22% !important;
  }
}

/* --- TABLET CAROUSEL: SHOW 3.5 PRODUCTS --- */
@media screen and (min-width: 750px) and (max-width: 1100px) {
  .resource-list__carousel .resource-list__slide {
    /* To show 3.5 items, we divide the width by 3.5 and subtract the proportionate gap */
    --slide-width: calc((100% - (3 * var(--resource-list-column-gap, 12px))) / 3.5) !important;
    flex: 0 0 var(--slide-width) !important;
    width: var(--slide-width) !important;
  }

  /* Ensure the container doesn't clip the peeking item */
  .resource-list.resource-list__carousel {
    overflow: visible !important;
  }
}

/* --- TABLET LAYOUT: MEDIA TOP / CONTENT CENTERED --- */
@media screen and (max-width: 1100px) {
  .media-with-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important; /* Tightened gap */
  }

  .media-with-content .media-block {
    width: 100% !important;
    order: 1 !important;
    max-width: 900px !important;
    margin-inline: auto !important;
  }

  .media-with-content .media-with-content__content {
    width: 100% !important;
    order: 2 !important;
    text-align: center !important;
    padding-inline: var(--page-margin) !important;
    display: flex !important;
    justify-content: center !important;
  }

  .media-with-content .media-with-content__content .group-block-content {
    align-items: center !important;
    text-align: center !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    padding-block-start: 0 !important; /* Remove top padding to close gap */
  }

  /* Force all nested text and buttons to center */
  .media-with-content .media-with-content__content :is(h1, h2, h3, p, span, .rte, .button-group) {
    text-align: center !important;
    margin-inline: auto !important;
  }

  /* Special fix for button alignment */
  .media-with-content .media-with-content__content .button {
    margin-inline: auto !important;
    display: inline-flex !important;
  }

  /* Reduce min-height on tablet to prevent excessive gaps */
  .media-with-content .media-block {
    min-height: 300px !important;
    height: auto !important;
  }
}

/* --- PREMIUM VIDEO & CONTROLS FIX (Tablet/Mobile) --- */
@media screen and (max-width: 1100px) {
  /* Ensure the video fills the container and controls are pinned to the bottom */
  .media-block__media--video video,
  deferred-media video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #000 !important; /* Prevent white flashes/bars */
  }

  /* Container polish */
  .media-block__media--video,
  .media-block--contain,
  deferred-media {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
  }

  /* Fix for "bottom down" issue: ensure no flex alignment is pushing the video/controls */
  .media-block__media--video {
    align-items: flex-start !important; 
    justify-content: flex-start !important;
    height: auto !important;
  }
}

/* --- TABLET NAVIGATION FIX (Scrollable Bottom Row) --- */
@media screen and (min-width: 750px) and (max-width: 1200px) {
  .header__row--bottom {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
  }
  
  .header__row--bottom::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }

  .header__row--bottom .header__columns {
    display: flex !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    width: max-content !important;
    padding-inline: var(--page-margin) !important;
    gap: 20px !important;
  }

  .header__row--bottom .header-menu,
  .header__row--bottom .menu-list,
  .header__row--bottom .overflow-menu::part(list) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
  }

  /* Ensure menu items don't shrink */
  .header__row--bottom .menu-list__list-item {
    flex-shrink: 0 !important;
    display: flex !important;
  }
}

/* --- 9. Floating Back Button --- */
.kt-back-button {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none; /* Hidden on desktop by default */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0.3s ease;
  color: #23A998;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  outline: none;
}

.kt-back-button.is-visible {
  opacity: 1;
  visibility: visible;
}

.kt-back-button:hover {
  transform: translateY(-4px);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  color: #23A998;
}

.kt-back-button svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.5;
}

@media screen and (max-width: 749px) {
  .kt-back-button {
    display: flex; /* Only visible on mobile */
    bottom: 90px;
    right: 28px;
    width: 40px;
    height: 40px;
  }
  .kt-back-button svg {
    width: 20px;
    height: 20px;
  }
}