/* ============================================================
   components.css
   Auto-generated by wp-sync — do not edit directly.
   Source: design-system/atoms/* + molecules/* + organisms/cards
   ============================================================ */

/* ── Atom: NavItem ── */

/* NavItem — .nav__item */

.nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px var(--space-xl) 11px;
  background: var(--color-bg-lavender);
  border-radius: var(--radius-pill);
  margin-right: -4px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  color: var(--color-purple-brand);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
}

.nav__item:hover {
  background: var(--color-purple-100);
}

@media (max-width: 1270px) {
  .nav__item {
    padding: 10px var(--space-base) 8px;
    font-size: var(--text-body-sm);
  }
}

/* ── Atom: Button ── */

/* Button — .btn
   Two-piece pill: .btn__text + .btn__icon
   ::before = незалежний фоновий шар (z-index: 0)
   Hover: merge-анімація через translateX(±8px)
   Active: clip-path convex bulge через inset: -3px 0
*/

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-lg);
  line-height: var(--lh-button);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), background var(--transition-fast);
  z-index: 0;
}

.btn__text {
  padding: 13px var(--space-2xl) 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border-radius: var(--radius-circle);
  width: 52px;
  height: 52px;
  margin-left: -4px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn__icon svg {
  width: 24px;
  height: 24px;
}

/* — Variant: Light — */
.btn--light .btn__text {
  background: var(--color-bg-page);
  color: var(--color-purple-brand);
}

.btn--light .btn__icon {
  background: var(--color-bg-page);
  color: var(--color-purple-brand);
}

.btn--light:hover::before {
  background: var(--color-purple-100);
}

.btn--light:hover .btn__text {
  background: transparent;
  transform: translateX(8px);
}

.btn--light:hover .btn__icon {
  background: var(--color-purple-100);
  transform: translateX(-8px);
}

.btn--light:active::before {
  background: var(--color-purple-100);
  inset: -3px 0;
  transform: none;
  clip-path: path('M 26,3 Q 122,-3 218,3 A 26,26 0 0 1 218,55 Q 122,61 26,55 A 26,26 0 0 1 26,3 Z');
}

.btn--light:active .btn__text {
  background: transparent;
  transform: translateX(8px);
}

.btn--light:active .btn__icon {
  background: var(--color-purple-100);
  transform: translateX(-8px);
}

/* — Variant: Dark — */
.btn--dark .btn__text {
  background: var(--color-purple-brand);
  color: var(--color-bg-page);
}

.btn--dark .btn__icon {
  background: var(--color-purple-brand);
  color: var(--color-bg-page);
}

.btn--dark:hover::before {
  background: var(--color-purple-800);
}

.btn--dark:hover .btn__text {
  background: transparent;
  transform: translateX(8px);
}

.btn--dark:hover .btn__icon {
  background: var(--color-purple-800);
  transform: translateX(-8px);
}

/* Active: kraї 52px, центр +3px зверху/знизу — clip-path в розширеному ::before */
.btn--dark:active::before {
  background: var(--color-purple-800);
  inset: -3px 0;
  transform: none;
  clip-path: path('M 26,3 Q 122,-3 218,3 A 26,26 0 0 1 218,55 Q 122,61 26,55 A 26,26 0 0 1 26,3 Z');
}

.btn--dark:active .btn__text {
  background: transparent;
  transform: translateX(8px);
}

.btn--dark:active .btn__icon {
  background: var(--color-purple-800);
  transform: translateX(-8px);
}

/* — Variant: Lavender — */
.btn--lavender .btn__text {
  background: var(--color-bg-lavender);
  color: var(--color-purple-brand);
}

.btn--lavender .btn__icon {
  background: var(--color-bg-lavender);
  color: var(--color-purple-brand);
}

.btn--lavender:hover::before {
  background: var(--color-purple-brand);
}

.btn--lavender:hover .btn__text {
  background: transparent;
  color: var(--color-bg-page);
  transform: translateX(8px);
}

.btn--lavender:hover .btn__icon {
  background: var(--color-purple-brand);
  color: var(--color-bg-page);
  transform: translateX(-8px);
}

.btn--lavender:active::before {
  background: var(--color-purple-brand);
  inset: -3px 0;
  transform: none;
  clip-path: path('M 26,3 Q 122,-3 218,3 A 26,26 0 0 1 218,55 Q 122,61 26,55 A 26,26 0 0 1 26,3 Z');
}

.btn--lavender:active .btn__text {
  background: transparent;
  color: var(--color-bg-page);
  transform: translateX(8px);
}

.btn--lavender:active .btn__icon {
  background: var(--color-purple-brand);
  color: var(--color-bg-page);
  transform: translateX(-8px);
}

/* — Disabled States (Both Variants) — */
.btn:disabled, .btn[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.btn:disabled::before {
  background: var(--color-purple-100);
  transform: none;
}

.btn:disabled .btn__text,
.btn:disabled .btn__icon {
  background: var(--color-purple-100);
  color: var(--color-bg-page);
  transform: none;
}

/* ── Atom: ValueTag ── */

/* ValueTag — .value-tag */

.value-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--space-xl) 8px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  color: var(--color-purple-brand);
  white-space: nowrap;
  position: absolute;
}

/* ── Atom: FloatingBubble ── */

/* FloatingBubble — .floating-bubble */

.floating-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--space-base);
  background: var(--color-bg-page);
  border: 1.5px solid var(--color-purple);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-purple);
  white-space: nowrap;
  position: absolute;
}

.floating-bubble--lavender {
  background: var(--color-bg-lavender-light);
  border: 1.5px solid var(--color-purple-brand);
  color: var(--color-purple-brand);
}

@media (max-width: 768px) {
  .floating-bubble {
    font-size: 13px;
    padding: 5px 12px;
  }
}

/* ── Atom: FlavorTag ── */

/* FlavorTag — .flavor-tag */

.flavor-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: calc(var(--space-sm) + 2px) var(--space-base) calc(var(--space-sm) - 2px);
  background: var(--color-orange);
  border-radius: var(--radius-xl);
  color: var(--color-bg-page);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.flavor-tag__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── Atom: FormField ── */

/* FormField — .form-field
   Label + input/textarea з underline стилем
   Стани: default, focus, error, success
*/

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-field__label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--color-purple);
  line-height: var(--lh-body);
}

.form-field__input {
  padding: var(--space-md) 0;
  border: none;
  border-bottom: 1px solid var(--color-purple);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-purple);
  background: transparent;
  outline: none;
  width: 100%;
  transition: border-color var(--transition-fast);
}

.form-field__input::placeholder {
  color: var(--color-purple);
  opacity: 0.4;
}

textarea.form-field__input {
  resize: vertical;
  min-height: 40px;
}

/* — Focus state — */
.form-field__input:focus {
  border-bottom-color: var(--color-purple-brand);
  border-bottom-width: 2px;
}

/* — Error state — */
.form-field--error .form-field__input {
  border-bottom-color: var(--color-orange);
  border-bottom-width: 2px;
}

.form-field__message {
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--lh-body);
  margin-top: var(--space-2xs);
}

.form-field--error .form-field__message {
  color: var(--color-orange);
}

/* — Success state — */
.form-field--success .form-field__input {
  border-bottom-color: var(--color-bg-green);
  border-bottom-width: 2px;
}

.form-field--success .form-field__message {
  color: var(--color-purple-brand);
}

/* ── Atom: CarouselBtn ── */

/* CarouselBtn — .carousel-nav__btn
   Two variants:
   --prev  52×52px  circle  white bg  purple arrow
   --next  84×52px  pill    purple bg white arrow
*/

.carousel-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.carousel-nav__btn svg {
  width: 9px;
  height: 16px;
  position: relative;
  transition: transform var(--transition-fast);
}

/* ── Prev (circle 52×52) ── */
.carousel-nav__btn--prev {
  width: 52px;
  height: 52px;
  background: var(--color-white);
  color: var(--color-purple-brand);
}

.carousel-nav__btn--prev:hover {
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(92, 15, 139, 0.15);
}

.carousel-nav__btn--prev:hover svg,
.carousel-nav__btn--prev:active svg {
  transform: translateX(-4px);
}

/* ── Next (pill 84×52) ── */
.carousel-nav__btn--next {
  width: 84px;
  height: 52px;
  background: var(--color-purple-brand);
  color: var(--color-white);
}

.carousel-nav__btn--next:hover {
  background: var(--color-purple-800);
}

.carousel-nav__btn--next:hover svg,
.carousel-nav__btn--next:active svg {
  transform: translateX(4px);
}

/* Pressed convex — ::before layer */
.carousel-nav__btn--next::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--color-purple-brand);
  transition: background var(--transition-fast);
  z-index: 0;
}

.carousel-nav__btn--next:hover::before,
.carousel-nav__btn--next:active::before {
  background: var(--color-purple-800);
}

.carousel-nav__btn--next:active::before {
  inset: -3px 0;
  clip-path: path('M 26,3 Q 42,-3 58,3 A 26,26 0 0 1 58,55 Q 42,61 26,55 A 26,26 0 0 1 26,3 Z');
}

.carousel-nav__btn--next svg {
  z-index: 1;
}

/* ── Disabled ── */
.carousel-nav__btn:disabled,
.carousel-nav__btn[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.carousel-nav__btn--prev:disabled,
.carousel-nav__btn--prev[aria-disabled="true"] {
  background: var(--color-white);
  opacity: 0.45;
}

.carousel-nav__btn--next:disabled,
.carousel-nav__btn--next[aria-disabled="true"] {
  background: var(--color-bg-lavender);
  color: var(--color-purple-brand);
  opacity: 0.45;
}

.carousel-nav__btn--next:disabled::before,
.carousel-nav__btn--next[aria-disabled="true"]::before {
  background: var(--color-bg-lavender);
}

/* ── Molecule: LangSwitcher ── */

/* LangSwitcher — .lang-switcher */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  position: relative;
}

.lang-switcher::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), background var(--transition-fast);
  z-index: 0;
}

.lang-switcher__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 13px var(--space-xl) 11px 20px;
  background: var(--color-bg-lavender);
  border-radius: var(--radius-pill);
  margin-right: -4px;
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  color: var(--color-purple-brand);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.lang-switcher__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.lang-switcher__arrow {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-bg-lavender);
  border-radius: var(--radius-circle);
  margin-right: -4px;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.lang-switcher__arrow svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 1270px) {
  .lang-switcher__label {
    padding: 10px var(--space-base) 8px var(--space-base);
    font-size: var(--text-body-sm);
  }

  .lang-switcher__arrow {
    padding: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .lang-switcher__label {
    padding: var(--space-md);
    border-radius: var(--radius-circle);
    margin-right: 0;
    font-size: 0;
    gap: 0;
  }

  .lang-switcher__label svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .lang-switcher__arrow {
    display: none;
  }

  .lang-switcher::before {
    display: none;
  }
}

/* Hover States (matches Button atom) — only when NOT hovering inside the dropdown */
.lang-switcher:hover:not(:has(.lang-switcher__dropdown:hover))::before {
  background: var(--color-purple-100);
}

.lang-switcher:hover:not(:has(.lang-switcher__dropdown:hover)) .lang-switcher__label {
  background: transparent;
  transform: translateX(8px);
}

.lang-switcher:hover:not(:has(.lang-switcher__dropdown:hover)) .lang-switcher__arrow {
  background: var(--color-purple-100);
  transform: translateX(-8px);
}

/* Active States — only when NOT clicking inside the dropdown */
.lang-switcher:active:not(:has(.lang-switcher__option:active))::before {
  background: var(--color-purple-100);
  inset: -3px 0;
  transform: none;
  clip-path: path('M 26,3 Q 122,-3 218,3 A 26,26 0 0 1 218,55 Q 122,61 26,55 A 26,26 0 0 1 26,3 Z');
}

.lang-switcher:active:not(:has(.lang-switcher__option:active)) .lang-switcher__label {
  background: transparent;
  transform: translateX(8px);
}

.lang-switcher:active:not(:has(.lang-switcher__option:active)) .lang-switcher__arrow {
  background: var(--color-purple-100);
  transform: translateX(-8px);
}

/* =============================
   Open State
   ============================= */

.lang-switcher__arrow svg {
  transition: transform var(--transition-base);
}

.lang-switcher--open .lang-switcher__label {
  background: var(--color-bg-warm);
}

.lang-switcher--open .lang-switcher__arrow {
  background: var(--color-bg-warm);
}

.lang-switcher--open .lang-switcher__arrow svg {
  transform: rotate(180deg);
}

/* =============================
   Dropdown Panel
   ============================= */

.lang-switcher__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 241px;
  background: var(--color-bg-page);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lang-dropdown);
  padding: var(--space-base);
  z-index: 100;
}

.lang-switcher--open .lang-switcher__dropdown {
  display: block;
}

/* =============================
   Option Items
   ============================= */

.lang-switcher__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  color: var(--color-purple-brand);
  line-height: var(--lh-body);
  white-space: nowrap;
  position: relative;
  transition: padding var(--transition-fast);
  user-select: none;
}

.lang-switcher__option::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  z-index: 0;
  pointer-events: none;
  transition: background var(--transition-fast), inset var(--transition-fast), clip-path var(--transition-fast);
}

.lang-switcher__option-text,
.lang-switcher__option-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.lang-switcher__option-icon {
  width: 20px;
  height: 20px;
}

/* Hover — padding grows → text and arrow move closer */
.lang-switcher__option:hover {
  padding: var(--space-sm) var(--space-base);
}

.lang-switcher__option:hover::before {
  background: var(--color-bg-lavender);
}

/* Active — convex bulge shape */
.lang-switcher__option:active {
  padding: var(--space-sm) var(--space-base);
}

.lang-switcher__option:active::before {
  background: var(--color-bg-lavender);
  inset: -3px 0;
  clip-path: path('M 20,3 Q 104.5,-3 189,3 A 20,20 0 0 1 189,43 Q 104.5,49 20,43 A 20,20 0 0 1 20,3 Z');
}

/* ── Molecule: ProductFilter ── */

/* ProductFilter — .product-filter */

.product-filter {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-circle);
  padding: 4px 8px 4px 4px;
}

.product-filter__tab {
  padding: 12px var(--space-4xl) 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  z-index: 1;
}

.product-filter__tab--active {
  background: var(--color-purple-brand);
  color: var(--color-white);
  z-index: 2;
}

.product-filter__tab:not(.product-filter__tab--active) {
  background: transparent;
  color: var(--color-purple-brand);
}

.product-filter__tab:not(.product-filter__tab--active):hover {
  background: var(--color-bg-lavender-alt);
}

@media (max-width: 768px) {
  .product-filter__tab {
    padding: 10px var(--space-2xl) 8px;
    font-size: var(--text-body-md);
  }
}

/* ── Molecule: CarouselNav ── */

/* CarouselNav — .carousel-nav
   Container that pairs a CarouselBtn--prev and CarouselBtn--next.
   Button styles live in atoms/CarouselBtn/CarouselBtn.css.
*/

.carousel-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ── Organism: AdvantageCard ── */

/* AdvantageCard — .advantage-card */

.advantage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--card-width);
  height: 348px;
  background: var(--color-bg-green);
  border: 1px solid var(--color-bg-green-light);
  border-radius: var(--radius-md);
  padding: 0 var(--space-xl);
  text-align: center;
  position: relative;
}

.advantage-card__icon {
  width: 120px;
  height: 100px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advantage-card__icon svg,
.advantage-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.advantage-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
  width: 260px;
}

.advantage-card__title {
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-purple-dark);
  /* min-height = 2 lines × 24px × 1.35 — keeps desc tops aligned across cards */
  min-height: 65px;
}

.advantage-card__desc {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  color: var(--color-purple-dark);
}

/* Zone 2: 1025px–1328px — gentle fluid scale proportional to card width
   Math: available = 100vw - 48px padding - 48px gaps; card = available / 4
   At 1328px → 308px (full); at 1025px → 232px (min), title hits 18px
   height: auto so the gap naturally compresses; explicit margin-top replaces margin-top:auto */
@media (min-width: 1025px) and (max-width: 1328px) {
  .advantage-card {
    width: clamp(232px, calc((100vw - 96px) / 4), 308px);
    height: auto;
  }

  .advantage-card__icon {
    width: clamp(90px, calc((100vw - 96px) / 4 * 120 / 308), 120px);
    height: clamp(75px, calc((100vw - 96px) / 4 * 100 / 308), 100px);
    margin-top: clamp(38px, calc((100vw - 96px) / 4 * 50 / 308), 50px);
  }

  /* margin-top scales down with card; overrides base margin-top:auto */
  .advantage-card__content {
    width: 100%;
    margin-top: clamp(24px, calc((100vw - 96px) / 4 * 32 / 308), 32px);
    margin-bottom: var(--space-xl);
  }

  /* min-height = 2 lines × font-size × line-height; scales proportionally
     At 1328px: 65px (24px×1.35×2); at 1025px: 49px (18px×1.35×2) */
  .advantage-card__title {
    font-size: clamp(18px, calc((100vw - 96px) / 4 * 24 / 308), 24px);
    min-height: clamp(49px, calc((100vw - 96px) / 4 * 65 / 308), 65px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* Zone 3: 769px–1024px — locked at scaled-down minimum values, horizontal scroll */
@media (min-width: 769px) and (max-width: 1024px) {
  .advantage-card {
    width: 232px;
    flex-shrink: 0;
    height: auto;
    padding: var(--space-xl);
  }

  .advantage-card__icon {
    width: 90px;
    height: 75px;
    margin-top: 38px;
  }

  .advantage-card__content {
    width: 100%;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
  }

  .advantage-card__title {
    font-size: 18px;
    min-height: 49px; /* 18px × 1.35 × 2 lines */
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* Zone 4: ≤768px — same scaled-down size, shrinks on very small screens */
@media (max-width: 768px) {
  .advantage-card {
    width: min(232px, 80vw);
    flex-shrink: 0;
    height: auto;
    padding: var(--space-xl);
  }

  .advantage-card__icon {
    margin-top: var(--space-xl);
    height: 80px;
  }

  .advantage-card__content {
    margin-top: var(--space-xl);
    margin-bottom: 0;
    width: 100%;
  }

  /* --text-heading-xl = 20px on mobile; 2 lines × 20px × 1.35 ≈ 54px */
  .advantage-card__title {
    min-height: 54px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* ── Organism: ProductCard ── */

/* ProductCard — .product-card */

.product-card {
  width: var(--card-width);
  flex-shrink: 0;
  text-align: center;
  padding-top: 120px;   /* clearance for image overflow above card */
  padding-bottom: var(--space-base); /* clearance for flavor tag overflow below card */
}

.product-card__body {
  position: relative;
  background: var(--color-bg-page);
  border-radius: var(--radius-lg);
  padding: 168px var(--space-xl) 40px; /* 168 = image bleed (120) + gap (48≈space-3xl); 40 = Figma measurement */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.product-card__image-wrap {
  position: absolute;
  top: -120px;
  left: 0;
  width: 100%;
  height: 264px;
  pointer-events: none;
  overflow: visible;
}

.product-card__image-wrap img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  object-fit: contain;
}

.product-card__title {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  color: var(--color-purple-brand);
}

.product-card__desc {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  color: var(--color-purple-brand);
  max-width: 252px;
}

/* FlavorTag overflows below the card body */
.product-card .flavor-tag {
  position: absolute;
  bottom: calc(-1 * var(--space-base));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .product-card {
    width: 311px;
    flex-shrink: 0;
    padding-top: 100px; /* clearance for image that overflows 100px above white card */
  }

  .product-card__body {
    padding-top: 144px;  /* 100px bleed + 44px gap to content */
    padding-bottom: 32px;
  }

  .product-card__image-wrap {
    top: -100px;
    height: 224px;
  }
}

/* ── Molecule: CookieBanner ── */

.cookie-banner {
  position: fixed;
  bottom: var(--space-xl);
  left: var(--space-xl);
  right: var(--space-xl);
  max-width: 960px;
  margin: 0 auto;
  background: var(--color-bg-page);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lang-dropdown);
  padding: var(--space-base) var(--space-lg) var(--space-base) var(--space-3xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xl);
  z-index: 999;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
  min-width: 0;
}

.cookie-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-bold);
  color: var(--color-purple-brand);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin: 0;
  white-space: nowrap;
}

.cookie-banner__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  color: var(--color-purple-brand);
  line-height: var(--lh-button);
  margin: 0;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-shrink: 0;
}

.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  padding: 12px var(--space-2xl);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cookie-banner__btn--outline {
  background: var(--color-bg-page);
  border-color: var(--color-purple-brand);
  color: var(--color-purple-brand);
}

.cookie-banner__btn--outline:hover {
  background: var(--color-purple-100);
}

.cookie-banner__btn--filled {
  background: var(--color-purple-brand);
  color: var(--color-bg-page);
}

.cookie-banner__btn--filled:hover {
  background: var(--color-purple-800);
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-base);
    padding: var(--space-base) var(--space-base) var(--space-base) var(--space-xl);
    border-radius: var(--radius-lg);
    bottom: var(--space-base);
    left: var(--space-base);
    right: var(--space-base);
  }

  .cookie-banner__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Molecule: LangDetectModal ── */

.lang-detect-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(48, 13, 66, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-2xl);
}

.lang-detect-modal-overlay[hidden] {
  display: none;
}

.lang-detect-modal {
  position: relative;
  background: var(--color-bg-page);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lang-dropdown);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  max-width: 540px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-base);
}

.lang-detect-modal__close {
  position: absolute;
  top: -26px;
  right: -26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--color-purple-brand);
  background: var(--color-bg-page);
  color: var(--color-purple-brand);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  z-index: 1;
}

.lang-detect-modal__close:hover {
  background: var(--color-purple-100);
}

.lang-detect-modal__close svg {
  width: 20px;
  height: 20px;
}

.lang-detect-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-base);
  text-align: center;
  width: 100%;
}

.lang-detect-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-bold);
  color: var(--color-purple-brand);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin: 0;
}

.lang-detect-modal__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-regular);
  color: var(--color-purple-brand);
  line-height: var(--lh-button);
  margin: 0;
  transition: opacity var(--transition-base);
}

.lang-detect-modal__subtitle strong {
  font-weight: var(--weight-semibold);
}

.lang-detect-modal__list-wrapper {
  display: none;
  width: 100%;
  gap: var(--space-sm);
  height: 200px;
}

.lang-detect-modal__list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-orange) transparent;
}

.lang-detect-modal__list::-webkit-scrollbar {
  width: 4px;
}

.lang-detect-modal__list::-webkit-scrollbar-track {
  background: transparent;
}

.lang-detect-modal__list::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border-radius: 72px;
}

.lang-detect-modal__list-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  color: var(--color-purple-brand);
  line-height: var(--lh-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
  user-select: none;
}

.lang-detect-modal__list-item--active {
  background: var(--color-bg-lavender);
}

.lang-detect-modal__list-item:hover:not(.lang-detect-modal__list-item--active) {
  background: var(--color-bg-lavender-alt);
}

.lang-detect-modal__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.lang-detect-modal__btn {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  padding: 12px var(--space-2xl);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.lang-detect-modal__btn--outline {
  background: var(--color-bg-page);
  border-color: var(--color-purple-brand);
  color: var(--color-purple-brand);
}

.lang-detect-modal__btn--outline:hover {
  background: var(--color-purple-100);
}

.lang-detect-modal__btn--filled {
  background: var(--color-purple-brand);
  color: var(--color-bg-page);
}

.lang-detect-modal__btn--filled:hover {
  background: var(--color-purple-800);
}

.lang-detect-modal__btn--full {
  display: none;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px var(--space-2xl);
}

.lang-detect-modal__btn--full svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.lang-detect-modal--expanded .lang-detect-modal__subtitle {
  display: none;
}

.lang-detect-modal--expanded .lang-detect-modal__list-wrapper {
  display: flex;
}

.lang-detect-modal--expanded .lang-detect-modal__actions {
  display: none;
}

.lang-detect-modal--expanded .lang-detect-modal__btn--full {
  display: flex;
}

@media (max-width: 768px) {
  .lang-detect-modal-overlay {
    padding: var(--space-2xl) var(--space-base) var(--space-base);
    align-items: flex-end;
  }

  .lang-detect-modal {
    padding: var(--space-xl) var(--space-base) var(--space-base);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);
    max-width: 100%;
  }

  .lang-detect-modal__close {
    top: -20px;
    right: var(--space-base);
  }

  .lang-detect-modal__actions {
    flex-direction: column;
  }

  .lang-detect-modal__btn {
    width: 100%;
    text-align: center;
  }
}