/**
 * FSD Core — Frontend Stylesheet v1.0.0
 *
 * Consolidates (replaces these plugins):
 *   fsd-mobile-grid-fix          — §1 Mobile grid
 *   fsd-chrome-layout-fix        — §2 Chrome overflow / 3-column
 *   fsd-go-to-product-button-fix — §3 Go-to-product button
 *   fix (bestsellers text)       — §4 Best Sellers text sizing
 *   ur-color-override (frontend) — §5 User Registration branding
 *
 * Color tokens
 *   --fsd-green:       #0fb36c   (primary brand green)
 *   --fsd-green-dark:  #0d9a5c   (hover state)
 *   --fsd-green-light: rgba(15,179,108,.10)
 */

:root {
    --fsd-green:       #0fb36c;
    --fsd-green-dark:  #0d9a5c;
    --fsd-green-light: rgba(15, 179, 108, .10);
}


/* ============================================================
   §1  MOBILE GRID FIX
   Forces WooCommerce product grids to 1 column on small screens.
   ============================================================ */

@media (max-width: 768px) {

    /* Gutenberg Product Collection block */
    ul.wc-block-product-template,
    ul.wc-block-product-template.columns-3,
    ul.wc-block-product-template.columns-2,
    .wc-block-woocommerce-product-template ul.wc-block-product-template {
        display: block !important;
        grid-template-columns: none !important;
        columns: 1 !important;
    }

    ul.wc-block-product-template > li.wc-block-product,
    ul.wc-block-product-template.columns-3 > li,
    ul.wc-block-product-template.columns-2 > li {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Classic WooCommerce grid (Best Sellers, etc.) */
    ul.wc-block-grid__products {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    ul.wc-block-grid__products li.wc-block-grid__product {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   §2  CHROME LAYOUT FIX
   Prevents horizontal overflow and enforces 3-column flex on
   Featured Bundles sections. Safe to apply globally — selectors
   are scoped to block-specific class names.
   ============================================================ */

/* Force 3-column flex row for columns-3 product templates — desktop only.
   Mobile override lives in §1. Without min-width here, §2 fires on mobile
   and overwrites §1's single-column layout (same specificity, later = wins). */
@media (min-width: 769px) {
    ul.wc-block-product-template.columns-3,
    ul.wc-block-product-template__responsive.columns-3 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1.5em !important;
        width: 100% !important;
        max-width: 100% !important;
        list-style: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    ul.wc-block-product-template.columns-3 > li,
    ul.wc-block-product-template__responsive.columns-3 > li {
        flex: 0 0 calc(33.333% - 1.5em) !important;
        max-width: calc(33.333% - 1.5em) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Stop horizontal page overflow (diagonal gradient background bleeds in Chrome) */
.wp-site-blocks {
    overflow-x: clip !important;
}

.wp-block-group.alignfull[class*="gutenify-section"],
.gutenify-section-342c0770-27a2-11ee-9113-49ce8869de8c {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.wp-block-group.alignfull {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Width guard for product collection containers */
.wp-block-woocommerce-product-collection.is-layout-flow,
.wp-block-woocommerce-product-collection-is-layout-flow {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* ============================================================
   §3  GO-TO-PRODUCT BUTTON FIX
   Styles .wwbp-go-to-product links to visually match the
   standard WooCommerce "Add to cart" button.
   ============================================================ */

.wwbp-go-to-product {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;

    font-family: Inter, sans-serif !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;

    padding: 16px 28.8px !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 4px !important;
    color: #fff !important;
    background-color: var(--wp--preset--color--primary, var(--fsd-green)) !important;
    transition: background-color .2s ease, opacity .2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.wwbp-go-to-product:hover {
    opacity: .85 !important;
    color: #fff !important;
}

.wwbp-go-to-product:visited,
.wwbp-go-to-product:focus,
.wwbp-go-to-product:active {
    color: #fff !important;
    text-decoration: none !important;
}

/* Fix the extra nested .wp-block-button wrapper WWBP injects */
.wc-block-grid__product-add-to-cart > .wp-block-button {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Center all grid buttons (classic + block templates) */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart {
    display: block !important;
    margin: 8px auto !important;
    text-align: center !important;
    float: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    text-align: center !important;
}

.wc-block-product,
.wc-block-components-product-button,
.wc-block-product-template {
    text-align: center !important;
    justify-content: center !important;
}

.wc-block-components-product-button__button,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-button__link.wwbp-go-to-product,
.wc-block-components-product-button a.added_to_cart,
.wc-block-components-product-button a.wp-block-button__link {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.wc-block-components-product-image,
.wc-block-components-product-price,
.wc-block-components-product-button {
    margin-left: auto !important;
    margin-right: auto !important;
}

.wc-block-components-product-button__button {
    margin-top: 8px !important;
}


/* ============================================================
   §4  BEST SELLERS GRID — TEXT SIZE FIX
   Scales the "Top Sellers" wc-block-grid typography to match
   the Product Collection block above it on the homepage.
   ============================================================ */

.wc-block-grid.wp-block-product-best-sellers .wc-block-grid__product-title {
    font-size: var(--wp--preset--font-size--medium, 1.25rem) !important;
    line-height: 1.4;
}

.wc-block-grid.wp-block-product-best-sellers .wc-block-grid__product-price {
    font-size: var(--wp--preset--font-size--small, 1rem) !important;
}

.wc-block-grid.wp-block-product-best-sellers .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid.wp-block-product-best-sellers .wc-block-grid__product-add-to-cart a {
    font-size: var(--wp--preset--font-size--small, 1rem) !important;
}

.wc-block-grid.wp-block-product-best-sellers .wc-block-grid__product-rating {
    font-size: 1rem !important;
}

.wc-block-grid.wp-block-product-best-sellers .wcfmmp_sold_by_container {
    font-size: .95rem !important;
}

.wc-block-grid.wp-block-product-best-sellers .wc-block-grid__product-onsale span {
    font-size: .9rem !important;
}


/* ============================================================
   §5  USER REGISTRATION — COLOR BRANDING (FRONTEND)
   Replaces the default UR blue (#475bb2) with FSD green (#0fb36c).
   ============================================================ */

:root {
    --ur-primary-color:                    var(--fsd-green) !important;
    --ur-primary-light:                    var(--fsd-green-light) !important;
    --ur-button-background-normal-color:   var(--fsd-green) !important;
    --ur-button-background-hover-color:    var(--fsd-green-dark) !important;
}

/* Buttons */
.ur-form-container .button.is-active,
.ur-form-container button.is-active,
.user-registration .button.is-active,
.user-registration button.is-active,
.ur-form-container .button-primary,
.user-registration .button-primary,
.ur-submit-button,
.user-registration-Button {
    background: var(--fsd-green) !important;
    border-color: var(--fsd-green) !important;
}

.ur-form-container .button-primary:hover,
.ur-form-container .button-primary:focus,
.ur-form-container .button-primary:active,
.user-registration .button-primary:hover,
.user-registration .button-primary:focus,
.user-registration .button-primary:active,
.ur-submit-button:hover,
.user-registration-Button:hover {
    background: var(--fsd-green-dark) !important;
    border-color: var(--fsd-green-dark) !important;
}

.ur-form-container .button-primary:disabled,
.user-registration .button-primary:disabled {
    background: rgba(15, 179, 108, .6) !important;
    border-color: rgba(15, 179, 108, .6) !important;
}

/* Input focus states */
.ur-frontend-form .ur-form-row .ur-form-grid input:focus,
.ur-frontend-form .ur-form-row .ur-form-grid select:focus,
.ur-frontend-form .ur-form-row .ur-form-grid textarea:focus,
.ur-frontend-form .ur-form-row .ur-form-grid .StripeElement--focus {
    border-color: var(--fsd-green) !important;
}

/* Links */
.user-registration-login-extra-section .user-registration-LostPassword,
.user-registration-before-login-btn .user-registration-LostPassword a,
.user-registration-register a {
    color: var(--fsd-green) !important;
}

/* MyAccount nav active */
#user-registration .user-registration-MyAccount-navigation ul
    .user-registration-MyAccount-navigation-link.is-active a {
    border-right-color: var(--fsd-green) !important;
}

[dir="rtl"] #user-registration .user-registration-MyAccount-navigation ul
    .user-registration-MyAccount-navigation-link.is-active a {
    border-left-color:  var(--fsd-green) !important;
    border-right-color: transparent !important;
}

/* Reset password / edit profile buttons */
.ur-frontend-form.login .ur-reset-password-btn,
.ur-frontend-form.login.ur-edit-profile .ur-form-row.edit-user-save-btn-container .btn-primary {
    background: var(--fsd-green) !important;
    border-color: var(--fsd-green) !important;
}

.ur-frontend-form.login .ur-reset-password-btn:hover {
    background: var(--fsd-green-dark) !important;
    border-color: var(--fsd-green-dark) !important;
}

/* Save and continue */
.user-registration-save-and-continue-button {
    color: var(--fsd-green) !important;
    border-color: var(--fsd-green) !important;
}

.user-registration-save-and-continue-button:hover {
    background: var(--fsd-green) !important;
}

/* Multipart navigation */
.ur-frontend-form.ur-frontend-form--rounded form button.user-registration-multi-part-nav-next,
.ur-frontend-form.ur-frontend-form--rounded form button.user-registration-multi-part-nav-prev {
    background: var(--fsd-green) !important;
    border-color: var(--fsd-green) !important;
}

/* Stripe integration */
.ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item
    .stripe-container .stripe-card-indicator {
    background: var(--fsd-green-light) !important;
    color: var(--fsd-green) !important;
}

/* Modal confirm */
.user-registration .swal2-container .swal2-popup .swal2-actions .swal2-confirm,
.user-registration-page .swal2-container .swal2-popup .swal2-actions .swal2-confirm {
    background: var(--fsd-green) !important;
    border-color: var(--fsd-green) !important;
}

/* Shortcode embed dot */
span.ur-shortcode-form-embed-dot {
    background-color: var(--fsd-green) !important;
}


/* ============================================================
   §6  QUANTITY INPUT EXPAND
   Fixes quantity inputs on product and cart pages so numbers
   don't get clipped by the default narrow input width.
   Replaces: wc-expand-qty
   ============================================================ */

.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-cart-form .quantity input.qty {
    min-width: 80px !important;
    width: auto !important;
    padding: 6px 10px;
    font-size: 16px;
    text-align: center;
    overflow: visible !important;
    box-sizing: content-box;
}