/* ============================================================================
   Phase 2 storefront skin — shared by the Deals and Juices pages.

   Everything is scoped under .ck-v2 so the shared product-card / banner / tab
   markup keeps its original styling on every other page. Per-page accent
   colours come from the .ck-v2--<page> modifier, so a new page needs a hero
   and a palette, not a copy of this file.
   ========================================================================== */

.ck-v2 {
    --v2-accent: #b3991f;
    --v2-accent-deep: #8c7a1b;
    --v2-accent-soft: #f4f2e4;
    --v2-ink: #1f1f1f;
    --v2-muted: #6f6f6f;
    --v2-gutter: clamp(16px, 5.5vw, 80px);
    --v2-section-pad: clamp(30px, 3.6vw, 52px);

    display: block;
    background: #fff;
    /* Sections only carry top padding, so without this the last one — grid,
       banner or promo row — sits flush against the footer. */
    padding-bottom: clamp(36px, 4vw, 60px);
}

/* Juices runs the brand green in place of the Deals gold. */
.ck-v2--juices {
    --v2-accent: #1a8f12;
    --v2-accent-deep: #0c7b09;
    --v2-accent-soft: #e8f4e6;
}

/* Smoothies runs the berry pink. */
.ck-v2--smoothies {
    --v2-accent: rgba(178, 20, 64, 1);
    --v2-accent-deep: #8e1033;
    --v2-accent-soft: #fde4e6;
    --v2-hero-bg: rgba(253, 228, 230, 1);
}

/* Combo cards pick up the page tint so the section reads as one family.
   Doubled class beats the later `.ck-v2 .v2-combo-card` default on specificity
   rather than relying on source order. */
.ck-v2.ck-v2--smoothies .v2-combo-card {
    background: #fdf1f5;
}

/* The design mirrors the promo panel to the right on Smoothies. Left at single
   specificity on purpose so the ≤1199px stacking rule still overrides it. */
.ck-v2--smoothies .v2-promo-layout--with-promo {
    flex-direction: row-reverse;
}

/* The gap under the hero was the first section's top padding showing through as
   white. Same distance, just moved inside the hero so its pink runs unbroken
   down to the first heading — no layout shift, no white strip. */
.ck-v2--smoothies .smoothies-hero {
    padding-bottom: var(--v2-section-pad);
}

.ck-v2--smoothies .smoothies-dynamic-sections > :first-child.v2-products-section {
    padding-top: 0;
}

.ck-v2--smoothies .smoothies-dynamic-sections > :first-child.home-multiple-banner,
.ck-v2--smoothies .smoothies-dynamic-sections > :first-child.home-image-banner {
    margin-top: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* Clears the 138px fixed header the same way .home-banner's margin-top does on
   every other page, minus the 26px the stray .google-play-btn anchor already
   occupies in the flow — so the hero sits flush under the nav bar.
   Phones need none of it: style2.css already pads `main` by 120px there. */
.ck-v2 .deals-hero {
    margin-top: 112px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #fbf6d8 0%, #f9f2c6 55%, #f7efbe 100%);
    padding: clamp(34px, 4.4vw, 62px) var(--v2-gutter) clamp(24px, 3vw, 42px);
    min-height: clamp(300px, 31vw, 450px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ck-v2 .deals-hero__leaf {
    position: absolute;
    top: 0;
    z-index: 1;
    width: clamp(84px, 12vw, 172px);
    height: auto;
    pointer-events: none;
    user-select: none;
}

.ck-v2 .deals-hero__leaf--left {
    left: 0;
}

/* No scaleX flip — hero-leaf1 is already drawn for this corner. */
.ck-v2 .deals-hero__leaf--right {
    right: 0;
}

.ck-v2 .deals-hero__combo {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: clamp(150px, 26vw, 400px);
    height: auto;
    pointer-events: none;
    user-select: none;
}

.ck-v2 .deals-hero__combo--left {
    left: clamp(-30px, -1.5vw, 0px);
}

.ck-v2 .deals-hero__combo--right {
    right: clamp(-30px, -1.5vw, 0px);
}

.ck-v2 .deals-hero__inner {
    position: relative;
    z-index: 3;
    max-width: 720px;
    margin: 0 auto;
}

.ck-v2 .deals-hero__pill {
    display: inline-block;
    background: #f2e7ab;
    color: var(--v2-accent-deep);
    font-size: clamp(9px, 0.85vw, 12px);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 999px;
    margin-bottom: clamp(10px, 1.2vw, 18px);
}

.ck-v2 .deals-hero__title {
    font-size: clamp(28px, 4.2vw, 60px);
    line-height: 1.14;
    font-weight: 800;
    color: var(--v2-ink);
    margin: 0 0 clamp(10px, 1.3vw, 20px);
    letter-spacing: -0.01em;
}

.ck-v2 .deals-hero__title-accent {
    display: block;
    color: var(--v2-accent);
}

.ck-v2 .deals-hero__text {
    font-size: clamp(12px, 1.12vw, 16px);
    line-height: 1.65;
    color: #55554d;
    margin: 0 0 clamp(16px, 2vw, 28px);
}

.ck-v2 .deals-hero__cta {
    display: inline-block;
    background: var(--v2-accent-deep);
    color: #fff;
    font-size: clamp(13px, 1.12vw, 16px);
    font-weight: 600;
    padding: clamp(10px, 0.95vw, 15px) clamp(22px, 2.4vw, 36px);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ck-v2 .deals-hero__cta:hover {
    background: #776718;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(140, 122, 27, 0.28);
}

/* ── Juices hero ──────────────────────────────────────────────────────── */

/* Same header clearance rule as the Deals hero — see the note above it. */
.ck-v2 .juices-hero {
    margin-top: 112px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #d9e8bd 0%, #e2eecb 48%, #edf5df 100%);
    padding: clamp(28px, 3vw, 44px) var(--v2-gutter);
}

.ck-v2 .juices-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 48px);
    min-height: clamp(240px, 24vw, 350px);
}

.ck-v2 .juices-hero__copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 620px;
}

.ck-v2 .juices-hero__label {
    display: block;
    color: var(--v2-accent);
    font-size: clamp(10px, 0.95vw, 14px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: clamp(6px, 0.8vw, 12px);
}

.ck-v2 .juices-hero__title {
    margin: 0 0 clamp(10px, 1.3vw, 18px);
    font-size: clamp(28px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--v2-ink);
    text-transform: uppercase;
}

.ck-v2 .juices-hero__title-line {
    display: block;
}

.ck-v2 .juices-hero__title-accent {
    color: var(--v2-accent);
}

.ck-v2 .juices-hero__text {
    margin: 0 0 clamp(16px, 2vw, 26px);
    font-size: clamp(12px, 1.1vw, 16px);
    line-height: 1.7;
    color: #4c5545;
}

.ck-v2 .juices-hero__cta {
    display: inline-block;
    background: var(--v2-accent-deep);
    color: #fff;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 600;
    padding: clamp(10px, 0.95vw, 15px) clamp(20px, 2.2vw, 32px);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ck-v2 .juices-hero__cta:hover {
    background: #095c07;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(12, 123, 9, 0.25);
}

.ck-v2 .juices-hero__media {
    flex: 0 1 auto;
    width: 46%;
    max-width: 640px;
    display: flex;
    justify-content: flex-end;
}

.ck-v2 .juices-hero__media img {
    width: 100%;
    height: auto;
    max-height: clamp(230px, 26vw, 380px);
    object-fit: contain;
    object-position: bottom right;
}

/* ── Smoothies hero ───────────────────────────────────────────────────── */

/* Mirror of the Juices hero: artwork on the left, copy on the right. The
   artwork is a full-bleed opaque block (not a cut-out), so it fills its half
   edge to edge rather than floating on the background. */
.ck-v2 .smoothies-hero {
    margin-top: 112px;
    position: relative;
    overflow: hidden;
    background: var(--v2-hero-bg);
    display: flex;
    align-items: stretch;
    /* The type scale caps at 46px, so the box and artwork cap too — otherwise
       the image keeps growing on wide screens and dwarfs the copy. */
    min-height: clamp(240px, 25vw, 360px);
}

.ck-v2 .smoothies-hero__media {
    position: relative;
    flex: 0 0 auto;
    width: 46%;
    max-width: 660px;
    overflow: hidden;
}

/* The artwork carries its own pink backdrop, a shade deeper than the hero's on
   its right side. Fading that edge into the hero colour removes the hard seam
   where the image block ends, so it reads as one continuous banner. */
.ck-v2 .smoothies-hero__media::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 22%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(253, 228, 230, 0) 0%, var(--v2-hero-bg) 92%);
}

/* A shallow bottom fade only — enough to settle the artwork's glossy floor into
   the hero pink, but not so deep that it erases the plate's curved edge, which
   the design keeps visible. */
.ck-v2 .smoothies-hero__media::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 7%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(253, 228, 230, 0) 0%, var(--v2-hero-bg) 96%);
}

.ck-v2 .smoothies-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ck-v2 .smoothies-hero__copy {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    padding: clamp(20px, 2.4vw, 34px) var(--v2-gutter) clamp(20px, 2.4vw, 34px) clamp(18px, 2.6vw, 40px);
}

.ck-v2 .smoothies-hero__label {
    display: block;
    color: var(--v2-accent);
    font-size: clamp(10px, 0.95vw, 14px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: clamp(6px, 0.8vw, 12px);
}

.ck-v2 .smoothies-hero__title {
    margin: 0 0 clamp(10px, 1.3vw, 18px);
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--v2-ink);
    text-transform: uppercase;
}

.ck-v2 .smoothies-hero__title-line {
    display: block;
}

.ck-v2 .smoothies-hero__title-accent {
    color: var(--v2-accent);
}

.ck-v2 .smoothies-hero__text {
    margin: 0 0 clamp(16px, 2vw, 26px);
    font-size: clamp(12px, 1.1vw, 16px);
    line-height: 1.7;
    color: #55474b;
    max-width: 520px;
}

.ck-v2 .smoothies-hero__cta {
    display: inline-block;
    background: var(--v2-accent);
    color: #fff;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 600;
    padding: clamp(10px, 0.95vw, 15px) clamp(20px, 2.2vw, 32px);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ck-v2 .smoothies-hero__cta:hover {
    background: var(--v2-accent-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(194, 24, 91, 0.25);
}

/* ── Section shell + heading ──────────────────────────────────────────── */

.ck-v2 .v2-products-section {
    padding: var(--v2-section-pad) 0 0;
}

.ck-v2 .v2-container {
    padding: 0 var(--v2-gutter);
}

.ck-v2 .v2-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(14px, 1.7vw, 24px);
}

.ck-v2 .v2-section-title {
    font-size: clamp(18px, 2.1vw, 30px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: var(--v2-ink);
}

.ck-v2 .v2-section-title__rest {
    color: var(--v2-accent);
}

.ck-v2 .v2-section-subtitle {
    margin: 6px 0 0;
    font-size: clamp(12px, 1vw, 14px);
    color: var(--v2-muted);
}

.ck-v2 .v2-see-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 600;
    color: var(--v2-accent);
    text-decoration: none;
    white-space: nowrap;
    padding-top: 4px;
}

.ck-v2 .v2-see-all:hover {
    color: var(--v2-accent-deep);
}

/* ── Product grid — 5 up on desktop ───────────────────────────────────── */

.ck-v2 .v2-product-grid {
    margin: 0 -11px;
}

.ck-v2 .v2-col {
    width: 20%;
    padding: 0 11px 10px !important;
}

.ck-v2 .v2-product-grid .product-card {
    padding: 0 0 14px;
    border-radius: 12px;
}

.ck-v2 .v2-product-grid .product-card .img-area {
    height: auto;
    aspect-ratio: 1 / 1.02;
    border-radius: 12px;
    background: #f4f4f4;
    border: 1px solid #efefef;
}

/* The image box is sized by the card, not by the picture, so the anchor and
   placeholder have to fill it and centre their child — a percentage-width <img>
   left the smaller picture flush against the placeholder's left edge. Bounding
   with max-width/max-height (instead of width/height) also keeps every product
   shot at its natural aspect ratio inside the inset. */
.ck-v2 .v2-product-grid .product-card .img-area > a,
.ck-v2 .v2-product-grid .product-card .img-placeholder {
    width: 100%;
    height: 100%;
}

.ck-v2 .v2-product-grid .product-card .img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ck-v2 .v2-product-grid .product-card .img-area img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.ck-v2 .v2-product-grid .product-card .info {
    padding-top: 10px;
}

/* Reserve both clamped lines so the weight line — and therefore the row's
   baseline grid — stays level whether a name wraps or not. */
.ck-v2 .v2-product-grid .product-card .prod-name {
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 600;
    color: #262626;
    line-height: 1.4;
    min-height: 2.8em;
    margin: 4px 0 0;
}

.ck-v2 .v2-product-grid .product-card .prod-qty {
    font-size: clamp(10px, 0.9vw, 13px);
    color: #8b8b8b;
}

/* ── Banners rendered by the shared poster / multiple-banner partials ─── */

/* Line the banners up with the product grid — the shared partials hard-code a
   60px inline padding, the Deals skin uses the wider --v2-gutter. */
.ck-v2 .home-image-banner:not(.home-image-banner--full),
.ck-v2 .home-multiple-banner:not(.home-multiple-banner--full) {
    padding-inline: var(--v2-gutter);
    margin-top: clamp(26px, 3.4vw, 48px);
    margin-bottom: 0;
}

.ck-v2 .home-image-banner__image,
.ck-v2 .home-multiple-banner__image {
    border-radius: 14px;
}

/* Banners keep their own aspect ratio and are never cropped — admin artwork is
   authored to be seen whole. A pair only looks the same height when both files
   share an aspect ratio; forcing it with object-fit:cover ate the headline and
   CTA on the wider one. */
.ck-v2 .home-multiple-banner__row--pair {
    gap: clamp(10px, 1.3vw, 18px);
    align-items: start;
}

/* ── Tab pills ────────────────────────────────────────────────────────── */

.ck-v2 .v2-tab-nav {
    gap: 10px;
    margin-bottom: clamp(14px, 1.7vw, 22px);
    flex-wrap: wrap;
}

.ck-v2 .v2-tab-nav .nav-link {
    border-radius: 999px;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #4a4a4a;
    background: var(--v2-accent-soft);
}

.ck-v2 .v2-tab-nav .nav-link.active {
    background: var(--v2-accent);
    color: #fff;
}

/* ── "Perfect Health Combos" wide cards ───────────────────────────────── */

/* Promo panel beside the cards — the "Popular Juices" shape. Without a promo
   image the grid simply fills the row, which is the Deals shape. */
/* align-items:flex-start is load-bearing: stretching the wrapping card grid to
   the panel's height breaks its flex-line maths and every column inflates to
   the full container height. The panel stretches to the grid instead. */
.ck-v2 .v2-promo-layout--with-promo {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 1.6vw, 24px);
}

.ck-v2 .v2-promo-layout--with-promo .v2-promo-panel {
    flex: 0 0 auto;
    align-self: stretch;
    /* position:relative + an absolutely filled image means the panel adds no
       intrinsic height, so the card grid sets the row height and the panel
       matches it — exactly the proportions in the design. */
    position: relative;
    width: 31%;
    max-width: 400px;
    border-radius: 14px;
    overflow: hidden;
}

.ck-v2 .v2-promo-layout--with-promo .v2-promo-panel img {
    position: absolute;
    inset: 0;
}

.ck-v2 .v2-promo-panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ck-v2 .v2-promo-layout--with-promo .v2-combo-grid {
    flex: 1 1 auto;
    min-width: 0;
}

.ck-v2 .v2-combo-grid {
    margin: 0 -9px;
}

.ck-v2 .v2-combo-col {
    padding: 0 9px 18px;
}

.ck-v2 .v2-combo-card {
    position: relative;
    /* .card ships flex-direction:column — the combo card lays out side by side. */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    height: 100%;
    min-height: 176px;
    padding: 16px 0 16px 18px;
    border: none !important;
    border-radius: 14px;
    background: #f6f8ea;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ck-v2 .v2-combo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(31, 31, 31, 0.08);
}

/* .pro-orange-badge is only styled inside .frequent-sec / .product-section, so
   the combo card restates the same treatment for its own corner. */
.ck-v2 .v2-combo-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: inline-block;
    background-color: #f07c00;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    padding: 4px 14px;
    border-radius: 0 0 10px 0;
}

.ck-v2 .v2-combo-card__body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* clears the corner badge */
    padding-top: 18px;
}

.ck-v2 .v2-combo-card__link {
    display: block;
    text-decoration: none;
}

/* .price-row/.price-now/.price-old are only styled inside .frequent-sec /
   .product-section, so restate them for the combo card's own layout. */
.ck-v2 .v2-combo-card__price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ck-v2 .v2-combo-card__price .price-now {
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 600;
    color: #111827;
}

.ck-v2 .v2-combo-card__price .price-old {
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 400;
    color: #6b7280;
    text-decoration: line-through;
}

.ck-v2 .v2-combo-card__name {
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 600;
    color: #262626;
    line-height: 1.4;
    min-height: 2.8em;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ck-v2 .v2-combo-card__qty {
    font-size: clamp(11px, 0.9vw, 13px);
    color: #8b8b8b;
    margin-bottom: 12px;
}

.ck-v2 .v2-combo-card__media {
    flex: 0 0 auto;
    width: 44%;
    max-width: 178px;
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
}

.ck-v2 .v2-combo-card__media .img-placeholder {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
}

.ck-v2 .v2-combo-card__media img {
    width: 100%;
    height: auto;
    max-height: 152px;
    object-fit: contain;
    object-position: bottom right;
}

/* Add-to-cart: the label shows while the item is not in the cart; once the
   shared binder adds .expanded the button collapses to the "+" beside the
   quantity stepper, exactly like the grid cards. */
.ck-v2 .v2-combo-card .cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: auto;
    min-width: 118px;
    border: none;
    border-radius: 8px;
    background: var(--v2-accent-deep);
    cursor: pointer;
    overflow: hidden;
    transition: min-width 0.3s ease, background 0.3s ease;
}

.ck-v2 .v2-combo-card .cart-btn .counter-area {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    height: 100%;
}

.ck-v2 .v2-combo-card .cart-btn.expanded .counter-area {
    display: flex;
}

.ck-v2 .v2-combo-card .minus-btn {
    width: 38px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ck-v2 .v2-combo-card .count-val {
    min-width: 26px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.ck-v2 .v2-combo-card .plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 18px;
    background: none;
    border: 0;
    cursor: pointer;
}

.ck-v2 .v2-combo-card .cart-btn.expanded .plus-icon {
    padding: 0;
    width: 38px;
}

.ck-v2 .v2-combo-card__add-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.ck-v2 .v2-combo-card__add-plus {
    display: none;
}

.ck-v2 .v2-combo-card .cart-btn.expanded .v2-combo-card__add-label {
    display: none;
}

.ck-v2 .v2-combo-card .cart-btn.expanded .v2-combo-card__add-plus {
    display: block;
}

.ck-v2 .v2-combo-card .product-stock {
    margin-bottom: 8px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .ck-v2 .v2-col {
        width: 25%;
    }

    .ck-v2 .v2-combo-card__media {
        max-width: 150px;
    }
}

@media (max-width: 991.98px) {
    .ck-v2 .deals-hero__combo {
        width: 30vw;
    }

    .ck-v2 .v2-col {
        width: 33.3333%;
    }
}

@media (max-width: 767.98px) {
    .ck-v2 .deals-hero {
        margin-top: 0;
        min-height: 0;
        padding-bottom: 30vw;
    }

    /* Phones: stack the copy above the artwork and centre it. */
    .ck-v2 .juices-hero {
        margin-top: 0;
        text-align: center;
    }

    .ck-v2 .juices-hero__inner {
        flex-direction: column;
        min-height: 0;
        gap: 18px;
    }

    .ck-v2 .juices-hero__copy {
        max-width: 100%;
    }

    .ck-v2 .juices-hero__text br {
        display: none;
    }

    .ck-v2 .juices-hero__media {
        width: 100%;
        max-width: 460px;
        justify-content: center;
        margin: 0 auto;
    }

    .ck-v2 .juices-hero__media img {
        object-position: bottom center;
    }

    /* Smoothies: artwork on top, copy beneath. */
    .ck-v2 .smoothies-hero {
        margin-top: 0;
        flex-direction: column;
        min-height: 0;
    }

    .ck-v2 .smoothies-hero__media {
        width: 100%;
        max-width: 100%;
        height: clamp(190px, 52vw, 290px);
    }

    /* Stacked: there is no right-hand seam any more, and ::before already
       handles the bottom, so retire the side fade. */
    .ck-v2 .smoothies-hero__media::after {
        display: none;
    }

    .ck-v2 .smoothies-hero__media::before {
        height: 22%;
    }

    .ck-v2 .smoothies-hero__copy {
        align-self: auto;
        text-align: center;
        padding: 22px var(--v2-gutter) 26px;
    }

    .ck-v2 .smoothies-hero__text {
        max-width: 100%;
    }

    .ck-v2 .smoothies-hero__text br {
        display: none;
    }

    .ck-v2 .deals-hero__combo {
        width: 42vw;
    }

    .ck-v2 .deals-hero__inner {
        max-width: 100%;
    }

    .ck-v2 .deals-hero__text br {
        display: none;
    }

    .ck-v2 .v2-col {
        width: 50%;
    }

    .ck-v2 .v2-combo-card {
        min-height: 132px;
        padding: 14px 0 14px 14px;
    }

}

/* Below large desktop the promo panel stacks above its cards rather than
   squeezing them — side by side at 1024px each card was only ~296px wide. */
@media (max-width: 1199.98px) {
    .ck-v2 .v2-promo-layout--with-promo {
        flex-direction: column;
    }

    .ck-v2 .v2-promo-layout--with-promo .v2-promo-panel {
        align-self: auto;
        position: relative;
        width: 100%;
        max-width: 100%;
        height: clamp(180px, 32vw, 260px);
    }
}

@media (max-width: 575.98px) {
    .ck-v2 .v2-product-grid {
        margin: 0 -6px;
    }

    .ck-v2 .v2-col {
        padding: 0 6px 10px !important;
    }

    .ck-v2 .deals-hero__leaf {
        width: 26vw;
    }
}