/* Fine tuning after browser passes on the custom WooCommerce templates. */

/* Product page: a single image (or no image yet) must occupy the full gallery width. */
.product-gallery-modern--single{grid-template-columns:minmax(0,1fr)}
.product-gallery-modern--single .product-gallery-modern__main{grid-column:1/-1}
.product-gallery-modern__main--placeholder{padding:28px;background:linear-gradient(145deg,#fbfcff,#f3f6fb)}
.product-image-placeholder{width:min(72%,430px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;border:1px dashed #ced8e7;border-radius:20px;background:#fff;color:#6d788b}
.product-image-placeholder__icon{width:76px;height:76px;display:grid;place-items:center;border-radius:18px;background:#f2f5fa;color:#9aa6b7;font-size:36px;line-height:1}
.product-image-placeholder strong{color:#344158;font-size:15px}
.product-image-placeholder span:last-child{max-width:250px;font-size:12px;line-height:1.55}

/* Keep the first screen compact even when catalog data is still sparse. */
.product-detail{padding-top:18px;padding-bottom:8px;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:48px}
.product-gallery-modern__main{height:470px}
.product-summary-modern{padding-top:10px}
.product-summary-modern h1{font-size:clamp(36px,3vw,48px)}
.product-facts{margin-top:20px}
.product-details-panel{margin-top:14px}

/*
 * Unified action buttons.
 * WooCommerce ships strong .button rules, so the custom catalog/product UI
 * deliberately wins specificity here instead of inheriting plugin defaults.
 */
body.single-product .product-actions-modern a.button,
body.single-product .product-actions-modern .button,
body.post-type-archive-product .catalog-empty .button,
body.tax-product_cat .catalog-empty .button,
.catalog-cta .button{
    min-height:46px!important;
    padding:0 20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:8px!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
    line-height:1!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}

body.single-product .product-actions-modern .button--primary,
body.post-type-archive-product .catalog-empty .button--primary,
body.tax-product_cat .catalog-empty .button--primary{
    background:var(--blue)!important;
    border:1px solid var(--blue)!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(25,84,237,.16)!important;
}
body.single-product .product-actions-modern .button--primary:hover,
body.post-type-archive-product .catalog-empty .button--primary:hover,
body.tax-product_cat .catalog-empty .button--primary:hover{
    background:#1248d5!important;
    border-color:#1248d5!important;
    color:#fff!important;
    box-shadow:0 10px 24px rgba(25,84,237,.22)!important;
    transform:translateY(-1px)!important;
}

body.single-product .product-actions-modern .button--secondary{
    background:#fff!important;
    border:1px solid #b8c9ff!important;
    color:var(--blue)!important;
    box-shadow:0 3px 10px rgba(14,34,70,.025)!important;
}
body.single-product .product-actions-modern .button--secondary:hover{
    background:#f6f8ff!important;
    border-color:var(--blue)!important;
    color:var(--blue)!important;
    transform:translateY(-1px)!important;
}

.catalog-cta .button--white{
    min-width:164px!important;
    background:#fff!important;
    border:1px solid rgba(255,255,255,.92)!important;
    color:var(--blue)!important;
    box-shadow:0 8px 22px rgba(2,16,47,.12)!important;
}
.catalog-cta .button--white:hover{
    background:#f8faff!important;
    border-color:#fff!important;
    color:#1248d5!important;
    box-shadow:0 10px 26px rgba(2,16,47,.18)!important;
    transform:translateY(-1px)!important;
}

body.single-product .product-actions-modern .button:focus-visible,
body.post-type-archive-product .catalog-empty .button:focus-visible,
body.tax-product_cat .catalog-empty .button:focus-visible,
.catalog-cta .button:focus-visible{
    outline:3px solid rgba(25,84,237,.2)!important;
    outline-offset:3px!important;
}

.product-actions-modern{gap:10px}

/* Hide implementation-only default category from the visual language while taxonomy is being populated. */
.catalog-card__category{min-height:16px;text-transform:none}

/* Catalog proportions closer to the approved render. */
.catalog-intro{padding-top:22px;padding-bottom:25px}
.catalog-intro h1{font-size:clamp(38px,3vw,48px)}
.catalog-toolbar{margin-bottom:16px}
.catalog-card__image{height:190px;padding:20px}
.catalog-card__body{padding:0 15px 15px}
.catalog-results{padding-bottom:54px}

/* Product fact cards: dedicated SVG assets and stronger typographic hierarchy. */
.product-facts.product-facts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-facts.product-facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-facts.product-facts--1{grid-template-columns:minmax(0,1fr)}
.product-fact{min-height:88px;padding:15px 17px;gap:13px}
.product-fact__icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 42px;
    border:1px solid #d5defe;
    border-radius:50%;
    background-color:#f8faff;
    background-repeat:no-repeat;
    background-position:center;
    background-size:22px 22px;
    box-shadow:0 1px 2px rgba(18,72,213,.03);
}
.product-fact--quantity .product-fact__icon{background-image:url('../icons/fact-quantity.svg')}
.product-fact--size .product-fact__icon{background-image:url('../icons/fact-size.svg')}
.product-fact--brand .product-fact__icon{background-image:url('../icons/fact-brand.svg')}
.product-fact div{gap:4px}
.product-fact strong{color:#26344b;font-size:11.5px;font-weight:760;line-height:1.2;letter-spacing:-.004em}
.product-fact .product-fact__value{display:inline-block;color:#17243a;font-size:15px;font-weight:760;line-height:1.25;letter-spacing:-.012em;white-space:normal;overflow:visible;text-overflow:clip}
.product-fact .product-fact__brand{color:var(--blue);font-size:15px;font-weight:800;text-decoration:none;transition:color .18s ease}
.product-fact .product-fact__brand:hover{color:#1248d5;text-decoration:underline;text-underline-offset:3px}

/* Product Details is content-only; key specs are intentionally not repeated. */
.product-details-panel--content-only .product-details-panel__title{margin-bottom:9px;color:#17243a;font-size:13px;font-weight:800;letter-spacing:-.008em}
.product-details-panel--content-only .product-details-panel__description p,
.product-details-panel__additional p{margin:0;color:#566277;font-size:12.5px;line-height:1.72}
.product-details-panel__additional{padding:20px 22px}
.product-details-panel--single .product-details-panel__description{border-right:0;border-bottom:0}

@media(min-width:901px){
    .product-details-panel--content-only{grid-template-columns:1fr 1fr}
    .product-details-panel--content-only.product-details-panel--single{grid-template-columns:1fr}
}

@media(max-width:1180px){
    .product-detail{gap:30px}
    .product-gallery-modern__main{height:430px}
    .product-facts.product-facts--3,
    .product-facts.product-facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
    .product-detail{grid-template-columns:1fr}
    .product-gallery-modern__main{height:min(68vw,540px)}
    .product-image-placeholder{width:min(68%,400px)}
    .product-details-panel__additional{border-top:1px solid var(--line)}
}

@media(max-width:620px){
    .product-gallery-modern__main{height:92vw;max-height:460px}
    .product-image-placeholder{width:88%;border-radius:16px}
    .product-summary-modern h1{font-size:32px}
    .product-facts.product-facts--3,
    .product-facts.product-facts--2,
    .product-facts.product-facts--1{grid-template-columns:1fr}
    .product-fact{min-height:78px;padding:13px 14px}
    .product-fact__icon{width:40px;height:40px;flex-basis:40px;background-size:21px 21px}
    body.single-product .product-actions-modern a.button,
    body.single-product .product-actions-modern .button,
    .catalog-cta .button{min-height:46px!important;width:100%!important}
    .catalog-cta .button--white{min-width:0!important}
}