/*
 * AstraVera Custom Shop — CSS v3.1 FIXED
 * Жёсткая изоляция от глобальных стилей темы.
 * Исправлено: SVG-иконки, слайдер, топбар, подчёркивания, кнопки.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   ТОКЕНЫ
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-shop-container {
    --av-cream:      #F9F8F3;
    --av-cream-d:    #F0EEE6;
    --av-bronze:     #4A3B2C;
    --av-bronze-l:   #6B5240;
    --av-bronze-xl:  #9C7B5C;
    --av-gold:       #C4A265;
    --av-sand:       #E8E2D0;
    --av-sand-d:     #D3C9B0;
    --av-white:      #FFFFFF;
    --av-text:       #2D2318;
    --av-muted:      #8B7B6B;
    --av-muted-l:    #B8A898;
    --av-green:      #3D8B5E;
    --av-yellow:     #B8860B;
    --av-red:        #C0392B;
    --av-sh-xs:      0 1px 4px rgba(74,59,44,.06);
    --av-sh-sm:      0 2px 12px rgba(74,59,44,.10);
    --av-sh-md:      0 8px 28px rgba(74,59,44,.14);
    --av-sh-lg:      0 20px 50px rgba(74,59,44,.20);
    --av-r:          10px;
    --av-r-lg:       14px;
    --av-ease:       cubic-bezier(.4,0,.2,1);
    --av-t:          220ms;
    --av-t-slow:     380ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЖЁСТКИЙ СБРОС — изолируем от глобального CSS темы
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-shop-container,
.astra-shop-container * {
    box-sizing: border-box;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Убиваем ВСЕ подчёркивания */
.astra-shop-container a,
.astra-shop-container a:link,
.astra-shop-container a:visited,
.astra-shop-container a:hover,
.astra-shop-container a:focus,
.astra-shop-container a:active {
    text-decoration: none !important;
    color: inherit;
}

/* Сброс кнопок (тема может добавлять border, background, color) */
.astra-shop-container button {
    font-family:  'Inter', system-ui, sans-serif;
    cursor:       pointer;
    border:       none;
    background:   none;
    padding:      0;
    margin:       0;
    line-height:  1;
    appearance:   none;
    -webkit-appearance: none;
}

/* Сброс инпутов */
.astra-shop-container input,
.astra-shop-container select,
.astra-shop-container textarea {
    font-family: 'Inter', system-ui, sans-serif;
    font-size:   14px;
    color:       var(--av-text);
    appearance:  none;
    -webkit-appearance: none;
    outline:     none;
    border:      none;
    background:  transparent;
    margin:      0;
    padding:     0;
}

/* SVG всегда display:block, без подчёркиваний */
.astra-shop-container svg {
    display:        block;
    flex-shrink:    0;
    pointer-events: none;
    text-decoration: none;
}

/* Параграфы и заголовки без лишних отступов */
.astra-shop-container h1,
.astra-shop-container h2,
.astra-shop-container h3,
.astra-shop-container p,
.astra-shop-container ul,
.astra-shop-container li {
    margin:     0;
    padding:    0;
    list-style: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-shop-container {
    font-size:  15px;
    line-height: 1.5;
    color:      var(--av-text);
    background: var(--av-cream);
    padding:    32px 20px 64px;
    max-width:  1360px;
    margin:     0 auto;

    display:               grid;
    grid-template-columns: 260px 1fr;
    gap:                   28px;
    align-items:           start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-shop-sidebar {
    position:       sticky;
    top:            24px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    min-width:      0;
}

.astra-filter-block {
    background:    var(--av-white);
    border-radius: var(--av-r-lg);
    border:        1px solid var(--av-sand);
    overflow:      hidden;
    box-shadow:    var(--av-sh-xs);
    transition:    box-shadow var(--av-t) var(--av-ease);
}

.astra-filter-block:hover { box-shadow: var(--av-sh-sm); }

/* ── Аккордеон-кнопка ──────────────────────────────────────────────────── */

.astra-filter-toggle {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    width:           100%;
    padding:         13px 15px !important;
    background:      none !important;
    border:          none !important;
    box-shadow:      none !important;
    cursor:          pointer;
    gap:             8px;
    transition:      background var(--av-t) var(--av-ease);
    color:           var(--av-text);
    text-align:      left;
}

.astra-filter-toggle:hover { background: var(--av-cream) !important; }

.astra-filter-label {
    font-family:    'Cormorant Garamond', Georgia, serif !important;
    font-size:      11px !important;
    font-weight:    600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color:          var(--av-muted) !important;
    margin:         0 !important;
    pointer-events: none;
    line-height:    1;
}

/* SVG-стрелка аккордеона — принудительный размер */
.astra-toggle-arrow {
    width:       15px !important;
    height:      15px !important;
    min-width:   15px;
    color:       var(--av-muted);
    transition:  transform var(--av-t) var(--av-ease);
    stroke:      currentColor;
}

.astra-filter-toggle.is-collapsed .astra-toggle-arrow {
    transform: rotate(-90deg);
}

/* ── ПОИСК ─────────────────────────────────────────────────────────────── */

.astra-search-block { overflow: visible; }

.astra-search-wrap {
    position: relative;
    padding:  5px;
    display:  flex;
    align-items: center;
}

/* SVG-иконка лупы — жёсткие размеры, чтобы шрифт не подменял */
.astra-search-icon {
    position:    absolute !important;
    left:        14px !important;
    top:         50% !important;
    transform:   translateY(-50%) !important;
    width:       16px !important;
    height:      16px !important;
    min-width:   16px !important;
    min-height:  16px !important;
    color:       var(--av-muted);
    pointer-events: none;
    transition:  color var(--av-t) var(--av-ease);
    /* Сброс любых font-family чтобы SVG не превратился в символ */
    font-family: none !important;
    font-size:   0 !important;
    stroke:      currentColor;
    fill:        none;
}

.astra-search-input {
    width:            100% !important;
    padding:          11px 36px 11px 40px !important;
    border:           1.5px solid var(--av-sand) !important;
    border-radius:    var(--av-r) !important;
    background:       var(--av-cream) !important;
    font-family:      'Inter', system-ui, sans-serif !important;
    font-size:        14px !important;
    color:            var(--av-text) !important;
    outline:          none !important;
    box-shadow:       none !important;
    transition:       border-color var(--av-t) var(--av-ease),
                      box-shadow   var(--av-t) var(--av-ease),
                      background   var(--av-t) var(--av-ease) !important;
    appearance:       none !important;
    -webkit-appearance: none !important;
    line-height:      normal !important;
}

.astra-search-input::placeholder {
    color:   var(--av-muted-l) !important;
    opacity: 1 !important;
}

.astra-search-input:focus {
    border-color: var(--av-bronze) !important;
    background:   var(--av-white) !important;
    box-shadow:   0 0 0 3px rgba(74,59,44,.09) !important;
}

.astra-search-input:focus ~ .astra-search-icon,
.astra-search-wrap:focus-within .astra-search-icon {
    color: var(--av-bronze);
}

/* Кнопка очистки поиска */
.astra-search-clear {
    position:        absolute !important;
    right:           10px !important;
    top:             50% !important;
    transform:       translateY(-50%) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           24px !important;
    height:          24px !important;
    border-radius:   50% !important;
    background:      var(--av-sand) !important;
    border:          none !important;
    color:           var(--av-muted) !important;
    cursor:          pointer !important;
    padding:         0 !important;
    box-shadow:      none !important;
    transition:      background var(--av-t), color var(--av-t) !important;
}

.astra-search-clear svg {
    width:  11px !important;
    height: 11px !important;
}

.astra-search-clear:hover {
    background: var(--av-bronze) !important;
    color:      var(--av-white) !important;
}

/* ── Категории ─────────────────────────────────────────────────────────── */

.astra-cat-list {
    padding: 4px 8px 10px;
    display: flex;
    flex-direction: column;
    gap:     1px;
    overflow: hidden;
    transition: max-height var(--av-t-slow) var(--av-ease);
}

.astra-cat-item {
    display:       flex !important;
    align-items:   center !important;
    gap:           9px;
    padding:       8px 10px !important;
    border-radius: var(--av-r);
    cursor:        pointer;
    transition:    background var(--av-t), color var(--av-t);
    position:      relative;
    color:         var(--av-text);
    margin:        0 !important;
}

.astra-cat-item:hover { background: var(--av-cream); }

.astra-cat-item.is-active {
    background: var(--av-bronze) !important;
    color:      var(--av-white) !important;
}

.astra-cat-item.is-active .astra-cat-count {
    background: rgba(255,255,255,.18) !important;
    color:      rgba(255,255,255,.85) !important;
}

.astra-cat-item input[type="radio"] {
    position:       absolute !important;
    opacity:        0 !important;
    width:          0 !important;
    height:         0 !important;
    pointer-events: none !important;
    margin:         0 !important;
    padding:        0 !important;
}

.astra-cat-name {
    flex:      1;
    font-size: 14px;
    color:     inherit;
    min-width: 0;
}

.astra-cat-count {
    font-size:     11px;
    padding:       2px 7px;
    border-radius: 20px;
    background:    var(--av-cream-d);
    color:         var(--av-muted);
    flex-shrink:   0;
    transition:    background var(--av-t), color var(--av-t);
    font-weight:   500;
}

/* ── Теги ──────────────────────────────────────────────────────────────── */

.astra-tag-cloud {
    padding:   4px 12px 12px;
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    overflow:  hidden;
    transition: max-height var(--av-t-slow) var(--av-ease);
}

.astra-tag-btn {
    padding:       5px 11px !important;
    border-radius: 20px !important;
    border:        1.5px solid var(--av-sand) !important;
    background:    transparent !important;
    font-size:     12px !important;
    color:         var(--av-muted) !important;
    cursor:        pointer !important;
    box-shadow:    none !important;
    transition:    border-color var(--av-t), background var(--av-t), color var(--av-t), transform var(--av-t) !important;
    white-space:   nowrap;
    line-height:   normal !important;
}

.astra-tag-btn:hover {
    border-color: var(--av-bronze-xl) !important;
    color:        var(--av-bronze) !important;
    transform:    translateY(-1px);
}

.astra-tag-btn.is-active {
    background:   var(--av-bronze) !important;
    border-color: var(--av-bronze) !important;
    color:        var(--av-white) !important;
}

/* ── ЦЕНОВОЙ СЛАЙДЕР ───────────────────────────────────────────────────── */

#astra-price-panel { padding: 0 14px 14px; }

.astra-price-inputs {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 16px;
}

.astra-price-input-wrap {
    flex:          1;
    display:       flex;
    align-items:   center;
    gap:           5px;
    background:    var(--av-cream);
    border:        1.5px solid var(--av-sand);
    border-radius: var(--av-r);
    padding:       7px 10px;
    transition:    border-color var(--av-t), box-shadow var(--av-t);
    min-width:     0;
}

.astra-price-input-wrap:focus-within {
    border-color: var(--av-bronze);
    box-shadow:   0 0 0 3px rgba(74,59,44,.08);
}

.astra-price-input-label {
    font-size:  11px;
    color:      var(--av-muted);
    flex-shrink: 0;
    font-weight: 500;
}

.astra-price-sym {
    font-size:  13px;
    color:      var(--av-muted);
    flex-shrink: 0;
}

.astra-price-input {
    width:      100% !important;
    border:     none !important;
    background: transparent !important;
    font-size:  13px !important;
    font-family:'Inter', sans-serif !important;
    color:      var(--av-text) !important;
    outline:    none !important;
    padding:    0 !important;
    min-width:  0;
    /* Убираем стрелки у number */
    -moz-appearance: textfield !important;
}

.astra-price-input::-webkit-inner-spin-button,
.astra-price-input::-webkit-outer-spin-button { -webkit-appearance: none !important; }

.astra-price-input-sep {
    width:      14px;
    height:     1.5px;
    background: var(--av-sand-d);
    flex-shrink: 0;
}

/* Range wrapper */
.astra-range-wrap {
    position:   relative;
    height:     30px;
    padding:    0 4px;
    user-select: none;
}

/* Трек */
.astra-range-track {
    position:      absolute;
    left:          4px;
    right:         4px;
    top:           50%;
    height:        5px;
    transform:     translateY(-50%);
    background:    var(--av-sand);
    border-radius: 5px;
    pointer-events: none;
    overflow:      visible;
}

/* Заполнение */
.astra-range-fill {
    position:      absolute;
    top:           0;
    height:        100%;
    background:    var(--av-bronze);
    border-radius: 5px;
    pointer-events: none;
    transition:    none; /* Убираем transition — должен двигаться мгновенно */
}

/*
 * КЛЮЧЕВОЙ ФИС СЛАЙДЕРА:
 * Два <input type="range"> лежат абсолютно поверх трека.
 * z-index и pointer-events распределены так, чтобы оба работали.
 */
.astra-range-input {
    position:           absolute !important;
    top:                50% !important;
    left:               0 !important;
    right:              0 !important;
    width:              100% !important;
    height:             100% !important;
    min-height:         30px;
    transform:          translateY(-50%) !important;
    background:         transparent !important;
    border:             none !important;
    box-shadow:         none !important;
    outline:            none !important;
    margin:             0 !important;
    padding:            0 !important;
    pointer-events:     none; /* Включается через thumb */
    -webkit-appearance: none !important;
    appearance:         none !important;
    cursor:             pointer;
}

.astra-range-min { z-index: 3; }
.astra-range-max { z-index: 4; }

/* Когда min = max — min поверх */
.astra-range-min::-webkit-slider-thumb { z-index: 5; }

/* ─── Webkit thumb ─── */
.astra-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance:         none !important;
    pointer-events:     all !important; /* Важно: только thumb кликабелен */
    width:              20px !important;
    height:             20px !important;
    border-radius:      50% !important;
    background:         var(--av-white) !important;
    border:             2.5px solid var(--av-bronze) !important;
    box-shadow:         0 2px 8px rgba(74,59,44,.22) !important;
    cursor:             grab !important;
    transition:         transform 120ms ease, box-shadow 120ms ease !important;
    position:           relative;
    z-index:            5;
}

.astra-range-input:active::-webkit-slider-thumb,
.astra-range-input:hover::-webkit-slider-thumb {
    transform:  scale(1.2) !important;
    box-shadow: 0 0 0 5px rgba(74,59,44,.12), 0 2px 8px rgba(74,59,44,.25) !important;
    cursor:     grabbing !important;
}

/* ─── Firefox thumb ─── */
.astra-range-input::-moz-range-thumb {
    pointer-events: all !important;
    width:          18px !important;
    height:         18px !important;
    border-radius:  50% !important;
    background:     var(--av-white) !important;
    border:         2.5px solid var(--av-bronze) !important;
    box-shadow:     0 2px 8px rgba(74,59,44,.22) !important;
    cursor:         grab !important;
}

.astra-range-input::-moz-range-track {
    background:    transparent !important;
    border:        none !important;
    height:        5px;
}

/* ─── Firefox fill (лишнее) ─── */
.astra-range-input::-moz-range-progress {
    background: transparent;
}

/* ── Наличие ───────────────────────────────────────────────────────────── */

.astra-stock-filter {
    padding:        4px 14px 12px;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    overflow:       hidden;
    transition:     max-height var(--av-t-slow) var(--av-ease);
}

.astra-stock-opt {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-size:   13px;
    padding:     3px 0;
    color:       var(--av-text);
}

.astra-stock-opt input[type="checkbox"] {
    width:        15px !important;
    height:       15px !important;
    cursor:       pointer !important;
    accent-color: var(--av-bronze);
    flex-shrink:  0;
    appearance:   auto !important;
    -webkit-appearance: auto !important;
    border:       none !important;
    background:   transparent !important;
    margin:       0 !important;
    padding:      0 !important;
}

.astra-stock-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.astra-stock-dot--green  { background: var(--av-green); }
.astra-stock-dot--yellow { background: var(--av-yellow); }
.astra-stock-dot--red    { background: var(--av-red); }

/* ── Сброс ─────────────────────────────────────────────────────────────── */

.astra-reset-btn {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             7px !important;
    width:           100%;
    padding:         11px 16px !important;
    background:      transparent !important;
    border:          1.5px solid var(--av-sand-d) !important;
    border-radius:   var(--av-r) !important;
    font-size:       13px !important;
    color:           var(--av-muted) !important;
    cursor:          pointer !important;
    box-shadow:      none !important;
    transition:      border-color var(--av-t), color var(--av-t), background var(--av-t) !important;
    line-height:     normal !important;
}

.astra-reset-btn svg {
    width:  14px !important;
    height: 14px !important;
}

.astra-reset-btn:hover {
    border-color: var(--av-bronze) !important;
    color:        var(--av-bronze) !important;
    background:   rgba(74,59,44,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN / ТОПБАР
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-shop-main { min-height: 400px; }

.astra-shop-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   18px;
    gap:             12px;
    flex-wrap:       wrap;
    padding:         0;
}

.astra-results-count {
    font-size: 13px;
    color:     var(--av-muted);
    flex:      1;
    min-width: 0;
}

/* Правая часть топбара: кнопки вида + сортировка в одном ряду */
.astra-topbar-right {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

/* Переключатель вида */
.astra-view-switcher {
    display:       flex;
    align-items:   center;
    gap:           2px;
    background:    var(--av-white);
    border:        1.5px solid var(--av-sand);
    border-radius: var(--av-r);
    padding:       3px;
    flex-shrink:   0;
}

.astra-view-btn {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           32px !important;
    height:          32px !important;
    border:          none !important;
    border-radius:   7px !important;
    background:      transparent !important;
    color:           var(--av-muted) !important;
    cursor:          pointer !important;
    padding:         0 !important;
    box-shadow:      none !important;
    transition:      background var(--av-t), color var(--av-t) !important;
}

.astra-view-btn svg {
    width:  15px !important;
    height: 15px !important;
    stroke: currentColor;
}

.astra-view-btn.is-active,
.astra-view-btn:hover {
    background: var(--av-bronze) !important;
    color:      var(--av-white) !important;
}

/* Сортировка */
.astra-sort-select {
    appearance:         none !important;
    -webkit-appearance: none !important;
    padding:            9px 32px 9px 12px !important;
    border:             1.5px solid var(--av-sand) !important;
    border-radius:      var(--av-r) !important;
    background:         var(--av-white)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B7B6B' stroke-width='1.5'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E")
        no-repeat right 8px center / 14px !important;
    font-family:        'Inter', sans-serif !important;
    font-size:          13px !important;
    color:              var(--av-text) !important;
    cursor:             pointer;
    outline:            none !important;
    box-shadow:         none !important;
    height:             auto !important;
    line-height:        normal !important;
    transition:         border-color var(--av-t), box-shadow var(--av-t) !important;
}

.astra-sort-select:focus {
    border-color: var(--av-bronze) !important;
    box-shadow:   0 0 0 3px rgba(74,59,44,.08) !important;
}

/* Активные фильтры */
.astra-active-filters {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 16px;
    align-items: center;
}

.astra-filter-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       4px 10px;
    background:    var(--av-bronze);
    color:         var(--av-white);
    border-radius: 20px;
    font-size:     12px;
    white-space:   nowrap;
    animation:     astraChipIn .2s var(--av-ease) both;
    font-family:   'Inter', sans-serif;
}

@keyframes astraChipIn {
    from { opacity: 0; transform: scale(.82) translateY(-3px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.astra-chip-remove {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           16px !important;
    height:          16px !important;
    border:          none !important;
    border-radius:   50% !important;
    background:      rgba(255,255,255,.2) !important;
    color:           var(--av-white) !important;
    cursor:          pointer !important;
    padding:         0 !important;
    box-shadow:      none !important;
    transition:      background var(--av-t) !important;
}

.astra-chip-remove svg { width: 9px !important; height: 9px !important; }
.astra-chip-remove:hover { background: rgba(255,255,255,.4) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   СЕТКА ТОВАРОВ
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-products-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   18px;
}

.astra-products-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.astra-products-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }

.astra-products-grid.astra-grid--loading { opacity: .4; pointer-events: none; }

/* Вид списка */
.astra-products-grid.astra-grid--list {
    grid-template-columns: 1fr;
    gap:                   10px;
}

.astra-grid--list .astra-product-card     { flex-direction: row; }
.astra-grid--list .astra-card-img-wrap    { width: 130px; min-width: 130px; padding-top: 0; height: 130px; }
.astra-grid--list .astra-card-title       { -webkit-line-clamp: 1; font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   КАРТОЧКА ТОВАРА
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-product-card {
    background:     var(--av-white);
    border-radius:  var(--av-r);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    position:       relative;
    border:         1px solid transparent;
    box-shadow:     var(--av-sh-xs);

    /* Анимация появления */
    opacity:   0;
    transform: translateY(12px);
    transition:
        opacity      .36s var(--av-ease),
        transform    .36s var(--av-ease),
        box-shadow   var(--av-t) var(--av-ease),
        border-color var(--av-t) var(--av-ease);
}

.astra-product-card.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.astra-product-card:hover {
    box-shadow:   var(--av-sh-md);
    border-color: var(--av-sand);
    z-index:      2;
}

/* Фото 1:1 */
.astra-card-img-wrap {
    display:     block;
    position:    relative;
    width:       100%;
    padding-top: 100%;
    overflow:    hidden;
    background:  var(--av-cream);
    flex-shrink: 0;
}

.astra-card-img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.astra-card-img--main {
    z-index:    1;
    transition: opacity var(--av-t-slow) var(--av-ease),
                transform var(--av-t-slow) var(--av-ease);
}

.astra-card-img--hover {
    z-index:    2;
    opacity:    0;
    transition: opacity var(--av-t-slow) var(--av-ease);
}

.astra-product-card:hover .astra-card-img--hover { opacity: 1; }
.astra-product-card:hover .astra-card-img--main  { transform: scale(1.04); }

/* Бейджи */
.astra-card-badge {
    position:       absolute;
    top:            10px;
    left:           10px;
    z-index:        5;
    font-size:      11px !important;
    font-weight:    600 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding:        3px 9px;
    border-radius:  20px;
    pointer-events: none;
    font-family:    'Inter', sans-serif !important;
    line-height:    normal !important;
}

.astra-card-badge--new  { background: var(--av-bronze);  color: var(--av-white); }
.astra-card-badge--hit  { background: var(--av-gold);    color: var(--av-white); }
.astra-card-badge--sale { background: #C0392B;            color: var(--av-white); }

/* Статус наличия */
.astra-card-stock {
    display:     block;
    font-size:   11px;
    padding:     3px 12px 5px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.astra-card-stock--out   { color: var(--av-red); }
.astra-card-stock--order { color: var(--av-yellow); }

/* Body */
.astra-card-body {
    padding:        12px 13px 13px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

/* Название — без подчёркиваний, с line-clamp */
.astra-card-title-link,
.astra-card-title-link:hover,
.astra-card-title-link:visited {
    display:         block !important;
    text-decoration: none !important;
    color:           inherit !important;
}

.astra-card-title {
    font-family:        'Cormorant Garamond', Georgia, serif !important;
    font-size:          16px !important;
    font-weight:        500 !important;
    line-height:        1.35 !important;
    color:              var(--av-text) !important;
    margin:             0 !important;
    padding:            0 !important;
    text-decoration:    none !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    transition:         color var(--av-t) var(--av-ease);
}

.astra-card-title-link:hover .astra-card-title { color: var(--av-bronze) !important; }

/* Свотчи */
.astra-card-swatches {
    display:    flex;
    flex-wrap:  wrap;
    gap:        5px;
    align-items: center;
}

.astra-swatch {
    width:           22px !important;
    height:          22px !important;
    border-radius:   50% !important;
    border:          2px solid var(--av-sand) !important;
    cursor:          pointer !important;
    background-size: cover !important;
    background-color: var(--av-sand);
    background-position: center;
    padding:         0 !important;
    box-shadow:      none !important;
    transition:      border-color var(--av-t), transform var(--av-t), box-shadow var(--av-t) !important;
}

.astra-swatch:hover {
    border-color: var(--av-bronze-xl) !important;
    transform:    scale(1.12);
}

.astra-swatch.is-active {
    border-color: var(--av-bronze) !important;
    box-shadow:   0 0 0 2px var(--av-white), 0 0 0 3.5px var(--av-bronze) !important;
}

.astra-swatch-more { font-size: 11px; color: var(--av-muted); padding: 2px 3px; }

/* Footer карточки */
.astra-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    margin-top:      auto;
    padding-top:     4px;
}

.astra-card-price {
    font-size:   15px !important;
    font-weight: 600 !important;
    color:       var(--av-bronze) !important;
    line-height: 1.2;
    display:     flex;
    align-items: baseline;
    flex-wrap:   wrap;
    gap:         5px;
    font-family: 'Inter', sans-serif !important;
}

.astra-card-price del {
    color:           var(--av-muted-l) !important;
    font-size:       12px !important;
    font-weight:     400 !important;
    text-decoration: line-through !important;
}

.astra-card-price ins { text-decoration: none !important; }

/* ─── Кнопка «В корзину» — полный сброс + наши стили ─── */
.astra-card-cart-btn {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           36px !important;
    height:          36px !important;
    min-width:       36px !important;
    border-radius:   50% !important;
    border:          1.5px solid var(--av-bronze) !important;
    background:      transparent !important;
    color:           var(--av-bronze) !important;
    cursor:          pointer !important;
    padding:         0 !important;
    outline:         none !important;
    box-shadow:      none !important;
    text-decoration: none !important;
    flex-shrink:     0;
    transition:
        background   var(--av-t) var(--av-ease),
        color        var(--av-t) var(--av-ease),
        transform    var(--av-t) var(--av-ease),
        box-shadow   var(--av-t) var(--av-ease),
        border-color var(--av-t) var(--av-ease) !important;
}

.astra-card-cart-btn svg {
    width:  15px !important;
    height: 15px !important;
    stroke: currentColor;
    fill:   none;
}

.astra-card-cart-btn:hover {
    background:  var(--av-bronze) !important;
    color:       var(--av-white) !important;
    box-shadow:  0 4px 14px rgba(74,59,44,.28) !important;
    transform:   scale(1.1) translateY(-1px) !important;
    border-color: var(--av-bronze) !important;
}

.astra-card-cart-btn:active { transform: scale(.96) !important; }

.astra-card-cart-btn.is-adding { opacity: .5 !important; pointer-events: none !important; }

.astra-card-cart-btn.is-added {
    background:   var(--av-green) !important;
    border-color: var(--av-green) !important;
    color:        var(--av-white) !important;
    pointer-events: none !important;
    animation:    astraCartPop .38s var(--av-ease) !important;
}

@keyframes astraCartPop {
    0%  { transform: scale(1.25); }
    60% { transform: scale(.9);  }
    100%{ transform: scale(1);   }
}

.astra-card-cart-btn--disabled {
    border-color: var(--av-sand-d) !important;
    color:        var(--av-muted-l) !important;
    cursor:       not-allowed !important;
    pointer-events: none !important;
    background:   transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes astraShimmer {
    0%   { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}

.astra-product-card--skeleton {
    opacity: 1 !important; transform: none !important; pointer-events: none;
    border: none; box-shadow: var(--av-sh-xs);
}

.astra-skel-img,
.astra-skel-line {
    background: linear-gradient(90deg, var(--av-sand) 25%, #f5f3ec 50%, var(--av-sand) 75%);
    background-size: 1600px 100%;
    animation:       astraShimmer 1.8s infinite linear;
    border-radius:   6px;
}

.astra-skel-img     { position: absolute; inset: 0; border-radius: 0; }
.astra-skel-line    { height: 13px; margin-bottom: 8px; }
.astra-skel-line--title { width: 76%; }
.astra-skel-line--sub   { width: 48%; height: 10px; }
.astra-skel-line--price { width: 42%; height: 17px; margin: 4px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   ПУСТОЙ РЕЗУЛЬТАТ
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-no-results {
    grid-column:     1 / -1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         64px 24px;
    color:           var(--av-muted);
    text-align:      center;
    gap:             14px;
}

.astra-no-results svg { width: 56px; height: 56px; opacity: .28; }

.astra-no-results p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size:   22px;
    color:       var(--av-text);
}

.astra-no-results small { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOAD MORE
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-pagination {
    display:         flex;
    justify-content: center;
    margin-top:      44px;
}

.astra-load-more-btn {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            8px !important;
    padding:        13px 44px !important;
    background:     transparent !important;
    border:         1.5px solid var(--av-bronze) !important;
    border-radius:  var(--av-r) !important;
    font-family:    'Cormorant Garamond', Georgia, serif !important;
    font-size:      17px !important;
    font-weight:    500 !important;
    color:          var(--av-bronze) !important;
    cursor:         pointer !important;
    letter-spacing: .03em;
    box-shadow:     none !important;
    transition:
        background var(--av-t) var(--av-ease),
        color      var(--av-t) var(--av-ease),
        box-shadow var(--av-t) var(--av-ease),
        transform  var(--av-t) var(--av-ease) !important;
}

.astra-load-more-btn:hover {
    background: var(--av-bronze) !important;
    color:      var(--av-white) !important;
    box-shadow: var(--av-sh-md) !important;
    transform:  translateY(-2px) !important;
}

.astra-load-more-btn:disabled { opacity: .5 !important; pointer-events: none !important; }

.astra-load-more-count {
    font-family: 'Inter', sans-serif !important;
    font-size:   12px !important;
    opacity:     .7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.astra-toast {
    position:       fixed;
    bottom:         28px;
    left:           50%;
    transform:      translateX(-50%) translateY(16px);
    z-index:        999999;
    background:     var(--av-bronze);
    color:          var(--av-white);
    padding:        12px 22px;
    border-radius:  var(--av-r);
    font-family:    'Inter', sans-serif;
    font-size:      14px;
    box-shadow:     var(--av-sh-lg);
    opacity:        0;
    pointer-events: none;
    transition:     opacity .24s var(--av-ease), transform .24s var(--av-ease);
    max-width:      90vw;
    white-space:    nowrap;
}

.astra-toast.is-visible    { opacity: 1; transform: translateX(-50%) translateY(0); }
.astra-toast[data-type="error"] { background: #c62828; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .astra-shop-container {
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }
    .astra-products-grid.columns-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    .astra-shop-container {
        display:  block;
        padding:  16px 14px 48px;
    }

    .astra-shop-sidebar {
        position:              static;
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   10px;
        margin-bottom:         20px;
    }

    .astra-search-block { grid-column: 1 / -1; }
    .astra-reset-btn    { grid-column: 1 / -1; }

    .astra-products-grid,
    .astra-products-grid.columns-3,
    .astra-products-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .astra-shop-topbar { flex-wrap: nowrap; }

    .astra-grid--list .astra-card-img-wrap { width: 100px; min-width: 100px; height: 100px; }
}

@media (max-width: 540px) {
    .astra-shop-sidebar { grid-template-columns: 1fr; }

    .astra-topbar-right { gap: 6px; }

    .astra-sort-select { font-size: 12px !important; padding: 8px 28px 8px 9px !important; }

    .astra-products-grid,
    .astra-products-grid.columns-3,
    .astra-products-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .astra-card-title  { font-size: 14px !important; }
    .astra-card-price  { font-size: 13px !important; }

    .astra-card-cart-btn {
        width:     30px !important;
        height:    30px !important;
        min-width: 30px !important;
    }

    .astra-card-cart-btn svg { width: 13px !important; height: 13px !important; }
}