:root{
  --ink:#1E1B16; --ink-soft:#4A4338; --ink-faint:#6D6455;
  --paper:#F4F0E8; --card:#FFFFFF; --quiet:#EAE2D4;
  --line:#DBD2C1; --line-soft:#EBE4D8;
  --pine:#20372E; --pine-soft:#2C4A3E;
  --clay:#9C4519; --clay-soft:#C66A3C;
  --on-dark:#F4F0E8; --on-dark-soft:#C4CFC6;
  --good:#2F6B3F;
  --hue-s1: #20372E;
  --hue-s2: #3A4E63;
  --hue-s3: #6B4A2A;
  --hue-s4: #5A5A52;
  --hue-s5: #4A6034;
  --hue-s6: #7A4444;
  --wrap: 1220px;
  --read: 72ch;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(31,28,22,.05), 0 8px 24px rgba(31,28,22,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
/* height:auto globally, because the width and height ATTRIBUTES beat
   aspect-ratio: without this a card frame written as 1600x1200 renders 1600px
   tall inside a 4:3 box. Captions that carry an inline height in em are
   unaffected, an inline style wins over a rule. */
img,video{max-width:100%; height:auto}
a{color:var(--clay); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-weight:700; line-height:1.14; margin:0 0 .5em; letter-spacing:-.005em}
h1{font-size:clamp(30px,4vw,46px)}
h2{font-size:clamp(24px,2.7vw,34px)}
h3{font-size:21px; font-weight:600}
h4{font-size:18px; font-weight:600}
h1 a,h2 a,h3 a,h4 a{color:inherit; text-decoration:none}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover{color:var(--clay); text-decoration:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em; padding-left:1.25em}
small,.small{font-size:14px; color:var(--ink-faint)}
hr{border:0; border-top:1px solid var(--line); margin:34px 0}
:focus-visible{outline:3px solid var(--clay); outline-offset:2px}

/* Shopware calls its page-width wrapper "container". Side padding lives here
   and nowhere else: a block that sets its own padding shorthand on this element
   zeroes the gutter, which is the defect check-gutter.js watches for. */
.container{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:30px}
.container-narrow{max-width:900px}
@media (max-width:860px){ .container{padding-inline:24px} }
@media (max-width:520px){ .container{padding-inline:18px} }

/* ------------------------------------------------------------ header ----- */
.header-main{background:var(--card); border-bottom:1px solid var(--line)}
.top-bar{background:var(--pine); color:var(--on-dark-soft); font-size:13.5px}
.top-bar .container{display:flex; gap:18px; align-items:center; justify-content:space-between; padding-block:8px}
.top-bar a{color:var(--on-dark)}
.top-bar-note{margin:0}
.header-row{display:flex; align-items:center; gap:22px; padding-block:14px}
.header-logo-col{flex:0 0 auto}
.header-logo-main{display:flex; align-items:center; gap:11px; color:var(--ink)}
.header-logo-main:hover{text-decoration:none}
.header-logo-main img{display:block; width:34px; height:34px}
.mark-word{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:25px; font-weight:700; letter-spacing:.01em}
.mark-sub{display:block; font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-top:-3px}
.nav-main{margin-left:auto}
.main-navigation-menu{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.main-navigation-link{color:var(--ink); font-weight:500; font-size:15.5px; white-space:nowrap}
.main-navigation-link:hover{color:var(--clay); text-decoration:none}
.header-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
/* The toggle is also a .btn, and .btn sets display:inline-flex later in this
   file at the same specificity. So it is hidden and shown through the masthead,
   which outranks it. */
.masthead .nav-toggle{display:none}

@media (max-width:1040px){
  .nav-main{display:none; width:100%}
  .header-row{flex-wrap:wrap; gap:12px}
  .masthead .nav-toggle{display:inline-flex}
  .nav-main.open{display:block; order:9; border-top:1px solid var(--line); padding-top:12px}
  .nav-main.open .main-navigation-menu{flex-direction:column; gap:2px}
  .nav-main.open .main-navigation-link{display:block; padding:9px 2px; font-size:17px}
}
@media (max-width:480px){
  .mark-sub{display:none}
  .mark-word{font-size:21px}
}

/* ------------------------------------------------------------ buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:15.5px; font-weight:600; line-height:1.15;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-align:center; max-width:100%; flex:0 0 auto;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{text-decoration:none}
.btn img{width:auto; max-width:100%; max-height:1em; display:block}
.btn-buy{background:var(--clay); color:#fff}
.btn-buy:hover{background:#86380F}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:rgba(31,28,22,.04)}
.btn-light{background:var(--card); color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-sm{font-size:13.5px; padding:9px 16px}
.btn-block{width:100%}
.btn-buy .cta-short{display:none}
@media (max-width:620px){
  .btn-buy .cta-long{display:none}
  .btn-buy .cta-short{display:inline}
  .btn img{height:auto!important; max-height:1em}
}
/* The header and the buy rail keep their buttons inline at every width: a
   full-width rule here pushes the header button off the screen. */
.header-actions .btn, .buy-rail .btn, .btn-sm{width:auto}

/* ------------------------------------------------------------ sections --- */
.cms-sections{display:block}
.cms-section{padding-block:clamp(44px,5vw,72px)}
.cms-section-quiet{background:var(--quiet)}
.cms-section-dark{background:var(--pine); color:var(--on-dark)}
/* The closing band sits directly on the footer, and the footer is pine too: in
   one colour the two read as a single slab and the order line disappears into
   the links. The band takes the lighter green and the footer keeps the dark. */
.cms-section-close{background:var(--pine-soft)}
/* A light button on a dark band: the band's own rule paints every link white,
   and white text on a white pill is an empty pill. The band names the colour
   back with a selector of its own weight. */
.cms-section-dark .btn-light,.cms-section-close .btn-light{color:var(--ink)}
.cms-section-dark .btn-light:hover,.cms-section-close .btn-light:hover{color:var(--ink)}
.cms-section-dark h1,.cms-section-dark h2,.cms-section-dark h3{color:var(--on-dark)}
.cms-section-dark p{color:var(--on-dark-soft)}
.cms-section-dark a{color:#fff}
.section-head{display:grid; gap:14px; margin-bottom:28px}
@media (min-width:1080px){
  .section-head-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:38px; align-items:end}
}
.section-head h2{margin:0}
.section-head p{margin:0; color:var(--ink-soft); max-width:62ch}
.cms-section-dark .section-head p{color:var(--on-dark-soft)}
.kicker{font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint); margin:0 0 6px}
.cms-section-dark .kicker{color:var(--on-dark-soft)}
.sect-no{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--ink-faint); letter-spacing:.06em}

/* ------------------------------------------------------------- hero ------ */
.cms-block-image-text-cover{padding-block:0}
.hero{background:var(--card); border-bottom:1px solid var(--line)}
.hero-grid{display:grid; gap:30px; align-items:center; padding-block:clamp(34px,4.4vw,64px)}
@media (min-width:1000px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px} }
.hero h1{margin:0 0 16px}
.hero-lede{font-size:19px; color:var(--ink-soft); margin:0 0 22px; max-width:56ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line); padding-top:16px}
.hero-facts li{font-size:14.5px; color:var(--ink-faint)}
.hero-facts b{display:block; font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:22px; color:var(--ink); font-weight:700}
.hero-media{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--quiet); min-height:0}
.hero-media img,.hero-media video{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}

/* ------------------------------------------------------------- video ----- */
.film{position:relative; background:#12201B}
.film video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; max-width:100%}
.film-over{position:absolute; inset:0; display:flex; align-items:center; pointer-events:none}
.film-over .container{width:100%}
.film-copy{max-width:34ch; color:#fff; text-shadow:0 1px 20px rgba(0,0,0,.45)}
.film-copy h2{color:#fff; margin:0 0 10px}
.film-copy p{color:rgba(255,255,255,.88); margin:0 0 16px}
.film-copy .btn{pointer-events:auto}
.film-controls{position:absolute; right:16px; bottom:16px; display:flex; gap:8px}
.film-controls button{
  font:600 13px 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color:#fff; background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px 14px; cursor:pointer}
@media (max-width:760px){
  .film-over{position:static; background:var(--pine); padding-block:26px}
  .film-copy{max-width:none; text-shadow:none}
}

/* ------------------------------------------------------------- cards ----- */
.product-listing{display:grid; gap:22px; grid-template-columns:repeat(4,minmax(0,1fr))}
.product-listing.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-listing.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1020px){ .product-listing,.product-listing.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .product-listing,.product-listing.cols-3,.product-listing.cols-2{grid-template-columns:minmax(0,1fr)} }
.card.product-box{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); contain:layout style;
}
.product-image-wrapper{display:block; background:#fff; padding:14px}
.product-image-link{display:block}
.product-image{display:block; width:100%; aspect-ratio:4/3; object-fit:contain}
.product-image.is-photo{object-fit:cover; border-radius:8px}
.card-body{display:flex; flex-direction:column; gap:9px; padding:0 18px 18px; flex:1}
.product-name{margin:0; font-size:17.5px; line-height:1.24; font-weight:600}
.product-facts{display:flex; flex-wrap:wrap; gap:5px; list-style:none; margin:0; padding:0}
.product-facts li{font-size:12.5px; font-weight:600; color:var(--ink-faint);
  background:var(--quiet); border-radius:999px; padding:3px 10px}
.product-description{margin:0; font-size:14.5px; color:var(--ink-soft); flex:1 0 auto}
/* The price is a line of its own and the rating is the line under it, always.
   With both in one flex row the rating wrapped on some cards and not on others,
   a card with no rating was a line shorter, and the prices in a row of cards
   ended up at three different heights. The rating keeps its slot when the model
   has no pool, so the line above it starts at the same place on every card. */
/* line-height:1 on the row, because with the inherited one the small "from"
   has a taller box than the 22px price and baseline alignment then pushed the
   price three pixels down -- on the cards with a price range only. */
.product-price-info{display:flex; flex-wrap:nowrap; align-items:baseline; gap:8px;
  line-height:1; margin-top:auto}
.product-price{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:22px; font-weight:700}
.price-from{font-size:13px; color:var(--ink-faint); font-weight:600}
/* The reserved slot has to be exactly one line of THIS text: with min-height
   below the line height an empty slot was three pixels shorter than a filled
   one, and the price of a card with no rating pool sat three pixels high. */
.product-rating{margin:-3px 0 0; font-size:13px; line-height:1.6; min-height:1.6em;
  color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* The buy row stays ONE line: a fourth colour dot used to push the row onto a
   second line, and then the price and the button of that card sat 23px above
   its neighbours in the same row. Three dots and a "+N" never wrap. */
.product-action{display:flex; flex-wrap:nowrap; gap:8px; align-items:center}
.swatches{display:flex; flex-wrap:nowrap; gap:5px; list-style:none; margin:0; padding:0; flex:0 1 auto}
.swatches li{width:15px; height:15px; border-radius:50%; border:1px solid rgba(31,28,22,.25); flex:0 0 auto}
.swatches li.swatch-more{width:auto; height:auto; border:0; background:none!important;
  font-size:11.5px; font-weight:600; color:var(--ink-faint); line-height:1}

/* Tiles: the shelf rail and the "what it hides" row. */
.tile-row{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
.tile-row.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tile-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile-row.cols-1{grid-template-columns:minmax(0,1fr)}
.tile-row.cols-1 .tile{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:16px}
.tile-row.cols-1 .tile h3{margin:0}
.tile-row.cols-1 .tile .tile-count{margin:0}
@media (max-width:560px){ .tile-row.cols-1 .tile{grid-template-columns:34px 1fr} .tile-row.cols-1 .tile .tile-count{grid-column:2} }
@media (max-width:980px){ .tile-row,.tile-row.cols-6,.tile-row.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .tile-row.cols-6{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tile{display:flex; flex-direction:column; gap:6px; background:var(--card); color:var(--ink);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.tile:hover{text-decoration:none; border-color:var(--line)}
.tile-chip{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9px; background:var(--hue); color:#fff; font:700 12px 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em}
.tile h3{margin:6px 0 0; font-size:18px}
.tile p{margin:0; font-size:14px; color:var(--ink-soft)}
.tile-count{font-size:13px; color:var(--ink-faint); font-weight:600}

/* --------------------------------------------------------- size picker --- */
/* The row that answers "which size" before anything else on the page: the
   silhouettes get wider left to right, so the row is itself a footprint
   diagram. */
.size-row{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end}
@media (max-width:900px){ .size-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.size-card{display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:16px; text-align:left; color:var(--ink); box-shadow:var(--shadow)}
.size-card:hover{text-decoration:none; border-color:var(--clay)}
.size-figure{display:block; width:100%; height:auto}
.size-card b{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:19px}
.size-card span{font-size:13.5px; color:var(--ink-faint)}

/* ------------------------------------------------------------ listing ---- */
.cms-element-product-listing-wrapper{display:grid; gap:30px}
@media (min-width:1000px){
  .cms-element-product-listing-wrapper.with-filter{grid-template-columns:262px minmax(0,1fr)}
}
.filter-panel{align-self:start; background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.filter-panel h2{font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight:700; color:var(--ink-faint); margin:0 0 12px}
.filter-multi-select{margin:0 0 16px}
.filter-multi-select h3{font-size:14px; margin:0 0 7px; font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight:700; letter-spacing:.02em}
.filter-multi-select ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.filter-multi-select label{display:inline-flex; align-items:center; gap:6px; font-size:13.5px;
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer; background:var(--paper)}
.filter-multi-select input{accent-color:var(--clay)}
.sorting-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:18px; font-size:14.5px; color:var(--ink-faint)}
@media (max-width:999px){
  .cms-element-product-listing-wrapper.with-filter{display:flex; flex-direction:column}
  .filter-panel{order:2}
  .listing-col{order:1}
}

/* --------------------------------------------------------- product page -- */
.breadcrumb{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:16px 0 0;
  font-size:13.5px; color:var(--ink-faint)}
.breadcrumb a{color:var(--ink-faint)}
.breadcrumb-item+.breadcrumb-item::before{content:'/'; margin-right:8px; color:var(--line)}
.product-detail{display:grid; gap:34px; padding-block:26px 46px}
@media (min-width:1000px){ .product-detail{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:46px; align-items:start} }
@media (min-width:1000px){ .product-detail-media{position:sticky; top:16px; align-self:start} }
.gallery-slider{display:grid; gap:12px}
.gallery-slider-main{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px}
.gallery-slider-main img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain}
.gallery-slider-main img.is-photo{object-fit:cover; border-radius:8px}
.gallery-slider-thumbnails{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.gallery-slider-thumbnails img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  background:#fff; border:1px solid var(--line-soft); border-radius:8px}
.product-detail-name{margin:0 0 10px}
.product-detail-price-container{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:6px}
.product-detail-price{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:32px; font-weight:700}
.product-detail-ordernumber{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--ink-faint)}
.product-detail-buy{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0}
.product-detail-reviews{font-size:14.5px; color:var(--ink-faint); margin-bottom:14px}
.variant-rows{display:grid; gap:8px; margin:0 0 18px; padding:0; list-style:none}
.variant-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  background:var(--card); border:1px solid var(--line-soft); border-radius:11px; padding:10px 14px}
.variant-row .vname{display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px}
.variant-row .vprice{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-weight:700; font-size:18px}
.dot{width:14px; height:14px; border-radius:50%; border:1px solid rgba(31,28,22,.3); display:inline-block}
.product-detail-properties-table{width:100%; border-collapse:collapse; font-size:15px}
.product-detail-properties-table th,.product-detail-properties-table td{
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.product-detail-properties-table th{width:44%; font-weight:600; color:var(--ink-soft)}
.tbl-wrap{overflow-x:auto}
.tbl-wrap table{width:100%; border-collapse:collapse; font-size:15px}
.tbl-wrap th,.tbl-wrap td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft)}
.tbl-wrap thead th{font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:620px){
  .tbl-wrap.stacky thead{display:none}
  .tbl-wrap.stacky tr{display:block; border-bottom:1px solid var(--line); padding:8px 0}
  /* Label ABOVE the value, not beside it: a three-word column heading squeezed
     into a left column wraps to four lines and the row grows to 350px. */
  .tbl-wrap.stacky th[scope="row"]{display:block; border:0; text-align:left;
    font-size:15.5px; font-weight:700; padding:2px 0 6px}
  .tbl-wrap.stacky td{display:block; border:0; padding:2px 0}
  .tbl-wrap.stacky td::before{content:attr(data-l); display:block; font-size:11.5px;
    letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--ink-faint)}
}
.panel{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); margin-bottom:22px}
.panel h2,.panel h3{margin-top:0}
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.chips li{display:flex; flex-direction:column; gap:2px; background:var(--quiet);
  border-radius:11px; padding:10px 14px; font-size:13.5px; color:var(--ink-faint); font-weight:600}
.chips b{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:19px; color:var(--ink); font-weight:700}
.fits-list{display:grid; gap:10px; list-style:none; margin:0; padding:0}
.fits-list a{display:flex; justify-content:space-between; gap:12px; align-items:center;
  border:1px solid var(--line-soft); border-radius:11px; padding:10px 14px; color:var(--ink); background:var(--paper)}
.fits-list a:hover{text-decoration:none; border-color:var(--clay)}

/* ------------------------------------------------------------ fit plan --- */
/* A plan view drawn from the numbers we hold, with a trash can, a mower and a
   bike outlined to scale inside it. None of the three big brands ships this. */
.fitplan{display:block; width:100%; height:auto; background:var(--card);
  border:1px solid var(--line-soft); border-radius:var(--radius)}
.fitplan .wall{fill:none; stroke:#1E1B16; stroke-width:3}
.fitplan .item{fill:rgba(156,69,25,.12); stroke:#9C4519; stroke-width:2}
.fitplan .lbl{font:600 13px 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; fill:#6D6455}
.fitplan .dim{font:600 13px 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; fill:#4A4338}
.fitplan .tick{stroke:#DBD2C1; stroke-width:1.5}

/* ---------------------------------------------------------------- faq ---- */
.faq{display:grid; gap:10px}
@media (min-width:1080px){
  .faq-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:start}
  .faq-split .faq-head{position:sticky; top:16px}
}
.faq details{background:var(--card); border:1px solid var(--line-soft); border-radius:12px}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:14px;
  cursor:pointer; list-style:none; padding:15px 18px; font-weight:600; font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:22px; color:var(--clay); line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details>div{padding:0 18px 16px; color:var(--ink-soft)}

/* ------------------------------------------------------------- prose ----- */
.prose{max-width:var(--read)}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.3em}
.prose img{border-radius:var(--radius)}
.article-layout{display:grid; gap:36px; padding-block:26px 50px}
@media (min-width:1080px){
  .article-layout{grid-template-columns:minmax(0,var(--read)) 250px; justify-content:start; gap:54px; align-items:start}
  .article-aside{position:sticky; top:16px}
}
@media (max-width:1079px){ .article-aside{display:none} }
.article-aside h2{font-size:14px; letter-spacing:.07em; text-transform:uppercase;
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color:var(--ink-faint)}
.article-aside ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14.5px}
.art-meta{font-size:14px; color:var(--ink-faint); margin-bottom:18px}

/* A photograph inside the text. The height is capped and the frame is not
   cropped: a portrait shot in a reading column otherwise runs a screen and a
   half, and cropping a shed cuts off the door that the caption talks about. */
.art-figure{margin:26px 0; padding:0}
.art-figure img{display:block; width:100%; max-height:460px; object-fit:contain;
  background:#fff; border-radius:var(--radius)}
.art-figure figcaption{margin-top:9px; font-size:14px; color:var(--ink-faint)}

/* The product insert. The photograph has a FIXED width and no aspect-ratio of
   its own: a stretched flex item with a ratio computes its width back from the
   row height and pushes the button out of the card. */
.art-embed{display:flex; gap:18px; align-items:center; margin:28px 0; padding:16px;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow)}
.art-embed-ph{flex:0 0 150px; display:block; background:#fff; border-radius:10px; padding:8px}
.art-embed-ph img{display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain}
.art-embed-body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px}
.art-embed-kicker{margin:0; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600}
.art-embed h3{margin:0; font-size:18px; line-height:1.25}
.art-embed-buy{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.art-embed .product-price{line-height:1}
@media (max-width:560px){
  .art-embed{flex-direction:column; align-items:stretch}
  .art-embed-ph{flex:0 0 auto; max-width:180px}
}
.sources{background:var(--quiet); border-radius:var(--radius); padding:18px 20px; margin:26px 0}
.sources h2,.sources .src-h{font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; font-weight:700}
.sources ol{margin:0; padding-left:1.15em; font-size:14.5px; color:var(--ink-soft)}
.sources .road{margin:12px 0 0; font-size:14px}
.note{background:var(--card); border-left:4px solid var(--clay); border-radius:0 11px 11px 0;
  padding:14px 18px; margin:22px 0; font-size:15px; color:var(--ink-soft)}
.legal{max-width:var(--read)}
.legal h2{margin-top:1.5em}

/* --------------------------------------------------------- journal ------- */
.jcards{display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr))}
.jcards.jc-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.jcards.jc-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){ .jcards.jc-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:980px){ .jcards,.jcards.jc-4,.jcards.jc-2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .jcards,.jcards.jc-4,.jcards.jc-2{grid-template-columns:minmax(0,1fr)} }
.jcard{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.jcard img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
.jcard-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px}
.jcard h2,.jcard h3{margin:0; font-size:20px}
.jcard p{margin:0; font-size:14.5px; color:var(--ink-soft)}

/* ------------------------------------------------------------ buy rail --- */
.buy-rail{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--pine);
  color:var(--on-dark); box-shadow:0 -6px 24px rgba(0,0,0,.18); transform:translateY(110%);
  transition:transform .2s ease}
.buy-rail.show{transform:none}
.buy-rail .container{display:flex; gap:14px; align-items:center; justify-content:space-between; padding-block:10px}
.buy-rail .rname{font-weight:600; font-size:15px; color:#fff}
.buy-rail .rprice{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-weight:700; font-size:19px; color:#fff}
@media (max-width:620px){ .buy-rail .rname{display:none} }

/* ------------------------------------------------------------- footer ---- */
/* The hairline is what tells the reader the order line has ended and the index
   has begun: two greens alone still read as one slab on a wide screen. */
.footer-main{background:var(--pine); color:var(--on-dark-soft); margin-top:auto; padding-block:44px 26px;
  border-top:1px solid rgba(255,255,255,.16)}
.footer-main a{color:var(--on-dark)}
.footer-columns{display:grid; gap:28px; grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:900px){ .footer-columns{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-columns{grid-template-columns:1fr} }
.footer-column h2{font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-soft); margin:0 0 12px; font-weight:700}
.footer-column ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14.5px}
.footer-column.wide ul{grid-template-columns:1fr 1fr; gap:7px 18px}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#fff}
.footer-brand img{width:32px; height:32px; display:block}
.footer-note{border-top:1px solid rgba(255,255,255,.14); margin-top:30px; padding-top:18px;
  font-size:13.5px; display:grid; gap:10px}
.footer-note p{margin:0}
/* A row of marks is aligned by HEIGHT, and an inline svg without a size falls
   back to filling its box: both of those have shipped as defects before. */
.pay-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.pay-row img,.pay-row svg{height:26px; width:auto; display:block; flex:0 0 auto}
.disclosure{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.disclosure img.dsc{width:auto; max-width:100%}
@media (max-width:620px){ .disclosure img.dsc{height:auto!important; max-height:1em} }

/* ---------------------------------------------------------- utilities ---- */
.stack{display:grid; gap:18px}
.split{display:grid; gap:26px}
@media (min-width:920px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center} }
.plate{background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft)}
.plate img{display:block; width:100%; height:auto}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{position:static; display:inline-block; padding:8px 14px; background:var(--clay); color:#fff}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}