/**
 * Monthly Drop — Frontend Styles
 *
 * Design language: dark brutalist (from sample mockup)
 * - Fonts: Bebas Neue (headings), Space Mono (body)
 * - Colors: #0a0a0a bg, #f0ede6 text, #c0392b accent
 * - Micro-type: 9–11px uppercase with wide letter-spacing
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */

:root {
    --md-bg:            #0a0a0a;
    --md-bg-card:       #111111;
    --md-border:        #222222;
    --md-border-light:  #333333;
    --md-text:          #f0ede6;
    --md-text-muted:    #888888;
    --md-text-dim:      #555555;
    --md-text-faint:    #444444;
    --md-accent:        #c0392b;
    --md-accent-glow:   rgba(192, 57, 43, 0.25);
    --md-white:         #f0ede6;
    --md-black:         #0a0a0a;

    --md-font-heading:  'Bebas Neue', sans-serif;
    --md-font-body:     'Space Mono', monospace;

    --md-radius:        4px;
    --md-radius-sm:     2px;

    --md-transition:    0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* Text alignment */
.md-text--left   { text-align: left; }
.md-text--center { text-align: center; }
.md-text--right  { text-align: right; }

/* Center child elements when text is centered */
.md-text--center .md-card__label,
.md-text--center .md-card__bundle,
.md-text--center .md-card__countdown,
.md-text--center .md-card__pricing,
.md-text--center .md-card__actions {
    justify-content: center;
}

.md-text--right .md-card__label,
.md-text--right .md-card__bundle,
.md-text--right .md-card__countdown,
.md-text--right .md-card__pricing,
.md-text--right .md-card__actions {
    justify-content: flex-end;
}

/* Container alignment within parent */
.md-align--left   { margin-left: 0; margin-right: auto; }
.md-align--center { margin-left: auto; margin-right: auto; }
.md-align--right  { margin-left: auto; margin-right: 0; }

/* Full-width button modifier */
.md-card--full-btn .md-card__actions { display: flex; }
.md-card--full-btn .md-card__actions .md-btn { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   DROP CARD — [monthly_drop_card]
   ═══════════════════════════════════════════════════════════════ */

.md-card {
    background: var(--md-bg-card);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    overflow: hidden;
    font-family: var(--md-font-body);
    color: var(--md-text);
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}

.md-card--hero {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.md-card--hero .md-card__image {
    min-height: 400px;
}

.md-card--minimal {
    border: none;
    background: transparent;
}

.md-card--empty {
    padding: 40px;
    text-align: center;
    color: var(--md-text-muted);
    font-size: 12px;
    letter-spacing: 1px;
}

/* ── No-drop state ─────────────────────────────────────────── */

.md-card--no-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    padding: 0;
}

.md-card__no-drop-inner {
    text-align: center;
    padding: 48px 32px;
    max-width: 320px;
}

.md-card__no-drop-icon {
    font-size: 24px;
    color: var(--md-text-muted);
    margin-bottom: 16px;
    opacity: 0.3;
}

.md-card__no-drop-heading {
    font-family: var(--md-font-heading);
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--md-text);
    margin: 0 0 12px;
}

.md-card__no-drop-desc {
    font-size: 11px;
    line-height: 1.8;
    color: var(--md-text-muted);
    margin: 0 0 24px;
    letter-spacing: 0.3px;
}

.md-card__no-drop-link {
    display: inline-block;
    font-family: var(--md-font-body);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--md-accent);
    text-decoration: none;
    border: 1px solid var(--md-accent);
    padding: 10px 20px;
    border-radius: var(--md-radius-sm);
    transition: background var(--md-transition), color var(--md-transition);
}

.md-card__no-drop-link:hover {
    background: var(--md-accent);
    color: var(--md-bg);
}

/* ── Image ─────────────────────────────────────────────────── */

.md-card__image {
    position: relative;
    background: var(--md-bg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-card--hero .md-card__image {
    aspect-ratio: auto;
}

.md-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.md-card__img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--md-text-dim);
    text-transform: uppercase;
}

/* Drop badge overlay on image */
.md-card__drop-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--md-accent);
    color: var(--md-white);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--md-radius-sm);
}

/* ── Body ──────────────────────────────────────────────────── */

.md-card__body {
    padding: 24px;
}

/* Label ("Active Drop" / "Upcoming" / "Ended") */
.md-card__label {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--md-accent);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.md-card__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--md-accent);
    display: inline-block;
    flex-shrink: 0;
}

/* Dot is ALWAYS red — the accent color */
/* No per-state dot colors. State color only goes on the label text. */

/* Pulse animation for live dot */
.md-card__dot {
    animation: md-pulse 2s ease-in-out infinite;
}

@keyframes md-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* State label text — the ONLY place green/orange/dim appear */
.md-card__state {
    /* inherits label styles */
}

.md-card__state--current  { color: var(--md-accent); }
.md-card__state--upcoming { color: #2ecc71; }
.md-card__state--past     { color: var(--md-text-dim); }

/* Past card is slightly dimmed */
.md-card--past { opacity: 0.75; }

/* ── Subtitle (inline countdown text) ──────────────────────── */

.md-card__sub {
    font-size: 10px;
    color: var(--md-text-dim);
    letter-spacing: 1px;
    margin: 0 0 16px;
}

/* Heading */
.md-card__heading {
    font-family: var(--md-font-heading);
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: 2px;
    line-height: 1.05;
    margin: 0 0 16px;
    color: var(--md-text);
}

/* ── Segmented countdown (for future use) ──────────────────── */

.md-card__countdown {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 20px;
}

.md-countdown__segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--md-bg);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-sm);
    padding: 8px 10px;
    min-width: 48px;
}

.md-countdown__number {
    font-family: var(--md-font-heading);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--md-text);
    line-height: 1;
}

.md-countdown__label {
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--md-text-dim);
    margin-top: 4px;
}

.md-countdown__sep {
    font-size: 14px;
    color: var(--md-text-dim);
    padding: 0 2px;
    margin-top: -8px;
}

/* ── Bundle badges ─────────────────────────────────────────── */

.md-card__bundle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.md-card__badge {
    border: 1px solid var(--md-border-light);
    border-radius: var(--md-radius-sm);
    padding: 5px 12px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--md-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ── Pricing ───────────────────────────────────────────────── */

.md-card__pricing {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 20px;
    flex-wrap: wrap;
}

.md-card__drop-price {
    font-family: var(--md-font-heading);
    font-size: 36px;
    letter-spacing: 1px;
    color: var(--md-text);
    line-height: 1;
}

.md-card__regular-price {
    font-size: 14px;
    color: var(--md-text-dim);
    text-decoration: line-through;
}

.md-card__savings {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--md-accent);
    font-weight: 700;
}

/* ── Buttons ───────────────────────────────────────────────── */

.md-btn {
    display: inline-block;
    font-family: var(--md-font-body);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: var(--md-radius-sm);
    cursor: pointer;
    transition: all var(--md-transition);
    text-decoration: none;
    text-align: center;
    border: none;
    line-height: 1;
    min-height: 48px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.md-btn--primary {
    background: transparent;
    color: var(--md-accent);
    border: 2px solid var(--md-accent);
}

.md-btn--primary:hover {
    background: #27ae60;
    color: var(--md-white);
    border-color: #27ae60;
    box-shadow: 0 0 20px rgba(39, 174, 96, 0.25);
}

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

.md-btn--primary:disabled,
.md-btn--ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.md-btn--ghost {
    background: transparent;
    color: var(--md-text-muted);
    border: 1px solid var(--md-border-light);
}

.md-btn--ghost:hover {
    color: var(--md-text);
    border-color: var(--md-text-muted);
}

/* Loading state */
.md-btn--loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Success state after add-to-cart */
.md-btn--success {
    background: #27ae60 !important;
    color: var(--md-white) !important;
    pointer-events: none;
}

/* ── Note ──────────────────────────────────────────────────── */

.md-card__note {
    font-size: 10px;
    color: var(--md-text-faint);
    letter-spacing: 0.5px;
    line-height: 1.7;
    border-top: 1px solid var(--md-border);
    padding-top: 16px;
    margin: 16px 0 0;
}

.md-card__note strong {
    color: var(--md-text-muted);
}

/* ── Actions wrapper ───────────────────────────────────────── */

.md-card__actions {
    margin: 0 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE — Drop Window Display
   Shown on WooCommerce single product page above the add-to-cart form.
   ═══════════════════════════════════════════════════════════════ */

.md-product-drop {
    font-family: var(--md-font-body);
    background: var(--md-bg);
    border: 1px solid var(--md-border-light);
    border-left: 3px solid var(--md-accent);
    border-radius: var(--md-radius-sm);
    padding: 14px 16px;
    margin: 0 0 20px;
    max-width: 400px;
}

.md-product-drop__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.md-product-drop__state {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
}

.md-product-drop__state--current  { color: var(--md-accent); }
.md-product-drop__state--upcoming { color: #2ecc71; }
.md-product-drop__state--past     { color: var(--md-text-dim); }

/* Info panel: Stay Tuned (no product) state */
.md-info__status-text--none        { color: var(--md-text-muted); }

.md-product-drop__dates {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.md-product-drop__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.md-product-drop__label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--md-accent);
    font-weight: 700;
}

.md-product-drop__val {
    font-size: 11px;
    color: var(--md-text);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.md-product-drop__price-note {
    font-size: 10px;
    color: var(--md-text-muted);
    letter-spacing: 0.5px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--md-border);
}

.md-product-drop__price-note .woocommerce-Price-amount {
    color: var(--md-accent);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   DROP BANNER — [monthly_drop_banner]
   ═══════════════════════════════════════════════════════════════ */

.md-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 24px;
    font-family: var(--md-font-body);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--md-transition);
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Text align overrides for banner flex */
.md-banner.md-text--left   { justify-content: flex-start; }
.md-banner.md-text--center { justify-content: center; }
.md-banner.md-text--right  { justify-content: flex-end; }

/* Default style */
.md-banner--default {
    background: var(--md-bg-card);
    color: var(--md-text);
    border: 1px solid var(--md-border);
}

.md-banner--default:hover {
    background: var(--md-border);
    color: var(--md-white);
}

/* Minimal style */
.md-banner--minimal {
    background: transparent;
    color: var(--md-text-muted);
    border-bottom: 1px solid var(--md-border);
}

.md-banner--minimal:hover {
    color: var(--md-text);
}

/* Urgent style */
.md-banner--urgent {
    background: var(--md-accent);
    color: var(--md-white);
    border: none;
}

.md-banner--urgent:hover {
    background: #e74c3c;
}

.md-banner--empty {
    text-align: center;
    padding: 12px;
    color: var(--md-text-muted);
    font-size: 10px;
    letter-spacing: 1px;
    border: 1px dashed var(--md-border);
}

.md-banner__text {
    flex: 1;
    min-width: 0;
}

.md-banner__countdown {
    font-size: 10px;
    color: inherit;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.md-banner__arrow {
    font-size: 14px;
    transition: transform var(--md-transition);
    flex-shrink: 0;
}

.md-banner:hover .md-banner__arrow {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════
   DROP INFO PANEL — [monthly_drop_info]
   Single column, stacked sections. Middle row is two-col on desktop.
   ═══════════════════════════════════════════════════════════════ */

.md-info {
    font-family: var(--md-font-body);
    color: var(--md-text);
    background: var(--md-bg-card);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    overflow: hidden;
    box-sizing: border-box;
    padding: 28px;
    max-width: 720px;
    width: 100%;
}

/* Past state dims the panel */
.md-info--past { opacity: 0.75; }

/* ── Header: product name + status ─────────────────────────── */

.md-info__header {
    margin: 0 0 24px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--md-border);
}

.md-info__heading {
    font-family: var(--md-font-heading);
    font-size: clamp(26px, 4vw, 36px);
    letter-spacing: 2px;
    line-height: 1.05;
    margin: 0 0 8px;
    color: var(--md-text);
}

.md-info__status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.md-info__status-text {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--md-accent);
}

.md-info__status-text--current  { color: var(--md-accent); }
.md-info__status-text--upcoming { color: #2ecc71; }
.md-info__status-text--past     { color: var(--md-text-dim); }

/* ── Sections (shared label/spacing) ───────────────────────── */

.md-info__section {
    margin-bottom: 24px;
}

.md-info__section--last {
    margin-bottom: 0;
}

.md-info__label {
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--md-text-faint);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #1a1a1a;
}

/* ── Intro ─────────────────────────────────────────────────── */

.md-info__intro {
    font-size: 11px;
    line-height: 1.9;
    color: var(--md-text-muted);
    margin: 0;
}

.md-info__intro strong {
    color: var(--md-accent);
    font-weight: 700;
}

/* ── Middle: stacked content (steps + pricing + dates) ─────── */

.md-info__middle {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--md-border);
}

/* ── Steps ─────────────────────────────────────────────────── */

.md-info__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.md-info__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.md-info__step-num {
    font-family: var(--md-font-heading);
    font-size: 20px;
    color: #222;
    line-height: 1;
    min-width: 20px;
    flex-shrink: 0;
}

.md-info__step-title {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c8c3bb;
    margin: 0 0 2px;
}

.md-info__step-desc {
    font-size: 9px;
    color: var(--md-text-dim);
    letter-spacing: 0.3px;
    line-height: 1.7;
    margin: 0;
}

/* ── Detail blocks (pricing, dates) ────────────────────────── */

.md-info__detail-block {
    margin-bottom: 20px;
}

.md-info__detail-block:last-child {
    margin-bottom: 0;
}

/* ── Prices ────────────────────────────────────────────────── */

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

.md-info__price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.md-info__price-row--drop {
    padding: 6px 0;
}

.md-info__price-row--savings {
    padding: 6px 0;
}

.md-info__price-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--md-text-muted);
}

.md-info__price-val {
    font-family: var(--md-font-heading);
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--md-text);
}

.md-info__price-val--regular {
    font-size: 16px;
    color: var(--md-text-dim);
    text-decoration: line-through;
}

.md-info__price-val--drop {
    color: var(--md-text);
    font-size: 24px;
}

.md-info__price-val--savings {
    color: var(--md-accent);
    font-size: 18px;
}

/* ── Dates ─────────────────────────────────────────────────── */

.md-info__dates {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--md-bg);
    border: 1px solid var(--md-border-light);
    border-left: 3px solid var(--md-accent);
    border-radius: var(--md-radius-sm);
    padding: 12px 14px;
}

.md-info__date-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.md-info__date-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--md-accent);
    font-weight: 700;
}

.md-info__date-val {
    font-size: 12px;
    color: var(--md-white);
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* ── Benefits grid ─────────────────────────────────────────── */

.md-info__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.md-info__benefit {
    background: var(--md-bg);
    border: 1px solid #1e1e1e;
    border-radius: 3px;
    padding: 10px 12px;
}

.md-info__benefit-icon {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--md-accent);
    display: block;
}

.md-info__benefit-title {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #bbb;
    margin: 0 0 3px;
}

.md-info__benefit-desc {
    font-size: 8px;
    color: var(--md-text-dim);
    line-height: 1.6;
    margin: 0;
}

/* Text alignment overrides */
.md-text--center .md-info__step { justify-content: center; }
.md-text--center .md-info__label { text-align: center; }
.md-text--center .md-info__status { justify-content: center; }
.md-text--center .md-info__price-row,
.md-text--center .md-info__date-row { justify-content: center; gap: 16px; }
.md-text--right .md-info__status { justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════════
   DROP SECTION — [monthly_drop_section]
   Unified wrapper: card (left) + info (right) on desktop, stacked on mobile.
   ═══════════════════════════════════════════════════════════════ */

.md-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--md-bg-card);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    overflow: hidden;
}

/* Children fill their grid cells — remove their own max-width, border, radius */
.md-section__card,
.md-section__info {
    min-width: 0; /* prevent grid blowout */
}

.md-section__card .md-card,
.md-section__info .md-info {
    max-width: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* Add a subtle left border on the info side */
.md-section__info {
    border-left: 1px solid var(--md-border);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Section stacks to single column on tablet */
    .md-section {
        grid-template-columns: 1fr;
    }

    .md-section__info {
        border-left: none;
        border-top: 1px solid var(--md-border);
    }

    /* Hero collapses to stacked */
    .md-card--hero {
        grid-template-columns: 1fr;
    }

    .md-card--hero .md-card__image {
        min-height: auto;
    }

    /* Image aspect-ratio adjusts on tablet */
    .md-card__image {
        aspect-ratio: 16 / 9;
    }

    .md-card__heading {
        font-size: clamp(24px, 5vw, 32px);
    }

    /* Countdown tightens */
    .md-countdown__segment {
        padding: 6px 8px;
        min-width: 40px;
    }

    .md-countdown__number {
        font-size: 18px;
    }

    /* Pricing */
    .md-card__drop-price {
        font-size: 28px;
    }

    /* Banner wraps gracefully */
    .md-banner {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 10px;
        padding: 10px 16px;
    }

    .md-banner__text {
        flex: 1 1 100%;
        text-align: center;
    }

    .md-banner__countdown {
        font-size: 9px;
        flex: 1 1 auto;
        text-align: center;
    }

    .md-banner__arrow {
        display: none;
    }

    /* No-drop card tablet */
    .md-card--no-drop {
        min-height: 280px;
    }

    .md-card__no-drop-inner {
        padding: 36px 24px;
    }

    /* Info panel tablet */
    .md-info {
        padding: 22px;
    }

    .md-info__heading {
        font-size: clamp(22px, 5vw, 30px);
    }

    .md-info__section {
        margin-bottom: 20px;
    }

    .md-info__middle {
        gap: 20px;
    }

    .md-info__date-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .md-text--center .md-info__date-row {
        align-items: center;
    }

    .md-info__benefits {
        gap: 6px;
    }

    .md-info__benefit {
        padding: 8px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Phone (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .md-card__body {
        padding: 16px;
    }

    .md-card__image {
        aspect-ratio: 3 / 2;
    }

    .md-card__heading {
        font-size: clamp(22px, 6vw, 28px);
    }

    /* Countdown stacks */
    .md-countdown__segment {
        padding: 6px;
        min-width: 36px;
    }

    .md-countdown__number {
        font-size: 16px;
    }

    .md-countdown__label {
        font-size: 6px;
    }

    /* Pricing */
    .md-card__drop-price {
        font-size: 28px;
    }

    .md-card__regular-price {
        font-size: 12px;
    }

    /* Bundle badges */
    .md-card__bundle {
        gap: 6px;
    }

    .md-card__badge {
        font-size: 7px;
        padding: 3px 8px;
        letter-spacing: 1px;
    }

    /* Drop badge */
    .md-card__drop-badge {
        font-size: 7px;
        padding: 3px 8px;
    }

    /* Buttons full-width on small phones */
    .md-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 9px;
    }

    .md-card__actions .md-btn {
        width: 100%;
    }

    /* Note */
    .md-card__note {
        font-size: 8px;
    }

    /* Banner is tighter on phones */
    .md-banner {
        padding: 10px 12px;
        font-size: 9px;
        letter-spacing: 1px;
        gap: 6px;
    }

    /* No-drop card phone */
    .md-card--no-drop {
        min-height: 240px;
    }

    .md-card__no-drop-inner {
        padding: 28px 20px;
    }

    .md-card__no-drop-heading {
        font-size: 18px;
    }

    .md-card__no-drop-desc {
        font-size: 10px;
    }

    /* Details panel phone */
    .md-info {
        padding: 16px;
    }

    .md-info__heading {
        font-size: clamp(20px, 6vw, 26px);
    }

    /* Middle tightens on phone */
    .md-info__middle {
        gap: 16px;
    }

    .md-info__date-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .md-info__date-val {
        font-size: 10px;
    }

    .md-info__price-val {
        font-size: 16px;
    }

    .md-info__price-val--drop {
        font-size: 20px;
    }

    /* Info panel phone */
    .md-info__section {
        margin-bottom: 16px;
    }

    .md-info__intro {
        font-size: 10px;
    }

    .md-info__step-num {
        font-size: 16px;
    }

    .md-info__step-title {
        font-size: 9px;
    }

    .md-info__step-desc {
        font-size: 8px;
    }

    .md-info__benefits {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .md-info__benefit-title {
        font-size: 8px;
    }

    .md-info__benefit-desc {
        font-size: 7px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Landscape phones
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: landscape) {
    /* Hero side-by-side works in landscape */
    .md-card--hero {
        grid-template-columns: 1fr 1fr;
    }

    .md-card--hero .md-card__image {
        min-height: 250px;
    }

    .md-card__image {
        aspect-ratio: 16 / 9;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT — hide interactive elements
   ═══════════════════════════════════════════════════════════════ */

@media print {
    .md-btn--primary,
    .md-banner {
        display: none !important;
    }

    .md-info {
        border: 1px solid #ccc;
        background: #fff;
        color: #000;
    }
}