/* Brand catalogue — Phase 3 MVP.
 *
 * Three scopes:
 *   1. Homepage brand tile grid (.brand-tile-grid).
 *   2. Brand detail page hero + variant grid with three-tier steppers.
 *   3. Switch-range confirm modal (shared between brand.js and cart.js).
 */

/* ---- 1. Homepage brand tile grid ----------------------------------- */

.brand-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    min-height: 160px;
}
.brand-tile:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.brand-tile__logo {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
    margin-bottom: var(--space-2);
}
.brand-tile__name {
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-top: var(--space-2);
}
.brand-tile__featured {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

/* ---- 2. Brand detail page hero + variant grid ---------------------- */

.brand-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
    text-align: center;
}
@media (min-width: 768px) {
    .brand-hero {
        flex-direction: row;
        text-align: left;
    }
}

.brand-hero__logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    flex-shrink: 0;
}
.brand-hero__title {
    margin: 0;
    font-size: var(--font-size-2xl, 2rem);
}
/* 0.25.28 — lead time bumped from a muted paragraph to an accent pill so
   trade buyers can't miss the supplier turnaround on a brand-direct order
   (was being skipped on /brand.html and /brand-product.html). Pink-tinted
   background + bolder weight + larger type. */
.brand-hero__lead-time {
    display: inline-block;
    margin: var(--space-2) 0 var(--space-1);
    padding: 6px 12px;
    background: #fff0f7;
    border: 1px solid #f8b3d0;
    border-radius: 999px;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-primary, #d63384);
    font-weight: 600;
}
.brand-hero__lead-time strong {
    font-weight: 700;
    margin-right: 4px;
}
.brand-hero__supplier {
    margin: 0;
}

/* 0.74.38 — Brand description block rendered below the hero on the brand
   page when ops has typed one in the admin "Brands" tab. Paragraphs come
   from blank-line splitting; single newlines render as <br>.
   0.74.43 — Removed the 70ch readability cap; with the current page
   layout the cap left 60% of horizontal space empty on desktop which
   made the description column tall and pushed the variant grid below
   the fold. Now flows to the full container width. */
.brand-hero__description {
    margin: var(--space-4) 0 var(--space-5);
    color: var(--color-text, #1a1a1a);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
}
.brand-hero__description p {
    margin: 0 0 var(--space-3);
}
.brand-hero__description p:last-child {
    margin-bottom: 0;
}

/* Variant grid — one row per variant, single column on mobile, two on desktop. */
/* 0.25.5 — portrait card layout, mirroring sweetandglory.com retail
   grid. Cards stack image-on-top + body-below, grid grows from 1 to
   5 columns to fit a denser shop-style display on desktop. */
.brand-variant-grid {
    /* 0.75.16 — 2-up on mobile (was 1-up). Single-column tiles produced
       a square 1:1 image that consumed the whole viewport height with
       lots of dead space around horizontal-format pack shots; 2-up
       halves each tile's width and stacks four products in the screen
       height instead of one, giving customers more shopfront scan per
       scroll. The image aspect ratio also shrinks (see below). */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
@media (min-width: 900px) {
    .brand-variant-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1200px) {
    .brand-variant-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.brand-variant-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.brand-variant-card__image {
    /* 0.75.16 — was aspect-ratio: 1 / 1 since 0.25.5. Square containers
       letterbox heavily for horizontal-format pack shots (Airheads
       bar, Theatre 6-pack box, etc) which is most of the catalogue.
       4/3 keeps enough vertical room for portrait packs (cans, sour
       belt bags) while trimming ~25% of dead space for the dominant
       horizontal SKUs. Combined with 2-up grid on mobile (above) this
       restores a denser shopfront scan. */
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--color-bg-alt);
    padding: var(--space-2);
}

.brand-variant-card__body {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.brand-variant-card__name {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.brand-variant-card__pack {
    margin: 0;
}
.brand-variant-card__tiers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* 0.75.27 — tier-row icon restored on /brand-product/<code> detail page
   (was removed site-wide in 0.74.38 due to listing-tile height concerns;
   detail page has plenty of horizontal space). 56px desktop / 44px on
   narrow phones keeps the icon legible without bullying the price label. */
.tier-row__icon {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: contain;
    align-self: center;
}
@media (max-width: 479px) {
    .tier-row__icon { width: 44px; height: 44px; }
}

/* One row per tier — label on the left, stepper + Add button on the right. */
.tier-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* 0.74.4 — bumped from --space-3 to --space-4 for more breathing
       room between the controls (stepper + Add button) and the grey
       tier-row edges. Applies on brand cards + brand-product page. */
    padding: var(--space-4);
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}
@media (min-width: 480px) {
    .tier-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.tier-row__label {
    /* 0.25.8 — fill the middle column so heading-left + price-right
       align consistently across Case / Pallet / FCL rows on the
       brand-product page. Listing-card scope below overrides this
       back to centred since cards only render the Case tier. */
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.tier-row__heading {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}
.tier-row__price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.tier-row__price small {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-body);
}
.tier-row__controls {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    /* 0.25.9 — uniform controls block width so the label's right
       edge (and therefore the price) lands at the same x across
       Case / Pallet / FCL rows. Contents hug the right of the
       block so the Add button right-edge also aligns. */
    min-width: 240px;
    justify-content: flex-end;
}
.tier-row__controls .btn-sm {
    /* 0.25.9 — uniform Add-button width so "Add case" and
       "Add pallets" share both their left and right edges. */
    min-width: 100px;
}
.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

/* ---- 3. Switch-range confirm modal --------------------------------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: var(--space-4);
}
.modal-backdrop[hidden] { display: none; }

.modal {
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-5);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-md);
}
.modal__title {
    margin: 0 0 var(--space-3);
}
.modal__body {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
}
.modal__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}
@media (max-width: 479px) {
    .modal__actions {
        flex-direction: column-reverse;
    }
    .modal__actions .btn {
        width: 100%;
    }
}

/* ---- 3b. Brand variant card — "larger quantities" link ------------ */

.brand-variant-card__image-link {
    display: block;
    width: 100%;
}

/* 0.25.5 — scoped tier-row override for the listing card.
   Cards are narrow in the new grid (~290 px at 4-up on 1200 px). The
   global .tier-row at ≥ 480 px goes flex-direction:row with controls
   pushed right; that doesn't fit our card width. flex-wrap forces the
   controls onto their own row when space runs out, leaving icon +
   label inline above. The product-page .tier-row outside this scope
   is unaffected. */
.brand-variant-card .tier-row {
    /* 0.75.15 — force flex-direction: column on the listing card
       regardless of viewport. The global .tier-row at >=480px flips to
       row-direction with label-left / controls-right; on iPhone Pro Max
       (430px) and most tablets the tile is rendered at a width that
       triggers row-direction on the global rule despite flex-wrap. Make
       the card layout deterministic: label → stepper → Add button always
       stacked.
       0.75.16 — align-items: stretch (default) instead of explicit
       center. Stretch gives label/controls the full cross-axis width
       naturally without needing width:100% on each child, and the
       text-align: center on the label still centres the inner text.
       0.75.15's width:100% additions caused horizontal page scroll on
       430px viewport (Colin's iPhone Pro Max) — the width property
       interacting with flex-wrap and the parent's content-box on the
       grid track produced a tile slightly wider than its column. */
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    row-gap: var(--space-3);
    justify-content: center;
    /* 0.74.6 — anchor the tier-row (price + qty + Add button) at the
       bottom of the card body. Without this, longer titles push the
       Add button down on some tiles and the buttons no longer align
       across the row. Matches the existing pattern on .product-card
       (.product-card__price has margin-top: auto) and on .section-card
       (.section-card__tease-form has margin-top: auto). */
    margin-top: auto;
}
.brand-variant-card .tier-row__label {
    /* 0.25.8 — listing card has only the Case tier; centre the
       heading + price as a group instead of the brand-product page's
       space-between alignment.
       0.75.16 — width:100% removed (was added in 0.75.15). With parent
       align-items: stretch, the label naturally fills cross-axis; the
       text-align: center on this rule centres the inline children
       (heading + price). No risk of width-vs-padding overflow math. */
    flex: 0 0 auto;
    justify-content: center;
    text-align: center;
}
.brand-variant-card .tier-row__controls {
    /* 0.74.5 — vertical stack: qty stepper on top, Add button below,
       both at 100% width of the tier-row's content area.
       Why not horizontal: at 5-up + 1200-1400px viewport the tier-row
       content area is ~163px. A horizontal qty + button layout has to
       split that — even with the stepper compressed to 96px the
       button only gets ~59px which is too narrow for "Add case" on
       one line (~82px needed) so it wraps. Vertical stacking gives
       both elements the full 163px and keeps the button single-line
       consistently across every tile width.
       Also clears the global min-width: 240px which previously caused
       controls to overflow the tier-row's grey background.
       0.75.16 — width:100% removed (was added in 0.75.15). Parent's
       align-items: stretch fills width without the explicit property
       (which was the suspected cause of horizontal page overflow). */
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
}
.brand-variant-card .tier-row__controls .qty-input {
    flex: 0 0 auto;
    width: 100%;
}
.brand-variant-card .tier-row__controls .btn-sm {
    flex: 0 0 auto;
    width: 100%;
    /* Override the global .tier-row__controls .btn-sm 100px min-width
       so a narrow tile doesn't push the button past the tier-row. */
    min-width: 0;
}
.brand-variant-card__name a {
    color: inherit;
    text-decoration: none;
}
.brand-variant-card__name a:hover {
    color: var(--color-primary);
}
.brand-variant-card__larger-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.brand-variant-card__larger-link:hover {
    border-bottom-color: var(--color-primary);
}

/* ---- 3c. Brand product-detail page -------------------------------- */

.bp-breadcrumb {
    margin-bottom: var(--space-4);
}
.bp-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}
.bp-breadcrumb a:hover { text-decoration: underline; }

.brand-hero--compact {
    padding: var(--space-3) 0;
    margin-bottom: var(--space-4);
}
.brand-hero--compact .brand-hero__logo {
    width: 72px;
    height: 72px;
}

.bp-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
    .bp-layout {
        grid-template-columns: minmax(280px, 1fr) 2fr;
    }
}
.bp-gallery {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bp-gallery__image {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}
.bp-detail__title {
    margin: var(--space-1) 0 var(--space-2);
}
.bp-detail__pack {
    margin: 0 0 var(--space-4);
}
.bp-tiers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bp-info {
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-top: var(--space-5);
}
.bp-info__title {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
}
.bp-info__list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}
@media (min-width: 600px) {
    .bp-info__list {
        grid-template-columns: max-content 1fr;
        gap: var(--space-2) var(--space-4);
    }
}
.bp-info__row {
    display: contents;
}
.bp-info__row dt {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
}
.bp-info__row dd {
    margin: 0;
}

/* ---- 4. Cart page multi-basket sections --------------------------- */

/* Container-border convention (0.20.7): match top-nav pill style. */
.cart-section {
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background: #fff;
}
.cart-section__title {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
}
.cart-qty-brand {
    display: inline-block;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}
/* Small per-section caption under the qty stepper in brand-catalogue cart
   rows — e.g. "pallets" label + "162 cases" sub-translation for pallet/FCL
   lines. Keeps the tier semantics visible alongside the editable stepper
   (tier-units in, case-equivalents below). */
.cart-qty-sub {
    margin-top: 2px;
    line-height: 1.2;
}

/* In-button basket badge — appears on brand-listing + product-detail
   Add buttons once the variant is already in the customer's basket.
   Small pill on top of the button's primary action colour; SVG basket
   icon (inherits .btn text colour via currentColor) + compact count. */
.btn-basket-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--space-2);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    vertical-align: middle;
    /* Never wraps to its own line inside a single-line button */
    white-space: nowrap;
}
.btn-basket-badge__count {
    /* Tight around the numeral; relies on .btn-basket-badge gap for spacing */
    line-height: 1;
}
.btn-basket-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    /* Optical-centre nudge so the basket sits on the same baseline as the
       number glyph — without it the basket looks one pixel too high. */
    margin-top: 1px;
}

/* ---- 5. Cart page brand-catalogue indicator ----------------------- */

.cart-brand-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}
.cart-brand-banner__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.cart-brand-banner__text {
    flex: 1;
}
.cart-brand-banner__text strong { display: block; }
.cart-coming-soon {
    background: #fff7e6;
    border: 1px solid #f6d15a;
    color: #7a5b10;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}

/* 0.75.35 — Suggest-a-brand WhatsApp CTA on /brands. Sits below the tile
   grid as a soft pink banner. WhatsApp green for the CTA button so the
   "you're going to WhatsApp" affordance is unambiguous. */
.brand-suggest-cta {
    margin-top: var(--space-7);
    padding: var(--space-5);
    background: linear-gradient(135deg, #fff3f7 0%, #ffe8f0 100%);
    border: 1px solid rgba(239, 81, 144, 0.18);
    border-radius: var(--radius-lg, 12px);
}
.brand-suggest-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.brand-suggest-cta__copy {
    flex: 1 1 280px;
    min-width: 0;
}
.brand-suggest-cta__title {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    color: #2a2a2a;
}
.brand-suggest-cta__subtitle {
    margin: 0;
    color: var(--color-text-muted, #555);
    font-size: 0.95rem;
}
.brand-suggest-cta__btn {
    /* Override the default pink .btn--primary with WhatsApp green so customers
       know they're being sent to WhatsApp, not to a generic form. */
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-weight: 600;
    text-decoration: none;
    flex: 0 0 auto;
}
.brand-suggest-cta__btn:hover,
.brand-suggest-cta__btn:focus {
    background: #1ebd5b !important;
    border-color: #1ebd5b !important;
    color: #fff !important;
}
.brand-suggest-cta__icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
@media (max-width: 600px) {
    .brand-suggest-cta        { padding: var(--space-4); }
    .brand-suggest-cta__inner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .brand-suggest-cta__copy  { flex: 0 0 auto; }  /* override the 280px flex-basis used at desktop — would otherwise force 280px-tall empty space below copy on mobile */
    .brand-suggest-cta__btn   { justify-content: center; }
    .brand-suggest-cta__title { font-size: 1.1rem; }
}