/*
 * Theme additions on top of the static build's style.css.
 * Only what the WordPress layer needs: honeypot, validation states, search
 * results inside the existing modal. Nothing here restyles the design.
 */

/* Honeypot: reachable by bots, invisible and unfocusable for people. */
.lunar-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Field validation */
.lp-form-err {
	display: none;
	margin-top: 4px;
	font-size: .82rem;
	font-weight: 500;
	color: var(--lp-accent, #ED1F24);
}

.lp-form .form-control.is-invalid,
.lp-form .form-select.is-invalid {
	border-color: var(--lp-accent, #ED1F24);
	background-color: var(--lp-pink, #FFE6E7);
}

.lp-form-sec {
	margin: 8px 0 0;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .65;
}

/* Submit feedback */
.lp-form-response:empty { display: none; }

.lp-form-response {
	margin-top: 4px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: .95rem;
}

.lp-form-response.is-success {
	background: #ECFDF3;
	border: 1px solid #A6F4C5;
	color: #05603A;
}

.lp-form-response.is-error {
	background: var(--lp-pink, #FFE6E7);
	border: 1px solid #FFC9CB;
	color: #8A1114;
}

.btn-lp.is-loading { opacity: .65; pointer-events: none; }

/* Live search results in the existing modal */
.lp-search-results:empty { display: none; }
.lp-search-results { margin-top: 14px; max-height: 52vh; overflow-y: auto; }
.lp-search-group { margin-bottom: 14px; }
.lp-search-group h6 {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .6;
	margin-bottom: 6px;
}
.lp-search-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
}
.lp-search-item:hover { background: var(--lp-light, #F9F9F9); color: var(--lp-accent, #ED1F24); }
.lp-search-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.lp-search-empty { opacity: .65; padding: 8px 2px; margin: 0; }

/* ============================================================
   WordPress integration + requested tweaks
   ============================================================ */

/* --- 1. Header vs the admin bar ------------------------------
   .lp-header is position:absolute, but .lp-hero-wrap is static,
   so the header resolves against the initial containing block —
   i.e. the document, not the panel. The admin bar adds
   html{margin-top:32px}, which moves the panel down but leaves
   the header at top:20px, misaligning it by exactly the bar
   height. Offset the header by the same amount.
   Measured: hero-wrap rectTop 48 vs header rectTop 20.        */
.admin-bar .lp-header {
	top: 52px;                 /* 20px design offset + 32px bar */
}

@media screen and (max-width: 782px) {
	.admin-bar .lp-header {
		top: 66px;             /* 20 + 46 */
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .lp-header {
		top: 20px;             /* bar becomes static, no offset */
	}
}

/* --- 1b. Sticky header vs the admin bar ----------------------
   style.css pins .lp-header.is-fixed to top:0, which is correct
   on the static build. In WordPress the admin bar is fixed at
   top:0 (32px, 46px on mobile), so the header slides underneath
   it. Offset the header by the bar's height for logged-in users
   only — logged-out visitors are unaffected.                    */
.admin-bar .lp-header.is-fixed {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .lp-header.is-fixed {
		top: 46px;
	}
}

/* The admin bar drops to static below 600px, so no offset there. */
@media screen and (max-width: 600px) {
	.admin-bar .lp-header.is-fixed {
		top: 0;
	}
}

/* --- 2. Link hover: red -------------------------------------- */
a:hover,
a:focus {
	color: var(--lp-accent);
}

.lp-footer a:hover,
.lp-footer .lp-contact a:hover,
.lp-drawer a:hover {
	color: var(--lp-accent);
}

/* --- 3. Mega menu tiles: image left, label right --------------
   style.css stacks them (flex-direction:column, centred).
   Lay them out horizontally instead.                            */
.lp-mega-item {
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 12px;
}

.lp-mega-item img {
	flex: 0 0 auto;
}

.lp-mega-item span {
	flex: 1 1 auto;
	min-width: 0;
}

/* Product tiles keep their larger image but also read across. */
.lp-mega-prod {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.lp-mega-prod img {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
}

/* --- 4. Mega menu distance ------------------------------------
   The panel is top:100%, so where it lands depends on which
   ancestor is its containing block:

     - Panels that carry their own width (Shapes & Styles, Rigid
       Boxes) are placed by lpPlaceMega() in frontend.js, which
       sets position:relative on the <li>. top:100% is then the
       link's own height, i.e. the panel already sits exactly at
       the bottom of the link.
     - Full-width panels leave the <li> static, so top:100%
       resolves against .lp-header-inner and clears the bar.

   Either way the panel starts at or below the link, so it only
   needs the hover gap. The earlier -46px here was calibrated for
   the second case alone and dragged the first case 46px up over
   the header, hiding the logo and the nav links.

   The hover hand-off across the gap is handled in main.js.      */
.lp-nav > li > .lp-mega {
	margin-top: 6px;
}

/* --- 5. Nav hover ---------------------------------------------
   style.css sets .lp-nav>li>a:hover to --lp-primary (#000), which
   is the header's own background — so the label vanishes on hover.
   Use the accent instead, matching the requested red hover.
   Specificity has to match theirs (0,0,2,2) to take effect.     */
.lp-nav > li > a:hover,
.lp-nav > li > a:focus,
.lp-nav > li.is-open > a {
	/* style.css sets --lp-primary here, which is the header background.
	   !important because both rules carry identical specificity. */
	color: var(--lp-accent) !important;
}

.lp-nav > li > a:hover .fa-chevron-down,
.lp-nav > li.is-open > a .fa-chevron-down {
	color: var(--lp-accent);
}

/* --- 6. Search dropdown readability ---------------------------
   The modal renders on a near-black panel. The result list
   inherited its colour, so the group label and item text came out
   dark-on-dark. Set explicit light colours for the dark surface. */

.lp-search-modal .modal-content {
	color: var(--lp-white);
}

.lp-search-group h6 {
	color: rgba(255, 255, 255, .65);
	opacity: 1;                       /* was .6 on an already-dark colour */
	font-weight: 600;
}

.lp-search-item {
	color: var(--lp-white);
}

.lp-search-item:hover,
.lp-search-item:focus {
	background: rgba(255, 255, 255, .10);
	color: var(--lp-accent);
}

.lp-search-item img {
	border: 1px solid rgba(255, 255, 255, .14);
}

.lp-search-empty {
	color: rgba(255, 255, 255, .6);
}

.lp-search-hint {
	color: rgba(255, 255, 255, .55);
}

/* Keep the results panel from running off a short viewport. */
.lp-search-results {
	max-height: 56vh;
	overflow-y: auto;
}

/* --- 4b. Mega panel in the sticky header ----------------------
   .lp-mega is top:100%, and its containing block is
   .lp-header-inner (position:relative). In the sticky state that
   element shrinks (padding 34/21 -> 12/0), so any fixed negative
   margin calibrated for the normal header drags the panel up over
   the nav links.

   Rather than guess a second magic number, make .lp-header itself
   the containing block while sticky: header-inner goes static, so
   top:100% resolves to the bottom of the bar and the panel always
   clears it, whatever the padding does.                          */
/* .lp-header-inner deliberately stays position:relative here. It is the
   containing block every mega panel is measured and offset against, so
   swapping it out in the sticky state would move every panel sideways
   until the next lpPlaceMega() pass. The panel now clears the bar on its
   own (top:100% + 6px), which is what this override used to work around. */

/* Sticky state needs no margin override: the base 6px above is
   already the gap that state was calibrated to. */

/* --- 7. Breathing room between stacked dark panels -------------
   .lp-panel is a rounded inset card (radius 30px, margin 0 15px)
   and .lp-panel-cta narrows to the 1320px container. When two sit
   back to back with no gap, both being black, the CTA's rounded
   bottom corners dissolve into the panel beneath it.

   Requested change — the static build stacks them flush.
   Spacing uses the design's own --lp-inset so the rhythm matches
   the horizontal gutter.                                         */
.lp-panel + .lp-panel {
	margin-top: var(--lp-inset);
}

/* A CTA bar directly above a full-width panel needs a little more,
   since it is also narrower and reads as a separate card. */
.lp-panel-cta + .lp-panel {
	margin-top: calc(var(--lp-inset) * 2);
}

/* --- 8. Description box height ---------------------------------
   Superseded: style.css now stretches .lp-longform-col and pins the
   scroll box inside it with position:absolute, so the box matches the
   form without JS measuring it. The rules that used to live here set
   overflow-y:auto, which hid the red scrollbar, and paired with a
   main.js height sync that ran before the webfonts settled.        */

/* --- 9. Every form's submit button turns white on hover --------
   Covers the quote/contact forms, the header search form and any
   WooCommerce form. Longhand background-color rather than the
   shorthand so it composes predictably with the base .btn-lp.    */
form button[type="submit"]:hover,
form button[type="submit"]:focus-visible,
form input[type="submit"]:hover,
form input[type="submit"]:focus-visible,
form .btn-lp:hover,
form .btn-lp:focus-visible,
.woocommerce form .button:hover {
	background-color: var(--lp-white);
	border-color: var(--lp-white);
	color: var(--lp-primary);
}

/* The arrow icon inherits, so it stays readable on white. */
form button[type="submit"]:hover i,
form input[type="submit"]:hover i,
form .btn-lp:hover i {
	color: var(--lp-primary);
}

/* …except on the light form, whose card is white too — a white button
   there just disappears, so outline it instead. */
.lp-form-light .btn-lp:hover,
.lp-form-light .btn-lp:focus-visible,
.lp-form-light button[type="submit"]:hover,
.lp-form-light button[type="submit"]:focus-visible {
	background-color: transparent;
	border-color: var(--lp-accent);
	color: var(--lp-accent);
}
.lp-form-light .btn-lp:hover i,
.lp-form-light button[type="submit"]:hover i {
	color: var(--lp-accent);
}

/* SMS consent under the submit button. */
.lp-form-consent {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 20px;
	color: var(--lp-secondary);
	opacity: .85;
}
.lp-form-consent a { color: inherit; text-decoration: underline; }
.lp-form-consent a:hover { color: var(--lp-accent); }

/* On the dark forms the body text is white, so soften rather than darken. */
.lp-form:not(.lp-form-light) .lp-form-consent { color: rgba(255,255,255,.72); }

/* --- 10. Category page title ----------------------------------
   The hero h1 inherits the global 64px/74px. Category names run
   long ("Restaurant Boxes & Food Packaging") and the hero column
   is only ~620px, so they wrap to two or three lines.
   Requested: smaller. clamp() keeps it responsive.               */
.lp-plp-hero h1 {
	font-size: clamp(30px, 3.1vw, 44px);
	line-height: 1.16;
}

/* --- 11. FAQ accordions inside page content --------------------
   The FAQs page content was authored in Elementor and stores plain
   <details>/<summary> markup (id="e-n-accordion-item-…"). With the
   plugin gone there is no CSS for it, so it rendered as bare
   browser-default disclosure widgets.

   Give it the same look as .lp-accordion elsewhere on the site:
   pink pill, Syne label, Font Awesome plus/minus.                */

.lp-prose details {
	background: var(--lp-pink);
	border: none;
	border-radius: 12px;
	margin-bottom: 14px;
	overflow: hidden;
}

.lp-prose details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	font-family: var(--lp-font-head);
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: var(--lp-primary);
	list-style: none;
	transition: color .2s, background .2s;
}

/* Kill both default disclosure markers. */
.lp-prose details > summary::-webkit-details-marker { display: none; }
.lp-prose details > summary::marker { content: ""; }

/* Elementor left its own inline SVG icons in the markup. */
.lp-prose details > summary svg,
.lp-prose details > summary br {
	display: none;
}

.lp-prose details > summary::after {
	content: "\f067";                 /* plus */
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 13px;
	color: var(--lp-accent);
	flex: 0 0 auto;
}

.lp-prose details[open] > summary {
	color: var(--lp-accent);
	background: var(--lp-pink);
}

.lp-prose details[open] > summary::after {
	content: "\f068";                 /* minus */
}

.lp-prose details > summary:hover {
	color: var(--lp-accent);
}

/* Answer body */
.lp-prose details > *:not(summary) {
	padding: 0 20px;
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-secondary);
}

.lp-prose details > *:not(summary):last-child {
	padding-bottom: 18px;
}

.lp-prose details p {
	margin-bottom: 10px;
}

/* --- 12. Post navigation ---------------------------------------
   style.css lets each Previous/Next link grow to 46ch. Inside the
   col-lg-8 article column two of those overflow the row, so
   flex-wrap drops Next onto its own line. Giving them a zero basis
   splits the row in half instead. Below lg they stack, which is
   what the .text-lg-end class already assumes. */

@media (min-width: 992px) {

	.lp-postnav a {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* --- 13. Shop grid label ---------------------------------------
   Live labels the product grid with a small heading ("Categories").
   style.css already sizes h5; this only gives it breathing room
   above the row. */

.lp-grid-label {
	margin-bottom: 22px;
}

/* --- 14. Shop: category rail + swappable panel ------------------
   Reuses the .lp-widget surface and the tokens from style.css so
   the rail reads as part of the existing sidebar family. */

.lp-shop-side {
	position: sticky;
	top: 110px;
	background: var(--lp-light);
	border-radius: 16px;
	padding: 24px;
}

.lp-shop-side .lp-grid-label {
	font-size: 19px;
	margin-bottom: 16px;
}

.lp-shop-cats {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 60vh;
	overflow-y: auto;
}

.lp-shop-cats a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--lp-text);
	font-size: 15px;
	line-height: 22px;
	text-decoration: none;
}

.lp-shop-cats a:hover,
.lp-shop-cats a:focus-visible {
	background: var(--lp-pink);
	color: var(--lp-accent);
}

.lp-shop-cats a.is-active {
	background: var(--lp-accent);
	color: var(--lp-white);
	font-weight: 600;
}

/* Panel */

.lp-shop-panel {
	transition: opacity .18s ease;
}

.lp-shop-panel.is-loading {
	opacity: .45;
	pointer-events: none;
}

.lp-shop-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-weight: 600;
	color: var(--lp-accent);
	text-decoration: none;
}

.lp-shop-back:hover {
	color: var(--lp-accent-dark);
}

.lp-shop-count {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--lp-pink);
	color: var(--lp-accent);
	font-family: var(--lp-font-body);
	font-size: 14px;
	font-weight: 600;
	vertical-align: middle;
}

@media (max-width: 991.98px) {

	.lp-shop-side {
		position: static;
	}

	.lp-shop-cats {
		max-height: 320px;
	}
}

/* --- 15. Add-to-cart feedback ----------------------------------
   The static build's buy row had no place to report anything back,
   because its button did nothing. */

.lp-buy-msg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: 14px;
	font-size: 15px;
	font-weight: 600;
}

.lp-buy-msg:empty {
	display: none;
}

.lp-buy-msg.is-ok {
	color: #1a7f37;
}

.lp-buy-msg.is-error {
	color: var(--lp-accent);
}

.lp-buy-msg a {
	color: var(--lp-accent);
	text-decoration: underline;
}

/* --- 16. Inspirations gallery ----------------------------------
   The static build had no gallery page. This reproduces the live
   Elementor widget: square tiles, four across, dimming to a zoom
   cue on hover, opening full size in the lightbox below. */

.lp-insp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.lp-insp-item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 1;
	background: var(--lp-light);
}

.lp-insp-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s;
}

.lp-insp-item:hover img,
.lp-insp-item:focus-visible img {
	transform: scale(1.06);
}

.lp-insp-item:focus-visible {
	outline: 3px solid var(--lp-accent);
	outline-offset: 3px;
}

.lp-insp-zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .45);
	color: var(--lp-white);
	font-size: 22px;
	opacity: 0;
	transition: opacity .3s;
}

.lp-insp-item:hover .lp-insp-zoom,
.lp-insp-item:focus-visible .lp-insp-zoom {
	opacity: 1;
}

@media (max-width: 991.98px) {

	.lp-insp-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}

@media (max-width: 575.98px) {

	.lp-insp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- 17. Lightbox ----------------------------------------------
   Elementor's lightbox went with the plugin. This is the same
   interaction with none of the payload; without JS the tiles stay
   plain links to the full-size file. */

.lp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: rgba(0, 0, 0, .92);
	opacity: 0;
	visibility: hidden;

	/* Hiding waits for the fade to finish; showing is instant, so the close
	   button is focusable in the same tick the overlay opens. */
	transition: opacity .25s, visibility 0s .25s;
}

.lp-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s, visibility 0s;
}

.lp-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	object-fit: contain;
}

.lp-lightbox-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: var(--lp-white);
	font-size: 18px;
	cursor: pointer;
	transition: background .3s;
}

.lp-lightbox-btn:hover {
	background: var(--lp-accent);
}

.lp-lightbox-btn:focus-visible {
	outline: 3px solid var(--lp-accent);
	outline-offset: 2px;
}

.lp-lightbox-close {
	top: 20px;
	right: 20px;
}

.lp-lightbox-prev {
	left: 20px;
}

.lp-lightbox-next {
	right: 20px;
}

.lp-lightbox-count {
	position: absolute;
	bottom: 18px;
	left: 0;
	width: 100%;
	color: rgba(255, 255, 255, .7);
	font-family: var(--lp-font-body);
	font-size: 14px;
	text-align: center;
}

/* The page behind must not scroll while the overlay is up. */
body.lp-lightbox-open {
	overflow: hidden;
}

@media (max-width: 575.98px) {

	.lp-lightbox {
		padding: 70px 12px;
	}

	.lp-lightbox-prev {
		left: 10px;
	}

	.lp-lightbox-next {
		right: 10px;
	}
}

/* --- 18. Panel sitting directly on the footer -------------------
   Every other page ends on a white .lp-section, whose 90px of
   bottom padding keeps the footer clear. Inspirations ends on the
   CTA bar, so its rounded black panel met the equally black,
   equally rounded footer edge-to-edge and the corners read as a
   notch. Space them the way a section would. */

.lp-panel + .lp-footer {
	margin-top: 40px;
}

/* --- 16. Screen-reader text --------------------------------------
   WordPress and WooCommerce both emit .screen-reader-text and rely
   on core's stylesheets to hide it. clean-output.php drops those
   (wp-block-library, classic-theme-styles) and Woo's own CSS loads
   only on cart/checkout/account — so on the 51 sale product pages
   the price read "$0.30 Original price was: $0.30.$0.20Current
   price is: $0.20." Hide it here, once, for the whole site. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip links must come back into view when focused. */
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* --- 17. Sale prices in the buy row ------------------------------
   The static build only ever showed one price, so <del>/<ins> had
   no styling: the old price rendered in the same 20px accent as the
   new one, and <ins> picked up the browser's default underline. */

.lp-buyrow .amt del {
	margin-right: 8px;
	color: rgba(255, 255, 255, .55);
	font-size: 16px;
	font-weight: 600;
	text-decoration: line-through;
}

.lp-buyrow .amt del .woocommerce-Price-amount,
.lp-buyrow .amt del bdi {
	color: inherit;
	font-size: inherit;
}

.lp-buyrow .amt ins {
	background: transparent;
	text-decoration: none;
	color: var(--lp-accent);
}

/* --- 19. Thank-you page -----------------------------------------
   The live page was a bare Elementor stack. Rebuilt from the site's
   own parts, it needs three things the kit did not already carry:
   an outline button for light backgrounds, the confirmation card,
   and the numbered step cards. */

/* Outline pill for light sections — .btn-lp-ghost is white-on-dark
   only, so it is unreadable outside .lp-panel. */
.btn-lp-outline {
	background: transparent;
	color: var(--lp-accent);
	border-color: var(--lp-accent);
}

.btn-lp-outline:hover,
.btn-lp-outline:focus {
	background: var(--lp-accent);
	border-color: var(--lp-accent);
	color: var(--lp-white);
}

/* Confirmation card */
.lp-ty-card {
	max-width: 840px;
	margin: 0 auto;
	text-align: center;
	background: var(--lp-light);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-radius);
	padding: 56px 40px 48px;
}

.lp-ty-card h2 {
	font-size: 38px;
	line-height: 48px;
	margin-bottom: 16px;
}

.lp-ty-card p {
	color: var(--lp-secondary);
	max-width: 68ch;
	margin: 0 auto;
}

/* Ring around the tick reads as a stamp rather than a plain icon. */
.lp-ty-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 26px;
	border-radius: 50%;
	background: var(--lp-accent);
	color: var(--lp-white);
	font-size: 32px;
	box-shadow: 0 0 0 12px var(--lp-pink);
}

.lp-ty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 32px;
}

/* Step cards */
.lp-ty-step {
	position: relative;
	padding-top: 34px;
}

.lp-ty-step-no {
	position: absolute;
	top: 22px;
	right: 26px;
	font-family: var(--lp-font-head);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--lp-pink-2);
}

.lp-ty-step h4 {
	color: var(--lp-primary);
	font-size: 22px;
	line-height: 30px;
	margin-bottom: 10px;
}

.lp-ty-step p {
	font-size: 15px;
	line-height: 24px;
	color: var(--lp-secondary);
	margin: 0;
}

/* CTA bar: copy left, buttons right, stacked on small screens. */
.lp-ty-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.lp-ty-cta p {
	margin: 0;
	color: rgba(255, 255, 255, .72);
}

.lp-ty-cta .lp-ty-actions {
	margin-top: 0;
}

@media (max-width: 767px) {
	.lp-ty-card {
		padding: 40px 22px 36px;
	}

	.lp-ty-card h2 {
		font-size: 30px;
		line-height: 40px;
	}

	.lp-ty-badge {
		width: 68px;
		height: 68px;
		font-size: 26px;
		box-shadow: 0 0 0 9px var(--lp-pink);
	}

	.lp-ty-cta {
		justify-content: center;
		text-align: center;
	}
}

/* --- 19. Search, 404 and empty results -------------------------
   The static build had no search results, 404 or empty state, so
   these reuse its pieces — .lp-blog-card for a result, .lp-card
   for a category — and only add what has no counterpart. */

/* style.css builds .lp-search-form for the dark modal: white text on
   translucent borders. On a white section it vanishes, so restate the
   colours rather than fight the cascade with overrides. */
.lp-search-form-light .form-control {
	border-color: var(--lp-border);
	background: var(--lp-white);
	color: var(--lp-text);
}

.lp-search-form-light .form-control::placeholder {
	color: rgba(17, 17, 17, .45);
}

.lp-search-form-light .form-control:hover {
	border-color: rgba(17, 17, 17, .3);
}

.lp-search-form-light .form-control:focus {
	border-color: var(--lp-accent);
	background: var(--lp-white);
	color: var(--lp-text);
}

.lp-search-bar {
	max-width: 640px;
	margin-inline: auto;
}

/* Group headings between the category and post halves of a result set. */
.lp-result-group {
	margin-bottom: 26px;
	font-size: 30px;
	line-height: 40px;
}

.lp-result-excerpt {
	margin: 0;
	color: var(--lp-secondary);
	font-size: 15px;
	line-height: 24px;
}

/* A result's thumb is decorative — the title beside it is the link — so the
   card keeps the blog card's shape but drops nothing else. */
.lp-result .lp-blog-date {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Empty state */
.lp-none {
	max-width: 620px;
	margin-inline: auto;
	padding: 30px 0 10px;
}

.lp-none-icon {
	display: block;
	margin-bottom: 22px;
	color: var(--lp-pink-2);
	font-size: 46px;
}

.lp-none p {
	color: var(--lp-secondary);
}

.lp-none-form {
	margin: 26px 0 30px;
}

.lp-none-label {
	margin-bottom: 12px;
	font-family: var(--lp-font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--lp-primary);
}

.lp-none-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 30px;
}

.lp-none-cats a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 50px;
	background: var(--lp-light);
	color: var(--lp-text);
	font-size: 14px;
}

.lp-none-cats a:hover {
	background: var(--lp-pink);
	color: var(--lp-accent);
}

/* 404 */
.lp-404-code {
	margin: 0 0 -18px;
	font-family: var(--lp-font-head);
	font-weight: 700;
	font-size: 120px;
	line-height: 1;
	color: rgba(255, 255, 255, .09);
	letter-spacing: .04em;
}

.lp-404-search {
	max-width: 620px;
	margin: 30px auto 0;
}

@media (max-width: 767.98px) {

	.lp-404-code {
		margin-bottom: -10px;
		font-size: 72px;
	}

	.lp-result-group {
		font-size: 25px;
		line-height: 34px;
	}
}

/* --- 20. Search "load more" ------------------------------------
   Replaces the numbered pagination on search only; blog and shop
   keep .lp-pagination. */

.lp-load-more-wrap {
	margin-top: 44px;
}

.lp-load-more.is-loading {
	pointer-events: none;
	opacity: .65;
}

.lp-load-more-msg {
	margin: 16px 0 0;
	color: var(--lp-secondary);
	font-size: 15px;
}

.lp-load-more-msg:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
   WooCommerce's own stylesheet only loads on cart/checkout/account, and its
   ".woocommerce-page img { height: auto }" outranks the theme's footer logo
   height — which made the footer render differently on exactly those pages.
   Put the height back.
   ------------------------------------------------------------------------- */
.woocommerce-page .lp-footer-logo,
.woocommerce .lp-footer-logo {
	height: 140px;
	width: auto;
}

@media (max-width: 767px) {
	.woocommerce-page .lp-footer-logo,
	.woocommerce .lp-footer-logo {
		height: 62px;
	}
}