/**
 * La2ta Future -- product detail page.
 * Page-level styles live in their own file (la2ta-<page>.css), loaded by
 * common/header.twig only on that page; shared tokens + site-wide rules stay
 * in la2ta-future.css.
 */

/* =======================================================================
   Product detail page (product/product.twig, body.product-product)
   Reskins So theme's product view to the homepage look: wine + cream,
   rounded cards, pill buttons (width, font, breadcrumb: "Site-wide brand"
   in la2ta-future.css). Loaded only on the product page, after
   la2ta-future.css (uses its --lf-* tokens). layout25/blue.css loads AFTER
   this file, so every rule here is prefixed with body.product-product to
   out-rank it.
   ======================================================================= */

/* --- gallery --------------------------------------------------------- */
body.product-product .product-view .content-product-left .large-image {
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	background: #fff;
}
body.product-product .product-view .content-product-left .large-image img {
	display: block;
	width: 100%;
	height: auto;
}
body.product-product #content.product-view .large-image .box-label {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	inset-inline-end: auto;
	z-index: 2;
}
body.product-product #content.product-view .label-product.label-sale {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	background: var(--lf-hot);
	color: #fff;
	border-radius: var(--lf-radius-pill);
	padding: 6px 11px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	direction: ltr;
}
body.product-product .product-view .content-product-left .full_slider .thumbnail,
body.product-product #thumbCarousel .carousel__slide {
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
}
/* Ring lives on the <a class="carousel__slide"> wrapper, not the <img>:
   <img> has a UA-default overflow:clip that silently drops styling meant
   to highlight the element itself (computed style reported it fine, but
   nothing rendered) -- the wrapper isn't a replaced element, so its own
   border paints normally. */
body.product-product #thumbCarousel .carousel__slide.is-nav-selected {
	border-radius: var(--lf-radius-sm);
	border-color: var(--lf-wine);
}
body.product-product #mainCarousel { --carousel-button-color: var(--lf-wine); }

/* --- info column ----------------------------------------------------- */
@media (max-width: 991px) {
	body.product-product .product-view .content-product-right { margin-block-start: 22px; }
}
@media (min-width: 1000px) {
	body.product-product .product-view .content-product-right { padding-inline-start: 36px; }
}

body.product-product .product-view .content-product-right .title-product h1 {
	font-family: var(--lf-font);
	font-size: 22px;
	font-weight: var(--lf-font-weight-heading);
	line-height: 1.25;
	text-transform: none;
	color: var(--lf-ink);
	margin: 0 0 10px;
}
@media (min-width: 680px) {
	body.product-product .product-view .content-product-right .title-product h1 { font-size: 30px; }
}

body.product-product .product-view .content-product-right .review-order {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px 16px;
	margin-block-end: 16px;
}
body.product-product .product-view .content-product-right .box-review { margin: 0; font-size: 13px; }
body.product-product .product-view .content-product-right .box-review .fa-stack { color: var(--lf-star); }
body.product-product .product-view .content-product-right .box-review a { color: var(--lf-muted); }
body.product-product .product-view .content-product-right .box-review a:hover { color: var(--lf-wine); }
body.product-product .product-view .content-product-right .review-order .order-num {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--lf-radius-pill);
	background: var(--lf-wine-50);
	color: var(--lf-wine);
	font-size: 12px;
	font-weight: var(--lf-font-weight-medium);
}
body.product-product .product-view .content-product-right .review-order .order-num .fa { margin: 0; color: var(--lf-hot); }

/* price */
body.product-product .product-view .product_page_price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 2px;
	margin: 0 0 18px;
}
body.product-product .product-view .product_page_price .price-new {
	color: var(--lf-wine);
	font-size: 32px;
	font-weight: 900;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
@media (min-width: 680px) {
	body.product-product .product-view .product_page_price .price-new { font-size: 38px; }
}
body.product-product .product-view .product_page_price .price-old {
	color: var(--lf-muted);
	font-size: 17px;
	font-weight: var(--lf-font-weight-body);
	text-decoration: line-through;
	margin: 0;
}

/* brand / code / delivery -- soft cream card, label column + value */
body.product-product .product-view .content-product-right .product-box-desc {
	margin: 0 0 20px;
	padding: 8px 16px;
	border-radius: var(--lf-radius-sm);
	background: var(--lf-cream);
	font-size: 14px;
	color: var(--lf-ink);
}
body.product-product .product-view .content-product-right .product-box-desc .inner-box-desc > div {
	display: flex;
	gap: 12px;
	padding: 7px 0;
}
body.product-product .product-view .content-product-right .product-box-desc .inner-box-desc > div.hidden { display: none; }
body.product-product .product-view .content-product-right .product-box-desc .inner-box-desc > div + div {
	border-block-start: 1px solid var(--lf-sand);
}
body.product-product .product-view .content-product-right .product-box-desc .inner-box-desc > div > span:first-child {
	flex: 0 0 120px;
	min-width: 0;
	color: var(--lf-muted);
}
body.product-product .product-view .content-product-right .product-box-desc .brand a,
body.product-product .product-view .content-product-right .product-box-desc .brand a span {
	color: var(--lf-wine);
	font-weight: var(--lf-font-weight-medium);
}
body.product-product .product-view .content-product-right .product-box-desc .brand a:hover span { color: var(--lf-wine-600); }

/* options */
body.product-product .product-view #product .form-group .control-label {
	font-weight: var(--lf-font-weight-medium);
	color: var(--lf-ink);
	margin-block-end: 6px;
}
body.product-product .product-view #product .form-control:not(.quantity-control *),
body.product-product .product-view #product .form-select {
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	min-height: 44px;
	box-shadow: none;
}
body.product-product .product-view #product .form-control:not(.quantity-control *):focus,
body.product-product .product-view #product .form-select:focus {
	border-color: var(--lf-wine);
	background-color: #fff;
}

/* quantity: pill stepper */
body.product-product .product-view .content-product-right .box-info-product .quantity {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-end: 16px;
}
body.product-product .product-view #product .box-info-product .quantity .control-label {
	min-width: 0;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
	color: var(--lf-muted);
}
body.product-product .product-view .content-product-right .box-info-product .quantity .quantity-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-pill);
	background: #fff;
	overflow: hidden;
	direction: ltr;
}
body.product-product .product-view .content-product-right .box-info-product .quantity .quantity-control span {
	width: 42px;
	height: 42px;
	line-height: 42px;
	background: transparent;
	color: var(--lf-ink);
	font-size: 12px;
	transition: background-color .15s ease, color .15s ease;
}
body.product-product .product-view .content-product-right .box-info-product .quantity .quantity-control span:hover {
	background: var(--lf-wine-50);
	color: var(--lf-wine);
}
body.product-product .product-view .content-product-right .box-info-product .quantity .quantity-control input.form-control {
	width: 44px;
	height: 42px;
	line-height: 42px;
	border: 0;
	background: transparent;
	font-weight: var(--lf-font-weight-medium);
	box-shadow: none;
}

/* Add to cart = primary wine, Buy now = light wine -- as .lf-btn */
body.product-product .product-view .content-product-right .box-info-product .cart {
	display: flex;
	gap: 8px;
	margin: 0 0 12px;
}
body.product-product .product-view .content-product-right .box-info-product .cart .btn {
	flex: 1 1 0;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: var(--lf-radius-pill);
	box-shadow: none;
	background: var(--lf-wine);
	color: #fff;
	font-family: var(--lf-font);
	font-size: 15px;
	font-weight: var(--lf-font-weight-heading);
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
@media (min-width: 680px) {
	body.product-product .product-view .content-product-right .box-info-product .cart { gap: 10px; margin-block-end: 14px; }
	body.product-product .product-view .content-product-right .box-info-product .cart .btn { height: 52px; padding: 0 18px; font-size: 16px; }
}
body.product-product .product-view .content-product-right .box-info-product .cart .btn:hover {
	background: var(--lf-wine-600);
	color: #fff;
}
body.product-product .product-view .content-product-right .box-info-product .cart .btn:active { transform: scale(.98); }
body.product-product .product-view .content-product-right .box-info-product .cart .btn.btn-checkout {
	background: var(--lf-wine-50);
	color: var(--lf-wine);
	border-color: rgba(143, 18, 56, .18);
}
body.product-product .product-view .content-product-right .box-info-product .cart .btn.btn-checkout:hover {
	background: var(--lf-sand);
	color: var(--lf-wine);
}
@media (min-width: 1000px) {
	body.product-product .product-view .content-product-right .box-info-product .cart { max-width: 460px; }
}

/* wishlist / compare: quiet text links with a round icon */
body.product-product .product-view .content-product-right .box-info-product .add-to-links {
	padding: 0;
	font-size: 13px;
	text-transform: none;
}
body.product-product .product-view .content-product-right .box-info-product .add-to-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
}
body.product-product .box-cart .add-to-links li { margin: 0; }
body.product-product .product-view .content-product-right .box-info-product .add-to-links li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--lf-muted);
	cursor: pointer;
}
body.product-product .product-view .content-product-right .box-info-product .add-to-links li a:hover { color: var(--lf-wine) !important; }
body.product-product .product-view .content-product-right .box-info-product .add-to-links .fa {
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin: 0;
	background: var(--lf-wine-50);
	color: var(--lf-wine);
	transition: background-color .15s ease, color .15s ease;
}
body.product-product .product-view .content-product-right .box-info-product .add-to-links li a:hover .fa {
	background: var(--lf-wine);
	color: #fff;
}

/* tags */
body.product-product .product-view .social-share .btn-primary {
	background: var(--lf-wine-50);
	border: 0;
	border-radius: var(--lf-radius-pill);
	color: var(--lf-wine);
	padding: 5px 12px;
}
body.product-product .product-view .social-share .btn-primary:hover { background: var(--lf-wine); color: #fff; }

/* --- tabs: underline row, active = wine ------------------------------ */
/* theme stacks .box-cart margin 15px + .content-product-midde margin 50px
   on top of this; drop both so the gap above the tabs is set here only */
body.product-product .product-view .box-cart { margin-block-end: 0; }
body.product-product .content-product-midde { margin-block-start: 0; }
body.product-product .content-product-mainbody { margin-block-start: 28px; }
@media (min-width: 1000px) { body.product-product .content-product-mainbody { margin-block-start: 64px; } }

body.product-product .producttab .tabsslider.horizontal-tabs { padding: 0; }
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 32px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	/* bottom rule as an inset shadow: overflow-x:auto would clip a tab
	   underline pushed over a real border */
	box-shadow: inset 0 -1px 0 var(--lf-line);
	overflow-x: auto;
	scrollbar-width: none;
}
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs::-webkit-scrollbar { display: none; }
/* responsive.css stacks the tabs full width on phones -- keep them in a row */
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li { margin: 0; flex: 0 0 auto; width: auto; }
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a { width: auto; }
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a {
	position: relative;
	padding: 0 0 14px !important;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--lf-muted);
	font-family: var(--lf-font);
	font-size: 17px;
	line-height: 1.3;
	font-weight: var(--lf-font-weight-medium);
	text-transform: none;
	white-space: nowrap;
}
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	display: block;
	background: transparent;
	transition: background-color .15s ease;
}
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a:hover,
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li.active a,
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a.active {
	background: transparent;
	color: var(--lf-ink);
}
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a.active { color: var(--lf-ink); }
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a:not(.active):hover::after { background: var(--lf-sand); }
body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a.active::after { background: var(--lf-wine); }

body.product-product .producttab .tabsslider.horizontal-tabs .tab-content { padding: 24px 0 40px; }
@media (min-width: 1000px) {
	body.product-product .producttab .tabsslider.horizontal-tabs .tab-content { padding: 32px 0 60px; }
}

/* description body -- pasted Word HTML carries inline Calibri; pull it
   back to the site font and a readable measure */
body.product-product .product-detail .producttab .tab-content .product-property-title {
	font-family: var(--lf-font);
	font-size: 20px;
	font-weight: var(--lf-font-weight-heading);
	color: var(--lf-ink);
	text-transform: none;
	margin: 0 0 14px;
}
body.product-product #collapse-description {
	max-width: 860px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--lf-ink);
}
body.product-product #collapse-description,
body.product-product #collapse-description * {
	font-family: var(--lf-font) !important;
}
body.product-product #collapse-description p,
body.product-product #collapse-description li,
body.product-product #collapse-description span {
	color: #45463f;
	line-height: 1.7 !important;
}
body.product-product #collapse-description strong,
body.product-product #collapse-description strong span,
body.product-product #collapse-description b { color: var(--lf-ink); }
body.product-product #collapse-description p { margin: 0 0 8px; }
body.product-product #collapse-description img { max-width: 100%; height: auto; border-radius: var(--lf-radius-sm); }
body.product-product .product-detail .button-toggle .showmore { color: var(--lf-wine); font-weight: var(--lf-font-weight-medium); }

/* specifics list */
body.product-product .product-detail .producttab .tab-content .product-property-list {
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	overflow: hidden;
	margin-block-end: 28px;
}
body.product-product .product-detail .producttab .tab-content .product-property-list li {
	padding: 10px 16px;
	border: 0;
}
body.product-product .product-detail .producttab .tab-content .product-property-list li:nth-child(odd) { background: var(--lf-cream); }
body.product-product .product-detail .producttab .tab-content .product-property-list li .propery-title { color: var(--lf-muted); }

/* reviews tab */
body.product-product #tab-review .form-control {
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	box-shadow: none;
}
body.product-product #tab-review .form-control:focus { border-color: var(--lf-wine); background: #fff; }
body.product-product #tab-review .btn-primary,
body.product-product #tab-review #button-review {
	background: var(--lf-wine);
	border: 0;
	border-radius: var(--lf-radius-pill);
	padding: 12px 26px;
	color: #fff;
	font-weight: var(--lf-font-weight-medium);
}
body.product-product #tab-review .btn-primary:hover,
body.product-product #tab-review #button-review:hover { background: var(--lf-wine-600); }
body.product-product #tab-review .table { border-radius: var(--lf-radius-sm); overflow: hidden; }
body.product-product #form-review > h2 { font-family: var(--lf-font); font-size: 20px; font-weight: var(--lf-font-weight-heading); }

/* --- related / upsell: same tabs as Description / Reviews above -------- */
body.product-product .content-product-bottom .nav-tabs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 32px;
	margin: 0 0 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	/* bottom rule as an inset shadow, like .producttab (overflow-x:auto would
	   clip an underline pushed over a real border) */
	box-shadow: inset 0 -1px 0 var(--lf-line);
	overflow-x: auto;
	scrollbar-width: none;
}
body.product-product .content-product-bottom .nav-tabs::-webkit-scrollbar { display: none; }
body.product-product .content-product-bottom .nav-tabs::before,
body.product-product .content-product-bottom .nav-tabs::after,
body.product-product .content-product-bottom .nav-tabs li::after { display: none; }
body.product-product .content-product-bottom .nav-tabs li { margin: 0; flex: 0 0 auto; width: auto; }
body.product-product .content-product-bottom .nav-tabs li a {
	position: relative;
	display: block;
	width: auto;
	padding: 0 0 14px !important;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--lf-muted);
	font-family: var(--lf-font);
	font-size: 17px;
	line-height: 1.3;
	font-weight: var(--lf-font-weight-medium);
	text-transform: none;
	white-space: nowrap;
}
body.product-product .content-product-bottom .nav-tabs li a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	display: block;
	background: transparent;
	transition: background-color .15s ease;
}
body.product-product .content-product-bottom .nav-tabs li a:hover,
body.product-product .content-product-bottom .nav-tabs li a.active {
	background: transparent;
	color: var(--lf-ink);
}
body.product-product .content-product-bottom .nav-tabs li a:not(.active):hover::after { background: var(--lf-sand); }
body.product-product .content-product-bottom .nav-tabs li a.active::after { background: var(--lf-wine); }

body.product-product .related-products .product-item-container {
	background: var(--lf-paper);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	padding: 10px;
	transition: transform .2s ease, box-shadow .2s ease;
}
body.product-product .related-products .product-item-container:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px -5px rgba(43, 35, 26, .14);
}
body.product-product .related-products .product-image-container {
	border-radius: 15px;
	overflow: hidden;
	background: var(--lf-cream);
}
body.product-product .related-products .right-block h4 {
	font-family: var(--lf-font);
	font-size: 14px;
	font-weight: var(--lf-font-weight-heading);
	line-height: 1.35;
}
body.product-product .related-products .right-block h4 a { color: var(--lf-ink); }
body.product-product .related-products .right-block h4 a:hover { color: var(--lf-wine); }
body.product-product .related-products .price-new { color: var(--lf-wine); font-weight: 900; }
/* La2ta card row (soconfig/lf_card_slider.twig): So theme clips the open
   tab, which would cut off the row's bleed, the hover lift and the arrows */
body.product-product .content-product-bottom .tab-content .tab-pane.active:has(.lf-card-slider) { overflow: visible; }

/* --- sticky "buy now" strip (desktop, after scrolling) ---------------
   So theme pins .sticky-detail (image + name + price) and
   .box-info-product.fixed-top (qty + button, laid over it) to the top;
   both sit on the bottom edge here instead. Desktop-only (>=1200px) --
   below that, So theme's own CSS still fixes/shows it (from 767px up),
   so it's force-hidden here instead. */
@media (max-width: 1199.98px) {
	body.product-product .sticky-detail,
	body.product-product .box-info-product.fixed-top {
		display: none !important;
	}
}
body.product-product .sticky-detail {
	top: auto;
	bottom: 0;
	height: auto;
	min-height: 96px;
	padding: 12px 0;
	background: var(--lf-paper);
	box-shadow: 0 -8px 24px rgba(43, 35, 26, .08);
	border-block-start: 1px solid var(--lf-line);
}
@media (min-width: 1200px) {
	body.product-product .box-info-product.fixed-top {
		top: auto;
		bottom: 0;
		max-width: var(--lf-max);
		padding-inline: 40px;
	}
	/* room under the footer so the strip never covers its last line */
	body.product-product:has(.sticky-detail.sticky-active) { padding-bottom: 96px; }
	/* keep the right end of the strip clear of the Wonderchat bubble
	   (fixed bottom-right, ~100px wide incl. margins + a little air; it is an iframe that
	   grows into the chat panel, so it is not moved). Physical "right" on
	   purpose: the bubble sits on the right in RTL too. */
	body.product-product .box-info-product.fixed-top,
	body.product-product .sticky-detail .container {
		padding-right: max(40px, calc(120px - (100vw - var(--lf-max)) / 2));
	}
}
body.product-product .sticky-detail .product-image {
	width: 72px;
	max-height: 72px;
	border-radius: var(--lf-radius-sm);
	border: 1px solid var(--lf-line);
}
body.product-product .sticky-detail .product-cont h1 {
	font-family: var(--lf-font);
	font-size: 16px;
	font-weight: var(--lf-font-weight-medium);
	color: var(--lf-ink);
	margin: 10px 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.product-product .sticky-detail .product-cont .price .price-new { color: var(--lf-wine); font-weight: 900; }
body.product-product .sticky-detail .product-cont .price .price-old { color: var(--lf-muted); font-size: 14px; }
@media (min-width: 1200px) {
	body.product-product .product-view .content-product-right .box-info-product.fixed-top .inner { height: 96px; }
	body.product-product .product-view .content-product-right .box-info-product.fixed-top .cart-sticky .btn {
		height: 48px;
		padding: 0 28px;
		border: 0;
		border-radius: var(--lf-radius-pill);
		background: var(--lf-wine);
		color: #fff;
		font-family: var(--lf-font);
		font-weight: var(--lf-font-weight-heading);
		text-transform: none;
		box-shadow: none;
	}
	body.product-product .product-view .content-product-right .box-info-product.fixed-top .cart-sticky .btn:hover { background: var(--lf-wine-600); color: #fff; }
}