/*
 * Plans Cards
 *
 * Redesign of the plans table ([plusheat_plans_table]) for pages built with
 * Page Sections. Every rule is scoped to .plans-cards, the wrapper added by
 * template-parts/sections/plans-comparison-table.php, so MSM, partner and other
 * pages using the shortcode keep the old look from plans/plans-table.css.
 *
 * Markup and JS are unchanged (plans-table.php / plan-table.js); this file only
 * restyles them. Loaded after plans-table.css.
 *
 * TABLE OF CONTENTS
 * 1.0  Header
 * 2.0  Options (customer, call-out fee, payment)
 * 3.0  Cards
 * 4.0  Most popular
 * 5.0  Responsive
 * 6.0  Disclaimer and spacing
 * 7.0  Phone slider (arrows, swipe hint; settings in js/plans/plans-cards.js)
 * 8.0  Plans with an includes box (What's included)
 */


/* 1.0 Header */

.plans-cards #plans_section {
    max-width: 2100px;
    margin-inline: auto;
}

/* The shortcode uses .container (1250px); match the page container the other
   sections use (.container-lg in flexible-page-template.css) so the plans line
   up with them on wide screens. */
.plans-cards .container {
    width: var(--container-lg-width);
}

@media (min-width: 1024px) {
    .plans-cards .container {
        width: min(var(--section-container-width), calc(100% - 2 * var(--section-container-padding))); /* same container as the other sections */
    }
}

.plans-cards .plans-header {
    text-align: left;
    margin-bottom: 0.5rem;
}

.plans-cards .plan-section-title {
    max-width: none;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: var(--font-semibold);
    line-height: 1.15;
    color: var(--color-heading);
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.plans-cards .plan-section-title__accent {
    color: var(--color-primary);
}

.plans-cards .plan-section-subtitle {
    max-width: 30rem;
    font-size: var(--font-sm);
    font-weight: var(--font-regular);
    line-height: 1.5;
    color: var(--color-text);
    margin: 0.75rem 0 2.25rem;
}

/* /1.0 Header */


/* 2.0 Options */

.plans-cards .options-select-wrapper {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
}

.plans-cards .select-wrapper {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.plans-cards .select-wrapper > .d-col-inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0;
}

.plans-cards .select-title-wrapper {
    margin-bottom: 0 !important;
}

.plans-cards .select-title {
    font-size: var(--font-xxs);
    font-weight: var(--font-regular);
    color: var(--color-text);
}

/* The track also has the old .d-flex-center helper (width: 100%, centred), which
   squeezed it narrower than its buttons; size it to the buttons instead. */
.plans-cards .select-options-wrapper {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    gap: 2px;
    background-color: var(--color-grey-light);
    border-radius: 0.875rem;
    padding: 4px;
    margin: 0;
}

.plans-cards .option-btn {
    flex: 0 0 auto;
    height: auto;
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    line-height: 1.2;
    color: var(--color-heading);
    border-radius: 0.625rem;
    padding: 0.625rem 1.25rem;
}

.plans-cards .option-btn.active {
    color: var(--color-white);
    background: var(--color-button);
    border-radius: 0.625rem;
}

/* /2.0 Options */


/* 3.0 Cards */

.plans-cards .plans-block {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.plans-cards .plans-content {
    align-items: stretch;
    gap: 1.25rem;
    padding-top: 2.5rem;
}

.plans-cards .plusheat-plan {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    background: var(--color-white);
    border: 2px solid transparent;
    border-radius: 1.5rem;
    box-shadow: 0 8px 30px rgba(22, 22, 22, 0.07);
    padding: 1.5rem;
}

.plans-cards .plusheat-plan > .d-col-inner {
    padding: 0;
}

/* Pills row (plans_cards_get_plan_pills_html()): offer badge, label, others. */
.plans-cards .plan-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.plans-cards .plan-pills > * {
    margin: 0;
}

.plans-cards .plan-discount-badge {
    position: static;
    width: auto;
    height: auto;
    font-size: calc(var(--font-xxs) - 1px);
    font-weight: var(--font-medium);
    line-height: 1.2;
    color: var(--color-primary);
    background-color: var(--color-secondary);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
}

.plans-cards .plan-discount-badge-image {
    width: auto;
    height: 2rem;
    background: none;
    padding: 0;
}

.plans-cards .plan-name {
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    color: var(--color-heading);
    margin-bottom: 0.25rem;
}

.plans-cards .plan-subtitle {
    font-size: var(--font-xs);
    font-weight: var(--font-regular);
    color: var(--color-text);
    margin-bottom: 1.5rem !important;
}

.plans-cards .plan-price-wrapper {
    margin: 0 0 1.25rem !important;
}

.plans-cards .plan-price del {
    font-size: var(--font-xs);
    font-weight: var(--font-regular);
    color: var(--color-text);
}

.plans-cards .plan-total-price {
    flex-wrap: wrap;
    gap: 0;
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: var(--font-bold);
    line-height: 1.1;
    color: var(--color-primary);
}

.plans-cards .plan-total-price .duration {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
}

.plans-cards .price-tagline {
    font-size: var(--font-xxs);
    color: var(--color-text);
    line-height: 1.35;
    /* Reserve two lines so the "Choose plan" buttons stay aligned across cards
       whether the offer terms wrap to one line or two. */
    min-height: 2.7em;
}

.plans-cards .plans-form {
    margin-bottom: 1.5rem !important;
}

.plans-cards .proceed-button,
.plans-cards .plusheat-plan .button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    text-transform: none;
    color: var(--color-white) !important;
    background-color: var(--color-button) !important;
    border: 0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.plans-cards .proceed-button:is(:hover, :focus) {
    background-color: var(--color-grey-dark) !important;
}

.plans-cards .proceed-button::after {
    display: none !important;
}

/* Inclusions list, under a divider. */
.plans-cards .plan-details {
    border-top: 1px solid #F5F5F5;
    padding-top: 1.5rem;
    margin-bottom: 1.25rem !important;
}

.plans-cards .plan-details ul li {
    font-size: var(--font-xs);
    color: var(--color-heading);
}

.plans-cards .plan-details ul li:not(:last-child) {
    margin-bottom: 0.75rem;
}

.plans-cards .plan-details ul li span {
    opacity: 1;
}

.plans-cards .plan-details-free {
    font-size: var(--font-xxs);
    margin-bottom: 1.25rem !important;
}

/* "See all inclusions and exclusions" as a plain text link. */
.plans-cards .plusheat-plan .see-all {
    margin: auto 0 0;
}

.plans-cards .plusheat-plan .see-all .btn-outline {
    display: inline-block;
    width: auto;
    font-size: var(--font-xxs);
    font-weight: var(--font-medium);
    text-align: left;
    color: var(--color-heading) !important;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.plans-cards .plusheat-plan .see-all .btn-outline::after {
    content: " \2192";
}

.plans-cards .plusheat-plan .see-all .btn-outline:hover {
    color: var(--color-primary) !important;
    background: none;
}

/* Included items: plain orange tick (replaces the round checkmark from plans-table.css). */
.plans-cards .plan-details ul li::before {
    background-image: url('/wp-content/uploads/2026/10/tick-primary.svg');
    background-size: 12px 13px;
}

/* Inclusions the plan does not have (every card lists the fullest plan's set). */
.plans-cards .plan-details ul li.plan-addon--excluded,
.plans-cards .plusheat-plan.highlighted-plan .plan-details ul li.plan-addon--excluded {
    color: var(--color-grey) !important;
}

body .plans-cards .plusheat-plan .plan-details ul li.plan-addon--excluded::before {
    background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat;
    filter: none;
}

/* /3.0 Cards */


/* 4.0 Most popular */

.plans-cards .highlighted-plan {
    background: var(--color-white);
    border-color: var(--color-primary);
}

/* The label sits in the pills row, after the offer badge. */
.plans-cards .plan-label {
    position: static;
    font-size: calc(var(--font-xxs) - 1px);
    font-weight: var(--font-medium);
    line-height: 1.2;
    background-color: var(--color-primary);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
}

/* plans-table.css turns all text in the highlighted plan white with
   `body:not(.page-single) .highlighted-plan * { color: ... !important }`.
   Inside .plans-cards everything inherits again, and each part gets its
   colour back below (a class more specific, so these win). */
.plans-cards .plusheat-plan.highlighted-plan * {
    color: inherit !important;
}

.plans-cards .plusheat-plan.highlighted-plan > .d-col-inner,
.plans-cards .plusheat-plan.highlighted-plan .plan-details ul li,
.plans-cards .plusheat-plan.highlighted-plan .see-all .btn-outline {
    color: var(--color-heading) !important;
}

.plans-cards .plusheat-plan.highlighted-plan .plan-subtitle,
.plans-cards .plusheat-plan.highlighted-plan .plan-price,
.plans-cards .plusheat-plan.highlighted-plan .price-tagline {
    color: var(--color-text) !important;
}

.plans-cards .plusheat-plan.highlighted-plan .plan-total-price,
.plans-cards .plusheat-plan.highlighted-plan .plan-details-free,
.plans-cards .plusheat-plan.highlighted-plan .plan-discount-badge,
.plans-cards .plusheat-plan.highlighted-plan .see-all .btn-outline:hover {
    color: var(--color-primary) !important;
}

.plans-cards .plusheat-plan.highlighted-plan .plan-discount-badge {
    background-color: var(--color-secondary);
}

.plans-cards .plusheat-plan.highlighted-plan .plan-label,
.plans-cards .plusheat-plan.highlighted-plan .proceed-button {
    color: var(--color-white) !important;
}

body .plans-cards .plusheat-plan.highlighted-plan .plan-details ul li::before {
    filter: none;
}

body .plans-cards .plusheat-plan.highlighted-plan .proceed-button {
    background-color: var(--color-primary) !important;
}

body .plans-cards .plusheat-plan.highlighted-plan .proceed-button:is(:hover, :focus) {
    background-color: var(--color-primary-dark) !important;
}

/* /4.0 Most popular */


/* 5.0 Responsive */

/* Tablet: two cards per row. */
@media screen and (max-width: 1140px) {
    .plans-cards .plans-content {
        flex-wrap: wrap;
    }

    .plans-cards .plusheat-plan {
        flex: 1 1 calc(50% - 0.625rem);
        width: auto;
    }
}

/* Phone: options stack, cards become the existing swipe slider. */
@media screen and (max-width: 768px) {
    .plans-cards .plan-section-title {
        text-transform: none;
    }

    .plans-cards .options-select-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    /* Label above, pills full width and equal. */
    .plans-cards .select-wrapper > .d-col-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .plans-cards .select-title-wrapper {
        justify-content: flex-start;
    }

    .plans-cards .select-options-wrapper {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
    }

    .plans-cards .option-btn {
        flex: 1 1 0;
        font-size: var(--font-xs);
    }

    .plans-cards .plans-block {
        margin-top: 0;
    }

    .plans-cards .plusheat-plan,
    .plans-cards .plusheat-plan:not(.highlighted-plan) {
        background-color: var(--color-white);
        padding: 1.25rem;
    }
}

/* /5.0 Responsive */


/* 6.0 Disclaimer and spacing */

/* White panel with a rounded top, like the other Page Sections panels
   (flexible-page-template.css: intro-tags / 11.0 shared panel). Straight after
   the hero it overlaps the photo by 61px, as the intro panel does. */
.plans-cards {
    position: relative;
    padding: 4rem 0 5rem;
    border-radius: 64px 64px 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -32px 46.6px -6px rgba(0, 0, 0, 0.05);
}

.page-hero + .plans-cards {
    margin-top: -61px;
}

.plans-cards__disclaimer {
    font-size: var(--font-xs);
    line-height: 1.5;
    color: var(--color-text);
    margin-top: 2rem;
}

.plans-cards__disclaimer p {
    margin: 0;
}

.plans-cards__disclaimer a:hover {
    color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    /* Bottom: 3.5rem + 32px, as the next panel (Feature Grid) overlaps the
       plans by 32px on phones. */
    .plans-cards {
        padding: 2.5rem 0 calc(3.5rem + 32px);
    }

    /* Phones: 32px corners and overlap, like the other panels. */
    .plans-cards,
    .page-hero + .plans-cards {
        margin-top: -32px;
        border-radius: 32px 32px 0 0;
    }

    .plans-cards__disclaimer {
        margin-top: 1.25rem;
    }
}

/* /6.0 Disclaimer and spacing */


/* 7.0 Phone slider */

/* plan-table.js starts the slider when $(window).width() < 768, which leaves out
   the scrollbar, so it can start a little above a 767px media query. These rules
   key off the slider itself (slick classes) instead of a screen width, so the
   arrows and the swipe hint always appear together with the slider. */

.plans-cards .plans-content.slick-slider {
    position: relative;
    display: block;
    padding-top: 1rem;
}

/* One card centred, with a slice of the previous / next card either side
   (centerMode + centerPadding in js/plans/plans-cards.js). slick clips the
   slides to .slick-list, which cut the card shadow off in a hard line, so the
   list does not clip; the whole plans section clips sideways instead (overflow-x:
   clip, no scroll box), so the shadow fades out and off-screen cards stay hidden. */
.plans-cards:has(.slick-initialized) {
    overflow-x: clip;
}

.plans-cards .plans-block .slick-list {
    overflow: visible;
    margin: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.plans-cards .plans-block .slick-track {
    display: flex !important;
}

.plans-cards .plans-block .slick-slide {
    height: inherit !important;
    margin: 0 0.5rem;
}

.plans-cards .slick-dots {
    display: none !important;
}

/* Round white buttons over the edges of the current card. */
.plans-cards__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-white);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(22, 22, 22, 0.12);
    padding: 0;
    cursor: pointer;
    transform: translateY(-50%);
}

.plans-cards__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid var(--color-heading);
    border-left: 2px solid var(--color-heading);
    transform: translate(-30%, -50%) rotate(-45deg);
}

.plans-cards__arrow--prev,
.plans-cards__arrow--next {
    /* Centred on the card edge: centerPadding (8px, plans-cards.js) + the slide
       margin (0.5rem) in from the slider, minus half the button (1.25rem). */
    --plans-arrow-offset: calc(8px + 0.5rem - 1.25rem);
}

.plans-cards__arrow--prev {
    left: var(--plans-arrow-offset);
}

.plans-cards__arrow--next {
    right: var(--plans-arrow-offset);
}

.plans-cards__arrow--next::before {
    transform: translate(-70%, -50%) rotate(135deg);
}

.plans-cards__arrow.slick-disabled {
    cursor: default;
}

.plans-cards__arrow.slick-disabled::before {
    opacity: 0.25;
}

/* The swipe hint only shows while the slider is on. */
.plans-cards__swipe {
    display: none;
    font-size: var(--font-xs);
    color: var(--color-text);
    margin: 1.5rem 0 0;
}

.plans-cards:has(.slick-initialized) .plans-cards__swipe {
    display: block;
}

/* /7.0 Phone slider */


/* 8.0 Plans with an includes box ("What's included", Annual Boiler Service)

   When the Plans Comparison Table layout has Plan Includes, the section is
   .plans-section--includes: a white numbered list box on the left and the plan
   card on the right (orange outline). Inside the card the wrappers are flattened
   (display: contents) so the payment toggle can sit under the plan name, as in
   Figma, without changing the markup the plan scripts rely on. */

.plans-cards .plans-section--includes .plan-includes-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0;
    border-radius: 0;
    background: none;
}

.plans-cards .plans-section--includes .plan-includes-wrapper *,
.plans-cards .plans-section--includes .plan-includes-wrapper *::before,
.plans-cards .plans-section--includes .plan-includes-wrapper *::after {
    box-sizing: border-box;
}

/* Includes box */
.plans-cards .plans-section--includes .plan-includes {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 2rem;
    border-radius: 2rem;
    background-color: var(--color-white);
    box-shadow: 0 8px 30px rgba(22, 22, 22, 0.07);
}

.plan-includes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.plan-includes__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--font-medium);
    line-height: 1.25;
    color: var(--color-heading);
}

.plan-includes__badge {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-size: var(--font-xxs);
    font-weight: var(--font-medium);
    line-height: 1.2;
    white-space: nowrap;
}

.plan-includes__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-includes__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: #F5F5F5;
}

.plan-includes__number {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: var(--font-rg);
    font-weight: var(--font-semibold);
    line-height: 1;
}

.plan-includes__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.plan-includes__item-title {
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1.3;
    color: var(--color-heading);
}

.plan-includes__item-text {
    font-size: var(--font-sm);
    line-height: 1.4;
    color: var(--color-text);
}

/* Plan card: the right-hand column becomes the card. */
.plans-cards .plans-section--includes .plans-content-wrapper {
    position: relative; /* the loader shown while switching covers the card only */
    display: flex;
    flex: 0 0 31%;
    flex-direction: column;
    width: auto;
    padding: 2.5rem;
    border: 2px solid var(--color-primary);
    border-radius: 2rem;
    background-color: var(--color-white);
}

.plans-cards .plans-section--includes .plans-content-wrapper :is(
    .plans-header,
    .options-select-wrapper,
    .select-wrapper,
    .select-wrapper > .d-col-inner,
    .plans-block,
    .plans-content,
    .plusheat-plan,
    .plusheat-plan > .d-col-inner
) {
    display: contents;
}

.plans-cards .plans-section--includes .plans-content-wrapper .select-title-wrapper {
    display: none;
}

/* Order inside the card: pills, name, subtitle, toggle, price, button, link. */
.plans-cards .plans-section--includes .plan-pills       { order: 1; }
.plans-cards .plans-section--includes .plan-name        { order: 2; }
.plans-cards .plans-section--includes .plan-subtitle    { order: 3; }
.plans-cards .plans-section--includes .select-options-wrapper { order: 4; }
.plans-cards .plans-section--includes .plan-price-wrapper { order: 5; }
.plans-cards .plans-section--includes .plans-form       { order: 7; }
.plans-cards .plans-section--includes .plan-details     { order: 6; }
.plans-cards .plans-section--includes .plan-card-link   { order: 8; }

.plans-cards .plans-section--includes .plan-pills {
    margin-bottom: 1.25rem;
}

.plans-cards .plans-section--includes .plan-name {
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}

.plans-cards .plans-section--includes .plan-subtitle:empty {
    display: none;
}

.plans-cards .plans-section--includes .select-options-wrapper {
    display: flex;
    width: 100%;
    margin: 0 0 2rem;
}

.plans-cards .plans-section--includes .option-btn {
    flex: 1 1 0;
}

.plans-cards .plans-section--includes .plan-price-wrapper {
    margin: 0 0 2rem !important;
}

.plans-cards .plans-section--includes .plan-total-price {
    font-size: 3rem;
}

.plans-cards .plans-section--includes .plans-form {
    margin-bottom: 1.5rem !important;
}

.plans-cards .plans-section--includes .proceed-button,
.plans-cards .plans-section--includes .plusheat-plan .button {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.plans-cards .plans-section--includes .proceed-button:is(:hover, :focus) {
    background-color: var(--color-primary-dark) !important;
}

.plan-card-link {
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    color: var(--color-heading);
    text-decoration: none;
}

.plan-card-link::after {
    content: " \2192";
}

.plan-card-link:hover,
.plan-card-link:focus {
    color: var(--color-primary);
}

@media screen and (max-width: 1199px) {
    .plans-cards .plans-section--includes .plans-content-wrapper {
        flex-basis: 36%;
        padding: 2rem;
    }
}

/* Heatable Exclusive (page 33228): the plan card sits beside the heading as well as
   the includes box, so there is no empty space next to the heading. Desktop only;
   tablets/phones keep the stacked layout below. */
@media screen and (min-width: 992px) {
    .page-id-33228 .plans-cards .plans-section--includes > .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 31%;
        column-gap: 1.5rem;
        align-items: start;
    }

    .page-id-33228 .plans-cards .plans-section--includes > .container > .plans-header {
        grid-column: 1;
        grid-row: 1;
    }

    .page-id-33228 .plans-cards .plans-section--includes .plan-includes-wrapper {
        display: contents;
    }

    .page-id-33228 .plans-cards .plans-section--includes .plan-includes {
        grid-column: 1;
        grid-row: 2;
    }

    .page-id-33228 .plans-cards .plans-section--includes .plans-content-wrapper {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .page-id-33228 .plans-cards .plans-section--includes > .container {
        grid-template-columns: minmax(0, 1fr) 36%;
    }
}

/* Tablets and phones: card first, then the list in one column. */
@media screen and (max-width: 991px) {
    .plans-cards .plans-section--includes .plan-includes-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .plans-cards .plans-section--includes .plans-content-wrapper {
        order: -1;
        flex-basis: auto;
    }
}

@media screen and (max-width: 768px) {
    .plans-cards .plans-section--includes .plan-includes {
        padding: 1rem;
        border-radius: 1.5rem;
    }

    .plans-cards .plans-section--includes .plans-content-wrapper {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

    .plan-includes__head {
        margin-bottom: 1rem;
    }

    .plan-includes__title {
        font-size: 1.25rem;
    }

    .plan-includes__list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Phone (Figma): 16px gutters, tighter card, compact check list. */
    .plans-cards:has(.plans-section--includes) .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    .plans-cards .plans-section--includes .plan-includes-wrapper {
        gap: 1.5rem;
    }

    .plans-cards .plans-section--includes .plan-pills {
        margin-bottom: 0.875rem;
    }

    .plans-cards .plans-section--includes .plan-name {
        margin-bottom: 0.75rem;
        font-size: 1.375rem;
        font-weight: var(--font-medium);
    }

    .plans-cards .plans-section--includes .select-options-wrapper {
        margin-bottom: 1.25rem;
    }

    .plans-cards .plans-section--includes .plan-price-wrapper {
        margin-bottom: 1rem !important;
    }

    .plans-cards .plans-section--includes .plan-total-price {
        font-size: 2.25rem;
    }

    .plans-cards .plans-section--includes .plans-form {
        margin-bottom: 0.875rem !important;
    }

    .plans-cards .plans-section--includes .proceed-button {
        font-size: var(--font-rg);
    }

    .plan-includes__list {
        gap: 0.625rem;
    }

    .plan-includes__item {
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.875rem;
    }

    .plan-includes__number {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        font-size: var(--font-xs);
    }

    .plan-includes__item-title {
        font-size: var(--font-sm);
        font-weight: var(--font-medium);
    }

    .plan-includes__item-text {
        font-size: var(--font-xs);
    }
}

/* The "Not sure which plan fits?" line is for comparing plans; not shown here. */
.plans-cards:has(.plans-section--includes) .plans-cards__disclaimer {
    display: none;
}

/* /8.0 Plans with an includes box */

/* Includes layout: the button is the last item, so drop its bottom margin. */
.plans-cards .plans-section--includes .plans-form { margin-bottom: 0; }

/* Includes layout: small terms note under the inclusion checks (excess/refund). */
.plans-cards .plan-excess-note { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; }
.plans-cards .plan-excess-note span { font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-muted, #6b6b6b); font-weight: 600; }

/* Includes layout: checks sit directly under the price, so drop the divider and
   extra top padding (was leaving a big empty gap), and force the button's
   bottom margin off since it is the last item in the card. */
.plans-cards .plans-section--includes .plan-details {
    border-top: none !important;
    padding-top: 0.25rem !important;
}
.plans-cards .plans-section--includes .plans-form:last-child {
    margin-bottom: 0 !important;
}

/* Repair & Care on the Flexible template: suppress the old repair-care.css
   pseudo-content (upfront/ongoing/excess) which overflows the new card. The card
   shows that info via the price tagline + plan_excess_note fields instead.
   (Belt-and-braces alongside not enqueuing repair-care.css on this template.) */
.plans-cards .repair-care-total-price::before,
.plans-cards .repair-care-total-price::after,
.plans-cards .plusheat-plan .plans-form::before { content: none !important; }

/* Free Systems Cover: no panel curve/shadow on the first section (plans) since
   it sits straight under the Heatable header, not over a hero photo. */
#header_logo + .plans-cards { border-radius: 0 !important; box-shadow: none !important; }

/* Tighten the gap below the price block in the includes layout. */
.plans-cards .plans-section--includes .plan-price-wrapper { margin-bottom: 1rem !important; }

/* Free Systems Cover: no upward overlap on mobile for the first section (it sits
   under the Heatable header, nothing to overlap). */
@media screen and (max-width: 768px) {
    #header_logo + .plans-cards { margin-top: 0 !important; }
}

/* Free Systems Cover: align the Heatable header logo's container with the
   full-width includes content below it (both start at the 16px gutter). */
#header_logo:has(+ .plans-cards) .container {
    width: min(var(--section-container-width), calc(100% - 40px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    #header_logo:has(+ .plans-cards) .container {
        width: min(var(--section-container-width), calc(100% - 2 * var(--section-container-padding)));
    }
}

/* Free Systems Cover (Heatable): use the plain check tick (repair-care style) in
   Heatable green, overriding the round Heatable tick on this card. */
#header_logo + .plans-cards .plan-details ul li::before {
    background-image: url(/wp-content/uploads/2026/10/tick-heatable.svg) !important;
    background-size: 12px 13px !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* Free Systems Cover: tighten the gap between the price and the tick list. */
#header_logo + .plans-cards .plan-details { margin-top: 0 !important; }