/* EM Cake: palette and type from the booklet; existing shapes and gradients retained. */
@font-face { font-family: 'Faberge'; src: url('../fonts/Faberge-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'Oxygen'; src: url('../fonts/Oxygen.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'Oxygen'; src: url('../fonts/Oxygen-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap }
@font-face { font-family: 'Oxygen'; src: url('../fonts/Oxygen-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap }
:root {
  --accent: #FDDF04;
  --accent-bg: #FAF8EF;
  --bg: #FFFEFB;
  --bg-white: #FFFEFB;
  --bg-dark: #111111;
  --ink: #111111;
  --ink-soft: #454545;
  --ink-muted: #666666;
  --line: #E5E2D8;
  --brand-green: #006C4F;
  --brand-grey: #A2A2A3;
  --brand-yellow-light: #FFF2A0;
  --font-main: 'Oxygen', system-ui, sans-serif;
  --font-display: 'Faberge', 'Georgia', serif;
}
.logo-panel { background: transparent; padding: 10px 0 }
.header { background: rgba(255,254,251,0.95) }
h1, h2, h3, .product-body h3 { font-family: var(--font-display); font-weight: 400 }
.product-price, .contact-card .big, .step-num { font-family: var(--font-display); font-weight: 400 }
button, input, textarea, select { font-family: var(--font-main) }
.hero { background: linear-gradient(135deg, var(--accent-bg) 0%, var(--bg) 60%) }
.hero h1 span { color: var(--brand-green) }
.label, .product-cat, .nav-links a:hover, .nav-right > a[style], .modal-body .modal-category { color: var(--brand-green) !important }
.btn-accent, .add-to-cart.in-cart {
  background-image: linear-gradient(90deg, var(--accent) 0%, var(--brand-yellow-light) 50%, var(--accent) 100%);
  color: var(--ink);
}
.btn-dark, .add-to-cart:not(.in-cart) { background-image: linear-gradient(90deg, var(--bg-dark) 0%, #454545 50%, var(--bg-dark) 100%) }
.product-img, .cart-item-img, .modal-img { background: linear-gradient(135deg, #FAF8EF, #FFFEFB) }
.promo-icon { background: rgba(253,223,4,0.15) }
.checkout-step.done, .consent-check a, .consent-check a:hover { color: var(--brand-green) }
.checkout-step.active .step-num, .checkout-step.done .step-num { color: var(--ink) }
.toast-icon.success { background: var(--brand-green) }

/* Typography and responsive rhythm */
html { overflow-x: clip }
body { line-height: 1.5; letter-spacing: normal; font-synthesis: none }
h1, h2, h3 { letter-spacing: normal; line-height: 1.15; text-wrap: balance }
h1 { font-size: clamp(28px, 3.3vw, 44px); max-width: 900px }
h2 { font-size: clamp(26px, 2.5vw, 34px) }
h3, .product-body h3 { font-size: 20px; line-height: 1.25 }
p, .hero-sub { line-height: 1.5 }
.hero-sub { max-width: 560px }
.label, .product-cat { letter-spacing: 0.045em }
.product-body h3 { margin-bottom: 10px }
.product-price { font-size: 22px; line-height: 1.25 }
.product-price .old-price, .product-price small, .product-price span { font-family: var(--font-main); font-size: 14px }
.tooltip-text { font-family: var(--font-main); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-wrap: wrap }
.nav-links, .nav-phone { white-space: nowrap }
.promo-banner { background: var(--brand-grey); color: var(--ink) }
.promo-item h4 { color: var(--ink); font-size: 16px; line-height: 1.3; font-weight: 700; margin-bottom: 6px }
.promo-item p { color: var(--ink); font-size: 14px; line-height: 1.45 }
.promo-icon { background: var(--accent) }
.promo-icon svg { color: var(--ink) }
.promo-item > div { min-width: 0 }
.how-step::before { font-family: var(--font-display); font-weight: 400 }
.contact-card .big { line-height: 1.3 }
.order-grid > *, .contacts-grid > *, .how-grid > * { min-width: 0 }
@media(max-width:1100px) and (min-width:769px) { .nav-phone { display: none } .nav-links { gap: 16px; font-size: 14px } }
@media(max-width:900px) { .order-grid { grid-template-columns: 1fr } }
@media(max-width:540px) {
 h1, .hero h1 { font-size: 28px; line-height: 1.2 }
 h2 { font-size: 26px; line-height: 1.2 }
 .hero-sub { font-size: 16px; line-height: 1.5 }
 .product-body h3 { font-size: 18px }
 .promo-inner { gap: 24px }
 .order-info li { flex-wrap: wrap }
}

.add-to-cart, .add-to-cart:not(.in-cart), .add-to-cart.in-cart {
 background-color: var(--brand-grey);
 background-image: linear-gradient(105deg, #A2A2A3 0%, #A2A2A3 35%, #DADADB 50%, #A2A2A3 65%, #A2A2A3 100%);
 background-size: 240% 100%; color: var(--ink); font-weight: 700;
 animation: cart-button-sheen 4.5s ease-in-out infinite;
}
@keyframes cart-button-sheen { 0%, 20% { background-position: 100% 0 } 80%, 100% { background-position: 0% 0 } }
@media(prefers-reduced-motion: reduce) { .add-to-cart { animation: none } }

/* Keep tooltip geometry inside narrow viewports. */
body { overflow-x: clip; }
@media (max-width: 540px) {
  .tooltip-text { position: fixed; left: 16px; right: 16px; bottom: 24px; top: auto; width: auto; max-width: none; transform: none; }
}

/* Web typography: readable Inter throughout; booklet colours retained. */
:root { --font-main: 'Inter', Arial, sans-serif; --font-display: 'Inter', Arial, sans-serif; }
body { font-size: 16px; line-height: 1.5; }
h1, h2, h3, .product-body h3 { font-family: var(--font-display); font-weight: 600; }
.hero h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.18; letter-spacing: -0.025em; }
h2 { font-size: clamp(25px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -0.02em; }
h3, .product-body h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.product-price { font-family: var(--font-main); font-size: 22px; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; }
.contact-card .big { font-family: var(--font-main); font-weight: 600; font-size: 22px; }
.step-num, .how-step::before { font-family: var(--font-main); font-weight: 600; }
.header { background: #A2A2A3; border-bottom-color: #929293; backdrop-filter: none; }
.nav-links { font-family: var(--font-main); font-size: 14px; line-height: 1.4; font-weight: 500; gap: 22px; letter-spacing: normal; }
.nav-phone { font-size: 14px; }
.logo-panel { padding: 10px 0; background: transparent; }
.nav-links.open { background: #A2A2A3; }
@media (max-width: 1100px) and (min-width: 769px) { .nav-links { gap: 16px; } }
@media (max-width: 540px) { .hero h1 { font-size: 28px; } .contact-card .big { font-size: 20px; } }

footer { background: #A2A2A3; color: #111111; border-top: 1px solid #929293; line-height: 1.6; }
footer a { color: #111111; text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: #006C4F; }
.float-cta { background: #006C4F; color: #FFFFFF; } .float-cta:hover { background: #00543D; } 
footer { background: #A2A2A3; color: #111111; border-top: 1px solid #929293; line-height: 1.6; }
footer a { color: #111111; text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: #006C4F; }
.modal-actions > .btn { background-color: #A2A2A3; background-image: linear-gradient(105deg,#A2A2A3 0%,#A2A2A3 35%,#DADADB 50%,#A2A2A3 65%,#A2A2A3 100%); background-size: 240% 100%; color: #111111; animation: cart-button-sheen 4.5s ease-in-out infinite; } @media(prefers-reduced-motion:reduce) { .modal-actions > .btn { animation:none; } } .float-cta { background: #006C4F; color: #FFFFFF; } .float-cta:hover { background: #00543D; } 
footer { background: #A2A2A3; color: #111111; border-top: 1px solid #929293; line-height: 1.6; }
footer a { color: #111111; text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: #006C4F; }

/* Complete the shared customer interface palette. */
.btn-dark { background-color:#A2A2A3; background-image:linear-gradient(90deg,#A2A2A3,#DADADB,#A2A2A3); color:#111111; }
.btn-dark:hover { color:#111111; }
.modal-body .modal-cat, .contact-card a:hover { color:#006C4F; }
.tooltip-wrap .tooltip-text, .toast { background:#A2A2A3; color:#111111; }
.tooltip-wrap .tooltip-text::after { border-top-color:#A2A2A3; }
.faq-item.open .faq-q .faq-icon { background:#006C4F; }
.checkout-step.active .step-num, .checkout-step.done .step-num { background:#FDDF04; color:#111111; border-color:#FDDF04; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid #006C4F; outline-offset:3px; }
@media(max-width:540px) { .tooltip-wrap:hover .tooltip-text { transform:none; } }

/* Booklet-like product sheet: full photos and clearly grouped specifications. */
.product-img img, .hero-photo-strip img, .cart-item-img img { object-fit:contain; }
.product-card:hover { transform:none; }
.modal { max-width:1040px; }
.modal-img { aspect-ratio:auto; height:360px; padding:24px; background:linear-gradient(135deg,#FAF8EF,#FFFEFB); }
.modal-img img { object-fit:contain !important; width:100%; height:100%; max-width:520px; }
#modalGallery { padding:8px 28px 0; display:flex; gap:10px; flex-wrap:wrap; }
#modalGallery button { width:110px; padding:6px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-family:var(--font-main); cursor:pointer; }
#modalGallery img { width:100%; height:70px; object-fit:contain; }
#modalGallery span { font-size:12px; }
.modal-body { padding:28px; }
.modal-body h2 { font-size:28px; line-height:1.2; }
.modal-spec { border:1px solid var(--line); background:#FAF8EF; }
.detail-section { border-top:1px solid var(--line); padding:20px 0; }
.detail-section h3 { font-size:18px; margin-bottom:10px; }
.detail-section p { font-size:14px; margin-bottom:8px; }
.detail-section a { color:#006C4F; font-size:14px; text-decoration:underline; }
.detail-caption { font-size:12px !important; color:var(--ink-muted); }
.nutrition-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.nutrition-grid > div { background:#FAF8EF; border-radius:8px; padding:12px; }
.nutrition-grid span { display:block; font-size:12px; color:var(--ink-soft); }
.nutrition-grid strong { display:block; margin-top:6px; font-size:16px; }
.modal-actions { padding-top:20px; border-top:1px solid var(--line); }
@media(min-width:900px) { .modal { display:grid; grid-template-columns:42% 58%; align-items:start; } .modal-img { grid-column:1; grid-row:1; height:420px; margin-top:20px; } #modalGallery { grid-column:1; grid-row:2; padding-bottom:24px; } .modal-body { grid-column:2; grid-row:1 / span 2; border-left:1px solid var(--line); } }
@media(max-width:540px) { .modal-overlay { padding:12px; } .modal-img { height:280px; padding:20px; } .modal-body { padding:20px; } .modal-body h2 { font-size:24px; } .nutrition-grid { grid-template-columns:repeat(2,1fr); } }

.hero-strip img { object-fit:contain; }
#modalGallery button:hover, #modalGallery button:focus-visible { border-color:#006C4F; }

@media(min-width:900px) { #modalGallery { grid-row:1; align-self:start; margin-top:450px; } .modal-body { grid-row:1; min-width:0; } }
.nutrition-grid > div { min-width:0; }

/* Compact side filmstrip, original hero photographs retained. */
.modal-media { min-width:0; display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding:24px 18px; align-items:start; }
.modal-media .modal-img { grid-column:2; grid-row:1; width:100%; height:360px; margin:0; padding:0; border-radius:10px; overflow:hidden; }
.modal-media .modal-img img { width:100%; height:100%; max-width:100%; object-fit:contain !important; }
.modal-media #modalGallery { grid-column:1; grid-row:1; display:flex; flex-direction:column; padding:0; margin:0; gap:10px; }
#modalGallery button { width:72px; height:76px; padding:4px; }
#modalGallery img { height:66px; }
#modalGallery span { display:none; }
#modalFeatures { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 16px; }
#modalFeatures span { background:#EDF5F0; color:#006C4F; border:1px solid #CBDCD1; border-radius:24px; padding:6px 10px; font-size:11px; font-weight:600; }
.modal-body { min-width:0; padding:24px; }
.modal-body h2 { font-size:26px; }
.modal-specs { gap:8px; margin-bottom:14px; }
.modal-spec { padding:10px; }
.detail-section { padding:14px 0; }
.detail-section h3 { font-size:16px; margin-bottom:6px; }
.allergens-section { background:#FAF8EF; padding:12px; border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }
.allergens-section p { margin:0; }
.nutrition-grid { margin:8px 0; }
.nutrition-grid > div { padding:10px 8px; }
.nutrition-grid strong { font-size:14px; }
@media(min-width:900px) { .modal { grid-template-columns:44% 56%; } .modal-media { grid-column:1; grid-row:1; position:sticky; top:0; } .modal-body { grid-column:2; grid-row:1; } }
@media(max-width:899px) { .modal-media { grid-template-columns:64px minmax(0,1fr); } .modal-media .modal-img { height:300px; } #modalGallery button { width:64px; height:68px; } #modalGallery img { height:58px; } }
@media(max-width:540px) { .modal-media { padding:16px; gap:8px; } .modal-media .modal-img { height:240px; } .modal-body { padding:16px; } .modal-body h2 { font-size:23px; } }

/* One shared contact panel with compact internal sections. */
.contacts-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:0; background:#FFFEFB; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; max-width:1040px; margin:0 auto; }
.contacts-grid .contact-card { padding:22px; border:0; border-radius:0; background:transparent; min-width:0; }
.contacts-grid .contact-card + .contact-card { border-left:1px solid var(--line); }
.contacts-grid .contact-card h3 { font-size:11px; letter-spacing:.06em; margin-bottom:10px; }
.contacts-grid .contact-card .big { font-size:19px; margin-bottom:8px; }
.contacts-grid .contact-card .big a { font-size:19px; font-weight:600; }
.contacts-grid .contact-card p, .contacts-grid .contact-card a { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
@media(max-width:700px) { .contacts-grid { grid-template-columns:1fr; } .contacts-grid .contact-card { padding:18px 20px; } .contacts-grid .contact-card + .contact-card { border-left:0; border-top:1px solid var(--line); } }

/* Trial: photo zone left, product information right from tablet width. */
@media(min-width:700px) {
 #productModal .modal { display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); align-items:start; }
 #productModal .modal-media { grid-column:1; grid-row:1; position:sticky; top:0; grid-template-columns:52px minmax(0,1fr); gap:8px; padding:22px 14px; }
 #productModal .modal-media .modal-img { height:320px; }
 #productModal #modalGallery button { width:52px; height:58px; }
 #productModal #modalGallery img { height:48px; }
 #productModal .modal-body { grid-column:2; grid-row:1; border-left:1px solid var(--line); padding:22px 20px; }
 #productModal .modal-body h2 { font-size:24px; }
 #productModal .modal-desc { font-size:14px; }
}
@media(min-width:1000px) {
 #productModal .modal-media { grid-template-columns:64px minmax(0,1fr); padding:24px 18px; }
 #productModal #modalGallery button { width:64px; height:70px; }
 #productModal #modalGallery img { height:60px; }
 #productModal .modal-media .modal-img { height:380px; }
}
@media(max-width:699px) {
 #productModal .modal { display:block; }
 #productModal .modal-media { position:static; }
 #productModal .modal-body { border-left:0; }
}

/* Align each row of card prices and cart buttons despite wrapped titles. */
.product-body .product-price { margin-top:auto; padding-top:8px; }
.product-body .add-to-cart { flex-shrink:0; }