/* ---- skerm (Skerm — Refurbished phones, power & repairs 227) ---------------
   THE STRUCTURAL MOVE: the catalogue is dealt out TWICE in two different
   layouts and each pass shows only HALF of it — the buy grid takes the four
   handsets and stops, the plain card grid below the slab takes only the four
   accessories — so the full-bleed slab at the midpoint sits between two priced
   passes that never repeat a product. One hide rule carries both halves.
   Ground is cold paper white with every tile floated shadowless and borderless
   on it so the cut-outs read as cut-outs; one signal blue is spent on the rand
   line and the add-to-cart and nowhere else; and the closing contact band is
   the only dark surface anywhere on the page, welded straight to the footer. */
body.t-skerm {
  background: #ffffff;
  color: #2a2e36;
  --radius: 0;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --line: #e6e8ec;
  --line-strong: #c9cdd4;
  --heading: #16181d;
  --text: #2a2e36;
  --muted: #767c86;
}
body.t-skerm .sf-header { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #e6e8ec; }
body.t-skerm .sf-footer { margin-top: 0; border-color: #e6e8ec; }
body.t-skerm .btn.brand { background: #1f5eff; border-color: #1f5eff; color: #ffffff; box-shadow: none; border-radius: 0; font-weight: 600; letter-spacing: 0.01em; padding: 13px 26px; }
body.t-skerm .btn.brand:hover { background: #1747c9; }

/* the stage fills the window and nothing sits above it but the bar */
body.t-skerm .sc-hero { min-height: 100vh; padding: 96px clamp(20px, 6vw, 62px); }
body.t-skerm .sc-hero h1 { font-weight: 700; font-size: clamp(32px, 5.6vw, 68px); line-height: 1.03; letter-spacing: -0.035em; }
body.t-skerm .sc-h2 { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 1.2vw, 13px); font-weight: 700; color: #16181d; margin-bottom: 26px; }

/* the shortcut rail — four gapped scenes, one word under each, no prices */
body.t-skerm .sc-strip { padding: 42px 20px 8px; }
body.t-skerm .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
body.t-skerm .sc-strip-img { border: 0; aspect-ratio: 4 / 3; }
body.t-skerm .sc-strip-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; margin-top: 10px; }

/* THE TWO PASSES — same four columns, different layouts, and this one rule
   splits the catalogue between them: handsets above the slab, accessories
   below it. `.sample` is spared so a store with no products still shows tiles. */
body.t-skerm .sc-buygrid, body.t-skerm .sc-products { padding: 46px 20px 28px; }
body.t-skerm .sc-buy-grid, body.t-skerm .sc-products .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; }
body.t-skerm .sc-buy-card:nth-child(n + 5), body.t-skerm .sc-products .product-card:not(.sample):nth-child(-n + 4) { display: none; }
body.t-skerm .sc-buy-media, body.t-skerm .product-card .ph { background: #ffffff; }
body.t-skerm .sc-buy-media img, body.t-skerm .product-card .ph img { aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
body.t-skerm .sc-buy-p, body.t-skerm .product-card .p { color: #1f5eff; font-weight: 700; font-size: 16px; }
body.t-skerm .sc-buy-form, body.t-skerm .sc-buy-btn { width: 100%; }
body.t-skerm .product-card, body.t-skerm .product-card:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
body.t-skerm .product-card .meta { padding: 12px 2px 0; text-align: center; }

/* the midpoint interruption — photograph the left half, words the right */
body.t-skerm .sc-banner {
  margin: 22px calc(50% - 50vw); min-height: 62vh; padding: 0; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  background-color: #f2f4f7; background-size: 50% 100%; background-position: left center; background-repeat: no-repeat;
}
body.t-skerm .sc-banner-inner { grid-column: 2; margin: 0; max-width: 480px; padding: 56px clamp(24px, 5vw, 72px); }
body.t-skerm .sc-banner h2, body.t-skerm .sc-banner p { color: #16181d; text-shadow: none; }

/* the repair-bench story, six-sevenths down */
body.t-skerm .sc-about-media img { border-radius: 0; aspect-ratio: 5 / 4; }

/* the only dark ground on the page, sitting straight on top of the footer */
body.t-skerm .sc-contact-band { background: #101216; color: #dfe3e9; padding: 78px 0 88px; }
body.t-skerm .sc-contact-band .sc-h2 { color: #ffffff; }
body.t-skerm .sc-contact-band .sc-contact-sub, body.t-skerm .sc-contact-band .sc-field label { color: #9aa2ae; }
body.t-skerm .sc-contact-band .sc-field input, body.t-skerm .sc-contact-band .sc-field textarea { background: #1a1d23; border-color: #2a2e36; color: #ffffff; }

@media (max-width: 900px) {
  body.t-skerm .sc-strip-row, body.t-skerm .sc-buy-grid, body.t-skerm .sc-products .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-skerm .sc-banner { grid-template-columns: 1fr; min-height: 0; background-size: 100% 240px; background-position: top center; }
  body.t-skerm .sc-banner-inner { grid-column: 1; max-width: none; padding: 268px 24px 48px; }
}

/* NIGHT — the paper goes to near-black and the blue lifts so it still carries
   the price line; the product tiles stay a light plate, because the cut-outs
   are multiplied onto them and would vanish on a dark one. The contact band
   drops a shade further so it is still the darkest thing on the page. */
html[data-theme="dark"] body.t-skerm {
  background: #0e1014;
  color: #b4bac3;
  --header-bg: #0e1014;
  --surface: #14171c;
  --surface-2: #14171c;
  --line: #262a31;
  --line-strong: #3a3f48;
  --heading: #eef1f5;
  --text: #b4bac3;
  --muted: #838a95;
}
html[data-theme="dark"] body.t-skerm .sf-header, html[data-theme="dark"] body.t-skerm .sf-footer { border-color: #262a31; }
html[data-theme="dark"] body.t-skerm .sc-h2 { color: #eef1f5; }
html[data-theme="dark"] body.t-skerm .sc-buy-media, html[data-theme="dark"] body.t-skerm .product-card .ph { background: #eceff3; }
html[data-theme="dark"] body.t-skerm .sc-buy-p, html[data-theme="dark"] body.t-skerm .product-card .p { color: #6d94ff; }
html[data-theme="dark"] body.t-skerm .btn.brand { background: #4d7dff; border-color: #4d7dff; color: #0e1014; }
html[data-theme="dark"] body.t-skerm .btn.brand:hover { background: #6d94ff; }
html[data-theme="dark"] body.t-skerm .sc-banner { background-color: #191d23; }
html[data-theme="dark"] body.t-skerm .sc-banner h2, html[data-theme="dark"] body.t-skerm .sc-banner p { color: #eef1f5; }
html[data-theme="dark"] body.t-skerm .sc-contact-band { background: #05060a; }
html[data-theme="dark"] body.t-skerm .sc-contact-band .sc-field input, html[data-theme="dark"] body.t-skerm .sc-contact-band .sc-field textarea { background: #14171c; border-color: #262a31; }