/* ==========================================================================
   Pro Link Corporate Store — stylesheet
   ========================================================================== */

:root {
  --navy: #0e2a47;
  --navy-dark: #08192c;
  --navy-light: #16406b;
  --accent: #e8511d;
  --accent-dark: #c53f10;
  --ink: #1c2733;
  --muted: #5b6b7a;
  --line: #e2e8ef;
  --bg: #f5f7fa;
  --card: #ffffff;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 2px 8px rgba(14, 42, 71, .08);
  --shadow-lg: 0 14px 40px rgba(14, 42, 71, .16);
  --maxw: 1200px;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--navy-light); text-decoration: none; }
a:hover { color: var(--accent); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  transition: background .15s ease, transform .05s ease;
  text-align: center;
}
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn-outline:hover { background: #fff; color: var(--navy); }
.btn-ghost {
  background: var(--navy);
}
.btn-ghost:hover { background: var(--navy-dark); }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Admin nav menu (shared across admin pages) ---------- */
.admin-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px; margin-bottom: 24px;
}
.admin-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 7px;
  font-size: 14px; font-weight: 600; color: var(--navy);
  transition: background .12s ease, color .12s ease;
}
.admin-nav-link:hover { background: var(--bg); color: var(--accent); }
.admin-nav-link.active { background: var(--navy); color: #fff; }
.admin-nav-link.active:hover { color: #fff; }
.admin-nav-ic { font-size: 15px; line-height: 1; }

/* ---------- Admin confirm dialog (shared) ---------- */
.cf-overlay { position: fixed; inset: 0; background: rgba(14, 42, 71, .55); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.cf-overlay.open { display: flex; }
.cf-box { background: #fff; border-radius: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, .34); max-width: 420px; width: 100%; padding: 28px 26px 22px; text-align: center; animation: cf-pop .16s ease; }
@keyframes cf-pop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.cf-icon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.cf-box h3 { margin: 0 0 8px; color: var(--navy); font-size: 20px; }
.cf-box p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cf-actions { display: flex; gap: 10px; justify-content: center; }
.cf-actions .btn { min-width: 130px; }
.cf-danger { background: #a12626; }
.cf-danger:hover { background: #861f1f; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--navy-dark);
  color: #c9d6e3;
  font-size: 13px;
}
.topbar .wrap {
  display: flex;
  justify-content: flex-end;      /* store switcher + HQ link are all that's left */
  align-items: center;
  min-height: 38px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: #dfe8f1; }
.topbar a:hover { color: #fff; }
.topbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.store-switch { display: inline-flex; align-items: center; gap: 6px; color: #9fb4c9; }
.store-switch select {
  background: #0b1b2e;
  color: #eaf1f8;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.store-switch select:focus { outline: none; border-color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
}
.brand:hover { color: #fff; }
.brand .logo-mark {
  width: 42px; height: 42px;
  border-radius: 9px;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 3px 10px rgba(232,81,29,.4);
}
.brand .logo-text { line-height: 1.1; }
/* Company name picks up the Mega Menu Bar Color so the bar and the wordmark
   read as one brand accent. */
.brand .logo-text b { font-size: 22px; letter-spacing: .3px; display: block; color: var(--navy-light); }
.brand .logo-text small { font-size: 11px; color: #9fb4c9; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
.brand .logo-img {
  width: 44px; height: 44px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.brand .cust-logo {
  height: 42px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  background: #fff;
  padding: 4px 9px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
/* Set by fitLogoBacking() on logos that don't need the white plate: opaque
   artwork brings its own background, light artwork reads on the dark bar. */
.brand .cust-logo.flat,
.brand .logo-img.flat {
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
.footer-brand .powered { font-size: 12px; color: #8ea3b8; margin-top: 4px; }
.footer-brand .powered a { color: #cdd9e6; text-decoration: underline; }

.header-search {
  flex: 1;
  max-width: 420px;
  margin-left: auto;
  display: flex;
}
.header-search input {
  flex: 1;
  border: 0;
  padding: 11px 14px;
  border-radius: 8px 0 0 8px;
  font: inherit;
  outline: none;
}
.header-search button {
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 0 18px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 16px;
}
.header-search button:hover { background: var(--accent-dark); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions a {
  color: #dbe6f1;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.header-actions a:hover { color: #fff; background: rgba(255,255,255,.08); }
.cart-link .cart-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  padding: 6px;
}

/* ---------- Main nav ---------- */
.main-nav {
  background: var(--navy-light);
  border-top: 1px solid rgba(255,255,255,.08);
}
.main-nav .wrap { display: flex; flex-wrap: wrap; align-items: center; }
.main-nav a {
  color: #eaf1f8;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 16px;
  position: relative;
}
/* Top-level nav items: vertically centered and larger */
.main-nav .wrap > a, .main-nav .nav-group > a {
  font-size: 16.5px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
}
.main-nav a:hover, .main-nav a.active {
  background: rgba(0,0,0,.18);
  color: #fff;
}
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
}
.nav-group { position: relative; }
.nav-group > a::after { content: " ▾"; font-size: 10px; opacity: .8; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 210px;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 10px 10px;
  padding: 6px 0;
  display: none;
  z-index: 50;
}
.nav-group:hover .dropdown, .nav-group:focus-within .dropdown { display: block; }

/* SQL-driven cascading menu: category > subcategory dropdown > product flyout */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 10px 10px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 60;
}
.nav-group:hover > .submenu, .nav-group:focus-within > .submenu { display: block; }
.submenu-item { position: relative; }
.main-nav .submenu a {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  white-space: nowrap;
}
.main-nav .submenu a:hover, .main-nav .submenu a.active { background: var(--bg); color: var(--accent); }
.submenu-item.has-flyout > a::after { content: "›"; float: right; margin-left: 16px; color: var(--muted); font-weight: 700; }

.flyout {
  position: absolute;
  top: -6px;
  left: 100%;
  min-width: 240px;
  max-height: 74vh;
  overflow-y: auto;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border-radius: 10px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 61;
}
.submenu-item.has-flyout:hover > .flyout, .submenu-item.has-flyout:focus-within > .flyout { display: block; }
/* After a click the pointer is still sitting on the menu, and in-page navigation
   no longer tears it down — so hold the panels shut until the pointer leaves. */
.main-nav.dismissed .submenu,
.main-nav.dismissed .flyout,
.main-nav.dismissed .dropdown { display: none !important; }
/* open the flyout leftward for the right-most categories to avoid overflow */
.nav-group:nth-last-child(-n+2) .flyout { left: auto; right: 100%; }
.main-nav .flyout a { font-weight: 500; font-size: 13px; color: var(--muted); padding: 7px 16px; }
.main-nav .flyout a:hover { color: var(--accent); background: var(--bg); }
.main-nav .flyout a.sub-more { color: var(--accent); font-weight: 700; }
.dropdown a {
  display: block;
  color: var(--ink);
  padding: 10px 18px;
  font-weight: 500;
}
.dropdown a:hover { background: var(--bg); color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(120deg, rgba(8,25,44,.92), rgba(14,42,71,.78)),
    radial-gradient(circle at 80% 20%, rgba(232,81,29,.35), transparent 55%),
    linear-gradient(120deg, #123a63, #0e2a47);
  color: #fff;
  overflow: hidden;
}
.hero .wrap {
  padding: 76px 20px 84px;
  max-width: 760px;
  position: relative;
  z-index: 2;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; }
/* Before the photo paints, the band would otherwise show the theme gradient.
   Hold it white until the first image is actually loaded — and keep the scrim
   off until then, or it would tint that white blue-grey. */
.hero.has-images,
.page-hero.has-images { background: #fff; }
/* Same band height on the home page as everywhere else, so the photo doesn't
   jump size when you move between them. */
.hero.has-images {
  min-height: 322px;
  display: flex;
  align-items: center;
}
.hero.has-images > .wrap { width: 100%; padding-top: 34px; padding-bottom: 34px; }
.hero.has-images:not(.hero-ready)::before,
.page-hero.has-images:not(.hero-ready)::before { content: none; }
/* The hero type is white for the photo — on the white holding colour it would
   be invisible, so darken it until the image is there. */
.hero.has-images:not(.hero-ready) .wrap,
.hero.has-images:not(.hero-ready) .wrap .eyebrow,
.hero.has-images:not(.hero-ready) .wrap h1,
.hero.has-images:not(.hero-ready) .wrap h1 span,
.hero.has-images:not(.hero-ready) .wrap p,
.page-hero.has-images:not(.hero-ready) .wrap,
.page-hero.has-images:not(.hero-ready) .wrap h1,
.page-hero.has-images:not(.hero-ready) .wrap p,
.page-hero.has-images:not(.hero-ready) .breadcrumb,
.page-hero.has-images:not(.hero-ready) .breadcrumb a { color: var(--navy); text-shadow: none; }

.hero.has-images::before,
.page-hero.has-images::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Light scrim: enough to keep white text legible, weak enough to let the
     photo show. The text also carries its own shadow (below) so the overlay
     doesn't have to do all the work. */
  background: linear-gradient(120deg, rgba(8,25,44,.42), rgba(14,42,71,.16));
}
/* With a lighter overlay the type needs its own contrast to stay readable
   over a bright patch of photo. */
.hero.has-images .wrap,
.page-hero.has-images .wrap { text-shadow: 0 1px 12px rgba(6,18,32,.55), 0 1px 3px rgba(6,18,32,.5); }
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  color: #ffb997;
  font-weight: 700;
  margin: 0 0 14px;
}
.hero h1 { font-size: 46px; line-height: 1.1; margin: 0 0 18px; }
.hero h1 span { color: #ff9f6b; }
.hero p { font-size: 19px; color: #d5e1ee; margin: 0 0 30px; max-width: 620px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section.alt { background: #fff; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 42px; }
.section-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 10px;
}
.section-head h2 { font-size: 34px; margin: 0 0 12px; color: var(--navy); }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }

/* ---------- Category grid ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
.cat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-card .thumb { aspect-ratio: 4/3; background: #fff; position: relative; }
.cat-card .thumb > img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.cat-card .body { padding: 16px 18px; text-align: center; }
.cat-card h3 { margin: 0 0 4px; font-size: 17px; color: var(--navy); }
.cat-card p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- Feature strip ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}
.feature { text-align: center; padding: 0 10px; }
.feature .ico {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
  display: grid;
  place-items: center;
  font-size: 27px;
}
.feature h3 { margin: 0 0 8px; color: var(--navy); font-size: 19px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- About split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}
.split .about-art {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}
.split h2 { font-size: 32px; color: var(--navy); margin: 0 0 18px; }
.split p { color: var(--muted); font-size: 16px; margin: 0 0 16px; }
.split ul { margin: 0 0 24px; padding-left: 0; list-style: none; }
.split ul li { padding: 6px 0 6px 30px; position: relative; color: var(--ink); }
.split ul li::before {
  content: "✓";
  position: absolute; left: 0; top: 6px;
  color: var(--accent);
  font-weight: 800;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--accent), var(--accent-dark));
  color: #fff;
  text-align: center;
}
.cta-band .wrap { padding: 56px 20px; }
.cta-band h2 { font-size: 32px; margin: 0 0 12px; }
.cta-band p { font-size: 18px; margin: 0 0 26px; opacity: .95; }
.cta-band .btn { background: #fff; color: var(--accent); }
.cta-band .btn:hover { background: var(--navy-dark); color: #fff; }

/* ---------- Page header (category/inner) ---------- */
.page-hero {
  background: linear-gradient(120deg, var(--navy), var(--navy-light));
  color: #fff;
  padding: 40px 0;
  position: relative;                 /* anchors the hero image layer */
}
/* Sit the title/breadcrumb above the photo and its scrim, and give the band a
   little more height so the image has room to read as an image. */
.page-hero .wrap { position: relative; z-index: 2; }
/* Inner pages carry different amounts of text — a category has a title and a
   blurb, a product page only a breadcrumb — which made the photo visibly
   resize as you moved between them. Give the band one height everywhere and
   centre whatever it holds. */
.page-hero.has-images {
  padding: 40px 0;
  min-height: 322px;
  display: flex;
  align-items: center;
}
.page-hero.has-images > .wrap { width: 100%; }
.page-hero h1 { margin: 0 0 6px; font-size: 32px; }
.breadcrumb { font-size: 13px; color: #a9bed3; }
.breadcrumb a { color: #cfe0f0; }
.breadcrumb a:hover { color: #fff; }
/* Muted blue-grey disappears against a photo — brighten it over hero imagery. */
.page-hero.has-images .breadcrumb { color: #e8eff7; }
.page-hero.has-images .breadcrumb a { color: #fff; text-decoration: underline; }

/* ---------- Product grid ---------- */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}
.toolbar .count { color: var(--muted); font-size: 14px; }
.toolbar select {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card .thumb {
  aspect-ratio: 1/1;
  background: #fff;
  position: relative;
}
.product-card .thumb > img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

/* Company-logo overlay ("virtual sample") on real product photos */
.brand-badge {
  position: absolute;
  top: 42%; left: 63%; width: 15%;     /* width % overridden inline per product */
  aspect-ratio: 2.8 / 1;               /* standard decoration box: logos fit inside this, whatever their shape */
  transform: translate(-50%, -50%);
  pointer-events: none;
  line-height: 0;
}
/* contain = every company's logo scales to the same footprint regardless of aspect ratio.
   inset:0 fills the aspect-ratio box so the height resolves reliably (percentage height alone doesn't). */
.brand-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
/* initials fallback (only when a company has no logo) still needs a chip to read */
.brand-badge span {
  display: inline-block; font-weight: 800; font-size: 12px; letter-spacing: .5px;
  color: #fff; background: var(--accent); border-radius: 5px; padding: 3px 8px;
}
.product-card .tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.product-card .body { padding: 15px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card .body .sku { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.product-card .body h3 { margin: 3px 0 6px; font-size: 16px; }
.product-card .body h3 a { color: var(--navy); }
.product-card .body h3 a:hover { color: var(--accent); }
.product-card .swatches { display: flex; gap: 6px; margin: 4px 0 10px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.product-card .price { margin-top: auto; font-weight: 700; color: var(--navy); font-size: 18px; }
.product-card .price small { font-weight: 500; color: var(--muted); font-size: 12px; }
.product-card .actions { margin-top: 12px; }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; }
.gallery .main-img {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1/1;
  position: relative;
}
.gallery .main-img > img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.img-unavailable {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.img-unavailable span {
  transform: rotate(-28deg);
  font-size: clamp(13px, 3.4vw, 24px);
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: #c81e1e;
  background: rgba(255,255,255,.72);
  border: 2px solid rgba(200,30,30,.7);
  padding: 6px 26px; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.gallery .main-img .brand-badge { width: 13%; }
.color-caption { text-align: center; margin-top: 12px; font-weight: 700; color: var(--navy); font-size: 16px; }
.gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery .thumbs button {
  width: 74px; height: 74px;
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #eef2f6;
  padding: 0;
}
.gallery .thumbs button.active { border-color: var(--accent); }
.db-tag {
  display: inline-block;
  background: #e7f0ff;
  color: #1b568c;
  border: 1px solid #c3dbff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  margin-right: 6px;
  vertical-align: 1px;
}
.pd-info h1 { margin: 0 0 6px; color: var(--navy); font-size: 28px; }
.pd-info .sku { color: var(--muted); font-size: 13px; }
.pd-info .price { font-size: 30px; font-weight: 800; color: var(--accent); margin: 16px 0; }
.pd-info .price small { font-size: 14px; color: var(--muted); font-weight: 500; }
.pd-info p.desc { color: var(--muted); margin: 0 0 22px; }
.pd-info .desc-list { margin: 0 0 20px; padding-left: 20px; color: var(--ink); }
.pd-info .desc-list li { margin-bottom: 6px; line-height: 1.5; }
.pd-info .desc-list li:first-child { font-weight: 600; color: var(--navy); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; }
.opt-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-btns button {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
}
.opt-btns button.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.opt-btns button .size-up { font-size: 10px; opacity: .75; margin-left: 3px; font-weight: 600; }
.color-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.color-btns button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.color-btns button.active { border-color: var(--navy); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
/* green ✓ badge on colorways whose photo has been replaced */
.color-btns button.replaced::after {
  content: "✓"; position: absolute; right: -4px; bottom: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #1c8a45; color: #fff; font-size: 10px; font-weight: 800;
  line-height: 15px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
/* "Replaced" state on the admin replace button */
.btn.done { background: #e7f6ec; color: #1c6b39; border: 1px solid #b6e2c4; }
.qty { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { border: 0; background: #f0f4f8; width: 40px; font-size: 20px; cursor: pointer; }
.qty input { width: 56px; border: 0; text-align: center; font: inherit; font-weight: 600; }
.pd-info .buy-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pd-features { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }
.pd-features h3 { margin: 0 0 12px; color: var(--navy); font-size: 18px; }
.pd-features ul { margin: 0; padding-left: 20px; color: var(--muted); }
.pd-features li { margin-bottom: 6px; }

/* ---------- Forms / cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
}
.form-narrow { max-width: 460px; margin: 0 auto; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none; border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(22,64,107,.12);
}
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 13px; color: var(--muted); }
.alert-ok {
  background: #e7f6ec; border: 1px solid #b6e2c4; color: #1c6b39;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px;
}

/* ---------- Contact layout ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.contact-info .info-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-info .info-item .ico {
  width: 46px; height: 46px; flex: none;
  border-radius: 10px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 20px;
}
.contact-info .info-item h4 { margin: 0 0 2px; color: var(--navy); font-size: 16px; }
.contact-info .info-item p { margin: 0; color: var(--muted); font-size: 14px; }
.contact-info .info-item a { font-weight: 600; }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.cart-item {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-item .ci-thumb { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #eef2f6; }
.cart-item h4 { margin: 0 0 4px; font-size: 16px; color: var(--navy); }
.cart-item .meta { font-size: 13px; color: var(--muted); }
.cart-item .ci-right { text-align: right; }
.cart-item .ci-price { font-weight: 700; color: var(--navy); }
.cart-item .remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; margin-top: 6px; }
.cart-item .remove:hover { color: var(--accent); }
.cart-item .qty { transform: scale(.85); transform-origin: right; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--muted); }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; font-size: 20px; font-weight: 800; color: var(--navy); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .big { font-size: 54px; margin-bottom: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dark); color: #b7c6d6; margin-top: 40px; }
.footer-top { padding: 54px 0 34px; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-cols h4 { color: #fff; font-size: 15px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 1px; }
.footer-cols a { color: #b7c6d6; display: block; padding: 5px 0; font-size: 14px; }
.footer-cols a:hover { color: #fff; }
.footer-cols p { font-size: 14px; margin: 0 0 12px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
  font-size: 12.5px;
  color: #8ea3b8;
}
.footer-bottom .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legal { font-size: 11.5px; color: #6f849a; max-width: 720px; line-height: 1.5; }
.admin-link {
  display: inline-block; margin-left: 12px; padding: 3px 11px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 20px;
  color: #cbd6e2; font-size: 12px; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.admin-link:hover { background: rgba(255,255,255,.12); color: #fff; }

/* inline admin login modal (stays on the current page) */
.admin-modal { position: fixed; inset: 0; background: rgba(8,25,48,.55); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.admin-modal-card { background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 26px; width: 100%; max-width: 340px; position: relative; }
.admin-modal-card h3 { margin: 0 0 16px; color: var(--navy); font-size: 20px; }
.amc-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
#amcPw { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; margin-bottom: 12px; }
.amc-err { background: #fdeaea; border: 1px solid #f0b7b7; color: #a12626; padding: 8px 12px; border-radius: 7px; font-size: 13px; margin-bottom: 12px; }
.amc-ok { color: #1c6b39; font-weight: 600; margin: 0 0 14px; }
.amc-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.amc-signout { width: 100%; padding: 9px; background: var(--muted); color: #fff; border: none; border-radius: 8px; cursor: pointer; font: inherit; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-24 { margin-top: 24px; }
.hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .split, .contact-grid, .cart-layout, .product-detail { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 36px; }
  .header-search { display: none; }
}
@media (max-width: 720px) {
  .menu-toggle { display: block; margin-left: auto; }
  .main-nav .wrap { display: none; flex-direction: column; }
  .main-nav.open .wrap { display: flex; }
  .main-nav a { padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dropdown { position: static; display: block; box-shadow: none; background: rgba(0,0,0,.2); border-radius: 0; }
  .dropdown a { color: #dbe6f1; padding-left: 40px; }
  .dropdown a:hover { background: rgba(0,0,0,.25); color: #fff; }
  .nav-group > a::after { content: ""; }
  /* Cascading menu collapses to a subcategory accordion (products hidden) on mobile */
  .submenu { position: static; display: block; min-width: 0; box-shadow: none;
             background: rgba(0,0,0,.16); border-radius: 0; padding: 0; }
  .main-nav .submenu a { color: #eaf1f8; padding: 11px 20px 11px 40px; }
  .main-nav .submenu a:hover { background: rgba(0,0,0,.25); color: #fff; }
  .flyout { display: none !important; }
  .submenu-item.has-flyout > a::after { content: ""; }
  .header-actions a span.lbl { display: none; }
  .form-two { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .section-head h2 { font-size: 26px; }
}