/**
 * AdvancedWoo — Builder Element Styles (v1.9.0)
 *
 * Product Grid card system + Filter sidebar ported from YooManager v4
 * (ym-* → awoo-*) for production-quality product display and filtering.
 *
 * v1.9.0: Filter sidebar CSS-variable-driven customization (title size/weight,
 * section padding, divider color, checkbox size/style, count badges, toggle icons)
 *
 * @package    AdvancedWoo
 * @subpackage Builder\Assets
 * @author     Linden Alley
 * @license    GPL-2.0-or-later
 * @since      1.0.0
 * @updated    1.9.0
 */

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    --awoo-primary: #1565c0;
    --awoo-primary-hover: #0d47a1;
    --awoo-title-color: #e57373;
    --awoo-price-color: #333;
    --awoo-sale-color: #e53935;
    --awoo-badge-bg: #1565c0;
    --awoo-badge-color: #fff;
    --awoo-incart-color: #43a047;
    --awoo-viewcart-color: #2196f3;
    --awoo-btn-color: #1565c0;
    --awoo-border: #e0e0e0;
    --awoo-card-bg: #fff;
    --awoo-card-radius: 8px;
    --awoo-success: #43a047;
    --awoo-danger: #e53935;
    --awoo-warning: #fb8c00;
    --awoo-text: #333;
    --awoo-text-muted: #999;
    --awoo-bg-light: #f5f5f5;
    --awoo-transition: 0.3s ease;
    --awoo-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --awoo-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* ============================================================
   PRODUCT GRID — Card System (ported from YooManager v4)
   ============================================================ */

.awoo-grid {
    display: grid;
    grid-template-columns: repeat(var(--awoo-columns, 4), 1fr);
    gap: var(--awoo-gap, 15px);
}
@media (max-width: 1199px) { .awoo-grid { grid-template-columns: repeat(var(--awoo-columns-m, 3), 1fr); } }
@media (max-width: 767px)  { .awoo-grid { grid-template-columns: repeat(var(--awoo-columns-s, 2), 1fr); gap: 10px; } }

.awoo-card {
    background: var(--awoo-card-bg);
    border: 1px solid var(--awoo-border);
    border-radius: var(--awoo-card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--awoo-transition), transform var(--awoo-transition);
}
.awoo-card:hover { box-shadow: var(--awoo-shadow-lg); transform: translateY(-2px); }

.awoo-card-media { position: relative; padding: 10px; background: #fff; }
.awoo-image-link { display: block; }
.awoo-image { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

.awoo-card-icons { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.awoo-icon-btn { width: 32px; height: 32px; border: none; background: rgba(255,255,255,0.9); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #999; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 0; }
.awoo-icon-btn:hover { color: var(--awoo-danger); background: #fff; }

.awoo-badge { position: absolute; top: 10px; left: 10px; background: var(--awoo-badge-bg, var(--awoo-btn-color, #1565c0)); color: var(--awoo-badge-color, #fff); padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; z-index: 2; line-height: 1.4; white-space: nowrap; }

.awoo-card-body { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; }

.awoo-title { font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0 0 8px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 58px; }
.awoo-title a { color: var(--awoo-title-color, #e57373); text-decoration: none; }
.awoo-title a:hover { text-decoration: underline; }

.awoo-stock-display { margin-bottom: 8px; }
.awoo-stock-text { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.awoo-in-stock  { color: var(--awoo-success); }
.awoo-low-stock { color: var(--awoo-warning); }
.awoo-out-stock { color: var(--awoo-danger); }
.awoo-stock-progress { height: 4px !important; border-radius: 2px; }

.awoo-price { margin-bottom: 10px; font-size: 16px; }
.awoo-price del { color: #999; font-size: 14px; margin-right: 8px; }
.awoo-price .awoo-sale { color: var(--awoo-sale-color, #e53935); font-weight: 600; font-size: 18px; }

.awoo-actions { display: flex; gap: 6px; margin-top: auto; overflow: visible; align-items: stretch; }

.awoo-qty-box { display: flex; border: 1px solid var(--awoo-border); border-radius: 4px; overflow: hidden; height: 38px; flex-shrink: 0; background: #fff; }
.awoo-qty-input { width: 36px; border: none; text-align: center; font-size: 14px; -moz-appearance: textfield; background: #fff; outline: none; }
.awoo-qty-input::-webkit-outer-spin-button, .awoo-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.awoo-qty-btns { display: flex; flex-direction: column; border-left: 1px solid var(--awoo-border); }
.awoo-qty-btns button { flex: 1; width: 24px; border: none; background: #f5f5f5; cursor: pointer; font-size: 12px; line-height: 1; transition: background 0.2s; padding: 0; color: #333; }
.awoo-qty-btns button:hover { background: #e0e0e0; }
.awoo-qty-btns .awoo-qty-up { border-bottom: 1px solid var(--awoo-border); }

.awoo-btn-group { display: flex; gap: 6px; flex: 1; min-width: 0; align-items: stretch; }
.awoo-btn { height: 38px; border: none; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; padding: 0 8px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; }
.awoo-btn-cart { flex: 1; min-width: 0; background: var(--awoo-btn-color, #1565c0); color: #fff; }
.awoo-btn-cart:hover { background: var(--awoo-primary-hover); }
.awoo-btn-incart { flex: 1; min-width: 0; background: var(--awoo-incart-color, #43a047) !important; color: #fff !important; border: none !important; }
.awoo-btn-incart:hover { opacity: 0.9; }
.awoo-btn-viewcart { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; padding: 0 !important; background: var(--awoo-viewcart-color, #2196f3) !important; color: #fff !important; border: none !important; border-radius: 4px !important; cursor: pointer !important; flex-shrink: 0 !important; transition: background-color 0.2s, transform 0.2s !important; text-decoration: none !important; }
.awoo-btn-viewcart:hover { background: #1976d2 !important; transform: scale(1.05) !important; }
.awoo-btn-viewcart svg { width: 16px !important; height: 16px !important; fill: #fff !important; }
.awoo-out-of-stock { color: var(--awoo-danger); font-size: 13px; margin-top: auto; }

/* ============================================================
   GRID HEADER (sort + results count)
   ============================================================ */

.awoo-grid-header { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #ddd; }
.awoo-grid-header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.awoo-results-count { font-size: 14px; color: #666; }
.awoo-sort-dropdown { display: flex; align-items: center; gap: 10px; }
.awoo-sort-dropdown label { font-size: 14px; color: #666; white-space: nowrap; }
.awoo-sort-select { padding: 8px 35px 8px 12px; font-size: 14px; border: 1px solid #ddd; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; -webkit-appearance: none; cursor: pointer; min-width: 150px; max-width: 200px; }
.awoo-sort-select:focus { outline: none; border-color: #1565c0; }
.awoo-sort-select:hover { border-color: #999; }
.awoo-category-title { margin-bottom: 30px; }
.awoo-cat-heading { line-height: 1.2; }

/* ============================================================
   FILTER SIDEBAR (v1.9.0 — Lowe's-inspired, CSS-variable-driven)
   ============================================================ */

.awoo-filter-sidebar { background: #fff; border-radius: var(--awoo-filter-radius, 0); }
.awoo-filter-mobile { border: none; border-radius: 0; }

/* Active filters bar */
.awoo-active-filters { padding: 12px 0; border-bottom: 1px solid var(--awoo-filter-divider, #e5e5e5); }
.awoo-active-header { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.awoo-active-header a { color: var(--awoo-filter-accent, #2563eb); text-decoration: none; }
.awoo-active-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.awoo-filter-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--awoo-filter-accent, #2563eb); color: #fff; border-radius: 3px; font-size: 11px; }
.awoo-filter-tag a { color: #fff; text-decoration: none; font-size: 14px; line-height: 1; opacity: 0.8; }
.awoo-filter-tag a:hover { opacity: 1; }

/* Filter sections — divider color from CSS variable (v1.9.0) */
.awoo-filter-section { border-bottom: 1px solid var(--awoo-filter-divider, #e5e5e5); }
.awoo-filter-section:last-child { border-bottom: none; }

/* Section header — CSS-variable-driven size/weight/padding (v1.9.0) */
.awoo-filter-header { display: flex; justify-content: space-between; align-items: center; padding: var(--awoo-filter-section-pad, 16px 0); cursor: pointer; user-select: none; }
.awoo-filter-title { font-weight: var(--awoo-filter-title-weight, 700); font-size: var(--awoo-filter-title-size, 15px); color: #1a1a1a; letter-spacing: -0.01em; display: flex; align-items: center; }
.awoo-filter-arrow { display: flex; align-items: center; transition: transform 0.2s; }
.awoo-filter-section.collapsed .awoo-filter-arrow { transform: rotate(180deg); }

/* Section body */
.awoo-filter-body { padding: 0 0 16px; }
.awoo-filter-section.collapsed .awoo-filter-body { display: none; }

/* Section icon (uploaded image) next to title (v1.9.0) */
.awoo-filter-section-icon { margin-right: 8px; vertical-align: middle; }

/* Plus/minus toggle icon variant (v1.9.0) */
.awoo-toggle-plus { transition: transform 0.2s; }
.awoo-filter-section:not(.collapsed) .awoo-toggle-plus { transform: rotate(90deg); }

/* Search input inside filter section */
.awoo-filter-search { position: relative; margin-bottom: 12px; }
.awoo-filter-search-input { width: 100%; padding: 10px 36px 10px 14px; border: 1px solid #ccc; border-radius: 20px; font-size: 14px; color: #333; background: #fff; outline: none; box-sizing: border-box; }
.awoo-filter-search-input:focus { border-color: var(--awoo-filter-accent, #2563eb); }
.awoo-filter-search-input::placeholder { color: #aaa; }
.awoo-filter-search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* Department / category link list — flex display for count alignment (v1.9.0) */
.awoo-filter-links { list-style: none; margin: 0; padding: 0; }
.awoo-filter-links li { margin: 0; }
.awoo-filter-links a { display: flex; align-items: center; padding: 7px 0; color: #333; text-decoration: none; font-size: 14px; line-height: 1.4; transition: color 0.15s; }
.awoo-filter-links a:hover { color: var(--awoo-filter-accent, #2563eb); }
.awoo-filter-links li.active a { color: var(--awoo-filter-accent, #2563eb); font-weight: 600; }

/* Checkbox list — CSS-variable-driven size (v1.9.0) */
.awoo-filter-checks { list-style: none; margin: 0; padding: 0; }
.awoo-filter-checks li { margin: 0; }
.awoo-check-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: #333; text-decoration: none; font-size: 14px; line-height: 1.4; transition: color 0.15s; }
.awoo-check-item:hover { color: var(--awoo-filter-accent, #2563eb); }
.awoo-checkbox { width: var(--awoo-filter-checkbox-size, 18px); height: var(--awoo-filter-checkbox-size, 18px); min-width: var(--awoo-filter-checkbox-size, 18px); border: 1.5px solid #bbb; border-radius: 3px; display: flex; align-items: center; justify-content: center; background: #fff; transition: all 0.15s; }
.awoo-check-item.checked .awoo-checkbox { background: var(--awoo-filter-accent, #2563eb); border-color: var(--awoo-filter-accent, #2563eb); }
.awoo-check-label { flex: 1; }

/* Round checkbox variant (v1.9.0) */
.awoo-checkbox-round { border-radius: 50%; }

/* Count display styles (v1.9.0) */
.awoo-count-inline { color: #999; font-size: 13px; margin-left: 4px; }
.awoo-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 5px; background: #eee; color: #666; font-size: 11px; font-weight: 600; border-radius: 9px; margin-left: auto; }
.awoo-check-item.checked .awoo-count-badge { background: var(--awoo-filter-accent, #2563eb); color: #fff; }

/* + See All / - Show Less button */
.awoo-see-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 0; background: none; border: none; color: var(--awoo-filter-accent, #2563eb); font-size: 14px; font-weight: 500; cursor: pointer; }
.awoo-see-all:hover { text-decoration: underline; }
.awoo-see-all-plus, .awoo-see-all-minus { font-weight: 700; font-size: 16px; }

/* Hidden items */
.awoo-hidden { display: none !important; }

/* Price filter */
.awoo-price-filter { padding: 5px 0; }
.awoo-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.awoo-price-field { flex: 1; display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; background: #fff; }
.awoo-price-field:focus-within { border-color: var(--awoo-filter-accent, #2563eb); }
.awoo-currency { padding: 8px; background: #f5f5f5; color: #666; font-size: 13px; border-right: 1px solid #ddd; }
.awoo-price-field input { flex: 1; border: none; padding: 8px; font-size: 13px; width: 100%; min-width: 0; outline: none; -moz-appearance: textfield; }
.awoo-price-field input::-webkit-outer-spin-button, .awoo-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.awoo-price-sep { color: #999; }
.awoo-price-btn { width: 100%; padding: 10px; background: var(--awoo-filter-accent, #2563eb); color: #fff; border: none; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; }
.awoo-price-btn:hover { opacity: 0.9; }

/* Mobile filter trigger */
.awoo-filter-trigger .uk-button { height: 44px; }

/* ============================================================
   LOAD MORE
   ============================================================ */

.awoo-load-more-wrapper { text-align: center; margin-top: 30px; padding-top: 20px; }
.awoo-load-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 40px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(21,101,192,0.3); }
.awoo-load-more-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(21,101,192,0.4); }
.awoo-load-more-count { margin-top: 15px; font-size: 13px; color: #666; }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 959px) {
    .awoo-filter-links a, .awoo-check-item { padding: 10px 0; font-size: 15px; }
    .awoo-checkbox { width: 22px; height: 22px; min-width: 22px; }
    .awoo-filter-header { padding: 18px 0; }
}

@media (max-width: 767px) {
    .awoo-card-body { padding: 10px; }
    .awoo-title { font-size: 13px; min-height: 50px; -webkit-line-clamp: 2; margin-bottom: 6px; }
    .awoo-price { font-size: 14px; margin-bottom: 8px; }
    .awoo-price del { font-size: 12px; }
    .awoo-price .awoo-sale { font-size: 16px; }
    .awoo-actions { flex-direction: row; gap: 6px; }
    .awoo-qty-box { height: 34px; }
    .awoo-qty-input { width: 30px; font-size: 13px; }
    .awoo-qty-btns button { width: 20px; font-size: 11px; }
    .awoo-btn { height: 34px; font-size: 12px; padding: 0 8px; }
    .awoo-badge { font-size: 10px; padding: 4px 8px; }
    .awoo-icon-btn { width: 28px; height: 28px; }
    .awoo-icon-btn svg { width: 14px; height: 14px; }
    .awoo-grid-header-inner { flex-direction: column; align-items: stretch; }
    .awoo-sort-dropdown { flex-direction: column; align-items: stretch; gap: 5px; }
    .awoo-sort-select { width: 100%; max-width: none; }
    .awoo-category-title .awoo-cat-heading { font-size: 24px !important; }
}

@media (max-width: 639px) {
    .awoo-btn-viewcart { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; }
}

/* ============================================================
   PRODUCT PAGE — Dotted Leader Attributes
   ============================================================ */

.awoo-meta-row { display: flex; align-items: baseline; font-size: 14px; line-height: 1.7; }
.awoo-meta-label { color: #333; flex-shrink: 0; }
.awoo-meta-dots { flex: 1; border-bottom: 1px dotted #ccc; margin: 0 8px; min-width: 20px; position: relative; top: -4px; }
.awoo-meta-value { flex-shrink: 0; text-align: right; }

.awoo-info-boxes-row { display: flex; gap: 15px; margin: 15px 0; }
.awoo-info-box-wrap { flex: 1; display: flex; }
.awoo-info-box { padding: 15px; border-radius: 6px; display: flex; gap: 12px; align-items: flex-start; flex: 1; }
.awoo-info-icon { flex-shrink: 0; }
.awoo-info-text { font-size: 13px; line-height: 1.5; color: #333; }
.awoo-info-sidebar { display: flex; flex-direction: column; gap: 10px; }

.awoo-gallery-main { border: 1px solid var(--awoo-border); border-radius: 4px; padding: 15px; background: #fff; }
.awoo-thumb { cursor: pointer; border: 2px solid transparent; border-radius: 4px; overflow: hidden; transition: border-color 0.2s; }
.awoo-thumb:hover, .awoo-thumb.awoo-active { border-color: #1e87f0; }

.awoo-price-block { margin: 12px 0; }
.awoo-price-old { color: #999; font-size: 16px; margin-right: 10px; }
.awoo-price-sale { color: var(--awoo-sale-color); font-size: 26px; font-weight: 600; }
.awoo-price-current { font-size: 26px; font-weight: 600; color: #333; }

.awoo-cart-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.awoo-cart-btn { height: 44px; padding: 0 24px; background: var(--awoo-success); color: #fff; border: none; border-radius: 4px; font-size: 15px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s; }
.awoo-cart-btn:hover { background: #388e3c; }

.awoo-stars { display: flex; gap: 2px; }
.awoo-star { font-size: 18px; color: #e0e0e0; }
.awoo-star-filled { color: #4caf50; }

.awoo-tabs-section { margin-top: 20px; border-top: 1px solid var(--awoo-border); padding-top: 15px; }

.awoo-spec-table { width: 100%; border-collapse: collapse; margin: 0; }
.awoo-spec-table tr { border-bottom: 1px solid #f0f0f0; }
.awoo-spec-table tr:nth-child(even) { background: #fafafa; }
.awoo-spec-table th, .awoo-spec-table td { padding: 10px 12px; text-align: left; }
.awoo-spec-table th { width: 35%; font-weight: 500; color: #333; }
.awoo-spec-table td { color: #666; }

/* ============================================================
   CATEGORY GRID
   ============================================================ */

.awoo-category-grid { display: grid; grid-auto-flow: row; gap: 1.5rem; }
.awoo-category-card { position: relative; overflow: hidden; border-radius: var(--awoo-card-radius); cursor: pointer; }
.awoo-category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.awoo-category-card:hover img { transform: scale(1.05); }
.awoo-category-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding: 1.5rem; text-align: center; transition: all var(--awoo-transition); }
.awoo-category-overlay.awoo-overlay-gradient { background: linear-gradient(transparent 40%, rgba(0,0,0,0.7) 100%); }
.awoo-category-overlay.awoo-overlay-dark { background: rgba(0,0,0,0.5); }
.awoo-category-overlay.awoo-overlay-light { background: rgba(255,255,255,0.7); }
.awoo-category-name { font-size: 1.25rem; font-weight: 600; color: #fff; }

/* ============================================================
   AGE VERIFICATION / STATE REGULATIONS
   ============================================================ */

.awoo-age-verification-wrapper .uk-modal-dialog { border-radius: 8px; overflow: hidden; }
.awoo-age-confirm:hover, .awoo-age-deny:hover { opacity: 0.9; transition: opacity 0.3s ease; }
.awoo-state-card { transition: all 0.3s ease; }
.awoo-card-hover-shadow:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.awoo-card-hover-scale:hover { transform: scale(1.02); }
.awoo-state-search { padding: 12px; border: 1px solid #ddd; border-radius: 4px; width: 100%; }
.awoo-category-filter.active { background-color: #007bff; color: white; border-color: #007bff; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes awoo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes awoo-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.awoo-fade-in { animation: awoo-fade-in var(--awoo-transition); }
.awoo-slide-up { animation: awoo-slide-up var(--awoo-transition); }
.awoo-card.awoo-newly-loaded { animation: awoo-slide-up 0.4s ease-out forwards; }

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    .awoo-actions, .awoo-qty-box, .awoo-load-more-wrapper, .awoo-icon-btn, .awoo-age-verification-wrapper, .awoo-filter-sidebar, .awoo-filter-trigger { display: none !important; }
    .awoo-card { page-break-inside: avoid; }
}