/* ---- padkos (Padkos — Biltong & road food 91) — weathered tarmac, bitumen ink ----
   THE STRUCTURAL MOVE: the priced wall and the bare place-name wall run back to
   back as two full-bleed grids cut from the SAME tile — same 4:5 photograph,
   same 12px gutter, same small uppercase label — so the only thing separating
   them is how much type each one carries. Eight priced tiles four across fill
   two rows; six towns fill one row of six, in the order you pass them driving
   up the N1. The hero above them is a contained band rather than a full
   viewport stage, so the first price lands high, and the banner is the only
   thing on the page that ever goes dark. */
body.t-padkos {
  background: #e8e7e1;
  color: #17140f;
  --radius: 0;
  --header-bg: #e8e7e1;
  --surface: #f1f0ea;
  --surface-2: #dedcd4;
  --line: #d2cfc6;
  --line-strong: #b8b4a9;
  --heading: #17140f;
  --text: #17140f;
  --muted: #575349;
}
body.t-padkos .sf-head, body.t-padkos .sf-foot, body.t-padkos .sf-footer { background: #e8e7e1; border-color: #d2cfc6; }

/* the opener is a contained band with page ground showing all round it, so the
   priced wall starts high instead of after a full screen of photograph */
body.t-padkos .sc-hero { min-height: 0; max-width: 1240px; margin: 22px auto 28px; padding: clamp(92px, 15vh, 152px) 20px; }
body.t-padkos .sc-hero h1 { font-weight: 700; font-size: clamp(28px, 4.4vw, 50px); line-height: 1.08; }

/* THE TWIN — stated once for both walls: same bleed, same gutter, same tile */
body.t-padkos .sc-buygrid, body.t-padkos .sc-strip {
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 0 12px 12px;
}
body.t-padkos .sc-buy-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
body.t-padkos .sc-strip-row { grid-template-columns: repeat(6, 1fr); gap: 12px; }
body.t-padkos .sc-buy-media img, body.t-padkos .sc-strip-img { aspect-ratio: 4 / 5; border: 0; }
body.t-padkos .sc-buy-card, body.t-padkos .sc-strip-card { align-items: flex-start; text-align: left; }
body.t-padkos .sc-buy-cat, body.t-padkos .sc-strip-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; font-weight: 700; color: #6a655a; margin-top: 12px; }
/* both walls are titled the same way — a label, not a headline — which is the
   whole reason the two grids read as one thing said twice */
body.t-padkos .sc-buygrid .sc-h2, body.t-padkos .sc-strip .sc-h2 { text-align: left; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; color: #6a655a; margin: 0; padding: 52px 0 18px; }
body.t-padkos .sc-buy-p { color: #9d5a20; font-weight: 700; font-size: 14px; }

/* the whole about: four sentences over the road, nothing else explains the shop */
body.t-padkos .sc-about-overlay { padding: clamp(96px, 16vh, 164px) 20px; background-attachment: fixed; }
body.t-padkos .sc-about-overlay p { font-size: 17px; line-height: 1.85; }

/* the one bitumen band — flush to the edges and pushed darker than the shared
   scrim, because everything either side of it stays pale */
body.t-padkos .sc-banner { margin: 0 calc(50% - 50vw); min-height: 56vh; display: flex; align-items: center; box-shadow: inset 0 0 0 100vw rgba(17, 15, 12, 0.5); }

/* the close: still pale, one apricot rule, and three short fields — the message
   box is relabelled and cut to a single line so it cannot become a letter */
body.t-padkos .sc-contact-band { background: #dedcd4; border-top: 3px solid #cf8a56; padding: 78px 0 88px; }
body.t-padkos .sc-contact-band label[for="sc-msg"] { font-size: 0; }
body.t-padkos .sc-contact-band label[for="sc-msg"]::after { content: 'Home town'; font-size: 13px; }
body.t-padkos .sc-contact-band textarea { height: 44px; min-height: 44px; resize: none; }
body.t-padkos .btn.brand { background: #cf8a56; color: #17140f; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 15px 28px; }
body.t-padkos .btn.brand:hover { background: #bd7841; }
body.t-padkos .btn.brand.sc-buy-btn { margin-top: 12px; padding: 10px 16px; font-size: 10px; }
@media (max-width: 1000px) {
  /* both walls have to keep filling their rows: six towns become two rows of
     three, eight tiles become four rows of two */
  body.t-padkos .sc-strip-row { grid-template-columns: repeat(3, 1fr); }
  body.t-padkos .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-padkos .sc-hero { margin: 12px auto 16px; padding: 76px 20px; }
}

/* NIGHT — the same road after dark: the tarmac drops to wet bitumen, the walls
   keep their gutters, and the apricot has to lift to the colour a padstal
   awning goes under a security light, because #cf8a56 on this ground stops
   reading as a price and starts reading as rust. */
html[data-theme="dark"] body.t-padkos {
  background: #15130f;
  color: #c5c1b7;
  --header-bg: #15130f;
  --surface: #1c1a15;
  --surface-2: #221f1a;
  --line: #2e2a24;
  --line-strong: #3d3830;
  --heading: #f0ede5;
  --text: #c5c1b7;
  --muted: #8a857a;
}
html[data-theme="dark"] body.t-padkos .sf-head, html[data-theme="dark"] body.t-padkos .sf-foot,
html[data-theme="dark"] body.t-padkos .sf-footer { background: #15130f; border-color: #2e2a24; }
html[data-theme="dark"] body.t-padkos .sc-buygrid .sc-h2, html[data-theme="dark"] body.t-padkos .sc-strip .sc-h2,
html[data-theme="dark"] body.t-padkos .sc-buy-cat, html[data-theme="dark"] body.t-padkos .sc-strip-label { color: #948e82; }
html[data-theme="dark"] body.t-padkos .sc-buy-p { color: #e0a170; }
html[data-theme="dark"] body.t-padkos .sc-contact-band { background: #221f1a; border-top-color: #e0a170; }
html[data-theme="dark"] body.t-padkos .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-padkos .sc-contact-band .sc-field textarea { background: #1c1a15; border-color: #2e2a24; color: #f0ede5; }
html[data-theme="dark"] body.t-padkos .btn.brand { background: #e0a170; border-color: #e0a170; color: #15130f; }
html[data-theme="dark"] body.t-padkos .btn.brand:hover { background: #eeb489; }