/* ---- besem (Besem — Hand-bound brooms & household brushes 267) -------------
   THE STRUCTURAL MOVE: there is no hero. The catalogue IS the top of the page —
   six tall 4:5 tiles three across on bare chalk with nothing above them but the
   bar and one caption-sized line of type, where every other store in the library
   opens on a photograph band. Inside a tile the title sits hard left and the rand
   figure holds the top right of that same line in serif italic; the add-to-cart
   is parked in the price slot at zero opacity and only slides into it when you
   point at the tile, so the page never shows a control until it is wanted. Clay
   is spent on the price line and the hover states and nowhere else, and the
   serif appears on the money, the category and one pull-line — never a heading. */
body.t-besem {
  background: #f7f4ee; color: #2a2724;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --radius: 0;
  --bg-flat: #f7f4ee; --surface: #ffffff; --surface-2: #efeae1;
  --line: #e3ddd1; --line-strong: #cdc4b4;
  --heading: #2a2724; --text: #2a2724; --muted: #857c71; --header-bg: #f7f4ee;
  --bs-clay: #a85d3c; --bs-char: #2f2b27;
}
body.t-besem .sf-head, body.t-besem .sf-header, body.t-besem .sf-foot,
body.t-besem .sf-footer, body.t-besem .sf-cats { background: #f7f4ee; border-color: #e3ddd1; }
body.t-besem .sf-name { text-transform: uppercase; letter-spacing: .34em; font-size: 12px; font-weight: 600; }

/* clay slab, flat, never an outline */
body.t-besem .btn.brand { background: var(--bs-clay); color: #f7f4ee; border: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 600; padding: 15px 32px; }
body.t-besem .btn.brand:hover { background: #8e4a2c; color: #f7f4ee; opacity: 1; }

/* THE COLD OPEN — one contained measure for the whole page, barely any air
   above the grid, and the heading reduced to a caption so nothing at the top
   can be mistaken for a band */
body.t-besem .sc-buygrid, body.t-besem .sc-strip, body.t-besem .sc-about-split { max-width: 1180px; padding: 28px 20px 96px; gap: 70px; align-items: start; }
body.t-besem .sc-h2 { color: var(--muted); text-transform: uppercase; letter-spacing: .3em; font-size: 11px; font-weight: 600; text-align: left; margin: 0 0 30px; }
body.t-besem .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 58px 34px; }
body.t-besem .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }

/* 85:15 picture to type — title hard left, money at the top right of that same
   line, category on the line below */
body.t-besem .sc-buy-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "media media" "title price" "cat cat"; align-items: baseline; column-gap: 20px; text-align: left; }
body.t-besem .sc-buy-media { grid-area: media; }
body.t-besem .sc-buy-media img, body.t-besem .sc-buy-card:hover .sc-buy-media img,
body.t-besem .sc-strip-img, body.t-besem .sc-about-media img { aspect-ratio: 4 / 5; transform: none; border: 0; }
body.t-besem .sc-buy-t { grid-area: title; margin-top: 17px; font-size: 15px; font-weight: 500; line-height: 1.35; }
body.t-besem .sc-buy-cat, body.t-besem .sc-about-copy .sc-h2 { grid-area: cat; margin-top: 2px; font-family: var(--sf-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--muted); text-align: left; }
body.t-besem .sc-buy-p { grid-area: price; justify-self: end; margin-top: 17px; font-family: var(--sf-serif); font-style: italic; font-size: 15px; color: var(--bs-clay); transition: opacity .25s ease; }

/* the buying control lives in the price slot and slides in from the right */
body.t-besem .sc-buy-card > .sc-buy-form, body.t-besem .sc-buy-card > .sc-buy-btn { grid-area: price; justify-self: end; margin-top: 17px; opacity: 0; transform: translateX(18px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
body.t-besem .sc-buy-card:hover > .sc-buy-form, body.t-besem .sc-buy-card:hover > .sc-buy-btn { opacity: 1; transform: translateX(0); pointer-events: auto; }
body.t-besem .sc-buy-card:hover .sc-buy-p { opacity: 0; }
body.t-besem .sc-buy-card .sc-buy-btn { background: transparent; color: var(--bs-clay); padding: 0; letter-spacing: .18em; text-decoration: underline; text-underline-offset: 4px; }

/* four category tiles under the grid, same portrait crop, label beneath */
body.t-besem .sc-strip-label { margin-top: 13px; text-align: left; text-transform: uppercase; letter-spacing: .24em; font-size: 10.5px; font-weight: 600; color: var(--muted); }
body.t-besem .sc-buy-card .sc-buy-btn:hover, body.t-besem .sc-strip-card:hover .sc-strip-label { background: transparent; color: #8e4a2c; }

/* the story — copy left in a narrow measure, one tall portrait right, and the
   heading slot spent on the serif pull-line instead of a title */
body.t-besem .sc-about-media { order: 2; }
body.t-besem .sc-about-copy .sc-h2 { font-size: clamp(21px, 2.6vw, 30px); line-height: 1.35; color: var(--heading); margin: 0 0 24px; }
body.t-besem .sc-about-copy p { max-width: 44ch; color: var(--text); font-size: 15px; line-height: 1.95; }

/* the only full-bleed moment on an otherwise contained page */
body.t-besem .sc-banner { margin: 0 calc(50% - 50vw); min-height: 58vh; display: flex; align-items: center; justify-content: center; padding: 60px 24px; }
body.t-besem .sc-banner h2 { font-size: clamp(24px, 3.6vw, 40px); font-weight: 500; line-height: 1.18; margin: 0 0 14px; }
body.t-besem .sc-banner .btn.brand { background: rgba(247, 244, 238, .16); color: #f7f4ee; }
body.t-besem .sc-banner .btn.brand:hover { background: rgba(247, 244, 238, .3); color: #f7f4ee; }

/* the close — a warm-charcoal strip where the reference simply switched its
   footer off, fields drawn as rules straight onto the dark ground */
body.t-besem .sc-contact-band { background: var(--bs-char); padding: 92px 0 100px; }
body.t-besem .sc-contact-band-inner { text-align: left; }
body.t-besem .sc-contact-band .sc-h2 { color: #f7f4ee; font-size: 13px; letter-spacing: .28em; margin: 0 0 10px; }
body.t-besem .sc-contact-band .sc-contact-sub { color: #a79d90; font-size: 15px; }
body.t-besem .sc-field label { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: #a79d90; }
body.t-besem .sc-field input, body.t-besem .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid #4a443d; padding: 11px 2px; color: #f7f4ee; }

/* narrow: the hover reveal is a lie on a touch screen, so the control drops to
   its own row and the price keeps the slot it was holding */
@media (max-width: 900px) {
  body.t-besem .sc-buy-grid, body.t-besem .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; }
  body.t-besem .sc-buy-card { grid-template-areas: "media media" "title price" "cat cat" "buy buy"; }
  body.t-besem .sc-buy-card > .sc-buy-form, body.t-besem .sc-buy-card > .sc-buy-btn { grid-area: buy; justify-self: start; margin-top: 12px; opacity: 1; transform: none; pointer-events: auto; }
}

/* NIGHT — the chalk goes to a warm near-black and the clay lifts a full step so
   it can still carry every price on its own; the slabs flip to dark type
   because chalk on lifted clay is unreadable, and the closing strip drops BELOW
   the ground rather than above it so it stays a strip and not a hole. */
html[data-theme="dark"] body.t-besem {
  background: #191714; color: #cdc5b9;
  --bg-flat: #191714; --surface: #211e1a; --surface-2: #232019;
  --line: #2e2a24; --line-strong: #423c33;
  --heading: #f3ede2; --text: #cdc5b9; --muted: #8b8175; --header-bg: #191714;
  --bs-clay: #d08356; --bs-char: #100e0c;
}
html[data-theme="dark"] body.t-besem .sf-head, html[data-theme="dark"] body.t-besem .sf-header,
html[data-theme="dark"] body.t-besem .sf-foot, html[data-theme="dark"] body.t-besem .sf-footer,
html[data-theme="dark"] body.t-besem .sf-cats { background: #191714; border-color: #2e2a24; }
html[data-theme="dark"] body.t-besem .btn.brand { color: #17140f; }
html[data-theme="dark"] body.t-besem .btn.brand:hover { background: #e39a6b; color: #17140f; }
html[data-theme="dark"] body.t-besem .sc-buy-card .sc-buy-btn,
html[data-theme="dark"] body.t-besem .sc-buy-card .sc-buy-btn:hover { color: var(--bs-clay); background: transparent; }
html[data-theme="dark"] body.t-besem .sc-banner .btn.brand { color: #f7f4ee; }