/**
 * Tudor PDP (Hyvä) — load AFTER tudor.css on catalog_product_view_attribute_set_11.
 * Shell: restore site header if tudor.css `.hidden` conflicts with styles.css `hidden lg:flex`.
 * @see tudor-collection-overrides.css (same pattern for PLP)
 */
body.tudor-productdetails-body #maincontent {
    display: block !important;
    min-height: unset;
}

body.tudor-productdetails-body .page-main,
body.tudor-productdetails-body #maincontent.page-main {
    margin: 0 !important;
    margin-block: 0 !important;
    max-width: none !important;
    padding-inline: 0 !important;
}

body.tudor-productdetails-body .page-wrapper #maincontent > .columns {
    display: block !important;
    width: 100%;
    max-width: none !important;
    padding-inline: 0 !important;
    margin-inline: 0;
    gap: 0;
}

/* Hide native <select>; custom braceletSizeSelector is the visible control (deploy-safe — do not rely on tudor.css rebuild) */
body.tudor-productdetails-body
    .tudor-productDetails-productTop-infoPanel-braceletSize
    .control
    > select,
body.tudor-productdetails-body
    .tudor-productDetails-productTop-infoPanel-braceletSize
    .braceletSize-nativeSelect {
    display: none !important;
}

/* If options render twice (stale layout / duplicate DB option), keep first bracelet UI only */
body.tudor-productdetails-body
    .tudor-product-custom-options
    .tudor-productDetails-productTop-infoPanel-braceletSize
    ~ .tudor-productDetails-productTop-infoPanel-braceletSize {
    display: none !important;
}

body.tudor-productdetails-body
    .tudor-product-custom-options
    .tudor-productDetails-productTop-infoPanel-braceletSizeError
    ~ .tudor-productDetails-productTop-infoPanel-braceletSizeError {
    display: none !important;
}

/* --- Bracelet selector + ATC (PDP); keep here so deploy does not depend on tailwind rebuild --- */
.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-braceletSize
    .braceletSizeSelector-button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 10px 44px 10px 12px !important;
}

.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-braceletSize
    .braceletSizeSelector-label {
    flex: 1 1 auto;
    text-align: left !important;
    width: 100%;
}

.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-braceletSize
    .braceletSizeSelector-arrow {
    display: block !important;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    pointer-events: none;
}

/* Unselected: grey disabled ATC only */
.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-purchase
    form[data-tudor-bracelet-form]
    .tudor-productDetails-productTop-infoPanel-addtocartBtn {
    display: none !important;
}

.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-purchase
    form[data-tudor-bracelet-form]
    .tudor-productDetails-productTop-infoPanel-addtocartBtn.is-visible {
    display: block !important;
}

.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-purchase
    form[data-tudor-bracelet-form]
    .tudor-productDetails-productTop-infoPanel-disabledBtn {
    display: none !important;
}

.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-purchase
    form[data-tudor-bracelet-form]
    .tudor-productDetails-productTop-infoPanel-disabledBtn.is-visible {
    display: block !important;
    background-color: #727272 !important;
}

.tudor-productDetails-productTop
    .tudor-productDetails-productTop-infoPanel-purchase
    form[data-tudor-bracelet-form]
    .tudor-productDetails-productTop-infoPanel-disabledBtn.is-visible:hover {
    background-color: rgba(114, 114, 114, 0.8) !important;
}

@media only screen and (max-width: 1023px) {
    body.tudor-productdetails-body .page-header {
        position: relative;
        z-index: 20;
    }
}

/*
 * Site header icons — tudor.css ships unlayered `.hidden{display:none}` which beats
 * Hyvä @layer utilities on `hidden sm:block`, `hidden lg:inline-block`, etc.
 * (Rolex PDP does not load tudor.css, so icons stay visible there.)
 */
@media only screen and (min-width: 640px) {
    /* Icon only — do NOT target `.sm:block` globally (#search-content shares that class). */
    body.tudor-productdetails-body .page-header #menu-search-icon {
        display: block !important;
    }
}

@media only screen and (min-width: 1024px) {
    body.tudor-productdetails-body .page-header .lg\:flex {
        display: flex !important;
    }

    body.tudor-productdetails-body .page-header .lg\:block {
        display: block !important;
    }

    body.tudor-productdetails-body .page-header .lg\:inline-block,
    body.tudor-productdetails-body .page-header #customer-menu {
        display: inline-block !important;
    }

    body.tudor-productdetails-body .page-header .lg\:inline-flex,
    body.tudor-productdetails-body .page-header #menu-wishlist-icon {
        display: inline-flex !important;
    }
}

body.tudor-productdetails-body .page-header #menu-cart-icon {
    display: block !important;
}

/*
 * #search-content uses Alpine x-show; tudor.css `.hidden{display:none}` persists on the
 * element and re-hides the panel after click (x-show removes inline style when open).
 */
body.tudor-productdetails-body .page-header #search-content.hidden {
    display: none;
}

@media only screen and (min-width: 640px) {
    body.tudor-productdetails-body .page-header #search-content:not([style*="display: none"]) {
        display: block !important;
    }
}