/* ============================================================
   antigravity-patch.css — Antigravity Refactor v4
   Append this file AFTER style.css and theme_redesign.css
   ============================================================ */

/* ── Rule 2.2: Star row — prevent CLS, reserve height ─────── */
.star-row {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    gap: 2px;
    color: #f59e0b; /* amber — full/partial stars inherit this */
}

.star {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Rule 4.1: Customizer panel z-index — isolation fix ────── */
/* Any ancestor with transform/opacity/filter resets z-index scope.
   isolation:isolate + translateZ(0) breaks out of that trap.      */
.customizer-panel,
.pc-controls,
[data-customizer-panel] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    isolation: isolate;        /* own stacking context */
    transform: translateZ(0);  /* GPU composite layer  */
}

/* ── Rule 4.4: Header height offset — never overlap sticky nav */
:root { --header-height: 60px; }

body { padding-top: var(--header-height); }

nav.main-nav,
header.site-header,
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.customizer-panel,
.pc-controls {
    /* Override the bottom:1rem above for top-anchored variant */
    top: calc(var(--header-height) + 40px + 1rem);
    bottom: auto;
}

/* ── Rule 5.1: Cart stack-card layout (≤600px) ─────────────── */
@media (max-width: 600px) {
    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td {
        display: block;
        width: 100%;
    }

    .cart-table thead { display: none; }

    .cart-table tr,
    .cart-row {
        background: var(--surface, #fff);
        border-radius: 12px;
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid var(--border, #e5e7eb);
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }

    .cart-table td::before,
    .cart-row td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary, #6b7280);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 2px;
    }
}

/* ── Rule 5.2: Touch targets — 44×44px minimum ─────────────── */
button,
a,
input[type="checkbox"],
input[type="radio"],
select,
.qty-control,
.cart-remove-icon,
.studio-select-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Inline/icon-only anchors that must stay smaller get an
   invisible tap area via pseudo-element instead             */
a.icon-link {
    position: relative;
    min-height: unset;
    min-width: unset;
}
a.icon-link::after {
    content: '';
    position: absolute;
    inset: -12px;   /* expands tap target to ~44px without layout impact */
}

/* ── Rule 6.3: Wall preview — gradient fallback ────────────── */
.wall-preview,
.wall-preview-pro,
.wall-preview-stage,
[data-wall-preview] {
    background:
        var(--wall-image,
            linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    background-size: cover;
    background-position: center;
}

/* ── Rule 4.4: No horizontal overflow at any width ─────────── */
html, body { max-width: 100%; overflow-x: hidden; }