/* ---------- saddle — vintage & leather: warm grey ground, tanned-leather accent ---------- */
/* The reference's own camel (#bda589) is only 2.4:1 against white, so it is used
   here as a decorative hover hairline only; --brand carries a deeper saddle tan
   (#7a5a3a, 6.3:1 on white) wherever text or a button sits on it. */
body.t-saddle { background: #f6f6f6; }
html[data-theme="dark"] body.t-saddle { background: radial-gradient(ellipse at top, #211c17 0%, #171310 55%, #0d0b09 100%); }
body.t-saddle .sf-announce { background: #241f19; color: #e9e1d5; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; }
/* the near-black bar would disappear into the dark page — lift it and rule it off */
html[data-theme="dark"] body.t-saddle .sf-announce { background: #3a2f24; color: #f0e8dc; border-bottom: 1px solid #57452f; }
body.t-saddle .sf-name { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 800; font-size: 16px; }
body.t-saddle .sf-cart { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; font-weight: 700; }
body.t-saddle .sf-cart .badge { border-radius: 0; box-shadow: none; }
/* catalogue: square, roomier, centred uppercase titles */
body.t-saddle .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px; }
body.t-saddle .product-card { border-radius: 0; }
body.t-saddle .product-card:hover { transform: none; box-shadow: none; border-color: #bda589; }
body.t-saddle .product-card .ph { border-radius: 0; }
body.t-saddle .product-card .meta { padding: 16px 12px 20px; text-align: center; }
body.t-saddle .product-card .t { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12.5px; font-weight: 700; line-height: 1.45; }
/* price uses --heading, not --brand, so it stays legible in dark mode too */
body.t-saddle .product-card .p { color: var(--heading); font-weight: 700; margin-top: 7px; }
body.t-saddle .btn.brand { border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11.5px; padding: 13px 26px; box-shadow: none; }
/* section renderer */
/* the section hero's scrim is baked into an inline style at only .28→.40 black,
   so it can't be deepened from CSS. This overlay is the theme's own insurance
   that white display type stays readable if a merchant swaps in a bright photo. */
body.t-saddle .sc-hero { position: relative; }
body.t-saddle .sc-hero::before { content: ''; position: absolute; inset: 0; background: rgba(28, 22, 16, 0.22); pointer-events: none; }
body.t-saddle .sc-hero-inner { position: relative; z-index: 1; }
body.t-saddle .sc-hero h1 { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: clamp(28px, 6.4vw, 74px); line-height: 1.02; }
body.t-saddle .sc-hero p { text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 600; }
body.t-saddle .sc-h2 { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 800; font-size: clamp(14px, 1.8vw, 18px); }
body.t-saddle .sc-strip-img { border-radius: 0; }
body.t-saddle .sc-strip-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; }
body.t-saddle .sc-banner { border-radius: 0; }
body.t-saddle .sc-banner h2 { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
body.t-saddle .sc-richtext p { font-size: 15.5px; }
body.t-saddle .pdp .ph { border-radius: 0; }

body.t-saddle .sc-field input, body.t-saddle .sc-field textarea { border-radius: 0; }