/* ---------- Argon — Welders, torches & consumables 241 (store) ----------
   THE STRUCTURAL MOVE: narrow text against a wide picture, the whole way
   down. Every photographic block gives up the container and runs the full
   window — both four-up tile strips weld gapless with their labels lying ON
   the photograph, the split sets a wide plate against a column held to
   thirty-four characters, and the banner, the overlay and the second
   catalogue pass all break edge to edge — while the prose and the section
   titles stay on the contained page axis. That is the reference's whole
   rhythm: roughly seventy photograph to thirty type, and never a card grid.
   The two strips are told apart honestly by whether they carry a heading
   (:has / :not(:has)) and never by position. Graphite near-black ground, cold
   white type, and one hi-viz lime rationed to four jobs — the hero outline,
   every hairline, the rand figure, and the first line of the big number.
   Machine flat-lays sit on the only white the page allows. */
body.t-argon {
  background: #121314;
  color: #b9c0c3;
  --ar-lime: #a8dc3c;
  --ar-rule: rgba(168, 220, 60, 0.4);
  --ar-lift: #1a1c1e;
  --ar-flat: #ffffff;
  --bg-flat: #121314;
  --header-bg: #121314;
  --surface: #17191b;
  --surface-2: #1f2225;
  --line: #282b2d;
  --line-strong: #3a3e41;
  --heading: #f2f4f5;
  --text: #b9c0c3;
  --muted: #7f878a;
  --radius: 0;
  --shadow: none;
}

/* a solid graphite bar carrying the name hard left — the stage starts beneath
   it, so nothing ever floats over the first plate */
body.t-argon .sf-head, body.t-argon .sf-header,
body.t-argon .sf-foot, body.t-argon .sf-footer, body.t-argon .sf-cats {
  background: #121314; border-color: #282b2d;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-argon .sf-name, body.t-argon .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; }

/* every control is a flat lime slab with no edge on it */
body.t-argon .btn.brand { background: var(--ar-lime); border: 0; color: #121314; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 800; padding: 16px 34px; }
body.t-argon .btn.brand:hover { background: #bcee52; color: #121314; }

/* THE STAGE — four plates cross-fading over the whole first screen, a two-line
   cut, one tracked sub-line naming the machine, and nothing else */
body.t-argon .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-argon .sc-hero-inner { max-width: 900px; }
body.t-argon .sc-hero h1 { text-transform: uppercase; font-weight: 800; font-size: clamp(30px, 5.2vw, 62px); line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 20px; }
body.t-argon .sc-hero p { text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(10.5px, 1.4vw, 13px); line-height: 2; margin: 0 0 34px; }
/* LIME 1 of 4 — the one hairline on the first screen */
body.t-argon .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-color: var(--ar-lime); color: var(--ar-lime); }
body.t-argon .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--ar-lime); color: #121314; }

/* section titles are a machined label, never a statement — the statements are
   the display headings inside the picture blocks */
body.t-argon .sc-h2 { color: var(--muted); text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(10.5px, 1.3vw, 12.5px); font-weight: 700; text-align: left; margin: 0 0 30px; }

/* THE WELD, TWICE — both tile rows drop the container, its padding and its
   gutters and run the window four across with no gap, the label lying on the
   photograph. The first is welded flush to the floor of the stage. */
body.t-argon .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-argon .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-argon .sc-strip-card { position: relative; }
body.t-argon .sc-strip-img { aspect-ratio: 4 / 3; border: 0; border-radius: 0; background: #0d0e0f; }
body.t-argon .sc-strip-label { position: absolute; left: 22px; right: 22px; bottom: 20px; margin: 0; text-align: left; color: #f2f4f5; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; line-height: 1.6; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
/* LIME 2 of 4 — the closing row is the one carrying a heading, so it takes the
   hairline and the air; the opening row has neither */
body.t-argon .sc-strip:has(.sc-h2) { border-top: 1px solid var(--ar-rule); margin-top: 96px; padding-top: 72px; }
body.t-argon .sc-strip:has(.sc-h2) .sc-h2 { margin: 0 max(24px, calc(50vw - 540px)) 32px; }

/* NARROW TEXT, WIDE PICTURE — the ratio of the whole page stated once in a
   single block: two thirds photograph, one third a column of thirty-four
   characters on a lifted graphite ground */
body.t-argon .sc-about-split { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); grid-template-columns: 1.9fr 1fr; gap: 0; align-items: stretch; padding: 0; }
body.t-argon .sc-about-media img { aspect-ratio: 16 / 10; height: 100%; border-radius: 0; }
body.t-argon .sc-about-copy { background: var(--ar-lift); padding: clamp(48px, 6vw, 92px) clamp(28px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; }

/* the three statement headings — split, banner, overlay — are one voice */
body.t-argon .sc-about-copy .sc-h2, body.t-argon .sc-banner h2, body.t-argon .sc-about-overlay .sc-h2 { color: var(--heading); text-transform: uppercase; letter-spacing: -0.015em; font-weight: 800; font-size: clamp(26px, 4vw, 48px); line-height: 1.02; margin: 0 0 22px; }
body.t-argon .sc-about-copy p, body.t-argon .sc-about-overlay p { max-width: 34ch; font-size: 15px; line-height: 1.85; }

/* PASS ONE — the flagship gets a half-window panel each, copy flush left on a
   flat lifted ground with a lime hairline between the rows, and the flat-lay
   dropped onto the only plain white anywhere on the page */
body.t-argon .sc-showcase { padding: 96px 0 0; }
body.t-argon .sc-show-item, body.t-argon .sc-show-item:nth-child(4n + 2),
body.t-argon .sc-show-item:nth-child(4n + 3) { background: var(--ar-lift); border-top: 1px solid var(--ar-rule); }
body.t-argon .sc-show-inner, body.t-argon .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-argon .sc-show-media, body.t-argon .sc-buy-media { background: var(--ar-flat); padding: 26px; }
body.t-argon .sc-show-media img { max-width: 86%; max-height: 260px; }
body.t-argon .sc-buy-media img { aspect-ratio: 1; object-fit: contain; }
body.t-argon .sc-show-rule { background: var(--ar-lime); opacity: 1; width: 46px; }
body.t-argon .sc-show-cat, body.t-argon .sc-buy-cat { color: var(--muted); }
/* LIME 3 of 4 — the rand figure, and it lives nowhere else */
body.t-argon .sc-show-price, body.t-argon .sc-buy-p { color: var(--ar-lime); font-weight: 800; font-size: 17px; }

/* full bleed, one wide plate, type sitting on the page axis at the foot of it */
body.t-argon .sc-banner { min-height: 66vh; width: 100vw; margin: 96px calc(50% - 50vw); display: flex; align-items: flex-end; padding: 0 max(24px, calc(50vw - 540px)) clamp(48px, 7vw, 92px); text-align: left; }
body.t-argon .sc-banner-inner { margin: 0; max-width: 620px; }

/* LIME 4 of 4 — the big number set as display type, its first line lime and
   the rest cold white, with the body held to two lines under it */
body.t-argon .sc-about-overlay { padding: clamp(120px, 18vh, 200px) max(24px, calc(50vw - 540px)); }
body.t-argon .sc-about-overlay-inner { margin: 0; max-width: none; text-align: left; }
body.t-argon .sc-about-overlay .sc-h2 { font-size: clamp(34px, 6vw, 82px); line-height: 0.98; max-width: 18ch; margin: 0 0 26px; }
body.t-argon .sc-about-overlay .sc-h2::first-line { color: var(--ar-lime); }

/* PASS TWO — the same catalogue again, full window, four across and butted
   with a single lime hairline between one tile and the next */
body.t-argon .sc-buygrid { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 92px max(24px, calc(50vw - 540px)) 104px; }
body.t-argon .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ar-rule); }
body.t-argon .sc-buy-card { background: var(--ar-lift); padding: 0 0 26px; }

/* the close: the darkest ground on the site, one row of fields, one slab */
body.t-argon .sc-contact-band { background: #0d0e0f; border-top: 1px solid var(--ar-rule); padding: 92px 0 104px; }
body.t-argon .sc-contact-band-inner { max-width: 1080px; text-align: left; }
body.t-argon .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 26px; align-items: end; }
body.t-argon .sc-field input, body.t-argon .sc-field textarea { background: #16181a; border-color: #2a2e30; color: #f2f4f5; }
body.t-argon .sc-contact-band .sc-field textarea { height: 46px; min-height: 46px; resize: vertical; }

@media (max-width: 900px) {
  body.t-argon .sc-hero { min-height: 88vh; }
  body.t-argon .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-argon .sc-about-split { grid-template-columns: 1fr; }
  body.t-argon .sc-show-grid { grid-template-columns: 1fr; }
  body.t-argon .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-argon .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; }
}

/* NIGHT — the graphite drops to a true black, the lime lifts a shade because
   it is carrying every hairline and every price on its own once the
   photographs are the brightest things in the room, and the flat-lay white
   cools off so a lit product panel stops glaring beside them. */
html[data-theme="dark"] body.t-argon {
  background: #0a0b0b;
  color: #adb4b7;
  --ar-lime: #b6ea45;
  --ar-rule: rgba(182, 234, 69, 0.36);
  --ar-lift: #111314;
  --ar-flat: #eceff0;
  --bg-flat: #0a0b0b;
  --header-bg: #0a0b0b;
  --surface: #0f1112;
  --surface-2: #161819;
  --line: #1e2122;
  --line-strong: #2e3234;
  --heading: #f7f9fa;
  --text: #adb4b7;
  --muted: #767d80;
}
html[data-theme="dark"] body.t-argon .sf-head, html[data-theme="dark"] body.t-argon .sf-header,
html[data-theme="dark"] body.t-argon .sf-foot, html[data-theme="dark"] body.t-argon .sf-footer,
html[data-theme="dark"] body.t-argon .sf-cats { background: #0a0b0b; border-color: #1e2122; }
html[data-theme="dark"] body.t-argon .sc-strip-img { background: #0a0b0b; }
html[data-theme="dark"] body.t-argon .sc-contact-band { background: #050606; }
html[data-theme="dark"] body.t-argon .sc-field input,
html[data-theme="dark"] body.t-argon .sc-field textarea { background: #0f1112; border-color: #1e2122; color: #f7f9fa; }