/* ===== MELKERY — a limewashed dairy wall for ground, milk-bottle green as the
   INK for every word on the page, and brass foil-cap gold spent exactly twice:
   the hero's ghost hairline and the rule above the band heading.

   THE STRUCTURAL MOVE: one 4-up rhythm, used twice. The strip under the fold
   and the catalogue below the band are locked to the same four columns, the
   same 26px gutter and the same bare 4:5 frame — no card, no border, no
   radius, no shadow, no hover lift — with the caption centred underneath it.
   So the page reads picture, caption, air, twice over, and the ONLY thing
   that ever breaks the symmetry is the single split in the middle. ===== */
body.t-melkery {
  background: #f1efe8;
  color: #2c4b3d;
  --mlk-brass: #a9853d;
  --bg-flat: #f1efe8;
  --surface: #f1efe8;
  --surface-2: #e7e5db;
  --line: #dcd9cd;
  --line-strong: #c6c3b4;
  --heading: #1e3a2e;
  --text: #2c4b3d;
  --muted: #75897c;
  --header-bg: #f1efe8;
  --radius: 0;
  --shadow: none;
}

/* flat limewash bar and floor, no blur, green ink */
body.t-melkery .sf-header, body.t-melkery .sf-head,
body.t-melkery .sf-footer, body.t-melkery .sf-foot, body.t-melkery .sf-cats {
  background: #f1efe8; border-color: #dcd9cd;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-melkery .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 23px; letter-spacing: 0.01em; color: #1e3a2e; }

/* the bar floats over the full-viewport photograph and scrolls off with it —
   landing page only, because green ink has to stay green on a product page */
body.t-melkery:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; }
body.t-melkery:has(.sc-hero) .sf-name, body.t-melkery:has(.sc-hero) .sf-header .sf-cart,
body.t-melkery:has(.sc-hero) .sf-searchbtn, body.t-melkery:has(.sc-hero) .sf-header .theme-toggle,
body.t-melkery:has(.sc-hero) .sf-makeyours { color: #ffffff; }
body.t-melkery:has(.sc-hero) .sf-cats { display: none; }

/* the submit is the one filled control anywhere on the page: a flat slab */
body.t-melkery .btn.brand { background: #1e3a2e; border-color: #1e3a2e; color: #f1efe8; border-radius: 0; box-shadow: none; font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 30px; }
body.t-melkery .btn.brand:hover { background: #2c4b3d; border-color: #2c4b3d; opacity: 1; }
/* BRASS, ONE OF TWO — the ghost outline under the hero, thinned to a hairline */
body.t-melkery .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-width: 1px; border-color: var(--mlk-brass); color: #ffffff; }
body.t-melkery .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--mlk-brass); border-color: var(--mlk-brass); color: #f1efe8; }

/* one still photograph, the whole window, everything stacked dead centre */
body.t-melkery .sc-hero { min-height: 100vh; padding: 26px 20px; }
body.t-melkery .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(34px, 5.6vw, 74px); line-height: 1.08; letter-spacing: -0.02em; max-width: 700px; margin: 0 auto 20px; text-shadow: 0 2px 26px rgba(12, 22, 17, 0.34); }
body.t-melkery .sc-hero p { max-width: 470px; margin: 0 auto 34px; font-size: 16px; line-height: 1.6; }

body.t-melkery .sc-h2 { font-family: var(--sf-serif); font-weight: 400; color: var(--heading); font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.01em; text-align: center; }

/* RHYTHM OF FOUR, PASS ONE — the first thing below the fold, bare frames */
body.t-melkery .sc-strip { padding: 96px 20px 0; }
body.t-melkery .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 26px; }
body.t-melkery .sc-strip-img { aspect-ratio: 4 / 5; border: 0; border-radius: 0; background: #e7e5db; }
body.t-melkery .sc-strip-label { margin-top: 15px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--heading); }

/* the single asymmetric beat, and the widest measure on the page */
body.t-melkery .sc-about-split { grid-template-columns: 0.92fr 1fr; gap: 72px; max-width: 1000px; padding: 112px 20px 104px; }
body.t-melkery .sc-about-copy p { font-size: 17px; line-height: 1.85; color: var(--text); }

/* the hard horizontal breather: one oversized line, no picture competing with
   it, no paragraph, no button — and BRASS TWO OF TWO above the heading */
body.t-melkery .sc-banner { min-height: 56vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); padding: 0 24px; }
body.t-melkery .sc-banner-inner { max-width: 760px; margin: 0 auto; }
body.t-melkery .sc-banner-inner::before { content: ""; display: block; width: 58px; height: 1px; margin: 0 auto 30px; background: #c39c50; }
body.t-melkery .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(30px, 5vw, 62px); line-height: 1.14; margin: 0; }

/* RHYTHM OF FOUR, PASS TWO — the catalogue returns on the same grid, two full
   rows of four, caption and rand under the frame and never laid over it */
body.t-melkery .sc-products { padding: 106px 20px 96px; }
body.t-melkery .sc-products .sc-h2 { margin-bottom: 46px; }
body.t-melkery .product-grid { grid-template-columns: repeat(4, 1fr); gap: 46px 26px; padding: 0; }
body.t-melkery .product-card, body.t-melkery .product-card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-melkery .product-card .ph { aspect-ratio: 4 / 5; border-radius: 0; background: #e7e5db; }
body.t-melkery .product-card .meta { padding: 15px 0 0; text-align: center; }
body.t-melkery .product-card .t { font-family: var(--sf-serif); font-weight: 400; font-size: 17px; color: var(--heading); }

/* the page closes the way it opened: full width, centred, nothing off-axis */
body.t-melkery .sc-contact-band { background: #e7e5db; padding: 98px 0 106px; }
body.t-melkery .sc-contact-band .sc-h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 14px; }
body.t-melkery .sc-contact-form .btn { align-self: center; }

@media (max-width: 820px) {
  body.t-melkery .sc-strip-row, body.t-melkery .product-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-melkery .sc-about-split { grid-template-columns: 1fr; gap: 34px; padding: 64px 20px; }
}

/* NIGHT — the parlour before the lights go on: same green, ground and ink
   swapped, brass lifted so the hero hairline still reads over the photograph */
html[data-theme="dark"] body.t-melkery {
  background: #131a16;
  color: #b4c2b8;
  --mlk-brass: #c39c50;
  --bg-flat: #131a16;
  --surface: #131a16;
  --surface-2: #1a231e;
  --line: #26312a;
  --line-strong: #35443a;
  --heading: #eaf0ea;
  --text: #b4c2b8;
  --muted: #7d8d82;
  --header-bg: #131a16;
}
html[data-theme="dark"] body.t-melkery .sf-header, html[data-theme="dark"] body.t-melkery .sf-head,
html[data-theme="dark"] body.t-melkery .sf-footer, html[data-theme="dark"] body.t-melkery .sf-foot,
html[data-theme="dark"] body.t-melkery .sf-cats { background: #131a16; border-color: #26312a; }
html[data-theme="dark"] body.t-melkery .sf-name { color: #eaf0ea; }
html[data-theme="dark"] body.t-melkery .btn.brand { background: #eaf0ea; border-color: #eaf0ea; color: #131a16; }
html[data-theme="dark"] body.t-melkery .btn.brand:hover { background: #ffffff; border-color: #ffffff; }
html[data-theme="dark"] body.t-melkery .sc-strip-img, html[data-theme="dark"] body.t-melkery .product-card .ph { background: #1a231e; }
html[data-theme="dark"] body.t-melkery .sc-contact-band { background: #1a231e; }