/*
Theme Name:   Flatsome Child (Luvabulls)
Description:  Luvabulls reskin, Concept A "Immersive". Settings live in Flatsome's options; this file holds only what Flatsome can't set.
Author:       Luvabulls Limited
Template:     flatsome
Version:      1.0.0
Text Domain:  flatsome-child
*/

/* ---------- Tokens (match Flatsome colour settings) ---------- */
:root {
	--lb-primary: #B0234F;
	--lb-secondary: #2A1F24;
	--lb-text: #241C20;
	--lb-bg: #FBF8F5;
	--lb-band: #F3ECE8;
	--lb-gradient: linear-gradient(100deg, #9E1F4A, #CF3F68);
	--lb-radius: 2px;
}

/* ---------- Gradient: primary buttons and add-to-basket (incl. sticky bar) only ---------- */
.button.primary:not(.is-outline):not(.is-link):not(.is-underline),
.single_add_to_cart_button,
.sticky-add-to-cart .button {
	background-color: var(--lb-primary);
	background-image: var(--lb-gradient);
	border-color: transparent;
	color: #fff;
}

/* Hero italic line underline (used from Stage D). */
.hero-underline {
	background-image: var(--lb-gradient);
	background-repeat: no-repeat;
	background-size: 100% 3px;
	background-position: 0 92%;
	padding-bottom: 0.08em;
}

/* ---------- Type sizes (Flatsome sets families; sizes are in px here) ---------- */
body {
	font-size: 17px;
	line-height: 26px;
}

small,
.is-small {
	font-size: 15px;
	line-height: 22px;
}

h1, .h1 { font-size: 88px; line-height: 1.05; }
h2, .h2 { font-size: 44px; line-height: 1.15; }
h3, .h3 { font-size: 24px; line-height: 1.3; }

/* Product title keeps Flatsome's size until the product page is rebuilt in Stage D. */
h1.product-title { font-size: 1.6em; line-height: 1.2; }

strong, b { font-weight: 600; }

.header-nav-main > li > a,
.nav-top-link,
.header-nav .nav-top-link {
	font-size: 15px;
}

@media (max-width: 549px) {
	h1, .h1 { font-size: 48px; }
	h2, .h2 { font-size: 32px; }
}

/* ---------- Corner radius 2px: inputs, images, cards (buttons set in Flatsome) ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select,
.box-image,
.box-image img,
.product-small .box,
.woocommerce-product-gallery__image img {
	border-radius: var(--lb-radius);
}

/* ---------- Footer link lists (footer-main UX Block) ---------- */
.lb-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Flatsome indents list items (22px); footer links sit on the headings' left edge. */
.col-inner ul.lb-footer-links li {
	margin: 0 0 0.4em;
}

/* ---------- Place Order and basket checkout button use the gradient too (Phil, Stage C decision 2) ---------- */
#place_order,
.wc-proceed-to-checkout .checkout-button {
	background-color: var(--lb-primary);
	background-image: var(--lb-gradient);
	border-color: transparent;
	color: #fff;
}

/* ---------- Top bar: short line under 600px, full line from 600px (Stage C decision 3) ---------- */
.lb-topbar-short { display: none; }

@media (max-width: 599px) {
	.lb-topbar-full { display: none; }
	.lb-topbar-short { display: inline; white-space: nowrap; font-size: 13px; }
}

/* ---------- Homepage size tiles: fixed text sizes (Flatsome scales banner text down in narrow columns) ---------- */
.lb-tile-text h3 { font-size: 24px; margin-bottom: 0.2em; }
.lb-tile-text p { font-size: 15px; line-height: 22px; margin-bottom: 0.2em; }
.lb-tile-text .lb-tile-price { font-weight: 600; }

/* Reviews: room between the slider dots and the Trustpilot link */
.lb-reviews .flickity-page-dots { position: relative; bottom: auto; left: 0; right: 0; width: 100%; margin: 16px 0; padding: 0; text-align: center; }

/* ---------- Cofa Bed (Phil's decision 8 Oct): gallery left (col 7) with thumbnails below, buy box right (col 5),
   Specification full width underneath. Phones keep the stacked order. ---------- */
.lb-product-top .woocommerce-breadcrumb { font-size: 13px; }

@media (min-width: 850px) {
	.lb-product-top { margin-top: 30px; }
	/* Fixed 4:3 frame so the thumbnails don't jump; each photo is fitted inside it, never enlarged past its file. */
	.lb-gallery-col .woocommerce-product-gallery__image,
	.lb-gallery-col .woocommerce-product-gallery__image > a { display: block; aspect-ratio: 4 / 3; }
	.lb-gallery-col .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: contain; }
	.lb-spec-row h3 { margin-top: 0; }
}

/* Phones and tablets: gallery edge to edge as before, 16px between the thumbnails and the breadcrumb. */
@media (max-width: 849px) {
	.lb-gallery-col { padding: 0; }
	.lb-product-top .lb-gallery-col .product-thumbnails.row-small { margin-left: 0; margin-right: 0; }
	.lb-buy-col { padding-top: 16px; }
}

/* Spare parts page: no "PARTS" category label above each product name. */
.lb-parts-grid .product-cat { display: none; }

/* ---------- Basket and checkout step heading: one line, 24px Newsreader 500 (Flatsome sets it at H2 size).
   Current step in the text colour, the others stay muted. Phones keep the single-step heading at 32px. ---------- */
.checkout-breadcrumbs a { font-weight: 500; white-space: nowrap; }
.checkout-breadcrumbs a.current { color: var(--lb-text); }

@media (min-width: 550px) {
	.checkout-breadcrumbs.h2 { font-size: 24px; line-height: 1.3; }
}

/* Homepage hero on phones (brief 06): the photo starts below the 124px header (top bar 36 + header 88), so the
   logo and menu sit on the hero's own dark background (#2A1F24) and clear the dog's head. 56% across keeps the dog
   centred; Flatsome sets 50% 50% inline by ID. */
@media (max-width: 549px) {
	.lb-hero .banner-bg { top: 124px; height: auto; }
	.lb-hero .banner-bg img { object-position: 56% 50% !important; }
}

/* ---------- Inner pages (brief 30): one plain layout for Help, policy and About pages.
   Content sits in <div class="lb-page">: H1 in Newsreader, body in Albert Sans, one column about 760px,
   on the page background. No hero blocks, coloured boxes or grey bands. ---------- */
.lb-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 0 80px;
}
.lb-page h1 { font-size: 56px; line-height: 1.1; margin: 0 0 32px; }
.lb-page h2 { font-size: 32px; line-height: 1.2; margin: 48px 0 16px; }
.lb-page h3 { font-size: 24px; line-height: 1.3; margin: 32px 0 12px; }
.lb-page h2:first-child,
.lb-page h1 + h2 { margin-top: 0; }
.lb-page p,
.lb-page ul,
.lb-page ol { margin-bottom: 20px; }
.lb-page ul,
.lb-page ol { padding-left: 22px; }
.lb-page li { margin: 0 0 8px; }
.lb-page ul ul { margin: 8px 0 0; }
.lb-page a:not(.button) {
	color: var(--lb-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lb-page a:not(.button):hover { color: var(--lb-text); }
.lb-page hr { margin: 40px 0; border-color: #E4D9D4; }
.lb-page blockquote {
	margin: 0 0 20px;
	padding: 0 0 0 20px;
	border-left: 2px solid var(--lb-primary);
	background: none;
	font-size: inherit;
	font-style: normal;
}
.lb-page .button { margin: 8px 0 0; }
.lb-page figure { margin: 32px 0; }
.lb-page figure img { display: block; width: 100%; height: auto; border-radius: var(--lb-radius); }
.lb-page .lb-photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.lb-page .lb-photo-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--lb-radius); }
/* Accordion (FAQ): plain rows on the page background. */
.lb-page .accordion-title { padding: 16px 0 16px 32px; border-top: 1px solid #E4D9D4; font-size: 17px; font-weight: 600; color: var(--lb-text); }
.lb-page a.accordion-title { color: var(--lb-text); text-decoration: none; }
.lb-page a.accordion-title.active,
.lb-page a.accordion-title:hover { color: var(--lb-primary); background: none; }
.lb-page .accordion-inner { padding: 0 0 16px 32px; }
.lb-page .accordion-item:last-child { border-bottom: 1px solid #E4D9D4; }
/* Policy pages pasted from a generator carry inline fonts, sizes and greys: body font and text colour win. */
.lb-legal [data-custom-class],
.lb-legal [data-custom-class] *,
.lb-legal span[style] {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
	line-height: inherit !important;
}
.lb-legal [data-custom-class="link"],
.lb-legal [data-custom-class="link"] * { color: var(--lb-primary) !important; }
@media (max-width: 549px) {
	.lb-page { padding: 40px 0 56px; }
	.lb-page h1 { font-size: 40px; margin-bottom: 24px; }
	.lb-page h2 { font-size: 28px; margin-top: 40px; }
	.lb-page .lb-photo-row { grid-template-columns: 1fr 1fr; }
}
/* Privacy policy: the generator's title line takes the H1 look. */
.lb-page.lb-legal [data-custom-class="title"],
.lb-page.lb-legal [data-custom-class="title"] * {
	display: block;
	font-family: "Newsreader", serif !important;
	font-weight: 500 !important;
	font-size: 56px !important;
	line-height: 1.1 !important;
	margin-bottom: 16px;
}
@media (max-width: 549px) {
	.lb-page.lb-legal [data-custom-class="title"],
	.lb-page.lb-legal [data-custom-class="title"] * { font-size: 40px !important; }
}
/* Footer bottom bar: the legal links line (brief 31, decision 2). */
.lb-legal-links { display: block; margin-top: 4px; }
.lb-legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* reCAPTCHA (Cowork, 8 Oct): the floating badge is hidden; Google's notice sits in the footer bottom bar instead.
   reCAPTCHA itself still runs. */
.grecaptcha-badge { visibility: hidden; }
.lb-recaptcha-note { display: block; margin-top: 4px; }
.lb-recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* L1 and L2 (section L, 9 Oct 2026): homepage section spacing. Homepage only. Brief 43's rule:
   image blocks flush; trust band 24px (16px phones) above and below its text; content sections 80px (48px)
   top and bottom with 40px (24px) from heading to content; equal 4px tile gutters, outer edges included.
   Flatsome's columns add 30px bottom padding (only "collapse" removes it, which also narrows the row), so that
   padding and the last element's bottom margin are removed in these three sections. */
.home .lb-trust .row > .col,
.home .lb-size-tiles .row > .col,
.home .lb-reviews-band .row > .col { padding-bottom: 0; }
.home .lb-trust .col-inner > :last-child,
.home .lb-size-tiles .col-inner > :last-child,
.home .lb-reviews-band .col-inner > :last-child { margin-bottom: 0; }
.home .lb-size-tiles .row:not(.lb-tiles) > .col { padding-bottom: 40px; }
.home .lb-tiles { padding: 0 2px; }
@media (max-width: 549px) {
	.home .lb-size-tiles .row:not(.lb-tiles) > .col { padding-bottom: 24px; }
	.home .lb-tiles > .col:not(:last-child) { padding-bottom: 4px; }
}
/* Scroll cue (Cowork, reply 46): the anchor sits at the top of the trust band, so the hero's "Scroll" link shows the
   whole band under the sticky header. It's placed in the column (Flatsome positions it), lifted by the band's top padding. */
.home .lb-trust .lb-anchor { position: absolute; top: -24px; }
@media (max-width: 549px) {
	.home .lb-trust .lb-anchor { top: -16px; }
}
/* L4 (section L, 9 Oct 2026): My Account in the inner-page look. My Account pages only (.woocommerce-account).
   Title band on the page background (no grey band); H1 "My account" in Newsreader, 56px (40px phones), sentence case.
   Logged out (login, lost password, email sent, reset password): one 760px column, centred, like the inner pages.
   Logged in: Flatsome's sidebar and content within the 1200px container. Tab menu in Albert Sans 16px, sentence case,
   44px rows; the active tab berry with a 2px berry bar (matched on WooCommerce's endpoint body classes, so it also
   works on sub-screens such as a single order or an address form). Avatar, user ID and Flatsome's dashboard link
   boxes (a copy of the menu) hidden. Form buttons use the primary style. No template overrides. */
.woocommerce-account .my-account-header.page-title {
	background: var(--lb-bg);
	border: 0;
	box-shadow: none;
}
.woocommerce-account .my-account-header .page-title-inner { padding-top: 64px; padding-bottom: 32px; min-height: 0; } /* Flatsome's mb-0 on the H1 wins over a margin */
.woocommerce-account .my-account-header .flex-col,
.woocommerce-account .my-account-header .social-login { text-align: left !important; } /* Flatsome centres it under 850px with !important */
.woocommerce-account .my-account-header h1 {
	font-size: 56px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lb-text);
}
.woocommerce-account .page-wrapper.my-account { padding-top: 0; padding-bottom: 80px; margin-bottom: 0; }
/* Logged out: the title and the form share one centred 760px column. */
.woocommerce-account:not(.logged-in) .my-account-header .page-title-inner,
.woocommerce-account:not(.logged-in) .page-wrapper.my-account > .container { max-width: 790px; }
.woocommerce-account:not(.logged-in) .account-container,
.woocommerce-account:not(.logged-in) .account-login-inner { max-width: none; width: 100%; padding: 0; }
.woocommerce-account .account-login-inner h2 {
	font-size: 32px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 16px;
}
.woocommerce-account .lost_reset_password .form-row-first,
.woocommerce-account .lost_reset_password .form-row-last { float: none; width: 100%; }
/* Primary buttons: Log in, Reset password, Save address, Save changes, Add payment method. */
.woocommerce-account .woocommerce button.button[type="submit"],
.woocommerce-account .woocommerce .woocommerce-PaymentMethods ~ a.button,
.woocommerce-account .woocommerce a.button[href*="add-payment-method"] {
	background-color: var(--lb-primary);
	background-image: var(--lb-gradient);
	border-color: transparent;
	color: #fff;
}
/* Logged in: name as a greeting above the menu; no avatar, user ID or dashboard link boxes. */
.woocommerce-account .account-user .image,
.woocommerce-account .account-user .user-id,
.woocommerce-account .dashboard-links { display: none; }
.woocommerce-account .account-user { margin: 0 0 8px; }
.woocommerce-account .account-user .user-name { font-weight: 600; font-size: 17px; color: var(--lb-text); }
.woocommerce-account .vertical-tabs .col-border { border-color: #E4D9D4; }
#my-account-nav.nav-uppercase > li > a {
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lb-text);
	min-height: 44px;
	padding: 10px 0 10px 14px;
	display: flex;
	align-items: center;
}
#my-account-nav > li > a::before { display: none; }
#my-account-nav > li > a:hover { color: var(--lb-primary); }
.woocommerce-orders #my-account-nav a[href$="/my-account/orders/"],
.woocommerce-view-order #my-account-nav a[href$="/my-account/orders/"],
.woocommerce-edit-address #my-account-nav a[href$="/my-account/edit-address/"],
.woocommerce-payment-methods #my-account-nav a[href$="/my-account/payment-methods/"],
.woocommerce-add-payment-method #my-account-nav a[href$="/my-account/payment-methods/"],
.woocommerce-edit-account #my-account-nav a[href$="/my-account/edit-account/"] {
	color: var(--lb-primary);
	box-shadow: inset 2px 0 0 var(--lb-primary);
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--lb-primary); }
/* Address cards and the password section heading: inner-page spacing, sentence case. */
.woocommerce-account .woocommerce-Address { margin-bottom: 32px; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { font-size: 24px; line-height: 1.3; margin: 0 0 8px; }
.woocommerce-account .woocommerce-MyAccount-content legend {
	text-transform: none;
	letter-spacing: 0;
	font-size: 20px;
	font-weight: 600;
	border-color: #E4D9D4;
}
/* "See the Cofa Bed" after "You haven't placed any orders yet." Flatsome hides buttons inside notices
   (.message-container .wc-forward); shown on My Account only, in the primary style (Cowork, 9 Oct). */
.woocommerce-account .message-container a.wc-forward {
	display: table; /* its own line, under the sentence */
	margin: 16px 0 0;
	background-color: var(--lb-primary);
	background-image: var(--lb-gradient);
	border-color: transparent;
	color: #fff;
}
.woocommerce-account .woocommerce-info .message-container { text-align: left !important; } /* Flatsome centres notices under 850px */
@media (max-width: 549px) {
	.woocommerce-account .my-account-header .page-title-inner { padding-top: 40px; padding-bottom: 24px; }
	.woocommerce-account .my-account-header h1 { font-size: 40px; }
	.woocommerce-account .page-wrapper.my-account { padding-bottom: 56px; }
	.woocommerce-account .account-login-inner h2 { font-size: 28px; }
}