/* ==========================================================================
   eclat-single-product.css — the single product page (Phase 3)
   --------------------------------------------------------------------------
   Reference: woodmart.xtemos.com/shop/accessories/smart-watches-wood-edition/

     top      vertical thumbnail rail | sticky stage | summary column
     tabs     five, centred, underlined active
     bottom   frequently bought together · you may also like · related

   Loaded only on `is_product()`. The page's own container is The7's
   `div.product`, which is turned into the layout grid here rather than being
   re-wrapped in PHP — the markup WooCommerce and its extensions expect stays
   exactly where they expect it.
   ========================================================================== */

.single-product .eclat-sp-scope,
.single-product div.product {
	--sp-gap: 50px;
	--sp-max: 1560px;
}

/* --------------------------------------------------------------------------
   1. THE TWO-COLUMN TOP
   --------------------------------------------------------------------------
   Proportional tracks, not a fixed summary column. The site layout is now
   full-width, and a fixed 470px summary beside a `1fr` gallery meant that on a
   1900px screen the gallery took ~1330px — an enormous image next to a narrow
   strip of text. 1.08fr / 1fr keeps the demo's roughly-even split at any width,
   and the whole block is capped and centred so it cannot stretch past the
   measure the type was designed for.
   ----------------------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: var(--sp-gap);
	align-items: start;
	max-width: var(--sp-max);
	margin-inline: auto;
	padding-block: 34px 0;
}

.single-product div.product > .eclat-sp-gallery { grid-column: 1; }
.single-product div.product > .summary { grid-column: 2; }

/* --------------------------------------------------------------------------
   1b. UNDO THE7'S FLOAT LAYOUT — this is what was collapsing the page
   --------------------------------------------------------------------------
   The culprit is NOT WooCommerce. The7 dequeues `woocommerce-layout.css`
   entirely — it is not loaded on this site — and ships its own replacement at
   `uploads/the7-css/compatibility/wc-dt-custom.css`, which contains:

       .product div.images  { width: 50%; margin-right: 60px; }        (L3588)
       .product div.summary { width: calc(100% - 50% - 60px); }        (L3592)
       .product div.summary { float: left; box-sizing: border-box; }   (L3583)
       .woocommerce div.product div.summary {
           display: flex; flex-flow: column wrap;                      (L3706)
       }

   `calc(100% - 50% - 60px)` is `calc(50% - 60px)`, at specificity (0,2,1).
   Our grid rules only ever set `grid-column`, never `width`, so the summary
   inherited that and rendered at half its own grid track minus 60px — a narrow
   squeezed column with the remainder of the track left empty. That is exactly
   the reported "squished columns and massive white space", and it is worse in
   Arabic only because the float direction changes where the empty half lands.

   A float is ignored on a grid item; a width is not. So the width is what had
   to be reset, at a specificity that beats (0,2,1) — and the flex-flow at
   (0,3,2) has to be beaten too, or the summary stays a wrap-column flex
   container. Both selectors below clear those bars, so the cascade settles it
   with no `!important` anywhere.
   ----------------------------------------------------------------------- */
.woocommerce #content div.product > .summary,
.woocommerce div.product > .summary,
.woocommerce-page #content div.product > .summary,
.woocommerce-page div.product > .summary,
.single-product div.product > .summary {
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	min-width: 0;
	margin-bottom: 0;
	box-sizing: border-box;
	/* eclat-shop.css indents the summary for the old floated layout */
	padding-inline-start: 0;
}

/* (0,3,2) — matches L3706 and loads later, so the wrap-column flex is undone */
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary {
	display: block;
	flex-flow: initial;
	width: auto;
	float: none;
}

/* the same reset for the gallery, in case the theme ever restores `div.images` */
.woocommerce #content div.product > .images,
.woocommerce div.product > .images,
.woocommerce-page #content div.product > .images,
.woocommerce-page div.product > .images,
.single-product div.product > .images {
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	margin-inline-end: 0;
}

/* every band below the fold spans both tracks and clears the old floats */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .eclat-fbt,
.single-product div.product > .eclat-sp-rail,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.woocommerce #content div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs {
	float: none;
	width: auto;
	max-width: none;
	clear: both;
}

/* everything below the fold spans both tracks */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .eclat-fbt,
.single-product div.product > .eclat-sp-rail,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .clear {
	grid-column: 1 / -1;
}

/* the theme's own sale flash and gallery are replaced */
.single-product div.product > .onsale,
.single-product div.product > .woocommerce-product-gallery { display: none; }

/* --------------------------------------------------------------------------
   2. GALLERY — vertical thumbnails, sticky stage
   ----------------------------------------------------------------------- */
.eclat-sp-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	position: sticky;
	top: 24px;
}

.admin-bar .eclat-sp-gallery { top: 56px; }

.eclat-sp-gallery.has-thumbs {
	grid-template-columns: 92px minmax(0, 1fr);
}

.eclat-sp-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 620px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.eclat-sp-gallery__thumb {
	position: relative;
	padding: 0;
	background: #fff;
	border: 1px solid var(--wd-line);
	cursor: pointer;
	line-height: 0;
	transition: border-color 0.2s ease;
}

.eclat-sp-gallery__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}

.eclat-sp-gallery__thumb.is-active,
.eclat-sp-gallery__thumb:hover { border-color: var(--wd-accent); }

.eclat-sp-gallery__stage {
	position: relative;
	background: #fff;
	border: 1px solid var(--wd-line);
	overflow: hidden;
}

.eclat-sp-gallery__slide {
	display: none;
	margin: 0;
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	padding: 22px;
	box-sizing: border-box;
}

.eclat-sp-gallery__slide.is-active { display: flex; }

.eclat-sp-gallery__slide a,
.eclat-sp-gallery__slide img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.eclat-sp-gallery__flash {
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wd-sale);
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   3. SUMMARY COLUMN
   ----------------------------------------------------------------------- */
.single-product .summary.entry-summary { min-width: 0; }

.eclat-sp-crumbs {
	margin-bottom: 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wd-soft);
}

.eclat-sp-crumbs a { color: var(--wd-soft); }
.eclat-sp-crumbs a:hover { color: var(--wd-accent); }
.eclat-sp-crumbs > span[aria-hidden] { margin-inline: 6px; opacity: 0.55; }
.eclat-sp-crumbs__current { color: var(--wd-head); }

/* title left, brand mark pinned to the top-inline-end corner */
.eclat-sp-headline {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 18px;
	margin-bottom: 10px;
}

.single-product .eclat-sp-title,
.single-product .product_title {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--wd-dark);
}

.eclat-sp-brandmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 104px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--wd-line);
	text-align: center;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eclat-sp-brandmark:hover { border-color: var(--wd-accent); }

.eclat-sp-brandmark__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--wd-soft);
}

.eclat-sp-brandmark__name {
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wd-dark);
}

/* rating */
.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--wd-soft);
}

.single-product .woocommerce-product-rating .star-rating { color: var(--wd-gold); }
.single-product .woocommerce-review-link { color: var(--wd-soft); }
.single-product .woocommerce-review-link:hover { color: var(--wd-accent); }

/* price */
.single-product .summary > .price {
	margin: 0 0 16px;
	font-family: var(--wd-font-head);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wd-accent);
}

.single-product .summary > .price del {
	margin-inline-end: 10px;
	font-size: 19px;
	font-weight: 400;
	color: var(--wd-soft);
	opacity: 1;
}

.single-product .summary > .price ins { text-decoration: none; background: none; }
.single-product .summary > .price .woocommerce-Price-amount { color: inherit; }

/* short description */
.single-product .woocommerce-product-details__short-description {
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wd-line);
	font-size: 15px;
	line-height: 1.72;
	color: var(--wd-text);
}

.single-product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* stock line */
.single-product .summary p.stock {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
}

.single-product .summary p.stock.in-stock { color: var(--wd-ok); }
.single-product .summary p.stock.out-of-stock { color: var(--wd-sale); }

/* attribute chips */
.eclat-sp-swatches {
	display: grid;
	gap: 12px;
	margin-bottom: 20px;
}

.eclat-sp-swatch {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}

.eclat-sp-swatch__label {
	font-family: var(--wd-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-head);
}

.eclat-sp-swatch__vals { display: flex; flex-wrap: wrap; gap: 8px; }

.eclat-sp-swatch__v {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--wd-line);
	font-size: 13px;
	color: var(--wd-head);
}

/* --------------------------------------------------------------------------
   4. QUANTITY + ADD TO CART
   ----------------------------------------------------------------------- */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
}

.single-product form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	height: 50px;
	border: 1px solid var(--wd-line);
	background: #fff;
}

.single-product form.cart .quantity .is-form,
.single-product form.cart .quantity button {
	width: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--wd-head);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease;
}

.single-product form.cart .quantity .is-form:hover,
.single-product form.cart .quantity button:hover { background: var(--wd-alt); color: var(--wd-accent); }

.single-product form.cart .quantity input.qty {
	width: 52px;
	border: 0;
	border-inline: 1px solid var(--wd-line);
	background: #fff;
	text-align: center;
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-head);
	-moz-appearance: textfield;
	appearance: textfield;
}

.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-width: 200px;
	height: 50px;
	padding: 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wd-accent);
	border: 1px solid var(--wd-accent);
	border-radius: 0;
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
}

.single-product form.cart .single_add_to_cart_button:hover {
	background: var(--wd-accent-dk);
	border-color: var(--wd-accent-dk);
}

/* --------------------------------------------------------------------------
   5. SECONDARY ACTIONS — compare · wishlist · size guide
   --------------------------------------------------------------------------
   TI Wishlist injects its own button into the same place; it is restyled to
   match the two of ours rather than reimplemented, so its AJAX keeps working.
   ----------------------------------------------------------------------- */
.eclat-sp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 0 0 18px;
}

.eclat-sp-act,
.single-product .tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wd-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: color 0.18s ease;
}

.eclat-sp-act:hover,
.eclat-sp-act.is-on,
.single-product .tinvwl_add_to_wishlist_button:hover { color: var(--wd-accent); }

.eclat-sp-act.is-on svg { color: var(--wd-accent); }

/* the wishlist plugin renders its own wrapper — flatten it into the row */
.single-product .tinv-wraper.tinv-wishlist {
	display: inline-flex;
	align-items: center;
	margin: 0 0 18px;
}

.single-product .tinv-wishlist-clear,
.single-product .tinv-wraper .tinvwl-tooltip { display: none; }

.single-product .tinvwl_add_to_wishlist_button::before {
	font-size: 15px;
	margin-inline-end: 8px;
}

/* --------------------------------------------------------------------------
   6. TRUST STRIP (from commerce-ui.php) + META
   ----------------------------------------------------------------------- */
.single-product .eclat-trust {
	margin: 0 0 22px;
	padding: 16px 18px;
	background: var(--wd-alt);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 18px;
	font-size: 13px;
}

.single-product .eclat-trust li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.single-product .eclat-trust i { color: var(--wd-accent); width: 16px; text-align: center; }

.eclat-sp-meta {
	display: grid;
	gap: 9px;
	padding-top: 18px;
	border-top: 1px solid var(--wd-line);
	font-size: 13px;
}

.eclat-sp-meta__row {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}

.eclat-sp-meta__k {
	font-weight: 700;
	color: var(--wd-head);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 11.5px;
}

.eclat-sp-meta__v { color: var(--wd-text); min-width: 0; }
.eclat-sp-meta__v a { color: var(--wd-text); }
.eclat-sp-meta__v a:hover { color: var(--wd-accent); }

/* WooCommerce's own meta block is superseded by ours */
.single-product .product_meta { display: none; }

.eclat-sp-share { display: inline-flex; align-items: center; gap: 6px; }

.eclat-sp-share a,
.eclat-sp-share button {
	position: relative;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wd-line);
	color: var(--wd-head);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.eclat-sp-share a:hover,
.eclat-sp-share button:hover {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.eclat-sp-share__copy.is-copied::after {
	content: attr(data-eclat-copied);
	position: absolute;
	bottom: calc(100% + 8px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: 5px 9px;
	background: var(--wd-dark);
	color: #fff;
	font-size: 11px;
	white-space: nowrap;
	pointer-events: none;
}

[dir="rtl"] .eclat-sp-share__copy.is-copied::after { transform: translateX(50%); }

/* ==========================================================================
   7. TABS — five, centred
   ========================================================================== */
.single-product .woocommerce-tabs {
	margin-top: 62px;
	padding-top: 8px;
	border-top: 1px solid var(--wd-line);
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 30px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	border: 0;
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 16px 2px;
	border-bottom: 2px solid transparent;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--wd-soft);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--wd-head); }

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wd-dark);
	border-bottom-color: var(--wd-accent);
}

.single-product .woocommerce-Tabs-panel {
	max-width: 1000px;
	margin-inline: auto;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wd-text);
}

.single-product .woocommerce-Tabs-panel > h2:first-child { display: none; }

/* --- tab 1: description + feature boxes -------------------------------- */
.eclat-sp-desc__body { margin-bottom: 34px; }
.eclat-sp-desc__body p { margin: 0 0 16px; }
.eclat-sp-desc__body p:last-child { margin-bottom: 0; }

.eclat-sp-desc__body h2,
.eclat-sp-desc__body h3,
.eclat-sp-desc__body h4 {
	font-family: var(--wd-font-head);
	color: var(--wd-dark);
	margin: 26px 0 12px;
}

.eclat-sp-feats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eclat-sp-feat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 18px;
	background: var(--wd-alt);
	text-align: center;
}

.eclat-sp-feat__ico { color: var(--wd-accent); line-height: 0; }

.eclat-sp-feat__t {
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--wd-dark);
}

.eclat-sp-feat__d { font-size: 13px; line-height: 1.6; color: var(--wd-text); }

/* --- tab 2: attributes table ------------------------------------------ */
.single-product .woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wd-line);
}

.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	font-size: 14px;
	text-align: start;
	vertical-align: middle;
}

.single-product .woocommerce-product-attributes tr:last-child th,
.single-product .woocommerce-product-attributes tr:last-child td { border-bottom: 0; }

.single-product .woocommerce-product-attributes th {
	width: 240px;
	background: var(--wd-alt);
	font-family: var(--wd-font-head);
	font-weight: 700;
	color: var(--wd-head);
}

.single-product .woocommerce-product-attributes td p { margin: 0; }

/* --- tab 3: reviews ---------------------------------------------------- */
.single-product #reviews .woocommerce-Reviews-title {
	font-family: var(--wd-font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--wd-dark);
	margin: 0 0 18px;
}

.single-product #reviews .commentlist {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.single-product #reviews .commentlist li {
	padding: 20px 0;
	border-bottom: 1px solid var(--wd-line);
}

.single-product #reviews .comment-text { margin: 0; padding: 0; border: 0; }
.single-product #reviews .star-rating { color: var(--wd-gold); }

/* the rating bars the demo shows beside the average */
.eclat-sp-revbars { display: grid; gap: 7px; margin: 0 0 26px; }

.eclat-sp-revbar {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--wd-soft);
}

.eclat-sp-revbar__track {
	height: 6px;
	background: var(--wd-line);
	overflow: hidden;
}

.eclat-sp-revbar__fill {
	display: block;
	height: 100%;
	background: var(--wd-gold);
}

.single-product #review_form_wrapper { padding-top: 6px; }

.single-product #reviews .comment-reply-title {
	display: block;
	margin: 0 0 16px;
	font-family: var(--wd-font-head);
	font-size: 16px;
	font-weight: 600;
	color: var(--wd-dark);
}

.single-product #reviews .comment-form { display: grid; gap: 14px; }

.single-product #reviews .comment-form input[type="text"],
.single-product #reviews .comment-form input[type="email"],
.single-product #reviews .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	font-size: 14px;
	color: var(--wd-head);
}

.single-product #reviews .comment-form textarea { min-height: 130px; resize: vertical; }
.single-product #reviews .comment-form label { font-size: 13px; font-weight: 600; color: var(--wd-head); }
.single-product #reviews .comment-form-rating .stars a { color: var(--wd-gold); }

/* --- tab 4: about the brand -------------------------------------------- */
.eclat-sp-brand__intro {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: center;
	gap: 34px;
	margin-bottom: 36px;
	padding: 28px;
	background: var(--wd-alt);
}

.eclat-sp-brand__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 108px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-align: center;
	color: var(--wd-dark);
}

.eclat-sp-brand__title {
	margin: 0 0 10px;
	font-family: var(--wd-font-head);
	font-size: 20px;
	font-weight: 600;
	color: var(--wd-dark);
}

.eclat-sp-brand__copy p { margin: 0 0 16px; }

.eclat-pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- tab 5: shipping ---------------------------------------------------- */
.eclat-sp-ship {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	align-items: start;
	gap: 42px;
}

.eclat-sp-ship__art svg { width: 100%; height: auto; display: block; }

.eclat-sp-ship__title {
	margin: 0 0 18px;
	font-family: var(--wd-font-head);
	font-size: 20px;
	font-weight: 600;
	color: var(--wd-dark);
}

.eclat-sp-ship__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eclat-sp-ship__list li {
	display: grid;
	gap: 3px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wd-line);
}

.eclat-sp-ship__list li:last-child { padding-bottom: 0; border-bottom: 0; }

.eclat-sp-ship__k {
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--wd-dark);
}

.eclat-sp-ship__v { font-size: 14px; line-height: 1.65; color: var(--wd-text); }

/* ==========================================================================
   8. FREQUENTLY BOUGHT TOGETHER
   ========================================================================== */
.eclat-fbt {
	margin-top: 58px;
	padding-top: 40px;
	border-top: 1px solid var(--wd-line);
}

.eclat-fbt__title,
.eclat-sp-rail__title {
	margin: 0 0 26px;
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wd-dark);
	text-align: center;
}

.eclat-fbt__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
	align-items: center;
	gap: 44px;
}

.eclat-fbt__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.eclat-fbt__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 148px;
	height: 148px;
	padding: 10px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--wd-line);
	transition: border-color 0.2s ease;
}

.eclat-fbt__item:hover { border-color: var(--wd-accent); }

.eclat-fbt__item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.eclat-fbt__plus {
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 300;
	color: var(--wd-soft);
	line-height: 1;
}

.eclat-fbt__list {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.eclat-fbt__list label {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	color: var(--wd-text);
	cursor: pointer;
}

.eclat-fbt__list input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wd-accent);
}

.eclat-fbt__name { min-width: 0; color: var(--wd-head); }

.eclat-fbt__this {
	display: inline-block;
	margin-inline-start: 6px;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wd-accent);
}

.eclat-fbt__price {
	font-family: var(--wd-font-head);
	font-weight: 600;
	color: var(--wd-head);
	white-space: nowrap;
}

.eclat-fbt__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--wd-line);
}

.eclat-fbt__total { display: grid; gap: 2px; }

.eclat-fbt__total-k {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-soft);
}

.eclat-fbt__total-v {
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 600;
	color: var(--wd-accent);
}

.eclat-fbt__btn { min-height: 46px; }
.eclat-fbt__btn.is-busy { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   9. THE TWO BOTTOM RAILS
   ========================================================================== */
.eclat-sp-rail {
	margin-top: 58px;
	padding-top: 40px;
	border-top: 1px solid var(--wd-line);
}

/* The7's own list markup, in case its template is ever restored */
.single-product ul.related-product {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   10. MODALS — size guide and compare
   ========================================================================== */
.eclat-sp-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.eclat-sp-modal[hidden] { display: none !important; }

.eclat-sp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.eclat-sp-modal__box {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.eclat-sp-modal__box--wide { max-width: 860px; }

.eclat-sp-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.eclat-sp-modal__head button {
	background: none;
	border: 0;
	color: var(--wd-head);
	cursor: pointer;
	line-height: 0;
}

.eclat-sp-modal__body { padding: 22px; overflow-y: auto; }

.eclat-sp-modal__foot {
	padding: 16px 22px;
	border-top: 1px solid var(--wd-line);
	display: flex;
	justify-content: flex-end;
}

body.eclat-modal-open { overflow: hidden; }

.eclat-sp-sg { width: 100%; border-collapse: collapse; }

.eclat-sp-sg th,
.eclat-sp-sg td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--wd-line);
	text-align: start;
	vertical-align: top;
	font-size: 14px;
}

.eclat-sp-sg th {
	width: 150px;
	font-family: var(--wd-font-head);
	font-weight: 700;
	color: var(--wd-dark);
	white-space: nowrap;
}

.eclat-sp-sg td strong { display: block; color: var(--wd-head); }
.eclat-sp-sg td span { display: block; font-size: 13px; color: var(--wd-text); }

.eclat-sp-sg__note { margin: 16px 0 0; font-size: 13px; color: var(--wd-soft); }

.eclat-sp-cmp {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 18px;
}

.eclat-sp-cmp__col {
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 14px;
	border: 1px solid var(--wd-line);
	text-align: center;
}

.eclat-sp-cmp__col img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.eclat-sp-cmp__name {
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--wd-head);
}

.eclat-sp-cmp__price { font-weight: 600; color: var(--wd-accent); }
.eclat-sp-cmp__empty { margin: 0; color: var(--wd-soft); }

.eclat-sp-cmpbar {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 92px;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 16px;
	background: var(--wd-dark);
	border: 0;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.eclat-sp-cmpbar[hidden] { display: none !important; }

.eclat-sp-cmpbar__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--wd-accent);
	font-size: 11px;
	font-weight: 700;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
	.single-product div.product { --sp-gap: 36px; }
	.eclat-sp-brand__intro { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 992px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.single-product div.product > .eclat-sp-gallery,
	.single-product div.product > .summary { grid-column: 1; }

	/* nothing to stick to once the column is gone */
	.eclat-sp-gallery { position: static; }

	.eclat-sp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eclat-sp-ship { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.eclat-sp-ship__art { max-width: 380px; }
	.eclat-fbt__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.eclat-pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.single-product div.product { padding-block: 20px 0; }

	/* the thumbnail rail lies down under the stage on a phone */
	.eclat-sp-gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); }

	.eclat-sp-gallery__thumbs {
		order: 2;
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.eclat-sp-gallery__thumbs::-webkit-scrollbar { display: none; }
	.eclat-sp-gallery__thumb { flex: 0 0 68px; }
	.eclat-sp-gallery__stage { order: 1; }

	.eclat-sp-headline { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.eclat-sp-brandmark { flex-direction: row; gap: 8px; justify-self: start; min-width: 0; padding: 8px 12px; }

	.single-product .eclat-sp-title,
	.single-product .product_title { font-size: 22px; }

	.single-product .summary > .price { font-size: 22px; }

	.eclat-sp-swatch { grid-template-columns: minmax(0, 1fr); gap: 6px; }

	.single-product form.cart { gap: 10px; }
	.single-product form.cart .single_add_to_cart_button { flex: 1 1 100%; min-width: 0; }

	.eclat-sp-actions { gap: 16px; }

	.single-product .eclat-trust { grid-template-columns: minmax(0, 1fr); }

	.eclat-sp-meta__row { grid-template-columns: 88px minmax(0, 1fr); }

	.single-product .woocommerce-tabs { margin-top: 40px; }

	.single-product .woocommerce-tabs ul.tabs {
		gap: 2px 18px;
		margin-bottom: 24px;
	}

	.single-product .woocommerce-tabs ul.tabs li a { padding: 12px 2px; font-size: 12px; }

	.eclat-sp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.eclat-sp-feat { padding: 18px 12px; }

	.single-product .woocommerce-product-attributes th { width: 40%; padding: 11px 13px; }
	.single-product .woocommerce-product-attributes td { padding: 11px 13px; }

	.eclat-sp-brand__intro { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
	.eclat-sp-brand__mark { min-height: 84px; }

	.eclat-pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.eclat-fbt,
	.eclat-sp-rail { margin-top: 38px; padding-top: 28px; }

	.eclat-fbt__title,
	.eclat-sp-rail__title { font-size: 17px; margin-bottom: 18px; }

	.eclat-fbt__item { width: 104px; height: 104px; }

	.eclat-fbt__foot { flex-direction: column; align-items: stretch; }
	.eclat-fbt__btn { width: 100%; }

	.eclat-sp-cmpbar { inset-inline-end: 12px; bottom: 130px; padding: 10px 13px; font-size: 12px; }

	.eclat-sp-modal { padding: 12px; }
	.eclat-sp-modal__body { padding: 16px; }
	.eclat-sp-sg th { width: 108px; white-space: normal; }
}

/* --- tab 3: the rating summary beside the bars -------------------------- */
.eclat-sp-revsum {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	align-items: center;
	gap: 30px;
	margin: 0 0 30px;
	padding: 22px;
	background: var(--wd-alt);
}

.eclat-sp-revsum__avg {
	display: grid;
	gap: 5px;
	justify-items: center;
	text-align: center;
}

.eclat-sp-revsum__n {
	font-family: var(--wd-font-head);
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--wd-dark);
}

.eclat-sp-revsum__avg .star-rating { color: var(--wd-gold); }
.eclat-sp-revsum__c { font-size: 12.5px; color: var(--wd-soft); }

.eclat-sp-revsum .eclat-sp-revbars { margin: 0; }

@media (max-width: 768px) {
	.eclat-sp-revsum {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 16px;
	}
}

/* ==========================================================================
   ROUND 33 — STICKY ADD TO CART, BASE STATE
   --------------------------------------------------------------------------
   The bar is printed on every viewport by inc/single-product.php so its price
   and its add-to-cart link are in the served HTML. It is hidden here and
   revealed by eclat-mobile.css under 768px, which keeps that file's rule that
   every selector in it sits inside a width query.
   ========================================================================== */
.eclat-sp-stickybar { display: none; }