/*
 * Product page: gallery, instalment badge, tabs.
 *
 * Corrections to the theme rather than a look of its own. Everything here has a
 * reason written next to it, so it is clear later what may be dropped once the
 * theme itself changes.
 */

/* Gallery */

.sh-gallery {
	position: relative;
}

/* The frame shows its first child and hides the rest: that is how the theme
   keeps the still picture and the slider in one box. The badge is the last
   child, so it needs to be let through by name */
.sc-product-images-main > .ukrcreditsticker {
	display: block !important;
}

/* The badge is moved here from inside a slide by sh-product-page.js. Pinned to
   the frame with the photograph, it stays in one place while the photos are
   swiped. Seventeen on the right is the inner padding of the frame, so the
   badge stands over the corner of the picture and not over the border */
.sh-gallery .sh-instalment {
	position: absolute;
	top: 12px;
	right: 17px;
	z-index: 5;
	pointer-events: auto;
}

/* The same badge is injected into the review popup, where it lands on a 64 pixel
   thumbnail and covers it whole */
.modal .ukrcreditsticker {
	display: none;
}

/* While a video is playing the badge sits over the controls of the player */
.sh-gallery:has(.sh-gallery-video.is-playing) .sh-instalment {
	display: none;
}

/* The theme caps the picture box at 634 pixels but leaves the overflow visible,
   so a photo taller than that used to hang out of the block and cover the
   thumbnails underneath */
.sc-product-images-main {
	overflow: hidden;
}

/* A photograph is shown whole: neither cropped nor stretched. The box keeps a
   constant shape, and the picture sits inside it at its own proportions, so the
   block does not jump in height while the photos are swiped. Four to three
   rather than a square: supplier photography is landscape more often than not,
   and a square box would leave a strip of nothing above and below every one */
.sc-product-images-main .slider-placeholder img,
.sc-product-images-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	max-height: 570px;
	object-fit: contain;
	border-radius: 12px;
}

/* Thumbnails follow the same rule: whole picture inside a square tile */
.sc-product-images-additional-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 9px;
}

.sc-product-images-additional-item.swiper-slide {
	height: 80px;
	overflow: hidden;
}

/* The strip sits right under the picture and is aligned with its edge. The
   theme pushes it down by a utility margin, which carries !important of its own,
   hence the same weight here */
.sc-product-images .sc-product-images-additional {
	margin-top: 0 !important;
	padding: 12px 0 0;
}

.sc-product-images .sc-product-images-additional .swiper {
	min-height: 0;
	/* The strip starts at the edge of the card, the same edge the frame with the
	   photograph and the row of tabs below start at. Aligning it with the
	   picture instead would leave it seventeen points to the right of both */
	padding: 0 !important;
}

/* On a phone the theme reserves 442 pixels under the gallery and hides the
   thumbnails altogether. The reservation was sized for pictures of another
   shape and now leaves a hole under the photo; the height of the box is known
   before the pictures load anyway, so nothing jumps without it */
@media (max-width: 575.98px) {
	.sc-product-images {
		min-height: 0 !important;
	}
}

/* The thumbnails are worth having on a phone as well: a strip of photos says
   there is more to look at, while three dots under the picture do not. With the
   strip in place the dots have nothing left to add */
@media (max-width: 767.98px) {
	.sc-product-images .sc-product-images-additional {
		display: flex !important;
		padding-top: 8px;
	}

	.sc-product-images-main-swiper .swiper-pagination {
		display: none;
	}

	/* The card used to end with a strip of nothing under the thumbnails, and the
	   title started another gap below that */
	.sc-product-images {
		padding-bottom: 8px !important;
	}

	#product.col-lg-6 {
		margin-top: 12px !important;
	}
}

/* The breadcrumb stays on one line. By default the strip scrolls sideways, and a
   long product name gives it a scrollbar of its own, which on a phone reads as a
   broken page. The name is trimmed with an ellipsis instead: the trail is there
   to say where the visitor is, and the full name is right below in the title */
@media (max-width: 767.98px) {
	.sc-breadcrumb {
		flex-wrap: nowrap !important;
		overflow-x: hidden !important;
	}

	/* The crumb is a flex item that refuses to shrink on its own */
	.sc-breadcrumb .sc-breadcrumb-item:last-child {
		flex: 0 1 auto;
		min-width: 0;
	}

	.sc-breadcrumb .sh-crumb-text {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* The stickers block is rendered even when a product has none: an empty flex box
   carrying a bottom margin, which shows up as a gap above the title */
.sc-module-stickers:not(:has(.sc-module-sticker)) {
	/* d-flex of the framework carries !important, so hiding needs the same */
	display: none !important;
}

/* The theme pads the page by 10 points while a grid row pulls itself out by 12,
   so every row that keeps its gutters hangs two points past the edge of the
   screen. Below 768 the outer row is spared by mobile-no-gutters, the rows
   inside the description column are not. The padding is set to the size of the
   gutter and the mismatch disappears at every width */
@media (max-width: 786px) {
	#product-product {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* On a phone the quantity box and the buy button do not fit on one line: the
   button keeps the width of its own label and pushes past the edge of the
   screen. They stack instead, and the button takes the full width, which is
   where a thumb expects it anyway */
@media (max-width: 575.98px) {
	.sc-product-buttons {
		flex-wrap: wrap;
		gap: 8px;
	}

	.sc-product-buttons #button-cart {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* Documents shortcut */

/* The row of documents is a separate thought from the buy button, and needs the
   air to read as one */
.sc-product-buttons + .sh-docs-quick,
.sh-docs-quick {
	margin-top: 14px;
}

/* Tabs */

/* The description panel has no heading of its own, so its first paragraph used
   to start right under the tab row */
.sc-product-content-description .sc-product-content-title:empty {
	display: none;
}

.sc-product-content-description .sc-product-content-text {
	margin-top: 0 !important;
	padding-top: 4px;
}

/* Headings inside the description are set by the theme at the size of a page
   title, which reads louder than the product name above it. The theme also
   pins the line height to the size of the letter, and a heading that wraps
   ends up with its two lines glued together */
.sc-product-content-text h2 {
	font-size: 18px !important;
	line-height: 26px !important;
	margin: 22px 0 8px;
}

.sc-product-content-text ul,
.sc-product-content-text ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.sc-product-content-text p + p {
	margin-top: 10px;
}

/* Properties: the theme lays the panel out in two columns, a narrow one with the
   heading and the table in the rest, and the heading ends up floating in the
   middle of an empty column. The panel is laid out like the other tabs instead:
   heading on top, table under it. The selectors repeat the theme's own, which
   sit in a style block inside the template and would otherwise win */
/* !important is not decoration here: the theme keeps these rules in a style
   block inside the body, and by document order they win over any stylesheet */
.sc-product-content-attributes.pb-4.mb-md-4.pt-4.pt-md-0.px-3.px-lg-4 {
	display: block !important;
}

.sc-product-content-attributes .sc-product-content-title.d-flex.align-items-center,
.sc-product-content-docs .sc-product-content-title.d-flex.align-items-center {
	width: auto !important;
}

/* Properties come from several groups, and the striping restarts inside each of
   them: two white rows meet at the boundary and read as a gap in the table.
   Hairlines instead of stripes, one continuous table */
.sc-product-content-attributes-list + .sc-product-content-attributes-list {
	margin-top: 0 !important;
}

.sc-product-content-attributes-list-item,
.sc-product-content-attributes-list-item:nth-child(even) {
	background: #fff !important;
	border-bottom: 1px solid #f1f3f7;
}

.sc-product-content-attributes-list:last-child .sc-product-content-attributes-list-item:last-child {
	border-bottom: none;
}

.sc-product-content-attributes-list {
	max-width: 860px;
}

/* The table was indented twenty points from the left edge of the panel while
   the heading above it started at the edge, so the two did not line up. The
   inner padding is kept vertical only, and the row lines up with everything
   else in the tab */
.sc-product-content-attributes-list-item > div {
	padding: 13px 0 !important;
	width: auto !important;
}

/* A property is read as a pair, so the value carries the weight and the name
   stays quiet. The theme gives both the same weight and nearly the same grey,
   and the pair reads as one grey line */
.sc-product-content-attributes-list-item {
	gap: 24px;
	font-size: 15px !important;
}

.sc-product-content-attributes-list-item > div:first-child {
	flex: 1 1 42%;
	font-weight: 400 !important;
	color: rgb(108, 108, 108) !important;
}

/* Values are longer than names, so the split is not down the middle */
.sc-product-content-attributes-list-item > div:last-child {
	flex: 1 1 58%;
	text-align: right;
	font-weight: 500 !important;
	color: #171717 !important;
}

/* Tabs: layout and rhythm */

/* The count is a div inside the span with the label, so it lands on a line of
   its own and lifts the label of every tab that has one above the labels of
   the tabs that have none */
.sc-product-tab-title {
	display: inline-flex;
	align-items: center;
}

/* The row of tabs was laid out two to a line on a phone, and five tabs left
   the last one alone in the middle of an empty row, with the underline of the
   open tab jumping between lines. The row runs on one line and scrolls
   sideways instead, which is what the overflow of the theme was written for */
@media (max-width: 768px) {
	#oct-tabs {
		flex-wrap: nowrap !important;
		gap: 0 !important;
	}

	.sc-product-tab {
		flex: 0 0 auto !important;
		min-width: 0 !important;
		padding: 12px 16px !important;
	}

	/* A scrollbar under the tabs would read as a broken block */
	.sc-product-tabs {
		scrollbar-width: none;
	}

	.sc-product-tabs::-webkit-scrollbar {
		display: none;
	}
}

/* The panel of properties and the panel of documents carry a top padding of
   their own, the description panel does not, so on a phone the text of the
   description started right against the tabs while the others had air */
@media (max-width: 767.98px) {
	.sc-product-content-description {
		padding-top: 20px;
	}
}

/* A page title is twenty points on a phone, and a panel heading of twenty four
   read louder than the name of the product itself */
@media (max-width: 575.98px) {
	.sc-product-content-title .fsz-24 {
		font-size: 20px !important;
		line-height: 28px;
	}
}

/* Right column: one left edge and an even rhythm */

/* A line break inside a flex row is an item of its own, and it added nineteen
   points of nothing between the buy button and the row of documents */
.sc-product-buttons br.but-next {
	display: none;
}

/* From the price to the line about stock the step was thirty nine points,
   twice any other step in the column */
.sc-product-actions .sc-product-actions-middle {
	padding-top: 20px !important;
}

.sc-product-actions .sc-product-actions-middle .in-stock {
	margin-top: 0 !important;
	margin-bottom: 16px !important;
}

/* The instalment button under the row carries fifteen points above it of its
   own, so the row needs air over it only */
.sc-product-actions .sh-docs-quick {
	margin-top: 16px;
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	/* The title stands sixteen points in from the edge of the page while
	   everything under it stands at twelve, so the name of the product hung to
	   the right of its own column */
	.col-12.sc-page-title {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* The rating lives in a box padded on both sides, which pushed it sixteen
	   points in from the rest of the column */
	#product .sc-product-info {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* The selectors above already leave sixteen points under themselves */
	#product .sc-product-info-right {
		margin-top: 0 !important;
	}

	/* Padding on the right only: the buy button and the row of documents
	   stopped sixteen points short of the edge the selectors reach */
	.sc-product-actions .sc-product-actions-middle {
		padding-right: 0 !important;
	}

	/* In a row the icons stand beside the instalment button and the offset is
	   the gap between them. In a column it becomes an indent of its own */
	#product .sc-product-actions-top-right {
		margin-left: 0 !important;
	}
}

/* On a wide screen the row of tabs stood sixteen points under the taller of the
   two columns, which reads as a continuation of the card rather than as the
   next block of the page */
@media (min-width: 768px) {
	.sc-product-content {
		margin-top: 32px !important;
	}
}