/* Retail — general/department store.
 *
 * Design intent: approachable and busy in a good way. A retail shopper is
 * browsing, not researching, so the job is to get a lot of product on screen
 * without it feeling cramped: dense grid, soft rounded cards, generous colour.
 * The merchant's brand colour carries the personality; the theme stays neutral
 * behind it.
 *
 * Structure comes from base/base.css — this file only sets the knobs.
 */

:root {
    --t-card-radius: 14px;
    --t-radius: 12px;

    --t-grid-min: 200px;          /* dense — browsing, not studying */
    --t-gap: 20px;

    --t-heading-weight: 700;
    --t-heading-spacing: -0.015em;

    --t-surface: #f4f6f9;
    --t-hero-bg: linear-gradient(135deg, #f4f6f9 0%, #ffffff 60%);
    --t-hero-pad: 72px;
    --t-sec-pad: 64px;

    --t-shadow: 0 1px 2px rgba(23, 32, 51, 0.05), 0 6px 20px rgba(23, 32, 51, 0.06);
    --t-shadow-hover: 0 4px 8px rgba(23, 32, 51, 0.08), 0 16px 32px rgba(23, 32, 51, 0.12);
}

/* A soft tinted band behind the value props reads as a "why buy here" strip
   without needing icons we do not have. */
.sec-value-props { background: var(--t-surface); padding: 36px 0; }
.sec-value-props + .sec { padding-top: var(--t-sec-pad); }
.vp-item { background: #fff; border: none; box-shadow: var(--t-shadow); }

/* Price is the primary decision signal in general retail — make it loud. */
.product-card-price { font-size: 1.15rem; color: var(--c-primary); }

/* Contained photos leave bands beside them; white matches the white backdrop
   product shots are taken on, so the bands disappear. */
.product-card-media { background: #fff; }

.category-tile a { align-items: flex-start; background: var(--t-surface); border: none; }
.category-tile a:hover { background: #fff; box-shadow: var(--t-shadow-hover); }

.sec-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.cart-btn { background: var(--c-primary); color: var(--c-on-primary); border-color: transparent; }
.cart-btn:hover { color: var(--c-on-primary); opacity: 0.92; }