/* ---------------------------------------------------------------------------
   Outsource China — catalogue effects

   Product grids (home, category, search, related) and the product page's order
   planner. Same instrument language as ai.css — dark plate, cyan for "working",
   green for "done" — so a buyer moving from the homepage console to a category
   to a product never feels they changed sites.

   Rules this file keeps:
   - Cards are visible without JavaScript. The arrival animation only hides a
     card once catalog-fx.js has marked the grid `fx-armed`, so a blocked script
     or a crawler sees the plain grid.
   - Only transform, opacity and filter animate. No layout property moves, so a
     category page with 24 cards does not repaint its way down the screen.
   - Reduced motion stops all of it. The planner and the match box still work.
--------------------------------------------------------------------------- */

.gscan,
.plan {
  --fx-ac:      #5ad7ef;
  --fx-ac-soft: rgba(90, 215, 239, .16);
  --fx-ac-line: rgba(90, 215, 239, .42);
  --fx-ok:      #56d99a;
  --fx-warn:    #f5b454;
  --fx-plate:   #0c141f;
  --fx-plate-2: #121d2b;
  --fx-edge:    rgba(255, 255, 255, .10);
  --fx-edge-2:  rgba(255, 255, 255, .18);
  --fx-ink:     #eef3f8;
  --fx-dim:     #93a4b8;
}

/* === Product grid ======================================================== */

.grid-products .pcard { position: relative; isolation: isolate; }

/* A soft light that follows the pointer across the card, and a rim that lights
   up nearest the pointer. Both read --mx/--my, set by catalog-fx.js. */
.grid-products .pcard::before,
.grid-products .pcard::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
  z-index: 2;
}
.grid-products .pcard::before {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 30%),
              rgba(90, 215, 239, .13), transparent 62%);
}
.grid-products .pcard::after {
  padding: 1.5px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 30%),
              var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@media (hover: hover) {
  .grid-products .pcard:hover { transform: translateY(-5px); }
  .grid-products .pcard:hover::before,
  .grid-products .pcard:hover::after { opacity: 1; }
  .grid-products .pcard:hover .pcard__media img { transform: scale(1.07); }
}

.grid-products .pcard__media img { transition: transform .55s cubic-bezier(.2, .7, .3, 1); }

/* --- The facts, sliding up over the photo on hover ------------------------ */

.pcard__reveal {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 4px;
  pointer-events: none;
}
.pcard__chip {
  font-size: 11px; line-height: 1.3; white-space: nowrap;
  color: #eef3f8;
  background: rgba(12, 20, 31, .84);
  border: 1px solid rgba(90, 215, 239, .34);
  border-radius: 999px; padding: 3px 8px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(14px);
  transition: opacity .22s ease, transform .32s cubic-bezier(.2, .7, .3, 1);
}
.pcard__chip b { color: #9ae8f7; font-weight: 700; }
.pcard__chip:nth-child(2) { transition-delay: .04s; }
.pcard__chip:nth-child(3) { transition-delay: .08s; }
.pcard__chip:nth-child(4) { transition-delay: .12s; }

@media (hover: hover) {
  .grid-products .pcard:hover .pcard__chip,
  .grid-products .pcard:focus-within .pcard__chip { opacity: 1; transform: none; }
}

/* --- Arrival ---------------------------------------------------------------
   Transitions, not animations: an animation that fills forwards keeps winning
   over the hover transform, and the card would stop lifting. `fx-done` hands
   the card back to its ordinary transitions once it has landed. */

/* Before the script arms the grid, cards are held back so they do not paint,
   vanish and then fly in. If the script never arrives they appear by themselves
   after a moment — a failed download must not leave an empty catalogue. */
.js .grid-products:not(.fx-armed):not(.fx-off) .pcard {
  opacity: 0;
  animation: fx-failsafe .01s 2.5s forwards;
}
@keyframes fx-failsafe { to { opacity: 1; } }

.fx-armed .pcard:not(.fx-done) {
  opacity: 0;
  transform: translateY(22px) scale(.97);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.fx-armed .pcard.fx-in:not(.fx-done) { opacity: 1; transform: none; }

/* A sheen that crosses the photo once as the card lands. */
.grid-products .pcard__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 48%, transparent 66%);
  transform: translateX(-130%);
}
.fx-armed .pcard.fx-in .pcard__media::after {
  animation: fx-sheen 1s cubic-bezier(.3, .6, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms + .3s);
}

/* --- Matching --------------------------------------------------------------
   The buyer typed something: matches glow, everything else steps back. */

.pcard__match {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #06222a; background: #5ad7ef;
  border-radius: 999px; padding: 3px 9px;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
  box-shadow: 0 4px 14px rgba(90, 215, 239, .45);
}

.grid-products.is-matching .pcard {
  transition: opacity .35s ease, filter .35s ease, transform .35s ease, box-shadow .35s ease;
}
.grid-products.is-matching .pcard:not(.is-match) {
  opacity: .28; filter: grayscale(.85);
}
.grid-products .pcard.is-match {
  box-shadow: 0 0 0 2px var(--accent), 0 14px 34px rgba(10, 110, 128, .28);
  animation: fx-ring 1.5s ease-out 2;
}
.grid-products .pcard.is-match .pcard__match { opacity: 1; transform: none; }

/* === Scan band =========================================================== */

.gscan {
  position: relative; overflow: hidden;
  margin: 0 0 14px; padding: 14px 16px 14px;
  border-radius: var(--radius-lg);
  color: var(--fx-ink);
  background:
    radial-gradient(520px 160px at 92% -20%, rgba(90, 215, 239, .18), transparent 70%),
    linear-gradient(150deg, var(--nav) 0%, var(--nav-2) 70%, #1f3a56 100%);
  border: 1px solid var(--fx-edge);
}

.gscan__mesh {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(90, 215, 239, .22) 1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
  opacity: .7;
}
.gscan__sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(90, 215, 239, .2), transparent);
  animation: fx-sweep 3.8s ease-in-out infinite;
}

.gscan__top {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
.gscan__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.gscan__pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--fx-ac); flex: none;
  animation: fx-beacon 2.2s ease-out infinite;
}
.gscan__count {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: #9ae8f7; font-variant-numeric: tabular-nums;
}
.gscan__sub {
  font-size: 11.5px; color: var(--fx-dim);
  border: 1px solid var(--fx-edge-2); border-radius: 999px; padding: 2px 8px;
}
.gscan__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gscan__chip {
  font-size: 11.5px; font-weight: 600; color: #cfeef6;
  background: var(--fx-ac-soft); border: 1px solid var(--fx-ac-line);
  border-radius: 999px; padding: 3px 10px;
  animation: fx-rise .4s cubic-bezier(.2, .7, .3, 1) both;
}

.gscan__ask {
  position: relative; margin-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--fx-edge-2); border-radius: 12px;
  padding: 3px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gscan__ask:focus-within { border-color: var(--fx-ac); box-shadow: 0 0 0 4px rgba(90, 215, 239, .16); }
.gscan__spark { color: var(--fx-ac); font-size: 15px; animation: fx-twinkle 2.6s ease-in-out infinite; }
.gscan__ask input[type="search"] {
  flex: 1 1 220px; min-width: 0;
  background: transparent; border: 0; box-shadow: none; outline: none;
  color: var(--fx-ink); font: inherit; font-size: 14px; padding: 9px 0;
}
.gscan__ask input[type="search"]::placeholder { color: #7d8fa4; }
.gscan__ask input[type="search"]:focus-visible { box-shadow: none; }
.gscan__result { font-size: 12.5px; color: var(--fx-dim); white-space: nowrap; }
.gscan__result b { color: #9ae8f7; }
.gscan__result a { color: #9ae8f7; font-weight: 600; }

/* A thin line that runs along the bottom of the box while a search is out. */
.gscan__ask.is-busy::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fx-ac), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: fx-busy .9s linear infinite;
}

/* === Order planner ======================================================= */

.plan {
  position: relative; overflow: hidden;
  margin: 8px 0 26px; padding: 30px;
  border-radius: var(--radius-lg);
  color: var(--fx-ink);
  background: linear-gradient(150deg, var(--nav) 0%, var(--nav-2) 58%, #22405f 100%);
}
.plan__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 300px at 12% -10%, rgba(90, 215, 239, .16), transparent 65%),
    radial-gradient(560px 300px at 100% 110%, rgba(242, 160, 50, .13), transparent 62%);
}

.plan__head { position: relative; margin-bottom: 20px; }
.plan__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #cfe9f2; background: var(--fx-ac-soft); border: 1px solid var(--fx-ac-line);
  border-radius: 999px; padding: 5px 12px;
}
.plan__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-ac); animation: fx-beacon 2.2s ease-out infinite; }
.plan__head h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 8px; }
.plan__head h2 em { font-style: normal; color: #9ae8f7; }
.plan__head p { margin: 0; color: var(--nav-text-muted); max-width: 62ch; font-size: 14.5px; }

.plan__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px;
}
.plan__calc,
.plan__time {
  background: rgba(12, 20, 31, .55);
  border: 1px solid var(--fx-edge);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-width: 0;
}

/* --- Quantity --- */

.plan__qty label { color: var(--fx-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.plan__qtyrow { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 10px; }
.plan__qtyrow input[type="number"] {
  width: 8.5ch; min-width: 0;
  background: transparent; border: 0; border-bottom: 2px solid var(--fx-edge-2); border-radius: 0;
  color: #fff; font: inherit; font-size: 38px; font-weight: 800; letter-spacing: -.03em;
  padding: 0 0 2px; font-variant-numeric: tabular-nums; box-shadow: none;
  -moz-appearance: textfield;
}
.plan__qtyrow input[type="number"]::-webkit-inner-spin-button,
.plan__qtyrow input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.plan__qtyrow input[type="number"]:focus-visible { outline: none; border-bottom-color: var(--fx-ac); box-shadow: none; }
.plan__qtyrow span { color: var(--fx-dim); font-size: 16px; font-weight: 600; }

/* The slider paints its own filled track from --p, set by catalog-fx.js. */
.plan input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 999px; margin: 4px 0 6px;
  background: linear-gradient(90deg, var(--fx-ac) 0%, var(--brand) calc(var(--p, 0) * 1%),
              rgba(255, 255, 255, .12) calc(var(--p, 0) * 1%));
  border: 0; padding: 0; cursor: pointer;
}
.plan input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 4px solid var(--fx-ac);
  box-shadow: 0 0 0 6px rgba(90, 215, 239, .18), 0 4px 12px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
.plan input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 4px solid var(--fx-ac);
  box-shadow: 0 0 0 6px rgba(90, 215, 239, .18);
}
.plan input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.plan input[type="range"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(90, 215, 239, .35); }

.plan__scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fx-dim); }
.plan__moq { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; }
.plan__moq.is-ok  { color: var(--fx-ok); }
.plan__moq.is-low { color: var(--fx-warn); }

/* --- Readouts --- */

.plan__reads {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 18px 0 16px;
}
.plan__read {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-edge);
  border-radius: 12px; padding: 11px 12px;
}
.plan__read b {
  display: block; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: #fff;
}
.plan__read span { font-size: 11.5px; color: var(--fx-dim); }
.plan__read.is-tick b { animation: fx-tick .35s ease-out; }

/* --- Containers --- */

.plan__boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cbox { min-width: 0; }
.cbox__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: 12.5px; }
.cbox__pct { font-family: var(--mono); font-size: 11.5px; color: #9ae8f7; font-variant-numeric: tabular-nums; }
.cbox small { display: block; margin-top: 5px; font-size: 10.5px; color: var(--fx-dim); }

.cbox__body {
  position: relative; height: 62px; overflow: hidden;
  border-radius: 4px;
  background: #0a121c;
  border: 2px solid #3b4d63;
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Stacked cartons: a grid of blocks in a gradient, uncovered from the left as the
   order grows. scaleX, not width, so it never lays anything out. */
.cbox__fill {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
  transition: transform .75s cubic-bezier(.2, .7, .3, 1), filter .3s ease;
  background:
    repeating-linear-gradient(90deg, rgba(12, 20, 31, .55) 0 1.5px, transparent 1.5px 13px),
    repeating-linear-gradient(0deg,  rgba(12, 20, 31, .55) 0 1.5px, transparent 1.5px 13px),
    linear-gradient(90deg, #2bb3cf 0%, #5ad7ef 55%, #f2a032 100%);
}
/* The corrugated steel over the top. */
.cbox__ribs {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 9px);
}
.cbox__over {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  opacity: 0; transform: scale(.6);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.cbox.is-over .cbox__fill { filter: saturate(.7) brightness(.8); }
.cbox.is-over .cbox__over { opacity: 1; transform: none; }
.cbox.is-best .cbox__body {
  border-color: var(--fx-ac);
  box-shadow: 0 0 0 3px rgba(90, 215, 239, .2), 0 0 24px rgba(90, 215, 239, .25);
}
.cbox.is-best .cbox__top strong::after {
  content: "best fit"; margin-left: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #06222a; background: var(--fx-ac); border-radius: 999px; padding: 1px 6px;
  vertical-align: 2px;
}

.plan__verdict {
  margin-top: 14px; padding: 11px 14px;
  border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  background: var(--fx-ac-soft); border: 1px solid var(--fx-ac-line); color: #d9f5fb;
}
.plan__verdict b { color: #fff; }
.plan__verdict.is-fresh { animation: fx-rise .35s cubic-bezier(.2, .7, .3, 1); }

.plan__nodata { margin: 16px 0 0; color: var(--fx-dim); font-size: 13.5px; }
.plan__fine { margin: 12px 0 0; font-size: 11.5px; color: #7d8fa4; }

/* --- Timeline --- */

.plan__time h3 { font-size: 15px; margin: 0 0 12px; }

.tline { position: relative; list-style: none; margin: 0; padding: 0; }
.tline::before,
.tline::after {
  content: ""; position: absolute; left: 11px; top: 14px; bottom: 26px; width: 2px;
  border-radius: 2px;
}
.tline::before { background: rgba(255, 255, 255, .12); }
.tline::after {
  background: linear-gradient(180deg, var(--fx-ac), var(--fx-ok));
  transform-origin: top; transform: scaleY(0);
  transition: transform 2.6s cubic-bezier(.4, .1, .3, 1);
}
.tline.is-run::after { transform: scaleY(1); }

.tline__step {
  position: relative;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 9px 0;
  opacity: .4;
  transition: opacity .4s ease;
  transition-delay: calc(var(--d, 0) * 1ms);
}
.tline.is-run .tline__step { opacity: 1; }
.tline__step strong { display: block; font-size: 14px; }
.tline__step small { display: block; font-size: 12px; color: var(--fx-dim); }
.tline__step em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px; color: #9ae8f7;
  white-space: nowrap; padding-top: 2px;
}
.tline__step em b { font-size: 15px; color: #fff; }
.tline__step.is-open em { color: var(--fx-dim); }

.tline__dot {
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--fx-plate); border: 2px solid rgba(255, 255, 255, .2);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
  transition-delay: calc(var(--d, 0) * 1ms);
}
.tline__dot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--fx-ac); transform: scale(0);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.tline.is-run .tline__dot { border-color: var(--fx-ac); box-shadow: 0 0 0 4px rgba(90, 215, 239, .14); }
.tline.is-run .tline__dot::after { transform: scale(1); }
.tline.is-run .tline__step--end .tline__dot { border-color: var(--fx-ok); box-shadow: 0 0 0 4px rgba(86, 217, 154, .18); }
.tline.is-run .tline__step--end .tline__dot::after { background: var(--fx-ok); }
.tline__step--end strong { color: #bff3d7; }

.tline__days {
  display: block; height: 6px; margin-top: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.tline__days i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--fx-ac), var(--brand));
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(.4, .1, .3, 1);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.tline.is-run .tline__days i { transform: scaleX(1); }

#plan-ask { margin-top: 16px; }

/* === Product console band ================================================ */

.aihero--product { margin: 0 0 26px; }
.aihero__title { font-size: 36px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px; }
.aihero__title em { font-style: normal; color: #9ae8f7; }

/* The starters light up one by one once the briefing has finished, as the
   obvious next thing to press. */
.aistarters.is-lit .aistarter { animation: fx-starter .5s cubic-bezier(.2, .7, .3, 1) both; }
.aistarters.is-lit .aistarter:nth-child(2) { animation-delay: .1s; }
.aistarters.is-lit .aistarter:nth-child(3) { animation-delay: .2s; }

/* === Keyframes =========================================================== */

@keyframes fx-sheen   { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes fx-sweep   { 0% { transform: translateX(-120%); } 100% { transform: translateX(400%); } }
@keyframes fx-rise    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fx-tick    { 0% { transform: translateY(-3px); color: #9ae8f7; } 100% { transform: none; } }
@keyframes fx-busy    { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes fx-twinkle { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes fx-beacon  {
  0%   { box-shadow: 0 0 0 0 rgba(90, 215, 239, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(90, 215, 239, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 215, 239, 0); }
}
@keyframes fx-ring {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 2px rgba(90, 215, 239, .5); }
  100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 16px rgba(90, 215, 239, 0); }
}
@keyframes fx-starter {
  0%   { opacity: .3; transform: translateY(6px); border-color: rgba(255, 255, 255, .16); }
  60%  { opacity: 1; border-color: rgba(90, 215, 239, .8); box-shadow: 0 0 0 4px rgba(90, 215, 239, .18); }
  100% { opacity: 1; transform: none; }
}

/* === Responsive ========================================================== */

@media (max-width: 1100px) {
  .plan__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .plan { padding: 22px 16px; border-radius: var(--radius); }
  .plan__head h2 { font-size: 24px; }
  .plan__calc, .plan__time { padding: 16px; }
  .plan__read b { font-size: 19px; }
  .plan__boxes { gap: 6px; }
  .cbox__body { height: 48px; }
  .aihero__title { font-size: 27px; }
  .gscan__result { white-space: normal; flex-basis: 100%; padding-bottom: 6px; }
}

/* === Reduced motion ======================================================= */

@media (prefers-reduced-motion: reduce) {
  .fx-armed .pcard:not(.fx-done) { opacity: 1; transform: none; transition: none; }
  .grid-products .pcard__media::after { display: none; }
  .grid-products .pcard.is-match { animation: none; }
  .gscan__sweep, .gscan__pulse, .gscan__spark, .plan__eyebrow i,
  .gscan__chip, .aistarters.is-lit .aistarter, .plan__verdict.is-fresh,
  .plan__read.is-tick b, .gscan__ask.is-busy::after { animation: none !important; }
  .cbox__fill, .tline::after, .tline__days i, .tline__step, .tline__dot, .tline__dot::after,
  .pcard__chip, .grid-products .pcard__media img { transition: none !important; }
  .tline::after { transform: scaleY(1); }
  .tline__step { opacity: 1; }
  .tline__days i { transform: scaleX(1); }
}

/* === Category hero ========================================================
   The band above a category grid: counted facts on the left, a rotating
   showcase of the most requested products on the right. The slides are all in
   the markup and stacked with a grid, so the band is complete without a
   script — catalog-fx.js only decides which one is in front. */

.chero {
  --fx-ac:      #5ad7ef;
  --fx-ac-soft: rgba(90, 215, 239, .16);
  --fx-ac-line: rgba(90, 215, 239, .42);
  --fx-edge:    rgba(255, 255, 255, .10);
  --fx-edge-2:  rgba(255, 255, 255, .18);
  --fx-ink:     #eef3f8;
  --fx-dim:     #93a4b8;

  position: relative; overflow: hidden;
  margin: 4px 0 22px; padding: 30px 32px;
  border-radius: var(--radius-lg);
  color: var(--fx-ink);
  background: linear-gradient(150deg, var(--nav) 0%, var(--nav-2) 58%, #22405f 100%);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px;
  align-items: center;
}
.chero > * { min-width: 0; position: relative; }
.chero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 320px at 8% -10%, rgba(90, 215, 239, .17), transparent 64%),
    radial-gradient(560px 300px at 100% 110%, rgba(242, 160, 50, .14), transparent 62%);
}
.chero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(60% 80% at 30% 50%, #000, transparent);
          mask-image: radial-gradient(60% 80% at 30% 50%, #000, transparent);
}

.chero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #cfe9f2;
}
.chero__eyebrow .cat-mark { width: 30px; height: 30px; margin: 0; border-radius: 9px; font-size: 11px; }
.chero__title { font-size: 36px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 10px; color: #fff; }
.chero__lede { color: var(--nav-text-muted); font-size: 14.5px; max-width: 58ch; margin: 0 0 18px; }

.chero__pulse { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chero__pulse > div {
  flex: 1 1 96px; min-width: 0;
  background: rgba(12, 20, 31, .5); border: 1px solid var(--fx-edge);
  border-radius: 12px; padding: 9px 12px;
}
.chero__pulse dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--fx-dim); font-weight: 700; }
.chero__pulse dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
.chero__pulse b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.chero__pulse small { font-size: 11px; color: var(--fx-dim); }

.chero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; }
.chero__chiplabel { font-size: 11px; color: var(--fx-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-right: 2px; }
.chero__chiplabel:not(:first-child) { margin-left: 8px; }
.chero__chip {
  font-size: 12px; font-weight: 600; color: #cfeef6; text-decoration: none;
  background: var(--fx-ac-soft); border: 1px solid var(--fx-ac-line);
  border-radius: 999px; padding: 4px 10px;
  transition: background .15s ease, transform .15s ease;
}
.chero__chip small { color: var(--fx-dim); font-weight: 600; }
.chero__chip:hover { background: rgba(90, 215, 239, .3); color: #fff; text-decoration: none; transform: translateY(-1px); }
.chero__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- The showcase --- */

.show {
  background: rgba(12, 20, 31, .62);
  border: 1px solid var(--fx-edge);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.show__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.show__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cfe9f2;
}
.show__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: fx-beacon-brand 2.2s ease-out infinite; }
.show__nav { display: flex; gap: 6px; }
.show__arrow {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--fx-edge-2); color: #fff;
  font: inherit; font-size: 18px; line-height: 1; display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.show__arrow:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); }

/* Slides stack in one grid cell; the one in front is `is-on`. */
.show__stage { display: grid; }
.show__slide {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 16px; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(28px) scale(.98);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .55s;
}
.show__slide.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .55s ease .05s, transform .7s cubic-bezier(.2, .7, .3, 1) .05s, visibility 0s;
}
.show__slide.is-out { transform: translateX(-28px) scale(.98); }

.show__media {
  position: relative; display: block; overflow: hidden;
  border-radius: 12px; background: var(--photo-plate);
  aspect-ratio: 1 / 1;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.show__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .3, 1); }
.show__slide.is-on .show__media img { animation: fx-kenburns 4.6s ease-out both; }
.show__media:hover img { transform: scale(1.06); }
.show__rank {
  position: absolute; top: 9px; left: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--brand-contrast); background: var(--brand);
  border-radius: 999px; padding: 3px 9px;
  box-shadow: 0 4px 12px rgba(242, 160, 50, .4);
}

.show__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.show__title { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #fff; text-decoration: none; }
.show__title:hover { color: #9ae8f7; text-decoration: underline; }
.show__sum { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fx-dim); }
.show__facts { display: flex; flex-wrap: wrap; gap: 5px; }
.show__facts span {
  font-size: 11px; color: #d7e3ee;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--fx-edge);
  border-radius: 999px; padding: 3px 8px;
}
.show__facts b { color: #9ae8f7; }
.show__body form { margin-top: 2px; }

/* Each slide's copy arrives a beat after its photo. */
.show__slide.is-on .show__body > * { animation: fx-rise .45s cubic-bezier(.2, .7, .3, 1) both; }
.show__slide.is-on .show__body > :nth-child(2) { animation-delay: .07s; }
.show__slide.is-on .show__body > :nth-child(3) { animation-delay: .14s; }
.show__slide.is-on .show__body > :nth-child(4) { animation-delay: .21s; }

/* Dots double as progress bars: the active one fills over the interval. */
.show__dots { display: flex; gap: 6px; margin-top: 12px; }
.show__dot { flex: 1 1 0; height: 14px; padding: 5px 0; cursor: pointer; background: transparent; border: 0; }
.show__dot i {
  display: block; height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .16); position: relative;
}
.show__dot i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--fx-ac), var(--brand));
  transform-origin: left; transform: scaleX(0);
}
.show__dot.is-on i::after { animation: fx-progress var(--show-ms, 4200ms) linear forwards; }
.show__dot.is-done i::after { transform: scaleX(1); opacity: .5; }
.show.is-paused .show__dot.is-on i::after { animation-play-state: paused; }
.show__dot:hover i { background: rgba(255, 255, 255, .3); }

@keyframes fx-progress { to { transform: scaleX(1); } }
@keyframes fx-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fx-beacon-brand {
  0%   { box-shadow: 0 0 0 0 rgba(242, 160, 50, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(242, 160, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 160, 50, 0); }
}

@media (max-width: 1100px) {
  .chero { grid-template-columns: 1fr; padding: 24px; }
  .chero__title { font-size: 30px; }
}
@media (max-width: 760px) {
  .chero { padding: 20px 16px; border-radius: var(--radius); }
  .chero__title { font-size: 26px; }
  .chero__pulse > div { flex-basis: calc(50% - 4px); padding: 8px 10px; }
  .chero__pulse b { font-size: 18px; }
  .show__slide { grid-template-columns: 1fr; }
  .show__media { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .show__slide, .show__slide.is-on { transition: none; }
  .show__slide.is-on .show__media img, .show__slide.is-on .show__body > *,
  .show__dot.is-on i::after, .show__eyebrow i { animation: none !important; }
  .show__dot.is-on i::after { transform: scaleX(1); }
  .show__media img { transition: none; }
}

/* === Category hero: tags, sub-categories, project note ===================== */

.chero__tag {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800;
  border-radius: 999px; padding: 3px 9px;
}
.chero__tag--star { color: var(--brand-contrast); background: var(--brand); }
.chero__tag--project { color: #06222a; background: var(--fx-ac); }

.chero__project {
  margin: -2px 0 14px; font-size: 13.5px; line-height: 1.5;
  color: #d9f5fb; background: var(--fx-ac-soft); border: 1px solid var(--fx-ac-line);
  border-radius: 10px; padding: 9px 12px; max-width: 62ch;
}
.chero__project a { color: #fff; font-weight: 700; white-space: nowrap; }

.chero__subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.chero__sub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: #e6f0f6; text-decoration: none;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--fx-edge-2);
  border-radius: 999px; padding: 5px 11px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.chero__sub small { color: var(--fx-dim); font-weight: 600; }
.chero__sub i { font-style: normal; font-size: 11px; }
.chero__sub.is-featured { border-color: rgba(242, 160, 50, .55); background: rgba(242, 160, 50, .12); }
.chero__sub.is-featured i { color: var(--brand); }
.chero__sub.is-project { border-color: var(--fx-ac-line); background: var(--fx-ac-soft); }
.chero__sub.is-project i { color: var(--fx-ac); }
.chero__sub:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; text-decoration: none; transform: translateY(-1px); }

/* === Projects page ========================================================= */

.aihero--projects { margin-top: 18px; }

.pjgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }

.pj {
  --fx-ac:      #5ad7ef;
  --fx-ac-soft: rgba(90, 215, 239, .16);
  --fx-ac-line: rgba(90, 215, 239, .42);
  --fx-edge:    rgba(255, 255, 255, .10);
  --fx-edge-2:  rgba(255, 255, 255, .18);
  --fx-dim:     #93a4b8;

  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  border-radius: var(--radius-lg);
  color: #eef3f8;
  background: linear-gradient(160deg, var(--nav) 0%, var(--nav-2) 62%, #203a55 100%);
  border: 1px solid var(--fx-edge);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
  animation: fx-rise .6s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.pj:hover { transform: translateY(-4px); border-color: var(--fx-ac-line); box-shadow: 0 22px 50px rgba(0, 0, 0, .4), 0 0 0 1px rgba(90, 215, 239, .2); }
.pj__glow {
  position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(90, 215, 239, .18), transparent);
  transition: transform .5s ease;
}
.pj:hover .pj__glow { transform: translate(-8%, 8%) scale(1.15); }

.pj__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pj__head .cat-mark { margin: 0; }
.pj__kind { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9ae8f7; }
.pj__head h3 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.015em; }
.pj__head h3 a { color: #fff; }
.pj__head h3 a:hover { color: #9ae8f7; }
.pj__count { font-size: 11.5px; color: var(--fx-dim); text-align: right; line-height: 1.2; }
.pj__count b { display: block; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.02em; }

.pj__desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: #c9d5e0; }

.pj__subs { display: flex; flex-wrap: wrap; gap: 6px; }
.pj__sub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #cfeef6; text-decoration: none;
  background: var(--fx-ac-soft); border: 1px solid var(--fx-ac-line);
  border-radius: 999px; padding: 4px 10px;
  transition: background .15s ease;
}
.pj__sub small { color: var(--fx-dim); }
.pj__sub:hover { background: rgba(90, 215, 239, .3); color: #fff; text-decoration: none; }

.pj__refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pj__ref {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  color: #d7e3ee; text-decoration: none; font-size: 11px; line-height: 1.3;
}
.pj__ref img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 8px; background: var(--photo-plate);
  border: 1px solid var(--fx-edge);
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), border-color .2s ease;
}
.pj__ref:hover img { transform: scale(1.05); border-color: var(--fx-ac-line); }
.pj__ref span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.pj__needs {
  background: rgba(12, 20, 31, .5); border: 1px solid var(--fx-edge);
  border-radius: 12px; padding: 11px 13px;
}
.pj__needs h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--fx-dim); }
.pj__needs ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; font-size: 12.5px; color: #e6f0f6; }
.pj__needs li::marker { color: var(--fx-ac); font-weight: 700; }

.pj__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.plan--projects { margin-top: 30px; }
.plan__grid--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.plan__calc--copy h3 { margin: 0 0 10px; font-size: 18px; }
.plan__calc--copy p { font-size: 13.5px; line-height: 1.6; color: #c9d5e0; }
.pj__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.pj__facts > div { background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-edge); border-radius: 12px; padding: 10px 12px; }
.pj__facts b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.pj__facts span { font-size: 11.5px; color: var(--fx-dim); }

@media (max-width: 1100px) {
  .plan__grid--wide { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pjgrid { grid-template-columns: 1fr; }
  .pj__refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj__head { grid-template-columns: 40px minmax(0, 1fr); }
  .pj__count { grid-column: 2; text-align: left; }
  .pj__count b { display: inline; margin-right: 4px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pj { animation: none; transition: none; }
  .pj__ref img, .pj__glow { transition: none; }
}

/* === OEM / ODM / customised ===============================================
   The product page's customisation band (it replaced the order planner when MOQ,
   lead time and loading quantity stopped being published), and the short list in
   the product info column. */

.oemlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.oemlist li { position: relative; padding-left: 20px; color: var(--text-muted); }
.oemlist li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-subtle); box-shadow: inset 0 0 0 2px var(--accent);
}
.oemlist b { color: var(--text); }

.oemgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.oemcard {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-edge);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), border-color .25s ease, background .25s ease;
  animation: fx-rise .5s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.oemcard:hover { transform: translateY(-3px); border-color: var(--fx-ac-line); background: var(--fx-ac-soft); }
.oemcard b { font-size: 14px; color: #fff; }
.oemcard span { font-size: 12.5px; line-height: 1.5; color: #c9d5e0; }

@media (max-width: 760px) { .oemgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .oemcard { animation: none; transition: none; } }