/* ==========================================================================
   Maisternya — landing page styles
   Mobile first. Breakpoints: 767px (tablet), 1024px (desktop).
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    --bg: #000000;
    --card-bg: rgba(24, 24, 27, 0.8);
    --card-border: rgba(255, 255, 255, 0.1);

    --theme: #7B00FF;
    --theme-gradient: linear-gradient(180deg, #9933FF 0%, #7B00FF 100%);
    --theme-glow: rgba(123, 0, 255, 0.5);

    --red: #FF3B30;
    --orange: #FF5F1F;
    --green: #00E676;
    --cyan: #00E5FF;

    --text: #FFFFFF;
    --text-muted: #A1A1AA;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Montserrat', var(--font);

    --radius-card: 36px;
    --radius-md: 22px;
    --radius-sm: 18px;

    /* Input height — the icon inside .field-wrap centres on this. */
    --field-h: 60px;

    /* Page gutter and content width — both grow at the tablet/desktop breakpoints. */
    --gutter: 16px;
    --content-width: 440px;
}


/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    touch-action: manipulation;
}

body {
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
}

s {
    text-decoration: line-through;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--bg);
    background-image: radial-gradient(circle at 50% 100%, #100020 0%, #000000 90%);
}


/* ==========================================================================
   Layout
   ========================================================================== */

.layout {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding-bottom: 120px;
    position: relative;
}

/* The footer moved out of <main>, so it carries the layout width itself —
   without repeating the sticky-bar clearance <main> already provides. */
.layout--footer {
    padding-bottom: 0;
}

.pad {
    padding: 0 var(--gutter);
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    margin-bottom: 50px;
}

/* The hero sits flush against the top of the viewport. */
.card--hero {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-bottom: 30px;
}

.card--order {
    padding-bottom: 25px;
}

.section-head {
    padding: 25px 20px 10px;
    text-align: center;
}

.section-body {
    padding: 0 20px;
    margin-top: 15px;
}

.rule {
    height: 1px;
    border: none;
    background: var(--card-border);
    margin: 10px 0 25px;
}

.media {
    background: #000;
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    margin-top: 10px;
}

.media img {
    width: 100%;
}


/* ==========================================================================
   Typography
   ========================================================================== */

.section-title,
.heading {
    font-size: 25px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    background: linear-gradient(180deg, #fff 40%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title {
    margin-bottom: 8px;
}

.heading {
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--theme);
    text-shadow: 0 0 15px var(--theme-glow);
}

.prose {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    padding-bottom: 20px;
}

.prose h3 {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.prose p {
    margin-bottom: 15px;
}

.prose b {
    color: #fff;
    font-weight: 900;
}

.prose img {
    width: 100%;
    max-width: 600px;
    margin: 10px auto 0;
    border-radius: 12px;
}

/* One repeater row: copy + optional image. Stacked on mobile; side by side
   from tablet up, alternating sides on every second block. */
.prose-block + .prose-block {
    margin-top: 40px;
}

.prose-block__media:empty {
    display: none;
}

.prose-block__text > :last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 68px;
    padding: 0 16px;
    border-radius: 100px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.btn--primary {
    color: #fff;
    background: var(--theme-gradient);
    box-shadow: 0 0 30px var(--theme-glow);
    margin-top: 10px;
}

/* Shine sweep across primary buttons. */
.btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    animation: shine 3s infinite ease-in-out;
    pointer-events: none;
}

.btn--secondary {
    min-height: 52px;
    font-size: 15px;
    border-radius: 12px;
    color: #fff;
    background: var(--theme-gradient);
    box-shadow: 0 5px 20px rgba(123, 0, 255, 0.3);
}

@keyframes shine {
    0%   { left: -100%; }
    20%  { left: 200%; }
    100% { left: 200%; }
}


/* ==========================================================================
   Price
   ========================================================================== */

.price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    row-gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.price__now {
    font-size: 60px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    background: linear-gradient(180deg, #fff 40%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.price__aside {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price__old-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price__old {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-muted);
}

.badge {
    background: var(--orange);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    transform: rotate(-2deg);
    box-shadow: 0 0 10px rgba(255, 95, 31, 0.4);
}

.badge[hidden] {
    display: none;
}


/* ==========================================================================
   Stock urgency
   ========================================================================== */

.stock {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 25px;
    border: 1px solid var(--orange);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, rgba(255, 95, 31, 0.15), rgba(255, 95, 31, 0.05));
}

.stock__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stock__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    animation: pulse 1.5s infinite ease-in-out;
    filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.8));
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.15); opacity: 1; }
}

.stock__title {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--orange);
}

.stock__text {
    font-size: 11px;
    color: #ccc;
}

.stock__count {
    background: var(--orange);
    color: #000;
    font-weight: 800;
    padding: 0 4px;
    border-radius: 4px;
}

.stock__track {
    height: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.stock__fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #FF3B30, #FF9F0A);
    box-shadow: 0 0 15px rgba(255, 95, 31, 0.4);
    transition: width 1s ease;
}


/* ==========================================================================
   Bundle discounts
   ========================================================================== */

.bundles {
    background: rgba(30, 30, 35, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 50px;
}

.bundles__title {
    padding: 16px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bundle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    /* Tall enough that the rotated ribbon on the featured row is fully legible. */
    min-height: 74px;
    padding: 16px 10px;
    position: relative;
    border: 1px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
}

.bundle:last-child {
    border-bottom-color: transparent;
}

.bundle:hover {
    background: rgba(255, 255, 255, 0.03);
}

.bundle--featured {
    background: rgba(123, 0, 255, 0.1);
    border-color: var(--theme);
}

.bundle__qty {
    font-size: 16px;
    font-weight: 500;
    color: #ccc;
}

.bundle--featured .bundle__qty {
    color: #fff;
}

.bundle__price {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}

.bundle__tag {
    width: 52px;
    padding: 4px 0;
    border-radius: 5px;
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

/* Diagonal "Хіт" ribbon, clipped to its own corner box so the row itself
   can stay overflow-visible (a clipped row would slice the rotated text). */
.bundle__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 78px;
    height: 78px;
    overflow: hidden;
    pointer-events: none;
    /* The label is drawn by the pseudo-element below. */
    font-size: 0;
}

.bundle__ribbon::after {
    content: 'Хіт';
    position: absolute;
    top: 14px;
    right: -34px;
    width: 120px;
    line-height: 22px;
    transform: rotate(45deg);
    background: var(--theme);
    color: #fff;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   Benefits
   ========================================================================== */

.benefits {
    --benefit-gap: 20px;
    list-style: none;
    margin-bottom: 50px;
}

.benefit {
    padding: 22px;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.benefit:last-child {
    margin-bottom: 0;
}

.benefit__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.benefit__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}


/* ==========================================================================
   Specs
   ========================================================================== */

.specs {
    margin-bottom: 20px;
}

.spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec:first-child {
    padding-top: 0;
}

.spec:last-child {
    border-bottom: none;
}

.spec dt {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.spec dd {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}


/* ==========================================================================
   Trust dashboard
   ========================================================================== */

.trust {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(30, 30, 35, 0.9), rgba(15, 15, 15, 0.95));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.trust__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trust__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.trust__logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.trust__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.trust__shop {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.trust__verified {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #aaa;
    white-space: nowrap;
}

.trust__score {
    text-align: right;
    flex-shrink: 0;
}

.trust__score b {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.trust__score span {
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

.trust__bottom {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trust__track {
    height: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.trust__fill {
    width: 94%;
    height: 100%;
    border-radius: 10px;
    background: var(--green);
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.trust__stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    color: #888;
}

.trust__ok {
    color: var(--green);
    font-weight: 700;
}


/* ==========================================================================
   Review form
   ========================================================================== */

.review-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--theme);
    border-radius: 16px;
    background: rgba(123, 0, 255, 0.15);
    box-shadow: 0 0 15px rgba(123, 0, 255, 0.1);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.review-toggle:hover {
    background: rgba(123, 0, 255, 0.3);
}

.review-toggle:active {
    transform: scale(0.98);
}

.review-form {
    max-height: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #111;
    transition: max-height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

.review-form.is-open {
    max-height: 600px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--theme);
    box-shadow: 0 0 30px rgba(123, 0, 255, 0.15);
}

.review-form__title {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
}

.stars {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 15px;
}

.star {
    /* Padding keeps a comfortable tap area around the small glyph. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 26px;
    line-height: 1;
    color: #444;
    transition: color 0.2s ease, transform 0.2s ease;
}

.star.is-on {
    color: #FFD700;
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}


/* ==========================================================================
   Fields
   ========================================================================== */

.field {
    width: 100%;
    min-height: var(--field-h);
    padding: 0 20px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    font-size: 16px;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.field::placeholder {
    color: var(--text-muted);
}

.field:focus {
    outline: none;
    background: #000;
    border-color: var(--theme);
    box-shadow: 0 0 15px var(--theme-glow);
}

.field--area {
    min-height: 90px;
    padding: 14px 20px;
    resize: vertical;
}

.review-form .field {
    margin-bottom: 10px;
}

.field-wrap {
    position: relative;
    margin-bottom: 14px;
}

.field--icon {
    padding-left: 55px;
}

/* Anchored to the top of the wrapper and centred on the input's own height
   (var(--field-h)) rather than on the wrapper. The wrapper grows when a
   validation message appears under the field, and centring on it would drag
   the icon off the input. */
.field-wrap__icon {
    position: absolute;
    top: calc(var(--field-h) / 2);
    left: 20px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: 0.5;
    pointer-events: none;
}

.field-wrap:focus-within .field-wrap__icon {
    opacity: 1;
}

.form-error {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 59, 48, 0.4);
    border-radius: 12px;
    background: rgba(255, 59, 48, 0.1);
    color: #FF8A80;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.form-error[hidden] {
    display: none;
}

/* ==========================================================================
   Contact Form 7 order form

   The CF7 form is built from the same markup as the theme's own form
   (.field-wrap / .field / .btn), so these rules only neutralise the wrappers
   and messages the plugin adds around it.
   ========================================================================== */

.order-form--cf7 .wpcf7-form,
.order-form--cf7 form {
    display: block;
}

/* CF7 wraps every field in <span class="wpcf7-form-control-wrap">, which would
   otherwise break the icon positioning and full-width inputs. */
.order-form--cf7 .wpcf7-form-control-wrap {
    display: block;
    position: static;
}

/* wpautop is disabled for CF7 (see inc/helpers.php), but a stray <br> in a
   hand-edited form template would still push the input off the icon. */
.order-form--cf7 .field-wrap br {
    display: none;
}

.order-form--cf7 p {
    margin: 0;
}

.order-form--cf7 .wpcf7-spinner {
    display: block;
    margin: 10px auto 0;
}

/* Inline validation text under a field. The wrapper keeps a fixed 14px gap to
   the next field, so the tip is given its own room below the input instead of
   being pulled up over the border. */
.order-form--cf7 .wpcf7-not-valid-tip {
    margin: 8px 0 0;
    padding: 0 20px;
    color: #FF8A80;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

/* A field that failed validation reads clearly red — border, tint and glow,
   matching the focus treatment so the two never look alike. */
.order-form--cf7 .field.wpcf7-not-valid {
    border-color: var(--red);
    background: rgba(255, 59, 48, 0.08);
    box-shadow: 0 0 12px rgba(255, 59, 48, 0.25);
}

.order-form--cf7 .field.wpcf7-not-valid:focus {
    border-color: var(--red);
    background: #000;
    box-shadow: 0 0 15px rgba(255, 59, 48, 0.45);
}

/* The icon beside an invalid field picks up the same red. :has() is ignored by
   browsers that lack it — the icon simply stays neutral there. */
.order-form--cf7 .field-wrap:has(.wpcf7-not-valid) .field-wrap__icon {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(36%) sepia(84%)
            saturate(3200%) hue-rotate(348deg) brightness(103%) contrast(101%);
}

/* The response banner CF7 prints after a submit attempt. */
.order-form--cf7 .wpcf7-response-output {
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid rgba(255, 59, 48, 0.4);
    border-radius: 12px;
    background: rgba(255, 59, 48, 0.1);
    color: #FF8A80;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.order-form--cf7 form.sent .wpcf7-response-output {
    border-color: rgba(52, 199, 89, 0.4);
    background: rgba(52, 199, 89, 0.12);
    color: #7CE495;
}

/* Review form feedback — the moderation notice and validation errors. */
.form-note {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.form-note[hidden] {
    display: none;
}

.form-note--ok {
    border: 1px solid rgba(52, 199, 89, 0.4);
    background: rgba(52, 199, 89, 0.12);
    color: #7CE495;
}

.form-note--error {
    border: 1px solid rgba(255, 59, 48, 0.4);
    background: rgba(255, 59, 48, 0.1);
    color: #FF8A80;
}


/* ==========================================================================
   Reviews feed
   ========================================================================== */

.reviews {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 50px;
}

.review {
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    animation: slide-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Reviews held back by the drip feed. The script drops [hidden] one card at a
   time, and the animation above plays as each is revealed. */
.review[hidden] {
    display: none;
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .review {
        animation: none;
    }
}

.review__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.review__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 13px;
    font-weight: 800;
}

.review__name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 3px;
}

.review__stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.review__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 8px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: 6px;
    background: rgba(0, 230, 118, 0.1);
    color: var(--green);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.review__text {
    font-size: 13px;
    line-height: 1.5;
    color: #ccc;
}

.review__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.review__date {
    font-size: 10px;
    font-weight: 500;
    color: #666;
}

.review__actions {
    display: flex;
    gap: 4px;
}

.reaction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #777;
    transition: color 0.2s ease;
}

.reaction:last-child {
    padding-right: 0;
}

.reaction img {
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.reaction:hover {
    color: #fff;
}

.reaction:hover img,
.reaction.is-active img {
    opacity: 1;
    transform: scale(1.15);
}

.reaction.is-active[data-reaction="like"]    { color: var(--theme); }
.reaction.is-active[data-reaction="dislike"] { color: var(--red); }


/* ==========================================================================
   Order: quantity picker
   ========================================================================== */

.qty {
    border: none;
    margin-bottom: 10px;
    /* Fieldsets default to min-width:min-content, which would let the
       quantity row push past the form instead of scrolling inside it. */
    min-width: 0;
}

.qty__list {
    display: flex;
    gap: 10px;
    padding: 10px 5px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.qty__list::-webkit-scrollbar {
    display: none;
}

.qty__card {
    display: flex;
    flex: 0 0 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Top padding leaves room for the discount badge inside the card. */
    padding: 18px 10px 12px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.qty__card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Highlighted via colour rather than scale — scaling shifted neighbouring
   cards off the shared baseline. */
.qty__card:has(input:checked) {
    background: rgba(123, 0, 255, 0.14);
    border-color: var(--theme);
    box-shadow: inset 0 0 12px rgba(123, 0, 255, 0.25), 0 0 14px rgba(123, 0, 255, 0.25);
}

.qty__card:has(input:focus-visible) {
    outline: 2px solid var(--theme);
    outline-offset: 2px;
}

.qty__count {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
}

.qty__price {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
}

/* Sits inside the card bounds — an outdented badge would widen every
   ancestor and break the two-column order grid on desktop. */
.qty__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   Sticky order bar
   ========================================================================== */

.sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 10px 15px 20px;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.4) 0%, rgba(0, 0, 0, 0.95) 70%);
    backdrop-filter: blur(35px) saturate(180%);
    -webkit-backdrop-filter: blur(35px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(120%);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sticky-bar.is-visible {
    transform: translateY(0);
}

.sticky-bar__info {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Two plain text lines — the first reads like the old price line, the second
   like the status underneath it. */
.sticky-bar__line {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.sticky-bar__line--sub {
    margin-top: 3px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
}

.sticky-bar__btn {
    flex-grow: 1;
    padding: 16px 10px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--theme-gradient);
    box-shadow: 0 0 25px var(--theme-glow);
    color: #fff;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sticky-bar__btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    animation: shine 3s infinite ease-in-out;
    pointer-events: none;
}


/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 94%;
    padding: 6px 14px 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-150%);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast--success {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.8), rgba(0, 200, 83, 0.4));
    box-shadow: 0 20px 40px rgba(0, 200, 83, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 2px solid var(--theme);
    border-radius: 50%;
    background: #fff;
}

.toast--success .toast__icon {
    border-color: #fff;
}

.toast__body {
    flex: 1;
    min-width: 0;
}

.toast__title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.toast__text {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.9;
}

.toast__time {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--theme);
}

.toast--success .toast__time {
    color: #fff;
    opacity: 0.85;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    padding: 0 var(--gutter);
    text-align: center;
}

.footer__copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 30px;
    font-size: 11px;
    opacity: 0.4;
}

.footer__info {
    max-width: 400px;
    margin: 0 auto 15px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.4);
}

.footer__info p {
    margin-bottom: 4px;
}

.footer__info a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    list-style: none;
}

.footer__links a {
    /* inline-flex + min-height gives these small links a tappable box,
       while text-decoration keeps the underline tight to the glyphs. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
    opacity: 0.6;
    transition: opacity 0.3s ease, text-decoration-color 0.3s ease;
}

.footer__links a:hover {
    opacity: 1;
    text-decoration-color: #fff;
}

.footer__links a:hover {
    opacity: 1;
    border-color: #fff;
}


/* ==========================================================================
   Tablet — 767px and up
   ========================================================================== */

@media (min-width: 767px) {
    :root {
        --gutter: 24px;
        --content-width: 720px;
    }

    .layout {
        padding-top: 30px;
        padding-bottom: 140px;
    }

    /* Away from the viewport edge, the hero can be a fully rounded card. */
    .card--hero {
        border-top: 1px solid var(--card-border);
        border-top-left-radius: var(--radius-card);
        border-top-right-radius: var(--radius-card);
    }

    .section-head {
        padding: 34px 32px 12px;
    }

    .section-body {
        padding: 0 32px;
        margin-top: 20px;
    }

    .section-title,
    .heading {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .prose {
        font-size: 16px;
        /* Side-by-side blocks read better ranged left than centered. */
        text-align: left;
    }

    .prose h3 {
        font-size: 20px;
    }

    /* Text and image sit side by side, alternating which side the image
       falls on. Column order is set per block below, so the source order
       (text first) stays correct for screen readers either way. */
    .prose-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 28px;
    }

    .prose-block + .prose-block {
        margin-top: 56px;
    }

    .prose-block__text {
        min-width: 0;
    }

    .prose-block__media {
        min-width: 0;
    }

    .prose-block:nth-child(even) .prose-block__text {
        order: 2;
    }

    .prose-block .prose img {
        margin: 0;
    }

    .prose-block__media img {
        margin: 0;
        max-width: 100%;
    }

    /* A block with no image (empty repeater field) uses the full width
       instead of leaving a gap. */
    .prose-block:not(:has(.prose-block__media img)) {
        display: block;
    }

    .price__now {
        font-size: 72px;
    }

    .price__old {
        font-size: 22px;
    }

    /* Two columns of benefits fit comfortably from here up. */
    .benefits {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--benefit-gap);
    }

    .benefit {
        margin-bottom: 0;
    }

    /* A lone card on the final row is centered rather than left-hanging.
       It keeps one column's width and is nudged half a column + half a gap
       to the right, which lands it on the row's centre line.
       :nth-child(odd) counts from the start, so this only fires when the
       total count is odd — i.e. exactly when a row is left short. */
    .benefit:last-child:nth-child(odd) {
        grid-column: 1 / 2;
        transform: translateX(calc(50% + (var(--benefit-gap) / 2)));
    }

    /* Four cards fit without scrolling — center them on one row. The cards
       may shrink (`0 1`) so the list never imposes a min-content floor that
       would blow out the order card's two-column grid. */
    .qty__list {
        justify-content: center;
        min-width: 0;
    }

    .qty__card {
        flex: 1 1 0;
        max-width: 160px;
        min-width: 0;
    }

    .review-form .field,
    .form-error {
        font-size: 15px;
    }

    .sticky-bar {
        max-width: var(--content-width);
        padding: 12px 24px 20px;
        border-radius: 24px 24px 0 0;
    }

    .toast {
        max-width: 420px;
    }
}


/* ==========================================================================
   Desktop — 1024px and up
   ========================================================================== */

@media (min-width: 1024px) {
    :root {
        --gutter: 0px;
        --content-width: 1080px;
    }

    .layout {
        padding: 48px 32px 160px;
    }

    .card {
        margin-bottom: 64px;
    }

    /* Hero, order and specs become two-column: media beside the copy. */
    .card--hero,
    .card--order,
    .card--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Head hugs its content; body takes the remaining height and bottom-aligns. */
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "media head"
            "media body";
        padding-bottom: 0;
    }

    .card--hero .section-head,
    .card--order .section-head,
    .card--split .section-head {
        grid-area: head;
        padding: 40px 40px 24px;
        text-align: left;
    }

    .card--hero .section-title,
    .card--order .section-title,
    .card--split .section-title,
    .card--hero .section-subtitle,
    .card--order .section-subtitle,
    .card--split .section-subtitle {
        text-align: left;
    }

    .card--hero .media,
    .card--order .media,
    .card--split .media {
        grid-area: media;
        grid-row: 1 / -1;
        height: 100%;
        /* Keeps a square product shot from out-running the copy column. */
        max-height: 640px;
        margin-top: 0;
        border-top: none;
        border-bottom: none;
        border-right: 1px solid var(--card-border);
    }

    .card--hero .media img,
    .card--order .media img,
    .card--split .media img {
        height: 100%;
        object-fit: cover;
    }

    .card--hero .section-body,
    .card--order .section-body,
    .card--split .section-body {
        grid-area: body;
        align-self: start;
        /* Grid items default to min-width:auto; without this a wide child
           (the quantity row) would force the column past its 1fr share. */
        min-width: 0;
        padding: 0 40px 40px;
    }

    .card--hero .section-head,
    .card--order .section-head,
    .card--split .section-head {
        min-width: 0;
    }

    /* The specs table is short, so its media column is sized by the copy
       rather than by a fixed cap — the image fills whatever height the
       list needs, however many rows the repeater outputs. */
    .card--split .media {
        max-height: none;
    }

    /* Stacked (non-split) cards keep their single-column layout but get
       roomier padding. Excluded from the split cards, which set their own
       padding above and would otherwise be overridden by source order. */
    .card:not(.card--hero, .card--order, .card--split) .section-head {
        padding: 40px 40px 12px;
    }

    .card:not(.card--hero, .card--order, .card--split) .section-body {
        padding: 0 40px 8px;
    }

    .section-title,
    .heading {
        font-size: 38px;
    }

    .heading {
        margin-bottom: 28px;
    }

    .price {
        justify-content: flex-start;
    }

    .price__now {
        font-size: 76px;
    }

    .prose {
        max-width: 760px;
        margin: 0 auto;
        font-size: 17px;
    }

    /* Three benefit columns on desktop. */
    .benefits {
        --benefit-gap: 24px;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--benefit-gap);
        margin-bottom: 64px;
    }

    .benefit {
        padding: 28px;
    }

    /* Clear the two-column centering; three columns leave a different
       remainder and are handled by the two rules below. */
    .benefit:last-child:nth-child(odd) {
        grid-column: auto;
        transform: none;
    }

    /* Remainder of 1 (count = 3n+1): centre the lone card on the row. */
    .benefit:last-child:nth-child(3n + 1) {
        grid-column: 1 / 2;
        transform: translateX(calc(100% + var(--benefit-gap)));
    }

    /* Remainder of 2 (count = 3n+2): centre the pair by shifting both
       half a column + half a gap right. */
    .benefit:nth-last-child(2):nth-child(3n + 1),
    .benefit:nth-last-child(2):nth-child(3n + 1) ~ .benefit:last-child {
        transform: translateX(calc(50% + (var(--benefit-gap) / 2)));
    }

    /* Two review columns; the feed reads as a masonry-ish grid. */
    .reviews {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: 20px;
        margin-bottom: 64px;
    }

    .review {
        padding: 20px;
    }

    .trust {
        padding: 28px 32px;
    }

    .trust__shop {
        font-size: 17px;
    }

    .trust__score b {
        font-size: 34px;
    }

    /* Review form sits centered rather than spanning the full width. */
    .review-toggle,
    .review-form.is-open {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .review-toggle {
        font-size: 14px;
    }

    /* Four cards share the copy column, so they grow to fill it evenly
       rather than sitting at a fixed width. */
    .qty__card {
        flex: 1 1 0;
        padding: 22px 12px 16px;
    }

    .btn {
        min-height: 74px;
        font-size: 20px;
    }

    /* Hover affordances only make sense with a pointer. */
    .btn--primary:hover,
    .sticky-bar__btn:hover {
        filter: brightness(1.08);
    }

    .bundles {
        max-width: 720px;
        margin: 0 auto 64px;
    }

    .bundle {
        padding: 20px 10px;
    }

    .sticky-bar {
        max-width: 1080px;
        padding: 14px 32px 18px;
        border-radius: 24px 24px 0 0;
    }

    .sticky-bar__btn {
        flex-grow: 0;
        min-width: 320px;
        margin-left: auto;
    }

    .footer {
        padding-top: 16px;
    }

    .footer__info {
        max-width: 640px;
        font-size: 13px;
    }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}