/* Sparklab Robotics - site styles
   Light, open surfaces. The brand cyan (#00ADEE) and orange (#F68821) are the
   logo's own colors and are unchanged; only the ground they sit on is light.
   Deep teal ink keeps the palette reading as Sparklab rather than generic white.
   Anton for display type - the same face as the Instagram Reels captions. */

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The page carries a faint cyan wash rather than pure white, and the
     alternating band is properly tinted, so the brand color is present even
     in the empty space. Cards stay pure white so product photos pop. */
  --page:       #f7fcfe;
  --surface:    #e7f4fa;
  --surface-2:  #ffffff;
  --line:       #cbe1eb;
  --line-soft:  #dceaf1;

  --cyan:       #00adee;
  --cyan-deep:  #006a91;   /* AA for small text on white, the band and the tint */
  --cyan-tint:  #daf2fd;
  --orange:     #f68821;
  --orange-deep:#9a4d00;
  --orange-tint:#ffeeda;

  --ink:        #00161e;
  --body:       #33555f;
  /* Both greys are used for small text on white, on the tinted band and on the
     cyan tint, so they are set dark enough to clear AA (4.5:1) on all three. */
  --muted:      #4d6a74;
  --muted-dim:  #54727c;
  --on-dark:    #f0fafe;

  --ok:         #15803d;
  --ok-tint:    #e8f7ee;
  --warn:       #a15c00;
  --warn-tint:  #fff4e0;
  --off:        #9aa9ae;

  --wrap: 1200px;
  --radius: 14px;
  --radius-lg: 22px;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --shadow: 0 14px 34px -18px rgba(0, 45, 62, .30);
  --shadow-sm: 0 2px 10px -4px rgba(0, 45, 62, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must always win. Author `display` rules (e.g.
   .product-card { display: flex }) otherwise beat the UA `[hidden]` rule and
   leave JS-hidden cards on screen - which silently broke category filtering. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
    transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 400; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--cyan-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.wrap-narrow { max-width: 900px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cyan); color: #00121a;
  padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.icon-sprite { display: none; }

.ico {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentColor; flex: none;
  vertical-align: middle;
}
.ico-xs { width: .95rem; height: .95rem; }
.ico-lg { width: 1.85rem; height: 1.85rem; }
#i-whatsapp, #i-tiktok, #i-bolt { stroke: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan-deep);
}

.section-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
}

/* A short brand rule under section headings, so the color recurs down the
   page rather than only in the hero. */
.section-title::after {
  content: "";
  display: block;
  width: 56px; height: 4px; margin-top: .75rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}
.pdp-title::after, .cat-block-title::after { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: .8rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 1rem 1.75rem; font-size: 1.03rem; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--cyan); color: #00121a; border-color: var(--cyan);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #0bbcfd; border-color: #0bbcfd; }

.btn-accent {
  background: var(--orange); color: #2a1400; border-color: var(--orange);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover { background: #ff9838; border-color: #ff9838; }

.btn-outline { border-color: var(--line); color: var(--ink); background: var(--page); }
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan-deep); }

.btn-ghost { color: var(--muted); border-color: transparent; }
.btn-ghost:hover { color: var(--ink); }

.btn[disabled], .btn.is-disabled {
  opacity: .5; pointer-events: none;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--cyan-deep); font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid rgba(0, 119, 163, .3);
  padding-bottom: 2px;
  transition: gap .18s var(--ease), color .18s var(--ease);
}
.link-arrow:hover { gap: .8rem; color: var(--ink); }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 252, 254, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 20px -14px rgba(0, 45, 62, .5);
}

.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-mark { width: 34px; height: auto; }
.brand-name {
  font-family: var(--display);
  font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink);
}
.brand-name-accent { color: var(--cyan); }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .35rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .8rem;
  border-radius: 999px;
  font-size: .95rem; font-weight: 600;
  color: var(--muted);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--surface); }
.nav-link.is-current { color: var(--cyan-deep); background: var(--cyan-tint); }

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-call { white-space: nowrap; }
/* Only shown inside the mobile dropdown (see the max-width: 900px block). */
.nav-account { display: none; }

/* Site-wide product search: its own row under the top bar, on every page. */
.header-search-wrap { padding-bottom: .7rem; }
.header-search {
  display: flex; align-items: center; gap: .5rem;
  max-width: 520px;
  padding: .5rem .9rem;
  background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.header-search:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-tint);
}
.header-search .ico { flex: none; width: 18px; height: 18px; color: var(--muted-dim); }
.header-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-size: .92rem; color: var(--ink);
}
.header-search input::placeholder { color: var(--muted-dim); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: var(--page); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero */

.hero, .page-hero { position: relative; overflow: hidden; }

.hero-glow {
  position: absolute; inset: -30% -10% auto -10%;
  height: 660px;
  background:
    radial-gradient(46% 62% at 20% 42%, rgba(0, 173, 238, .30), transparent 68%),
    radial-gradient(40% 55% at 80% 28%, rgba(246, 136, 33, .26), transparent 70%),
    radial-gradient(50% 60% at 55% 0%, rgba(0, 173, 238, .14), transparent 75%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 3rem; align-items: center;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem);
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.2rem);
  line-height: .96;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-title::after {
  content: "";
  display: block;
  width: 96px; height: 5px; margin-top: 1.4rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.hero-lead {
  margin: 1.4rem 0 2rem;
  max-width: 34rem;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color: var(--muted);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--muted);
}
.trust-row li { display: inline-flex; align-items: center; gap: .5rem; }
.trust-row .ico { color: var(--cyan-deep); }

.hero-art { position: relative; min-height: 380px; }

.hero-card-main {
  position: absolute; inset: 12% 14% 12% 14%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #ffffff, var(--surface));
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.hero-card-main img { width: 58%; }

.hero-chip {
  position: absolute;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem .55rem .55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  animation: float 6s ease-in-out infinite;
}
.hero-chip img {
  width: 40px; height: 40px;
  object-fit: contain;
  background: var(--surface); border-radius: 50%;
  padding: 3px;
}
.hero-chip span {
  font-family: var(--display); font-size: 1.05rem; color: var(--cyan-deep);
}
.hero-chip-1 { top: 6%;  left: -4%;  animation-delay: 0s; }
.hero-chip-2 { bottom: 14%; right: -2%; animation-delay: 1.6s; }
.hero-chip-3 { bottom: -2%; left: 12%;  animation-delay: 3.1s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.page-hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 4.5rem) 2.5rem; }
.page-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.3rem + 4vw, 4rem);
  text-transform: uppercase; line-height: 1;
  max-width: 20ch; text-wrap: balance;
}
.page-lead {
  margin-top: 1.3rem; max-width: 46rem;
  font-size: 1.1rem; color: var(--muted);
}

.jump-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.jump-row a {
  display: inline-block;
  padding: .45rem 1rem;
  background: var(--page);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--muted);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.jump-row a:hover { border-color: var(--cyan); color: var(--cyan-deep); }

/* ---------------------------------------------------------------- sections */

.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section-sm { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section-alt { background: var(--surface); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.stats-band {
  background:
    linear-gradient(100deg, rgba(0, 173, 238, .16), rgba(246, 136, 33, .13) 55%,
                    rgba(0, 173, 238, .10)),
    var(--surface);
  border-block: 1px solid var(--line);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: 2.25rem;
}
.stat { text-align: center; }
.stat-value {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  color: var(--cyan-deep);
  line-height: 1;
}
.stat-label {
  display: block; margin-top: .5rem;
  font-size: .85rem; color: var(--muted);
}

.intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; align-items: start;
}
.intro-body { font-size: 1.12rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- categories */

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cat-tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 180px; padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.cat-tile:hover {
  transform: translateY(-4px); border-color: var(--cyan);
  box-shadow: var(--shadow);
}
.cat-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .16;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.cat-tile:hover .cat-img { opacity: .26; transform: scale(1.06); }
.cat-body {
  position: relative;
  background: linear-gradient(to top, rgba(255, 255, 255, .96) 45%, transparent);
  margin: -1rem; padding: 2.5rem 1rem 1rem;
}
.cat-name {
  display: block;
  font-family: var(--display); font-size: 1.15rem;
  text-transform: uppercase; color: var(--ink);
}
.cat-count { display: block; font-size: .82rem; color: var(--muted); }

.cat-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.cat-pills a {
  display: inline-block;
  padding: .35rem .85rem;
  background: var(--page);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; color: var(--muted);
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background-color .18s var(--ease);
}
.cat-pills a:hover {
  color: var(--cyan-deep); border-color: var(--cyan); background: var(--cyan-tint);
}

/* ---------------------------------------------------------------- products */

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.product-grid-4 { grid-template-columns: repeat(4, 1fr); }
.product-grid-5 { grid-template-columns: repeat(5, 1fr); }

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.product-card:hover {
  transform: translateY(-4px); border-color: var(--cyan);
  box-shadow: var(--shadow);
}

.product-media {
  display: block; aspect-ratio: 1 / 1;
  background: #fff;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.product-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.product-card:hover .product-media img { transform: scale(1.05); }
.product-media-empty {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: var(--muted-dim);
  background: var(--surface);
}

.product-body {
  display: flex; flex-direction: column; gap: .55rem;
  padding: .9rem 1rem 1rem;
  flex: 1;
}
.product-name {
  font-size: .92rem; font-weight: 600; line-height: 1.35;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.product-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: auto;
}
.product-price {
  font-family: var(--display); font-size: 1.3rem; color: var(--ink);
}
.product-go {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.product-card:hover .product-go { color: var(--cyan-deep); }

.product-variant-note {
  font-size: .76rem; color: var(--muted-dim);
}

/* Discounted prices: the pre-discount figure struck through, the live price
   picked out in the accent so a markdown reads at a glance. */
.price-was {
  color: var(--muted-dim); font-weight: 400;
  text-decoration: line-through;
  font-size: .82em; margin-right: .35em;
}
.product-price.is-discounted .price-now { color: var(--orange-deep); }

/* stock + option badges */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
}
.badge-in    { background: var(--ok-tint);     color: var(--ok); }
.badge-low   { background: var(--warn-tint);   color: var(--warn); }
.badge-warn  { background: var(--orange-tint); color: var(--orange-deep); }
.badge-out   { background: #eceff0;            color: #4f5c61; }
.badge-opts  { background: var(--cyan-tint);   color: var(--cyan-deep); }

.card-badge {
  position: absolute; top: .6rem; left: .6rem;
  z-index: 2;
}

/* ---------------------------------------------------------------- shop page */

.shop-toolbar {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
}
.shop-search {
  position: relative; flex: 1 1 320px;
  /* Without this a flex item keeps min-width:auto and won't shrink below the
     input's intrinsic width, so on a phone the search bar overflows the toolbar
     box. Same fix the header search input already uses. */
  min-width: 0;
}
.shop-search input {
  width: 100%;
  padding: .8rem 1rem .8rem 2.75rem;
  background: var(--page);
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .95rem; color: var(--ink);
}
.shop-search input::placeholder { color: var(--muted-dim); }
.shop-search .ico {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--muted-dim); pointer-events: none;
}
.shop-count { font-size: .9rem; color: var(--muted); white-space: nowrap; }

/* Shop-by-category chooser: a compact, scannable grid of every category, up top
   so a shopper can jump straight into one without scrolling the whole listing or
   opening the filter panel on mobile. */
.shop-cats { margin-bottom: 2.5rem; }
.shop-cats-title {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  width: fit-content;
  font-family: var(--display); font-size: 1rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink); margin-bottom: 1rem;
  list-style: none;                 /* drop the default disclosure marker */
}
.shop-cats-title::-webkit-details-marker { display: none; }
.shop-cats-title:hover { color: var(--cyan-deep); }
.shop-cats-title::after {           /* chevron: down when collapsed, up when open */
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s var(--ease);
}
details.shop-cats[open] > .shop-cats-title::after { transform: rotate(-135deg); }
.shopcat-grid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.shopcat {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .16s var(--ease), border-color .16s var(--ease),
              box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.shopcat:hover {
  transform: translateY(-2px); border-color: var(--cyan);
  box-shadow: var(--shadow-sm); background: var(--cyan-tint);
}
.shopcat-name {
  font-family: var(--display); font-size: .9rem; text-transform: uppercase;
  color: var(--ink); line-height: 1.15;
}
.shopcat-count {
  flex: none; font-size: .76rem; font-weight: 700; color: var(--muted-dim);
  background: var(--surface); border-radius: 999px; padding: .12rem .5rem;
}
.shopcat:hover .shopcat-count { color: var(--cyan-deep); }
@media (max-width: 480px) {
  .shopcat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
}

.shop-layout {
  display: grid; grid-template-columns: 250px 1fr;
  gap: 2.5rem; align-items: start;
}

.shop-side {
  position: sticky; top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: .5rem;
}
.shop-side-head {
  font-family: var(--display); font-size: 1rem;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .9rem; color: var(--ink);
}
.side-cat { margin-bottom: .35rem; }
.side-cat > a {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .45rem .7rem;
  border-radius: 10px;
  font-size: .92rem; font-weight: 600; color: var(--ink);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.side-cat > a:hover { background: var(--cyan-tint); color: var(--cyan-deep); }
.side-cat > a.is-current { background: var(--cyan); color: #00121a; }
.side-cat-count { color: var(--muted); font-weight: 500; font-size: .82rem; }
.side-cat > a.is-current .side-cat-count { color: rgba(0, 18, 26, .7); }

.side-subs { margin: .15rem 0 .6rem .7rem; padding-left: .6rem;
  border-left: 2px solid var(--line-soft); }
.side-subs a {
  display: block; padding: .3rem .5rem;
  font-size: .86rem; color: var(--muted);
  border-radius: 8px;
}
.side-subs a:hover { color: var(--cyan-deep); background: var(--cyan-tint); }

/* ---------------------------------------------------------------- filters */

.filters-toggle {
  display: none;
  width: 100%;
  align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1rem; margin-bottom: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .95rem; font-weight: 700; color: var(--ink);
  cursor: pointer;
}

.filters {
  padding: 1.15rem 1.15rem .5rem;
  margin-bottom: 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--cyan-tint);
}
.filters-title {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-size: 1rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.filters-title .ico { color: var(--cyan-deep); }
.filters-clear {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--cyan-deep); cursor: pointer; text-decoration: underline;
}
.filters-clear:hover { color: var(--ink); }
.filters-hint {
  font-size: .8rem; color: var(--muted-dim);
  margin: -.5rem 0 1.5rem; padding: 0 .25rem;
}

/* Collapsible filter groups: collapsed by default so the sidebar is a short
   stack of headings, each opening on click. Active filters still show as chips
   above the grid, and a group holding a checked box is tinted so it's findable
   while collapsed. */
.filter-group {
  border: 0; padding: 0; margin: 0;
  border-top: 1px solid var(--line-soft);
}
.filter-group:first-of-type { border-top: 0; }
.filter-legend {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; cursor: pointer;
  padding: .68rem .25rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  list-style: none;              /* drop the default disclosure marker */
}
.filter-legend::-webkit-details-marker { display: none; }
.filter-legend:hover { color: var(--ink); }
.filter-legend::after {          /* our own chevron: down when closed, up when open */
  content: ""; flex: none;
  width: 7px; height: 7px;
  margin-right: .2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s var(--ease);
}
details.filter-group[open] > .filter-legend::after { transform: rotate(-135deg); }
.filter-group:has(input:checked) > .filter-legend { color: var(--cyan-deep); }

.filter-list {
  display: grid; gap: .15rem;
  padding-bottom: .6rem;
  max-height: 15rem; overflow-y: auto;  /* long lists (color) stay bounded */
}
.filter-list-swatch { grid-template-columns: 1fr 1fr; gap: .15rem .5rem; }

.filter-option {
  display: flex; align-items: center; gap: .55rem;
  padding: .32rem .4rem;
  border-radius: 8px;
  font-size: .88rem; color: var(--body);
  cursor: pointer;
  transition: background-color .14s var(--ease);
}
.filter-option:hover { background: var(--cyan-tint); }
.filter-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.filter-box {
  flex: none;
  width: 16px; height: 16px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: var(--page);
  position: relative;
  transition: all .14s var(--ease);
}
.filter-option input:checked + .filter-box {
  background: var(--cyan); border-color: var(--cyan);
}
.filter-option input:checked + .filter-box::after {
  content: "";
  position: absolute; left: 4px; top: 0px;
  width: 4px; height: 9px;
  border: solid #00121a; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-option input:focus-visible + .filter-box {
  outline: 3px solid var(--cyan-deep); outline-offset: 2px;
}

.filter-swatch {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 22, 30, .22);
}
.filter-name {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-option input:checked ~ .filter-name { font-weight: 700; color: var(--ink); }
.filter-count { color: var(--muted-dim); font-size: .78rem; }

.active-filters {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 1.5rem;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .5rem .32rem .85rem;
  background: var(--cyan-tint);
  border: 1px solid var(--cyan);
  border-radius: 999px;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--cyan-deep);
  cursor: pointer;
}
.filter-chip:hover { background: var(--cyan); color: #00121a; }
.filter-chip-x { font-size: 1.05rem; line-height: 1; }

/* subcategory group inside a category */
.subcat-block { margin-bottom: 3rem; scroll-margin-top: 96px; }
.subcat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .7rem; margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--line);
}
.subcat-title {
  font-family: var(--display); font-size: 1.35rem;
  text-transform: uppercase; color: var(--ink);
}
.subcat-count { font-size: .85rem; color: var(--muted); }

.subcat-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.subcat-chips a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem;
  background: var(--page);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--body);
  transition: all .16s var(--ease);
}
.subcat-chips a:hover {
  border-color: var(--cyan); color: var(--cyan-deep); background: var(--cyan-tint);
}
.subcat-chips .chip-count { color: var(--muted-dim); font-weight: 500; }
.subcat-chips a.is-active {
  background: var(--cyan); border-color: var(--cyan); color: #00121a;
}
.subcat-chips a.is-active .chip-count { color: rgba(0, 18, 26, .7); }
.side-subs a.is-active {
  background: var(--cyan-tint); color: var(--cyan-deep); font-weight: 700;
}

.cat-block { margin-bottom: 3.5rem; scroll-margin-top: 96px; }
.cat-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.cat-block-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  text-transform: uppercase; color: var(--ink);
}

.no-results {
  padding: 3rem 1rem; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
}

/* ---------------------------------------------------------------- cart */

.cart-link {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: var(--ink);
  transition: background-color .16s var(--ease);
}
.cart-link:hover { background: var(--cyan-tint); color: var(--cyan-deep); }
.cart-badge {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--orange); color: #2a1400;
  border-radius: 999px;
  font-size: .68rem; font-weight: 800; line-height: 1;
}

.cart-layout {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 2.5rem; align-items: start;
}

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left; padding: 0 .75rem .75rem 0;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--line);
}
.cart-table td {
  padding: 1rem .75rem 1rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.cart-item { display: flex; align-items: center; gap: .9rem; }
.cart-item img {
  width: 64px; height: 64px; object-fit: contain;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; flex: none;
}
.cart-item-name {
  display: block; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.cart-item-name:hover { color: var(--cyan-deep); }
.cart-item-opts { display: block; font-size: .82rem; color: var(--muted); }
.cart-line-total { font-family: var(--display); font-size: 1.1rem; color: var(--ink); }

.cart-qty {
  width: 68px; padding: .45rem .5rem;
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; text-align: center; color: var(--ink); background: var(--page);
}
.cart-remove {
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  font-size: 1.15rem; line-height: 1; color: var(--muted);
  cursor: pointer;
  transition: all .16s var(--ease);
}
.cart-remove:hover { border-color: #c0392b; color: #c0392b; background: #fdeeec; }

.cart-summary {
  position: sticky; top: 96px;
  padding: 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cart-summary .subcat-title { margin-bottom: 1rem; }
.cart-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .6rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart-row-muted { color: var(--muted); font-size: .9rem; }
.cart-total { font-family: var(--display); font-size: 1.6rem; color: var(--ink); }
.cart-note {
  display: flex; gap: .4rem; align-items: flex-start;
  margin: 1rem 0 1.25rem;
  font-size: .8rem; color: var(--muted-dim);
}
.cart-summary .btn { margin-bottom: .6rem; }

/* quantity picker on the product page */
.qty-picker {
  display: inline-flex; align-items: center;
  border: 2px solid var(--line); border-radius: 999px;
  overflow: hidden; background: var(--page);
}
.qty-picker input {
  width: 52px; padding: .65rem 0;
  border: 0; background: transparent;
  font: inherit; font-weight: 700; text-align: center; color: var(--ink);
  -moz-appearance: textfield;
}
.qty-picker input::-webkit-outer-spin-button,
.qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step {
  width: 38px; height: 44px;
  background: none; border: 0; cursor: pointer;
  font-size: 1.1rem; color: var(--ink);
}
.qty-step:hover { background: var(--cyan-tint); color: var(--cyan-deep); }

.pdp-added {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: 2rem;
  font-size: .9rem; font-weight: 600; color: var(--ok);
}
.pdp-added .ico { color: var(--ok); }
.pdp-added a { color: var(--cyan-deep); text-decoration: underline; }

/* ---------------------------------------------------------------- checkout */

.checkout-layout {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 2.5rem; align-items: start;
}

.co-group { border: 0; padding: 0; margin: 0 0 2rem; }
.co-legend {
  padding: 0; margin-bottom: 1rem;
  font-family: var(--display); font-size: 1.2rem;
  text-transform: uppercase; color: var(--ink);
}

.co-field { margin-bottom: 1.1rem; }
.co-field label {
  display: block; margin-bottom: .35rem;
  font-size: .9rem; font-weight: 600; color: var(--ink);
}
.req { color: var(--orange-deep); }
.co-optional {
  font-weight: 500; font-size: .8rem; color: var(--muted-dim);
  text-transform: none;
}
.co-field input, .co-field textarea {
  width: 100%;
  padding: .75rem .9rem;
  background: var(--page);
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; color: var(--ink);
}
.co-field textarea { resize: vertical; }
.co-field input:focus, .co-field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-tint);
}
.co-field input.is-invalid, .co-field textarea.is-invalid {
  border-color: #c0392b; background: #fdf6f5;
}
.co-hint { margin: .35rem 0 0; font-size: .8rem; color: var(--muted-dim); }
.co-error { margin: .35rem 0 0; font-size: .82rem; font-weight: 600; color: #c0392b; }
.co-error:empty { display: none; }

.co-choices { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.co-choice { position: relative; display: block; cursor: pointer; }
.co-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-choice-body {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  padding: .9rem 1.1rem;
  background: var(--surface-2);
  border: 2px solid var(--line); border-radius: var(--radius);
  transition: all .16s var(--ease);
}
.co-choice input:checked + .co-choice-body {
  border-color: var(--cyan); background: var(--cyan-tint);
}
.co-choice input:focus-visible + .co-choice-body {
  outline: 3px solid var(--cyan-deep); outline-offset: 2px;
}
.co-choice-label { font-weight: 700; color: var(--ink); }
.co-choice-note { grid-column: 1; font-size: .85rem; color: var(--muted); }
.co-choice-fee {
  grid-row: 1 / 3; grid-column: 2; align-self: center;
  font-family: var(--display); font-size: 1.1rem; color: var(--ink);
}

.checkout-summary {
  position: sticky; top: 96px;
  padding: 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.co-lines { display: grid; gap: .5rem; margin-bottom: 1rem; }
.co-lines li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .88rem; color: var(--body);
}
.co-total-row { border-bottom: 0; padding-top: .9rem; }
.co-consent { margin: 1rem 0; font-size: .78rem; color: var(--muted-dim); }
.checkout-summary .btn { margin-bottom: .6rem; }
.co-form-error {
  margin: .5rem 0 1rem; padding: .75rem .9rem;
  background: #fdeeec; border: 1px solid #f0c2bc; border-radius: 12px;
  font-size: .85rem; font-weight: 600; color: #96271a;
}

.order-done {
  max-width: 560px; margin: 0 auto; text-align: center;
  padding: 3rem 1.5rem;
}
.order-tick {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--ok-tint); color: var(--ok);
}
.order-done .section-title::after { margin-inline: auto; }
.order-ref {
  margin: 1.5rem 0; padding: 1rem;
  background: var(--surface); border: 1px dashed var(--line); border-radius: 12px;
  font-size: 1.05rem;
}
.order-ref strong { font-family: var(--display); font-size: 1.4rem; color: var(--ink); }
.order-done .cta-actions { justify-content: center; }

/* ---------------------------------------------------------------- product page */

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .85rem; color: var(--muted);
  padding-block: 1.25rem;
}
.breadcrumb a:hover { color: var(--cyan-deep); }
.breadcrumb .sep { color: var(--muted-dim); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.pdp {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: start;
  padding-bottom: 3rem;
}

.pdp-gallery { position: sticky; top: 96px; }
.pdp-main-img {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  overflow: hidden;
}
.pdp-main-img img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.pdp-thumb {
  width: 68px; height: 68px; padding: 6px;
  background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb.is-active { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-tint); }

.pdp-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  text-transform: uppercase; line-height: 1.02;
  margin-bottom: .75rem;
}
.pdp-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.pdp-cats a {
  font-size: .78rem; font-weight: 600;
  padding: .2rem .6rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted);
}
.pdp-cats a:hover { color: var(--cyan-deep); border-color: var(--cyan); }

.pdp-price-row {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  padding: 1.1rem 0;
  border-block: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.pdp-price {
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  color: var(--ink); line-height: 1;
}
.pdp-price.is-discounted { color: var(--orange-deep); }
.pdp-price-orig {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
  color: var(--muted-dim); line-height: 1;
  text-decoration: line-through;
}
.pdp-price-note { font-size: .85rem; color: var(--muted-dim); }

.pdp-desc { color: var(--body); margin-bottom: 1.5rem; }

/* variant selection */
.variant-group { margin-bottom: 1.5rem; }
.variant-label {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: .7rem;
}
.variant-chosen { color: var(--ink); letter-spacing: 0; text-transform: none;
  font-size: .95rem; font-weight: 600; }

.variant-options { display: flex; flex-wrap: wrap; gap: .55rem; }
.variant-option { position: relative; }
.variant-option input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.variant-option > span {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.05rem;
  background: var(--page);
  border: 2px solid var(--line); border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--body);
  transition: all .16s var(--ease);
}
/* The real shade of a color option, shown next to its name. */
.variant-swatch {
  flex: none;
  width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

/* Color options lead with the shade; the name is a small caption below it. */
.variant-option-color > span {
  flex-direction: column;
  gap: .45rem;
  padding: .5rem .55rem;
  border-radius: 14px;
  min-width: 66px;
  font-size: .72rem; font-weight: 600; color: var(--muted);
  line-height: 1.15; text-align: center;
}
.variant-option-color .variant-swatch {
  width: 48px; height: 48px; border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.variant-option-color input:checked + span { color: var(--cyan-deep); }
.variant-option-color input:checked + span .variant-swatch {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--cyan);
}
.variant-option input:hover + span { border-color: var(--cyan); }
.variant-option input:focus-visible + span {
  outline: 3px solid var(--cyan-deep); outline-offset: 2px;
}
.variant-option input:checked + span {
  background: var(--cyan-tint); border-color: var(--cyan); color: var(--cyan-deep);
}
.variant-option input:disabled + span {
  opacity: .45; text-decoration: line-through; cursor: not-allowed;
}

.pdp-stock { margin-bottom: 1.5rem; }

.pdp-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }
.pdp-handoff {
  font-size: .84rem; color: var(--muted-dim);
  display: flex; align-items: flex-start; gap: .45rem;
  margin-bottom: 2rem;
}

.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td {
  text-align: left; padding: .6rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec-table th { color: var(--muted); font-weight: 600; width: 42%; }
.spec-table td { color: var(--ink); }

/* ---------------------------------------------------------------- services */

.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.service-card {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px); border-color: var(--cyan); box-shadow: var(--shadow);
}

.service-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--cyan-tint);
  border: 1px solid rgba(0, 173, 238, .35);
  color: var(--cyan-deep);
}
.service-icon-lg { width: 62px; height: 62px; margin-bottom: 1.4rem; }

.service-title {
  font-family: var(--display); font-size: 1.2rem;
  text-transform: uppercase; color: var(--ink);
}
.service-blurb { font-size: .92rem; color: var(--muted); flex: 1; }
.service-go {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 600; color: var(--cyan-deep);
}

.service-detail {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 3rem; align-items: center;
}
.service-detail.is-flipped .service-detail-copy { order: 2; }
.service-detail-blurb {
  margin: 1.2rem 0 1.6rem; max-width: 42ch;
  font-size: 1.1rem; color: var(--muted);
}

.check-list { display: grid; gap: .7rem; margin-bottom: 2rem; }
.check-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: 1rem; }
.check-list .ico { color: var(--cyan-deep); margin-top: .35rem; }
.check-list-2 { grid-template-columns: repeat(2, 1fr); margin: 0; }

.service-detail-art { display: grid; place-items: center; }
.art-panel {
  position: relative;
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.art-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* The service's line-icon on a small frosted badge, tying the photo back to the
   brand and matching the icon shown next to the heading. */
.art-badge {
  position: absolute; top: .9rem; left: .9rem;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  color: var(--cyan-deep);
}

/* ---------------------------------------------------------------- about */

.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.about-card {
  padding: 1.9rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.about-index {
  display: block; margin-bottom: .8rem;
  font-family: var(--display); font-size: 1.6rem; color: var(--orange-deep);
}
.about-title {
  font-family: var(--display); font-size: 1.35rem;
  text-transform: uppercase; margin-bottom: .8rem;
}
.about-card p { color: var(--muted); margin: 0; }

.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.social-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.social-card:hover {
  transform: translateY(-4px); border-color: var(--cyan); box-shadow: var(--shadow);
}
.social-card > .ico { color: var(--cyan-deep); }
.social-name { font-family: var(--display); font-size: 1.2rem;
  text-transform: uppercase; color: var(--ink); }
.social-note { font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------------- contact */

.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.contact-card {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.7rem;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.contact-card:hover {
  transform: translateY(-4px); border-color: var(--cyan); box-shadow: var(--shadow);
}
.contact-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: .6rem;
  border-radius: 14px;
  background: var(--cyan-tint);
  border: 1px solid rgba(0, 173, 238, .35);
  color: var(--cyan-deep);
}
.contact-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.contact-value { font-size: 1.05rem; font-weight: 600; color: var(--ink);
  word-break: break-word; }
.contact-note { font-size: .85rem; color: var(--muted-dim); }

.contact-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-block p { color: var(--muted); max-width: 40ch; }
.contact-block .section-title { margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.contact-address { font-size: 1.05rem; color: var(--ink); }

.contact-map { margin: 1.2rem 0 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  max-width: 40rem; }
.contact-map iframe { display: block; width: 100%; height: 320px; border: 0; }
.contact-directions { margin-bottom: .5rem; }

.hours-list { display: grid; gap: .5rem; margin: 1.2rem 0; max-width: 22rem; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--muted);
}

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step {
  padding: 1.7rem;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.step-num {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--orange); color: #2a1400;
  font-family: var(--display); font-size: 1.15rem;
}
.step-title { font-family: var(--display); font-size: 1.15rem;
  text-transform: uppercase; margin-bottom: .5rem; }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------------------------------------------------------------- cta band */

.cta-band {
  background:
    radial-gradient(60% 120% at 15% 20%, rgba(0, 173, 238, .16), transparent 70%),
    radial-gradient(50% 110% at 85% 80%, rgba(246, 136, 33, .14), transparent 70%),
    var(--surface);
  border-top: 1px solid var(--line);
}
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.cta-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  text-transform: uppercase;
}
.cta-lead { margin: .9rem 0 0; max-width: 44ch; color: var(--muted); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--ink); color: #b9d3dd; }
.site-footer h2, .site-footer .brand-name { color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}
.footer-tagline { margin: 1rem 0 1.5rem; max-width: 30ch;
  color: #9dbecb; font-size: .95rem; }

.social { display: flex; gap: .6rem; }
.social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px;
  color: #b9d3dd;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.social a:hover { color: var(--cyan); border-color: var(--cyan); }
.social-lg a { width: 46px; height: 46px; }

/* Contact page shows the social row on a light band. */
.contact-block .social a { border-color: var(--line); color: var(--muted); }
.contact-block .social a:hover { color: var(--cyan-deep); border-color: var(--cyan); }

.footer-head {
  font-family: var(--display); font-size: 1rem;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 1rem;
}
.footer-list { display: grid; gap: .55rem; font-size: .92rem; }
.footer-list a, .footer-list li { color: #9dbecb; }
.footer-list a:hover { color: var(--cyan); }

.footer-bottom {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem; color: #8aacb9;
}
.footer-bottom p { margin: 0; }
.footer-note { max-width: 52ch; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .cat-grid, .product-grid, .product-grid-4, .product-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-side { position: static; max-height: none; }
  .side-subs { display: none; }
  .shop-side .side-cat { display: inline-block; margin-right: .4rem; }
  .shop-side-list { display: flex; flex-wrap: wrap; gap: .4rem; }
  .side-cat > a { border: 1px solid var(--line); border-radius: 999px; }

  /* Filters collapse behind a button rather than pushing the grid down. */
  .filters-toggle { display: flex; }
  .shop-side-panels { display: none; }
  .shop-side-panels.is-open { display: block; }
  .filter-list { grid-template-columns: 1fr 1fr; }
  .filter-list-swatch { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .header-call span { display: none; }

  .nav {
    /* Absolute to the sticky header so the dropdown sits below it whatever its
       height - the header is now taller because of the search row. */
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0;
    background: var(--page);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem 1.5rem;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: .25rem; }
  .nav-link { padding: .85rem 1rem; font-size: 1.05rem; border-radius: 12px; }
  .nav-toggle { display: flex; }
  /* Sign in / My account inside the dropdown - the header button that carries it
     is hidden this narrow. Set off from the page links with a divider. */
  .nav-account { display: block; margin-top: .5rem; padding-top: 1rem;
    border-top: 1px solid var(--line); font-weight: 600; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .intro-grid, .contact-lower, .service-detail { grid-template-columns: 1fr; gap: 2rem; }
  .service-detail.is-flipped .service-detail-copy { order: 0; }
  /* The art is a real photo now, so show it on mobile - leading each service so
     it reads image-first, heading and detail below. */
  .service-detail-art { order: -1; margin-bottom: .25rem; }
  .about-grid, .steps-grid, .social-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .pdp { grid-template-columns: 1fr; gap: 2rem; }
  .pdp-gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; gap: 2rem; }
  .cart-summary { position: static; }
  /* Checkout is the same form + summary split as the cart and must collapse the
     same way - its summary column was a fixed 360px, which overflowed (and, with
     body overflow-x hidden, got clipped) on phones. */
  .checkout-layout { grid-template-columns: 1fr; gap: 2rem; }
  .checkout-summary { position: static; }
}

@media (max-width: 560px) {
  /* The cart table stops being a table and becomes stacked rows. */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr {
    position: relative;
    padding: 1rem 0; border-bottom: 1px solid var(--line);
  }
  .cart-table td { border: 0; padding: .15rem 0; }
  .cart-table td:first-child { padding-bottom: .6rem; }
  .cart-remove { position: absolute; top: 1rem; right: 0; }
  .cart-qty { width: 84px; }
}

@media (max-width: 640px) {
  .cat-grid, .product-grid, .product-grid-4, .product-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .check-list-2 { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .hero-ctas, .cta-actions, .pdp-actions { width: 100%; }
  .nav-toggle { width: auto; }
  .shop-toolbar { flex-direction: column; align-items: stretch; }
  /* In this column layout the search field's `flex: 1 1 320px` basis becomes a
     320px *height*, blowing the toolbar into a tall empty box (with the absolute
     search icon stranded in its middle). Size it to its content instead. */
  .shop-search { flex: 0 0 auto; }
  /* Let the "N products · N categories · N subcategories" line wrap instead of
     running past the edge of the toolbar box on a narrow screen. */
  .shop-count { white-space: normal; }
}

@media (max-width: 420px) {
  .cat-grid { grid-template-columns: 1fr; }
  .brand-name { font-size: 1.25rem; }
}

/* ---- Sign-in & account ------------------------------------------------- */
.signin-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line); }
.signin-tab { appearance: none; background: none; border: 0; cursor: pointer;
  font: 600 1rem/1 var(--sans); color: var(--muted); padding: .75rem .25rem;
  margin-bottom: -1px; border-bottom: 2px solid transparent; }
.signin-tab:hover { color: var(--ink); }
.signin-tab.is-active { color: var(--ink); border-bottom-color: var(--cyan); }
.signin-panel .co-field { margin-bottom: 1rem; }
.signin-panel .btn { margin-top: .5rem; }
.code-box { font-size: 1.5rem; letter-spacing: .4em; text-align: center;
  font-family: var(--display); }
#signin-code-step { max-width: 420px; }
#signin-code-step .cta-actions { margin-top: 1rem; }

.account-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem;
  align-items: start; }
.account-side { position: sticky; top: 90px; }
.acct-details { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.acct-field { display: grid; gap: .1rem; }
.acct-field-label { font-size: .8rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }
.acct-field-value { color: var(--ink); }

.orders-list { display: grid; gap: 1rem; }
.order-card { border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); }
.order-card-head { display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap; margin-bottom: .75rem; }
.order-card-ref { font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.order-card-date { color: var(--muted); font-size: .9rem; }
.order-card-head .badge { margin-left: auto; }
.order-card-lines { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line-soft); }
.order-card-lines li { display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line-soft); color: var(--body); }
.order-card-total { display: flex; justify-content: space-between;
  font-weight: 700; color: var(--ink); padding-top: .75rem; }

@media (max-width: 760px) {
  .account-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .account-side { position: static; }
  .header-account { display: none; }
}

/* ---- Address book (account page) --------------------------------------- */
.acct-block { margin-bottom: 2.5rem; }
.acct-block-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.acct-block-head .subcat-title { margin: 0; }

.addr-list { display: grid; gap: 1rem; }
.addr-card { border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 1rem 1.25rem; box-shadow: var(--shadow-sm); }
.addr-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.addr-card-label { font-weight: 700; color: var(--ink); }
.addr-card-text { color: var(--body); margin: 0; }
.addr-card-phone { color: var(--muted); font-size: .9rem; margin: .25rem 0 0; }
.addr-card-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.addr-del:hover { color: #b42318; }

.addr-form { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cyan-tint); padding: 1.25rem 1.5rem; margin-top: 1rem; }
.addr-form .co-field { margin-bottom: 1rem; }

.signin-firsttime { background: var(--cyan-tint); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.signin-firsttime .co-hint { margin-top: 0; }
.signin-firsttime .co-field { margin-bottom: 0; }