/* =============================================================================
 * Dispenza storefront — layout + modern polish.
 *
 *   • Colors / typography inherit from the host site (Bootstrap or whatever
 *     theme is loaded). We don't redefine palette tokens.
 *   • Visual polish lives in motion, depth, and rhythm — hover lifts, image
 *     zoom, refined spacing, smooth animations, modern radii. Override the
 *     module-local tokens below if you want to dial things back.
 *   • Every selector is prefixed `.dpz-` to avoid leaking outside.
 * ============================================================================= */

.dpz, .dpz * { box-sizing: border-box; }

.dpz {
    font-size: 15px;
    /* Local tokens — only structural / motion. No palette here. */
    --dpz-radius:       14px;
    --dpz-radius-sm:    8px;
    --dpz-radius-pill:  999px;
    --dpz-shadow-sm:    0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.06);
    --dpz-shadow:       0 6px 18px -8px rgba(15,23,42,.18), 0 2px 4px rgba(15,23,42,.06);
    --dpz-shadow-lg:    0 18px 40px -16px rgba(15,23,42,.32), 0 6px 12px rgba(15,23,42,.08);
    --dpz-border:       1px solid rgba(15,23,42,.08);
    --dpz-ease:         cubic-bezier(.2,.8,.2,1);
    --dpz-dur:          .25s;
    --dpz-dur-fast:     .15s;
    --dpz-gap:          1.25rem;

    /* Typography */
    --dpz-eyebrow-size:    .75rem;
    --dpz-eyebrow-track:   .14em;
    --dpz-eyebrow-weight:  700;
    --dpz-eyebrow-opacity: .65;

    /* Surface fills (semantic, neutral) */
    --dpz-fill-soft:    rgba(15,23,42,.04);
    --dpz-fill-medium:  rgba(15,23,42,.06);
    --dpz-fill-strong:  rgba(15,23,42,.08);
}

/* =============================================================================
 * Reusable patterns
 * ─────────────────────────────────────────────────────────────────────────────
 * The storefront is built on a small set of named patterns (.dpz-section,
 * .dpz-section-title, .dpz-lift). Every component below either
 * applies the class or is included in a convenience selector list so the
 * styling stays in lock-step. Add a new component → either give it the
 * class, or add it to the list. Don't duplicate the rules.
 * ============================================================================= */

/* ---- 1. Section --------------------------------------------------------- *
 * Standard horizontally-centred content rail. Apply `.dpz-section` to any
 * top-level <section>. Compose with the modifiers as needed.
 *   --narrow    cart, checkout, simple forms
 *   --wide      full-width shop / dashboards
 *   --bordered  top border + extra top margin/padding for a divider feel
 */
.dpz-section            { padding: 2rem 1.5rem; max-width: 1180px; margin: 0 auto; }
.dpz-section--narrow    { max-width: 980px; }
.dpz-section--wide      { max-width: 1480px; }
.dpz-section--bordered  { border-top: var(--dpz-border); margin-top: 2rem; padding-top: 2.5rem; }

/* ---- 2. Section title --------------------------------------------------- *
 * Standard section heading — readable size, mixed-case, bold-but-not-shouty.
 * Apply to <h2>/<h3> used as section headings ("Similar Products", "Product
 * Specifications", "Featured"). For tiny tracked-out labels (sidebar group
 * headers, eyebrow text), use .dpz-eyebrow instead.
 */
.dpz-section-title {
    font-size:      1.15rem;
    font-weight:    700;
    letter-spacing: -.01em;
    line-height:    1.3;
    margin: 0;
}

/* Eyebrow — tiny tracked-out uppercase label. Used for sidebar groups. */
.dpz-eyebrow {
    font-size:       var(--dpz-eyebrow-size);
    font-weight:     var(--dpz-eyebrow-weight);
    letter-spacing:  var(--dpz-eyebrow-track);
    text-transform:  uppercase;
    opacity:         var(--dpz-eyebrow-opacity);
    margin: 0;
    line-height: 1.3;
}

/* Section header row.
 *   default     items grouped at the start (title + adjacent subtitle)
 *   --split     space-between layout for title-on-left + link-on-right
 *   --rule      underline divider on the row (full-width)
 */
.dpz-section-head {
    display: flex; align-items: baseline;
    gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.dpz-section-head--split { justify-content: space-between; }
.dpz-section-head--rule  { padding-bottom: .65rem; border-bottom: var(--dpz-border); }

/* Section subtitle — sits next to the title with a thin vertical divider so
 * the relationship reads as "<heading>  |  <descriptor>" rather than two
 * disconnected texts floating in the row. */
.dpz-section-sub {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: .85rem;
    font-weight: 500;
    opacity: .55;
    letter-spacing: .01em;
    color: inherit;
    text-decoration: none;
    transition: opacity var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-section-sub::before {
    content: '';
    flex: 0 0 1px;
    width: 1px;
    height: 14px;
    background: currentColor;
    opacity: .3;
}
.dpz-section-sub:hover { opacity: .85; text-decoration: none; }

/* When used inside the --split layout (title-left, link-right), drop the
 * divider — the gap between the two ends is enough visual separation. */
.dpz-section-head--split .dpz-section-sub::before { display: none; }

/* ---- Breadcrumb --------------------------------------------------------- *
 * Inline trail of crumbs separated by chevron glyphs built from a rotated
 * border (no SVG required). Last item is the current page (rendered as
 * <span>, slightly emphasised, no separator after).
 */
.dpz-breadcrumb { font-size: .85rem; }
.dpz-breadcrumb ol {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .5rem;
}
.dpz-breadcrumb li {
    display: inline-flex; align-items: center; gap: .5rem;
    line-height: 1;
}
.dpz-breadcrumb li:not(:last-child)::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-top:   1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .35;
}
.dpz-breadcrumb a {
    color: inherit;
    text-decoration: none;
    opacity: .6;
    transition: opacity var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-breadcrumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.dpz-breadcrumb [aria-current="page"] span {
    font-weight: 500;
    opacity: .85;
    /* Truncate long product names so the trail doesn't blow up on mobile. */
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* ---- 3. Hover lift ------------------------------------------------------ *
 * Subtle Y-translate + shadow upgrade. Apply `.dpz-lift` to any
 * interactive surface (product cards, gauges, etc.).
 */
.dpz-lift {
    transition: transform var(--dpz-dur) var(--dpz-ease),
                box-shadow var(--dpz-dur) var(--dpz-ease),
                filter     var(--dpz-dur) var(--dpz-ease);
}
.dpz-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--dpz-shadow);
}

/* ---- Shop layout (uses .dpz-section--wide for max-width + centering) ----- */
.dpz-shop { display: grid; grid-template-columns: 256px 1fr; gap: 2.25rem; padding: 2rem 1.5rem 4rem; margin: 0 auto; }
@media (max-width: 991px) { .dpz-shop { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.25rem; } }

/* ---- Sidebar -------------------------------------------------------------- */
.dpz-sidebar-col { position: sticky; top: 1.5rem; align-self: start; }
@media (max-width: 991px) { .dpz-sidebar-col { position: static; } }

.dpz-sidebar { padding: 1rem 0; }
.dpz-sidebar + .dpz-sidebar { margin-top: 1.25rem; padding-top: 1.5rem; border-top: var(--dpz-border); }
.dpz-sidebar .dpz-eyebrow { margin-bottom: .85rem; }
.dpz-sidebar ul { list-style: none; padding: 0; margin: 0; }
.dpz-sidebar li a { display: block; padding: .5rem .65rem; text-decoration: none; border-radius: var(--dpz-radius-sm); transition: background var(--dpz-dur-fast) var(--dpz-ease), color var(--dpz-dur-fast) var(--dpz-ease); position: relative; }
.dpz-sidebar li a:hover { background: var(--dpz-fill-soft); }
.dpz-sidebar li a.active { font-weight: 600; background: var(--dpz-fill-medium); }
/* "View more" toggle in the sidebar — pill-shaped button-link with count chip + chevron */
.dpz-side-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .75rem .4rem .9rem;
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    border-radius: var(--dpz-radius-pill);
    background: var(--dpz-fill-soft);
    color: inherit;
    text-decoration: none;
    transition: background var(--dpz-dur-fast) var(--dpz-ease),
                transform  var(--dpz-dur-fast) var(--dpz-ease),
                box-shadow var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-side-more:hover {
    background: var(--dpz-fill-strong);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--dpz-shadow-sm);
}
.dpz-side-more:active { transform: translateY(0); }
.dpz-side-more__label  { opacity: .85; }
.dpz-side-more__count  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: var(--dpz-radius-pill);
    font-size: .68rem;
    font-weight: 700;
    background: var(--dpz-fill-strong);
}
.dpz-side-more__chev   { transition: transform var(--dpz-dur) var(--dpz-ease); opacity: .65; }
.dpz-side-more[aria-expanded="true"] .dpz-side-more__chev { transform: rotate(180deg); }

/* ---- Filter form (sidebar) ----------------------------------------------- */
.dpz-filter-form { padding: 1rem 0; margin-top: 1.25rem; padding-top: 1.5rem; border-top: var(--dpz-border); }
.dpz-filter-group { border: 0; margin: 0 0 1.25rem; padding: 0; }
.dpz-filter-group + .dpz-filter-group { padding-top: 1.25rem; border-top: var(--dpz-border); }
.dpz-filter-group .dpz-eyebrow { margin-bottom: .85rem; }

/* Weight pill grid — a checkbox masquerading as a pill button. The native
 * input is hidden; the visible <span> picks up the checked styling. */
.dpz-weight-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .45rem; }
.dpz-weight-pill { position: relative; margin: 0; cursor: pointer; }
.dpz-weight-pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dpz-weight-pill span {
    display: flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 .5rem;
    font-size: .85rem; font-weight: 600;
    border: 1.5px solid rgba(15,23,42,.12);
    border-radius: var(--dpz-radius-sm);
    background: transparent;
    transition: border-color var(--dpz-dur-fast) var(--dpz-ease), background var(--dpz-dur-fast) var(--dpz-ease), color var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-weight-pill:hover span { border-color: rgba(15,23,42,.3); }
.dpz-weight-pill input:checked + span,
.dpz-weight-pill.is-active span {
    background: rgba(15,23,42,.85); border-color: rgba(15,23,42,.85); color: #fff;
}
.dpz-weight-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(15,23,42,.12); }

/* Custom check / radio rows. We hide the native control and paint our own. */
.dpz-check {
    display: flex; align-items: center; gap: .65rem;
    padding: .35rem .15rem; margin: 0;
    cursor: pointer;
    border-radius: var(--dpz-radius-sm);
    transition: background var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-check:hover { background: var(--dpz-fill-soft); }
.dpz-check input { position: absolute; opacity: 0; pointer-events: none; }
.dpz-check::before {
    content: ''; flex: none;
    width: 16px; height: 16px;
    border: 1.5px solid rgba(15,23,42,.25);
    background: transparent;
    transition: border-color var(--dpz-dur-fast) var(--dpz-ease), background var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-check:has(input[type="checkbox"])::before { border-radius: 4px; }
.dpz-check:has(input[type="radio"])::before    { border-radius: 50%; }
.dpz-check:has(input:checked)::before {
    background: rgba(15,23,42,.85); border-color: rgba(15,23,42,.85);
    box-shadow: inset 0 0 0 3px var(--dpz-host-bg, #fff);
}
.dpz-check:has(input[type="checkbox"]:checked)::before {
    background: rgba(15,23,42,.85); border-color: rgba(15,23,42,.85);
    box-shadow: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 11px;
}
.dpz-check:has(input:focus-visible)::before { box-shadow: 0 0 0 3px rgba(15,23,42,.12); }
.dpz-check-label { flex: 1 1 auto; line-height: 1.3; }
.dpz-check-count { font-size: .75rem; opacity: .55; flex: none; }

/* Range pair inputs (Price block: $min to $max). */
.dpz-range-inputs { display: flex; align-items: flex-end; gap: .5rem; }
.dpz-range-input { flex: 1 1 0; display: flex; flex-direction: column; gap: .25rem; margin: 0; }
.dpz-range-input span { font-size: .7rem; opacity: .55; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.dpz-range-inputs input[type="number"],
.dpz-range-row    input[type="number"] {
    height: 36px; width: 100%; min-width: 0;
    border: 1.5px solid rgba(15,23,42,.12);
    background: transparent; border-radius: var(--dpz-radius-sm);
    padding: 0 .55rem; font-size: .85rem; color: inherit;
    transition: border-color var(--dpz-dur-fast) var(--dpz-ease), background var(--dpz-dur-fast) var(--dpz-ease);
    -moz-appearance: textfield; appearance: textfield;
}
.dpz-range-inputs input[type="number"]:focus,
.dpz-range-row    input[type="number"]:focus {
    outline: none; border-color: rgba(15,23,42,.45); background: var(--dpz-host-bg, #fff);
}
.dpz-range-inputs input[type="number"]::-webkit-outer-spin-button,
.dpz-range-inputs input[type="number"]::-webkit-inner-spin-button,
.dpz-range-row    input[type="number"]::-webkit-outer-spin-button,
.dpz-range-row    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dpz-range-sep { padding-bottom: 8px; opacity: .35; align-self: center; }

/* Single-row potency: TAG  [min] – [max] */
.dpz-range-row { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.dpz-range-row:last-child { margin-bottom: 0; }
.dpz-range-tag { font-size: .72rem; font-weight: 700; opacity: .6; min-width: 32px; }
.dpz-range-row .dpz-range-sep { padding: 0; }

/* Apply / reset row. */
/* Sidebar-only action row: a tight pair of equal-weight buttons. The Apply
 * button overrides Bootstrap's btn-primary chrome to match the sidebar's
 * flatter aesthetic; Reset is a sibling link styled as a quiet button. */
.dpz-filter-actions { display: flex; gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: var(--dpz-border); }
.dpz-filter-actions .dpz-filter-apply,
.dpz-filter-actions .dpz-filter-reset {
    flex: 1 1 0;
    height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .75rem;
    font-size: .82rem; font-weight: 600;
    border-radius: var(--dpz-radius-sm);
    border: 0; cursor: pointer;
    text-decoration: none;
    transition: background var(--dpz-dur-fast) var(--dpz-ease), color var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-filter-actions .dpz-filter-apply {
    background: rgba(15,23,42,.88); color: #fff;
    box-shadow: var(--dpz-shadow-sm);
}
.dpz-filter-actions .dpz-filter-apply:hover { background: rgba(15,23,42,1); color: #fff; }
.dpz-filter-actions .dpz-filter-apply:active { transform: translateY(1px); }
.dpz-filter-actions .dpz-filter-reset {
    flex: 0 0 auto; padding: 0 1rem;
    background: var(--dpz-fill-medium); color: inherit; opacity: .8;
}
.dpz-filter-actions .dpz-filter-reset:hover { background: var(--dpz-fill-strong); opacity: 1; color: inherit; text-decoration: none; }

/* ---- Top bar -------------------------------------------------------------- */
/* Page header (h1-level) — used on listings, cart, hero. */
.dpz-shop-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: var(--dpz-border); margin-bottom: 1.75rem; flex-wrap: wrap; }
.dpz-shop-head h1 { font-size: 1.75rem; margin: 0; line-height: 1.15; letter-spacing: -.01em; font-weight: 700; }
.dpz-shop-head .dpz-shop-sub { font-size: .85rem; margin-top: .25rem; opacity: .65; }
.dpz-shop-head .dpz-shop-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Landing hero — centred call-to-action block. */
.dpz-hero { text-align: center; padding-top: 4rem; padding-bottom: 3rem; }
.dpz-hero-title { font-size: 2.4rem; font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.02em; }
.dpz-hero-sub   { font-size: 1.05rem; opacity: .7; margin: 0 0 1.5rem; }

/* ---- Icon button ---------------------------------------------------------- */
.dpz-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: transparent; border: 0; cursor: pointer; position: relative; color: inherit; opacity: .65; transition: opacity var(--dpz-dur-fast) var(--dpz-ease), background var(--dpz-dur-fast) var(--dpz-ease), transform var(--dpz-dur-fast) var(--dpz-ease); }
.dpz-icon-btn:hover { opacity: 1; background: var(--dpz-fill-medium); }
.dpz-icon-btn:active { transform: scale(.94); }
.dpz-icon-btn.is-active { opacity: 1; background: var(--dpz-fill-strong); }
.dpz-icon-btn .dpz-cart-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--dpz-radius-pill); font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--dpz-host-bg, #fff); }

/* ---- Search input -------------------------------------------------------- */
.dpz-search {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 38px; padding: 0 .35rem 0 .75rem;
    background: var(--dpz-fill-medium); border-radius: 10px;
    flex: 1 1 220px; min-width: 180px; max-width: 320px;
    transition: background var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-search:focus-within { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(15,23,42,.18); }
.dpz-search > svg { flex: none; opacity: .55; }
.dpz-search input[type="search"] {
    flex: 1 1 auto; min-width: 0; height: 100%;
    border: 0; background: transparent; outline: none;
    color: inherit; font-size: .9rem; padding: 0 .25rem;
}
.dpz-search input[type="search"]::-webkit-search-cancel-button,
.dpz-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.dpz-search-clear {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit; opacity: .55; text-decoration: none;
    transition: opacity var(--dpz-dur-fast) var(--dpz-ease), background var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-search-clear:hover { opacity: 1; background: var(--dpz-fill-strong); color: inherit; text-decoration: none; }

/* Pill-styled select — visually paired with .dpz-search. Wrap a native
 * <select> inside a <span class="dpz-select"> so we can paint the chevron
 * and outline without touching the form-control rules from the host theme. */
.dpz-select {
    position: relative; display: inline-flex; align-items: center;
    height: 38px;
    background: var(--dpz-fill-medium); border-radius: 10px;
    transition: background var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-select:hover { background: var(--dpz-fill-strong); }
.dpz-select:focus-within { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(15,23,42,.18); }
.dpz-select select {
    height: 100%;
    padding: 0 2.25rem 0 .85rem;
    background: transparent; border: 0; outline: none; box-shadow: none;
    font-size: .9rem; color: inherit; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.dpz-select::after {
    content: ''; position: absolute; right: .85rem; top: 50%;
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .55; pointer-events: none;
}

/* ---- Product grid + cards ------------------------------------------------- */
.dpz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }

/* List view — horizontal card with media | body | actions columns.
 * `display: contents` on the link lets media + body land directly in the
 * card grid alongside the (sibling) footer, without any markup changes. */
.dpz-grid.is-list { grid-template-columns: 1fr; gap: .85rem; }
.dpz-grid.is-list .card {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: stretch;
}
.dpz-grid.is-list .dpz-card-link    { display: contents; }
.dpz-grid.is-list .dpz-card-media   { aspect-ratio: auto; height: 100%; min-height: 170px; }
.dpz-grid.is-list .dpz-card-body    {
    padding: 1.1rem 1.5rem;
    display: flex; flex-direction: column;
    gap: .35rem; justify-content: center;
}
.dpz-grid.is-list .dpz-card-name    { order: 1; font-size: 1.05rem; margin: 0; -webkit-line-clamp: 1; line-clamp: 1; }
.dpz-grid.is-list .dpz-card-meta    { order: 2; flex-direction: row; flex-wrap: wrap; gap: .15rem .85rem; }
.dpz-grid.is-list .dpz-card-potency { order: 3; margin-top: .15rem; padding-top: .35rem; border-top: 0; }
.dpz-grid.is-list .dpz-card-prices  { order: 4; margin-top: .35rem; }
.dpz-grid.is-list .card-footer      {
    align-self: center;
    padding: 1rem 1.25rem;
    background: transparent; border: 0;
}
.dpz-grid.is-list .card-footer .dpz-add { min-width: 150px; }
.dpz-grid.is-list .dpz-card-discount { top: .65rem; right: .65rem; }

@media (max-width: 640px) {
    .dpz-grid.is-list .card { grid-template-columns: 1fr; }
    .dpz-grid.is-list .dpz-card-media { aspect-ratio: 16 / 10; min-height: 0; }
    .dpz-grid.is-list .dpz-card-body  { padding: 1rem 1.1rem .25rem; }
    .dpz-grid.is-list .card-footer    { padding: .25rem 1.1rem 1.1rem; align-self: stretch; }
    .dpz-grid.is-list .card-footer .dpz-add { width: 100%; }
}

/* Add-to-cart busy state — JS adds .is-busy + disabled while the AJAX
 * round-trips, preventing spam clicks. The label is made transparent so
 * the button keeps its width (no layout shift), and an absolutely-
 * positioned spinner is overlaid via ::after. The spinner border colour
 * defaults to white because the standard ".btn .btn-primary" combo has
 * a dark background — themes can override by setting `--dpz-busy-color`
 * on the button. */
.dpz-add { position: relative; transition: opacity .15s ease; }
.dpz-add.is-busy {
    --dpz-busy-color: #fff;
    color: transparent !important;
    cursor: progress;
    pointer-events: none;
}
.dpz-add.is-busy::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 1.1em; height: 1.1em;
    margin: -.55em 0 0 -.55em;
    border: 2px solid var(--dpz-busy-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dpz-spin .6s linear infinite;
}

/* Card: visual chrome only — transition + hover are shared via .dpz-lift. */
.dpz-grid .card { border: var(--dpz-border); border-radius: var(--dpz-radius); overflow: hidden; box-shadow: var(--dpz-shadow-sm); }

.dpz-card-link { color: inherit; text-decoration: none; display: block; }
.dpz-card-link:hover { color: inherit; text-decoration: none; }
.dpz-card-link:hover .dpz-card-media img { transform: scale(1.04); }

.dpz-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%); }
.dpz-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--dpz-ease); }
.dpz-card-discount { position: absolute; top: .75rem; right: .75rem; font-size: .68rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; box-shadow: var(--dpz-shadow); letter-spacing: .03em; }

/* Featured badge — pinned to the media's top-left, paired with a star glyph.
 * The card itself also gets a soft outer ring via .dpz-card--featured. */
.dpz-card-featured-badge {
    position: absolute; top: .75rem; left: .75rem;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .6rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    border-radius: var(--dpz-radius-pill);
    box-shadow: var(--dpz-shadow-sm);
    z-index: 1;
}
.dpz-card-featured-badge svg { flex: none; }
.dpz-card--featured { box-shadow: var(--dpz-shadow), 0 0 0 1px rgba(245, 158, 11, .35); }

.dpz-card-body { padding: 1rem 1.1rem .85rem; }
.dpz-card-prices { display: flex; align-items: baseline; gap: .5rem; }
.dpz-card-price-was { font-size: .85rem; text-decoration: line-through; opacity: .5; }
.dpz-card-name { font-size: .95rem; font-weight: 600; line-height: 1.35; margin: .35rem 0 .25rem; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dpz-card-meta { font-size: .8rem; opacity: .7; display: flex; flex-direction: column; gap: .15rem; line-height: 1.4; }
.dpz-card-potency { display: flex; gap: .85rem; font-size: .75rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed rgba(15,23,42,.08); opacity: .8; font-weight: 500; }

.card-footer { padding: 0 1.1rem 1.1rem; }

/* ---- Pagination ----------------------------------------------------------- */
.dpz-pagination { display: flex; gap: .35rem; justify-content: center; padding: 2.5rem 0 .5rem; flex-wrap: wrap; }
.dpz-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .85rem; border-radius: var(--dpz-radius-sm); text-decoration: none; font-weight: 500; font-size: .9rem; transition: background var(--dpz-dur-fast) var(--dpz-ease); }
.dpz-pagination a:hover { background: var(--dpz-fill-medium); text-decoration: none; }
.dpz-pagination a.is-active { background: rgba(15,23,42,.85); color: #fff; pointer-events: none; }

/* ---- Empty state ---------------------------------------------------------- */
.dpz-empty { padding: 4rem 1.5rem; text-align: center; opacity: .85; }
.dpz-empty p { font-size: 1.05rem; margin-bottom: 1rem; }

/* ---- Product detail ------------------------------------------------------- */
/* PDP grid layout — sizing/centering inherited from .dpz-section. */
.dpz-pdp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
.dpz-pdp > .dpz-breadcrumb { grid-column: 1 / -1; margin-bottom: -1rem; }
@media (max-width: 767px) { .dpz-pdp { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.25rem; } }
.dpz-pdp-media { border-radius: var(--dpz-radius); aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%); box-shadow: var(--dpz-shadow); }
.dpz-pdp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--dpz-ease); }
.dpz-pdp-media:hover img { transform: scale(1.03); }

.dpz-pdp-info h1 { font-size: 1.85rem; margin: 0 0 .35rem; line-height: 1.15; letter-spacing: -.015em; font-weight: 700; }
.dpz-pdp-meta { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.25rem; display: flex; gap: .85rem; align-items: center; flex-wrap: wrap; opacity: .65; font-weight: 600; }
.dpz-pdp-meta a { color: inherit; text-decoration: none; transition: opacity var(--dpz-dur-fast); }
.dpz-pdp-meta a:hover { opacity: 1; }
.dpz-pdp-meta .dpz-pdp-sep { opacity: .35; }

.dpz-pdp-prices { display: flex; align-items: baseline; gap: .65rem; margin-bottom: 1.5rem; }
.dpz-pdp-price { font-size: 1.85rem; font-weight: 800; letter-spacing: -.01em; }
.dpz-pdp-price-was { font-size: 1.05rem; text-decoration: line-through; opacity: .5; }

/* ---- Qty stepper (shared on PDP + cart drawer) ---------------------------- */
.dpz-qty-stepper { display: inline-flex; align-items: center; border: var(--dpz-border); border-radius: 999px; background: rgba(15,23,42,.02); transition: border-color var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease); }
.dpz-qty-stepper:focus-within { box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
.dpz-qty-stepper button { width: 36px; height: 36px; background: transparent; border: 0; cursor: pointer; font-size: 1rem; color: inherit; opacity: .7; border-radius: 999px; transition: opacity var(--dpz-dur-fast), background var(--dpz-dur-fast); }
.dpz-qty-stepper button:hover { opacity: 1; background: rgba(15,23,42,.05); }
.dpz-qty-stepper input { width: 44px; text-align: center; background: transparent; border: 0; -moz-appearance: textfield; appearance: textfield; color: inherit; font-weight: 600; }
.dpz-qty-stepper input::-webkit-outer-spin-button,
.dpz-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dpz-qty-stepper input:focus { outline: none; }

.dpz-pdp-buy { display: flex; gap: .65rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }

.dpz-pdp-variants { margin-bottom: 1.5rem; }
.dpz-pdp-variants-label { font-size: .72rem; opacity: .65; margin-bottom: .55rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.dpz-pdp-variant-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Variant pill sizing only — round shape + hover lift come from .dpz-pill. */
.dpz-pdp-variant-pills .btn { padding: .4rem 1rem; font-size: .85rem; font-weight: 500; }

.dpz-pdp-desc { font-size: .95rem; line-height: 1.65; margin-bottom: .75rem; max-height: 4.95em; overflow: hidden; opacity: .85; transition: max-height var(--dpz-dur) var(--dpz-ease); }
.dpz-pdp-desc.is-expanded { max-height: 100em; }
.dpz-pdp-readmore { font-size: .85rem; font-weight: 600; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; opacity: .7; text-decoration: underline; text-underline-offset: 3px; }
.dpz-pdp-readmore:hover { opacity: 1; }

/* ---- Specifications gauges ------------------------------------------------ */
/* PDP specs container/title/subtitle all inherit from the shared section
 * patterns — apply .dpz-section .dpz-section--bordered + .dpz-section-head +
 * .dpz-section-title + .dpz-section-sub in the markup. */

.dpz-gauges {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.dpz-gauge {
    position: relative;
    margin: 0;
    width: 180px; height: 180px;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--dpz-dur) var(--dpz-ease),
                filter    var(--dpz-dur) var(--dpz-ease);

    /* Per-kind tokens (overridden below). 2πr = 276.46 for r=44. */
    --dpz-gauge-color:   currentColor;
    --dpz-gauge-color-2: currentColor;
    --dpz-gauge-track:   rgba(15,23,42,.05);
    --dpz-gauge-glow:    rgba(15,23,42,.10);
    --dpz-gauge-circ:    276.46;
    filter: drop-shadow(0 6px 20px var(--dpz-gauge-glow));
}
.dpz-gauge:hover {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 12px 28px var(--dpz-gauge-glow)) brightness(1.04);
}

/* SVG ring */
.dpz-gauge__svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; display: block; }
.dpz-gauge__track,
.dpz-gauge__fill { fill: none; stroke-width: 9; cx: 50; cy: 50; r: 44; transform-origin: 50% 50%; }
.dpz-gauge__track { stroke: var(--dpz-gauge-track); }
.dpz-gauge__fill {
    stroke-linecap: round;
    stroke-dasharray:  var(--dpz-gauge-circ);
    stroke-dashoffset: var(--dpz-gauge-circ);
    animation: dpz-gauge-draw 1.4s var(--dpz-ease) .2s forwards;
}
@keyframes dpz-gauge-draw {
    to { stroke-dashoffset: calc(var(--dpz-gauge-circ) - (var(--dpz-gauge-circ) * var(--dpz-pct, 0) / 100)); }
}

/* Glass-morphism centre disc — radial highlight in the upper-left for depth */
.dpz-gauge__inner {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
        var(--dpz-host-bg, #fff);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.7),
        inset 0 -1px 2px rgba(15,23,42,.04),
        0 1px 2px rgba(15,23,42,.04);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none;
}
.dpz-gauge__pct {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
    background: linear-gradient(135deg, var(--dpz-gauge-color), var(--dpz-gauge-color-2));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.dpz-gauge__pct sup {
    font-size: .55em;
    font-weight: 700;
    margin-left: .08em;
    /* Keep the % sign in the gradient color too */
    background: inherit;
    -webkit-background-clip: text;
            background-clip: text;
    vertical-align: top;
    top: 0;
}
.dpz-gauge__label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-weight: 700;
    margin-top: .55rem;
    color: var(--dpz-gauge-color-2);
    opacity: .85;
}

/* Per-kind palette — gradient stops drive both stroke and centre numerals */
.dpz-gauge[data-kind="thc"] {
    --dpz-gauge-color:   #fbbf24;
    --dpz-gauge-color-2: #f97316;
    --dpz-gauge-glow:    rgba(249,115,22,.22);
}
.dpz-gauge[data-kind="cbd"] {
    --dpz-gauge-color:   #22d3ee;
    --dpz-gauge-color-2: #0891b2;
    --dpz-gauge-glow:    rgba(8,145,178,.22);
}
.dpz-gauge[data-kind="cbn"] {
    --dpz-gauge-color:   #a78bfa;
    --dpz-gauge-color-2: #7c3aed;
    --dpz-gauge-glow:    rgba(124,58,237,.22);
}
.dpz-gauge[data-kind="cbg"] {
    --dpz-gauge-color:   #34d399;
    --dpz-gauge-color-2: #059669;
    --dpz-gauge-glow:    rgba(5,150,105,.22);
}

/* Reduced motion — skip the draw + counter, jump to final value */
@media (prefers-reduced-motion: reduce) {
    .dpz-gauge { transition: none; }
    .dpz-gauge__fill {
        animation: none;
        stroke-dashoffset: calc(var(--dpz-gauge-circ) - (var(--dpz-gauge-circ) * var(--dpz-pct, 0) / 100));
    }
}

/* ---- Similar products ----------------------------------------------------- */
/* Container sizing from .dpz-section; titles use .dpz-section-title--rule. */
.dpz-similar { padding-top: 1.5rem; padding-bottom: 4rem; }

/* ---- Cart drawer (cart-specific tweaks) ----------------------------------- *
 * Structural drawer styling lives in defaults/sgen/assets/css/sg-drawer.css.
 * This block only adds the cart's own bits on top of the shared drawer. */
.dpz-cart-drawer .dpz-cart-count { font-weight: 400; opacity: .55; font-size: .85rem; }
.dpz-drawer-total { display: flex; justify-content: space-between; align-items: center; padding-bottom: .25rem; }

/* Cart context block — dispensary picker + pickup/delivery + rec/med toggles.
 * Sits between the head and body of the cart drawer. */
.dpz-cart-context { padding: .85rem 1.5rem 1rem; display: flex; flex-direction: column; gap: .65rem; border-bottom: var(--dpz-border); }

/* Dispensary picker — uses the native <details>/<summary> disclosure. */
.dpz-disp-picker { position: relative; }
.dpz-disp-picker > summary { list-style: none; cursor: pointer; }
.dpz-disp-picker > summary::-webkit-details-marker { display: none; }
.dpz-disp-picker__btn {
    display: flex; align-items: center; justify-content: space-between; gap: .65rem;
    height: 42px; padding: 0 1rem;
    background: var(--dpz-fill-medium);
    border-radius: var(--dpz-radius-sm);
    font-size: .9rem; font-weight: 600;
    color: inherit;
    transition: background var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-disp-picker > summary:hover .dpz-disp-picker__btn { background: var(--dpz-fill-strong); }
.dpz-disp-picker__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpz-disp-picker__chev { flex: none; opacity: .6; transition: transform var(--dpz-dur-fast) var(--dpz-ease); }
.dpz-disp-picker[open] .dpz-disp-picker__chev { transform: rotate(180deg); }
.dpz-disp-picker--single .dpz-disp-picker__btn { cursor: default; }
.dpz-disp-picker--single .dpz-disp-picker__btn:hover { background: var(--dpz-fill-medium); }

.dpz-disp-picker__list {
    list-style: none; padding: .35rem; margin: .35rem 0 0;
    background: #fff;
    border: var(--dpz-border);
    border-radius: var(--dpz-radius-sm);
    box-shadow: var(--dpz-shadow);
    max-height: 240px; overflow-y: auto;
}
.dpz-disp-picker__item {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    width: 100%; padding: .55rem .75rem;
    background: transparent; border: 0; border-radius: var(--dpz-radius-sm);
    color: inherit; font-size: .88rem; text-align: left; cursor: pointer;
    text-decoration: none;
    transition: background var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-disp-picker__item small { font-size: .72rem; opacity: .55; }
.dpz-disp-picker__item:hover { background: var(--dpz-fill-soft); color: inherit; text-decoration: none; }
.dpz-disp-picker__item.is-active { background: var(--dpz-fill-medium); font-weight: 600; }

/* Pill button group — equal-width segmented control used by both
 * Pickup/Delivery and Recreational/Medical. */
.dpz-pillgroup { display: flex; gap: .35rem; }
.dpz-pillgroup__btn {
    flex: 1 1 0;
    height: 38px; padding: 0 .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--dpz-fill-medium); color: inherit;
    border: 0; border-radius: var(--dpz-radius-sm);
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dpz-dur-fast) var(--dpz-ease), color var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-pillgroup__btn:hover { background: var(--dpz-fill-strong); }
.dpz-pillgroup__btn.is-active {
    background: rgba(15,23,42,.88); color: #fff;
    box-shadow: var(--dpz-shadow-sm);
}
.dpz-pillgroup__btn.is-active:hover { background: rgba(15,23,42,1); }
.dpz-pillgroup__btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---- Cart line ------------------------------------------------------------ */
/* Cart page foot reuses the drawer's footer styling — just give it a top border. */
.dpz-cart-foot { border-top: var(--dpz-border); }

.dpz-cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: var(--dpz-border); align-items: center; }
.dpz-cart-line:last-child { border-bottom: 0; }
.dpz-cart-line-img { width: 64px; height: 64px; border-radius: 10px; background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%); object-fit: cover; }
.dpz-cart-line-name { font-size: .9rem; font-weight: 600; line-height: 1.35; margin: 0 0 .35rem; letter-spacing: -.005em; }
.dpz-cart-line-meta { font-size: .8rem; display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.dpz-cart-line-price { text-align: right; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }

/* ---- Cart page ------------------------------------------------------------ *
 * Two-column layout: scrollable item list on the left, sticky order-summary
 * card on the right. Collapses to a single column under 900px. */
.dpz-cart-page { max-width: 1180px; }
.dpz-cart-head { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: var(--dpz-border); }
.dpz-cart-head h1 { font-size: 1.75rem; margin: 0; line-height: 1.15; letter-spacing: -.01em; font-weight: 700; }
.dpz-cart-sub { font-size: .9rem; opacity: .65; margin: .25rem 0 0; }

.dpz-cart-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .dpz-cart-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

.dpz-cart-items { background: #fff; border: var(--dpz-border); border-radius: var(--dpz-radius); padding: 0 1.5rem; }
.dpz-cart-items .dpz-cart-line { padding: 1.25rem 0; }
.dpz-cart-line-unit { font-size: .8rem; margin: 0 0 .5rem; opacity: .65; }
.dpz-cart-line-remove {
    background: transparent; border: 0; padding: 0;
    color: inherit; opacity: .55; cursor: pointer;
    font-size: .8rem; font-weight: 500;
    transition: opacity var(--dpz-dur-fast) var(--dpz-ease), color var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-cart-line-remove:hover { opacity: 1; color: #b91c1c; }

.dpz-cart-back {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: 1.25rem; padding: .25rem 0;
    color: inherit; opacity: .65; text-decoration: none;
    font-size: .9rem; font-weight: 500;
    transition: opacity var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-cart-back:hover { opacity: 1; color: inherit; text-decoration: none; }

/* Sticky order summary card. */
.dpz-cart-summary {
    position: sticky; top: 1.5rem;
    background: var(--dpz-fill-soft);
    border-radius: var(--dpz-radius);
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
}
@media (max-width: 900px) { .dpz-cart-summary { position: static; } }

.dpz-cart-summary-title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .25rem; }
.dpz-cart-summary-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.dpz-cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; }
.dpz-cart-summary-row dt { font-size: .85rem; opacity: .7; font-weight: 500; margin: 0; }
.dpz-cart-summary-row dd { font-size: .9rem; margin: 0; font-weight: 600; text-align: right; }
.dpz-cart-summary-row .text-muted { font-weight: 400; font-style: italic; opacity: .55; }

.dpz-cart-summary-total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding-top: 1rem; border-top: var(--dpz-border);
    font-size: .95rem;
}
.dpz-cart-summary-total strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; }

.dpz-cart-checkout {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 48px; padding: 0 1.25rem;
    background: rgba(15,23,42,.92); color: #fff;
    border-radius: var(--dpz-radius-sm);
    font-size: .95rem; font-weight: 700; letter-spacing: .01em;
    text-decoration: none;
    box-shadow: var(--dpz-shadow-sm);
    transition: background var(--dpz-dur-fast) var(--dpz-ease), transform var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-cart-checkout:hover { background: #000; color: #fff; text-decoration: none; }
.dpz-cart-checkout:active { transform: translateY(1px); }
.dpz-cart-checkout svg { transition: transform var(--dpz-dur-fast) var(--dpz-ease); }
.dpz-cart-checkout:hover svg { transform: translateX(2px); }

.dpz-cart-summary-note { font-size: .75rem; opacity: .55; margin: 0; line-height: 1.5; }

/* ---- Maintenance splash --------------------------------------------------- */
.dpz-maintenance { padding: 5rem 2rem; text-align: center; }
.dpz-maintenance h1 { font-size: 1.6rem; margin: 0 0 .75rem; letter-spacing: -.01em; font-weight: 700; }
.dpz-maintenance-message { font-size: 1rem; opacity: .7; margin: 0 auto; max-width: 36ch; line-height: 1.5; }
.dpz-maintenance-icon { display: inline-flex; opacity: .4; margin-bottom: 1.25rem; }

/* ---- Maintenance bypass banner -------------------------------------------- *
 * Pinned at the top of every public dispenza page when the session has the
 * bypass flag active, so admins can see they're in preview mode. */
.dpz-bypass-bar {
    position: sticky; top: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding: .5rem 1rem;
    background: #fef3c7; color: #78350f;
    font-size: .85rem; font-weight: 500;
    border-bottom: 1px solid #fde68a;
}
.dpz-bypass-bar a { color: #78350f; text-decoration: underline; font-weight: 700; }
.dpz-bypass-bar a:hover { color: #422006; }

/* ---- Checkout loading ----------------------------------------------------- */
/* Checkout loading — sizing from .dpz-section; centred + spacious vertically. */
.dpz-checkout-loading      { padding: 5rem 2rem; text-align: center; }
.dpz-checkout-loading h1   { font-size: 1.4rem; margin-bottom: .5rem; letter-spacing: -.01em; }
.dpz-checkout-loading .dpz-spinner { width: 44px; height: 44px; border: 3px solid var(--dpz-fill-strong); border-top-color: currentColor; border-radius: 50%; animation: dpz-spin 1s linear infinite; margin: 0 auto 1.5rem; }
@keyframes dpz-spin { to { transform: rotate(360deg); } }

/* ---- Page entrance animation --------------------------------------------- */
.dpz-shop > main, .dpz-pdp, .dpz-cart-page, .dpz-similar { animation: dpz-fade-up .4s var(--dpz-ease) both; }
@keyframes dpz-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Stagger card entrance for a subtle "loaded" feel */
.dpz-grid > * { animation: dpz-fade-up .35s var(--dpz-ease) both; }
.dpz-grid > *:nth-child(1)  { animation-delay: .02s; }
.dpz-grid > *:nth-child(2)  { animation-delay: .04s; }
.dpz-grid > *:nth-child(3)  { animation-delay: .06s; }
.dpz-grid > *:nth-child(4)  { animation-delay: .08s; }
.dpz-grid > *:nth-child(5)  { animation-delay: .10s; }
.dpz-grid > *:nth-child(6)  { animation-delay: .12s; }
.dpz-grid > *:nth-child(7)  { animation-delay: .14s; }
.dpz-grid > *:nth-child(8)  { animation-delay: .16s; }
.dpz-grid > *:nth-child(n+9){ animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    .dpz, .dpz *, .dpz *::before, .dpz *::after { animation: none !important; transition: none !important; }
    .dpz-grid > * { animation: none !important; }
}

/* ---- SGBuilder components ------------------------------------------------- *
 * Used when the dispenza-* components are dropped into a SGBuilder page.
 * Each render template emits its block with one of these classes; the host
 * page provides the page-level chrome. */

.dpz-builder-empty {
    padding: 2rem 1.5rem; text-align: center;
    border: 1px dashed rgba(15,23,42,.2); border-radius: var(--dpz-radius);
    color: rgba(15,23,42,.55); font-size: .9rem;
}

/* Location selector — three layout variants. The host wraps with .dpz so
 * the local tokens cascade in. */
.dpz-sgb-locations              { display: grid; gap: 1rem; }
.dpz-sgb-locations--list        { grid-template-columns: 1fr; gap: .65rem; }
.dpz-sgb-locations--inline      { grid-template-columns: none; display: flex; flex-wrap: wrap; gap: .5rem; }

.dpz-loc-item {
    display: flex; flex-direction: column; gap: .15rem;
    padding: 1rem 1.25rem;
    background: var(--dpz-fill-soft); border-radius: var(--dpz-radius);
    color: inherit; text-decoration: none;
    transition: background var(--dpz-dur-fast) var(--dpz-ease), transform var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-loc-item:hover { background: var(--dpz-fill-medium); text-decoration: none; color: inherit; transform: translateY(-1px); box-shadow: var(--dpz-shadow-sm); }
.dpz-loc-item.is-active {
    background: rgba(15,23,42,.88); color: #fff;
    box-shadow: var(--dpz-shadow);
}
.dpz-loc-item.is-active:hover { background: rgba(15,23,42,1); color: #fff; }
.dpz-loc-item__name { font-weight: 700; font-size: .95rem; letter-spacing: -.005em; }
.dpz-loc-item__city { font-size: .8rem; opacity: .7; }
.dpz-loc-item.is-active .dpz-loc-item__city { opacity: .85; }
.dpz-loc-item__addr { font-size: .72rem; opacity: .55; margin-top: .25rem; }

.dpz-sgb-locations--inline .dpz-loc-item {
    flex-direction: row; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: var(--dpz-radius-pill); font-size: .85rem;
}
.dpz-sgb-locations--inline .dpz-loc-item__addr,
.dpz-sgb-locations--inline .dpz-loc-item__city { display: none; }

/* Locations tile grid (storefront /locations page). */
.dpz-loc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dpz-loc-tile {
    position: relative; display: flex; flex-direction: column; gap: .35rem;
    padding: 1.25rem 1.4rem 1.1rem;
    background: var(--dpz-fill-soft); border: 1px solid var(--dpz-border-color, #e5e7eb);
    border-radius: var(--dpz-radius);
    color: inherit; text-decoration: none;
    transition: background var(--dpz-dur-fast) var(--dpz-ease), transform var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease), border-color var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-loc-tile:hover {
    background: var(--dpz-fill-medium); transform: translateY(-2px);
    box-shadow: var(--dpz-shadow-sm); text-decoration: none; color: inherit;
}
.dpz-loc-tile.is-active   { border-color: var(--dpz-primary, #047857); background: var(--dpz-fill-medium); }
.dpz-loc-tile.is-maint    { background: #fffbeb; border-color: #fde68a; }
.dpz-loc-tile.is-maint:hover { background: #fef3c7; }
.dpz-loc-tile__head  { display: flex; justify-content: space-between; align-items: flex-start; gap: .65rem; }
.dpz-loc-tile__name  { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.25; letter-spacing: -.005em; }
.dpz-loc-tile__addr  { font-size: .85rem; line-height: 1.4; margin: 0; opacity: .8; }
.dpz-loc-tile__phone { font-size: .8rem; margin: 0; opacity: .65; }
.dpz-loc-tile__cta   { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; font-size: .85rem; margin-top: .65rem; color: var(--dpz-primary, #047857); }
.dpz-loc-tile__pill {
    display: inline-flex; align-items: center; flex-shrink: 0;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .55rem; border-radius: var(--dpz-radius-pill);
    background: var(--dpz-fill-medium); color: inherit;
}
.dpz-loc-tile__pill.is-active { background: var(--dpz-primary, #047857); color: #fff; }
.dpz-loc-tile__pill.is-maint  { background: #fde68a; color: #92400e; }

/* Maintenance splash CTA. */
.dpz-maintenance-actions { margin-top: 1.5rem; display: flex; justify-content: center; gap: .65rem; flex-wrap: wrap; }

/* Categories tile grid. */
.dpz-sgb-categories { display: grid; gap: .85rem; }
.dpz-cat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; min-height: 96px; padding: 1rem 1.25rem;
    background: var(--dpz-fill-soft); border-radius: var(--dpz-radius);
    color: inherit; text-decoration: none; text-align: center;
    transition: background var(--dpz-dur-fast) var(--dpz-ease), transform var(--dpz-dur-fast) var(--dpz-ease), box-shadow var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-cat-tile:hover { background: var(--dpz-fill-medium); transform: translateY(-2px); box-shadow: var(--dpz-shadow-sm); text-decoration: none; color: inherit; }
.dpz-cat-tile__name  { font-weight: 700; font-size: .95rem; letter-spacing: -.005em; }
.dpz-cat-tile__count { font-size: .72rem; opacity: .55; }

/* Builder-side products wrapper — Grid + Carousel via the gallery-config
 * trait (same as the built-in Cards component). Column count comes from
 * --dpz-cols (set by the render template); Carousel hands its slide sizing
 * to SGCarousel (Swiper) via data-carousel-options. */
.dpz-sgb-products--grid > .dpz-grid {
    grid-template-columns: repeat(var(--dpz-cols, 4), 1fr);
}
.dpz-sgb-products--carousel .dpz-products-carousel { padding-bottom: .5rem; }

/* Cart button. */
.dpz-sgb-cart {
    position: relative; display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .85rem;
    background: rgba(15,23,42,.88); color: #fff;
    border-radius: var(--dpz-radius-sm);
    font-size: .85rem; font-weight: 600;
    text-decoration: none;
    transition: background var(--dpz-dur-fast) var(--dpz-ease);
}
.dpz-sgb-cart:hover { background: rgba(15,23,42,1); color: #fff; text-decoration: none; }
.dpz-sgb-cart--icon { padding: .5rem; }
.dpz-sgb-cart__count {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #ef4444; color: #fff;
    border-radius: var(--dpz-radius-pill);
    font-size: .65rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--dpz-host-bg, #fff);
}

/* ---- Utility -------------------------------------------------------------- */
.dpz-hidden { display: none !important; }