/*
  shr-home-page.css — Homepage 2026 (native, Elementor replacement)
  Used by: landing-pages/template-home-2026.php (full-takeover template;
  Storefront styles are dequeued there, so this file is self-contained).

  Design tokens are defined once in :root so the future sitewide
  header/footer phases can lift the token block into style.css unchanged.
*/

/* ═══════════ Design tokens ═══════════ */
:root {
	--s2u-red: #e63946;
	--s2u-red-dark: #c92d3b;
	--s2u-navy: #111b27;
	--s2u-navy2: #1e2e42;
	--s2u-navy3: #2d3e55;

	/* Industry steel ramp (light sections) */
	--s2u-bg: #f2f2f3;
	--s2u-text: #1d1f20;
	--s2u-accent: #5980a6;
	--s2u-accent-100: #edf1f5;
	--s2u-accent-400: #8aa5c0;
	--s2u-accent-700: #40638c;
	--s2u-neutral-500: #9aa0a6;
	--s2u-neutral-600: #7c838a;
	--s2u-neutral-700: #55595e;
	--s2u-divider: rgba(29, 31, 32, .12);

	--s2u-font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
	--s2u-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--s2u-shadow-md: 0 12px 28px rgba(17, 27, 39, .14);
	--s2u-navy-grad: linear-gradient(160deg, var(--s2u-navy) 0%, var(--s2u-navy2) 55%, var(--s2u-navy3) 100%);
}

/* ═══════════ Base (template dequeues theme CSS) ═══════════ */
body.s2u-home {
	margin: 0;
	background: var(--s2u-bg);
	color: var(--s2u-text);
	font-family: var(--s2u-font-body);
	font-size: 16px;
	line-height: 1.55;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}
.s2u-home *, .s2u-home *::before, .s2u-home *::after { box-sizing: border-box; }
.s2u-home img { max-width: 100%; height: auto; }
.s2u-home a { color: var(--s2u-accent-700); }
.s2u-home a:hover { color: var(--s2u-red); }

.s2u-container { max-width: 1240px; margin: 0 auto; }
.s2u-accent { color: var(--s2u-red); }
.s2u-wordmark {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: 26px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Sections */
.s2u-section { padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px); }
.s2u-section--tight-bottom { padding-bottom: clamp(48px, 6vw, 80px); }
.s2u-section--bordered { border-top: 1px solid var(--s2u-divider); }
.s2u-section--last { padding-bottom: clamp(56px, 7vw, 96px); }

.s2u-kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--s2u-accent-700);
	margin-bottom: 12px;
	font-feature-settings: 'tnum' 1;
}
.s2u-kicker--red { color: var(--s2u-red); letter-spacing: .14em; margin-bottom: 20px; }
.s2u-rule { height: 1px; border: 0; background: var(--s2u-divider); margin: 0 0 28px; }
.s2u-section__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.s2u-h2 {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: clamp(28px, 3vw, 40px);
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0;
	color: var(--s2u-text);
}
.s2u-h2--solo { margin-bottom: 32px; }
.s2u-more { font-size: 14px; font-weight: 600; color: var(--s2u-accent-700); text-decoration: none; }
.s2u-more:hover { color: var(--s2u-red); }

/* Blueprint frames + corner registration marks */
.s2u-blueprint, .s2u-card, .s2u-cat-card, .s2u-level { position: relative; border: 1px solid var(--s2u-divider); }
.s2u-corner { position: absolute; width: 15px; height: 15px; color: rgba(29, 31, 32, .35); pointer-events: none; z-index: 2; }
.s2u-corner::before { content: ''; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor; }
.s2u-corner::after { content: ''; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor; }
.s2u-corner--tl { top: -8px; left: -8px; }
.s2u-corner--tr { top: -8px; right: -8px; }
.s2u-corner--bl { bottom: -8px; left: -8px; }
.s2u-corner--br { bottom: -8px; right: -8px; }
.s2u-corner--out { color: rgba(255, 255, 255, .55); }

/* Motion helpers */
.s2u-lift { transition: transform .18s ease, box-shadow .18s ease; }
.s2u-lift:hover { transform: translateY(-3px); box-shadow: var(--s2u-shadow-md); }
.s2u-lift:hover .s2u-corner { color: var(--s2u-red); }
.s2u-btn-pop { transition: transform .16s ease, box-shadow .16s ease; }
.s2u-btn-pop:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(230, 57, 70, .35); }
.s2u-btn-pop:active { transform: translateY(0) scale(.98); box-shadow: 0 3px 8px rgba(230, 57, 70, .3); }
.s2u-btn--ghost.s2u-btn-pop:hover { box-shadow: 0 8px 20px rgba(255, 255, 255, .18); }

.s2u-reveal, .s2u-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.s2u-reveal.s2u-in, .s2u-stagger.s2u-in > * { opacity: 1; transform: none; }
.s2u-stagger > *:nth-child(2) { transition-delay: .08s; }
.s2u-stagger > *:nth-child(3) { transition-delay: .16s; }
.s2u-stagger > *:nth-child(4) { transition-delay: .24s; }
.s2u-stagger > *:nth-child(5) { transition-delay: .32s; }
.s2u-stagger > *:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
	.s2u-reveal, .s2u-stagger > * { opacity: 1; transform: none; transition: none; }
	.s2u-hero__copy, .s2u-shred__paper, .s2u-shred__strip, .s2u-shred__led,
	.s2u-shred__front, .s2u-marquee__track { animation: none !important; }
}

/* Buttons */
.s2u-btn {
	display: inline-block;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}
/* .s2u-home a { } would outweigh a bare class, so anchor these to the same
   specificity — button text must stay white in every state. */
.s2u-home a.s2u-btn--primary, .s2u-btn--primary { background: var(--s2u-red); border-color: var(--s2u-red); color: #fff; }
.s2u-home a.s2u-btn--primary:hover, .s2u-btn--primary:hover { background: var(--s2u-red-dark); border-color: var(--s2u-red-dark); color: #fff; }
.s2u-home a.s2u-btn--ghost, .s2u-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.s2u-home a.s2u-btn--ghost:hover, .s2u-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* Tags */
.s2u-tag-sale {
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #fff; background: var(--s2u-red); padding: 3px 8px;
}
.s2u-tag-popular {
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: #fff; background: var(--s2u-red); padding: 2px 6px;
}

/* ═══════════ Promo bar ═══════════ */
.s2u-promo-bar {
	background: var(--s2u-red);
	color: #fff;
	text-align: center;
	padding: 9px clamp(16px, 4vw, 48px);
	font-size: 14px;
	line-height: 20px;
}
.s2u-promo-bar a { color: #fff; font-weight: 600; text-decoration: none; letter-spacing: .02em; }
.s2u-promo-bar a:hover { color: #fff; text-decoration: underline; }

/* ═══════════ Header ═══════════ */
.s2u-header { background: var(--s2u-bg); border-bottom: 1px solid var(--s2u-divider); padding: 0 clamp(16px, 4vw, 48px); }
.s2u-header__inner {
	max-width: 1240px; margin: 0 auto;
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 14px 0;
}
.s2u-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--s2u-text); }
.s2u-header__brand img { height: 48px; width: auto; display: block; }
.s2u-header__wordmark { display: flex; align-items: baseline; gap: 6px; }
.s2u-header .s2u-wordmark { color: var(--s2u-navy); }
.s2u-header__tld { font-size: 15px; font-weight: 600; color: var(--s2u-neutral-600); letter-spacing: .06em; }
.s2u-nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 500; }
.s2u-nav > a, .s2u-menu > a { color: var(--s2u-text); text-decoration: none; }
.s2u-nav > a:hover, .s2u-menu > a:hover { color: var(--s2u-red); }
.s2u-header__cta { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.s2u-header__phone { font-size: 14px; font-weight: 600; color: var(--s2u-text); text-decoration: none; font-feature-settings: 'tnum' 1; }
.s2u-header__phone:hover { color: var(--s2u-red); }

/* Dropdowns (pure CSS, hover + focus-within) */
.s2u-menu { position: relative; display: inline-flex; align-items: center; padding: 14px 0; margin: -14px 0; }
.s2u-sub {
	display: none; position: absolute; top: 100%; left: -18px; min-width: 240px;
	background: #fff; border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 12px 32px rgba(17, 27, 39, .18); padding: 6px 0; z-index: 60;
}
.s2u-menu:hover > .s2u-sub, .s2u-menu:focus-within > .s2u-sub { display: block; }
.s2u-menu:hover > .s2u-sub--2col, .s2u-menu:focus-within > .s2u-sub--2col { display: grid; grid-template-columns: 1fr 1fr; min-width: 340px; }
.s2u-sub a { display: block; padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--s2u-text); text-decoration: none; white-space: nowrap; }
.s2u-sub a:hover { background: rgba(230, 57, 70, .07); color: var(--s2u-red); }

/* ═══════════ Hero ═══════════ */
.s2u-hero {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 56px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 56px),
		var(--s2u-navy-grad);
	padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px);
}
.s2u-hero__inner {
	max-width: 1240px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: clamp(32px, 5vw, 72px); align-items: center;
}
.s2u-hero__copy { animation: sh-rise .7s ease-out both; }
.s2u-hero__title {
	font-family: var(--s2u-font-heading); font-weight: 600;
	font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; letter-spacing: .01em;
	text-transform: uppercase; color: #fff; margin: 0 0 24px; margin-left: -0.05em;
}
.s2u-hero__title span { display: block; }
.s2u-hero__lead { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .72); max-width: 54ch; margin: 0 0 28px; }
.s2u-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.s2u-hero__email { margin: -22px 0 36px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.s2u-hero__email span { color: rgba(255, 255, 255, .55); font-feature-settings: 'tnum' 1; }
.s2u-hero__email a { font-weight: 600; color: #fff; text-decoration: none; }
.s2u-hero__email a:hover { color: var(--s2u-red); }

/* Brand marquee */
.s2u-marquee {
	overflow: hidden; max-width: 560px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.s2u-marquee__track {
	display: flex; gap: 36px; width: max-content;
	animation: sh-marquee 18s linear infinite;
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 15px;
	letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.s2u-marquee:hover .s2u-marquee__track { animation-play-state: paused; }
.s2u-marquee__track a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.s2u-marquee__track a:hover { color: #fff; }

/* Hero art frame + animated shredder illustration */
.s2u-hero__art {
	position: relative; border: 1px solid rgba(255, 255, 255, .28);
	padding: 16px; max-width: 500px; justify-self: center; width: 100%;
}
.s2u-hero__watermark {
	position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px);
	object-fit: contain; opacity: .12; pointer-events: none;
}
.s2u-shred { position: relative; width: 100%; height: 460px; overflow: hidden; }
.s2u-shred__feedzone { position: absolute; top: 0; left: 0; right: 0; height: 213px; overflow: hidden; }
.s2u-shred__paper {
	position: absolute; left: 50%; margin-left: -62px; top: -240px; width: 160px; height: 230px;
	background: #f2f2ee; box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
	animation: sh-feed 4.6s linear infinite;
}
.s2u-shred__ruling {
	position: absolute; inset: 22px 18px;
	background-image: repeating-linear-gradient(180deg, transparent 0 14px, #c6cbd2 14px 16px);
}
.s2u-shred__stamp {
	position: absolute; left: 50%; top: 86px; transform: translateX(-50%) rotate(-7deg);
	border: 1.5px solid var(--s2u-red); color: var(--s2u-red);
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 15px;
	letter-spacing: .18em; padding: 2px 9px; background: #f2f2ee; white-space: nowrap;
}
.s2u-shred__top {
	position: absolute; top: 196px; left: 50%; margin-left: -140px; width: 280px; height: 34px;
	border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12);
	transform-origin: bottom left; transform: skewX(-45deg);
}
.s2u-shred__slot {
	position: absolute; left: 40px; right: 40px; top: 13px; height: 7px;
	background: #0a1118; border-top: 2px solid var(--s2u-red); box-shadow: 0 0 12px var(--s2u-red);
}
.s2u-shred__side {
	position: absolute; top: 230px; left: 50%; margin-left: 140px; width: 34px; height: 90px;
	border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .03);
	transform-origin: top left; transform: skewY(-45deg);
}
.s2u-shred__front {
	position: absolute; top: 230px; left: 50%; margin-left: -140px; width: 280px; height: 90px;
	border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06);
	animation: sh-glow 4.6s ease-in-out infinite;
	filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45));
}
.s2u-shred__led {
	position: absolute; left: 16px; top: 18px; width: 9px; height: 9px; border-radius: 50%;
	background: var(--s2u-red); box-shadow: 0 0 8px var(--s2u-red);
	animation: sh-blink 4.6s linear infinite;
}
.s2u-shred__vent { position: absolute; right: 16px; width: 46px; height: 2px; background: rgba(255, 255, 255, .25); }
.s2u-shred__vent--1 { top: 20px; }
.s2u-shred__vent--2 { top: 30px; }
.s2u-shred__vent--3 { top: 40px; }
.s2u-shred__caption {
	position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 13px;
	letter-spacing: .22em; color: rgba(255, 255, 255, .55); text-transform: uppercase;
}
.s2u-shred__strips {
	position: absolute; top: 322px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 9px; align-items: flex-start;
}
.s2u-shred__strip {
	width: 6px; opacity: .92; transform-origin: top center;
	background-image: repeating-linear-gradient(180deg, #f2f2ee 0 16px, transparent 16px 23px);
	animation: sh-strip 4.6s linear infinite;
}
.s2u-shred__strip.is-red { background-image: repeating-linear-gradient(180deg, var(--s2u-red) 0 16px, transparent 16px 23px); }

/* ═══════════ Stats strip ═══════════ */
.s2u-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 28px; }
.s2u-stat { padding: 24px; }
.s2u-stat__num {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 52px; line-height: 1;
	color: var(--s2u-accent-700); font-feature-settings: 'tnum' 1; text-transform: uppercase;
}
.s2u-stat__label {
	font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--s2u-neutral-700); margin-top: 10px;
}

/* ═══════════ 01 · Promotion products ═══════════ */
.s2u-promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 28px; }
.s2u-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--s2u-bg); }
.s2u-card__tags { display: flex; justify-content: space-between; align-items: center; }
.s2u-card__cut { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--s2u-neutral-600); }
.s2u-card__img { display: block; width: 100%; height: 220px; }
.s2u-card__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.s2u-card__body { flex: 1; }
.s2u-card__brand { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s2u-accent-700); margin-bottom: 6px; }
.s2u-card__title {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 22px; line-height: 1.15;
	letter-spacing: .01em; text-transform: uppercase; color: var(--s2u-text);
	text-decoration: none; display: block;
}
.s2u-card__title:hover { color: var(--s2u-red); }
.s2u-card__prices { display: flex; align-items: baseline; gap: 10px; font-feature-settings: 'tnum' 1; }
.s2u-price-was { font-size: 14px; color: var(--s2u-neutral-500); text-decoration: line-through; }
.s2u-price-now { font-family: var(--s2u-font-heading); font-weight: 600; font-size: 26px; color: var(--s2u-red); }
.s2u-card__enquire {
	font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--s2u-accent-700);
	text-decoration: none; border-top: 1px solid var(--s2u-divider); padding-top: 12px;
}
.s2u-card__enquire:hover { color: var(--s2u-red); }

/* ═══════════ 02 · Category cards ═══════════ */
.s2u-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.s2u-cat-card {
	padding: 24px; display: flex; flex-direction: column; gap: 10px;
	text-decoration: none; color: var(--s2u-text); overflow: hidden;
}
.s2u-cat-card:hover { background: var(--s2u-accent-100); color: var(--s2u-text); border-color: var(--s2u-red); }
.s2u-cat-card__bg { position: absolute; inset: 0; opacity: .24; overflow: hidden; }
.s2u-cat-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.s2u-cat-card__meta, .s2u-cat-card__title, .s2u-cat-card__desc, .s2u-cat-card__cta { position: relative; }
.s2u-cat-card__meta { display: flex; justify-content: space-between; align-items: baseline; }
.s2u-cat-card__num { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--s2u-accent-700); font-feature-settings: 'tnum' 1; }
.s2u-cat-card__users { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s2u-red); }
.s2u-cat-card__title {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 24px;
	letter-spacing: .01em; text-transform: uppercase; line-height: 1.1;
}
.s2u-cat-card__desc { font-size: 14px; line-height: 1.5; color: var(--s2u-neutral-700); margin: 0; flex: 1; }
.s2u-cat-card__cta { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--s2u-accent-700); }

/* ═══════════ 03 · Feature tags ═══════════ */
.s2u-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 20px; }
.s2u-feature {
	border: 1px solid var(--s2u-divider); padding: 18px;
	display: flex; flex-direction: column; gap: 8px;
	text-decoration: none; color: var(--s2u-text);
	background: linear-gradient(165deg, var(--s2u-accent-100) 0%, rgba(255, 255, 255, 0) 55%);
}
.s2u-feature:hover { border-color: var(--s2u-accent); background: var(--s2u-accent-100); color: var(--s2u-text); }
.s2u-feature__title { font-family: var(--s2u-font-heading); font-weight: 600; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; }
.s2u-feature__desc { font-size: 13px; line-height: 1.45; color: var(--s2u-neutral-700); flex: 1; }
.s2u-feature__spec { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s2u-red); font-feature-settings: 'tnum' 1; }

/* ═══════════ 04 · Security levels ═══════════ */
.s2u-level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); gap: 20px; }
.s2u-level { padding: 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--s2u-text); }
.s2u-level:hover { background: var(--s2u-accent-100); color: var(--s2u-text); }
.s2u-level.is-popular { border-color: var(--s2u-red); }
.s2u-level__swatch { height: 64px; border: 1px solid var(--s2u-divider); }
.s2u-level__row { display: flex; justify-content: space-between; align-items: baseline; }
.s2u-level__name { font-family: var(--s2u-font-heading); font-weight: 600; font-size: 22px; letter-spacing: .02em; font-feature-settings: 'tnum' 1; }
.s2u-level__use { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s2u-accent-700); }
.s2u-level__spec { font-size: 12px; color: var(--s2u-neutral-600); font-feature-settings: 'tnum' 1; }

/* ═══════════ 05 · Consumables ═══════════ */
.s2u-oils__head { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--s2u-divider); background: var(--s2u-accent-100); }
.s2u-oils__head span {
	flex: 1; min-width: 16ch; padding: 12px 24px;
	font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.s2u-oils__head .s2u-oils__sheet {
	flex: 0 0 auto; min-width: 0; border-left: 1px solid var(--s2u-divider);
	color: var(--s2u-neutral-700); white-space: nowrap; font-feature-settings: 'tnum' 1;
}
.s2u-oils__table { width: 100%; border-collapse: collapse; }
.s2u-oils__table td { border: 0; background: none; }
.s2u-oils__num { padding: 12px 0 12px 24px; width: 48px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--s2u-accent-700); font-feature-settings: 'tnum' 1; }
.s2u-oils__img { padding: 8px 16px 8px 8px; width: 80px; }
.s2u-oils__img a { display: block; width: 72px; height: 72px; }
.s2u-oils__img img { width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; display: block; }
.s2u-oils__name { padding: 12px 24px 12px 0; font-size: 15px; }
.s2u-oils__name a { color: var(--s2u-text); text-decoration: none; }
.s2u-oils__name a:hover { color: var(--s2u-red); }
.s2u-oils__price {
	padding: 12px 24px 12px 0; font-family: var(--s2u-font-heading); font-weight: 600;
	font-size: 20px; letter-spacing: .02em; white-space: nowrap;
	font-feature-settings: 'tnum' 1; text-align: right;
}
.s2u-oils__note { margin: 0; padding: 12px 24px; border-top: 1px solid var(--s2u-divider); font-size: 13px; color: var(--s2u-neutral-700); background: var(--s2u-accent-100); }

/* ═══════════ Footer ═══════════ */
.s2u-footer {
	background: linear-gradient(160deg, var(--s2u-navy) 0%, var(--s2u-navy2) 100%);
	color: rgba(255, 255, 255, .72);
	padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 48px) 32px;
}
.s2u-footer__cols {
	max-width: 1240px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px;
}
.s2u-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.s2u-footer__brand img { height: 40px; width: auto; display: block; }
.s2u-footer__brand .s2u-wordmark { font-size: 24px; color: #fff; }
.s2u-footer__about { font-size: 14px; line-height: 1.6; margin: 0; max-width: 38ch; }
.s2u-footer__head {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 16px;
	letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px;
}
.s2u-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-feature-settings: 'tnum' 1; }
.s2u-footer__links a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.s2u-footer__links a:hover { color: var(--s2u-red); }
.s2u-footer__bottom {
	max-width: 1240px; margin: 40px auto 0; padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: 13px; color: rgba(255, 255, 255, .5);
}
.s2u-footer__legal { display: flex; gap: 20px; }
.s2u-footer__legal a { color: rgba(255, 255, 255, .5); text-decoration: none; }
.s2u-footer__legal a:hover { color: var(--s2u-red); }

/* ═══════════ Keyframes ═══════════ */
@keyframes sh-feed { 0%, 6% { transform: translateY(0); } 70%, 100% { transform: translateY(430px); } }
@keyframes sh-strip { 0%, 34% { transform: scaleY(0); opacity: 1; } 78% { transform: scaleY(1); opacity: 1; } 90% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes sh-blink { 0%, 30% { opacity: .2; } 36%, 74% { opacity: 1; } 82%, 100% { opacity: .2; } }
@keyframes sh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sh-glow { 0%, 100% { box-shadow: 0 0 0 rgba(230, 57, 70, 0); } 50% { box-shadow: 0 0 26px rgba(230, 57, 70, .45); } }
@keyframes sh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════════ Small screens ═══════════ */
@media (max-width: 560px) {
	.s2u-header__inner { gap: 14px; }
	.s2u-nav { gap: 14px; }
	.s2u-hero__art { max-width: 100%; }
	.s2u-oils__num { padding-left: 12px; }
	.s2u-oils__name { font-size: 14px; }
	.s2u-oils__price { font-size: 17px; padding-right: 12px; }
}