/* =============================================================================
   PAGES
   Page-specific overrides: Farmers Blend (/174, /3066, /3084) and misc pages
   Source: customiser.css ("Lees CSS" section + scattered page-id rules)
============================================================================= */

/* --- Fonts ---------------------------------------------------------------- */

.font-caveat {
    font-family: "Caveat", cursive!important;
}

h1.stk-block-heading__text{
    font-family: "Caveat", cursive!important;
}

/* --- Farmers Blend pages (174, 3066, 3084) ------------------------------- */

body.page-id-174 main#primary,
body.page-id-3066 main#primary,
body.page-id-3084 main#primary {
    font-size: 22px!important;
}

.page-id-174 h2,
.page-id-3066 h2,
.page-id-3084 h2 {
    font-size: 2.8rem!important;
    text-align: unset;
    color: #015e5d!important;
    font-weight: 900!important;
}

.page-id-174 h4,
.page-id-3066 h4,
.page-id-3084 h4 {
    font-weight: 900;
}

.page-id-174 .wp-block-stackable-columns > *,
.page-id-3066 .wp-block-stackable-columns > *,
.page-id-3084 .wp-block-stackable-columns > * {
    max-width: 1440px;
}

.colour-box-col > * {
    max-width: 100%!important;
}

.page-id-174 .stk-row.stk-inner-blocks.stk-block-content,
.page-id-3066 .stk-row.stk-inner-blocks.stk-block-content,
.page-id-3084 .stk-row.stk-inner-blocks.stk-block-content {
    column-gap: 5%;
}

.colour-box-col {
    margin-top: 30px;
}

.page-id-174 .second-rows,
.page-id-3066 .second-rows,
.page-id-3084 .second-rows {
    margin-top: 5%;
}

.page-id-174 .wp-block-stackable-column.colour-box,
.page-id-3066 .wp-block-stackable-column.colour-box,
.page-id-3084 .wp-block-stackable-column.colour-box {
    position: relative!important;
    overflow: visible!important;
    z-index: 1;
}

.page-id-174 .wp-block-stackable-column.colour-box::before,
.page-id-3066 .wp-block-stackable-column.colour-box::before,
.page-id-3084 .wp-block-stackable-column.colour-box::before {
    content: ""!important;
    display: block!important;
    position: absolute!important;
    top: -30px;
    left: -20px;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 9999;
}

.colour-box { border-radius: 20px; }

.colour-box.green-heart-box::before { background-image: url('/wp-content/uploads/2026/04/Layer_1-2-1.svg'); background-color: transparent!important; }
.colour-box.green-air-box::before   { background-image: url('/wp-content/uploads/2026/04/Layer_1-4.svg');   background-color: transparent!important; }
.colour-box.green-leaf-box::before  { background-image: url('/wp-content/uploads/2026/04/Layer_1-3-1.svg'); background-color: transparent!important; }
.colour-box.green-biode-box::before { background-image: url('/wp-content/uploads/2026/04/Layer_1-1-1.svg'); background-color: transparent!important; }

.white-field {
    background-image: url(/wp-content/uploads/2026/06/Farmers-Blend-graphic-white-1.svg);
    padding-bottom: 300px!important;
    background-position-y: bottom!important;
    background-size: contain!important;
}

/* Green rabbit decorations */
.green-rabbit-tr {
    position: relative!important;
    overflow: visible!important;
}

.green-rabbit-tr > .stk-row {
    position: relative;
    z-index: 2;
}

.green-rabbit-tr > .stk-row::before {
    content: ""!important;
    position: absolute!important;
    top: -150px;
    right: 10%;
    width: 100px;
    height: 100px;
    background: url("/wp-content/uploads/2026/06/Green-Rabbit-3.png") no-repeat center / contain!important;
    pointer-events: none;
    z-index: 3;
}

.green-rabbit-tl > .stk-row::before {
    content: ""!important;
    position: absolute!important;
    top: -150px;
    left: 10%;
    width: 100px;
    height: 100px;
    background: url("/wp-content/uploads/2026/06/Green-Rabbit-3.png") no-repeat center / contain!important;
    pointer-events: none;
    z-index: 3;
}

.five-product-overhang img {
    max-width: 1200px!important;
    margin: auto!important;
}

.five-product-overhang {
    margin: -300px 0 0;
}

/* Buttons */
.page-id-174 a.stk-link.stk-button,
.page-id-3066 a.stk-link.stk-button {
    background: #015e5d!important;
    width: 250px;
}

.page-id-174 a.stk-link.stk-button > *,
.page-id-3066 a.stk-link.stk-button > * {
    color: #fff!important;
}

.page-id-174 .white-button a.stk-link.stk-button,
.page-id-3066 .white-button a.stk-link.stk-button {
    background: #fff!important;
}

.page-id-174 .white-button a.stk-link.stk-button > *,
.page-id-3066 .white-button a.stk-link.stk-button > * {
    color: #015e5d!important;
}

.purple-buttons a.stk-link.stk-button {
    background: #592983!important;
}

/* Intro banner */
.intro-banner img {
    max-width: 600px!important;
    position: relative;
    bottom: -120px;
}

.intro-banner .stk-img-wrapper {
    justify-items: end;
}

.intro-banner {
    margin: 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% auto, cover, cover;
    background-position: center calc(100% + 30px), center, center;
    padding-bottom: 80px;
}

.intro-banner:first-of-type { color: #fff; }
.intro-banner span { overflow: visible; }

.intro-banner h1 {
    color: #fff;
    font-size: 3em;
    font-weight: 900;
}

/* Intro banner colour variants */
.dark-purple-intro {
    background-color: #6d1d45;
    background-image:
        url("/wp-content/uploads/2026/01/related-top.png"),
        linear-gradient(rgba(109, 29, 69, 0.9), rgba(109, 29, 69, 0.9)),
        url("/wp-content/uploads/2026/06/LM-PW-Test-2.png");
}

.dark-blue-intro {
    background-color: rgb(0 86 135);
    background-image:
        url("/wp-content/uploads/2026/01/related-top.png"),
        linear-gradient(rgba(0, 86, 135, 0.9), rgba(0, 86, 135, 0.9)),
        url("/wp-content/uploads/2026/06/LM-PW-Test-2.png");
}

.dark-green-intro {
    background-color: rgb(3, 93, 93);
    background-image:
        url("/wp-content/uploads/2026/01/related-top.png"),
        linear-gradient(rgba(3, 93, 93, 0.9), rgba(3, 93, 93, 0.9)),
        url("/wp-content/uploads/2026/06/LM-PW-Test-2.png");
}

.light-green-intro {
    background-color: rgb(143, 214, 189);
    background-image:
        url("/wp-content/uploads/2026/01/related-top.png"),
        linear-gradient(rgba(143, 214, 189, 0.9), rgba(143, 214, 189, 0.9)),
        url("/wp-content/uploads/2026/06/LM-PW-Test-2.png");
}

.dark-purple-intro > * {
    max-width: 1440px!important;
}

/* Grey section with curve images */
.grey-section {
    background-image:
        url("/wp-content/uploads/2026/06/white-curve-invert.png"),
        url("/wp-content/uploads/2026/06/white-curve.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center -2px, center calc(100% + 2px);
    background-size: 101% auto, 101% auto;
    padding-top: 80px!important;
    padding-bottom: 120px!important;
}

/* FAQ grid layout */
.faq-grid > * > * {
    display: grid!important;
    grid-template-columns: repeat(2, 1fr);
}

.stk-block-accordion__heading > * {
    background: #62b5e5!important;
    border-radius: 20px!important;
}

.faq-section .stk--inner-svg svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon),
.faq-section .stk--inner-svg svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon) :is(g,path,rect,polygon,ellipse) {
    fill: #592983;
}

.stk-block-accordion__content > * {
    padding: 0 20px!important;
}

/* Tip section layout fix */
.tip-section .stk-row {
    display: flex!important;
    column-gap: 0!important;
}

.tip-section .stk-row > * {
    width: fit-content!important;
    flex: none!important;
}

/* --- Page-specific hide rules -------------------------------------------- */

.page-id-3084 .news-letter {
    background-color: #e5e5e5;
}

.page-id-174 .reviews-home,
.page-id-3066 .reviews-home,
.page-id-3084 .reviews-home {
    display: none;
}

.page-id-3066 .ig,
.page-id-3084 .ig {
    display: none;
}

.page-id-3066 .news-box,
.page-id-3084 .news-box {
    display: none;
}

/* --- USP link styling ---------------------------------------------------- */

.usps a {
    text-decoration: none;
}

/* --- Misc page-level overrides ------------------------------------------- */

.page-id-2814 .reviews-home {
    padding-top: 0;
}

/* Archive green underline spacing */
.archive .green-uline {
    margin-bottom: 50px;
}

/* Container rev (reviews section) */
.container.rev {
    padding-top: 50px;
    padding-bottom: 50px;
    
}

@media (min-width: 768px){
    .container.rev{
        margin-top: 50px;
    }
}

.reviews-container{
    background-color: #ffffff;
}

@media (max-width: 767px){
    .reviews-container h3{
        font-size: 2rem;
    }
}

body.single-product .product-type-mix-and-match .reviews-container,
body.single-product .product-includes-whats-inside .reviews-container{
    padding-top: 50px;
    margin-top: -50px;
}

/* Header bottom background-size fix */
.header-bottom {
    background-size: cover!important;
}

/* --- Stackable columns: force stacking on tablet and mobile ---------------- */
/* Stackable's default behaviour keeps columns side-by-side down to 768px.
   At those widths the columns become too narrow to read on phones/small tablets.
   We also force the column-wrapper and inner-blocks to fill their parent width
   because the flex layout inside .stk-block-column can collapse them to content-width. */
@media (max-width: 1023px) {
    .stk-block-columns .stk-row {
        flex-wrap: wrap !important;
    }
    /* Remove large horizontal padding that Stackable editors set on columns containers —
       on a 390px mobile screen, 100px each side leaves only 175px for columns to share.
       Specificity must be (0,2,0) to beat Stackable's per-instance !important class rule. */
    .stk-block.stk-block-columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .stk-block-columns .stk-block-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .stk-block-columns .stk-block-column .stk-column-wrapper,
    .stk-block-columns .stk-block-column .stk-block-content,
    .stk-block-columns .stk-block-column .stk-inner-blocks {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    /*
    .stk-block-text__text{
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    */

    /* Shape-blob columns: Stackable sets 150px left/right padding for desktop blob design.
       On mobile (390px) that leaves only 90px for content (single-char-per-line text).
       Solution: remove the blob mask-image and use a simple rounded rectangle instead —
       this eliminates mask-edge clipping AND restores readable content width. */
    .stk-block-column[class*="shape-p"] {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        border-radius: 40px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }


    /* Stackable blob backgrounds: background-size:contain leaves gaps on tall/narrow mobile blocks.
       Doubled class (0,2,0) beats Stackable's per-block (0,1,0) !important. */
    .stk-block.stk-block {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Stackable shape blocks: reduce heavy desktop padding on mobile.
       Also reset min-height so block auto-sizes to content. */
    .stk-block[class*="shape-"].stk-block {
        min-height: auto !important;
        padding-top: 48px !important;
        padding-right: 24px !important;
        padding-bottom: 48px !important;
        padding-left: 24px !important;
    }
}