/*==========================================================================
  shop.kasperaero.com

  Brand tokens lifted from the main site (css/style-nonminified.css) so the
  shop reads as the same company: Roboto, navy/cyan, the Kasper Aero marks.

  Load order: bootstrap.min.css first, then this file.
==========================================================================*/

:root {
  /* --- brand, matched to kasperaero.com --- */
  --ka-navy:            rgb(33, 41, 52);
  --ka-navy-alpha:      rgba(33, 41, 52, 0.95);
  --ka-cyan:            rgb(115, 218, 229);
  --ka-cyan-dark:       rgb(47, 199, 202);
  --ka-deep:            rgb(2, 44, 71);

  --ka-body:            #000;
  --ka-muted:           #6b7280;
  --ka-rule:            #dfe3e8;
  --ka-surface:         #fff;
  --ka-surface-alt:     #f5f7f9;

  --ka-font:            "Roboto", Arial, sans-serif;
  --ka-weight-light:    300;
  --ka-weight-normal:   400;
  --ka-weight-medium:   500;
  --ka-weight-bold:     700;

  --ka-radius:          7px;
  --ka-header-h:        64px;
}

body {
  font-family: var(--ka-font);
  font-weight: var(--ka-weight-normal);
  color: var(--ka-body);
  background: var(--ka-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--ka-font); }
h1 { font-weight: var(--ka-weight-light); font-size: 2rem; }
h2 { font-weight: var(--ka-weight-light); font-size: 1.6rem; }
h3 { font-weight: var(--ka-weight-medium); font-size: 1.3rem; }
h4, h5 { font-weight: var(--ka-weight-medium); }

a { color: var(--ka-deep); }
a:hover { color: var(--ka-cyan-dark); }

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

  A cut-down version of the main site navbar: same marks, same navy, but one
  compact sticky bar instead of the tall stacked-logo hero nav.
--------------------------------------------------------------------------*/
.ka-header {
  background: var(--ka-navy);
  border-bottom: 3px solid var(--ka-cyan);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.ka-header .navbar { padding-top: .35rem; padding-bottom: .35rem; }

.ka-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}
.ka-brand img.ka-brand-icon { height: 34px; width: auto; }
.ka-brand img.ka-brand-word { height: 20px; width: auto; }

/* "Shop" tag beside the wordmark so it is obvious this is the store */
.ka-brand-tag {
  color: var(--ka-cyan);
  font-size: .8rem;
  font-weight: var(--ka-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-left: .65rem;
  margin-left: .2rem;
  border-left: 1px solid rgba(255, 255, 255, .3);
  white-space: nowrap;
}

.ka-header .nav-link {
  color: rgba(255, 255, 255, .9);
  font-size: .95rem;
  font-weight: var(--ka-weight-normal);
  padding: .4rem .8rem;
}
.ka-header .nav-link:hover,
.ka-header .nav-link:focus,
.ka-header .nav-link.active { color: var(--ka-cyan); }

.ka-header .navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
  padding: .25rem .5rem;
}
.ka-header .navbar-toggler:focus { box-shadow: none; }

/* link back to the main site - decision 10.4 / 10.5, cross-link heavily */
.ka-header .ka-mainsite {
  color: rgba(255, 255, 255, .65);
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
}
.ka-header .ka-mainsite:hover { color: var(--ka-cyan); }

/*--------------------------------------------------------------------------
  Cart link in the header
--------------------------------------------------------------------------*/
.ka-cart-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.ka-cart-icon { flex-shrink: 0; }

.ka-cart-count {
  background: var(--ka-cyan);
  color: var(--ka-navy);
  font-size: .72rem;
  font-weight: var(--ka-weight-bold);
  line-height: 1;
  padding: .2rem .4rem;
  border-radius: 999px;
  min-width: 1.25rem;
  text-align: center;
}
.ka-cart-count[hidden] { display: none !important; }

/*--------------------------------------------------------------------------
  Cart page
--------------------------------------------------------------------------*/
.ka-cart-line {
  border: 1px solid var(--ka-rule);
  border-radius: var(--ka-radius);
  padding: 1rem;
  background: var(--ka-surface);
}
.ka-cart-line + .ka-cart-line { margin-top: .75rem; }

.ka-cart-line-img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: var(--ka-surface-alt);
  border-radius: var(--ka-radius);
  padding: .25rem;
  flex-shrink: 0;
}

.ka-cart-qty { max-width: 6rem; }

.ka-cart-summary {
  border: 1px solid var(--ka-rule);
  border-radius: var(--ka-radius);
  background: var(--ka-surface-alt);
  padding: 1.25rem;
}

/* The sticky wrapper, not the summary itself. It holds the summary AND the
   notices, so there is no sibling left for it to slide over. */
@media (min-width: 992px) {
  .ka-cart-aside {
    position: sticky;
    top: calc(var(--ka-header-h) + 1rem);

    /* A long cart can make this taller than the screen, and a pinned box
       taller than the viewport hides its own bottom - which here would be
       the checkout button. Cap it and let it scroll internally; the
       scrollbar only appears when it is actually needed. */
    max-height: calc(100vh - var(--ka-header-h) - 2rem);
    overflow-y: auto;

    /* Room for the internal scrollbar so it never sits on the text. */
    padding-right: .25rem;
  }
}

/* Below lg the column is full width and stacked underneath the lines, where
   sticking it would just pin a tall block over the page. */

.ka-cart-total {
  font-size: 1.25rem;
  font-weight: var(--ka-weight-medium);
}

/*--------------------------------------------------------------------------
  Checkout page
--------------------------------------------------------------------------*/
.ka-co-step {
  border: 1px solid var(--ka-rule);
  border-radius: var(--ka-radius);
  background: var(--ka-surface);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.ka-co-step h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }

.ka-co-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--ka-navy);
  color: #fff;
  font-size: .85rem;
  font-weight: var(--ka-weight-medium);
  flex-shrink: 0;
}

.ka-co-review {
  border: 2px solid var(--ka-navy);
  border-radius: var(--ka-radius);
  background: var(--ka-surface-alt);
  padding: 1.25rem;
}

/* Stripe mounts iframes here; give them room to breathe while loading. */
#address-element, #payment-element { min-height: 3rem; }

/* Shipping estimator block in the cart sidebar */
.ka-ship {
  border-top: 1px solid var(--ka-rule);
  padding-top: 1rem;
}
.ka-ship select { max-width: 100%; }

/* "Empty cart" - a destructive action, so it stays quiet until hovered
   rather than sitting there as a bare blue link next to the checkout
   button. */
.ka-cart-clear {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ka-radius);
  color: var(--ka-muted);
  font-size: .8rem;
  font-weight: var(--ka-weight-medium);
  padding: .3rem .55rem;
  margin-left: -.55rem;   /* keeps the label optically flush with the column */
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.ka-cart-clear:hover {
  color: #b02a37;
  background: rgba(176, 42, 55, .07);
  border-color: rgba(176, 42, 55, .25);
}
.ka-cart-clear:focus-visible {
  outline: 3px solid var(--ka-cyan);
  outline-offset: 2px;
}
.ka-cart-clear svg { flex-shrink: 0; }

/* Payment method choice. Made in the cart rather than at Stripe, because the
   card fee has to be priced into the session before it is created. */
.ka-pay-option {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  border: 1px solid var(--ka-rule);
  border-radius: var(--ka-radius);
  background: var(--ka-surface);
  padding: .65rem .75rem;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ka-pay-option + .ka-pay-option { margin-top: .5rem; }
.ka-pay-option:hover { border-color: var(--ka-cyan-dark); }

.ka-pay-option.is-chosen {
  border-color: var(--ka-navy);
  box-shadow: inset 0 0 0 1px var(--ka-navy);
}

.ka-pay-option input { margin-top: .25rem; flex-shrink: 0; }
.ka-pay-body { flex-grow: 1; min-width: 0; font-size: .9rem; }

.ka-pay-option:focus-within {
  outline: 3px solid var(--ka-cyan);
  outline-offset: 2px;
}

/* The "added to cart" confirmation that replaces the button state */
.ka-added {
  border: 1px solid var(--ka-cyan);
  background: rgba(115, 218, 229, .15);
  border-radius: var(--ka-radius);
  padding: .75rem;
  font-size: .9rem;
}

/*--------------------------------------------------------------------------
  Buttons

  Ported from the main site so the shop uses the same button vocabulary.
  On kasperaero.com these live in css/style-nonminified.css; the rules below
  are the same treatment expressed against the --ka-* tokens.

    .btn-info-bck           cyan fill, navy text   - primary on light
    .btn-outline-info-bck1  navy outline           - secondary on light
    .btn-outline-info-bck   cyan outline           - for dark backgrounds
    .btn-split              the split download button (see below)

  The house signature is a 2px border and medium weight. Bootstrap defaults
  to 1px and normal, which is why these look slightly wrong without it.
--------------------------------------------------------------------------*/

/* Primary. Cyan fill with a navy border, same as the main site. */
.btn-info-bck {
  font-size: 1rem;
  color: var(--ka-navy);
  background-color: var(--ka-cyan);
  border: 2px solid var(--ka-navy);
  font-weight: var(--ka-weight-normal);
  border-radius: var(--ka-radius);
}
.btn-info-bck:hover {
  color: #000;
  background-color: var(--ka-cyan);
  border-color: var(--ka-cyan);
}

/* Secondary on a light background. Navy outline, fills navy on hover. */
.btn-outline-info-bck1 {
  font-size: 1rem;
  color: var(--ka-navy);
  background: transparent;
  border: 2px solid var(--ka-navy);
  font-weight: var(--ka-weight-medium);
  border-radius: var(--ka-radius);
}
.btn-outline-info-bck1:hover {
  color: #fff;
  background-color: var(--ka-navy-alpha);
  border-color: var(--ka-navy-alpha);
}

/* For use on the navy header or footer. Cyan outline, fills cyan. */
.btn-outline-info-bck {
  font-size: 1rem;
  color: var(--ka-cyan);
  background: transparent;
  border: 2px solid var(--ka-cyan);
  font-weight: var(--ka-weight-normal);
  border-radius: var(--ka-radius);
}
.btn-outline-info-bck:hover {
  color: #000;
  background-color: var(--ka-cyan);
  border-color: var(--ka-cyan);
}

/* The house primary CTA. Navy fill that inverts to navy-on-white on hover.
   This is the most-used button on kasperaero.com (69 instances), so the
   shop primary is the same thing rather than a near miss. */
.other-button,
.btn-ka {
  background-color: var(--ka-navy);
  color: #fff;
  border: 2px solid var(--ka-navy);
  border-radius: var(--ka-radius);
  font-weight: var(--ka-weight-medium);
}
.other-button:hover,
.btn-ka:hover {
  background-color: #fff;
  color: var(--ka-navy);
  border-color: var(--ka-navy);
}

/* Secondary. Same silhouette, reversed to start. */
.btn-ka-outline {
  background: transparent;
  border: 2px solid var(--ka-navy);
  color: var(--ka-navy);
  border-radius: var(--ka-radius);
  font-weight: var(--ka-weight-medium);
}
.btn-ka-outline:hover { background: var(--ka-navy); color: #fff; border-color: var(--ka-navy); }

.btn-ka:focus-visible,
.btn-ka-outline:focus-visible,
.other-button:focus-visible,
.btn-info-bck:focus-visible,
.btn-outline-info-bck:focus-visible,
.btn-outline-info-bck1:focus-visible {
  outline: 3px solid var(--ka-cyan);
  outline-offset: 2px;
  box-shadow: none;
}

/*--------------------------------------------------------------------------
  Split download button

  The pattern used 23 times on kasperaero.com/support-downloads: a dark icon
  half and a light label half that swap colours together on hover, with the
  icon inverting to stay visible.

  Markup:
    <a class="btn btn-split d-flex" href="..." target="_blank" rel="noopener">
      <div class="btn other-button-downloads-inverted ...">
        <img src="/img/icons/download-minimalistic.svg?v=301a9cc2" ...>
      </div>
      <div class="btn other-button-downloads ...">Download PDF</div>
    </a>

  Widened from the main site fixed 280px to a max-width so it behaves inside
  the narrower product-page column and on a phone.
--------------------------------------------------------------------------*/
/* The 2px border lives on this rounded outer edge, not on the two halves.
   Drawing it on the square halves and clipping them with overflow:hidden
   shaved the border thin at every corner, and Bootstrap's .btn added a 1px
   transparent ring inside the clip on top of that. One border on the element
   that owns the radius draws a clean, even curve. */
.btn-split {
  display: flex;
  width: 100%;
  max-width: 280px;
  height: 56px;
  border: 2px solid var(--ka-navy);
  border-radius: var(--ka-radius);
  overflow: hidden;
  text-decoration: none;
  padding: 0;
  background-clip: padding-box;
}

.other-button-downloads-inverted {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ka-navy);
  color: #fff;
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
  padding: 0 .85rem;
  height: 100%;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, filter .3s ease;
}

.other-button-downloads {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: var(--ka-navy);
  border: 0;
  border-radius: 0;
  flex: 1;
  height: 100%;
  font-size: 1rem;
  font-weight: var(--ka-weight-medium);
  line-height: 1.15;
  text-align: center;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, filter .3s ease;
}

.btn-split:hover .other-button-downloads-inverted {
  background-color: #fff;
  color: var(--ka-navy);
}
.btn-split:hover .other-button-downloads {
  background-color: var(--ka-navy);
  color: #fff;
}
/* The border would otherwise vanish into the navy label half on hover,
   leaving the icon half looking detached. Keep the edge crisp. */
.btn-split:hover,
.btn-split:focus { border-color: var(--ka-navy); }
/* The icon ships white for the dark half, so invert it when that half
   turns white on hover. */
.btn-split:hover img { filter: invert(1); }

.btn-split:focus-visible {
  outline: 3px solid var(--ka-cyan);
  outline-offset: 2px;
}

/* There is deliberately no second colour variant. The main site has exactly
   one download button and uses it 23 times; a cyan version introduced a
   third colour that appears nowhere else in the brand. The datasheet and the
   CAD button differ by their label and the caption under them, not by hue. */

/*--------------------------------------------------------------------------
  Catalog cards
--------------------------------------------------------------------------*/
.ka-card {
  border: 1px solid var(--ka-rule);
  border-radius: var(--ka-radius);
  transition: box-shadow .15s ease, transform .15s ease;
  background: var(--ka-surface);
  height: 100%;
}
.ka-card:hover { box-shadow: 0 6px 20px rgba(33, 41, 52, .12); transform: translateY(-2px); }

/* Shared by the catalogue cards AND the main gallery image on a product
   page. It used to be scoped to `.ka-card .ka-card-img`, so the gallery
   image - which sits in .ka-stage, not a card - got none of it. Its
   width/height attributes then forced every picture into 4:3, which
   stretched anything that was not, such as the wiring pinout at 3.3:1.
   object-fit: contain letterboxes instead. */
.ka-card-img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--ka-surface-alt);
  padding: .75rem;
}
.ka-card .ka-card-img {
  border-radius: var(--ka-radius) var(--ka-radius) 0 0;
}

.ka-pn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: var(--ka-weight-medium);
  letter-spacing: .02em;
}

.ka-badge-sellable,
.ka-badge-rfq {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 3px;
  font-weight: var(--ka-weight-medium);
}
.ka-badge-sellable { background: var(--ka-cyan); color: var(--ka-navy); }
.ka-badge-rfq      { background: var(--ka-surface-alt); color: var(--ka-muted); border: 1px solid var(--ka-rule); }

/*--------------------------------------------------------------------------
  Minimum order quantity

  Stated next to the input rather than tucked into the label, because a buyer
  who misses it types 1, gets stopped, and reads it as the store being broken.
--------------------------------------------------------------------------*/
.ka-moq {
  font-size: .875rem;
  color: var(--ka-navy);
  background: rgba(115, 218, 229, .15);
  border-left: 3px solid var(--ka-cyan);
  border-radius: 0 3px 3px 0;
  padding: .4rem .6rem;
}
.ka-moq strong { font-weight: var(--ka-weight-bold); }

/* Shown when the typed quantity is below the minimum or off the increment. */
.ka-moq-warn {
  font-size: .9rem;
  color: #7a5b00;
  background: #fff3cd;
  border-left: 3px solid #e0a800;
  border-radius: 0 3px 3px 0;
  padding: .6rem .75rem;
}

/* MOQ badge on the catalog cards */
.ka-moq-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: var(--ka-weight-medium);
  color: var(--ka-navy);
  background: rgba(115, 218, 229, .25);
  border-radius: 3px;
  padding: .1rem .35rem;
}

/*--------------------------------------------------------------------------
  Price ladder - Qty / Unit price / Lead time (decision 4.5)
--------------------------------------------------------------------------*/
.ka-price-table { font-size: .95rem; }
.ka-price-table thead th {
  background: var(--ka-navy);
  color: #fff;
  font-weight: var(--ka-weight-medium);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 0;
}
.ka-price-table tbody tr.ka-row-active { background: rgba(115, 218, 229, .18); }
.ka-price-table tbody tr.ka-row-quote td { color: var(--ka-muted); font-style: italic; }
.ka-price-table td, .ka-price-table th { vertical-align: middle; }

.ka-price-note { font-size: .8rem; color: var(--ka-muted); }

/*--------------------------------------------------------------------------
  Specs table
--------------------------------------------------------------------------*/
.ka-spec-table { font-size: .95rem; }
.ka-spec-table th {
  width: 40%;
  font-weight: var(--ka-weight-medium);
  color: var(--ka-navy);
  background: var(--ka-surface-alt);
}

/* anything still carrying placeholder copy is loud on purpose */
.ka-placeholder {
  background: #fff3cd;
  color: #7a5b00;
  padding: 0 .3rem;
  border-radius: 3px;
  font-style: italic;
}

/*--------------------------------------------------------------------------
  Notices - export, tax, shipping. Small and factual, not shouty.
--------------------------------------------------------------------------*/
.ka-notice {
  border-left: 3px solid var(--ka-cyan);
  background: var(--ka-surface-alt);
  padding: .75rem 1rem;
  font-size: .875rem;
  border-radius: 0 var(--ka-radius) var(--ka-radius) 0;
}
.ka-notice strong { font-weight: var(--ka-weight-medium); }

/*--------------------------------------------------------------------------
  Footer
--------------------------------------------------------------------------*/
.ka-footer {
  background: var(--ka-navy);
  color: rgba(255, 255, 255, .9);
  padding: 2.5rem 0 1.25rem;
  margin-top: 4rem;
}
.ka-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .9rem; }
.ka-footer a:hover { color: var(--ka-cyan); }
.ka-footer h5 {
  color: var(--ka-cyan);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--ka-weight-medium);
  margin-bottom: .9rem;
}
.ka-footer .ka-copyright {
  font-size: .75rem;
  color: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 1.5rem;
  padding-top: 1rem;
}

/*--------------------------------------------------------------------------
  Lightbox

  Vanilla, no library. Engineers zoom in on a sensor render to check a
  thread form or a connector, so the enlarged view is the point; a CDN
  dependency for 90 lines of CSS and JS is not worth the supply chain.

  Driven by js/lightbox.js. Any image with data-lightbox opens it.
--------------------------------------------------------------------------*/
.ka-zoomable { cursor: zoom-in; }

/* Visibility is controlled by the hidden attribute alone, never by a
   transition. A transition does not run in a background tab, and an overlay
   stuck at opacity 0 while it traps focus and locks scrolling is far worse
   than no fade. The entry animation is on the figure, whose resting state is
   visible, so if the animation never runs the image still shows. */
.ka-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 27, .92);
  padding: clamp(1rem, 4vw, 3rem);
}
.ka-lightbox[hidden] { display: none; }

.ka-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  animation: ka-lightbox-in .18s ease-out;
}

@keyframes ka-lightbox-in {
  from { opacity: 0; transform: scale(.98); }
}

.ka-lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  background: #fff;
  border-radius: var(--ka-radius);
  padding: .5rem;
}

.ka-lightbox-caption {
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
  text-align: center;
  max-width: 60ch;
}

.ka-lightbox-close,
.ka-lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  border-radius: var(--ka-radius);
  cursor: pointer;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease;
}
.ka-lightbox-close:hover,
.ka-lightbox-nav:hover { background: var(--ka-cyan); border-color: var(--ka-cyan); color: var(--ka-navy); }
.ka-lightbox-close:focus-visible,
.ka-lightbox-nav:focus-visible { outline: 3px solid var(--ka-cyan); outline-offset: 2px; }

.ka-lightbox-close {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
}

.ka-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 3.5rem;
  font-size: 1.5rem;
}
.ka-lightbox-prev { left: 1rem; }
.ka-lightbox-next { right: 1rem; }

/*--------------------------------------------------------------------------
  Catalog card specs

  Two facts that decide whether a part fits at all - the port and the
  temperature - so they belong on the card rather than one click away.
--------------------------------------------------------------------------*/
.ka-card-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .5rem;
  font-size: .8rem;
  border-top: 1px solid var(--ka-rule);
  padding-top: .5rem;
}
.ka-card-specs dt {
  color: var(--ka-muted);
  font-weight: var(--ka-weight-regular);
}
.ka-card-specs dd {
  margin: 0;
  color: var(--ka-navy);
  font-weight: var(--ka-weight-medium);
}

/* Headings over each half of the split specification table */
.ka-spec-group {
  font-size: .8rem;
  font-weight: var(--ka-weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ka-muted);
  margin: 0 0 .5rem;
}
.ka-spec-group:not(:first-child) { margin-top: 1.5rem; }

/* FAQ category headings inside the single accordion */
.ka-faq-group {
  font-size: 1.05rem;
  font-weight: var(--ka-weight-medium);
  color: var(--ka-navy);
  letter-spacing: .02em;
  margin: 2rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--ka-cyan);
}
.ka-faq-group:first-child { margin-top: 0; }

/* Accessory cards on a product page: wider and shorter than a catalogue
   card, because they sit below the fold and support the main part. */
.ka-accessory { transition: border-color .15s ease; }
.ka-accessory:hover { border-color: var(--ka-cyan-dark); }
.ka-accessory-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--ka-surface-alt);
  border-radius: var(--ka-radius);
  padding: .25rem;
}
.ka-accessory-img-empty { font-size: .7rem; text-align: center; }

/* Thumbnails under the main product image */
.ka-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--ka-surface-alt);
  border: 1px solid var(--ka-rule);
  border-radius: var(--ka-radius);
  padding: .25rem;
  cursor: pointer;
  transition: border-color .15s ease;
}
.ka-thumb:hover { border-color: var(--ka-cyan-dark); }
.ka-thumb.is-active { border-color: var(--ka-navy); border-width: 2px; }

/* The 3D tile is a button, not an image, so it needs its own centring. */
.ka-thumb-3d {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ka-navy);
}
.ka-thumb-3d-mark {
  font-weight: var(--ka-weight-medium);
  font-size: 1.05rem;
  letter-spacing: .06em;
}

/*--------------------------------------------------------------------------
  Interactive 3D view

  The stage keeps the image and the canvas on the same footprint so swapping
  between them does not make the page jump.
--------------------------------------------------------------------------*/
.ka-stage { position: relative; }
.ka-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ka-surface-alt);
  overflow: hidden;
}
.ka-3d-canvas { width: 100%; height: 100%; }
.ka-3d-status {
  position: absolute;
  inset: auto 0 0 0;
  padding: .5rem .75rem;
  background: rgba(255, 255, 255, .92);
  color: var(--ka-muted);
  font-size: .85rem;
  text-align: center;
}
.ka-3d-status:empty { display: none; }

/* Respect a reduced-motion preference: no fade, just appear. */
@media (prefers-reduced-motion: reduce) {
  .ka-lightbox-figure { animation: none; }
}

/*--------------------------------------------------------------------------
  3D viewer (decision 8.4 - model-viewer + GLB)
--------------------------------------------------------------------------*/
model-viewer {
  width: 100%;
  max-width: 100%;
  height: 420px;
  background: var(--ka-surface-alt);
  border: 1px solid var(--ka-rule);
  border-radius: var(--ka-radius);
}

/* tables never widen the page */
.ka-table-scroll { overflow-x: auto; }

@media (max-width: 575.98px) {
  .ka-brand-tag { display: none; }
  h1 { font-size: 1.6rem; }
  model-viewer { height: 280px; }
}

/* Related reading under the product description */
.ka-related { font-size: .9rem; }
.ka-related-sep { color: var(--ka-rule); margin: 0 .5rem; }

/* Accessories empty state */
.ka-accessory-none {
  font-size: .9rem;
  color: var(--ka-muted);
  border-left: 3px solid var(--ka-rule);
  padding-left: .75rem;
}