/*
 * Atheox Commerce storefront styles (Assan-inspired).
 * Shared across Shop / Product / Cart / Checkout / OrderConfirmation / Account.
 * Built only on theme CSS variables (var(--bs-*)) — no hardcoded brand colors.
 * Served at /_content/Atheox.Module.Commerce/css/commerce-storefront.css.
 */

/* ============================ Product card ============================ */
.commerce-card {
    position: relative;
    border: 0;
    border-radius: .75rem;
    overflow: hidden;
    background: var(--bs-card-bg, var(--bs-body-bg));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}
.commerce-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12);
}

.commerce-thumb-wrap { position: relative; overflow: hidden; background: var(--bs-body-bg); }
.commerce-card .commerce-thumb { height: 210px; transition: transform .35s ease; }
.commerce-card:hover .commerce-thumb { transform: scale(1.06); }
.commerce-card .commerce-thumb-placeholder { height: 210px; }

/* Sale stamp — top-left corner */
.commerce-stamp {
    position: absolute; top: .6rem; left: .6rem; z-index: 3;
    font-weight: 600; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Wishlist heart — top-right, revealed on hover */
.commerce-wish {
    position: absolute; top: .5rem; right: .5rem; z-index: 3;
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 0;
    background: var(--bs-body-bg); color: var(--bs-secondary-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    opacity: 0; transform: translateY(-.25rem);
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.commerce-card:hover .commerce-wish,
.commerce-card:focus-within .commerce-wish { opacity: 1; transform: translateY(0); }
.commerce-wish:hover { color: var(--bs-danger); }
.commerce-wish.active { color: var(--bs-danger); opacity: 1; transform: none; }
@media (hover: none) { .commerce-wish { opacity: 1; transform: none; } }

/* Card body bits */
.commerce-cardcat { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.commerce-card .card-title { font-size: .95rem; line-height: 1.3; }
.commerce-card .card-title a { color: var(--bs-heading-color, var(--bs-body-color)); }
.commerce-card .card-title a:hover { color: var(--bs-primary); }
.commerce-price-sale { font-weight: 700; color: var(--bs-primary); }
.commerce-price-old { color: var(--bs-secondary-color); text-decoration: line-through; font-size: .85em; }
.commerce-addcart .btn { transition: background-color .15s ease, color .15s ease; }

/* Image overlay potency badges (THC/CBD/genetics) */
.commerce-thumb-badges {
    position: absolute; left: .5rem; right: .5rem; bottom: .5rem; z-index: 2;
    display: flex; flex-wrap: wrap; gap: .25rem; pointer-events: none;
}
.commerce-potency {
    background: rgba(0, 0, 0, .55); color: #fff; font-weight: 400;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.commerce-potency strong { font-weight: 700; }

/* ============================ Vendor picker ============================ */
.commerce-vendor-menu { min-width: 100%; }
.commerce-vendor-list { max-height: 340px; overflow: auto; }
.commerce-vendor-row {
    display: block; width: 100%; text-align: left; border: 0;
    background: transparent; padding: .5rem .6rem; border-radius: var(--bs-border-radius, .375rem);
    color: var(--bs-body-color);
}
.commerce-vendor-row:hover { background: var(--bs-secondary-bg); }
.commerce-vendor-row.active { background: rgba(var(--bs-primary-rgb), .1); outline: 1px solid var(--bs-primary); }

/* ============================ Offer selection (product detail) ============================ */
.commerce-offer-selected:hover { border-color: var(--bs-primary) !important; }
.commerce-offer-row { display: block; width: 100%; }
.commerce-offer-row:hover { border-color: var(--bs-primary) !important; background: var(--bs-secondary-bg); }
.commerce-offer-row.active { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 1px var(--bs-primary); }

/* ============================ Featured strip ============================ */
.commerce-featured-track {
    display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .5rem; scrollbar-width: thin;
}
.commerce-featured-item { flex: 0 0 220px; scroll-snap-align: start; }

/* ============================ Rating stars ============================ */
.commerce-stars { display: inline-flex; align-items: center; gap: .05rem; color: #ffc241; font-size: .8rem; line-height: 1; }
.commerce-stars .star-muted { color: var(--bs-border-color); }
.commerce-stars-lg { font-size: 1rem; }

/* ============================ Listing: list view ============================ */
.commerce-grid.is-list > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
.commerce-grid.is-list .commerce-card { flex-direction: row; }
.commerce-grid.is-list .commerce-card .commerce-thumb-wrap { width: 240px; flex: 0 0 240px; }
.commerce-grid.is-list .commerce-card .commerce-thumb,
.commerce-grid.is-list .commerce-card .commerce-thumb-placeholder { height: 100%; min-height: 190px; }
.commerce-grid.is-list .commerce-wish { opacity: 1; transform: none; }
@media (max-width: 575.98px) {
    .commerce-grid.is-list .commerce-card { flex-direction: column; }
    .commerce-grid.is-list .commerce-card .commerce-thumb-wrap { width: 100%; flex-basis: auto; }
}
.commerce-viewtoggle .btn.active { background: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }

/* ============================ Filters sidebar (Assan-style) ============================ */
/* No overflow:hidden here — it would clip the vendor dropdown menu; corners are rounded per child instead. */
.commerce-filters { border: 0; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08); }
.commerce-filters .card-header { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); font-weight: 700; border-radius: .75rem .75rem 0 0; }
.commerce-filters > :last-child { border-radius: 0 0 .75rem .75rem; }
.commerce-filters .accordion-item { border: 0; border-bottom: 1px solid var(--bs-border-color); }
.commerce-filters .accordion-item:last-child { border-bottom: 0; }
.commerce-filters .accordion-button {
    font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .03em;
    padding: .75rem 1rem; background: transparent; color: var(--bs-body-color);
}
.commerce-filters .accordion-button:not(.collapsed) { background: transparent; color: var(--bs-body-color); box-shadow: none; }
.commerce-filters .accordion-button:focus { box-shadow: none; }
.commerce-filters .accordion-body { padding: .25rem 1rem 1rem; }
/* Term rows: value left, count right */
.commerce-filters .facet-row.form-check,
.commerce-filters .form-check { display: flex; align-items: center; gap: .5rem; padding-left: 0; margin-bottom: .35rem; }
.commerce-filters .form-check-input { margin: 0; float: none; flex: 0 0 auto; }
.commerce-filters .form-check-label { flex: 1; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }

/* ============================ Product gallery ============================ */
.commerce-gallery .carousel-item img { height: 460px; }
.commerce-gallery-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.commerce-gallery-thumb {
    width: 64px; height: 64px; padding: 2px; border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, .375rem); background: var(--bs-body-bg); cursor: pointer;
}
.commerce-gallery-thumb.active { border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .25); }
.commerce-gallery-thumb img { width: 100%; height: 100%; }

/* ============================ Checkout step bar ============================ */
.commerce-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.commerce-steps .step { flex: 1; display: flex; align-items: center; gap: .5rem; color: var(--bs-secondary-color); }
.commerce-steps .step .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    border: 2px solid var(--bs-border-color); font-weight: 600; font-size: .85rem; flex: 0 0 auto;
}
.commerce-steps .step .step-label { font-size: .9rem; font-weight: 500; }
.commerce-steps .step.is-active { color: var(--bs-body-color); }
.commerce-steps .step.is-active .step-num { border-color: var(--bs-primary); color: var(--bs-primary); }
.commerce-steps .step.is-done { color: var(--bs-body-color); }
.commerce-steps .step.is-done .step-num { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--bs-primary-fg, #fff); }
.commerce-steps .step:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--bs-border-color); margin-left: .25rem; }
.commerce-steps .step.is-done:not(:last-child)::after { background: var(--bs-primary); }
@media (max-width: 575.98px) { .commerce-steps .step .step-label { display: none; } }

/* ============================ Mini-cart floating button ============================ */
.commerce-cartfab {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040;
    width: 52px; height: 52px; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.commerce-cartfab-count { position: absolute; top: -4px; right: -4px; }

/* ============================ Sticky order summary ============================ */
.commerce-summary { position: sticky; top: 1rem; }

/* ============================ Facet slider + swatches ============================ */
.facet-range-track { position: relative; height: 24px; }
.facet-range-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: var(--bs-border-color); border-radius: 2px; }
.facet-range-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: var(--bs-primary); border-radius: 2px; }
.facet-range-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 16px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; z-index: 3; }
.facet-range-input:focus { outline: none; }
.facet-range-input::-webkit-slider-runnable-track { -webkit-appearance: none; height: 16px; background: transparent; }
.facet-range-input::-moz-range-track { height: 16px; background: transparent; }
.facet-range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--bs-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); cursor: pointer; }
.facet-range-input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--bs-primary); border: 2px solid #fff; cursor: pointer; }
.facet-swatch { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bs-border-color); cursor: pointer; vertical-align: middle; }
.btn-check:checked + .facet-swatch { border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35); }
.btn-check:focus-visible + .facet-swatch { outline: 2px solid var(--bs-primary); outline-offset: 2px; }