/* CaptainGreek choose-options safety CSS. Moved from inline PHTML for Magento checkout CSP compatibility. */
/*
  IMPORTANT:
  This block intentionally does NOT set .price color, .price font-size,
  .price font-weight, or price family. It only fixes alignment/layout.
*/

/* Remove old under-price CTA artifacts from prior attempts. */
.product-item.cg-needs-options-card .cg-option-chip,
.product-item.cg-needs-options-card .cg-option-helper {
    display: none !important;
}

/* Hide only the duplicate/dangerous purchase overlay actions on option products. */
.product-item.cg-needs-options-card .product-btn .cg-option-action-hidden {
    display: none !important;
}

/* Keep option-product price area centered without changing price color/size. */
.product-item.cg-needs-options-card .product-item-details {
    text-align: center !important;
}

.product-item.cg-needs-options-card .product-item-details .price-wrap,
.product-item.cg-needs-options-card .product-item-details > .price-box,
.product-item.cg-needs-options-card .product-item-details > [data-role="priceBox"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    clear: both !important;
}

.product-item.cg-needs-options-card .product-item-details .price-box,
.product-item.cg-needs-options-card .product-item-details [data-role="priceBox"] {
    text-align: center !important;
}

.product-item.cg-needs-options-card .product-item-details .price-container {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    vertical-align: baseline !important;
}

.product-item.cg-needs-options-card .product-item-details .price-label,
.product-item.cg-needs-options-card .product-item-details .price-wrapper {
    display: inline-block !important;
    vertical-align: baseline !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* The one remaining eye button: use existing theme look, just make purpose clear. */
.product-item.cg-needs-options-card .product-btn .cg-primary-option-eye {
    position: relative !important;
}

/* Hover/focus hint. This is a tooltip, not a second button. */
.product-item.cg-needs-options-card .product-btn .cg-primary-option-eye::after {
    content: "Choose Options";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 5px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(23, 33, 58, .96);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    z-index: 50;
    transition: opacity .16s ease, transform .16s ease;
}

.product-item.cg-needs-options-card .product-btn .cg-primary-option-eye:hover::after,
.product-item.cg-needs-options-card .product-btn .cg-primary-option-eye:focus::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cg-sr-only {
    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;
}

@media (max-width: 767px) {
    .product-item.cg-needs-options-card .product-btn .cg-primary-option-eye::after {
        display: none !important;
    }
}