/* ===================================================================
   iCookMagic -- Design Tokens (v1)
   ===================================================================
   The single source of truth for the entire site.
   Load order: tokens.css -> base.css -> components -> page styles
   Location:   /assets/css/tokens.css
   =================================================================== */

:root {

  /* ---- 1. COLOR ---- */

  /* Brand */
  --color-magenta:        #FF3D7F;
  --color-magenta-dark:   #D9266A;
  --color-magenta-soft:   #FF8FB3;
  --color-magenta-tint:   #FFE5EE;

  --color-neon:           #39FF14;
  --color-neon-dark:      #2BD60D;

  --color-black:          #000000;
  --color-white:          #FFFFFF;

  /* Neutrals */
  --color-ink-900:        #0A0A0A;
  --color-ink-700:        #2A2A2A;
  --color-ink-500:        #6B6B6B;
  --color-ink-300:        #B8B8B8;
  --color-ink-100:        #EDEDED;
  --color-ink-50:         #F7F7F7;

  /* Alpha */
  --color-white-90:       rgba(255,255,255,.90);
  --color-white-70:       rgba(255,255,255,.70);
  --color-white-50:       rgba(255,255,255,.50);
  --color-white-15:       rgba(255,255,255,.15);
  --color-white-08:       rgba(255,255,255,.08);

  --color-black-90:       rgba(0,0,0,.90);
  --color-black-60:       rgba(0,0,0,.60);
  --color-black-30:       rgba(0,0,0,.30);
  --color-black-10:       rgba(0,0,0,.10);

  /* Semantic */
  --color-success:        #10B981;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           #3B82F6;


  /* ---- 2. TYPOGRAPHY ---- */

  --font-display:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:      'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --text-xs:        12px;
  --text-sm:        14px;
  --text-base:      16px;
  --text-lg:        20px;
  --text-xl:        24px;
  --text-2xl:       32px;
  --text-3xl:       44px;
  --text-4xl:       60px;
  --text-5xl:       80px;

  --leading-tight:    1.05;
  --leading-snug:     1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;


  /* ---- 3. SPACING (4px grid) ---- */

  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;


  /* ---- 4. RADIUS ---- */

  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-full:   9999px;


  /* ---- 5. SHADOWS ---- */

  --shadow-sm:   0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md:   0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 12px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:   0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08);

  --shadow-offset-sm:       4px 4px 0 var(--color-black);
  --shadow-offset-md:       8px 8px 0 var(--color-black);
  --shadow-offset-lg:       12px 12px 0 var(--color-black);
  --shadow-offset-magenta:  8px 8px 0 var(--color-magenta);
  --shadow-offset-neon:     8px 8px 0 var(--color-neon);

  --shadow-glow-magenta:  0 6px 18px rgba(255,61,127,.4);
  --shadow-glow-neon:     0 6px 18px rgba(57,255,20,.4);


  /* ---- 6. BORDERS ---- */

  --border-thin:    1px;
  --border-default: 2px;
  --border-thick:   3px;

  --border-color-default:  var(--color-black);
  --border-color-subtle:   var(--color-ink-100);
  --border-color-dark:     var(--color-white-15);


  /* ---- 7. MOTION ---- */

  --duration-instant:  100ms;
  --duration-fast:     180ms;
  --duration-base:     240ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ---- 8. LAYOUT ---- */

  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;
  --container-2xl:   1440px;

  --container-pad:        28px;
  --container-pad-mobile: 18px;


  /* ---- 9. Z-INDEX ---- */

  --z-base:         1;
  --z-raised:       10;
  --z-sticky:       100;
  --z-header:       200;
  --z-drawer:       300;
  --z-modal:        1000;
  --z-toast:        2000;
  --z-tooltip:      3000;

}
/* ===================================================================
   iCookMagic -- Base Styles (v1)
   ===================================================================
   Global defaults for raw HTML elements. Built on tokens.css.
   Load order: tokens.css -> base.css -> components -> page styles
   Location:   /assets/css/base.css
   =================================================================== */


/* ---- 1. RESET ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: var(--leading-normal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink-900);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- 2. TYPOGRAPHY ---- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h5 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-base); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--color-magenta);
  font-weight: inherit;
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-900);
  text-wrap: pretty;
}

.lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-ink-700); }
small { font-size: var(--text-sm); color: var(--color-ink-500); }
strong, b { font-weight: var(--weight-bold); color: inherit; }
em, i { font-style: italic; }

::selection { background: var(--color-neon); color: var(--color-black); }


/* ---- 3. LINKS ---- */

a {
  color: var(--color-magenta);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--color-magenta-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
a.link-plain,
a.link-plain:hover { color: inherit; text-decoration: none; }


/* ---- 4. FORM ELEMENTS ---- */

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}
button:disabled { cursor: not-allowed; opacity: 0.5; }

input,
textarea,
select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-ink-900);
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-ink-100);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
input:hover, textarea:hover, select:hover { border-color: var(--color-ink-300); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 3px rgba(255, 61, 127, 0.15);
}
input::placeholder, textarea::placeholder { color: var(--color-ink-300); }
textarea { resize: vertical; min-height: 120px; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-700);
  margin-bottom: var(--space-2);
}
fieldset { border: none; }


/* ---- 5. LISTS ---- */

ul, ol { padding-left: var(--space-6); }
li + li { margin-top: var(--space-2); }


/* ---- 6. CODE & PRE ---- */

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--color-ink-50);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-magenta-dark);
}
pre {
  background: var(--color-ink-50);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}
pre code { background: none; padding: 0; color: var(--color-ink-900); }


/* ---- 7. TABLES ---- */

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-thin) solid var(--color-ink-100);
}
th {
  font-weight: var(--weight-semibold);
  color: var(--color-ink-700);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}


/* ---- 8. QUOTES & RULES ---- */

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink-900);
  border-left: var(--border-thick) solid var(--color-magenta);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}
hr {
  border: none;
  height: var(--border-thin);
  background: var(--color-ink-100);
  margin: var(--space-12) 0;
}


/* ---- 9. ACCESSIBILITY UTILITIES ---- */

.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;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  z-index: var(--z-tooltip);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: var(--color-white); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }


/* ---- 10. LAYOUT PRIMITIVES ---- */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-wide { max-width: var(--container-2xl); }
.container-narrow { max-width: var(--container-md); }

@media (max-width: 768px) {
  .container,
  .container-wide,
  .container-narrow { padding-inline: var(--container-pad-mobile); }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.stack-xl > * + * { margin-top: var(--space-12); }

.section { padding-block: var(--space-16); }
.section-sm { padding-block: var(--space-10); }
.section-lg { padding-block: var(--space-20); }

@media (max-width: 768px) {
  .section    { padding-block: var(--space-12); }
  .section-sm { padding-block: var(--space-8); }
  .section-lg { padding-block: var(--space-16); }
}


/* ---- 11. RESPONSIVE TYPE SCALING ---- */

@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }
  .lead { font-size: var(--text-base); }
}
@media (max-width: 480px) {
  h1 { font-size: var(--text-2xl); }
}


/* ---- 12. PRINT STYLES ---- */

@media print {
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
  header, footer, nav, .no-print { display: none !important; }
}/* ===================================================================
   iCookMagic -- Header Component Styles (v6 production)
   ===================================================================
   Location: /assets/css/header.css
   Depends:  /assets/css/tokens.css (load BEFORE this)
   Used by:  /components/header.php

   Architecture:
     Row 1 (34px, black)    : announcement (L) + 4 icons (R)
     Row 2 (54px, black)    : logo + search + nav + CTAs
     Row 3 (40px, pink)     : animated trust ticker
     Mobile bottom tab bar  : Shop / Recipes / Planner / Partners / More
   =================================================================== */


/* --- ROW 1: ANNOUNCEMENT + ICONS --- */
.icm-row1 {
  background: var(--color-black);
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: calc(var(--z-header) + 2);
}

.icm-ann {
  font-size: 11.5px;
  color: var(--color-white-70);
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icm-ann strong { color: var(--color-magenta-soft); font-weight: var(--weight-bold); }
.icm-ann em { color: var(--color-neon); font-style: normal; font-weight: var(--weight-bold); }
.icm-ann .sep { display: inline-block; margin: 0 8px; opacity: 0.35; }

.icm-icons-r1 {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}


/* --- ICON BUTTONS --- */
.icm-icon-btn {
  background: transparent;
  border: none;
  color: var(--color-white-70);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  text-decoration: none;
  font-size: 13px;
  transition: var(--duration-fast) var(--ease-out);
  position: relative;
}
.icm-icon-btn:hover {
  background: var(--color-white-08);
  color: var(--color-white);
  transform: translateY(-1px);
  text-decoration: none;
}
.icm-icon-btn:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

.icm-cart-count {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-neon);
  color: var(--color-black);
  font-size: 8px;
  font-weight: var(--weight-black);
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  display: none;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-black);
  line-height: 1;
}
.icm-cart-count.show { display: flex; }

.icm-lang-btn {
  width: auto;
  padding: 0 8px;
  border-radius: var(--radius-full);
  gap: 3px;
  font-size: 12px;
}
.icm-lang-code {
  font-size: 10px;
  font-weight: var(--weight-black);
  letter-spacing: 0.04em;
  color: var(--color-neon);
  text-transform: uppercase;
}

.icm-user-initials {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  border: 1.5px solid var(--color-white);
  line-height: 1;
}


/* --- ROW 2: MAIN BAR --- */
.icm-row2 {
  background: var(--color-black);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  height: 54px;
  border-top: 1px solid var(--color-white-08);
  position: sticky;
  top: 34px;
  z-index: calc(var(--z-header) + 1);
}

.icm-logo {
  font-family: var(--font-display);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  letter-spacing: -0.4px;
  white-space: nowrap;
  line-height: 1;
  font-size: 22px;
  transition: transform var(--duration-base) var(--ease-out);
}
.icm-logo:hover {
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--color-white);
}
.icm-logo em {
  color: var(--color-magenta);
  font-style: italic;
  font-weight: var(--weight-semibold);
}


/* Search */
.icm-search {
  flex: 1;
  max-width: 280px;
  position: relative;
}
.icm-search input {
  width: 100%;
  padding: 6px 14px 6px 32px;
  border: 1px solid var(--color-white-15);
  border-radius: var(--radius-full);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  outline: none;
  font-family: inherit;
  height: 30px;
  transition: var(--duration-fast) var(--ease-out);
}
.icm-search input::placeholder { color: var(--color-white-50); }
.icm-search input:hover { background: rgba(255, 255, 255, 0.09); }
.icm-search input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 3px rgba(255, 61, 127, 0.15);
}
.icm-search-icon-inline {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.5;
  pointer-events: none;
  color: var(--color-white);
}


/* Nav */
.icm-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
}
.icm-nav a {
  font-size: 12.5px;
  color: var(--color-white-70);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  position: relative;
}
.icm-nav a:hover {
  background: var(--color-white-08);
  color: var(--color-white);
  text-decoration: none;
}
.icm-nav a.active {
  background: var(--color-white-15);
  color: var(--color-white);
  font-weight: var(--weight-bold);
}
.icm-nav a.icm-partner {
  color: var(--color-magenta-soft);
  font-weight: var(--weight-semibold);
}
.icm-nav a.icm-partner:hover,
.icm-nav a.icm-partner.active {
  background: rgba(255, 61, 127, 0.18);
  color: var(--color-white);
}


/* CTAs */
.icm-ctas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.icm-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  transition: var(--duration-base) var(--ease-out);
  white-space: nowrap;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
}

/* JOIN / LOG IN button -- white outline, matches Try Me */
.icm-cta-join {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white-15);
}
.icm-cta-join:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  text-decoration: none;
}
.icm-cta-join.icm-hide { display: none; }

.icm-cta-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white-15);
}
.icm-cta-secondary:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  text-decoration: none;
}

.icm-cta-primary {
  background: var(--color-magenta);
  color: var(--color-white);
  border-color: var(--color-magenta);
  box-shadow: 0 2px 8px rgba(255, 61, 127, 0.35);
  position: relative;
  overflow: hidden;
}
.icm-cta-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease-out);
}
.icm-cta-primary:hover {
  background: var(--color-magenta-dark);
  border-color: var(--color-magenta-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 61, 127, 0.5);
  color: var(--color-white);
  text-decoration: none;
}
.icm-cta-primary:hover::before { transform: translateX(100%); }


/* --- ROW 3: PINK TRUST TICKER --- */
.icm-row3 {
  background: var(--color-magenta-tint);
  border-top: 1px solid var(--color-magenta);
  border-bottom: 1.5px solid var(--color-magenta-soft);
  padding: 9px 0;
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
}

.icm-ticker-track {
  display: flex;
  gap: 0;
  animation: icmTick 32s linear infinite;
  width: max-content;
}
.icm-ticker-track:hover { animation-play-state: paused; }

.icm-t-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 28px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--color-magenta-dark);
  white-space: nowrap;
}
.icm-t-item .ico { font-size: 14px; }
.icm-t-sep {
  color: var(--color-magenta-soft);
  font-size: 16px;
  display: flex;
  align-items: center;
}

@keyframes icmTick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .icm-ticker-track { animation: none; }
}


/* --- MOBILE BOTTOM TAB BAR --- */
.icm-tabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-black);
  border-top: 1px solid var(--color-white-15);
  height: 62px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: var(--z-header);
}
.icm-tabs::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--color-magenta) 40%,
    var(--color-magenta) 60%,
    transparent);
  opacity: 0.5;
}

.icm-tabs-inner {
  display: flex;
  height: 100%;
  align-items: stretch;
}

.icm-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--color-white-50);
  text-decoration: none;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
  padding: 6px 4px;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.icm-tab .ico { font-size: 18px; line-height: 1; }
.icm-tab:hover { color: var(--color-white); text-decoration: none; }
.icm-tab.active { color: var(--color-white); }
.icm-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--color-magenta);
  border-radius: 0 0 2px 2px;
}


/* --- LANGUAGE MODAL --- */
.icm-lang-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-black-60);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.icm-lang-modal.show { display: flex; }

.icm-lang-box {
  background: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: var(--radius-md);
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shadow-offset-magenta);
}

.icm-lang-box h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  margin: 0 0 6px;
  color: var(--color-black);
  font-weight: var(--weight-medium);
}
.icm-lang-box h3 em { color: var(--color-magenta); }

.icm-lang-note {
  font-size: var(--text-xs);
  color: var(--color-black);
  background: var(--color-neon);
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  margin: 14px 0 18px;
  line-height: 1.4;
  border: 1px solid var(--color-black);
}

.icm-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.icm-lang-grid button {
  background: var(--color-white);
  border: 1.5px solid var(--color-black);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: var(--duration-fast) var(--ease-out);
  font-family: inherit;
  color: var(--color-black);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icm-lang-grid button:hover { background: var(--color-black); color: var(--color-white); }
.icm-lang-grid button.active {
  background: var(--color-magenta);
  color: var(--color-white);
  border-color: var(--color-magenta);
}
.icm-lang-grid button .native {
  font-weight: var(--weight-semibold);
  font-size: 11.5px;
  opacity: 0.7;
}
.icm-lang-grid button:hover .native { opacity: 1; }

.icm-lang-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  transition: background var(--duration-fast) var(--ease-out);
}
.icm-lang-close:hover { background: var(--color-magenta); }


/* --- MOBILE "MORE" DRAWER --- */
.icm-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-black-60);
  z-index: calc(var(--z-drawer) - 1);
}
.icm-drawer-overlay.show { display: block; }

.icm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  background: var(--color-black);
  z-index: var(--z-drawer);
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  border-left: 2px solid var(--color-magenta);
  overflow: auto;
}
.icm-drawer.show { transform: translateX(0); }

.icm-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--color-magenta);
  color: var(--color-white);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}

.icm-drawer-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-white);
  margin-bottom: 18px;
  font-weight: var(--weight-semibold);
}
.icm-drawer-title em { color: var(--color-magenta); }

.icm-drawer a,
.icm-drawer button.icm-drawer-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: var(--weight-medium);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.icm-drawer a:hover,
.icm-drawer button.icm-drawer-item:hover {
  color: var(--color-magenta);
  text-decoration: none;
}


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

@media (max-width: 1100px) {
  .icm-nav a { padding: 6px 9px; font-size: 12px; }
  .icm-search { max-width: 220px; }
  .icm-row1, .icm-row2 { padding: 0 18px; }
}

@media (max-width: 900px) {
  .icm-row1 {
    padding: 0 14px;
    gap: 8px;
    height: 32px;
  }
  .icm-ann { font-size: 10.5px; }
  .icm-ann .icm-ann-extra { display: none; }
  .icm-icon-btn { width: 26px; height: 26px; font-size: 12px; }
  .icm-lang-btn { display: none; }

  .icm-row2 {
    padding: 0 14px;
    gap: 10px;
    height: 52px;
    top: 32px;
  }
  .icm-search { display: none; }
  .icm-nav { display: none; }
  .icm-cta-secondary { display: none; }
  .icm-ctas { gap: 0; margin-left: auto; }
  .icm-cta { font-size: 11px; padding: 6px 12px; }

  .icm-row3 { padding: 7px 0; height: 34px; }
  .icm-t-item { padding: 0 18px; font-size: 11px; }

  .icm-tabs { display: block; }

  body { padding-bottom: 62px; }
}
/* ===================================================================
   iCookMagic — Shop, Product, Cart & Checkout Styles
   ===================================================================
   Location: /assets/css/shop.css
   Depends:  tokens.css, base.css, header.css
   Covers:   shop.php, product.php, combo.php, cart.php, checkout.php
   =================================================================== */

/* ---- SHORTHAND TOKENS (local aliases for brevity) ---- */
:root {
  --m:   var(--color-magenta);
  --md:  var(--color-magenta-dark);
  --ml:  var(--color-magenta-tint);
  --mb:  #ffd0e0;
  --n:   var(--color-neon);
  --nd:  var(--color-neon-dark);
  --nl:  #f0ffe8;
  --ink: var(--color-ink-900);
  --s2:  var(--color-ink-700);
  --mt:  var(--color-ink-500);
  --bg:  #f6f6f4;
  --wh:  var(--color-white);
  --ln:  var(--color-ink-100);
  --ln2: #f2f2f0;
  --fh:  var(--font-display);
  --fb:  var(--font-body);
  --error: var(--color-error);
}

/* ===================================================================
   1. LAYOUT — SHOP PAGE
   =================================================================== */

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 130px;
  padding: 20px 16px 40px;
  border-right: 1px solid var(--ln);
  min-height: calc(100vh - 130px);
  background: var(--wh);
}

.sidebar-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sidebar-hd h3 {
  font-family: var(--fh);
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.sidebar-hd h3 em { color: var(--m); }
.sidebar-clear {
  font-size: 11px;
  color: var(--mt);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--fb);
  padding: 4px 8px;
  border-radius: 100px;
  transition: .15s;
}
.sidebar-clear:hover { background: var(--ml); color: var(--m); }

.sb-sec { margin-bottom: 20px; }
.sb-sec-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mt);
  margin-bottom: 8px;
}
.sb-row { display: flex; flex-wrap: wrap; gap: 5px; }

.sb-c {
  padding: 5px 11px;
  border: 1.5px solid var(--ln);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--s2);
  cursor: pointer;
  background: var(--wh);
  font-family: var(--fb);
  transition: .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sb-c:hover { border-color: var(--ink); color: var(--ink); }
.sb-c.on { background: var(--ink); border-color: var(--ink); color: var(--wh); }
.sb-c.n.on { background: var(--n); border-color: var(--nd); color: #000; }
.sb-c.m.on { background: var(--m); border-color: var(--md); color: var(--wh); }
.sb-c-n {
  font-size: 9px;
  background: var(--ln2);
  padding: 1px 5px;
  border-radius: 100px;
  color: var(--mt);
}
.sb-c.on .sb-c-n { background: rgba(255,255,255,.25); color: inherit; }

/* Main content area */
.main-col {
  padding: 0 24px 60px;
  min-width: 0;
}

/* ===================================================================
   2. TOOLBAR
   =================================================================== */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ln);
  margin-bottom: 0;
  flex-wrap: wrap;
  position: sticky;
  top: 128px;
  background: var(--wh);
  z-index: 10;
}

.filter-btn-mobile {
  display: none;
  padding: 8px 14px;
  border: 1.5px solid var(--ln);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--wh);
  cursor: pointer;
  font-family: var(--fb);
  gap: 6px;
  align-items: center;
}
.filter-badge {
  background: var(--m);
  color: var(--wh);
  border-radius: 100px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
}

.cat-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cat-tab {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--s2);
  background: var(--bg);
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--fb);
  transition: .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cat-tab:hover { border-color: var(--ln); color: var(--ink); }
.cat-tab.on { background: var(--ink); color: var(--wh); border-color: var(--ink); }
.ct-n {
  font-size: 10px;
  background: rgba(255,255,255,.2);
  padding: 1px 5px;
  border-radius: 100px;
}
.cat-tab:not(.on) .ct-n { background: var(--ln); color: var(--mt); }

.smart-strip {
  font-size: 11.5px;
  color: var(--mt);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
.smart-strip .ss-icon { color: var(--m); }
.smart-strip em { font-family: var(--fh); font-style: italic; color: var(--ink); font-weight: 600; }
.smart-strip a { color: var(--m); text-decoration: none; font-weight: 600; }
.smart-strip a:hover { text-decoration: underline; }

.sort-sel {
  padding: 7px 12px;
  border: 1.5px solid var(--ln);
  border-radius: 100px;
  font-size: 11.5px;
  font-family: var(--fb);
  color: var(--ink);
  background: var(--wh);
  cursor: pointer;
  outline: none;
}
.sort-sel:focus { border-color: var(--m); }

/* Active filter chips */
.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 0 0;
  width: 100%;
}
.act-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--ml);
  border: 1px solid var(--mb);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--md);
}
.act-chip button {
  background: none;
  border: none;
  color: var(--md);
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.act-chip button:hover { color: var(--m); }

/* ===================================================================
   3. CATEGORY HEADER
   =================================================================== */

.cat-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 0 14px;
  border-bottom: 1px solid var(--ln2);
  margin-bottom: 16px;
}
.cat-hd h2 {
  font-family: var(--fh);
  font-size: 26px;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px;
  line-height: 1.1;
}
.cat-hd h2 em { color: var(--m); }
.ch-sub { font-size: 11.5px; color: var(--mt); }
.ct-cnt { font-size: 12px; font-weight: 700; color: var(--mt); white-space: nowrap; }
.ct-cnt b { color: var(--ink); font-size: 20px; font-family: var(--fh); font-style: italic; }

/* ===================================================================
   4. PRODUCT GRID & CARDS
   =================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.card {
  background: var(--wh);
  border: 1.5px solid var(--ln);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .15s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.09);
  border-color: var(--ink);
}
.card.feat { border-color: var(--m); }
.card.feat:hover { border-color: var(--md); }
.card.bestseller { border-color: var(--n); }

/* Card image */
.card-img {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg);
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);
}
.card:hover .card-img img { transform: scale(1.04); }

/* Placeholder when no image */
.ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf6f0, #fef0f5);
  padding: 16px;
}
.ph-cuisine {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt);
  margin-bottom: 6px;
}
.ph-name {
  font-family: var(--fh);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
}

/* Badges */
.badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.b {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.b-best { background: var(--n); color: #000; }
.b-new  { background: var(--m); color: var(--wh); }
.b-trend{ background: #000; color: var(--n); }

/* Diet ribbon */
.diet-ribbon {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* Card body */
.card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.cat-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ctd {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--m);
  display: inline-block;
  flex-shrink: 0;
}

.p-name {
  font-family: var(--fh);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-meta {
  font-size: 11px;
  color: var(--mt);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}
.p-meta b { color: var(--ink); font-weight: 700; }
.dot { color: var(--ln); margin: 0 1px; }

/* Health tags */
.p-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.htag {
  padding: 2px 8px;
  background: var(--nl);
  border: 1px solid #c8f7b0;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  color: #1a5c00;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.dl {
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
}
.dl.m { background: var(--ml); color: var(--md); border: 1px solid var(--mb); }

/* Trust tags */
.p-trust { display: flex; flex-wrap: wrap; gap: 4px; }
.ttag {
  padding: 3px 9px;
  background: var(--bg);
  border: 1px solid var(--ln);
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--s2);
}

/* Price & footer */
.p-foot { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.p-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.p-price {
  font-family: var(--fh);
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
}
.p-per { font-size: 11px; color: var(--mt); }
.p-actions { display: flex; gap: 6px; }
.act-prebook {
  flex: 1;
  padding: 9px 12px;
  background: var(--ink);
  color: var(--wh);
  border: none;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.act-prebook:hover { background: var(--m); }
.act-prebook.done { background: var(--n); color: #000; }
.pba { font-size: 13px; }
.p-prelaunch { font-size: 9.5px; color: var(--mt); text-align: center; font-weight: 500; }

/* ===================================================================
   5. ANNOUNCEMENT STRIP (shop page top)
   =================================================================== */

.strip {
  background: #000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 38px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 128px;
  z-index: 9;
  overflow: hidden;
}
.strip-brand {
  font-family: var(--fh);
  font-style: italic;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.strip-brand em { color: var(--m); font-weight: 600; }
.strip-brand .sp { color: var(--n); font-style: normal; }
.strip-ticker { flex: 1; overflow: hidden; }
.ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: tickScroll 28s linear infinite;
  width: max-content;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tk {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  padding: 0 16px;
}
.tk b { color: var(--wh); font-weight: 700; }
.tk em { color: var(--m); font-style: italic; font-family: var(--fh); }
.tk-new {
  background: var(--m);
  color: var(--wh);
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 100px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tk-dot { color: rgba(255,255,255,.2); padding: 0 4px; }
.strip-cd {
  font-size: 11px;
  color: var(--n);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.strip-cd b { font-family: var(--fh); font-style: italic; font-size: 13px; }
.strip-cd-arr { font-size: 10px; }

/* ===================================================================
   6. WELCOME BAR
   =================================================================== */

.welcome-bar {
  background: var(--ml);
  border-bottom: 1px solid var(--mb);
}
.welcome-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wb-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-eye {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--md);
  background: var(--mb);
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.wb-msg { font-size: 12.5px; color: var(--md); }
.wb-msg b { font-weight: 700; color: var(--ink); }
.wb-msg em { font-family: var(--fh); font-style: italic; color: var(--md); font-weight: 600; }
.wb-actions { display: flex; gap: 7px; align-items: center; }
.wb-btn {
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
  text-decoration: none;
  transition: .15s;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.wb-btn.ghost { background: var(--wh); color: var(--ink); border-color: var(--ln); }
.wb-btn.ghost:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }
.wb-btn.primary { background: var(--m); color: var(--wh); }
.wb-btn.primary:hover { background: var(--md); text-decoration: none; color: var(--wh); }

/* ===================================================================
   7. EDITORIAL BLOCKS (callouts)
   =================================================================== */

.eb {
  border-radius: 14px;
  padding: 28px 28px 24px;
  margin: 28px 0;
}
.eb-dark {
  background: #000;
  color: var(--wh);
}
.eb-soft {
  background: var(--ml);
  border: 1px solid var(--mb);
}
.eb-eye {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--n);
  display: block;
  margin-bottom: 8px;
}
.eb-dark .eb-eye { color: var(--n); }
.eb-soft .eb-eye { color: var(--md); }
.eb h3 {
  font-family: var(--fh);
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  margin: 0 0 8px;
}
.eb-dark h3 { color: var(--wh); }
.eb-soft h3 { color: var(--ink); }
.eb h3 em { color: var(--m); }
.eb p { font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.eb-dark p { color: rgba(255,255,255,.75); }
.eb-soft p { color: var(--s2); }
.eb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: .15s;
  font-family: var(--fb);
}
.eb-dark .eb-btn { background: var(--m); color: var(--wh); }
.eb-dark .eb-btn:hover { background: var(--md); text-decoration: none; color: var(--wh); }
.eb-soft .eb-btn { background: var(--ink); color: var(--wh); }
.eb-soft .eb-btn:hover { background: var(--m); text-decoration: none; color: var(--wh); }

/* ===================================================================
   8. SUGGEST SECTION
   =================================================================== */

.suggest-section {
  background: var(--wh);
  border: 1.5px solid var(--ln);
  border-radius: 14px;
  padding: 28px;
  margin: 28px 0;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: start;
}
.ss-eye {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m);
  display: block;
  margin-bottom: 10px;
}
.ss-l h2 {
  font-family: var(--fh);
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}
.ss-l h2 em { color: var(--m); }
.ss-l p { font-size: 12.5px; color: var(--s2); line-height: 1.6; margin: 0; }
.ss-l p b { color: var(--ink); font-weight: 700; }
.ss-form { display: flex; flex-direction: column; gap: 12px; }
.ss-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mt); margin-bottom: 5px; display: block; }
.ss-input, .ss-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--ln);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--fb);
  background: var(--bg);
  outline: none;
  transition: .15s;
}
.ss-input:focus, .ss-textarea:focus { border-color: var(--m); background: var(--wh); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ss-chip {
  padding: 5px 11px;
  border: 1.5px solid var(--ln);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--s2);
  cursor: pointer;
  background: var(--wh);
  font-family: var(--fb);
  transition: .15s;
}
.ss-chip:hover { border-color: var(--m); color: var(--m); }
.ss-chip.on { background: var(--m); border-color: var(--m); color: var(--wh); }
.ss-submit {
  width: 100%;
  padding: 12px;
  background: var(--ink);
  color: var(--wh);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
  transition: .15s;
}
.ss-submit:hover { background: var(--m); }
.ss-note { font-size: 11px; color: var(--mt); text-align: center; }
.ss-note em { font-family: var(--fh); font-style: italic; color: var(--m); font-weight: 600; }

/* ===================================================================
   9. EMPTY STATE
   =================================================================== */

.empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--wh);
  border: 1px solid var(--ln);
  border-radius: 14px;
  margin: 20px 0;
}
.ee { font-size: 48px; margin-bottom: 16px; }
.empty h4 { font-family: var(--fh); font-size: 20px; font-style: italic; margin: 0 0 8px; }
.empty p { font-size: 13px; color: var(--mt); margin: 0 0 20px; }
.empty button {
  padding: 10px 22px;
  background: var(--m);
  color: var(--wh);
  border: none;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
}

/* ===================================================================
   10. MOBILE FILTER DRAWER
   =================================================================== */

.fd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 299;
}
.fd-overlay.on { display: block; }
.fd {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  max-height: 85vh;
  background: var(--wh);
  border-radius: 20px 20px 0 0;
  z-index: 300;
  transform: translateY(100%);
  transition: transform .3s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.fd.open { transform: translateY(0); }
.fd-handle {
  width: 36px;
  height: 4px;
  background: var(--ln);
  border-radius: 100px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.fd-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--ln2);
  flex-shrink: 0;
}
.fd-hd h3 {
  font-family: var(--fh);
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  margin: 0;
}
.fd-hd h3 em { color: var(--m); }
.fd-close {
  background: none;
  border: none;
  color: var(--mt);
  font-size: 18px;
  cursor: pointer;
}
.fd-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.fd-sec { margin-bottom: 18px; }
.fd-sec-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mt);
  margin-bottom: 8px;
}
.fc-row { display: flex; flex-wrap: wrap; gap: 5px; }
.fc {
  padding: 6px 12px;
  border: 1.5px solid var(--ln);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--s2);
  cursor: pointer;
  background: var(--wh);
  font-family: var(--fb);
  transition: .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fc.on { background: var(--ink); border-color: var(--ink); color: var(--wh); }
.fc.n.on { background: var(--n); border-color: var(--nd); color: #000; }
.fc.m.on { background: var(--m); border-color: var(--md); color: var(--wh); }
.fc-n { font-size: 9px; background: var(--ln2); padding: 1px 5px; border-radius: 100px; color: var(--mt); }
.fc.on .fc-n { background: rgba(255,255,255,.25); color: inherit; }
.fd-foot {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--ln2);
  flex-shrink: 0;
}
.fd-clear, .fd-apply {
  flex: 1;
  padding: 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
  transition: .15s;
  border: 1.5px solid transparent;
}
.fd-clear { background: var(--wh); color: var(--ink); border-color: var(--ln); }
.fd-clear:hover { border-color: var(--ink); }
.fd-apply { background: var(--ink); color: var(--wh); }
.fd-apply:hover { background: var(--m); }

/* ===================================================================
   11. SUGGEST MODAL
   =================================================================== */

.sug-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sug-modal.on { display: flex; }
.sug-box {
  background: var(--wh);
  border-radius: 16px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.sug-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bg);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  color: var(--mt);
}
.sug-close:hover { background: var(--m); color: var(--wh); }
.sug-eye { font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--m); display: block; margin-bottom: 8px; }
.sug-h2 { font-family: var(--fh); font-size: 24px; font-style: italic; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.sug-h2 em { color: var(--m); }
.sug-p { font-size: 12.5px; color: var(--s2); margin: 0 0 16px; }
.sug-field { margin-bottom: 14px; }
.sug-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mt); margin-bottom: 5px; display: block; }
.sug-input, .sug-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--ln);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--fb);
  background: var(--bg);
  outline: none;
  transition: .15s;
}
.sug-input:focus, .sug-textarea:focus { border-color: var(--m); background: var(--wh); }
.sug-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.form-chip {
  padding: 5px 11px;
  border: 1.5px solid var(--ln);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--s2);
  cursor: pointer;
  background: var(--wh);
  font-family: var(--fb);
  transition: .15s;
}
.form-chip.on { background: var(--m); border-color: var(--m); color: var(--wh); }
.sug-submit {
  width: 100%;
  padding: 12px;
  background: var(--m);
  color: var(--wh);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
  transition: .15s;
  margin-top: 8px;
}
.sug-submit:hover { background: var(--md); }
.sug-note { font-size: 11px; color: var(--mt); text-align: center; margin-top: 8px; }
.sug-note em { font-family: var(--fh); font-style: italic; color: var(--m); }
.sug-thanks { text-align: center; padding: 20px 0; }
.sug-thanks-h { font-family: var(--fh); font-size: 22px; font-style: italic; font-weight: 700; margin: 0 0 8px; }
.sug-thanks-p { font-size: 13px; color: var(--s2); margin: 0 0 20px; }
.sug-thanks .on { display: block; }

/* ===================================================================
   12. FLOAT BUTTON
   =================================================================== */

.float-suggest {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: var(--ink);
  color: var(--wh);
  border: none;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  z-index: 90;
  transition: .2s;
}
.float-suggest:hover { background: var(--m); transform: translateY(-2px); }
.fs-ico { color: var(--n); }

/* ===================================================================
   13. TOAST
   =================================================================== */

.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #000;
  color: var(--wh);
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2000;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .ti { color: var(--n); font-size: 14px; }
.toast em { font-family: var(--fh); font-style: italic; color: var(--m); }

/* ===================================================================
   14. RESPONSIVE
   =================================================================== */

@media (max-width: 1100px) {
  .layout { grid-template-columns: 200px 1fr; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .filter-btn-mobile { display: flex; }
  .main-col { padding: 0 14px 80px; }
  .strip { top: 118px; padding: 0 14px; }
  .toolbar { top: 118px; }
  .smart-strip { display: none; }
  .sort-sel { margin-left: auto; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .suggest-section { grid-template-columns: 1fr; }
  .float-suggest { bottom: 74px; }
}

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .card-body { padding: 10px 11px 12px; }
  .p-name { font-size: 13px; }
  .p-price { font-size: 17px; }
  .act-prebook { font-size: 10.5px; padding: 8px 10px; }
  .cat-hd { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cat-hd h2 { font-size: 22px; }
  .welcome-bar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .suggest-section { padding: 20px 16px; }
}

/* ===================================================================
   RECIPES LISTING PAGE
   =================================================================== */
.rec-hero{background:#000;padding:28px 24px 24px;position:relative;overflow:hidden}
.rec-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,61,127,.1) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.rec-hero-inner{max-width:1300px;margin:0 auto;position:relative;z-index:2}
.rec-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.rec-hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(57,255,20,.12);border:1px solid rgba(57,255,20,.3);color:#39FF14;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.rec-hero h1{font-family:var(--font-display);font-size:clamp(22px,3vw,32px);font-style:italic;font-weight:700;color:#fff;margin:0 0 4px;line-height:1.1}
.rec-hero h1 em{color:var(--color-magenta)}
.rec-hero-sub{font-size:12.5px;color:rgba(255,255,255,.65);margin:0}
.rec-vs{display:flex;gap:8px;flex-wrap:wrap}
.rec-vs-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;text-align:center;min-width:90px}
.rec-vs-card.win{border-color:rgba(57,255,20,.3);background:rgba(57,255,20,.06)}
.rec-vs-num{font-family:var(--font-display);font-size:20px;font-weight:700;font-style:italic;color:#fff;line-height:1}
.rec-vs-card.win .rec-vs-num{color:#39FF14}
.rec-vs-lbl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:2px}
.rec-vs-vs{display:flex;align-items:center;color:rgba(255,255,255,.2);font-size:11px;font-weight:700;align-self:center}
.rec-search-wrap{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;display:flex;align-items:center;gap:8px;padding:8px 14px;margin-top:14px}
.rec-search-wrap input{flex:1;background:none;border:none;color:#fff;font-size:13px;font-family:var(--font-body);outline:none}
.rec-search-wrap input::placeholder{color:rgba(255,255,255,.3)}
.rec-search-wrap button{background:var(--color-magenta);border:none;color:#fff;padding:7px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:.15s;white-space:nowrap}
.rec-search-wrap button:hover{background:var(--color-magenta-dark)}
.rec-layout{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:200px 1fr;gap:0;align-items:start}
@media(max-width:860px){.rec-layout{grid-template-columns:1fr}.rec-sidebar-wrap{display:none}}
.rec-sidebar-wrap{position:sticky;top:128px;padding:16px 14px 40px;border-right:1px solid var(--color-ink-100);background:var(--color-white)}
.rec-main{padding:0 0 60px;min-width:0}
.rec-toolbar{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--color-ink-100);background:var(--color-white);position:sticky;top:128px;z-index:10;flex-wrap:wrap}
.rec-toolbar-count{font-size:12px;color:var(--color-ink-500);flex:1}
.rec-toolbar-count b{color:var(--color-ink-900);font-weight:700}
.rec-filter-mob{display:none;padding:7px 14px;border:1.5px solid var(--color-ink-100);border-radius:100px;font-size:12px;font-weight:700;color:var(--color-ink-900);background:var(--color-white);cursor:pointer;font-family:var(--font-body);align-items:center;gap:5px}
@media(max-width:860px){.rec-filter-mob{display:flex}.rec-toolbar{top:118px}}
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:14px 18px}
@media(max-width:600px){.rec-grid{grid-template-columns:repeat(2,1fr);gap:9px;padding:10px 12px}}
.rc{background:var(--color-white);border:1.5px solid var(--color-ink-100);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .12s;position:relative}
.rc:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:var(--color-ink-900)}
.rc-img{height:130px;background:#f6f6f4;position:relative;overflow:hidden}
.rc-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.rc:hover .rc-img img{transform:scale(1.05)}
.rc-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,#fdf6f0,#fef0f5)}
.rc-time-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.75);color:#fff;font-size:9px;font-weight:700;padding:3px 7px;border-radius:100px;backdrop-filter:blur(4px)}
.rc-body{padding:10px 11px 12px}
.rc-kit{font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-magenta);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-name{font-family:var(--font-display);font-size:13.5px;font-style:italic;font-weight:600;color:var(--color-ink-900);margin:0 0 4px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.rc-meta-left{font-size:10px;color:var(--color-ink-500);display:flex;gap:5px;align-items:center}
.rc-cost{font-size:11px;font-weight:700;color:#1a5c00;background:#f0ffe8;border:1px solid #c8f7b0;padding:2px 7px;border-radius:100px}
.rc-tags{display:flex;flex-wrap:wrap;gap:3px}
.rt{padding:2px 6px;border-radius:100px;font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.rt-diet{background:#fff5f8;color:var(--color-magenta-dark);border:1px solid #ffd0e0}
.rt-diff{background:#f6f6f4;color:var(--color-ink-500);border:1px solid var(--color-ink-100)}
.rec-pages{display:flex;justify-content:center;gap:5px;padding:20px;flex-wrap:wrap}
.rp-btn{padding:7px 13px;border:1.5px solid var(--color-ink-100);border-radius:8px;font-size:12px;font-weight:600;color:var(--color-ink-700);background:var(--color-white);cursor:pointer;font-family:var(--font-body);text-decoration:none;transition:.12s}
.rp-btn:hover{border-color:var(--color-ink-900);color:var(--color-ink-900);text-decoration:none}
.rp-btn.on{background:var(--color-ink-900);border-color:var(--color-ink-900);color:var(--color-white)}
.rec-empty{text-align:center;padding:50px 20px}
.rec-empty-ico{font-size:40px;margin-bottom:12px}
.rec-empty h3{font-family:var(--font-display);font-size:20px;font-style:italic;margin:0 0 6px}
.rec-empty p{font-size:12.5px;color:var(--color-ink-500);margin:0 0 16px}
.rfd-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
.rfd-overlay.on{display:block}
.rfd{position:fixed;left:0;bottom:0;width:100%;max-height:82vh;background:var(--color-white);border-radius:18px 18px 0 0;z-index:300;transform:translateY(100%);transition:transform .28s;display:flex;flex-direction:column}
.rfd.open{transform:translateY(0)}
.rfd-handle{width:32px;height:4px;background:var(--color-ink-100);border-radius:100px;margin:10px auto 0;flex-shrink:0}
.rfd-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 8px;border-bottom:1px solid #f2f2f0;flex-shrink:0}
.rfd-hd h3{font-family:var(--font-display);font-size:17px;font-style:italic;font-weight:600;margin:0}
.rfd-hd h3 em{color:var(--color-magenta)}
.rfd-close{background:none;border:none;color:var(--color-ink-500);font-size:18px;cursor:pointer}
.rfd-body{flex:1;overflow-y:auto;padding:14px 18px}
.rfd-foot{display:flex;gap:8px;padding:10px 18px;border-top:1px solid #f2f2f0;flex-shrink:0}
.rfd-clear,.rfd-apply{flex:1;padding:11px;border-radius:100px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);border:1.5px solid transparent;transition:.12s}
.rfd-clear{background:var(--color-white);color:var(--color-ink-900);border-color:var(--color-ink-100)}
.rfd-apply{background:var(--color-ink-900);color:var(--color-white)}
.rfd-apply:hover{background:var(--color-magenta)}

/* ===================================================================
   RECIPE DETAIL PAGE
   =================================================================== */
.rd-wrap{max-width:760px;margin:0 auto;padding:0 0 80px}
.rd-back{display:flex;align-items:center;gap:6px;padding:12px 18px;font-size:12px;font-weight:600;color:var(--color-ink-500);text-decoration:none;transition:.12s;border-bottom:1px solid #f2f2f0}
.rd-back:hover{color:var(--color-magenta);text-decoration:none}
.rd-img{height:240px;background:linear-gradient(135deg,#fdf6f0,#fef0f5);position:relative;overflow:hidden}
.rd-img img{width:100%;height:100%;object-fit:cover}
.rd-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:56px}
.rd-img-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.5));padding:14px 18px}
.rd-img-kit{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:3px}
.rd-img-name{font-family:var(--font-display);font-size:22px;font-style:italic;font-weight:700;color:#fff;line-height:1.15}
.rd-meta{display:flex;gap:0;border-bottom:1px solid #f2f2f0;background:var(--color-white)}
.rd-meta-item{flex:1;padding:10px 8px;text-align:center;border-right:1px solid #f2f2f0}
.rd-meta-item:last-child{border-right:none}
.rd-meta-val{font-family:var(--font-display);font-size:17px;font-weight:700;font-style:italic;color:var(--color-ink-900);line-height:1}
.rd-meta-val.green{color:#1a5c00}
.rd-meta-lbl{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-500);margin-top:2px}
.rd-diets{display:flex;flex-wrap:wrap;gap:5px;padding:12px 18px;border-bottom:1px solid #f2f2f0}
.rd-tag{padding:4px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.04em}
.rd-tag.diet{background:#fff5f8;color:var(--color-magenta-dark);border:1px solid #ffd0e0}
.rd-tag.free{background:#f0ffe8;color:#1a5c00;border:1px solid #c8f7b0}
.rd-actions{display:flex;gap:8px;padding:12px 18px;border-bottom:1px solid #f2f2f0;background:var(--color-white)}
.rd-action-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 8px;border:1.5px solid var(--color-ink-100);border-radius:10px;cursor:pointer;background:var(--color-white);font-family:var(--font-body);transition:.15s;text-decoration:none;color:inherit}
.rd-action-btn:hover{border-color:var(--color-ink-900);text-decoration:none;color:inherit}
.rd-action-btn.fav-on{border-color:var(--color-magenta);background:#fff5f8}
.rd-action-btn.cart-on{border-color:#1a5c00;background:#f0ffe8}
.rd-action-ico{font-size:18px;line-height:1}
.rd-action-lbl{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-500);line-height:1}
.rd-action-btn.fav-on .rd-action-lbl{color:var(--color-magenta)}
.rd-action-btn.cart-on .rd-action-lbl{color:#1a5c00}
.rd-modes{padding:14px 18px 0;border-bottom:1px solid #f2f2f0}
.rd-modes-label{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-500);margin-bottom:8px}
.rd-mode-tabs{display:flex;gap:5px;flex-wrap:wrap}
.rd-mode-tab{padding:7px 12px;border:1.5px solid var(--color-ink-100);border-radius:100px;font-size:11px;font-weight:600;color:var(--color-ink-700);cursor:pointer;background:var(--color-white);font-family:var(--font-body);transition:.12s;display:flex;align-items:center;gap:4px}
.rd-mode-tab:hover{border-color:var(--color-ink-900);color:var(--color-ink-900)}
.rd-mode-tab.on{background:var(--color-ink-900);border-color:var(--color-ink-900);color:var(--color-white)}
.rd-section{padding:16px 18px;border-bottom:1px solid #f2f2f0}
.rd-section:last-child{border-bottom:none}
.rd-section-title{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-500);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.rd-section-title::after{content:'';flex:1;height:1px;background:#f2f2f0}
.rd-need{background:#fff5f8;border:1px solid #ffd0e0;border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--color-magenta-dark);line-height:1.6}
.rd-need strong{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-magenta-dark);margin-bottom:4px}
.rd-steps{display:flex;flex-direction:column;gap:10px}
.rd-step{display:flex;gap:11px;align-items:flex-start}
.rd-step-num{width:26px;height:26px;border-radius:50%;background:var(--color-ink-900);color:var(--color-white);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-family:var(--font-display);font-style:italic}
.rd-step-text{font-size:13.5px;color:var(--color-ink-700);line-height:1.55;padding-top:2px}
.rd-tip{background:#f6f6f4;border-left:3px solid var(--color-magenta);border-radius:0 8px 8px 0;padding:10px 14px;font-size:12.5px;color:var(--color-ink-700);line-height:1.5;margin-bottom:8px}
.rd-tip strong{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-magenta);display:block;margin-bottom:3px}
.rd-nutri{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rd-n-card{background:#f6f6f4;border:1px solid var(--color-ink-100);border-radius:8px;padding:8px 4px;text-align:center}
.rd-n-val{font-family:var(--font-display);font-size:16px;font-weight:700;font-style:italic;color:var(--color-ink-900);line-height:1}
.rd-n-lbl{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-500);margin-top:2px}
.rd-happiness{background:#000;border-radius:10px;padding:14px 16px}
.rd-happiness-eye{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#39FF14;margin-bottom:6px}
.rd-happiness-quote{font-family:var(--font-display);font-size:15px;font-style:italic;font-weight:600;color:#fff;line-height:1.4;margin:0}
.rd-happiness-quote em{color:var(--color-magenta)}
.rd-happiness-attr{font-size:10px;color:rgba(255,255,255,.5);margin-top:6px}
.rd-also{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.rd-also-card{flex-shrink:0;width:130px;border:1.5px solid var(--color-ink-100);border-radius:10px;overflow:hidden;cursor:pointer;transition:.12s;text-decoration:none;color:inherit;display:block}
.rd-also-card:hover{border-color:var(--color-magenta);text-decoration:none}
.rd-also-img{height:80px;background:#f6f6f4;overflow:hidden}
.rd-also-img img{width:100%;height:100%;object-fit:cover}
.rd-also-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px}
.rd-also-name{font-size:10.5px;font-weight:600;color:var(--color-ink-900);padding:6px 7px;line-height:1.3}
.rd-without{background:#f6f6f4;border:1px solid var(--color-ink-100);border-radius:10px;padding:12px 14px}
.rd-without h4{font-family:var(--font-display);font-size:14px;font-style:italic;font-weight:600;margin:0 0 6px}
.rd-without p{font-size:12px;color:var(--color-ink-500);margin:0;line-height:1.5}
.rd-without-note{font-size:10.5px;color:var(--color-ink-500);font-style:italic;margin-top:6px}
.rd-variants{display:flex;gap:5px;overflow-x:auto;padding:10px 18px;border-bottom:1px solid #f2f2f0;-webkit-overflow-scrolling:touch}
.rd-var-tab{flex-shrink:0;padding:6px 12px;border:1.5px solid var(--color-ink-100);border-radius:100px;font-size:11px;font-weight:600;color:var(--color-ink-700);cursor:pointer;background:var(--color-white);font-family:var(--font-body);transition:.12s}
.rd-var-tab:hover{border-color:var(--color-ink-900);color:var(--color-ink-900)}
.rd-var-tab.on{background:var(--color-ink-900);border-color:var(--color-ink-900);color:var(--color-white)}
.rd-sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--color-white);border-top:1px solid var(--color-ink-100);padding:10px 18px;display:flex;align-items:center;gap:10px;z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
@media(min-width:768px){.rd-sticky-cta{max-width:760px;left:50%;transform:translateX(-50%);border-radius:14px 14px 0 0}}
.rd-sticky-info{flex:1;min-width:0}
.rd-sticky-name{font-family:var(--font-display);font-size:13px;font-style:italic;font-weight:600;color:var(--color-ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-sticky-price{font-size:11px;color:var(--color-ink-500)}
.rd-sticky-btn{padding:11px 20px;background:var(--color-magenta);color:var(--color-white);border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:.15s;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.rd-sticky-btn:hover{background:var(--color-magenta-dark);color:var(--color-white);text-decoration:none}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:#000;color:#fff;padding:9px 16px;border-radius:100px;font-size:12px;font-weight:600;z-index:2000;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.rd-img{height:200px}.rd-nutri{grid-template-columns:repeat(3,1fr)}.rd-meta-val{font-size:15px}}