/* Only native WooCommerce cards carrying our catalog block are affected. */
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__link > img {
    filter: grayscale(1);
}
.woocommerce .hn-catalog-row > a.hn-option-unavailable {
    position: relative;
    color: #888;
    cursor: not-allowed;
}
.woocommerce .hn-catalog-row > a.hn-option-unavailable::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: linear-gradient(to bottom right, transparent calc(50% - .6px), #aaa 50%, transparent calc(50% + .6px));
    pointer-events: none;
}
.woocommerce ul.products li.product .hn-catalog-video {
    position: absolute;
    top: calc(var(--hn-hover-top, 0px) + 10px);
    left: calc(var(--hn-hover-left, 0px) + 10px);
    z-index: 6;
    display: inline-flex;
    color: #868686;
    background: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    line-height: 1;
    transition: opacity .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product .hn-catalog-video svg { width: 21px; height: 21px; display: block; }
@media (hover: hover) and (pointer: fine) {
    .woocommerce ul.products li.product .hn-catalog-video { opacity: 0; transform: translateY(4px); pointer-events: none; }
    .woocommerce ul.products li.product:hover .hn-catalog-video,
    .woocommerce ul.products li.product:focus-within .hn-catalog-video { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product .hn-catalog-video { transition: none; transform: none; }
}
.woocommerce ul.products li.product:has(> .hn-catalog-variants) {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}
.woocommerce ul.products li.product:has(> .hn-catalog-variants) > .woocommerce-loop-product__link {
    display: block;
    width: 100%;
}
.woocommerce ul.products li.product:has(> .hn-catalog-variants) > .woocommerce-loop-product__link > img:not(.webninja-hover-img) {
    /* Keep the thumbnail ratio selected in WooCommerce, including uncropped. */
    width: 100%;
    height: auto;
}
.woocommerce ul.products li.product:has(> .hn-catalog-variants) > .woocommerce-loop-product__link > .webninja-hover-img {
    top: var(--hn-hover-top, 0px);
    left: var(--hn-hover-left, 0px);
    width: var(--hn-hover-width, 100%);
    height: var(--hn-image-height, auto);
    object-fit: cover;
}
.woocommerce ul.products li.product:has(> .hn-catalog-variants) .woocommerce-loop-product__title {
    min-height: var(--hn-catalog-title, 0px);
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.woocommerce ul.products li.product:has(> .hn-catalog-variants) .price {
    display: block;
    min-height: var(--hn-catalog-price, 1.5em);
    box-sizing: border-box;
}
.hn-catalog-variants {
    --hn-sample-size: 2rem;
    display: grid;
    grid-auto-rows: var(--hn-sample-size);
    gap: .375rem;
    margin: .5rem 0 .75rem;
    width: 100%;
    min-width: 0;
}
.hn-catalog-variants:empty { display: none; }
/* Progressive enhancement: no reserved space, no nested product links. */
.hn-catalog-overlay > .hn-catalog-variants {
    position: absolute;
    top: var(--hn-image-bottom);
    left: var(--hn-image-left, 0px);
    transform: translateY(-100%);
    z-index: 4;
    width: var(--hn-image-width, 100%);
    margin: 0;
    padding: 2.5rem .75rem .75rem;
    box-sizing: border-box;
    max-height: var(--hn-image-height);
    overflow-y: auto;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.06) 35%, rgba(0,0,0,.24));
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.hn-catalog-overlay > .hn-catalog-variants .hn-catalog-row > a {
    background: rgba(255,255,255,.94);
    border-color: rgba(255,255,255,.8);
    color: #171717;
}
.hn-catalog-overlay:focus-within:not(.hn-catalog-dismissed) > .hn-catalog-variants,
.hn-catalog-overlay.hn-catalog-open > .hn-catalog-variants {
    opacity: 1;
    pointer-events: auto;
}
.woocommerce ul.products li.product > .hn-catalog-toggle {
    display: none;
    position: absolute;
    z-index: 5;
    top: calc(var(--hn-image-bottom) - 48px);
    left: calc(var(--hn-image-left, 0px) + 10px);
    transform: none;
    max-width: calc(var(--hn-image-width, 100%) - 1rem);
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #868686;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: .75rem;
    line-height: 1.2;
}
@media (hover: hover) and (pointer: fine) {
    .hn-catalog-overlay:hover:not(.hn-catalog-dismissed) > .hn-catalog-variants { opacity: 1; pointer-events: auto; }
}
@media (hover: none), (pointer: coarse), (max-width: 767px) {
    .woocommerce ul.products li.product > .hn-catalog-toggle { display: inline-flex; width:30.4px; height:30.4px; min-height:30.4px; top:calc(var(--hn-image-bottom) - 40.4px); opacity:1; pointer-events:auto; }
    .woocommerce ul.products li.product .hn-catalog-video { width:30.4px; height:30.4px; }
    .woocommerce ul.products li.product .hn-catalog-video svg,
    .woocommerce ul.products li.product > .hn-catalog-toggle svg { width:16.8px; height:16.8px; }
    /* Keep a comfortable invisible touch target around the smaller circle. */
    .woocommerce ul.products li.product > .hn-catalog-toggle::before { content:''; position:absolute; inset:-6px; }
    .hn-catalog-overlay > .hn-catalog-variants { padding-bottom: 58px; }
    .hn-catalog-overlay:not(.hn-catalog-open) > .hn-catalog-variants { visibility: hidden; }
    .hn-catalog-overlay.hn-catalog-open > .hn-catalog-variants { visibility: visible; }
}
.hn-catalog-toggle[aria-expanded="true"] .hn-catalog-plus{display:none}
.hn-catalog-toggle svg{display:block;flex-shrink:0}
@media (prefers-reduced-motion: reduce) {
    .hn-catalog-overlay > .hn-catalog-variants { transition: none; }
}
.hn-catalog-row {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    white-space: nowrap;
    overflow-x: auto; /* No-JS fallback: every rendered option stays reachable. */
}
.hn-catalog-row.hn-catalog-fitted { overflow: visible; justify-content: center; }
.woocommerce .hn-catalog-row > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--hn-sample-size);
    min-width: var(--hn-sample-size);
    max-width: 7rem;
    padding: 0 .375rem;
    border: 1px solid #b8b8b8;
    border-radius: 999px;
    box-sizing: border-box;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: .75rem;
    line-height: 1;
    text-decoration: none;
}
.woocommerce .hn-catalog-row > a.hn-catalog-visual { width: var(--hn-sample-size); padding: 3px; }
.hn-catalog-option-text { overflow: hidden; text-overflow: ellipsis; }
.hn-catalog-color { width: 100%; height: 100%; border-radius: 999px; }
.woocommerce ul.products li.product .hn-catalog-option img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 999px;
}
.woocommerce .hn-catalog-row > a:hover { border-color: currentColor; }
.woocommerce .hn-catalog-row > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.woocommerce .hn-catalog-row > a[hidden] { display: none; }
.woocommerce ul.products li.product:has(> .hn-catalog-variants) > .woocommerce-loop-product__buttons,
.woocommerce ul.products li.product:has(> .hn-catalog-variants) > .button {
    margin-top: auto;
}
.woocommerce ul.products li.product:has(> .hn-catalog-variants) .woocommerce-loop-product__buttons > .button,
.woocommerce ul.products li.product:has(> .hn-catalog-variants) > .button {
    min-height: var(--hn-catalog-button, 3em);
    /* Equal-height cards must also center the button's contents, including in Elementor. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: .3em;
    box-sizing: border-box;
    white-space: normal;
}
.woocommerce ul.products li.product .hn-catalog-view-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: middle; }