/* ==========================================================================
   Single product (plan 05) — board Product.dc.html / MobileProduct.dc.html
   ========================================================================== */

/* Remove the grey "transparent" band, 50/50 columns on desktop */
.product-layout-transparent .product-summary-wrap,
.product-layout-transparent .product-summary-wrap::before,
.product-layout-transparent .product-summary-wrap::after { background: transparent !important; }
/* Board grid: 1280px of content between 24px gutters (x=80 at 1440, like the header, footer and catalog), 16px on phones.
   Porto's css-code sets .container to 1404px at ≥1440. Breadcrumbs, product block, tabs and related share these edges. */
body.single-product .page-top > .container,
body.single-product #main > .container,
body.single-product .related.products > .container { max-width: 1328px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 575px) {
	body.single-product .page-top > .container,
	body.single-product #main > .container,
	body.single-product .related.products > .container { padding-left: 16px; padding-right: 16px; }
}
/* Breadcrumbs → product block 20px (board): drop Porto's 35px content top padding; the wrap keeps 20px. */
body.single-product .main-content-wrap > .main-content { padding-top: 0; padding-bottom: 0; }
#main.boxed .product-layout-transparent .product-summary-wrap,
.product-layout-transparent .product-summary-wrap { padding-top: 20px; padding-bottom: 0; margin-bottom: 48px; }
.product-layout-transparent .product-summary-wrap .summary > :last-child { margin-bottom: 0; }
/* transparent.css: .summary{padding-top:10px;margin-bottom:40px}, .summary-before{margin-bottom:29px}, and #main.boxed variants by ID.
   Board: the eyebrow is level with the photo's top; the section ends 48px under the taller column; 48px between the
   gallery and the summary when they stack (< 992px). */
#main .product-layout-transparent .product-summary-wrap > .row > .summary { padding-top: 0; margin-bottom: 0; }
#main .product-layout-transparent .product-summary-wrap > .row > .summary-before { margin-bottom: 48px; }
@media (min-width: 992px) {
	#main .product-layout-transparent .product-summary-wrap > .row > .summary-before { margin-bottom: 0; }
}
@media (min-width: 992px) {
	/* Two 616px columns with a 48px gap at 1440 (board): no Bootstrap row offset, 24px inner padding on each side of the gap. */
	.product-layout-transparent .product-summary-wrap > .row { margin-left: 0; margin-right: 0; }
	.product-layout-transparent .product-summary-wrap > .row > .summary-before,
	.product-layout-transparent .product-summary-wrap > .row > .summary { flex: 0 0 50%; max-width: 50%; margin-bottom: 0; }
	.product-layout-transparent .product-summary-wrap > .row > .summary-before { padding-left: 0; padding-right: 24px; }
	.product-layout-transparent .product-summary-wrap > .row > .summary { padding-left: 24px; padding-right: 0; }
}

/* Summary: eyebrow, H1, price row */
.mk-product-eyebrow { margin: 0 0 18px; font-size: 14px; color: var(--mk-ink-2); }
.mk-product-eyebrow a { color: inherit; text-decoration: none; }
.mk-product-eyebrow a:hover, .mk-product-eyebrow a:focus-visible { color: var(--mk-red); }
.product .summary .mk-product-title { margin: 0 0 18px; padding: 0; font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--mk-ink); letter-spacing: -0.01em; text-transform: none; }
.mk-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 18px 0; border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-price-row__main { display: flex; align-items: baseline; gap: 10px; }
.product .summary .mk-price-row .price { margin: 0; font-size: 40px; line-height: 1; font-weight: 700; color: var(--mk-ink); letter-spacing: -0.01em; }
.mk-price-row__unit { font-size: 14px; color: var(--mk-ink-2); }
.mk-stock { gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 14px; } /* board: pill */
.mk-stock svg { flex: 0 0 16px; }

@media (max-width: 767px) {
	.product .summary .mk-product-title { font-size: 26px; }
	.product .summary .mk-price-row .price { font-size: 32px; }
}

/* Spec block 2×2 */
.mk-specs { margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); overflow: hidden; font-size: 14px; }
.mk-specs__item { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--mk-line); }
.mk-specs__item:nth-child(odd) { border-right: 1px solid var(--mk-line); }
.mk-specs__item:last-child,
.mk-specs__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.mk-specs dt { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--mk-ink-2); }
.mk-specs dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--mk-ink); }

/* Tabs — full width under the summary. transparent.css turns tabs into an accordion; restore tabs from 768px. */
/* Board: 48px above (the summary section's bottom padding), 56px below (above «Інші календарі серії»).
   #product-tab: transparent.css sets margin-bottom 1.25rem by ID, so the ID is needed here too. */
body.single-product #product-tab.woocommerce-tabs { margin: 0 0 56px; padding: 0; }
@media (min-width: 768px) {
	body.single-product .woocommerce-tabs .resp-tabs-list { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--mk-line); }
	body.single-product .woocommerce-tabs h2.resp-accordion { display: none !important; }
}
/* Porto only-product.css: `.woocommerce-tabs .resp-tabs-list li{padding:7px 0!important;color:#818692!important;
   text-transform:uppercase;margin-right:35px;border-bottom:2px solid transparent!important}` and `.resp-tab-active{margin-bottom:-1px!important;
   padding:12px 14px 14px!important}` — all overridden: board tab = 48px high, 0 18px padding, 8px gap, 16px/500, red 2px inset marker. */
body.single-product .woocommerce-tabs .resp-tabs-list li,
body.single-product .woocommerce-tabs .resp-tabs-list li.resp-tab-active {
	display: flex; align-items: center; float: none; height: 48px; margin: 0 !important; padding: 0 18px !important; list-style: none;
	border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none;
	font-size: 16px; font-weight: 500; line-height: 24px; color: var(--mk-ink-2) !important; text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer;
}
body.single-product .woocommerce-tabs .resp-tabs-list li:hover { color: var(--mk-ink) !important; }
body.single-product .woocommerce-tabs .resp-tabs-list li.resp-tab-active { color: var(--mk-ink) !important; box-shadow: inset 0 -2px 0 var(--mk-red); }
body.single-product .woocommerce-tabs .resp-tabs-list li:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: -2px; }
/* < 768px: Porto's accordion (transparent layout). Same type and colours as the tabs; 48px rows; plus/minus icon in ink-2. */
body.single-product .woocommerce-tabs h2.resp-accordion,
body.single-product .woocommerce-tabs h2.resp-accordion.resp-tab-active {
	margin: 0 !important; padding: 12px 16px !important; min-height: 48px; border: 1px solid var(--mk-line) !important; border-bottom: 0 !important;
	background: #fff !important; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0; color: var(--mk-ink); text-transform: none;
}
body.single-product .woocommerce-tabs h2.resp-accordion:last-of-type { border-bottom: 1px solid var(--mk-line) !important; }
body.single-product .woocommerce-tabs h2.resp-accordion.resp-tab-active { box-shadow: inset 0 -2px 0 var(--mk-red); }
body.single-product .woocommerce-tabs h2.resp-accordion::before { top: 0; margin-right: 10px; font-size: 16px; line-height: 24px; color: var(--mk-ink-2); }
body.single-product .woocommerce-tabs .tab-content { padding: 28px 32px; background: #fff !important; border: 1px solid var(--mk-line); border-top: 0; border-radius: 0 0 var(--mk-radius) var(--mk-radius); font-size: 15px; line-height: 1.6; color: var(--mk-ink); }
body.single-product .woocommerce-tabs .tab-content > h2 { display: none; }
.mk-desc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.mk-desc { max-width: 640px; }
.mk-desc p { margin: 0 0 12px; }
.mk-desc-specs { align-self: start; padding: 20px; background: var(--mk-paper); border-radius: var(--mk-radius); }
.mk-desc-specs__title { margin: 0 0 8px; font-weight: 500; }
.mk-desc-specs dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.mk-desc-specs dt { font-weight: 400; color: var(--mk-ink-2); }
.mk-desc-specs dd { margin: 0; }
/* (no attributes table: the «Характеристики» tab was dropped, owner decision 23.10; its rows live in .mk-desc-specs) */
.mk-desc-specs dd a { color: inherit; }
/* Plan 14: «Як влаштований календар» under the product's paragraph (list from its category). */
.mk-features { margin-top: 20px; }
.mk-features__title { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mk-ink, #302a28); }
.mk-features__list { margin: 0; padding-left: 20px; }
.mk-features__list li { margin: 0 0 6px; }
.mk-features__note { margin: 12px 0 0; font-weight: 500; }

@media (max-width: 767px) {
	body.single-product .woocommerce-tabs .tab-content { padding: 20px 16px; border-radius: 0; } /* accordion rows stay square */
	.mk-desc-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Cart row: [− 1 +] [Додати в кошик] [♡] */
.product .summary form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; padding-top: 6px; }
.product .summary form.cart .quantity { display: inline-flex; align-items: center; height: 52px; margin: 0; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: #fff; }
.product .summary form.cart .quantity .minus,
.product .summary form.cart .quantity .plus { width: 48px; height: 50px; margin: 0; border: 0; background: transparent; color: var(--mk-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.product .summary form.cart .quantity .minus:focus-visible,
.product .summary form.cart .quantity .plus:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: -2px; }
.product .summary form.cart .quantity .qty { width: 48px; height: 50px; min-height: 50px; margin: 0; padding: 0; border: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 500; color: var(--mk-ink); -moz-appearance: textfield; }
.product .summary form.cart .quantity .qty::-webkit-outer-spin-button,
.product .summary form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Porto: `.single_add_to_cart_button{height:3rem!important;margin-bottom:5px;text-transform:uppercase}` + a cart icon in ::before. Board: 52px, no icon. */
.product .summary form.cart .single_add_to_cart_button { flex: 1 1 220px; height: 52px !important; margin: 0; padding: 0 24px; font-size: 16px; font-weight: 500; line-height: 1; text-transform: none; letter-spacing: 0; }
.product .summary form.cart .single_add_to_cart_button::before { content: none; display: none; }
/* Porto adds body.single-add-to-cart whenever this simple product is in the cart (also after every reload) and then a
   Font Awesome ✓ in the button's ::after (`.single-add-to-cart .type-product .single_add_to_cart_button:not(.wpcbn-btn):after`):
   the button looked stuck in an «added» state. The board button is plain text in every state. */
body.single-add-to-cart .product .summary form.cart .single_add_to_cart_button::after { content: none; display: none; }
/* Wishlist heart: one 52px square in every YITH state — .yith-wcwl-add-button (outline heart, «Додати в обране»),
   .yith-wcwl-wishlistaddedbrowse / .yith-wcwl-wishlistexistsbrowse (filled red heart in .feedback + link to the wishlist page,
   «В обраному — переглянути»). Texts are visually hidden; the <a> covers the whole box (52px target). Also .mk-wishlist-solo
   (out-of-stock products: no form.cart, the heart stands alone where the cart row would be). */
.product .summary .mk-wishlist-solo { margin: 0 0 18px; }
.product .summary .yith-wcwl-add-to-wishlist { position: relative; flex: 0 0 52px; width: 52px; height: 52px; margin: 0; }
.product .summary .yith-wcwl-add-to-wishlist > div { position: relative; width: 52px; height: 52px; margin: 0; }
.product .summary .yith-wcwl-add-to-wishlist a {
	position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0; width: 52px; height: 52px; margin: 0; padding: 0;
	border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: transparent; color: var(--mk-ink); font-size: 0; line-height: 0; text-decoration: none;
}
.product .summary .yith-wcwl-add-button a { background: #fff; }
.product .summary .yith-wcwl-add-to-wishlist a:hover { border-color: var(--mk-ink); color: var(--mk-red); }
.product .summary .yith-wcwl-add-to-wishlist a:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
.product .summary .yith-wcwl-add-to-wishlist svg { display: block; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; } /* Porto hides YITH's svg icons */
/* Porto (theme_shop.css) hides .feedback (!important) and the svg icons, and paints a pale font heart in a::before — we use YITH's svgs. */
.product .summary .yith-wcwl-add-to-wishlist a::before { content: none; display: none; }
.product .summary .yith-wcwl-add-to-wishlist .feedback {
	position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; gap: 0; width: 52px; height: 52px; margin: 0; padding: 0;
	border-radius: var(--mk-radius); background: #fff; color: var(--mk-red); font-size: 0; line-height: 0; overflow: hidden; pointer-events: none;
}
.product .summary .yith-wcwl-add-to-wishlist .feedback svg { display: block; color: var(--mk-red); fill: currentColor; }
.product .summary .yith-wcwl-add-to-wishlist a span,
.product .summary .yith-wcwl-add-to-wishlist .mk-wl-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; font-size: 14px;
}

/* Info + wholesale */
.mk-info { margin: 0 0 18px; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); }
.mk-info__row { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--mk-line); font-size: 14px; line-height: 1.6; color: var(--mk-ink); }
.mk-info__row:last-child { border-bottom: 0; }
.mk-info__row svg { flex: 0 0 24px; }
.mk-info__row b, .mk-wholesale b { font-weight: 500; }
.mk-wholesale { padding: 14px 18px; background: #fff; border: 2px solid var(--mk-red); border-radius: var(--mk-radius); font-size: 14px; line-height: 1.6; color: var(--mk-ink); }
.mk-wholesale a { color: var(--mk-ink); text-decoration: underline; }
.mk-wholesale a:hover, .mk-wholesale a:focus-visible { color: var(--mk-red); }

@media (max-width: 575px) {
	.product .summary form.cart .single_add_to_cart_button { flex-basis: 100%; order: 3; }
}

/* Related products: board heading, the plan-04 card, never stretched */
.related.products { padding: 0 0 72px; }
.related.products .slider-title { margin: 0 0 24px; padding: 0; border: 0; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--mk-ink); text-transform: none; letter-spacing: 0; }
.related.products .slider-title::before,
.related.products .slider-title::after,
.related.products .slider-title .line { display: none; }
.related.products ul.products li.product-col .category-list { display: none; } /* the board's related cards have no category line */
.related.products ul.products li.product-col { max-width: 100%; }
/* (equal-height owl items: shop.css «Related/up-sell carousels») */
/* No category line → no empty grid row (and its 6px row-gap) above the title: image → title = 8 + 6 px as on the board. */
.related.products ul.products li.product-col .product-content { grid-template-rows: auto 1fr; grid-template-areas: "title title" "price btn"; }
/* Owl dots (dots-style-1 ring + inner dot): square corners, palette colours. */
.related.products .owl-carousel .owl-dots .owl-dot span,
.related.products .owl-carousel .owl-dots .owl-dot span::after { border-radius: 0; }
.related.products .owl-carousel.dots-style-1 .owl-dots span { border-color: var(--mk-line); }
.related.products .owl-carousel.dots-style-1 .owl-dot.active span,
.related.products .owl-carousel.dots-style-1 .owl-dot:hover span { color: var(--mk-ink); border-color: var(--mk-ink); }
/* Dot buttons: Porto's are 18×24 (too small a target). ≥ 24px on desktop, 44px on touch; the visible square stays small. */
.related.products .owl-carousel .owl-dots .owl-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; margin: 0; padding: 0; }
.related.products .owl-carousel .owl-dots .owl-dot:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: -2px; }
@media (pointer: coarse) {
	.related.products .owl-carousel .owl-dots .owl-dot { min-width: 44px; min-height: 44px; }
}
@media (max-width: 767px) {
	.related.products .slider-title { font-size: 22px; }
	/* Porto puts the dots top-right, level with the heading; a 2-line heading ran under them. Below the cards instead. */
	.related.products .owl-carousel .owl-dots { position: static; display: flex; justify-content: center; margin: 12px 0 0; transform: none; }
}

/* Gallery: [thumbs 84px][main photo in a white box] — board Product.dc.html */
.product-layout-transparent .woocommerce-product-gallery__wrapper { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0; padding: 0; }
.product-layout-transparent .summary-before .product-thumbnails { flex: 0 0 84px; width: 84px; order: 1; padding: 0; }
body.boxed .product-layout-transparent .summary-before .product-thumbnails { padding-left: 0; }
.product-layout-transparent .summary-before .product-images { flex: 1 1 auto; width: auto; min-width: 0; order: 2; margin: 0; padding: 24px; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); }
.product-layout-transparent .img-thumbnail { background: transparent !important; border: 0; border-radius: 0; }
.product-layout-transparent .product-images .img-thumbnail img { width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; object-fit: contain; }
.product-layout-transparent .product-images .zoom { border-radius: 0; }
/* Until Owl starts (its scripts run after the first paint, inc/performance.php) the main photo is drawn 1 % larger.
   Owl moves the <img> into its stage and Chrome reports it as a new largest paint when the re-snapped box is even a
   fraction of a pixel bigger, which would make the page's LCP wait for every script. A transform shifts no layout. */
.product-images .product-image-slider:not(.owl-loaded) .woocommerce-main-image { transform: scale(1.01); }
.product-thumbs-vertical-slider .img-thumbnail { margin: 0 0 10px; padding: 4px; border: 1px solid var(--mk-line) !important; border-radius: var(--mk-radius); background: #fff !important; cursor: pointer; }
/* Square thumb boxes: slick sizes the vertical list as slidesToShow × the first slide's height, so every slide must be the
   same height (a portrait 2nd image used to push the 4th thumb out of the list). Porto's 1px img border (red when selected) off. */
.product-thumbs-vertical-slider .img-thumbnail img,
.product-thumbs-vertical-slider .slick-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border: 0; }
/* Thumbs are focusable (assets/js/product.js: tabindex on .slick-slide); the ring sits inside the box (.slick-list clips outside). */
/* slick wraps each thumb in an inline-block (style attr): its baseline gap made every slide 8 px taller (84 → 102 incl. the
   10 px margin; board pitch 94). Block removes the gap. */
.product-thumbs-vertical-slider .slick-slide .img-thumbnail { display: block !important; }
.product-thumbs-vertical-slider .slick-slide:focus { outline: 0; }
.product-thumbs-vertical-slider .slick-slide:focus-visible .img-thumbnail { outline: 2px solid var(--mk-ink); outline-offset: -4px; }
.product-thumbs-vertical-slider .slick-slide.selected .img-thumbnail,
.product-thumbs-vertical-slider .img-thumbnail.slick-slide.selected { border: 2px solid var(--mk-ink) !important; }
.product-layout-transparent .summary-before .labels { left: calc(84px + 12px + 0.8em); right: auto; }

/* < 992px: main photo first, thumbnails in a row below (MobileProduct.dc.html) */
@media (max-width: 991px) {
	.product-layout-transparent .woocommerce-product-gallery__wrapper { flex-direction: column; }
	.product-layout-transparent .summary-before .product-images { order: 1; width: 100%; padding: 16px; }
	.product-layout-transparent .summary-before .product-thumbnails { order: 2; flex: 0 0 auto; width: 100%; }
	.product-thumbs-vertical-slider .slick-list { height: auto !important; overflow-x: auto; overflow-y: hidden; }
	.product-thumbs-vertical-slider .slick-track { display: flex !important; gap: 10px; width: auto !important; height: auto !important; transform: none !important; }
	.product-thumbs-vertical-slider .slick-track::before,
	.product-thumbs-vertical-slider .slick-track::after { display: none; } /* slick's clearfix would become flex items and take the gap */
	.product-thumbs-vertical-slider .slick-slide { float: none; flex: 0 0 72px; width: 72px !important; height: auto; margin: 0; }
	.product-thumbs-vertical-slider .img-thumbnail { margin: 0; }
	body .product-thumbs-vertical-slider .slick-arrow { display: none !important; }
	.product-layout-transparent .summary-before .labels { left: 0.8em; }
	.product-layout-transparent .product-images .img-thumbnail img { max-height: 420px; }
	/* Before slick starts (its script runs after the first paint) Porto keeps the list absolute and 0 px tall; the same
	   72 px row is drawn right away, so the text below does not jump when slick builds it. */
	.product-layout-transparent .product-thumbs-vertical-slider:not(.slick-initialized) { position: static; display: flex; gap: 10px; height: 72px; max-height: none; overflow: hidden; }
	.product-layout-transparent .product-thumbs-vertical-slider:not(.slick-initialized) .img-thumbnail { flex: 0 0 72px; width: 72px; height: 72px; margin: 0; }
}