/* woocommerce styles */
.wc-block-components-button:not(.is-link) {
	 background-color: #8d9b8f;
	 font-family: Rubik, sans-serif;
    font-weight: 500;
    transform: none;
    border-radius: calc(var(--radius) - 2px);
}

/* CF7 field base styles */
.wpcf7-form .cf7-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #D1D5DB; /* gray-300 */
    font-family: Rubik, sans-serif;
    font-size: 1rem;
    color: #374151;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.wpcf7-form .cf7-input:focus {
    border-color: #8D9B8F;
    outline: none;
}

/* Submit button */
.wpcf7-form .cf7-submit {
    width: 100%;
    padding: 14px;
    background-color: rgb(141, 155, 143);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wpcf7-form .cf7-submit:hover {
    background-color: rgb(120, 135, 122);
}

/* Grid layout */
.wpcf7-form .grid {
    display: grid;
    gap: 16px;
}

.wpcf7-form .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
    .wpcf7-form .grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Spacing */
.wpcf7-form .space-y-4 > * + * {
    margin-top: 16px;
}

.wpcf7-form .grid-cols-2 input {
    max-width:264px;
}

.wpcf7-form .cfw-main input {
    max-width:400px;
}
.wpcf7-form .cfw-main .wpcf7-submit.motion-btn{
	max-width:180px;
}
.wpcf7-form .wpcf7-submit.motion-btn{
	    background-color: #8d9b8f;
}
/* ---- FAQ accordion (How It Works) ----
   Native <details>, so it works without JavaScript. The chevron in the summary
   is the open/closed indicator, so the browser's own marker is removed. */
.lb-faq-item > summary {
    list-style: none;
}
.lb-faq-item > summary::-webkit-details-marker,
.lb-faq-item > summary::marker {
    display: none;
    content: "";
}
/* The chevron is rotated via this wrapper, not the <svg> itself: a transform
   set directly on the SVG resolves to no rotation in the browser. */
.lb-faq-chevron {
    display: inline-flex;
    transition: transform .2s ease;
}
.lb-faq-item[open] > summary .lb-faq-chevron {
    transform: rotate(180deg);
}
.lb-faq-item > summary:focus-visible {
    outline: 2px solid #52614a;
    outline-offset: 2px;
}

/* ---- Organisations card (How It Works) ----
   Shares a grid row with the FAQ accordion, so it stretches whenever an answer
   opens. In the stacked layout "space-between" pushed the image to the bottom
   of the card, making it jump on every click; anchor the contents to the top
   instead. The xl row layout keeps the original horizontal distribution.
   Written here rather than as xl:justify-between, which is not present in the
   precompiled Tailwind build and would silently do nothing. */
.lb-org-card {
    justify-content: flex-start;
}
/* The text column is flex-1, which in the stacked layout grows to absorb the
   stretched height and pushes the image down just as space-between did. Size it
   to its content instead. */
.lb-org-card > div:first-child {
    flex: 0 0 auto;
}
@media (min-width: 1280px) {
    .lb-org-card {
        justify-content: space-between;
    }
    .lb-org-card > div:first-child {
        flex: 1 1 0%;
    }
}

/* ---- Founder story (About) ----
   Paragraph rhythm for the one long-form passage on the site. Written here
   because the theme's Tailwind build is precompiled and has no prose styles. */
.lb-story p {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 0 0 1.25rem;
}
.lb-story p:last-child {
    margin-bottom: 0;
    font-weight: 500;
    color: #52614a;
}

/* ── Currency switcher ─────────────────────────────────────────────────────
   Hand-written rather than Tailwind: these classes are not in the precompiled
   web.css build, so utility names would silently do nothing here. */

.lb-currency-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The options read "GBP £", "EUR €", so the control describes itself on screen.
   The label stays in the accessibility tree for screen readers. */
.lb-currency-switcher .lb-currency-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lb-currency-select {
    font-family: Rubik, sans-serif;
    font-size: 0.875rem;
    line-height: 1.2;
    color: #52614a;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lb-currency-select:hover {
    background-color: #f9fafb;
    border-color: #8D9B8F;
}

.lb-currency-select:focus-visible {
    outline: 2px solid #8D9B8F;
    outline-offset: 2px;
}

/* In the mobile drawer the control sits above the copyright with room to
   breathe, and the label is worth showing since there is no cart icon beside
   it to give context. */
.lb-currency-switcher--drawer {
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.lb-currency-switcher--drawer .lb-currency-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-size: 0.75rem;
    color: #6b7280;
}

/* ── The honesty line ──
   Colour is inherited so this reads correctly on the white cards, on the dark
   green Premium card and under the product price without a rule for each. */
.lb-currency-note {
    display: block;
    /* Sits close to the price it explains, with clear air beneath it so the
       switcher below reads as a separate control rather than part of the
       sentence. */
    margin: 0.4rem 0 0;
    font-family: Rubik, sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: inherit;
    opacity: 0.68;
}

/* ── Cart and checkout notice ──
   Totals here are never converted, so a visitor who was browsing in Euros is
   told plainly why the figures are back in Pounds. */
.lb-currency-banner {
    font-family: Rubik, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #52614a;
    background-color: #FBF7F6;
    border: 1px solid #e7ded8;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    margin: 0 0 1.5rem;
}

/* Inline placement, beside the prices themselves. The label is shown here
   because there is no cart icon or menu context to make a bare dropdown
   self-explanatory. Declared after the base rules so it wins on equal
   specificity. */
/* The top margin keeps the control clear of whatever sits above it — the note
   when another currency is showing, the price itself when it is not — so the
   spacing does not jump as the visitor switches. */
.lb-currency-switcher--inline {
    margin: 0.9rem 0 1.25rem;
}

.lb-currency-switcher--end {
    justify-content: flex-end;
}

.lb-currency-switcher--inline .lb-currency-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    font-family: Rubik, sans-serif;
    font-size: 0.75rem;
    color: #6b7280;
}

/* ── Long-form document typography ────────────────────────────────────────
   page.php and single.php wrap their content in .prose, but the precompiled
   Tailwind build has no typography plugin, so that class carries no rules at
   all. Combined with the framework's reset it leaves paragraphs with no
   margins, lists with no bullets or indent, and headings at nearly body size —
   a policy page arrives as one unbroken wall of text.

   These rules supply that typography. Scoped to .prose, which only those two
   templates use, so nothing else on the site is affected. */

.prose {
    /* Long legal copy is unreadable across the full 1280px wrapper; this is
       roughly 70 characters, which is the comfortable range. The templates
       also apply Tailwind's max-w-none, so this file must load after web.css —
       it does. */
    max-width: 46rem;
    color: #374151;
    font-size: 1rem;
    line-height: 1.75;
}

.prose p {
    margin: 0 0 1.15rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose h2 {
    color: #52614a;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 500;
    margin: 2.75rem 0 0.85rem;
}

.prose h3 {
    color: #52614a;
    font-size: 1.175rem;
    line-height: 1.4;
    font-weight: 500;
    margin: 2rem 0 0.6rem;
}

/* The page renders its own <h1> above this block, so the first heading inside
   it should not push itself away from the introduction. */
.prose > h2:first-child,
.prose > h3:first-child {
    margin-top: 0;
}

.prose ul,
.prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.6rem;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li {
    margin-bottom: 0.4rem;
    padding-left: 0.2rem;
}

.prose li::marker {
    color: #8D9B8F;
}

.prose a {
    color: #52614a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: #8D9B8F;
}

.prose strong {
    font-weight: 600;
    color: #52614a;
}

/* ── Pre-order notice ─────────────────────────────────────────────────────
   Shown while pre-order mode is on, on the product page, cart and checkout.
   Hand-written rather than Tailwind: these classes are not in the precompiled
   web.css build, so utility names would silently do nothing. */

.lb-preorder-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: Rubik, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #52614a;
    background-color: #FBF7F6;
    border: 1px solid #e7ded8;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    margin: 0 0 1.25rem;
}

.lb-preorder-notice__icon {
    flex: 0 0 auto;
    /* Nudged down so the icon sits on the first line's optical centre rather
       than its top edge. */
    margin-top: 0.12rem;
    color: #8D9B8F;
}

/* On the cart and checkout the notice spans the content column, so it wants a
   little more room beneath it before the block begins. */
.lb-preorder-notice--wide {
    margin-bottom: 1.75rem;
}

/*
 * Add-to-cart button inside WooCommerce product grids.
 *
 * These grids (the "New in store" list on an empty basket, and the shop loop)
 * render a block-editor button, which takes the block defaults rather than the
 * theme's own button styling — dark text on a dark fill, effectively unreadable.
 * Most visible once the label became "Pre-Order", but the contrast was wrong
 * beforehand too.
 */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link:visited {
	background-color: #52614a;
	border-color: #52614a;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:focus {
	background-color: #44513d;
	border-color: #44513d;
	color: #fff;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
	outline: 2px solid #52614a;
	outline-offset: 2px;
}

/*
 * Shop pages need the full wrapper width.
 *
 * page.php renders every page inside "prose max-w-none". The .prose rule above
 * deliberately overrides max-w-none so long legal copy sits at a readable
 * measure — but a basket, a checkout and an account area are laid out in
 * columns and were being squeezed into the same 46rem, leaving half the page
 * empty.
 *
 * Scoped to the woocommerce-page body class, which WooCommerce puts on all of
 * its own pages, rather than naming them one at a time. Two reasons: the account
 * pages were missed by the earlier per-page version, and the checkout turned out
 * to carry the body class "woocommerce-cart" rather than "woocommerce-checkout",
 * so a selector naming the checkout never matched it and it was only working by
 * way of the cart selector sitting beside it.
 *
 * The pages that actually wanted the narrow measure — the returns policy and the
 * privacy policy — are not WooCommerce pages, so they keep it.
 */
body.woocommerce-page .prose {
	max-width: none;
}

/*
 * Primary action buttons in the basket and checkout blocks.
 *
 * These render from WooCommerce Blocks and pick up the theme's link styling —
 * a pale fill with dark underlined text — rather than reading as the main
 * action on the page. Targeted at the two specific primary buttons rather than
 * .wc-block-components-button generally, which would also recolour the "Edit"
 * and quantity controls.
 */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: #52614a;
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
	background-color: #44513d;
	color: #fff;
	text-decoration: none;
}

.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid #52614a;
	outline-offset: 2px;
}

/*
 * Express payment buttons hidden when they cannot honour the choice on screen.
 *
 * Two cases: a pack is selected, where Apple Pay would buy a single band while
 * the customer believed they were buying three; and the chosen size and colour
 * is sold out, where Stripe would still offer the buttons because its own check
 * looks at the product type and never consults stock.
 *
 * Done as a rule rather than an inline style because Stripe builds its element
 * asynchronously and sets its own display value on completion — an inline value
 * applied before that finished was overwritten. !important is needed for the
 * same reason: the value it writes is inline.
 */
body.lula-hide-express #wc-stripe-express-checkout-element,
body.lula-hide-express #wc-stripe-express-checkout-button-separator,
body.lula-hide-express .wc-stripe-express-checkout-element,
body.lula-hide-express .wc-stripe-express-checkout-button-separator,
body.lula-hide-express .wcpay-payment-request-wrapper,
body.lula-hide-express .wc-block-components-express-payment {
	display: none !important;
}