.mykd-hf-row{display:grid;gap:12px}
.mykd-hf-row-combined{display:grid;gap:12px;grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1199px){.mykd-hf-row-combined{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:575px){.mykd-hf-inner{display:flex;flex-direction:column}}
.mykd-hf-row-tags{display:flex;align-items:center;gap:12px}
.mykd-hf-tags-title{color:#cfd3dc;font-weight:600}
.mykd-hf-tags-list{display:flex;flex-wrap:wrap;gap:12px}
.mykd-hf-tag{color:#cfd3dc;text-decoration:none}
.shop-sidebar--horizontal{display:grid;grid-template-columns:1fr 280px 280px;gap:12px;align-items:start}
.shop-sidebar--horizontal .mykd-hf-row-combined{grid-column:1 / -1}
.shop-sidebar--horizontal .mykd-hf-row-tags{grid-column:1 / -1}
.shop-sidebar--horizontal #woocommerce_product_search-1{grid-column:3}
@media(max-width:575px){.shop-sidebar--horizontal{display:block}}
/* Keep vertical stacking of rows at all widths */
.mykd-hf-group{position:relative;background:#15171c;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:8px 8px 6px}
.mykd-hf-title{font-size:13px;line-height:1.2;font-weight:600;color:#cfd3dc;margin:0 0 6px;position:relative;height:24px;display:flex;align-items:center}
.mykd-hf-title::after{content:"\f0d7";font-family:var(--tg-icon-font-family);font-size:16px;color:#cfd3dc;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.mykd-hf-title.hero-title{position:relative;padding-left:8px}
.mykd-hf-title.hero-title::before{content:"\f0da";font-family:var(--tg-icon-font-family);font-size:20px;color:var(--tg-theme-primary);position:absolute;left:0;top:50%;transform:translateY(-50%)}
/* Hero group specific colors */
.mykd-hf-group[aria-label="Strength"] .mykd-hf-title.hero-title::before{color:#ff4444}
.mykd-hf-group[aria-label="Agility"] .mykd-hf-title.hero-title::before{color:var(--tg-theme-primary)}
.mykd-hf-group[aria-label="Intelligence"] .mykd-hf-title.hero-title::before{color:#4444ff}
.mykd-hf-group[aria-label="Universal"] .mykd-hf-title.hero-title::before{color:#ff44ff}
.mykd-hf-banner{display:block;margin:0 -8px -6px -8px}
.mykd-hf-banner-img{display:block;width:100%;height:112px;object-fit:cover;border-radius:4px;border:1px solid rgba(255,255,255,.06);background:#0f1116;padding:0}
.mykd-hf-mini{display:flex;gap:8px;margin-top:8px}
.mykd-hf-mini-vertical{flex-direction:column}
.mykd-hf-mini-item{display:inline-block;background:#1b1e24;border:1px solid rgba(255,255,255,.08);color:#cfd3dc;border-radius:4px;padding:6px 10px;text-decoration:none;font-size:12px}
.mykd-hf-mini-item:hover{background:#2b6ef2;border-color:#2b6ef2;color:#fff}
.mykd-hf-pop{position:absolute;z-index:999;left:0;right:0;background:#0f1116;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:12px;display:none;box-shadow:0 8px 32px rgba(0,0,0,.5);min-width:400px;top:31px;margin-top:0;overflow:visible}
.mykd-hf-group.is-collapsed:hover .mykd-hf-pop{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mykd-hf-pop-item{display:block;border-radius:4px;overflow:hidden;width:100%;border:2px solid transparent;transition:border-color 0.3s ease}
.mykd-hf-pop-item img{display:block;width:100%;height:48px;object-fit:cover;background:#15171c;border:1px solid rgba(255,255,255,.06);border-radius:4px}
.mykd-hf-pop-list{position:absolute;z-index:999;left:0;right:0;background:#0f1116;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px;display:none;box-shadow:0 8px 32px rgba(0,0,0,.5);grid-template-columns:repeat(2,1fr);gap:8px;top:31px;margin-top:0;min-width:280px;overflow:visible}
.mykd-hf-pop-list-col{display:flex;flex-direction:column;gap:6px}
.mykd-hf-group.is-collapsed:hover .mykd-hf-pop-list{display:grid}
.mykd-hf-pop-list-item{display:inline-block;background:#1b1e24;border:1px solid rgba(255,255,255,.08);color:#cfd3dc;border-radius:4px;padding:6px 10px;text-decoration:none;font-size:12px;width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mykd-hf-pop-list-item:hover{background:#2b6ef2;border-color:#2b6ef2;color:#fff}
/* Tag colors mapping (quality + rarity) */
.tag_uncommon{color:#82bdff}
.tag_rare{color:#7c8ff5}
.tag_mythical{color:#a876f9}
.tag_legendary{color:#dc5eea}
.tag_ancient{color:#e06b6a}
.tag_immortal{color:#f2b166}
.tag_arcana{color:#9acc4c}
.tag_seasonal{color:#3c3}
.tag_standard{color:#acbfd6}
.tag_strange{color:#d16a2b}
.tag_lucky{color:#25cf22}
.tag_genuine{color:#4b7553}
.tag_tournament{color:#864dae}
.tag_frozen{color:#4381b6}
.tag_autographed{color:#ace753}
.tag_haunted{color:#884bae}
.tag_base{color:#aeaeae}
.tag_corrupted{color:#a82928}
.tag_unusual{color:#894dad}
.tag_infused{color:#8239f2}
.tag_exalted{color:#ccc}
.tag_vintage{color:#455e90}
.tag_legacy{color:#fafafa}
/* Active filter states */
.mykd-hf-pop-item.is-active,.mykd-hf-mini-item.is-active,.mykd-hf-pop-list-item.is-active,.mykd-hf-tag.is-active{background:var(--tg-theme-secondary);border-color:var(--tg-theme-secondary);color:#fff}
/* Active filters display */
.mykd-active-filters{display:flex;flex-wrap:wrap;gap:8px;}
.mykd-active-filter{display:inline-flex;align-items:center;gap:6px;background:#1b1e24;border:1px solid rgba(255,255,255,.08);color:#cfd3dc;border-radius:4px;padding:6px 10px;font-size:12px}
.mykd-active-filter-remove{background:transparent;border:none;color:#cfd3dc;cursor:pointer;padding:0;margin-left:4px;font-size:14px;line-height:1}
.mykd-active-filter-remove:hover{color:#ff4444}
.mykd-filter-clear{background:#ff4444;color:#fff;border:none;border-radius:4px;padding:6px 12px;font-size:12px;cursor:pointer;margin-left:8px}
.mykd-filter-clear:hover{background:#cc3333}
/* Loading state */
.products.loading{opacity:0.6;pointer-events:none;position:relative}
.products.loading::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid #2b6ef2;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
/* Price Slider Styles - Use theme's existing CSS */
/* Outer container - like .shop__widget */
.shop__widget-title{color:#cfd3dc;font-size:14px;font-weight:600;margin-bottom:12px;display:block;padding:12px 12px 0 12px}
/* Inner container - like .shop__widget-inner */
.shop__widget-inner{background:#15171c;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:12px;margin:0;width:100%;box-sizing:border-box}

/* Ensure Active Filters widget matches desired height */
#mykd_active_filters-3 .shop__widget-inner,.widget_mykd_active_filters .shop__widget-inner {min-height: 64px; /* cùng giá trị với widget Search inner */align-items: center;}

/* Price filter layout - tighten spacing between button and price label */
.price_slider{display:none!important}
.shop__price-slider-amount{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.shop__price-slider-amount .button{display:none!important}
.shop__price-slider-amount .price_label{display:none!important}
.shop__price-slider-amount .clear{display:none}

/* Input-based price UI */
.shop__price-slider-amount .mykd-price-field{position:relative;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;width:100%}
.shop__price-slider-amount .mykd-price-field .mykd-currency,.shop__price-slider-amount .mykd-price-field .mykd-sep{flex:0 0 auto}
.shop__price-slider-amount .mykd-price-field .mykd-currency{color:#cfd3dc;opacity:.8}
.shop__price-slider-amount .mykd-price-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#15171c;border:1px solid rgba(255,255,255,.18);border-radius:6px;color:#cfd3dc;padding:6px 12px;position:relative;z-index:1;pointer-events:auto;transition:border-color 0.3s ease;flex:1 1 0;min-width:0;max-width:100%}
.shop__price-slider-amount .mykd-price-input.error{border-color:#ff4444;box-shadow:0 0 0 2px rgba(255,68,68,0.2)}
.shop__price-slider-amount .mykd-price-input::-webkit-outer-spin-button,
.shop__price-slider-amount .mykd-price-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shop__price-slider-amount .mykd-price-input[type=number]{-moz-appearance:textfield;appearance:textfield}
.shop__price-slider-amount .mykd-price-input::placeholder{color:#8691a3}
.shop__price-slider-amount .mykd-sep{opacity:.6}

/* Hover actions - dropdown below inputs */
.shop__price-slider-amount{position:relative}
.shop__price-slider-amount .mykd-price-actions{display:none;position:static;gap:12px;box-sizing:border-box;justify-content:flex-end;align-items:flex-start;width:100%;margin-left:0;flex-wrap:nowrap}
.shop__price-slider-amount .mykd-price-actions .mykd-btn{flex:1 1 0;min-width:0;max-width:100%}
/* Show actions when hovering/focusing the whole widget area */
.shop__widget-inner:hover .mykd-price-actions,
.shop__widget-inner:focus-within .mykd-price-actions{display:flex}
.shop__price-slider-amount .mykd-price-actions .mykd-btn{user-select:none;-moz-user-select:none;border:medium none;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:var(--tg-fw-extra-bold);letter-spacing:0.8px;margin-bottom:0;padding:8px 16px;text-align:center;text-transform:uppercase;touch-action:manipulation;-webkit-transition:all 0.3s ease-out 0s;-moz-transition:all 0.3s ease-out 0s;-ms-transition:all 0.3s ease-out 0s;-o-transition:all 0.3s ease-out 0s;transition:all 0.3s ease-out 0s;position:relative;z-index:10;pointer-events:auto}
.shop__price-slider-amount .mykd-price-actions .mykd-btn--clear{background:#424a57;color:#e7edf6}
.shop__price-slider-amount .mykd-price-actions .mykd-btn--clear:hover{background:var(--tg-theme-secondary);color:var(--tg-common-color-black-2)}
.shop__price-slider-amount .mykd-price-actions .mykd-btn--ok{background:var(--tg-theme-primary);color:var(--tg-common-color-black-2)}
.shop__price-slider-amount .mykd-price-actions .mykd-btn--ok:hover{background:var(--tg-theme-secondary);color:var(--tg-common-color-black-2)}


/* Price Validation Popup */
.price-validation-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #15171c;
    border: 1px solid #ff4444;
    border-radius: 8px;
    padding: 20px 30px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    scale: 0.8;
    transition: all 0.3s ease;
}

.price-validation-popup.show {
    opacity: 1;
    scale: 1;
}

.price-validation-popup .icon {
    color: #ff4444;
    font-size: 20px;
    flex-shrink: 0;
}

.price-validation-popup .message {
    color: #cfd3dc;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}