/* =====================================================
 * app.css — Wireframe-level styles for Real Screen Coding phase
 * =====================================================
 * Purpose: just enough CSS to see page sections, nothing more.
 * Final Figma-faithful design comes in the POLISH phase.
 *
 * Rules:
 *   - No colors beyond grayscale + one weak accent
 *   - No fonts (uses system default)
 *   - No fancy spacing — only enough to separate sections visually
 *   - When a section is added, add minimum CSS to see it. Don't style.
 * ===================================================== */

/* ---------- Reset (minimal) ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    font: inherit;
}

/* ---------- Layout container ---------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- Section heading ---------- */
.section {
    padding: 24px 16px;
    border-bottom: 1px solid #eee;
}

.section h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
}

.section .empty {
    color: #888;
    font-style: italic;
}

/* ---------- Product card ----------
   Retired — polished card lives in storefront.css (§3.5.1). */

/* ---------- How It Works ----------
   Retired — polished section lives in storefront.css (§3.1). */

/* ---------- Footer ----------
   Retired — polished footer lives in storefront.css (§3.1). */

/* ---------- Breadcrumb ----------
   Retired — polished breadcrumb lives in storefront.css (§3.4). */

/* ---------- Category landing ----------
   Retired — polished header card + sub-category grid live in storefront.css (§3.4). */

/* ---------- Responsive (desktop) ---------- */
@media (min-width: 768px) {

    .how-it-works .steps {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .how-it-works .step {
        flex: 1 1 200px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ---------- Listing — header meta ---------- */
/* .category-header-meta retired — listing count now uses .category-header__count (§3.5). */

/* ---------- Listing — toolbar (filter + sort) ----------
   Retired — polished toolbar lives in storefront.css (§3.5.2). */

/* ---------- Listing — product grid + load more + empty states ----------
   Retired — polished versions live in storefront.css (§3.5).
   .btn-primary now lives in base.css. */

/* ---------- Filter Panel (mobile slide-up) ----------
   Retired — polished panel lives in storefront.css (§3.5.2). */

/* ---------- Listing empty-state actions + .btn-secondary ----------
   Retired — empty layout in storefront.css; .btn-secondary lives in base.css (§3.5). */

/* ---------- Filter Panel (desktop popover bar) ----------
   Retired — polished desktop bar lives in storefront.css (§3.5.2). */

/* ============================================================
   Product Detail Page (PRD §3.6)
   Wireframe-level styling. Polish phase will replace with Figma.
   ============================================================ */

/* ---------- Product Detail — info card ----------
   Retired — polished card lives in storefront.css (§3.6).
   .badge-hot promoted to shared; discount uses base .discount-tag. */

/* ---------- Product Detail — reviews ----------
   Retired — polished reviews card lives in storefront.css (§3.6.2). */

/* ---------- Product Detail — related ----------
   Retired — uses homepage carousel scaffolding (.section + carousel-head
   + .h-scroll) in storefront.css (§3.6). */

/* Cart page — retired; polished in storefront.css (§3.8). */

/* ============================================================
 * CHECKOUT PAGE — wireframe-level CSS
 * ------------------------------------------------------------
 * Just enough to read the page clearly. Not final design.
 * Full visual polish lives in the dedicated Figma polish pass
 * (PRD §10.4 + Decisions Log May 10, 2026).
 *
 * Stands alone — no assumptions about existing class names.
 * Safe to delete and replace wholesale during the polish phase.
 * ============================================================ */

/* Checkout page/section CSS retired — polished in storefront.css (§3.9). */

/* Form-control CSS retired — base.css is the single source (radius, 44px
   height, focus glow, select arrow, labels, hints, warnings). */

/* Checkout radio/bank/summary/submit/error CSS retired — see storefront.css. */

/* .form-input-error / .form-error-text retired — see base.css form controls. */

/* Thank You page CSS retired — polished in storefront.css (§3.10). */

/* Order Tracking page CSS retired — polished in storefront.css (§3.11). */

/* Search CSS fully retired — dropdown + results + empty state all
   polished in storefront.css (§3.3). */

/* Search results page CSS retired — polished in storefront.css (§3.3). */

/* Search empty-state page CSS retired — polished in storefront.css
   (shared .empty-state card, §3.3). The dropdown + results-page
   wireframe below stay until the search results polish pass (item 19). */

/* Legal page CSS retired — polished in storefront.css (§3.14, shared content-page shell). */

/* 404 page CSS retired — polished in storefront.css (§3.15). */

/* Customer Service page CSS retired — polished in storefront.css (§3.13, shared content-page shell). */

/* About Us page CSS retired — polished in storefront.css (§3.12, shared content-page shell). */

/* =====================================================
 * Shared dashboard utilities (promoted May 21, 2026)
 * -----------------------------------------------------
 * Promoted here when Reviews (§4.6) became the 2nd consumer, per the
 * "extract when N≥2" rule. Previously scoped in dashboard-customers.css:
 *   .visually-hidden, .modal__icon--success, .modal__btn--primary
 * Plus button-system gaps that were never defined globally (.btn base,
 * .btn-danger-outline) — they belong with .btn-primary/.btn-secondary,
 * not in a page file.
 * ===================================================== */

/* a11y utility — visually hidden but readable by screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Modal variants used by both Customers (blacklist) + Reviews (approve) */
.modal__icon--success {
    background: #ecfdf5;
    color: #059669;
}

.modal__btn--primary {
    background: #2563eb;
    color: #fff;
}

.modal__btn--primary:hover {
    background: #1d4ed8;
}

/* Button-system completion: base .btn + the danger-outline variant.
   .btn-primary / .btn-secondary already exist above; these fill the gaps
   the dashboard action bars + review cards reference. */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    background: #fff;
    color: #333;
}

.btn-danger-outline {
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.btn-danger-outline:hover {
    background: #fef2f2;
}

/* Review page CSS retired — polished in storefront.css (§3.16). */