/* ============================================================
   Ritz Safety — Modern Skin · Home page styles
   Direction A · "Clean & Quiet"
   Vanilla CSS. No build step. Bootstrap-3-safe (no subgrid).
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Color */
  --rz-accent: #E31E26;
  --rz-accent-hover: color-mix(in oklab, var(--rz-accent), black 12%);
  --rz-accent-soft: color-mix(in oklab, var(--rz-accent), white 93%);
  --rz-accent-border: color-mix(in oklab, var(--rz-accent), white 70%);
  --rz-ink-900: #18181b;   /* headings, primary text */
  --rz-ink-700: #3f3f46;   /* nav, labels */
  --rz-ink-600: #52525b;   /* body copy */
  --rz-ink-400: #a1a1aa;   /* placeholder, meta */
  --rz-line: #ececee;      /* hairlines */
  --rz-line-strong: #d4d4d8;
  --rz-bg: #ffffff;
  --rz-bg-tint: #fafafa;

  /* Type */
  --rz-font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --rz-font-head: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --rz-text-xs: 13px;
  --rz-text-sm: 14.5px;
  --rz-text-base: 16px;
  --rz-text-lg: 18px;
  --rz-text-h3: 19px;
  --rz-text-h2: clamp(26px, 2.4vw, 32px);
  --rz-text-h1: clamp(34px, 4vw, 54px);

  /* Spacing scale */
  --rz-s1: 4px;  --rz-s2: 8px;  --rz-s3: 12px; --rz-s4: 16px;
  --rz-s5: 24px; --rz-s6: 32px; --rz-s7: 48px; --rz-s8: 64px; --rz-s9: 96px;

  /* Radius */
  --rz-r-sm: 8px; --rz-r-md: 10px; --rz-r-lg: 14px; --rz-r-xl: 16px;

  /* Shadow */
  --rz-shadow-sm: 0 1px 2px rgba(24,24,27,.06);
  --rz-shadow-md: 0 8px 24px rgba(24,24,27,.07);
  --rz-shadow-lg: 0 12px 32px rgba(24,24,27,.09);

  /* Focus ring */
  --rz-ring: 0 0 0 3px color-mix(in srgb, var(--rz-accent) 35%, transparent);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--rz-font-body);
  font-size: var(--rz-text-base);
  line-height: 1.55;
  color: var(--rz-ink-900);
  background: var(--rz-bg);
}
h1, h2, h3 { font-family: var(--rz-font-head); letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: var(--rz-ring);
  border-radius: var(--rz-r-sm);
}

/* ---------- Utility bar ---------- */
.util {
  background: var(--rz-bg-tint);
  border-bottom: 1px solid var(--rz-line);
  font-size: var(--rz-text-xs);
  color: var(--rz-ink-600);
}
.util .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.util-grp { display: flex; gap: var(--rz-s5); align-items: center; }
.util-it { display: flex; gap: 7px; align-items: center; }
a.util-it { transition: color .15s; }
a.util-it:hover { color: var(--rz-accent); }

/* ---------- Sticky header ---------- */
.sticky-zone { position: sticky; top: 0; z-index: 50; background: var(--rz-bg); transition: box-shadow .2s; }
.sticky-zone.is-stuck { box-shadow: 0 4px 20px rgba(24,24,27,.09); }

.site-head .wrap { display: flex; align-items: center; gap: var(--rz-s6); height: 84px; }

/* ---------- Logo ----------
   LogoTopic() output is uncontrolled (may include its own <a> and a large img).
   Force the rendered image to a fixed header height regardless of legacy CSS. */
header.site-head .logo { flex: 0 0 auto; display: flex; align-items: center; max-width: 240px; max-height: 60px; overflow: hidden; }
header.site-head .logo a { display: inline-flex; align-items: center; line-height: 0; }
header.site-head .logo img,
header.site-head .logo a img {
  height: 50px !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 50px !important;
  display: block !important;
  margin: 0 !important;
}

/* ---------- Search ----------
   Modern skin uses its own _Search.cshtml: one rounded box, search icon
   on the left (as the submit button), input fills the rest, no trailing button. */
.search { flex: 1; min-width: 0; max-width: 560px; }
.search form { margin: 0; }
.search .modern-search {
  display: flex; align-items: center; width: 100%; height: 46px;
  border: 1.5px solid var(--rz-line-strong); border-radius: var(--rz-r-md);
  background: var(--rz-bg); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.search .modern-search:hover { border-color: #c8c8cd; }
.search .modern-search:focus-within { border-color: var(--rz-accent); box-shadow: var(--rz-ring); }
.search .modern-search-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 100%; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--rz-ink-400); transition: color .15s;
}
.search .modern-search-btn:hover { color: var(--rz-accent); }
/* Defensive: keep the icon in normal flow even if a legacy ".search svg"
   absolute-position rule is still floating around in a cached stylesheet. */
.search .modern-search-btn svg {
  display: block; position: static !important;
  left: auto !important; top: auto !important; transform: none !important;
  pointer-events: auto !important;
}
.search .modern-search-input {
  flex: 1; min-width: 0; height: 100%;
  border: none; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--rz-ink-900);
  padding: 0 16px 0 0;
  -webkit-appearance: none; appearance: none; box-shadow: none;
}
.search .modern-search-input::placeholder { color: var(--rz-ink-400); }
/* Kill any browser-native search decorations / clear buttons */
.search .modern-search-input::-webkit-search-decoration,
.search .modern-search-input::-webkit-search-cancel-button,
.search .modern-search-input::-webkit-search-results-button,
.search .modern-search-input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }

.head-acts { display: flex; gap: var(--rz-s2); align-items: center; }
.act {
  display: flex; gap: var(--rz-s2); align-items: center;
  padding: 10px 14px; border-radius: 9px;
  font-size: var(--rz-text-sm); font-weight: 600; color: var(--rz-ink-700);
  background: none; border: none; cursor: pointer;
  transition: background .15s;
}
.act:hover { background: #f4f4f5; }
.act .t { white-space: nowrap; }
.act--cart { background: var(--rz-ink-900); color: #fff; white-space: nowrap; }
.act--cart:hover { background: #2d2d33; }
.act--cart .t { color: #fff; }

/* ---------- Dropdown menus ---------- */
.menu-wrap { position: relative; }
.menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  min-width: 210px; background: var(--rz-bg);
  border: 1.5px solid var(--rz-line); border-radius: var(--rz-r-lg);
  box-shadow: var(--rz-shadow-lg); padding: var(--rz-s2);
}
.menu.open { display: block; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--rz-r-sm);
  font-size: var(--rz-text-sm); font-weight: 600; color: var(--rz-ink-700);
  transition: background .15s, color .15s;
}
.menu a:hover { background: #f4f4f5; color: var(--rz-ink-900); }
.menu-div { height: 1px; background: var(--rz-line); margin: var(--rz-s2) var(--rz-s2); }

/* Mega menu (All Products) */
.mega {
  display: none; position: absolute; top: 100%; left: 48px; right: 48px; z-index: 70;
  background: var(--rz-bg); border: 1.5px solid var(--rz-line); border-radius: 0 0 var(--rz-r-lg) var(--rz-r-lg);
  box-shadow: var(--rz-shadow-lg); padding: var(--rz-s5);
}
.mega.open { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rz-s2) var(--rz-s5); }
.mega a {
  display: flex; padding: 9px 12px; border-radius: var(--rz-r-sm);
  font-size: var(--rz-text-sm); font-weight: 600; color: var(--rz-ink-700);
  transition: background .15s, color .15s;
}
.mega a:hover { background: #f4f4f5; color: var(--rz-ink-900); }
.site-nav .wrap { position: relative; }
.site-nav a[aria-expanded="true"], .act[aria-expanded="true"] { background: #f4f4f5; }

/* ---------- Nav ---------- */
.site-nav { border-top: 1px solid var(--rz-line); border-bottom: 1px solid var(--rz-line); }
.site-nav .wrap { display: flex; align-items: center; gap: var(--rz-s1); height: 52px; }
.site-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--rz-r-sm);
  font-size: var(--rz-text-sm); font-weight: 600; color: var(--rz-ink-700);
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: #f4f4f5; color: var(--rz-ink-900); }
.site-nav .nav-quote {
  margin-left: auto; color: var(--rz-accent);
  border: 1.5px solid var(--rz-accent-border);
}
.site-nav .nav-quote:hover { background: var(--rz-accent-soft); color: var(--rz-accent); }

.nav-drawer { display: none; }
.nav-burger { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px; border-radius: var(--rz-r-md);
  font-size: 15.5px; font-weight: 700; cursor: pointer; border: none;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { background: var(--rz-accent); color: #fff; box-shadow: var(--rz-shadow-sm); }
.btn--primary:hover {
  background: var(--rz-accent-hover); transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--rz-accent) 30%, transparent);
}
.btn--ghost { background: var(--rz-bg); color: var(--rz-ink-900); border: 1.5px solid var(--rz-line-strong); }
.btn--ghost:hover { border-color: #c8c8cd; background: var(--rz-bg-tint); }

/* ---------- Hero ---------- */
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--rz-s8);
  align-items: center; padding-top: 72px; padding-bottom: 72px;
}
.eyebrow {
  font-size: var(--rz-text-xs); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rz-accent); margin-bottom: 18px;
}
.hero h1 { font-size: var(--rz-text-h1); line-height: 1.06; font-weight: 750; margin-bottom: 20px; text-wrap: pretty; }
.hero .sub { font-size: var(--rz-text-lg); color: var(--rz-ink-600); max-width: 46ch; margin-bottom: var(--rz-s6); text-wrap: pretty; }
.hero-btns { display: flex; flex-wrap: wrap; gap: var(--rz-s3); margin-bottom: 36px; }
.assure { display: flex; flex-wrap: wrap; gap: 26px; font-size: 13.5px; font-weight: 600; color: var(--rz-ink-600); }
.assure-it { display: flex; gap: var(--rz-s2); align-items: center; }
.assure-it svg { color: var(--rz-accent); flex: 0 0 auto; }
.hero-media { width: 100%; height: 440px; display: block; }

/* ---------- Secondary CTAs ---------- */
.ctas .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 84px; }
.cta-card {
  display: flex; gap: 18px; align-items: center;
  padding: 24px 26px; border: 1.5px solid var(--rz-line); border-radius: var(--rz-r-lg);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cta-card:hover { border-color: var(--rz-line-strong); box-shadow: var(--rz-shadow-md); transform: translateY(-2px); }
.cta-card .ic {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rz-accent-soft); color: var(--rz-accent);
}
.cta-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 3px; }
.cta-card p { font-size: var(--rz-text-sm); color: var(--rz-ink-600); }
.cta-card .arr { margin-left: auto; color: var(--rz-ink-400); transition: color .15s, transform .15s; flex: 0 0 auto; }
.cta-card:hover .arr { color: var(--rz-accent); transform: translateX(3px); }

/* ---------- Sections ---------- */
.sect { padding: 76px 0; }
.sect--tint { background: var(--rz-bg-tint); border-top: 1px solid var(--rz-line); border-bottom: 1px solid var(--rz-line); }
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rz-s4); margin-bottom: 36px; }
.sect-head h2 { font-size: var(--rz-text-h2); font-weight: 740; }
.sect-head .all { font-size: var(--rz-text-sm); font-weight: 700; color: var(--rz-accent); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.sect-head .all:hover { text-decoration: underline; }

/* ---------- Categories ---------- */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--rz-s4); }
.cat {
  background: var(--rz-bg); border: 1.5px solid var(--rz-line); border-radius: var(--rz-r-lg);
  padding: 26px 20px 22px; display: flex; flex-direction: column; gap: var(--rz-s4);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cat .ic { color: var(--rz-ink-700); transition: color .15s; }
.cat span.lb { font-size: var(--rz-text-sm); font-weight: 700; line-height: 1.3; }
.cat:hover { border-color: var(--rz-line-strong); box-shadow: var(--rz-shadow-lg); transform: translateY(-3px); }
.cat:hover .ic { color: var(--rz-accent); }

/* ---------- Services ---------- */
.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc {
  border: 1.5px solid var(--rz-line); border-radius: var(--rz-r-xl);
  overflow: hidden; background: var(--rz-bg);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.svc:hover { border-color: var(--rz-line-strong); box-shadow: var(--rz-shadow-lg); transform: translateY(-3px); }
.svc-media { width: 100%; height: 210px; display: block; }
.svc-bd { padding: 22px 24px 26px; }
.svc h3 { font-size: var(--rz-text-h3); font-weight: 720; margin-bottom: 7px; }
.svc p { font-size: var(--rz-text-sm); color: var(--rz-ink-600); margin-bottom: var(--rz-s4); }
.svc .lnk { font-size: var(--rz-text-sm); font-weight: 700; color: var(--rz-accent); display: inline-flex; gap: 6px; align-items: center; }
.svc .lnk:hover { text-decoration: underline; }

/* ---------- Newsletter ---------- */
.news { border-top: 1px solid var(--rz-line); background: var(--rz-bg-tint); }
.news .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding-top: 52px; padding-bottom: 52px; flex-wrap: wrap;
}
.news h3 { font-size: 24px; font-weight: 740; margin-bottom: 6px; }
.news p { font-size: 15px; color: var(--rz-ink-600); }
.news form { display: flex; gap: var(--rz-s3); flex-wrap: wrap; }
.news input {
  width: 320px; max-width: 100%; height: 48px;
  border: 1.5px solid var(--rz-line-strong); border-radius: var(--rz-r-md);
  padding: 0 16px; font: inherit; font-size: 15px; background: var(--rz-bg);
}
.news input:focus { outline: none; border-color: var(--rz-accent); box-shadow: var(--rz-ring); }

/* ---------- Footer ---------- */
.foot { background: var(--rz-bg); padding: var(--rz-s8) 0 0; }
.foot-cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding-bottom: var(--rz-s7); }
.foot-brand img { height: 44px; margin-bottom: var(--rz-s4); }
.foot-brand p { font-size: 14px; color: var(--rz-ink-600); max-width: 30ch; margin-bottom: 18px; }
.soc { display: flex; gap: var(--rz-s2); }
.soc a {
  width: 36px; height: 36px; border: 1.5px solid var(--rz-line-strong); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: var(--rz-ink-600);
  transition: border-color .15s, color .15s;
}
.soc a:hover { border-color: var(--rz-accent); color: var(--rz-accent); }
.foot h4 {
  font-family: var(--rz-font-body); font-size: var(--rz-text-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rz-ink-400); margin-bottom: var(--rz-s4);
}
.foot ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot ul a { font-size: var(--rz-text-sm); color: var(--rz-ink-700); font-weight: 550; transition: color .15s; }
.foot ul a:hover { color: var(--rz-accent); }
.legal { border-top: 1px solid var(--rz-line); }
.legal .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rz-s4);
  min-height: 72px; padding-top: 14px; padding-bottom: 14px;
  font-size: var(--rz-text-xs); color: var(--rz-ink-400); flex-wrap: wrap;
}
.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badges span {
  font-size: 12px; font-weight: 700; color: var(--rz-ink-600);
  border: 1px solid var(--rz-line-strong); border-radius: 999px; padding: 6px 13px;
  display: flex; gap: 6px; align-items: center;
}
.badges svg { color: var(--rz-accent); }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  html.js .reveal.in { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive breakpoints
   Desktop ≥1025 · Tablet 641–1024 · Mobile ≤640
   ============================================================ */
@media (max-width: 1024px) {
  .wrap { padding: 0 32px; }
  .site-head .wrap { height: 76px; gap: var(--rz-s4); }
  .site-head .logo img { height: 44px; }
  .act span.t { display: none; }            /* icon-only account/cart */
  .act { padding: 10px 12px; }

  .site-nav a:not(.nav-quote) { display: none; }
  .nav-burger {
    display: flex; align-items: center; gap: var(--rz-s2);
    background: none; border: none; cursor: pointer;
    padding: 8px 12px; border-radius: var(--rz-r-sm);
    font-size: var(--rz-text-sm); font-weight: 700; color: var(--rz-ink-700);
  }
  .nav-burger:hover { background: #f4f4f5; }
  .site-nav .wrap { position: relative; }
  .nav-drawer {
    display: none; position: absolute; top: calc(100% + 1px); left: 32px; right: 32px;
    background: var(--rz-bg); border: 1.5px solid var(--rz-line); border-radius: var(--rz-r-lg);
    box-shadow: var(--rz-shadow-lg); padding: var(--rz-s2); z-index: 60;
  }
  .nav-drawer.open { display: block; }
  .nav-drawer a { display: flex; padding: 12px 14px; border-radius: var(--rz-r-sm); font-weight: 600; color: var(--rz-ink-700); }
  .nav-drawer a:hover { background: #f4f4f5; }

  .hero .wrap { grid-template-columns: 1fr; gap: var(--rz-s6); padding-top: 48px; padding-bottom: 48px; }
  .hero-media { height: 360px; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .svcs { grid-template-columns: repeat(3, 1fr); gap: var(--rz-s4); }
  .svc-media { height: 160px; }
  .ctas .wrap { padding-bottom: 56px; }
  .sect { padding: 56px 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .util .util-grp:last-child { display: none; }
  .site-head .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; row-gap: var(--rz-s3); }
  .site-head .logo { order: 1; }
  .head-acts { order: 2; margin-left: auto; }
  .search { order: 3; flex-basis: 100%; }
  .nav-drawer { left: 20px; right: 20px; }

  .hero h1 { font-size: var(--rz-text-h1); }
  .hero-media { height: 260px; }
  .hero-btns .btn { width: 100%; }
  .assure { flex-direction: column; gap: var(--rz-s3); }

  .ctas .wrap { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, 1fr); gap: var(--rz-s3); }
  .cat { padding: 20px 16px 18px; }
  .svcs { grid-template-columns: 1fr; }
  .svc-media { height: 200px; }
  .news .wrap { flex-direction: column; align-items: flex-start; }
  .news input { width: 100%; }
  .news form { width: 100%; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: var(--rz-s6) var(--rz-s5); }
  .legal .wrap { flex-direction: column; align-items: flex-start; }
}