/* ==========================================================================
   Linda's Bake & Pack — custom shop styling
   --------------------------------------------------------------------------
   ADDED FILE. Not part of the Barista theme by Qode Interactive.

   All bespoke styling lives here so that no vendor stylesheet is edited.
   Loaded last (priority 100, see lbp_enqueue_custom_styles in functions.php)
   so it can override modules.min.css / woocommerce.min.css / style_dynamic.css
   without needing !important.

   Covers:  /shops/ · /shop/ · /product-category/* · /product/*
   ========================================================================== */

:root {
	--lbp-green: #1ea34f;
	--lbp-tile: #f2f2f2;              /* neutral grey behind product photos */
	--lbp-tile-hover: #ededed;
	--lbp-tile-line: #e7e7e7;
	--lbp-tile-line-hover: #dcdcdc;
	--lbp-ink: #30271c;
	--lbp-scrim: 20, 14, 8;
	--lbp-ease: cubic-bezier(.19, 1, .22, 1);
}

/* ==========================================================================
   1. Product grid — uniform tiles
   --------------------------------------------------------------------------
   The catalogue mixes JPEGs with baked-in white/grey backgrounds and PNGs with
   transparency, at many aspect ratios. Left alone the products float at
   different sizes on a white page and titles never line up across a row.
   A fixed square tile with a neutral ground normalises all of it, the way the
   original Barista demo grid does.
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .edgtf-product-list-image-wrapper {
	position: relative;
	background-color: var(--lbp-tile);
	border: 1px solid var(--lbp-tile-line);
	overflow: hidden;
	transition: background-color .35s ease, border-color .35s ease;
}

.woocommerce ul.products li.product:hover .edgtf-product-list-image-wrapper {
	background-color: var(--lbp-tile-hover);
	border-color: var(--lbp-tile-line-hover);
}

/* The image link becomes the square; the add-to-cart holder stays a sibling
   so the theme's own hover behaviour is untouched. */
.woocommerce ul.products li.product .edgtf-product-list-image-wrapper > a.woocommerce-LoopProduct-link {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
}

.woocommerce ul.products li.product .edgtf-product-list-image-wrapper > a.woocommerce-LoopProduct-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 9%;
	box-sizing: border-box;
	mix-blend-mode: multiply; /* hides the white box baked into many photos */
	transition: transform .6s var(--lbp-ease);
}

.woocommerce ul.products li.product:hover .edgtf-product-list-image-wrapper > a.woocommerce-LoopProduct-link img {
	transform: scale(1.06);
}

/* --- Add to cart --------------------------------------------------------
   The theme ships the reveal animation for this button only under
   `.edgtf-shop-masonry .edgtf-shop-product`. This shop does not use the
   masonry layout, so nothing ever un-hid it: the holder stayed
   `position: static` at 0px tall while the button inside it sat at
   translateY(50px), bleeding out of the card as a thin green sliver above
   every product title. Re-home it over the foot of the image tile and drive
   the reveal from the card itself.
   ------------------------------------------------------------------------ */

.woocommerce ul.products li.product .edgtf-add-to-cart-holder {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	z-index: 3;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity .3s ease, transform .4s var(--lbp-ease);
}

.woocommerce ul.products li.product:hover .edgtf-add-to-cart-holder,
.woocommerce ul.products li.product:focus-within .edgtf-add-to-cart-holder {
	opacity: 1;
	transform: translateY(0);
}

.woocommerce ul.products li.product .edgtf-add-to-cart-holder > a {
	position: absolute;
	inset: 0;
	transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 50px;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1;
}

/* The holder's 22px size is meant for the bag glyph, not the label. */
.woocommerce ul.products li.product .edgtf-add-to-cart-holder > a .edgtf-btn-text {
	font-size: 12px;
	letter-spacing: 2px;
}

.woocommerce ul.products li.product .edgtf-add-to-cart-holder > a [class*="edgtf-icon-font"] {
	font-size: 17px;
	line-height: 1;
}

/* Touch devices get no hover, so keep the button permanently visible. */
@media (hover: none) {
	.woocommerce ul.products li.product .edgtf-add-to-cart-holder {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Title and price sit on a shared baseline across the row ------------- */

.woocommerce ul.products li.product .edgtf-product-list-product-title {
	margin: 14px 0 2px;
	font-size: 15px;
	line-height: 1.3;
}

.woocommerce ul.products li.product .edgtf-product-list-product-title a {
	color: var(--lbp-ink);
	transition: color .25s ease;
}

.woocommerce ul.products li.product:hover .edgtf-product-list-product-title a {
	color: var(--lbp-green);
}

/* The price follows the title directly. It is deliberately NOT pinned to the
   bottom of the card: pinning aligned prices across a row but left an obvious
   hole under every single-line title. */
.woocommerce ul.products li.product .price {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--lbp-green);
}

/* A price range is two amounts plus a dash; keep it on one line so the card
   height stays predictable. */
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
	white-space: nowrap;
}

.woocommerce ul.products li.product {
	margin-bottom: 42px;
}

/* Cards are now their natural height, so a two-line title makes one card
   taller than its neighbours. WooCommerce marks the first card of each row;
   clearing it stops a tall card from snagging the next row's floats. */
.woocommerce ul.products li.product.first {
	clear: both;
}

/* --- Card alignment, normalised ----------------------------------------
   The homepage and /shops/ wrap their product grids in .lbp-featured-grid,
   and an inline <style> inside that page content centres the cards:

       .lbp-featured-grid ul.products li.product{text-align:center!important}

   Every other product surface (shop, category archives, related products)
   is left-aligned by the theme, so cards changed alignment as you moved
   around the site. Left wins here: it matches the theme default, the
   original Barista demo, and the majority of pages.

   That rule lives in the page content rather than a stylesheet, so it cannot
   be edited from the theme; it is also !important and appears later in the
   document than this file. Overriding it therefore needs both !important and
   a higher specificity (4 classes vs 3) - hence the doubled .product.
   ------------------------------------------------------------------------ */

.lbp-featured-grid ul.products li.product.product,
.woocommerce .lbp-featured-grid ul.products li.product {
	text-align: left !important;
}

/* --- Sale badge ---------------------------------------------------------- */

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 5px 12px;
	border-radius: 0;
	background-color: var(--lbp-green);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	line-height: 1.6;
}

/* --- Keyboard focus ------------------------------------------------------ */

.woocommerce ul.products li.product a:focus-visible {
	outline: 2px solid var(--lbp-green);
	outline-offset: 3px;
}

/* ==========================================================================
   2. Category tiles on /shops/
   --------------------------------------------------------------------------
   White category names were sitting straight on busy photography — legible on
   the dark chocolate shot, invisible on the white premix and sprinkles shots.
   A bottom-weighted scrim fixes contrast on every image without hiding it.
   ========================================================================== */

/* The tile is a fixed 2:1 frame. The image is absolutely filled into it so the
   photo always covers the whole tile — otherwise the title, which sits in
   normal flow inside the link, adds height the image does not cover and the
   scrim paints a bare strip across the bottom. */
.qodef-addons-woo-shortcode .qodef-e.product-category > a {
	position: relative;
	display: block;
	overflow: hidden;
	/* 2:1 made squat 347x173 strips with 35px type crammed across them.
	   4:3 gives the photography room and the label somewhere to sit. */
	aspect-ratio: 4 / 3;
}

.qodef-addons-woo-shortcode .qodef-e.product-category > a img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qodef-addons-woo-shortcode .qodef-e.product-category > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Weighted to the lower half: the photograph stays readable at the top
	   while the label sits on solid tone at the bottom. */
	background: linear-gradient(180deg,
		rgba(var(--lbp-scrim), 0) 0%,
		rgba(var(--lbp-scrim), .06) 40%,
		rgba(var(--lbp-scrim), .48) 74%,
		rgba(var(--lbp-scrim), .82) 100%);
	transition: background .45s ease;
	pointer-events: none;
}

.qodef-addons-woo-shortcode .qodef-e.product-category:hover > a::after {
	background: linear-gradient(180deg,
		rgba(var(--lbp-scrim), .12) 0%,
		rgba(var(--lbp-scrim), .26) 40%,
		rgba(var(--lbp-scrim), .62) 74%,
		rgba(var(--lbp-scrim), .88) 100%);
}

.qodef-addons-woo-shortcode .qodef-e.product-category img {
	transition: transform .7s var(--lbp-ease);
}

.qodef-addons-woo-shortcode .qodef-e.product-category:hover img {
	transform: scale(1.07);
}

/* Label pinned bottom-left, above the scrim — reads as a category card
   rather than a caption stamped across the middle of a photo. */
.qodef-addons-woo-shortcode .qodef-e.product-category .qodef-e-title,
.qodef-addons-woo-shortcode .qodef-e.product-category .woocommerce-loop-category__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	z-index: 2;
	/* the shortcode centres the label with translate(-50%,-50%); that offset
	   would drag it off-frame now that it is pinned edge to edge */
	transform: none;
	margin: 0;
	padding: 0 26px 22px;
	font-size: 24px;
	line-height: 1.2;
	text-align: left;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .5);
}

/* A rule that draws itself in on hover, giving the card a clear affordance
   without adding markup. */
.qodef-addons-woo-shortcode .qodef-e.product-category .qodef-e-title::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-top: 12px;
	background-color: var(--lbp-green);
	transition: width .45s var(--lbp-ease);
}

.qodef-addons-woo-shortcode .qodef-e.product-category:hover .qodef-e-title::after {
	width: 52px;
}

/* ==========================================================================
   2b. Image gallery ("In and around Linda's")
   --------------------------------------------------------------------------
   The theme's masonry gallery carries a -16px margin on the wrapper, which is
   the usual negative-margin/gutter pair — but the items are set to
   `padding: 0`, so no gutter was ever produced and every photo butted against
   its neighbours in one solid block. The negative margin with nothing to
   cancel also dragged the grid ~7px outside its container.

   Items are absolutely positioned by the theme's masonry script and are
   border-box, so padding shrinks them in place: gutters appear with no
   re-layout needed. The wrapper's negative margin is matched to the padding
   so the outer edges stay flush.
   ========================================================================== */

/* Ten same-shaped squares of shelving read as wallpaper - nothing leads the
   eye. This replaces the theme's equal-tile masonry with a mosaic: two
   double-size feature tiles set against landscape singles.

   The theme's script positions each tile with inline `position:absolute` plus
   inline left/top/width, and sets an inline height on the wrapper. Stylesheet
   !important outranks inline styles that carry no !important of their own, so
   the grid below takes over cleanly and survives the script re-running on
   resize. */

.edgtf-image-gallery-masonry {
	position: static !important;
	height: auto !important;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(140px, 15vw, 230px);
	gap: 14px;
}

/* The script's measuring element is the wrapper's first child and would
   otherwise consume a grid cell, pushing the first photo into column 2. */
.edgtf-image-gallery-masonry .edgtf-image-masonry-grid-sizer {
	display: none;
}

.edgtf-image-gallery-masonry .edgtf-gallery-image {
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: auto !important;
	height: auto !important;
	padding: 0;
}

/* Feature tiles. With 10 images in 4 columns, doubling the 1st and 8th fills
   exactly 16 cells (4 rows) with no ragged tail.
   Indices are offset by one: the grid sizer above is child 1, so the first
   photo is child 2 and the eighth is child 9. */
.edgtf-image-gallery-masonry .edgtf-gallery-image:nth-child(2),
.edgtf-image-gallery-masonry .edgtf-gallery-image:nth-child(9) {
	grid-column: span 2;
	grid-row: span 2;
}

.edgtf-image-gallery-masonry .edgtf-gallery-image-inner {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
	background-color: var(--lbp-tile);
}

.edgtf-image-gallery-masonry .edgtf-gallery-image-inner a {
	display: block;
	width: 100%;
	height: 100%;
}

.edgtf-image-gallery-masonry .edgtf-gallery-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--lbp-ease);
}

.edgtf-image-gallery-masonry .edgtf-gallery-image:hover img {
	transform: scale(1.06);
}

@media only screen and (max-width: 1024px) {
	.edgtf-image-gallery-masonry {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(130px, 24vw, 210px);
		gap: 10px;
	}
}

@media only screen and (max-width: 680px) {
	/* Two even columns: at this width a double tile would span the full
	   width and break the rhythm. Indices match the offset above. */
	.edgtf-image-gallery-masonry .edgtf-gallery-image:nth-child(2),
	.edgtf-image-gallery-masonry .edgtf-gallery-image:nth-child(9) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* ==========================================================================
   2c. Shop landing page (/shops/)
   --------------------------------------------------------------------------
   Scoped to body:has(.qodef-qi-woo-product-category-list) throughout so no other page is affected.

   Elementor writes this page's spacing into its own generated stylesheet
   (uploads/elementor/css/post-*.css) at high specificity and unknown load
   order relative to this file, so the spacing overrides below need
   !important. They are the only ones in this section.
   ========================================================================== */

/* --- Title banner --------------------------------------------------------
   "Shop" was 33px of white type sitting directly on a busy, bright photo of
   the counter - close to illegible. A scrim plus a larger title fixes it
   without touching the title area on any other page. */

body:has(.qodef-qi-woo-product-category-list) .edgtf-title::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(var(--lbp-scrim), .25) 0%,
		rgba(var(--lbp-scrim), .48) 100%);
	pointer-events: none;
}

body:has(.qodef-qi-woo-product-category-list) .edgtf-title .edgtf-title-holder {
	position: relative;
	z-index: 2;
}

body:has(.qodef-qi-woo-product-category-list) .edgtf-title h1 {
	font-size: 46px;
	letter-spacing: 1px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

/* --- Hero ----------------------------------------------------------------
   The page opened with the word "shop" three times in the first screen:

       "Shop"                (banner title)
       "SHOP"                (eyebrow, 300px below the banner)
       "SHOP BY CATEGORIES"  (band)

   plus a 120px white gap splitting the banner from the copy that belongs to
   it, so the hero read as three disconnected strips rather than one block.

   Fixed by removing the duplicate, giving the banner real presence, and
   closing the gap so image + statement read as a single hero.
   ------------------------------------------------------------------------ */

/* The eyebrow is literally the banner's own title repeated. Hidden, not
   deleted - the text is untouched in the page content, and restoring it is
   one line. Scoped with :first-of-type so the "LINDA'S BAKE & PACK" eyebrow
   further down the page is unaffected (verified: matches exactly 1). */
body:has(.qodef-qi-woo-product-category-list) .elementor-top-section:first-of-type
	.elementor-widget:has(+ .elementor-widget h2) p {
	display: none;
}

/* A 320px strip carrying one word is not a hero. */
body:has(.qodef-qi-woo-product-category-list) .edgtf-title {
	height: 440px !important;
}

body:has(.qodef-qi-woo-product-category-list) .edgtf-title h1 {
	font-size: 62px;
}

/* Close the 120px gap so the welcome statement belongs to the image above it.
   The gap is padding-top on the theme's full-width content wrapper. */
body:has(.qodef-qi-woo-product-category-list) .edgtf-full-width-inner {
	padding-top: 0 !important;
}

body:has(.qodef-qi-woo-product-category-list) .elementor-top-section:first-of-type
	.elementor-widget-wrap {
	padding-top: 54px !important;
}

/* --- Heading hierarchy ---------------------------------------------------
   The top of this page stacked four heading-scale elements, and the order of
   importance was inverted:

       "Shop"                (banner H1)   46px
       "SHOP"                (eyebrow)     18px  <- same word as the banner
       "Welcome to the ..."  (H2)          35px  <- the actual page statement
       "SHOP BY CATEGORIES"  (band)        55px  <- biggest text on the page

   A section label was outranking both the page title and the page's own
   heading, so nothing read as primary and it looked like three headings in a
   row. Restored to a clean descent: 46 -> 12 (kicker) -> 40 -> 30.

   Selectors are structural rather than Elementor element ids, so they survive
   the page being re-edited. Verified to match exactly 2 / 2 / 1 elements.
   ------------------------------------------------------------------------ */

/* Eyebrows ("SHOP", "LINDA'S BAKE & PACK") become kickers, not headings. */
body:has(.qodef-qi-woo-product-category-list) .elementor-widget:has(+ .elementor-widget h2) p {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	line-height: 1.6;
}

/* The two section headings carry the page. */
body:has(.qodef-qi-woo-product-category-list) .wpb_wrapper h2 {
	font-size: 40px;
	line-height: 1.15;
}

/* --- "Shop by categories" band ------------------------------------------
   White 55px type sat straight on a bright photo of muffin tins with no
   scrim, so the heading and its two lines of copy washed out. There is
   exactly one .edgtf-custom-font-holder on the page, which makes this
   selector unambiguous without relying on Elementor's generated element id. */

/* Full-bleed: the band's photograph was boxed inside the 1100px column,
   reading as a floating grey card. Edge to edge it becomes a real section
   divider. The container's max-width is lifted and the copy is re-centred
   with symmetric padding, so the text still lines up with the 1100px grid. */
body:has(.qodef-qi-woo-product-category-list) .elementor-top-section:has(.edgtf-custom-font-holder) > .elementor-container {
	max-width: 100% !important;
	width: 100% !important;
}

body:has(.qodef-qi-woo-product-category-list) .elementor-widget-wrap:has(.edgtf-custom-font-holder) {
	position: relative;
	padding-top: 92px !important;
	padding-bottom: 96px !important;
	padding-left: max(24px, calc((100% - 1100px) / 2)) !important;
	padding-right: max(24px, calc((100% - 1100px) / 2)) !important;
	background-position: center !important;
}

body:has(.qodef-qi-woo-product-category-list) .elementor-widget-wrap:has(.edgtf-custom-font-holder)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg,
		rgba(var(--lbp-scrim), .52) 0%,
		rgba(var(--lbp-scrim), .62) 100%);
	pointer-events: none;
}

body:has(.qodef-qi-woo-product-category-list) .elementor-widget-wrap:has(.edgtf-custom-font-holder) > * {
	position: relative;
	z-index: 1;
}

/* 55px made this the largest text on the page, above even the page title.
   It labels a section, so it sits below the H2s. */
body:has(.qodef-qi-woo-product-category-list) .edgtf-custom-font-holder {
	font-size: 30px !important;
	line-height: 1.25 !important;
	letter-spacing: 1.5px;
}

/* --- Vertical rhythm -----------------------------------------------------
   The page carried ~100px of dead air at three joins, which made it read as
   disconnected blocks rather than one page. */

/* 100px margin above the category tiles. */
body:has(.qodef-qi-woo-product-category-list) .elementor-widget-container:has(> .qodef-addons-woo-shortcode) {
	margin-top: 45px !important;
}

/* Section wrapping the category tiles: 50px top and bottom. */
body:has(.qodef-qi-woo-product-category-list) .elementor-top-section:has(.qodef-addons-woo-shortcode) {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

/* The "Featured products" heading block: 100px top / 50px bottom.
   There is exactly one .e-con-inner on this page. */
body:has(.qodef-qi-woo-product-category-list) .e-con-inner {
	padding-top: 55px !important;
	padding-bottom: 28px !important;
}

/* --- Category grid: bento -------------------------------------------------
   A flat 3x3 of identically sized tiles is what made this read as a template.
   Four columns with the first category doubled gives the block a focal point
   and an asymmetric rhythm, and the maths is exact: 4 cells for the feature
   plus 8 singles = 12 cells = 3 full rows, no ragged tail.

   The shortcode's own column rules are specific, hence !important. */

body:has(.qodef-qi-woo-product-category-list) .qodef-qi-woo-product-category-list .qodef-grid-inner {
	grid-template-columns: repeat(4, 1fr) !important;
	grid-auto-rows: clamp(155px, 13.5vw, 205px) !important;
	gap: 16px !important;
}

body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

/* Tiles now take their height from the grid row, not a fixed ratio. */
body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category > a {
	aspect-ratio: auto !important;
	height: 100%;
}

/* The feature tile is four times the area, so it carries a larger label. */
body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category:nth-child(1) .qodef-e-title {
	font-size: 32px;
	padding: 0 32px 28px;
}

/* --- Category grid responsiveness ---------------------------------------
   The shortcode is configured 3-across at EVERY breakpoint
   (qodef-col-num--680--3, --480--3), which on a 390px screen produced
   80x60px tiles with a 24px label overflowing them. */

@media only screen and (max-width: 1024px) {
	body:has(.qodef-qi-woo-product-category-list) .qodef-qi-woo-product-category-list .qodef-grid-inner {
		grid-template-columns: repeat(2, 1fr) !important;
		grid-auto-rows: clamp(150px, 22vw, 200px) !important;
		gap: 14px !important;
	}

	/* A 2x2 feature would swallow a whole screen; keep it wide but shallow. */
	body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category:nth-child(1) {
		grid-column: span 2;
		grid-row: span 1;
	}

	body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category:nth-child(1) .qodef-e-title {
		font-size: 26px;
		padding: 0 24px 20px;
	}
}

@media only screen and (max-width: 680px) {
	body:has(.qodef-qi-woo-product-category-list) .qodef-qi-woo-product-category-list .qodef-grid-inner {
		grid-template-columns: 1fr !important;
		grid-auto-rows: clamp(180px, 56vw, 240px) !important;
		gap: 14px !important;
	}

	/* Single column: every tile is already full width. */
	body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category:nth-child(1) {
		grid-column: span 1;
		grid-row: span 1;
	}

	body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category .qodef-e-title,
	body:has(.qodef-qi-woo-product-category-list) .qodef-e.product-category:nth-child(1) .qodef-e-title {
		font-size: 22px;
		padding: 0 20px 18px;
	}

	body:has(.qodef-qi-woo-product-category-list) .elementor-widget-wrap:has(.edgtf-custom-font-holder) {
		padding-top: 44px !important;
		padding-bottom: 46px !important;
	}
}

@media only screen and (max-width: 680px) {
	body:has(.qodef-qi-woo-product-category-list) .edgtf-title h1 {
		font-size: 30px;
	}

	/* 440px was 52% of a 844px screen before any content appeared. */
	body:has(.qodef-qi-woo-product-category-list) .edgtf-title {
		height: 300px !important;
	}

	body:has(.qodef-qi-woo-product-category-list) .elementor-top-section:first-of-type
		.elementor-widget-wrap {
		padding-top: 36px !important;
	}

	/* 40px wrapped to three lines in a 300px column. */
	body:has(.qodef-qi-woo-product-category-list) .wpb_wrapper h2 {
		font-size: 26px;
	}

	body:has(.qodef-qi-woo-product-category-list) .edgtf-custom-font-holder {
		font-size: 22px !important;
	}

	body:has(.qodef-qi-woo-product-category-list) .elementor-widget-container:has(> .qodef-addons-woo-shortcode) {
		margin-top: 26px !important;
	}

	body:has(.qodef-qi-woo-product-category-list) .e-con-inner {
		padding-top: 34px !important;
		padding-bottom: 18px !important;
	}
}

/* ==========================================================================
   3. Single product page
   ========================================================================== */

/* Match the gallery to the grid tiles so the product reads as one system.
   This theme renders the gallery as `.images`, not `.woocommerce-product-gallery`. */
.woocommerce div.product .images .woocommerce-product-gallery__image,
.woocommerce div.product .images a,
.woocommerce div.product .images img {
	background-color: var(--lbp-tile);
}

.woocommerce div.product .images .woocommerce-product-gallery__image,
.woocommerce div.product .images > a {
	display: block;
	border: 1px solid var(--lbp-tile-line);
}

/* Same trick as the grid cards: most catalogue photos carry a baked-in white
   box, which would otherwise sit as a white slab on the grey tile. */
.woocommerce div.product .images img {
	mix-blend-mode: multiply;
}

/* --- Breadcrumb ---------------------------------------------------------
   Rendered by lbp_pdp_breadcrumb() in functions.php. Quiet by design: it is
   orientation, not a headline.
   ------------------------------------------------------------------------ */

.lbp-pdp-breadcrumb {
	margin-top: 34px;
	margin-bottom: -18px;
}

.lbp-pdp-breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	color: #9a9a9a;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: .2px;
}

.lbp-pdp-breadcrumb .woocommerce-breadcrumb a {
	color: #7d7d7d;
	transition: color .25s ease;
}

.lbp-pdp-breadcrumb .woocommerce-breadcrumb a:hover {
	color: var(--lbp-green);
}

/* Shared by the product page and the shop/category archives. */
.lbp-crumb-sep {
	display: inline-block;
	margin: 0 9px;
	color: #d0d0d0;
}

/* --- Availability -------------------------------------------------------
   Rendered by lbp_pdp_stock_status(); reflects real WooCommerce stock state.
   ------------------------------------------------------------------------ */

.woocommerce div.product .summary .lbp-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -18px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.woocommerce div.product .summary .lbp-stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

.woocommerce div.product .summary .lbp-stock--in {
	color: var(--lbp-green);
}

.woocommerce div.product .summary .lbp-stock--out {
	color: #b4433a;
}

/* --- Product row layout -------------------------------------------------
   The gallery is 471px tall and the summary only 352px, because these
   products carry no description. As two floated columns that left a 119px
   void hanging under the buy box. Flexing the row lets the summary sit
   optically centred against the gallery instead.

   The wrapper also contains the tabs, so the row must wrap and the tabs
   must claim a full line of their own.
   ------------------------------------------------------------------------ */

@media only screen and (min-width: 1025px) {
	.woocommerce div.product.edgtf-single-product-wrapper-top {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 4%;
	}

	.woocommerce div.product.edgtf-single-product-wrapper-top > .edgtf-single-product-images {
		width: 47%;
		float: none;
		margin: 0;
	}

	.woocommerce div.product.edgtf-single-product-wrapper-top > .edgtf-single-product-summary {
		width: 49%;
		float: none;
		margin: 0;
	}

	.woocommerce div.product.edgtf-single-product-wrapper-top > .woocommerce-tabs {
		width: 100%;
	}
}

/* --- Summary: give the page a real heading ------------------------------
   There is no page-title area on this template, so the product name is the
   page's H1 in everything but tag. At 22px it did not read as one. */

.woocommerce div.product .summary .edgtf-single-product-title {
	margin: 0 0 12px;
	font-size: 30px;
	line-height: 1.2;
}

.woocommerce div.product .summary p.price,
.woocommerce div.product .summary > .price {
	margin: 0 0 28px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--lbp-green);
}

.woocommerce div.product .summary p.price del {
	margin-right: 10px;
	font-size: 19px;
	font-weight: 400;
	opacity: .55;
}

/* --- Variation swatches --------------------------------------------------
   Built by assets/js/custom.js. The native <select> stays in the DOM and
   remains the source of truth; it is only visually hidden, so WooCommerce
   still drives price, stock and the Add to cart button.
   ------------------------------------------------------------------------ */

.woocommerce div.product .variations .lbp-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.woocommerce div.product .variations .lbp-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.woocommerce div.product .variations .lbp-swatch {
	min-width: 58px;
	padding: 9px 16px;
	border: 1px solid var(--lbp-tile-line);
	border-radius: 4px;
	background-color: #fff;
	color: var(--lbp-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .3px;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.woocommerce div.product .variations .lbp-swatch:hover:not(:disabled) {
	border-color: var(--lbp-green);
	color: var(--lbp-green);
}

.woocommerce div.product .variations .lbp-swatch.is-active {
	border-color: var(--lbp-green);
	color: var(--lbp-green);
	box-shadow: inset 0 0 0 1px var(--lbp-green);
}

.woocommerce div.product .variations .lbp-swatch:focus-visible {
	outline: 2px solid var(--lbp-green);
	outline-offset: 2px;
}

/* WooCommerce disables combinations that cannot be bought. */
.woocommerce div.product .variations .lbp-swatch.is-unavailable {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* The attribute label reads as a field label above the pills. */
.woocommerce div.product .variations th.label label {
	display: block;
	margin-bottom: 10px;
	color: #8a8a8a;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .4px;
}

/* The stock table layout fights a pill row; stack label over swatches. */
.woocommerce div.product .variations,
.woocommerce div.product .variations tbody,
.woocommerce div.product .variations tr,
.woocommerce div.product .variations th,
.woocommerce div.product .variations td {
	display: block;
	width: auto;
	border: 0;
	padding: 0;
	text-align: left;
	/* the theme shades table cells; as blocks that became a full-width bar */
	background: none;
}

.woocommerce div.product .variations tr + tr {
	margin-top: 20px;
}

/* --- Buy now -------------------------------------------------------------
   Rendered by lbp_buy_now_button(). Secondary to Add to cart: outlined, so
   the primary action still leads.
   ------------------------------------------------------------------------ */

.woocommerce div.product form.cart .lbp-buy-now {
	margin-left: 10px;
	padding: 0 30px;
	height: 53px;
	border: 2px solid var(--lbp-green);
	border-radius: 0;
	background-color: transparent;
	color: var(--lbp-green);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.woocommerce div.product form.cart .lbp-buy-now:hover {
	background-color: var(--lbp-green);
	color: #fff;
}

.woocommerce div.product form.cart .lbp-buy-now:focus-visible {
	outline: 2px solid var(--lbp-green);
	outline-offset: 3px;
}

/* On a variable product the button is a sibling of the theme's
   .variations_button rather than inside it, so the wrap is flexed to put
   quantity, Add to cart and Buy now on one line with the price above. */
.woocommerce div.product .single_variation_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.woocommerce div.product .single_variation_wrap > .woocommerce-variation {
	flex: 1 0 100%;
}

.woocommerce div.product .single_variation_wrap .variations_button {
	display: flex;
	align-items: center;
}

/* --- The buy row on small screens ---------------------------------------
   Below 1025px the summary is a ~376px column and quantity + Add to cart +
   Buy now no longer fit on one line. As floats and inline-blocks Buy now
   simply wrapped, and its 10px left margin then left it indented under the
   quantity box rather than aligned with the column. Flexing the row lets
   whatever does not fit take a full-width line of its own instead.
   ------------------------------------------------------------------------ */

@media only screen and (max-width: 1024px) {
	/* On a simple product the controls are direct children of the form.
	   Variable products are excluded here: their form also holds the
	   attribute table, and flexing it would break those rows. Their own
	   wrapper, .single_variation_wrap, is flexed instead. */
	.woocommerce div.product form.cart:not(.variations_form),
	.woocommerce div.product .single_variation_wrap,
	.woocommerce div.product .single_variation_wrap .variations_button {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	.woocommerce div.product form.cart .quantity {
		flex: 0 0 auto;
		margin-right: 0;
	}

	/* Share the line when both fit; take the whole of the next one when
	   they do not. The 175px basis is the point below which the button
	   labels would start to wrap. */
	.woocommerce div.product form.cart .single_add_to_cart_button,
	.woocommerce div.product form.cart .lbp-buy-now {
		flex: 1 1 175px;
		margin-left: 0;
	}

	/* Quantity + Add to cart travel together; Buy now is their sibling. */
	.woocommerce div.product .single_variation_wrap .variations_button {
		flex: 1 1 auto;
	}
}

@media only screen and (max-width: 680px) {
	/* On a phone the column is ~300px and 14px/35px padding made the button
	   187px wide at its narrowest, which is 6px more than the room left
	   beside the quantity box - so it wrapped and quantity sat alone on a
	   line of its own. Trimming the side padding keeps the pair together. */
	.woocommerce div.product form.cart .single_add_to_cart_button {
		flex: 1 1 140px;
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* --- Gallery thumbnails --------------------------------------------------
   75 of the 330 products carry extra gallery images. The theme renders them
   as a plain row; these match them to the main image's tile treatment.
   ------------------------------------------------------------------------ */

.woocommerce div.product .images .thumbnails,
.woocommerce div.product .images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .images .thumbnails > *,
.woocommerce div.product .images .flex-control-thumbs > li {
	flex: 0 0 calc(25% - 8px);
	margin: 0;
	padding: 0;
	width: auto;
	list-style: none;
}

.woocommerce div.product .images .thumbnails img,
.woocommerce div.product .images .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--lbp-tile-line);
	background-color: var(--lbp-tile);
	mix-blend-mode: multiply;
	opacity: 1;
	cursor: pointer;
	transition: border-color .25s ease;
}

.woocommerce div.product .images .thumbnails img:hover,
.woocommerce div.product .images .flex-control-thumbs img:hover,
.woocommerce div.product .images .flex-control-thumbs .flex-active {
	border-color: var(--lbp-green);
}

/* --- SKU / category block ------------------------------------------------ */

/* No border here: the theme already draws one under form.cart, and adding a
   second produced two rules 28px apart. */
.woocommerce div.product .product_meta {
	margin-top: 22px;
	font-size: 14px;
	line-height: 1.9;
}

/* 60px between the price and the cart row left the summary feeling loose. */
.woocommerce div.product .summary form.cart {
	margin-top: 32px;
	padding-bottom: 22px;
}

.woocommerce div.product .product_meta > span {
	display: block;
}

.woocommerce div.product .product_meta .edgtf-meta-wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
	color: #8a8a8a;
}

.woocommerce div.product .product_meta .sku,
.woocommerce div.product .product_meta a {
	color: var(--lbp-ink);
}

.woocommerce div.product .product_meta a:hover {
	color: var(--lbp-green);
}

/* The summary column is short (title, price, cart, SKU) which left a large
   void before the tabs. Pull the following blocks up. */
.woocommerce div.product .woocommerce-tabs {
	padding-top: 18px;
}

/* --- Tabs ---------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin-bottom: 26px;
}

/* --- Review form --------------------------------------------------------- */

/* With no reviews on the catalogue this form is the tallest thing on the
   page. Group it into a quiet panel so it reads as secondary. */
.woocommerce div.product #review_form_wrapper #respond {
	padding: 30px;
	border: 1px solid var(--lbp-tile-line);
	background-color: #fafafa;
}

.woocommerce div.product #review_form_wrapper #respond .comment-reply-title {
	display: block;
	margin-bottom: 4px;
}

/* --- Related ------------------------------------------------------------- */

.woocommerce div.product .related.products > h2,
.woocommerce div.product .related.products > h4 {
	margin-bottom: 28px;
}

.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	padding-top: 20px;
}

/* Centre the whole tab panel. Constraining only the review form left the
   heading and "no reviews yet" hanging left of a centred tab. */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Responsive ---------------------------------------------------------
   assets/css/woocommerce-responsive.css stacks the gallery over the summary
   at 768px. Left alone the photo then took the full 600px column and stood
   610px tall, which pushed the product name, price and Add to cart below the
   fold on a tablet - the buy box was only reachable by scrolling.
   ------------------------------------------------------------------------ */

@media only screen and (max-width: 768px) {
	/* modules-responsive.css sizes the container in fixed steps - 600px,
	   then 420px, then a rigid 300px below 480. On a 390px phone that left
	   the whole page in a 300px column with 38px of dead gutter either
	   side, which is why the breadcrumb wrapped and everything felt
	   pinched. Scoped to the product page so the rest of the site keeps
	   the layout it was built with. */
	body.single-product .edgtf-content .edgtf-container-inner {
		width: auto;
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Centred in that wider column rather than stretched. The theme floats
	   this block and lays it out as an inline-block, and neither of those
	   lets auto side margins centre anything. */
	.woocommerce div.product .edgtf-single-product-images {
		display: block;
		float: none;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	/* The tabs are centred inline-blocks. Three of them no longer fit on
	   one line here, so they broke into a ragged stack of three different
	   widths, each centred on its own. Give each a full-width line. */
	.woocommerce div.product .woocommerce-tabs ul.tabs li,
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		display: block;
		width: 100%;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 12px 0;
	}

	/* Centred body copy needs a long measure to hold together; over ~40
	   characters it reads as a ragged diamond. Left-align it here.
	   woocommerce.css centres it with `.edgtf-tab-container:not(#tab-reviews)`,
	   which carries the specificity of an ID. Repeating that exact selector
	   ties on weight, so source order decides and this wins. */
	.edgtf-single-product-wrapper-top .edgtf-tabs.edgtf-horizontal-tab .edgtf-tab-container:not(#tab-reviews) {
		text-align: left;
	}

	/* Related products ran one per row, so four of them added ~1700px of
	   scroll to a page whose own content is 1300px. The theme lays these
	   out as floats of a fixed width; a grid ignores that arithmetic and
	   cannot snag on uneven card heights. */
	.woocommerce .related.products ul.products,
	.woocommerce .upsells.products ul.products {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 16px;
	}

	.woocommerce .related.products ul.products li.product,
	.woocommerce .upsells.products ul.products li.product {
		float: none;
		width: auto;
		margin: 0;
	}
}

@media only screen and (max-width: 1024px) {
	/* custom.js leaves the native select in place past 25 options; at its
	   natural width it sat as a short stub against a full-width column. */
	.woocommerce div.product .variations select {
		width: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   4. Archive chrome — result count, ordering, pagination
   ========================================================================== */

/* --- Archive breadcrumb -------------------------------------------------- */

.lbp-shop-breadcrumb {
	margin: 0 0 22px;
}

.lbp-shop-breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	color: #9a9a9a;
	font-size: 13px;
	line-height: 1.6;
}

.lbp-shop-breadcrumb .woocommerce-breadcrumb a {
	color: #7d7d7d;
	transition: color .25s ease;
}

.lbp-shop-breadcrumb .woocommerce-breadcrumb a:hover {
	color: var(--lbp-green);
}

/* --- Category filter ----------------------------------------------------
   Rendered by lbp_shop_category_nav(). 330 products over 28 pages had no
   way to narrow down before this.
   ------------------------------------------------------------------------ */

.lbp-shop-filter {
	margin: 0 0 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lbp-tile-line);
}

.lbp-shop-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbp-shop-filter__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbp-shop-filter__link {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--lbp-tile-line);
	background-color: #fff;
	color: var(--lbp-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.4;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.lbp-shop-filter__link:hover {
	border-color: var(--lbp-green);
	color: var(--lbp-green);
}

.lbp-shop-filter__link.is-active {
	border-color: var(--lbp-green);
	background-color: var(--lbp-green);
	color: #fff;
}

.lbp-shop-filter__count {
	font-size: 11px;
	font-weight: 400;
	color: #9a9a9a;
}

.lbp-shop-filter__link:hover .lbp-shop-filter__count {
	color: var(--lbp-green);
}

.lbp-shop-filter__link.is-active .lbp-shop-filter__count {
	color: rgba(255, 255, 255, .75);
}

@media only screen and (max-width: 680px) {
	.lbp-shop-filter {
		margin-bottom: 22px;
		padding-bottom: 18px;
	}

	.lbp-shop-filter__link {
		padding: 7px 12px;
		font-size: 12px;
	}
}

/* --- Result count / ordering bar ----------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 34px;
}

/* Trim the dead space the float grid leaves above the pagination bar. */
.woocommerce nav.woocommerce-pagination,
.woocommerce .edgtf-pagination {
	margin-top: 10px;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media only screen and (max-width: 1024px) {
	.woocommerce ul.products li.product .edgtf-product-list-product-title {
		font-size: 15px;
		min-height: 2.8em;
	}
}

@media only screen and (max-width: 680px) {
	.woocommerce ul.products li.product .edgtf-product-list-product-title {
		min-height: 0;        /* single column: no need to reserve two lines */
		margin-top: 14px;
	}

	.woocommerce ul.products li.product {
		margin-bottom: 32px;
	}

	/* 30px/26px are sized for a half-width summary column, not a 300px one. */
	.woocommerce div.product .summary .edgtf-single-product-title {
		font-size: 24px;
	}

	.woocommerce div.product .summary p.price,
	.woocommerce div.product .summary > .price {
		margin-bottom: 22px;
		font-size: 22px;
	}

	.woocommerce div.product #review_form_wrapper #respond {
		padding: 20px;
	}

	.qodef-addons-woo-shortcode .qodef-e.product-category > a::after {
		background: linear-gradient(180deg,
			rgba(var(--lbp-scrim), .20) 0%,
			rgba(var(--lbp-scrim), .65) 100%);
	}
}

/* ==========================================================================
   6. Footer
   --------------------------------------------------------------------------
   Not strictly the shop, but it is the bottom half of every product page and
   it never collapsed on a phone: four columns stayed four columns at 375px,
   so the opening-hours table, the address and the menu overlapped each other
   into an unreadable block.

   The theme does ship a fix - `.edgtf-four-columns .edgtf-column {width:100%}`
   at 768px in modules-responsive.css. It loses to the theme-options inline
   <style> in the document head, which hard-codes the footer's own 20/26.66
   split as `width: 26.66% !important`, with no media query at all. Nothing
   loaded later outranks an !important declaration without one of its own, so
   this is the one rule here that needs one. The extra `.edgtf-footer-inner`
   breaks the specificity tie: that inline block is printed after this file
   and would otherwise win it on source order. Confined to the widths the
   inline rule was never written for - above 768px the theme's own split is
   left alone.
   ========================================================================== */

@media only screen and (max-width: 768px) {
	.edgtf-footer-inner .edgtf-footer-top-holder .edgtf-footer-top .edgtf-four-columns .edgtf-column {
		width: 100% !important;
		float: none;
	}

	.edgtf-footer-inner .edgtf-footer-top-holder .edgtf-footer-top .edgtf-four-columns .edgtf-column + .edgtf-column {
		margin-top: 34px;
	}

	/* The container is a fixed-width step here too (300px under 480), which
	   left the address and the opening hours in a narrow ribbon. The theme
	   sets this container's padding as a shorthand on
	   `footer .edgtf-footer-top:not(.edgtf-footer-top-full) .edgtf-container-inner`,
	   so the side padding has to be re-stated at that weight or the rows sit
	   flush against both edges of the screen. */
	footer .edgtf-footer-inner .edgtf-footer-top-holder .edgtf-container-inner,
	footer .edgtf-footer-inner .edgtf-footer-bottom-holder .edgtf-container-inner {
		width: auto;
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* .edgtf-four-columns-inner carries a -15px side margin that pairs with
	   15px of column padding. Once the columns are full width that pair has
	   nothing to cancel against, and every footer row bled 15px past both
	   edges of the screen - which is why the address sat flush to the left
	   edge while the gutter above it was 20px. */
	.edgtf-footer-top-holder .edgtf-four-columns > .edgtf-four-columns-inner {
		margin-left: 0;
		margin-right: 0;
	}

	.edgtf-footer-top-holder .edgtf-four-columns .edgtf-column .edgtf-column-inner {
		padding-left: 0;
		padding-right: 0;
	}

	/* A plain media widget, so it took the whole column: 350px, three times
	   the size of the same logo in the header. */
	.edgtf-footer-top-holder .widget_media_image img {
		max-width: 200px;
		height: auto;
	}
}

/* ==========================================================================
   7. Homepage gallery — "In and around Linda's"
   --------------------------------------------------------------------------
   The edgtf_image_gallery widget lays 10 shop photos out as an Isotope
   masonry: a 917px-tall wall of shelves in four different tile sizes. Two
   things were wrong with it. The wall itself dominated the homepage with no
   way to skim it, and every tile was soft - the widget requests the 550x550
   crop and then stretches it to as much as 695px, while `sizes="550px"` on
   the img stopped the browser reaching for the 1000w or 1300w file that is
   sitting in the same srcset.

   So: one row of uniform square cards that scrolls sideways, with the photos
   left at their natural crop rather than stretched. The markup is untouched -
   this is the same widget, restyled - so the prettyPhoto lightbox still opens
   on click and nothing in Elementor needs editing.

   Isotope positions each tile with inline `position/left/top/height`, and an
   inline style can only be overridden by !important. That is what the four
   below are for; everything else here wins on ordinary specificity.
   ========================================================================== */

.lbp-gallery {
	--lbp-gallery-gutter: clamp(20px, 5vw, 70px);
	--lbp-gallery-card: clamp(210px, 23vw, 290px);

	position: relative;
}

.lbp-gallery .edgtf-image-gallery-masonry {
	display: flex;
	gap: 18px;
	height: auto !important;
	padding: 4px var(--lbp-gallery-gutter) 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--lbp-gallery-gutter);
	scroll-behavior: smooth;
	/* the rail below reports position; a native bar under a photo row is noise */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lbp-gallery .edgtf-image-gallery-masonry::-webkit-scrollbar {
	display: none;
}

/* Isotope's measuring element. It has no business in a flex row. */
.lbp-gallery .edgtf-image-masonry-grid-sizer {
	display: none;
}

.lbp-gallery .edgtf-gallery-image {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	height: auto !important;
	flex: 0 0 var(--lbp-gallery-card);
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 16px;
	background-color: var(--lbp-tile);
}

.lbp-gallery .edgtf-gallery-image-inner,
.lbp-gallery .edgtf-gallery-image a {
	display: block;
	height: 100%;
}

.lbp-gallery .edgtf-gallery-image a {
	position: relative;
}

/* The source crop is already square, so a square card means the photo is
   shown as cut rather than cropped a second time or stretched. */
.lbp-gallery .edgtf-gallery-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .9s var(--lbp-ease);
}

.lbp-gallery .edgtf-gallery-image:hover img {
	transform: scale(1.06);
}

/* Signals that the card opens something, and settles the busiest photos. */
.lbp-gallery .edgtf-gallery-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(var(--lbp-scrim), 0) 45%,
		rgba(var(--lbp-scrim), .42) 100%);
	opacity: 0;
	transition: opacity .45s ease;
}

.lbp-gallery .edgtf-gallery-image a:hover::after,
.lbp-gallery .edgtf-gallery-image a:focus-visible::after {
	opacity: 1;
}

.lbp-gallery .edgtf-gallery-image a:focus-visible {
	outline: 2px solid var(--lbp-green);
	outline-offset: -4px;
}

/* --- Arrows -------------------------------------------------------------
   Built by assets/js/custom.js. Touch devices scroll the row directly, so
   they are hidden there rather than parked over the photos.
   ------------------------------------------------------------------------ */

.lbp-gallery-arrow {
	position: absolute;
	top: calc(50% - 14px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	color: var(--lbp-ink);
	box-shadow: 0 6px 22px rgba(var(--lbp-scrim), .22);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}

.lbp-gallery-arrow:hover:not(:disabled) {
	background-color: var(--lbp-green);
	color: #fff;
}

.lbp-gallery-arrow:focus-visible {
	outline: 2px solid var(--lbp-green);
	outline-offset: 3px;
}

.lbp-gallery-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.lbp-gallery-arrow svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lbp-gallery-arrow--prev {
	left: calc(var(--lbp-gallery-gutter) - 23px);
}

.lbp-gallery-arrow--next {
	right: calc(var(--lbp-gallery-gutter) - 23px);
}

/* --- Position rail ------------------------------------------------------- */

.lbp-gallery-rail {
	position: relative;
	width: min(190px, 40vw);
	height: 3px;
	margin: 26px auto 0;
	border-radius: 3px;
	background-color: #e4e4e4;
	overflow: hidden;
}

.lbp-gallery-rail span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 3px;
	background-color: var(--lbp-green);
	transition: transform .18s linear;
}

@media (hover: none) {
	.lbp-gallery-arrow {
		display: none;
	}
}

@media only screen and (max-width: 680px) {
	.lbp-gallery {
		--lbp-gallery-gutter: 20px;
		--lbp-gallery-card: 62vw;
	}

	.lbp-gallery .edgtf-image-gallery-masonry {
		gap: 12px;
	}

	.lbp-gallery .edgtf-gallery-image {
		border-radius: 12px;
	}

	/* A 46px button parked on a 233px card is in the way, and a row this
	   narrow is swiped rather than clicked through even with a mouse. */
	.lbp-gallery-arrow {
		display: none;
	}
}