/**
 * RO Shop storefront styles — "Crystal Aqua" design system (v1.5.0).
 *
 * SCOPING: every selector is namespaced under the plugin's own `ro-`
 * prefixed classes / ids (`.ro-shop`, `.ro-form-card`, `#ro-toast`, …),
 * which are only ever printed by RO Shop shortcodes and templates. No
 * bare element selectors, no theme targets — Divi, the active theme, and
 * other plugins are never touched. The `:root` block only declares
 * namespaced custom properties (nothing is styled by it).
 *
 * Design: translucent "crystal" surfaces with backdrop-filter floating
 * over a soft aqua gradient canvas, gradient primary buttons, glass
 * pills and badges. @supports guards degrade every glass surface to a
 * near-solid panel when backdrop-filter is unavailable.
 *
 * Colors are driven by CSS variables; the primary color is set from
 * Settings → RO Shop → Appearance (inline style in the page head).
 */

:root {
        --ro-primary: #0284c7;
        --ro-primary-dark: #0369a1;
        --ro-primary-light: rgba(2, 132, 199, 0.08);
        --ro-grad: linear-gradient(135deg, var(--ro-primary) 0%, #06b6d4 100%);
        --ro-ink: #0c1f33;
        --ro-body: #35516a;
        --ro-muted: #67839b;
        --ro-line: #e2e8f0;
        --ro-bg: #f8fafc;
        --ro-card: #ffffff;
        --ro-success: #059669;
        --ro-danger: #dc2626;
        --ro-warn: #d97706;
        --ro-radius: 16px;
        --ro-radius-sm: 11px;
        --ro-shadow: 0 1px 2px rgba(12, 31, 51, 0.05), 0 16px 40px -18px rgba(12, 31, 51, 0.2);
        --ro-glow: 0 10px 28px -10px rgba(2, 132, 199, 0.5);
        --ro-glass: rgba(255, 255, 255, 0.72);
        --ro-glass-strong: rgba(255, 255, 255, 0.9);
        --ro-glass-border: rgba(255, 255, 255, 0.78);
        --ro-glass-blur: blur(16px) saturate(1.55);
        --ro-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        --ro-font-head: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Canvas ---------- */

.ro-shop {
        font-family: var(--ro-font);
        color: var(--ro-body);
        font-size: 16px;
        line-height: 1.65;
        position: relative;
        margin: 28px 0 16px;
        padding: 12px;
        border-radius: 22px;
        background:
                radial-gradient(1100px 420px at 88% -120px, rgba(14, 165, 233, 0.17), transparent 62%),
                radial-gradient(820px 380px at -12% 6%, rgba(6, 182, 212, 0.13), transparent 58%),
                linear-gradient(180deg, rgba(232, 244, 251, 0.92) 0%, rgba(244, 250, 254, 0.5) 340px, rgba(248, 250, 252, 0) 700px);
}

.ro-shop * { box-sizing: border-box; }
.ro-shop img { max-width: 100%; height: auto; display: block; }
.ro-shop h1, .ro-shop h2, .ro-shop h3 { font-family: var(--ro-font-head); letter-spacing: -0.015em; color: var(--ro-ink); }
.ro-shop h1 { font-weight: 700; }
.ro-shop h2 { font-weight: 700; }
.ro-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.ro-container-narrow { max-width: 760px; }

/* ---------- Hero ---------- */

.ro-hero {
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        color: #fff;
        padding: 64px 0;
        background: linear-gradient(135deg, #0369a1 0%, var(--ro-primary) 48%, #06b6d4 130%);
        box-shadow: var(--ro-glow);
}
.ro-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(640px 240px at 82% -60px, rgba(255, 255, 255, 0.28), transparent 62%);
        pointer-events: none;
}
.ro-hero .ro-container { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; position: relative; z-index: 1; }
.ro-hero-text { flex: 1 1 380px; }
.ro-hero-text h1 { color: #fff; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 0 0 14px; font-weight: 700; text-shadow: 0 2px 18px rgba(3, 44, 74, 0.35); }
.ro-hero-text p { margin: 0; font-size: 17px; line-height: 1.6; opacity: 0.95; max-width: 520px; text-shadow: 0 1px 10px rgba(3, 44, 74, 0.3); }
.ro-hero-image { flex: 0 1 340px; }
.ro-hero-image img { border-radius: var(--ro-radius); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 18px 44px rgba(3, 44, 74, 0.4); }

.ro-promo-strip {
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.55);
        -webkit-backdrop-filter: blur(14px) saturate(1.6);
        backdrop-filter: blur(14px) saturate(1.6);
        border: 1px solid var(--ro-glass-border);
        border-radius: 999px;
        margin: 14px 4px 0;
        padding: 10px 16px;
        text-align: center;
        color: #075985;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.2px;
}

/* ---------- Category chips ---------- */

.ro-category-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0 24px; }
.ro-chip {
        padding: 8px 18px;
        border-radius: 999px;
        border: 1px solid var(--ro-glass-border);
        background: var(--ro-glass);
        -webkit-backdrop-filter: blur(10px) saturate(1.5);
        backdrop-filter: blur(10px) saturate(1.5);
        color: var(--ro-body);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 2px 10px -4px rgba(12, 31, 51, 0.18);
        transition: all 0.16s ease;
}
.ro-chip:hover { border-color: var(--ro-primary); color: var(--ro-primary); transform: translateY(-1px); }
.ro-chip.is-active { background: var(--ro-grad); border-color: transparent; color: #fff; box-shadow: var(--ro-glow); }

/* ---------- Product grid ---------- */

.ro-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 10px 0 52px; }
.ro-product-card {
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: var(--ro-shadow);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ro-product-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(12, 31, 51, 0.06), 0 24px 48px -18px rgba(12, 31, 51, 0.28); }
/*
 * v2.25.1: the image is an absolute fill, scoped with .ro-product-card so
 * the rule outranks the generic image resets that load in LATER
 * stylesheets (.ro-divi img / .ro-shop img { height:auto } — the Divi
 * module CSS registers after the storefront CSS and a same-specificity
 * tie loses by source order, which left every module-rendered shop/grid
 * card with an uncovered strip under the photo since 2.23.0). The flex
 * column card made an in-flow img defeat the aspect ratio two MORE ways:
 * its intrinsic height set the flex item's min-height:auto floor (a
 * flatter ratio than the photo never applied — the box grew to the
 * photo's own ratio), and height:100% never resolved against the
 * ratio-derived height. position:absolute + full offsets makes the ratio
 * box authoritative in both directions; object-fit:cover does the crop.
 * The placeholder gets the same fill, scoped to the card media box only —
 * the comparison cells, cart thumbs, configurator and split-layout
 * placeholders keep their own sizing contexts.
 */
.ro-card-media { position: relative; display: block; aspect-ratio: 4/3; background: var(--ro-bg); overflow: hidden; }
.ro-product-card .ro-card-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ro-product-card .ro-card-media .ro-card-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ro-card-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(6, 182, 212, 0.08)), linear-gradient(180deg, #f0f7fc, #e6f2fa); }
.ro-placeholder-large { min-height: 320px; border-radius: var(--ro-radius); }
.ro-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ro-badge-sale { background: rgba(220, 38, 38, 0.92); color: #fff; box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.6); }
.ro-badge-oos { background: rgba(12, 31, 51, 0.85); color: #fff; }
.ro-badge-addon { position: static; background: var(--ro-primary-light); color: var(--ro-primary); border: 1px solid rgba(2, 132, 199, 0.25); }
.ro-card-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ro-card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.ro-card-title a { color: var(--ro-ink); text-decoration: none; }
.ro-card-title a:hover { color: var(--ro-primary); }
.ro-card-price { display: flex; align-items: baseline; gap: 8px; }
.ro-price { color: var(--ro-primary); font-weight: 700; font-size: 19px; font-family: var(--ro-font-head); }
.ro-price-lg { font-size: 30px; }
.ro-price-was { color: var(--ro-muted); text-decoration: line-through; font-size: 14px; }
.ro-card-body .ro-btn { margin-top: auto; }

/* ---------- v2.22.0: the reference product card ----------
 * One card everywhere (shop listing, AJAX-filtered grid, Divi Product
 * Grid / Shop Page modules): GPD/capacity badge over the image, clamped
 * title + short description, price, optional comparison checkbox, and
 * the View Details + Add to Cart pair pinned to the card bottom so cards
 * in the same row stay visually balanced without forced blank space. */
.ro-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.ro-card-desc {
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
        color: var(--ro-muted);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
.ro-badge-gpd {
        left: auto;
        right: 12px;
        background: var(--ro-grad);
        color: #fff;
        box-shadow: 0 6px 16px -6px rgba(2, 132, 199, 0.65);
        font-family: var(--ro-font-head);
}
/*
 * v2.24.0: the "Add to comparison" card checkbox is REMOVED — cards
 * stay clean (Image → GPD badge → Title → Description → Price →
 * View Details + Add to Cart). The comparison TABLE styles further
 * below remain for the RO Product Comparison module.
 */
.ro-card-actions {
        display: flex;
        gap: 10px;
        margin-top: auto;
        align-items: stretch;
        justify-content: var(--ro-actions-align, flex-start);
}
.ro-card-actions .ro-btn { flex: 0 1 auto; margin: 0; min-width: 0; }
.ro-card-actions.ro-card-actions--pair .ro-btn { flex: var(--ro-actions-fill, 1) 1 auto; }
.ro-view-details { text-decoration: none; }

/* ---------- v2.22.0: shop listing toolbar, pagination, compare view ---------- */
.ro-shop-listing { position: relative; }
.ro-shop-listing-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }
.ro-shop-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0 0 18px;
}
.ro-result-count { margin: 0; color: var(--ro-muted); font-size: 14px; }
.ro-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ro-body); }
.ro-sort-select {
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid var(--ro-glass-border);
        background: var(--ro-glass);
        -webkit-backdrop-filter: blur(10px) saturate(1.5);
        backdrop-filter: blur(10px) saturate(1.5);
        color: var(--ro-ink);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 10px -4px rgba(12, 31, 51, 0.18);
}
.ro-sort-select:focus { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
.ro-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin: 28px 0 8px;
}
.ro-page-link {
        min-width: 38px;
        height: 38px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--ro-glass-border);
        background: var(--ro-glass);
        color: var(--ro-body);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.16s ease;
}
.ro-page-link:hover { border-color: var(--ro-primary); color: var(--ro-primary); transform: translateY(-1px); }
.ro-page-link.is-current,
.ro-page-link[aria-current="page"] { background: var(--ro-grad); border-color: transparent; color: #fff; box-shadow: var(--ro-glow); }
.ro-page-ellipsis { color: var(--ro-muted); padding: 0 2px; }

/* ---------- Buttons ---------- */

.ro-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        cursor: pointer;
        font-family: var(--ro-font);
        font-weight: 700;
        font-size: 15px;
        border-radius: var(--ro-radius-sm);
        padding: 11px 20px;
        text-decoration: none;
        line-height: 1.2;
        transition: all 0.16s ease;
}
.ro-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ro-btn:focus-visible { outline: 3px solid rgba(2, 132, 199, 0.35); outline-offset: 2px; }
.ro-btn-primary {
        background: var(--ro-grad);
        color: #fff;
        box-shadow: var(--ro-glow);
}
.ro-btn-primary:hover:not(:disabled) {
        filter: brightness(1.07);
        transform: translateY(-1px);
        box-shadow: 0 14px 34px -10px rgba(2, 132, 199, 0.6);
}
.ro-btn-secondary {
        background: var(--ro-glass-strong);
        -webkit-backdrop-filter: blur(10px) saturate(1.5);
        backdrop-filter: blur(10px) saturate(1.5);
        color: var(--ro-primary-dark);
        border: 1px solid var(--ro-glass-border);
        box-shadow: 0 2px 10px -4px rgba(12, 31, 51, 0.2);
}
.ro-btn-secondary:hover:not(:disabled) { background: var(--ro-grad); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: var(--ro-glow); }
.ro-btn-lg { padding: 14px 26px; font-size: 16px; }
.ro-btn-block { width: 100%; }
.ro-link-danger { background: none; border: 0; color: var(--ro-danger); font-size: 14px; cursor: pointer; text-decoration: underline; padding: 0; }
.ro-link-continue { display: inline-block; margin-top: 12px; color: var(--ro-muted); text-decoration: none; font-size: 14px; }
.ro-link-continue:hover { color: var(--ro-primary); }

/* ---------- Quantity stepper ---------- */

.ro-qty { display: inline-flex; align-items: center; border: 1px solid var(--ro-glass-border); border-radius: var(--ro-radius-sm); overflow: hidden; background: var(--ro-glass-strong); box-shadow: inset 0 1px 2px rgba(12, 31, 51, 0.05); }
.ro-qty-btn { width: 38px; height: 40px; border: 0; background: rgba(248, 250, 252, 0.7); font-size: 18px; cursor: pointer; color: var(--ro-body); }
.ro-qty-btn:hover { background: var(--ro-primary-light); color: var(--ro-primary); }
.ro-qty input { width: 52px; height: 40px; border: 0; background: transparent; text-align: center; font-size: 15px; font-weight: 700; -moz-appearance: textfield; }
.ro-qty input::-webkit-outer-spin-button, .ro-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ro-qty-sm .ro-qty-btn { width: 30px; height: 32px; font-size: 15px; }
.ro-qty-sm input { width: 42px; height: 32px; font-size: 14px; }

/* ---------- Toast ---------- */

#ro-toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(12, 31, 51, 0.86);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        color: #fff;
        padding: 13px 22px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        font-size: 14px;
        font-weight: 600;
        opacity: 0;
        pointer-events: none;
        transition: all 0.25s ease;
        z-index: 9999;
        box-shadow: 0 14px 40px rgba(12, 31, 51, 0.4);
}
#ro-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* v2.3.0: success toasts follow the plugin's native blue/crystal theme
   (the old green is gone); errors keep their unmistakable red. */
#ro-toast.ro-toast-success {
        background: linear-gradient(135deg, rgba(2, 132, 199, 0.96), rgba(6, 182, 212, 0.96));
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: 0 14px 40px rgba(2, 132, 199, 0.45);
}
#ro-toast.ro-toast-error { background: rgba(220, 38, 38, 0.92); }

/* ---------- Forms ---------- */

.ro-form-card {
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius);
        padding: 28px;
        margin-bottom: 26px;
        box-shadow: var(--ro-shadow);
}
.ro-form-card h2 { margin: 0 0 16px; font-size: 19px; }
.ro-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ro-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ro-field-wide { grid-column: 1 / -1; }
.ro-field label { font-size: 13.5px; font-weight: 700; color: var(--ro-ink); }
.ro-field input, .ro-field select, .ro-field textarea {
        padding: 11px 13px;
        border: 1.5px solid rgba(13, 74, 128, 0.15);
        border-radius: var(--ro-radius-sm);
        font-size: 15px;
        font-family: var(--ro-font);
        color: var(--ro-ink);
        background: rgba(255, 255, 255, 0.82);
        width: 100%;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ro-field input:focus, .ro-field select:focus, .ro-field textarea:focus {
        outline: none;
        background: #fff;
        border-color: var(--ro-primary);
        box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}
.ro-field input[readonly] { background: rgba(248, 250, 252, 0.8); color: var(--ro-muted); }
.ro-field-hint { font-size: 12.5px; color: var(--ro-muted); }
.ro-field-error { font-size: 12.5px; color: var(--ro-danger); min-height: 1px; }
.ro-field-status { font-size: 12.5px; font-weight: 700; min-height: 1px; }
.ro-field-status.is-ok { color: var(--ro-success); }
.ro-field-status.is-error { color: var(--ro-danger); }
.ro-form-feedback { border-radius: var(--ro-radius-sm); padding: 12px 14px; font-size: 14px; font-weight: 600; margin: 12px 0 0; }
.ro-form-feedback.is-error { background: rgba(254, 242, 242, 0.9); color: var(--ro-danger); }
.ro-form-feedback.is-success { background: rgba(236, 253, 245, 0.9); color: var(--ro-success); }

/* ---------- Notices ---------- */

.ro-notice {
        border-radius: var(--ro-radius-sm);
        padding: 15px 18px;
        font-size: 14.5px;
        line-height: 1.55;
        margin-bottom: 18px;
        border: 1px solid;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
}
.ro-notice-success { background: rgba(236, 253, 245, 0.85); color: #065f46; border-color: rgba(110, 231, 183, 0.8); }
.ro-notice-error { background: rgba(254, 242, 242, 0.85); color: #991b1b; border-color: rgba(252, 165, 165, 0.8); }
.ro-notice-info { background: rgba(239, 246, 255, 0.85); color: #1e40af; border-color: rgba(147, 197, 253, 0.8); }
.ro-notice-warn { background: rgba(255, 251, 235, 0.9); color: #92400e; border-color: rgba(252, 211, 77, 0.85); }

/* ---------- Auth gate (checkout, v1.5.0) ---------- */

.ro-auth-gate { margin: 6px 0 20px; }
.ro-auth-gate-head {
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius);
        padding: 24px 26px;
        margin-bottom: 20px;
        box-shadow: var(--ro-shadow);
}
.ro-auth-gate-head h2 { margin: 0 0 6px; font-size: 20px; }
.ro-auth-gate-head p { margin: 0; color: var(--ro-body); }
.ro-auth-gate-note { text-align: center; margin: 16px 0 0; }
.ro-auth-gate-note a { color: var(--ro-primary); text-decoration: none; font-weight: 600; }
.ro-auth-gate-note a:hover { text-decoration: underline; }

/* ---------- Cart ---------- */

.ro-cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.ro-cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(13, 74, 128, 0.08); }
.ro-cart-item:first-child { padding-top: 0; }
.ro-cart-thumb { flex: 0 0 84px; aspect-ratio: 1; border-radius: var(--ro-radius-sm); overflow: hidden; background: var(--ro-bg); display: block; border: 1px solid var(--ro-glass-border); }
.ro-cart-thumb .ro-card-placeholder { height: 100%; }
.ro-cart-item-body { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ro-cart-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ro-cart-item-name { font-weight: 700; color: var(--ro-ink); text-decoration: none; }
.ro-cart-item-name:hover { color: var(--ro-primary); }
.ro-cart-item-price { font-size: 13.5px; color: var(--ro-muted); }
.ro-cart-item-controls { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.ro-cart-item-total { font-weight: 700; color: var(--ro-ink); white-space: nowrap; font-size: 16px; }
.ro-cart-summary {
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius);
        padding: 22px;
        position: sticky;
        top: 24px;
        box-shadow: var(--ro-shadow);
}
.ro-cart-summary h2, .ro-checkout-summary h2 { margin: 0 0 12px; font-size: 17px; }
.ro-summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; color: var(--ro-muted); }
.ro-summary-row strong { color: var(--ro-ink); }
.ro-summary-total { border-top: 2px solid rgba(13, 74, 128, 0.12); margin-top: 8px; padding-top: 12px; font-size: 16px; }
.ro-summary-total strong { font-size: 22px; color: var(--ro-primary); font-family: var(--ro-font-head); }
.ro-summary-discount strong { color: var(--ro-success); }
.ro-summary-note { font-size: 12.5px; margin: 4px 0 14px; }
.ro-summary-items { list-style: none; margin: 0 0 14px; padding: 0; max-height: 260px; overflow: auto; }
.ro-summary-items li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px dashed rgba(13, 74, 128, 0.12); }

/* ---------- Checkout ---------- */

.ro-checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.ro-checkout-summary {
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius);
        padding: 22px;
        position: sticky;
        top: 24px;
        box-shadow: var(--ro-shadow);
}
.ro-checkout-security { font-size: 12px; text-align: center; margin: 12px 0 0; }

.ro-payment-methods { display: flex; flex-direction: column; gap: 12px; }
.ro-payment-method {
        display: flex;
        align-items: center;
        gap: 14px;
        border: 1.5px solid rgba(13, 74, 128, 0.14);
        border-radius: var(--ro-radius-sm);
        padding: 14px 16px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.55);
        transition: all 0.15s ease;
}
.ro-payment-method:hover { border-color: var(--ro-primary); }
.ro-payment-method:has(input:checked) { border-color: var(--ro-primary); background: rgba(2, 132, 199, 0.08); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12); }
.ro-payment-method input { width: 18px; height: 18px; accent-color: var(--ro-primary); }
.ro-payment-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ro-payment-body strong { color: var(--ro-ink); font-size: 15px; }
.ro-payment-body .ro-muted { font-size: 13px; }
/* v2.26.0: COD greyed out while the chosen address is outside the
 * serviceable areas — the option stays visible (never removed) but is
 * not selectable, and the area notice replaces its affordances. */
.ro-payment-method.is-disabled { opacity: 0.55; cursor: not-allowed; }
.ro-payment-method.is-disabled:hover { border-color: rgba(13, 74, 128, 0.14); }
.ro-payment-method.is-disabled:has(input:checked) { border-color: rgba(13, 74, 128, 0.14); background: rgba(255, 255, 255, 0.55); box-shadow: none; }
.ro-payment-method.is-disabled input { cursor: not-allowed; }
.ro-cod-area-notice { font-size: 12.5px; font-weight: 500; color: #b45309; margin-top: 4px; }

/* ---------- Add-ons ---------- */

.ro-addons-panel {
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius);
        padding: 22px;
        margin-top: 26px;
        box-shadow: var(--ro-shadow);
}
.ro-addons-panel h2, .ro-addons-panel h3 { margin: 0 0 6px; font-size: 17px; }
.ro-addon-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.ro-addon-item {
        display: flex;
        align-items: center;
        gap: 14px;
        border: 1.5px solid rgba(13, 74, 128, 0.14);
        border-radius: var(--ro-radius-sm);
        padding: 12px 14px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.55);
        transition: all 0.15s ease;
}
.ro-addon-item:hover { border-color: var(--ro-primary); }
.ro-addon-item:has(input:checked) { border-color: var(--ro-primary); background: rgba(2, 132, 199, 0.08); }
.ro-addon-item.is-disabled { opacity: 0.5; pointer-events: none; }
.ro-addon-item input { width: 18px; height: 18px; accent-color: var(--ro-primary); }
.ro-addon-media { flex: 0 0 52px; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--ro-bg); display: inline-flex; border: 1px solid var(--ro-glass-border); }
.ro-addon-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ro-addon-name { font-weight: 700; color: var(--ro-ink); font-size: 14.5px; }
.ro-addon-price { color: var(--ro-primary); font-weight: 700; font-size: 15px; }
.ro-suggestion-list { display: flex; flex-direction: column; gap: 12px; }
.ro-suggestion-item {
        display: flex;
        align-items: center;
        gap: 14px;
        border: 1px solid rgba(13, 74, 128, 0.12);
        border-radius: var(--ro-radius-sm);
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.55);
}

/* ---------- Single product ---------- */

.ro-single-product { padding: 24px 0 52px; }
.ro-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ro-muted); margin: 14px 0 28px; flex-wrap: wrap; }
.ro-breadcrumb a { color: var(--ro-muted); text-decoration: none; }
.ro-breadcrumb a:hover { color: var(--ro-primary); }
.ro-product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ro-gallery-main img { width: 100%; border-radius: var(--ro-radius); border: 1px solid var(--ro-glass-border); box-shadow: var(--ro-shadow); }
.ro-gallery-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.ro-gallery-thumbs img { width: 68px; height: 68px; object-fit: cover; border-radius: 9px; border: 2px solid transparent; cursor: pointer; }
.ro-gallery-thumbs img.is-active, .ro-gallery-thumbs img:hover { border-color: var(--ro-primary); }

/* v1.9.0 — product image lightbox (ro- namespaced, storefront only) */
.ro-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(8, 20, 34, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ro-lightbox-open { overflow: hidden; }
.ro-lightbox-image { max-width: min(92vw, 1080px); max-height: 82vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 24px 70px rgba(2, 12, 27, 0.55); }
.ro-lightbox-close, .ro-lightbox-nav { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.15s ease, transform 0.15s ease; }
.ro-lightbox-close { top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 999px; font-size: 26px; line-height: 1; }
.ro-lightbox-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; font-size: 30px; line-height: 1; }
.ro-lightbox-prev { left: 22px; }
.ro-lightbox-next { right: 22px; }
.ro-lightbox-close:hover, .ro-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }
.ro-lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 640px) {
        .ro-lightbox { padding: 16px; }
        .ro-lightbox-image { max-height: 74vh; }
        .ro-lightbox-nav { width: 40px; height: 40px; font-size: 26px; }
        .ro-lightbox-prev { left: 10px; }
        .ro-lightbox-next { right: 10px; }
}
.ro-product-info h1 { font-size: 29px; margin: 8px 0 12px; line-height: 1.25; }
.ro-product-price { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.ro-stock { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ro-stock.in { background: rgba(209, 250, 229, 0.85); color: var(--ro-success); }
.ro-stock.out { background: rgba(254, 226, 226, 0.85); color: var(--ro-danger); }
.ro-product-excerpt { color: var(--ro-body); }
.ro-add-form { display: flex; gap: 14px; margin: 22px 0 24px; }
.ro-add-form .ro-btn { flex: 1; }
.ro-product-usp {
        list-style: none;
        padding: 16px 20px;
        margin: 0;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius-sm);
        font-size: 14px;
        color: var(--ro-body);
        display: flex;
        flex-direction: column;
        gap: 8px;
}
.ro-product-usp li::before { content: "✓"; color: var(--ro-success); font-weight: 700; margin-right: 8px; }
.ro-product-description { margin-top: 44px; }
.ro-product-description h2 { color: var(--ro-ink); font-size: 20px; border-bottom: 2px solid rgba(2, 132, 199, 0.2); padding-bottom: 8px; }

/* ---------- Product video (v1.7.0) ---------- */

.ro-product-video { margin-top: 18px; }
.ro-product-video-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ro-muted); margin-bottom: 8px; }
.ro-product-video-file { width: 100%; border-radius: var(--ro-radius); border: 1px solid var(--ro-glass-border); background: #0b1626; display: block; }
.ro-product-video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ro-radius); overflow: hidden; border: 1px solid var(--ro-glass-border); box-shadow: var(--ro-shadow); }
.ro-product-video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Inquiry ---------- */

.ro-inquiry-form {
        margin-top: 48px;
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius);
        padding: 28px;
        box-shadow: var(--ro-shadow);
}
.ro-inquiry-form h2 { margin: 0 0 6px; font-size: 20px; }
.ro-inquiry-form textarea { width: 100%; border: 1.5px solid rgba(13, 74, 128, 0.15); border-radius: var(--ro-radius-sm); padding: 11px 13px; font-family: var(--ro-font); font-size: 15px; margin: 12px 0; background: rgba(255, 255, 255, 0.82); }
.ro-inquiry-form .ro-form-grid { margin-bottom: 0; }
.ro-inquiry-form input { border: 1.5px solid rgba(13, 74, 128, 0.15); border-radius: var(--ro-radius-sm); padding: 11px 13px; font-size: 15px; background: rgba(255, 255, 255, 0.82); }

/* ---------- Thank you ---------- */

.ro-thank-you { padding: 36px 0 60px; }
.ro-thankyou-hero { text-align: center; margin: 16px 0 30px; }
.ro-thankyou-hero p { line-height: 1.6; }
.ro-thankyou-check {
        display: inline-flex;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: var(--ro-grad);
        color: #fff;
        font-size: 32px;
        font-weight: 700;
        align-items: center;
        justify-content: center;
        border: 3px solid rgba(255, 255, 255, 0.7);
        box-shadow: var(--ro-glow);
}
.ro-thankyou-hero h1 { margin: 16px 0 8px; font-size: 28px; }
.ro-thankyou-date { font-size: 14px; color: var(--ro-muted); }
.ro-thankyou-footer { text-align: center; margin-top: 28px; }

/* v1.7.0: order-head status pills, item thumbnails, details grid, next steps */
.ro-thankyou-order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ro-thankyou-order-head h2 { margin: 0; }
.ro-thankyou-statuses { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ro-summary-items-media li { align-items: center; }
.ro-summary-item-media { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ro-summary-item-media img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px; border: 1px solid var(--ro-glass-border); flex: 0 0 auto; }
.ro-summary-item-name em { color: var(--ro-muted); font-style: normal; font-size: 12.5px; }
.ro-summary-item-total { white-space: nowrap; font-weight: 700; color: var(--ro-ink); }
.ro-thankyou-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
/* v2.14.0: min-width 0 + breakable long values (order numbers, emails,
 * tokens) — grid children keep a min-content floor that could push the
 * card 2-3px past phone viewports. */
.ro-thankyou-detail { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--ro-glass-border); border-radius: var(--ro-radius-sm); padding: 16px 18px; min-width: 0; overflow-wrap: anywhere; }
.ro-thankyou-detail h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ro-muted); }
.ro-thankyou-detail p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; }
.ro-thankyou-detail p:last-child { margin-bottom: 0; }
.ro-thankyou-steps { margin: 0; padding-left: 20px; color: var(--ro-body); display: flex; flex-direction: column; gap: 8px; }
.ro-thankyou-steps li { line-height: 1.55; }
.ro-empty-state-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.ro-bank-accounts { display: grid; gap: 10px; margin: 14px 0 18px; }
.ro-bank-account {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-radius-sm);
        padding: 12px 16px;
}
.ro-bank-account code { background: #fff; border: 1px solid var(--ro-line); padding: 4px 10px; border-radius: 7px; font-size: 14px; color: var(--ro-ink); }

/* ---------- Account ---------- */

.ro-account { padding: 32px 0 60px; }
.ro-account-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.ro-account-form .ro-field { margin-bottom: 14px; }
.ro-remember { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 8px 0 14px; }
.ro-account-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.ro-account-header-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ro-account-header h1 { margin: 0; font-size: 26px; }
.ro-account-status {
        display: inline-flex;
        align-items: center;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 4px 13px;
        border-radius: 999px;
        border: 1px solid;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
}
.ro-account-status-active { background: rgba(209, 250, 229, 0.85); color: #065f46; border-color: rgba(110, 231, 183, 0.8); }
.ro-account-status-pending { background: rgba(255, 251, 235, 0.9); color: #92400e; border-color: rgba(252, 211, 77, 0.85); }
.ro-account-status-suspended { background: rgba(254, 226, 226, 0.9); color: #991b1b; border-color: rgba(252, 165, 165, 0.8); }
.ro-orders-table { overflow-x: auto; }
.ro-orders-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ro-orders-table th { text-align: left; color: var(--ro-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 12px; border-bottom: 2px solid rgba(13, 74, 128, 0.12); }
.ro-orders-table td { padding: 12px; border-bottom: 1px solid rgba(13, 74, 128, 0.08); }
.ro-orders-table a { color: var(--ro-primary); text-decoration: none; font-weight: 600; }

/* ---------- Status pills ---------- */

.ro-status {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 11px;
        border-radius: 999px;
        border: 1px solid transparent;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        white-space: nowrap;
}
.ro-status-pending { background: rgba(255, 251, 235, 0.9); color: #92400e; border-color: rgba(252, 211, 77, 0.85); }
.ro-status-processing { background: rgba(239, 246, 255, 0.9); color: #1e40af; border-color: rgba(147, 197, 253, 0.8); }
.ro-status-shipped { background: rgba(237, 233, 254, 0.9); color: #6d28d9; border-color: rgba(196, 181, 253, 0.8); }
.ro-status-completed { background: rgba(209, 250, 229, 0.85); color: #065f46; border-color: rgba(110, 231, 183, 0.8); }
.ro-status-cancelled { background: rgba(241, 245, 249, 0.9); color: #475569; border-color: rgba(203, 213, 225, 0.8); }
.ro-status-refunded { background: rgba(254, 242, 242, 0.9); color: #991b1b; border-color: rgba(252, 165, 165, 0.8); }
.ro-status-paypending { background: rgba(255, 251, 235, 0.9); color: #92400e; border-color: rgba(252, 211, 77, 0.85); }

/* ---------- Empty state ---------- */

.ro-empty-state {
        text-align: center;
        padding: 60px 20px;
        background: var(--ro-glass);
        -webkit-backdrop-filter: var(--ro-glass-blur);
        backdrop-filter: var(--ro-glass-blur);
        border: 1px dashed rgba(13, 74, 128, 0.3);
        border-radius: var(--ro-radius);
}
.ro-empty-state h1 { color: var(--ro-ink); font-size: 22px; }
.ro-muted { color: var(--ro-muted); font-size: 14px; margin: 4px 0 8px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
        .ro-cart-layout, .ro-checkout-layout, .ro-product-layout, .ro-account-layout { grid-template-columns: 1fr; }
        .ro-checkout-summary, .ro-cart-summary { position: static; }
        .ro-hero { padding: 48px 0; }
        .ro-thankyou-details { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
        .ro-shop { padding: 10px; margin: 14px 0 10px; border-radius: 16px; }
        .ro-container { padding: 0 16px; }
        .ro-form-grid { grid-template-columns: 1fr; }
        .ro-cart-item { flex-wrap: wrap; }
        .ro-cart-item-total { margin-left: auto; }
        .ro-add-form { flex-direction: column; }
        .ro-product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
        .ro-card-title { font-size: 14px; }
        .ro-price { font-size: 16px; }
        .ro-form-card { padding: 22px 18px; }
        .ro-account-header h1 { font-size: 22px; }
        .ro-hero { padding: 44px 0; }
        .ro-thankyou-check { width: 60px; height: 60px; font-size: 28px; }
        .ro-thankyou-hero h1 { font-size: 24px; }
        .ro-bank-accounts { gap: 12px; }
}

/* ---------- Card payment fields (checkout) ---------- */

.ro-card-fields { margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(13, 74, 128, 0.2); }
.ro-card-fields h3 { margin: 0 0 4px; font-size: 15px; color: var(--ro-ink); }
.ro-card-fields .ro-muted { margin: 0 0 12px; }
.ro-card-fields[hidden] { display: none; }

/* v2.3.0: "-" marks a summary line that does not apply — display-only,
   rendered muted so real money values stay dominant. */
.ro-summary-row strong.is-na { color: var(--ro-muted); font-weight: 500; }

/* ---------- Cart icon with item counter (v1.2.6; nav-menu mode v1.7.0) ---------- */

/* Badge pop animation whenever the live count changes. */
@keyframes ro-badge-bump {
        0% { transform: scale(1); }
        40% { transform: scale(1.35); }
        100% { transform: scale(1); }
}
.ro-cart-icon-count.is-bumping { animation: ro-badge-bump 0.32s ease; }

.ro-cart-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--ro-grad, linear-gradient(135deg, #0284c7, #06b6d4));
        color: #fff;
        text-decoration: none;
        box-shadow: var(--ro-glow, 0 10px 28px -10px rgba(2, 132, 199, 0.5));
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ro-cart-icon:visited,
.ro-cart-icon:active { color: #fff; }
.ro-cart-icon:hover { color: #fff; transform: translateY(-50%) scale(1.06); filter: brightness(1.08); }
.ro-cart-icon svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.ro-cart-icon-count {
        position: absolute;
        top: -4px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: #e11d48;
        color: #fff;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        box-sizing: border-box;
        box-shadow: 0 2px 6px rgba(225, 29, 72, 0.4);
        border: 2px solid #fff;
}
/* v2.3.0: Add-to-cart feedback — a light pulse on the floating cart
   (circle on desktop, bottom bar on mobile) fired only after the server
   confirms the item was added. */
@keyframes ro-cart-pulse {
        0% { transform: scale(1); box-shadow: var(--ro-glow, 0 10px 28px -10px rgba(2, 132, 199, 0.5)); }
        45% { transform: scale(1.12); box-shadow: 0 16px 44px -8px rgba(2, 132, 199, 0.75); }
        100% { transform: scale(1); box-shadow: var(--ro-glow, 0 10px 28px -10px rgba(2, 132, 199, 0.5)); }
}

/* v2.3.0: the floating cart sits on the RIGHT edge of the viewport (it was
   left-aligned before); phones restyle the same element into the bottom
   Cart bar inside the media query below. */
.ro-cart-icon-floating {
        position: fixed;
        left: auto;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9990;
}
.ro-cart-icon-floating:hover { transform: translateY(-50%) scale(1.06); }
.ro-cart-icon-floating.is-pulsing { animation: ro-cart-pulse 0.55s ease; }

/* v2.3.0: mobile bottom-bar content — hidden on desktop, the bar's text
   ("Cart (2) · ₱12,000.00") only renders at phone widths. */
.ro-cart-bar-text { display: none; }

@media (max-width: 640px) {
        /* v2.3.0: the floating circle becomes a full-width sticky Cart bar
           at the bottom of the viewport — the success feedback surface for
           add-to-cart on phones. Respects the home-indicator safe area and
           never overlaps RO Shop content (scoped padding below). */
        .ro-cart-icon-floating {
                left: 12px;
                right: 12px;
                top: auto;
                bottom: calc(12px + env(safe-area-inset-bottom, 0px));
                transform: none;
                width: auto;
                height: 52px;
                border-radius: 16px;
                justify-content: center;
                gap: 7px;
                font-family: var(--ro-font-head);
        }
        .ro-cart-icon-floating:hover { transform: none; }
        .ro-cart-icon-floating.is-pulsing { animation: none; }
        .ro-cart-icon-floating.is-pulsing .ro-cart-bar-text { animation: ro-cart-bar-pulse 0.55s ease; }
        .ro-cart-icon-floating .ro-cart-icon-count { display: none; }
        .ro-cart-icon-floating svg { width: 21px; height: 21px; flex: 0 0 auto; }
        .ro-cart-bar-text {
                display: inline-flex;
                align-items: baseline;
                gap: 6px;
                min-width: 0;
                font-size: 15px;
                font-weight: 700;
                letter-spacing: 0.01em;
                white-space: nowrap;
        }
        .ro-cart-bar-label { font-weight: 700; }
        .ro-cart-bar-count { font-weight: 700; opacity: 0.92; }
        .ro-cart-bar-sep { opacity: 0.55; font-weight: 600; }
        .ro-cart-bar-total { font-weight: 700; font-variant-numeric: tabular-nums; }

        /* Keep the bar clear of RO Shop content and buttons (page-level
           padding would leak into the theme — this stays scoped). */
        .ro-shop { padding-bottom: 84px; }
}
@keyframes ro-cart-bar-pulse {
        0% { transform: scale(1); }
        45% { transform: scale(1.06); }
        100% { transform: scale(1); }
}

/* Navigation-menu cart icon (v1.7.0): any theme menu item linking to the
   cart page renders as this glass icon + badge instead of the "Cart" text.
   Same namespaced pattern as .ro-cart-icon — menus live outside .ro-shop. */
.ro-nav-cart {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: var(--ro-glass, rgba(255, 255, 255, 0.72));
        border: 1px solid var(--ro-glass-border, rgba(255, 255, 255, 0.78));
        box-shadow: 0 2px 10px -4px rgba(12, 31, 51, 0.18);
        -webkit-backdrop-filter: blur(8px) saturate(1.4);
        backdrop-filter: blur(8px) saturate(1.4);
        vertical-align: middle;
        transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ro-nav-cart:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(12, 31, 51, 0.3); }
.ro-nav-cart svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.ro-nav-cart .ro-cart-icon-count { top: -5px; right: -7px; }
@media (max-width: 640px) {
        .ro-nav-cart { width: 34px; height: 34px; border-radius: 10px; }
        .ro-nav-cart svg { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------------------------
 * Installed-unit maintenance dashboard (My Account) — v1.4.0
 * ------------------------------------------------------------------------- */

/* Filter schedule statuses: Due / Due Soon / Upcoming / Not scheduled. */
.ro-status-due { background: rgba(254, 226, 226, 0.9); color: #991b1b; border-color: rgba(252, 165, 165, 0.8); }
.ro-status-due_soon { background: rgba(255, 251, 235, 0.9); color: #92400e; border-color: rgba(252, 211, 77, 0.85); }
.ro-status-upcoming { background: rgba(209, 250, 229, 0.85); color: #065f46; border-color: rgba(110, 231, 183, 0.8); }
.ro-status-unscheduled { background: rgba(241, 245, 249, 0.9); color: #475569; border-color: rgba(203, 213, 225, 0.8); }

.ro-unit-card { margin-top: 22px; }
.ro-unit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.ro-unit-head h2 { margin-bottom: 2px; }
.ro-unit-serial { display: inline-block; margin: 0 0 4px; padding: 3px 10px; border-radius: 999px; background: rgba(2, 132, 199, 0.08); border: 1px solid rgba(2, 132, 199, 0.22); color: var(--ro-primary-dark, #075985); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; }
.ro-unit-qr { flex: 0 0 auto; text-align: center; text-decoration: none; }
.ro-unit-qr img { display: block; border: 1px solid var(--ro-glass-border); border-radius: 10px; padding: 4px; background: #fff; box-shadow: var(--ro-shadow); }
.ro-unit-qr span { display: block; margin-top: 4px; font-size: 12px; color: var(--ro-primary, #0284c7); font-weight: 600; }
.ro-unit-filters { overflow-x: auto; margin-top: 14px; }
.ro-unit-filters table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ro-unit-filters th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ro-muted); padding: 8px 10px; border-bottom: 1px solid rgba(13, 74, 128, 0.12); }
.ro-unit-filters td { padding: 10px; border-bottom: 1px solid rgba(13, 74, 128, 0.08); }
.ro-unit-note { margin: 12px 0 0; font-size: 12.5px; }
@media (max-width: 640px) {
        .ro-unit-head { flex-direction: column; }
        .ro-unit-qr { align-self: flex-end; margin-top: -60px; }
        .ro-unit-filters th:nth-child(2), .ro-unit-filters td:nth-child(2) { display: none; }
}

/* ---------------------------------------------------------------------------
 * v2.0.0: Payment Unsuccessful page
 * ------------------------------------------------------------------------- */

.ro-payfail { padding: 36px 0 60px; }
.ro-payfail-hero { text-align: center; margin: 16px 0 30px; }
.ro-payfail-hero p { line-height: 1.6; }
.ro-payfail-mark {
        display: inline-flex;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f43f5e, #fb7185);
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        align-items: center;
        justify-content: center;
        border: 3px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 14px 34px rgba(244, 63, 94, 0.28);
}
.ro-payfail-hero h1 { margin: 16px 0 8px; font-size: 28px; }
.ro-payfail-sub { font-size: 14px; color: var(--ro-muted); }
.ro-payfail-why { margin-top: 16px; text-align: left; }
.ro-payfail-safe { margin-top: 14px; }
.ro-payfail-actions .ro-payfail-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.ro-payfail-help { margin: 4px 0 0; font-size: 13px; }
@media (max-width: 640px) {
        .ro-payfail-actions .ro-payfail-buttons .ro-btn { flex: 1 1 100%; }
        .ro-payfail-mark { width: 60px; height: 60px; font-size: 26px; }
}

/* ---------------------------------------------------------------------------
 * v2.0.0: Lead forms ([ro_lead_form] shortcode + Divi module)
 * ------------------------------------------------------------------------- */

.ro-lead-form-wrap .ro-lead-form {
        background: var(--ro-panel-bg, rgba(255, 255, 255, 0.92));
        border: 1px solid var(--ro-glass-border);
        border-radius: var(--ro-panel-radius, var(--ro-radius));
        padding: var(--ro-panel-padding, 20px);
        box-shadow: var(--ro-shadow);
}
.ro-lead-form-title { margin: 0 0 14px; color: var(--ro-title-color, var(--ro-ink)); }
.ro-lead-form .ro-form-grid { margin-bottom: 6px; }
.ro-lead-required { color: #e11d48; font-weight: 700; }
.ro-lead-submit { margin-top: 8px; }

/* v2.5.0: submit button alignment (Left / Center / Right). */
.ro-lead-actions { display: flex; margin-top: 8px; }
.ro-lead-align-left { justify-content: flex-start; }
.ro-lead-align-center { justify-content: center; }
.ro-lead-align-right { justify-content: flex-end; }
.ro-lead-actions .ro-lead-submit { margin-top: 0; }

/* v2.5.0: Two-column layout — normal fields 50%, textarea spans full
 * width, mobile always collapses to a single column. */
.ro-lead-cols-2 .ro-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ro-lead-cols-2 .ro-lead-field { min-width: 0; }
.ro-lead-cols-2 .ro-lead-field-textarea { grid-column: 1 / -1; }
@media (max-width: 782px) {
        .ro-lead-cols-2 .ro-form-grid { grid-template-columns: 1fr; gap: 14px; }
        .ro-lead-cols-2 .ro-lead-field-textarea { grid-column: auto; }
}

/* v2.5.0: inline per-field validation messages. */
.ro-lead-field-error { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: #b91c1c; min-height: 0; }
.ro-lead-field-error:empty { display: none; }
.ro-lead-input-invalid,
.ro-lead-input-invalid:focus { border-color: #f43f5e !important; box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.14); }

/* v2.5.0: validation summary + error boxes (clean message boxes). */
.ro-lead-status {
        margin: 14px 0 0;
        padding: 12px 16px;
        border-radius: var(--ro-radius-sm);
        background: rgba(255, 251, 235, 0.92);
        border: 1px solid rgba(251, 191, 36, 0.7);
        color: #92400e;
        font-weight: 600;
        font-size: 13.5px;
}
.ro-lead-status:empty { display: none; }
.ro-lead-errorbox {
        margin: 14px 0 0;
        padding: 12px 16px;
        border-radius: var(--ro-radius-sm);
        background: rgba(254, 242, 242, 0.92);
        border: 1px solid rgba(252, 165, 165, 0.8);
        color: #991b1b;
        font-weight: 600;
        font-size: 14px;
}
.ro-lead-errorbox:empty { display: none; }
.ro-lead-success {
        margin: 14px 0 0;
        padding: 12px 16px;
        border-radius: var(--ro-radius-sm);
        background: rgba(209, 250, 229, 0.85);
        border: 1px solid rgba(110, 231, 183, 0.8);
        color: #065f46;
        font-weight: 600;
        font-size: 14.5px;
}
.ro-lead-hidden { display: none; }
/* Honeypot: invisible to humans, ignored by assistive tech. */
.ro-lead-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Engine fallback: no backdrop-filter -> near-solid glass
 * ------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .ro-shop .ro-form-card,
        .ro-shop .ro-product-card,
        .ro-shop .ro-cart-summary,
        .ro-shop .ro-checkout-summary,
        .ro-shop .ro-addons-panel,
        .ro-shop .ro-inquiry-form,
        .ro-shop .ro-empty-state,
        .ro-shop .ro-auth-gate-head,
        .ro-shop .ro-promo-strip,
        .ro-shop .ro-chip,
        .ro-shop .ro-status,
        .ro-shop .ro-account-status { background: rgba(255, 255, 255, 0.94); }
}

/* ---------------------------------------------------------------------------
 * v2.1.0: Serviceable Areas — Delivery & Installation (checkout + order
 * views). All selectors ro- namespaced — no leaks into the theme or Divi.
 * ------------------------------------------------------------------------- */

.ro-shop .ro-service-area {
        margin: 14px 0 4px;
        border-radius: var(--ro-radius-sm);
        border: 1px solid;
        padding: 13px 16px;
        font-size: 14.5px;
        line-height: 1.55;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
}
.ro-shop .ro-service-message { font-weight: 600; }
/* v2.3.0: the "Delivery & Installation Available" notice is gone — FREE and
   PAID areas render ONLY the checkbox, so the empty notice collapses away
   and the checkbox drops its under-message separator. */
.ro-shop .ro-service-message:empty { display: none; }
.ro-shop .ro-service-message:empty + .ro-service-avail {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
}
.ro-shop .ro-service-free { color: #065f46; }
.ro-shop .ro-service-paid { color: #1e40af; }
.ro-shop .ro-service-not_serviceable { color: #991b1b; }
.ro-shop .ro-service-unconfigured { color: #92400e; }
.ro-shop .ro-service-area.ro-service-box-free { background: rgba(236, 253, 245, 0.85); border-color: rgba(110, 231, 183, 0.8); }
.ro-shop .ro-service-area.ro-service-box-paid { background: rgba(239, 246, 255, 0.85); border-color: rgba(147, 197, 253, 0.8); }
.ro-shop .ro-service-area.ro-service-box-not_serviceable { background: rgba(254, 242, 242, 0.85); border-color: rgba(252, 165, 165, 0.8); }
.ro-shop .ro-service-area.ro-service-box-unconfigured { background: rgba(255, 251, 235, 0.9); border-color: rgba(252, 211, 77, 0.85); }

.ro-shop .ro-service-avail {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed rgba(30, 64, 175, 0.25);
        cursor: pointer;
        font-weight: 600;
        color: #1e40af;
}
.ro-shop .ro-service-avail input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ro-primary, #0284c7); }

.ro-shop .ro-summary-service strong { color: #1e40af; }
.ro-shop .ro-service-pill {
        display: inline-block;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        background: rgba(2, 132, 199, 0.12);
        color: #0369a1;
        border: 1px solid rgba(2, 132, 199, 0.3);
        vertical-align: 1px;
        cursor: help;
}
.ro-shop .ro-thankyou-service h3 { color: #0369a1; }

@media (max-width: 640px) {
        .ro-shop .ro-service-avail { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
 * v2.2.0 — Storefront mobile responsiveness overhaul.
 *
 * One consolidated pass across every storefront surface (shop, product,
 * cart, checkout + Order Summary, account + orders + unit dashboard, forms,
 * lead forms, thank-you pages). Breakpoints: 768 (tablet portrait),
 * 640 (mobile), 480 (small mobile). All selectors stay .ro- namespaced —
 * nothing here can touch Divi, the theme, WordPress or other plugins.
 *
 * Mobile ground rules applied throughout:
 *  - form controls render at 16px so iOS Safari does not zoom on focus
 *  - every input, select and textarea takes the full available width
 *  - interactive targets get comfortable touch sizing (>= 44px)
 *  - consistent vertical rhythm between fields, cards and sections
 *  - long product names wrap instead of overflowing their rows
 *  - wide tables scroll horizontally instead of breaking the layout
 * ------------------------------------------------------------------------- */

/* ---------- Tablet portrait (<= 768px) ---------- */

@media (max-width: 768px) {
        .ro-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
        .ro-checkout-layout, .ro-cart-layout { gap: 22px; }
        .ro-product-layout { gap: 28px; }
        .ro-form-card { padding: 24px 22px; }
        .ro-hero .ro-container { gap: 28px; }
        .ro-summary-items { max-height: 220px; }
}

/* ---------- Mobile (<= 640px) ---------- */

@media (max-width: 640px) {
        /* Canvas + container: keep a comfortable, non-wasteful gutter. */
        .ro-shop { padding: 8px; border-radius: 14px; margin: 10px 0 8px; }
        .ro-container { padding: 0 14px; }

        /* Typography: readable scale, comfortable line spacing. */
        .ro-shop h1 { font-size: 24px; line-height: 1.25; }
        .ro-shop h2 { font-size: 19px; }
        .ro-form-card h2 { font-size: 18px; margin-bottom: 14px; }
        .ro-product-info h1 { font-size: 23px; }
        .ro-hero-text h1 { font-size: 27px; }
        .ro-hero-text p { font-size: 15.5px; }
        .ro-checkout h1 { margin-bottom: 12px; }

        /* Form controls: full width, 16px font (no iOS focus zoom),
           comfortable height, consistent vertical gaps. */
        .ro-form-grid { grid-template-columns: 1fr; gap: 14px; }
        .ro-field { gap: 5px; margin-bottom: 8px; }
        .ro-field label { font-size: 13px; }
        .ro-field input, .ro-field select, .ro-field textarea {
                font-size: 16px; /* iOS Safari keeps the viewport steady on focus */
                padding: 12px 13px;
                min-height: 46px;
        }
        .ro-field textarea { min-height: 0; }
        .ro-field input[type="checkbox"], .ro-field input[type="radio"] {
                min-height: 0; width: 18px; height: 18px; padding: 0;
        }
        .ro-form-card { padding: 20px 16px; margin-bottom: 18px; }

        /* Buttons: full comfortable touch size, never oversized. */
        .ro-btn { min-height: 46px; padding: 11px 20px; font-size: 15px; }
        .ro-btn-lg { padding: 13px 22px; }
        .ro-btn + .ro-btn { margin-top: 10px; }
        .ro-add-form { gap: 10px; }
        .ro-add-form .ro-btn { min-height: 48px; }

        /* Quantity steppers: larger touch targets. */
        .ro-qty { border-radius: 10px; }
        .ro-qty-btn { width: 44px; height: 44px; font-size: 20px; }
        .ro-qty input { width: 48px; height: 44px; font-size: 16px; }
        .ro-qty-sm .ro-qty-btn { width: 40px; height: 40px; font-size: 17px; }
        .ro-qty-sm input { width: 44px; height: 40px; font-size: 15px; }

        /* Cart: compact rows, wrapping controls, aligned totals. */
        .ro-cart-item { gap: 12px; padding: 16px 0; flex-wrap: wrap; }
        .ro-cart-thumb { flex: 0 0 64px; }
        .ro-cart-item-body { flex: 1 1 calc(100% - 76px); min-width: 0; }
        .ro-cart-item-name { overflow-wrap: anywhere; }
        .ro-cart-item-controls { gap: 12px; flex-wrap: wrap; }
        .ro-cart-item-total { margin-left: auto; }
        .ro-cart-summary, .ro-checkout-summary { padding: 18px 16px; }

        /* Order Summary: rows wrap cleanly, long names never overflow. */
        .ro-summary-items { max-height: none; overflow: visible; }
        .ro-summary-items li { gap: 8px; align-items: baseline; }
        .ro-summary-items li span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
        .ro-summary-items li span:last-child { white-space: nowrap; }
        .ro-summary-row { flex-wrap: wrap; gap: 2px 10px; padding: 8px 0; }
        .ro-summary-total strong { font-size: 20px; }
        .ro-summary-note { margin: 6px 0 12px; }
        .ro-checkout-security { margin-top: 10px; }

        /* Delivery & Installation box: comfortable spacing, tappable row. */
        .ro-shop .ro-service-area { padding: 12px 14px; font-size: 14.5px; }
        .ro-shop .ro-service-avail { padding: 10px 0; margin-top: 8px; }
        .ro-shop .ro-service-avail input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }

        /* Payment methods + card fields: airy list, no squeeze. */
        .ro-payment-methods { gap: 10px; }
        .ro-payment-method { padding: 13px 14px; gap: 12px; }
        .ro-card-fields { margin-top: 14px; padding-top: 14px; }
        .ro-card-fields .ro-form-grid { gap: 12px; }

        /* Add-ons / suggestions: stacked layout, full-width add buttons. */
        .ro-addons-panel { padding: 18px 16px; margin-top: 18px; }
        .ro-addon-item { padding: 11px 12px; gap: 10px; }
        .ro-suggestion-item { flex-wrap: wrap; gap: 10px; }
        .ro-suggestion-item .ro-add-suggestion { flex: 1 1 100%; min-height: 42px; }
        .ro-checkout-addons .ro-suggestion-list { gap: 14px; }

        /* Products: tighter cards. */
        .ro-product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        .ro-card-body { padding: 14px; gap: 10px; }
        .ro-card-title { font-size: 14px; }
        .ro-price { font-size: 16.5px; }
        .ro-card-media { aspect-ratio: 1/1; }
        .ro-product-layout { gap: 22px; }
        .ro-gallery-thumbs img { width: 60px; height: 60px; }
        .ro-product-usp { padding: 14px 16px; }
        .ro-product-description { margin-top: 30px; }

        /* Inquiry + lead forms. */
        .ro-inquiry-form { padding: 20px 16px; margin-top: 32px; }
        .ro-inquiry-form textarea { margin: 10px 0; }
        .ro-lead-form-wrap .ro-lead-form { padding: 16px; }

        /* Tables scroll horizontally instead of crushing. */
        .ro-orders-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .ro-orders-table table { min-width: 560px; }
        .ro-unit-filters { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .ro-unit-filters table { min-width: 430px; }

        /* Account + auth gate. */
        .ro-account { padding: 20px 0 40px; }
        .ro-account-layout { gap: 20px; }
        .ro-account-form .ro-field { margin-bottom: 12px; }
        .ro-account-header { margin-bottom: 16px; }
        .ro-auth-gate-head { padding: 20px 16px; }
        .ro-auth-gate .ro-account-layout { gap: 18px; }
        .ro-auth-gate .ro-form-card { margin-bottom: 0; }

        /* Thank-you / payment pages. */
        .ro-thank-you { padding: 24px 0 40px; }
        .ro-thankyou-detail { padding: 14px 15px; }
        .ro-bank-account { padding: 11px 13px; }
        .ro-empty-state { padding: 40px 16px; }

        /* Toast: never wider than the viewport. */
        #ro-toast { left: 16px; right: 16px; transform: none; width: auto; max-width: none; text-align: center; }
        #ro-toast.is-visible { transform: none; }
}

/* ---------- Small mobile (<= 480px) ---------- */

@media (max-width: 480px) {
        .ro-shop { padding: 6px; margin: 8px 0 6px; border-radius: 12px; }
        .ro-container { padding: 0 12px; }
        .ro-category-chips { gap: 8px; margin: 22px 0 18px; }
        .ro-chip { padding: 7px 13px; font-size: 13px; }
        .ro-hero { padding: 36px 0; }
        .ro-hero-text h1 { font-size: 25px; }
        .ro-promo-strip { padding: 14px 16px; }
        .ro-form-card { padding: 18px 14px; }
        .ro-cart-item-body { flex-basis: 100%; }
        .ro-cart-thumb { flex: 0 0 64px; }
        .ro-summary-total strong { font-size: 19px; }
        .ro-empty-state-actions .ro-btn { width: 100%; }
        .ro-payfail-actions .ro-payfail-buttons .ro-btn { flex: 1 1 100%; }
        .ro-thankyou-steps { padding-left: 18px; }
}

/* ---------- Narrow phones (<= 360px): one product card per row ---------- */

@media (max-width: 360px) {
        .ro-product-grid { grid-template-columns: 1fr; }
}

/* ---------- v2.22.0: reference card + listing responsive ----------
 * Buttons share the row down to 480px, then stack full-width so both
 * actions stay comfortably tappable on phones. */
@media (max-width: 480px) {
        .ro-card-actions--pair { flex-direction: column; gap: 8px; }
        .ro-card-actions--pair .ro-btn { flex: 1 1 auto; }
        .ro-shop-toolbar { flex-direction: column; align-items: flex-start; }
}

/* v2.22.0: visitors who prefer reduced motion get no listing
 * transitions (the swap itself is instant, never animated). */
@media (prefers-reduced-motion: reduce) {
        .ro-page-link,
        .ro-shop-listing-loading,
        .ro-chip { transition: none; }
}

/* ---------- v2.22.0: comparison table (shared surface) ----------
 * Base rules for the comparison table — rendered by the RO Product
 * Comparison Divi module (the store's global comparison system;
 * v2.24.0 keeps it untouched). Previously scoped to ro-divi.css only;
 * moved here so storefront contexts are styled too (ro-divi.css loads
 * this file as a dependency, module rendering is unchanged). */
.ro-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ro-compare-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--ro-card); border: 1px solid var(--ro-line); border-radius: var(--ro-radius); overflow: hidden; }
.ro-compare-table th, .ro-compare-table td { padding: 13px 16px; border-bottom: 1px solid var(--ro-line); text-align: center; vertical-align: middle; font-size: 14.5px; }
.ro-compare-table thead th { border-bottom: 2px solid var(--ro-line); padding-bottom: 16px; }
.ro-compare-table tbody tr:last-child th, .ro-compare-table tbody tr:last-child td { border-bottom: 0; }
.ro-compare-table tbody tr:nth-child(even) { background: var(--ro-bg); }
.ro-compare-table tbody tr:hover { background: var(--ro-primary-light); }

.ro-compare-label-col, .ro-compare-table tbody th[scope="row"] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--ro-card);
        text-align: left;
        font-weight: 700;
        color: var(--ro-muted);
        font-size: 13.5px;
        white-space: nowrap;
}
.ro-compare-label-col { background: var(--ro-card); }
.ro-compare-table thead .ro-compare-label-col { border-bottom: 2px solid var(--ro-line); }
.ro-compare-table tbody tr:nth-child(even) th[scope="row"] { background: var(--ro-bg); }
.ro-compare-table tbody tr:hover th[scope="row"] { background: var(--ro-primary-light); }

.ro-compare-product { min-width: 150px; vertical-align: bottom; }
.ro-compare-product.is-best { background: var(--ro-primary-light); }
.ro-compare-title { display: block; color: var(--ro-ink); font-weight: 700; font-size: 16px; text-decoration: none; line-height: 1.3; margin-top: 4px; }
.ro-compare-title:hover { color: var(--ro-primary); }
.ro-compare-best { position: static; display: inline-block; background: var(--ro-primary); color: #fff; }
.ro-compare-best + .ro-compare-title { margin-top: 6px; }

.ro-compare-images img { width: 100%; max-width: 190px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--ro-radius-sm); margin: 0 auto; }
.ro-compare-images .ro-card-placeholder { display: block; width: 100%; max-width: 190px; aspect-ratio: 4/3; border-radius: var(--ro-radius-sm); margin: 0 auto; }
.ro-compare-price .ro-price-lg { font-size: 23px; }
.ro-compare-table .is-in-stock { color: var(--ro-success); font-weight: 600; }
.ro-compare-table .is-oos { color: var(--ro-muted); font-weight: 600; }
.ro-compare-actions td { padding-top: 18px; padding-bottom: 20px; }
.ro-compare-actions th[scope="row"] { background: var(--ro-card); }

/* v2.22.0: logged-in-customer identity notice (lead forms) */
.ro-lead-identity {
        margin: -4px 0 14px;
        font-size: 13.5px;
        color: var(--ro-muted);
        background: var(--ro-primary-light);
        border: 1px solid rgba(2, 132, 199, 0.18);
        border-radius: var(--ro-radius-sm);
        padding: 9px 14px;
}
/* v2.22.0: logged-in customer identity line (Name/Email fields hidden). */
.ro-lead-identity {
        margin: -6px 0 14px;
        font-size: 0.92em;
        color: var(--ro-muted, #5b7a70);
        background: rgba(14, 165, 158, 0.08);
        border-left: 3px solid var(--ro-primary, #0e9f9a);
        border-radius: 4px;
        padding: 8px 10px;
}

/* Dynamic QR: preserve the provider image and quiet zone without cropping. */
.ro-shop .ro-payment-qr{display:block;width:min(320px,100%);height:auto;object-fit:contain;background:#fff;margin:20px auto;padding:12px;box-sizing:border-box}
.ro-shop .ro-payment-qr[hidden],.ro-shop .ro-qr-actions [hidden]{display:none}
.ro-shop .ro-qr-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ro-shop .ro-qr-panel{overflow-wrap:anywhere}
.ro-shop .ro-payment-logos{display:flex;gap:16px;align-items:center;margin-block:10px}
.ro-shop .ro-payment-logos img{width:auto;height:28px;max-width:90px;object-fit:contain}