/* passivestrategies/cart — base structural styles.
   Theme files override only color / radius / spacing variables.
   All selectors are scoped under .cart or .cart__* to avoid site collisions. */

:root {
    --cart-bg: #ffffff;
    --cart-surface: #f7f7f8;
    --cart-text: #111827;
    --cart-muted: #6b7280;
    --cart-border: #e5e7eb;
    --cart-primary: #111827;
    --cart-primary-fg: #ffffff;
    --cart-accent: #2563eb;
    --cart-danger: #b91c1c;
    --cart-radius: 12px;
    --cart-gap: 1rem;
    --cart-max: 1200px;
}

.cart,
.cart__body {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
    color: var(--cart-text);
    background: var(--cart-bg);
    margin: 0;
}

.cart__shell { max-width: var(--cart-max); margin: 0 auto; padding: 0 1rem; }

.cart__site-header { border-bottom: 1px solid var(--cart-border); padding: 1rem 0; }
.cart__site-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cart__brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--cart-text); }
.cart__badge { font-size: .6rem; background: var(--cart-accent); color: #fff; border-radius: 999px; padding: 2px 6px; margin-left: .4rem; vertical-align: middle; }
.cart__nav { display: flex; gap: 1rem; align-items: center; }
.cart__nav a { color: var(--cart-muted); text-decoration: none; }
.cart__nav a:hover { color: var(--cart-text); }
.cart__search input { padding: .5rem .75rem; border: 1px solid var(--cart-border); border-radius: var(--cart-radius); }

.cart__site-footer { border-top: 1px solid var(--cart-border); margin-top: 4rem; padding: 2rem 0; color: var(--cart-muted); }

.cart__hero { background: var(--cart-surface); border-radius: var(--cart-radius); padding: 4rem 2rem; margin: 2rem 0; text-align: center; }
.cart__hero-title { font-size: 2.5rem; margin: 0 0 1rem; }
.cart__hero-tagline { color: var(--cart-muted); font-size: 1.125rem; margin: 0 0 1.5rem; }

.cart__btn { display: inline-block; padding: .75rem 1.25rem; border-radius: var(--cart-radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; font-weight: 600; }
.cart__btn-primary { background: var(--cart-primary); color: var(--cart-primary-fg); }
.cart__btn-primary:hover { opacity: .9; }

.cart__section { margin: 3rem 0; }
.cart__section-title { font-size: 1.5rem; margin: 0 0 1rem; }

.cart__product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--cart-gap); }
.cart__product-card { display: block; background: #fff; border: 1px solid var(--cart-border); border-radius: var(--cart-radius); overflow: hidden; text-decoration: none; color: inherit; }
.cart__product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.cart__product-card-media { aspect-ratio: 1 / 1; background: var(--cart-surface); }
.cart__product-card-img-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--cart-surface), var(--cart-border)); }
.cart__product-card-body { padding: .75rem 1rem 1rem; }
.cart__product-card-title { font-weight: 600; margin-bottom: .25rem; }

.cart__category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--cart-gap); }
.cart__category-card { display: block; padding: 1.25rem; background: var(--cart-surface); border-radius: var(--cart-radius); text-decoration: none; color: inherit; }
.cart__category-card:hover { background: var(--cart-border); }
.cart__category-card-title { font-weight: 600; }
.cart__category-card-desc { font-size: .875rem; color: var(--cart-muted); margin-top: .25rem; }

.cart__price { display: inline-flex; gap: .5rem; align-items: baseline; }
.cart__price-amount { font-weight: 700; }
.cart__price-compare { color: var(--cart-muted); text-decoration: line-through; font-size: .875rem; }

.cart__product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 720px) { .cart__product-detail-grid { grid-template-columns: 1fr; } }
.cart__product-detail-gallery { background: var(--cart-surface); aspect-ratio: 1 / 1; border-radius: var(--cart-radius); }
.cart__product-brand { color: var(--cart-muted); font-size: .875rem; }
.cart__product-title { font-size: 2rem; margin: .25rem 0; }

.cart__breadcrumb ol { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: .5rem; flex-wrap: wrap; font-size: .875rem; color: var(--cart-muted); }
.cart__breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--cart-muted); }
.cart__breadcrumb a { color: var(--cart-muted); text-decoration: none; }
.cart__breadcrumb a:hover { color: var(--cart-text); }

.cart__empty { color: var(--cart-muted); padding: 2rem 0; }
.cart__pagination { margin-top: 2rem; }
.cart__page-title { margin: 0 0 .5rem; }
.cart__page-lede { color: var(--cart-muted); margin-bottom: 1.5rem; }
.cart__list-header { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 1.5rem; gap: 1rem; }
.cart__sort select, .cart__search-form input, .cart__search-form button { padding: .5rem .75rem; border: 1px solid var(--cart-border); border-radius: var(--cart-radius); }
.cart__search-form { display: flex; gap: .5rem; margin: 1rem 0; }