/* Medical Storefront theme — pharmacy-marketplace skin for the Commerce storefront.
   Uses Bootstrap CSS variables throughout so site brand colors and dark mode flow in. */

:root {
    --af-buy: var(--bs-success, #27ae60);
    --af-buy-rgb: var(--bs-success-rgb, 39, 174, 96);
    --af-radius: 1rem;
    --af-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .06);
}

/* Page canvas: soft gray behind the white cards so they stand out (follows dark mode). */
body:has(.af-storefront) { background-color: var(--bs-tertiary-bg, #f4f6f8); }

/* ============================ Shared card look ============================ */
.af-card {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--af-radius);
    box-shadow: var(--af-shadow);
    background: var(--bs-body-bg);
}

/* ============================ Sidebar ============================ */
.af-side-heading {
    font-size: .95rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: .75rem;
}

.af-facet { margin-bottom: .65rem; overflow: visible; transition: border-color .15s ease; }
.af-facet:hover { border-color: rgba(var(--af-buy-rgb), .45); }
.af-facet-toggle {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .8rem 1rem; border: 0; background: transparent; text-align: left;
    font-weight: 600; font-size: .92rem; color: var(--bs-body-color);
    border-radius: var(--af-radius);
}
.af-facet-toggle .af-facet-icon { color: var(--af-buy); width: 1.1rem; text-align: center; flex: 0 0 auto; }
.af-facet-toggle .af-facet-count {
    background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
    border-radius: 50rem; font-size: .72rem; font-weight: 600; padding: .15rem .5rem;
}
.af-facet-toggle .af-facet-chevron { margin-left: auto; transition: transform .2s ease; color: var(--bs-secondary-color); }
.af-facet-toggle:not(.collapsed) .af-facet-chevron { transform: rotate(180deg); }
.af-facet-body { padding: 0 1rem .9rem; }
.af-facet-body .form-check { margin-bottom: .4rem; }

/* Vendor & delivery card */
.af-vendor-card .form-check-label { font-size: .88rem; }
.af-vendor-select.dropdown-toggle {
    width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: .75rem; padding: .65rem .9rem; font-size: .92rem; color: var(--bs-body-color);
}
.af-vendor-select.dropdown-toggle::after { margin-left: .5rem; }
.af-vendor-select:hover { border-color: var(--af-buy); }

/* ============================ Shop top bar ============================ */
.af-search { position: relative; }
.af-search > i {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--bs-secondary-color); pointer-events: none;
}
.af-search > input {
    width: 100%; padding: .7rem 1rem .7rem 2.6rem;
    border: 1px solid var(--bs-border-color); border-radius: .75rem;
    background: var(--bs-body-bg); color: var(--bs-body-color);
}
.af-search > input:focus { outline: 0; border-color: var(--af-buy); box-shadow: 0 0 0 .2rem rgba(var(--af-buy-rgb), .15); }
.af-sort {
    border-radius: .75rem !important; padding-top: .65rem; padding-bottom: .65rem;
    border-color: var(--bs-border-color); font-weight: 500;
}

/* Active filter chips */
.af-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(var(--af-buy-rgb), .12); color: var(--af-buy);
    border-radius: 50rem; padding: .35rem .8rem; font-size: .82rem; font-weight: 600;
    text-decoration: none;
}
.af-chip:hover { background: rgba(var(--af-buy-rgb), .2); color: var(--af-buy); }

/* ============================ Featured strip ============================ */
.af-featured .commerce-featured-track { scrollbar-width: none; }
.af-featured .commerce-featured-track::-webkit-scrollbar { display: none; }
.af-featured .commerce-featured-item { max-width: 240px; }
.af-featured .af-pcard .af-pcard-img { height: 140px; }
/* Placeholder must match the image height or cards without a photo misalign the strip. */
.af-featured .af-pcard .af-pcard-placeholder { height: 140px; }
.af-featured .af-pcard .card-body { padding: .75rem; }
.af-featured .af-pcard .af-pcard-name { font-size: .95rem; }
.af-featured-nav .btn {
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border-color: var(--bs-border-color);
}

/* ============================ Product cards ============================ */
.af-pcard { border: 1px solid var(--bs-border-color-translucent); border-radius: var(--af-radius); box-shadow: var(--af-shadow); transition: box-shadow .15s ease, transform .15s ease; }
.af-pcard:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.af-pcard .af-pcard-top { position: relative; padding: .75rem; }
.af-pcard .af-pcard-img {
    height: 190px; width: 100%; object-fit: contain; display: block;
}
.af-pcard .af-pcard-placeholder { height: 190px; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); background: var(--bs-secondary-bg); border-radius: .75rem; }

.af-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    border-radius: 50rem; font-size: .74rem; font-weight: 600;
    padding: .28rem .65rem; line-height: 1;
}
.af-pill-reco { background: rgba(var(--af-buy-rgb), .14); color: var(--af-buy); }
.af-pill-white { background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color-translucent); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.af-pill-soft { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

.af-pcard-topleft { position: absolute; top: .7rem; left: .7rem; z-index: 2; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.af-pcard-topright { position: absolute; top: .7rem; right: .7rem; z-index: 2; display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }

.af-pcard .commerce-wish {
    position: absolute; bottom: .55rem; right: .55rem; z-index: 2;
    border: 0; background: var(--bs-body-bg); color: var(--bs-secondary-color);
    width: 2rem; height: 2rem; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    opacity: 0; transition: opacity .15s ease;
}
.af-pcard:hover .commerce-wish { opacity: 1; }
.af-pcard .commerce-wish:hover { color: var(--bs-danger); }

.af-pcard-brand { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.af-pcard-name { font-size: 1.05rem; font-weight: 700; margin: 0; }
.af-pcard-name a { color: var(--bs-body-color); text-decoration: none; }
.af-pcard-name a:hover { color: var(--af-buy); }
.af-pcard-sub { font-size: .8rem; color: var(--bs-secondary-color); }

.af-price { color: var(--af-buy); font-weight: 800; font-size: 1.15rem; }
.af-price small { font-weight: 600; font-size: .75em; }
.af-price-prefix { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 500; }
.af-offer-count { font-size: .76rem; color: var(--bs-secondary-color); white-space: nowrap; }

.af-btn-buy {
    --bs-btn-bg: var(--af-buy);
    --bs-btn-border-color: var(--af-buy);
    --bs-btn-hover-bg: color-mix(in srgb, var(--af-buy) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--af-buy) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--af-buy) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--af-buy) 80%, black);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    font-weight: 600;
}

/* List view still works with the new card */
.commerce-grid.is-list .af-pcard { flex-direction: row; }
.commerce-grid.is-list .af-pcard .af-pcard-top { flex: 0 0 220px; }
@media (max-width: 576px) {
    .commerce-grid.is-list .af-pcard { flex-direction: column; }
    .commerce-grid.is-list .af-pcard .af-pcard-top { flex-basis: auto; }
}

/* ============================ Product page ============================ */
.af-back-link { color: var(--bs-body-color); text-decoration: none; font-weight: 500; font-size: .92rem; }
.af-back-link:hover { color: var(--af-buy); }

.af-hero { padding: 1.5rem; }
@media (min-width: 992px) { .af-hero { padding: 2rem; } }

.af-hero-imgwrap { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.af-hero-imgwrap .carousel-item img { height: 380px; object-fit: contain; background: transparent; }
.af-hero-genetics { position: absolute; top: 0; left: 0; z-index: 2; }

.af-hero-brand { color: var(--bs-secondary-color); font-size: .9rem; }
.af-hero-strain { font-style: italic; color: var(--bs-secondary-color); }

.af-spec-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--bs-border-color); border-radius: 50rem;
    padding: .35rem .75rem; font-size: .82rem; font-weight: 600; color: var(--bs-body-color);
    background: var(--bs-body-bg);
}

.af-taglist-heading { font-size: .85rem; font-weight: 700; margin-bottom: .5rem; }
.af-tag { background: var(--bs-secondary-bg); color: var(--bs-body-color); border-radius: 50rem; padding: .35rem .8rem; font-size: .82rem; }

.af-moreinfo-toggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: transparent; border: 0; border-top: 1px solid var(--bs-border-color);
    padding: .9rem 0; font-weight: 700; color: var(--bs-body-color);
}
.af-moreinfo-toggle .af-facet-chevron { transition: transform .2s ease; }
.af-moreinfo-toggle:not(.collapsed) .af-facet-chevron { transform: rotate(180deg); }

.af-offer-heading { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.af-offer-heading i { color: var(--af-buy); }
.af-offer-selected {
    width: 100%; text-align: left; background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .85rem 1rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.af-offer-selected:hover { border-color: var(--af-buy); }
.af-offer-selected .af-offer-label { font-size: .78rem; color: var(--bs-secondary-color); display: block; }
.af-offer-selected .af-offer-name { font-weight: 700; }
.af-offer-selected .af-offer-price { color: var(--af-buy); font-weight: 800; font-size: 1.3rem; white-space: nowrap; }
.af-offer-selected .af-offer-unit { font-size: .76rem; color: var(--bs-secondary-color); display: block; text-align: right; }

.af-avail-note { color: var(--af-buy); font-size: .85rem; font-weight: 600; text-align: center; }

.af-qty { width: 92px; border-radius: .75rem; }

/* Reviews / sections below the hero card */
.af-section-title { font-weight: 800; }