/* ============================================================
   Brand Ticaret — Site-wide homepage visual system
   Applies the homepage's editorial trade language to inner pages
   without changing page content, interactions, or animations.
   ============================================================ */

body:not(.home-page) {
  --unified-canvas: #08100B;
  --unified-alt: #0A100C;
  --unified-panel: rgba(255, 255, 255, 0.035);
  --unified-panel-strong: #101812;
  --unified-ink: #F4F1E9;
  --unified-muted: rgba(222, 229, 220, 0.66);
  --unified-line: rgba(231, 209, 164, 0.16);
  --unified-line-strong: rgba(231, 203, 141, 0.30);
  --unified-gold: #C4963E;
  --unified-gold-bright: #DDB45C;
  --unified-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 248, 229, 0.045);
  --unified-shadow-lift: 0 36px 92px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 248, 229, 0.07);

  --bg: var(--unified-canvas);
  --bg-elev: var(--unified-alt);
  --surface: var(--unified-panel);
  --surface-2: var(--unified-panel-strong);
  --ink: var(--unified-ink);
  --ink-strong: #FBF7ED;
  --muted: var(--unified-muted);
  --line: var(--unified-line);
  --line-strong: var(--unified-line-strong);
  --saffron-gold: var(--unified-gold);
  --saffron-amber: var(--unified-gold-bright);
  --shadow-soft: var(--unified-shadow);
  --shadow-lift: var(--unified-shadow-lift);

  --commerce-panel: var(--unified-panel);
  --commerce-panel-strong: var(--unified-panel-strong);
  --commerce-line: var(--unified-line);
  --commerce-muted: var(--unified-muted);
  --commerce-chip: rgba(221, 180, 92, 0.055);
  --commerce-shadow: var(--unified-shadow);
  --commerce-media-bg: #0A100C;

  background:
    radial-gradient(68% 36% at 94% 7%, rgba(197, 151, 66, 0.08), transparent 68%),
    var(--unified-canvas);
  color: var(--unified-ink);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) {
    --unified-canvas: #F4F2EA;
    --unified-alt: #EEECE4;
    --unified-panel: rgba(255, 255, 255, 0.74);
    --unified-panel-strong: #FFFDF7;
    --unified-ink: #111812;
    --unified-muted: #566058;
    --unified-line: rgba(91, 75, 43, 0.18);
    --unified-line-strong: rgba(115, 83, 25, 0.30);
    --unified-gold: #986B17;
    --unified-gold-bright: #B78424;
    --unified-shadow: 0 30px 80px rgba(43, 36, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --unified-shadow-lift: 0 38px 94px rgba(43, 36, 23, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.94);

    --ink-strong: #111812;
    --commerce-media-bg: #E9E5DA;

    background:
      radial-gradient(62% 50% at 96% 8%, rgba(205, 166, 86, 0.12), transparent 68%),
      linear-gradient(rgba(145, 115, 57, 0.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(145, 115, 57, 0.032) 1px, transparent 1px),
      var(--unified-canvas);
    background-size: auto, 72px 72px, 72px 72px, auto;
  }
}

:root[data-theme="light"] body:not(.home-page) {
  --unified-canvas: #F4F2EA;
  --unified-alt: #EEECE4;
  --unified-panel: rgba(255, 255, 255, 0.74);
  --unified-panel-strong: #FFFDF7;
  --unified-ink: #111812;
  --unified-muted: #566058;
  --unified-line: rgba(91, 75, 43, 0.18);
  --unified-line-strong: rgba(115, 83, 25, 0.30);
  --unified-gold: #986B17;
  --unified-gold-bright: #B78424;
  --unified-shadow: 0 30px 80px rgba(43, 36, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --unified-shadow-lift: 0 38px 94px rgba(43, 36, 23, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.94);

  --ink-strong: #111812;
  --commerce-media-bg: #E9E5DA;

  background:
    radial-gradient(62% 50% at 96% 8%, rgba(205, 166, 86, 0.12), transparent 68%),
    linear-gradient(rgba(145, 115, 57, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 115, 57, 0.032) 1px, transparent 1px),
    var(--unified-canvas);
  background-size: auto, 72px 72px, 72px 72px, auto;
}

/* ---------- Shared layout and typography ---------- */
body:not(.home-page) main {
  overflow: clip;
  background: var(--unified-canvas);
}

body:not(.home-page) main .container,
body:not(.home-page) .site-footer .container {
  width: min(1260px, calc(100% - 48px));
}

body:not(.home-page) h1,
body:not(.home-page) h2 {
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body:not(.home-page) h3 {
  text-wrap: pretty;
}

body:not(.home-page) .section-head,
body:not(.home-page) .commerce-section__head {
  max-width: 940px;
}

body:not(.home-page) .section-head {
  margin-bottom: clamp(38px, 5vw, 66px);
}

body:not(.home-page) .section-head h2,
body:not(.home-page) .commerce-section__head h2 {
  max-width: 820px;
  font-size: clamp(2.55rem, 4.6vw, 4.45rem);
  line-height: 1;
}

body:not(.home-page) .section-head p,
body:not(.home-page) .commerce-section__head p,
body:not(.home-page) .simplified-intro {
  color: var(--unified-muted);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.74;
}

body:not(.home-page) .eyebrow,
body:not(.home-page) .simplified-card__label,
body:not(.home-page) .origin-product-card__origin,
body:not(.home-page) .catalog-card-meta,
body:not(.home-page) .commerce-spec__number,
body:not(.home-page) .brief-label {
  color: var(--unified-gold-bright);
}

body:not(.home-page) .eyebrow {
  gap: 11px;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

body:not(.home-page) .eyebrow::before {
  width: 32px;
  background: linear-gradient(90deg, var(--unified-gold), transparent);
}

html[dir="rtl"] body:not(.home-page) .eyebrow::before {
  background: linear-gradient(270deg, var(--unified-gold), transparent);
}

body:not(.home-page) .accent-i {
  color: var(--unified-gold-bright);
}

/* ---------- Page and product heroes ---------- */
body:not(.home-page) .page-hero,
body:not(.home-page) .commerce-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: auto;
  padding-block: clamp(96px, 11vw, 154px) clamp(82px, 9vw, 126px);
  border-bottom: 1px solid rgba(226, 194, 126, 0.18);
  background:
    linear-gradient(rgba(216, 180, 101, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 180, 101, 0.032) 1px, transparent 1px),
    radial-gradient(54% 82% at 91% 16%, rgba(196, 150, 62, 0.17), transparent 68%),
    radial-gradient(38% 68% at 4% 96%, rgba(111, 22, 21, 0.13), transparent 72%),
    linear-gradient(135deg, #101812, #070C09 72%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
  color: #F8F4E9;
}

body:not(.home-page) .page-hero::after,
body:not(.home-page) .commerce-hero::after {
  content: none;
}

html[dir="rtl"] body:not(.home-page) .page-hero::after,
html[dir="rtl"] body:not(.home-page) .commerce-hero::after {
  background: linear-gradient(270deg, #DDB45C, rgba(221, 180, 92, 0.08));
}

body:not(.home-page) .page-hero h1,
body:not(.home-page) .commerce-hero h1 {
  max-width: 980px;
  margin-block: 12px 24px;
  color: #FBF7ED;
  font-size: clamp(3.1rem, 6.2vw, 6.2rem);
  line-height: 0.96;
}

body:not(.home-page) .page-hero .lead,
body:not(.home-page) .commerce-hero .lead,
body:not(.home-page) .commerce-breadcrumb {
  color: rgba(234, 239, 232, 0.70);
}

body:not(.home-page) .page-hero .lead,
body:not(.home-page) .commerce-hero .lead {
  max-width: 760px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.72;
}

body:not(.home-page) .commerce-hero__grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  gap: clamp(44px, 7vw, 104px);
}

body:not(.home-page) .commerce-hero__media,
body:not(.home-page) .buyer-brief {
  border: 1px solid rgba(231, 203, 141, 0.25);
  border-radius: 30px;
  background:
    radial-gradient(72% 110% at 100% 0%, rgba(209, 164, 74, 0.18), transparent 60%),
    linear-gradient(145deg, rgba(255, 251, 236, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 246, 218, 0.08);
}

body:not(.home-page) .commerce-hero__media {
  min-height: clamp(410px, 42vw, 590px);
  padding: clamp(16px, 2.4vw, 28px);
}

body:not(.home-page) .commerce-hero__media::before {
  inset: 0;
  border: 0;
  background: radial-gradient(52% 58% at 50% 45%, rgba(221, 180, 92, 0.12), transparent 72%);
}

body:not(.home-page) .commerce-hero__media img {
  max-width: 100%;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.36));
}

body:not(.home-page) .commerce-breadcrumb a:hover {
  color: #DDB45C;
}

/* ---------- Section rhythm ---------- */
body:not(.home-page) .section,
body:not(.home-page) .simplified-section,
body:not(.home-page) .commerce-section,
body:not(.home-page) .origin-portfolio,
body:not(.home-page) .product-final-cta {
  position: relative;
  padding-block: clamp(84px, 9vw, 138px);
  background: var(--unified-canvas);
  color: var(--unified-ink);
}

body:not(.home-page) .section--alt,
body:not(.home-page) .simplified-section--alt,
body:not(.home-page) .commerce-section--alt {
  border-block: 1px solid var(--unified-line);
  background:
    radial-gradient(58% 70% at 94% 8%, rgba(195, 150, 65, 0.07), transparent 68%),
    var(--unified-alt);
}

body:not(.home-page) .commerce-section__head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: clamp(34px, 4vw, 54px);
}

/* ---------- Editorial cards ---------- */
body:not(.home-page) .card,
body:not(.home-page) .img-card,
body:not(.home-page) .origin-product-card,
body:not(.home-page) .format-card,
body:not(.home-page) .commerce-card,
body:not(.home-page) .fig-form-card,
body:not(.home-page) .contact-channel,
body:not(.home-page) .contact-form,
body:not(.home-page) .faq-item,
body:not(.home-page) .buyer-brief,
body:not(.home-page) .document-card,
body:not(.home-page) .timeline-step,
body:not(.home-page) .bridge-panel,
body:not(.home-page) .bridge-stat,
body:not(.home-page) .packaging-showcase__card,
body:not(.home-page) .barberry-type-card,
body:not(.home-page) .raisin-type-card,
body:not(.home-page) .rice-option-card,
body:not(.home-page) .salt-format-card {
  border: 1px solid var(--unified-line);
  border-radius: 24px;
  background:
    radial-gradient(70% 75% at 100% 0%, color-mix(in srgb, var(--unified-gold) 7%, transparent), transparent 70%),
    var(--unified-panel);
  box-shadow: var(--unified-shadow);
}

body:not(.home-page) .card,
body:not(.home-page) .img-card,
body:not(.home-page) .origin-product-card,
body:not(.home-page) .format-card,
body:not(.home-page) .commerce-card,
body:not(.home-page) .fig-form-card,
body:not(.home-page) .contact-channel,
body:not(.home-page) .faq-item,
body:not(.home-page) .packaging-showcase__card {
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

body:not(.home-page) .card:hover,
body:not(.home-page) .img-card:hover,
body:not(.home-page) .origin-product-card:hover,
body:not(.home-page) .origin-product-card:focus-visible,
body:not(.home-page) .format-card:hover,
body:not(.home-page) .commerce-card:hover,
body:not(.home-page) .fig-form-card:hover,
body:not(.home-page) .contact-channel:hover,
body:not(.home-page) .faq-item[open],
body:not(.home-page) .packaging-showcase__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--unified-gold-bright) 48%, transparent);
  box-shadow: var(--unified-shadow-lift);
}

body:not(.home-page) .card h3,
body:not(.home-page) .img-card h3,
body:not(.home-page) .origin-product-card h3,
body:not(.home-page) .format-card h3,
body:not(.home-page) .commerce-card h3,
body:not(.home-page) .fig-form-card h3,
body:not(.home-page) .contact-channel strong,
body:not(.home-page) .faq-item summary,
body:not(.home-page) .buyer-brief dd,
body:not(.home-page) .document-card h3,
body:not(.home-page) .timeline-step h3 {
  color: var(--unified-ink);
}

body:not(.home-page) .card p,
body:not(.home-page) .img-card p,
body:not(.home-page) .origin-product-card p,
body:not(.home-page) .format-card p,
body:not(.home-page) .commerce-card p,
body:not(.home-page) .fig-form-card p,
body:not(.home-page) .contact-channel p,
body:not(.home-page) .faq-item p,
body:not(.home-page) .document-card p,
body:not(.home-page) .timeline-step p {
  color: var(--unified-muted);
}

body:not(.home-page) .card-grid,
body:not(.home-page) .origin-portfolio__grid,
body:not(.home-page) .format-grid,
body:not(.home-page) .commerce-card-grid,
body:not(.home-page) .fig-form-grid,
body:not(.home-page) .packaging-showcase {
  gap: clamp(16px, 2vw, 24px);
}

body:not(.home-page) .origin-product-card,
body:not(.home-page) .img-card,
body:not(.home-page) .packaging-showcase__card {
  overflow: hidden;
}

body:not(.home-page) .origin-product-card__body {
  min-height: 205px;
  padding: clamp(22px, 2.3vw, 30px);
}

body:not(.home-page) .origin-product-card__media {
  background: #0A100C;
}

body:not(.home-page) .origin-product-card__link,
body:not(.home-page) .format-card__link,
body:not(.home-page) .text-link,
body:not(.home-page) .quote-link,
body:not(.home-page) .detail-link {
  color: var(--unified-gold-bright);
}

/* Connected grid cards used on About and process-oriented pages. */
body:not(.home-page) .simplified-grid,
body:not(.home-page) .simplified-process,
body:not(.home-page) .company-facts,
body:not(.home-page) .commerce-specs {
  overflow: hidden;
  border: 1px solid var(--unified-line);
  border-radius: 30px;
  background: var(--unified-panel);
  box-shadow: var(--unified-shadow);
}

body:not(.home-page) .simplified-card {
  min-height: 270px;
  padding: clamp(28px, 3vw, 42px);
  border: 0;
  border-inline-end: 1px solid var(--unified-line);
  background: transparent;
}

body:not(.home-page) .simplified-card:last-child {
  border-inline-end: 0;
}

body:not(.home-page) .simplified-card__label {
  display: block;
  margin-bottom: clamp(46px, 5vw, 68px);
  font-size: 11px;
  letter-spacing: 0.17em;
}

body:not(.home-page) .simplified-card h3 {
  margin-bottom: 13px;
  color: var(--unified-ink);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.14;
}

body:not(.home-page) .simplified-card p {
  color: var(--unified-muted);
  font-size: 15px;
  line-height: 1.7;
}

body:not(.home-page) .simplified-process article,
body:not(.home-page) .company-facts > div,
body:not(.home-page) .commerce-spec {
  border-color: var(--unified-line);
}

body:not(.home-page) .company-facts dt,
body:not(.home-page) .commerce-spec__number {
  color: var(--unified-gold-bright);
}

body:not(.home-page) .company-facts dd {
  color: var(--unified-ink);
}

/* ---------- Media panels ---------- */
body:not(.home-page) .split {
  gap: clamp(42px, 7vw, 92px);
}

body:not(.home-page) .split-media,
body:not(.home-page) .document-visual,
body:not(.home-page) .buyer-visual,
body:not(.home-page) .fig-gallery,
body:not(.home-page) .saffron-anatomy {
  overflow: hidden;
  border: 1px solid var(--unified-line-strong);
  border-radius: 30px;
  box-shadow: var(--unified-shadow);
}

body:not(.home-page) .split-media img {
  border-radius: 30px;
}

body:not(.home-page) .split-media::after {
  border-radius: 30px;
  border-color: var(--unified-line);
}

/* ---------- Buttons and actions ---------- */
body:not(.home-page) main .btn,
body:not(.home-page) .site-footer .btn {
  min-height: 50px;
  padding-inline: 24px;
  font-weight: 700;
}

body:not(.home-page) main .btn--primary,
body:not(.home-page) .site-footer .btn--primary {
  border-color: rgba(255, 239, 199, 0.70);
  background: linear-gradient(135deg, #E8CC88, #C9973F);
  color: #211606;
  box-shadow: inset 0 1px 0 rgba(255, 252, 236, 0.72), 0 14px 34px rgba(173, 121, 38, 0.24);
}

body:not(.home-page) main .btn--primary:hover,
body:not(.home-page) main .btn--primary:focus-visible,
body:not(.home-page) .site-footer .btn--primary:hover,
body:not(.home-page) .site-footer .btn--primary:focus-visible {
  border-color: #FFF2CF;
  background: linear-gradient(135deg, #F0D99A, #D5A74D);
  color: #211606;
  box-shadow: inset 0 1px 0 rgba(255, 255, 244, 0.82), 0 18px 42px rgba(183, 131, 44, 0.32);
}

body:not(.home-page) main .btn--ghost,
body:not(.home-page) .site-footer .btn--ghost {
  border-color: var(--unified-line-strong);
  background: color-mix(in srgb, var(--unified-panel) 78%, transparent);
  color: var(--unified-ink);
}

body:not(.home-page) main .btn--ghost:hover,
body:not(.home-page) main .btn--ghost:focus-visible,
body:not(.home-page) .site-footer .btn--ghost:hover,
body:not(.home-page) .site-footer .btn--ghost:focus-visible {
  border-color: var(--unified-gold-bright);
  color: var(--unified-gold-bright);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

body:not(.home-page) .catalog-filter button,
body:not(.home-page) .catalog-clear,
body:not(.home-page) .catalog-filter-toggle {
  border-color: var(--unified-line);
  background: var(--unified-panel);
  color: var(--unified-ink);
}

body:not(.home-page) .catalog-filter button:hover,
body:not(.home-page) .catalog-filter button.is-active,
body:not(.home-page) .catalog-clear:hover {
  border-color: var(--unified-gold-bright);
  background: color-mix(in srgb, var(--unified-gold) 13%, transparent);
  color: var(--unified-gold-bright);
}

/* ---------- CTA scenes ---------- */
body:not(.home-page) .cta-band,
body:not(.home-page) .product-final-cta__inner,
body:not(.home-page) .lead-magnet-band,
body:not(.home-page) .catalog-bridge {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: clamp(42px, 6vw, 74px);
  border: 1px solid rgba(231, 203, 141, 0.25);
  border-radius: 34px;
  background:
    radial-gradient(72% 140% at 100% 0%, rgba(209, 164, 74, 0.22), transparent 58%),
    radial-gradient(48% 120% at 0% 100%, rgba(112, 21, 20, 0.15), transparent 70%),
    linear-gradient(135deg, #101812, #070C09 72%);
  color: #F8F4E9;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 246, 218, 0.10);
}

body:not(.home-page) .cta-band h2,
body:not(.home-page) .product-final-cta__inner h2,
body:not(.home-page) .lead-magnet-band h2,
body:not(.home-page) .catalog-bridge h2 {
  color: #FBF7ED;
}

body:not(.home-page) .cta-band p,
body:not(.home-page) .product-final-cta__inner p,
body:not(.home-page) .lead-magnet-band p,
body:not(.home-page) .catalog-bridge p {
  color: rgba(234, 239, 232, 0.68);
}

body:not(.home-page) .product-final-cta {
  padding-block: clamp(60px, 7vw, 96px) clamp(88px, 10vw, 138px);
}

body:not(.home-page) .product-final-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}

/* ---------- Contact and forms ---------- */
body:not(.home-page) .contact-grid {
  gap: clamp(42px, 7vw, 86px);
  align-items: start;
}

body:not(.home-page) .contact-form {
  padding: clamp(26px, 3.5vw, 46px);
}

body:not(.home-page) .form-field label {
  color: var(--unified-ink);
  font-weight: 700;
}

body:not(.home-page) .form-field input,
body:not(.home-page) .form-field select,
body:not(.home-page) .form-field textarea {
  min-height: 48px;
  border-color: var(--unified-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--unified-panel-strong) 84%, transparent);
  color: var(--unified-ink);
}

body:not(.home-page) .form-field textarea {
  min-height: 142px;
}

body:not(.home-page) .form-field input::placeholder,
body:not(.home-page) .form-field textarea::placeholder {
  color: color-mix(in srgb, var(--unified-muted) 70%, transparent);
}

body:not(.home-page) .form-field input:focus,
body:not(.home-page) .form-field select:focus,
body:not(.home-page) .form-field textarea:focus {
  border-color: var(--unified-gold-bright);
  background: var(--unified-panel-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--unified-gold) 18%, transparent);
}

body:not(.home-page) .contact-channel span {
  border-color: color-mix(in srgb, var(--unified-gold-bright) 46%, transparent);
  color: var(--unified-gold-bright);
  background: color-mix(in srgb, var(--unified-gold) 10%, transparent);
}

/* ---------- Catalog and sticky tools ---------- */
body:not(.home-page) .catalog-toolbar,
body:not(.home-page) .catalog-tools {
  border-color: var(--unified-line);
}

body:not(.home-page) .catalog-toolbar {
  border-radius: 22px;
  background: color-mix(in srgb, var(--unified-panel-strong) 91%, transparent);
  box-shadow: var(--unified-shadow);
}

body:not(.home-page) .product-card figcaption::before,
body:not(.home-page) .format-card__status,
body:not(.home-page) .catalog-card-meta {
  color: var(--unified-gold-bright) !important;
}

body:not(.home-page) .format-card__status {
  border-color: color-mix(in srgb, var(--unified-gold-bright) 40%, transparent);
  background: color-mix(in srgb, var(--unified-gold) 9%, transparent);
}

/* ---------- Footer ---------- */
body:not(.home-page) .site-footer {
  margin-top: 0;
  border-top-color: rgba(226, 194, 126, 0.18);
  background:
    radial-gradient(46% 80% at 92% 0%, rgba(196, 150, 62, 0.075), transparent 72%),
    #050906;
}

body:not(.home-page) .site-footer h4,
body:not(.home-page) .site-footer ul a:hover {
  color: #DDB45C;
}

/* ---------- RTL ---------- */
html[dir="rtl"] body:not(.home-page) .simplified-card:last-child {
  border-inline-end: 0;
}

html[dir="rtl"] body:not(.home-page) .product-final-cta__inner {
  text-align: start;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  body:not(.home-page) .commerce-hero__grid,
  body:not(.home-page) .buyer-hero-grid {
    grid-template-columns: 1fr;
  }

  body:not(.home-page) .commerce-hero__copy {
    max-width: 820px;
  }

  body:not(.home-page) .commerce-hero__media {
    min-height: 440px;
  }

  body:not(.home-page) .origin-portfolio__grid,
  body:not(.home-page) .format-grid,
  body:not(.home-page) .commerce-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body:not(.home-page) main .container,
  body:not(.home-page) .site-footer .container {
    width: min(100% - 28px, 680px);
  }

  body:not(.home-page) .page-hero,
  body:not(.home-page) .commerce-hero {
    padding-block: 82px 72px;
  }

  body:not(.home-page) .page-hero::after,
  body:not(.home-page) .commerce-hero::after {
    inset-inline-start: 14px;
    inset-block-start: 38px;
  }

  body:not(.home-page) .page-hero h1,
  body:not(.home-page) .commerce-hero h1 {
    font-size: clamp(2.55rem, 12vw, 4.1rem);
    line-height: 0.99;
  }

  body:not(.home-page) .section,
  body:not(.home-page) .simplified-section,
  body:not(.home-page) .commerce-section,
  body:not(.home-page) .origin-portfolio,
  body:not(.home-page) .product-final-cta {
    padding-block: 68px;
  }

  body:not(.home-page) .section-head h2,
  body:not(.home-page) .commerce-section__head h2 {
    font-size: clamp(2.2rem, 10.5vw, 3.3rem);
  }

  body:not(.home-page) .commerce-section__head {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body:not(.home-page) .commerce-hero__media {
    min-height: 340px;
    border-radius: 24px;
  }

  body:not(.home-page) .origin-portfolio__grid,
  body:not(.home-page) .format-grid,
  body:not(.home-page) .commerce-card-grid,
  body:not(.home-page) .fig-form-grid {
    grid-template-columns: 1fr;
  }

  body:not(.home-page) .simplified-grid,
  body:not(.home-page) .simplified-process,
  body:not(.home-page) .company-facts,
  body:not(.home-page) .commerce-specs {
    border-radius: 24px;
  }

  body:not(.home-page) .simplified-card {
    min-height: 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--unified-line);
  }

  body:not(.home-page) .simplified-card:last-child {
    border-block-end: 0;
  }

  body:not(.home-page) .simplified-card__label {
    margin-bottom: 32px;
  }

  body:not(.home-page) .split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  body:not(.home-page) .cta-band,
  body:not(.home-page) .product-final-cta__inner,
  body:not(.home-page) .lead-magnet-band,
  body:not(.home-page) .catalog-bridge {
    min-height: 0;
    padding: 52px 26px 30px;
    border-radius: 26px;
  }

  body:not(.home-page) .product-final-cta__inner,
  body:not(.home-page) .catalog-bridge,
  body:not(.home-page) .lead-magnet-band {
    flex-direction: column;
    align-items: stretch;
  }

  body:not(.home-page) .product-final-cta__actions,
  body:not(.home-page) .commerce-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body:not(.home-page) .product-final-cta__actions .btn,
  body:not(.home-page) .commerce-hero__actions .btn,
  body:not(.home-page) .cta-band .btn {
    width: 100%;
    justify-content: center;
  }

  body:not(.home-page) .contact-grid,
  body:not(.home-page) .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.home-page) .card,
  body:not(.home-page) .img-card,
  body:not(.home-page) .origin-product-card,
  body:not(.home-page) .format-card,
  body:not(.home-page) .commerce-card,
  body:not(.home-page) .fig-form-card,
  body:not(.home-page) .contact-channel,
  body:not(.home-page) .faq-item,
  body:not(.home-page) .packaging-showcase__card {
    transition-duration: 0.01ms !important;
  }
}

/* Mobile origin picker: four direct country tabs, one static silhouette. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .home-page .origin-selector {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .home-page .origin-selector [data-origin="ALL"] {
    display: none !important;
  }

  .home-page .origin-selector button {
    min-width: 0 !important;
    min-height: 44px;
    padding: 9px 4px !important;
    font-size: clamp(0.66rem, 3vw, 0.8rem) !important;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }

  .home-page .origin-map-country,
  .home-page .origin-map-label {
    transition: none !important;
  }

  .home-page .origin-map-country {
    pointer-events: none;
  }

  .home-page .origin-map-country.is-muted,
  .home-page .origin-map-label.is-muted {
    opacity: 0 !important;
    visibility: hidden;
  }
}


body:not(.home-page) .card,
body:not(.home-page) .img-card,
body:not(.home-page) .origin-product-card,
body:not(.home-page) .format-card,
body:not(.home-page) .commerce-card,
body:not(.home-page) .fig-form-card,
body:not(.home-page) .contact-channel,
body:not(.home-page) .contact-form,
body:not(.home-page) .faq-item,
body:not(.home-page) .document-card,
body:not(.home-page) .timeline-step,
body:not(.home-page) .bridge-panel,
body:not(.home-page) .bridge-stat,
body:not(.home-page) .packaging-showcase__card,
body:not(.home-page) .barberry-type-card,
body:not(.home-page) .raisin-type-card,
body:not(.home-page) .rice-option-card,
body:not(.home-page) .salt-format-card {
  background:
    radial-gradient(70% 75% at 100% 0%, color-mix(in srgb, var(--unified-gold) 7%, transparent), transparent 70%),
    var(--unified-panel) !important;
}

body:not(.home-page) .section--alt,
body:not(.home-page) .simplified-section--alt,
body:not(.home-page) .commerce-section--alt {
  background:
    radial-gradient(58% 70% at 94% 8%, rgba(195, 150, 65, 0.07), transparent 68%),
    var(--unified-alt) !important;
}

body:not(.home-page) .cta-band,
body:not(.home-page) .product-final-cta__inner,
body:not(.home-page) .lead-magnet-band,
body:not(.home-page) .catalog-bridge {
  background:
    radial-gradient(72% 140% at 100% 0%, rgba(209, 164, 74, 0.22), transparent 58%),
    radial-gradient(48% 120% at 0% 100%, rgba(112, 21, 20, 0.15), transparent 70%),
    linear-gradient(135deg, #101812, #070C09 72%) !important;
  color: #F8F4E9 !important;
}

body:not(.home-page) .page-hero .buyer-brief {
  border-color: rgba(231, 203, 141, 0.25);
  background:
    radial-gradient(72% 110% at 100% 0%, rgba(209, 164, 74, 0.18), transparent 60%),
    linear-gradient(145deg, rgba(255, 251, 236, 0.055), rgba(255, 255, 255, 0.015)) !important;
  color: #F8F4E9;
}

body:not(.home-page) .page-hero .buyer-brief dd,
body:not(.home-page) .page-hero .buyer-brief h2,
body:not(.home-page) .page-hero .buyer-brief h3 {
  color: #F8F4E9;
}

body:not(.home-page) .page-hero .buyer-brief p,
body:not(.home-page) .page-hero .buyer-brief dt {
  color: rgba(234, 239, 232, 0.68);
}

@media (prefers-color-scheme: light) {

  :root:not([data-theme="dark"]) body:not(.home-page) .cta-band h2,
  :root:not([data-theme="dark"]) body:not(.home-page) .product-final-cta__inner h2,
  :root:not([data-theme="dark"]) body:not(.home-page) .lead-magnet-band h2,
  :root:not([data-theme="dark"]) body:not(.home-page) .catalog-bridge h2 {
    color: #FBF7ED !important;
  }

  :root:not([data-theme="dark"]) body:not(.home-page) .cta-band p,
  :root:not([data-theme="dark"]) body:not(.home-page) .product-final-cta__inner p,
  :root:not([data-theme="dark"]) body:not(.home-page) .lead-magnet-band p,
  :root:not([data-theme="dark"]) body:not(.home-page) .catalog-bridge p {
    color: rgba(234, 239, 232, 0.68) !important;
  }
}


:root[data-theme="light"] body:not(.home-page) .cta-band h2,
:root[data-theme="light"] body:not(.home-page) .product-final-cta__inner h2,
:root[data-theme="light"] body:not(.home-page) .lead-magnet-band h2,
:root[data-theme="light"] body:not(.home-page) .catalog-bridge h2 {
  color: #FBF7ED !important;
}

:root[data-theme="light"] body:not(.home-page) .cta-band p,
:root[data-theme="light"] body:not(.home-page) .product-final-cta__inner p,
:root[data-theme="light"] body:not(.home-page) .lead-magnet-band p,
:root[data-theme="light"] body:not(.home-page) .catalog-bridge p {
  color: rgba(234, 239, 232, 0.68) !important;
}



/* ---------- Header preservation ----------
   Keep the pre-existing header exactly as it was before the site-wide
   inner-page visual layer. The rest of each page still uses this file. */
body:not(.home-page) .site-header {
  --bg: #0A0F0B;
  --bg-elev: #0F1510;
  --surface: #121A14;
  --surface-2: #18231A;
  --ink: #EDF2EC;
  --ink-strong: #F6FAF4;
  --muted: #9AA89D;
  --accent: #129B43;
  --accent-bright: #4ED47F;
  --accent-dim: #0C6E2F;
  --saffron-gold: #D8A73A;
  --saffron-amber: #F0C75E;
  --line: rgba(244, 239, 228, 0.11);
  --line-strong: rgba(244, 239, 228, 0.20);
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 38px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.40), 0 26px 60px rgba(0, 0, 0, 0.50);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) .site-header {
    --bg: #FFFFFF;
    --bg-elev: #F7FAF6;
    --surface: #FFFFFF;
    --surface-2: #F1F6EF;
    --ink: #203026;
    --ink-strong: #07130A;
    --muted: #526459;
    --accent: #0A6F2D;
    --accent-bright: #0B7A33;
    --accent-dim: #0A6429;
    --saffron-gold: #8A650F;
    --saffron-amber: #93620A;
    --line: rgba(15, 47, 27, 0.13);
    --line-strong: rgba(15, 47, 27, 0.24);
    --shadow-soft: 0 2px 8px rgba(17, 35, 23, 0.08), 0 16px 42px rgba(17, 35, 23, 0.10);
    --shadow-lift: 0 5px 14px rgba(17, 35, 23, 0.10), 0 28px 70px rgba(17, 35, 23, 0.14);
  }
}

:root[data-theme="light"] body:not(.home-page) .site-header {
  --bg: #FFFFFF;
  --bg-elev: #F7FAF6;
  --surface: #FFFFFF;
  --surface-2: #F1F6EF;
  --ink: #203026;
  --ink-strong: #07130A;
  --muted: #526459;
  --accent: #0A6F2D;
  --accent-bright: #0B7A33;
  --accent-dim: #0A6429;
  --saffron-gold: #8A650F;
  --saffron-amber: #93620A;
  --line: rgba(15, 47, 27, 0.13);
  --line-strong: rgba(15, 47, 27, 0.24);
  --shadow-soft: 0 2px 8px rgba(17, 35, 23, 0.08), 0 16px 42px rgba(17, 35, 23, 0.10);
  --shadow-lift: 0 5px 14px rgba(17, 35, 23, 0.10), 0 28px 70px rgba(17, 35, 23, 0.14);
}

/* ============================================================
   V3 — Homepage parity, light-mode contrast, header/footer safety
   The homepage is the visual reference. Only <main> on inner pages
   receives this design layer; the existing header and footer remain
   on the original global design system.
   ============================================================ */

/* Restore global page tokens so header, footer and floating utilities stay unchanged. */
body:not(.home-page) {
  --bg: #0A0F0B;
  --bg-elev: #0F1510;
  --surface: #121A14;
  --surface-2: #18231A;
  --ink: #EDF2EC;
  --ink-strong: #F6FAF4;
  --muted: #9AA89D;
  --accent: #129B43;
  --accent-bright: #4ED47F;
  --accent-dim: #0C6E2F;
  --saffron-gold: #D8A73A;
  --saffron-amber: #F0C75E;
  --line: rgba(244, 239, 228, 0.11);
  --line-strong: rgba(244, 239, 228, 0.20);
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 38px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.40), 0 26px 60px rgba(0, 0, 0, 0.50);
  background: var(--bg);
  color: var(--ink);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) {
    --bg: #FFFFFF;
    --bg-elev: #F7FAF6;
    --surface: #FFFFFF;
    --surface-2: #F1F6EF;
    --ink: #203026;
    --ink-strong: #07130A;
    --muted: #526459;
    --accent: #0A6F2D;
    --accent-bright: #0B7A33;
    --accent-dim: #0A6429;
    --saffron-gold: #8A650F;
    --saffron-amber: #93620A;
    --line: rgba(15, 47, 27, 0.13);
    --line-strong: rgba(15, 47, 27, 0.24);
    --shadow-soft: 0 2px 8px rgba(17, 35, 23, 0.08), 0 16px 42px rgba(17, 35, 23, 0.10);
    --shadow-lift: 0 5px 14px rgba(17, 35, 23, 0.10), 0 28px 70px rgba(17, 35, 23, 0.14);
    background:
      radial-gradient(80% 52% at 84% 0%, rgba(216, 167, 58, 0.10), transparent 58%),
      radial-gradient(58% 46% at 0% 18%, rgba(14, 144, 56, 0.08), transparent 55%),
      var(--bg);
  }
}

:root[data-theme="light"] body:not(.home-page) {
  --bg: #FFFFFF;
  --bg-elev: #F7FAF6;
  --surface: #FFFFFF;
  --surface-2: #F1F6EF;
  --ink: #203026;
  --ink-strong: #07130A;
  --muted: #526459;
  --accent: #0A6F2D;
  --accent-bright: #0B7A33;
  --accent-dim: #0A6429;
  --saffron-gold: #8A650F;
  --saffron-amber: #93620A;
  --line: rgba(15, 47, 27, 0.13);
  --line-strong: rgba(15, 47, 27, 0.24);
  --shadow-soft: 0 2px 8px rgba(17, 35, 23, 0.08), 0 16px 42px rgba(17, 35, 23, 0.10);
  --shadow-lift: 0 5px 14px rgba(17, 35, 23, 0.10), 0 28px 70px rgba(17, 35, 23, 0.14);
  background:
    radial-gradient(80% 52% at 84% 0%, rgba(216, 167, 58, 0.10), transparent 58%),
    radial-gradient(58% 46% at 0% 18%, rgba(14, 144, 56, 0.08), transparent 55%),
    var(--bg);
}

/* Inner-page main tokens: same palette and material language as the homepage. */
body:not(.home-page) main {
  --unified-canvas: #08100B;
  --unified-alt: #0A100C;
  --unified-panel: rgba(255, 255, 255, 0.035);
  --unified-panel-strong: #101812;
  --unified-ink: #F4F1E9;
  --unified-muted: rgba(222, 229, 220, 0.68);
  --unified-line: rgba(231, 209, 164, 0.16);
  --unified-line-strong: rgba(231, 203, 141, 0.30);
  --unified-gold: #C4963E;
  --unified-gold-bright: #DDB45C;
  --unified-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 248, 229, 0.045);
  --unified-shadow-lift: 0 36px 92px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 248, 229, 0.07);

  --bg: var(--unified-canvas);
  --bg-elev: var(--unified-alt);
  --surface: var(--unified-panel);
  --surface-2: var(--unified-panel-strong);
  --ink: var(--unified-ink);
  --ink-strong: #FBF7ED;
  --muted: var(--unified-muted);
  --line: var(--unified-line);
  --line-strong: var(--unified-line-strong);
  --saffron-gold: var(--unified-gold);
  --saffron-amber: var(--unified-gold-bright);
  --commerce-panel: var(--unified-panel);
  --commerce-panel-strong: var(--unified-panel-strong);
  --commerce-line: var(--unified-line);
  --commerce-muted: var(--unified-muted);
  --commerce-chip: rgba(221, 180, 92, 0.055);
  --commerce-shadow: var(--unified-shadow);
  --commerce-media-bg: #0A100C;

  background: var(--unified-canvas) !important;
  color: var(--unified-ink);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main {
    --unified-canvas: #F4F2EA;
    --unified-alt: #EEECE4;
    --unified-panel: rgba(255, 255, 255, 0.74);
    --unified-panel-strong: #FFFDF7;
    --unified-ink: #111812;
    --unified-muted: #566058;
    --unified-line: rgba(91, 75, 43, 0.18);
    --unified-line-strong: rgba(115, 83, 25, 0.30);
    --unified-gold: #986B17;
    --unified-gold-bright: #B78424;
    --unified-shadow: 0 30px 80px rgba(43, 36, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --unified-shadow-lift: 0 38px 94px rgba(43, 36, 23, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    --ink-strong: #111812;
    --commerce-media-bg: #E9E5DA;

    background:
      radial-gradient(62% 50% at 96% 8%, rgba(205, 166, 86, 0.12), transparent 68%),
      linear-gradient(rgba(145, 115, 57, 0.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(145, 115, 57, 0.032) 1px, transparent 1px),
      var(--unified-canvas) !important;
    background-size: auto, 72px 72px, 72px 72px, auto !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main {
  --unified-canvas: #F4F2EA;
  --unified-alt: #EEECE4;
  --unified-panel: rgba(255, 255, 255, 0.74);
  --unified-panel-strong: #FFFDF7;
  --unified-ink: #111812;
  --unified-muted: #566058;
  --unified-line: rgba(91, 75, 43, 0.18);
  --unified-line-strong: rgba(115, 83, 25, 0.30);
  --unified-gold: #986B17;
  --unified-gold-bright: #B78424;
  --unified-shadow: 0 30px 80px rgba(43, 36, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --unified-shadow-lift: 0 38px 94px rgba(43, 36, 23, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --ink-strong: #111812;
  --commerce-media-bg: #E9E5DA;

  background:
    radial-gradient(62% 50% at 96% 8%, rgba(205, 166, 86, 0.12), transparent 68%),
    linear-gradient(rgba(145, 115, 57, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 115, 57, 0.032) 1px, transparent 1px),
    var(--unified-canvas) !important;
  background-size: auto, 72px 72px, 72px 72px, auto !important;
}

/* Exact homepage-style cinematic hero in both light and dark themes. */
body:not(.home-page) main .page-hero,
body:not(.home-page) main .commerce-hero,
body:not(.home-page) main .buyer-hero,
body:not(.home-page) main .portfolio-hero,
body:not(.home-page) main .thanks-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(226, 194, 126, 0.18) !important;
  background:
    linear-gradient(rgba(216, 180, 101, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 180, 101, 0.032) 1px, transparent 1px),
    radial-gradient(54% 82% at 91% 16%, rgba(196, 150, 62, 0.17), transparent 68%),
    radial-gradient(38% 68% at 4% 96%, rgba(111, 22, 21, 0.13), transparent 72%),
    linear-gradient(135deg, #101812, #070C09 72%) !important;
  background-size: 72px 72px, 72px 72px, auto, auto, auto !important;
  color: #F8F4E9 !important;
}

body:not(.home-page) main .page-hero h1,
body:not(.home-page) main .commerce-hero h1,
body:not(.home-page) main .buyer-hero h1,
body:not(.home-page) main .portfolio-hero h1,
body:not(.home-page) main .thanks-hero h1,
body:not(.home-page) main .page-hero h2,
body:not(.home-page) main .commerce-hero h2,
body:not(.home-page) main .buyer-hero h2,
body:not(.home-page) main .portfolio-hero h2,
body:not(.home-page) main .thanks-hero h2 {
  color: #FBF7ED !important;
  opacity: 1 !important;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.18);
}

body:not(.home-page) main .page-hero p,
body:not(.home-page) main .commerce-hero p,
body:not(.home-page) main .buyer-hero p,
body:not(.home-page) main .portfolio-hero p,
body:not(.home-page) main .thanks-hero p,
body:not(.home-page) main .page-hero .lead,
body:not(.home-page) main .commerce-hero .lead,
body:not(.home-page) main .buyer-hero .lead,
body:not(.home-page) main .portfolio-hero .lead,
body:not(.home-page) main .thanks-hero .lead,
body:not(.home-page) main .commerce-breadcrumb {
  color: rgba(234, 239, 232, 0.76) !important;
  opacity: 1 !important;
}

body:not(.home-page) main .page-hero .eyebrow,
body:not(.home-page) main .commerce-hero .eyebrow,
body:not(.home-page) main .buyer-hero .eyebrow,
body:not(.home-page) main .portfolio-hero .eyebrow,
body:not(.home-page) main .thanks-hero .eyebrow {
  color: #DDB45C !important;
  opacity: 1 !important;
}

body:not(.home-page) main .commerce-hero__copy,
body:not(.home-page) main .page-hero .reveal,
body:not(.home-page) main .buyer-hero .reveal,
body:not(.home-page) main .portfolio-hero .reveal,
body:not(.home-page) main .thanks-hero .reveal {
  opacity: 1;
}

body:not(.home-page) main .commerce-hero__media,
body:not(.home-page) main .buyer-brief,
body:not(.home-page) main .document-visual {
  border-color: rgba(231, 203, 141, 0.25) !important;
  background:
    radial-gradient(72% 110% at 100% 0%, rgba(209, 164, 74, 0.18), transparent 60%),
    linear-gradient(145deg, rgba(255, 251, 236, 0.055), rgba(255, 255, 255, 0.015)) !important;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 246, 218, 0.08) !important;
}

body:not(.home-page) main .commerce-hero__media img {
  opacity: 1 !important;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.36));
}

/* Main-page button language follows the homepage: gold primary, restrained outline secondary. */
body:not(.home-page) main .btn--primary {
  border-color: rgba(255, 239, 199, 0.72) !important;
  background: linear-gradient(135deg, #E8CC88, #C9973F) !important;
  color: #211606 !important;
  box-shadow: inset 0 1px 0 rgba(255, 252, 236, 0.72), 0 14px 34px rgba(173, 121, 38, 0.22) !important;
}

body:not(.home-page) main .btn--primary:hover,
body:not(.home-page) main .btn--primary:focus-visible {
  border-color: #FFF2CF !important;
  background: linear-gradient(135deg, #F0D99A, #D5A74D) !important;
  color: #211606 !important;
}

body:not(.home-page) main .page-hero .btn--ghost,
body:not(.home-page) main .commerce-hero .btn--ghost,
body:not(.home-page) main .buyer-hero .btn--ghost,
body:not(.home-page) main .portfolio-hero .btn--ghost,
body:not(.home-page) main .thanks-hero .btn--ghost {
  border-color: rgba(244, 239, 228, 0.34) !important;
  background: rgba(4, 9, 6, 0.35) !important;
  color: #F8F4E9 !important;
}

/* Light theme section system copied from homepage capabilities/process areas. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main .section,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-portfolio,
  :root:not([data-theme="dark"]) body:not(.home-page) main .product-final-cta,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-section,
  :root:not([data-theme="dark"]) body:not(.home-page) main .docs-section,
  :root:not([data-theme="dark"]) body:not(.home-page) main .faq-section {
    background: #F4F2EA !important;
    color: #111812 !important;
  }

  :root:not([data-theme="dark"]) body:not(.home-page) main .section--alt,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section--alt,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section--alt {
    border-block-color: rgba(91, 75, 43, 0.18) !important;
    background:
      radial-gradient(50% 70% at 10% 0%, rgba(194, 150, 66, 0.10), transparent 68%),
      #EEECE4 !important;
    color: #111812 !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main .section,
:root[data-theme="light"] body:not(.home-page) main .simplified-section,
:root[data-theme="light"] body:not(.home-page) main .commerce-section,
:root[data-theme="light"] body:not(.home-page) main .origin-portfolio,
:root[data-theme="light"] body:not(.home-page) main .product-final-cta,
:root[data-theme="light"] body:not(.home-page) main .catalog-section,
:root[data-theme="light"] body:not(.home-page) main .docs-section,
:root[data-theme="light"] body:not(.home-page) main .faq-section {
  background: #F4F2EA !important;
  color: #111812 !important;
}

:root[data-theme="light"] body:not(.home-page) main .section--alt,
:root[data-theme="light"] body:not(.home-page) main .simplified-section--alt,
:root[data-theme="light"] body:not(.home-page) main .commerce-section--alt {
  border-block-color: rgba(91, 75, 43, 0.18) !important;
  background:
    radial-gradient(50% 70% at 10% 0%, rgba(194, 150, 66, 0.10), transparent 68%),
    #EEECE4 !important;
  color: #111812 !important;
}

/* Force readable text on every light inner-page surface. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main .section h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .section h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .section h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-portfolio h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-portfolio h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-portfolio h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-section h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-section h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-section h3 {
    color: #111812 !important;
    opacity: 1 !important;
  }

  :root:not([data-theme="dark"]) body:not(.home-page) main .section p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-portfolio p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-section p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .section li,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section li,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section li,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-portfolio li,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-section li,
  :root:not([data-theme="dark"]) body:not(.home-page) main dd,
  :root:not([data-theme="dark"]) body:not(.home-page) main dt {
    color: #566058 !important;
    opacity: 1 !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main .section h1,
:root[data-theme="light"] body:not(.home-page) main .section h2,
:root[data-theme="light"] body:not(.home-page) main .section h3,
:root[data-theme="light"] body:not(.home-page) main .simplified-section h1,
:root[data-theme="light"] body:not(.home-page) main .simplified-section h2,
:root[data-theme="light"] body:not(.home-page) main .simplified-section h3,
:root[data-theme="light"] body:not(.home-page) main .commerce-section h1,
:root[data-theme="light"] body:not(.home-page) main .commerce-section h2,
:root[data-theme="light"] body:not(.home-page) main .commerce-section h3,
:root[data-theme="light"] body:not(.home-page) main .origin-portfolio h1,
:root[data-theme="light"] body:not(.home-page) main .origin-portfolio h2,
:root[data-theme="light"] body:not(.home-page) main .origin-portfolio h3,
:root[data-theme="light"] body:not(.home-page) main .catalog-section h1,
:root[data-theme="light"] body:not(.home-page) main .catalog-section h2,
:root[data-theme="light"] body:not(.home-page) main .catalog-section h3 {
  color: #111812 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] body:not(.home-page) main .section p,
:root[data-theme="light"] body:not(.home-page) main .simplified-section p,
:root[data-theme="light"] body:not(.home-page) main .commerce-section p,
:root[data-theme="light"] body:not(.home-page) main .origin-portfolio p,
:root[data-theme="light"] body:not(.home-page) main .catalog-section p,
:root[data-theme="light"] body:not(.home-page) main .section li,
:root[data-theme="light"] body:not(.home-page) main .simplified-section li,
:root[data-theme="light"] body:not(.home-page) main .commerce-section li,
:root[data-theme="light"] body:not(.home-page) main .origin-portfolio li,
:root[data-theme="light"] body:not(.home-page) main .catalog-section li,
:root[data-theme="light"] body:not(.home-page) main dd,
:root[data-theme="light"] body:not(.home-page) main dt {
  color: #566058 !important;
  opacity: 1 !important;
}

/* Re-assert hero text after the broad light-surface rules above. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main .page-hero h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .page-hero h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .page-hero h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-hero h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-hero h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-hero h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .buyer-hero h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .portfolio-hero h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .thanks-hero h1 {
    color: #FBF7ED !important;
  }

  :root:not([data-theme="dark"]) body:not(.home-page) main .page-hero p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-hero p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .buyer-hero p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .portfolio-hero p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .thanks-hero p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-breadcrumb {
    color: rgba(234, 239, 232, 0.76) !important;
  }

  :root:not([data-theme="dark"]) body:not(.home-page) main .page-hero .eyebrow,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-hero .eyebrow,
  :root:not([data-theme="dark"]) body:not(.home-page) main .buyer-hero .eyebrow,
  :root:not([data-theme="dark"]) body:not(.home-page) main .portfolio-hero .eyebrow,
  :root:not([data-theme="dark"]) body:not(.home-page) main .thanks-hero .eyebrow {
    color: #DDB45C !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main .page-hero h1,
:root[data-theme="light"] body:not(.home-page) main .page-hero h2,
:root[data-theme="light"] body:not(.home-page) main .page-hero h3,
:root[data-theme="light"] body:not(.home-page) main .commerce-hero h1,
:root[data-theme="light"] body:not(.home-page) main .commerce-hero h2,
:root[data-theme="light"] body:not(.home-page) main .commerce-hero h3,
:root[data-theme="light"] body:not(.home-page) main .buyer-hero h1,
:root[data-theme="light"] body:not(.home-page) main .portfolio-hero h1,
:root[data-theme="light"] body:not(.home-page) main .thanks-hero h1 {
  color: #FBF7ED !important;
}

:root[data-theme="light"] body:not(.home-page) main .page-hero p,
:root[data-theme="light"] body:not(.home-page) main .commerce-hero p,
:root[data-theme="light"] body:not(.home-page) main .buyer-hero p,
:root[data-theme="light"] body:not(.home-page) main .portfolio-hero p,
:root[data-theme="light"] body:not(.home-page) main .thanks-hero p,
:root[data-theme="light"] body:not(.home-page) main .commerce-breadcrumb {
  color: rgba(234, 239, 232, 0.76) !important;
}

:root[data-theme="light"] body:not(.home-page) main .page-hero .eyebrow,
:root[data-theme="light"] body:not(.home-page) main .commerce-hero .eyebrow,
:root[data-theme="light"] body:not(.home-page) main .buyer-hero .eyebrow,
:root[data-theme="light"] body:not(.home-page) main .portfolio-hero .eyebrow,
:root[data-theme="light"] body:not(.home-page) main .thanks-hero .eyebrow {
  color: #DDB45C !important;
}

/* Homepage-style editorial cards and process panels in light mode. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main .card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .img-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-product-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .format-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .fig-form-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .contact-channel,
  :root:not([data-theme="dark"]) body:not(.home-page) main .contact-form,
  :root:not([data-theme="dark"]) body:not(.home-page) main .faq-item,
  :root:not([data-theme="dark"]) body:not(.home-page) main .document-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .timeline-step,
  :root:not([data-theme="dark"]) body:not(.home-page) main .bridge-panel,
  :root:not([data-theme="dark"]) body:not(.home-page) main .bridge-stat,
  :root:not([data-theme="dark"]) body:not(.home-page) main .packaging-showcase__card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .barberry-type-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .raisin-type-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .rice-option-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .salt-format-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .rice-product-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .apricot-product-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .fig-product-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .salt-product-card,
  :root:not([data-theme="dark"]) body:not(.home-page) main .pine-product-card {
    border-color: rgba(91, 75, 43, 0.18) !important;
    background:
      radial-gradient(70% 75% at 100% 0%, rgba(183, 132, 36, 0.07), transparent 70%),
      rgba(255, 255, 255, 0.72) !important;
    color: #111812 !important;
    box-shadow: 0 24px 64px rgba(43, 36, 23, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main .card,
:root[data-theme="light"] body:not(.home-page) main .img-card,
:root[data-theme="light"] body:not(.home-page) main .origin-product-card,
:root[data-theme="light"] body:not(.home-page) main .format-card,
:root[data-theme="light"] body:not(.home-page) main .commerce-card,
:root[data-theme="light"] body:not(.home-page) main .fig-form-card,
:root[data-theme="light"] body:not(.home-page) main .contact-channel,
:root[data-theme="light"] body:not(.home-page) main .contact-form,
:root[data-theme="light"] body:not(.home-page) main .faq-item,
:root[data-theme="light"] body:not(.home-page) main .document-card,
:root[data-theme="light"] body:not(.home-page) main .timeline-step,
:root[data-theme="light"] body:not(.home-page) main .bridge-panel,
:root[data-theme="light"] body:not(.home-page) main .bridge-stat,
:root[data-theme="light"] body:not(.home-page) main .packaging-showcase__card,
:root[data-theme="light"] body:not(.home-page) main .barberry-type-card,
:root[data-theme="light"] body:not(.home-page) main .raisin-type-card,
:root[data-theme="light"] body:not(.home-page) main .rice-option-card,
:root[data-theme="light"] body:not(.home-page) main .salt-format-card,
:root[data-theme="light"] body:not(.home-page) main .rice-product-card,
:root[data-theme="light"] body:not(.home-page) main .apricot-product-card,
:root[data-theme="light"] body:not(.home-page) main .fig-product-card,
:root[data-theme="light"] body:not(.home-page) main .salt-product-card,
:root[data-theme="light"] body:not(.home-page) main .pine-product-card {
  border-color: rgba(91, 75, 43, 0.18) !important;
  background:
    radial-gradient(70% 75% at 100% 0%, rgba(183, 132, 36, 0.07), transparent 70%),
    rgba(255, 255, 255, 0.72) !important;
  color: #111812 !important;
  box-shadow: 0 24px 64px rgba(43, 36, 23, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

/* Unified segmented grids and process modules, mirroring homepage cards. */
body:not(.home-page) main .simplified-grid,
body:not(.home-page) main .simplified-process,
body:not(.home-page) main .company-facts,
body:not(.home-page) main .commerce-specs {
  overflow: hidden;
  border: 1px solid var(--unified-line) !important;
  border-radius: 30px !important;
  background: var(--unified-panel) !important;
  box-shadow: var(--unified-shadow) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-grid,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-process,
  :root:not([data-theme="dark"]) body:not(.home-page) main .company-facts,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-specs {
    border-color: rgba(91, 75, 43, 0.18) !important;
    background: rgba(255, 255, 255, 0.64) !important;
    box-shadow: 0 30px 76px rgba(43, 36, 23, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main .simplified-grid,
:root[data-theme="light"] body:not(.home-page) main .simplified-process,
:root[data-theme="light"] body:not(.home-page) main .company-facts,
:root[data-theme="light"] body:not(.home-page) main .commerce-specs {
  border-color: rgba(91, 75, 43, 0.18) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  box-shadow: 0 30px 76px rgba(43, 36, 23, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

/* Final conversion blocks stay cinematic, exactly like the homepage final CTA. */
body:not(.home-page) main .cta-band,
body:not(.home-page) main .product-final-cta__inner,
body:not(.home-page) main .lead-magnet-band,
body:not(.home-page) main .catalog-bridge,
body:not(.home-page) main .origin-commercial-note {
  border-color: rgba(231, 203, 141, 0.25) !important;
  background:
    radial-gradient(72% 140% at 100% 0%, rgba(209, 164, 74, 0.22), transparent 58%),
    radial-gradient(48% 120% at 0% 100%, rgba(112, 21, 20, 0.15), transparent 70%),
    linear-gradient(135deg, #101812, #070C09 72%) !important;
  color: #F8F4E9 !important;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 246, 218, 0.10) !important;
}

body:not(.home-page) main .cta-band h1,
body:not(.home-page) main .cta-band h2,
body:not(.home-page) main .cta-band h3,
body:not(.home-page) main .product-final-cta__inner h1,
body:not(.home-page) main .product-final-cta__inner h2,
body:not(.home-page) main .product-final-cta__inner h3,
body:not(.home-page) main .lead-magnet-band h1,
body:not(.home-page) main .lead-magnet-band h2,
body:not(.home-page) main .lead-magnet-band h3,
body:not(.home-page) main .catalog-bridge h1,
body:not(.home-page) main .catalog-bridge h2,
body:not(.home-page) main .catalog-bridge h3,
body:not(.home-page) main .origin-commercial-note h1,
body:not(.home-page) main .origin-commercial-note h2,
body:not(.home-page) main .origin-commercial-note h3 {
  color: #FBF7ED !important;
}

body:not(.home-page) main .cta-band p,
body:not(.home-page) main .product-final-cta__inner p,
body:not(.home-page) main .lead-magnet-band p,
body:not(.home-page) main .catalog-bridge p,
body:not(.home-page) main .origin-commercial-note p {
  color: rgba(234, 239, 232, 0.72) !important;
}

/* Forms and controls remain readable in light mode. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main input,
  :root:not([data-theme="dark"]) body:not(.home-page) main select,
  :root:not([data-theme="dark"]) body:not(.home-page) main textarea {
    border-color: rgba(91, 75, 43, 0.22) !important;
    background: #FFFDF7 !important;
    color: #111812 !important;
  }

  :root:not([data-theme="dark"]) body:not(.home-page) main label,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-filter-label,
  :root:not([data-theme="dark"]) body:not(.home-page) main .form-field label {
    color: #28312A !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main input,
:root[data-theme="light"] body:not(.home-page) main select,
:root[data-theme="light"] body:not(.home-page) main textarea {
  border-color: rgba(91, 75, 43, 0.22) !important;
  background: #FFFDF7 !important;
  color: #111812 !important;
}

:root[data-theme="light"] body:not(.home-page) main label,
:root[data-theme="light"] body:not(.home-page) main .catalog-filter-label,
:root[data-theme="light"] body:not(.home-page) main .form-field label {
  color: #28312A !important;
}

/* Header and footer: explicitly restore the pre-unification appearance. */
body:not(.home-page) .site-header {
  --bg: #0A0F0B;
  --bg-elev: #0F1510;
  --surface: #121A14;
  --surface-2: #18231A;
  --ink: #EDF2EC;
  --ink-strong: #F6FAF4;
  --muted: #9AA89D;
  --accent: #129B43;
  --accent-bright: #4ED47F;
  --accent-dim: #0C6E2F;
  --saffron-gold: #D8A73A;
  --saffron-amber: #F0C75E;
  --line: rgba(244, 239, 228, 0.11);
  --line-strong: rgba(244, 239, 228, 0.20);
}

body:not(.home-page) .site-footer {
  --bg: #0A0F0B;
  --bg-elev: #0F1510;
  --surface: #121A14;
  --surface-2: #18231A;
  --ink: #EDF2EC;
  --ink-strong: #F6FAF4;
  --muted: #9AA89D;
  --accent: #129B43;
  --accent-bright: #4ED47F;
  --accent-dim: #0C6E2F;
  --saffron-gold: #D8A73A;
  --saffron-amber: #F0C75E;
  --line: rgba(244, 239, 228, 0.11);
  --line-strong: rgba(244, 239, 228, 0.20);
  margin-top: 0 !important;
  padding: 78px 0 38px !important;
  border-top: 1px solid var(--line) !important;
  background: #07110B !important;
  color: rgba(210, 218, 209, 0.66) !important;
}

body:not(.home-page) .site-footer h4 {
  color: var(--accent) !important;
}

body:not(.home-page) .site-footer ul a:hover {
  color: var(--accent-bright) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) .site-header,
  :root:not([data-theme="dark"]) body:not(.home-page) .site-footer {
    --bg: #FFFFFF;
    --bg-elev: #F7FAF6;
    --surface: #FFFFFF;
    --surface-2: #F1F6EF;
    --ink: #203026;
    --ink-strong: #07130A;
    --muted: #526459;
    --accent: #0A6F2D;
    --accent-bright: #0B7A33;
    --accent-dim: #0A6429;
    --saffron-gold: #8A650F;
    --saffron-amber: #93620A;
    --line: rgba(15, 47, 27, 0.13);
    --line-strong: rgba(15, 47, 27, 0.24);
  }
}

:root[data-theme="light"] body:not(.home-page) .site-header,
:root[data-theme="light"] body:not(.home-page) .site-footer {
  --bg: #FFFFFF;
  --bg-elev: #F7FAF6;
  --surface: #FFFFFF;
  --surface-2: #F1F6EF;
  --ink: #203026;
  --ink-strong: #07130A;
  --muted: #526459;
  --accent: #0A6F2D;
  --accent-bright: #0B7A33;
  --accent-dim: #0A6429;
  --saffron-gold: #8A650F;
  --saffron-amber: #93620A;
  --line: rgba(15, 47, 27, 0.13);
  --line-strong: rgba(15, 47, 27, 0.24);
}

@media (max-width: 760px) {
  body:not(.home-page) .site-footer {
    margin-top: 0 !important;
    padding: 48px 0 30px !important;
  }
}

/* Final safety details for untouched global chrome and hero information panels. */
body:not(.home-page) .site-footer .container {
  width: min(var(--container), 100% - 48px) !important;
}

body:not(.home-page) main .page-hero .buyer-brief dt,
body:not(.home-page) main .page-hero .buyer-brief p {
  color: rgba(234, 239, 232, 0.70) !important;
}

body:not(.home-page) main .page-hero .buyer-brief dd,
body:not(.home-page) main .page-hero .buyer-brief h2,
body:not(.home-page) main .page-hero .buyer-brief h3 {
  color: #F8F4E9 !important;
}

@media (max-width: 760px) {
  body:not(.home-page) .site-footer .container {
    width: calc(100% - 40px) !important;
  }
}

/* ---------- CTA readability hotfix (2026-07-20) ----------
   The broad light-surface rules intentionally make normal section headings
   dark, but a CTA can sit inside those same sections while retaining a dark
   cinematic panel. These higher-specificity rules keep all CTA copy readable
   without changing the header, footer, layout, colours, or animation system. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section .cta-band h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section .cta-band h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section .cta-band h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .section .cta-band h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .section .cta-band h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .section .cta-band h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section .cta-band h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section .cta-band h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section .cta-band h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .product-final-cta .product-final-cta__inner h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .product-final-cta .product-final-cta__inner h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .product-final-cta .product-final-cta__inner h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .lead-magnet-band h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .lead-magnet-band h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .lead-magnet-band h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-bridge h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-bridge h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-bridge h3,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-commercial-note h1,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-commercial-note h2,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-commercial-note h3 {
    color: #FBF7ED !important;
    -webkit-text-fill-color: #FBF7ED !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 2px 26px rgba(0, 0, 0, 0.22);
  }

  :root:not([data-theme="dark"]) body:not(.home-page) main .commerce-section .cta-band p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .section .cta-band p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .simplified-section .cta-band p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .product-final-cta .product-final-cta__inner p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .lead-magnet-band p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .catalog-bridge p,
  :root:not([data-theme="dark"]) body:not(.home-page) main .origin-commercial-note p {
    color: rgba(241, 239, 230, 0.82) !important;
    -webkit-text-fill-color: rgba(241, 239, 230, 0.82) !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

:root[data-theme="light"] body:not(.home-page) main .commerce-section .cta-band h1,
:root[data-theme="light"] body:not(.home-page) main .commerce-section .cta-band h2,
:root[data-theme="light"] body:not(.home-page) main .commerce-section .cta-band h3,
:root[data-theme="light"] body:not(.home-page) main .section .cta-band h1,
:root[data-theme="light"] body:not(.home-page) main .section .cta-band h2,
:root[data-theme="light"] body:not(.home-page) main .section .cta-band h3,
:root[data-theme="light"] body:not(.home-page) main .simplified-section .cta-band h1,
:root[data-theme="light"] body:not(.home-page) main .simplified-section .cta-band h2,
:root[data-theme="light"] body:not(.home-page) main .simplified-section .cta-band h3,
:root[data-theme="light"] body:not(.home-page) main .product-final-cta .product-final-cta__inner h1,
:root[data-theme="light"] body:not(.home-page) main .product-final-cta .product-final-cta__inner h2,
:root[data-theme="light"] body:not(.home-page) main .product-final-cta .product-final-cta__inner h3,
:root[data-theme="light"] body:not(.home-page) main .lead-magnet-band h1,
:root[data-theme="light"] body:not(.home-page) main .lead-magnet-band h2,
:root[data-theme="light"] body:not(.home-page) main .lead-magnet-band h3,
:root[data-theme="light"] body:not(.home-page) main .catalog-bridge h1,
:root[data-theme="light"] body:not(.home-page) main .catalog-bridge h2,
:root[data-theme="light"] body:not(.home-page) main .catalog-bridge h3,
:root[data-theme="light"] body:not(.home-page) main .origin-commercial-note h1,
:root[data-theme="light"] body:not(.home-page) main .origin-commercial-note h2,
:root[data-theme="light"] body:not(.home-page) main .origin-commercial-note h3 {
  color: #FBF7ED !important;
  -webkit-text-fill-color: #FBF7ED !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.22);
}

:root[data-theme="light"] body:not(.home-page) main .commerce-section .cta-band p,
:root[data-theme="light"] body:not(.home-page) main .section .cta-band p,
:root[data-theme="light"] body:not(.home-page) main .simplified-section .cta-band p,
:root[data-theme="light"] body:not(.home-page) main .product-final-cta .product-final-cta__inner p,
:root[data-theme="light"] body:not(.home-page) main .lead-magnet-band p,
:root[data-theme="light"] body:not(.home-page) main .catalog-bridge p,
:root[data-theme="light"] body:not(.home-page) main .origin-commercial-note p {
  color: rgba(241, 239, 230, 0.82) !important;
  -webkit-text-fill-color: rgba(241, 239, 230, 0.82) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ========================================================================== 
   SITE-WIDE UTILITY CONSISTENCY — 2026-07-20
   Homepage utility treatment is now shared by every page.
   Header and footer rules are intentionally untouched.
   ========================================================================== */

/* A single, identical scroll indicator on every document. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #4E8F5F 0%, #B89A5A 58%, #E4BD68 100%);
  box-shadow: 0 0 10px rgba(228, 189, 104, 0.24);
  will-change: transform;
}

/* Use the labeled WhatsApp shortcut sitewide, including the home page. */
.wa-float,
.home-page .wa-float {
  right: 22px;
  bottom: 22px;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 52px;
  padding: 12px 18px;
  gap: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-pill);
  border: 1px solid rgba(78, 212, 127, 0.36);
  background: rgba(10, 15, 11, 0.82);
  color: var(--accent-bright, #4ED47F);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.wa-float span,
.home-page .wa-float span {
  display: inline;
  white-space: nowrap;
}

.wa-float svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.wa-float:hover,
.home-page .wa-float:hover {
  transform: translateY(-3px);
  border-color: var(--accent-bright, #4ED47F);
  background: rgba(11, 31, 17, 0.94);
}

.wa-float:focus-visible {
  outline: 3px solid rgba(228, 189, 104, 0.58);
  outline-offset: 3px;
}

:root[data-theme="light"] .wa-float,
:root:not([data-theme="dark"]) .wa-float {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 246, 0.96));
  color: #087D3B;
  border-color: rgba(8, 125, 59, 0.20);
  box-shadow: 0 12px 30px rgba(17, 35, 23, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .wa-float:hover,
:root:not([data-theme="dark"]) .wa-float:hover {
  background: #FFFFFF;
  border-color: rgba(8, 125, 59, 0.42);
  box-shadow: 0 14px 34px rgba(17, 35, 23, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

@media (max-width: 900px) {
  .wa-float,
  .home-page .wa-float {
    right: 14px;
    bottom: 72px;
    min-height: 48px;
    padding: 11px 15px;
    gap: 8px;
  }

  .wa-float svg {
    width: 20px;
    height: 20px;
  }

  .wa-float span,
  .home-page .wa-float span {
    display: inline;
    font-size: 13px;
  }
}

/* ============================================================
   Premium polish pass — restrained changes only
   Keeps structure, palette, header, footer and content intact.
   ============================================================ */

/* Softer elevation: premium through restraint, not heavy glow. */
body:not(.home-page) {
  --unified-shadow: 0 20px 56px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(231, 209, 164, 0.08), inset 0 1px 0 rgba(255, 248, 229, 0.035);
  --unified-shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(231, 203, 141, 0.12), inset 0 1px 0 rgba(255, 248, 229, 0.05);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not(.home-page) {
    --unified-shadow: 0 18px 50px rgba(43, 36, 23, 0.085), 0 0 0 1px rgba(43, 36, 23, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --unified-shadow-lift: 0 24px 64px rgba(43, 36, 23, 0.12), 0 0 0 1px rgba(43, 36, 23, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }
}

:root[data-theme="light"] body:not(.home-page) {
  --unified-shadow: 0 18px 50px rgba(43, 36, 23, 0.085), 0 0 0 1px rgba(43, 36, 23, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  --unified-shadow-lift: 0 24px 64px rgba(43, 36, 23, 0.12), 0 0 0 1px rgba(43, 36, 23, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* More controlled internal-page typography and fewer headline wraps. */
body:not(.home-page) main .page-hero h1,
body:not(.home-page) main .commerce-hero h1,
body:not(.home-page) main .buyer-hero h1,
body:not(.home-page) main .portfolio-hero h1,
body:not(.home-page) main .thanks-hero h1 {
  max-width: 920px;
  font-size: clamp(2.7rem, 5.15vw, 5.25rem) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.04em;
}

body:not(.home-page) main .commerce-hero__grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
  gap: clamp(44px, 6vw, 84px);
}

body:not(.home-page) main .commerce-hero__copy {
  max-width: 760px;
}

body:not(.home-page) main .commerce-hero .lead,
body:not(.home-page) main .page-hero .lead,
body:not(.home-page) main .section-head p,
body:not(.home-page) main .commerce-section__head p {
  max-width: 68ch;
  font-weight: 400;
}

/* Slightly calmer, more generous vertical rhythm. */
body:not(.home-page) main .section,
body:not(.home-page) main .simplified-section,
body:not(.home-page) main .commerce-section,
body:not(.home-page) main .origin-portfolio,
body:not(.home-page) main .product-final-cta {
  padding-block: clamp(92px, 9.6vw, 148px);
}

body:not(.home-page) main .section-head,
body:not(.home-page) main .commerce-section__head {
  margin-bottom: clamp(44px, 5.4vw, 72px);
}

/* Refine media framing across inner pages without changing imagery. */
body:not(.home-page) main .commerce-hero__media {
  padding: clamp(12px, 1.8vw, 20px);
  border-radius: 24px;
  box-shadow: var(--unified-shadow) !important;
}

body:not(.home-page) main .commerce-hero__media img {
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.24));
}

/* Packaging page: remove the outer frame completely in both themes. */
body.packaging-page main .commerce-hero__media {
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.packaging-page main .commerce-hero__media::before {
  display: none !important;
}

body.packaging-page main .commerce-hero__media img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.26)) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.packaging-page main .commerce-hero__media img {
    filter: drop-shadow(0 20px 34px rgba(35, 42, 36, 0.13)) !important;
  }
}

:root[data-theme="light"] body.packaging-page main .commerce-hero__media img {
  filter: drop-shadow(0 20px 34px rgba(35, 42, 36, 0.13)) !important;
}

/* Keep gold as a focused action accent, with less permanent glow. */
body:not(.home-page) main .btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 252, 236, 0.68), 0 10px 24px rgba(173, 121, 38, 0.16) !important;
}

body:not(.home-page) main .btn--primary:hover,
body:not(.home-page) main .btn--primary:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 252, 236, 0.78), 0 14px 30px rgba(173, 121, 38, 0.21) !important;
}

/* Slower, shorter reveal motion for a calmer editorial feel. */
body:not(.home-page) main .reveal {
  transform: translateY(18px);
  filter: blur(1px);
  transition-duration: 0.62s;
}

body:not(.home-page) main .reveal[data-r="left"] { transform: translateX(-24px); }
body:not(.home-page) main .reveal[data-r="right"] { transform: translateX(24px); }
body:not(.home-page) main .reveal[data-r="zoom"] { transform: scale(0.975); }

@media (max-width: 900px) {
  body:not(.home-page) main .commerce-hero__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  body:not(.home-page) main .page-hero h1,
  body:not(.home-page) main .commerce-hero h1,
  body:not(.home-page) main .buyer-hero h1,
  body:not(.home-page) main .portfolio-hero h1,
  body:not(.home-page) main .thanks-hero h1 {
    font-size: clamp(2.55rem, 11.5vw, 3.85rem) !important;
    line-height: 1.01 !important;
  }

  body.packaging-page main .commerce-hero__media {
    order: -1;
  }

  body.packaging-page main .commerce-hero__media img {
    border-radius: 14px;
  }
}

/* A little more internal breathing room on text-led cards. */
body:not(.home-page) main .format-card,
body:not(.home-page) main .commerce-card {
  padding: 28px;
  border-radius: 12px;
}

body:not(.home-page) main .buyer-card,
body:not(.home-page) main .document-card,
body:not(.home-page) main .simplified-card {
  padding: clamp(28px, 3vw, 36px);
}

body:not(.home-page) main .card:hover {
  transform: translateY(-3px);
}

@media (max-width: 700px) {
  body:not(.home-page) main .format-card,
  body:not(.home-page) main .commerce-card,
  body:not(.home-page) main .buyer-card,
  body:not(.home-page) main .document-card,
  body:not(.home-page) main .simplified-card {
    padding: 24px;
  }
}

/* Sharp card rendering: reveal motion must never blur product images or text. */
body:not(.home-page) main .reveal {
  filter: none !important;
  transition-property: opacity, transform !important;
}

body:not(.home-page) main .reveal.is-visible {
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto;
}

body:not(.home-page) main .img-card,
body:not(.home-page) main .product-card,
body:not(.home-page) main .img-card img,
body:not(.home-page) main .product-card img {
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* ============================================================
   Transparent, scroll-revealing header on every page
   ------------------------------------------------------------
   Match the homepage: the header overlays the top of the (dark)
   hero and stays transparent with light text until the user
   scrolls, at which point the shared .is-scrolled frosted bar
   fades in. Every inner page opens with a tall dark hero whose
   heading is light, so light header text reads correctly. The
   hero already carries ~140px of top padding, so overlaying an
   80px header never covers the heading.
   ============================================================ */
body:not(.home-page) .site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
}

body:not(.home-page) .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(4, 9, 6, 0.62) 0%, rgba(4, 9, 6, 0.24) 68%, transparent 100%);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body:not(.home-page) .site-header:not(.is-scrolled) .logo-text,
body:not(.home-page) .site-header:not(.is-scrolled) .logo-text span,
body:not(.home-page) .site-header:not(.is-scrolled) .main-nav a:not(.btn),
body:not(.home-page) .site-header:not(.is-scrolled) .lang-trigger,
body:not(.home-page) .site-header:not(.is-scrolled) .theme-toggle {
  color: #f7faf6 !important;
}

body:not(.home-page) .site-header:not(.is-scrolled) .lang-trigger,
body:not(.home-page) .site-header:not(.is-scrolled) .theme-toggle,
body:not(.home-page) .site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(5, 12, 8, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body:not(.home-page) .site-header:not(.is-scrolled) .nav-toggle span {
  background: #f7faf6;
}

/* Mobile light-theme drawer: this file loads after the shared/header sheets
   on inner pages, so the final contrast decision must live here. */
@media (max-width: 1024px) {
  :root[data-theme="light"] body:not(.home-page) .site-header .main-nav.is-open,
  :root:not([data-theme="dark"]) body:not(.home-page) .site-header .main-nav.is-open {
    background: #f8faf7 !important;
    color: #102017 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :root[data-theme="light"] body:not(.home-page) .site-header .main-nav.is-open a:not(.btn),
  :root:not([data-theme="dark"]) body:not(.home-page) .site-header .main-nav.is-open a:not(.btn) {
    color: #102017 !important;
    opacity: 1;
  }
}

/* The unified sheet is loaded last. Own the final poster-to-video handoff here
   so legacy homepage layers cannot keep a playing mobile video transparent. */
.home-page .origin-hero-media .origin-hero-media__video {
  opacity: 0 !important;
}

.home-page .origin-hero-media.is-video-ready .origin-hero-media__video {
  opacity: 1 !important;
}

/* Real phone widths include the browser scrollbar and safe-area inset. Keep
   all four header controls inside that smaller layout viewport. */
@media (max-width: 600px) {
  .site-header .header-inner.container {
    width: calc(100% - 20px);
    gap: 6px;
  }

  .site-header .header-inner > .brand-logo {
    flex: 0 1 94px;
    min-width: 0;
    gap: 8px;
  }

  .site-header .brand-logo::before {
    width: 24.73px;
    height: 34px;
  }

  .site-header .logo-text strong {
    font-size: 15px;
    letter-spacing: 2.4px;
  }

  .site-header .logo-text span {
    margin-top: 3px;
    font-size: 10px;
    letter-spacing: 4px;
  }

  .site-header .theme-toggle,
  .site-header .nav-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .site-header .nav-toggle {
    padding: 9px;
  }

  .site-header .lang-trigger {
    min-height: 40px;
    padding: 8px 9px;
    gap: 5px;
  }

  /* Keep the two utility controls together beside the menu button. The
     flexible space now sits between the logo and this group, so the theme
     control no longer crowds the wordmark on wider phones. */
  .site-header .header-inner > .header-utilities {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .site-header .header-inner > .nav-toggle {
    margin-inline-start: 0 !important;
  }
}

/* Performance profile for touch devices and modest hardware. The visual
   hierarchy stays intact, while expensive blur/filter layers and entrance
   animations are replaced with stable opaque surfaces. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .site-header,
  .main-nav,
  .main-nav.is-open,
  .lang-menu,
  .lang-trigger,
  .theme-toggle,
  .nav-toggle,
  .origin-map-panel,
  .origin-detail-panel,
  .origin-product-card,
  .product-card,
  .catalog-card,
  .catalog-filter-panel,
  .product-modal__panel,
  .product-modal__backdrop,
  .role-card,
  .simplified-card,
  .audience-card,
  .cta-band,
  .whatsapp-float,
  .back-to-top {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .origin-map-glow,
  .origin-map-panel::before,
  .origin-map-panel::after,
  .origin-detail-panel::before,
  .role-card::before,
  .simplified-card::before,
  .audience-card::before {
    animation: none !important;
    filter: none !important;
  }

  .site-header.is-scrolled {
    background: rgba(8, 15, 10, 0.96) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  :root[data-theme="light"] .site-header.is-scrolled,
  :root:not([data-theme="dark"]) .site-header.is-scrolled {
    background: rgba(250, 251, 249, 0.97) !important;
    box-shadow: 0 8px 24px rgba(16, 32, 23, 0.1);
  }

  .origin-map-panel,
  .origin-detail-panel,
  .product-modal__panel {
    contain: layout paint;
  }

  button,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }
}

@supports (content-visibility: auto) {
  .home-page main > section:not(:first-child),
  body:not(.home-page) main > section:nth-child(n + 2),
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}

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

/* Catalog modal: long translated labels must stay inside their own column.
   Flexible tracks and normal wrapping keep Arabic, Russian, French, Spanish,
   and Turkish specifications readable without text collisions. */
.product-modal .product-modal__body {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.product-modal .product-modal__copy {
  min-width: 0;
}

.product-modal .product-modal__specs > div {
  grid-template-columns: minmax(128px, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 16px;
}

.product-modal .product-modal__specs dt,
.product-modal .product-modal__specs dd {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.55;
}

.product-modal .product-modal__specs dd {
  unicode-bidi: plaintext;
}

@media (max-width: 860px) {
  .product-modal .product-modal__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .product-modal .product-modal__specs > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}