/* ==========================================================================
   MODULE: HEADER (.cdlv-header)
   Architecture: BEM Naming Convention, Mobile-First, Grid Layout
   Purpose: Global navigation styling with transparent-to-solid scroll state.
   Dependencies: Uses tokens from globals.css (--color-primary, fluid spacing).
   ========================================================================== */

/* The header container */
#global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color var(--transition-base), 
              box-shadow var(--transition-base), 
              transform var(--transition-base),
              visibility var(--transition-base);
}

#global-header.cdlv-header--scrolled {
  background-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

#global-header.cdlv-header--hidden {
  transform: translateY(-100%);
  visibility: hidden; /* Removes from tab order when scrolled out of view */
}

.cdlv-header__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--spacing-xs) 0;
}

/* --- LOGO --- */
.cdlv-header__logo-link {
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  gap: 1px; 
  text-decoration: none;
  border-radius: var(--radius-strict);
}

.cdlv-header__logo-img {
  width: var(--logo-width-base);
  height: auto;
  object-fit: cover;
  transition: width var(--transition-base);
}

.cdlv-header__logo-text {
  font-family: var(--font-family-heading); 
  font-size: var(--font-size-logo-text); 
  color: var(--color-text-dark);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
}

/* --- NAVIGATION LISTS --- */
.cdlv-header__list {
  list-style: none;
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.cdlv-header__list--left {
  justify-content: flex-start;
}

.cdlv-header__list--right {
  justify-content: flex-end;
}

.cdlv-header__link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--spacing-xs) 0;
  position: relative;
  border-radius: var(--radius-strict);
}

.cdlv-header__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: var(--color-text-dark); 
  transition: width var(--transition-base);
}

.cdlv-header__link:hover::after,
.cdlv-header__link[aria-current="page"]::after {
  width: 100%;
}

/* --- CART ICON SPECIAL STYLES --- */
.cdlv-header__link--cart {
  font-size: 1.2rem; 
}

.cdlv-header__link--cart::after, 
.cdlv-header__link--cart[aria-current="page"]::after {
  display: none;
}

.cdlv-header__link--cart:hover .cdlv-header__cart-icon,
.cdlv-header__link--cart:focus-visible .cdlv-header__cart-icon {
  transform: scale(1.1); 
}

.cdlv-header__cart-icon {
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  object-fit: cover; 
  display: block;
  transition: transform var(--transition-fast);
}

.cdlv-header__menu-icon {
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fast);
}

/* --- MOBILE CONTROLS --- */
.cdlv-header__toggle {
  justify-self: start;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  color: var(--color-text-dark);
  padding: var(--spacing-xs) 0;
  border-radius: var(--radius-strict);
}

.cdlv-header__item--mobile-only {
  display: none;
}

/* --- ACCESSIBILITY FOCUS RINGS --- */
.cdlv-header__toggle:focus-visible,
.cdlv-header__logo-link:focus-visible,
.cdlv-header__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* --- DYNAMIC INVERTED STATE --- */
.cdlv-header--inverted .cdlv-header__link,
.cdlv-header--inverted .cdlv-header__toggle,
.cdlv-header--inverted .cdlv-header__logo-text {
  color: var(--color-text-light);
}

.cdlv-header--inverted .cdlv-header__link::after {
  background-color: var(--color-text-light);
}

.cdlv-header--inverted .cdlv-header__menu-icon,
.cdlv-header--inverted .cdlv-header__cart-icon {
  filter: brightness(0) invert(1);
}

/* Invert the focus ring to white when the background is dark */
.cdlv-header--inverted .cdlv-header__toggle:focus-visible,
.cdlv-header--inverted .cdlv-header__logo-link:focus-visible,
.cdlv-header--inverted .cdlv-header__link:focus-visible {
  outline-color: var(--color-text-light);
}

/* --- RESPONSIVE LAYOUTS --- */
@media (max-width: 991px) {
  .cdlv-header__list--left,
  .cdlv-header__item--desktop-only {
    display: none;
  }

  .cdlv-header__item--mobile-only {
    display: flex;
  }

  #global-header.cdlv-header--menu-open {
    background-color: var(--color-primary); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }

  .cdlv-header--menu-open .cdlv-header__nav {
    grid-template-rows: auto auto;
    padding-bottom: var(--spacing-md);
  }

  .cdlv-header--menu-open .cdlv-header__toggle {
    position: static;
  }

  .cdlv-header--menu-open .cdlv-header__list--right {
    padding-top: 0;
  }

  .cdlv-header--menu-open .cdlv-header__list--left {
    grid-column: 1 / -1; 
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
  }
}

@media (min-width: 992px) {  
  .cdlv-header__toggle {
    display: none; 
  }
  
  .cdlv-header__list--left,
  .cdlv-header__item--desktop-only {
    display: flex;
  }
}



/* ==========================================================================
   MODULE: FOOTER (.cdlv-footer)
   Purpose: Global site footer providing hierarchical navigation, legal, 
            and account links.
   Architecture: CSS Grid for desktop, Flexbox with JS-driven accordion for mobile.
   ========================================================================== */

.cdlv-footer {
  background-color: var(--color-accent);
  color: var(--color-text-light);
  font-family: var(--font-family-body);
  margin-inline: calc(var(--layout-gutter) * -1);
}

.cdlv-footer-heading {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  color: var(--color-text-light);
}

.cdlv-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-block: var(--spacing-lg);
  padding-inline: var(--layout-gutter);
}

.cdlv-footer-brand-banner {
  background-color: var(--color-primary);
  padding-block: var(--spacing-md);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cdlv-footer-logo-wrapper {
  display: block;
  border-radius: var(--radius-strict);
}

.cdlv-footer-logo-wrapper img {
  width: var(--logo-width-base);
}

.cdlv-footer-logo-wrapper:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Navigation Grid / Accordion */
.cdlv-footer-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.cdlv-footer-column {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cdlv-footer-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  color: inherit;
  padding-block: var(--spacing-sm);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  text-align: left;
}

.cdlv-footer-toggle:focus-visible {
  outline: 2px solid var(--color-text-light);
  outline-offset: -2px;
}

.cdlv-footer-toggle[aria-expanded="true"] .cdlv-footer-toggle-icon {
  transform: rotate(180deg);
}

.cdlv-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  padding-bottom: var(--spacing-sm);
}

.cdlv-footer-column.is-active .cdlv-footer-list {
  display: block;
  animation: fade-in-up var(--transition-base) forwards;
}

.cdlv-footer-link {
  display: inline-block;
  padding-block: clamp(0.25rem, 0.5vw, 0.5rem) var(--spacing-xs);
  font-size: var(--font-size-small);
  opacity: 0.8;
  color: var(--color-text-light);
  border-radius: var(--radius-strict);
}

.cdlv-footer-link:focus-visible {
  outline: 2px solid var(--color-text-light);
  outline-offset: -2px;
}

.cdlv-footer-link:hover,
.cdlv-footer-link:focus-visible {
  opacity: 1;
  color: var(--color-secondary);
}

/* Social & Copyright */
.cdlv-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  text-align: center;
}

.cdlv-footer-socials {
  display: flex;
  gap: var(--spacing-sm);
}

.cdlv-footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--icon-size-base) * 1.8);
  height: calc(var(--icon-size-base) * 1.8);
  border-radius: var(--radius-strict);
  transition: transform var(--transition-fast);
}

.cdlv-footer-social-link:focus-visible {
  outline: 2px solid var(--color-text-light);
  outline-offset: -2px; 
}

.cdlv-footer-social-link:hover,
.cdlv-footer-social-link:focus-visible {
  transform: scale(1.1);
}

.cdlv-footer-social-icon {
  width: calc(var(--icon-size-base) * 1.5);
  height: calc(var(--icon-size-base) * 1.5);
  object-fit: cover;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}

.cdlv-footer-legal-text {
  font-size: var(--font-size-small);
  opacity: 0.7;
}

/* --- DESKTOP ENHANCEMENTS --- */
@media (min-width: 992px) {
  .cdlv-footer-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    border-top: none;
  }

  .cdlv-footer-column {
    border-bottom: none;
  }

  .cdlv-footer-toggle {
    cursor: default;
    padding-block: 0;
    margin-bottom: var(--spacing-sm);
    pointer-events: none;
  }

  .cdlv-footer-toggle-icon {
    display: none;
  }

  .cdlv-footer-list {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
  }

  .cdlv-footer-column:not(.is-active) .cdlv-footer-list {
    display: flex;
  }

  .cdlv-footer-link {
    padding-block: 0;
  }
}

/* --- REDUCED MOTION SAFETY BLOCK (A11Y) --- */
@media (prefers-reduced-motion: reduce) {
  .cdlv-footer-social-link:hover,
  .cdlv-footer-social-link:focus-visible {
    transform: none;
  }
  
  .cdlv-footer-column.is-active .cdlv-footer-list {
    animation: none;
  }
}

/* ==========================================================================
   MODULE: HERO (.cdlv-hero)
   Purpose: Structural layouts for full-width and compact hero banners.
   Architecture: BEM Naming Convention, CSS Grid/Flexbox, Mobile-First.
   Security: No external assets referenced outside of allowed CSP scope.
   ========================================================================== */

.cdlv-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background-color: var(--color-neutral-bg);
}

.cdlv-hero__bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* --- FULL-WIDTH HERO MODIFIER --- */
.cdlv-hero--full {
  min-height: max(60vh, 500px); 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-offset) + var(--spacing-md)) var(--layout-gutter) var(--spacing-md);
}

.cdlv-hero__overlay-box {
  position: relative;
  z-index: 2; 
  background-color: rgba(255, 255, 255, 0.9);
  width: min(90vw, 1000px); 
  padding: var(--spacing-md) var(--layout-gutter);
  text-align: center;
  border-radius: var(--radius-strict);
}

/* --- COMPACT HERO MODIFIER --- */
.cdlv-hero--compact {
  min-height: max(40vh, 400px);
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  padding: calc(var(--header-offset) + var(--spacing-sm)) var(--layout-gutter) var(--spacing-sm);
}

.cdlv-hero__compact-overlay {
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%; 
  padding: var(--spacing-md);
  border-radius: var(--radius-strict);
}

@media (min-width: 992px) {
  .cdlv-hero__compact-overlay {
    width: max(45%, 450px); 
  }
}

/* --- HERO TYPOGRAPHY & ELEMENTS --- */
.cdlv-hero__overlay-box,
.cdlv-hero__compact-overlay {
  max-height: 85vh; 
  overflow-y: auto; 
  padding: clamp(1.5rem, 3vw, 3rem) var(--layout-gutter); 
}

.cdlv-hero__title { 
  font-size: clamp(2rem, 4vw + 1rem, 4.5rem);
  margin-bottom: var(--spacing-sm); 
}

.cdlv-hero__description {
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
  margin-bottom: var(--spacing-sm); 
  color: var(--color-text-dark);
  opacity: 0.9;
  max-width: 60ch; 
  margin-inline: auto;
}

.cdlv-hero--compact .cdlv-hero__description { 
  margin-inline: 0; 
}

/* --- BUTTONS --- */
.cdlv-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(2rem, 4vw, 3rem);
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-weight: 600;
  border-radius: var(--radius-strict);
  border: 2px solid transparent;
  text-align: center;
}

.cdlv-hero__btn--primary { 
  background-color: var(--color-accent); 
  color: var(--color-text-light); 
}

.cdlv-hero__btn--primary:hover { 
  background-color: var(--color-text-dark); 
  color: var(--color-primary); 
}

.cdlv-hero__btn--secondary { 
  background-color: transparent; 
  color: var(--color-text-dark); 
  border-color: var(--color-text-dark); 
}

.cdlv-hero__btn--secondary:hover { 
  background-color: var(--color-text-dark); 
  color: var(--color-primary); 
}

/* ==========================================================================
   MODULE: HERO VIDEO (styles/components.css) - 60VH & EXTENDED CONTROLS
   Architecture: BEM Naming Convention.
   Performance: Hardware acceleration forced via translateZ(0) for GPU 
   layering. Layout thrashing eliminated by restricting animations to 
   opacity and transform.
   ========================================================================== */

.cdlv-hero-video {
  position: relative;
  overflow: hidden;
  /* Limits height to 60% of the viewport */
  height: 60vh;
  height: 60svh; 
  background-color: var(--color-neutral-bg);
  display: flex;
  align-items: flex-end; 
  justify-content: center;
}

.cdlv-hero-video__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none; 
  /* Forces the video onto a dedicated GPU layer without using will-change */
  transform: translateZ(0); 
  backface-visibility: hidden;
}

/* --- OVERLAYS & ACTIONS --- */
.cdlv-hero-video__action {
  position: relative;
  z-index: 2;
  margin-bottom: var(--spacing-xl);
  padding: 0 var(--layout-gutter);
}

.cdlv-hero-video__btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(2rem, 4vw, 3rem);
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-weight: 600;
  border-radius: var(--radius-strict);
  transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
  background-color: transparent; 
  color: var(--color-text-dark);
  border: 2px solid var(--color-text-dark);
  text-decoration: none;
}

.cdlv-hero-video__btn-ghost:hover {
  background-color: var(--color-text-dark);
  color: var(--color-primary);
  transform: translateY(-2px) translateZ(0); /* Maintains GPU layer on hover */
}

.cdlv-hero-video__btn-ghost:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  background-color: var(--color-text-dark);
  color: var(--color-primary);
}

/* --- CUSTOM VIDEO CONTROLS --- */
.cdlv-hero-video__controls {
  position: absolute;
  bottom: var(--spacing-sm);
  right: var(--layout-gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0.5rem var(--spacing-xs);
  border-radius: var(--radius-strict);
  border: 1px solid rgba(26, 26, 26, 0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  opacity: 0;
  /* Re-uses your global entrance animation logic */
  animation: fade-in-up var(--transition-base) forwards;
  animation-delay: 500ms;
}

.cdlv-hero-video__control-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent); 
  transition: color var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius-strict);
}

.cdlv-hero-video__control-btn:hover {
  color: var(--color-text-dark);
  transform: scale(1.1) translateZ(0); /* Hardware accelerated scale */
}

.cdlv-hero-video__control-btn:active {
  transform: scale(0.95) translateZ(0); /* Visual feedback for rapid tapping on skip */
}

.cdlv-hero-video__control-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-text-dark);
}

.cdlv-hero-video__control-icon {
  width: var(--icon-size-base);
  height: var(--icon-size-base);
}

/* Hide SVG parts based on state */
.cdlv-hero-video.is-playing .cdlv-hero-video__icon-play { display: none; }
.cdlv-hero-video:not(.is-playing) .cdlv-hero-video__icon-pause { display: none; }

.cdlv-hero-video.is-muted .cdlv-hero-video__icon-unmute { display: none; }
.cdlv-hero-video:not(.is-muted) .cdlv-hero-video__icon-mute { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cdlv-hero-video__controls {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
  .cdlv-hero-video__control-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   MODULE: INFO BANNER (.cdlv-info-banner)
   ========================================================================== */

.cdlv-info-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--color-neutral-bg);
  color: var(--color-text-light); 
  padding: var(--spacing-sm) 0;
  overflow: hidden;
}

.cdlv-info-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: min(90vw, 1600px);
  margin-inline: auto;
}

.cdlv-info-banner__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs); 
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: 600; 
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

@media (min-width: 768px) {
  .cdlv-info-banner__inner {
    flex-direction: row;
    justify-content: space-evenly;
  }
}

/* ==========================================================================
   MODULE: CONTAINER CENTER ITEM
   Purpose: Full-width, centrally aligned banner for newsletter/CTAs.
   Architecture: Inherits fluid typography and spacing from global.css.
   A11y: Includes strict focus states and respects prefers-reduced-motion.
   Performance: Hardware-accelerated transforms for interactions.
   ========================================================================== */

.cdlv-container-center-item {
    background-color: var(--color-neutral-bg);
    color: var(--color-text-dark);
    text-align: center;
    padding: var(--spacing-xs) var(--layout-gutter); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.cdlv-container-center-item__heading {
    margin-bottom: 0; 
    font-size: var(--font-size-h4);
    color: var(--color-text-dark);
}

.cdlv-container-center-item__text {
    margin-bottom: 0; 
}

.cdlv-container-center-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-neutral-bg);
    color: var(--color-text-dark);
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-text-dark);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-strict); 
    cursor: pointer;
    transition: background-color var(--transition-base), 
                color var(--transition-base), 
                transform var(--transition-fast);
}

/* A11y: Explicit keyboard navigation focus state */
.cdlv-container-center-item__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* Default hover color inversion (safe for all users) */
.cdlv-container-center-item__btn:hover {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
}

/* A11y & Perf: Restrict spatial motion to users with no preference */
@media (prefers-reduced-motion: no-preference) {
    .cdlv-container-center-item__btn:hover {
        transform: translateY(-2px);
    }
}

/* ==========================================================================
   MODULE: CATALOG 4 SLIDER (.cdlv-catalog-slider)
   Architecture: BEM Naming Convention, Mobile-First, Grid Layout
   Purpose: Styling for the catalog-4-slider module.
   Dependencies: Uses tokens from globals.css (--color-primary, fluid spacing, etc).
   ========================================================================== */

.cdlv-catalog-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--spacing-md);
  position: relative;
  overflow: hidden;
}

.cdlv-catalog-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--spacing-sm);
}

.cdlv-catalog-slider__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3); 
  color: var(--color-accent);
  margin: 0;
  line-height: 1.2;
}

.cdlv-catalog-slider__carousel-wrapper {
  position: relative;
  margin-inline: calc(var(--spacing-md) * -1); 
  padding-inline: var(--spacing-md);
}

.cdlv-catalog-slider__track {
  display: flex;
  gap: var(--spacing-md); 
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  padding-bottom: var(--spacing-sm);
  scroll-behavior: smooth;
}

.cdlv-catalog-slider__track::-webkit-scrollbar {
  display: none; 
}

.cdlv-catalog-slider__card {
  flex: 0 0 max(280px, calc(25% - (var(--spacing-md) * 0.75)));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.cdlv-catalog-slider__image-box {
  background-color: var(--color-neutral-bg); 
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-strict);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
  text-decoration: none;
}

.cdlv-catalog-slider__image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.cdlv-catalog-slider__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.cdlv-catalog-slider__product-title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-dark);
  margin: 0;
}

/* --- CAROUSEL CONTROLS --- */
.cdlv-catalog-slider__controls {
  display: none;
}

@media (min-width: 992px) {
  .cdlv-catalog-slider__controls {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
  }

  .cdlv-catalog-slider__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.5rem, 3vw, 3.5rem);
    height: clamp(2.5rem, 3vw, 3.5rem);
    background-color: var(--color-primary);
    border: 1px solid var(--color-text-dark);
    border-radius: var(--radius-strict);
    cursor: pointer;
    transition: opacity var(--transition-base), background-color var(--transition-base);
  }

  .cdlv-catalog-slider__arrow:hover:not(:disabled) {
    background-color: var(--color-text-dark);
  }

  .cdlv-catalog-slider__arrow:hover:not(:disabled) .cdlv-catalog-slider__arrow-icon {
    stroke: var(--color-primary);
  }

  .cdlv-catalog-slider__arrow-icon {
    width: var(--icon-size-base);
    height: var(--icon-size-base);
    fill: none;
    stroke: var(--color-text-dark);
    stroke-width: 1.5;
    transition: stroke var(--transition-base);
  }
}

/* --- FOOTER CTA --- */
.cdlv-catalog-slider__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-sm); 
}

.cdlv-catalog-slider__shop-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(2rem, 4vw, 3rem);
  background-color: var(--color-accent);
  color: var(--color-text-light);
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  border: 2px solid transparent;
  border-radius: var(--radius-strict);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
}

.cdlv-catalog-slider__shop-all:hover {
  background-color: var(--color-text-dark);
}

/* ==========================================================================
   A11Y: REDUCED MOTION SAFETY BLOCK
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cdlv-catalog-slider__track {
    scroll-behavior: auto; 
  }

  .cdlv-catalog-slider__arrow,
  .cdlv-catalog-slider__arrow-icon,
  .cdlv-catalog-slider__shop-all {
    transition: none; 
  }
}

/* ==========================================================================
   MODULE: CATEGORY 3 GRID (.cdlv-category-3-grid)
   Purpose: Responsive 3-column feature grid for main product categories.
   Architecture: BEM Naming Convention, CSS Grid, Fluid Typography & Spacing.
   Security: Strict isolation, relies entirely on global token variables.
   ========================================================================== */

.cdlv-category-3-grid {
  padding-block: var(--spacing-md);
  padding-inline: var(--layout-gutter);
}

.cdlv-category-3-grid__header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.cdlv-category-3-grid__title {
  color: var(--color-accent);
  margin-bottom: 0;
}

.cdlv-category-3-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  width: 100%;
}

@media (min-width: 768px) {
  .cdlv-category-3-grid__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .cdlv-category-3-grid__card {
    grid-column: span 2;
  }
  
  .cdlv-category-3-grid__card:nth-child(3):last-child {
    grid-column: 2 / span 2;
  }
}

@media (min-width: 1024px) {
  .cdlv-category-3-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cdlv-category-3-grid__card {
    grid-column: span 1;
  }
  
  .cdlv-category-3-grid__card:nth-child(3):last-child {
    grid-column: auto;
  }
}

.cdlv-category-3-grid__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-strict);
  overflow: hidden;
  background-color: var(--color-secondary);
  width: 100%; 
  transition: transform var(--transition-fast);
}

.cdlv-category-3-grid__figure {
  width: 100%;
  aspect-ratio: 1 / 1.1; 
  overflow: hidden;
  background-color: rgba(0,0,0,0.05); 
}

.cdlv-category-3-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform var(--transition-slow);
}

.cdlv-category-3-grid__content {
  padding: var(--spacing-md) var(--spacing-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  flex-grow: 1;
}

.cdlv-category-3-grid__card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3); 
  color: var(--color-text-dark);
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
}

.cdlv-category-3-grid__desc {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-sm);
  max-width: 40ch;
  line-height: 1.4;
  opacity: 0.9;
}

.cdlv-category-3-grid__btn {
  margin-top: auto; 
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-dark);
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--radius-strict);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border: 1px solid transparent;
}

.cdlv-category-3-grid__card:hover {
  transform: translateY(-4px);
}

.cdlv-category-3-grid__card:hover .cdlv-category-3-grid__image {
  transform: scale(1.05);
}

.cdlv-category-3-grid__card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.cdlv-category-3-grid__btn:hover,
.cdlv-category-3-grid__card:focus-visible .cdlv-category-3-grid__btn {
  background-color: transparent;
  color: var(--color-text-dark);
  border-color: var(--color-text-dark);
}

@media (prefers-reduced-motion: reduce) {
  .cdlv-category-3-grid__card:hover,
  .cdlv-category-3-grid__card:hover .cdlv-category-3-grid__image {
    transform: none;
  }
}

/* ==========================================================================
   MODULE: ACCORDION
   SEO: Includes heading resets for semantic wrappers.
   Performance: Hardware-accelerated transforms, Native CSS Grid Reflow.
   A11y: :focus-visible and prefers-reduced-motion implemented.
   ========================================================================== */

.cdlv-accordion-wrapper {
    margin-block: var(--spacing-lg);
}

.cdlv-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid rgba(26, 26, 26, 0.1); 
}

.cdlv-accordion__item {
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

/* SEO Reset: Removes default heading margins to maintain layout integrity */
.cdlv-accordion__heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.cdlv-accordion__main-heading {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-dark);
}

.cdlv-accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-md) 0;
    background: transparent;
    border: none;
    color: var(--color-text-dark);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    cursor: pointer;
    text-align: left;
    transition: color var(--transition-fast);
}

.cdlv-accordion__trigger:hover {
    color: rgba(26, 26, 26, 0.6);
}

.cdlv-accordion__trigger:focus-visible {
    outline: 2px solid var(--color-text-dark);
    outline-offset: 4px;
    border-radius: var(--radius-strict);
}

.cdlv-accordion__icon {
    width: var(--icon-size-base);
    height: var(--icon-size-base);
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    transition: transform var(--transition-base);
}

.cdlv-accordion__trigger[aria-expanded="true"] .cdlv-accordion__icon {
    transform: rotate(180deg);
}

.cdlv-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

.cdlv-accordion__heading:has(.cdlv-accordion__trigger[aria-expanded="true"]) + .cdlv-accordion__panel {
    grid-template-rows: 1fr;
}

.cdlv-accordion__panel-inner {
    overflow: hidden;
}

.cdlv-accordion__content {
    padding-bottom: var(--spacing-md);
    color: var(--color-text-dark);
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-dark) transparent;
}

.cdlv-accordion__content::-webkit-scrollbar {
    width: 4px;
}
.cdlv-accordion__content::-webkit-scrollbar-track {
    background: transparent;
}
.cdlv-accordion__content::-webkit-scrollbar-thumb {
    background-color: var(--color-text-dark);
    border-radius: var(--radius-strict);
}

@media (prefers-reduced-motion: reduce) {
    .cdlv-accordion__panel {
        transition: none !important;
    }
    .cdlv-accordion__icon {
        transition: none !important;
    }
}

/* ==========================================================================
   MODULE: CATALOG GRID (.cdlv-catalog-grid)
   Purpose: Responsive 2-to-4 column product grid with a sticky left header.
   Architecture: Mobile-first layout that shifts to a strict grid on desktop.
   Includes native full-bleed viewport breakout logic.
   ========================================================================== */

.cdlv-catalog-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-block: var(--spacing-xl);
  
  /* Full-bleed breakout mechanics */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--layout-gutter);
}

.cdlv-catalog-grid__header {
  margin-bottom: var(--spacing-sm);
}

.cdlv-catalog-grid__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
}

.cdlv-catalog-grid__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* HARDENING: Forces Safari to calculate a fixed track height boundary for rows */
  grid-auto-rows: 1fr;
  gap: var(--spacing-sm);
  width: 100%;
}

.cdlv-catalog-grid__card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-primary);
  border-radius: var(--radius-strict);
  overflow: hidden;
  transition: transform var(--transition-base);
  
  /* HARDENING: Prevents infinite height expansion in WebKit engines */
  height: 100%;
  min-height: 0;
}

.cdlv-catalog-grid__card:hover {
  transform: translateY(-2px);
}

.cdlv-catalog-grid__img-wrapper {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-strict);
}

.cdlv-catalog-grid__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-strict);
  transition: transform var(--transition-slow);
}

.cdlv-catalog-grid__card:hover .cdlv-catalog-grid__img-wrapper img {
  transform: scale(1.03);
}

.cdlv-catalog-grid__content {
  padding-block: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  /* HARDENING: Establishes a predictable, uncollapsible interior flexible container */
  flex: 1 1 auto;
  min-height: 0;
}

.cdlv-catalog-grid__item-title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  margin-bottom: calc(var(--spacing-xs) / 2);
}

/* HARDENING: Prevents link element color inheritance dropouts on mobile Safari */
.cdlv-catalog-grid__item-title a {
  color: var(--color-text-dark);
  display: block;
}

.cdlv-catalog-grid__status-banner {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-accent); /* High-contrast core palette matching the headers */
  padding-block: var(--spacing-xs);
  margin-top: auto; /* Pushes the notice down directly above the button */
  margin-bottom: var(--spacing-xs);
}

.cdlv-catalog-grid__price {
  font-size: var(--font-size-small);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}

.cdlv-catalog-grid__divider {
  border: none;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  margin-block: var(--spacing-xs);
}

.cdlv-catalog-grid__sub-text {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: calc(var(--spacing-xs) / 2);
}

.cdlv-catalog-grid__sub-price {
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-sm);
}

/* Button UI */
.cdlv-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  border: none;
  cursor: pointer;
  border-radius: var(--radius-strict);
  width: 100%;
  margin-top: auto; /* Clean baseline alignment across rows */
  transition: background-color var(--transition-base), color var(--transition-base);
}

.cdlv-btn--primary {
  background-color: var(--color-neutral-bg);
  color: var(--color-text-dark);
}

.cdlv-btn--primary:hover {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

/* Focus and Accessibility Management */
.cdlv-catalog-grid__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-strict);
}

.cdlv-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Responsive Scaling to 4 Columns & Side Header Shift */
@media (min-width: 768px) {
  .cdlv-catalog-grid__items {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
  }
}

@media (min-width: 1024px) {
  .cdlv-catalog-grid {
    display: grid;
    grid-template-columns: clamp(220px, 22vw, 320px) 1fr;
    gap: var(--spacing-xl);
    align-items: start;
  }
  
  .cdlv-catalog-grid__header {
    position: sticky;
    top: var(--header-offset);
    padding-right: var(--spacing-md);
  }

  .cdlv-catalog-grid__items {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }
}

/* Motion Sensitivity Compliance */
@media (prefers-reduced-motion: reduce) {
  .cdlv-catalog-grid__card:hover {
    transform: none;
  }
  
  .cdlv-catalog-grid__img-wrapper img {
    transition: none;
  }
  
  .cdlv-catalog-grid__card:hover .cdlv-catalog-grid__img-wrapper img {
    transform: none;
  }
  
  .cdlv-btn {
    transition: background-color 0ms, color 0ms;
  }
}

/* ==========================================================================
   COMPONENT: IMAGE RIGHT TEXT LEFT
   Architecture: Fluid CSS Grid layout. Mobile-first stacking.
   Modifiers: Controls visual order via `--image-left` and `--image-right`.
   ========================================================================== */

.cdlv-img-right-text-left {
    padding-block: var(--spacing-md);
    background-color: var(--color-primary);
    overflow: hidden; 
    contain: layout style;
}

.cdlv-img-right-text-left__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    align-items: center;
}

/* 
   DESKTOP GRID LOGIC:
   By default (Image Right), Content is column 1 (1.1fr) and Media is column 2 (1fr).
*/
@media (min-width: 992px) {
    /* DEFAULT: Image Right Layout */
    .cdlv-img-right-text-left--image-right .cdlv-img-right-text-left__grid {
        grid-template-columns: 1.1fr 1fr; 
        gap: var(--spacing-sm); 
    }

    /* MODIFIER: Image Left Layout */
    .cdlv-img-right-text-left--image-left .cdlv-img-right-text-left__grid {
        grid-template-columns: 1fr 1.1fr; /* Image gets 1fr, Text gets 1.1fr */
        gap: var(--spacing-sm); 
    }

    /* Visually swap the order using Flex/Grid order */
    .cdlv-img-right-text-left--image-left .cdlv-img-right-text-left__content {
        order: 2; /* Move text to the right side */
    }

    .cdlv-img-right-text-left--image-left .cdlv-img-right-text-left__media {
        order: 1; /* Move image to the left side */
    }
}

.cdlv-img-right-text-left__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    grid-row: 2; /* Mobile: Text is always below the image */
    width: 100%;
    margin-inline: auto;
}

@media (min-width: 992px) {
    .cdlv-img-right-text-left__content {
        grid-row: 1; 
        margin-inline: 0;
    }
}

.cdlv-img-right-text-left__subtitle {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-xs);
    display: block;
}

.cdlv-img-right-text-left__title {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.cdlv-img-right-text-left__body {
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

/* --- BUTTON / CTA --- */
.cdlv-img-right-text-left__cta {
    display: inline-block;
    align-self: center; 
    margin-top: var(--spacing-xs);
    padding: 0.75rem 2rem;
    background-color: var(--color-accent);
    color: var(--color-text-light);
    font-family: var(--font-family-body);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-strict);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
}

.cdlv-img-right-text-left__cta:hover,
.cdlv-img-right-text-left__cta:focus-visible {
    background-color: var(--color-secondary);
    color: var(--color-text-dark);
    transform: translateY(-2px);
}

.cdlv-img-right-text-left__media {
    position: relative;
    width: 100%;
    border-radius: var(--radius-strict);
    overflow: hidden;
    grid-row: 1; /* Mobile: Image is always on top */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- MULTIMEDIA: VIDEO ENHANCEMENTS --- */

.cdlv-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cdlv-img-right-text-left__video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-strict);
    cursor: pointer; /* Indicates it can be clicked to play */
}

/* Custom Controls matching the provided design */
.cdlv-video-controls {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--color-primary); /* White block */
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    gap: var(--spacing-xs);
    z-index: 10;
    /* Ensuring strict 0px border radius per system architecture */
    border-radius: var(--radius-strict); 
}

.cdlv-video-btn {
    background: transparent;
    border: none;
    color: var(--color-accent); /* The purple-ish hue from the design */
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.cdlv-video-btn:hover,
.cdlv-video-btn:focus-visible {
    color: var(--color-secondary);
    transform: scale(1.1);
}

.cdlv-video-btn svg {
    display: block;
}

@media (min-width: 992px) {
    .cdlv-img-right-text-left__media {
        grid-row: 1;
    }
}

.cdlv-img-right-text-left__image {
    display: block;
    width: 100%;
    height: auto; 
    object-fit: cover; 
    border-radius: var(--radius-strict);
}

@media (prefers-reduced-motion: reduce) {
    .cdlv-img-right-text-left__content.animate-enter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
CSS BLOCK: ARTICLE FEED (styles/components.css)
Architecture: BEM methodology (.cdlv-article-feed) for strict encapsulation.
Uses native CSS Grid for layout interpolation and structural
integrity. Relies on global CSS variables for fluid typography,
spacing, and color palettes.
Aesthetics: Strict box model (0px border-radius), high contrast, mobile-first
stacking that expands to a side-by-side layout on desktop.
========================================================================== */

.cdlv-article-feed {
width: 100%;
max-width: 2000px;
margin-inline: auto;
padding-block: var(--spacing-md);
}

.cdlv-article-feed__heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.cdlv-article-feed__list {
list-style: none;
display: flex;
flex-direction: column;
}

.cdlv-article-feed__item {
position: relative;
border-bottom: 1px solid var(--color-text-dark);
}

.cdlv-article-feed__item:first-child {
border-top: 1px solid var(--color-text-dark);
}

.cdlv-article-feed__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(174, 191, 178, 0.1);
    opacity: 0;
    z-index: 0; /* Sits beneath the article content */
    pointer-events: none; /* Prevents interference with clicks */
    transition: opacity var(--transition-fast);
    /* Note: We omit 'will-change' as requested; 'opacity' already defaults to the GPU compositor */
}

/* Trigger the GPU-accelerated opacity change on hover and keyboard focus */
.cdlv-article-feed__item:hover::after,
.cdlv-article-feed__item:focus-within::after {
    opacity: 1;
}

/* Add this right below your existing .cdlv-article-feed__item:hover rule */

.cdlv-article-feed__item:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* Optional: Remove the default focus ring from the actual text link so we don't have double outlines */
.cdlv-article-feed__link:focus-visible {
    outline: none; 
}

.cdlv-article-feed__article {
    display: grid;
    position: relative;
    z-index: 1; /* Elevates content above the pseudo-element */
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    padding-block: var(--spacing-md);
}

/* Tablet & Desktop Layout */
@media (min-width: 768px) {
.cdlv-article-feed__article {
grid-template-columns: min(25vw, 300px) 1fr;
gap: var(--spacing-md);
align-items: center;
}
}

.cdlv-article-feed__image-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: var(--color-neutral-bg);
}

@media (min-width: 768px) {
.cdlv-article-feed__image-wrapper {
aspect-ratio: 4 / 3;
}
}

.cdlv-article-feed__image {
width: 100%;
height: 100%;
object-fit: cover;
}

.cdlv-article-feed__content {
display: flex;
flex-direction: column;
justify-content: center;
}

.cdlv-article-feed__title {
font-family: var(--font-family-heading);
font-size: var(--font-size-h3);
color: var(--color-text-dark);
margin-bottom: var(--spacing-xs);
line-height: 1.1;
}

/* Pseudo-element to make the whole card clickable via the title link */
.cdlv-article-feed__link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.cdlv-article-feed__tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: calc(var(--spacing-xs) / 2);
margin-top: var(--spacing-xs);
position: relative;
z-index: 2; /* Keeps tags above the full-card clickable area in case we add hover states to them later */
}

.cdlv-article-feed__tag {
background-color: var(--color-secondary);
color: var(--color-text-light);
font-size: var(--font-size-small);
font-family: var(--font-family-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-strict);
display: inline-block;
}

.cdlv-article-feed__date {
    display: block;
    font-size: var(--font-size-small);
    color: var(--color-text-dark);
    opacity: 0.7;
    margin-bottom: calc(var(--spacing-xs) / 2);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* ==========================================================================
   MODULES: SEARCH ENGINE
   Architecture: Scoped BEM methodology. Utilizes global CSS variables for 
   fluidity and strict thematic adherence (0px radius).
   ========================================================================== */

/* --- SEARCH ENGINE (UPDATED WITH SEARCH & CANCEL BUTTONS) --- */
.cdlv-search {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.cdlv-search__wrapper {
    display: flex;
    gap: var(--spacing-xs);
    width: 100%;
}

.cdlv-search__input-group {
    position: relative;
    flex: 1; /* Allows the input area to take up the remaining space */
}

.cdlv-search__input {
    width: 100%;
    height: 100%;
    padding: var(--spacing-sm) calc(var(--spacing-md) + 32px) var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    border: 2px solid var(--color-neutral-bg);
    border-radius: var(--radius-strict);
    background-color: transparent;
    color: var(--color-text-dark);
    transition: border-color var(--transition-base);
}

.cdlv-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.cdlv-search__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.cdlv-search__btn-clear {
    position: absolute;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.cdlv-search__btn-clear:hover {
    opacity: 1;
}

.cdlv-search__btn-clear[hidden] {
    display: none;
}

/* New Search Button Styles */
.cdlv-search__btn-submit {
    background-color: transparent;
    border: 2px solid var(--color-neutral-bg);
    border-radius: var(--radius-strict);
    padding: 0 var(--spacing-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.cdlv-search__btn-submit:hover,
.cdlv-search__btn-submit:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

.cdlv-search__icon {
    width: var(--icon-size-base);
    height: var(--icon-size-base);
    pointer-events: none;
}

.cdlv-search__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-primary);
    border: 1px solid var(--color-neutral-bg);
    border-top: none;
    border-radius: var(--radius-strict);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

.cdlv-search__dropdown[hidden] {
    display: none;
}

.cdlv-search__item {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--color-neutral-bg);
}

.cdlv-search__item:last-child {
    border-bottom: none;
}

.cdlv-search__link {
    display: block;
    color: #6B21A8; 
    text-decoration: none;
    font-size: var(--font-size-small);
}

.cdlv-search__link:hover {
    color: var(--color-accent);
}

.cdlv-highlight {
    font-weight: 700;
    color: var(--color-text-dark);
}

/* --- ACCESSIBILITY & MOTION UTILITIES (SEARCH) --- */

/* Explicit focus rings for keyboard navigation */
.cdlv-search__btn-clear:focus-visible,
.cdlv-search__btn-submit:focus-visible,
.cdlv-search__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-strict);
}

/* Ensure the link focus ring isn't cut off by the list item container */
.cdlv-search__link:focus-visible {
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .cdlv-search__input,
    .cdlv-search__btn-clear,
    .cdlv-search__btn-submit,
    .cdlv-search__link {
        transition: none !important;
    }
}

/* ==========================================================================
   MODULES:  FAQ SYSTEM
   Architecture: Scoped BEM methodology. Utilizes global CSS variables for 
   fluidity and strict thematic adherence (0px radius).
   ========================================================================== */
   

.cdlv-faq {
    width: 100%;
}

/* Dashboard Grid */
.cdlv-faq__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg) var(--spacing-md);
}

.cdlv-faq__category-title {
    font-size: var(--font-size-h4);
    margin-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-text-dark);
    padding-bottom: var(--spacing-xs);
}

.cdlv-faq__list {
    list-style: none;
}

.cdlv-faq__list-item {
    margin-bottom: var(--spacing-xs);
}

.cdlv-faq__link {
    color: #6B21A8; /* Accessible Purple */
    cursor: pointer;
    font-size: var(--font-size-body);
    transition: opacity var(--transition-fast);
}

.cdlv-faq__link:hover {
    opacity: 0.7;
}

.cdlv-faq__link--more {
    font-weight: 700;
    color: var(--color-text-dark);
    margin-top: var(--spacing-xs);
    display: inline-block;
}

/* Answer View */
.cdlv-faq__answer-view {
    width: 100%;
    margin: 0 auto;
}

.cdlv-faq__btn-back {
    background: transparent;
    border: none;
    color: var(--color-text-dark);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 700;
    cursor: pointer;
    margin-bottom: var(--spacing-md);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none; /* Added to normalize <a> tags to look like the previous button */
}

.cdlv-faq__btn-back:hover {
    color: var(--color-accent);
}

.cdlv-faq__answer-title {
    margin-bottom: var(--spacing-md);
}

/* Strict 40vw Image Constraint */
.cdlv-faq__answer-image {
    width: 40vw; 
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-strict);
    margin: var(--spacing-md) 0;
    display: block;
}

/* See More / Search Results Container */
.cdlv-faq__list-view .cdlv-faq__list-item {
    list-style-type: disc;
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.cdlv-faq__see-all-wrapper {
    margin-top: var(--spacing-lg);
}

/* --- ACCESSIBILITY & PERFORMANCE UTILITIES --- */

/* [OPTIMIZATION]: Using 'outline' guarantees zero layout shift (CLS) 
   because it sits outside the box model. Do not use 'border' for focus states here. */
.cdlv-faq__link:focus-visible,
.cdlv-faq__btn-back:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-strict);
}

/* Hardware-accelerated hover transitions only */
.cdlv-faq__link {
    color: #6B21A8; 
    cursor: pointer;
    font-size: var(--font-size-body);
    transition: opacity var(--transition-fast); /* GPU Handled */
}

@media (prefers-reduced-motion: reduce) {
    .cdlv-faq__link,
    .cdlv-faq__btn-back {
        transition: none !important;
    }
}

/* ==========================================================================
   MODULE: TEMPLATE POST (.cdlv-template-post)
   Architecture: Scoped BEM Grid Layout.
   A11y: Includes :focus-visible states, disabled focus rings on programmatic 
   section jumps, and respects prefers-reduced-motion media queries.
   ========================================================================== */

.cdlv-template-post {
    display: flex;
    flex-direction: column;
    padding-inline: var(--layout-gutter);
    padding-block: var(--spacing-md) var(--spacing-xl);
    width: 100%;
}

/* --- METADATA HEADER --- */
.cdlv-template-post__header {
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: var(--spacing-sm);
}

.cdlv-template-post__main-title {
    font-size: var(--font-size-h2); 
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

.cdlv-template-post__meta-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.cdlv-template-post__author-lockup {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.cdlv-template-post__author-img {
    width: clamp(2.5rem, 5vw, 4rem);
    height: clamp(2.5rem, 5vw, 4rem);
    border-radius: 50%;
    object-fit: cover; 
    object-position: center;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: var(--color-primary); 
    display: block;
}

.cdlv-template-post__author-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cdlv-template-post__author-name {
    font-family: var(--font-family-body);
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: var(--font-size-body);
    line-height: 1.2;
}

.cdlv-template-post__date {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    color: var(--color-text-dark);
    opacity: 0.6;
}

.cdlv-template-post__share-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-xs) / 2);
}

.cdlv-template-post__share-label {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    opacity: 0.6;
    margin-right: calc(var(--spacing-xs) / 2);
}

.cdlv-template-post__share-btn {
    background: none;
    border: none;
    padding: clamp(6px, 1vw, 10px); 
    border-radius: 50%;
    background-color: rgba(0,0,0,0.03);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.cdlv-template-post__share-btn:hover {
    background-color: rgba(71, 59, 117, 0.1); 
    transform: translateY(-2px);
}

/* A11y Fix: Visible focus states for keyboard users */
.cdlv-template-post__share-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.cdlv-template-post__share-btn img {
    width: var(--icon-size-base); 
    height: var(--icon-size-base);
    opacity: 0.8;
}

/* --- BODY (Sidebar + Content) --- */
.cdlv-template-post__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

@media (min-width: 1024px) {
    .cdlv-template-post__body {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--spacing-lg);
    }
}

/* Sidebar & Sticky Behavior */
.cdlv-template-post__sidebar {
    width: 100%;
    position: sticky;
    top: var(--header-offset);
    z-index: 10;
    background-color: var(--color-primary);
    padding-block: var(--spacing-xs);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    transition: transform var(--transition-base);
}

.cdlv-template-post__sidebar.is-header-hidden {
    transform: translateY(calc(-1 * var(--header-offset)));
}

@media (min-width: 1024px) {
    .cdlv-template-post__sidebar {
        flex: 0 0 280px; 
        top: calc(var(--header-offset) + var(--spacing-md));
        border-bottom: none;
        padding-block: 0;
        max-height: calc(100vh - var(--header-offset) - var(--spacing-md));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-secondary) transparent;
    }

    .cdlv-template-post__sidebar.is-header-hidden {
        transform: translateY(calc(-1 * var(--header-offset) + var(--spacing-md)));
    }
}

.cdlv-template-post__meta {
    font-size: var(--font-size-small);
    color: var(--color-accent);
    opacity: 0.7;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    display: none;
}

@media (min-width: 1024px) {
    .cdlv-template-post__meta { display: block; }
}

.cdlv-template-post__nav-list {
    list-style: none;
    display: flex;
    overflow-x: auto;
    gap: var(--spacing-sm);
    padding-bottom: 4px;
    scrollbar-width: none;
}

.cdlv-template-post__nav-list::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .cdlv-template-post__nav-list {
        flex-direction: column;
        gap: 0;
        overflow-x: visible;
    }
}

.cdlv-template-post__nav-link {
    display: block;
    font-size: var(--font-size-small);
    color: var(--color-text-dark);
    opacity: 0.6;
    white-space: nowrap;
    padding: calc(var(--spacing-xs) / 2) 0;
    border-bottom: 2px solid transparent;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

@media (min-width: 1024px) {
    .cdlv-template-post__nav-link {
        white-space: normal;
        padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
        border-bottom: none;
        border-left: 2px solid transparent;
        padding-left: var(--spacing-xs);
    }
}

.cdlv-template-post__nav-link:hover {
    opacity: 1;
    color: var(--color-accent);
}

/* A11y Fix: Visible focus states for keyboard users */
.cdlv-template-post__nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    opacity: 1;
}

.cdlv-template-post__nav-link.is-active {
    opacity: 1;
    color: var(--color-accent);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

@media (min-width: 1024px) {
    .cdlv-template-post__nav-link.is-active {
        border-bottom-color: transparent;
        border-left-color: var(--color-accent);
        background-color: rgba(71, 59, 117, 0.03);
    }
}

.cdlv-template-post__content {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.cdlv-template-post__section {
    scroll-margin-top: calc(var(--header-offset) + var(--spacing-md));
    margin-bottom: var(--spacing-lg);
}

/* A11y Fix: Prevents an ugly focus ring from appearing around the entire text block 
   when JS programmatically forces focus on it for screen readers */
.cdlv-template-post__section:focus {
    outline: none;
}

.cdlv-template-post__heading {
    font-size: var(--font-size-h4);
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: calc(var(--spacing-xs) / 2);
}

.cdlv-template-post__text {
    font-size: var(--font-size-body);
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
}

.cdlv-template-post__text img {
    margin-block: var(--spacing-sm);
    border-radius: var(--radius-strict);
}

.cdlv-template-post__content .u-fill-width,
.cdlv-template-post__content .u-fill-screen {
    width: 100%;
    margin-left: 0;
}

/* A11y Fix: Respect OS-level "Reduce Motion" settings */
@media (prefers-reduced-motion: reduce) {
    .cdlv-template-post__sidebar,
    .cdlv-template-post__share-btn,
    .cdlv-template-post__nav-link {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   MODULE: ICON DETAIL ROW (styles/components.css)
   Architecture: Minimalist box model using CSS Grid for fluid layout.
   Purpose: Displays a heading and exactly three text-based data points.
   Constraints: Strict 0px radius, high contrast, guaranteed 100vh minimum 
   height to create a focused, immersive viewport block.
   ========================================================================== */

.cdlv-icon-detail-row {
    /* Guarantees the component takes up at least one full viewport height */
    min-height: var(--vh-modern, 100vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--spacing-xl);
}

.cdlv-icon-detail-row__heading {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-accent);
}

.cdlv-icon-detail-row__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cdlv-icon-detail-row__item {
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-strict);
    padding: var(--spacing-md);
    text-align: center;
    background-color: var(--color-accent-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: clamp(120px, 20vh, 200px);
    transition: transform var(--transition-base), background-color var(--transition-base);
}

/* Subtle interactive hover state */
.cdlv-icon-detail-row__item:hover {
    transform: translateY(-4px);
    background-color: var(--color-accent);
}

.cdlv-icon-detail-row__item:hover,
.cdlv-icon-detail-row__item:focus-within {
    transform: translateY(-4px);
    background-color: var(--color-accent);
    outline: 2px solid transparent; 
}

.cdlv-icon-detail-row__item:hover .cdlv-icon-detail-row__title,
.cdlv-icon-detail-row__item:focus-within .cdlv-icon-detail-row__title,
.cdlv-icon-detail-row__item:hover .cdlv-icon-detail-row__subtitle,
.cdlv-icon-detail-row__item:focus-within .cdlv-icon-detail-row__subtitle {
    color: var(--color-text-light);
}

.cdlv-icon-detail-row__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-xs);
    line-height: 1.1;
    color: var(--color-text-dark);
    transition: color var(--transition-base);
}

.cdlv-icon-detail-row__subtitle {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    color: var(--color-text-dark);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-regular);
    transition: color var(--transition-base);
}

/* Desktop layout: 3 equal columns */
@media (min-width: 768px) {
    .cdlv-icon-detail-row__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
    
    .cdlv-icon-detail-row__item {
        padding: var(--spacing-lg) var(--spacing-md);
        min-height: clamp(200px, 25vw, 300px);
    }
}

/* ==========================================================================
   COMPONENT: BOOKING CALENDAR (.cdlv-booking-calendar)
   Architecture: Fluid, responsive container specifically designed to isolate
   and display an external iframe. 
   Performance: Utilizes absolute positioning for the loader to prevent 
   document reflow when the iframe resolves.
   ========================================================================== */

.cdlv-booking-module {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

/* Header Section */
.cdlv-booking-module__header {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}

.cdlv-booking-module__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
  line-height: 1.1;
}

.cdlv-booking-module__subtitle {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  margin-bottom: 0;
}

/* Calendar Container */
.cdlv-booking-calendar {
  position: relative;
  width: 100%;
  height: clamp(600px, 80vh, 900px);
  background-color: var(--color-primary);
  border: 1px solid var(--color-neutral-bg);
  border-radius: var(--radius-strict);
  overflow: hidden;
  isolation: isolate;
}

/* Loader Container - centers the spinner perfectly behind the iframe */
.cdlv-booking-calendar__loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  transition: opacity var(--transition-fast);
}

.cdlv-booking-calendar__loader {
  width: clamp(24px, 4vw, 32px);
  height: clamp(24px, 4vw, 32px);
  border: 2px solid rgba(71, 59, 117, 0.2); /* Light accent track */
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: cdlv-iframe-spin 0.8s linear infinite;
}

.cdlv-booking-calendar__loader-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wide);
}

/* Hide loader when iframe is fully loaded */
.cdlv-booking-calendar:has(.is-loaded) .cdlv-booking-calendar__loader-wrapper {
  opacity: 0;
  pointer-events: none;
  visibility: hidden; 
}

/* Iframe Styling - Starts hidden, fades in securely */
.cdlv-booking-calendar__iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 2;
  opacity: 0;
  background-color: transparent;
  transition: opacity var(--transition-slow);
}

.cdlv-booking-calendar__iframe.is-loaded {
  opacity: 1;
}

/* Keyframes for spinning animation (isolated to prevent global conflicts) */
@keyframes cdlv-iframe-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 
 * A11Y FIX: Respect system preferences for reduced motion by stopping 
 * the infinite spin and converting it to a static visual indicator.
 */
@media (prefers-reduced-motion: reduce) {
  .cdlv-booking-calendar__loader {
    animation: none;
    border-style: dotted; /* Provides static visual interest without motion */
  } 
}

/* ==========================================================================
   MODULE: CART PANEL (.cdlv-cart-panel)
   ========================================================================== */

.cdlv-cart-panel {
    width: 100%;
    padding-block: var(--spacing-lg);
}

.cdlv-cart-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: var(--spacing-xl);
}

.cdlv-cart-panel__empty-icon {
    width: clamp(4rem, 8vw, 6rem);
    height: clamp(4rem, 8vw, 6rem);
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.cdlv-cart-panel__empty-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
}

.cdlv-cart-panel__empty-btn {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-text-light);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem);
    font-family: var(--font-family-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-strict);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cdlv-cart-panel__empty-btn:hover {
    background-color: var(--color-text-dark);
    transform: translateY(-2px);
}

.cdlv-cart-panel__empty-desc {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-dark);
}

.cdlv-cart-panel__success-icon {
    color: var(--color-accent);
    opacity: 1;
}

.cdlv-cart-panel__success-desc {
    margin-bottom: var(--spacing-sm);
    max-width: 600px;
    text-align: center;
    color: var(--color-text-dark);
}

.cdlv-cart-panel__success-note {
    margin-bottom: var(--spacing-md);
    max-width: 600px;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
}

/* -------------------------
   LAYOUT ENGINE
   ------------------------- */
.cdlv-cart-panel__layout--wrap {
    flex-wrap: wrap;
}

.cdlv-cart-panel__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.cdlv-cart-panel__main-area {
    order: 1;
}

.cdlv-cart-panel__side-area {
    order: 2;
}

.cdlv-cart-panel__action-area {
    order: 3;
    width: 100%;
    margin-top: var(--spacing-md);
}

@media (min-width: 1024px) {
    .cdlv-cart-panel__layout {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .cdlv-cart-panel__list,
    .cdlv-shipping-form {
        flex: 1 1 65%;
    }
    
    .cdlv-cart-panel__sidebar {
        flex: 1 1 35%;
    }
}

/* ==========================================================================
   MODULE: CHECKOUT NAV (.cdlv-checkout-nav)
   ========================================================================== */
.cdlv-checkout-nav {
    width: 100%;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cdlv-checkout-nav__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--spacing-sm);
}

.cdlv-checkout-nav__item {
    flex: 1;
}

.cdlv-checkout-nav__btn {
    width: 100%;
    background: transparent;
    border: none;
    padding: var(--spacing-sm) 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-small);
    color: rgba(0, 0, 0, 0.4);
    cursor: default;
    transition: color var(--transition-base);
    position: relative;
}

.cdlv-checkout-nav__item.is-active .cdlv-checkout-nav__btn {
    color: var(--color-accent);
}

.cdlv-checkout-nav__item.is-active .cdlv-checkout-nav__btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
}

@media (min-width: 768px) {
    .cdlv-checkout-nav__btn {
        font-size: 1rem;
    }
}

/* -------------------------
   LEFT COLUMN: CART LIST
   ------------------------- */
.cdlv-cart-panel__list {
    background-color: var(--color-primary);
    padding: 0;
}

.cdlv-cart-panel__list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.cdlv-cart-panel__list-header h2 {
    font-size: var(--font-size-h4);
    margin: 0;
    color: var(--color-accent);
}

.cdlv-cart-panel__list-header span {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    color: rgba(0, 0, 0, 0.6);
}

/* --- Feedback --- */
.cdlv-support-chat__feedback-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
    width: 100%;
}
.cdlv-support-chat__feedback-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #666;
}

.cdlv-support-chat__feedback-btn {
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-strict);
    padding: 0.4rem;
    width: clamp(2rem, 4vw, 2.5rem);
    height: clamp(2rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5; /* Default unselected state */
    transition: all var(--transition-fast);
}
.cdlv-support-chat__feedback-btn:hover {
    opacity: 0.8;
}
.cdlv-support-chat__feedback-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter var(--transition-fast);
}
.cdlv-support-chat__feedback-btn.is-selected {
    background-color: var(--color-accent);
    opacity: 1;
}
.cdlv-support-chat__feedback-btn.is-selected img {
    filter: brightness(0) invert(1);
}

/* -------------------------
   CART ITEM ROW
   ------------------------- */
.cdlv-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--spacing-sm);
    padding-block: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    align-items: center;
}

@media (min-width: 768px) {
    .cdlv-cart-item {
        grid-template-columns: 100px 2fr 1fr 1fr;
        gap: var(--spacing-md);
    }
}

.cdlv-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cdlv-cart-item__image-wrap {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: var(--radius-strict);
}

.cdlv-cart-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cdlv-cart-item__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cdlv-cart-item__title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--color-text-dark);
    margin: 0 0 0.25rem 0;
}

.cdlv-cart-item__variant {
    font-size: var(--font-size-small);
    color: rgba(0, 0, 0, 0.6);
    margin: 0 0 0.5rem 0;
}

.cdlv-cart-item__remove {
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-family-body);
    font-size: 0.85rem;
    color: var(--color-text-dark);
    opacity: 0.6;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.cdlv-cart-item__remove:hover {
    opacity: 1;
    color: var(--color-accent);
}

.cdlv-cart-item__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.cdlv-cart-item__qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-strict);
    background: var(--color-primary);
}

.cdlv-cart-item__qty-btn {
    background: transparent;
    border: none;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-accent);
    transition: background var(--transition-fast), opacity var(--transition-fast);
}

.cdlv-cart-item__qty-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.cdlv-cart-item__qty-btn:hover:not(:disabled) {
    background: rgba(71, 59, 117, 0.05);
}

.cdlv-cart-item__qty-value {
    width: 2rem;
    text-align: center;
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--color-text-dark);
    font-weight: 500;
}

.cdlv-cart-item__stock-warning {
    font-size: 0.75rem;
    color: #8c3b3b;
    font-weight: 500;
}

.cdlv-cart-item__price {
    font-family: var(--font-family-body);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: right;
    color: var(--color-text-dark);
}

.cdlv-cart-item__title-link {
    text-decoration: none;
    color: inherit;
    outline-offset: 4px;
}

.cdlv-cart-item__title-link:hover .cdlv-cart-item__title {
    color: var(--color-accent);
}

.cdlv-cart-item__text-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.cdlv-cart-item__action-link {
    font-family: var(--font-family-body);
    font-size: 0.85rem;
    color: var(--color-accent); /* Uses your specified accent color */
    opacity: 0.8;
    text-decoration: underline;
    transition: opacity var(--transition-fast);
}

.cdlv-cart-item__action-link:hover {
    opacity: 1;
}

.cdlv-cart-item__action-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Ensure the image link behaves properly */
.cdlv-cart-item__image-wrap {
    display: block; /* Required since we changed it from a div to an anchor tag */
}
.cdlv-cart-item__image-wrap:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* -------------------------
   RIGHT COLUMN: SUMMARY
   ------------------------- */
.cdlv-cart-summary {
    background: var(--color-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--spacing-md);
    border-radius: var(--radius-strict);
}

.cdlv-cart-summary__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-accent);
}

.cdlv-cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-family-body);
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: rgba(0, 0, 0, 0.8);
}

.cdlv-cart-summary__divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-block: var(--spacing-sm);
}

.cdlv-cart-summary__row--total {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
}

.cdlv-cart-summary__cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cdlv-cart-summary__checkout-btn {
    width: 100%;
    display: block;
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    padding: clamp(1rem, 2vw, 1.25rem);
    font-family: var(--font-family-body);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    border-radius: var(--radius-strict);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cdlv-cart-summary__checkout-btn:hover {
    background-color: var(--color-text-dark);
    transform: translateY(-2px);
}

.cdlv-cart-summary__trust-signals {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.cdlv-cart-summary__trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
}

.cdlv-cart-summary__trust-item svg {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
}

/* ==========================================================================
   MODULE: SHIPPING FORM (.cdlv-shipping-form)
   ========================================================================== */
.cdlv-shipping-form {
    background: var(--color-primary);
    padding: 0; 
}

.cdlv-shipping-form__title {
    font-size: var(--font-size-h4);
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-accent);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cdlv-shipping-form__title:focus {
    outline: none; /* Avoid aggressive focus ring on programmatically focused heading */
}

.cdlv-shipping-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md) var(--spacing-sm);
}

@media (min-width: 768px) {
    .cdlv-shipping-form__grid {
        grid-template-columns: 1fr 1fr;
    }
    .cdlv-form-group--full {
        grid-column: 1 / -1;
    }
}

.cdlv-shipping-form__divider {
    grid-column: 1 / -1;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-block: var(--spacing-sm);
}

.cdlv-shipping-form__desc {
    margin-bottom: var(--spacing-md);
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
}

.cdlv-form-group {
    display: flex;
    flex-direction: column;
}

.cdlv-form-group__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.cdlv-form-group label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--color-text-dark);
    font-weight: 500;
}

.cdlv-form-word-count {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    transition: color var(--transition-fast);
}

.cdlv-form-group input, 
.cdlv-form-group select, 
.cdlv-form-group textarea {
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-strict);
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--color-text-dark);
    background: var(--color-primary);
    transition: border-color var(--transition-fast), outline var(--transition-fast);
}

.cdlv-form-group textarea {
    resize: none;
}

.cdlv-form-group input:focus, 
.cdlv-form-group select:focus, 
.cdlv-form-group textarea:focus {
    outline: 1px solid var(--color-accent);
    border-color: var(--color-accent);
}

.cdlv-shipping-form__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .cdlv-shipping-form__actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.cdlv-shipping-form__back {
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.6);
    font-family: var(--font-family-body);
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color var(--transition-fast);
}

.cdlv-shipping-form__back:hover {
    color: var(--color-text-dark);
}

.cdlv-shipping-form__submit {
    background: var(--color-accent);
    color: var(--color-text-light);
    padding: clamp(1rem, 2vw, 1.25rem) clamp(2rem, 4vw, 3rem);
    border: none;
    border-radius: var(--radius-strict);
    font-family: var(--font-family-body);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cdlv-shipping-form__submit:hover {
    background-color: var(--color-text-dark);
    transform: translateY(-2px);
}

.cdlv-payment-fields--full {
    grid-column: 1 / -1;
}

/* -------------------------
   DETAILED SUMMARY ITEMS
   ------------------------- */
.cdlv-cart-summary__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm);
}

.cdlv-cart-summary__item-row--wrap {
    flex-wrap: wrap;
}

.cdlv-cart-summary__item-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-family-body);
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.7);
}

.cdlv-cart-summary__item-name {
    flex: 1;
    padding-right: 1rem;
}

.cdlv-cart-summary__item-price {
    font-weight: 500;
    color: var(--color-text-dark);
    margin-top: 0.1rem;
}

.cdlv-cart-summary__item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-right: 1rem;
}

.cdlv-cart-summary__item-variant {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 0.2rem;
}

/* ==========================================================================
   MODULE: REVIEW & CONFIRM
   ========================================================================== */
.cdlv-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
    .cdlv-review-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.cdlv-review-card {
    background: var(--color-primary);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: var(--spacing-md);
    border-radius: var(--radius-strict);
    font-family: var(--font-family-body);
}

.cdlv-review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cdlv-review-card h3 {
    font-size: 1.1rem;
    margin: 0;
    color: var(--color-text-dark);
}

.cdlv-review-card p {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: rgba(0, 0, 0, 0.7);
}

.cdlv-review-card p:last-child {
    margin-bottom: 0;
}

.cdlv-review-card__note {
    font-size: 0.85rem !important;
    color: rgba(0, 0, 0, 0.5) !important;
    margin-top: 0.5rem;
}

.cdlv-review-edit {
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-family-body);
    font-size: 0.85rem;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.cdlv-review-edit:hover {
    opacity: 0.7;
}

/* Review Actions (Terms & Submit) */
.cdlv-review-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.cdlv-review-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-strict);
}

.cdlv-review-terms input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-accent); /* Styles the native checkbox */
    cursor: pointer;
}

.cdlv-review-terms label {
    font-family: var(--font-family-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    cursor: pointer;
}

.cdlv-review-terms a {
    color: var(--color-accent);
    text-decoration: underline;
}

.cdlv-review-terms a:hover {
    text-decoration: none;
}

.cdlv-review-card__date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-dark);
}

.cdlv-review-terms--margin {
    margin-top: var(--spacing-md);
}

.cdlv-review-back-wrapper--margin {
    margin-top: 1rem;
}

/* The Massive CTA Button */
.cdlv-review-submit {
    width: 100%;
    background: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    padding: clamp(1.25rem, 3vw, 1.75rem); /* Massive click target */
    font-family: var(--font-family-body);
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    border-radius: var(--radius-strict);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 4px 12px rgba(71, 59, 117, 0.15); /* Subtle lift */
}

.cdlv-review-submit:hover {
    background-color: var(--color-text-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.cdlv-review-back-wrapper {
    display: flex;
    justify-content: center; /* Center the back button under the massive submit */
}

.cdlv-notification {
    position: fixed;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    width: min(90vw, 400px);
    background: var(--color-primary);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-strict);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.cdlv-notification.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Error State Styling */
.cdlv-notification--error {
    border-left: 4px solid #8c3b3b; /* Distinct dark red for errors */
}

/* Success State Styling (If you ever use it globally) */
.cdlv-notification--success {
    border-left: 4px solid var(--color-accent); 
}

.cdlv-notification__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
}

.cdlv-notification p {
    font-family: var(--font-family-body);
    font-size: 0.9rem;
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.5;
}

.cdlv-notification__close {
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.cdlv-notification__close:hover {
    color: var(--color-text-dark);
}

.cdlv-notification__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   BUTTON LOADING STATES & SPINNERS
   ========================================================================== */

@keyframes cdlv-button-spin {
    100% { transform: rotate(360deg); }
}

.cdlv-spinner {
    animation: cdlv-button-spin 0.8s linear infinite;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
}

/* Update both submit buttons to use flexbox for icon/text alignment */
.cdlv-shipping-form__submit,
.cdlv-review-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between spinner and text */
}

/* Ensure disabled buttons don't trigger hover effects */
.cdlv-shipping-form__submit:disabled,
.cdlv-review-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none ;
    box-shadow: none ;
}

/* ==========================================================================
   A11Y: FOCUS MANAGEMENT & KEYBOARD NAVIGATION
   ========================================================================== */

/* Ensure custom payment buttons have a clear, non-overlapping focus ring */
.cdlv-payment-option:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* Ensure text-link buttons are highly visible when tabbed */
.cdlv-review-edit:focus-visible,
.cdlv-cart-item__remove:focus-visible,
.cdlv-shipping-form__back:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px; /* Slight radius purely to hug the focus ring cleanly */
}

/* Ensure the native checkbox focus state matches the brand */
.cdlv-review-terms input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   A11Y: MOTION SENSITIVITY (prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Strip all transition durations */
    .cdlv-cart-panel__empty-btn,
    .cdlv-shipping-form__submit,
    .cdlv-review-submit,
    .cdlv-payment-option,
    .cdlv-cart-item__qty-btn,
    .cdlv-cart-item__remove,
    .cdlv-review-edit {
        transition-duration: 0.01ms !important;
    }

    /* Neutralize all hardware-accelerated transforms (shifting/scaling) */
    .cdlv-cart-panel__empty-btn:hover,
    .cdlv-shipping-form__submit:hover,
    .cdlv-review-submit:hover {
        transform: none !important;
    }

    .cdlv-notification {
        transition-duration: 0.01ms !important;
        transform: none !important;
    }

    .cdlv-spinner {
        animation-duration: 2s; /* Slows the spin down significantly */
    }
}

/* ==========================================================================
   MODULE: MULTI-STEP SIGN-UP (styles/components.css)
   Architecture: Fluid layout scaling via vh/vw to prevent vertical scrolling.
   ========================================================================== */

.cdlv-auth-step {
    max-width: 1200px; 
    width: 100%;
    margin: var(--spacing-xl) auto;
    padding-inline: var(--spacing-sm);
    
    /* Mobile-First: Stacked layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-lg);
    
    animation: fade-in-up var(--transition-base) forwards;
}

.cdlv-auth-step--centered {
    text-align: center;
    align-items: center;
}

.cdlv-auth-step--centered .cdlv-auth__header {
    text-align: center;
}

/* Left Column: Typography & Brand */
.cdlv-auth__header {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 2vh, var(--spacing-sm));
    text-align: left;
}

/* Typography scales with screen height to prevent vertical overflow */
.cdlv-auth__title { 
    font-size: clamp(1.75rem, 4vh + 1vw, var(--font-size-h2)); 
    color: var(--color-text-dark);  
}

.cdlv-auth__title:focus:not(:focus-visible),
.cdlv-welcome__title:focus:not(:focus-visible) { outline: none; }

.cdlv-auth__subtitle { 
    font-size: clamp(0.875rem, 2vh + 0.5vw, var(--font-size-body)); 
    color: var(--color-text-dark); 
    opacity: 0.9; 
}

/* --- DESKTOP & TABLET: TWO-COLUMN LAYOUT --- */
@media (min-width: 768px) {
    .cdlv-auth-step:not(.cdlv-auth-step--centered) {
        flex-direction: row;
        align-items: flex-start; /* Changed from center to top-align the columns */
        justify-content: space-between;
    }

    .cdlv-auth__header {
        flex: 1 1 45%; 
        padding-right: var(--spacing-md); 
    }

    .cdlv-auth__panel {
        flex: 1 1 50%; 
        max-width: 500px; 
    }
}

/* Right Column: Interactive Form & Links */
.cdlv-auth__panel {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vh, var(--spacing-md));
    width: 100%;
}

.cdlv-auth__form {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vh, var(--spacing-md));
    width: 100%;
}

.cdlv-auth__form .cdlv-hero__btn {
    width: 100%;
    margin-top: var(--spacing-sm);
}

.cdlv-auth__group {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: var(--spacing-sm);
    width: 100%;
}

/* Shared Input Aesthetics */
/* Shared Input Aesthetics & A11y Focus States */
.cdlv-auth__input {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(26, 26, 26, 0.2);
    background: transparent;
    padding: clamp(0.25rem, 1vh, var(--spacing-xs)) var(--spacing-xs); /* Added horizontal padding for background focus */
    font-family: var(--font-family-body);
    font-size: clamp(0.875rem, 2vh + 0.5vw, var(--font-size-body));
    color: var(--color-text-dark);
    border-radius: var(--radius-strict);
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.cdlv-auth__input::placeholder { color: rgba(26, 26, 26, 0.4); }

/* A11y: Robust focus state replacing the default outline */
.cdlv-auth__input:focus,
.cdlv-auth__input:focus-visible { 
    outline: none; 
    border-bottom: 2px solid var(--color-accent); 
    /* Subtle background shift to ensure focus is unmistakable */
    background-color: rgba(71, 59, 117, 0.03); 
}

.cdlv-auth__input.has-error, 
.cdlv-2fa__input-box.has-error { 
    border-color: #D9534F !important; 
    /* A11y: Ensure error states also have a background indicator for colorblind users */
    background-color: rgba(217, 83, 79, 0.03); 
}

.cdlv-auth__hint {
    font-size: clamp(0.75rem, 1.5vh, var(--font-size-small)); 
    color: var(--color-text-dark); 
    opacity: 0.6;
    margin-top: calc(var(--spacing-xs) * 0.5); 
    display: block; 
    line-height: 1.4;
}

.cdlv-auth__footer { 
    font-size: var(--font-size-small); 
    text-align: center;
    margin-top: var(--spacing-md); 
}

.cdlv-auth__link { 
    color: var(--color-accent); 
    text-decoration: underline; 
    text-underline-offset: 4px; /* A11y: Improves readability of underlined text */
    transition: color var(--transition-fast), text-decoration-thickness var(--transition-fast); 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0.25rem; /* A11y: Increases hit area for touch/mouse users */
    margin: -0.25rem;
    font-family: inherit; 
    font-size: inherit; 
}

.cdlv-auth__link:hover,
.cdlv-auth__link:focus-visible { 
    color: var(--color-text-dark); 
    text-decoration-thickness: 2px;
    outline: 2px solid var(--color-accent); /* Standardize focus on custom buttons */
    outline-offset: 4px;
}

/* A11y: Handle secondary muted links without violating contrast ratios */
.cdlv-auth__link--muted {
    color: var(--color-text-dark);
    text-decoration: none;
}

.cdlv-auth__link--muted:hover,
.cdlv-auth__link--muted:focus-visible {
    text-decoration: underline;
    color: var(--color-accent);
}

/* 2FA Specific Elements */
.cdlv-2fa__digits {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-start; 
    margin: clamp(0.5rem, 2vh, var(--spacing-sm)) 0;
    flex-wrap: wrap; 
}

.cdlv-2fa__input-box {
    width: clamp(3rem, 8vh + 2vw, 4.5rem);
    aspect-ratio: 1; text-align: center;
    font-family: var(--font-family-heading); 
    font-size: clamp(1.25rem, 3vh + 1vw, var(--font-size-h3)); 
    color: var(--color-text-dark);
    background: transparent; border: 1px solid rgba(26, 26, 26, 0.2); border-radius: var(--radius-strict);
    transition: border-color var(--transition-base), transform var(--transition-fast);
}

.cdlv-2fa__input-box:focus,
.cdlv-2fa__input-box:focus-visible {
    outline: none; border-color: var(--color-accent); transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(71, 59, 117, 0.1);
}

/* Welcome Screen Specifics */
.cdlv-welcome__icon { width: clamp(3rem, 6vh + 2vw, 4rem); height: auto; margin: 0 auto clamp(0.5rem, 2vh, var(--spacing-sm)); color: var(--color-secondary); animation: fade-in-up var(--transition-slow) forwards; }
.cdlv-welcome__title { font-size: clamp(2rem, 5vh + 1vw, var(--font-size-h1)); color: var(--color-text-dark); }
.cdlv-welcome__btn { display: block; text-decoration: none; width: 100%; max-width: 400px; margin: clamp(1rem, 3vh, var(--spacing-sm)) auto 0; }
.cdlv-welcome__countdown { font-size: var(--font-size-small); opacity: 0.8; font-family: var(--font-family-body); font-weight: normal; margin-left: 0.5rem; }

/* Validation Error UI */
.cdlv-auth__error {
    font-size: clamp(0.75rem, 1.5vh, var(--font-size-small)); 
    color: #D9534F; font-weight: bold;
    margin-top: calc(var(--spacing-xs) * 0.5); display: none; animation: fade-in-up var(--transition-fast) forwards;
}
.cdlv-auth__error.is-visible { display: block; }

/* Global Button Override for Auth context */
.cdlv-hero__btn { 
    width: 100%; 
    padding: clamp(0.5rem, 2vh, var(--spacing-sm)) var(--spacing-md); 
}

/* A11y */
@media (prefers-reduced-motion: reduce) {
    .animate-enter {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   MODULE: LOGIN (styles/components.css)
   Architecture: Extends the fluid .cdlv-auth-step container layout.
   ========================================================================== */

/* --- OAUTH BLOCK --- */
.cdlv-oauth-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.cdlv-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: clamp(0.75rem, 2vh, 1rem) var(--spacing-sm);
    background-color: transparent;
    color: var(--color-text-dark);
    border: 1px solid rgba(26, 26, 26, 0.2);
    border-radius: var(--radius-strict);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.cdlv-oauth-btn:hover,
.cdlv-oauth-btn:focus-visible {
    background-color: rgba(26, 26, 26, 0.05);
    border-color: var(--color-text-dark);
    outline: none;
}

.cdlv-oauth-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.cdlv-oauth-icon {
    width: clamp(1.1rem, 2.5vh, 1.25rem);
    height: auto;
    flex-shrink: 0;
}

/* --- VISUAL DIVIDER --- */
.cdlv-auth__divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-text-dark);
    opacity: 0.6;
    margin-bottom: var(--spacing-md);
    font-size: clamp(0.75rem, 1.5vh, var(--font-size-small));
}

.cdlv-auth__divider::before,
.cdlv-auth__divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(26, 26, 26, 0.2);
}

.cdlv-auth__divider:not(:empty)::before { margin-right: var(--spacing-sm); }
.cdlv-auth__divider:not(:empty)::after { margin-left: var(--spacing-sm); }

/* --- FORM SPECIFICS --- */
.cdlv-auth__label-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: calc(var(--spacing-xs) * -0.5); /* Pulls link slightly closer to input */
    z-index: 1;
}

.cdlv-auth__forgot-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: calc(var(--spacing-xs) * 0.75);
}

/* Ensure the error message doesn't push the wrapper too far down when visible */
.cdlv-auth__group .cdlv-auth__error {
    margin-bottom: calc(var(--spacing-xs) * -0.5);
}

.cdlv-auth__input-footer .cdlv-auth__error {
    /* Remove default top margin since the footer wrapper handles the spacing */
    margin-top: 0; 
}

/* ==========================================================================
   MODULE: RESET PASSWORD (styles/components.css)
   Architecture: Extends the fluid .cdlv-auth-step layout. 
   ========================================================================== */

/* --- SUCCESS STATE ICON --- */
.cdlv-reset__icon {
    width: clamp(3rem, 6vh + 2vw, 4rem);
    height: auto;
    margin: 0 auto clamp(0.5rem, 2vh, var(--spacing-sm));
    color: var(--color-accent);
    animation: fade-in-up var(--transition-slow) forwards;
}

/* Ensure the success text remains properly constrained */
.cdlv-reset__success-text {
    max-width: 60ch;
    margin-inline: auto;
}

/* ==========================================================================
   COMPONENT: PRODUCT PAGE (styles/components.css)
   Architecture: Fluid, 100vw spanning module utilizing CSS Grid. 
                 Follows a Mobile-First approach.
   A11y: WCAG 2.1 AA Compliant. Focus management, screen reader utilities, 
         and prefers-reduced-motion integration.
   SEO: Semantic heading structures (h1, h2, h3).
   ========================================================================== */

/* Main Wrapper */
.cdlv-product-page {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: var(--spacing-sm) var(--layout-gutter);
    margin-top: calc(var(--header-offset) + var(--spacing-sm));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    padding-bottom: calc(var(--spacing-xl) + var(--spacing-lg)); 
}

/* Screen Reader Only Utility */
.cdlv-product-page__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile Title (H1) */
.cdlv-product-page__title-mobile {
    display: block;
    font-size: var(--font-size-h2);
    margin-bottom: 0;
}

/* Desktop Title (Div acting visually as H1 to prevent SEO penalty) */
.cdlv-product-page__title-desktop {
    display: none;
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family-heading);
    color: var(--color-accent);
    line-height: 1.2;
}

/* Overview Layout */
.cdlv-product-page__overview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.cdlv-product-page__main-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--color-neutral-bg);
}

.cdlv-product-page__main-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cdlv-product-page__slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: var(--spacing-xs);
}

/* Thumbnail Buttons */
.cdlv-product-page__thumb-btn {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    padding: 0;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
    border-radius: var(--radius-strict);
    overflow: hidden;
}

.cdlv-product-page__thumb-btn:hover {
    opacity: 0.8;
}

.cdlv-product-page__thumb-btn.is-active {
    border-color: var(--color-accent);
    opacity: 1;
}

.cdlv-product-page__thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Description & Typography */
.cdlv-product-page__desc {
    margin-top: var(--spacing-sm);
}

/* Subtitle (H2) */
h2.cdlv-product-page__subtitle {
    font-weight: 600;
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-dark); 
    line-height: 1.6;
}

.cdlv-product-page__bullet-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    max-height: clamp(12rem, 30vw, 16rem); 
    transition: max-height var(--transition-slow) ease-in-out;
}

.cdlv-product-page__bullet-list li {
    font-size: var(--font-size-small); 
    margin-bottom: calc(var(--spacing-xs) * 0.8);
    position: relative;
    padding-left: 1.25rem;
}

.cdlv-product-page__bullet-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}

.cdlv-product-page__read-more-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: var(--font-size-small);
    font-weight: 600;
    cursor: pointer;
    padding: var(--spacing-xs) 0; 
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    display: none; 
    border-radius: var(--radius-strict);
}

.cdlv-product-page__delivery-msg {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs);
    background-color: rgba(174, 191, 178, 0.15);
    border-left: 4px solid var(--color-accent);
    font-size: var(--font-size-small);
}

/* Details & Forms */
.cdlv-product-page__details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); 
}

.cdlv-product-page__form-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-xs) / 2);
}

.cdlv-product-page__label {
    font-size: var(--font-size-small); 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Styled Inputs */
.cdlv-product-page__input {
    padding: var(--spacing-xs);
    border: 2px solid rgba(26, 26, 26, 0.15); 
    font-family: var(--font-family-body);
    font-size: var(--font-size-body); 
    border-radius: var(--radius-strict);
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    width: 100%;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cdlv-product-page__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(71, 59, 117, 0.15);
}

/* Custom Quantity Selector */
.cdlv-product-page__qty-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid rgba(26, 26, 26, 0.15);
    border-radius: var(--radius-strict);
    width: max-content; 
    background-color: var(--color-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cdlv-product-page__qty-wrapper:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(71, 59, 117, 0.15);
}

.cdlv-product-page__qty-btn {
    background: none;
    border: none;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--color-accent);
    cursor: pointer;
    padding: calc(var(--spacing-xs) * 0.8) var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cdlv-product-page__qty-btn:hover {
    background-color: rgba(71, 59, 117, 0.05); 
}

/* Hides native spinners and styles the text */
.cdlv-product-page__qty-input {
    border: none;
    width: 3rem;
    text-align: center;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    color: var(--color-text-dark);
    background: transparent;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield; 
}

.cdlv-product-page__qty-input::-webkit-outer-spin-button,
.cdlv-product-page__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cdlv-product-page__qty-input:focus {
    outline: none;
}

/* ==========================================================================
   OPTIONS GRID (Sizes & Colors)
   ========================================================================== */

.cdlv-product-page__item-config {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(26, 26, 26, 0.1);
}

/* Item Title (H3) */
h3.cdlv-product-page__item-title {
    font-size: var(--font-size-small);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-dark);
    font-family: var(--font-family-body);
}

.cdlv-product-page__options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    /* Push down for absolute badge */
    margin-top: calc(var(--spacing-md) + 0.5rem);
}

.cdlv-product-page__options-grid--colors {
    grid-template-columns: repeat(2, 1fr);
}

/* Base Option Box */
.cdlv-product-page__option-box {
    border: 1px solid rgba(26, 26, 26, 0.2);
    padding: var(--spacing-xs);
    cursor: pointer;
    text-align: center;
    background-color: transparent;
    transition: all var(--transition-fast);
    border-radius: var(--radius-strict);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Hover State - Soft Tint */
.cdlv-product-page__option-box:hover {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    background-color: rgba(71, 59, 117, 0.05); 
}

/* Active Selected State - Deep Transparent Fill */
.cdlv-product-page__option-box.is-selected {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    background-color: rgba(71, 59, 117, 0.9); 
}

/* Base Text Colors */
.cdlv-product-page__option-price {
    font-size: var(--font-size-h4); 
    font-weight: 600;
    color: var(--color-text-dark);
    transition: color var(--transition-fast);
}

.cdlv-product-page__option-name {
    font-size: var(--font-size-small);
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.cdlv-product-page__option-desc {
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    color: rgba(26, 26, 26, 0.6);
    transition: color var(--transition-fast);
}

/* Active State Text Color Inversion (A11y Contrast) */
.cdlv-product-page__option-box.is-selected .cdlv-product-page__option-price,
.cdlv-product-page__option-box.is-selected .cdlv-product-page__price-discount,
.cdlv-product-page__option-box.is-selected .cdlv-product-page__option-name {
    color: var(--color-text-light); 
}

.cdlv-product-page__option-box.is-selected .cdlv-product-page__option-desc {
    color: rgba(255, 255, 255, 0.85); 
}

/* Color Option (Image Left, Text Right) */
.cdlv-product-page__option-box--color {
    height: var(--spacing-lg); 
    flex-direction: row; 
    gap: 0; 
    padding: 0; 
    text-align: left;
    justify-content: flex-start;
    align-items: stretch; 
    overflow: hidden; 
}

.cdlv-product-page__option-box--color:hover,
.cdlv-product-page__option-box--color.is-selected {
    padding: 0; 
}

.cdlv-product-page__option-img {
    width: var(--spacing-lg); 
    flex-shrink: 0; 
    height: 100%; 
    object-fit: cover;
    border-radius: 0; 
}

.cdlv-product-page__color-text {
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    flex: 1; 
    min-width: 0; 
}

.cdlv-product-page__color-text .cdlv-product-page__option-name {
    font-size: clamp(0.75rem, 1.2vw, 0.95rem); 
    font-weight: 600; 
    letter-spacing: 0.05em;
    line-height: 1.2;
    overflow-wrap: break-word; 
    word-break: break-word;
}

/* ==========================================================================
   DYNAMIC PRICING & BADGES
   ========================================================================== */

/* Most Popular Size Badge */
.cdlv-product-page__popular-badge {
    position: absolute;
    top: calc(-1 * var(--spacing-sm) - 0.8rem);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-accent);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    font-weight: 600;
    white-space: nowrap;
}

/* Price Wrapper */
.cdlv-product-page__price-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-xs) * 0.8);
}

.cdlv-product-page__price-original {
    transition: all var(--transition-fast);
}

.cdlv-product-page__price-discount {
    display: none;
    color: var(--color-accent);
}

/* Subscription Active State Toggles */
.cdlv-product-page--subscription-active .cdlv-product-page__price-discount {
    display: inline-block;
}

.cdlv-product-page--subscription-active .cdlv-product-page__price-original {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 0.85em; 
}

/* ==========================================================================
   PURCHASING OPTIONS & SUBMIT
   ========================================================================== */

.cdlv-product-page__purchase-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.cdlv-product-page__purchase-legend {
    margin-bottom: var(--spacing-xs);
}

.cdlv-product-page__purchase-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    border: 1px solid rgba(26, 26, 26, 0.2);
    padding: var(--spacing-xs);
}

.cdlv-product-page__radio-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    cursor: pointer;
    border-radius: var(--radius-strict);
    padding: 2px;
}

.cdlv-product-page__radio-input {
    margin-top: 4px;
    width: calc(var(--icon-size-base) * 1.2);
    height: calc(var(--icon-size-base) * 1.2);
    accent-color: var(--color-accent);
}

.cdlv-product-page__radio-content {
    display: flex;
    flex-direction: column;
}

.cdlv-product-page__radio-title {
    font-weight: 600;
    font-size: var(--font-size-small);
}

.cdlv-product-page__radio-desc {
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    color: rgba(26, 26, 26, 0.7);
}

.cdlv-product-page__submit-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-xs) var(--layout-gutter);
    background-color: var(--color-primary);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 10;
}

.cdlv-product-page__btn {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-strict);
    /* Added transitions for the interactive state */
    transition: background-color var(--transition-fast), transform 0.1s ease-in-out;
}

.cdlv-product-page__btn:hover {
    background-color: var(--color-text-dark);
}

/* Micro-interaction: physically depresses the button when clicked */
.cdlv-product-page__btn:active {
    transform: scale(0.98);
}

/* Success State applied via JavaScript */
.cdlv-product-page__btn.is-success {
    background-color: var(--color-text-dark); 
}

/* ==========================================================================
   A11Y & FOCUS MANAGEMENT
   ========================================================================== */

/* Show focus rings only when navigating via keyboard */
.cdlv-product-page__thumb-btn:focus-visible,
.cdlv-product-page__read-more-btn:focus-visible,
.cdlv-product-page__btn:focus-visible,
.cdlv-product-page__radio-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* Forwards focus outline to the label box when its hidden radio is focused via keyboard */
.cdlv-product-page__option-box:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* Reduced Motion Preference (No !important tags) */
@media (prefers-reduced-motion: reduce) {
    .cdlv-product-page__thumb-btn,
    .cdlv-product-page__bullet-list,
    .cdlv-product-page__input,
    .cdlv-product-page__qty-wrapper,
    .cdlv-product-page__qty-btn,
    .cdlv-product-page__option-box,
    .cdlv-product-page__option-price,
    .cdlv-product-page__option-name,
    .cdlv-product-page__option-desc,
    .cdlv-product-page__price-original {
        transition: none;
    }
}

/* DESKTOP QUERIES */
@media (min-width: 992px) {
    .cdlv-product-page {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: clamp(2rem, 5vw, 4rem); 
        align-items: flex-start;
        padding-bottom: var(--spacing-xl); 
    }

    .cdlv-product-page__title-mobile { display: none; }
    .cdlv-product-page__title-desktop { display: block; }

    .cdlv-product-page__overview {
        position: sticky;
        top: calc(var(--header-offset) + var(--spacing-sm));
        margin: 0; 
    }

    .cdlv-product-page__details {
        padding-left: 0; 
    }

    .cdlv-product-page__submit-wrapper {
        position: static;
        padding: 0;
        box-shadow: none;
        background: transparent;
        margin-top: calc(var(--spacing-sm) * -0.5);
    }
}

/* ==========================================================================
   MODULE: DASHBOARD (components.css)
   Architecture: Scoped BEM methodology. Utilizes global CSS variables for 
   fluid typography, colors, and motion. 
   Performance: Relies on native CSS Grid/Flexbox and avoids expensive 
   re-paints. Strictly hardware-accelerated transitions.
   ========================================================================== */

.cdlv-dashboard {
    width: 100%;
    margin-block: var(--spacing-md) var(--spacing-xl);
}

/* Tab Navigation */
.cdlv-dashboard__nav-wrapper {
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    margin-bottom: var(--spacing-md);
}

.cdlv-dashboard__nav {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.cdlv-dashboard__nav::-webkit-scrollbar {
    display: none;
}

.cdlv-dashboard__tab-link {
    display: inline-block;
    padding: var(--spacing-xs) 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text-dark);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.cdlv-dashboard__tab-link:hover {
    opacity: 1;
}

.cdlv-dashboard__tab-link.is-active {
    opacity: 1;
    border-bottom-color: var(--color-accent);
    pointer-events: none;
}

.cdlv-dashboard__panel {
    animation: fade-in-up var(--transition-fast) forwards;
}

.cdlv-dashboard__panel.is-active {
    display: block;
}

/* Tab Header */
.cdlv-dashboard__panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    padding-bottom: var(--spacing-xs);
}

.cdlv-dashboard__panel-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-dark);
    margin: 0;
}

.cdlv-dashboard__edit-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
}

/* Data Tables */
.cdlv-dashboard__table-wrapper {
    overflow-x: auto;
}

.cdlv-dashboard__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.cdlv-dashboard__table th {
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    padding: var(--spacing-xs);
    opacity: 0.7;
}

.cdlv-dashboard__table td {
    padding: var(--spacing-xs);
    border-bottom: 1px solid rgba(26, 26, 26, 0.05);
    font-size: var(--font-size-body);
}

.cdlv-dashboard__table tr:last-child td {
    border-bottom: none;
}

.cdlv-dashboard__link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Display & Forms */
.cdlv-dashboard__view-state { display: block; }
.cdlv-dashboard__edit-state { display: none; }

.is-editing .cdlv-dashboard__view-state { display: none; }
.is-editing .cdlv-dashboard__edit-state { display: block; }

.cdlv-dashboard__field-group {
    margin-bottom: var(--spacing-sm);
}

.cdlv-dashboard__label {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: calc(var(--spacing-xs) / 2);
    opacity: 0.7;
}

.cdlv-dashboard__value {
    font-size: var(--font-size-body);
}

.cdlv-dashboard__input {
    width: 100%;
    padding: var(--spacing-xs);
    border: 1px solid rgba(26, 26, 26, 0.2);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    background: transparent;
    color: var(--color-text-dark);
}

.cdlv-dashboard__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Custom Checkbox Styling */
.cdlv-dashboard__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--font-size-body);
    font-weight: 600;
    cursor: pointer;
}

.cdlv-dashboard__checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 2px solid rgba(26, 26, 26, 0.4);
    border-radius: var(--radius-strict);
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    margin: 0;
}

.cdlv-dashboard__checkbox-label input[type="checkbox"]:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.cdlv-dashboard__checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 7px;
    width: 6px;
    height: 12px;
    border: solid var(--color-text-light);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cdlv-dashboard__btn {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    margin-top: var(--spacing-md);
}

.cdlv-dashboard__error-msg {
    color: #d32f2f;
    font-size: var(--font-size-small);
    margin-top: calc(var(--spacing-xs) / 2);
    display: none;
}

.cdlv-dashboard__input.is-invalid {
    border-color: #d32f2f;
}

/* Active Subscription Card (Overview Tab) */
.cdlv-dashboard__card {
    border: 1px solid rgba(26, 26, 26, 0.1);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    background-color: rgba(26, 26, 26, 0.02);
}

@media (min-width: 768px) {
    .cdlv-dashboard__card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.cdlv-dashboard__card-title {
    font-size: var(--font-size-small);
    font-family: var(--font-family-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin: 0 0 4px 0;
    color: var(--color-text-dark);
}

.cdlv-dashboard__card-content p {
    font-size: var(--font-size-body);
    margin: 0;
    opacity: 0.8;
}

.cdlv-dashboard__actions {
    margin-top: var(--spacing-md);
    display: flex;
    justify-content: flex-end;
}

.cdlv-dashboard__pref-group {
    margin-bottom: var(--spacing-md);
}

.cdlv-dashboard__pref-desc {
    display: block;
    font-size: var(--font-size-small);
    opacity: 0.7;
    margin-left: calc(var(--spacing-xs) + 13px);
    margin-top: 4px;
    line-height: 1.4;
}

/* Toggle Switch (2FA) */
.cdlv-dashboard__toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid rgba(26, 26, 26, 0.1);
    margin-top: var(--spacing-md);
}

.cdlv-dashboard__toggle-label {
    font-size: var(--font-size-body);
    font-weight: 600;
}

.cdlv-dashboard__toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.cdlv-dashboard__toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cdlv-dashboard__toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(26, 26, 26, 0.2);
    transition: var(--transition-base);
    border-radius: 24px;
}

.cdlv-dashboard__toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-primary);
    transition: var(--transition-base);
    border-radius: 50%;
}

.cdlv-dashboard__toggle input:checked + .cdlv-dashboard__toggle-slider {
    background-color: var(--color-accent);
}

.cdlv-dashboard__toggle input:checked + .cdlv-dashboard__toggle-slider:before {
    transform: translateX(20px);
}

.cdlv-dashboard__input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.cdlv-dashboard__pwd-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-accent);
    cursor: pointer;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    z-index: 2;
}

.cdlv-dashboard__pwd-toggle:hover {
    opacity: 0.8;
}

.cdlv-dashboard__input-wrapper .cdlv-dashboard__input {
    padding-right: 70px; 
}

/* Sub-View Container Switching */
.cdlv-dashboard__sub-view {
    display: none;
    animation: fade-in-up var(--transition-fast) forwards;
}

.cdlv-dashboard__sub-view.is-active {
    display: block;
}

.cdlv-dashboard__back-btn {
    background: none;
    border: none;
    color: var(--color-text-dark);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-xs) / 2);
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.cdlv-dashboard__back-btn:hover {
    opacity: 1;
}

/* Card Grids (Wishlist & Subscriptions) */
.cdlv-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

@media (min-width: 768px) {
    .cdlv-dashboard__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
}

@media (min-width: 1024px) {
    .cdlv-dashboard__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* PERFORMANCE: GPU-accelerated transition */
.cdlv-dashboard__item-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-primary);
    border-radius: var(--radius-strict);
    border: 1px solid rgba(26, 26, 26, 0.1);
    overflow: hidden;
    transition: transform var(--transition-base); 
    height: 100%;
    min-height: 0;
}

.cdlv-dashboard__item-card:hover {
    transform: translateY(-2px);
}

.cdlv-dashboard__item-img-wrapper {
    aspect-ratio: 4 / 5;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-strict);
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    flex-shrink: 0;
}

.cdlv-dashboard__item-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-strict);
    transition: transform var(--transition-slow);
}

.cdlv-dashboard__item-card:hover .cdlv-dashboard__item-img-wrapper img {
    transform: scale(1.03);
}

.cdlv-dashboard__item-details {
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.cdlv-dashboard__item-title {
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin: 0 0 calc(var(--spacing-xs) / 2) 0;
}

.cdlv-dashboard__item-meta {
    font-size: var(--font-size-body);
    opacity: 0.8;
    margin: 0;
}

.cdlv-dashboard__item-actions {
    margin-top: auto; 
    display: flex;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-md);
    width: 100%;
}

.cdlv-dashboard__item-actions .cdlv-dashboard__btn {
    width: 100%;
    margin-top: 0; 
}

.cdlv-dashboard__btn--outline {
    background: transparent;
    color: var(--color-text-dark);
    border: 1px solid rgba(26, 26, 26, 0.2);
}

.cdlv-dashboard__btn--outline:hover {
    border-color: var(--color-text-dark);
}

.cdlv-dashboard__btn--danger {
    background-color: transparent;
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

.cdlv-dashboard__btn--danger:hover {
    background-color: #d32f2f;
    color: var(--color-text-light);
}

/* Payment Method Cards */
.cdlv-dashboard__payment-card {
    border: 1px solid rgba(26, 26, 26, 0.2);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cdlv-dashboard__payment-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cdlv-dashboard__payment-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-small);
    margin: 0;
}

.cdlv-dashboard__payment-badge {
    display: inline-block;
    background: rgba(26, 26, 26, 0.1);
    font-size: 0.75rem;
    padding: 2px 6px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Modal System */
/* PERFORMANCE: GPU-accelerated transition */
.cdlv-dashboard__modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base); /* Locked to opacity only */
}

.cdlv-dashboard__modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cdlv-dashboard__modal-content {
    background: var(--color-primary);
    width: min(90vw, 640px);
    padding: var(--spacing-md);
    transform: translateY(20px);
    transition: transform var(--transition-base); /* Locked to transform only */
    border: 1px solid rgba(26, 26, 26, 0.1);
}

.cdlv-dashboard__modal.is-open .cdlv-dashboard__modal-content {
    transform: translateY(0);
}

.cdlv-dashboard__modal-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.cdlv-dashboard__modal-text {
    font-size: var(--font-size-small);
    opacity: 0.8;
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.cdlv-dashboard__modal-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .cdlv-dashboard__modal-actions {
        flex-direction: row;
        justify-content: space-between;
    }
}

.cdlv-dashboard__modal-actions .cdlv-dashboard__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1; 
    white-space: normal; 
    line-height: 1.2;
    padding-inline: var(--spacing-sm); 
}

/* ==========================================================================
   ACCESSIBILITY HARDENING
   ========================================================================== */

/* 1. Universal Focus Management for Dashboard Interactives */
.cdlv-dashboard__tab-link:focus-visible,
.cdlv-dashboard__edit-btn:focus-visible,
.cdlv-dashboard__pwd-toggle:focus-visible,
.cdlv-dashboard__back-btn:focus-visible,
.cdlv-dashboard__modal-content:focus-visible,
.cdlv-dashboard__checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-strict);
}

.cdlv-dashboard__modal:focus-visible {
    outline: none;
}

/* 2. Motion Sensitivity Compliance */
@media (prefers-reduced-motion: reduce) {
    .cdlv-dashboard__panel,
    .cdlv-dashboard__sub-view {
        animation: none !important;
    }

    .cdlv-dashboard__modal {
        transition: none !important;
    }
    
    .cdlv-dashboard__modal-content {
        transform: none !important;
        transition: none !important;
    }

    .cdlv-dashboard__toggle-slider,
    .cdlv-dashboard__toggle-slider:before {
        transition: none !important;
    }

    .cdlv-dashboard__item-card:hover {
        transform: none;
    }
    
    .cdlv-dashboard__item-img-wrapper img {
        transition: none;
    }
    
    .cdlv-dashboard__item-card:hover .cdlv-dashboard__item-img-wrapper img {
        transform: none;
    }
}

/* ==========================================================================
   MODULE: SUPPORT CHAT (cdlv-support-chat)
   Architecture: Fixed, full-screen fluid overlay with clip-path reveal.
   Aesthetics: Strict 0px radius, high contrast, relies on globals.css.
   ========================================================================== */

/* --- Launcher Button --- */
.cdlv-support-chat-launcher {
    position: fixed;
    bottom: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    width: auto;
    height: clamp(3.5rem, 5vw, 4.5rem);
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    padding: 0 1.25rem;
    border-radius: var(--radius-strict);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 990;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-base), background-color var(--transition-fast);
}

.cdlv-support-chat-launcher__text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: 600;
    margin-right: 0.5rem;
}

.cdlv-support-chat-launcher:hover {
    transform: translateY(-4px);
    background-color: var(--color-text-dark);
}

.cdlv-support-chat-launcher svg {
    width: clamp(1.5rem, 2.5vw, 2rem);
    height: auto;
}

/* --- Full Screen Chat Window --- */
.cdlv-support-chat-window {
    position: fixed;
    inset: 0;
    background-color: var(--color-primary);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    /* Hardware-accelerated edge-to-edge growth */
    clip-path: circle(0% at calc(100% - clamp(2.75rem, 4vw, 4.25rem)) calc(100% - clamp(2.75rem, 4vw, 4.25rem)));
    transition: clip-path 0.6s var(--ease-professional);
    pointer-events: none;
}

.cdlv-support-chat-window.is-open {
    clip-path: circle(150% at calc(100% - clamp(2.75rem, 4vw, 4.25rem)) calc(100% - clamp(2.75rem, 4vw, 4.25rem)));
    pointer-events: all;
}

/* --- Chat Header --- */
.cdlv-support-chat__header {
    background-color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    padding: var(--spacing-sm) var(--layout-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.cdlv-support-chat__header-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    color: var(--color-text-light);
    margin: 0;
}

.cdlv-support-chat__header-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.cdlv-support-chat__btn-icon {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-light);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-strict);
    transition: all var(--transition-fast);
}

.cdlv-support-chat__btn-icon:hover {
    border-color: var(--color-text-light);
}

/* --- Chat Stream (Message Area) --- */
.cdlv-support-chat__stream {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md) var(--layout-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    scroll-behavior: smooth;
}

/* --- Messages --- */
.cdlv-support-chat__msg-row {
    display: flex;
    gap: var(--spacing-sm);
    max-width: 85%;
}

.cdlv-support-chat__msg-row--bot {
    align-self: flex-start;
}

.cdlv-support-chat__msg-row--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.cdlv-support-chat__avatar {
    width: clamp(2.5rem, 4vw, 3.5rem);
    height: clamp(2.5rem, 4vw, 3.5rem);
    border-radius: var(--radius-strict);
    object-fit: cover;
    border: 1px solid var(--color-text-dark);
    flex-shrink: 0;
}

.cdlv-support-chat__bubble-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cdlv-support-chat__bubble {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-strict);
    font-size: var(--font-size-small);
}

.cdlv-support-chat__msg-row--bot .cdlv-support-chat__bubble {
    background-color: var(--color-neutral-bg);
    color: var(--color-text-dark);
    border: 1px solid transparent;
}

.cdlv-support-chat__msg-row--user .cdlv-support-chat__bubble {
    background-color: var(--color-accent);
    color: var(--color-text-light);
}

.cdlv-support-chat__timestamp {
    font-size: 0.75rem;
    color: #666;
    align-self: flex-start;
}
.cdlv-support-chat__msg-row--user .cdlv-support-chat__timestamp {
    align-self: flex-end;
}

/* --- UI Elements inside Chat --- */
.cdlv-support-chat__pills {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: var(--spacing-xs);
}

.cdlv-support-chat__pill {
    background-color: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 0.5rem 1rem;
    font-size: var(--font-size-small);
    border-radius: var(--radius-strict);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cdlv-support-chat__pill.is-selected {
    background-color: var(--color-accent) !important;
    color: var(--color-text-light) !important;
    border-color: var(--color-accent) !important;
}

.cdlv-support-chat__pill:hover {
    background-color: var(--color-accent);
    color: var(--color-text-light);
}

.cdlv-support-chat__pill--primary {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border-color: var(--color-accent);
}

.cdlv-support-chat__card {
    border: 1px solid var(--color-text-dark);
    padding: var(--spacing-sm);
    background: var(--color-primary);
    max-width: 300px;
    width: 100%; /* Adapt cleanly without overflowing */
    margin-top: var(--spacing-xs);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    overflow: visible; /* Prevents internal scrolling */
    height: auto;
}

.cdlv-support-chat__card-link {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
}

.cdlv-support-chat__card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-strict);
    margin-bottom: 0.5rem;
}

.cdlv-support-chat__card p {
    margin: 0;
}

.cdlv-support-chat__card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    margin-bottom: 0.5rem;
}

/* --- Forms --- */
.cdlv-support-chat__form {
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: var(--color-primary);
    padding: var(--spacing-sm);
    border: 1px solid var(--color-text-dark);
    margin-top: var(--spacing-xs);
}

.cdlv-support-chat__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --- Persistent Form Disabled State --- */
.cdlv-support-chat__form input:disabled, 
.cdlv-support-chat__form select:disabled, 
.cdlv-support-chat__form textarea:disabled {
    opacity: 0.7;
    background-color: #f5f5f5;
    cursor: not-allowed;
    color: var(--color-text-dark);
}

.cdlv-support-chat__label {
    font-size: var(--font-size-small);
    font-weight: 600;
}

.cdlv-support-chat__input, .cdlv-support-chat__textarea {
    padding: 0.75rem;
    border: 1px solid var(--color-text-dark);
    background: var(--color-primary);
    border-radius: var(--radius-strict);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    color: var(--color-text-dark);
}

select.cdlv-support-chat__input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* --- File Input Styling --- */
.cdlv-support-chat__input--file {
    padding: 0.5rem; /* Slightly tighter padding for file inputs */
}

.cdlv-support-chat__input--file::file-selector-button {
    background-color: var(--color-neutral-bg);
    border: 1px solid var(--color-text-dark);
    color: var(--color-text-dark);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-strict);
    cursor: pointer;
    margin-right: 0.75rem;
    font-family: var(--font-family-body);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.cdlv-support-chat__input--file::file-selector-button:hover {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
}

.cdlv-support-chat__submit {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    padding: 0.75rem;
    cursor: pointer;
    font-family: var(--font-family-body);
    border-radius: var(--radius-strict);
    transition: background-color var(--transition-fast);
}

.cdlv-support-chat__submit:hover {
    background-color: var(--color-text-dark);
}

/* --- Modals --- */
.cdlv-support-chat__modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010;
    opacity: 0; 
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.cdlv-support-chat__modal-overlay.is-active {
    opacity: 1; 
    pointer-events: all;
}

.cdlv-support-chat__modal {
    background: var(--color-primary);
    padding: var(--spacing-md);
    border: 1px solid var(--color-text-dark);
    text-align: center;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.cdlv-support-chat__modal h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    color: var(--color-accent);
    line-height: 1.1;
    margin: 0;
}

.cdlv-support-chat__modal p {
    margin: 0;
    font-size: var(--font-size-small);
}

.cdlv-support-chat__modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    margin-top: var(--spacing-xs);
}

.cdlv-support-chat__modal-actions .cdlv-support-chat__pill {
    width: 100%;
    justify-content: center;
}

.cdlv-support-chat-window p,
.cdlv-support-chat-window input,
.cdlv-support-chat-window textarea,
.cdlv-support-chat-window .cdlv-support-chat__bubble,
.cdlv-support-chat-window .cdlv-support-chat__pill,
.cdlv-support-chat-window .cdlv-support-chat__label,
.cdlv-support-chat-window .cdlv-support-chat__submit {
    font-size: var(--font-size-small);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Specifically target and lock down the fluid headings inside the chat window */
.cdlv-support-chat-window .cdlv-support-chat__modal h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.2;
    margin: 0;
    overflow-wrap: break-word;
}

.cdlv-support-chat-window .cdlv-support-chat__card-title {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    overflow-wrap: break-word;
}

.cdlv-support-chat-window .cdlv-support-chat__header-title {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: var(--color-text-light);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Typing Indicator & Gem Animation --- */
.cdlv-support-chat__typing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-neutral-bg);
    border-radius: var(--radius-strict);
    width: fit-content;
}

.cdlv-support-chat__typing-text { 
    font-size: var(--font-size-small); 
    color: var(--color-text-dark); 
}

.cdlv-support-chat__gem {
    width: 10px; 
    height: 10px;
    background-color: var(--color-accent);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Diamond/Gem shape */
    animation: cdlv-gem-pulse 0.8s infinite alternate ease-in-out;
}

@keyframes cdlv-gem-pulse {
    0% { transform: scale(0.7); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 1; }
}

/* --- Support Chat Mini-Slider Classes --- */
.cdlv-support-chat__slider-section {
    padding-block: 0;
    padding-inline: 0;
    margin-inline: 0;
    background: transparent; /* Removed the black border and primary background */
    border-radius: var(--radius-strict);
    padding: var(--spacing-xs) 0;
}

.cdlv-support-chat__slider-wrapper {
    margin-inline: 0;
    padding-inline: 0;
}

.cdlv-support-chat__slider-track {
    gap: var(--spacing-sm);
    padding-bottom: 0;
}

.cdlv-support-chat__slider-card {
    flex: 0 0 140px;
    min-width: 140px;
    cursor: pointer;
}

.cdlv-support-chat__slider-img-box {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-strict);
    margin-bottom: var(--spacing-xs);
    position: relative;
}

.cdlv-support-chat__slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Forcing strict typography to prevent global overrides */
.cdlv-support-chat__slider-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.25rem 0;
    color: var(--color-text-dark);
}

.cdlv-support-chat__slider-link {
    text-decoration: none;
    color: inherit;
}

.cdlv-support-chat__slider-price {
    font-size: 0.75rem;
    color: #666;
    margin: 0;
    font-weight: 500;
}

.cdlv-support-chat__slider-price--accent {
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cdlv-support-chat__video-overlay-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    color: white;
    width: 100%;
    height: 100%;
}

/* --- Internal Video Player Modal --- */
.cdlv-support-chat-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    clip-path: circle(0% at center);
    transition: all 0.6s var(--ease-professional);
}

.cdlv-support-chat-video-overlay.is-active {
    opacity: 1;
    pointer-events: all;
    clip-path: circle(150% at center);
}

.cdlv-support-chat-video-container {
    width: 90%;
    max-width: 800px;
    max-height: 90vh; 
    background: var(--color-primary); 
    border-radius: var(--radius-strict);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: visible; /* <-- Changed from hidden so the button can float outside */
}

.cdlv-support-chat-video-el {
    width: 100%;
    max-height: calc(90vh - 60px); 
    height: auto;
    background: #000;
    display: block;
    object-fit: contain; 
    border-top-left-radius: var(--radius-strict);
    border-top-right-radius: var(--radius-strict);
}

/* Custom Controls Bar */
.cdlv-support-chat-video-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs);
    background: var(--color-primary); 
    flex-shrink: 0; 
    border-bottom-left-radius: var(--radius-strict);
    border-bottom-right-radius: var(--radius-strict);
}

.cdlv-video-btn {
    background: transparent;
    border: none;
    color: var(--color-accent); 
    width: clamp(2rem, 3.5vw, 2.5rem);
    height: clamp(2rem, 3.5vw, 2.5rem);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast);
}

.cdlv-video-btn:hover {
    opacity: 0.7;
}

.cdlv-video-btn svg {
    width: 100%;
    height: 100%;
}

.cdlv-video-btn.is-active {
    opacity: 0.5; 
}

/* Close Button Floating Top Right */
.cdlv-support-chat-video-close {
    position: absolute;
    top: -3.5rem;
    right: 0;
    background: var(--color-primary);
    color: var(--color-accent);
    border: none;
    border-radius: var(--radius-strict);
    width: clamp(2.5rem, 4vw, 3rem);
    height: clamp(2.5rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.cdlv-support-chat-video-close:hover {
    transform: scale(1.05);
}

/* --- ACCESSIBILITY: REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    /* Disable hardware-accelerated clip-path reveals in favor of instant display */
    .cdlv-support-chat-window {
        transition: none !important;
        clip-path: none !important;
        opacity: 0;
        visibility: hidden;
    }
    
    .cdlv-support-chat-window.is-open {
        opacity: 1;
        visibility: visible;
        clip-path: none !important;
    }

    .cdlv-support-chat-video-overlay {
        transition: none !important;
        clip-path: none !important;
        opacity: 0;
        visibility: hidden;
    }

    .cdlv-support-chat-video-overlay.is-active {
        opacity: 1;
        visibility: visible;
        clip-path: none !important;
    }

    /* Disable infinite continuous animations */
    .cdlv-support-chat__gem {
        animation: none !important;
        transform: scale(1) !important;
        opacity: 1 !important;
    }

    /* Remove floating interactions */
    .cdlv-support-chat-launcher {
        transition: background-color var(--transition-fast) !important;
    }
    
    .cdlv-support-chat-launcher:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   MICRO-SCREEN OVERRIDE (< 320px)
   ========================================================================== */

@media (max-width: 319px) {
  #global-header,
  #global-footer,
  #main-content {
    display: none !important;
  }
}

@keyframes cdlv-spin {
  to { transform: rotate(360deg); }
}