/* ==========================================================================
   Laraib Organic — final override layer.

   Loads LAST (parts/ are enqueued alphabetically after every core sheet), so
   this is where site-wide layout decisions are enforced over both the section
   stylesheets and WooCommerce's own legacy CSS.

   Keep this file small and deliberate. Anything here is a decision, not a patch.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kill WooCommerce's legacy float layout on the single product.

   woocommerce-layout.css ships `div.images { float:left; width:48% }` and
   `div.summary { float:right; width:48% }`. Inside our CSS grid those percentage
   widths collapse the summary to 48% of its own column — which is why the buy
   panel was a narrow strip. The grid owns the columns now.
   -------------------------------------------------------------------------- */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary,
.lo-productpage .lo-product .lo-product__media,
.lo-productpage .lo-product .lo-product__summary {
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.lo-productpage .lo-product .lo-product__summary { margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   2. Full-width product page.

   The buy panel should be readable without scrolling, so on large screens the
   product header runs wider than the standard 1320px container and the summary
   column gets the larger share.
   -------------------------------------------------------------------------- */
.lo-product__top > .lo-container,
.lo-product__after > .lo-container {
	max-width: min(1680px, 94vw);
}

@media (min-width: 1280px) {
	.lo-product__layout {
		grid-template-columns: minmax(0, 47fr) minmax(0, 53fr) !important;
		gap: clamp(40px, 4vw, 84px) !important;
	}
}

@media (min-width: 1600px) {
	.lo-product__layout {
		grid-template-columns: minmax(0, 44fr) minmax(0, 56fr) !important;
	}
}

/* The gallery no longer needs to be enormous on a wide screen — cap it so the
   image stays a product shot rather than a poster, and centre it in its column. */
.lo-product__media .woocommerce-product-gallery {
	max-width: 620px;
	margin-inline: auto;
	width: 100% !important;
}

/* Title: stop the four-line wrap now that there is room for it. */
.lo-productpage .lo-product .lo-product__summary .product_title,
.lo-productpage .lo-product .lo-product__summary h1 {
	font-size: clamp(1.9rem, 1.2rem + 1.7vw, 3rem);
	line-height: 1.12;
	text-wrap: balance;
}

/* Give the summary a comfortable reading measure without letting it stretch
   into a wall of text on an ultrawide monitor. */
@media (min-width: 1280px) {
	.lo-product__summary { max-width: 760px !important; }
}

/* --------------------------------------------------------------------------
   3. Star ratings — WooCommerce's font-based stars, made reliable.

   The rating markup appears in the loop, the summary, the review list and the
   rating filter. If any ancestor resets font-family or width, the five glyphs
   wrap onto separate lines, which looks broken. Pin the essentials.
   -------------------------------------------------------------------------- */
.woocommerce .star-rating,
.woocommerce p.stars a {
	font-family: star !important;
}

.woocommerce .star-rating {
	position: relative;
	display: inline-block !important;
	width: 5.4em !important;
	height: 1.2em;
	line-height: 1.2;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
	font-size: 1em;
	letter-spacing: normal;
	color: var(--lo-gold-500);
}
.woocommerce .star-rating::before {
	content: "sssss";
	position: absolute;
	inset: 0 auto auto 0;
	color: var(--lo-line);
	opacity: 1;
}
.woocommerce .star-rating span {
	position: absolute;
	inset: 0 auto auto 0;
	overflow: hidden;
	padding-top: 1.5em;
	float: none;
}
.woocommerce .star-rating span::before {
	content: "SSSSS";
	position: absolute;
	inset: 0 auto auto 0;
	color: var(--lo-gold-500);
}

/* The rating filter widget lists one row per rating — keep the rows tidy. */
.woocommerce .widget_rating_filter ul,
.lo-widget .widget_rating_filter ul,
.lo-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce .widget_rating_filter li,
.lo-filter__list li {
	margin: 0;
	padding-left: 0;
}
.woocommerce .widget_rating_filter li a,
.lo-filter__list li a {
	display: flex;
	align-items: center;
	gap: var(--lo-s2);
	padding-block: 6px;
}

/* --------------------------------------------------------------------------
   4. Product loop safety net.

   If a card's stylesheet ever fails to match Woo's markup, the loop must still
   read as a grid of cards rather than a stack of full-width images.
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.woocommerce ul.products li.product::before { content: none; }

/* Woo's default "Sale!" ribbon is replaced by the theme badge — hide the leftover. */
.woocommerce ul.products li.product > span.onsale:not([class*="lo-"]) {
	display: none;
}

/* --------------------------------------------------------------------------
   5. Tokens list reset must not leak into UI lists.
   tokens.css indents every ul/ol for prose; navigation, filters and card lists
   are not prose.
   -------------------------------------------------------------------------- */
.lo-nav__list, .lo-drawer__menu, .lo-footer__menu, .lo-legal,
.lo-marquee__track, .lo-crumbs, .lo-contactlist, .lo-tabs__nav,
.woocommerce-MyAccount-navigation ul, .lo-filter, .lo-shop__filters ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.lo-nav__list li, .lo-drawer__menu li, .lo-footer__menu li, .lo-legal li,
.lo-contactlist li, .woocommerce-MyAccount-navigation li {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. Announcement bar — hand off cleanly instead of cross-fading.

   Both messages sit in the same absolute box, so a slow cross-fade leaves two
   legible lines stacked on top of each other. The outgoing line leaves first,
   the incoming one arrives after it has gone.
   -------------------------------------------------------------------------- */
.lo-announce__item {
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s !important;
	visibility: hidden;
}
.lo-announce__item.is-active {
	transition: opacity .3s ease .2s, transform .3s ease .2s, visibility 0s !important;
	visibility: visible;
}

/* --------------------------------------------------------------------------
   7. Cart / checkout tables must never overflow their container.
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
	width: 100%;
	max-width: 100%;
	table-layout: auto;
}
.woocommerce-cart-form,
.woocommerce .cart-collaterals,
.woocommerce-checkout-review-order {
	min-width: 0;
	max-width: 100%;
}
.woocommerce-cart-form__contents { display: table; width: 100%; }

/* The cart page is a two-column grid: items left, totals right. Anything that
   is really a full-width banner (the free-delivery progress notice, Woo's
   notice wrapper, the coupon row) must span both columns, otherwise it eats
   the wide cell and the items table gets squeezed into the narrow one. */
.woocommerce-cart .woocommerce > .lo-notice,
.woocommerce-cart .woocommerce > .lo-shipbar,
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .woocommerce-message,
.woocommerce-cart .woocommerce > .woocommerce-info,
.woocommerce-cart .woocommerce > .woocommerce-error,
.woocommerce-cart .woocommerce > h2,
.woocommerce-cart .woocommerce > .cross-sells,
.woocommerce-cart .woocommerce > .lo-crosssell {
	grid-column: 1 / -1 !important;
}

.woocommerce-cart .woocommerce > .woocommerce-cart-form { grid-column: 1 !important; }
.woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2 !important; }

@media (max-width: 1024px) {
	.woocommerce-cart .woocommerce > .woocommerce-cart-form,
	.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 1 / -1 !important;
	}
}

@media (max-width: 860px) {
	.woocommerce table.shop_table,
	.woocommerce-cart-form__contents { display: block; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   8. Checkout column order.

   WooCommerce puts billing in `.col-1` and the additional-info block in
   `.col-2`. Splitting them into two equal columns left the tall billing form
   in the right-hand column and a short notes box on the left. The store has no
   separate shipping form, so billing takes the whole left column and the notes
   sit underneath it.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .col2-set {
	display: block !important;
}
.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .col-2 {
	width: auto !important;
	float: none !important;
	max-width: none !important;
}
.woocommerce-checkout .col2-set > .col-2 { margin-top: var(--lo-s6); }

/* --------------------------------------------------------------------------
   9. Sugar-free promo card — guarantee the gold reads.

   The card is a gold gradient carrying dark-green text. It also carries a
   decorative dark `::after` veil parked at z-index:-1, which is meant to sit
   behind the card entirely. The moment anything gives the card a stacking
   context (a transform during the entrance animation, a filter, will-change)
   that veil lands on top of the gold and the text drops to roughly 1.3:1.
   Retire the veil so the card cannot invert in any state.
   -------------------------------------------------------------------------- */
.lo-promo::after { display: none !important; }

.lo-promo {
	background-image: linear-gradient(158deg, var(--lo-gold-400) 0%, var(--lo-gold-500) 44%, var(--lo-gold-600) 100%);
	color: var(--lo-green-950);
}
.lo-promo .lo-promo__title,
.lo-promo .lo-promo__text,
.lo-promo li,
.lo-promo p,
.lo-promo span:not(.lo-promo__badge) {
	color: var(--lo-green-950);
}
.lo-promo .lo-promo__text,
.lo-promo li { color: var(--lo-green-900); }

/* Its button needs to read against gold, so invert it to the deep green. */
.lo-promo .lo-btn {
	background: var(--lo-green-900);
	color: #fff;
	border-color: transparent;
}
.lo-promo .lo-btn:hover { background: var(--lo-green-950); color: #fff; }

/* --------------------------------------------------------------------------
   10. Small gold text needs a darker gold to clear WCAG AA.

   --lo-gold-600 (#B08125) on white or cream measures ~3.5:1. That is fine for
   a large display heading but fails the 4.5:1 minimum for the 10–12px labels
   it was being used on (eyebrows, card category lines, the logo sub-line).
   --lo-gold-700 measures ~5.3:1 on white and ~5.0:1 on cream.
   Gold on DARK backgrounds is already well past AA and stays light.
   -------------------------------------------------------------------------- */
.lo-eyebrow,
.lo-pcard__cat,
.lo-logo__text em,
.lo-product__cat,
.woocommerce ul.products li.product .lo-pcard__cat {
	color: var(--lo-gold-700);
}

/* Keep the light gold wherever the backdrop is dark. */
.lo-section--dark .lo-eyebrow,
.lo-hero .lo-eyebrow,
.lo-phero .lo-eyebrow,
.lo-banner .lo-eyebrow,
.lo-newsletter .lo-eyebrow,
.lo-stats .lo-eyebrow,
.lo-ingredients .lo-eyebrow,
.lo-footer .lo-eyebrow,
.lo-logo--light .lo-logo__text em {
	color: var(--lo-gold-300);
}

/* --------------------------------------------------------------------------
   11. Cart / Checkout / Account must escape the prose measure.

   These are ordinary WordPress pages carrying a WooCommerce shortcode, so
   page.php renders them inside `.lo-pagebody__main` (840px) and `.lo-prose`
   (~72ch = 747px). That measure is right for an article and wrong for a cart:
   the items table needs ~550px, the totals card ~360px, and squeezing both
   into 747px made the table overflow its grid cell and sit on top of the
   totals panel. Commerce pages get the full container instead.
   -------------------------------------------------------------------------- */
body.woocommerce-cart .lo-pagebody__main,
body.woocommerce-checkout .lo-pagebody__main,
body.woocommerce-account .lo-pagebody__main,
body.woocommerce-cart .lo-prose,
body.woocommerce-checkout .lo-prose,
body.woocommerce-account .lo-prose,
body.woocommerce-cart .lo-prose > .woocommerce,
body.woocommerce-checkout .lo-prose > .woocommerce,
body.woocommerce-account .lo-prose > .woocommerce {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
}

body.woocommerce-cart .lo-pagebody__layout,
body.woocommerce-checkout .lo-pagebody__layout,
body.woocommerce-account .lo-pagebody__layout {
	grid-template-columns: minmax(0, 1fr) !important;
	max-width: none !important;
}

/* Give the money pages the same generous width as the product page. */
body.woocommerce-cart .lo-pagebody .lo-container,
body.woocommerce-checkout .lo-pagebody .lo-container,
body.woocommerce-account .lo-pagebody .lo-container {
	max-width: min(1600px, 94vw);
}

/* A logged-out account page is just a login form — it should not stretch to
   1600px. The logged-in dashboard keeps the full width for its order tables. */
body.woocommerce-account:not(.logged-in) .lo-pagebody .lo-container {
	max-width: min(760px, 92vw);
}

/* Cart: items take the space they need, totals sit in a fixed rail. */
.woocommerce-cart .woocommerce {
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) !important;
	gap: clamp(24px, 2.6vw, 56px) !important;
	align-items: start !important;
}
.woocommerce-cart table.shop_table {
	width: 100% !important;
	min-width: 0 !important;
	table-layout: auto !important;
}
.woocommerce-cart .woocommerce-cart-form { min-width: 0 !important; }

/* Checkout: form left, order review in a rail on the right. */
.woocommerce-checkout form.checkout {
	grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) !important;
	gap: clamp(24px, 2.6vw, 56px) !important;
	align-items: start !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #order_review_heading { min-width: 0 !important; }

@media (max-width: 1024px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --------------------------------------------------------------------------
   12. Order confirmation.
   -------------------------------------------------------------------------- */
.woocommerce-order { max-width: 940px; margin-inline: auto; }

.lo-ty { text-align: center; margin-bottom: var(--lo-s7); }

.lo-ty__mark {
	display: inline-grid; place-items: center;
	width: 92px; height: 92px; border-radius: 50%;
	background: var(--lo-green-100);
	color: var(--lo-green-600);
	margin-bottom: var(--lo-s4);
	box-shadow: 0 0 0 10px var(--lo-green-50);
}
.lo-ty__ring { stroke-dasharray: 151; stroke-dashoffset: 151; animation: lo-ty-ring .7s var(--lo-m-ease-out, ease-out) forwards; }
.lo-ty__tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: lo-ty-tick .45s ease-out .55s forwards; }
@keyframes lo-ty-ring { to { stroke-dashoffset: 0; } }
@keyframes lo-ty-tick { to { stroke-dashoffset: 0; } }

.lo-ty__kicker {
	margin: 0 0 var(--lo-s2);
	font-size: var(--lo-fs-xs); font-weight: 800;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--lo-gold-700);
}
.lo-ty__sub {
	display: block;
	margin: var(--lo-s4) auto 0; max-width: 56ch;
	text-align: center;
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-md); font-weight: 400;
	line-height: 1.7; color: var(--lo-body);
	letter-spacing: 0;
}

/* Cart/Checkout/Account are destinations, not an article series — the
   prev/next page navigation page.php prints makes no sense there. */
body.woocommerce-cart .lo-postnav,
body.woocommerce-checkout .lo-postnav,
body.woocommerce-account .lo-postnav,
body.woocommerce-order-received .lo-postnav {
	display: none !important;
}

/* WooCommerce's own "order received" paragraph becomes the display headline. */
.woocommerce-order > .woocommerce-notice--success,
p.woocommerce-notice.woocommerce-thankyou-order-received {
	margin: 0 0 var(--lo-s3);
	padding: 0;
	background: none; border: 0;
	text-align: center;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-3xl);
	line-height: 1.15;
	font-weight: 600;
	color: var(--lo-green-900);
}
.lo-ty__lead { display: block; }

.lo-tynext {
	margin-top: var(--lo-s8);
	padding: clamp(24px, 3vw, 40px);
	background: linear-gradient(180deg, var(--lo-paper), var(--lo-green-50));
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-lg);
	box-shadow: var(--lo-shadow-sm);
}
.lo-tynext__title {
	margin: 0 0 var(--lo-s5);
	font-size: var(--lo-fs-xl);
	color: var(--lo-green-900);
}
/* The steps already carry their own 01/02/03 numerals, so the list marker
   would double them up. tokens.css indents every ol for prose, hence !important. */
.lo-tynext__steps {
	list-style: none !important; margin: 0 0 var(--lo-s5); padding-left: 0 !important;
	display: grid; gap: var(--lo-s5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lo-tynext__steps > li::marker { content: none; }
/* .lo-prose numbers ordered lists with a CSS counter in li::before, which
   list-style:none cannot switch off. These steps print their own 01/02/03. */
.lo-tynext__steps > li::before { content: none !important; }
.lo-tynext__step {
	position: relative; margin: 0; padding: 0;
	display: grid; gap: 6px;
	grid-template-columns: auto 1fr;
	grid-template-areas: "num icon" "title title" "text text";
	align-content: start;
}
.lo-tynext__num {
	grid-area: num;
	font-family: var(--lo-font-display); font-size: var(--lo-fs-lg);
	font-weight: 700; color: var(--lo-gold-600); line-height: 1;
}
.lo-tynext__icon { grid-area: icon; justify-self: start; color: var(--lo-green-600); }
.lo-tynext__step strong { grid-area: title; margin-top: 6px; color: var(--lo-green-900); font-size: var(--lo-fs-base); }
.lo-tynext__step > span:last-child { grid-area: text; font-size: var(--lo-fs-sm); line-height: 1.6; color: var(--lo-body); }

.lo-tynext__pay {
	display: flex; gap: var(--lo-s3); align-items: flex-start;
	padding: var(--lo-s4) var(--lo-s5);
	background: var(--lo-gold-100);
	border-left: 3px solid var(--lo-gold-500);
	border-radius: 0 var(--lo-r) var(--lo-r) 0;
	margin-bottom: var(--lo-s5);
	color: var(--lo-green-900);
}
.lo-tynext__pay svg { color: var(--lo-gold-700); flex: 0 0 auto; margin-top: 2px; }
/* Only the heading strong is a block — an inline <strong>Rs 710</strong> inside
   the sentence must stay inline or the amount jumps onto its own line. */
.lo-tynext__pay > div > strong { display: block; margin-bottom: 3px; }
.lo-tynext__pay > div > span { display: block; font-size: var(--lo-fs-sm); line-height: 1.65; color: var(--lo-body); }
.lo-tynext__pay > div > span strong { display: inline; color: var(--lo-green-900); }

.lo-tynext__actions { display: flex; flex-wrap: wrap; gap: var(--lo-s3); margin-bottom: var(--lo-s4); }
.lo-tynext__foot { margin: 0; font-size: var(--lo-fs-sm); color: var(--lo-muted); }

@media (max-width: 860px) {
	.lo-tynext__steps { grid-template-columns: minmax(0, 1fr); gap: var(--lo-s4); }
	.lo-tynext__actions .lo-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.lo-ty__ring, .lo-ty__tick { animation: none; stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   13. Show more of the catalogue on large screens.

   The best-sellers rail and the new-arrivals grid were capped at the 1320px
   container, so a 1900px monitor showed the same four cards as a 1400px one.
   -------------------------------------------------------------------------- */
@media (min-width: 1480px) {
	.lo-featured > .lo-container,
	.lo-arrivals > .lo-container {
		max-width: min(1680px, 94vw);
	}
}

@media (min-width: 1600px) {
	.lo-arrivals .lo-arrivals__grid,
	.lo-arrivals ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* Best sellers shows TWO rows on desktop instead of one sideways rail, so a
   screenful holds ten products rather than five.
   It is a plain static grid, NOT a horizontally scrolling one: a two-row
   `grid-auto-flow: column` track silently breaks `scrollBy()` in Chrome (the
   arrows stop working while direct scrollTo still moves), so the rail stays
   flex-and-scrollable only where it is actually used — below 1024px. */
@media (min-width: 1024px) {
	.lo-featured .lo-carousel__track,
	.lo-featured .lo-carousel__track.products {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--lo-s5);
		overflow: visible !important;
		scroll-snap-type: none;
		padding-inline: 0;
	}
	.lo-featured .lo-carousel__track > li,
	.lo-featured .lo-carousel__track > li.product {
		flex: none;
		width: auto;
		max-width: none;
		height: 100%;
	}
	/* The arrows have nothing to scroll once it is a static grid. */
	.lo-featured [data-lo-car-prev],
	.lo-featured [data-lo-car-next] { display: none !important; }
	.lo-featured .lo-carousel::after { content: none !important; }
}

@media (min-width: 1024px) and (max-width: 1339px) {
	.lo-featured .lo-carousel__track,
	.lo-featured .lo-carousel__track.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	/* 4 columns x 2 rows = 8; hide the tail so the grid never ends ragged. */
	.lo-featured .lo-carousel__track > *:nth-child(n + 9) { display: none; }
}

@media (min-width: 1340px) {
	/* 5 columns x 2 rows = 10. */
	.lo-featured .lo-carousel__track > *:nth-child(n + 11) { display: none; }
}

/* Carousel tracks animate via rAF in main.js, so they must not also inherit
   `scroll-behavior: smooth` from <html> — the two fight and the track ends up
   not moving at all. */
.lo-carousel__track { scroll-behavior: auto; }

/* --------------------------------------------------------------------------
   14. Shop sidebar + width.

   The filter cards shipped with `padding: 32px 32px 32px 0` — no left padding
   at all — so every heading and filter row sat flush against the card's own
   border. Symmetrical padding, and a little more room for the product grid on
   large screens.
   -------------------------------------------------------------------------- */
.lo-shop .lo-filter,
.lo-shop .lo-widget,
.lo-shop__inner .lo-filter,
.lo-shop__inner .lo-widget {
	padding: clamp(20px, 1.8vw, 28px) !important;
}

/* Heading + gold rule share the card's inner measure now. */
.lo-shop .lo-filter > *:first-child,
.lo-shop .lo-widget > *:first-child { margin-top: 0; }
.lo-shop .lo-filter > *:last-child,
.lo-shop .lo-widget > *:last-child { margin-bottom: 0; }

/* Filter rows: give them breathing room and a full-width hit area. */
.lo-shop .lo-filter li,
.lo-shop .lo-widget li { margin-bottom: 0; }
.lo-shop .lo-filter li > a,
.lo-shop .lo-widget li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lo-s3);
	padding-block: 10px;
	border-radius: var(--lo-r-sm);
	transition: color .2s var(--lo-ease), padding-left .25s var(--lo-ease);
}
.lo-shop .lo-filter li > a:hover,
.lo-shop .lo-widget li > a:hover { color: var(--lo-gold-700); padding-left: 4px; }

/* Wider shop on large screens — the grid was squeezed to ~200px cards. */
@media (min-width: 1440px) {
	.lo-shop > .lo-container,
	.lo-shop__inner {
		max-width: min(1600px, 95vw) !important;
	}
}

/* --------------------------------------------------------------------------
   15. Never let a decorative layer intercept clicks.
   -------------------------------------------------------------------------- */
.lo-ornament, .lo-phero__leaf, .lo-progress, .lo-hero__veil, .lo-phero__veil {
	pointer-events: none;
}