/* Critical PDP first-paint CSS (was inline in snippets/products/pdp-head.liquid).
   Keep in sync with stitch_assistant / product layout CLS reserves. */
.template-products-product .navbar {
    min-height: 50px;
    box-sizing: border-box;
}
.template-products-product .navbar .content[data-ng-cloak],
.template-products-product .navbar .content.options[data-ng-cloak] {
    display: flex !important;
    visibility: hidden;
    min-height: 50px;
    width: 100%;
    box-sizing: border-box;
}
/* Fixed-size review tab icons (CLS: unsized reviews-tab.png) */
.tab-review-icon {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 18px;
    flex-shrink: 0;
    vertical-align: middle;
}
.tab-review-icon img {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 18px;
}
.tab-review-icon__active {
    display: none;
}
.tab.active .tab-review-icon__default {
    display: none;
}
.tab.active .tab-review-icon__active {
    display: block;
}
/* Reserve Stitch Assistant card size (not the wrap — wrap must grow to center) */
.info-content .has-stitch-assistant .stitch-assistant-preview-card {
    min-width: 220px;
    max-width: 260px;
    width: 260px;
    min-height: 160px;
    flex: 0 0 auto;
}
/*
 * Critical design-info layout (from stitch_assistant.scss) — must match final paint
 * or Fits Hoop / Stitch Count start in one row then stack (CLS).
 */
.info-content .design-info-left {
    display: flex;
    flex-direction: column;
}
.info-content .design-info-left > div {
    display: flex;
    flex-direction: column;
}
.info-content .design-info-left > div > div {
    min-width: 100%;
    max-width: 100%;
}
.info-content .design-info-left > .design-info-half-cols {
    flex-direction: row;
}
.info-content .design-info-left > .design-info-half-cols > div {
    min-width: 50%;
    max-width: 50%;
    margin-top: 0;
    text-align: left;
}
/* SA card wrap: same breakpoints as stitch_assistant.scss */
.info-content .stitch-assistant-preview-card-wrap {
    display: none;
    min-height: 160px;
}
@media (min-width: 576px) and (max-width: 767px) {
    .info-content .stitch-assistant-preview-card-wrap {
        display: flex;
    }
}
@media (max-width: 575px), (min-width: 768px) and (max-width: 991px) {
    .info-content .design-info-left > div {
        flex-direction: row;
    }
    .info-content .design-info-left > div > div {
        min-width: 50%;
        max-width: 50%;
        margin-top: 0;
    }
    .info-content .stitch-assistant-preview-card-wrap.stitch-assistant-preview-col {
        display: none !important;
    }
}
/* Center SA card in the space beside specs (≥992px) */
@media (min-width: 992px) {
    .info-content .stitch-assistant-preview-card-wrap {
        display: flex;
    }
    .info-content .info-content__design-row.has-stitch-assistant {
        display: flex;
        justify-content: flex-start !important;
        align-items: flex-start;
    }
    .info-content .info-content__design-row.has-stitch-assistant > .design-info-left {
        flex: 0 1 auto !important;
        max-width: 50%;
    }
    /* Keep hoop / stitch / type / sku stacked when SA is beside them */
    .info-content .info-content__design-row.has-stitch-assistant .design-info-left > div {
        flex-direction: column !important;
    }
    .info-content .info-content__design-row.has-stitch-assistant .design-info-left > div > div {
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .info-content .info-content__design-row.has-stitch-assistant > .stitch-assistant-preview-card-wrap.stitch-assistant-preview-col {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }
}
/* Angular-only chrome: hide until Angular boots (body stays uncloaked for SSR price) */
[ng-cloak],
[data-ng-cloak],
.ng-cloak {
    display: none !important;
}
/* Stitch Assistant feedback overlay must never paint before Angular */
.feedback-modal-overlay[data-ng-cloak],
.feedback-modal-overlay[ng-cloak] {
    display: none !important;
}
/* Hide stock / cart-interest Angular UI until boot (avoids Notify me / In carts flash CLS) */
.btns[data-ng-cloak],
.sm-btnaddcart[data-ng-cloak],
.txt2 [data-ng-cloak],
.pdp-notify-stock[data-ng-cloak],
.link[data-ng-cloak] {
    display: none !important;
}
/* Left inspirations: never paint Angular-only rail before boot; drop SSR rail if hydrate finds none */
.inspirations[data-ng-cloak],
.inspirations.inspirations--gone {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Tall/narrow inspiration thumbs: fit + center (do not crop) */
.product-pg .inspirations .sample {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-pg .inspirations .sample img,
.product-pg .inspirations .sample video {
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
/* PDP V3 gallery thumbs — was object-fit: cover (cropped tall designs) */
.product-v3-gallery__thumb {
    width: 75px;
    height: 75px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}
.product-v3-gallery__thumb img,
.product-v3-gallery__thumb video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    object-position: center !important;
}
/*
 * First-paint V3 layout (do not wait for ~1.5MB product_v3.css).
 * Full bundle loads async from pdp-head.
 */
.product-v3__main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}
.product-v3__col--gallery,
.product-v3__col--buybox {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .product-v3__main {
        display: grid;
        align-items: start;
        grid-template-columns: 500px minmax(0, 1fr);
        column-gap: 1.25rem;
    }
    .product-v3__col--gallery {
        width: 500px;
        max-width: 500px;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .product-v3__main {
        display: grid;
        align-items: start;
        grid-template-columns: 650px minmax(0, 1fr);
        column-gap: 1.25rem;
    }
    .product-v3__col--gallery {
        width: 650px;
        max-width: 650px;
    }
}
@media (min-width: 1400px) {
    .product-v3__main {
        display: grid;
        align-items: start;
        grid-template-columns: 775px minmax(0, 1fr);
        column-gap: 1.25rem;
    }
    .product-v3__col--gallery {
        width: 775px;
        max-width: 775px;
    }
}
.product-v3-gallery__media-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.product-v3-gallery__thumb-shell {
    grid-column: 1;
    grid-row: 1;
}
.product-v3-gallery__stage-col {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
}
.product-v3-gallery__stage {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.product-v3-gallery__stage-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.product-v3-gallery__main-img,
.product-v3-gallery__main-video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
}
/* Cross-link CTAs under image (vector / FSL / fill / project) + design-options strip: hide until Angular */
.product-pg .mainImg .lg-btn[data-ng-cloak],
.product-pg .mainImg .img-btns [data-ng-cloak],
.product-pg .pdp-design-options-strip[data-ng-cloak] {
    display: none !important;
}
/* In-carts: empty until Angular sets message — never paint placeholder text */
.product-pg .prdInfo .in-cart {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
}
.product-pg .prdInfo .in-cart.in-cart--visible {
    display: flex !important;
    padding-bottom: 5px !important;
}
@media (max-width: 767px) {
    .product-pg .prdInfo .in-cart.in-cart--visible {
        display: none !important;
    }
}