/* ---------------------------------------------------------------------------
   Solina — this site's own CSS.

   Replaces the parent's empty themes/forge/assets/css/child.css and loads after
   forge.css, so it wins on equal specificity without !important.

   Brand tokens stay in theme.css. This file is for components this site adds or
   restyles. Everything below derives from the parent's tokens — no raw hex, no
   new spacing values.
--------------------------------------------------------------------------- */

/* --- Side cart upsell ------------------------------------------------------
   Pairs with partials/shop/selection/side_cart.htm. Rows instead of cards: the
   drawer is ~340px and already scrolling, so three suggestions fit where one
   card used to.
---------------------------------------------------------------------------- */

.upsell {
    padding: var(--gap-3) 1.25rem;
    border-top: 1px solid var(--line);
}

.upsell__title {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: -0.015em;
}
.upsell__note {
    margin-top: 0.15rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.upsell__list { margin-top: var(--gap-2); display: grid; gap: 0.25rem; }

.upsellrow {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: var(--gap-2);
    padding: 0.7rem 0;
}
.upsellrow + .upsellrow { border-top: 1px solid var(--line); }

.upsellrow__media {
    display: block;
    width: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-soft);
}
.upsellrow__media .photo { aspect-ratio: 1; }

.upsellrow__body { min-width: 0; }

.upsellrow__name {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.upsellrow__name a { text-decoration: none; }
.upsellrow__name a:hover { color: var(--accent); }

.upsellrow__price {
    margin-top: 0.1rem;
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 700;
}
.upsellrow__price .price__was {
    font-weight: 500;
    color: var(--ink-muted);
    margin-right: 0.25rem;
}

/* The control sits under the price, full width of the text column, so a long
   label like "Choose options" never competes with the product name. Still a
   44px target. */
.upsellrow__add { margin-top: 0.45rem; }
.upsellrow__add .btn,
a.upsellrow__add {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding-inline: 0.8rem;
    font-size: var(--step--1);
}

/* --- Checkout offer panel ---------------------------------------------------
   Pairs with partials/shop/selection/checkout_gift.htm — the override for ONE
   rule, matched by its code rather than by its placement.

   A tinted panel rather than the plain block, because at checkout this is the
   only thing on the page asking for a decision the customer had not already
   made. It is the one place in this column boldness is spent.
---------------------------------------------------------------------------- */

.offerpanel {
    padding: var(--gap-3);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--radius-lg);
}

.offerpanel__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.offerpanel__note {
    margin-top: 0.2rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.offerpanel__list { margin-top: var(--gap-3); display: grid; gap: 0.2rem; }

.offer {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: var(--gap-2);
    padding: 0.75rem 0;
}
.offer + .offer { border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }

.offer__media {
    display: block; width: 64px;
    border-radius: var(--radius); overflow: hidden; background: var(--surface);
}
.offer__media .photo { aspect-ratio: 1; }

.offer__body { min-width: 0; }
.offer__name {
    font-family: var(--font-display); font-size: var(--step--1);
    font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
}
.offer__name a { text-decoration: none; }
.offer__name a:hover { color: var(--accent); }

.offer__price {
    margin-top: 0.2rem;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem;
    font-family: var(--font-display); font-size: var(--step--1);
}
.offer__now { font-weight: 700; font-size: var(--step-0); }
.offer__price .price__was { font-weight: 500; color: var(--ink-muted); }
.offer__badge {
    padding: 0.05rem 0.35rem;
    background: var(--accent); color: var(--accent-ink);
    border-radius: var(--radius);
    font-size: 0.7rem; font-weight: 700;
}

.offer__add { margin-top: 0.5rem; }
.offer__add .btn, button.offer__add, a.offer__add {
    display: flex; width: 100%; min-height: 44px;
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
    font-size: var(--step--1);
}