/* ==========================================================================
   aitas — single product page redesign (design pinned 2026-07-16, proto A r10)
   Enqueued is_product() only, after crypt.css + aitas-cart.css.
   Deploy marker (survives Rocket comment-stripping): --aitas-product-r1
   ========================================================================== */

/* ---- IBM Plex Mono — self-hosted, артикул values only (--mono-code) ------ */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/ibmplexmono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens (pinned r5/r10) ---------------------------------------------- */
.aitas-card-page,
.aitas-lb,
.aitas-sbar {
  --ink: #232323;
  --steel: #808696;
  --line: #E2ECF5;
  --wash: #F0F6FB;
  --canvas: #F8FBFF;
  --acc: #4F9AD0;
  --acc-deep: #1d80c7;
  --acc-soft: #EDF3F9;
  --green: #3dcc3b;
  --added: #0E9F6A;
  --imgwash: #EDF3F9;
  --navy: #000D2E;
  --sale: #D92D20;
  --sans: 'Raleway', system-ui, sans-serif;
  --mono-code: 'IBM Plex Mono', ui-monospace, monospace;
  --cardshadow: 0 1px 2px rgba(16, 24, 40, .05);
  --aitas-product-r1: 1; /* deploy/freshness marker */
  --aitas-product-r12: 1; /* r12 2026-07-17: gallery counter/rail fade + desc clamp */
  --aitas-product-r13: 1; /* r13 2026-07-17: rail lane + 6-thumb block, order-state centring, reviews off */
  --aitas-product-r14: 1; /* r14 2026-07-17: 8.5-thumb block, counter left, price-less pills + OOS grey, animated sbar mode */
  --aitas-product-r15: 1; /* r15 2026-07-17: no disabled-grey flash on the ATC button, no chip-text flash in the sbar fade */
  --aitas-product-r16: 1; /* r16 2026-07-17: «Комплектація» kit card in the desc section (two-column grid, variation-synced) */
  --aitas-product-r16b: 1; /* r16b 2026-07-17: «Комплектація» section-nav item (anchor #s-kit, mobile-only IO tracking) */
  --aitas-product-r16c: 1; /* r16c 2026-07-17: preselect-resolved first paint (no nav/card pop-in), snav pads 11→9 */
  --aitas-product-r17: 1; /* r17 2026-07-18: specs show all rows at once — «Всі характеристики» cap+expander removed */
}

/* the sticky section nav needs #main un-clipped (style.css: #main{overflow:hidden}) */
body.single-product #main { overflow: visible; }

/* ---- page container ------------------------------------------------------ */
.aitas-card-page {
  max-width: 1328px;
  margin: 0 auto;
  padding: 0 24px 8px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.aitas-card-page *, .aitas-card-page *::before, .aitas-card-page *::after { box-sizing: border-box; }
.aitas-card-page img { max-width: 100%; height: auto; }
.aitas-card-page button { cursor: pointer; font-family: inherit; }
.aitas-card-page :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 700px) { .aitas-card-page { padding: 0 12px 4px; } }

/* product-page breadcrumbs: spacing tune on top of the site-wide compact style */
.aitas-card-page div.broadcrumb_section { padding: 14px 2px 10px; margin: 0; }

/* ---- section nav — slim sticky pill bar under the crumbs ----------------- */
.aitas-snav { position: -webkit-sticky; position: sticky; top: 64px; z-index: 980; margin-bottom: 10px; }
.aitas-snav__in {
  display: flex; width: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--cardshadow); padding: 3px;
}
.aitas-snav__in::-webkit-scrollbar { display: none; }
.aitas-snav a {
  /* 9px pads + the 2px gap = uniform tab rhythm (r16c — was 11px; the "uneven
     spacing" read was the active pill's fill edge, geometry was always equal) */
  flex: 0 0 auto; padding: 5px 9px; font-size: 13px; font-weight: 600;
  color: var(--steel); border-radius: 6px; text-decoration: none; transition: .15s;
}
.aitas-snav a:hover { color: var(--ink); background: var(--wash); }
.aitas-snav a.is-on { color: var(--acc-deep); background: var(--acc-soft); }

/* ---- hero: two symmetrical cards ----------------------------------------- */
.aitas-hero {
  display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 16px; align-items: stretch; padding-bottom: 16px; scroll-margin-top: 118px;
}
@media (max-width: 960px) { .aitas-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 12px; } }
.aitas-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--cardshadow); }
.aitas-gcard { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.aitas-scard { padding: 24px; display: flex; flex-direction: column; }
@media (max-width: 700px) { .aitas-gcard { padding: 12px; } .aitas-scard { padding: 18px; } }

/* ---- gallery (desktop build; the mobile Swiper module replaces it on touch) */
/* min-width:0 down the flex chain is LOAD-BEARING (r11): the mobile module's
   Swiper sizes slides from its container; a flex item's default min-width:auto
   sizes the container from content — the feedback loop saturates Blink's
   LayoutUnit (scrollWidth 2^25, layout viewport blown to 1560 on a 390 phone).
   Proven by verify-m toggle 2026-07-16. */
.aitas-pgroot { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.aitas-pgroot .aitas-gallery, .aitas-pgroot .aitas-gallery-main { min-width: 0; max-width: 100%; }
.aitas-pgroot .woocommerce-product-gallery__trigger { display: none !important; }
.aitas-pgroot.aitas-mobile-on .aitas-pg { display: none; }
/* height:472px is the DEFINITE base (grows via flex when the summary card is
   taller) — without it the row resolves from the slide image's natural height
   and a tall photo stretches the whole hero (the r12 900px cards).
   flex-basis must be AUTO (not the shorthand's 0%): with basis 0% the flex
   sizing contribution comes from CONTENT, the intrinsic image heights leak up
   the chain and the 472px cap never applies (measured live, r13).
   minmax(0,1fr) row makes the viewport fill exactly the set height, so
   max-height:100% finally clamps the image. */
.aitas-pg { flex: 1 1 auto; min-height: 0; height: 676px; display: grid; grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; }
.aitas-pg--empty, .aitas-pg.aitas-pg--norail { grid-template-columns: 1fr; }
.aitas-pg__vp {
  position: relative; min-height: 676px; height: 100%; /* 676 = 8.5 thumbs (8×72 + 8×8 + 36) — the 9th half-shows under the rail fade (owner r14; was 6/472 in r13) */
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fff; cursor: zoom-in; touch-action: pan-y;
}
.aitas-pg--empty .aitas-pg__vp { cursor: default; }
.aitas-pg__track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.22, .8, .24, 1); }
.aitas-pg__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 32px; min-width: 0; }
.aitas-pg__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.aitas-pg__zoom {
  position: absolute; inset: 0; z-index: 2; background-repeat: no-repeat; background-size: 230%;
  background-color: #fff; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.aitas-pg.is-zooming .aitas-pg__zoom { opacity: 1; }
.aitas-pg__expand {
  position: absolute; right: 12px; top: 12px; z-index: 5; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .95);
  color: var(--steel); display: flex; align-items: center; justify-content: center; transition: .18s; padding: 0;
}
.aitas-pg__expand:hover { color: var(--acc-deep); border-color: var(--acc); }
.aitas-pg__expand svg { width: 18px; height: 18px; }
/* rail (r13, owner 2026-07-17): 72px thumb column + a clear 14px scrollbar lane
   between the thumbs and the photo (the 86px grid column) — the scrollbar
   overlaps neither. The rail is ABSOLUTE inside its column so thumbs can never
   stretch the hero: the block is sized by the viewport (~6 thumbs), extra
   thumbs scroll vertically. Bottom fade overlay is toggled by JS (.has-more). */
.aitas-pg__railw { position: relative; }
.aitas-pg__rail {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overflow-x: hidden; padding-right: 14px;
}
/* slim seamless scrollbar. Blink/WebKit take the 4px custom one — honored only
   while scrollbar-width/scrollbar-color stay UNSET there (Chrome 121+ ignores
   ::-webkit-scrollbar otherwise — that was the fat bar overlapping the thumbs);
   Firefox gets thin native via the @supports gate. */
.aitas-pg__rail::-webkit-scrollbar { width: 4px; }
.aitas-pg__rail::-webkit-scrollbar-thumb { background: #C9DEF0; border-radius: 4px; }
.aitas-pg__rail::-webkit-scrollbar-track { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .aitas-pg__rail { scrollbar-width: thin; scrollbar-color: #C9DEF0 transparent; }
}
.aitas-pg__railfade {
  position: absolute; left: 0; right: 14px; bottom: 0; height: 52px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.aitas-pg__railw.has-more .aitas-pg__railfade { opacity: 1; }
.aitas-pg__thumb {
  width: 72px; height: 72px; padding: 6px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; transition: .15s; flex: 0 0 auto;
}
/* minimal image counter, e.g. «3 / 12», bottom-LEFT (owner r14; was right); hidden while zooming */
.aitas-pg__count {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 99px;
  background: rgba(255, 255, 255, .92); color: var(--steel);
  font-size: 12px; font-weight: 600; letter-spacing: .03em; line-height: 1.4;
  pointer-events: none; transition: opacity .2s ease;
}
.aitas-pg.is-zooming .aitas-pg__count { opacity: 0; }
.aitas-pg__thumb img { width: 100%; height: 100%; object-fit: contain; }
.aitas-pg__thumb:hover { border-color: #B9C4D4; }
.aitas-pg__thumb.is-on { border-color: var(--acc-deep); box-shadow: 0 0 0 1px var(--acc-deep); }
@media (max-width: 960px) {
  .aitas-pg { grid-template-columns: 70px minmax(0, 1fr); height: 540px; }
  .aitas-pg__vp { min-height: 540px; } /* 8.5 × 56px thumbs + gaps (r14) */
  .aitas-pg__thumb { width: 56px; height: 56px; }
  .aitas-pg__slide { padding: 16px; }
}

/* the kept mobile gallery module, restyled to sit in the card (nothing behavioral) */
.aitas-gcard .aitas-gallery-main { border: 1px solid var(--line); border-radius: 12px; }
.aitas-gcard .aitas-gallery-thumbs .swiper-slide { border-radius: 8px; border-color: var(--line); }
.aitas-gcard .aitas-gallery-thumbs .swiper-slide-thumb-active { border-color: var(--acc-deep); }

/* ---- summary card -------------------------------------------------------- */
.aitas-scard h1.product_title {
  font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em;
  margin: 0; padding: 0 0 8px; color: var(--ink); border: 0;
}
.aitas-raterow { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; font-size: 13px; }
.aitas-raterow__link { color: var(--acc-deep); text-decoration: none; font-weight: 600; }
.aitas-raterow__link:hover { text-decoration: underline; }

.aitas-stock { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--green); padding-bottom: 16px; }
.aitas-stock__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.aitas-stock__qty { color: var(--steel); font-weight: 500; }

/* datasheet rows; margin-bottom:auto bottom-anchors the buy zone (r3) */
.aitas-specs { border-top: 1px solid var(--line); margin-bottom: auto; padding-bottom: 20px; }
.aitas-spec { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 700px) { .aitas-spec { grid-template-columns: 118px 1fr; gap: 10px; } }
.aitas-spec__k { color: var(--steel); text-transform: uppercase; font-size: 10.5px; letter-spacing: .09em; padding-top: 3px; }
.aitas-spec__v { font-weight: 500; overflow-wrap: anywhere; }
.aitas-spec--sku .aitas-spec__v { font-family: var(--mono-code); font-weight: 500; font-size: 12.5px; letter-spacing: .04em; }
.aitas-brandlink { color: var(--acc-deep); font-weight: 600; text-decoration: none; }
.aitas-brandlink:hover { text-decoration: underline; }
.aitas-specs__extra { display: contents; }

/* ---- variation pills (skin over the native machinery) -------------------- */
.aitas-attr { padding: 18px 0; }
.aitas-attr__l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--steel); margin-bottom: 9px; }
.aitas-pills { display: flex; flex-wrap: wrap; gap: 9px; }
/* pills are label-only (owner r14 — prices live in the buy zone alone); OOS
   pills grey out slightly but STAY clickable (selecting one shows «Замовити») */
.aitas-pill {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; transition: .15s; text-align: left;
}
.aitas-pill:hover { border-color: #B9C4D4; }
.aitas-pill.is-on { border-color: var(--acc-deep); background: var(--acc-soft); box-shadow: 0 0 0 1px var(--acc-deep); }
.aitas-pill__t { font-weight: 600; font-size: 14px; color: var(--ink); }
.aitas-pill--oos { opacity: .55; }
.aitas-pill--oos:hover { opacity: .8; }
.aitas-pill--oos.is-on { opacity: .85; }

/* native variation controls: present for WC's JS + a11y, visually silent */
table.variations.aitas-native-hidden {
  /* display:block matters: a TABLE treats width as a minimum and would keep its
     natural 1280px box, bleeding past the viewport (#main no longer clips) */
  display: block; position: absolute !important;
  width: 1px !important; height: 1px !important; /* !important: WC core sets form.cart .variations width:100% at higher specificity */
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aitas-card-page .reset_variations { display: none !important; }
.aitas-card-page .woocommerce-variation.single_variation { display: none !important; }

/* ---- buy zone (round-10 mockup) ------------------------------------------ */
.aitas-buyzone { background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 13px; }
/* div.product raises specificity above WC core's `.woocommerce div.product form.cart
   { margin-bottom: 2em }` — that 30px was the gap under the buy zone (owner r11) */
.aitas-card-page div.product form.cart, .aitas-card-page div.product form.variations_form { margin: 0; }
.aitas-pricerow { display: flex; align-items: center; gap: 10px; }
.aitas-price { flex: 0 0 auto; min-width: 124px; font-weight: 700; font-size: 29px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
/* price centred against the qty counter below it (owner r11) */
.aitas-pricerow .aitas-price { justify-content: center; }
.aitas-price__old, .aitas-price del { font-size: 17px; color: #98A2B3; font-weight: 500; text-decoration: line-through; }
.aitas-price__cur--sale { color: var(--sale); }
.aitas-atcslot { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.aitas-buyrow { display: flex; gap: 10px; align-items: stretch; }
.aitas-buyrow .aitas-qty { flex: 0 0 auto; }

/* native qty input + theme ± buttons, new skin (prototype counter 1:1).
   Every property crypt.css sets on its GLOBAL .plus/.minus (24px circles,
   border-radius 24, margins 5-10px — the cart-page skin) is overridden here,
   or the steppers collapse into floating chips (owner r11). */
.aitas-qty .quantity { display: flex; align-items: stretch; width: 124px; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.aitas-qty .quantity .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.aitas-qty .quantity .minus, .aitas-qty .quantity .plus {
  flex: 0 0 40px; width: 40px; height: auto; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; margin: 0; padding: 0;
  background: #fff; color: var(--steel); font-size: 18px; line-height: 1;
}
.aitas-qty .quantity .minus:hover, .aitas-qty .quantity .plus:hover { background: var(--wash); color: var(--ink); }
.aitas-qty .quantity input.qty {
  flex: 0 0 44px; width: 44px; border: 0; text-align: center; font: 600 15px var(--sans); color: var(--ink);
  background: #fff; -moz-appearance: textfield; appearance: textfield; padding: 0; margin: 0; border-radius: 0; height: auto;
}
.aitas-qty .quantity input.qty::-webkit-outer-spin-button, .aitas-qty .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* «Купити» — the native submit button, new skin (shape pinned: radius 10, h 48).
   The .woocommerce/.button.alt selector weight beats WC core's purple
   (plugins/woocommerce/assets/css/woocommerce.css styles button.button.alt
   #7f54b3 radius 3 — it used to lose to the old .entry-summary skin). */
.woocommerce button.button.alt.aitas-buy,
.woocommerce button.button.alt.aitas-buy.disabled,
.woocommerce button.button.alt.aitas-buy:disabled,
.aitas-buy {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 10px; background: var(--acc); color: #fff;
  font-weight: 600; font-size: 15.5px; font-family: var(--sans); height: 48px;
  transition: .18s; text-decoration: none; padding: 0 18px; line-height: 1;
  /* opacity 1 also while .disabled: WC core greys the ATC button (opacity .5)
     and lifts it on a deferred show_variation — with the pills UI an OOS
     selection hides the button entirely, so the grey state is never a needed
     cue and only ever showed as a ~.3s flash after an OOS→in-stock switch
     (owner r15). Trade-off: in the native-selects fallback UI (multi-axis
     products — zero today) a truly disabled button shows full-color. */
  opacity: 1;
}
.woocommerce button.button.alt.aitas-buy:hover, .woocommerce button.button.alt.aitas-buy:focus,
.aitas-buy:hover, .aitas-buy:focus { background: var(--acc-deep); color: #fff; outline: none; }
.aitas-buy.loading { opacity: .6; pointer-events: none; }
.aitas-buy__ic { display: flex; }
.aitas-buy__ic svg { width: 19px; height: 19px; }

/* «Замовити» (OOS / order-only, r13 owner 2026-07-17): no price anywhere in the
   zone — the «Замовити» control alone, sized like «Купити» (zone width minus
   the 124px qty column + 10px gap) and centred both ways. The buyzone
   min-height pins the zone to its in-stock two-row size so switching between
   in-stock and OOS variations doesn't resize it. Both our .aitas-orderbtn and
   the theme filter's .btn_blue anchor get the same skin. */
.aitas-buyzone { min-height: 142px; justify-content: center; } /* 142 = the in-stock two-row stack (141.4 measured) — both states render equal */
.aitas-orderrow { display: none; }
form.aitas-oos .aitas-orderrow { display: flex; justify-content: center; }
form.aitas-oos .aitas-buyrow { display: none; }
/* the emptied variation wrap must leave the flex flow too, or its column gap
   pushes «Замовити» 13px off-centre */
form.aitas-oos .single_variation_wrap { display: none; }
form.aitas-oos .aitas-pricerow, form.aitas-order-only .aitas-pricerow { display: none; }
.aitas-orderrow .aitas-orderbtn { flex: 0 1 auto; width: calc(100% - 134px); }
.aitas-buyzone .aitas-orderbtn, .aitas-buyzone .btn_blue {
  display: flex; align-items: center; justify-content: center;
  background: var(--acc); color: #fff !important; border-radius: 10px; height: 48px;
  font-weight: 600; font-size: 15.5px; line-height: 1; text-decoration: none; padding: 0 22px; border: 0; transition: .18s;
}
.aitas-buyzone .aitas-orderbtn:hover, .aitas-buyzone .btn_blue:hover { background: var(--acc-deep); }
.aitas-buyzone--order .aitas-pricerow { justify-content: center; }
.aitas-buyzone--order .aitas-price { min-width: 0; flex: 1 1 auto; justify-content: center; }
.aitas-buyzone--order .aitas-orderbtn, .aitas-buyzone--order .btn_blue { width: calc(100% - 134px); }

/* quiet-add control: base styles ride aitas-cart.css; only placement here */
.aitas-atcslot .aitas-atc { padding: 6px 2px; }

/* ---- materials chips under the buy zone ---------------------------------- */
.aitas-matchips { display: flex; gap: 8px; padding-top: 16px; flex-wrap: wrap; }
.aitas-matchip {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--steel); border: 1px solid var(--line); border-radius: 99px;
  padding: 7px 13px; transition: .15s; background: #fff; text-decoration: none;
}
.aitas-matchip:hover { color: var(--acc-deep); border-color: var(--acc); }
.aitas-matchip__ic { display: flex; }
.aitas-matchip__ic svg { width: 14px; height: 14px; }

/* ---- sections as cards ---------------------------------------------------- */
.aitas-sect {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--cardshadow); padding: 26px; margin-bottom: 16px; scroll-margin-top: 118px;
}
@media (max-width: 700px) { .aitas-sect { padding: 18px; } }
.aitas-sect__t { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.aitas-sect__t h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; flex: 0 0 auto; margin: 0; color: var(--ink); }
.aitas-sect__t::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.aitas-lead { font-size: 16.5px; font-weight: 500; color: var(--ink); max-width: 800px; margin-bottom: 14px; }
.aitas-lead p { margin: 0 0 8px; }
/* long-description clamp (owner 2026-07-17): JS adds .is-clamped only when the
   text overflows the cap; the fade sits at the bottom of the collapsed box */
.aitas-descwrap { position: relative; }
.aitas-descwrap.is-clamped { max-height: 380px; overflow: hidden; }
.aitas-descwrap.is-clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
}
.aitas-desc__more {
  display: block; border: 0; background: none; text-align: left;
  color: var(--acc-deep); font-weight: 600; font-size: 13.5px; padding: 10px 0 0;
}
.aitas-desc__more:hover { text-decoration: underline; }

.aitas-prose { max-width: 800px; color: #344054; overflow-wrap: anywhere; }
.aitas-prose p { margin: 0 0 12px; }
.aitas-prose ul, .aitas-prose ol { list-style: disc; margin: 0 0 14px 18px; padding: 0; }
.aitas-prose ol { list-style: decimal; }
.aitas-prose li { margin-bottom: 5px; }
.aitas-prose img { max-width: 100%; height: auto; }
.aitas-prose table { max-width: 100%; }
.aitas-prose a { color: var(--acc-deep); }

/* ---- «Комплектація» — kit/bundle contents card (r16) ---------------------
   Text | card two-column grid; the card is OUTSIDE the clamp wrapper so it
   stays visible while a long description collapses. Without kit content the
   .aitas-descgrid/.aitas-desccol wrappers are layout-neutral plain blocks —
   the section renders exactly as before. */
.aitas-descgrid.has-kit { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
/* in the two-column mode the column IS the reading measure — drop the 800px caps */
.aitas-descgrid.has-kit .aitas-lead, .aitas-descgrid.has-kit .aitas-prose { max-width: none; }
.aitas-desccol { min-width: 0; }
.aitas-kit { background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 6px; scroll-margin-top: 118px; }
.aitas-kit[hidden] { display: none; }
.aitas-snav a[hidden] { display: none; } /* «Комплектація» nav link hides with the card */
.aitas-kit__t {
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--ink);
}
.aitas-kit__t svg { width: 18px; height: 18px; color: var(--acc-deep); flex: 0 0 auto; }
.aitas-kit__list { list-style: none; margin: 0; padding: 0; }
.aitas-kit__row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.aitas-kit__row:last-child { border-bottom: 0; }
.aitas-kit__row--plain { grid-template-columns: minmax(0, 1fr); }
.aitas-kit__q {
  font-family: var(--mono-code); font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
  color: var(--acc-deep); background: #fff; border: 1px solid var(--line); border-radius: 7px;
  text-align: center; padding: 3px 2px; margin-top: 1px;
}
.aitas-kit__q i { font-style: normal; color: var(--steel); margin-left: 1px; }
.aitas-kit__n { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); padding-top: 3px; overflow-wrap: anywhere; }
.aitas-kit__d { display: block; font-size: 12.5px; font-weight: 400; color: var(--steel); margin-top: 2px; }
@media (max-width: 960px) {
  .aitas-descgrid.has-kit { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .aitas-kit { padding: 14px 16px 4px; }
}

/* ---- materials hub -------------------------------------------------------- */
.aitas-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; max-width: 1000px; }
.aitas-mat {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; background: #fff; text-align: left;
  transition: .15s; text-decoration: none; color: var(--ink);
}
.aitas-mat:hover { border-color: var(--acc); color: var(--ink); }
.aitas-mat__ic { flex: 0 0 44px; height: 44px; border-radius: 10px; background: var(--wash); display: flex; align-items: center; justify-content: center; color: var(--acc-deep); }
.aitas-mat__ic svg { width: 20px; height: 20px; }
.aitas-mat__poster { position: relative; flex: 0 0 76px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--wash); }
.aitas-mat__poster img { width: 100%; height: 100%; object-fit: cover; }
.aitas-mat__play { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(16, 24, 40, .75); color: #fff; display: flex; align-items: center; justify-content: center; }
.aitas-mat__play svg { width: 13px; height: 13px; }
.aitas-mat__name { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.aitas-mat__meta { display: block; font-size: 11.5px; color: var(--steel); margin-top: 3px; }

/* ---- payment & delivery — two wash columns (ported from the pinned proto) - */
.aitas-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; max-width: 800px; }
.aitas-pay__col { background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.aitas-pay__col h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--steel); margin: 0 0 10px; font-weight: 700; }
.aitas-pay__col ul { list-style: none; margin: 0; padding: 0; }
.aitas-pay__col li { padding-left: 18px; position: relative; margin-bottom: 7px; font-size: 13.5px; color: #344054; }
.aitas-pay__col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }

/* ---- video lightbox (materials hub: YouTube / Instagram / file) ----------- */
.aitas-vlb { position: fixed; inset: 0; z-index: 99900; display: none; align-items: center; justify-content: center; }
.aitas-vlb.is-open { display: flex; }
.aitas-vlb__bg { position: absolute; inset: 0; background: rgba(8, 12, 20, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aitas-vlb__box { position: relative; z-index: 2; width: min(960px, calc(100vw - 32px)); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.aitas-vlb__box--insta { width: min(420px, calc(100vw - 32px)); aspect-ratio: auto; height: min(640px, calc(100dvh - 120px)); background: #fff; }
.aitas-vlb__box iframe, .aitas-vlb__box video { width: 100%; height: 100%; border: 0; display: block; }
.aitas-vlb__close { position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.aitas-vlb__close:hover { background: rgba(255, 255, 255, .24); }
.aitas-vlb__close svg { width: 20px; height: 20px; }

/* ---- related — horizontal scroll-snap row --------------------------------- */
.aitas-rel { display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 14px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; }
.aitas-rcard {
  scroll-snap-align: start; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fff;
  transition: .15s; text-decoration: none; color: var(--ink);
}
.aitas-rcard:hover { border-color: var(--acc); color: var(--ink); }
.aitas-rcard__imgw { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--imgwash); border-radius: 10px; padding: 12px; }
.aitas-rcard__imgw img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.aitas-rcard__cat { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--steel); }
.aitas-rcard__t {
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.aitas-rcard__p { font-weight: 600; font-size: 14px; margin-top: auto; color: var(--ink); }
.aitas-rcard__p .aitas-price__cur { font-size: 14px; font-weight: 600; }
.aitas-rcard__p .aitas-price__old { font-size: 12px; margin-right: 6px; }
.aitas-rcard__p .aitas-price__cur--sale { color: var(--sale); }
.aitas-rcard__p--order { color: var(--green); font-weight: 600; font-size: 12.5px; }

/* ---- reviews (silent at zero — minimal shell) ----------------------------- */
.aitas-reviews { max-width: 800px; }

/* ---- sticky mobile buy bar ------------------------------------------------ */
.aitas-sbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 960;
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
  display: none; flex-direction: column; gap: 8px;
  transform: translateY(110%); transition: transform .25s ease;
}
.aitas-sbar.is-visible { transform: none; }
/* pills fill the width at low counts (flex-grow) but never shrink below their
   label — at high counts (>4, e.g. 9-variation кюрети) the row scrolls instead
   of squeezing labels into unreadable stubs */
.aitas-sbar__pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.aitas-sbar__pills::-webkit-scrollbar { display: none; }
.aitas-sbar__pills:empty { display: none; }
.aitas-sbar__pill {
  flex: 1 0 auto; min-width: 0; max-width: 60vw; display: flex; align-items: center; justify-content: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aitas-sbar__pill.is-on { border-color: var(--acc-deep); background: var(--acc-soft); color: var(--acc-deep); }
.aitas-sbar__pill--oos { opacity: .55; } /* OOS grey-out transfers from the main pills (owner r14) */
.aitas-sbar__pill--oos.is-on { opacity: .85; }
/* Купити↔Замовити now ANIMATES (owner r14, was display:none jumps): the row
   uses a margin-gap + flex-GROW transitions — grow is numeric, so the price
   chip (grow 1→.5, fading out) and the trailing spacer (0→.5) reflow smoothly
   and the button slides from its right half to a centred half-row width
   (the r13 geometry, unchanged at rest). */
.aitas-sbar__row { display: flex; align-items: center; }
.aitas-sbar__price {
  flex: 1 1 0; min-width: 0; height: 44px; margin-right: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--ink);
  background: var(--acc-soft); border: 1px solid #C9DEF0; border-radius: 10px;
  white-space: nowrap; overflow: hidden;
  transition: flex-grow .28s ease, margin .28s ease, opacity .18s ease;
}
.aitas-sbar__sp { flex: 0 1 0; min-width: 0; transition: flex-grow .28s ease; }
.aitas-sbar .aitas-buy { flex: 1 1 0; min-width: 0; height: 44px; }
.aitas-sbar .aitas-buy__ic {
  flex: 0 0 auto; width: 19px; overflow: hidden; justify-content: flex-start;
  transition: width .25s ease, margin .25s ease, opacity .18s ease;
}
.aitas-sbar--order .aitas-sbar__price { flex-grow: .5; margin-right: 0; opacity: 0; }
.aitas-sbar--order .aitas-sbar__sp { flex-grow: .5; }
.aitas-sbar--order .aitas-buy__ic { width: 0; margin-right: -10px; opacity: 0; } /* -10px cancels the button's gap */
/* simple-OOS renders the bare «Замовити» anchor (no chip/spacer in the DOM —
   static state, nothing to animate): centre it at the same half width */
.aitas-sbar--order .aitas-sbar__row { justify-content: center; }
.aitas-sbar--order .aitas-sbar__row a.aitas-buy { flex: 0 1 calc(50% - 3px); }
@media (max-width: 960px) { .aitas-sbar { display: flex; } }

/* ---- lightbox (desktop; ported from the pinned prototype) ----------------- */
.aitas-lb { position: fixed; inset: 0; z-index: 99900; display: none; font-family: var(--sans); }
.aitas-lb.is-open { display: block; }
.aitas-lb__bg { position: absolute; inset: 0; background: rgba(8, 12, 20, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aitas-lb__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.aitas-lb__stage img {
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 140px);
  user-select: none; will-change: transform; transition: transform .18s ease-out;
  background: #fff; border-radius: 8px;
}
.aitas-lb__stage img.no-anim { transition: none; }
.aitas-lb__close, .aitas-lb__nav {
  position: absolute; z-index: 3; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.aitas-lb__close { top: 14px; right: 14px; width: 44px; height: 44px; }
.aitas-lb__close svg { width: 20px; height: 20px; }
.aitas-lb__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.aitas-lb__nav svg { width: 22px; height: 22px; }
.aitas-lb__prev { left: 14px; }
.aitas-lb__next { right: 14px; }
.aitas-lb__nav:hover, .aitas-lb__close:hover { background: rgba(255, 255, 255, .24); }
.aitas-lb__meta { position: absolute; top: 20px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .75); font-size: 13px; letter-spacing: .06em; z-index: 2; }
.aitas-lb__thumbs { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 8px; justify-content: center; z-index: 3; }
.aitas-lb__thumbs button { width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; opacity: .6; transition: .15s; }
.aitas-lb__thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.aitas-lb__thumbs button.is-on { opacity: 1; border-color: #fff; }
@media (max-width: 700px) { .aitas-lb__nav { display: none; } .aitas-lb__thumbs button { width: 44px; height: 44px; } }

/* ---- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aitas-card-page *, .aitas-sbar, .aitas-lb__stage img, .aitas-pg__track { transition: none !important; animation: none !important; }
}