:root{
    --hf-navy:#1B2545;
    --hf-yellow:#F9C846;
    --hf-orange:#E8622B;
    --hf-surface-2:#ffffff;
    --hf-surface-1:#f5f5f2;
    --hf-border:#e5e3da;
    --hf-border-strong:#d3d1c7;
    --hf-text-secondary:#6b6a63;
    --hf-text-muted:#9a988f;
    --hf-text-accent:#185FA5;
}
.hf-listing-toolbar{
    font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    margin:0 0 22px;
}

.hf-listing-search input[type="text"]{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--hf-border-strong);
    border-radius:8px;
    font-size:13px;
    margin-bottom:12px;
    font-family:inherit;
}
.hf-listing-search input[type="text"]:focus{
    outline:none;
    border-color:var(--hf-navy);
}

.hf-search-suggest{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:20;
    margin-top:-8px;
    background-color:var(--hf-surface-2) !important;
    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;
    border:1px solid var(--hf-border-strong);
    border-radius:8px;
    box-shadow:
        0 2px 4px rgba(27,37,69,0.06),
        0 12px 28px rgba(27,37,69,0.18);
    max-height:360px;
    overflow-y:auto;
    padding:6px;
}

.hf-search-suggest-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    border-radius:6px;
    text-decoration:none;
    color:var(--hf-navy);
    transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hf-search-suggest-item:hover,
.hf-search-suggest-item.active{
    background:var(--hf-surface-1);
    box-shadow:0 4px 10px rgba(27,37,69,0.14);
    transform:translateY(-1px);
}
.hf-search-suggest-item img{
    width:40px;
    height:40px;
    object-fit:cover;
    border-radius:4px;
    border:1px solid var(--hf-border);
    flex-shrink:0;
}
.hf-search-suggest-info{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.hf-search-suggest-name{
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.hf-search-suggest-price{
    font-size:12px;
    color:var(--hf-text-accent);
}
.hf-search-suggest-empty{
    padding:12px 10px;
    margin:0;
    font-size:13px;
    color:var(--hf-text-secondary);
}
.hf-search-suggest-viewall{
    display:block;
    text-align:center;
    padding:10px 8px;
    margin-top:2px;
    border-top:1px solid var(--hf-border);
    font-size:12px;
    font-weight:600;
    color:var(--hf-orange);
    text-decoration:none;
    border-radius:6px;
    transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hf-search-suggest-viewall:hover,
.hf-search-suggest-viewall.active{
    background:var(--hf-surface-1);
    box-shadow:0 4px 10px rgba(27,37,69,0.14);
    transform:translateY(-1px);
}

.hf-listing-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.hf-listing-tag{
    font-size:12px;
    font-weight:600;
    border-radius:999px;
    padding:5px 14px;
    border:1px solid var(--hf-border-strong);
    color:var(--hf-text-secondary);
    background:var(--hf-surface-2);
    text-decoration:none;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.hf-listing-tag:hover{
    border-color:var(--hf-navy);
    color:var(--hf-navy);
}
.hf-listing-tag.active{
    background:var(--hf-navy);
    color:#fff;
    border-color:var(--hf-navy);
}
.hf-listing-tag--sale.active{
    background:var(--hf-orange);
    border-color:var(--hf-orange);
}
.hf-listing-tag--brand{
    border-style:dashed;
}

.hf-listing-other-cats{
    font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    margin:32px 0 0;
    padding-top:24px;
    border-top:1px solid var(--hf-border);
}
.hf-listing-other-cats h3{
    font-size:15px;
    font-weight:600;
    color:var(--hf-navy);
    margin:0 0 12px;
}

/* Product card badge (dynamic category name, e.g. "BOOSTER BOXES") */
ul.products li.product .hf-listing-badge{
    order:1;
    width:100%;
    font-family:inherit;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.5px;
    color:var(--hf-navy);
    margin:0 0 8px;
    text-align:center;
}
/* Give the category label room when a corner badge is also present,
   so they don't visually collide. */
ul.products li.product:has(.hf-listing-card-badge) .hf-listing-badge{
    margin-top:22px;
}

/* Corner badge — a product tag (top-right), absolutely positioned
   against the card. There's no separate "Sale" badge here since
   WooCommerce/Blocksy already show a native one on the thumbnail. */
ul.products li.product .hf-listing-card-badge{
    position:absolute;
    top:12px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-family:inherit;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:#fff;
    border-radius:6px;
    padding:3px 8px;
    z-index:1;
}
ul.products li.product .hf-listing-card-badge--tag{
    right:12px;
    background:var(--hf-orange);
}
ul.products li.product .hf-listing-card-badge--tag-sealed{
    background:var(--hf-orange);
}
ul.products li.product .hf-listing-card-badge--tag-live-break{
    background:#C0392B;
}
ul.products li.product .hf-listing-card-badge--tag-pre-orders{
    background:var(--hf-text-secondary);
}

/* Restyle the existing Blocksy/WooCommerce product card markup to
   match the mockup — rounded card, thumb block, name, price, button.
   No structural change: same data, same add-to-cart behavior. */
ul.products.columns-4{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:16px !important;
    list-style:none !important;
}
ul.products.columns-4 li.product{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    position:relative !important;
    background:var(--hf-surface-2) !important;
    border:1px solid var(--hf-border) !important;
    border-radius:12px !important;
    padding:12px !important;
    text-align:center !important;
    width:auto !important;
    margin:0 !important;
    float:none !important;
    box-shadow:none !important;
}
ul.products.columns-4 li.product figure{
    order:2;
    width:100%;
    background:var(--hf-surface-1);
    border-radius:8px;
    aspect-ratio:1 / 1;
    margin:0 0 10px;
    overflow:hidden;
    position:relative;
}
ul.products.columns-4 li.product figure a{
    display:block;
    height:100%;
}
ul.products.columns-4 li.product figure img{
    width:100%;
    height:100%;
    object-fit:cover;
}
ul.products.columns-4 li.product .woocommerce-loop-product__title{
    order:3;
    width:100%;
    font-size:13px;
    font-weight:600;
    color:var(--hf-navy);
    margin:0 0 4px;
    line-height:1.3;
    min-height:34px;
}
ul.products.columns-4 li.product .woocommerce-loop-product__title a{
    color:inherit;
    text-decoration:none;
}
ul.products.columns-4 li.product > .price{
    order:4;
    display:block;
    width:100%;
    font-size:13px;
    color:var(--hf-navy);
    font-weight:600;
    margin:0 0 10px;
}
ul.products.columns-4 li.product > .price del{
    color:var(--hf-text-muted);
    font-weight:400;
    text-decoration:line-through;
    margin-right:4px;
    opacity:1;
}
ul.products.columns-4 li.product > .price ins{
    text-decoration:none;
    color:var(--hf-navy);
    font-weight:600;
}
/* The category-links list under the price is redundant with the new
   badge above the thumbnail — hide it to match the mockup's cleaner
   card, without removing anything WooCommerce actually needs. */
ul.products.columns-4 li.product .entry-meta{
    display:none;
}
ul.products.columns-4 li.product .ct-woo-card-actions{
    order:5;
    width:100%;
    margin-top:auto;
    /* Blocksy's own rule sets justify-content to a CSS var that's
       unset here, which left the wrapped "View cart" link/quantity
       badge sitting flush left instead of centered under the button. */
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
}
ul.products.columns-4 li.product .ct-woo-card-actions .button{
    display:block;
    width:100%;
    font-size:13px;
    font-weight:600;
    padding:10px;
    background:var(--hf-orange);
    color:#fff;
    border:none;
    border-radius:8px;
    text-align:center;
    text-decoration:none;
    box-sizing:border-box;
    transition:filter .15s ease;
    margin:0 !important;
}
ul.products.columns-4 li.product .ct-woo-card-actions .button:hover{
    filter:brightness(1.05);
}
/* Replaced by the combined "X in cart · view cart" line below, so the
   two don't show up as two separate, redundant lines. */
ul.products.columns-4 li.product .ct-woo-card-actions .added_to_cart{
    display:none !important;
}
ul.products.columns-4 li.product .hf-listing-in-cart{
    order:6;
    width:100%;
    margin:6px 0 0;
    font-size:12px;
    color:var(--hf-text-accent);
}
ul.products.columns-4 li.product .hf-listing-in-cart a{
    color:var(--hf-text-accent);
    text-decoration:underline;
}

@media(max-width:900px){
    ul.products.columns-4{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:600px){
    ul.products.columns-4{grid-template-columns:repeat(2,1fr) !important;}
}