.jmi-fitment-block {
	margin-bottom: 15px;
	padding: 15px;
	border: 1px solid #d6dbe5;
	background: #f7f9fb;
	border-radius: 10px;
}

.jmi-fitment-title {
	margin-top: 0;
	font-weight: 700;
}

.jmi-fitment-item + .jmi-fitment-item {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e2e6ee;
}

.jmi-fitment-kit-list,
.jmi-fitment-pdfs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jmi-thule-kit-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-decoration: none;
}

.jmi-thule-kit-arrow {
	flex: 0 0 auto;
}

.jmi-thule-kit-title {
	font-size: 16px;
	font-weight: 600;
}

.jmi-fitment-tips {
	margin-top: 10px;
}

.jmi-fitment-tip + .jmi-fitment-tip {
	margin-top: 8px;
}

.jmi-fitment-notice {
	color: #666;
}

/* ⚠ THE KIT BLOCK'S OWN FRAME IS GONE - 2026-09-20, point 2. The cards it framed are a
   Journal Mini Products instance now, so their look belongs to Journal -> Stiilid and there
   is nothing here to style. What is left in this file is the older kit-link markup and the
   article page's length family, and neither styles a card. */

/* ⚠ "Teised pikkused" HAS NO CSS OF ITS OWN SINCE 2026-09-20. It is a radio group in the
   page's own option markup now (the kit page's, class for class), so Journal -> Stiilid ->
   Toote valikud governs it and the three rules that framed the old cards are gone with them. */

/* ⚠ THE FIT KIT IS GREY AND DOES NOT CLICK - the owner, 2026-09-20. Not decoration: it is
   the CAR that picks a fit kit, so there is no family page to send him to, and a card that
   looks clickable and is not is worse than one that says so. The card itself is Journal's
   ("Komplekti osad", a Mini Products instance); these two rules are the only thing this
   file has to say about it. */
.product-layout.kit-type-inert .side-product {
	opacity: .55;
}

.product-layout.kit-type-inert .side-product a,
.product-layout.kit-type-inert .side-product .quickview-button {
	pointer-events: none;
	cursor: default;
}

/* The length radio's spacing only - its look is the page's own option markup
   (.product-options / .option-radio / .filter-radio), which Journal -> Stiilid
   -> Toote valikud governs. Nothing here restyles a control. */
.jmi-kit-lengths {
	margin: 12px 0;
}

/* ⚠ THE ONE DECLARATION THIS FEATURE OWNS - 2026-09-21. A card icon keeps its GLYPH in CSS on the
   modifier, not in the markup: the compare icon this button now IS gets its own from
   `.btn-compare:before,.compare-btn:before{content:'\ead0' !important;font-family:icomoon !important}`.
   This replaces that character with `file-pdf-o` (f1c1) out of the same icomoon set, and says
   nothing else - no size, no colour, no radius, no border, no background, no spacing. The size, the
   bare look, the colour and the hover are the module's own rules for .btn-compare, unchanged.
   ⚠ `a…[href]` is what separates these from the card's REAL compare button, which carries
   role="button" and no href - so that one keeps its own glyph - and the specificity (five classes
   with the attribute, against Journal's one) is what wins without depending on which file the
   browser reads last (P113's cascade, 2026-09-11). */
.side-product .caption .button-group a.btn-compare[href]::before {
	content: '\f1c1' !important;
}
/* 207: the description's feature cards - the image fills the card, the sentence keeps the
   description's own font and size (nothing set here). */
.jmi-desc-carousel .jmi-desc-card-image img{display:block;width:100%;height:auto}
.jmi-desc-carousel .jmi-desc-card-text{margin-top:8px}
.jmi-desc-carousel .jmi-desc-card-text p{margin:0}

/* 207b: the text cards continue the row - same slide, stretched to the image cards' height; the
   rule between sentences is the theme's own border colour (the one between "Kirjeldus" and
   "Saatmine & tagastamine"); a thin scrollbar replaces the dots. */
/* 227: the row is Journal's auto-grid (1148's markup), so carousel_grid() drags both rows alike. The card keeps
   207's width - 1.5 per view, 12px apart - written as the auto-grid's own track variables; the grid row
   stretches the cards to one height. Horizontal scrolling: 1148's own declarations. */
.jmi-desc-carousel.auto-grid{--grid-min-col:1.5;--grid-gap:12px;--grid-min-width:calc((100% - (var(--grid-min-col) - 1) * var(--grid-gap)) / var(--grid-min-col));--fr:var(--grid-min-width);--scroll-padding:0px}
.jmi-desc-carousel .auto-grid-items{grid-auto-flow:column;overflow-x:auto;overflow-y:hidden;cursor:var(--cursor)}
.jmi-desc-carousel .jmi-desc-card--text{padding:12px 14px;box-sizing:border-box}
.jmi-desc-carousel .jmi-desc-card-line+.jmi-desc-card-line{margin-top:10px;padding-top:10px;border-top:1px solid hsla(var(--j-color-scheme-background-border-h),var(--j-color-scheme-background-border-s),var(--j-color-scheme-background-border-l),var(--j-color-scheme-background-border-a))}
.jmi-desc-carousel .jmi-desc-card-line p{margin:0}
.auto-grid .auto-carousel-bar.jmi-desc-scrollbar{position:relative;height:3px;margin-top:14px;background:hsla(var(--j-color-scheme-background-border-h),var(--j-color-scheme-background-border-s),var(--j-color-scheme-background-border-l),var(--j-color-scheme-background-border-a))}
.auto-grid .jmi-desc-scrollbar .auto-carousel-thumb{height:100%;background:currentColor;opacity:.55;cursor:grab}

/* 210: "Juhised" - the video at the column's full width, 16:9, poster first. */
.jmi-juhised .jmi-video{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.jmi-juhised .jmi-video-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.jmi-juhised .jmi-video-poster img{width:100%;height:100%;object-fit:cover;display:block}
.jmi-juhised .jmi-video-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(0,0,0,.7)}
.jmi-juhised .jmi-video-play:after{content:'';position:absolute;left:28px;top:14px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.jmi-juhised .jmi-video-frame{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 216: "Tehnilised andmed" - name left, value right on the same line, a 1px rule in the theme's border
   colour between rows; the font and size are the description's own (inherited, nothing set). */
.jmi-specs .jmi-spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid hsla(var(--j-color-scheme-background-border-h),var(--j-color-scheme-background-border-s),var(--j-color-scheme-background-border-l),var(--j-color-scheme-background-border-a))}
.jmi-specs .jmi-spec-name{flex:1 1 auto}
.jmi-specs .jmi-spec-value{flex:0 1 45%;text-align:right}
.jmi-specs .jmi-spec-heading{font-weight:700;margin:16px 0 4px}
/* 216 / 217: "Juhised" - the documents as the "Komplekti osad" cards' PDF icon (199), side by side, no
   text: the title is Journal's hover tooltip. The card's look (transparent button, padding .2em, no border,
   the theme's foreground-secondary) reproduced in this scope - the card's own rules are scoped to
   .module-side_products-1148 - but SIZED TO THE ROW'S TEXT (1em), not the card's font-size-200 (the
   owner: "proportsionaalne ülejäänud tekstiga"). */
.jmi-juhised .jmi-doc-links{display:flex;flex-wrap:wrap;align-items:center;gap:1em;margin-top:12px}
.jmi-juhised a.jmi-doc-link.btn{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;min-height:0;padding:.2em;border:0;border-radius:0;background:0 0;box-shadow:none}
/* ⚠ 220: Journal's generic `.btn,.btn:visited{color:button-foreground !important;font-size:font-size-500
   !important;line-height:1 !important}` painted the glyph button-foreground - white in scheme 1 - on the white
   panel, and overrode 217's 1em. The resting colour is the panel's ordinary TEXT colour (inherited: the page's
   body text, foreground-secondary), and the size the row's text; !important with more specificity wins. */
.jmi-juhised a.jmi-doc-link.btn,.jmi-juhised a.jmi-doc-link.btn:visited{color:inherit !important;font-size:1em !important;line-height:1 !important}
.jmi-juhised a.jmi-doc-link.btn-compare[href]::before{content:'\f1c1' !important;font-family:icomoon !important;font-size:1em}
.jmi-juhised .jmi-doc-link .jmi-doc-title{display:none}
/* 217: the ORANGE hover, one colour for both - the theme's accent, the variable the header cart button is
   painted with (--j-color-scheme-brand-primary-*). On the cards it colours the glyph, so Journal's own
   per-instance hover (which colours the button) cannot override it; instance 1148's record is untouched. */
.jmi-juhised a.jmi-doc-link:hover::before,
.module-side_products-1148 .side-product .btn-compare[href]:hover::before{color:hsla(var(--j-color-scheme-brand-primary-h),var(--j-color-scheme-brand-primary-s),var(--j-color-scheme-brand-primary-l),var(--j-color-scheme-brand-primary-a)) !important}

/* 220: THE ACCORDION'S OPEN / CLOSED MARKER - the category list's two circles (module 1147's own custom CSS:
   `--ring: calc(var(--ink) / 2)` - the diameter half the text -, `--ring-joon: 1px`, a filled circle
   `background-color: currentColor`, a ring `border: var(--ring-joon) solid currentColor`), reused on the product
   page's accordion. Journal draws the marker as the heading's ::before glyph (\e40b / \e40a, pushed right by
   `order:10; margin-left:auto`) and already hides the template's fa-caret-down; the ::before becomes the circle,
   the template stays Journal's. The owner: closed = filled, the heading's text colour, orange on hover; open =
   orange ring, the text colour on hover. Orange is 217's accent. Open / closed is Journal's own .panel-active
   (journal.js:226-232 on show / hide; the template sets it on a row open by default), not bootstrap's .collapsed,
   which the template prints on every heading. */
.product_accordion.panel-group .panel-heading a.accordion-toggle::before{content:"" !important;font-family:inherit !important;font-size:inherit !important;flex:0 0 auto;width:.5em;height:.5em;min-width:0;margin:0 0 0 auto;order:10;border-radius:50%;box-sizing:border-box;border:1px solid transparent;background:transparent;transform:none}
.product_accordion.panel-group .panel:not(.panel-active) .panel-heading a.accordion-toggle::before{content:"" !important;background-color:hsla(var(--j-color-scheme-foreground-primary-h),var(--j-color-scheme-foreground-primary-s),var(--j-color-scheme-foreground-primary-l),var(--j-color-scheme-foreground-primary-a)) !important;border-color:hsla(var(--j-color-scheme-foreground-primary-h),var(--j-color-scheme-foreground-primary-s),var(--j-color-scheme-foreground-primary-l),var(--j-color-scheme-foreground-primary-a)) !important}
.product_accordion.panel-group .panel:not(.panel-active) .panel-heading:hover a.accordion-toggle::before{background-color:hsla(var(--j-color-scheme-brand-primary-h),var(--j-color-scheme-brand-primary-s),var(--j-color-scheme-brand-primary-l),var(--j-color-scheme-brand-primary-a)) !important;border-color:hsla(var(--j-color-scheme-brand-primary-h),var(--j-color-scheme-brand-primary-s),var(--j-color-scheme-brand-primary-l),var(--j-color-scheme-brand-primary-a)) !important}
.product_accordion.panel-group .panel.panel-active .panel-heading a.accordion-toggle::before{content:"" !important;background-color:transparent !important;border-color:hsla(var(--j-color-scheme-brand-primary-h),var(--j-color-scheme-brand-primary-s),var(--j-color-scheme-brand-primary-l),var(--j-color-scheme-brand-primary-a)) !important}
.product_accordion.panel-group .panel.panel-active .panel-heading:hover a.accordion-toggle::before{content:"" !important;border-color:hsla(var(--j-color-scheme-foreground-primary-h),var(--j-color-scheme-foreground-primary-s),var(--j-color-scheme-foreground-primary-l),var(--j-color-scheme-foreground-primary-a)) !important}

/* ⚠ 222: THE GLYPH LEFT IN THE OPEN RING. Journal's open-state rule
   `.product_accordion.panel-group .panel-active .panel-heading a:before{content:'\e40a' !important}` is (0,4,2), as
   specific as 220's base `content:""` rule, and comes later, so its glyph stayed inside the ring. `content:""
   !important` now also sits on the state rules above (`.panel.panel-active` / `.panel:not(.panel-active)`, (0,6,2), and
   (0,7,2) with :hover), which beat it, and Journal's hover variant (0,6,2), whatever the source order.
   (The second "Komplekti osad" heading is left out of the row's render - ControllerJournal3ProductTabs, 222.) */

/* 226: "Komplekti osad" follows the Kirjeldus carousel (207 / 207b) - the owner: "Tee samal põhimõttel nagu
   kirjeldusel juba on tehtud." Record 1148 pins its arrows to the title line (position:relative; height:0;
   --auto-carousel-button-y:-20px), which since 222 is the accordion heading. In the row only, the arrows take the
   Kirjeldus arrows' rules (Journal's .swiper .swiper-buttons + the skin's 28px / calc(100% - (10px*2)), hidden on
   touch); colour, border and hover are already the same skin style. The bar the record hides is the 207b
   scrollbar (the rules above, extended). Journal's carousel_grid() does the drag. ⚠ 227: Kirjeldus is an auto-grid
   too now, and these rules are the ONE home of both rows' arrows. */
.jmi-kit-parts .module-side_products-1148 .auto-grid,.jmi-desc-carousel.auto-grid{--auto-carousel-button-width:28px;--auto-carousel-button-height:28px;--auto-carousel-button-y:0px;--cursor:grab}
.jmi-kit-parts .module-side_products-1148 .auto-carousel-buttons,.jmi-desc-carousel .auto-carousel-buttons{position:absolute;top:50%;left:50%;width:calc(100% - (10px*2));height:auto;margin:0;justify-content:space-between;transform:translate(-50%,-50%);z-index:2}
.jmi-kit-parts .module-side_products-1148 .auto-carousel-buttons span:before,.jmi-desc-carousel .auto-carousel-buttons span:before{font-size:inherit}
.touchevents .jmi-kit-parts .module-side_products-1148 .auto-carousel-buttons,.touchevents .jmi-desc-carousel .auto-carousel-buttons{display:none}
.jmi-kit-parts .auto-grid .auto-carousel-bar.jmi-desc-scrollbar,.jmi-desc-carousel .auto-carousel-bar.jmi-desc-scrollbar{display:block;max-height:none}

/* ⚠ 425 (the owner 10-15: „lause „Vajab sõidukile paigaldamiseks katuseraame" läheb pealkirja ja lühikirjelduse vahele sobivas
   proportsioonis"): the note between the title and the short description, by precedent the short description itself - the same
   font family, size and colour (foreground-secondary, as .product_extra-309 .block-content). The title keeps its margin (1em of
   its own size, --j-font_size-font-size--title-module); the note pulls up half of it and keeps the other half below, so the gap
   is split evenly and the total stays. Same order on the phone (one column). */
.product-info .product-details > div.jmi-requires-note {
  font-size: inherit;
  color: hsla(var(--j-color-scheme-foreground-secondary-h), var(--j-color-scheme-foreground-secondary-s), calc(var(--j-color-scheme-foreground-secondary-l) - 0%), calc(var(--j-color-scheme-foreground-secondary-a) * 1));
  margin-top: calc(var(--j-font_size-font-size--title-module, 0px) * -0.5);
  margin-bottom: calc(var(--j-font_size-font-size--title-module, 0px) * 0.5) !important;
}

/* 425: a word that opens a list (Journal's tooltip) - dotted as a hint it opens something; the list one item per line, left aligned */
.jmi-tip {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ⚠ 426 (the owner 10-15: „Teised laod … on tehtud punasena. Soovin, et see oleks sama värvi mis tavaliselt"): the trigger sits
   inside the availability value, which Journal colours by stock (.product-stats .in-stock / .out-of-stock span, 0,3,1); the trigger
   takes the info block's normal text colour instead - the body's foreground-secondary, which „Saadavus:" and „Sobib
   katuseraamidega" inherit. One class stronger than the stock rule, no !important. */
.product-info .product-stats .product-stock span.jmi-tip {
  color: hsla(var(--j-color-scheme-foreground-secondary-h), var(--j-color-scheme-foreground-secondary-s), calc(var(--j-color-scheme-foreground-secondary-l) - 0%), calc(var(--j-color-scheme-foreground-secondary-a) * 1));
}

.tooltip.jmi-tip-list .tooltip-inner {
  max-width: none;
  white-space: nowrap;
  text-align: start;
}