/* ==========================================================================
   La Mota Shop — GrowFlow-inspired storefront
   ========================================================================== */

:root {
    --lmgf-teal: #1abcba;
    --lmgf-teal-dark: #16a5a3;
    --lmgf-text: #f5f5f5;
    --lmgf-text-soft: #bbbbbb;
    --lmgf-text-mute: #888888;
    --lmgf-border: #2e2e2e;
    --lmgf-border-strong: #3d3d3d;
    --lmgf-bg: #191919;
    --lmgf-bg-soft: #232323;
    --lmgf-bg-card: #1f1f1f;
    --lmgf-radius: 12px;
    --lmgf-radius-sm: 8px;
    --lmgf-shadow: 0 1px 3px rgba(0,0,0,.4);
    --lmgf-shadow-hover: 0 6px 18px rgba(0,0,0,.5);

    /* Strain type brand colors */
    --lmgf-indica: #a484c2;
    --lmgf-sativa: #ff66c4;
    --lmgf-hybrid: #63c8cd;
    --lmgf-cbd:    #4a96c8;
}

.lmgf-shop, .lmgf-shop * { box-sizing: border-box; }

.lmgf-shop {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    color: var(--lmgf-text);
    font-family: inherit;
}

/* ---------- Top bar (search + sort) ---------- */
.lmgf-shop-topbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}
.lmgf-shop-search {
    flex: 1;
    min-width: 0;
}
.lmgf-shop-search-input {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid var(--lmgf-border);
    border-radius: 999px;
    font-size: 15px;
    outline: none;
    background: var(--lmgf-bg);
    color: var(--lmgf-text);
    transition: border-color .15s;
    font-family: inherit;
}
.lmgf-shop-search-input::placeholder { color: var(--lmgf-text-mute); }
.lmgf-shop-search-input:focus { border-color: var(--lmgf-teal); }
.lmgf-shop-sort-select {
    padding: 12px 44px 12px 22px;
    border: 2px solid var(--lmgf-border);
    border-radius: 999px;
    font-size: 14px;
    min-width: 200px;
    height: auto;
    line-height: 1.4;
    background: var(--lmgf-bg);
    color: var(--lmgf-text);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23f5f5f5' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    font-family: inherit;
    box-sizing: border-box;
    text-indent: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.lmgf-shop-sort-select:hover { border-color: var(--lmgf-teal); }
.lmgf-shop-sort-select option {
    background: var(--lmgf-bg);
    color: var(--lmgf-text);
    padding: 8px;
}

/* ---------- Layout ----------
 * v0.10.72: align-items defaults to `stretch` (no longer `start`) so the
 * sidebar column extends to the height of the products grid sibling.
 * The sidebar's inner box is then sticky-positioned within that tall
 * column. See .lmgf-sidebar-content below.
 */
.lmgf-shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
}

/* v0.10.77: archive header on category/brand pages where we override
 * the default WC archive template. Sits above the [lmgf_shop] output. */
.lmgf-archive-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 16px;
}
.lmgf-archive-header {
    margin-bottom: 18px;
}
.lmgf-archive-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--lmgf-text);
    margin: 0 0 6px;
    line-height: 1.2;
}
.lmgf-archive-desc {
    color: var(--lmgf-text-mute);
    font-size: 14px;
    line-height: 1.5;
    max-width: 720px;
}
.lmgf-archive-desc p:last-child { margin-bottom: 0; }

/* ---------- Sidebar ----------
 * v0.10.76: sidebar matches its content height (filters), not the
 * products grid height. Cuts off cleanly below the brand list.
 *
 * align-self: start overrides the parent grid's stretch so the
 * column collapses to content height. Brands list inside still
 * scrolls internally (see .lmgf-filter-brands further down).
 *
 * Filter content scrolls naturally with the page (no sticky), as
 * before. When you scroll past all filters, only products remain
 * on the right.
 */
.lmgf-shop-sidebar {
    position: relative;
    background: var(--lmgf-bg-soft);
    border: 1px solid var(--lmgf-border);
    border-radius: var(--lmgf-radius);
    align-self: start; /* don't stretch to products grid height */
}
.lmgf-sidebar-content {
    padding: 4px 16px 16px;
}
.lmgf-sidebar-mobile-toggle {
    display: none;
    width: 100%;
    padding: 12px;
    background: var(--lmgf-teal);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    font-family: inherit;
}

.lmgf-filter-group {
    border-bottom: 1px solid var(--lmgf-border);
    padding: 14px 0;
}
.lmgf-filter-group:last-of-type { border-bottom: none; }
.lmgf-filter-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--lmgf-text-soft);
    margin: 0 0 10px;
    font-weight: 700;
}
.lmgf-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lmgf-filter-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
}
.lmgf-filter-list input[type="checkbox"] {
    margin: 0;
    accent-color: var(--lmgf-teal);
}
.lmgf-facet-count {
    color: var(--lmgf-text-mute);
    font-size: 12px;
    margin-left: auto;
}

/* Pills (cannabis type, weight) */
.lmgf-filter-pills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 6px;
}
.lmgf-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    min-width: 70px;
    border: 1.5px solid var(--lmgf-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
    background: transparent;
    line-height: 1.2;
}
.lmgf-pill:hover {
    border-color: var(--lmgf-teal);
    color: var(--lmgf-teal);
}
.lmgf-pill input { display: none; }
.lmgf-pill:has(input:checked) {
    background: var(--lmgf-teal);
    border-color: var(--lmgf-teal);
    color: #fff;
}
/* Type-specific pill colors — outline shows brand color, filled when checked uses white text */
.lmgf-pill-indica { color: var(--lmgf-indica); border-color: var(--lmgf-indica); }
.lmgf-pill-sativa { color: var(--lmgf-sativa); border-color: var(--lmgf-sativa); }
.lmgf-pill-hybrid { color: var(--lmgf-hybrid); border-color: var(--lmgf-hybrid); }
.lmgf-pill-indica:hover, .lmgf-pill-sativa:hover, .lmgf-pill-hybrid:hover {
    border-color: var(--lmgf-teal);
    color: var(--lmgf-teal);
}
.lmgf-pill-indica:has(input:checked) { background: var(--lmgf-indica); border-color: var(--lmgf-indica); color: #ffffff; }
.lmgf-pill-sativa:has(input:checked) { background: var(--lmgf-sativa); border-color: var(--lmgf-sativa); color: #ffffff; }
.lmgf-pill-hybrid:has(input:checked) { background: var(--lmgf-hybrid); border-color: var(--lmgf-hybrid); color: #ffffff; }

/* Range inputs (Min/Max for THC%, Price)
   Cross-browser approach: hide native spinners completely and use a custom
   white SVG that turns teal on hover. Works in Chrome, Safari, Firefox. */
.lmgf-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lmgf-range-row input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 8px 28px 8px 10px;
    border: 1.5px solid var(--lmgf-border);
    border-radius: 999px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    background-color: var(--lmgf-bg);
    color: var(--lmgf-text);
    transition: border-color .15s, background-image .15s;
    /* Hide native arrows: Firefox */
    -moz-appearance: textfield;
    appearance: textfield;
    /* White double-arrow SVG drawn on the right edge */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'><path d='M5 1l4 4H1l4-4z' fill='%23f5f5f5'/><path d='M5 13l4-4H1l4 4z' fill='%23f5f5f5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    box-sizing: border-box;
}
/* Hide native arrows: Chrome / Safari / Edge */
.lmgf-range-row input::-webkit-outer-spin-button,
.lmgf-range-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
/* Teal arrows on hover/focus */
.lmgf-range-row input:hover,
.lmgf-range-row input:focus {
    border-color: var(--lmgf-teal);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'><path d='M5 1l4 4H1l4-4z' fill='%231abcba'/><path d='M5 13l4-4H1l4 4z' fill='%231abcba'/></svg>");
}
.lmgf-range-sep { color: var(--lmgf-text-mute); }

/* Brand search + scrollable list */
.lmgf-filter-search {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--lmgf-border);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    outline: none;
    font-family: inherit;
}
.lmgf-filter-search:focus { border-color: var(--lmgf-teal); }
.lmgf-filter-list-scroll {
    max-height: 240px;
    overflow-y: auto;
}

.lmgf-clear-filters {
    display: block;
    margin-top: 16px;
    background: transparent;
    border: none;
    color: var(--lmgf-text-soft);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
}
.lmgf-clear-filters:hover { color: var(--lmgf-teal); }

/* ---------- Main grid ---------- */
.lmgf-shop-main {
    min-width: 0;
}
.lmgf-shop-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: var(--lmgf-text-soft);
    font-size: 14px;
}
.lmgf-shop-location { color: var(--lmgf-teal); font-weight: 600; }

.lmgf-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* ---------- Product card ---------- */
.lmgf-card {
    background: var(--lmgf-bg-card);
    border: 1px solid var(--lmgf-border);
    border-radius: var(--lmgf-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s, border-color .15s;
    text-decoration: none;
    color: inherit;
}
.lmgf-card:hover {
    box-shadow: var(--lmgf-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--lmgf-border-strong);
}
.lmgf-card-image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--lmgf-bg-soft);
    overflow: hidden;
}
.lmgf-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lmgf-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lmgf-text-mute);
    font-size: 12px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
}

/* Badges overlaid on image */
.lmgf-card-badge {
    position: absolute;
    bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lmgf-card-badge-type {
    left: 10px;
    background: var(--lmgf-indica); /* default = indica */
    color: #ffffff;
    font-weight: 700;
}
.lmgf-card-badge-type.lmgf-type-indica { background: var(--lmgf-indica); color: #ffffff; }
.lmgf-card-badge-type.lmgf-type-sativa { background: var(--lmgf-sativa); color: #ffffff; }
.lmgf-card-badge-type.lmgf-type-hybrid { background: var(--lmgf-hybrid); color: #ffffff; }
.lmgf-card-badge-type.lmgf-type-cbd    { background: var(--lmgf-cbd);    color: #ffffff; }
.lmgf-card-badge-sale {
    right: 10px;
    background: rgba(232, 88, 88, 0.95);
}

/*
 * Multi-type badge row (added v0.10.59).
 *
 * For products with dual strain markers like (I/S), JS wraps the multiple
 * type badges in a .lmgf-card-badges-row so they sit side-by-side instead
 * of stacking on top of each other (each .lmgf-card-badge has absolute
 * position by default).
 *
 * Wrapper takes over the absolute positioning; the inner badges drop
 * theirs via the .lmgf-card-badge-in-row class.
 */
.lmgf-card-badges-row {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: calc(100% - 80px); /* leave room for sale badge on the right */
}
.lmgf-card-badge.lmgf-card-badge-in-row {
    position: static;
    bottom: auto;
    left: auto;
}

.lmgf-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    /* v0.10.76: no flex gap — individual elements control their own
     * margins so we can tighten title/brand/category specifically. */
    flex: 1;
}
.lmgf-card-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 2px;
    color: var(--lmgf-text);
    /* v0.10.76: no min-height. Title takes whatever space it needs
     * (1, 2, or 3+ lines). Brand/category hug directly below it.
     * Card heights stay uniform because the price (and everything
     * below) is anchored to the bottom via margin-top: auto on price.
     * Long titles still wrap to 3+ lines naturally; word-break handles
     * absurdly long single words. */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.lmgf-card-brand {
    color: var(--lmgf-text-mute);
    font-size: 12px;
    /* v0.10.76: hug directly below title */
    margin: 0 0 2px;
}

/* v0.10.75: primary category in teal below the brand. Small uppercase
 * label so it reads as a tag without competing with the title.
 * v0.10.76: zero margins so it sits flush with brand line. */
.lmgf-card-category {
    color: var(--lmgf-teal, #16a085);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
.lmgf-card-price {
    font-weight: 700;
    font-size: 16px;
    color: var(--lmgf-text);
    /* margin-top: auto pushes price to bottom of card body so the
     * THC/CBD section underneath stays anchored. The padding-top
     * gives breathing room from the category line above when title
     * is short (and there's lots of slack space). */
    margin-top: auto;
    padding-top: 8px;
}
.lmgf-card-price del {
    color: var(--lmgf-text-mute);
    font-weight: 400;
    font-size: 13px;
    margin-right: 6px;
}
/* v0.10.106: original vs discounted price on cards. Original gets
   strikethrough styling (gray, slashed) and the discounted price
   shows in the discount red, bold. */
.lmgf-card-price .lmgf-price-original {
    color: var(--lmgf-text-mute);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 13px;
    margin-right: 6px;
}
.lmgf-card-price .lmgf-price-discounted {
    color: #dc2626;
    font-weight: 700;
}

/* Cannabinoid table */
.lmgf-card-cannabinoids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-top: 1px solid var(--lmgf-border);
    padding-top: 8px;
    margin-top: 8px;
    justify-items: center;
}
.lmgf-cann-cell {
    text-align: center;
    font-size: 11px;
    color: var(--lmgf-text-soft);
}
.lmgf-cann-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lmgf-text-mute);
    font-size: 10px;
    margin-bottom: 1px;
}
.lmgf-cann-value {
    font-weight: 600;
    color: var(--lmgf-text);
    font-size: 12px;
}

.lmgf-card-low-stock {
    color: #d93838;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
}

/* Skeleton shimmer */
.lmgf-card-skeleton {
    pointer-events: none;
}
.lmgf-card-image-skel,
.lmgf-card-line-skel {
    background: linear-gradient(90deg, #f0f0f1 0%, #e8e8e9 50%, #f0f0f1 100%);
    background-size: 200% 100%;
    animation: lmgfShimmer 1.4s infinite;
    border-radius: 6px;
}
.lmgf-card-image-skel { aspect-ratio: 1/1; border-radius: 0; }
.lmgf-card-line-skel { height: 14px; margin: 12px 14px 0; }
.lmgf-card-line-skel-short { width: 50%; margin-bottom: 14px; }
@keyframes lmgfShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pagination */
.lmgf-shop-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.lmgf-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--lmgf-border);
    background: var(--lmgf-bg);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--lmgf-text);
    transition: all .15s;
    font-family: inherit;
}
.lmgf-page-btn:hover { border-color: var(--lmgf-teal); }
.lmgf-page-btn.is-active {
    background: var(--lmgf-teal);
    border-color: var(--lmgf-teal);
    color: #fff;
}
.lmgf-page-btn[disabled] { opacity: .4; cursor: not-allowed; }

.lmgf-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--lmgf-text-soft);
}
.lmgf-empty h3 { font-size: 18px; margin: 0 0 8px; color: var(--lmgf-text); }

/* ---------- Header location dropdown ---------- */
.lmgf-loc-dropdown {
    position: relative;
    display: inline-block;
    font-family: inherit;
}
.lmgf-loc-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.lmgf-loc-dropdown-trigger:hover {
    background: rgba(255,255,255,.06);
}
.lmgf-loc-dropdown-icon {
    color: var(--lmgf-teal);
    font-size: 16px;
}
.lmgf-loc-dropdown-caret {
    font-size: 10px;
    margin-left: 2px;
}
.lmgf-loc-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0; /* anchor right since dropdown is in header right side */
    left: auto;
    min-width: 320px;
    max-width: 380px;
    max-height: 480px;
    background: var(--lmgf-bg);
    color: var(--lmgf-text);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    border: 1px solid var(--lmgf-border-strong);
    z-index: 9999;
    overflow: hidden;
    flex-direction: column;
    padding: 6px;
}
/* Force hide when [hidden] attr is present, even if theme strips display defaults */
.lmgf-loc-dropdown-menu[hidden] { display: none !important; }
.lmgf-loc-dropdown-menu:not([hidden]) { display: flex; }

/* Force readable text colors inside the menu */
.lmgf-loc-dropdown-menu,
.lmgf-loc-dropdown-menu * {
    color: var(--lmgf-text);
}
.lmgf-loc-dropdown-menu .lmgf-loc-state-header {
    color: var(--lmgf-text-mute);
    background: var(--lmgf-bg);
}
.lmgf-loc-dropdown-menu .lmgf-loc-item-sub {
    color: var(--lmgf-text-soft);
}
.lmgf-loc-dropdown-menu .lmgf-loc-item.is-current,
.lmgf-loc-dropdown-menu .lmgf-loc-item.is-current * {
    color: var(--lmgf-teal);
}
.lmgf-loc-dropdown-search {
    margin: 6px 4px 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--lmgf-border-strong);
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    color: var(--lmgf-text);
    background: var(--lmgf-bg-soft);
    width: calc(100% - 8px);
    box-sizing: border-box;
}
.lmgf-loc-dropdown-search::placeholder { color: var(--lmgf-text-mute); }
.lmgf-loc-dropdown-search:focus { border-color: var(--lmgf-teal); }
.lmgf-loc-dropdown-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 4px 8px;
}
.lmgf-loc-state-header {
    padding: 6px 10px 2px;
    color: var(--lmgf-text-mute);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    position: sticky;
    top: 0;
    background: var(--lmgf-bg);
    z-index: 1;
}
.lmgf-loc-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--lmgf-text);
    font-family: inherit;
    line-height: 1.3;
    transition: background .15s;
}
.lmgf-loc-item:hover {
    background: var(--lmgf-bg-soft);
}
.lmgf-loc-item.is-current {
    background: rgba(26, 188, 186, 0.15);
    color: var(--lmgf-teal);
    font-weight: 600;
}
.lmgf-loc-item-sub {
    color: var(--lmgf-text-mute);
    font-size: 11px;
    margin-top: 1px;
    line-height: 1.3;
}

/* ---------- Mobile ---------- */
@media (max-width: 920px) {
    .lmgf-shop-layout {
        grid-template-columns: 1fr;
    }
    .lmgf-shop-sidebar {
        position: static;
    }
    .lmgf-sidebar-mobile-toggle { display: block; }
    .lmgf-sidebar-content { display: none; }
    .lmgf-sidebar-content.is-open { display: block; }
}
@media (max-width: 600px) {
    .lmgf-shop { padding: 16px 12px 32px; }
    .lmgf-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .lmgf-card-name { font-size: 13px; min-height: auto; }
    .lmgf-card-price { font-size: 14px; }
    .lmgf-shop-topbar { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   SINGLE PRODUCT PAGE — Cannabinoid + Effects + Flavors + Terpenes panels
   ========================================================================= */

.lmgf-spp-panel {
    margin: 24px 0;
    padding: 18px 20px;
    background: var(--lmgf-bg-card, #1f1f1f);
    border: 1px solid var(--lmgf-border, #2e2e2e);
    border-radius: var(--lmgf-radius, 12px);
    color: var(--lmgf-text, #f5f5f5);
}
.lmgf-spp-panel h3,
.lmgf-spp-panel h4 {
    margin: 0;
    color: var(--lmgf-text, #f5f5f5);
    font-weight: 700;
}
.lmgf-spp-panel h3 {
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.lmgf-spp-panel h4 {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lmgf-text-mute, #888);
    margin-bottom: 10px;
}

/* ---------- Cannabinoid spectrum ---------- */
.lmgf-spp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.lmgf-spp-total-thc {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(26, 188, 186, 0.12);
    border: 1px solid var(--lmgf-teal, #1abcba);
}
.lmgf-spp-total-thc-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lmgf-text-soft, #bbb);
}
.lmgf-spp-total-thc-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--lmgf-teal, #1abcba);
}

.lmgf-spp-cann-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lmgf-spp-cann-row {
    display: grid;
    grid-template-columns: 60px 1fr 70px;
    align-items: center;
    gap: 12px;
}
.lmgf-spp-cann-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lmgf-text, #f5f5f5);
}
.lmgf-spp-cann-bar-wrap {
    height: 8px;
    background: var(--lmgf-bg-soft, #232323);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.lmgf-spp-cann-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--lmgf-teal, #1abcba) 0%, #16a5a3 100%);
    border-radius: 999px;
    transition: width .3s ease;
}
.lmgf-spp-cann-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--lmgf-text, #f5f5f5);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lmgf-spp-cann-row--loq .lmgf-spp-cann-name,
.lmgf-spp-cann-row--loq .lmgf-spp-cann-value {
    color: var(--lmgf-text-mute, #888);
}

/* ---------- Effects / Flavors / Terpenes chips ---------- */
.lmgf-spp-attr-block {
    margin-bottom: 16px;
}
.lmgf-spp-attr-block:last-child {
    margin-bottom: 0;
}
.lmgf-spp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lmgf-spp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--lmgf-bg-soft, #232323);
    border: 1px solid var(--lmgf-border, #2e2e2e);
    color: var(--lmgf-text, #f5f5f5);
    line-height: 1.2;
}
.lmgf-spp-chip--effect {
    background: rgba(26, 188, 186, 0.12);
    border-color: var(--lmgf-teal, #1abcba);
    color: var(--lmgf-teal, #1abcba);
}
.lmgf-spp-chip--flavor {
    background: rgba(255, 102, 196, 0.12);
    border-color: var(--lmgf-sativa, #ff66c4);
    color: var(--lmgf-sativa, #ff66c4);
}
.lmgf-spp-chip--terpene .lmgf-spp-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lmgf-text-mute, #888);
    display: inline-block;
}

/* Terpene-specific dot colors. Each terpene has a distinct hue mapped to its
   typical effect profile (calming = cool, energizing = warm). */
.lmgf-terp-myrcene       .lmgf-spp-chip-dot { background: #6a4fb6; } /* deep purple, sedative */
.lmgf-terp-limonene      .lmgf-spp-chip-dot { background: #f7c11a; } /* citrus yellow */
.lmgf-terp-caryophyllene .lmgf-spp-chip-dot { background: #b94a4a; } /* spicy red */
.lmgf-terp-pinene        .lmgf-spp-chip-dot { background: #3fae6c; } /* pine green */
.lmgf-terp-linalool      .lmgf-spp-chip-dot { background: #c87bbf; } /* lavender pink */
.lmgf-terp-humulene      .lmgf-spp-chip-dot { background: #8a6d3b; } /* hops brown */
.lmgf-terp-terpinolene   .lmgf-spp-chip-dot { background: #4a96c8; } /* fresh blue */
.lmgf-terp-ocimene       .lmgf-spp-chip-dot { background: #2bb673; } /* herbal green */
.lmgf-terp-bisabolol     .lmgf-spp-chip-dot { background: #d9985f; } /* chamomile tan */
.lmgf-terp-default       .lmgf-spp-chip-dot { background: var(--lmgf-text-mute, #888); }

@media (max-width: 600px) {
    .lmgf-spp-cann-row {
        grid-template-columns: 50px 1fr 60px;
        gap: 8px;
    }
}

/* =========================================================================
   SINGLE PRODUCT PAGE — Layout, image sizing, strain badge, header
   ========================================================================= */

/* Layout the .product container as flex so the gallery + summary form a
 * predictable two-column row, and the summary stretches to fill all remaining
 * space (no theme `width:48%` weirdness, no float games). The full-width
 * panels render after this flex row and naturally span the parent's width.
 *
 * High-specificity selector (body.single-product) so we outrank the theme's
 * styles on `.summary`, which often set width:48% with high enough specificity
 * to win against plain `.woocommerce` selectors. */
body.single-product div.product,
body.single-product .woocommerce div.product,
body.single-product .woocommerce-page div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}
body.single-product div.product div.images,
body.single-product .woocommerce div.product div.images,
body.single-product .woocommerce-page div.product div.images {
    flex: 0 0 420px;
    max-width: 420px;
    width: 420px;
    float: none !important;
    margin: 0 !important;
}
body.single-product div.product div.images .woocommerce-product-gallery__image img,
body.single-product .woocommerce div.product div.images .woocommerce-product-gallery__image img,
body.single-product .woocommerce-page div.product div.images .woocommerce-product-gallery__image img {
    border-radius: var(--lmgf-radius, 12px);
    background: var(--lmgf-bg-soft, #232323);
}
body.single-product div.product div.summary,
body.single-product .woocommerce div.product div.summary,
body.single-product .woocommerce-page div.product div.summary,
body.single-product .woocommerce div.product .summary.entry-summary,
body.single-product .woocommerce-page div.product .summary.entry-summary {
    flex: 1 1 0%;
    min-width: 0;       /* lets flex children with long words shrink properly */
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}
/* Full-width panels (cannabinoid / terpene / attributes) need to break out of
 * the flex row and span the entire .product container width below it. */
body.single-product .lmgf-spp-fullwidth {
    flex-basis: 100%;
    width: 100%;
}

/* On narrower viewports stack vertically so the summary doesn't get crammed. */
@media (max-width: 980px) {
    body.single-product div.product,
    body.single-product .woocommerce div.product,
    body.single-product .woocommerce-page div.product {
        gap: 24px;
    }
    body.single-product div.product div.images,
    body.single-product .woocommerce div.product div.images,
    body.single-product .woocommerce-page div.product div.images {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    body.single-product div.product div.summary,
    body.single-product .woocommerce div.product div.summary,
    body.single-product .woocommerce-page div.product div.summary,
    body.single-product .woocommerce div.product .summary.entry-summary,
    body.single-product .woocommerce-page div.product .summary.entry-summary {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* Title + price scale-down so they don't overpower the page */
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
    font-size: 28px;
    line-height: 1.2;
    margin: 8px 0 4px;
}
.woocommerce div.product p.price,
.woocommerce-page div.product p.price,
.woocommerce div.product span.price,
.woocommerce-page div.product span.price {
    font-size: 24px;
    font-weight: 700;
    color: var(--lmgf-text, #f5f5f5);
}

/* Strain badge header row — sits above the product title */
.lmgf-spp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    flex-wrap: wrap;
}
.lmgf-spp-strain-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.4;
}
.lmgf-spp-strain-badge.lmgf-type-indica { background: var(--lmgf-indica, #a484c2); }
.lmgf-spp-strain-badge.lmgf-type-sativa { background: var(--lmgf-sativa, #ff66c4); }
.lmgf-spp-strain-badge.lmgf-type-hybrid { background: var(--lmgf-hybrid, #63c8cd); }
.lmgf-spp-strain-badge.lmgf-type-cbd    { background: var(--lmgf-cbd,    #4a96c8); }

.lmgf-spp-header-brand {
    color: var(--lmgf-text-mute, #888);
    font-size: 13px;
    font-weight: 500;
}

/* Hide the SKU line entirely if any theme/plugin re-inserts it */
.woocommerce div.product .sku_wrapper,
.woocommerce-page div.product .sku_wrapper,
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
    display: none !important;
}

/* ---------- Full-width panels below the photo+summary row ---------- */
.lmgf-spp-fullwidth {
    clear: both;
    width: 100%;
    margin: 24px 0 0;
}
.lmgf-spp-fullwidth .lmgf-spp-panel {
    margin: 0 0 20px;
}

/* ---------- Variations table: weight label inline, no boxed cell ---------- */
.woocommerce div.product form.variations_form table.variations,
.woocommerce-page div.product form.variations_form table.variations {
    border: none;
    margin-bottom: 12px;
}
.woocommerce div.product form.variations_form table.variations tbody,
.woocommerce-page div.product form.variations_form table.variations tbody {
    display: block;
}
.woocommerce div.product form.variations_form table.variations tr,
.woocommerce-page div.product form.variations_form table.variations tr {
    display: flex;
    align-items: center;
    gap: 14px;
    border: none;
    margin-bottom: 8px;
}
.woocommerce div.product form.variations_form table.variations th,
.woocommerce-page div.product form.variations_form table.variations th,
.woocommerce div.product form.variations_form table.variations th.label,
.woocommerce-page div.product form.variations_form table.variations th.label {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 70px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lmgf-text, #f5f5f5);
    display: flex !important;
    align-items: center;
    line-height: 1;
}
.woocommerce div.product form.variations_form table.variations th label,
.woocommerce-page div.product form.variations_form table.variations th label {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
}
.woocommerce div.product form.variations_form table.variations td.value,
.woocommerce-page div.product form.variations_form table.variations td.value {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    flex: 1;
    display: flex;
    align-items: center;
}
.woocommerce div.product form.variations_form .reset_variations,
.woocommerce-page div.product form.variations_form .reset_variations {
    color: var(--lmgf-teal, #1abcba);
    font-size: 13px;
    text-decoration: none;
    margin-left: 6px;
}
.woocommerce div.product form.variations_form .reset_variations:hover,
.woocommerce-page div.product form.variations_form .reset_variations:hover {
    text-decoration: underline;
}

/* Style the variation select dropdown to match our other dark inputs.
 *
 * Vertical alignment note: native <select> elements ignore line-height/flex —
 * the browser handles internal text positioning. To prevent text from looking
 * off-center inside a tall pill, we set an explicit height and use vertical
 * padding that pairs with the font-size to center naturally. box-sizing keeps
 * the height honest when padding/border are factored in.
 */
.woocommerce div.product form.variations_form select,
.woocommerce-page div.product form.variations_form select {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    background: var(--lmgf-bg, #191919);
    color: var(--lmgf-text, #f5f5f5);
    border: 2px solid var(--lmgf-teal, #1abcba);
    border-radius: 999px;
    height: 48px;
    padding: 0 36px 0 18px;
    line-height: 44px; /* height minus 2px border top + 2px border bottom */
    font-size: 14px;
    min-width: 200px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231abcba' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* ---------- Compare + Add to Wishlist buttons: match teal pill style ---------- */
/* Cover many plugin variants — YITH, Premmerce, WPClever, generic .compare */
.woocommerce div.product .compare,
.woocommerce-page div.product .compare,
.woocommerce div.product a.compare,
.woocommerce-page div.product a.compare,
.woocommerce div.product .button.compare,
.woocommerce-page div.product .button.compare,
.woocommerce div.product .yith-wcwl-add-to-wishlist a,
.woocommerce-page div.product .yith-wcwl-add-to-wishlist a,
.woocommerce div.product .yith-wcwl-add-button a,
.woocommerce-page div.product .yith-wcwl-add-button a,
.woocommerce div.product .yith-wcwl-add-button > a,
.woocommerce-page div.product .yith-wcwl-add-button > a,
.woocommerce div.product .add_to_wishlist,
.woocommerce-page div.product .add_to_wishlist,
.woocommerce div.product a.add_to_wishlist,
.woocommerce-page div.product a.add_to_wishlist,
.woocommerce div.product .wcboost-products-compare-button a,
.woocommerce-page div.product .wcboost-products-compare-button a,
.woocommerce div.product .wpc-compare-link,
.woocommerce-page div.product .wpc-compare-link,
.woocommerce div.product .premmerce-compare-button,
.woocommerce-page div.product .premmerce-compare-button,
.woocommerce div.product .premmerce-wishlist-button,
.woocommerce-page div.product .premmerce-wishlist-button,
/* Generic catch — any button-styled link in product summary that says "compare" or "wishlist" */
.woocommerce div.product .summary a[href*="compare"],
.woocommerce-page div.product .summary a[href*="compare"],
.woocommerce div.product .summary a[href*="wishlist"],
.woocommerce-page div.product .summary a[href*="wishlist"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    border: 2px solid var(--lmgf-teal, #1abcba) !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--lmgf-teal, #1abcba) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: all 0.15s ease !important;
    margin: 6px 8px 6px 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
}
.woocommerce div.product .compare:hover,
.woocommerce-page div.product .compare:hover,
.woocommerce div.product a.compare:hover,
.woocommerce-page div.product a.compare:hover,
.woocommerce div.product .button.compare:hover,
.woocommerce-page div.product .button.compare:hover,
.woocommerce div.product .yith-wcwl-add-to-wishlist a:hover,
.woocommerce-page div.product .yith-wcwl-add-to-wishlist a:hover,
.woocommerce div.product .yith-wcwl-add-button a:hover,
.woocommerce-page div.product .yith-wcwl-add-button a:hover,
.woocommerce div.product .add_to_wishlist:hover,
.woocommerce-page div.product .add_to_wishlist:hover,
.woocommerce div.product a.add_to_wishlist:hover,
.woocommerce-page div.product a.add_to_wishlist:hover,
.woocommerce div.product .wcboost-products-compare-button a:hover,
.woocommerce-page div.product .wcboost-products-compare-button a:hover,
.woocommerce div.product .wpc-compare-link:hover,
.woocommerce-page div.product .wpc-compare-link:hover,
.woocommerce div.product .premmerce-compare-button:hover,
.woocommerce-page div.product .premmerce-compare-button:hover,
.woocommerce div.product .premmerce-wishlist-button:hover,
.woocommerce-page div.product .premmerce-wishlist-button:hover,
.woocommerce div.product .summary a[href*="compare"]:hover,
.woocommerce-page div.product .summary a[href*="compare"]:hover,
.woocommerce div.product .summary a[href*="wishlist"]:hover,
.woocommerce-page div.product .summary a[href*="wishlist"]:hover {
    background: var(--lmgf-teal, #1abcba) !important;
    background-color: var(--lmgf-teal, #1abcba) !important;
    color: #fff !important;
    border-color: var(--lmgf-teal, #1abcba) !important;
}

/* ---------- Description / Additional Info tabs ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 18px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a *,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a * {
    color: var(--lmgf-text-soft, #bbb) !important;
    text-decoration: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 0 !important;
    font-weight: 600;
    border-bottom: 2px solid transparent !important;
    display: inline-block;
    background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a *,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a *,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover *,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a:hover * {
    color: var(--lmgf-teal, #1abcba) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a:hover {
    border-bottom: 2px solid var(--lmgf-teal, #1abcba) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--lmgf-border, #2e2e2e) !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}

@media (max-width: 768px) {
    .woocommerce div.product div.images,
    .woocommerce-page div.product div.images {
        max-width: 100%;
    }
    .woocommerce div.product .product_title,
    .woocommerce-page div.product .product_title {
        font-size: 22px;
    }
}

/* =========================================================================
   v0.9.9 — HIGH-SPECIFICITY OVERRIDES
   Theme is winning specificity battles for tabs and compare/wishlist.
   Prefixing with body.single-product to outrank theme.css rules.
   ========================================================================= */

/* Brand line — sits tight under the title, larger and more prominent */
body.single-product .lmgf-spp-brand-line {
    color: var(--lmgf-text-soft, #bbb);
    font-size: 18px;
    font-weight: 500;
    margin: -4px 0 18px;
    line-height: 1.3;
}

/* Bold Builder wraps the product title in a "headline" component that includes
   an empty .bt_bb_headline_subheadline div + ::after pseudo-element. That
   leaves a phantom ~28px gap between the title and our brand line. Hide it. */
body.single-product .summary .bt_bb_headline .bt_bb_headline_subheadline,
body.single-product .summary .bt_bb_headline .bt_bb_headline_subheadline::after,
body.single-product .summary header.bt_bb_headline {
    margin-bottom: 0 !important;
}
body.single-product .summary .bt_bb_headline_subheadline:empty {
    display: none !important;
}

/* Strain badge centered under the gallery image. The parent gallery wrapper
   is itself a flex container, so we force this wrapper to take full width
   (flex-basis 100%) before centering the inner badge. */
body.single-product .lmgf-spp-badge-under-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 0 0 100%;
    margin: 18px 0 0;
}
body.single-product .lmgf-spp-badge-under-image .lmgf-spp-strain-badge {
    padding: 8px 28px;
    font-size: 13px;
    letter-spacing: 0.1em;
}

/* Description / Additional info tabs — nuclear option */
body.single-product .woocommerce-tabs ul.tabs li,
body.single-product .woocommerce-tabs ul.tabs li.active {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 18px 0 0 !important;
    box-shadow: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li a,
body.single-product .woocommerce-tabs ul.tabs li a strong,
body.single-product .woocommerce-tabs ul.tabs li a span,
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li.active a strong,
body.single-product .woocommerce-tabs ul.tabs li.active a span {
    background: transparent !important;
    text-shadow: none !important;
    text-decoration: none !important;
    padding: 10px 0 !important;
    font-weight: 600 !important;
    display: inline-block;
}
body.single-product .woocommerce-tabs ul.tabs li a,
body.single-product .woocommerce-tabs ul.tabs li a strong,
body.single-product .woocommerce-tabs ul.tabs li a span {
    color: #bbbbbb !important;
    border-bottom: 2px solid transparent !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li.active a strong,
body.single-product .woocommerce-tabs ul.tabs li.active a span,
body.single-product .woocommerce-tabs ul.tabs li a:hover,
body.single-product .woocommerce-tabs ul.tabs li a:hover strong,
body.single-product .woocommerce-tabs ul.tabs li a:hover span {
    color: #1abcba !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
    border-bottom: 2px solid #1abcba !important;
}
body.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid #2e2e2e !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}

/* Compare + Wishlist — nuclear with body prefix.
   Catches every plugin's markup variant. Targets BOTH single product page
   and shop card "compare/wishlist" links in related products grid. */
body.single-product a.compare,
body.single-product .compare,
body.single-product .button.compare,
body.single-product a.add_to_wishlist,
body.single-product .add_to_wishlist,
body.single-product .yith-wcwl-add-to-wishlist a,
body.single-product .yith-wcwl-add-button a,
body.single-product .wcboost-products-compare-button a,
body.single-product .wpc-compare-link,
body.single-product .premmerce-compare-button,
body.single-product .premmerce-wishlist-button,
body.woocommerce a.compare,
body.woocommerce .compare,
body.woocommerce .button.compare,
body.woocommerce a.add_to_wishlist,
body.woocommerce .add_to_wishlist,
body.woocommerce .yith-wcwl-add-to-wishlist a,
body.woocommerce-page a.compare,
body.woocommerce-page .compare,
body.woocommerce-page a.add_to_wishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 22px !important;
    border: 2px solid #1abcba !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #1abcba !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 6px 8px 6px 0 !important;
    text-shadow: none !important;
}
body.single-product a.compare:hover,
body.single-product .compare:hover,
body.single-product a.add_to_wishlist:hover,
body.single-product .add_to_wishlist:hover,
body.single-product .yith-wcwl-add-to-wishlist a:hover,
body.single-product .yith-wcwl-add-button a:hover,
body.woocommerce a.compare:hover,
body.woocommerce .compare:hover,
body.woocommerce a.add_to_wishlist:hover,
body.woocommerce .add_to_wishlist:hover,
body.woocommerce-page a.compare:hover,
body.woocommerce-page a.add_to_wishlist:hover {
    background: #1abcba !important;
    background-color: #1abcba !important;
    color: #ffffff !important;
    border-color: #1abcba !important;
}

/* Wrap the compare/wishlist row in a flex container if theme renders them
   adjacent without spacing */
body.single-product .summary form.cart + .compare,
body.single-product .summary .yith-wcwl-add-to-wishlist {
    display: inline-block !important;
    margin-top: 8px !important;
}

/* =========================================================================
   v0.9.10 — EXACT-TARGET OVERRIDES (from DevTools inspection)
   - Compare button: WOOSC plugin renders <button class="woosc-btn woosc-btn-{id}">
   - Wishlist button: WOOSW plugin renders <button class="woosw-btn woosw-btn-{id}">
   - Tabs: Bold Builder theme uses .bt_bb_tabs_header li.on (NOT .active)
   ========================================================================= */

/* WOOSC Compare button */
button.woosc-btn,
button[class*="woosc-btn"],
.woosc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 22px !important;
    border: 2px solid #1abcba !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #1abcba !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 6px 8px 6px 0 !important;
    text-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
}
button.woosc-btn:hover,
button[class*="woosc-btn"]:hover,
.woosc-btn:hover {
    background: #1abcba !important;
    background-color: #1abcba !important;
    color: #ffffff !important;
    border-color: #1abcba !important;
}

/* WOOSW Wishlist button */
button.woosw-btn,
button[class*="woosw-btn"],
.woosw-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 22px !important;
    border: 2px solid #1abcba !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #1abcba !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 6px 8px 6px 0 !important;
    text-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
}
button.woosw-btn:hover,
button[class*="woosw-btn"]:hover,
.woosw-btn:hover {
    background: #1abcba !important;
    background-color: #1abcba !important;
    color: #ffffff !important;
    border-color: #1abcba !important;
}

/* Bold Builder tabs — actual selectors from theme's tabs.css */
.bt_bb_tabs .bt_bb_tabs_header li,
.bt_bb_tabs .bt_bb_tabs_header li.on {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.bt_bb_tabs .bt_bb_tabs_header li,
.bt_bb_tabs .bt_bb_tabs_header li span {
    color: #bbbbbb !important;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.bt_bb_tabs .bt_bb_tabs_header li.on,
.bt_bb_tabs .bt_bb_tabs_header li.on span,
.bt_bb_tabs .bt_bb_tabs_header li:hover,
.bt_bb_tabs .bt_bb_tabs_header li:hover span {
    color: #1abcba !important;
}
.bt_bb_tabs .bt_bb_tabs_header li.on {
    border-bottom: 2px solid #1abcba !important;
}
.bt_bb_tabs .bt_bb_tabs_header {
    border-bottom: 1px solid #2e2e2e !important;
}

/* ===========================================================================
 * v0.10.23 — Featured pills, secondary cannabinoid chips, terpene panel
 * =========================================================================*/

/* Featured THC + CBD pills — hooked into single product summary at p11.
 * Two side-by-side oval cards, value + qualitative tier label. Compact so
 * they don't push add-to-cart far down the screen. */
.lmgf-featured-pills {
    display: flex;
    gap: 12px;
    margin: 14px 0 18px;
    flex-wrap: wrap;
}
.lmgf-featured-pill {
    flex: 1 1 140px;
    min-width: 0;
    border: 2px solid var(--lmgf-teal, #1abcba);
    border-radius: 999px;
    padding: 12px 18px;
    text-align: center;
    background: var(--lmgf-bg, #191919);
    color: var(--lmgf-text, #f5f5f5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.1;
}
.lmgf-featured-pill-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}
.lmgf-featured-pill-value {
    font-size: 22px;
    font-weight: 700;
}
.lmgf-featured-pill-tier {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lmgf-tier--low  { color: #f5b53d; }
.lmgf-tier--avg  { color: #f57c3d; }
.lmgf-tier--high { color: #1abcba; }

/* Secondary cannabinoid chips — small chip row below add-to-cart. */
.lmgf-secondary-cannabinoids {
    margin: 14px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #2e2e2e;
}
.lmgf-secondary-cannabinoids-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    margin-bottom: 6px;
}
.lmgf-secondary-cannabinoids-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lmgf-cann-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #1f1f1f;
    border: 1px solid #2e2e2e;
    font-size: 11px;
    line-height: 1.3;
}
.lmgf-cann-chip-name {
    font-weight: 600;
    color: var(--lmgf-teal, #1abcba);
}
.lmgf-cann-chip-value {
    color: var(--lmgf-text, #f5f5f5);
}

/* Terpene panel — same DOM/CSS pattern as the cannabinoid bars panel; only
 * adds individual terpene color classes. The .lmgf-spp-cann-bar styles
 * already exist from the original cannabinoid panel. */
.lmgf-spp-terpenes .lmgf-spp-total-terp {
    font-size: 12px;
    opacity: 0.75;
}
.lmgf-spp-total-terp-label { text-transform: uppercase; letter-spacing: 0.05em; margin-right: 6px; }
.lmgf-spp-total-terp-value { font-weight: 600; }

/* Terpene bar colors — these match the chip colors used in the attributes
 * panel so a terpene shows the same color across both contexts. */
.lmgf-spp-cann-bar.lmgf-terp-myrcene       { background: #6a4ad6; }
.lmgf-spp-cann-bar.lmgf-terp-limonene      { background: #f5d63d; }
.lmgf-spp-cann-bar.lmgf-terp-caryophyllene { background: #c45c2a; }
.lmgf-spp-cann-bar.lmgf-terp-pinene        { background: #4ca85a; }
.lmgf-spp-cann-bar.lmgf-terp-linalool      { background: #b85ab1; }
.lmgf-spp-cann-bar.lmgf-terp-humulene      { background: #8b6f3a; }
.lmgf-spp-cann-bar.lmgf-terp-terpinolene   { background: #3a8bc4; }
.lmgf-spp-cann-bar.lmgf-terp-bisabolol     { background: #d6a64a; }
.lmgf-spp-cann-bar.lmgf-terp-default       { background: #888; }

/* ===========================================================================
 * v0.10.27 — Mobile-only fixes
 *   - Header location dropdown: was being clipped off-screen when opened
 *     from the slide-out hamburger menu (right:0 anchored it to its trigger,
 *     which sits inside a narrow column).
 *   - Variations form (Weight + dropdown) was left-aligned in the row,
 *     visually inconsistent with the centered title/price/cart elements.
 * Both rules are scoped to ≤768px so desktop layout is unchanged.
 * =========================================================================*/
@media (max-width: 768px) {

    /* Location dropdown menu — on mobile the trigger sits inside the slide-out
     * navigation menu (a narrow ~360px column). Desktop's `right:0` anchor
     * makes the dropdown extend off the right edge of that column.
     *
     * Fix: keep it as an absolute-positioned dropdown anchored below the
     * trigger (so it visually reads as "the trigger's menu"), but center it
     * horizontally relative to the trigger and constrain its width so the
     * whole rounded shape fits inside the slide-out column. We use a 50%/
     * translateX(-50%) center technique relative to the trigger's parent —
     * this keeps the dropdown visually attached to the trigger no matter
     * where in the slide-out the trigger is.
     *
     * Previous attempts:
     *  v0.10.26: position:absolute right:0 → spilled off right edge
     *  v0.10.27: position:fixed centered to viewport → got covered by
     *            slide-out and the rounded right edge appeared clipped
     *  v0.10.28 (this): absolute positioning, centered relative to trigger,
     *            width capped at slide-out's interior width.
     */
    .lmgf-loc-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        /* Width: fit inside the slide-out column with safe gutter on either
         * side. min(...) takes whichever is smaller — 320px (a comfortable
         * default) or the slide-out interior width minus 24px gutter. */
        width: min(320px, calc(100vw - 48px));
        max-width: calc(100vw - 48px);
        min-width: 0;
        max-height: calc(100vh - 200px);
    }

    /* Variations form — center the WEIGHT label + select dropdown row so it
     * aligns with the rest of the (centered) summary content. */
    .woocommerce div.product form.variations_form table.variations tr,
    .woocommerce-page div.product form.variations_form table.variations tr {
        justify-content: center;
    }
    .woocommerce div.product form.variations_form table.variations td.value,
    .woocommerce-page div.product form.variations_form table.variations td.value {
        flex: 0 1 auto;
    }

}

/* ===========================================================================
 * v0.10.29 — Ordering disabled CTA
 * Used when "Disable Online Ordering" toggle is on (waiting for GrowFlow's
 * createPreorder permission to be granted). Replaces Add to Cart with a
 * "Visit a store to purchase" link.
 * =========================================================================*/
.lmgf-ordering-disabled-cta {
    margin: 14px 0 6px;
    text-align: center;
}
.lmgf-visit-store-btn {
    display: inline-block;
    padding: 14px 32px !important;
    border-radius: 999px !important;
    background: var(--lmgf-teal, #1abcba) !important;
    color: #0c0c0c !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    border: none !important;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.lmgf-visit-store-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.lmgf-ordering-disabled-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--lmgf-text-soft, #a8a8a8);
    line-height: 1.4;
}

/* Shop grid version — smaller, fits inside the product card */
.lmgf-loop-visit-store-btn {
    display: inline-block;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: var(--lmgf-teal, #1abcba) !important;
    color: #0c0c0c !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none !important;
}


/* ===========================================================================
 * v0.10.33 — Ordering disabled: keep weight selector visible, hide qty/cart
 *
 * Body class `lmgf-ordering-disabled` is added by LMGF_Ordering_Gate when
 * the toggle is on. We keep the variations form rendering (so the weight
 * dropdown + per-variation price/stock stay visible) but hide the cart
 * button + qty input within it. The visit-store CTA below replaces the
 * action.
 *
 * The .single_variation_wrap is the per-variation panel WC renders inside
 * the variations form once a variation is selected. It contains:
 *   - .woocommerce-variation-price (per-variation price — KEEP)
 *   - .woocommerce-variation-availability (stock — KEEP)
 *   - .woocommerce-variation-add-to-cart (qty + cart button — HIDE)
 * =========================================================================*/
body.lmgf-ordering-disabled .woocommerce-variation-add-to-cart,
body.lmgf-ordering-disabled .single_variation_wrap .quantity,
body.lmgf-ordering-disabled .single_variation_wrap .single_add_to_cart_button,
body.lmgf-ordering-disabled form.cart > .quantity,
body.lmgf-ordering-disabled form.cart > .single_add_to_cart_button {
    display: none !important;
}
/* For simple (non-variable) products, the form.cart contains qty + button
 * directly. Hide the form's submission UI but keep the form element itself
 * so any plugins relying on its presence don't error out. */
body.lmgf-ordering-disabled form.cart .quantity,
body.lmgf-ordering-disabled form.cart .single_add_to_cart_button,
body.lmgf-ordering-disabled form.cart button[type="submit"] {
    display: none !important;
}


/* ===========================================================================
 * v0.10.34 — Dark theme override for WPClever Smart Wishlist + Smart Compare
 *
 * Plugins identified by inspecting actual DOM class names on the site:
 *   - WPClever WooCommerce Smart Wishlist  → woosw_*  /  .woosw-*
 *   - WPClever WooCommerce Smart Compare   → woosc_*  /  .woosc-*
 *
 * Both ship with a light-theme stylesheet (frontend.scss) that paints popups
 * white and uses #00a0d2 (a bright blue) as the primary action color. We
 * override both with the site's dark background, white text, and our teal
 * accent. Selectors are deliberately specific (full plugin id chains) so we
 * don't accidentally hit anything outside these popups.
 *
 * Note: the compare bar's "Visit a Store" button gets its background color
 * from an INLINE style on .woosc-bar-btn (data-bg-color attr is read by
 * the plugin's JS and emitted as inline). Inline styles outrank stylesheet
 * rules — so we use !important on background-color to win.
 * =========================================================================*/

/* -------------------------------------------------------------------------
 * WISHLIST POPUP (#woosw_wishlist + descendants)
 * -------------------------------------------------------------------------*/

#woosw_wishlist.woosw-popup,
#woosw_wishlist .woosw-popup-inner,
#woosw_wishlist .woosw-popup-content,
#woosw_wishlist .woosw-popup-content-top,
#woosw_wishlist .woosw-popup-content-mid,
#woosw_wishlist .woosw-popup-content-bot,
#woosw_wishlist .woosw-items,
#woosw_wishlist .woosw-item,
#woosw_wishlist .woosw-item-inner {
    background: var(--lmgf-bg, #191919) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
}

/* The popup's outer overlay/backdrop — make it a true dark veil.
 *
 * CRITICAL: scope to .woosw-show state only. The plugin renders this
 * element on every frontend page as a dormant container; without the
 * .woosw-show qualifier our background-color paints a dark veil over
 * the entire viewport at all times, blanking the whole site. The
 * .woosw-show class is added by the plugin's JS only when the wishlist
 * popup is actually open. (Lesson learned the hard way in v0.10.34.) */
#woosw_wishlist.woosw-popup.woosw-show {
    background: rgba(0, 0, 0, 0.78) !important;
}
/* Inner card itself uses the lighter bg so it pops out from the veil */
#woosw_wishlist .woosw-popup-inner {
    background: var(--lmgf-bg, #191919) !important;
    border: 1px solid #2e2e2e !important;
    border-radius: var(--lmgf-radius, 12px) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
}

/* Header strip ("Wishlist (1)" + close X) */
#woosw_wishlist .woosw-popup-content-top {
    border-bottom: 1px solid #2e2e2e !important;
    color: var(--lmgf-text, #f5f5f5) !important;
}
#woosw_wishlist .woosw-popup-content-top * {
    color: var(--lmgf-text, #f5f5f5) !important;
}

/* Item rows */
#woosw_wishlist .woosw-item {
    border-bottom: 1px solid #2e2e2e !important;
}
#woosw_wishlist .woosw-item--name a,
#woosw_wishlist .woosw-item--name {
    color: var(--lmgf-text, #f5f5f5) !important;
}
#woosw_wishlist .woosw-item--name a:hover {
    color: var(--lmgf-teal, #1abcba) !important;
    text-decoration: underline !important;
}
#woosw_wishlist .woosw-item--price,
#woosw_wishlist .woosw-item--price * {
    color: var(--lmgf-text-soft, #a8a8a8) !important;
}
#woosw_wishlist .woosw-item--time {
    color: var(--lmgf-text-soft, #a8a8a8) !important;
}
#woosw_wishlist .woosw-item--note input,
#woosw_wishlist .woosw-item--note textarea {
    background: #232323 !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    border: 1px solid #2e2e2e !important;
}

/* "Add note" link */
#woosw_wishlist .woosw-item--note a,
#woosw_wishlist .woosw-item--actions a {
    color: var(--lmgf-teal, #1abcba) !important;
}

/* Footer ("Open Wishlist Page") */
#woosw_wishlist .woosw-popup-content-bot {
    border-top: 1px solid #2e2e2e !important;
}
#woosw_wishlist .woosw-popup-content-bot a {
    color: var(--lmgf-teal, #1abcba) !important;
}

/* "Visit a Store" CTA inside the wishlist (replaces the Add to Cart action
 * the wishlist would normally surface). Plugin sets it via inline style;
 * !important on background-color is required. */
#woosw_wishlist .woosw-item--actions .button,
#woosw_wishlist .woosw-item-actions .button,
#woosw_wishlist .lmgf-loop-visit-store-btn {
    background: var(--lmgf-teal, #1abcba) !important;
    color: #0c0c0c !important;
    border: none !important;
}

/* Close X */
#woosw_wishlist .woosw-popup-close,
#woosw_wishlist .woosw-popup-content-top .woosw-close {
    color: var(--lmgf-text, #f5f5f5) !important;
    background: transparent !important;
}

/* -------------------------------------------------------------------------
 * COMPARE TABLE MODAL (.woosc-area + descendants)
 * The plugin emits a wrapping <div id="woosc-area"> with a sliding panel
 * of class .woosc-table-items (the actual visible card). The compare table
 * itself is #woosc_table. The "Settings" toggle, share, and product columns
 * all live inside this.
 * -------------------------------------------------------------------------*/

/* Compare table modal — scope to the open state only. The plugin renders
 * #woosc-area as a permanent footer bar with the table-items panel
 * pre-rendered but hidden. Without scoping to .woosc-area-open-table the
 * dark background paints over content even when the modal is closed.
 *
 * The bottom bar itself (#woosc-area without -open-table) gets its own
 * styling further down — that's the persistent "Compare" pill in the
 * footer.
 */
#woosc-area.woosc-area-open-table .woosc-table-items,
#woosc-area.woosc-area-open-table .woosc-table-inner,
#woosc-area.woosc-area-open-table #woosc_table,
#woosc-area.woosc-area-open-table #woosc_table tbody,
#woosc-area.woosc-area-open-table #woosc_table thead,
#woosc-area.woosc-area-open-table #woosc_table tr,
#woosc-area.woosc-area-open-table #woosc_table td,
#woosc-area.woosc-area-open-table #woosc_table th {
    background: var(--lmgf-bg, #191919) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    border-color: #2e2e2e !important;
}

/* Outer card edge — only visible when table is open */
#woosc-area.woosc-area-open-table .woosc-table-items {
    border: 1px solid #2e2e2e !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
}

/* Compare table cell padding + alternating row tint for readability */
#woosc_table td,
#woosc_table th {
    border: 1px solid #2e2e2e !important;
    padding: 14px 16px !important;
}
#woosc_table .tr-default.tr-odd td {
    background: #1f1f1f !important;
}
#woosc_table .tr-default.tr-even td {
    background: var(--lmgf-bg, #191919) !important;
}

/* The label column ("Image", "SKU", "Price", "Stock", "Add to cart", etc.) */
#woosc_table .td-label {
    background: #0c0c0c !important;
    color: var(--lmgf-teal, #1abcba) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Product name row */
#woosc_table .tr-name td,
#woosc_table .tr-name {
    background: #0c0c0c !important;
    color: var(--lmgf-text, #f5f5f5) !important;
}
#woosc_table .tr-name a,
#woosc_table .tr-name a:link,
#woosc_table .tr-name a:visited {
    color: var(--lmgf-text, #f5f5f5) !important;
    font-weight: 700 !important;
}

/* "remove" link in headers */
#woosc_table a.remove,
.woosc-table-items a.remove,
#woosc_table .tr-name a.remove {
    color: var(--lmgf-teal, #1abcba) !important;
    text-decoration: underline !important;
}

/* "In stock" / availability text */
#woosc_table .tr-availability,
#woosc_table .tr-stock {
    color: var(--lmgf-text-soft, #a8a8a8) !important;
}
#woosc_table .stock.in-stock {
    color: #4caf50 !important;
}

/* Generic links inside the compare modal */
.woosc-table-items a,
#woosc_table a {
    color: var(--lmgf-teal, #1abcba) !important;
}
.woosc-table-items a:hover,
#woosc_table a:hover {
    color: #fff !important;
}

/* Close X on the compare modal */
.woosc-table-close,
#woosc-table-close,
.woosc-table-items .woosc-table-close {
    color: var(--lmgf-text, #f5f5f5) !important;
    background: transparent !important;
}

/* The bottom bar ("Settings | print | share | + | thumbnails | COMPARE")
 * The COMPARE button is the bright blue we need to make teal. */
.woosc-bar,
.woosc-bar.woosc-bar-open,
#woosc-area .woosc-bar {
    background: var(--lmgf-bg, #191919) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    border-top: 1px solid #2e2e2e !important;
}
.woosc-bar *,
.woosc-bar.woosc-bar-open * {
    color: var(--lmgf-text, #f5f5f5) !important;
}
.woosc-bar a,
.woosc-bar.woosc-bar-open a {
    color: var(--lmgf-teal, #1abcba) !important;
}

/* THE BLUE COMPARE BUTTON — inline style from data-btn-color="#00a0d2"
 * needs !important to override. Match our teal and switch the text to
 * dark for contrast. */
.woosc-bar .woosc-bar-btn,
.woosc-bar.woosc-bar-open .woosc-bar-btn,
.woosc-bar .woosc-bar-btn-text,
.woosc-bar .woosc-bar-btn-open,
div.woosc-bar-btn.woosc-bar-btn-text.woosc-bar-btn-open {
    background-color: var(--lmgf-teal, #1abcba) !important;
    color: #0c0c0c !important;
    border-radius: 999px !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.woosc-bar .woosc-bar-btn:hover,
.woosc-bar.woosc-bar-open .woosc-bar-btn:hover {
    opacity: 0.9 !important;
    color: #0c0c0c !important;
}

/* Settings toggle in the bar */
.woosc-bar .woosc-bar-settings,
.woosc-bar .woosc-bar-print,
.woosc-bar .woosc-bar-share,
.woosc-bar .woosc-bar-search {
    color: var(--lmgf-text, #f5f5f5) !important;
}

/* -------------------------------------------------------------------------
 * SHARE POPUP (.woosc-popup.woosc-share)
 * Sub-modal that pops over the compare table when "Share" is clicked.
 * -------------------------------------------------------------------------*/

/* Outer veil — scope to .open state only. Same lesson as woosw above:
 * .woosc-popup is rendered as a dormant container on every page; without
 * the .open qualifier the dark background paints over the entire viewport
 * at all times. */
.woosc-popup.open {
    background: rgba(0, 0, 0, 0.78) !important;
}
.woosc-popup .woosc-popup-inner {
    background: var(--lmgf-bg, #191919) !important;
    border: 1px solid #2e2e2e !important;
    border-radius: var(--lmgf-radius, 12px) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
}
.woosc-popup .woosc-popup-content,
.woosc-popup .woosc-popup-content-inner,
.woosc-popup .woosc-share-content,
.woosc-popup .woosc-share-text,
.woosc-popup .woosc-share-link,
.woosc-popup .woosc-share-links,
.woosc-popup .woosc-settings-content,
.woosc-popup .woosc-settings-content * {
    background: transparent !important;
    color: var(--lmgf-text, #f5f5f5) !important;
}
.woosc-popup .woosc-share-text {
    color: var(--lmgf-text, #f5f5f5) !important;
}
.woosc-popup .woosc-popup-close {
    color: var(--lmgf-text, #f5f5f5) !important;
    background: transparent !important;
}

/* The URL field in the share modal — was a light input with teal border.
 * Keep the teal border (matches our accent already) but darken the field. */
.woosc-popup input#woosc_copy_url,
.woosc-popup .woosc-share-link input[type="url"],
.woosc-popup .woosc-share-link input[type="text"] {
    background: #232323 !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    border: 2px solid var(--lmgf-teal, #1abcba) !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
}

/* Social share icons inside the share modal */
.woosc-popup .woosc-share-links a {
    color: var(--lmgf-teal, #1abcba) !important;
}
.woosc-popup .woosc-share-links a:hover {
    color: #fff !important;
}

/* Settings popup uses the same .woosc-popup chrome with a different inner
 * class. The shared styles above cover most of it; specifically tint the
 * settings checkboxes/labels in case they default to dark-on-light. */
.woosc-popup .woosc-settings-content label,
.woosc-popup .woosc-settings-content span,
.woosc-popup .woosc-settings-content p {
    color: var(--lmgf-text, #f5f5f5) !important;
}
.woosc-popup .woosc-settings-content input[type="checkbox"] {
    accent-color: var(--lmgf-teal, #1abcba) !important;
}

/* ============================================================
 * Product unavailable at current location (added v0.10.48)
 * ============================================================
 * When a product isn't tagged with the currently-selected location,
 * the body gets a `lmgf-product-unavailable` class. We use that to:
 *   - disable the weight dropdown (visual + interaction)
 *   - hide the Add to Cart area
 *   - show a "Visit a store to purchase" message in its place
 *
 * The availability badge above this is rendered server-side by the
 * single-product class.
 */
.lmgf-product-unavailable .variations select {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}
.lmgf-product-unavailable .single_variation_wrap .woocommerce-variation-add-to-cart,
.lmgf-product-unavailable .cart .single_add_to_cart_button,
.lmgf-product-unavailable .quantity {
    display: none !important;
}

/* Availability badge — small visual polish on top of inline styles */
.lmgf-availability-badge {
    transition: background-color 0.2s ease;
}

/* ============================================================
 * Specials sidebar group (added v0.10.90)
 * ============================================================
 * Pinned at the very top of the facet list — single boolean checkbox
 * that filters the grid to products with an applicable GF discount.
 * The standalone chip-row variant from v0.10.90 was removed in v0.10.92
 * per design feedback; sidebar checkbox is the only entry point now.
 */
.lmgf-filter-group--specials {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lmgf-specials-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
 * Discount pill on product cards (v0.10.91)
 * ============================================================
 * Renders on top of the product image at top-left, mirroring the
 * Sunnyside reference design the customer shared. Red background
 * (per design req) with a tag icon and the prebuilt pill text
 * from LMGF_Discount_Matcher (e.g., "35% Off 3, 40% Off 5+").
 *
 * Hover/tap reveals a CSS-driven popover with the discount's
 * tooltip body. No JS needed — uses a sibling pseudo-element.
 */
/* v0.10.101: container for stacked discount pills. Replaces the
   single absolutely-positioned pill with a flex column anchored at
   top-left. Children are individual pills; each is no longer
   absolutely positioned itself (the stack handles positioning).
   Backwards compatibility: a single pill not wrapped in a stack
   continues to work via the old absolute positioning rules below. */
.lmgf-card-pill-stack {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none; /* let clicks fall through the gap area */
}
.lmgf-card-pill-stack > .lmgf-card-badge-discount {
    /* Inside a stack, individual pills are NOT absolutely positioned —
       the stack container handles placement. Override the absolute
       positioning that the freestanding pill rule below sets. */
    position: static !important;
    top: auto !important;
    left: auto !important;
    pointer-events: auto;
    /* Within the stack, pills can shrink to content width naturally. */
    max-width: 100%;
}
/* v0.10.103: when a pill in the stack is hovered or focused, promote
   it above its siblings so the tooltip popover (a ::after pseudo on
   the pill) doesn't render BEHIND the next pill in the stack. Without
   this, pills further down the DOM paint on top of an earlier pill's
   tooltip simply by sibling-painting-order. We also need
   `position: relative` here for the z-index to take effect — `position:
   static` doesn't establish a stacking context. */
.lmgf-card-pill-stack > .lmgf-card-badge-discount:hover,
.lmgf-card-pill-stack > .lmgf-card-badge-discount:focus,
.lmgf-card-pill-stack > .lmgf-card-badge-discount:focus-within {
    position: relative !important;
    z-index: 50;
}
/* Same treatment for SPP single-product page where pills are flex-row. */
.lmgf-spp-discount-row > .lmgf-spp-discount-pill:hover,
.lmgf-spp-discount-row > .lmgf-spp-discount-pill:focus,
.lmgf-spp-discount-row > .lmgf-spp-discount-pill:focus-within {
    z-index: 50;
}

.lmgf-card-badge-discount {
    /* override any of the generic .lmgf-card-badge backgrounds */
    background-color: #dc2626 !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    /* Position at top-left of the image wrapper. The parent
       .lmgf-card-badge rule sets `position: absolute; bottom: 10px;`
       — we MUST explicitly clear `bottom` (and `right` for safety),
       otherwise setting `top: 8px` while `bottom: 10px` is still in
       effect would make the pill stretch from 8px down to 10px-from-
       bottom, producing a giant vertical lozenge spanning the entire
       card image. Same for left/right.
       Discovered v0.10.93 — the v0.10.91 pill was rendering as a huge
       red lozenge for exactly this reason. */
    position: absolute;
    top: 8px;
    left: 8px;
    bottom: auto;
    right: auto;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    cursor: default;
    /* Cap the width so a long pill text ("35% Off 3, 40% Off 5+") on a
       narrow mobile card doesn't run past the image edge. Wraps onto
       two lines if needed; the line-height keeps things readable. */
    max-width: calc(100% - 16px);
    white-space: normal;
}
.lmgf-discount-pill-icon {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}
.lmgf-discount-pill-text {
    /* No special styling; just a wrapper for the dynamic text content
       so we can set it via textContent without affecting the icon. */
}

/* Tooltip — CSS-only popover. Shows on hover (desktop) and on focus
   (keyboard / tap-equivalent — the pill is tabindex=0). */
.lmgf-card-badge-discount[data-tooltip]:hover::after,
.lmgf-card-badge-discount[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* v0.10.103: bumped from 10 to 100. Other pills in the same stack
       have z-index 50 when hovered (they get promoted so the tooltip's
       parent also rises above sibling pills). The tooltip pseudo-
       element needs to be ABOVE the host pill's promoted z-index, so
       100 keeps it safely on top across most theme stacking contexts. */
    z-index: 100;
    min-width: 180px;
    max-width: 280px;
    padding: 10px 12px;
    background: rgba(20, 20, 20, 0.96);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    border-radius: 6px;
    white-space: pre-line; /* respect \n in the tooltip text */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    text-transform: none;
}
/* Small caret pointing up at the pill */
.lmgf-card-badge-discount[data-tooltip]:hover::before,
.lmgf-card-badge-discount[data-tooltip]:focus::before {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 16px;
    z-index: 101;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(20, 20, 20, 0.96);
    pointer-events: none;
}

/* Single-product page version of the discount pill (v0.10.91).
   Inline-flex row, sits between the brand line and the price. */
.lmgf-spp-discount-row {
    margin: 4px 0 8px 0;
    /* v0.10.101: support multiple stacked pills (when several discounts
       apply to the product). Use flex-wrap so they flow naturally and
       don't overlap on narrow screens. */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lmgf-spp-discount-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: #dc2626;
    color: #fff;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    position: relative;
    cursor: default;
}
.lmgf-spp-discount-pill-icon {
    font-size: 12px;
    line-height: 1;
}
.lmgf-spp-discount-pill[data-tooltip]:hover::after,
.lmgf-spp-discount-pill[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100; /* v0.10.103: was 10 — see card pill comment */
    min-width: 200px;
    max-width: 320px;
    padding: 10px 12px;
    background: rgba(20, 20, 20, 0.96);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    border-radius: 6px;
    white-space: pre-line;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    text-transform: none;
}
.lmgf-spp-discount-pill[data-tooltip]:hover::before,
.lmgf-spp-discount-pill[data-tooltip]:focus::before {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 16px;
    z-index: 101; /* v0.10.103 */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(20, 20, 20, 0.96);
    pointer-events: none;
}

/* v0.10.114: PhotoSwipe lightbox z-index — the theme's sticky
   header (header.mainHeader.btClear) sits at a high z-index and
   was covering the WooCommerce product gallery lightbox when
   opened. WooCommerce's default .pswp z-index is 1500, which the
   theme exceeds. Bump above any reasonable header z-index so the
   lightbox sits on top of everything (including admin bar, where
   applicable — the lightbox already covers the full viewport so
   visual overlap isn't an issue). */
.pswp,
.pswp__bg,
.pswp__scroll-wrap,
.pswp__container,
.pswp__ui {
    z-index: 999999 !important;
}