/* Acharer Hari design tokens: palette taken from the final logo.
   Logo red #E8193F is used for large display/decoration; buttons and links use the same hue deepened to #D4123A (5.3:1 with white).
   Lime #8EBA3F is a FILL only (2.3:1), never text. Contrast: ink/bg 17:1 · white/red 5.3:1 · red/bg 5.2:1 · white/green 7.1:1 */
:root {
  --red: #D4123A; --red-logo: #E8193F; --red-hover: #B80F32; --red-press: #9A0C2A; --red-tint: #FDE8EC;
  --green: #07663A; --green-dark: #05522F; --green-tint: #E6F3EB; --lime: #8EBA3F; --lime-tint: #EEF6DD;
  --bg: #FFFBF6; --bg-alt: #F2F8EC; --paper: #FFFFFF; --line: #E7E2D8; --line-strong: #CFC8BA;
  --ink: #1C1917; --ink-muted: #57534E; --ink-inverse: #FFFBF6;
  --text: var(--ink); --text-muted: var(--ink-muted); --success: var(--green-dark); --danger: #B3261E; --focus: #1F5FBF;
  --font-display-bn: 'Noto Serif Bengali', 'Hind Siliguri', serif; --font-display-en: 'Fraunces', 'Noto Serif Bengali', Georgia, serif; --font-body: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-md: 1.0625rem; --fs-lg: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); --fs-h1: clamp(2.1rem, 1.3rem + 4vw, 4.2rem);
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6.5rem;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(28, 25, 23, .08); --shadow-2: 0 6px 20px -6px rgba(28, 25, 23, .18); --shadow-3: 0 24px 48px -16px rgba(28, 25, 23, .26);
  --ease: cubic-bezier(.22, .61, .36, 1); --t-fast: 160ms; --t-base: 280ms; --t-slow: 640ms; --container: 1200px; --gutter: clamp(1rem, 4vw, 2rem); --header-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-md)/1.65 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:lang(bn) { line-height: 1.75; }               /* Bengali needs taller lines for matras and conjuncts */
img, svg { max-width: 100%; display: block; } img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display-bn); font-weight: 700; line-height: 1.25; margin: 0 0 var(--s3); letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.18; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
.en { font-family: var(--font-display-en); letter-spacing: .01em; }
p { margin: 0 0 var(--s4); text-wrap: pretty; } a { color: var(--red); text-underline-offset: .2em; } a:hover { color: var(--red-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--lime); color: var(--ink); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--s8); } @media (min-width: 900px) { .section { padding-block: var(--s9); } }
.section--alt { background: var(--bg-alt); } .section--dark { background: var(--green-dark); color: var(--ink-inverse); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s4); top: -100px; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r-sm); z-index: 100; } .skip-link:focus { top: var(--s3); }
.eyebrow { font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: var(--s3); display: block; }
/* Scroll reveal: progressive enhancement. Content is visible without JS and under reduced motion. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } }

/* ---------- Buttons: chili is THE call-to-action colour ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border: 1.5px solid transparent; border-radius: var(--r-md); font: 600 var(--fs-md)/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px -6px rgba(212, 18, 58, .55); } .btn--primary:hover { background: var(--red-hover); color: #fff; box-shadow: 0 10px 22px -8px rgba(212, 18, 58, .6); } .btn--primary:active { background: var(--red-press); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--secondary:hover { background: var(--ink); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--red); padding-inline: var(--s3); } .btn--ghost:hover { background: var(--red-tint); }
.btn--light { background: #fff; color: var(--red); } .btn--light:hover { background: #fff; color: var(--red-hover); }
.btn--block { width: 100%; } .btn--sm { min-height: 40px; padding-inline: var(--s4); font-size: var(--fs-sm); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--bg-alt); color: #7A6657; border-color: var(--line); box-shadow: none; cursor: not-allowed; transform: none; }
.btn.is-loading { pointer-events: none; color: transparent; position: relative; } .btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Forms ---------- */
.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); } .field > label { font-weight: 600; font-size: var(--fs-sm); } .field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: var(--s3) var(--s4); background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.textarea { min-height: 104px; resize: vertical; } .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px var(--red-tint); }
.field.has-error .input { border-color: var(--danger); } .field .error { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; }
.choice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); cursor: pointer; } .choice:has(input:checked) { border-color: var(--red); background: var(--red-tint); } .choice input { accent-color: var(--red); width: 20px; height: 20px; margin-top: 3px; }
/* ---------- Badges, chips, rating, price ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1.2 var(--font-body); }
.badge--sale { background: var(--red); color: #fff; } .badge--best { background: var(--lime); color: var(--ink); } .badge--new { background: var(--green); color: #fff; } .badge--soft { background: var(--bg-alt); color: var(--ink); border: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--paper); font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer; transition: all var(--t-fast) var(--ease); }
.chip:hover { border-color: var(--ink); } .chip[aria-pressed="true"], .chip.is-active, .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip.is-out { color: #7A6657; text-decoration: line-through; border-style: dashed; }
.stars { display: inline-flex; align-items: center; gap: 2px; color: #B4790B; font-size: var(--fs-sm); } .stars .count { color: var(--text-muted); margin-left: 6px; font-size: var(--fs-xs); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); font-variant-numeric: tabular-nums; } .price__now { font: 700 1.35rem/1 var(--font-body); color: var(--ink); } .price__was { color: var(--text-muted); text-decoration: line-through; font-size: var(--fs-sm); } .price__off { color: var(--red); font: 700 var(--fs-xs)/1 var(--font-body); }
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; } .stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .stock--in { color: var(--green-dark); } .stock--low { color: #8A5A00; } .stock--out { color: var(--danger); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); } .qty button { width: 44px; height: 46px; border: 0; background: none; font-size: 1.25rem; cursor: pointer; color: var(--ink); } .qty button:hover { background: var(--bg-alt); } .qty output { min-width: 40px; text-align: center; font-weight: 700; }
.alert { padding: var(--s4); border-radius: var(--r-md); border: 1px solid; font-size: var(--fs-sm); } .alert--ok { background: var(--green-tint); border-color: #B9C79A; color: #2F4216; } .alert--err { background: #FBE9E7; border-color: #E8B4AE; color: #7A1B14; } .alert--info { background: var(--lime-tint); border-color: #CBE0A0; color: #3B5A12; }
/* ---------- Header ---------- */
.announce { background: var(--ink); color: var(--bg); text-align: center; font-size: var(--fs-xs); letter-spacing: .06em; padding: var(--s2) var(--gutter); } .announce span { color: var(--lime); margin-inline: .6em; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 251, 246, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--t-base), box-shadow var(--t-base); } .site-header.is-stuck { border-color: var(--line); box-shadow: var(--shadow-1); }
.site-header__row { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }
.brand { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; color: var(--red); margin-right: auto; } .brand b { font: 800 1.45rem/1.15 var(--font-display-bn); } .brand small { font: 600 .66rem/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--green); margin-top: 2px; }
.nav { display: none; gap: var(--s5); } .nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); padding: var(--s2) 0; background: linear-gradient(var(--red), var(--red)) 0 100%/0 2px no-repeat; transition: background-size var(--t-base) var(--ease); } .nav a:hover, .nav a[aria-current] { background-size: 100% 2px; color: var(--ink); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; color: var(--ink); cursor: pointer; position: relative; } .icon-btn:hover { background: var(--bg-alt); } .icon-btn .dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font: 700 .7rem/18px var(--font-body); text-align: center; padding: 0 4px; }
@media (min-width: 900px) { .nav { display: flex; } .menu-toggle { display: none; } }
/* ---------- Product card ---------- */
.pcard { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.pcard__media { --glass: rgba(43, 26, 18, .34); --glass-fill: rgba(43, 26, 18, .06); position: relative; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 40%, #FFF 0%, var(--bg-alt) 85%); display: grid; place-items: center; overflow: hidden; } .pcard__media > :is(img, svg) { width: 78%; transition: transform var(--t-slow) var(--ease); } .pcard:hover .pcard__media > :is(img, svg) { transform: scale(1.06) rotate(-1.2deg); }
.pcard__badges { position: absolute; left: var(--s3); top: var(--s3); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pcard__wish { position: absolute; right: var(--s3); top: var(--s3); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 253, 248, .92); box-shadow: var(--shadow-1); cursor: pointer; display: grid; place-items: center; color: var(--ink); transition: transform var(--t-fast) var(--ease), color var(--t-fast); } .pcard__wish:hover { transform: scale(1.1); color: var(--red); } .pcard__wish[aria-pressed="true"] { color: var(--red); } .pcard__wish[aria-pressed="true"] svg { fill: currentColor; }
.pcard__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s5); flex: 1; } .pcard__title { font: 700 1.15rem/1.35 var(--font-display-bn); margin: 0; } .pcard__title a { color: var(--ink); text-decoration: none; } .pcard__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.pcard__desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__variants { display: flex; gap: 6px; flex-wrap: wrap; position: relative; z-index: 2; } .pcard__variants .chip { min-height: 30px; padding-inline: var(--s3); font-size: var(--fs-xs); }
.pcard__actions { display: flex; gap: var(--s2); margin-top: auto; padding-top: var(--s3); position: relative; z-index: 2; } .pcard__actions .btn { min-height: 44px; } .pcard__actions .btn--primary { flex: 1; }
.pcard.is-out .pcard__media > :is(img, svg) { filter: grayscale(.7) opacity(.65); }
/* ---------- Layout helpers used by the design page & storefront ---------- */
.grid { display: grid; gap: var(--s5); } .grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.section-head { display: grid; gap: var(--s2); max-width: 46rem; margin-bottom: var(--s7); } .section-head p { color: var(--text-muted); font-size: var(--fs-lg); margin: 0; }
.cat-tile { display: grid; justify-items: center; gap: var(--s3); padding: var(--s5) var(--s3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); font-weight: 700; text-align: center; transition: transform var(--t-base) var(--ease), border-color var(--t-base), background var(--t-base); } .cat-tile:hover { transform: translateY(-3px); border-color: var(--red); background: #fff; color: var(--ink); } .cat-tile svg { width: 56px; height: 56px; } .cat-tile small { display: block; font-weight: 500; color: var(--text-muted); font-size: var(--fs-xs); }
.trust { display: flex; gap: var(--s4); align-items: flex-start; } .trust__icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; }
.hero { position: relative; overflow: hidden; background: radial-gradient(1100px 520px at 85% -10%, #E4F1D2 0%, transparent 60%), var(--bg); }
.hero__grid { display: grid; gap: var(--s7); align-items: center; padding-block: var(--s7) var(--s8); } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; padding-block: var(--s8) var(--s9); } }
.hero__lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 34rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero__panel { position: relative; aspect-ratio: 1 / 1.02; border-radius: 32px; overflow: hidden; background: radial-gradient(120% 90% at 30% 15%, #0E8A4E 0%, var(--green) 45%, #033D22 100%); box-shadow: var(--shadow-3); isolation: isolate; }
.hero__panel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 100%, rgba(142, 186, 63, .38), transparent 70%); z-index: -1; }
.hero__jar { position: absolute; left: 50%; bottom: 5%; width: 56%; transform: translateX(-50%); filter: drop-shadow(0 28px 28px rgba(0, 0, 0, .35)); animation: float 7s ease-in-out infinite; } @keyframes float { 50% { transform: translateX(-50%) translateY(-8px); } }
.hero__ing { position: absolute; width: 17%; animation: drift 9s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28)); } @keyframes drift { 50% { transform: translateY(-10px) rotate(var(--r, 4deg)); } }
.hero__tag { position: absolute; left: var(--s4); top: var(--s4); right: var(--s4); display: flex; justify-content: space-between; color: var(--bg); font: 600 var(--fs-xs)/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.swatch { border-radius: var(--r-md); padding: var(--s4); min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; font-size: var(--fs-xs); border: 1px solid rgba(0,0,0,.06); } .swatch b { font-size: var(--fs-sm); }
.site-footer { background: var(--green-dark); color: var(--bg); padding-block: var(--s8) var(--s6); } .site-footer a { color: var(--bg); text-decoration: none; opacity: .85; } .site-footer a:hover { opacity: 1; color: var(--lime); }
/* ---------- Mobile menu (no-JS <details> drawer) ---------- */
.mobile-menu { position: relative; } .mobile-menu > summary { list-style: none; } .mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(88vw, 320px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s3); display: grid; z-index: 60; animation: pop var(--t-base) var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.mobile-menu__panel a { padding: var(--s3) var(--s4); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 600; } .mobile-menu__panel a:hover { background: var(--bg-alt); }
.header-search { display: none; position: relative; } .header-search .input { min-height: 42px; padding-left: 40px; border-radius: var(--r-pill); width: 220px; } .header-search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-muted); }
@media (min-width: 1000px) { .header-search { display: block; } }
.footer-grid { display: grid; gap: var(--s6); } @media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } } .footer-grid h4 { font: 700 var(--fs-sm)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: var(--s4); } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); font-size: var(--fs-sm); }
.footer-bottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(251, 245, 232, .18); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; font-size: var(--fs-xs); opacity: .8; }
.type-row { display: grid; gap: var(--s2); padding-block: var(--s4); border-bottom: 1px solid var(--line); } .type-row code { font-size: var(--fs-xs); color: var(--text-muted); }
/* ================= Chunk 2b: storefront pages ================= */
.section--tight { padding-block: var(--s6) var(--s8); } .h1-sm { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.75rem); } .h3 { font: 700 var(--fs-h3)/1.3 var(--font-display-bn); margin-bottom: var(--s3); } .muted { color: var(--text-muted); } .more { margin-top: var(--s6); text-align: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s5); } .crumbs a { color: var(--ink-muted); } .crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .why-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .trust__t { font-size: 1.1rem; margin-bottom: 4px; } .trust__d { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.trust-strip { background: var(--green-tint); border-block: 1px solid #D5DEC0; color: #2F4216; font-size: var(--fs-sm); font-weight: 600; } .trust-strip__row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); justify-content: center; padding-block: var(--s3); } .trust-strip span { display: inline-flex; align-items: center; gap: var(--s2); }
/* hero slider (no-JS shows slide 1; JS adds rotation) */
.hero-slides { display: grid; } .hero-slide { grid-area: 1 / 1; transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow); } .hero-slides[data-js] .hero-slide:not(.is-active) { opacity: 0; visibility: hidden; } .hero-slide:not(:first-child):not(.is-active) { display: none; } .hero-slides[data-js] .hero-slide:not(:first-child) { display: grid; }
.hero-dots { display: flex; justify-content: center; gap: var(--s2); padding-bottom: var(--s5); } .hero-dots[hidden] { display: none; } .js .hero-dots[hidden] { display: flex; } .hero-dots button { width: 12px; height: 12px; border-radius: 50%; border: 0; background: var(--line-strong); cursor: pointer; padding: 0; position: relative; } .hero-dots button::after { content: ""; position: absolute; inset: -16px -6px; } .hero-dots button[aria-current="true"] { background: var(--red); width: 28px; border-radius: 6px; }
.hero__h { font-size: var(--fs-h1); line-height: 1.18; } .hero__tagline { font: 700 var(--fs-lg)/1.4 var(--font-display-bn); color: var(--green-dark); margin: var(--s4) 0 0; } .hero__panel--photo img { width: 100%; height: 100%; object-fit: cover; }
.story { display: grid; gap: var(--s7); align-items: center; } @media (min-width: 900px) { .story { grid-template-columns: .8fr 1.2fr; } } .story__art { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding: var(--s6); background: var(--bg-alt); border-radius: var(--r-lg); max-width: 380px; } .story__art svg { width: 100%; aspect-ratio: 1; }
.story__body { font-size: var(--fs-lg); max-width: 40rem; } .story__quote { margin: var(--s5) 0 0; padding-left: var(--s4); border-left: 4px solid var(--red); font: 800 var(--fs-h3)/1.4 var(--font-display-bn); color: var(--red); }
.ing-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .ing { text-align: center; padding: var(--s4); } .ing svg { width: 72px; height: 72px; margin: 0 auto var(--s3); transition: transform var(--t-base) var(--ease); } .ing:hover svg { transform: translateY(-4px) rotate(-3deg); } .ing h3 { font-size: 1.05rem; } .ing p { font-size: var(--fs-sm); opacity: .8; margin: 0; }
.review { margin: 0; padding: var(--s5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: var(--s3); align-content: start; } .review blockquote { margin: 0; } .review figcaption { font-size: var(--fs-sm); color: var(--text-muted); }
.newsletter { display: grid; gap: var(--s5); align-items: center; } @media (min-width: 900px) { .newsletter { grid-template-columns: 1fr 1fr; } .newsletter .alert { grid-column: 1 / -1; } } .newsletter__form { display: flex; gap: var(--s3); flex-wrap: wrap; } .newsletter__form .field { flex: 1 1 240px; }
/* shop */
.shop { display: grid; gap: var(--s6); } @media (min-width: 900px) { .shop { grid-template-columns: 260px 1fr; align-items: start; } .filters { position: sticky; top: calc(var(--header-h) + 16px); } .filters__btn { display: none; } .filters__body { display: block !important; } }
.filters__body { display: none; margin-top: var(--s4); padding: var(--s5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); } @media (min-width: 900px) { .filters__body { margin-top: 0; } } #filters-toggle:checked ~ .filters__body { display: block; } #filters-toggle:focus-visible ~ .filters__btn { outline: 3px solid var(--focus); outline-offset: 3px; } .filters__btn { cursor: pointer; }
.fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; } .fieldset legend { font-weight: 600; font-size: var(--fs-sm); padding: 0; margin-bottom: var(--s2); } .pricebox { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .choice--sm { padding: var(--s3); margin-bottom: var(--s4); align-items: center; } .choice--sm input { margin: 0; }
.filters__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); } .filters__h { font: 700 var(--fs-xs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin: 0 0 var(--s3); } .filters__cats { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: var(--s4); } .filters__cats a { color: var(--ink); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: var(--fs-sm); } .filters__cats a:hover { background: var(--bg-alt); } .filters__cats a[aria-current] { background: var(--red-tint); color: var(--red-press); font-weight: 700; } .filters__cats small { color: var(--text-muted); }
.shop__count { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--s4); } .pagination { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; align-items: center; margin-top: var(--s7); } .pagination .chip { text-decoration: none; color: var(--ink); } .pagination .chip.is-active { color: var(--bg); }
.empty { text-align: center; padding-block: var(--s8); display: grid; justify-items: center; gap: var(--s3); } .empty svg { width: 120px; opacity: .85; }
/* product detail */
.pdp { display: grid; gap: var(--s6); } @media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: start; } .gallery { position: sticky; top: calc(var(--header-h) + 16px); } }
.gallery__main { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #fff, var(--bg-alt) 85%); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; place-items: center; overflow: hidden; } .gallery__main > img { width: 100%; height: 100%; object-fit: cover; } .gallery__main > svg { width: 62%; } .gallery__note { position: absolute; bottom: var(--s3); left: 0; right: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.gallery__thumbs { display: flex; gap: var(--s3); list-style: none; padding: 0; margin: var(--s4) 0 0; flex-wrap: wrap; } .gallery__thumbs a { display: block; border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; width: 72px; height: 72px; } .gallery__thumbs a[aria-current] { border-color: var(--red); } .gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__short { font-size: var(--fs-lg); color: var(--text-muted); } .price--lg .price__now { font-size: 2rem; } .variant-links { display: flex; gap: var(--s2); flex-wrap: wrap; } .variant-links .chip { text-decoration: none; color: var(--ink); min-height: 44px; } .variant-links .chip.is-active { color: var(--bg); }
.buybox { margin-block: var(--s5); } .buybox__note { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--s2) 0 0; } .meta { display: grid; gap: var(--s2); margin: var(--s5) 0; font-size: var(--fs-sm); } .meta div { display: flex; gap: var(--s3); } .meta dt { min-width: 84px; color: var(--text-muted); } .meta dd { margin: 0; font-weight: 600; }
.pdp__assure { list-style: none; padding: var(--s4) 0 0; margin: 0; border-top: 1px solid var(--line); display: grid; gap: var(--s2); font-size: var(--fs-sm); color: var(--green-dark); font-weight: 600; } .pdp__assure li { display: flex; gap: var(--s2); align-items: center; }
.pdp__details { display: grid; gap: var(--s6); margin-top: var(--s8); max-width: 48rem; } .reviews { margin-top: var(--s8); }
.btn[disabled].btn--primary { background: var(--bg-alt); color: #5F4C40; border: 1.5px dashed var(--line-strong); }

/* ================= PHP edition additions ================= */
.hero__panel .hero__jar { --lid: #D4123A; --lid-dark: #A10D2E; --glass: rgba(255,255,255,.6); --glass-fill: rgba(255,255,255,.14); }
.brand { display: flex; align-items: center; margin-right: auto; } .brand img { height: 52px; width: auto; } @media (max-width: 520px) { .brand img { height: 42px; } } :root { --header-h: 76px; }
.footer-logo { background: #fff; border-radius: var(--r-md); padding: var(--s3) var(--s4); display: inline-block; margin-bottom: var(--s4); } .footer-logo img { height: 56px; width: auto; }
.cart-layout, .checkout-layout { display: grid; gap: var(--s6); } @media (min-width: 900px) { .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } .checkout-layout { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); } .panel h2 { font-size: 1.25rem; margin-bottom: var(--s4); }
.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); align-items: center; } .cart-line:last-child { border-bottom: 0; }
.cart-line__img { width: 76px; height: 76px; background: radial-gradient(circle at 50% 40%, #fff, var(--bg-alt) 85%); border-radius: var(--r-md); display: grid; place-items: center; --glass: rgba(28,25,23,.34); --glass-fill: rgba(28,25,23,.06); } .cart-line__img svg { width: 58%; } .cart-line__img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.cart-line h3 { font: 700 1.05rem/1.3 var(--font-display-bn); margin: 0 0 2px; } .cart-line h3 a { color: var(--ink); text-decoration: none; } .cart-line__meta { color: var(--text-muted); font-size: var(--fs-sm); } .cart-line__end { text-align: right; display: grid; gap: var(--s2); justify-items: end; }
.cart-line form.inline { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } .qty-input { width: 72px; min-height: 40px; padding: 0 var(--s3); text-align: center; } .link-btn { background: none; border: 0; color: var(--red); cursor: pointer; font: inherit; font-size: var(--fs-sm); padding: 0; text-decoration: underline; }
.sumrow { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s2); } .sumrow--total { border-top: 1px solid var(--line-strong); margin-top: var(--s3); padding-top: var(--s4); font-size: 1.25rem; font-weight: 700; } .sumrow small { color: var(--text-muted); }
.form-grid { display: grid; gap: 0 var(--s4); } @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span2 { grid-column: 1 / -1; } } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.timeline { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: 0; } .timeline li { position: relative; padding: 0 0 var(--s5) var(--s6); color: var(--text-muted); } .timeline li::before { content: ""; position: absolute; left: 7px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); } .timeline li::after { content: ""; position: absolute; left: 13px; top: 20px; bottom: -6px; width: 2px; background: var(--line); } .timeline li:last-child::after { display: none; }
.timeline li.done { color: var(--ink); } .timeline li.done::before { background: var(--green); } .timeline li.done::after { background: var(--green); } .timeline li.now::before { background: var(--red); box-shadow: 0 0 0 5px var(--red-tint); } .timeline b { display: block; } .timeline small { color: var(--text-muted); }
.status-pill { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1.4 var(--font-body); background: var(--bg-alt); color: var(--ink); border: 1px solid var(--line); } .status-pill--delivered { background: var(--green-tint); color: var(--green-dark); border-color: #B7DCC6; } .status-pill--cancelled, .status-pill--returned { background: var(--red-tint); color: var(--red-press); border-color: #F3B7C3; } .status-pill--pending { background: var(--lime-tint); color: #3B5A12; border-color: #CBE0A0; }
.order-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .order-table th, .order-table td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; } .order-table th { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .order-table td.num, .order-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto; }
.big-check { width: 72px; height: 72px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; margin-bottom: var(--s4); } .ordnum { font: 800 1.6rem/1.2 var(--font-body); letter-spacing: .04em; color: var(--green-dark); background: var(--green-tint); display: inline-block; padding: var(--s2) var(--s4); border-radius: var(--r-md); }
.flash { padding-block: var(--s3); } .flash .alert { margin-bottom: var(--s2); }
.buybox__row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; } .buybox__row .qty-input { width: 84px; min-height: 48px; } .pagebody p { font-size: var(--fs-md); }
.pcard__actions form { flex: 1; display: flex; } .pcard__actions form .btn { width: 100%; }
.coupon { display: flex; gap: var(--s2); margin: var(--s4) 0; } .coupon .input { min-height: 44px; text-transform: uppercase; }
@media print { .site-header, .announce, .site-footer, .adm-side, .no-print, .skip-link { display: none !important; } body.admin { display: block; background: #fff; } .panel { border: 0; padding: 0; } }
.print-sheet { max-width: 800px; margin: 0 auto; padding: 24px; background: #fff; } .print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--green); padding-bottom: 12px; margin-bottom: 16px; } .print-head img { height: 64px; width: auto; }