/*
 * Solkarra Store: product page layout.
 *
 * Every rule is gated on a body class the plugin adds only on pages it has
 * taken over (.solkarra-store plus one modifier per toggle). Selectors mirror
 * WooCommerce's and Neve's own, prefixed with the body class so they win by
 * one class without !important. WooCommerce's float layout carries #content
 * in its selectors, so the rules that must beat it carry it too.
 *
 * Colours are inherited from the theme; the only ones here are translucent
 * greys that read correctly on any background.
 *
 * Breakpoint 769px matches Neve's own row breakpoint for .nv-single-product-top.
 */

/* ------------------------------------------------------------------ */
/* Title across the top                                                */
/* ------------------------------------------------------------------ */

.solkarra-store .solkarra-store-title {
	margin: 0 0 1.5rem;
}

/* Neve sizes headings from var(--fontsize, var(--h1fontsize)). Setting
   --fontsize beats its responsive --h1fontsize media queries; the plain
   font-size line covers a Neve build whose h1 rule reads --h1fontsize
   directly. Retires block 1 of the "Solkarra Fleet UI Fixes" snippet. */
.solkarra-store--wide-title.single-product h1.product_title.entry-title {
	--fontsize: clamp(22px, 14px + 1.1vw, 30px);
	font-size: clamp(22px, 14px + 1.1vw, 30px);
	line-height: 1.25;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Top row: gallery beside the buy box                                 */
/* ------------------------------------------------------------------ */

@media (min-width: 769px) {
	.solkarra-store div.product .nv-single-product-top {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
		gap: 2rem 4%;
		align-items: start; /* a stretched grid item cannot stick */
	}

	/* WooCommerce floats these at 48%; Neve flexes them. Neither applies in the grid. */
	.solkarra-store #content div.product div.images,
	.solkarra-store #content div.product div.summary,
	.solkarra-store div.product .nv-single-product-top > .woocommerce-product-gallery,
	.solkarra-store div.product .nv-single-product-top > .summary {
		float: none;
		width: auto;
		max-width: none;
		flex: none;
		margin-bottom: 0;
	}

	/* WooCommerce 10 places a <template> copy of the gallery inside the
	   variations form; only the direct child is the real one. */
	.solkarra-store div.product .nv-single-product-top > .woocommerce-product-gallery {
		width: 100%;
		display: block;
	}

	.solkarra-store--sticky-buy #content div.product div.summary {
		position: sticky;
		top: calc(var(--solkarra-store-stick-top, 0px) + 1rem);
	}

	/* store.js adds is-tall when the box would not fit the window. */
	.solkarra-store--sticky-buy #content div.product div.summary.is-tall {
		position: static;
	}
}

.solkarra-store div.product .summary > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Gallery: square main photo, strip of square thumbnails beneath      */
/* ------------------------------------------------------------------ */

/* Neve's left-gallery flex row is already gone with its body class;
   this keeps the block layout even if another stylesheet re-adds it. */
.solkarra-store--gallery div.product div.images {
	display: block;
}

.solkarra-store--gallery div.product div.images .flex-viewport {
	width: 100%;
}

/* Every slide is a square; the photo is fitted inside it, so a tall
   bow shot and a wide arrow shot make the same box. WooCommerce's no-JS
   rule that inlines slides 2+ at 25% is overridden here. */
.solkarra-store--gallery div.product div.images .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	width: 100%;
	display: block;
}

.solkarra-store--gallery div.product div.images .woocommerce-product-gallery__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.solkarra-store--gallery div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The thumbnail strip: five equal squares per row, WooCommerce's
   100x100 crops filling them. */
.solkarra-store--gallery div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	width: auto;
	margin: 8px 0 0;
	padding: 0;
	overflow: visible;
}

.solkarra-store--gallery div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
}

.solkarra-store--gallery div.product div.images .flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s;
}

.solkarra-store--gallery div.product div.images .flex-control-thumbs li img:hover,
.solkarra-store--gallery div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.solkarra-store--gallery div.product div.images .flex-control-thumbs li img.flex-active {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* More than five photos: store.js collapses the strip to one row and
   labels the last visible tile "+N"; a tap opens the rest. */
.solkarra-store-thumbs--collapsed li:nth-child(n+6) {
	display: none;
}

.solkarra-store-thumbs--collapsed li:nth-child(5)::after {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Details band                                                        */
/* ------------------------------------------------------------------ */

.solkarra-store-details {
	display: grid;
	gap: 2rem 4%;
	margin: 2.5rem 0 1rem;
	clear: both;
}

@media (min-width: 769px) {
	.solkarra-store-details {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}
}

/* One column on phones. The two column wrappers dissolve so the items can
   interleave: short description, description, specs, shipping, other tabs,
   reviews, meta. */
@media (max-width: 768px) {
	.solkarra-store-details__left,
	.solkarra-store-details__right {
		display: contents;
	}

	.solkarra-store-acc--summary { order: 0; }
	.solkarra-store-acc--description { order: 1; }
	.solkarra-store-acc--specs { order: 2; }
	.solkarra-store-acc--shipping { order: 3; }
	.solkarra-store-acc--extra { order: 4; }
	.solkarra-store-acc--reviews { order: 5; }
	.solkarra-store-details__meta { order: 6; }
}

.solkarra-store-details__heading {
	font-size: 1.1em;
	margin: 0 0 0.75rem;
}

.solkarra-store-acc--specs table.shop_attributes {
	margin-bottom: 0;
}

/* The last right-column item sits above the meta line. */
.solkarra-store-details__right > .solkarra-store-acc:last-of-type {
	margin-bottom: 1.5rem;
}

/* Adjacent items share one hairline. */
.solkarra-store-acc + .solkarra-store-acc {
	border-top: 0;
}

.solkarra-store-details__lifted {
	margin-bottom: 1rem;
}

.solkarra-store-details__lifted:last-child {
	margin-bottom: 0;
}

.solkarra-store-details__lifted ul,
.solkarra-store-details__lifted ol {
	margin: 0;
	padding-left: 1.25rem;
}

.solkarra-store-details__lifted li {
	margin-bottom: 0.35rem;
}

/* A lifted table reads like the attributes table under it. */
.solkarra-store-details__lifted table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.95em;
}

.solkarra-store-details__lifted th,
.solkarra-store-details__lifted td {
	text-align: left;
	vertical-align: top;
	padding: 0.45em 1rem 0.45em 0;
	border: 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.solkarra-store-details__lifted th,
.solkarra-store-details__lifted td:first-child {
	font-weight: 600;
}

.solkarra-store-details__lifted tr:last-child > th,
.solkarra-store-details__lifted tr:last-child > td {
	border-bottom: 0;
}

.solkarra-store-acc--specs table.shop_attributes th {
	font-weight: 600;
	padding-right: 1rem;
}

.solkarra-store-details__meta {
	font-size: 0.9em;
	opacity: 0.8;
}

.solkarra-store-details__meta .product_meta > span {
	display: block;
	margin-bottom: 0.35rem;
}

.solkarra-store-details__meta .sharedaddy .sd-title,
.solkarra-store-details__meta .sharedaddy .sd-content {
	margin-top: 0.5rem;
}

/* Keep WooCommerce's tabs (accordion off) at the band's width. */
.solkarra-store-details__left .woocommerce-tabs {
	margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Accordion                                                           */
/* ------------------------------------------------------------------ */

.solkarra-store-acc {
	border-top: 1px solid rgba(128, 128, 128, 0.28);
}

.solkarra-store-acc:last-child {
	border-bottom: 1px solid rgba(128, 128, 128, 0.28);
}

.solkarra-store-acc__title {
	list-style: none;
	cursor: pointer;
	padding: 1rem 2.25rem 1rem 0;
	font-weight: 600;
	position: relative;
	user-select: none;
}

.solkarra-store-acc__title::-webkit-details-marker {
	display: none;
}

.solkarra-store-acc__title::after {
	content: "";
	position: absolute;
	right: 0.6rem;
	top: 50%;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s;
}

.solkarra-store-acc[open] > .solkarra-store-acc__title::after {
	transform: translateY(-30%) rotate(-135deg);
}

.solkarra-store-acc__title:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.solkarra-store-acc__body {
	padding: 0 0 1.25rem;
}

.solkarra-store-acc__body > :last-child {
	margin-bottom: 0;
}

/* Headings inside a description read as section labels, not page titles.
   Neve sizes headings from var(--fontsize, ...), so both are set. */
.solkarra-store-acc__body h1,
.solkarra-store-acc__body h2,
.solkarra-store-acc__body h3,
.solkarra-store-acc__body h4,
.solkarra-store-acc__body h5,
.solkarra-store-acc__body h6 {
	--fontsize: 1.15em;
	font-size: 1.15em;
	line-height: 1.35;
	margin: 1.5em 0 0.5em;
}

.solkarra-store-acc__body h1,
.solkarra-store-acc__body h2 {
	--fontsize: 1.3em;
	font-size: 1.3em;
}

.solkarra-store-acc__body > h1:first-child,
.solkarra-store-acc__body > h2:first-child,
.solkarra-store-acc__body > h3:first-child {
	margin-top: 0;
}

/* The reviews template carries its own heading; keep it modest inside the item. */
.solkarra-store-acc--reviews .woocommerce-Reviews-title {
	font-size: 1em;
	margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Related products: equal cards                                       */
/* ------------------------------------------------------------------ */

.solkarra-store--related-grid #content section.related ul.products,
.solkarra-store--related-grid #content section.upsells ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 4%;
	margin: 0;
}

@media (min-width: 769px) {
	.solkarra-store--related-grid #content section.related ul.products,
	.solkarra-store--related-grid #content section.upsells ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* WooCommerce's clearfix pseudo-elements would otherwise occupy grid cells. */
.solkarra-store--related-grid #content section.related ul.products::before,
.solkarra-store--related-grid #content section.related ul.products::after,
.solkarra-store--related-grid #content section.upsells ul.products::before,
.solkarra-store--related-grid #content section.upsells ul.products::after {
	display: none;
}

.solkarra-store--related-grid #content section.related ul.products li.product,
.solkarra-store--related-grid #content section.upsells ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

.solkarra-store--related-grid section.related li.product .sp-product-image .img-wrap,
.solkarra-store--related-grid section.upsells li.product .sp-product-image .img-wrap {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.solkarra-store--related-grid section.related li.product .sp-product-image img,
.solkarra-store--related-grid section.upsells li.product .sp-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Mobile cart bar                                                     */
/* ------------------------------------------------------------------ */

.solkarra-store-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
	background: var(--nv-site-bg, #fff);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
	visibility: hidden;
	transform: translateY(110%);
	transition: transform 0.2s, visibility 0s 0.2s;
}

.solkarra-store-bar.is-visible {
	visibility: visible;
	transform: none;
	transition: transform 0.2s;
}

.solkarra-store-bar__price {
	flex: 1 1 auto;
	font-weight: 600;
	line-height: 1.2;
}

.solkarra-store-bar__price del {
	opacity: 0.6;
	font-weight: 400;
	margin-right: 0.35em;
}

.solkarra-store-bar__button {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Room for the bar so the footer's last line is never covered. */
.solkarra-store--bar-visible {
	padding-bottom: 72px;
}

@media (min-width: 769px) {
	.solkarra-store-bar {
		display: none;
	}
}