/* Product page of najlepsiemobily.sk – buy box additions of the site layer. */

/* Block titles of the buy box ("Doplnkové služby k telefónu", "Kompatibilné s týmto telefónom"). */
.amtc-npp .services-title { gap: 8px; margin-bottom: 10px; font-size: 18px; line-height: 1.3; }
.amtc-npp .services-title .ic { flex: 0 0 auto; width: 20px; height: 20px; }

/* Service with "Čo kryje?": the box carries the border, the row inside is flat. */
.amtc-npp .service-box {
	border: 1px solid var(--brand-tint2); border-radius: var(--nd-radius); margin-bottom: 6px; background: #fff; overflow: hidden;
}
.amtc-npp .service-box:hover { border-color: var(--brand); }
.amtc-npp .service-box:has(> .service.on) { border-color: var(--cta); background: var(--accent-ultra-light); }
.amtc-npp .service-box > .service { border: 0; margin: 0; padding-bottom: 2px; background: none; }
.amtc-npp .service-box .service-name { font-size: 16px; font-weight: 700; color: var(--head); line-height: 1.3; }
.amtc-npp .service-box .service-name small { margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--nd-c-ink); }
.amtc-npp .service-box .service-price { font-size: 16px; color: var(--head); text-align: right; }
.amtc-npp .service-price small { display: block; margin-top: 2px; text-align: right; font-size: 15px; font-weight: 700; color: var(--brand); }

.amtc-npp .service-cover > summary {
	display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px 38px; cursor: pointer; list-style: none;
	color: var(--brand); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.amtc-npp .service-cover > summary::-webkit-details-marker { display: none; }
.amtc-npp .service-cover > summary .ic { transition: transform .2s; }
.amtc-npp .service-cover[open] > summary .ic { transform: rotate(180deg); }
.amtc-npp .service-cover__cols {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
	background: var(--brand-tint2); border-top: 1px solid var(--brand-tint2);
}
.amtc-npp .service-cover__col { background: #fff; padding: 12px 14px; }
.amtc-npp .service-cover__col > b {
	display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--head);
}
.amtc-npp .service-cover__col ul { list-style: none; margin: 0; padding: 0; }
.amtc-npp .service-cover__col li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 15px; line-height: 1.4; color: var(--head); }
.amtc-npp .service-cover__col li .ic { flex: 0 0 auto; margin-top: 3px; }
.amtc-npp .service-cover__col.is-ok .ic { color: var(--cta); }
.amtc-npp .service-cover__col.is-no li { color: var(--nd-c-ink); }
.amtc-npp .service-cover__col.is-no .ic { color: #d0463b; }

/* Buy box choices as small one-line pills (proto_pchips B, 2026-11-07): the features show only their
 * title (the window behind the click explains), condition and storage carry name and price side by side. */
.amtc-npp .feature-badges { gap: 6px; margin: 2px 0 10px; }
.amtc-npp .feature-badges .f-badge { gap: 5px; width: auto; height: 32px; padding: 0 11px; border-radius: 999px; }
.amtc-npp .f-badge .ic { width: 15px; height: 15px; }
.amtc-npp .f-badge b { font-size: 13px; white-space: nowrap; }
.amtc-npp .f-badge small { display: none; }
.amtc-npp .variant-group { margin: 8px 0; }
.amtc-npp .variant-label { margin-bottom: 5px; font-size: 13px; }
.amtc-npp .chips { gap: 6px; }
.amtc-npp .chips .chip {
	display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; height: 36px; padding: 0 14px;
	border-radius: 999px; line-height: 33px;
}
.amtc-npp .chips .chip b { display: inline; font-size: 14px; }
.amtc-npp .chips .chip small { font-size: 13px; }
.amtc-npp .chips .chip.active { box-shadow: none; }
.amtc-npp .swatches { gap: 6px; flex-wrap: wrap; }
.amtc-npp .swatches .swatch { width: 30px; height: 30px; border-width: 1.5px; }
.amtc-npp .swatch .dot { width: 20px; height: 20px; }
.amtc-npp .swatches .swatch.active { border-color: var(--cta); box-shadow: 0 0 0 1.5px var(--cta); }

/* Wide boxes of the buy box take the box radius of the page (services, cards: 10px). The shared CSS
 * gives them --radius-xxl, which is 54px on NM and turns a full-width box into an oval. Buttons and
 * small badges stay pills like everywhere else on NM. */
.amtc-npp .promo-strip,
.amtc-npp .splatky-bar,
.amtc-npp .info-box,
.amtc-npp .ship-highlight { border-radius: var(--nd-radius); }
.amtc-npp .promo-ic { border-radius: 50%; }

/* Product reviews: 5 per row on desktop (plugin CSS stops at amtc-grid-col-4). */
.amtc-grid-col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .amtc-grid-col-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 992px) { .amtc-grid-col-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .amtc-grid-col-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) { .amtc-grid-col-5 { grid-template-columns: minmax(0, 1fr); } }

/* Reviews of the product page as a mesh (like the accessory cells): no gaps, shared 1px lines, square
 * cells. Shop carousel: Splide with gap="0" (functions.php); product reviews: the grid. */
.amtc-npp #recenzie .amtc-review-card {
	border: 0; border-radius: 0; box-shadow: none; background: #fff;
}
.amtc-npp #recenzie .heurekaShopReviewsCarousel .splide__slide { padding: 0; }
.amtc-npp #recenzie .heurekaShopReviewsCarousel .splide__slide .amtc-review-card {
	box-shadow: inset -1px 0 0 var(--nd-c-line), inset 0 1px 0 var(--nd-c-line), inset 0 -1px 0 var(--nd-c-line);
}
/* The left line of the row stays put while the slides move. */
.amtc-npp #recenzie .heurekaShopReviewsCarousel .splide__track { position: relative; }
.amtc-npp #recenzie .heurekaShopReviewsCarousel .splide__track::before {
	content: ""; position: absolute; z-index: 1; top: 0; bottom: 50px; left: 0; width: 1px; background: var(--nd-c-line);
}
.amtc-npp #recenzie .heurekaShopReviewsCarousel.amtc-no-pagination .splide__track::before { bottom: 0; }
.amtc-npp #recenzie .amtc-product-reviews-grid {
	gap: 0; box-shadow: inset 1px 0 0 var(--nd-c-line), inset 0 1px 0 var(--nd-c-line);
}
.amtc-npp #recenzie .amtc-product-reviews-grid .amtc-review-card {
	box-shadow: inset -1px 0 0 var(--nd-c-line), inset 0 -1px 0 var(--nd-c-line);
}