/*
Theme Name: flavor
Theme URI: https://ecom2way.com/flavor
Author: ecom2way
Author URI: https://ecom2way.com
Description: Instagram Reels-style WooCommerce product catalog theme.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flavor
Tags: woocommerce, e-commerce, full-width-template, custom-header, custom-logo, featured-images
WooCommerce tested up to: 8.8
*/

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --f-bg: #0a0a0a;
  --f-surface: #111111;
  --f-surface-2: #1a1a1a;
  --f-text: #f8f8f6;
  --f-text-muted: rgba(248,248,246,0.72);
  --f-text-dim: rgba(248,248,246,0.48);
  --f-accent: #e63946; /* Bauhaus red */
  --f-accent-glow: rgba(230,57,70,0.35);
  --f-blue: #1d4ed8;   /* Bauhaus blue */
  --f-yellow: #f2c94c; /* Bauhaus yellow */
  --f-green: #16a34a;
  --f-radius: 10px;
  --f-radius-sm: 6px;
  color-scheme: dark;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  height: 100%;
  height: -webkit-fill-available;
}
body {
  font-family: 'Avenir Next', 'Futura', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--f-bg);
  color: var(--f-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100%;
  height: -webkit-fill-available;
  position: fixed;
  width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal;
}

/* ============================================
   LAYOUT SHELL
   ============================================ */
.flavor-app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
}

/* ============================================
   HEADER (transparent overlay)
   ============================================ */
.flavor-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 52px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(rgba(0,0,0,0.65) 0%, transparent 100%);
  pointer-events: none;
}
.flavor-header > * { pointer-events: auto; }
.flavor-header__logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.flavor-header__actions { display: flex; align-items: center; gap: 6px; }
.flavor-header__btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s;
  position: relative;
}
.flavor-header__btn:hover { background: rgba(0,0,0,0.5); }
.flavor-header__btn svg { width: 20px; height: 20px; }
.flavor-header__cart-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--f-accent); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ============================================
   REELS CONTAINER
   ============================================ */
.flavor-reels {
  flex: 1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
}
.flavor-reels::-webkit-scrollbar { display: none; }

/* Pull to refresh */
.flavor-ptr {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  height: 0; overflow: hidden;
  transition: height 0.25s;
  pointer-events: none;
}
.flavor-ptr__spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--f-accent);
  border-radius: 50%;
}
.flavor-ptr--pulling .flavor-ptr__spinner { transition: transform 0.1s; }
.flavor-ptr--refreshing .flavor-ptr__spinner { animation: f-spin 0.6s linear infinite; }
.flavor-ptr--visible { height: 56px; }

/* ============================================
   SINGLE REEL CARD
   Truly full-screen like Instagram Reels.
   Nav bar is transparent overlay on top.
   ============================================ */
.flavor-reel {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

/* --- Image/Video Media --- */
.flavor-reel__media {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.flavor-reel__media::-webkit-scrollbar { display: none; }

.flavor-reel__media-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
}
.flavor-reel__media-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top center;
}
.flavor-reel__media-slide video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #000;
}

/* Gradient overlay for text readability */
.flavor-reel__overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 0%,
    transparent 15%,
    transparent 45%,
    rgba(0,0,0,0.7) 75%,
    rgba(0,0,0,0.92) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Slide counter pips */
.flavor-reel__slide-counter {
  position: static;
  display: flex; gap: 4px;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.flavor-reel__slide-counter[data-total="1"] { display: none; }
.flavor-reel__slide-pip {
  width: 6px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.35);
  transition: all 0.3s;
}
.flavor-reel__slide-pip--active { background: #fff; width: 16px; }

/* Video mute toggle */
.flavor-reel__mute {
  position: absolute;
  top: 62px;
  right: 12px;
  z-index: 12;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.flavor-reel__mute svg { width: 14px; height: 14px; }

/* --- Right action buttons (like Instagram) --- */
.flavor-reel__actions {
  position: absolute;
  right: 10px;
  bottom: 86px;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.flavor-reel__action {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
}
.flavor-reel__action-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255,255,255,0.22);
}
.flavor-reel__action-btn:hover { background: rgba(255,255,255,0.26); transform: scale(1.06); }
.flavor-reel__action-btn:active { transform: scale(0.9); }
.flavor-reel__action-btn svg { width: 20px; height: 20px; transition: all 0.25s; }
.flavor-reel__action-label {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.flavor-reel__action-btn--cart {
  background: var(--f-accent); border-color: #ffffff;
  box-shadow: 0 3px 16px var(--f-accent-glow);
}
.flavor-reel__action-btn--cart:hover { background: #ef4e59; border-color: #ffffff; }
.flavor-reel__action-btn--liked { background: rgba(29,78,216,0.35); border-color: var(--f-blue); }
.flavor-reel__action-btn--liked svg { fill: var(--f-accent); color: var(--f-accent); }
.flavor-reel__action-btn--added {
  background: var(--f-green); border-color: #ffffff;
  box-shadow: 0 3px 16px rgba(0,200,83,0.35);
}

/* --- Product info (overlaid at bottom, Instagram style) ---
   Hardcoded pixel fallback THEN calc+env override. If calc
   fails in any browser the 76px fallback still clears the nav.
   -------------------------------------------------------- */
.flavor-reel__info {
  position: absolute;
  bottom: 0; left: 0;
  right: 64px;
  z-index: 10;
  padding: 0 14px;
  padding-bottom: 76px;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.flavor-reel__category {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--f-accent);
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.flavor-reel__name {
  font-size: 16px; font-weight: 700; line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.flavor-reel__name a { color: inherit; }
.flavor-reel__desc {
  font-size: 13px; color: var(--f-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.flavor-reel__desc--expanded {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 6px;
}
.flavor-reel__more {
  color: var(--f-text-muted); font-weight: 600;
  text-decoration: underline;
  background: none;
  border: 0;
  margin-left: 4px;
  padding: 0;
}
.flavor-reel__price { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.flavor-reel__price-current { font-size: 18px; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.flavor-reel__price-original { font-size: 12px; color: var(--f-text-muted); text-decoration: line-through; }
.flavor-reel__price-badge {
  font-size: 10px; font-weight: 700;
  background: var(--f-green); color: #fff;
  padding: 1px 6px; border-radius: 4px;
}
.flavor-reel__info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.flavor-reel__info-bar > .flavor-reel__price {
  flex-shrink: 0;
}
.flavor-reel__info-btn {
  flex-shrink: 0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #111;
  background: var(--f-yellow);
  border: 2px solid #111;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.flavor-reel__info-btn:hover {
  background: #f6d877;
}

/* Double-tap heart overlay */
.flavor-reel__heart-overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  z-index: 20; pointer-events: none;
  opacity: 0;
}
.flavor-reel__heart-overlay--show {
  animation: f-big-heart 0.8s ease-out forwards;
}

/* ============================================
   BOTTOM NAVIGATION
   Semi-transparent overlay (like Instagram Reels tab).
   Sits ON TOP of the reel content.
   ============================================ */
.flavor-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: 50px;
  height: calc(50px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 0px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.82) 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: space-around;
}
.flavor-nav__item {
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  padding: 6px 14px;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
  position: relative;
}
.flavor-nav__item--active { color: #fff; }
.flavor-nav__item svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.flavor-nav__item > span:last-child {
  font-size: 9px; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.flavor-nav__badge {
  position: absolute; top: 0; right: 6px;
  background: var(--f-accent); color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ============================================
   FILTER OVERLAY
   ============================================ */
.flavor-filter {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
  visibility: hidden; opacity: 0; transition: all 0.3s;
}
.flavor-filter--open { visibility: visible; opacity: 1; }
.flavor-filter__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.flavor-filter__panel {
  position: relative; background: var(--f-surface);
  border-radius: 14px 14px 0 0; max-height: 75vh; overflow-y: auto; padding: 20px;
  border: 2px solid rgba(255,255,255,0.16);
  border-bottom: 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.flavor-filter--open .flavor-filter__panel { transform: translateY(0); }
.flavor-filter__handle { width: 36px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 0 auto 16px; }
.flavor-filter__title { font-size: 18px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.flavor-filter__clear { font-size: 14px; color: var(--f-accent); font-weight: 600; }
.flavor-filter__group { margin-bottom: 24px; }
.flavor-filter__group-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--f-text-muted); margin-bottom: 12px; }
.flavor-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flavor-filter__chip {
  padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.2s; cursor: pointer;
}
.flavor-filter__chip:hover, .flavor-filter__chip--active { background: var(--f-accent); border-color: var(--f-accent); color: #fff; }
.flavor-filter__price-range { display: flex; align-items: center; gap: 12px; }
.flavor-filter__price-input {
  flex: 1; padding: 10px 14px; border-radius: var(--f-radius-sm);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 14px; outline: none;
}
.flavor-filter__price-input:focus { border-color: var(--f-accent); }
.flavor-filter__apply {
  width: 100%; padding: 14px; border-radius: var(--f-radius);
  background: var(--f-accent); color: #fff; font-size: 16px; font-weight: 700;
  margin-top: 8px; transition: background 0.2s;
}
.flavor-filter__apply:hover { background: #ff5270; }

/* ============================================
   INFO MODAL
   ============================================ */
.flavor-info {
  position: fixed; inset: 0; z-index: 220;
  visibility: hidden; opacity: 0; transition: opacity 0.3s;
}
.flavor-info--open { visibility: visible; opacity: 1; }
.flavor-info__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.flavor-info__panel {
  position: absolute;
  left: 12px; right: 12px; bottom: 84px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  border-radius: 12px;
  padding: 16px;
  color: #fff;
  background: rgba(10,10,10,0.62);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  transform: translateY(20px);
  transition: transform 0.3s;
}
.flavor-info--open .flavor-info__panel { transform: translateY(0); }
.flavor-info__handle {
  width: 34px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.34);
  margin: 0 auto 10px;
}
.flavor-info__close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
}
.flavor-info__close svg { width: 16px; height: 16px; }
.flavor-info__category {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.9px; color: #ff7f95; margin-bottom: 6px;
  padding-right: 34px;
}
.flavor-info__name {
  font-size: 20px; line-height: 1.3; font-weight: 800;
  margin: 0 0 8px 0; padding-right: 34px;
}
.flavor-info__price {
  font-size: 18px; font-weight: 700;
  margin-bottom: 8px;
}
.flavor-info__desc {
  font-size: 14px; line-height: 1.6;
  color: rgba(255,255,255,0.92);
  max-height: 32vh; overflow-y: auto;
  margin: 0 0 12px 0;
}
.flavor-info__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.24);
}

/* ============================================
   OPTIONS MODAL (variable products)
   ============================================ */
.flavor-options {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
  visibility: hidden; opacity: 0; transition: all 0.3s;
}
.flavor-options--open { visibility: visible; opacity: 1; }
.flavor-options__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.flavor-options__panel {
  position: relative; background: var(--f-surface);
  border-radius: 14px 14px 0 0; max-height: 70vh; overflow-y: auto; padding: 20px;
  border: 2px solid rgba(255,255,255,0.16);
  border-bottom: 0;
  padding-bottom: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.flavor-options--open .flavor-options__panel { transform: translateY(0); }
.flavor-options__handle { width: 36px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 0 auto 16px; }
.flavor-options__header {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px;
}
.flavor-options__thumb {
  width: 72px; height: 96px; border-radius: var(--f-radius-sm); overflow: hidden;
  background: var(--f-surface-2); flex-shrink: 0;
}
.flavor-options__thumb img { width: 100%; height: 100%; object-fit: cover; }
.flavor-options__meta { flex: 1; min-width: 0; }
.flavor-options__name { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flavor-options__price { font-size: 17px; font-weight: 800; }
.flavor-options__price ins { text-decoration: none; }
.flavor-options__price del { font-size: 13px; color: var(--f-text-muted); font-weight: 400; }
.flavor-options__close {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
}
.flavor-options__close svg { width: 18px; height: 18px; }
.flavor-options__group { margin-bottom: 18px; }
.flavor-options__group-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--f-text-muted); margin-bottom: 10px;
}
.flavor-options__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flavor-options__chip {
  padding: 10px 18px; border-radius: 20px; font-size: 14px; font-weight: 500;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.12);
  transition: all 0.2s; cursor: pointer; color: var(--f-text-muted);
}
.flavor-options__chip:hover { border-color: rgba(255,255,255,0.3); color: var(--f-text); }
.flavor-options__chip--active {
  background: rgba(255,59,92,0.15); border-color: var(--f-accent); color: #fff; font-weight: 600;
}
.flavor-options__chip--disabled {
  opacity: 0.3; pointer-events: none; text-decoration: line-through;
}
.flavor-options__stock {
  font-size: 12px; margin-top: 6px; font-weight: 600;
}
.flavor-options__stock--out { color: var(--f-accent); }
.flavor-options__stock--in { color: var(--f-green); }
.flavor-options__add {
  width: 100%; padding: 16px; border-radius: var(--f-radius);
  background: var(--f-accent); color: #fff; font-size: 16px; font-weight: 700;
  margin-top: 8px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.flavor-options__add:hover { background: #ff5270; }
.flavor-options__add:disabled { opacity: 0.4; pointer-events: none; }

/* ============================================
   TOAST
   ============================================ */
.flavor-toast {
  position: fixed;
  bottom: 70px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%) translateY(100px);
  z-index: 300;
  background: var(--f-surface); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--f-radius); padding: 12px 20px;
  font-size: 14px; font-weight: 600;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.flavor-toast--show { transform: translateX(-50%) translateY(0); opacity: 1; }
.flavor-toast--success { border-color: var(--f-green); }
.flavor-toast--error { border-color: var(--f-accent); }

/* ============================================
   SHARE SHEET
   ============================================ */
.flavor-share {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
  visibility: hidden; opacity: 0; transition: all 0.3s;
}
.flavor-share--open { visibility: visible; opacity: 1; }
.flavor-share__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.flavor-share__panel {
  position: relative; background: var(--f-surface);
  border-radius: 20px 20px 0 0; padding: 20px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.flavor-share--open .flavor-share__panel { transform: translateY(0); }
.flavor-share__handle { width: 36px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 0 auto 16px; }
.flavor-share__title { font-size: 16px; font-weight: 700; margin-bottom: 20px; text-align: center; }
.flavor-share__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.flavor-share__option {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 0; border-radius: var(--f-radius); transition: background 0.2s;
}
.flavor-share__option:hover { background: rgba(255,255,255,0.05); }
.flavor-share__option-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.flavor-share__option-icon--copy { background: rgba(255,255,255,0.1); }
.flavor-share__option-icon--whatsapp { background: #25d366; }
.flavor-share__option-icon--twitter { background: #1da1f2; }
.flavor-share__option-icon--facebook { background: #1877f2; }
.flavor-share__option-icon svg { width: 22px; height: 22px; }
.flavor-share__option-label { font-size: 11px; color: var(--f-text-muted); }

/* ============================================
   SPINNER / LOADING
   ============================================ */
.flavor-spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff;
  border-radius: 50%; animation: f-spin 0.6s linear infinite;
}
@keyframes f-spin { to { transform: rotate(360deg); } }
.flavor-loading { display: flex; align-items: center; justify-content: center; height: 100dvh; height: 100vh; scroll-snap-align: start; }

/* ============================================
   DESKTOP LAYOUT
   Centers the reels in a phone-like column.
   Nav and header constrained to same width.
   ============================================ */
@media (min-width: 769px) {
  .flavor-reels {
    max-width: 420px;
    margin: 0 auto;
  }
  .flavor-reel {
    width: 420px;
  }
  .flavor-reel__media {
    width: 420px;
  }
  .flavor-header {
    max-width: 420px; left: 50%; transform: translateX(-50%);
    right: auto; width: 420px;
  }
  .flavor-nav {
    max-width: 420px; left: 50%; transform: translateX(-50%);
    right: auto; width: 420px;
    border-radius: 16px 16px 0 0;
  }
  .flavor-filter__panel,
  .flavor-info__panel,
  .flavor-share__panel,
  .flavor-options__panel {
    max-width: 420px; margin: 0 auto;
  }
  .flavor-toast { max-width: 380px; }
}

/* ============================================
   WOOCOMMERCE PAGE MODE
   (Cart, Checkout, Account, Single Product, Shop)
   ============================================ */
.flavor-page-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  background: var(--f-bg);
  padding-top: 52px;
  padding-top: calc(52px + env(safe-area-inset-top, 0px));
  padding-bottom: 74px;
  padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}
body.flavor-page-mode { overflow-y: auto; position: static; height: auto; }
body.flavor-page-mode .flavor-nav {
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.flavor-page-content { max-width: 680px; margin: 0 auto; padding: 20px 16px; }
.flavor-page-content h1, .flavor-page-content h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
.flavor-page-content h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.flavor-page-content p { margin-bottom: 12px; }

.flavor-page-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 52px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.flavor-page-header__back { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.flavor-page-header__back svg { width: 24px; height: 24px; }
.flavor-page-header__title { font-size: 17px; font-weight: 700; }

/* Form Overrides */
.flavor-page-content input[type="text"],
.flavor-page-content input[type="email"],
.flavor-page-content input[type="tel"],
.flavor-page-content input[type="number"],
.flavor-page-content input[type="password"],
.flavor-page-content input[type="url"],
.flavor-page-content textarea,
.flavor-page-content select {
  width: 100%; padding: 12px 16px; border-radius: var(--f-radius-sm);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 15px; outline: none;
  transition: border-color 0.2s; margin-bottom: 4px;
  -webkit-appearance: none;
}
.flavor-page-content input:focus,
.flavor-page-content textarea:focus,
.flavor-page-content select:focus { border-color: var(--f-accent); }
.flavor-page-content label { display: block; font-size: 13px; font-weight: 600; color: var(--f-text-muted); margin-bottom: 6px; }

.flavor-page-content .button,
.flavor-page-content button[type="submit"],
.flavor-page-content input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--f-radius);
  background: var(--f-accent); color: #fff; font-size: 15px; font-weight: 700;
  border: none; cursor: pointer; transition: all 0.2s; width: 100%;
}
.flavor-page-content .button:hover,
.flavor-page-content button[type="submit"]:hover { background: #ff5270; }

/* Cart */
.flavor-page-content .woocommerce-cart-form__contents { width: 100%; border-collapse: collapse; }
.flavor-page-content .woocommerce-cart-form__contents th { display: none; }
.flavor-page-content .woocommerce-cart-form__contents td { display: block; padding: 8px 0; border: none; }
.flavor-page-content .cart_item {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 12px; align-items: center; padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.flavor-page-content .product-thumbnail img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--f-radius-sm);
}
.flavor-page-content .cart-subtotal td,
.flavor-page-content .order-total td { font-size: 18px; font-weight: 700; }

/* WooCommerce Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  padding: 14px 16px; border-radius: var(--f-radius-sm); margin-bottom: 16px; font-size: 14px;
}
.woocommerce-message { background: rgba(0,200,83,0.1); border: 1px solid rgba(0,200,83,0.3); }
.woocommerce-info { background: rgba(33,150,243,0.1); border: 1px solid rgba(33,150,243,0.3); }
.woocommerce-error { background: rgba(255,59,92,0.1); border: 1px solid rgba(255,59,92,0.3); }
.woocommerce-error li { margin-bottom: 4px; }

/* ============================================
   MY ACCOUNT
   ============================================ */
.woocommerce-MyAccount-navigation { margin-bottom: 24px; }
.woocommerce-MyAccount-navigation ul {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--f-surface); border-radius: var(--f-radius); overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li a {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; font-size: 15px; font-weight: 500;
  color: var(--f-text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.04); transition: all 0.2s;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: rgba(255,255,255,0.04); color: var(--f-text);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: rgba(255,59,92,0.08); color: var(--f-accent);
  font-weight: 600; border-left: 3px solid var(--f-accent);
}
.woocommerce-MyAccount-navigation ul li:last-child a { border-bottom: none; }
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--f-accent); }
.woocommerce-MyAccount-content {
  background: var(--f-surface); border-radius: var(--f-radius); padding: 24px 20px;
}
.woocommerce-MyAccount-content p { color: var(--f-text-muted); font-size: 14px; line-height: 1.7; }
.woocommerce-MyAccount-content a { color: var(--f-accent); font-weight: 600; }
.woocommerce-MyAccount-content a:hover { text-decoration: underline; }
.woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-MyAccount-content table th {
  text-align: left; padding: 12px 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--f-text-dim); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.woocommerce-MyAccount-content table td {
  padding: 14px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--f-text-muted);
}
.woocommerce-MyAccount-content table .button {
  padding: 8px 14px; font-size: 12px; width: auto; border-radius: var(--f-radius-sm);
}
.woocommerce-MyAccount-content .woocommerce-Address {
  background: var(--f-surface-2); border-radius: var(--f-radius-sm);
  padding: 16px; margin-bottom: 16px;
}
.woocommerce-MyAccount-content .woocommerce-Address header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.woocommerce-MyAccount-content .woocommerce-Address header h3 { font-size: 15px; margin-bottom: 0; }
.woocommerce-MyAccount-content .col-1,
.woocommerce-MyAccount-content .col-2 { margin-bottom: 16px; }
.woocommerce-form-login, .woocommerce-form-register {
  background: var(--f-surface); border-radius: var(--f-radius);
  padding: 24px 20px; margin-bottom: 20px;
}
.woocommerce-form-login h2, .woocommerce-form-register h2 { font-size: 20px; margin-bottom: 16px; }
.woocommerce-form-row { margin-bottom: 16px; }
.woocommerce-form-row label { margin-bottom: 6px; }
.woocommerce-form__label-for-checkbox {
  display: flex !important; align-items: center; gap: 8px;
  font-size: 14px; color: var(--f-text-muted);
}
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--f-accent);
}
.woocommerce-LostPassword { margin-top: 12px; }
.woocommerce-LostPassword a { color: var(--f-accent); font-size: 13px; }

/* ============================================
   BAUHAUS WOOCOMMERCE PAGE REFINEMENTS
   (Cart / Checkout / My Account)
   ============================================ */
.flavor-page-content {
  max-width: 760px;
}

.flavor-page-content h1,
.flavor-page-content h2 {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 800;
}

.flavor-page-content .woocommerce {
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  padding: 18px;
}

.flavor-page-content .woocommerce a {
  text-underline-offset: 3px;
}

/* Cart table and totals */
.flavor-page-content .shop_table {
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  overflow: hidden;
}

.flavor-page-content .shop_table th {
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.flavor-page-content .cart_totals,
.flavor-page-content .wc-proceed-to-checkout,
.flavor-page-content .woocommerce-checkout-review-order {
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
  background: rgba(255,255,255,0.02);
}

/* Checkout form sections */
.flavor-page-content .woocommerce-billing-fields,
.flavor-page-content .woocommerce-shipping-fields,
.flavor-page-content .woocommerce-additional-fields,
.flavor-page-content #order_review_heading {
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.02);
}

.flavor-page-content .woocommerce-billing-fields h3,
.flavor-page-content .woocommerce-shipping-fields h3,
.flavor-page-content .woocommerce-additional-fields h3,
.flavor-page-content #order_review_heading {
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* My-account nav and content */
.woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-content {
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 12px;
}

.woocommerce-MyAccount-navigation ul li a {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  border-left: 4px solid var(--f-yellow);
  background: rgba(242,201,76,0.12);
  color: #f8f8f6;
}

/* Empty cart: clean, no listing */
.flavor-page-content .cart-empty {
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}

.flavor-page-content .return-to-shop {
  margin-top: 8px;
}

/* ============================================
   SINGLE PRODUCT PAGE
   ============================================ */
.flavor-single-product { padding-bottom: 80px; }
.flavor-single-product__gallery {
  width: 100%; aspect-ratio: 3/4;
  overflow-x: scroll; scroll-snap-type: x mandatory;
  display: flex; scrollbar-width: none; position: relative;
}
.flavor-single-product__gallery::-webkit-scrollbar { display: none; }
.flavor-single-product__gallery-slide {
  flex: 0 0 100%; scroll-snap-align: start;
}
.flavor-single-product__gallery-slide img,
.flavor-single-product__gallery-slide video {
  display: block; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
.flavor-single-product__body { padding: 20px 16px; }
.flavor-single-product__name { font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.flavor-single-product__price { font-size: 24px; font-weight: 800; margin-bottom: 16px; }
.flavor-single-product__price del { font-size: 16px; color: var(--f-text-muted); font-weight: 400; }
.flavor-single-product__price ins { text-decoration: none; }
.flavor-single-product__desc { font-size: 15px; color: var(--f-text-muted); line-height: 1.7; margin-bottom: 24px; }
.flavor-single-product__add-to-cart {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  padding-bottom: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 50; display: flex; align-items: center; gap: 12px;
}
.flavor-single-product__add-to-cart .single_add_to_cart_button {
  flex: 1; padding: 16px; border-radius: var(--f-radius);
  background: var(--f-accent); color: #fff; font-size: 16px; font-weight: 700; border: none; cursor: pointer;
}
.flavor-single-product__add-to-cart .quantity input {
  width: 60px; padding: 12px; text-align: center;
  border-radius: var(--f-radius-sm);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 16px;
}
.flavor-single-product__meta { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.flavor-single-product__meta-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.flavor-single-product__meta-label { color: var(--f-text-muted); }

/* ============================================
   SCROLL SENTINEL (triggers infinite scroll)
   ============================================ */
.flavor-scroll-sentinel {
  height: 1px;
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
}

/* Offloaded cards keep their height while media is released */
.flavor-reel[data-media="idle"] {
  contain: paint layout;
}

/* ============================================
   SEO HIDDEN PRODUCT LIST (visible to crawlers)
   ============================================ */
.flavor-seo-products {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes f-heart-pop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.flavor-reel__action-btn--heart-anim { animation: f-heart-pop 0.35s ease-out; }
@keyframes f-cart-bounce { 0%{transform:scale(1)} 30%{transform:scale(0.85)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
.flavor-reel__action-btn--cart-anim { animation: f-cart-bounce 0.4s ease-out; }
@keyframes f-big-heart {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  15% { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  30% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  80% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.1); opacity: 0; }
}