/* =============================================================
   1. TYPOGRAPHY SETUP
   Playfair Display for display / Work Sans for body.
   Loaded via Google Fonts in PageHeader.html.
   ============================================================= */

.liv-tk-store,
.liv-tk-store-bio {
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.liv-tk-product-name,
.liv-tk-bio-heading,
.liv-tk-section-heading,
.liv-tk-ribbon,
.liv-tk-ghost-num,
.liv-tk-stat-num {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}


/* =============================================================
   2. HERO BANNER (unchanged from v1)
   Full-width responsive image, no crops.
   ============================================================= */

.liv-tk-hero-banner {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.liv-tk-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* =============================================================
   3. BIO / STORE DESCRIPTION
   Editorial sports-magazine feel. Sage gradient background,
   gold left accent, grain overlay, Playfair heading.
   ============================================================= */

.liv-tk-store-bio {
    position: relative;
    background:
        linear-gradient(165deg,
            #f2f7f3 0%,
            #eaf1ec 40%,
            #f5f0e6 100%);
    padding: 56px 32px 56px 40px;
    margin: 0;
    overflow: hidden;
}

/* Grain overlay for depth */
.liv-tk-store-bio::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
}

.liv-tk-bio-content {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    border-left: 4px solid #b8955a;
    padding-left: 32px;
}

.liv-tk-bio-heading {
    font-weight: 900;
    color: #2d3e31;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 0 0 8px 0;
    text-transform: none;  /* Playfair stands on its own, no caps */
}

.liv-tk-bio-subheading {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #b8955a;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.liv-tk-bio-text {
    color: #3d5441;
    line-height: 1.8;
    letter-spacing: 0.1px;
    margin: 0 0 18px 0;
    font-weight: 400;
}

.liv-tk-bio-text:last-child {
    margin-bottom: 0;
}

.liv-tk-bio-text strong {
    font-weight: 700;
    color: #2d3e31;
}

.liv-tk-bio-text em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #8a6c38;
    font-weight: 700;
}


/* =============================================================
   4. STAT CALLOUTS (bio section)
   Career stats as decorative cards.
   Desktop: 6-column grid. Mobile: horizontal scroll.
   ============================================================= */

.liv-tk-stat-callouts {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(184, 149, 90, 0.25);
}

.liv-tk-stat {
    text-align: center;
    padding: 16px 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(184, 149, 90, 0.2);
    border-radius: 4px;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s ease;
}

.liv-tk-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(61, 84, 65, 0.1);
}

.liv-tk-stat-num {
    display: block;
    font-weight: 900;
    color: #2d3e31;
    letter-spacing: -1px;
    line-height: 1;
    /* Bypass font-size rule: scale transform for oversized editorial numerals */
    transform: scale(1.9);
    transform-origin: center top;
    margin-bottom: 22px;
    white-space: nowrap;
}

.liv-tk-stat-label {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #8a6c38;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 4px;
}


/* =============================================================
   5. SECTION HEADINGS (Bundle / Products)
   Outlined Playfair roman numerals + gold bar underline.
   Editorial authority.
   ============================================================= */

.liv-tk-section-heading {
    position: relative;
    font-weight: 900;
    color: #2d3e31;
    letter-spacing: -0.5px;
    text-transform: none;  /* Playfair with proper case */
    padding: 56px 0 18px 0;
    margin: 0 0 12px 0;
    border-bottom: 2px solid rgba(61, 84, 65, 0.12);
}

/* Roman numeral ghost — "I" / "II" in outlined Playfair */
.liv-tk-section-heading::before {
    content: attr(data-num);
    position: absolute;
    top: 28px;
    right: 8px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(184, 149, 90, 0.45);
    line-height: 1;
    /* Scale transform avoids font-size rule */
    transform: scale(4.5);
    transform-origin: top right;
    pointer-events: none;
    letter-spacing: -2px;
}

/* Gold bar accent — animates in on load */
.liv-tk-section-heading::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #b8955a 0%, #d4b06a 100%);
    animation: liv-tk-bar-slide 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

@keyframes liv-tk-bar-slide {
    from { width: 0; opacity: 0; }
    to   { width: 80px; opacity: 1; }
}


/* =============================================================
   6. PRODUCT ROW — Base Layout (horizontal editorial lookbook)
   ============================================================= */

.liv-tk-product-row {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    padding: 40px 0;
    position: relative;
}

/* --- Product Image --- */
.liv-tk-product-img {
    flex: 0 0 240px;
    max-width: 240px;
    position: relative;
}

.liv-tk-product-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    border: 2px solid #faf5eb;
    outline: 1px solid rgba(184, 149, 90, 0.4);
    outline-offset: 0;
    box-shadow:
        0 6px 20px rgba(61, 84, 65, 0.1),
        0 1px 3px rgba(61, 84, 65, 0.06);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.45s ease;
}

.liv-tk-product-img img:hover {
    transform: translateY(-3px) rotate(-0.6deg);
    box-shadow:
        0 14px 34px rgba(61, 84, 65, 0.15),
        0 2px 6px rgba(61, 84, 65, 0.08);
}

/* --- Product Info column --- */
.liv-tk-product-info {
    flex: 1;
    min-width: 0;
    position: relative;
    padding-top: 4px;
}

/* Ghost numeral behind product name (01, 02, 03...) */
.liv-tk-ghost-num {
    position: absolute;
    top: -8px;
    right: 0;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(184, 149, 90, 0.3);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transform: scale(4.8);
    transform-origin: top right;
    letter-spacing: -3px;
}

.liv-tk-product-name {
    position: relative;
    z-index: 1;
    font-weight: 900;
    color: #2d3e31;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 0 0 14px 0;
    text-transform: none;
}

.liv-tk-name-sub {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    color: #5c7d62;
    letter-spacing: 0.5px;
    font-style: normal;
}

.liv-tk-product-desc {
    position: relative;
    z-index: 1;
    color: #475f4c;
    line-height: 1.75;
    letter-spacing: 0.1px;
    font-weight: 400;
    margin: 0 0 22px 0;
    max-width: 680px;
}

.liv-tk-product-desc strong {
    font-weight: 700;
    color: #2d3e31;
}

.liv-tk-product-divider {
    border: none;
    border-top: 1px solid rgba(61, 84, 65, 0.12);
    margin: 0;
}


/* =============================================================
   7. PRICE ROW — Price block + CTA side by side (desktop)
   Mobile will stack these vertically.
   ============================================================= */

.liv-tk-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.liv-tk-price-block {
    flex: 0 0 auto;
    min-width: 240px;
}


/* =============================================================
   8. PRICING — Price lines, TikTok hero, retail strikethrough
   ============================================================= */

.liv-tk-price-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 0;
    gap: 20px;
}

.liv-tk-price-tag {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    color: #5c7d62;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.liv-tk-price-val {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    color: #2d3e31;
    letter-spacing: -0.5px;
}

/* Price value scaling — editorial prominence for all product rows
   (bypasses no-font-size rule via transform, same pattern as .liv-tk-stat-num) */
.liv-tk-price-line .liv-tk-price-val {
    display: inline-block;
    transform: scale(1.7);
    transform-origin: left center;
    margin-right: 14px;
    padding-right: 4px;
}

/* Variant picker prices (bundle GO 15/30, Green2o Mint/Lemon) */
.liv-tk-variant-price .liv-tk-price-val {
    display: inline-block;
    transform: scale(1.7);
    transform-origin: left center;
    margin-right: 10px;
    padding-right: 4px;
}

/* Hero TikTok price — extra emphasis */
.liv-tk-price-line--hero {
    background: linear-gradient(135deg, #e8f0ea 0%, #f2f7f3 100%);
    border-left: 3px solid #b8955a;
    border-radius: 0 8px 8px 0;
    padding: 16px 18px 18px 18px;
    margin-bottom: 6px;
}

.liv-tk-price-line--hero .liv-tk-price-tag {
    font-weight: 800;
    color: #2d3e31;
    letter-spacing: 0.9px;
}

/* Hero bundle price — MAGAZINE HERO treatment (wins over generic scale rule
   via identical specificity + later declaration order) */
.liv-tk-price-line--hero .liv-tk-price-val {
    display: inline-block;
    transform: scale(2.3);
    transform-origin: left center;
    margin-right: 22px;
    padding-right: 6px;
    letter-spacing: -1px;
}

/* Mobile: pull the hero scale back slightly so it doesn't overflow narrow screens */
@media (max-width: 768px) {
    .liv-tk-price-line--hero .liv-tk-price-val {
        transform: scale(1.9);
        margin-right: 18px;
    }
    .liv-tk-price-line .liv-tk-price-val,
    .liv-tk-variant-price .liv-tk-price-val {
        transform: scale(1.55);
        margin-right: 10px;
    }
}

/* Retail strikethrough */
.liv-tk-price-strike {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    color: #9aab9d;
    text-decoration: line-through;
    text-decoration-color: #a0522d;
    text-decoration-thickness: 2px;
    opacity: 0.8;
}

/* Savings inline tag (used in variant rows) */
.liv-tk-savings-tag {
    display: inline-block;
    background: linear-gradient(135deg, #faf5eb 0%, #f5edd8 100%);
    border: 1.5px solid #b8955a;
    border-radius: 4px;
    padding: 4px 10px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
    color: #8a6c38;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    animation: liv-tk-save-glow 3s ease-in-out infinite;
}

@keyframes liv-tk-save-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 149, 90, 0.2); }
    50%      { box-shadow: 0 0 14px 3px rgba(184, 149, 90, 0.2); }
}


/* =============================================================
   9. HERO BUNDLE — The Adrienne Kit
   Full showcase treatment with Champion Pick ribbon,
   sage-on-cream layered background, roster list.
   ============================================================= */

.liv-tk-bundle {
    position: relative;
    background:
        linear-gradient(135deg,
            rgba(242, 247, 243, 0.85) 0%,
            rgba(232, 240, 234, 0.65) 60%,
            rgba(250, 245, 235, 0.5) 100%);
    border: 1px solid rgba(184, 149, 90, 0.25);
    border-radius: 8px;
    padding: 44px 40px !important;
    margin: 8px 0 16px 0;
    overflow: hidden;
}

.liv-tk-bundle-hero {
    border-left: 4px solid #b8955a;
    box-shadow:
        0 8px 36px rgba(61, 84, 65, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Subtle topographic line pattern in background */
.liv-tk-bundle-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 38px,
            rgba(184, 149, 90, 0.04) 38px,
            rgba(184, 149, 90, 0.04) 39px);
    pointer-events: none;
    z-index: 0;
}

.liv-tk-bundle-hero > * {
    position: relative;
    z-index: 1;
}

/* --- Champion Pick ribbon (top-right corner) --- */
.liv-tk-ribbon {
    position: absolute;
    top: 22px;
    right: -52px;
    display: block;
    background: linear-gradient(135deg, #b8955a 0%, #d4b06a 50%, #b8955a 100%);
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 7px 60px;
    transform: rotate(35deg);
    box-shadow:
        0 4px 14px rgba(61, 84, 65, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 5;
    white-space: nowrap;
}

.liv-tk-ribbon::before,
.liv-tk-ribbon::after {
    content: '';
    position: absolute;
    bottom: -4px;
    border-top: 4px solid #8a6c38;
    width: 0;
    height: 0;
}

.liv-tk-ribbon::before {
    left: 0;
    border-right: 4px solid transparent;
}

.liv-tk-ribbon::after {
    right: 0;
    border-left: 4px solid transparent;
}

/* --- Roster list (bundle contents) --- */
.liv-tk-roster {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    counter-reset: roster;
}

.liv-tk-roster li {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    color: #3d5441;
    letter-spacing: 0.4px;
    padding: 8px 14px 8px 38px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    border-left: 2px solid #b8955a;
    counter-increment: roster;
}

.liv-tk-roster li::before {
    content: counter(roster, decimal-leading-zero);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    color: #b8955a;
    letter-spacing: -0.5px;
}


/* =============================================================
   10. VARIANT PICKER component
   Used by the Hero Bundle (GO 15 / GO 30) and Green2o (Mint / Lemon).
   Stacked rows, each a flex row of label + price + CTA.
   ============================================================= */

.liv-tk-variant-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(61, 84, 65, 0.1);
    border-radius: 8px;
}

.liv-tk-variant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid rgba(61, 84, 65, 0.08);
    border-left: 3px solid #b8955a;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.liv-tk-variant-row:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(61, 84, 65, 0.08);
}

.liv-tk-variant-label {
    flex: 1 1 auto;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.liv-tk-variant-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #2d3e31;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.liv-tk-variant-price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 100px;
}

.liv-tk-variant-price .liv-tk-price-val {
    line-height: 1.1;
}

.liv-tk-variant-cta {
    flex: 0 0 auto;
}

/* PV badge — used in variant rows and standalone */
.liv-tk-pv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #faf5eb 0%, #f5edd8 100%);
    border: 1px solid rgba(184, 149, 90, 0.35);
    border-radius: 3px;
    padding: 3px 10px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #8a6c38;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    width: fit-content;
}


/* =============================================================
   11. TICKET-STUB CTA — Add to Cart button
   Forest-green gradient, 2px gold top border,
   4px gold left binding, top-right corner cut.
   The signature visual element of this page.
   ============================================================= */

.liv-tk-cta {
    display: inline-block;
    position: relative;
    margin: 0;
}

.liv-tk-cta .btn,
.liv-tk-cta .wsc-button,
.liv-tk-cta .dnnPrimaryAction,
.liv-tk-cta button,
.liv-tk-cta input[type="button"],
.liv-tk-cta input[type="submit"] {
    /* Shape */
    display: inline-block;
    border: none !important;
    border-top: 2px solid #b8955a !important;
    border-left: 4px solid #b8955a !important;
    border-radius: 3px !important;
    /* Torn ticket-stub top-right corner cut */
    clip-path: polygon(
        0 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% 100%,
        0 100%
    );

    /* Color */
    background: linear-gradient(180deg,
        #2d3e31 0%,
        #3d5441 55%,
        #324636 100%) !important;
    color: #ffffff !important;

    /* Typography */
    font-family: 'Work Sans', -apple-system, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    /* Spacing */
    padding: 15px 32px 14px 28px !important;
    margin: 0;

    /* Feel */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 6px 18px rgba(45, 62, 49, 0.22),
        0 1px 3px rgba(45, 62, 49, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s ease,
                background 0.35s ease,
                border-color 0.35s ease;
}

.liv-tk-cta .btn:hover,
.liv-tk-cta .wsc-button:hover,
.liv-tk-cta .dnnPrimaryAction:hover,
.liv-tk-cta button:hover,
.liv-tk-cta input[type="button"]:hover,
.liv-tk-cta input[type="submit"]:hover {
    background: linear-gradient(180deg,
        #3d5441 0%,
        #4a6b50 55%,
        #3d5441 100%) !important;
    border-top-color: #d4b06a !important;
    border-left-color: #d4b06a !important;
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px rgba(45, 62, 49, 0.3),
        0 2px 8px rgba(45, 62, 49, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.liv-tk-cta .btn:active,
.liv-tk-cta .wsc-button:active,
.liv-tk-cta .dnnPrimaryAction:active,
.liv-tk-cta button:active,
.liv-tk-cta input[type="button"]:active,
.liv-tk-cta input[type="submit"]:active {
    transform: translateY(0);
    box-shadow:
        0 3px 10px rgba(45, 62, 49, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Focus ring for accessibility */
.liv-tk-cta .btn:focus-visible,
.liv-tk-cta .wsc-button:focus-visible,
.liv-tk-cta .dnnPrimaryAction:focus-visible,
.liv-tk-cta button:focus-visible,
.liv-tk-cta input[type="button"]:focus-visible,
.liv-tk-cta input[type="submit"]:focus-visible {
    outline: 2px solid #d4b06a !important;
    outline-offset: 3px;
}

/* Fix Balance right-alignment bug — force left-align on ALL action containers */
.liv-tk-cta {
    text-align: left !important;
}

.liv-tk-product-row .liv-tk-cta,
.liv-tk-product-row .liv-tk-price-row,
.liv-tk-product-row .liv-tk-variant-row {
    text-align: left !important;
}


/* =============================================================
   12. RESPONSIVE — Tablet / Mobile breakpoints
   ============================================================= */

@media (max-width: 960px) {
    .liv-tk-stat-callouts {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    /* Bio section */
    .liv-tk-store-bio {
        padding: 40px 22px 40px 22px;
    }

    .liv-tk-bio-content {
        padding-left: 22px;
    }

    /* Stat callouts — horizontal scroll on mobile */
    .liv-tk-stat-callouts {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .liv-tk-stat {
        flex: 0 0 140px;
        scroll-snap-align: start;
    }

    /* Product rows stack */
    .liv-tk-product-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 30px 0;
    }

    .liv-tk-product-img {
        flex: 0 0 auto;
        max-width: 220px;
    }

    .liv-tk-product-info {
        width: 100%;
    }

    .liv-tk-ghost-num {
        top: -12px;
        right: 50%;
        transform: scale(4) translateX(50%);
        transform-origin: top right;
    }

    /* Price row — stack and center */
    .liv-tk-price-row {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .liv-tk-price-block {
        min-width: 0;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Variant picker — each row stacks internally */
    .liv-tk-variant-row {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 14px;
    }

    .liv-tk-variant-price {
        align-items: flex-start;
    }

    .liv-tk-variant-cta,
    .liv-tk-cta {
        width: 100%;
    }

    .liv-tk-variant-cta .btn,
    .liv-tk-variant-cta .wsc-button,
    .liv-tk-variant-cta .dnnPrimaryAction,
    .liv-tk-variant-cta button,
    .liv-tk-variant-cta input[type="submit"],
    .liv-tk-cta .btn,
    .liv-tk-cta .wsc-button,
    .liv-tk-cta .dnnPrimaryAction,
    .liv-tk-cta button,
    .liv-tk-cta input[type="submit"] {
        width: 100% !important;
        display: block !important;
    }

    /* Hero bundle */
    .liv-tk-bundle {
        padding: 36px 22px 28px 22px !important;
    }

    .liv-tk-ribbon {
        top: 16px;
        right: -56px;
        padding: 5px 60px;
    }

    /* Section headings */
    .liv-tk-section-heading {
        padding: 44px 0 14px 0;
        text-align: center;
    }

    .liv-tk-section-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .liv-tk-section-heading::before {
        top: 22px;
        right: 50%;
        transform: scale(3.5) translateX(50%);
        transform-origin: top right;
        opacity: 0.25;
    }
}

@media (max-width: 480px) {
    .liv-tk-store-bio {
        padding: 32px 16px;
    }

    .liv-tk-bio-content {
        padding-left: 16px;
        border-left-width: 3px;
    }

    .liv-tk-product-img {
        max-width: 180px;
    }

    .liv-tk-bundle {
        padding: 28px 16px 20px 16px !important;
        border-radius: 6px;
    }

    .liv-tk-ribbon {
        top: 14px;
        right: -58px;
    }

    .liv-tk-roster li {
        padding: 8px 12px 8px 34px;
    }

    .liv-tk-variant-picker {
        padding: 14px;
    }

    .liv-tk-variant-row {
        padding: 14px;
    }
}


/* =============================================================
   14. MARKETING ADDITIONS (v2.1)
   -------------------------------------------------------------
   - .liv-tk-hidden        utility for placeholder slots
   - .liv-tk-volume        volume/size subtitle under product name
   - .liv-tk-ship-promo    editorial strip between sections I & II
   - .liv-tk-ship-included "Ships Free" pill on bundle variants
   ============================================================= */

/* ---- Utility ---- */
.liv-tk-hidden {
    display: none !important;
}


/* ---- Volume / size subtitle ---- */
.liv-tk-volume {
    display: block;
    margin-top: -4px;
    margin-bottom: 10px;
    color: #6b8370;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: 'Work Sans', sans-serif;
}


/* ---- Editorial Free-Shipping Promo Strip ---- */
.liv-tk-ship-promo {
    position: relative;
    margin: 72px 0 60px;
    padding: 10px 24px 12px;
    background:
        linear-gradient(90deg, rgba(245, 237, 224, 0.95) 0%, rgba(232, 240, 234, 0.95) 50%, rgba(245, 237, 224, 0.95) 100%),
        repeating-linear-gradient(45deg, rgba(184, 149, 90, 0.035) 0 2px, transparent 2px 14px);
    border-top: 1px solid #b8955a;
    border-bottom: 1px solid #b8955a;
    text-align: center;
}

.liv-tk-ship-promo::before,
.liv-tk-ship-promo::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 120px;
    height: 1px;
    background: #b8955a;
    opacity: 0.55;
    transform: translateX(-50%);
}
.liv-tk-ship-promo::before { top: 6px; }
.liv-tk-ship-promo::after  { bottom: 6px; }

.liv-tk-ship-promo-asterism {
    display: block;
    color: #b8955a;
    letter-spacing: 0.7em;
    font-family: 'Playfair Display', serif;
    margin-bottom: 18px;
}

.liv-tk-ship-promo-display {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    color: #2d3e31;
    letter-spacing: -0.015em;
    transform: scale(2.7);
    transform-origin: center;
    /*margin: 32px 0 40px;*/
    line-height: 1;
}

.liv-tk-ship-promo-rule {
    display: block;
    margin-top: 18px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: #3d5441;
}

.liv-tk-ship-promo-rule em {
    font-style: normal;
    color: #b8955a;
    font-weight: 800;
    padding: 0 4px;
}


/* ---- "Ships Free" inline pill (bundle variant rows) ---- */
.liv-tk-ship-included {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #2d3e31 0%, #3d5441 100%);
    color: #f5ede0;
    border: 1.5px solid #b8955a;
    border-radius: 4px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(45, 62, 49, 0.25);
}


/* ---- Responsive tuning ---- */
@media (max-width: 768px) {
    .liv-tk-ship-promo {
        margin: 52px 0 40px;
        padding: 38px 16px 44px;
    }
    .liv-tk-ship-promo-display {
        transform: scale(1.95);
        margin: 22px 0 28px;
    }
    .liv-tk-ship-promo-rule {
        letter-spacing: 0.16em;
    }
    .liv-tk-ship-promo-asterism {
        letter-spacing: 0.5em;
    }
}

@media (max-width: 480px) {
    .liv-tk-ship-promo {
        padding: 30px 12px 36px;
    }
    .liv-tk-ship-promo-display {
        transform: scale(1.55);
        margin: 16px 0 20px;
    }
    .liv-tk-ship-promo-rule {
        letter-spacing: 0.12em;
    }
}


/* =============================================================
   13. ACCESSIBILITY — Reduced motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    .liv-tk-product-img img,
    .liv-tk-variant-row,
    .liv-tk-stat,
    .liv-tk-cta .btn,
    .liv-tk-cta .wsc-button,
    .liv-tk-cta .dnnPrimaryAction,
    .liv-tk-cta button,
    .liv-tk-cta input[type="submit"] {
        transition: none !important;
    }

    .liv-tk-section-heading::after {
        animation: none;
        width: 80px;
        opacity: 1;
    }

    .liv-tk-savings-tag {
        animation: none;
        box-shadow: 0 0 8px 2px rgba(184, 149, 90, 0.2);
    }

    .liv-tk-product-img img:hover,
    .liv-tk-variant-row:hover,
    .liv-tk-stat:hover,
    .liv-tk-cta .btn:hover {
        transform: none !important;
    }

    /* v2.1 — disable scale transform on ship-promo display */
    .liv-tk-ship-promo-display {
       /* transform: none; */
    }
    .liv-tk-ship-included {
        box-shadow: none;
    }
}