/* Product page: gallery, info, swatch strip, order matrix, tabs. */
.prod-wrap { padding-top: 18px; }
.crumbs { font-size: .85em; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--teal-dark); }
.prod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prod-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prod-title h1 { margin: 0; font-size: 1.45rem; }
.prod-code { color: var(--teal-dark); }
.prod-brand { font-weight: 700; font-size: 1.05em; }

.prod-top { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 34px; margin-top: 18px; }
.prod-gallery { display: flex; flex-direction: column; gap: 10px; }
.pg-main { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.pg-main img { width: 100%; height: 100%; object-fit: contain; }
.pg-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-thumbs button { width: 60px; height: 60px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer; padding: 4px; }
.pg-thumbs button.on { border-color: var(--teal); }
.pg-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.prod-from { font-size: 1.15em; }
.prod-price { font-size: 1.35em; }
/* facts flow inline and wrap; the row gap only applies once they actually wrap */
.prod-facts { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 20px; }
.prod-facts li { display: flex; align-items: center; gap: 8px; color: var(--ink);
  font-size: .95em; min-width: 0; }
/* a plain dot marks each fact instead of a per-fact icon */
.prod-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-dark); flex: none; }
.prod-desc { color: var(--muted); margin-bottom: 14px; max-width: 640px;
  font-size: .88em; line-height: 1.45; }
.prod-care { display: flex; gap: 6px; flex-wrap: wrap; }
.prod-care img { height: 30px; width: auto; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: #fff; }

/* swatches */
.prod-order { margin-top: 36px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; align-items: center; }
.sw { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; font: inherit; font-size: .85em; color: var(--ink); }
.sw:hover { border-color: var(--teal); }
.sw.on { border-color: var(--teal); background: var(--teal-pale); font-weight: 600; }
.sw-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; display: inline-block; }
/* "Poništi odabir" has to read as an action among a row of colour pills, so it
   takes the brand colour and a solid border rather than the ghost treatment,
   which was near-invisible against the swatches. */
.sw-clear { margin-left: 8px; background: #FFFDDB; color: var(--teal-dark);
  border-color: var(--teal); font-weight: 700; }
.sw-clear:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.sw-clear .ico { width: 1em; height: 1em; }

/* matrix */
.matrix-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

/* Floating size header.
   A real <thead> can only stick to the top of its scrollport, and because
   .matrix-scroll sets overflow-x it IS the scrollport — so bounding its height
   was the only way to make the header stick, and the box then slid under the
   ~110px sticky .site-header (measured: 9 of 19 useful scroll positions had the
   search bar clipping the size row). Instead the table keeps its natural height
   and scrolls with the page, while a mirrored header rides in this sticky bar,
   which parks below the site header for the whole length of the table.
   height:0 so it overlays rather than taking space in the flow.
   Its top is set from the site header's measured height in product.js: a
   hardcoded guess left a few px of gap that the table scrolled through. */
.mx-sticky-head { position: sticky; top: var(--hdr-h); z-index: 4; height: 0; }
/* sits flush under the site header — no radius or lift, or it reads as floating;
   the shadow only separates it from the table passing underneath */
.mx-head-clip { display: none; overflow: hidden; box-shadow: 0 3px 8px rgba(10, 37, 64, .12); }
.mx-sticky-head.on .mx-head-clip { display: block; }
.mx-head-clone { border-collapse: collapse; }
.mx-head-clone th { white-space: nowrap; }
.matrix { border-collapse: collapse; width: 100%; min-width: 680px; font-size: .9em; }
.matrix th, .matrix td { padding: .45em .6em; border-bottom: 1px solid var(--line); text-align: center; }
/* z-index so the scrolling cells pass under it; border-collapse drops the
   header's own border once it detaches, so the separator is an inset shadow */
.matrix thead th { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 2;
  box-shadow: inset 0 -1px 0 var(--line); }
.matrix .mx-color { text-align: left; min-width: 190px; vertical-align: top; background: var(--bg-soft); }
/* the "Boja" header keeps the light --bg-soft of its column, so it can't inherit
   the navy header's white text */
.matrix thead th.mx-color { color: var(--navy); }
/* Colour column pins while the sizes scroll sideways, so you can always tell
   which colour a size belongs to. Stacking: sticky column 1, sticky size row 2,
   the cell that is both 3. border-collapse drops borders on detached sticky
   cells, hence the inset shadow. */
.matrix .mx-color { position: sticky; left: 0; z-index: 1;
  box-shadow: inset -1px 0 0 var(--line); }
.matrix thead th.mx-color { z-index: 3; }
.matrix td.mx-color { border-right: 1px solid var(--line); }
.matrix .mx-color .sw-dot { vertical-align: -5px; margin-right: 7px; }
/* colour thumbnail (desktop only — the phone layout has no room); when a colour
   has no image the dot stands in for it, so the name alone still identifies it */
.mx-thumb { display: inline-block; width: 34px; height: 34px; object-fit: contain;
  vertical-align: -11px; margin-right: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: 5px; }
.mx-thumb + .sw-dot { display: none; }
.mx-cname { font-weight: 600; color: var(--navy); }
/* badges sit on their own row beneath the colour name, side by side */
.mx-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.mx-badges .pbadge { height: 14.4px; }
.mx-legend { display: block; font-size: .82em; color: var(--muted); margin-top: 3px; }
.mx-lbl { text-align: right !important; color: var(--muted); font-size: .88em; white-space: nowrap; min-width: 110px; }
.mx-hint { color: var(--warn); }
.mx-stock { color: var(--ok); font-weight: 600; }
.mx-supp { color: var(--warn); font-weight: 500; }
/* supplier stock is collapsed until the customer asks for it */
.matrix.supp-collapsed .mx-sub { display: none; }
.mx-supp-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.mx-supp-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  padding: 2px 0; font: inherit; font-size: .88em; color: var(--navy); cursor: pointer; }
.mx-supp-toggle:hover { text-decoration: underline; }
.mx-supp-toggle .ico { transition: transform .15s; }
.matrix-wrap:not(.supp-open) .mx-supp-toggle .ico { transform: rotate(-90deg); }
.mx-qty td { border-bottom-width: 3px; }
/* compact stepper in the matrix: the column is ~93px on desktop, so the control
   is trimmed to fit; the value cell still takes a typed quantity */
.mx-input .qty { height: 30px; }
.mx-input .qty button { width: 22px; }
.mx-input .qty button svg { width: 11px; height: 11px; }
.mx-input .qty input[type=number] { width: 38px; font-size: .95em; }
.mx-input .qty input:disabled { background: var(--bg-soft); }
.mx-price { display: block; font-size: .85em; margin-top: 3px; }
tr[hidden] { display: none; }

.matrix-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.mxf-sum { display: flex; align-items: center; gap: 14px; margin-right: auto; font-weight: 600; color: var(--navy); }
.mxf-bo { color: var(--warn); font-size: .9em; }
#mx-bo-note { margin-top: 12px; }

/* tabs */
.prod-tabs { margin-top: 40px; }
.tabbar { display: flex; gap: 4px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.tabbar button { font: inherit; font-weight: 600; color: var(--muted); border: 0; background: none;
  padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  display: inline-flex; align-items: center; gap: 7px; }
.tabbar button .ico-solid { width: 16px; height: 16px; flex: none; }
.tabbar button.on { color: var(--navy); border-bottom-color: var(--teal); }
.tabpane { display: none; padding: 22px 0; }
.tabpane.on { display: block; }
.tbl-tech th { width: 220px; color: var(--muted); font-weight: 600; }
.spec-img { margin-top: 18px; max-width: 480px; }

@media (max-width: 800px) {
  .prod-top { grid-template-columns: 1fr; }
  .mx-lbl { min-width: 80px; }
}
@media (max-width: 560px) {
  /* tighter inline facts on phones; long ones (delivery) get their own row */
  .prod-facts { gap: 6px 14px; }
  .prod-facts li { font-size: .9em; gap: 6px; }
  .prod-desc { font-size: .85em; }

  /* Order matrix. At 390px the colour (190px) + label columns alone filled the
     whole 350px box, so no size column was on screen at all — worse once the
     supplier row expanded and its nowrap label pushed the pair to 390px. Both
     columns shrink and wrap; the delivery estimate leaves the row label (it is
     still in the facts line above and the over-stock note below). */
  /* 1.45rem ran the title to three lines on a 390px screen */
  .prod-title h1 { font-size: 1.16rem; order: 1; }
  /* badges read better after the name than stacked above it */
  .prod-title .pbadge { order: 2; }
  .prod-brand-logo { height: 24px; }

  .matrix { min-width: 0; font-size: .8em; }
  .matrix th, .matrix td { padding: .4em .3em; }
  /* the colour cell leads with its packshot at 80% of the column, name beneath */
  .matrix .mx-color { min-width: 104px; padding-left: .45em; }
  .mx-thumb { display: block; width: 80%; height: auto; aspect-ratio: 1;
    margin: 0 0 4px; vertical-align: baseline; }
  .mx-thumb + .sw-dot { display: none; }
  .mx-cname { display: block; }
  .matrix .mx-color .sw-dot { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
  .mx-cname { font-size: .95em; }
  .mx-badges { gap: 3px; margin-top: 2px; }
  .mx-badges .pbadge { height: 11px; }
  .mx-legend { font-size: .74em; margin-top: 1px; }
  .mx-lbl { white-space: normal; min-width: 56px; font-size: .8em; line-height: 1.25; }
  .mx-lbl-days { display: none; }
  .mx-size { min-width: 44px; }
  /* the stepper stays on phones — tapping ± never focuses the input, so the
     keyboard only appears when the value cell itself is tapped */
  .mx-input .qty { height: 28px; }
  .mx-input .qty button { width: 19px; }
  .mx-input .qty button svg { width: 10px; height: 10px; }
  .mx-input .qty input[type=number] { width: 34px; padding: 0; font-size: .9em; }
  .mx-size { min-width: 76px; }
  .mx-price { font-size: .82em; margin-top: 2px; }
  .mx-supp-toggle { font-size: .82em; }
}

.prod-brand-name { color: var(--muted); font-weight: 600; }
.prod-brand-logo { height: 30px; width: auto; max-width: 140px; }

/* quantity-discount tab */
.qty-tiers { max-width: 340px; }
.qty-tiers td, .qty-tiers th { text-align: left; }
.qty-tiers .qt-pct { font-weight: 700; color: var(--sale); white-space: nowrap; }

/* Floating add-to-cart. Bottom-right so it clears the thumb-reach zone on
   phones without covering the size columns, under the mini-cart/menu overlays
   (z 80+) but above page content. Shrinks to icon + count on phones. */
.mx-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; }
@supports (padding: max(0px)) {
  .mx-fab { bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); }
}
.mx-fab-btn { border-radius: 999px; padding: .7em 1.25em; gap: .55em;
  box-shadow: 0 8px 24px rgba(10, 37, 64, .3); }
/* min-widths so the button does not twitch on every keystroke: the count holds
   two digits and the total a four-figure amount before either has to grow */
.mx-fab-count { background: #fff; color: var(--teal-dark); border-radius: 999px;
  min-width: 30px; height: 22px; padding: 0 6px; font-size: .82em; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.mx-fab-total { color: #fff; font-weight: 700; min-width: 82px; text-align: right; }
.mx-fab-btn.is-busy { opacity: .6; pointer-events: none; }
/* idle state is a quiet link to the cart; it only goes brand-teal once there is
   something to add, so the call to action reads as a change of state */
.mx-fab-btn:not(.is-add) { background: var(--navy); }
.mx-fab-btn:not(.is-add):hover { background: #10375E; }
@media (max-width: 560px) {
  .mx-fab { right: 12px; bottom: 12px; }
  @supports (padding: max(0px)) {
    .mx-fab { bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
  }
  /* the label stays on phones; only the running total is dropped for width */
  .mx-fab-btn { padding: .6em .95em; gap: .4em; font-size: .92em; }
  .mx-fab-total { display: none; }
}

/* Compact colour picker under the care labels. Dots only — the named strip above
   the table stays the primary control; this is a shortcut while reading the spec
   block. Desktop only: below 800px the layout stacks and the named strip is
   already within reach. */
/* fast-order banner: image left, bullets right, whole area = one anchor to #order */
/* fast-order + print note: side by side on desktop, stacked on phones */
.fo-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 16px 0 0; }
.fo-row .prod-print-note { flex: 1 1 250px; width: auto; margin: 0; align-self: stretch; }
.prod-print-note img { width: 64px; height: auto; flex: none; }
.prod-print-note .fo-p { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; }
.prod-print-note .fo-more { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--teal-dark); }
.fast-order { display: flex; width: fit-content; align-items: center; gap: 16px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.fast-order:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(0, 159, 191, .14); text-decoration: none; }
.fast-order img { width: 84px; height: auto; flex: none; }
.fast-order .fo-text strong { display: block; margin-bottom: 4px; font-size: 16px; }
.fast-order .fo-text ul { list-style: none; margin: 0; padding: 0; }
.fast-order .fo-text li { position: relative; padding-left: 14px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.fast-order .fo-text li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.fast-order .fo-text li svg { width: 15px; height: 15px; vertical-align: -2px; }

.swatches-mini { gap: 5px; margin: 14px 0 0; }
.sw-mini { padding: 3px; border-radius: 50%; line-height: 0; }
.sw-mini .sw-dot { width: 17px; height: 17px; }
.sw-mini.on { background: var(--teal-pale); border-color: var(--teal); }
/* Same action on the compact strip, but labelled rather than a bare ×: a lone
   glyph among coloured dots does not say what it does. A pill the height of the
   dots keeps the row tidy while the text carries the meaning. */
.sw-mini-clear { height: 23px; padding: 0 10px; display: inline-flex; align-items: center;
  gap: 5px; border: 1px solid var(--teal); border-radius: 999px; background: #FFFDDB;
  color: var(--teal-dark); font: inherit; font-size: .78em; font-weight: 700;
  line-height: 1; white-space: nowrap; cursor: pointer; }
.sw-mini-clear:hover { background: var(--teal); color: #fff; }
.sw-mini-clear .ico { width: 12px; height: 12px; vertical-align: 0; flex: none; }
@media (max-width: 800px) { .swatches-mini { display: none; } .fast-order { width: auto; } }

/* quantity exceeds UTT stock — the cells the backorder note points at */
.matrix .qty input.mx-bo-cell { background: var(--warn-pale); color: var(--warn); font-weight: 600; }
.matrix .qty:has(> input.mx-bo-cell) { border-color: var(--warn); }

/* live tier nudge above the matrix foot */
.mx-live { margin-top: 14px; }
.mx-live .callout { margin-bottom: 8px; }
.mx-live .callout:last-child { margin-bottom: 0; }