/* =============================================================
   Design tokens — Clean Premium (matches Mockups/assets/css/tokens.css)
   palette: ivory + cream + gold + charcoal
   ============================================================= */
:root {
    /* colours */
    --bg:          #FBF8F3;   /* ivory */
    --ivory:       #FBF8F3;
    --bg-alt:      #F4EFE6;   /* warm cream */
    --cream:       #F4EFE6;
    --beige:       #E7E2D8;
    --surface:     #FFFFFF;
    --border:      #E6DFD0;
    --ink:         #1F1B16;   /* charcoal */
    --ink-soft:    #5A5248;
    --muted:       #8E8577;
    --gold:        #B99653;
    --gold-dark:   #8F7133;
    --gold-soft:   #F3EADA;
    --danger:      #B94B3B;
    --success:     #3F7A4C;

    /* typography
       --font-sans is overridden at runtime by _Layout.cshtml using the
       admin-chosen body font. The tokens.css default reflects the
       storefront's baseline body family: Josefin Sans. */
    --font-serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-sans:   'Josefin Sans', sans-serif;

    /* spacing */
    --radius:      4px;
    --radius-lg:   8px;
    --shadow-sm:   0 1px 2px rgba(31,27,22,.06);
    --shadow-md:   0 8px 24px rgba(31,27,22,.08);
}

html, body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
}

h1, h2, h3, h4, .serif {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: .01em;
}

a        { color: inherit; text-decoration: none; }
a:hover  { color: var(--gold-dark); }

/* -------- Container -------- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (max-width: 640px) {
    .container { padding: 0 1rem; }
}

/* -------- Buttons -------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: .875rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    border: 1px solid transparent;
    text-decoration: none;
}
.btn-primary         { background: var(--gold); color: #fff; }
.btn-primary:hover   { background: var(--gold-dark); color: #fff; }
.btn-outline         { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover   { background: var(--ink); color: var(--bg); }
.btn-ghost           { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover     { color: var(--gold-dark); }

/* -------- Chip -------- */
.chip {
    display: inline-block;
    padding: .25rem .75rem;
    background: var(--gold-soft);
    color: var(--gold-dark);
    border-radius: 999px;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* -------- Divider -------- */
.divider { height: 1px; background: var(--border); }

/* -------- Product card -------- */
.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    display: block;
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.product-card .pc-image {
    aspect-ratio: 1/1.05;
    background: var(--bg-alt);
    position: relative;
    overflow: hidden;
}
/* Fallback gradient only shows when no tile- class has set a background.
   Without this narrowing the overlay would obliterate tile-1..4 swatches and
   every card would look identical (the "beige cards" bug on the PD page). */
.product-card .pc-image:not([class*="tile-"])::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--bg-alt) 0%, var(--border) 100%);
}
.product-card .pc-body  { padding: 1rem 1.25rem 1.5rem; }
.product-card .pc-sub   { font-size: .75rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.product-card .pc-title { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.3; margin: .25rem 0; }
.product-card .pc-price { font-weight: 500; margin-top: .5rem; color: var(--ink); }
.product-card .pc-price .old {
    color: var(--muted);
    text-decoration: line-through;
    margin-right: .5rem;
    font-weight: 400;
}

/* -------- Hero gradient tiles -------- */
.hero-swatch { background: linear-gradient(135deg, #C8B089 0%, #8F7133 45%, #5A5248 100%); }
.tile-1      { background: linear-gradient(135deg, #D4C4A8 0%, #9A8866 100%); }
.tile-2      { background: linear-gradient(135deg, #B79A7A 0%, #7A5F45 100%); }
.tile-3      { background: linear-gradient(135deg, #E6D4B8 0%, #B99653 100%); }
.tile-4      { background: linear-gradient(135deg, #A89279 0%, #5A4A38 100%); }