/**
 * La2ta Future design system.
 * Loaded AFTER So theme's own CSS. All selectors are scoped to the `lf-`
 * prefix (or `.lf-scope` container) so nothing here collides with Bootstrap
 * or existing So theme classes -- see docs/PLAN-la2ta-future.md section 2.
 */

:root {
	/* Color -- wine + cream, main color per client request (#902e57) */
	--lf-wine: #8f1238;
	--lf-wine-600: #6F0E2B; /* hover/active */
	--lf-wine-50: #f7eef1;  /* tint bg for badges, selected chip, hover rows */
	--lf-ink: #20211f;
	--lf-muted: #6f706b;
	--lf-cream: #f7f2e9;
	--lf-paper: #fffdfa;
	--lf-sand: #e9dfcf;
	--lf-sage: #78836a;
	--lf-gold: #c9a45c;
	--lf-yellow: #FDC806; /* extra accent, reserved for later use (client-supplied) */
	--lf-line: #e9e2d8;
	--lf-success: #2f7d4f;
	--lf-danger: #c0392b;
	--lf-hot: #e91e4d;     /* discount badge (HTML handoff) */
	--lf-save-bg: #ffe48c; /* "Save ₪X" chip */
	--lf-star: #ef9b00;    /* rating star */

	--lf-radius: 20px;
	--lf-radius-sm: 12px;
	--lf-radius-pill: 999px;
	--lf-shadow: 0 18px 55px rgba(43, 35, 26, .10);
	--lf-shadow-sm: 0 6px 18px rgba(43, 35, 26, .08);
	--lf-max: 1440px;

	/* Typography -- Rubik for Hebrew/English, Readex Pro for Arabic.
	   html[lang^="ar"] overrides --lf-font below. */
	--lf-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--lf-font-weight-body: 400;
	--lf-font-weight-medium: 500;
	--lf-font-weight-heading: 700;
}

html[lang^="ar"] {
	--lf-font: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	.lf-scope * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

html body{
	font-size: 15px;
	background: #fff;
}

/* ---------------------------------------------------------------------
   Site-wide brand: main color, font, page width -- same as the homepage
   - Color: So theme's compiled CSS (layout25/blue*.css, responsive*.css,
     somobile/css/blue*.css) reads var(--lf-wine) / var(--lf-wine-600)
     instead of its old hard-coded hex, so change the color only in :root.
     If the theme SCSS is ever recompiled from admin, the old hex comes
     back -- set the admin theme color to the --lf-wine value too.
   - Font: So theme prints `body, #wrapper {font-family: Raleway}` and
     `h1,h2,h3,.modtitle... {font-family: Open Sans}` inline from admin
     settings; the selectors below out-rank both. Icon fonts set their own
     family on .fa / [class^="icon-"], which out-rank element selectors.
   - Width: inner pages use Bootstrap's .container; give it the
     .lf-container width + gutters (row -12px + col 12px cancel out, so
     content lines up with the header/footer edge).
   ------------------------------------------------------------------- */

:root {
	--bs-primary: var(--lf-wine);
	--bs-primary-rgb: 143, 18, 56;
	--bs-link-color: var(--lf-wine);
	--bs-link-color-rgb: 143, 18, 56;
	--bs-link-hover-color: var(--lf-wine-600);
	--bs-link-hover-color-rgb: 111, 14, 43;
	--bs-body-font-family: var(--lf-font);
}

html body,
html body #wrapper,
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .font-title,
html body .head-title .modtitle,
html body .shoppage .title-shoppage,
html body .modtitle,
html body input,
html body button,
html body select,
html body textarea,
html body .btn,
html body .form-control {
	font-family: var(--lf-font);
}
html body #wrapper { color: var(--lf-ink); }
html body ::selection { background: var(--lf-wine); color: #fff; }

html body #wrapper .container {
	max-width: var(--lf-max);
	width: 100%;
	padding-inline: 16px;
}
html body #wrapper .container .container { padding-inline: 0; }
@media (min-width: 680px) {
	html body #wrapper .container { padding-inline: 24px; }
}
@media (min-width: 1000px) {
	html body #wrapper .container { padding-inline: 40px; }
}

/* breadcrumb (every inner page) */
html body ul.breadcrumb {
	margin: 16px 0;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	display: flex;
}
html body ul.breadcrumb li {
	vertical-align: top;
	/* theme: 8px before + 17px after (flipped in RTL); drop the "before" so
	   the first crumb sits on the content edge, chevron stays in the "after" */
	padding-block: 0;
	padding-inline: 0 18px;
	margin-inline: 0 8px;
}
html body ul.breadcrumb li:not(:last-child):after{
	top: 2px;
}
html body ul.breadcrumb li:not(:last-child)::after { line-height: 1.4; font-size: 12px; color: var(--lf-muted); }
/* long last crumb (product name) shrinks with an ellipsis */
html body ul.breadcrumb li:last-child {
	max-width: calc(100% - 90px);
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
html body ul.breadcrumb li a { display: inline; font-size: 14px; color: var(--lf-muted); }
html body ul.breadcrumb li:last-child a { color: var(--lf-ink); }
html body ul.breadcrumb li a:hover { color: var(--lf-wine); }
@media (min-width: 1000px) { html body ul.breadcrumb { margin: 24px 0 22px; } }

/* buttons: So theme's yellow pill -> .lf-btn--primary / --ghost */
html body .btn.btn-primary {
	background: var(--lf-wine);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--lf-radius-pill);
	box-shadow: none;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: var(--lf-font-weight-medium);
	line-height: 1.2;
	text-transform: none;
	transition: background-color .15s ease, transform .15s ease;
}
html body .btn.btn-primary:hover,
html body .btn.btn-primary:focus-visible {
	background: var(--lf-wine-600);
	color: #fff;
}
html body .btn.btn-primary:active { transform: scale(.98); }
html body .btn.btn-default,
html body .btn.btn-secondary,
html body .btn.btn-light {
	background: #fff;
	color: var(--lf-ink);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	box-shadow: none;
	text-transform: none;
}
html body .btn.btn-default:hover,
html body .btn.btn-secondary:hover,
html body .btn.btn-light:hover {
	background: #fff;
	color: var(--lf-wine);
	border-color: var(--lf-wine);
}

/* form fields -- fields glued to an addon (input-group, the ₪ price boxes
   in the category filter) keep the theme's size and square joins */
html body #wrapper .form-control:not(.put-min_max *, .quantity-control *),
html body #wrapper .form-select {
	background-color: #fff;
	border: 1px solid var(--lf-line);
	box-shadow: none;
	color: var(--lf-ink);
}
html body #wrapper .form-control:not(.input-group *, .put-min_max *, .quantity-control *),
html body #wrapper .form-select:not(.input-group *) {
	border-radius: var(--lf-radius-sm);
	min-height: 44px;
}
html body #wrapper textarea.form-control { min-height: 110px; }
html body #wrapper .form-control:focus,
html body #wrapper .form-select:focus {
	background-color: #fff;
	border-color: var(--lf-wine);
	box-shadow: 0 0 0 3px var(--lf-wine-50);
}
html body #wrapper .form-control::placeholder { color: var(--lf-muted); }

/* listing toolbar (soconfig/listing.twig): sort / limit selects and the
   compare button share one 44px row -- the theme sizes the button at 33px */
html body #wrapper .filters-panel .short-by-show {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px 20px;
}
html body #wrapper .filters-panel .short-by-show .form-group {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
html body #wrapper .filters-panel .short-by-show .control-label {
	margin: 0;
	font-size: 14px;
	color: var(--lf-ink);
	white-space: nowrap;
}
html body #wrapper .filters-panel .short-by-show select.form-control,
html body #wrapper .filters-panel .short-by-show .btn {
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	line-height: 42px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	font-size: 14px;
}
html body #wrapper .filters-panel .short-by-show select.form-control {
	padding-block: 0;
	padding-inline: 14px 36px;
	background-color: #fff;
	background-position: calc(100% - 12px) center;
}
html[dir="rtl"] body #wrapper .filters-panel .short-by-show select.form-control {
	background-position: 12px center;
}
html body #wrapper .filters-panel .short-by-show .btn {
	display: inline-flex;
	align-items: center;
	padding: 0 18px;
	background: #fff;
	color: var(--lf-ink);
}
html body #wrapper .filters-panel .short-by-show .btn:hover {
	background: #fff;
	color: var(--lf-wine);
	border-color: var(--lf-wine);
}

/* discount badge: same hot-pink pill as the homepage deal cards */
html body #content .label-product.label-sale,
html body #content .label-sale {
	background: var(--lf-hot);
	color: #fff;
	border-radius: var(--lf-radius-pill);
	height: auto;
	line-height: 1;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 800;
	direction: ltr;
}

/* product cards in listings (category, search, specials, related) --
   look of .lf-deal on the homepage */
html body .products-list .product-grid .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;
}
html body .products-list .product-grid .product-item-container:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px -5px rgba(43, 35, 26, .14);
}
html body .products-list .product-grid .product-item-container .left-block,
html body .products-list .product-grid .product-item-container .product-image-container {
	border: 0;
	border-radius: 15px;
	overflow: hidden;
	background: var(--lf-cream);
}
html body .products-list .product-item-container .right-block h4 a { color: var(--lf-ink); }
html body .products-list .product-item-container .right-block h4 a:hover { color: var(--lf-wine); }
html body .products-list .product-grid .product-item-container .right-block .button-group .addToCart {
	height: 42px;
	line-height: 42px;
	border-radius: 14px;
	background: var(--lf-wine);
	color: #fff;
}
html body .products-list .product-grid .product-item-container .right-block .button-group .addToCart:hover { background: var(--lf-wine-600); }
html body .products-list .product-grid .product-item-container .right-block .button-group .btn-button:not(.addToCart) {
	border-radius: 14px;
	background: var(--lf-wine-50);
	color: var(--lf-wine);
}
html body .products-list .product-grid .product-item-container .right-block .button-group .btn-button:not(.addToCart):hover {
	background: var(--lf-wine);
	color: #fff;
}

/* alerts -- replaces So theme's full-width Material bars (white text on
   green/red/blue, icon in a dark block) with the homepage card look.
   Three places use .alert:
     1. toasts the theme's JS drops before #wrapper (wishlist, compare,
        cart): body > .alert -- float top corner, slide in, .fadeOut out
     2. OpenCart 4's #alert container (fixed, inline style right/top)
     3. inline alerts inside pages (cart attention, account forms...)
   Text nodes and links sit loose inside the alert, so it stays a block box:
   the icon and close button are absolutely placed in its padding. */
html body {
	--lf-alert-fg: var(--lf-wine);
	--lf-alert-bg: var(--lf-wine-50);
}
html body .alert-success { --lf-alert-fg: var(--lf-success); --lf-alert-bg: #e8f3ec; }
html body .alert-danger { --lf-alert-fg: var(--lf-danger); --lf-alert-bg: #fbeceb; }
html body .alert-warning { --lf-alert-fg: #a16a12; --lf-alert-bg: #fbf2e1; }
html body .alert-info { --lf-alert-fg: var(--lf-wine); --lf-alert-bg: var(--lf-wine-50); }

html body .alert {
	position: relative;
	min-height: 0;
	margin-block-end: 16px;
	padding-block: 14px;
	padding-inline: 58px 44px;
	background: var(--lf-alert-bg);
	border: 1px solid color-mix(in srgb, var(--lf-alert-fg) 18%, transparent);
	border-radius: var(--lf-radius-sm);
	box-shadow: none;
	color: var(--lf-ink);
	font-family: var(--lf-font);
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
	line-height: 1.5;
	text-align: start;
}
html body .alert:not(.alert-dismissible):not(:has(> .close, > .btn-close)) { padding-inline-end: 16px; }
html body .alert a,
html body .alert a:visited,
html body .alert a:focus {
	color: var(--lf-alert-fg);
	font-weight: var(--lf-font-weight-heading);
	text-decoration: underline;
	text-underline-offset: 2px;
}
html body .alert a:hover { color: var(--lf-ink); }

/* leading icon: tinted disc, vertically centred */
html body .alert > i:first-child {
	position: absolute;
	inset-block: auto;
	inset-inline: 14px auto;
	top: 50%;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: var(--lf-alert-fg);
	font-size: 16px;
	text-shadow: none;
	animation: none;
}
html body .alert > i:first-child::before { position: static; line-height: 1; }

/* close: theme's .close (FontAwesome glyph) and Bootstrap's .btn-close */
html body .alert > .close,
html body .alert > .btn-close {
	position: absolute;
	top: 50%;
	inset-inline: auto 10px;
	width: 28px;
	height: 28px;
	margin: -14px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--lf-muted);
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	opacity: 1;
	box-shadow: none;
	transform: none;
	transition: background-color .15s ease, color .15s ease;
}
html body .alert > .btn-close { background-size: 10px; opacity: .6; }
html body .alert > .close:hover,
html body .alert > .close:focus-visible,
html body .alert > .btn-close:hover {
	background-color: rgba(32, 33, 31, .06);
	color: var(--lf-ink);
	opacity: 1;
}

/* 1 + 2: floating toasts -- white card, coloured accent, top corner */
html body > .alert,
html body #alert > .alert {
	background: #fff;
	border: 1px solid var(--lf-line);
	border-inline-start: 4px solid var(--lf-alert-fg);
	box-shadow: var(--lf-shadow);
}
html body > .alert > i:first-child,
html body #alert > .alert > i:first-child { background: var(--lf-alert-bg); }

/* above every theme overlay/sticky bar (pre-loader 99999, sticky strip,
   headers); just under Wonderchat (2147483647) so the chat stays on top */
html body > .alert {
	position: fixed;
	z-index: 2147483000;
	top: 16px;
	inset-inline: auto 16px;
	left: auto;
	width: min(420px, calc(100% - 32px));
	margin: 0;
	/* fill-mode backwards, not both: a held end frame (opacity 1) would
	   override .fadeOut and leave an invisible-to-clicks but visible toast */
	animation: lf-toast-in .35s cubic-bezier(.2, .8, .2, 1) backwards;
	transition: opacity .3s ease, transform .3s ease;
}
html[dir="rtl"] body > .alert { right: auto; left: 16px; }
html body > .alert.fadeOut,
html body #alert > .alert.fadeOut {
	animation: none;
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
}
/* compare can append a second (warning) alert inside the first */
html body > .alert .alert {
	position: static;
	margin: 10px 0 0;
	box-shadow: none;
	border: 0;
}

html body #alert {
	z-index: 2147483000 !important; /* theme: 9999 !important */
	top: 16px !important;
	right: 16px !important;
	width: min(420px, calc(100% - 32px));
}
html[dir="rtl"] body #alert { right: auto !important; left: 16px; }
html body #alert > .alert { margin: 0 0 10px; animation: lf-toast-in .35s cubic-bezier(.2, .8, .2, 1) backwards; }

@keyframes lf-toast-in {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	html body > .alert,
	html body #alert > .alert { animation: none; transition: none; }
}

/* "Added to cart" modal (#previewModal in common/footer.twig; body loaded
   from soconfig/quickcart.twig). CSS only -- markup and JS stay the theme's.
   The success toast says the same thing, so it is hidden while the modal
   is open (Bootstrap puts .modal-open on <body>). */
html body.modal-open > .alert-success { display: none; }
html body .modal-backdrop.show { background: var(--lf-ink); opacity: .45; }

html body #previewModal .modal-dialog { max-width: 760px; margin-inline: auto; padding-inline: 12px; }
html body #previewModal .modal-content {
	border: 0;
	border-radius: var(--lf-radius);
	overflow: hidden;
	background: var(--lf-paper);
	box-shadow: 0 30px 80px rgba(20, 15, 12, .25);
	font-family: var(--lf-font);
}
html body #previewModal .modal-header {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lf-line);
}
html body #previewModal .modal-title {
	order: 0;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 17px;
	font-weight: var(--lf-font-weight-heading);
	color: var(--lf-ink);
	line-height: 1.3;
}
html body #previewModal .modal-title::before {
	content: "";
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	/* check mark, drawn so it does not depend on the icon font */
	background: #e8f3ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
html body #previewModal .modal-header .close {
	order: 1;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: var(--lf-muted);
	opacity: 1;
	text-shadow: none;
	transition: background-color .15s ease, color .15s ease;
}
html body #previewModal .modal-header .close:hover { background: rgba(32, 33, 31, .06); color: var(--lf-ink); }

html body #previewModal .modal-body { padding: 20px; }
/* empty until the $.load() lands -- show a spinner instead of a blank box */
html body #previewModal .modal-body:empty { min-height: 200px; position: relative; }
html body #previewModal .modal-body:empty::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid var(--lf-wine-50);
	border-top-color: var(--lf-wine);
	animation: lf-spin .8s linear infinite;
}
@keyframes lf-spin { to { transform: rotate(360deg); } }

/* product on the left, action panel on the right (stacked on phones) */
html body #previewModal .modal-body > .row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
}
@media (min-width: 680px) {
	html body #previewModal .modal-body > .row { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
}
html body #previewModal .modal-body > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; flex: none; }

html body #previewModal .cart-popup-left { display: flex; align-items: center; gap: 16px; }
html body #previewModal .cart-popup-left .product-image {
	flex: 0 0 96px;
	width: 96px;
	max-width: none;
	margin: 0;
	padding: 0;
	aspect-ratio: 1;
	border-radius: 15px;
	overflow: hidden;
	background: var(--lf-cream);
}
@media (min-width: 680px) {
	html body #previewModal .cart-popup-left .product-image { flex-basis: 150px; width: 150px; }
}
html body #previewModal .cart-popup-left .product-image a,
html body #previewModal .cart-popup-left .product-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body #previewModal .cart-popup-info { flex: 1; min-width: 0; width: auto; max-width: none; padding: 0; }
html body #previewModal .cart-popup-info .product-name {
	margin: 0 0 8px;
	font-family: var(--lf-font);
	font-size: 16px;
	font-weight: var(--lf-font-weight-heading);
	line-height: 1.35;
	color: var(--lf-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 680px) { html body #previewModal .cart-popup-info .product-name { font-size: 18px; } }
html body #previewModal .cart-popup-info small { color: var(--lf-muted); }
html body #previewModal .cart-popup-info .price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
html body #previewModal .cart-popup-info .price-quantity { font-size: 15px; color: var(--lf-muted); }
html body #previewModal .cart-popup-info .price-new { font-size: 22px; font-weight: 900; color: var(--lf-wine); }

/* action panel: subtotal first, then Checkout / View cart / Continue */
html body #previewModal .cart-popup-action {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border-radius: 16px;
	background: var(--lf-cream);
	text-align: center;
}
html body #previewModal .cart-popup-action .cart-popup-imgbottom {
	order: 0;
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--lf-muted);
	line-height: 1.4;
}
html body #previewModal .cart-popup-action .cart-popup-imgbottom .previewCartCheckout-price {
	display: block;
	padding: 2px 0 4px;
	font-size: 26px;
	font-weight: 900;
	color: var(--lf-ink);
}
html body #previewModal .cart-popup-action .cart-popup-imgbottom .cart-popup-total { display: block; }
html body #previewModal .cart-popup-action .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--lf-radius-pill);
	box-shadow: none;
	font-family: var(--lf-font);
	font-size: 15px;
	font-weight: var(--lf-font-weight-heading);
	text-transform: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
html body #previewModal .cart-popup-action .btn-checkout { order: 1; background: var(--lf-wine); color: #fff; }
html body #previewModal .cart-popup-action .btn-checkout:hover { background: var(--lf-wine-600); color: #fff; }
/* theme hides the "View cart" link; show it as the secondary button */
html body #previewModal .cart-popup-action .btn-view-cart:last-child {
	display: flex;
	order: 2;
	background: #fff;
	color: var(--lf-ink);
	border-color: var(--lf-line);
}
html body #previewModal .cart-popup-action .btn-view-cart:last-child:hover { border-color: var(--lf-wine); color: var(--lf-wine); }
/* "Continue shopping" -- quiet text link at the bottom */
html body #previewModal .cart-popup-action .btn-view-cart:not(:last-child) {
	order: 3;
	height: auto;
	padding: 4px 0 0;
	background: transparent;
	color: var(--lf-muted);
	font-weight: var(--lf-font-weight-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
}
html body #previewModal .cart-popup-action .btn-view-cart:not(:last-child):hover { color: var(--lf-wine); }

.common-home #content{
	margin: 0;
}
/* ---------------------------------------------------------------------
   Base / scope
   ------------------------------------------------------------------- */

.lf-scope {
	font-family: var(--lf-font);
	font-size: 14px; 
	color: var(--lf-ink);
	/* background: var(--lf-paper); */
}

.lf-scope * {
	box-sizing: border-box;
}

.lf-scope h1, .lf-scope h2, .lf-scope h3, .lf-scope h4 {
	font-weight: var(--lf-font-weight-heading);
	line-height: 1.1;
	margin: 0 0 .25em;
}

.lf-scope p {
	margin: 0 0 5px 0;
	color: var(--lf-muted);
	line-height: 1.6;
}

.lf-price {
	font-variant-numeric: tabular-nums;
	font-weight: var(--lf-font-weight-heading);
}

.lf-price--old {
	font-weight: var(--lf-font-weight-body);
	color: var(--lf-muted);
	text-decoration: line-through;
	font-size: .85em;
	margin-inline-start: .5em;
}

.lf-container {
	max-width: var(--lf-max);
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 680px) {
	.lf-container { padding-inline: 24px; }
}

@media (min-width: 1000px) {
	.lf-container { padding-inline: 40px; }
}

/* ---------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */

.lf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--lf-font);
	font-weight: var(--lf-font-weight-medium);
	font-size: 16px;
	line-height: 1;
	padding: 14px 24px;
	border-radius: var(--lf-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.lf-btn:active {
	transform: scale(.98);
}

.lf-btn--primary {
	background: var(--lf-wine);
	color: #fff;
}
.lf-btn--primary:hover { background: var(--lf-wine-600); color: #fff; }

.lf-btn--light {
	background: var(--lf-wine-50);
	color: var(--lf-wine);
}
.lf-btn--light:hover { background: var(--lf-sand); }

.lf-btn--ghost {
	background: transparent;
	color: var(--lf-ink);
	border-color: var(--lf-line);
}
.lf-btn--ghost:hover { border-color: var(--lf-wine); color: var(--lf-wine); }

/* ---------------------------------------------------------------------
   Search pill
   ------------------------------------------------------------------- */

.lf-search-pill {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--lf-paper);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-pill);
	padding: 6px 6px 6px 6px;
	box-shadow: var(--lf-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lf-search-pill:focus-within {
	border-color: var(--lf-wine);
	box-shadow: 0 0 0 3px var(--lf-wine-50);
}

/* One flat surface for icon + text -- no inner seam. Beats layout25/blue.css's
   `input[type="text"]{background:#eee}` by matching its specificity with the
   [type] attribute selector, then winning on cascade order (this file loads last). */
.lf-search-pill input[type="text"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--lf-font);
	font-size: 14px;
	color: var(--lf-ink);
	outline: none;
	padding: 8px 6px;
}
.lf-search-pill input[type="text"]:hover,
.lf-search-pill input[type="text"]:focus{
	background: transparent;
}
.lf-search-pill input[type="text"]::placeholder { color: var(--lf-muted); }

.lf-search-pill__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--lf-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color .15s ease, color .15s ease;
}
.lf-search-pill__icon-btn:hover { background: var(--lf-wine-50); color: var(--lf-wine); }
.lf-search-pill__icon-btn--primary,
.lf-search-pill__icon-btn--primary:hover {
	background: var(--lf-wine);
	color: #fff;
}

/* ---------------------------------------------------------------------
   Category chip
   ------------------------------------------------------------------- */

.lf-chips {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block: 4px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.lf-chips::-webkit-scrollbar { display: none; }

.lf-chip {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	width: 84px;
	text-decoration: none;
	color: var(--lf-ink);
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
	text-align: center;
}

.lf-chip__circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--lf-wine-50) center/cover no-repeat;
	color: var(--lf-wine);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 23px;
	border: 1px solid transparent;
	transition: box-shadow .15s ease;
}

/* selected/current chip gets a gold-yellow ring, per docs/new_idea.png */
.lf-chip.is-active .lf-chip__circle {
	box-shadow: 0 0 0 3px var(--lf-yellow);
}

.lf-chip--sale .lf-chip__circle { background-color: var(--lf-wine); color: #fff; }

/* ---------------------------------------------------------------------
   Product card
   ------------------------------------------------------------------- */

.lf-product-card {
	display: flex;
	flex-direction: column;
	background: var(--lf-paper);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	overflow: hidden;
	text-decoration: none;
	color: var(--lf-ink);
	transition: box-shadow .15s ease, transform .15s ease;
}
.lf-product-card:hover { box-shadow: var(--lf-shadow-sm); transform: translateY(-2px); }

.lf-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--lf-cream);
	overflow: hidden;
}
.lf-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.lf-product-card:hover .lf-product-card__media img { transform: scale(1.04); }

.lf-badge-discount {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	background: var(--lf-wine);
	color: #fff;
	font-size: 13px;
	font-weight: var(--lf-font-weight-heading);
	padding: 4px 10px;
	border-radius: var(--lf-radius-pill);
}

.lf-product-card__wishlist {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.lf-product-card__body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.lf-product-card__brand {
	font-size: 13px;
	color: var(--lf-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.lf-product-card__name {
	font-size: 15px;
	font-weight: var(--lf-font-weight-medium);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

.lf-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--lf-muted);
}
.lf-rating__stars {
	color: var(--lf-yellow);
	letter-spacing: 1px;
}

.lf-product-card__price-row {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 17px;
}

.lf-product-card__save {
	font-size: 13px;
	color: var(--lf-success);
	font-weight: var(--lf-font-weight-medium);
}

.lf-product-card__cart {
	margin-top: 8px;
	width: 100%;
	padding: 10px;
	border-radius: var(--lf-radius-pill);
	border: 0;
	background: var(--lf-wine);
	color: #fff;
	font-weight: var(--lf-font-weight-medium);
	cursor: pointer;
}
.lf-product-card__cart:hover { background: var(--lf-wine-600); }

.lf-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (min-width: 680px) { .lf-product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .lf-product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .lf-product-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------------------------------------------------------------------
   Story card / collection card
   ------------------------------------------------------------------- */

.lf-story-card {
	position: relative;
	border-radius: var(--lf-radius);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: flex-end;
	box-shadow: var(--lf-shadow-sm);
}
.lf-story-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.lf-story-card:hover img { transform: scale(1.05); }
.lf-story-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(32, 33, 31, .75), rgba(32, 33, 31, 0) 55%);
}
.lf-story-card__body {
	position: relative;
	padding: 20px;
}
.lf-story-card__title {
	font-size: 21px;
	font-weight: var(--lf-font-weight-heading);
	margin: 0 0 4px;
}
.lf-story-card__cta {
	font-size: 14px;
	opacity: .9;
}

/* "Shop the outcome, not the category" card -- image + pill badge on top,
   white body with title/subtitle/Explore button below. Per docs/new_idea.png,
   used instead of .lf-story-card's full-bleed overlay text. */

.lf-outcome-card {
	display: flex;
	flex-direction: column;
	background: var(--lf-paper);
	border-radius: var(--lf-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--lf-ink);
	box-shadow: var(--lf-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.lf-outcome-card:hover { transform: translateY(-2px); box-shadow: var(--lf-shadow); }

.lf-outcome-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.lf-outcome-card--lg .lf-outcome-card__media { aspect-ratio: 16 / 10; }
.lf-outcome-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.lf-outcome-card:hover .lf-outcome-card__media img { transform: scale(1.05); }

.lf-outcome-card__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--lf-paper);
	color: var(--lf-wine);
	font-size: 13px;
	font-weight: var(--lf-font-weight-medium);
	padding: 6px 12px;
	border-radius: var(--lf-radius-pill);
	box-shadow: var(--lf-shadow-sm);
}

.lf-outcome-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lf-outcome-card__title {
	font-size: 18px;
	font-weight: var(--lf-font-weight-heading);
	margin: 0;
}
.lf-outcome-card__desc {
	font-size: 14px;
	color: var(--lf-muted);
	margin: 0 0 8px;
}

.lf-outcome-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 680px) { .lf-outcome-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .lf-outcome-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.lf-collection-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--lf-cream);
	border-radius: var(--lf-radius-sm);
	padding: 12px;
	text-decoration: none;
	color: var(--lf-ink);
}
.lf-collection-card__thumb {
	width: 72px;
	height: 72px;
	border-radius: var(--lf-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
}
.lf-collection-card__title {
	font-weight: var(--lf-font-weight-medium);
	margin-bottom: 2px;
}
.lf-collection-card__price {
	color: var(--lf-wine);
	font-weight: var(--lf-font-weight-heading);
}
.lf-collection-card__arrow {
	margin-inline-start: auto;
	color: var(--lf-muted);
}
html[dir="rtl"] .lf-collection-card__arrow { transform: scaleX(-1); }

/* ---------------------------------------------------------------------
   Trust bar
   ------------------------------------------------------------------- */

.lf-trust-bar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 680px) { .lf-trust-bar { grid-template-columns: repeat(4, 1fr); } }

.lf-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 16px 8px;
}
.lf-trust-item__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lf-wine-50);
	color: var(--lf-wine);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lf-trust-item__label {
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
}

/* ---------------------------------------------------------------------
   Bottom nav (mobile)
   ------------------------------------------------------------------- */

.lf-bottom-nav {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	background: rgba(255, 253, 250, .94);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-top: 1px solid var(--lf-line);
	box-shadow: 0 -6px 20px rgba(43, 35, 26, .06);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media (min-width: 1000px) { .lf-bottom-nav { display: none; } }

.lf-bottom-nav__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 4px 2px;
	font-size: 11px;
	font-weight: var(--lf-font-weight-medium);
	line-height: 1.2;
	color: var(--lf-muted);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: color .15s ease;
}
.lf-bottom-nav__item span {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* icon sits in a pill that fills with the wine tint when active */
.lf-bottom-nav__icon {
	box-sizing: content-box;
	padding: 4px 14px;
	border-radius: var(--lf-radius-pill);
	transition: background-color .2s ease, transform .2s ease;
}
.lf-bottom-nav__item:hover,
.lf-bottom-nav__item:focus-visible { color: var(--lf-wine); }
.lf-bottom-nav__item:active .lf-bottom-nav__icon { transform: scale(.92); }
.lf-bottom-nav__item.is-active { color: var(--lf-wine); }
.lf-bottom-nav__item.is-active .lf-bottom-nav__icon { background: var(--lf-wine-50); }
.lf-bottom-nav__item.is-active span { font-weight: 600; }
.lf-bottom-nav__badge {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-end: 2px;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--lf-wine);
	color: #fff;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 3px;
}

/* ---------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------- */

.lf-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(32, 33, 31, .5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 100;
}
@media (min-width: 680px) { .lf-modal-backdrop { align-items: center; } }

.lf-modal {
	background: var(--lf-paper);
	border-radius: var(--lf-radius) var(--lf-radius) 0 0;
	max-width: 560px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px;
	box-shadow: var(--lf-shadow);
}
@media (min-width: 680px) { .lf-modal { border-radius: var(--lf-radius); } }

/* ---------------------------------------------------------------------
   Fade-up on scroll (opt-in via JS adding .is-visible)
   ------------------------------------------------------------------- */

.lf-fade-up {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
}
.lf-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =======================================================================
   Header26 / Footer26
   Real OpenCart widgets ({{ cart }}, {{ language }}, {{ menu }}, {{ currency }})
   are reused as-is for correct live data/behaviour, then reskinned here by
   targeting their existing markup -- see header26.twig / footer26.twig for
   the exact classes each one renders.
   ======================================================================= */

.lf-header {
	position: relative;
	z-index: 50;
	background: var(--lf-paper);
}

/* Compact (scrolled) header: So theme's toppanel.js adds .navbar-compact and
   fixes the header on desktop (>1200px). Keep only the nav row pinned --
   toppanel.js measures the header height *with* this class on, so the slide-in
   offset follows automatically. */
.lf-header.navbar-compact {
	inset-inline: 0;
	box-shadow: var(--lf-shadow-sm);
}
.lf-header.navbar-compact .lf-topbar,
.lf-header.navbar-compact .lf-header__row { display: none; }
.lf-header.navbar-compact .lf-header__main { border-bottom: 0; }

.lf-topbar {
	background: var(--lf-wine-600);
	color: rgba(255, 255, 255, .92);
	font-size: 14px;
}
.lf-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 4px;
}
.lf-topbar__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lf-topbar__lang { flex-shrink: 0; }

.lf-header__main {
	border-bottom: 1px solid var(--lf-line);
}
.lf-header__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 12px;
}

.lf-logo img { height: 48px; width: auto; }
.lf-logo--footer img { height: 38px; width: auto; }

.lf-header__search { flex: 1; max-width: 560px; margin-inline: auto; }

.lf-header__icons {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.lf-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--lf-ink);
	text-decoration: none;
	transition: background-color .15s ease;
}
.lf-icon-btn:hover { background: var(--lf-wine-50); color: var(--lf-wine); }

/* --- reskin the reused language dropdown (common/language.twig) ---
   Used in .lf-topbar (always on wine bg -> white) and .lf-footer__lang (also wine bg). */
.lf-topbar__lang .btn-group,
.lf-footer__lang .btn-group { position: relative; }
.lf-topbar__lang .dropdown-toggle,
.lf-footer__lang .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 4px;
	border: 0;
	background: transparent;
	font-family: var(--lf-font);
	font-size: 14px;
}
/* higher specificity + !important: Bootstrap's .btn-link sets its own link
   color and otherwise wins the cascade tie against our two-class selector */
#lf-header .lf-topbar__lang .dropdown-toggle,
.lf-footer__lang .dropdown-toggle {
	color: #fff !important;
}
.lf-topbar__lang .dropdown-toggle:hover,
.lf-topbar__lang .dropdown-toggle:focus,
.lf-footer__lang .dropdown-toggle:hover,
.lf-footer__lang .dropdown-toggle:focus {
	color: #fff !important;
	text-decoration: none;
}
.lf-topbar__lang .dropdown-toggle img,
.lf-footer__lang .dropdown-toggle img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.lf-topbar__lang .dropdown-menu,
.lf-footer__lang .dropdown-menu {
	min-width: 160px;
	border-radius: var(--lf-radius-sm);
	border: 1px solid var(--lf-line);
	box-shadow: var(--lf-shadow);
	padding: 6px;
}
.lf-topbar__lang .dropdown-item,
.lf-footer__lang .dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--lf-radius-sm);
	padding: 8px 10px;
	font-size: 14px;
	color: var(--lf-ink);
}
.lf-topbar__lang .dropdown-item img,
.lf-footer__lang .dropdown-item img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lf-topbar__lang .dropdown-item:hover,
.lf-footer__lang .dropdown-item:hover { background: var(--lf-wine-50); color: var(--lf-wine); }

/* --- reskin the reused cart widget (common/cart.twig) into a plain icon + badge ---
   Scoped under .lf-header so header25 (if reverted to) keeps its own cart look. */
.lf-header #cart.btn-shopping-cart { position: relative; }
.lf-header #cart .top_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
}
.lf-header #cart .top_cart:hover { background: var(--lf-wine-50); }
.lf-header #cart .shopcart { display: flex; align-items: center; justify-content: center; position: relative; }
.lf-header #cart .icon-c { font-size: 19px; color: var(--lf-ink); }
.lf-header #cart .shopcart-inner { display: contents; }
.lf-header #cart .text-shopping-cart { display: none; }
.lf-header #cart .total-shopping-cart {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-end: -11px;
	min-width: 18px;
	height: 18px;
	padding-inline: 3px;
	border-radius: 999px;
	background: var(--lf-yellow);
	color: var(--lf-ink);
	font-size: 11px;
	font-weight: var(--lf-font-weight-heading);
	line-height: 18px;
	text-align: center;
}
/* dropdown: the theme's striped table, laid out as product cards with CSS
   grid (markup stays common/cart.twig -- it is also re-.load()ed by
   common.js / so.custom.js after add-to-cart) */
.lf-header #cart .dropdown-menu.shoppingcart-box {
	width: min(360px, calc(100vw - 24px));
	min-width: 0;
	margin: 10px 0 0 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--lf-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--lf-shadow);
	font-family: var(--lf-font);
	font-size: 13px;
}
/* phones: Popper would anchor a 360px panel to the icon and run it off the
   right edge -- pin it under the header with a 12px gutter instead */
@media (max-width: 679px) {
	.lf-header #cart .dropdown-menu.shoppingcart-box.show {
		position: fixed !important;
		inset: 90px 12px auto 12px !important;
		transform: none !important;
		width: auto;
		margin: 0;
	}
}
.lf-header #cart .shoppingcart-box > li { list-style: none; }
.lf-header #cart .shoppingcart-box .content-item {
	max-height: min(360px, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.lf-header #cart .shoppingcart-box .table { margin: 0 !important; width: 100%; }
.lf-header #cart .shoppingcart-box .table > tbody { display: block; }
.lf-header #cart .shoppingcart-box .table > tbody > tr {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"img name remove"
		"img qty  total";
	align-items: center;
	gap: 2px 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--lf-line);
}
.lf-header #cart .shoppingcart-box .table > tbody > tr > td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none; /* Bootstrap 5 stripes are an inset box-shadow */
	text-align: start;
}
.lf-header #cart .shoppingcart-box .table > tbody > tr > td:nth-child(1) { grid-area: img; }
.lf-header #cart .shoppingcart-box .table > tbody > tr > td:nth-child(2) { grid-area: name; }
.lf-header #cart .shoppingcart-box .table > tbody > tr > td:nth-child(3) { grid-area: qty; color: var(--lf-muted); font-size: 12px; }
.lf-header #cart .shoppingcart-box .table > tbody > tr > td:nth-child(4) {
	grid-area: total;
	color: var(--lf-wine);
	font-size: 15px;
	font-weight: 900;
	text-align: end;
	white-space: nowrap;
}
.lf-header #cart .shoppingcart-box .table > tbody > tr > td:nth-child(5) { grid-area: remove; justify-self: end; align-self: start; }

.lf-header #cart .shoppingcart-box .size-img-cart a,
.lf-header #cart .shoppingcart-box .size-img-cart img {
	display: block;
	width: 64px;
	height: 64px;
}
.lf-header #cart .shoppingcart-box .size-img-cart img {
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--lf-cream);
	object-fit: cover;
}
.lf-header #cart .shoppingcart-box td:nth-child(2) a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--lf-ink);
	font-weight: var(--lf-font-weight-medium);
	line-height: 1.35;
	text-decoration: none;
}
.lf-header #cart .shoppingcart-box td:nth-child(2) a:hover { color: var(--lf-wine); }
.lf-header #cart .shoppingcart-box td:nth-child(2) small { color: var(--lf-muted); }

/* remove: the template's icon (fa-trash-o) is FontAwesome 4 and does not
   exist in the FA6 build loaded here, so draw a trash can instead */
.lf-header #cart .shoppingcart-box .btn-danger {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f706b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E") center / 15px no-repeat;
	box-shadow: none;
	transition: background-color .15s ease;
}
.lf-header #cart .shoppingcart-box .btn-danger i { display: none; }
.lf-header #cart .shoppingcart-box .btn-danger:hover {
	background-color: var(--lf-wine-50);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f1238' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
}

/* footer: View cart (outline) + Checkout (wine), equal width */
.lf-header #cart .shoppingcart-box .checkout {
	display: flex;
	gap: 8px;
	padding: 14px 16px 16px;
	background: var(--lf-paper);
}
.lf-header #cart .shoppingcart-box .checkout::before,
.lf-header #cart .shoppingcart-box .checkout::after { display: none; } /* .clearfix */
.lf-header #cart .shoppingcart-box .checkout .btn {
	flex: 1 1 0;
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: var(--lf-radius-pill);
	box-shadow: none;
	font-family: var(--lf-font);
	font-size: 14px;
	font-weight: var(--lf-font-weight-heading);
	text-transform: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lf-header #cart .shoppingcart-box .checkout .btn-view-cart { background: #fff; color: var(--lf-ink); border-color: var(--lf-sand); }
.lf-header #cart .shoppingcart-box .checkout .btn-view-cart:hover { color: var(--lf-wine); border-color: var(--lf-wine); }
.lf-header #cart .shoppingcart-box .checkout .btn-checkout { background: var(--lf-wine); color: #fff; }
.lf-header #cart .shoppingcart-box .checkout .btn-checkout:hover { background: var(--lf-wine-600); color: #fff; }

.lf-header #cart .shoppingcart-box .empty {
	margin: 0;
	padding: 28px 16px;
	color: var(--lf-muted);
	font-size: 14px;
}

/* --- reskin the reused category menu (common/menu.twig) into a plain nav row --- */
.lf-nav {
	background: var(--lf-cream);
}
.navbar-compact .lf-nav {
	border-bottom: 1px solid var(--lf-line);
}
.lf-nav__row {
	display: flex;
	align-items: center;
	gap: 4px;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.lf-nav__row::-webkit-scrollbar { display: none; }

/* the visible category list is a bare <ul class="nav navbar-nav"> sitting
   right next to our "Deals" link in .lf-nav__row -- catalog/view/template/
   common/menu.twig also prints a second, CSS-hidden <nav id="menu"> copy
   (legacy/mobile hook); we leave that one alone since .hidden already hides it. */
.lf-nav__link,
.lf-nav__row > ul.navbar-nav > li > a {
	display: inline-block;
	white-space: nowrap;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: var(--lf-font-weight-medium);
	color: var(--lf-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.lf-nav__link:hover,
.lf-nav__row > ul.navbar-nav > li > a:hover {
	color: var(--lf-wine);
	border-block-end-color: var(--lf-yellow);
}
.lf-nav__link.is-active {
	color: var(--lf-wine);
	border-block-end-color: var(--lf-yellow);
}
.lf-nav__row > ul.navbar-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lf-nav__row > ul.navbar-nav > li { list-style: none; width: auto; }

/* --- overlay header on the homepage hero, solid once scrolled or on inner pages ---
   A dark scrim keeps white text legible even before P4a adds a hero image behind it. */
.lf-header--overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.lf-header--overlay:not(.is-scrolled)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(32,33,31,.55), rgba(32,33,31,.05));
	pointer-events: none;
}
.lf-header--overlay .lf-topbar,
.lf-header--overlay .lf-header__main,
.lf-header--overlay .lf-nav { background: transparent; border-color: transparent; }
.lf-header--overlay:not(.is-scrolled) .lf-icon-btn,
.lf-header--overlay:not(.is-scrolled) .lf-header #cart .icon-c,
.lf-header--overlay:not(.is-scrolled) .lf-nav__link,
.lf-header--overlay:not(.is-scrolled) .lf-nav__row > ul.navbar-nav > li > a {
	color: #fff;
}
.lf-header--overlay:not(.is-scrolled) .lf-search-pill { background: rgba(255,255,255,.95); }
.lf-header--overlay.is-scrolled {
	position: fixed;
	background: var(--lf-paper);
	box-shadow: var(--lf-shadow-sm);
}
.lf-header--overlay.is-scrolled .lf-topbar,
.lf-header--overlay.is-scrolled .lf-header__main,
.lf-header--overlay.is-scrolled .lf-nav { background: var(--lf-paper); }
.lf-header--overlay.is-scrolled .lf-nav { background: var(--lf-cream); }

@media (max-width: 999px) {
	.lf-header__search { order: 3; flex-basis: 100%; max-width: none; padding: 3px; }
	.lf-header__row { flex-wrap: wrap; justify-content: space-between; gap: 5px; }
	.lf-topbar__msg { font-size: 11px; }

}
@media (max-width: 390px) {

}
/* ---------------------------------------------------------------------
   Footer26
   ------------------------------------------------------------------- */

.lf-footer {
	background: var(--lf-wine) url('../../../../../../image/catalog/la2ta_home/bg-footer.png') center bottom / cover no-repeat;
	color: rgba(255, 255, 255, .85);
	padding-block-start: 60px;
	padding-block-end: calc(24px + env(safe-area-inset-bottom));
}
/* below 1000px the fixed bottom nav (~67px) and the Wonderchat bubble above
   it (bubble ~90px + its greeting card, bottom-right) sit over the page end: leave room for both so the
   copyright line still clears them when scrolled all the way down */
@media (max-width: 999px) { .lf-footer { padding-block-start: 40px; padding-block-end: calc(100px + env(safe-area-inset-bottom)); } 
	footer .lf-footer__builder {
		padding-block-end: 12px;
	}
}
.rtl .lf-footer {
	background: var(--lf-wine) url('../../../../../../image/catalog/la2ta_home/rtl-bg-footer.png') center bottom / cover no-repeat;
}
.lf-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-block-end: 32px;
}
@media (min-width: 680px) { .lf-footer__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

.lf-footer__brand .lf-logo img { filter: brightness(0) invert(1); }
.lf-footer__tagline { color: rgba(255,255,255,.75); font-size: 14px; margin: 10px 0 14px; }

.lf-footer__heading {
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 14px;
}
.lf-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lf-footer__links a { color: rgba(255,255,255,.8); text-decoration: none; font-size: 14px; }
.lf-footer__links a:hover { color: #fff; text-decoration: underline; }

/* --- page builder content (module "la2ta Footer 26", footer_block26) ---
   Handoff footer: logo on a white tile, intro, language buttons, then three
   short columns. Bootstrap grid comes from the builder; this only styles it. */
.lf-footer__builder { padding-block-end: 32px; }
.lf-footer__builder .so-page-builder .row { row-gap: 28px; }
.lf-footer__builder .lf-footer__heading {
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	margin-block-end: 16px;
}
.lf-footer__logo {
	display: inline-block;
	background: #fff;
	padding: 10px 14px;
	border-radius: var(--lf-radius-sm);
	line-height: 0;
}
.lf-footer__logo img { width: 132px; height: auto; }
.lf-scope .lf-footer__text {
	color: rgba(255,255,255,.78);
	font-size: 14px;
	line-height: 1.8;
	margin: 16px 0 18px;
	max-width: 440px;
}
.lf-footer__col .lf-footer__heading + .lf-footer__text { margin-block-start: 0; }
.lf-footer__builder .lf-footer__links { gap: 6px; }
.lf-footer__links--text li { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.6; }

.lf-lang-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-lang-switch a {
	padding: 8px 14px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.lf-lang-switch a:hover { border-color: #fff; color: #fff; }
.lf-lang-switch a.is-active { background: #fff; border-color: #fff; color: var(--lf-wine); }

.lf-footer__trust {
	border-block: 1px solid rgba(255,255,255,.15);
	padding-block: 24px;
}
.lf-footer .lf-trust-item__icon { background: rgba(255,255,255,.12); color: #fff; }
.lf-footer .lf-trust-item__label { color: rgba(255,255,255,.85); }

.lf-footer__bottom { text-align: center; }
.lf-footer__copy { color: rgba(255,255,255,.6); font-size: 12px; margin: 0; }
.lf-footer__copy a { color: rgba(255,255,255,.8); }

.lf-whatsapp-fab {
	position: fixed;
	inset-inline-end: 20px;
	inset-block-end: 20px;
	z-index: 60;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--lf-shadow);
}
@media (max-width: 999px) { .lf-whatsapp-fab { inset-block-end: calc(72px + env(safe-area-inset-bottom)); } }

/* =======================================================================
   Hero (la2ta_home module, first section)
   ======================================================================= */

.lf-hero {
	position: relative;
	overflow: hidden;
	min-height: 420px;
	display: flex;
	align-items: center;
}
@media (min-width: 680px) { .lf-hero { min-height: 560px; } }

.lf-hero .lf-hero__title{
	margin-bottom: 25px;
}
.lf-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.lf-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255, 253, 250, .7);
}
@media (min-width: 680px) {
	.lf-hero__scrim {
		background: linear-gradient(90deg, rgba(255,253,250,.57) 0%, rgba(255,253,250,.38) 38%, rgba(255,253,250,.05) 60%);
	}
	html[dir="rtl"] .lf-hero__scrim {
		background: linear-gradient(270deg, rgba(255,253,250,.57) 0%, rgba(255,253,250,.38) 38%, rgba(255,253,250,.05) 60%);
	}
}

.lf-hero__row {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: 40px;
}
@media (min-width: 680px) { .lf-hero__row { padding-block: 80px; } }

.lf-hero__copy { max-width: 680px; }

.lf-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--lf-paper);
	color: var(--lf-wine);
	font-size: 13px;
	font-weight: var(--lf-font-weight-medium);
	padding: 6px 14px;
	border-radius: var(--lf-radius-pill);
	box-shadow: var(--lf-shadow-sm);
	margin-bottom: 20px;
}

.lf-hero__title {
	font-size: 32px;
	line-height: 1.15;
	margin: 0 0 16px;
}
@media (min-width: 680px) { .lf-hero__title { font-size: 44px; } }
@media (min-width: 1000px) { .lf-hero__title { font-size: 52px; } }

.lf-scope .lf-hero__desc {
	font-size: 18px;
	max-width: 580px;
	margin-bottom: 28px;
}

.lf-hero__search {
	max-width: 560px;
	padding: 10px 10px 10px 10px;
}
.lf-hero__search input[type="text"] { font-size: 16px; padding-block: 6px; }

.lf-hero__intents {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}
.lf-hero__intent {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--lf-paper);
	color: var(--lf-ink);
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
	padding: 8px 12px;
	border-radius: var(--lf-radius-pill);
	box-shadow: var(--lf-shadow-sm);
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.lf-hero__intent:hover { box-shadow: var(--lf-shadow); transform: translateY(-1px); color: var(--lf-wine); }
.lf-hero__intent-icon { font-size: 16px; }

@media(max-width: 999px){
	.lf-container{
		padding-inline: 12px;
	}
	.lf-hero .lf-hero__title{
		margin-bottom: 12px;
	}
	.lf-scope .lf-hero__desc{ font-size: 15px; margin-bottom: 12px; }
	.lf-nav__link, .lf-nav__row > ul.navbar-nav > li > a{
		padding: 10px 12px;
	}
	.lf-hero__badge{
		margin-bottom: 12px;
	}
	.lf-hero__search{ padding: 5px;}
	.lf-hero__intents{ margin-top: 14px; gap: 5px;}
	.lf-hero__intent{ font-size: 13px; gap: 4px; padding: 4px 8px;}
}
/* =======================================================================
   Categories strip (la2ta_home module, second section)
   9 admin-picked tiles. One row on desktop, horizontal swipe on phones --
   the tiles keep their size instead of shrinking to unreadable discs.
   ======================================================================= */

.lf-cats {
	background: var(--lf-paper);
	padding-top: 40px;
}

.lf-cats__row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* bleed to the screen edge on phones so the last tile peeks in */
	margin-inline: -16px;
	padding-inline: 16px;
}
.lf-cats__row::-webkit-scrollbar { display: none; }

@media (min-width: 1000px) {
	.lf-cats__row {
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
		justify-content: space-between;
		gap: 12px;
	}
}

.lf-cat {
	flex: 0 0 auto;
	width: 92px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-block: 10px 6px;
	text-decoration: none;
	color: var(--lf-ink);
}

@media (min-width: 1000px) {
	.lf-cat { flex: 1 1 0; width: auto; gap: 14px; }
}

/* Soft "pillow" disc: white centre fading to a wine tint at the rim, a
   hairline ring and a soft, even pink glow. */
.lf-cat__disc {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border: 1px solid rgba(143, 18, 56, .06);
	background: radial-gradient(circle at 50% 42%, #fff 0%, #fff 45%, var(--lf-wine-50) 100%);
	/* even glow all round (no y-offset), kept faint */
	box-shadow: 0 0 14px rgba(143, 18, 56, .08);
	display: grid;
	place-items: center;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

@media (min-width: 680px) {
	.lf-cat__disc { width: 80px; height: 80px; }
}
@media (min-width: 1280px) {
	.lf-cat__disc { width: 86px; height: 86px; }
}

/* Transparent icon art sits centred on the disc; a photo fills it instead. */
.lf-cat__disc--icon img {
	width: 44%;
	height: 44%;
	object-fit: contain;
	transition: transform .2s ease;
}
.lf-cat__disc--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lf-cat:hover .lf-cat__disc {
	border-color: rgba(143, 18, 56, .14);
	box-shadow: 0 0 20px rgba(143, 18, 56, .14);
	transform: translateY(-3px);
}
.lf-cat:hover .lf-cat__disc--icon img { transform: scale(1.06); }

.lf-cat__name {
	font-size: 13px;
	font-weight: var(--lf-font-weight-medium);
	line-height: 1.3;
	text-align: center;
	color: var(--lf-ink);
	transition: color .15s ease;
}

@media (min-width: 680px) {
	.lf-cat__name { font-size: 15px; font-weight: 500; }
}

.lf-cat:hover .lf-cat__name { color: var(--lf-wine); }

/* =======================================================================
   "Shop the outcome" card sections (module la_2ta_stories)
   Two looks from the HTML handoff, picked per module instance:
     .lf-stories--overlay  story row: text over a dark-faded photo
     .lf-stories--card     future grid: photo on top, white body + set price
   Desktop: 3 columns, first card a little wider. Tablet: 2 columns with the
   first card full width. Phone: horizontal swipe, next card peeking in.
   The Explore link is stretched over the card so the whole card is a target.
   ======================================================================= */

.lf-stories {
	padding-block: 32px;
}
/* Second instance straight after the first (e.g. future grid under the
   story row) reads as one section, not two. */
.lf-stories + .lf-stories {
	padding-block-start: 0;
	margin-block-start: -12px; /* leaves ~20px between the two rows */
}

@media (min-width: 1000px) {
	.lf-stories { padding-block: 60px; }
	.lf-stories + .lf-stories { margin-block-start: -32px; }
}

.lf-stories__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	margin-block-end: 20px;
	align-items: center;
}
.lf-stories__title {
	font-family: var(--lf-font);
	font-size: 24px;
	margin: 0 0 6px;
	color: var(--lf-ink);
}
.lf-stories__subtitle {
	margin: 0;
	font-size: 14px;
}
@media (min-width: 680px) {
	.lf-stories__title { font-size: 30px; }
	.lf-stories__subtitle { font-size: 15px; }
}

.lf-stories__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--lf-wine);
	font-weight: var(--lf-font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}
.lf-stories__all:hover { color: var(--lf-wine-600); }
.lf-stories__all:hover .lf-stories__arrow { transform: translateX(3px); }

.lf-stories__arrow {
	flex-shrink: 0;
	transition: transform .15s ease;
}
html[dir="rtl"] .lf-stories__arrow { transform: scaleX(-1); }
html[dir="rtl"] .lf-stories__all:hover .lf-stories__arrow,
html[dir="rtl"] .lf-story:hover .lf-stories__arrow { transform: scaleX(-1) translateX(3px); }

/* --- grid ------------------------------------------------------------ */

.lf-stories__grid {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* bleed to the screen edge so the next card peeks in */
	margin-inline: -16px;
	padding-inline: 16px;
	padding-block-end: 6px; /* room for the card shadow */
}
.lf-stories__grid::-webkit-scrollbar { display: none; }

.lf-story {
	flex: 0 0 84%;
	scroll-snap-align: start;
	position: relative;
	border-radius: var(--lf-radius);
	overflow: hidden;
	box-shadow: var(--lf-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.lf-story:hover {
	transform: translateY(-3px);
	box-shadow: var(--lf-shadow);
}

@media (min-width: 680px) {
	.lf-stories__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
	.lf-story:first-child { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
	.lf-stories__grid { grid-template-columns: 1.15fr 1fr 1fr; }
	.lf-story:first-child { grid-column: auto; }
}

.lf-story__media {
	overflow: hidden;
	background: var(--lf-sand);
}
.lf-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.lf-story:hover .lf-story__media img { transform: scale(1.05); }

.lf-story__title {
	font-family: var(--lf-font); /* So theme sets its own h3 font */
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 6px;
}
.lf-story__text {
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lf-story__btn {
	font-size: 14px;
	padding: 10px 18px;
	align-self: flex-start;
}
/* Whole card clickable: a cover link sits under the body; the body lets
   clicks fall through to it except on the real button. */
.lf-story__cover {
	position: absolute;
	inset: 0;
	z-index: 3;
}
.lf-story__body {
	position: relative;
	z-index: 4;
	pointer-events: none;
}
.lf-story__btn { pointer-events: auto; }
.lf-story__btn:focus-visible {
	outline: 2px solid var(--lf-gold);
	outline-offset: 2px;
}
.lf-story:hover .lf-story__btn .lf-stories__arrow { transform: translateX(3px); }

/* --- style: overlay (story row) -------------------------------------- */

.lf-stories--overlay .lf-story {
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
	background: var(--lf-ink);
}
@media (min-width: 1000px) {
	.lf-stories--overlay .lf-story { min-height: 340px; }
}
.lf-stories--overlay .lf-story__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.lf-stories--overlay .lf-story::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(20, 15, 12, .7) 0%, rgba(20, 15, 12, .35) 38%, rgba(20, 15, 12, 0) 75%);
}
.lf-stories--overlay .lf-story__body {
	display: flex;
	flex-direction: column;
	padding: 22px;
}
.lf-stories--overlay .lf-story__title {
	color: #fff;
	font-size: 20px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
	margin-bottom: 8px;
}
@media (min-width: 1000px) {
	.lf-stories--overlay .lf-story__title { font-size: 24px; }
	.lf-stories--overlay .lf-story__body { padding: 26px; }
}
.lf-stories--overlay .lf-story__text { color: rgba(255, 255, 255, .88); }
.lf-stories--overlay .lf-price { color: #fff; }
.lf-stories--overlay .lf-price--old { color: rgba(255, 255, 255, .7); }
.lf-stories--overlay .lf-story__btn {
	background: var(--lf-paper);
	color: var(--lf-wine);
	margin-top: 10px;
}
.lf-stories--overlay .lf-story__btn:hover {
	background: var(--lf-wine);
	color: #fff;
}

/* --- style: card (future grid) --------------------------------------- */

.lf-stories--card .lf-story {
	display: flex;
	flex-direction: column;
	background: var(--lf-paper);
	border: 1px solid var(--lf-line);
}
.lf-stories--card .lf-story__media {
	/* fixed height, not a ratio: the first column is wider, and a ratio
	   would make its photo taller and push its title out of line */
	height: 220px;
}
@media (min-width: 680px) { .lf-stories--card .lf-story__media { height: 240px; } }
@media (min-width: 1280px) { .lf-stories--card .lf-story__media { height: 280px; } }
.lf-stories--card .lf-story__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 20px;
}
@media (min-width: 1000px) {
	.lf-stories--card .lf-story__body { padding: 22px 22px 24px; }
	.lf-stories--card .lf-story__title { font-size: 22px; }
}
.lf-stories--card .lf-story__title { color: var(--lf-ink); }
.lf-stories--card .lf-story__text { color: var(--lf-muted); }
/* keep the price + button lined up along the bottom of every card */
.lf-stories--card .lf-story__price,
.lf-stories--card .lf-story__text + .lf-story__btn { margin-block-start: auto; }

.lf-story__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 8px;
	margin-block-end: 14px;
}
.lf-story__price .lf-price {
	font-size: 26px;
	line-height: 1.1;
	color: var(--lf-wine);
}
.lf-story__price .lf-price--old {
	margin-inline-start: 0;
	font-size: 15px;
}

/* =======================================================================
   "Today's finds" product slider (module la_2ta_deals)
   One row that scrolls sideways (scroll-snap). Phone: ~2 cards with the next
   one peeking in, swipe only. Tablet: 3. Desktop: 4-5 cards with thin chevron
   buttons floating outside the row. Card look follows the HTML handoff.
   ======================================================================= */

.lf-deals {
	padding-bottom: 30px;
	background: transparent;
}
@media (min-width: 1000px) { .lf-deals { padding-bottom: 60px; } }

.lf-deals__slider { position: relative; }

.lf-deals__track {
	--lf-deals-gap: 10px;
	--lf-deals-per: 2.2;
	display: flex;
	gap: var(--lf-deals-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* --lf-deals-bleed: matches .lf-container padding below 1000px so the row
	   runs to the screen edge and the next card peeks in; on desktop it is
	   just room for the hover shadow. overflow-x clips both axes, so the
	   block padding (pulled back with negative margins) keeps the lift +
	   shadow visible. */
	--lf-deals-bleed: 12px;
	margin: -14px calc(var(--lf-deals-bleed) * -1) -22px;
	padding: 14px var(--lf-deals-bleed) 22px;
	scroll-padding-inline: var(--lf-deals-bleed);
	outline: 0;
}
.lf-deals__track::-webkit-scrollbar { display: none; }

@media (min-width: 680px) {
	.lf-deals__track {
		--lf-deals-gap: 15px;
		--lf-deals-per: 3.2;
	}
}
@media (min-width: 1000px) {
	.lf-deals__track {
		--lf-deals-per: 4;
		--lf-deals-bleed: 15px; /* = gap, so no sliver of the next card shows */
	}
}
@media (min-width: 1280px) { .lf-deals__track { --lf-deals-per: 5; } }

/* Product page rows (soconfig/lf_card_slider.twig: Related, Recommended /
   Upsell, AI "Similar items"): Category::card() wraps each .lf-deal in a
   .product-layout, so the wrapper is the flex item and takes the column
   width; the card fills it. 4 cards per row from 1000px (the product
   column is narrower than the home page). */
.lf-card-slider .lf-deals__track > .product-layout {
	display: flex;
	flex: 0 0 calc((100% - var(--lf-deals-gap) * (var(--lf-deals-per) - 1)) / var(--lf-deals-per));
	min-width: 0;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	scroll-snap-align: start;
}
.lf-card-slider .lf-deals__track > .product-layout > .lf-deal { flex: 1 1 auto; width: 100%; }
@media (min-width: 1280px) { .lf-card-slider .lf-deals__track { --lf-deals-per: 4; } }

.lf-deal {
	flex: 0 0 calc((100% - var(--lf-deals-gap) * (var(--lf-deals-per) - 1)) / var(--lf-deals-per));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--lf-paper);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	padding: 8px;
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 680px) { .lf-deal { padding: 12px; } }
.lf-deal:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px -5px rgba(43, 35, 26, .14);
}

.lf-deal__media {
	position: relative;
	display: block;
	aspect-ratio: 1.08;
	border-radius: 15px;
	overflow: hidden;
	background: var(--lf-cream);
}
.lf-deal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lf-deal__badge {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	background: var(--lf-hot);
	color: #fff;
	border-radius: var(--lf-radius-pill);
	padding: 5px 9px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	direction: ltr; /* keep "-25%" as written in RTL */
}

.lf-deal__brand {
	margin-block-start: 12px;
	font-size: 12px;
	font-weight: var(--lf-font-weight-heading);
	color: var(--lf-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lf-deal__cat {
	display: block;
	margin-block-start: 12px;
	font-size: 12px;
	color: var(--lf-muted);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	display: none;
}
.lf-deal__brand + .lf-deal__cat { margin-block-start: 2px; }
.lf-deal__cat:hover { color: var(--lf-wine); }

/* always 2 lines tall (short names keep the space, so the prices line up);
   longer names end in "..." -- the fixed height is the fallback clip */
.lf-scope .lf-deal__name {
	margin: 5px 0 8px;
	padding: 0;
	font-size: 13px;
	font-weight: var(--lf-font-weight-heading);
	line-height: 1.35;
	height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
	overflow-wrap: anywhere;
}
@media (min-width: 680px) { .lf-scope .lf-deal__name { font-size: 15px; } }
.lf-scope .lf-deal__name a { display: inline; font: inherit; }
.lf-deal__name a { color: inherit; text-decoration: none; }
.lf-deal__name a:hover { color: var(--lf-wine); }

.lf-deal__rating {
	font-size: 13px;
	color: var(--lf-star);
}

.lf-deal__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin-block: auto 8px;
	padding-block-start: 2px;
}
.lf-deal__now {
	color: var(--lf-wine);
	font-size: 19px;
	font-weight: 900;
	line-height: 1.2;
}
@media (min-width: 680px) { .lf-deal__now { font-size: 24px; } }
.lf-deal__old {
	color: var(--lf-muted);
	font-size: 15px;
	text-decoration: line-through;
}

.lf-deal__save {
	align-self: flex-start;
	background: var(--lf-save-bg);
	color: var(--lf-ink);
	padding: 5px 8px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.2;
}

/* <a> "Choose options" and <button> "Add to cart" get the same box: one
   line, fixed line-height, so every card's button is the same height and
   sits at the bottom of the card */
.lf-scope .lf-deal__cart {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 10px 0 0;
	padding: 11px 8px;
	border: 0;
	border-radius: 14px;
	background: var(--lf-wine);
	color: #fff;
	font-family: var(--lf-font);
	font-size: 14px;
	font-weight: var(--lf-font-weight-heading);
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background .15s ease;
}
@media (min-width: 680px) { .lf-scope .lf-deal__cart { padding: 12px; border-radius: 16px; } }
/* no price block to push it down (price hidden) -> push the button itself */
.lf-scope .lf-deal > :not(.lf-deal__prices):not(.lf-deal__save) + .lf-deal__cart { margin-block-start: auto; }
.lf-scope .lf-deal__cart:hover,
.lf-scope .lf-deal__cart:focus-visible { background: var(--lf-wine-600); color: #fff; }
.lf-scope .lf-deal__cart.loading { opacity: .7; pointer-events: none; }

/* --- arrows (desktop only; touch devices swipe) ------------------------ */

.lf-deals__nav {
	display: none;
}
@media (min-width: 1000px) and (hover: hover) {
	.lf-deals__nav:not([hidden]) {
		position: absolute;
		inset-block-start: 30%;
		z-index: 2;
		width: 42px;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--lf-line);
		border-radius: 50%;
		background: var(--lf-paper);
		color: var(--lf-ink);
		box-shadow: var(--lf-shadow-sm);
		cursor: pointer;
		transition: opacity .15s ease, color .15s ease, border-color .15s ease;
	}
	.lf-deals__nav:hover { color: var(--lf-wine); border-color: var(--lf-wine); }
	.lf-deals__nav:disabled { opacity: 0; pointer-events: none; }
	.lf-deals__nav--prev { inset-inline-start: -21px; }
	.lf-deals__nav--next { inset-inline-end: -21px; }
	html[dir="rtl"] .lf-deals__nav svg { transform: scaleX(-1); }
}

/* =======================================================================
   Category listing grid (soconfig/listing.twig when lf_cards is set)
   Same .lf-deal card as the slider above, wrapped by .product-layout
   (so_theme product/card.twig, Category::card()).
   Desktop columns come from the back office (product_catalog_mode ->
   .lf-listing--cols-2..5). Phone: 2 per row, tablet: 3 (2 if set to 2).
   5 waits for 1200px: beside the filter sidebar at 992px a fifth card
   would be ~135px wide.
   ======================================================================= */

.lf-listing {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-block-end: 30px;
}
@media (min-width: 680px) {
	.lf-listing {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px 15px;
	}
	.lf-listing--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.lf-listing--cols-4,
	.lf-listing--cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.lf-listing--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* theme.css clips .products-list .product-layout, which would cut off the
   card's hover lift and shadow; the width/padding reset also covers the
   Bootstrap col-* classes the theme's grid/list buttons would add.
   Two classes on the list: layout25/blue.css (loaded after this file) sets
   .products-list .product-layout { display: block }, which stops the card
   from stretching to the row height and leaves the buttons uneven. */
.lf-scope.lf-listing .product-layout {
	display: flex;
	align-items: stretch;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}
.lf-listing .lf-deal { flex: 1 1 auto; }

/* =======================================================================
   Card row (soconfig/lf_card_slider.twig): product page Related products
   and so_extra_slider's "La2ta cards" layout (Upsell).
   The "Today's finds" row above, but each card comes wrapped in
   .product-layout (product/card.twig), so the wrapper takes the slide
   width and the card fills it. At most 4 per row: the product page column
   is narrower than the home container.
   ======================================================================= */
.lf-scope.lf-card-slider .product-layout {
	flex: 0 0 calc((100% - var(--lf-deals-gap) * (var(--lf-deals-per) - 1)) / var(--lf-deals-per));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}
.lf-card-slider .lf-deal { flex: 1 1 auto; }
@media (min-width: 1280px) { .lf-card-slider .lf-deals__track { --lf-deals-per: 4; } }

/* ---------------------------------------------------------------------
   Category page title (product/category.twig)
   Full width above the filter column and the product list.
   --------------------------------------------------------------------- */
.lf-category-title {
	margin: 1rem 0 2.4rem;
	padding: 0;
	border: 0;
	color: var(--lf-ink);
	font-family: var(--lf-font);
	font-size: 2.6rem;
	font-weight: var(--lf-font-weight-body);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}
@media (min-width: 993px) {
	.lf-category-title {
		font-size: 3.8rem;
	}
}

@media(max-width: 999px){
	.lf-hero__row{ padding-block: 32px;}
	.lf-hero__title{ font-size: 26px;}
	.lf-hero__search input[type="text"]{ font-size: 13px; }
	.lf-search-pill input[type="text"]{ padding: 0; }
	.lf-cats{
		padding-top: 20px;
	}
	.lf-cats,
	.lf-stories{
		padding-left: 12px; padding-right: 12px;
	}
	.lf-stories .lf-container{ padding-inline: 0;}
	.lf-stories__title{ font-size: 20px; }
	.lf-stories__head{ margin-block-end: 10px; }
	.lf-stories--overlay .lf-story__body{
		padding: 20px 15px;
	}
	.lf-story{ border-radius: 10px;}
	.lf-scope .lf-deal__cart{ padding: 8px; }
}
/* ---------------------------------------------------------------------
   Trust bar section (extension/la2ta la_2ta_trust) -- under "Today's finds".
   Mobile: 2x2, icon above text. >=680: icon beside text. >=1000: one row of 4
   with thin dividers.
   ------------------------------------------------------------------- */

.lf-trust { padding-bottom: 30px; }
@media (min-width: 1000px) { .lf-trust { padding-bottom: 60px; } }

.lf-trust__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 0;
	padding: 14px 8px;
	list-style: none;
	background: linear-gradient(90deg, var(--lf-wine-50), #fcf7f8 50%, var(--lf-wine-50));
	border-radius: var(--lf-radius-sm);
}

.lf-trust__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	text-align: center;
	min-width: 0;
}

.lf-trust__cover { position: absolute; inset: 0; z-index: 1; }

.lf-trust__icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--lf-wine);
}
.lf-trust__icon svg { width: 34px; height: 34px; }

.lf-trust__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lf-trust__title {
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
	color: var(--lf-ink);
	line-height: 1.3;
}
.lf-trust__text {
	font-size: 12px;
	color: var(--lf-muted);
	line-height: 1.35;
}

@media (min-width: 680px) {
	.lf-trust__list { padding: 18px 16px; gap: 12px; }
	.lf-trust__item { flex-direction: row; justify-content: center; gap: 14px; text-align: start; }
	.lf-trust__icon svg { width: 40px; height: 40px; }
	.lf-trust__title { font-size: 15px; }
	.lf-trust__text { font-size: 13px; }
}

@media (min-width: 1000px) {
	.lf-trust__list { grid-template-columns: repeat(4, 1fr); padding: 22px 0; gap: 0; }
	.lf-trust__item { padding: 4px 16px; }
	.lf-trust__item + .lf-trust__item { border-inline-start: 1px solid rgba(143, 18, 56, .12); }
	.lf-trust__icon svg { width: 44px; height: 44px; }
}
/* ---------------------------------------------------------------------
   Category page title (product/category.twig)
   Full width above the filter column and the product list.
   --------------------------------------------------------------------- */
.lf-category-title {
	margin: 1rem 0 2.4rem;
	padding: 0;
	border: 0;
	color: var(--lf-ink);
	font-family: var(--lf-font);
	font-size: 2.6rem;
	font-weight: var(--lf-font-weight-body);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}
@media (min-width: 993px) {
	.lf-category-title {
		font-size: 3.8rem;
	}
}

/* ---------------------------------------------------------------------
   AI search - smart assistant modal (header26.twig #lf-ai-modal, opened by
   the ✦ button; answer: extension/la2ta/.../la_2ta_ai_search_result.twig).
   The magnifier / Enter of the search pill stay the plain keyword search.
   --------------------------------------------------------------------- */
html.lf-ai-open { overflow: hidden; }

.lf-ai {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 4vh 16px;
}
.lf-ai[hidden] { display: none; }

.lf-ai__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(32, 33, 31, .55);
}

.lf-ai__dialog {
	position: relative;
	width: 100%;
	max-width: 980px;
	max-height: 92vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--lf-paper);
	border-radius: var(--lf-radius);
	box-shadow: var(--lf-shadow);
	padding: 22px 24px 18px;
}

.lf-ai__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.lf-scope .lf-ai__head h2 { margin: 0; font-size: 22px; color: var(--lf-ink); }
.lf-ai__spark { color: var(--lf-wine); }

.lf-ai__close {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: var(--lf-muted);
	cursor: pointer;
}
.lf-ai__close:hover { background: var(--lf-wine-50); color: var(--lf-wine); }

.lf-scope .lf-ai__intro { margin: 6px 0 14px; color: var(--lf-muted); font-size: 14px; }

.lf-ai__form textarea {
	width: 100%;
	min-height: 84px;
	resize: vertical;
	padding: 12px 14px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	background: #fff;
	font-family: var(--lf-font);
	font-size: 15px;
	color: var(--lf-ink);
}
.lf-ai__form textarea:focus {
	outline: 0;
	border-color: var(--lf-wine);
	box-shadow: 0 0 0 3px var(--lf-wine-50);
}

.lf-ai__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}
.lf-ai__count { font-size: 12px; color: var(--lf-muted); }
.lf-ai__fallback { margin-inline-start: auto; font-size: 14px; color: var(--lf-muted); text-decoration: underline; }
.lf-ai__fallback:hover { color: var(--lf-wine); }
.lf-ai__actions .lf-btn[disabled] { opacity: .6; cursor: wait; }

.lf-ai__examples {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.lf-ai__chip {
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-pill);
	background: var(--lf-cream);
	padding: 6px 14px;
	font-family: var(--lf-font);
	font-size: 13px;
	color: var(--lf-ink);
	cursor: pointer;
}
.lf-ai__chip:hover { border-color: var(--lf-wine); color: var(--lf-wine); background: var(--lf-wine-50); }

.lf-ai__status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	color: var(--lf-muted);
	font-size: 14px;
}
.lf-ai__status[hidden] { display: none; }
.lf-ai__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--lf-wine-50);
	border-top-color: var(--lf-wine);
	border-radius: 50%;
	animation: lf-ai-spin .8s linear infinite;
}
@keyframes lf-ai-spin { to { transform: rotate(360deg); } }

.lf-ai__error {
	margin-top: 16px;
	padding: 10px 14px;
	border-radius: var(--lf-radius-sm);
	background: #fdecea;
	color: var(--lf-danger);
	font-size: 14px;
}
.lf-ai__error[hidden] { display: none; }

/* answer */
.lf-ai__answer { margin-top: 18px; }
.lf-ai__summary {
	padding: 10px 14px;
	border-radius: var(--lf-radius-sm);
	background: var(--lf-wine-50);
	font-size: 14px;
	color: var(--lf-ink);
}
.lf-ai__badge {
	display: inline-block;
	margin-inline-end: 8px;
	padding: 2px 10px;
	border-radius: var(--lf-radius-pill);
	background: var(--lf-wine);
	color: #fff;
	font-size: 12px;
	font-weight: var(--lf-font-weight-medium);
}
.lf-scope .lf-ai__advice { margin: 14px 0 4px; font-size: 15px; line-height: 1.6; }

.lf-ai__group { margin-top: 20px; }
.lf-ai__group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.lf-scope .lf-ai__group-head h3 { margin: 0; font-size: 17px; }
.lf-ai__more { font-size: 13px; color: var(--lf-wine); white-space: nowrap; }
.lf-scope .lf-ai__reason { margin: 4px 0 10px; font-size: 13px; color: var(--lf-muted); }

.lf-ai__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
}
.lf-ai__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf-ai__item .product-layout { flex: 1; display: flex; }
.lf-ai .lf-deal,
.lf-ai-empty .lf-deal { flex: 1 1 auto; width: 100%; }
.lf-ai__why { font-size: 12px; line-height: 1.45; color: var(--lf-muted); }
.lf-ai__qty {
	display: inline-block;
	margin-inline-end: 6px;
	padding: 1px 8px;
	border-radius: var(--lf-radius-pill);
	background: var(--lf-sand);
	color: var(--lf-ink);
	font-weight: var(--lf-font-weight-medium);
}

.lf-ai__footer {
	position: sticky;
	bottom: -18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 20px -24px 0;
	padding: 14px 24px;
	border-top: 1px solid var(--lf-line);
	background: var(--lf-paper);
}
.lf-ai__total { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.lf-ai__budget { font-size: 12px; color: var(--lf-success); }
.lf-ai__budget.is-over { color: var(--lf-danger); }

.lf-scope .lf-ai__note { margin: 12px 0 0; font-size: 14px; color: var(--lf-muted); }
.lf-scope .lf-ai__disclaimer { margin: 14px 0 0; font-size: 11px; color: var(--lf-muted); }

@media (max-width: 599px) {
	.lf-ai { padding: 0; }
	.lf-ai__dialog {
		max-width: none;
		max-height: none;
		height: 100%;
		border-radius: 0;
		padding: 16px 16px 12px;
	}
	.lf-ai__footer { margin-inline: -16px; padding-inline: 16px; bottom: -12px; }
	.lf-ai__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.lf-ai__actions { flex-wrap: wrap; }
	.lf-ai__actions .lf-btn { width: 100%; }
	.lf-ai__fallback { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.lf-ai__spinner { animation-duration: 2.4s; }
}


/* ---------------------------------------------------------------------
   AI empty search - product/search found nothing for the typed words
   (soconfig/lf_search_empty.twig, la2ta-future.js initAiEmptySearch()):
   the AI search answers on the page; the answer uses the "AI search"
   styles above. + the "showing results for" line of a close keyword.
   --------------------------------------------------------------------- */
.lf-ai-empty {
	margin: 8px 0 30px;
	padding: 22px 24px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	background: var(--lf-paper);
	box-shadow: var(--lf-shadow-sm);
}

.lf-ai-empty__head { display: flex; align-items: flex-start; gap: 14px; }
.lf-ai-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lf-wine-50);
	color: var(--lf-wine);
}
.lf-ai-empty__text { min-width: 0; }
.lf-scope .lf-ai-empty__title { margin: 0; font-size: 20px; line-height: 1.3; color: var(--lf-ink); word-break: break-word; }
.lf-scope .lf-ai-empty__lead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--lf-ink);
}
.lf-ai-empty__lead[hidden],
.lf-ai-empty__lead [hidden] { display: none; }

/* placeholder cards while the assistant thinks */
.lf-ai-empty__skeleton {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}
.lf-ai-empty__skeleton[hidden] { display: none; }
.lf-ai-empty__ghost { display: flex; flex-direction: column; gap: 8px; }
.lf-ai-empty__ghost span {
	display: block;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--lf-cream) 0%, var(--lf-sand) 50%, var(--lf-cream) 100%);
	background-size: 200% 100%;
	animation: lf-ai-shimmer 1.4s ease-in-out infinite;
}
.lf-ai-empty__ghost span:first-child { height: 0; padding-bottom: 100%; border-radius: var(--lf-radius-sm); }
.lf-ai-empty__ghost span:last-child { width: 60%; }
@keyframes lf-ai-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* the answer: no dialog around it, the footer sticks to the screen bottom */
.lf-ai-empty .lf-ai__answer { margin-top: 14px; }
.lf-ai-empty .lf-ai__footer { bottom: 0; margin-top: 20px; border-radius: 0 0 var(--lf-radius) var(--lf-radius); }

.lf-ai-empty__refine { margin-top: 16px; text-align: center; }
.lf-ai-empty__refine[hidden] { display: none; }
.lf-ai-empty__refine .lf-btn,
.lf-ai-empty__actions .lf-btn { font-size: 15px; padding: 12px 20px; }

/* no answer (AI off, limit, nothing suitable): tips + ask the assistant */
.lf-ai-empty__help { margin-top: 14px; padding-inline-start: 58px; }
.lf-ai-empty__help[hidden] { display: none; }
.lf-scope .lf-ai-empty__help p { margin: 0 0 14px; font-size: 14px; }
.lf-ai-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* results of the closest keyword instead of the typed words */
.lf-search-corrected {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--lf-radius-sm);
	background: var(--lf-wine-50);
	font-size: 14px;
	color: var(--lf-ink);
}
.lf-search-corrected a { margin-inline-start: 6px; color: var(--lf-wine); text-decoration: underline; }

@media (max-width: 767px) {
	.lf-ai-empty { padding: 16px; }
	.lf-ai-empty .lf-ai__footer { margin-inline: -16px; padding-inline: 16px; }
	.lf-ai-empty .lf-ai__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.lf-ai-empty__skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lf-ai-empty__ghost:nth-child(n+3) { display: none; }
	.lf-ai-empty__help { padding-inline-start: 0; }
	.lf-scope .lf-ai-empty__title { font-size: 17px; }
	.lf-ai-empty__actions .lf-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.lf-ai-empty__ghost span { animation: none; }
}


/* ---------------------------------------------------------------------
   Search autocomplete - .lf-suggest under every search pill (header +
   homepage hero, soconfig/lf_search.twig; drawn by la2ta-future.js
   initSearchSuggest(), data from extension/la2ta/module/la_2ta_search_suggest).
   --------------------------------------------------------------------- */
.lf-search-pill[data-suggest-url] { position: relative; }

/* While the list is open the header / hero goes above floating widgets
   (chat bubble, sticky bars) and the sections below it - still below the
   AI assistant modal (10050). The hero clips its background image, so it
   lets the list out only while it is open. */
.lf-header.is-suggesting,
.lf-hero.is-suggesting { z-index: 10040; }
.lf-hero.is-suggesting { overflow: visible; }

/* The Wonderchat bubble sits at the maximum z-index: on phones / tablets it
   would cover the list, so it steps aside while the list is open. */
@media (max-width: 999px) {
	html.lf-suggest-open #wonderchat-seo-wrapper { visibility: hidden; }
}

.lf-suggest {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline: 0;
	z-index: 60;
	min-width: min(560px, calc(100vw - 32px));
	max-height: min(70vh, 620px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--lf-paper);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	box-shadow: 0 22px 60px rgba(43, 35, 26, .18);
	padding: 8px;
	text-align: start;
	animation: lf-suggest-in .14s ease-out;
}
.lf-suggest[hidden] { display: none; }
@keyframes lf-suggest-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* thin progress line while a newer answer is on its way */
.lf-suggest.is-loading::before {
	content: "";
	position: sticky;
	top: -8px;
	display: block;
	height: 2px;
	margin: -8px -8px 6px;
	background: linear-gradient(90deg, transparent, var(--lf-wine), transparent);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	animation: lf-suggest-bar 1s linear infinite;
}
@keyframes lf-suggest-bar {
	from { background-position: -50% 0; }
	to { background-position: 150% 0; }
}

.lf-suggest__section + .lf-suggest__section { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--lf-line); }

.lf-suggest__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px 4px;
	font-size: 11px;
	font-weight: var(--lf-font-weight-medium);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lf-muted);
}
.lf-suggest__count { text-transform: none; letter-spacing: 0; font-weight: 400; }

.lf-suggest mark {
	background: transparent;
	color: var(--lf-wine);
	font-weight: var(--lf-font-weight-heading);
	padding: 0;
}

/* categories */
.lf-suggest__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.lf-suggest__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-pill);
	background: var(--lf-cream);
	font-size: 13px;
	color: var(--lf-ink);
	text-decoration: none;
}
.lf-suggest__chip svg { color: var(--lf-muted); flex-shrink: 0; }
.lf-suggest__logo {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
}
.lf-suggest__chip-count {
	min-width: 20px;
	padding: 0 6px;
	border-radius: var(--lf-radius-pill);
	background: var(--lf-paper);
	border: 1px solid var(--lf-line);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	color: var(--lf-muted);
}
.lf-suggest__chip--brand { font-weight: var(--lf-font-weight-medium); }
.lf-suggest__chip:hover,
.lf-suggest__chip.is-active { border-color: var(--lf-wine); background: var(--lf-wine-50); color: var(--lf-wine); text-decoration: none; }

/* products */
.lf-suggest__product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--lf-radius-sm);
	color: var(--lf-ink);
	text-decoration: none;
}
.lf-suggest__product:hover,
.lf-suggest__product.is-active { background: var(--lf-wine-50); color: var(--lf-ink); text-decoration: none; }

.lf-suggest__thumb {
	position: relative;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--lf-line);
	overflow: hidden;
}
.lf-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; }

.lf-suggest__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-suggest__brand { font-size: 11px; color: var(--lf-muted); text-transform: uppercase; letter-spacing: .04em; }
.lf-suggest__name {
	font-size: 14px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lf-suggest__price { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: end; }
.lf-suggest__now { font-size: 15px; font-weight: var(--lf-font-weight-heading); color: var(--lf-ink); white-space: nowrap; }
.lf-suggest__now.is-sale { color: var(--lf-hot); }
.lf-suggest__old { font-size: 12px; color: var(--lf-muted); text-decoration: line-through; white-space: nowrap; }

/* footer: all results + smart assistant, pinned to the bottom of the list */
.lf-suggest__footer {
	position: sticky;
	bottom: -8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px -8px -8px;
	padding: 8px;
	border-top: 1px solid var(--lf-line);
	background: var(--lf-paper);
	border-radius: 0 0 var(--lf-radius) var(--lf-radius);
}
.lf-suggest__all,
.lf-suggest__ai {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--lf-radius-sm);
	background: transparent;
	font-family: var(--lf-font);
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}
.lf-suggest__all { flex: 1; min-width: 0; color: var(--lf-wine); font-weight: var(--lf-font-weight-medium); }
.lf-suggest__all span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-suggest__arrow { margin-inline-start: auto; flex-shrink: 0; }
html[dir="rtl"] .lf-suggest__arrow { transform: scaleX(-1); }
.lf-suggest__all:hover,
.lf-suggest__all.is-active { background: var(--lf-wine-50); color: var(--lf-wine-600); text-decoration: none; }

.lf-suggest__ai { color: var(--lf-ink); background: var(--lf-cream); }
.lf-suggest__spark { color: var(--lf-wine); }
.lf-suggest__ai:hover,
.lf-suggest__ai.is-active { background: var(--lf-wine); color: #fff; }
.lf-suggest__ai:hover .lf-suggest__spark,
.lf-suggest__ai.is-active .lf-suggest__spark { color: #fff; }
/* nothing found: the assistant is the way on */
.lf-suggest__ai--primary { width: 100%; justify-content: center; background: var(--lf-wine-50); color: var(--lf-wine); font-weight: var(--lf-font-weight-medium); }
.lf-suggest__ai--primary span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* recent searches */
.lf-suggest__recent {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--lf-radius-sm);
	background: transparent;
	font-family: var(--lf-font);
	font-size: 14px;
	color: var(--lf-ink);
	text-align: start;
	cursor: pointer;
}
.lf-suggest__recent svg { color: var(--lf-muted); flex-shrink: 0; }
.lf-suggest__recent:hover,
.lf-suggest__recent.is-active { background: var(--lf-wine-50); }
.lf-suggest__clear {
	border: 0;
	background: transparent;
	font-family: var(--lf-font);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lf-wine);
	cursor: pointer;
}
.lf-suggest__clear:hover { text-decoration: underline; }

/* loading / empty */
.lf-suggest__loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px;
	font-size: 14px;
	color: var(--lf-muted);
}
.lf-suggest__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--lf-wine-50);
	border-top-color: var(--lf-wine);
	border-radius: 50%;
	animation: lf-ai-spin .8s linear infinite;
}
.lf-suggest__empty { padding: 18px 12px 10px; text-align: center; color: var(--lf-muted); }
.lf-suggest__empty svg { width: 28px; height: 28px; color: var(--lf-sand); }
.lf-suggest__empty strong { display: block; margin-top: 6px; font-size: 15px; color: var(--lf-ink); word-break: break-word; }
.lf-scope .lf-suggest__empty p { margin: 4px 0 0; font-size: 13px; }
.lf-suggest__empty + .lf-suggest__footer { justify-content: center; }

@media (max-width: 599px) {
	.lf-suggest { min-width: 0; max-height: 65vh; padding: 6px; }
	.lf-suggest__product { gap: 10px; padding: 8px 6px; }
	.lf-suggest__thumb { flex-basis: 48px; width: 48px; height: 48px; }
	.lf-suggest__name { font-size: 13px; }
	.lf-suggest__footer { flex-direction: column; bottom: -6px; margin: 6px -6px -6px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.lf-suggest { animation: none; }
	.lf-suggest.is-loading::before { animation-duration: 3s; }
}


/* ---------------------------------------------------------------------
   Listing loading - veil + spinner over the results while a product
   listing loads: category (so_filter_shop_by, over #content) and
   product/search (over the results column). Drawn by la2ta-future.js
   lfListingLoading.
   --------------------------------------------------------------------- */
.lf-loading { position: relative; }
.lf-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .6);
	z-index: 20;
}
.lf-loading > .lf-loading__spinner {
	position: absolute;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 3px solid #ddd;
	border-top-color: #333;
	border-radius: 50%;
	animation: lf-loading-spin .8s linear infinite;
	z-index: 21;
}
@keyframes lf-loading-spin {
	to { transform: rotate(360deg); }
}


/* ---------------------------------------------------------------------
   product/search sidebar - same look as the category filter column
   (so_filter_shop_by markup + its style.css, product/search.twig).
   layout25/blue.css fixes the search sidebar at 320px; the category page
   uses col-md-3 / col-md-9, so the id beats blue.css (loaded after us).
   --------------------------------------------------------------------- */
@media (min-width: 769px) {
	#searchready .container-search .row > div.bzo-search-sidebar {
		flex: 0 0 25%;
		width: 25%;
		min-width: 0;
		max-width: 25%;
	}
	#searchready .container-search .row > div.bzo-search-content {
		flex: 0 0 75%;
		width: 75%;
		max-width: 75%;
	}
}
/* "Hide filters" (la2ta-future.js lfFilterToggle, desktop): the rest of the
   collapsed state comes from so_filter_shop_by/css/style.css (.so-filter-col) */
@media (min-width: 993px) {
	#searchready .container-search .row.so-filters-hidden > div.bzo-search-sidebar {
		flex: 0 0 0%;
		width: 0;
		min-width: 0;
		max-width: 0;
		padding: 0;
	}
	#searchready .container-search .row.so-filters-hidden > div.bzo-search-content {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}
/* long category / brand lists scroll inside their group. The id is needed:
   blue.css ".module.so_filter_wrap .modcontent .so-filter-content-opts-container
   { overflow: inherit }" (4 classes, loaded later) made the cut-off list
   spill over the next group ("Filter by brands" drawn over the categories). */
#lf-search-filter li[data-option="category"] .so-filter-content-opts-container,
#lf-search-filter li[data-option="manufacturer"] .so-filter-content-opts-container {
	max-height: 320px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline-end: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--lf-sand) transparent;
}
.lf-search-filter .opt-select:focus-visible {
	outline: 2px solid var(--lf-wine);
	outline-offset: 2px;
}
.lf-search-empty {
	margin: 0;
	padding: 48px 16px;
	text-align: center;
	color: var(--lf-muted);
	font-size: 15px;
}

/* The search sidebar sits inside #content (the category column is outside
   it), so blue.css's ".layout-25 #content .module h3.modtitle" homepage
   heading (26px italic + wine underline) would win over the category's
   ".content-aside .module h3.modtitle": put that one back here. */
.layout-25 #content .content-aside .module h3.modtitle {
	margin: 0;
	padding: 15px;
	border-bottom: 1px solid #d7d7d7;
	background-color: #f5f5f5;
	color: #222;
	font-size: 16px;
	font-style: normal;
	line-height: 1.2;
	text-transform: uppercase;
}
.layout-25 #content .content-aside .module h3.modtitle::after { content: none; }

/* Search sidebar as a La2ta card: the border, radius and paper of the
   product cards (.lf-deal) instead of the theme's grey 3px box. */
.content-aside #lf-search-filter.module {
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	background: var(--lf-paper);
	overflow: hidden;
}
.layout-25 #content .content-aside #lf-search-filter h3.modtitle {
	padding: 16px 20px;
	border-bottom: 1px solid var(--lf-line);
	background: var(--lf-cream);
	color: var(--lf-ink);
	font-family: var(--lf-font);
	font-size: 17px;
	font-weight: var(--lf-font-weight-heading);
	text-transform: none;
}
#lf-search-filter .modcontent {
	padding: 6px 20px 20px;
	background: transparent;
	font-family: var(--lf-font);
}
/* groups: heading + a hairline between them in the card's line colour */
#lf-search-filter .modcontent ul li.so-filter-options {
	padding-block: 16px;
}
#lf-search-filter .modcontent ul li.so-filter-options + li.so-filter-options {
	border-top: 1px solid var(--lf-line);
}
#lf-search-filter .modcontent ul li.so-filter-options .so-filter-heading div.so-filter-heading-text {
	color: var(--lf-ink);
	font-size: 15px;
	font-weight: var(--lf-font-weight-medium);
}
#lf-search-filter .modcontent ul li.so-filter-options .so-filter-heading > i.fa { color: var(--lf-muted); }
#lf-search-filter .modcontent .so-filter-content-opts-container .so-option-container label {
	color: var(--lf-ink);
	font-size: 14px;
	line-height: 1.4;
	text-transform: none;
}
/* checkbox: rounded like the cards, wine when on */
#lf-search-filter .so-checkbox {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-color: #cfc7ba;
	border-radius: 5px;
	transition: background-color .15s, border-color .15s;
}
#lf-search-filter .opt-select:hover .so-checkbox { border-color: var(--lf-wine); }
#lf-search-filter .opt_active .so-checkbox {
	background: var(--lf-wine);
	border-color: var(--lf-wine);
}
#lf-search-filter .opt_active .so-checkbox::after { left: 5px; top: 2px; }
#lf-search-filter .opt_active label { color: var(--lf-wine); }
/* price inputs + "Reset All" in the same rounded look */
#lf-search-filter .put-min_max input.form-control {
	border-color: var(--lf-line);
	border-radius: var(--lf-radius-sm);
}
#lf-search-filter .btn_resetAll {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 10px 16px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-pill);
	background: transparent;
	color: var(--lf-ink);
	font-family: var(--lf-font);
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
	text-align: center;
	text-transform: none;
	box-shadow: none;
}
#lf-search-filter .btn_resetAll:hover,
#lf-search-filter .btn_resetAll:focus-visible {
	border-color: var(--lf-wine);
	background: var(--lf-wine-50);
	color: var(--lf-wine);
}

/* ---------------------------------------------------------------------
   AI recommendations inside the smart assistant's answer (#lf-ai-modal):
   other colours / sizes (chips) and similar options under each product,
   the set with a special price, "complete the set" (.lf-ai__group).
   Markup: extension/la2ta/.../module/la_2ta_reco_{item,bundle,together}.twig,
   behaviour: la2ta-future.js createReco().
   --------------------------------------------------------------------- */
.lf-reco__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 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);
	white-space: nowrap;
}

/* under one product: colours / sizes, similar options */
.lf-reco--item { display: grid; gap: 6px; font-size: 12px; }
.lf-reco__variants { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lf-reco__variant-title { color: var(--lf-muted); margin-inline-end: 2px; }
.lf-reco__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 28px;
	padding-block: 2px;
	padding-inline: 10px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-pill);
	background: #fff;
	color: var(--lf-ink);
	font-size: 12px;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
.lf-reco__chip:has(img) { padding-inline: 2px 10px; }
.lf-reco__chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.lf-reco__chip:hover, .lf-reco__chip:focus-visible { border-color: var(--lf-wine); color: var(--lf-wine); text-decoration: none; }
.lf-reco__alt summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--lf-wine);
	font-weight: var(--lf-font-weight-medium);
	cursor: pointer;
	list-style: none;
}
.lf-reco__alt summary::-webkit-details-marker { display: none; }
.lf-reco__alt summary::after { content: "▾"; font-size: 10px; transition: transform .15s; }
.lf-reco__alt[open] summary::after { transform: rotate(180deg); }
.lf-reco__alt-list { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.lf-reco__alt-list li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	grid-template-areas: "media name add" "media price add";
	align-items: center;
	column-gap: 8px;
	padding: 6px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	background: #fff;
}
.lf-reco__alt-media { grid-area: media; }
.lf-reco__alt-media img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: var(--lf-cream); }
.lf-reco__alt-name { grid-area: name; display: -webkit-box; overflow: hidden; color: var(--lf-ink); line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lf-reco__alt-name:hover { color: var(--lf-wine); }
.lf-reco__alt-price { grid-area: price; font-weight: var(--lf-font-weight-medium); }
.lf-reco__alt-add {
	grid-area: add;
	padding: 4px 10px;
	border: 1px solid var(--lf-wine);
	border-radius: var(--lf-radius-pill);
	background: #fff;
	color: var(--lf-wine);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}
.lf-reco__alt-add:hover, .lf-reco__alt-add.is-added { background: var(--lf-wine); color: #fff; text-decoration: none; }
.lf-reco__alt-add:disabled { opacity: .6; cursor: progress; }

/* complete the set: one row of 4 (2 x 2 on phones, .lf-ai__cards) */
@media (min-width: 600px) { .lf-reco--together .lf-ai__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the set with a special price */
.lf-reco--bundle {
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	background: var(--lf-paper);
}
.lf-reco__bundle-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* html body: the theme styles h3 (uppercase) */
html body .lf-scope .lf-reco__title { margin: 0; color: var(--lf-ink); font-family: var(--lf-font); font-size: 17px; font-weight: var(--lf-font-weight-heading); line-height: 1.2; text-transform: none; letter-spacing: 0; }
.lf-scope .lf-reco__reason { margin: 4px 0 0; font-size: 13px; }
.lf-reco__bundle-items { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; padding-bottom: 4px; overflow-x: auto; }
.lf-reco__plus { flex: 0 0 auto; align-self: center; color: var(--lf-muted); font-size: 20px; }
.lf-reco__bundle-item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 5px;
	min-width: 120px;
	max-width: 200px;
	padding: 8px;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius-sm);
	background: #fff;
	transition: opacity .15s;
}
.lf-reco__bundle-item.is-off { opacity: .45; }
.lf-reco__check { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 1; margin: 0; }
.lf-reco__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--lf-wine); cursor: pointer; }
.lf-reco__check input:disabled { cursor: default; }
.lf-reco__bundle-media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.lf-reco__this { color: var(--lf-muted); font-size: 11px; }
.lf-reco__bundle-name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--lf-ink);
	font-size: 12px;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.lf-reco__bundle-name:hover { color: var(--lf-wine); }
.lf-reco__bundle-price { font-weight: var(--lf-font-weight-medium); }
.lf-reco__option { font-size: 12px; }
.lf-reco__option.is-invalid { border-color: var(--lf-danger); }
.lf-reco__bundle-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.lf-reco__bundle-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lf-reco__bundle-label { color: var(--lf-muted); }
.lf-reco__bundle-now { color: var(--lf-wine); font-size: 20px; }
.lf-reco__bundle-old { color: var(--lf-muted); text-decoration: line-through; }
.lf-reco__bundle-save { padding: 2px 8px; border-radius: var(--lf-radius-pill); background: var(--lf-save-bg); font-size: 12px; font-weight: var(--lf-font-weight-medium); }
.lf-scope .lf-reco__bundle-partial { flex-basis: 100%; margin: 0; font-size: 12px; }
.lf-reco__bundle-add {
	margin-inline-start: auto;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--lf-radius-pill);
	background: var(--lf-wine);
	color: #fff;
	font-size: 14px;
	font-weight: var(--lf-font-weight-medium);
	cursor: pointer;
}
.lf-reco__bundle-add:hover { background: var(--lf-wine-600); }
.lf-reco__bundle-add:disabled { opacity: .6; cursor: default; }
.lf-reco__bundle-status { flex-basis: 100%; color: var(--lf-success); }
.lf-reco__bundle-status:empty { display: none; }
@media (max-width: 575px) {
	.lf-reco__bundle-add { width: 100%; margin-inline-start: 0; }
}