/**
 * Product USP Badge Blocks - frontend styles
 *
 * Shared styles for the five "Why Cake Club" USP badges
 * (cakeclub/usp-stand-out ... cakeclub/usp-frozen-fresh).
 *
 * Decorative artwork (arrows, splashes, pennants, roundels) is not
 * included yet; hooks for it can be added per-block via the
 * .cakeclub-usp-stand-out etc. modifier classes.
 */

.cakeclub-usp {
    --cc-usp-red: #ff0000;
    --cc-usp-pink: #f9c9cf;
    /* Selectable font/box colour ("ink"); defaults to the brand red and is
       overridden inline per badge via the "Font colour" option. */
    --cc-usp-ink: var(--cc-usp-red);
    /* Selectable arrow colour; defaults to the brand red and is overridden
       inline per badge via the "Arrow colour" option. Pink-arrow badges
       (USP 4/5) reset this to the brand pink below. */
    --cc-usp-arrow: var(--cc-usp-red);
    box-sizing: border-box;
    margin: 0.5rem 0 1.25rem;
}

/* Inline arrow SVGs: fill is driven by --cc-usp-arrow so the colour can be
   overridden per badge. (Editor previews still use <img> and show the native
   colour.) */
.cakeclub-usp-arrow,
.cakeclub-usp-arrow path {
    fill: var(--cc-usp-arrow);
}

/* USP 4/5 arrows are the brand pink by default */
.cakeclub-usp-pre-portioned,
.cakeclub-usp-frozen-fresh {
    --cc-usp-arrow: var(--cc-usp-pink);
}

.cakeclub-usp *,
.cakeclub-usp *::before,
.cakeclub-usp *::after {
    box-sizing: inherit;
}

/* Float + text wrap */
.cakeclub-usp.alignright {
    float: right;
    width: min(320px, 45%);
    margin-left: 1.75rem;
}

.cakeclub-usp.alignleft {
    float: left;
    width: min(320px, 45%);
    margin-right: 1.75rem;
}

/* Artwork composition badges (USP 2) need a little more room */
.cakeclub-usp--artwork.alignright,
.cakeclub-usp--artwork.alignleft {
    width: min(440px, 52%);
}

/* ============================================================
   Artwork composition (USP 2: Designed to keep customers coming back)
   Everything is positioned as a % of the composition box and sized in
   container-query units (cqw) so the whole thing scales with the float.
   ============================================================ */
.cakeclub-usp--artwork {
    container-type: inline-size;
}

.cakeclub-usp-comp {
    position: relative;
    width: 100%;
    aspect-ratio: 1.72 / 1;
}

.cakeclub-usp-comp > * {
    position: absolute;
}

/* Polaroid card (hand-drawn frame PNG as background, photo sits in window) */
.cakeclub-usp-polaroid {
    left: 48%;
    top: 14%;
    width: 36%;
    aspect-ratio: 133 / 150;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: 2;
}

.cakeclub-usp-photo {
    position: absolute;
    top: 13%;
    left: 9%;
    right: 9%;
    bottom: 8%;
    overflow: hidden;
    /* Tilt the photo to match the hand-drawn (angled) polaroid frame */
    transform: rotate(4deg);
}

.cakeclub-usp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cakeclub-usp-photo-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        #e9e7da,
        #e9e7da 8px,
        #f1efe6 8px,
        #f1efe6 16px
    );
}

/* Coffee cup (image 2) sits to the right, overlapping the polaroid */
.cakeclub-usp-cup {
    right: -7%;
    top: 18%;
    width: 28%;
    z-index: 3;
}

.cakeclub-usp-cup img {
    width: 100%;
    height: auto;
    display: block;
}

/* Heart overlay on the upper-right of the photo */
.cakeclub-usp-heart {
    left: 72%;
    top: 24%;
    width: 9%;
    height: auto;
    z-index: 4;
}

/* Arrow pointing in toward the photo (tip kept clear of the card) */
.cakeclub-usp-arrow {
    left: 24%;
    top: 33%;
    width: 22%;
    height: auto;
    z-index: 4;
    display: block;
}

/* Text: script intro + bold caption, both at a slight angle, red */
.cakeclub-usp--artwork .cakeclub-usp-intro,
.cakeclub-usp--artwork .cakeclub-usp-caption {
    color: var(--cc-usp-ink);
    z-index: 5;
    margin: 0;
    line-height: 1;
}

.cakeclub-usp--artwork .cakeclub-usp-intro {
    left: 0%;
    top: 48%;
    font-family: 'BNRendallScript', cursive;
    font-size: 8.5cqw;
    white-space: nowrap;
    transform: rotate(-5deg);
    transform-origin: left center;
}

.cakeclub-usp--artwork .cakeclub-usp-caption {
    left: 0%;
    top: 60%;
    font-family: 'Mindset', sans-serif;
    font-weight: 700;
    font-size: 6cqw;
    line-height: 0.95;
    text-transform: uppercase;
}

/* Force the caption to two deliberate lines (KEEP CUSTOMERS / COMING BACK) */
.cakeclub-usp-caption-line {
    display: block;
    white-space: nowrap;
}

/* Star accent (USP 1) */
.cakeclub-usp-star {
    width: 10%;
    height: auto;
    z-index: 4;
}

/* ============================================================
   USP 1 (stand-out): photo on the LEFT, text on the RIGHT, arrow
   points left, star accent. Caption is a big line + a smaller line.
   ============================================================ */
.cakeclub-usp-stand-out .cakeclub-usp-comp {
    aspect-ratio: 1.6 / 1;
}

.cakeclub-usp-stand-out .cakeclub-usp-polaroid {
    left: 2%;
    top: 8%;
    width: 38%;
    aspect-ratio: 125 / 150;
}

.cakeclub-usp-stand-out .cakeclub-usp-photo {
    top: 7%;
    left: 11%;
    right: 11%;
    bottom: 7%;
    /* Match the hand-drawn (angled) dashed frame */
    transform: rotate(-7deg);
}

.cakeclub-usp-stand-out .cakeclub-usp-arrow {
    left: 39%;
    top: 6%;
    width: 22%;
    /* nudge down a bit and left by ~45% of the arrow's own width */
    transform: translate(-45%, 35%);
}

.cakeclub-usp-stand-out .cakeclub-usp-star {
    left: 89%;
    top: 24%;
    /* up by half a star size (horizontal offset removed) */
    transform: translate(0, -50%);
}

.cakeclub-usp-stand-out .cakeclub-usp-intro {
    left: 46%;
    right: 2%;
    top: 33%;
    font-size: 6.5cqw;
    display: block;
    text-align: center;
    transform-origin: center;
}

.cakeclub-usp-stand-out .cakeclub-usp-caption {
    left: 46%;
    right: 2%;
    top: 45%;
    display: block;
    text-align: center;
}

.cakeclub-usp-stand-out .cakeclub-usp-caption-line:first-child {
    font-size: 9cqw;
}

.cakeclub-usp-stand-out .cakeclub-usp-caption-line:last-child {
    font-size: 5cqw;
}

/* ============================================================
   USP 3 (finished-by-hand): photo on the LEFT, red arrow points
   left, pink starburst cloud holds the number + FINISHED BY / HAND,
   Cake Club flag on the right.
   ============================================================ */
.cakeclub-usp-finished-by-hand.alignright,
.cakeclub-usp-finished-by-hand.alignleft {
    width: min(480px, 56%);
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-comp {
    aspect-ratio: 2.15 / 1;
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-photo {
    top: 12%;
    left: 0%;
    right: auto;
    bottom: auto;
    width: 30%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    /* nudged right by 20% of its own width so the arrow overlaps it more */
    transform: translateX(20%) rotate(6deg);
    z-index: 2;
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-arrow {
    left: 26%;
    top: 32%;
    width: 24%;
    z-index: 4;
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-cloud {
    left: 45%;
    top: 4%;
    width: 39%;
    aspect-ratio: 210 / 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6% 12%;
    z-index: 3;
}

/* Inline starburst SVG sits behind the cloud text; its fill is driven by
   --cc-usp-cloud so the colour can be overridden per badge. */
.cakeclub-usp-finished-by-hand .cakeclub-usp-cloud-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7cqw;
    height: 7cqw;
    border-radius: 50%;
    background: var(--cc-usp-red);
    color: #fff;
    font-family: 'Mindset', sans-serif;
    font-weight: 700;
    font-size: 3.6cqw;
    line-height: 1;
    margin-bottom: 3%;
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-intro {
    position: relative;
    z-index: 1;
    left: auto;
    right: auto;
    top: auto;
    font-family: 'Mindset', sans-serif;
    font-weight: 700;
    font-size: 4.6cqw;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    transform: none;
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-caption {
    position: relative;
    z-index: 1;
    left: auto;
    right: auto;
    top: auto;
    font-family: 'Mindset', sans-serif;
    font-weight: 700;
    font-size: 11cqw;
    text-transform: uppercase;
    line-height: 0.9;
}

.cakeclub-usp-finished-by-hand .cakeclub-usp-flag {
    right: 0%;
    top: 6%;
    width: 20%;
    height: auto;
    z-index: 4;
    display: block;
}

/* Images */
.cakeclub-usp-media {
    position: relative;
}

.cakeclub-usp-image {
    margin: 0;
    background: #fff;
    padding: 8px 8px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transform: rotate(-1.5deg);
}

.cakeclub-usp-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* Second image (e.g. coffee cup on USP 2) overlaps the first */
.cakeclub-usp-image-2 {
    position: absolute;
    right: -6%;
    bottom: -14%;
    width: 48%;
    transform: rotate(2.5deg);
    z-index: 2;
}

.cakeclub-usp-image-2 img {
    border-radius: 50%;
}

/* Extra bottom space when two images overlap */
.cakeclub-usp-coming-back .cakeclub-usp-media {
    margin-bottom: 12%;
}

/* Alternate the photo tilt per badge so a stack doesn't look uniform */
.cakeclub-usp-coming-back .cakeclub-usp-image-1,
.cakeclub-usp-pre-portioned .cakeclub-usp-image-1 {
    transform: rotate(1.5deg);
}

/* Label: numbered dot + caption */
.cakeclub-usp-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
}

.cakeclub-usp-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--cc-usp-red);
    color: #fff;
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.cakeclub-usp-text {
    display: block;
    color: var(--cc-usp-ink);
    line-height: 1.15;
}

.cakeclub-usp-intro {
    display: block;
    font-family: 'BNTillsdale', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    margin-bottom: 0.1em;
}

.cakeclub-usp-caption {
    display: block;
    font-family: var(--font-heading, sans-serif);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ============================================================
   USP 4 (pre-portioned): a CSS-drawn red text box (border hugs the
   text, no fixed-size image) with the red cake slice tucked under it,
   a pink curly arrow pointing to a blue hand-drawn photo frame.
   No numeral badge, no decorative top dots.

   This layout intentionally does NOT use .cakeclub-usp-comp (the
   absolute % system) so the box can grow/shrink to fit its content.
   ============================================================ */
.cakeclub-usp-pre-portioned.alignright,
.cakeclub-usp-pre-portioned.alignleft {
    width: min(500px, 58%);
}

.cakeclub-usp-pp {
    container-type: inline-size;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

/* Content-width so the box + cake stay tight to the left and the frame can
   pull in beside them, leaving the right edge clear of the body text. */
.cakeclub-usp-pp-left {
    position: relative;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* The red box: a CSS border that wraps the text. Slightly uneven corner
   radii + a faint inner line emulate the hand-drawn rounded rectangle. */
.cakeclub-usp-pp-box {
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    padding: 4cqw 5cqw 3.5cqw;
    border-style: solid;
    border-color: var(--cc-usp-ink);
    /* thinner top/left/right, heavier bottom (top | left-right | bottom) */
    border-width: max(2px, 0.4cqw) max(2px, 0.4cqw) max(3px, 0.9cqw);
    border-radius: 18px 22px 19px 24px / 22px 18px 24px 19px;
    box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.18);
    transform: rotate(-1.5deg);
    z-index: 2;
}

/* Intro line: bold uppercase headline (top line in the reference). */
.cakeclub-usp-pre-portioned .cakeclub-usp-intro {
    position: static;
    left: auto;
    top: auto;
    display: block;
    margin: 0;
    color: var(--cc-usp-ink);
    font-family: 'Mindset', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 5.4cqw;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transform: none;
}

/* Caption line: large red script (bottom line in the reference). */
.cakeclub-usp-pre-portioned .cakeclub-usp-caption {
    position: static;
    left: auto;
    top: auto;
    display: block;
    margin: 0.04em 0 0;
    color: var(--cc-usp-ink);
    font-family: 'BNRendallScript', cursive;
    font-weight: 400;
    font-size: 9.5cqw;
    line-height: 0.9;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Red cake slice tucked under the bottom-left of the box. Sits ABOVE the
   box (z-index 3 > box z-index 2) so the cream background covers the red
   border line where they overlap. */
.cakeclub-usp-cake {
    position: relative;
    width: 34%;
    height: auto;
    margin: -4% 0 0 6%;
    transform: rotate(-2deg);
    z-index: 3;
}

/* Pink curly arrow pointing from the box toward the photo. Sits ABOVE the
   frame (z-index 3) so its tip overlays the frame edge. */
.cakeclub-usp-pre-portioned .cakeclub-usp-arrow {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 15%;
    width: 15%;
    height: auto;
    margin: 0 0 0 1%;
    transform: translateY(10%);
    z-index: 3;
}

/* Blue hand-drawn frame. Pulled left (negative margin) so it sits ~halfway
   toward the box and the pink arrow overlays it. */
.cakeclub-usp-frame {
    position: relative;
    flex: 0 0 40%;
    aspect-ratio: 156 / 150;
    margin-left: -14%;
    transform: rotate(2deg);
}

/* The frame border is drawn as an overlay ABOVE the photo (z-index 2 > the
   photo's z-index 1) so the photo is genuinely framed by it. */
.cakeclub-usp-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cc-usp-frame);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: 2;
    pointer-events: none;
}

/* Photo sits BELOW the frame border and is tilted so its left side drops
   ~9deg to match the angle of the frame. The left inset is a touch wider so
   the bottom-left corner doesn't poke out below the frame when tilted. */
.cakeclub-usp-pre-portioned .cakeclub-usp-photo {
    z-index: 1;
    top: 8%;
    left: 11%;
    right: 8%;
    bottom: 9%;
    /* Nudged 2px right + 1px down to sit better within the frame */
    transform: translate(2px, 1px) rotate(-9deg);
    /* Rounded corners (scales with the badge) so the tilted photo
       tucks inside the frame instead of poking out. */
    border-radius: 9%;
}

/* ============================================================
   USP 5 (frozen-fresh): blue-framed photo on the LEFT with a round
   snowflake badge overlapping its bottom-left, a pink arrow pointing
   RIGHT to red script ("frozen fresh for") + bold caption
   ("FLEXIBILITY"), with pink rays at the top-right. No numeral badge.
   ============================================================ */
.cakeclub-usp-frozen-fresh.alignright,
.cakeclub-usp-frozen-fresh.alignleft {
    width: min(540px, 56%);
}

.cakeclub-usp-ff {
    container-type: inline-size;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

/* Photo wrapper: leftmost element (overrides the USP4 frame pull-left +
   tilt). This block has NO frame border, so the photo fills the wrapper
   and the badge is allowed to spill outside it. */
.cakeclub-usp-frozen-fresh .cakeclub-usp-frame {
    flex: 0 0 42%;
    margin-left: 0;
    overflow: visible;
    transform: none;
}

/* No frame border for USP 5 */
.cakeclub-usp-frozen-fresh .cakeclub-usp-frame::after {
    content: none;
}

.cakeclub-usp-frozen-fresh .cakeclub-usp-photo {
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    border-radius: 2px;
}

/* Round snowflake "FROZEN FRESH / SERVED SMARTER" badge. */
.cakeclub-usp-badge {
    position: absolute;
    left: -7%;
    bottom: -9%;
    width: 42%;
    height: auto;
    aspect-ratio: 129 / 150;
    z-index: 4;
}

/* Pink arrow pointing right, pulled left to overlap the photo's edge. */
.cakeclub-usp-frozen-fresh .cakeclub-usp-arrow {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 18%;
    width: 18%;
    height: auto;
    margin: 0 0 0 -16%;
    transform: translateY(-4%);
    z-index: 3;
}

/* Text column. Does NOT grow (flex 0 1 auto) so the whole cluster packs to
   the left next to the photo instead of being centred in spare space. */
.cakeclub-usp-ff-text {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    align-self: center;
    padding: 0 2% 0 1%;
    z-index: 2;
}

/* First line wraps the script intro + rays so the rays can be anchored
   dynamically to the END of the line, whatever its length. Shrinks to the
   text width (max-content) so left:100% lands right after the words. */
.cakeclub-usp-intro-wrap {
    display: block;
    position: relative;
    width: max-content;
    max-width: 100%;
}

/* Script lead-in (top line). */
.cakeclub-usp-frozen-fresh .cakeclub-usp-intro {
    position: static;
    left: auto;
    top: auto;
    display: block;
    margin: 0;
    color: var(--cc-usp-ink);
    font-family: 'BNRendallScript', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 5.5cqw;
    line-height: 0.9;
    text-transform: none;
    white-space: nowrap;
    transform: rotate(-3deg);
    transform-origin: left center;
}

/* Bold uppercase headline (bottom line). */
.cakeclub-usp-frozen-fresh .cakeclub-usp-caption {
    position: static;
    left: auto;
    top: auto;
    display: block;
    margin: 0.04em 0 0;
    color: var(--cc-usp-ink);
    font-family: 'Mindset', sans-serif;
    font-weight: 700;
    font-size: 7cqw;
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Little pink rays: anchored to the end of the first line (left:100% of the
   intro wrap), nudged up and to the right. Scales with the badge width. */
.cakeclub-usp-rays {
    position: absolute;
    left: 100%;
    bottom: 35%;
    width: 8cqw;
    height: auto;
    margin-left: 3%;
    /* lift the rays up by ~50% of their own height */
    transform: translateY(-50%);
    z-index: 3;
}

/* Mobile: stop floating, centre the badge between paragraphs */
@media (max-width: 600px) {
    .cakeclub-usp.alignleft,
    .cakeclub-usp.alignright {
        float: none;
        width: 100%;
        max-width: 340px;
        margin: 1.5rem auto;
    }
}