/** Shopify CDN: Minification failed
Line 192:52 Expected ":"
Line 192:83 Expected "}" to go with "{"
**/
/* ============================================================
GOURMAX V2 · Design system (no emojis)
============================================================ */
:root {
--gm-green-900:#1f3b25; --gm-green-800:#264e2d; --gm-green-700:#2d6a35; --gm-green-600:#398247; --gm-green-500:#4a9a5a; --gm-green-200:#c5dfc9; --gm-green-100:#e6f0e7;
--gm-red-600:#d94824; --gm-yellow-500:#f5c518; --gm-yellow-300:#f9d75e; --gm-mint-600:#1fa860; --gm-chocolate-700:#3a2117; --gm-rose-500:#c76585; --gm-saffron-500:#e78a2e;
--gm-cream-50:#ffffff; --gm-cream-100:#faf9f7; --gm-cream-200:#f1ede3; --gm-sand-200:#ece4ce; --gm-ink-900:#3a2117; --gm-ink-700:#5a3a25; --gm-ink-500:#826e5c; --gm-line-200:#e4dfd2; --gm-white:#ffffff;
--fg-1:var(--gm-ink-900); --fg-2:var(--gm-ink-700); --fg-3:var(--gm-ink-500); --bg-page:var(--gm-cream-50); --border-1:var(--gm-line-200);
--font-display:'Fraunces',Georgia,serif; --font-body:'Inter',system-ui,-apple-system,sans-serif; --font-util:'Oswald','Barlow Condensed',sans-serif; --font-accent:var(--font-display);
--r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:999px;
--shadow-1:0 1px 2px rgba(58,33,23,0.04),0 1px 1px rgba(58,33,23,0.03);
--shadow-2:0 4px 10px rgba(58,33,23,0.06),0 1px 2px rgba(58,33,23,0.04);
--shadow-3:0 12px 28px rgba(58,33,23,0.10),0 2px 4px rgba(58,33,23,0.06);
--ease-out:cubic-bezier(0.2,0.8,0.2,1);
}
/* tailwind-utility fallbacks */
.gourmax-section .grid { display: grid !important; }
.gourmax-section .flex { display: flex !important; }
.gourmax-section .items-center { align-items: center !important; }
.gourmax-section .items-end { align-items: flex-end !important; }
.gourmax-section .items-baseline { align-items: baseline !important; }
.gourmax-section .items-start { align-items: flex-start !important; }
.gourmax-section .justify-between { justify-content: space-between !important; }
.gourmax-section .justify-center { justify-content: center !important; }
.gourmax-section .flex-wrap { flex-wrap: wrap !important; }
.gourmax-section .flex-col { flex-direction: column !important; }
.gourmax-section .gap-2 { gap: 8px !important; } .gourmax-section .gap-3 { gap: 12px !important; } .gourmax-section .gap-4 { gap: 16px !important; } .gourmax-section .gap-6 { gap: 24px !important; } .gourmax-section .gap-8 { gap: 32px !important; } .gourmax-section .gap-12 { gap: 48px !important; }
.gourmax-section .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.gourmax-section .px-3 { padding-left: 12px !important; padding-right: 12px !important; } .gourmax-section .px-3\.5 { padding-left: 14px !important; padding-right: 14px !important; } .gourmax-section .px-6 { padding-left: 24px !important; padding-right: 24px !important; }
.gourmax-section .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.gourmax-section .mb-2 { margin-bottom: 8px !important; } .gourmax-section .mb-4 { margin-bottom: 16px !important; } .gourmax-section .mb-5 { margin-bottom: 20px !important; } .gourmax-section .mb-6 { margin-bottom: 24px !important; } .gourmax-section .mb-7 { margin-bottom: 28px !important; } .gourmax-section .mb-8 { margin-bottom: 32px !important; }
.gourmax-section .mt-1 { margin-top: 4px !important; }
.gourmax-section .rounded-full { border-radius: 999px !important; }
.gourmax-section .bg-white { background: #ffffff !important; }
.gourmax-section .border { border-width: 1px !important; border-style: solid !important; }
.gourmax-section .inline-flex { display: inline-flex !important; }
.gourmax-section .text-xs { font-size: 12px !important; }
.gourmax-section .text-center { text-align: center !important; }
.gourmax-section .font-semibold { font-weight: 600 !important; }
.gourmax-section .uppercase { text-transform: uppercase !important; }
.gourmax-section .font-util { font-family: var(--font-util) !important; }
.gourmax-section { width: 100%; }
.gourmax-section .max-w-7xl { max-width: min(95vw, 1700px) !important; margin-left: auto; margin-right: auto; }
.gourmax-section .max-w-6xl { max-width: min(95vw, 1500px) !important; margin-left: auto; margin-right: auto; }
.gourmax-section .max-w-5xl { max-width: min(95vw, 1400px) !important; margin-left: auto; margin-right: auto; }
.gourmax-section .max-w-4xl { max-width: min(94vw, 1280px) !important; margin-left: auto; margin-right: auto; }
.gourmax-section .max-w-3xl { max-width: min(92vw, 1080px) !important; margin-left: auto; margin-right: auto; }
.gourmax-header-inner { max-width: min(98vw, 1900px) !important; margin: 0 auto; }
.gourmax-section a { text-decoration: none; }
.gourmax-section img { max-width: 100%; height: auto; display: block; }
.gourmax-section button { font-family: inherit; cursor: pointer; }
.gourmax-section em { font-style: italic; }
@media (max-width: 640px) {
.gourmax-section .max-w-7xl, .gourmax-section .max-w-6xl, .gourmax-section .max-w-5xl, .gourmax-section .max-w-4xl, .gourmax-section .max-w-3xl { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
}
/* primitives */
.gx-kicker { font-family: var(--font-util); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gm-green-600); }
.gx-eyebrow { display: inline-block; font-family: var(--font-util); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 14px; background: var(--gm-cream-200); color: var(--gm-ink-900); border-radius: var(--r-pill); }
.gx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; font-family: var(--font-body); font-weight: 600; font-size: 15px; border-radius: var(--r-md); border: 1.5px solid transparent; transition: all 150ms var(--ease-out); cursor: pointer; white-space: nowrap; }
.gx-btn--primary { background: var(--gm-green-600); color: #fff; } .gx-btn--primary:hover { background: var(--gm-green-700); }
.gx-btn--ink { background: var(--gm-ink-900); color: #fff; } .gx-btn--ink:hover { background: #000; }
.gx-btn--outline { background: transparent; color: var(--gm-ink-900); border-color: var(--gm-ink-900); } .gx-btn--outline:hover { background: var(--gm-ink-900); color: #fff; }
.gx-btn--yellow { background: var(--gm-yellow-500); color: var(--gm-ink-900); } .gx-btn--yellow:hover { background: var(--gm-yellow-300); }
.gx-btn--lg { padding: 16px 30px; font-size: 16px; }
.gx-tag { display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-util); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--r-sm); background: var(--gm-cream-100); color: var(--gm-ink-900); }
.gx-tag--save{background:var(--gm-red-600);color:#fff;} .gx-tag--yellow{background:var(--gm-yellow-500);color:var(--gm-ink-900);} .gx-tag--ink{background:var(--gm-ink-900);color:#fff;} .gx-tag--green{background:var(--gm-green-600);color:#fff;}
.gx-stars { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-3); }
.gx-stars__row { color: #f5a623; letter-spacing: 1px; }
.gx-stars b { color: var(--fg-1); font-weight: 600; }
/* ============================================================
ICON SYSTEM — mask-image SVG icons (color via background-color)
Use:
============================================================ */
.gx-ic { display: inline-block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; }
.gx-ic--package { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--bowl { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--leaf { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--flame { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--user { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--image { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--shield { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--block { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--check { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--wheat { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--bolt { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--truck { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--mail { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--phone { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--chat { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--pin { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--scale { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--plane { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--smile { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--sparkle { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--heart { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--heart-fill { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--link { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--cross { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--muscle { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--sprout { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--chili { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--nut { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.gx-ic--lg { width: 32px; height: 32px; }
.gx-ic--xl { width: 56px; height: 56px; }
.gx-ic--2xl { width: 88px; height: 88px; }
/* ============================================================
PLACEHOLDER — gradient bg + centered SVG icon + label pill
============================================================ */
.gx-placeholder { position: relative; background: linear-gradient(135deg, var(--gm-green-100) 0%, var(--gm-cream-100) 60%, var(--gm-yellow-300) 100%); border: 1px solid var(--border-1); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; }
.gx-placeholder::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 80%, rgba(245,197,24,0.18) 0%, transparent 50%), radial-gradient(circle at 70% 20%, rgba(217,72,36,0.10) 0%, transparent 45%); pointer-events: none; }
.gx-placeholder .gx-ic { width: clamp(48px, 8vw, 88px); height: clamp(48px, 8vw, 88px); color: var(--gm-ink-700); opacity: 0.5; position: relative; z-index: 2; }
.gx-placeholder span { position: relative; z-index: 2; background: #fff; border: 1px solid var(--border-1); color: var(--gm-ink-900); padding: 6px 14px; border-radius: var(--r-pill); font-family: var(--font-util); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; box-shadow: 0 2px 8px rgba(58,33,23,0.06); }
/* legacy: if no .gx-ic child exists, still show a package icon as background */
.gx-placeholder:not(:has(.gx-ic))::before { content: ''; width: clamp(48px, 8vw, 88px); height: clamp(48px, 8vw, 88px); background-color: var(--gm-ink-700); opacity: 0.5; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; position: relative; z-index: 2; }
.gx-placeholder--portrait { background: linear-gradient(135deg, var(--gm-green-200) 0%, var(--gm-green-100) 60%, var(--gm-cream-100) 100%); }
.gx-placeholder--cover { background: linear-gradient(135deg, var(--gm-yellow-300) 0%, var(--gm-saffron-500) 100%); }
.gx-placeholder--bowl { background: linear-gradient(135deg, var(--gm-cream-200) 0%, var(--gm-yellow-300) 100%); }
.gx-placeholder--leaf { background: linear-gradient(135deg, var(--gm-green-100) 0%, var(--gm-green-200) 100%); }
.gx-placeholder--spice { background: linear-gradient(135deg, #fdebe5 0%, var(--gm-red-600) 100%); }
/* animations */
@keyframes gx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gx-marquee { display: flex; gap: 48px; white-space: nowrap; animation: gx-marquee 30s linear infinite; }
@keyframes gx-wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(-1deg); } }
.gx-wiggle { animation: gx-wiggle 4s ease-in-out infinite; }
.gx-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.gx-reveal.is-visible { opacity: 1; transform: none; }
/* header */
.gx-h { position: sticky; top: 0; z-index: 90; background: var(--gm-white); border-bottom: 1px solid var(--border-1); transition: box-shadow 200ms ease; }
.gx-h.is-scrolled { box-shadow: var(--shadow-1); }
.gx-h__announce { background: var(--gm-green-800); color: #fff; padding: 10px 20px; font-family: var(--font-util); font-size: 12px; letter-spacing: 0.08em; text-align: center; font-weight: 500; }
.gx-h__announce b { color: var(--gm-yellow-500); }
.gx-h__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 0 32px; min-height: 180px; }
.gx-h__menu { justify-self: start; display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.gx-h__menu a { font-family: var(--font-util); font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-ink-900); white-space: nowrap; padding: 4px 0; position: relative; }
.gx-h__menu a:hover { color: var(--gm-green-700); }
.gx-h__menu a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px; background: var(--gm-green-700); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; }
.gx-h__menu a:hover::after { transform: scaleX(1); }
.gx-h__logo { justify-self: center; display: flex; align-items: center; }
.gx-h__logo img { height: 180px; width: auto; }
.gx-h__icons { justify-self: end; display: flex; align-items: center; gap: 8px; }
.gx-h__icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gm-ink-900); background: transparent; border: none; position: relative; transition: background 200ms; }
.gx-h__icon:hover { background: var(--gm-cream-100); color: var(--gm-green-700); }
.gx-h__cart-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50%; background: var(--gm-green-600); color: #fff; font-family: var(--font-util); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.gx-h__marquee { background: var(--gm-cream-100); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); padding: 10px 0; overflow: hidden; font-family: var(--font-util); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-ink-900); }
.gx-h__marquee span { display: inline-block; margin: 0 24px; }
.gx-h__marquee b { color: var(--gm-green-600); margin: 0 8px; }
@media (max-width: 1100px) { .gx-h__nav { min-height: 140px; padding: 0 20px; } .gx-h__logo img { height: 130px; } }
@media (max-width: 900px) { .gx-h__nav { min-height: 110px; padding: 0 16px; } .gx-h__menu { gap: 16px; } .gx-h__menu a { font-size: 13px; } .gx-h__logo img { height: 90px; } }
@media (max-width: 640px) { .gx-h__nav { grid-template-columns: 1fr auto 1fr; min-height: 80px; } .gx-h__menu { display: none; } .gx-h__logo img { height: 64px; } .gx-h__icon { width: 36px; height: 36px; } }
/* footer */
.gx-f { background: var(--gm-ink-900); color: var(--gm-cream-100); margin-top: 80px; padding: 60px 0 24px; }
.gx-f__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.gx-f__brand img { height: 56px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.gx-f__tag { font-family: var(--font-display); font-size: 22px; color: #fff; font-weight: 500; line-height: 1.3; margin: 0 0 14px; }
.gx-f__body { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.75); }
.gx-f__fssai { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.06); border-radius: var(--r-pill); font-size: 12px; color: rgba(255,255,255,0.85); }
.gx-f__fssai-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--gm-green-600); color: #fff; font-family: var(--font-util); font-weight: 700; font-size: 9px; display: grid; place-items: center; }
.gx-f__col h4 { font-family: var(--font-util); font-size: 11px; letter-spacing: 0.16em; color: var(--gm-yellow-500); text-transform: uppercase; margin-bottom: 14px; font-weight: 600; }
.gx-f__col a { display: block; color: rgba(255,255,255,0.8); font-size: 14px; padding: 5px 0; transition: color 150ms; }
.gx-f__col a:hover { color: var(--gm-yellow-500); }
.gx-f__bottom { max-width: 1280px; margin: 50px auto 0; padding: 22px 24px 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.6); }
@media (max-width: 860px) { .gx-f__inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .gx-f__inner { grid-template-columns: 1fr; gap: 28px; } }
/* page color flourishes */
.gx-ph { position: relative; overflow: hidden; }
.gx-ph::before { content: ''; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(57,130,71,0.18) 0%, rgba(57,130,71,0) 70%); pointer-events: none; }
.gx-ph::after { content: ''; position: absolute; bottom: -120px; left: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(245,197,24,0.20) 0%, rgba(245,197,24,0) 70%); pointer-events: none; }
.gx-ph > div { position: relative; z-index: 1; }
.gx-fnd { position: relative; }
.gx-fnd::before { content: ''; position: absolute; top: 60px; right: 4%; width: 8px; height: 8px; background: var(--gm-yellow-500); border-radius: 50%; opacity: 0.6; box-shadow: 24px 24px 0 var(--gm-green-500), 48px 8px 0 var(--gm-red-600), 16px 56px 0 var(--gm-saffron-500); pointer-events: none; z-index: 0; }
.gx-cf { position: relative; }
.gx-cf::after { content: ''; position: absolute; bottom: 40px; left: 4%; width: 6px; height: 6px; background: var(--gm-green-500); border-radius: 50%; opacity: 0.5; box-shadow: 20px 0 0 var(--gm-yellow-500), 40px 0 0 var(--gm-red-600), 60px 0 0 var(--gm-saffron-500), 80px 0 0 var(--gm-green-700); pointer-events: none; }
.gx-cart { background: linear-gradient(180deg, var(--gm-white) 0%, var(--gm-cream-100) 100%) !important; }
.gx-cart aside { border-top: 4px solid var(--gm-green-600) !important; }
.gx-vs::before { content: ''; position: absolute; top: 20%; left: -60px; width: 180px; height: 180px; border-radius: 50% 60% 50% 70% / 50% 50% 70% 50%; background: rgba(217,72,36,0.06); pointer-events: none; z-index: 0; }
.gx-vs::after { content: ''; position: absolute; bottom: 20%; right: -60px; width: 200px; height: 200px; border-radius: 60% 50% 70% 50% / 70% 50% 50% 60%; background: rgba(57,130,71,0.06); pointer-events: none; z-index: 0; }
.gx-vs { position: relative; } .gx-vs > div { should be... wait this is corruption.