/* ============================================================
   SCNS Siva Cashew Nuts — Global Stylesheet
   Brand: Red #C0202A · Yellow #F5C518 · Blue #1A3C6E
   Sections: 1 Base · 2 Layout · 3 Buttons · 4 Navigation · 5 Cart
             6 Page header · 7 Forms · 8 Footer · 9 Shared blocks
             10 Home · 11 About · 12 Contact · 13 Shop · 14 Checkout
             15 Wholesale · 16 Legal · 17 Responsive · 18 Print
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* 1 · BASE ---------------------------------------------------- */
:root {
  --red: #C0202A; --red-l: #fef2f2;
  --yellow: #F5C518; --yellow-d: #b8920e;
  --blue: #1A3C6E; --blue-l: #e8eff8;
  --white: #fff; --off: #f9f9f8; --g50: #f5f5f4;
  --g100: #e8e8e6; --g300: #c0c0bc; --g500: #606060; --g700: #2a2a2a; --g900: #111;
  --green: #25D366;
  --fh: 'Playfair Display', Georgia, serif;
  --fb: 'Plus Jakarta Sans', system-ui, sans-serif;
  --r: 10px; --rl: 18px; --rp: 999px;
  --nav-h: 66px; --max-w: 1160px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); font-size: 16px; }
body { font-family: var(--fb); background: var(--white); color: var(--g900); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; object-fit: cover; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--fb); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--fb); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.h1 { font-family: var(--fh); font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 1.04; font-weight: 900; }
.h2 { font-family: var(--fh); font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.1; font-weight: 700; }
.h3 { font-family: var(--fh); font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.2; font-weight: 700; }
.em { font-style: italic; color: var(--red); }
.lead { font-size: clamp(.9rem, 1.5vw, 1.05rem); line-height: 1.8; }
.body-text { font-size: .975rem; line-height: 1.82; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: .8rem; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex-shrink: 0; }
.eyebrow-yellow { color: var(--yellow); }
.eyebrow-white { color: #fff; }

/* 2 · LAYOUT -------------------------------------------------- */
.sec { padding: 5rem clamp(1.2rem, 5vw, 5rem); position: relative; overflow: hidden; }
.sec-sm { padding: 3.5rem clamp(1.2rem, 5vw, 5rem); position: relative; overflow: hidden; }
.bg-white { background: var(--white); }
.bg-off { background: var(--off); }
.bg-blue { background: var(--blue); }
.wrap { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.sec-head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.sec-head .eyebrow { justify-content: center; }
.sec-head p { margin-top: .8rem; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }

/* 3 · BUTTONS ------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .72rem 1.6rem; border: 2px solid transparent; border-radius: var(--rp); font-size: .875rem; font-weight: 700; transition: all .18s; white-space: nowrap; }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: transparent; color: var(--red); }
.btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-blue:hover { background: transparent; color: var(--blue); }
.btn-white { background: #fff; color: var(--blue); border-color: #fff; }
.btn-white:hover { background: transparent; color: #fff; }
.btn-outline { color: var(--g900); border-color: var(--g300); }
.btn-outline:hover { border-color: var(--g900); }
.btn-ghost-white { color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-ghost-white:hover { border-color: #fff; }
.btn-wa { background: var(--green); color: #fff; border-color: var(--green); }
.btn-wa:hover { background: transparent; color: #128C4A; border-color: #128C4A; }
.btn-sm { padding: .5rem 1.1rem; font-size: .8rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* 4 · NAVIGATION ---------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 300; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1rem, 4vw, 3.5rem); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--g100); transition: box-shadow .2s; }
.nav.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, .07); }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { padding: .4rem .8rem; border-radius: var(--r); font-size: .8rem; font-weight: 500; color: var(--g700); transition: all .15s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--red); background: var(--red-l); }
.nav-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.nav-soc { display: flex; gap: 5px; }
.nav-soc a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--g100); border-radius: 7px; color: var(--g500); transition: all .15s; }
.nav-soc a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.nav-cta { padding: .48rem 1.1rem; border-radius: var(--rp); background: var(--red); color: #fff; font-size: .78rem; font-weight: 700; transition: background .18s; }
.nav-cta:hover { background: var(--blue); }
.nav-cart { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--g100); border-radius: 50%; color: var(--g700); transition: all .15s; }
.nav-cart:hover { border-color: var(--red); color: var(--red); background: var(--red-l); }
.cart-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: none; align-items: center; justify-content: center; border-radius: var(--rp); background: var(--red); color: #fff; font-size: .62rem; font-weight: 700; }
.cart-count.has-items { display: flex; }
.burger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--g700); transition: all .25s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mob-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 299; flex-direction: column; padding: 1.5rem 1.5rem 2rem; background: #fff; overflow-y: auto; }
.mob-menu.open { display: flex; }
.mob-menu a { display: block; padding: 1rem .5rem; border-bottom: 1px solid var(--g100); font-size: 1.05rem; font-weight: 600; color: var(--g700); transition: color .15s; }
.mob-menu a:hover, .mob-menu a.active { color: var(--red); }
.mob-menu .mob-cta { margin-top: 1.5rem; padding: .85rem; border: none; border-radius: var(--rp); background: var(--red); color: #fff; font-size: .95rem; font-weight: 700; text-align: center; }

/* 5 · CART DRAWER --------------------------------------------- */
.cart-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(15, 37, 71, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 401; width: min(420px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 40px rgba(0, 0, 0, .15); transform: translateX(100%); transition: transform .3s ease; }
.cart-drawer.open { transform: none; }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--g100); }
.cart-head h2 { font-family: var(--fh); font-size: 1.25rem; }
.cart-close { width: 34px; height: 34px; border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--g500); }
.cart-close:hover { background: var(--g50); color: var(--g900); }
.cart-body { flex: 1; overflow-y: auto; padding: .5rem 1.3rem; }
.cart-empty { padding: 3rem 1rem; text-align: center; color: var(--g500); font-size: .9rem; }
.cart-empty .btn { margin-top: 1.2rem; }
.ci { display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--g100); }
.ci-img { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); background: #FFF7E6; overflow: hidden; }
.ci-img img { width: 100%; height: 100%; }
.ci-img img.ph { width: 60%; height: 60%; object-fit: contain; opacity: .8; }
.ci-name { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.ci-meta { font-size: .74rem; color: var(--g500); }
.ci-side { text-align: right; }
.ci-price { font-size: .85rem; font-weight: 700; margin-bottom: .35rem; }
.ci-remove { font-size: .7rem; color: var(--g500); text-decoration: underline; }
.ci-remove:hover { color: var(--red); }
.cart-foot { padding: 1.1rem 1.3rem 1.3rem; border-top: 1px solid var(--g100); background: var(--off); }
.cart-sub { display: flex; justify-content: space-between; margin-bottom: .3rem; font-size: 1rem; font-weight: 700; }
.cart-note { margin-bottom: 1rem; font-size: .75rem; color: var(--g500); }
.cart-foot .btn + .btn { margin-top: .6rem; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--g100); border-radius: var(--rp); background: #fff; }
.qty button { width: 30px; height: 30px; font-size: 1.05rem; font-weight: 700; color: var(--g700); border-radius: 50%; }
.qty button:hover:not(:disabled) { color: var(--red); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty span { min-width: 26px; text-align: center; font-size: .85rem; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 500; padding: .7rem 1.2rem; border-radius: var(--rp); background: var(--g900); color: #fff; font-size: .82rem; font-weight: 600; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: all .25s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* 6 · PAGE HEADER --------------------------------------------- */
.page-hero { position: relative; overflow: hidden; padding: 3rem clamp(1.2rem, 5vw, 5rem); background: var(--off); text-align: center; }
.page-hero::after { content: ''; position: absolute; top: -80px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: var(--red-l); opacity: .5; pointer-events: none; }
.page-hero .lead { max-width: 580px; margin: .8rem auto 0; }
.page-hero .eyebrow { justify-content: center; }

/* 7 · FORMS --------------------------------------------------- */
.form-box { padding: 2rem; border: 1.5px solid var(--g100); border-radius: var(--rl); background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .06); }
.form-box h3 { margin-bottom: .25rem; }
.form-sub { margin-bottom: 1.4rem; font-size: .82rem; color: var(--g500); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.fg label { font-size: .76rem; font-weight: 700; }
.fg input, .fg select, .fg textarea { width: 100%; padding: .65rem .85rem; border: 1.5px solid var(--g100); border-radius: var(--r); background: #fff; color: var(--g900); font-size: .86rem; outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192, 32, 42, .07); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--g300); }
.fg select { appearance: none; cursor: pointer; padding-right: 2rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23606060' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .85rem center; }
.fg .hint { font-size: .72rem; color: var(--g500); }
.f-submit { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; margin-top: .4rem; padding: .82rem; border-radius: var(--rp); background: var(--red); color: #fff; font-size: .9rem; font-weight: 700; transition: background .18s, transform .15s; }
.f-submit:hover:not(:disabled) { background: var(--blue); transform: translateY(-1px); }
.f-submit:disabled { opacity: .75; cursor: not-allowed; transform: none; }
.f-note { margin-top: .6rem; font-size: .72rem; color: var(--g500); text-align: center; }
.f-error { display: none; margin-top: .8rem; padding: .6rem .8rem; border-radius: var(--r); background: var(--red-l); color: var(--red); font-size: .8rem; font-weight: 600; }
.f-error.show { display: block; }
.f-ok { display: none; flex-direction: column; align-items: center; padding: 2.5rem 1rem; text-align: center; }
.f-ok.show { display: flex; }
.f-ok-tick { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; border-radius: 50%; background: #dcfce7; color: #15803d; animation: popIn .4s cubic-bezier(.18, .89, .32, 1.28) both; }
.f-ok h3 { margin-bottom: .6rem; }
.f-ok p { max-width: 340px; font-size: .9rem; line-height: 1.75; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .65s linear infinite; flex-shrink: 0; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .84rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--red); }

/* 8 · FOOTER -------------------------------------------------- */
.footer { background: var(--g900); color: #fff; }
.footer-top { max-width: var(--max-w); margin: 0 auto; padding: 4rem clamp(1.2rem, 5vw, 5rem) 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.ft-logo { display: block; margin-bottom: .7rem; font-family: var(--fh); font-size: 1.2rem; font-weight: 700; }
.ft-logo span { color: var(--yellow); }
.footer-brand p { max-width: 240px; font-size: .8rem; line-height: 1.7; color: rgba(255, 255, 255, .5); }
.ft-soc { display: flex; gap: .45rem; margin-top: 1.1rem; }
.ft-soc a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .15); border-radius: 7px; color: rgba(255, 255, 255, .5); transition: all .15s; }
.ft-soc a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.footer-col h5 { margin-bottom: 1rem; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.footer-col a { display: block; margin-bottom: .48rem; font-size: .8rem; color: rgba(255, 255, 255, .6); transition: color .15s; }
.footer-col a:hover, .footer-col a.active { color: var(--yellow); }
.footer-bot { max-width: var(--max-w); margin: 0 auto; padding: 1.3rem clamp(1.2rem, 5vw, 5rem); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-bot p, .footer-bot a { font-size: .72rem; color: rgba(255, 255, 255, .4); }
.footer-bot a:hover { color: rgba(255, 255, 255, .8); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.wa-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 350; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); box-shadow: 0 4px 20px rgba(0, 0, 0, .22); transition: transform .2s, box-shadow .2s; }
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(0, 0, 0, .3); }

/* 9 · SHARED BLOCKS ------------------------------------------- */
.icon-box { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 12px; background: var(--red-l); color: var(--red); }
.icon-box svg { width: 22px; height: 22px; }
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: .8rem; font-family: var(--fh); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: #fff; }
.cta-band h2 em { color: var(--yellow); }
.cta-band p { max-width: 500px; margin: 0 auto 2rem; font-size: .95rem; line-height: 1.75; color: rgba(255, 255, 255, .72); }
.cta-band .btn-row { justify-content: center; }
.steps { display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 1rem; counter-reset: step; }
.step { position: relative; padding: 0 .4rem; text-align: center; }
.step::after { content: ''; position: absolute; top: 33px; left: calc(50% + 40px); width: calc(100% - 80px + 1rem); height: 2px; background: repeating-linear-gradient(90deg, var(--g300) 0 6px, transparent 6px 12px); }
.step:last-child::after { display: none; }
.step-icon { position: relative; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 2px solid var(--red); border-radius: 50%; background: #fff; color: var(--red); }
.step-icon svg { width: 28px; height: 28px; }
.step-no { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: .7rem; font-weight: 700; }
.step h3 { margin-bottom: .35rem; font-size: .95rem; font-weight: 700; }
.step p { font-size: .8rem; line-height: 1.65; color: var(--g500); }
.terms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.term { padding: 1.5rem 1.3rem; border-top: 3px solid var(--red); border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--g100); }
.term b { display: block; margin-bottom: .4rem; font-family: var(--fh); font-size: 1.5rem; line-height: 1.15; color: var(--red); }
.term strong { display: block; margin-bottom: .35rem; font-size: .88rem; }
.term p { font-size: .8rem; line-height: 1.65; color: var(--g500); }
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--g100); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-size: .95rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--red); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding-bottom: 1.1rem; font-size: .88rem; line-height: 1.75; color: var(--g700); }

/* 10 · HOME --------------------------------------------------- */
.hero { position: relative; overflow: hidden; min-height: 88vh; display: flex; align-items: center; padding: 4rem clamp(1.2rem, 5vw, 5rem) 5rem; background: #fff; }
.hero::after { content: ''; position: absolute; top: -80px; right: -80px; width: 480px; height: 480px; border-radius: 50%; background: var(--red-l); opacity: .4; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero .lead { max-width: 430px; margin-top: 1rem; }
.hero .btn-row { margin-top: 1.8rem; }
.hero-visual { position: relative; display: flex; justify-content: center; }
.hero-frame { width: 100%; max-width: 420px; aspect-ratio: 4/5; border: 1px solid var(--g100); border-radius: 22px; overflow: hidden; background: var(--g50); }
.hero-frame img { width: 100%; height: 100%; }
.hero-badge { position: absolute; bottom: .8rem; left: -1rem; z-index: 2; padding: .85rem 1.1rem; border: 1px solid var(--g100); border-radius: var(--rl); background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.hero-badge b { display: block; font-family: var(--fh); font-size: 2rem; font-weight: 900; line-height: 1; color: var(--red); }
.hero-badge span { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g500); }
.hero-star { position: absolute; top: 1rem; right: -1rem; z-index: 2; padding: .7rem 1rem; border-radius: var(--rl); background: var(--yellow); color: var(--yellow-d); text-align: center; }
.hero-star b { display: block; font-size: .88rem; letter-spacing: 2px; }
.hero-star span { display: block; margin-top: 2px; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.story-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.story-photo { display: flex; border: 1px solid var(--g100); border-radius: var(--rl); overflow: hidden; background: var(--g50); transition: transform .2s; }
.story-photo:hover { transform: scale(1.02); }
.story-photo.tall { grid-row: span 2; min-height: 340px; }
.story-photo img { width: 100%; height: 100%; }
.years-box { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.8rem; padding: 1.2rem 1.5rem; border-radius: var(--rl); background: var(--red); color: #fff; }
.years-box .num { font-family: var(--fh); font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--yellow); }
.years-box strong { display: block; font-size: 1rem; }
.years-box span { font-size: .8rem; opacity: .75; }
.story-copy p { margin-top: 1rem; }
.story-copy .btn { margin-top: 1.5rem; }
.purpose { padding: 2.2rem; border-radius: var(--rl); color: #fff; }
.purpose.red { background: var(--red); }
.purpose.blue { background: var(--blue); }
.purpose .label { margin-bottom: .7rem; font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.purpose h3 { margin-bottom: 1rem; font-family: var(--fh); font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.purpose > p { font-size: .9rem; line-height: 1.78; color: rgba(255, 255, 255, .88); }
.purpose .pt { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .15); }
.purpose .pt + .pt { margin-top: .8rem; padding-top: .8rem; border-top: none; }
.purpose .pt strong { display: block; font-size: .82rem; }
.purpose .pt span { font-size: .75rem; color: rgba(255, 255, 255, .65); }
.pt-ico { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 7px; background: rgba(255, 255, 255, .15); font-size: .9rem; }
.health-sec { background: var(--blue); }
.health-sec .sec-head p { color: rgba(255, 255, 255, .7); }
.health-sec .h2 { color: #fff; }
.health-sec .h2 .em { color: var(--yellow); }
.health-img { width: 100%; max-width: 860px; margin: 0 auto 2.5rem; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.health-img img { width: 100%; height: 100%; }
.nut-strip { display: flex; flex-wrap: wrap; justify-content: center; max-width: 560px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .15); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.nut-item { flex: 1; min-width: 120px; padding: 1rem .8rem; border-right: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.nut-item:last-child { border-right: none; }
.nut-num { font-family: var(--fh); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--yellow); }
.nut-lbl { margin-top: 3px; font-size: .63rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.serve-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.serve-card { padding: 1.3rem .8rem; border: 1px solid var(--g100); border-radius: var(--rl); background: #fff; text-align: center; transition: all .2s; }
.serve-card:hover { border-color: var(--red); background: var(--red-l); }
.serve-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto .7rem; border-radius: 12px; background: var(--g100); font-size: 1.4rem; }
.serve-lbl { font-size: .8rem; font-weight: 600; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tc { display: flex; flex-direction: column; gap: .9rem; padding: 1.6rem; border: 1px solid var(--g100); border-radius: var(--rl); background: #fff; transition: transform .2s, box-shadow .2s; }
.tc:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, .08); }
.tc-stars { font-size: .95rem; letter-spacing: 2px; color: var(--yellow); }
.tc-q { position: relative; flex: 1; padding-left: 1rem; font-size: .88rem; font-style: italic; line-height: 1.76; }
.tc-q::before { content: '\201C'; position: absolute; left: -3px; top: -.4rem; font-family: var(--fh); font-size: 2.4rem; line-height: 1; color: var(--red-l); }
.tc-auth { display: flex; align-items: center; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--g100); }
.tc-av { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: var(--red-l); font-family: var(--fh); font-size: .88rem; font-weight: 700; color: var(--red); }
.tc-name { font-size: .82rem; font-weight: 700; }
.tc-role { font-size: .7rem; color: var(--g500); }
.tc-badge { display: inline-block; margin-top: 2px; padding: 2px 7px; border-radius: 4px; background: var(--blue-l); color: var(--blue); font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* 11 · ABOUT -------------------------------------------------- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--g100); }
.tl-item { position: relative; padding-bottom: 2.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -2.45rem; top: 4px; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--red); }
.tl-dot.now { background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.tl-year { margin-bottom: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.tl-title { margin-bottom: .3rem; font-family: var(--fh); font-size: 1.1rem; font-weight: 700; }
.tl-text { font-size: .875rem; line-height: 1.75; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 4rem; max-width: 960px; margin: 0 auto; }
.why-item { padding-top: 1.2rem; border-top: 2px solid var(--red); }
.why-item h3 { margin-bottom: .5rem; font-family: var(--fh); font-size: 1.2rem; font-weight: 700; }
.why-item p { font-size: .92rem; line-height: 1.8; }

/* 12 · CONTACT ------------------------------------------------ */
.contact-card { display: block; padding: 1.5rem; border: 1px solid var(--g100); border-radius: var(--rl); background: #fff; text-align: center; transition: all .2s; }
.contact-card:hover { border-color: var(--red); background: var(--red-l); }
.contact-card.wa:hover { border-color: var(--green); background: #f0fdf4; }
.contact-card.mail:hover { border-color: var(--blue); background: var(--blue-l); }
.contact-card .icon-box { margin: 0 auto .8rem; }
.contact-card .k { margin-bottom: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.contact-card.wa .k { color: #128C4A; }
.contact-card.mail .k { color: var(--blue); }
.contact-card .v { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.contact-card .s { margin-top: .2rem; font-size: .75rem; color: var(--g500); }
.cd { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.3rem; }
.cd .icon-box { width: 42px; height: 42px; }
.cd strong { display: block; font-size: .85rem; }
.cd span, .cd a { font-size: .85rem; }
.cd a:hover { color: var(--red); }
.soc-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--g100); }
.soc-row .k { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g500); }
.soc-btn { display: inline-flex; align-items: center; gap: 7px; padding: .5rem 1.2rem; border: 1.5px solid; border-radius: var(--rp); font-size: .82rem; font-weight: 600; transition: all .17s; }
.soc-fb { color: #1877F2; border-color: #1877F2; } .soc-fb:hover { background: #1877F2; color: #fff; }
.soc-ig { color: #E1306C; border-color: #E1306C; } .soc-ig:hover { background: #E1306C; color: #fff; }
.soc-wa { color: #128C4A; border-color: var(--green); } .soc-wa:hover { background: var(--green); color: #fff; }
.info-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.8rem; }
.info-list .cd { margin: 0; }

/* 13 · SHOP --------------------------------------------------- */
.trust-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 2.2rem; padding: 1rem clamp(1.2rem, 5vw, 5rem); border-bottom: 1px solid var(--g100); background: #fff; }
.trust-bar div { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; color: var(--g700); }
.trust-bar svg { width: 18px; height: 18px; color: var(--red); }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.prod-grid.skeleton .pcard { min-height: 380px; background: linear-gradient(100deg, var(--g50) 40%, #fff 50%, var(--g50) 60%) 0 0 / 200% 100%; animation: shimmer 1.3s linear infinite; }
.pcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--g100); border-radius: var(--rl); background: #fff; transition: transform .22s, box-shadow .22s; }
.pcard:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0, 0, 0, .09); }
.pcard-img { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; background: #FFF7E6; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; transition: transform .3s; }
.pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard-img img.ph { width: 38%; height: auto; object-fit: contain; opacity: .85; }
.pcard:hover .pcard-img img.ph { transform: none; }
.pcard-flag { position: absolute; top: .8rem; left: .8rem; padding: 3px 10px; border-radius: var(--rp); background: var(--g900); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.3rem 1.3rem; }
.pcard-name { font-family: var(--fh); font-size: 1.12rem; font-weight: 700; }
.pcard-unit { margin-top: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g500); }
.pcard-desc { flex: 1; margin: .5rem 0 1rem; font-size: .82rem; line-height: 1.65; color: var(--g700); }
/* size (500g / 1kg) selector */
.size-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.size { position: relative; cursor: pointer; }
.size input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .6rem .4rem; border: 1.5px solid var(--g100); border-radius: var(--r); font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--g500); transition: all .15s; }
.size span b { font-size: .98rem; letter-spacing: 0; color: var(--g900); }
.size input:checked + span { border-color: var(--red); background: var(--red-l); color: var(--red); }
.size input:checked + span b { color: var(--red); }
.size input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.size input:disabled + span { opacity: .5; cursor: not-allowed; }
.pcard-actions { display: flex; align-items: center; gap: .6rem; }
.pcard-actions .btn { flex: 1; }
.shop-more { margin-top: 2.2rem; text-align: center; }
.shop-msg { grid-column: 1 / -1; padding: 2rem; border: 1px dashed var(--g300); border-radius: var(--rl); text-align: center; font-size: .88rem; color: var(--g700); }

/* promo banner */
.promo { display: flex; align-items: center; gap: 1rem; max-width: var(--max-w); margin: 0 auto 2rem; padding: 1.1rem 1.4rem; border: 1.5px solid var(--yellow); border-radius: var(--rl); background: #FFF7E6; }
.promo .icon-box { background: var(--yellow); color: var(--g900); }
.promo strong { display: block; font-size: .98rem; }
.promo span { font-size: .86rem; color: var(--g700); }
.promo a { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--red); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* 14 · CHECKOUT ----------------------------------------------- */
.co-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; }
.co-card { margin-bottom: 1.4rem; padding: 1.6rem; border: 1.5px solid var(--g100); border-radius: var(--rl); background: #fff; }
.co-card h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; font-family: var(--fh); font-size: 1.15rem; }
.co-card h2 i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--fb); font-size: .75rem; font-style: normal; font-weight: 700; }
.pay-opt { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .7rem; padding: 1rem; border: 1.5px solid var(--g100); border-radius: var(--r); cursor: pointer; transition: all .15s; }
.pay-opt:has(input:checked) { border-color: var(--red); background: var(--red-l); }
.pay-opt input { margin-top: 4px; accent-color: var(--red); }
.pay-opt strong { display: block; font-size: .88rem; }
.pay-opt span { font-size: .78rem; color: var(--g500); }
.summary { position: sticky; top: calc(var(--nav-h) + 20px); padding: 1.6rem; border: 1.5px solid var(--g100); border-radius: var(--rl); background: var(--off); }
.summary h2 { margin-bottom: 1rem; font-family: var(--fh); font-size: 1.15rem; }
.sum-line { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .86rem; }
.sum-line small { display: block; color: var(--g500); font-size: .72rem; }
.sum-items { border-bottom: 1px solid var(--g100); margin-bottom: .4rem; }
.sum-total { margin-top: .5rem; padding-top: .9rem; border-top: 2px solid var(--g900); font-size: 1.1rem; font-weight: 700; }
.sum-total .amt { color: var(--red); }
.sum-hint { margin-top: .8rem; font-size: .75rem; color: var(--g500); }
.summary .btn { margin-top: 1.2rem; }
.co-empty { max-width: 460px; margin: 0 auto; padding: 3rem 1rem; text-align: center; }
.co-empty p { margin: .6rem 0 1.5rem; color: var(--g500); }
.invoice { max-width: 760px; margin: 0 auto; padding: 2.2rem; border: 1.5px solid var(--g100); border-radius: var(--rl); background: #fff; }
.inv-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.4rem; border-bottom: 2px solid var(--g900); }
.inv-head h2 { font-family: var(--fh); font-size: 1.7rem; }
.inv-head .meta { font-size: .82rem; text-align: right; line-height: 1.7; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.4rem 0; font-size: .84rem; line-height: 1.7; }
.inv-parties h4 { margin-bottom: .3rem; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g500); }
.inv-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.inv-table th { padding: .6rem 0; border-bottom: 1px solid var(--g300); font-size: .68rem; letter-spacing: .1em; text-align: left; text-transform: uppercase; color: var(--g500); }
.inv-table td { padding: .7rem 0; border-bottom: 1px solid var(--g100); }
.inv-table .r { text-align: right; }
.inv-totals { max-width: 300px; margin: 1rem 0 0 auto; font-size: .88rem; }
.inv-totals .sum-total { font-size: 1.05rem; }
.inv-note { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--off); font-size: .82rem; line-height: 1.7; }
.next-box { max-width: 760px; margin: 0 auto 1.6rem; padding: 1.4rem 1.6rem; border: 1.5px solid var(--yellow); border-radius: var(--rl); background: #FFF7E6; }
.next-box h3 { margin-bottom: .6rem; font-family: var(--fh); font-size: 1.15rem; }
.next-box p { font-size: .88rem; line-height: 1.75; }
.bank { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0 0 .8rem; font-size: .9rem; }
.bank dt { color: var(--g500); }
.bank dd { font-weight: 700; }
.inv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; max-width: 760px; margin: 1.6rem auto 0; }
.done-head { max-width: 760px; margin: 0 auto 1.8rem; text-align: center; }
.done-head .f-ok-tick { margin: 0 auto 1rem; }
.done-head p { max-width: 480px; margin: .6rem auto 0; font-size: .92rem; color: var(--g700); }

/* 15 · WHOLESALE ---------------------------------------------- */
.feature-card { padding: 1.8rem; border: 1px solid var(--g100); border-radius: var(--rl); background: #fff; transition: transform .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .08); }
.feature-card .icon-box { margin-bottom: 1rem; }
.feature-card h3 { margin-bottom: .5rem; font-family: var(--fh); font-size: 1.1rem; font-weight: 700; }
.feature-card p { font-size: .86rem; line-height: 1.7; }
.range-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--rl); background: #fff; box-shadow: 0 0 0 1px var(--g100); }
.range-table th { padding: .9rem 1.2rem; background: var(--blue); color: #fff; font-size: .72rem; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.range-table td { padding: .95rem 1.2rem; border-top: 1px solid var(--g100); font-size: .88rem; vertical-align: top; }
.range-table td:first-child { font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.chip { padding: .4rem 1rem; border: 1px solid var(--g100); border-radius: var(--rp); background: #fff; font-size: .8rem; font-weight: 600; }

/* 16 · LEGAL -------------------------------------------------- */
.legal { max-width: 780px; margin: 0 auto; }
.legal .updated { margin-bottom: 2rem; font-size: .8rem; color: var(--g500); }
.legal h2 { margin: 2.2rem 0 .7rem; font-family: var(--fh); font-size: 1.35rem; font-weight: 700; }
.legal p, .legal li { font-size: .92rem; line-height: 1.85; color: var(--g700); }
.legal p + p { margin-top: .8rem; }
.legal ul { margin: .8rem 0 0 1.2rem; list-style: disc; }
.legal li + li { margin-top: .4rem; }
.legal a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ANIMATION --------------------------------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shimmer { to { background-position: -200% 0; } }
.js .au { opacity: 0; } .js .au.vis { animation: fadeUp .6s ease forwards; }
.js .ai { opacity: 0; } .js .ai.vis { animation: fadeIn .7s ease forwards; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .3s; } .d4 { animation-delay: .4s; } .d5 { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 17 · RESPONSIVE --------------------------------------------- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 1.6rem; }
  .step { display: grid; grid-template-columns: 66px 1fr; gap: 0 1.1rem; text-align: left; align-items: start; padding: 0; }
  .step-icon { margin: 0; grid-row: span 2; }
  .step::after { top: 70px; left: 32px; width: 2px; height: calc(100% - 44px); background: repeating-linear-gradient(180deg, var(--g300) 0 6px, transparent 6px 12px); }
}
@media (max-width: 900px) {
  .nav-links, .nav-soc, .nav-cta { display: none; }
  .burger { display: flex; }
  .grid2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .grid3, .grid4 { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .form-row, .inv-parties { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero { min-height: unset; }
  .hero-frame { max-width: 100%; aspect-ratio: 16/9; border-radius: var(--rl); }
  .hero-badge { left: 0; }
  .hero-star { right: 0; }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .serve-grid, .terms-grid { grid-template-columns: repeat(2, 1fr); }
  .promo { flex-wrap: wrap; }
  .promo a { margin-left: 0; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .story-photo.tall { grid-row: auto; min-height: 200px; }
  .co-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .why-grid { gap: 2rem; }
}
@media (max-width: 640px) {
  .sec { padding: 3rem 1.1rem; }
  .sec-sm { padding: 2.2rem 1.1rem; }
  .page-hero { padding: 2.5rem 1.1rem 2rem; }
  .h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .grid3, .testi-grid, .prod-grid, .why-grid, .check-grid, .terms-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; padding: 2.5rem 1.1rem 2rem; }
  .footer-bot { flex-direction: column; align-items: flex-start; padding: 1rem 1.1rem; }
  .hero { padding: 2.5rem 1.1rem 3rem; }
  .hero-frame { aspect-ratio: 4/3; }
  .story-photos { grid-template-columns: 1fr; }
  .nut-item { min-width: 50%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .btn { font-size: .82rem; padding: .65rem 1.2rem; }
  .form-box, .co-card, .summary, .invoice { padding: 1.3rem; }
  .range-table th, .range-table td { padding: .8rem; }
  .inv-head .meta { text-align: left; }
  .wa-float { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
}

/* 18 · PRINT (invoice) ---------------------------------------- */
@media print {
  body * { visibility: hidden; }
  #invoice, #invoice * { visibility: visible; }
  #invoice { position: absolute; inset: 0 auto auto 0; width: 100%; border: none; padding: 0; }
}

/* form button variants */
.btn-wa-solid { background: var(--green); }
.btn-wa-solid:hover:not(:disabled) { background: #128C4A; }
.f-secondary { background: transparent; border: 2px solid var(--g300); color: var(--g700); }
.f-secondary:hover:not(:disabled) { background: transparent; border-color: var(--g900); color: var(--g900); }

/* cart discount lines */
.cart-line { display: flex; justify-content: space-between; margin-bottom: .3rem; font-size: .88rem; color: var(--g700); }
.cart-disc { color: #15803d; font-weight: 600; }
.cart-tip { margin: .2rem 0 .5rem; padding: .45rem .7rem; border-radius: var(--r); background: #FFF7E6; font-size: .78rem; font-weight: 600; color: var(--yellow-d); }
.sum-disc { color: #15803d; }

/* home promotion banner (image managed in the admin panel) */
.home-banner { padding: 1.5rem clamp(1.2rem, 5vw, 5rem) 0; background: #fff; }
.home-banner > a, .home-banner > img { display: block; max-width: var(--max-w); margin: 0 auto; }
.home-banner img { width: 100%; aspect-ratio: 4 / 1; border-radius: var(--rl); object-fit: cover; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
@media (max-width: 640px) { .home-banner { padding-top: 1rem; } .home-banner img { aspect-ratio: 2 / 1; border-radius: var(--r); } }

/* discount tiers on the shop banner */
.promo-tiers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.promo-tiers:empty { display: none; }
.promo-chip { padding: .3rem .8rem; border-radius: var(--rp); background: #fff; border: 1px solid var(--yellow); font-size: .78rem; color: var(--g700); }
.promo-chip b { color: var(--red); }