/*
 * CDO Products — Woo Storefront Card v2.8
 * Woo/Elessi adapter only. Business truth remains in CDO Products; LAB remains the shared visual language.
 */

/* Media: use the canonical storefront 4:3 card ratio instead of the old square crop. */
.product.cdo-product-shell .product-img-wrap,
.product.cdo-product-shell .product-img,
.product.cdo-product-shell .main-img{
    aspect-ratio:4/3!important;
    overflow:hidden!important;
    background:#f5f8fa!important;
}
.product.cdo-product-shell .product-img-wrap img,
.product.cdo-product-shell .product-img img,
.product.cdo-product-shell .main-img img,
.product.cdo-product-shell img.attachment-woocommerce_thumbnail,
.product.cdo-product-shell img.wp-post-image{
    width:100%!important;
    height:100%!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:center center!important;
    display:block!important;
}

/* Card shell: quiet border, no decorative shadow, Cruise-like vertical rhythm. */
.product.cdo-product-shell .product-item.grid,
.product.cdo-product-shell.product-item.grid{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    position:relative!important;
    overflow:hidden!important;
    border:1px solid #eae6fa!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:none!important;
}
.product.cdo-product-shell .product-info-wrap,
.product.cdo-product-shell.product-item.grid .product-info-wrap{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-width:0!important;
    padding:14px 16px 16px!important;
    background:#fff!important;
    position:relative!important;
    z-index:6!important;
    pointer-events:none!important;
}

/* Editorial identity remains in the product contract, but is intentionally hidden in Woo storefront v2.1. */
.cdo-loop-eyebrow{
    display:none!important;
}

/* Title: dominant but compact. */
.product.cdo-product-shell .name,
.product.cdo-product-shell .product-title,
.product.cdo-product-shell .woocommerce-loop-product__title,
.product.cdo-product-shell h2.woocommerce-loop-product__title{
    margin:0!important;
    color:#1f3556!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
    text-align:left!important;
}
.product.cdo-product-shell .name a,
.product.cdo-product-shell .product-title a,
.product.cdo-product-shell .woocommerce-loop-product__title a{
    color:inherit!important;
    text-decoration:none!important;
}

/* One compact fact line; no extra badge/panel chrome. */
.cdo-loop-info-text{
    margin:8px 0 0!important;
    color:#6d6f73!important;
    font-size:14px!important;
    line-height:1.4!important;
    font-weight:500!important;
    text-align:left!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
}

/* Price block: same hierarchy used by Cruise cards. */
.product.cdo-product-shell .price{
    display:block!important;
    width:100%!important;
    margin-top:auto!important;
    padding-top:14px!important;
    color:#1f3556!important;
    text-align:left!important;
    align-self:flex-start!important;
}
.price .cdo-storefront-price-prefix,
.cdo-storefront-price-prefix{
    display:block!important;
    margin:0 0 4px!important;
    color:#6d6f73!important;
    font-size:11px!important;
    line-height:1.15!important;
    font-weight:800!important;
    text-transform:uppercase!important;
}
.product.cdo-product-shell .price .amount,
.product.cdo-product-shell .price .woocommerce-Price-amount,
.product.cdo-product-shell .price ins .amount,
.product.cdo-product-shell .price ins .woocommerce-Price-amount{
    color:#1f3556!important;
    font-size:25px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:-.035em!important;
    text-decoration:none!important;
}
.product.cdo-product-shell .price ins{
    text-decoration:none!important;
}
.product.cdo-product-shell .price del{
    color:#8a8a8a!important;
    font-size:13px!important;
    opacity:.85!important;
}

/* Storefront navigation: the whole card is the CTA.
 * Keep the canonical Woo link in the DOM for semantics/accessibility, but remove
 * the repeated engine-specific action label from the visual hierarchy. */
.product.cdo-product-shell a.cdo-product-loop-button,
.product.cdo-product-shell .product-item.grid>a.cdo-product-loop-button,
.product.cdo-product-shell.product-item.grid>a.cdo-product-loop-button{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:5!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:20px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-decoration:none!important;
    opacity:1!important;
    transform:none!important;
    cursor:pointer!important;
    overflow:hidden!important;
}
.product.cdo-product-shell a.cdo-product-loop-button .add_to_cart_text,
.product.cdo-product-shell a.cdo-product-loop-button .cdo-product-loop-arrow,
.product.cdo-product-shell a.cdo-product-loop-button .nasa-icon,
.product.cdo-product-shell a.cdo-product-loop-button .cart-icon{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}
.product.cdo-product-shell a.cdo-product-loop-button::after{
    content:none!important;
    display:none!important;
}
.product.cdo-product-shell a.cdo-product-loop-button:focus-visible{
    outline:2px solid #683bcd!important;
    outline-offset:-2px!important;
}

/* Media badges stay in the image layer. Reserve body for identity/content. */
.cdo-loop-badge{
    position:absolute!important;
    top:14px!important;
    left:14px!important;
    z-index:4!important;
    display:inline-flex!important;
    align-items:center!important;
    width:fit-content!important;
    max-width:calc(100% - 28px)!important;
    margin:0!important;
    padding:6px 10px!important;
    border:1px solid #dff3f6!important;
    border-radius:999px!important;
    color:#1f3556!important;
    background:#fff!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:700!important;
    text-transform:uppercase!important;
    box-shadow:none!important;
    pointer-events:none!important;
}
.cdo-loop-originals{
    position:absolute!important;
    top:14px!important;
    left:14px!important;
    z-index:4!important;
    display:inline-flex!important;
    align-items:center!important;
    width:max-content!important;
    max-width:calc(100% - 28px)!important;
    margin:0!important;
    padding:7px 11px!important;
    border:1px solid rgba(255,255,255,.34)!important;
    border-radius:999px!important;
    color:#fff!important;
    background:#683bcd!important;
    box-shadow:none!important;
    pointer-events:none!important;
}
.cdo-loop-originals strong{
    color:#fff!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:700!important;
    text-transform:uppercase!important;
}

/* Optional commercial comparison signal: value copy, not a badge.
 * Keep merchandising badges exclusive to the media layer. */
.cdo-loop-price-comparison{
    display:inline-flex!important;
    align-items:center!important;
    align-self:flex-start!important;
    width:auto!important;
    max-width:100%!important;
    margin:10px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:var(--cdo-price-comparison-text-color,#568b18)!important;
    box-shadow:none!important;
    font-size:13px!important;
    line-height:1.3!important;
    font-weight:700!important;
    letter-spacing:0!important;
    text-transform:none!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
}
.cdo-loop-price-comparison-icon{
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    margin:0 7px 0 0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--cdo-price-comparison-icon-bg,#ebf7db)!important;
    color:var(--cdo-price-comparison-icon-color,#568b18)!important;
    box-shadow:none!important;
    line-height:1!important;
}
.cdo-loop-price-comparison-icon i{
    display:block!important;
    margin:0!important;
    color:inherit!important;
    font-size:11px!important;
    line-height:1!important;
}

.cdo-loop-price-comparison--trigger{cursor:pointer!important}
.product.cdo-product-shell .cdo-loop-price-comparison--trigger{position:relative!important;z-index:6!important;pointer-events:auto!important}
.cdo-loop-price-comparison--trigger:hover .cdo-loop-price-comparison-text{text-decoration:underline;text-underline-offset:3px}
.cdo-loop-price-comparison--trigger:focus-visible{outline:2px solid var(--cdo-price-comparison-icon-color,#568b18)!important;outline-offset:4px!important;border-radius:4px!important}
.cdo-loop-price-comparison-text{
    display:inline-block!important;
    min-width:0!important;
}

.cdo-product-hero__price-comparison{
    margin-top:14px!important;
}
.cdo-product-hero__price-comparison .cdo-loop-price-comparison{
    margin:0!important;
}

.cdo-products-standard-card{
    display:contents!important;
}

/* Equal-height behavior in Elessi/NASA grids and rails. */
.nasa-slick-slider .slick-track,
.ns-items-gap.nasa-slick-slider .slick-track{
    display:flex!important;
    align-items:stretch!important;
}
.nasa-slick-slider .slick-slide,
.ns-items-gap.nasa-slick-slider .slick-slide{
    height:auto!important;
    display:flex!important;
}
.nasa-slick-slider .slick-slide>div,
.ns-items-gap.nasa-slick-slider .slick-slide>div{
    display:flex!important;
    width:100%!important;
    height:100%!important;
}
.nasa-slick-slider .product-item.grid,
.ns-items-gap.nasa-slick-slider .product{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    position:relative!important;
}
.nasa-slick-slider .product-item.grid .product-info-wrap,
.ns-items-gap.nasa-slick-slider .product-info-wrap{
    display:flex!important;
    flex-direction:column!important;
    flex-grow:1!important;
}

/* Product-ID / hand-picked NASA modules do not always receive .ns-type-grid.
 * Equal-height must belong to the CDO card contract, not to that optional wrapper class.
 * Keep this scoped to direct NASA product rows so Slick/carousel geometry remains untouched. */
.nasa-sc.products.woocommerce>.row.nasa-row-child-clear-none,
.nasa-sc.products.woocommerce.ns-type-grid>.row,
.nasa-sc.products.woocommerce.ns-type-grid .row.nasa-row-child-clear-none,
body.tax-product_cat.woocommerce .products,
body.tax-product_cat.woocommerce .products.row,
body.tax-product_cat.woocommerce .products.row.nasa-row-child-clear-none,
body.post-type-archive-product.woocommerce .products,
body.post-type-archive-product.woocommerce .products.row,
body.post-type-archive-product.woocommerce .products.row.nasa-row-child-clear-none{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:stretch!important;
}
.nasa-sc.products.woocommerce>.row.nasa-row-child-clear-none>.product-warp-item,
.nasa-sc.products.woocommerce.ns-type-grid .product-warp-item,
body.tax-product_cat.woocommerce .products .product-warp-item,
body.tax-product_cat.woocommerce ul.products li.product,
body.post-type-archive-product.woocommerce ul.products li.product,
body.post-type-archive-product.woocommerce .products .product-warp-item{
    display:flex!important;
    align-items:stretch!important;
}
.nasa-sc.products.woocommerce>.row.nasa-row-child-clear-none>.product-warp-item>.product-item.grid,
.nasa-sc.products.woocommerce.ns-type-grid .product-warp-item>.product-item.grid,
body.tax-product_cat.woocommerce .products .product-warp-item>.product-item.grid,
body.tax-product_cat.woocommerce ul.products li.product>.product-item.grid,
body.post-type-archive-product.woocommerce ul.products li.product>.product-item.grid,
body.post-type-archive-product.woocommerce .products .product-warp-item>.product-item.grid{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    position:relative!important;
}

/* Avoid flicker before NASA/Slick initializes. */
.nasa-slick-slider .slick-slide{visibility:hidden}
.nasa-slick-slider.slick-initialized .slick-slide{visibility:visible}

@media(max-width:720px){
    .product.cdo-product-shell .product-info-wrap,
    .product.cdo-product-shell.product-item.grid .product-info-wrap{
        padding:14px 14px 14px!important;
    }
    .product.cdo-product-shell .name,
    .product.cdo-product-shell .product-title,
    .product.cdo-product-shell .woocommerce-loop-product__title,
    .product.cdo-product-shell h2.woocommerce-loop-product__title{
        font-size:18px!important;
    }
    .product.cdo-product-shell .price .amount,
    .product.cdo-product-shell .price .woocommerce-Price-amount,
    .product.cdo-product-shell .price ins .amount,
    .product.cdo-product-shell .price ins .woocommerce-Price-amount{
        font-size:25px!important;
    }
}

/* Global storefront public help */
.cdo-storefront-public-help {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 1px 0;
    border: 0;
    background: transparent;
    color: var(--cdo-primary, #683bcd);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
}
.cdo-storefront-public-help:hover,
.cdo-storefront-public-help:focus-visible {
    text-decoration: underline;
}
.cdo-storefront-public-help i {
    font-size: 11px;
}
.cdo-storefront-public-help--lab {
    margin-left: 14px;
    margin-bottom: 14px;
}