/* Greybeard Core — module styles
 * Auto-enqueued by class-greybeard-core.php enqueue_assets()
 */

/* ============================================================
 * Contact form (module: contact-form)
 *
 * Layout/typography only. Send button styling lives in the
 * GLOBAL BUTTON STYLING section at the bottom of this file so
 * every button on the site reads the same way.
 * ============================================================ */
.gbcf {
    max-width: 720px;
    margin: 0 auto;
}
.gbcf-intro {
    text-align: center;
    color: #fff;
    margin: 0 0 1.5rem;
}
.gbcf-msg {
    padding: .75rem 1rem;
    border-radius: 4px;
    margin: 0 0 1rem;
    color: #fff;
}
.gbcf-success {
    background: rgba(22, 188, 14, .15);
    border-left: 3px solid #16bc0e;
}
.gbcf-error {
    background: rgba(220, 53, 69, .15);
    border-left: 3px solid #dc3545;
}
.gbcf-form {
    background: #222;
    padding: 2rem;
    border-radius: 8px;
}
.gbcf-field {
    margin-bottom: 1.25rem;
}
.gbcf-field label {
    display: block;
    color: #fff;
    font-weight: 500;
    margin-bottom: .4rem;
}
.gbcf-field input,
.gbcf-field textarea {
    width: 100%;
    background: transparent;
    color: #fff;
    border: 1px solid #16bc0e;
    border-radius: 4px;
    padding: .75rem 1rem;
    font: inherit;
    box-sizing: border-box;
}
.gbcf-field input:focus,
.gbcf-field textarea:focus {
    outline: 2px solid #F9AB03;
    outline-offset: 1px;
}
.gbcf-field textarea {
    resize: vertical;
    min-height: 140px;
}
.gbcf-actions {
    text-align: right;
}
.gbcf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
 * Breeders page (page ID 84236) — [product_categories] grid
 *
 * The default WC shortcode emits <ul class="products columns-6">
 * which sets each <li> to ~13.79% width. With a single category,
 * that renders as a ~140px card. These rules center the grid and
 * give each card a fixed 280px frame matching the production look.
 *
 * Everything is scoped to body.page-id-84236 so this CSS doesn't
 * touch the shop page, archive pages, or any other WC output.
 * ============================================================ */
.page-id-84236 .entry-content .woocommerce ul.products,
.page-id-84236 .entry-content .woocommerce ul.products.columns-6 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
.page-id-84236 .entry-content .woocommerce ul.products li.product-category,
.page-id-84236 .entry-content .woocommerce ul.products.columns-6 li.product-category {
    width: 280px !important;
    flex: 0 0 280px;
    margin: 0 !important;
    padding: 0;
    background-color: #232323;
    border: 1px solid #2E2E2E;
    border-radius: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    list-style: none;
    float: none !important;
    clear: none !important;
}
.page-id-84236 .entry-content .woocommerce ul.products li.product-category:hover {
    transform: translateY(-2px);
    border-color: #F9AB03;
}
.page-id-84236 .entry-content .woocommerce ul.products li.product-category a {
    display: block;
    padding: 1.5rem;
    text-decoration: none;
    color: #ffffff;
}
.page-id-84236 .entry-content .woocommerce ul.products li.product-category img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 auto 1rem;
    background-color: #141414;
    border-radius: 4px;
    padding: 1rem;
    box-sizing: border-box;
}
.page-id-84236 .entry-content .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    font-family: Poppins, system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Hide the WC product-count mark (e.g. "(508)"). Anyone who wants
 * to know the catalog size on a breeder will click through. Killing
 * it for every breeder card, not just Greybeard Private Label. */
.page-id-84236 .entry-content .woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count {
    display: none;
}

/* The post_content has a redundant <h2>Breeders</h2> right above
 * the shortcode (Elementor leftover from the old page). The H1
 * post-title already says "Breeders", so hide the duplicate. */
.page-id-84236 .entry-content > h2:first-child {
    display: none;
}

/* ============================================================
 * GLOBAL BUTTON STYLING — applies site-wide
 *
 * Spec:
 *   - 2px solid border
 *   - 10px border radius
 *   - Default border: #16bc0e (brand green)
 *   - Hover border:   #F9AB03 (brand amber/orange)
 *   - No background fill in ANY state (transparent across the board,
 *     which also kills any pink/mauve defaults from WooCommerce or
 *     WP block styles)
 *   - Text: white in every state
 *   - Disabled state: same green border, white text, 0.5 opacity
 *     and not-allowed cursor. Avoids the browser's default disabled
 *     treatment that was making "Update cart" look subpixel-fuzzy.
 *
 * Coverage — all common button selectors on the front end:
 *   - Native:    button, input[type=submit|button|reset]
 *   - WP blocks: .wp-block-button__link, .wp-element-button
 *   - WooCom.:   .button, .wc-block-components-button,
 *                .add_to_cart_button, .single_add_to_cart_button,
 *                .checkout-button
 *   - Theme:     .greybeard-btn, .greybeard-btn--primary,
 *                .greybeard-search__submit
 *   - Plugin:    .gbcf-actions button (the contact form Send)
 *
 * !important is used on the visual declarations (border, bg, color)
 * to reliably win over WC's and WP block library's specificity.
 * The plugin only enqueues this file on the front end, so wp-admin
 * buttons are unaffected.
 * ============================================================ */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
.button,
.wp-block-button__link,
.wp-element-button,
.wc-block-components-button,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.greybeard-btn,
.greybeard-btn--primary,
.greybeard-search__submit,
.gbcf-actions button {
    display: inline-block;
    border: 2px solid #16bc0e !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    padding: .75rem 1.75rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a.button:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.wc-block-components-button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.greybeard-btn:hover,
.greybeard-btn--primary:hover,
.greybeard-search__submit:hover,
.gbcf-actions button:hover {
    border-color: #F9AB03 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
a.button:focus,
.button:focus,
.wp-block-button__link:focus,
.wp-element-button:focus,
.wc-block-components-button:focus,
.add_to_cart_button:focus,
.single_add_to_cart_button:focus,
.checkout-button:focus,
.greybeard-btn:focus,
.greybeard-btn--primary:focus,
.greybeard-search__submit:focus,
.gbcf-actions button:focus {
    border-color: #F9AB03 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    outline: 2px solid #F9AB03;
    outline-offset: 2px;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
a.button:active,
.button:active,
.wp-block-button__link:active,
.wp-element-button:active,
.wc-block-components-button:active,
.add_to_cart_button:active,
.single_add_to_cart_button:active,
.checkout-button:active,
.greybeard-btn:active,
.greybeard-btn--primary:active,
.greybeard-search__submit:active,
.gbcf-actions button:active {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Disabled state — WC ships "Update cart" with the disabled attribute
 * until the user changes a quantity. Without an explicit rule the
 * browser falls back to system disabled rendering (grayed text,
 * weird anti-aliasing) which looked fuzzy in your screenshot. */
button:disabled,
button[disabled],
input[type="submit"]:disabled,
input[type="submit"][disabled],
input[type="button"]:disabled,
input[type="button"][disabled],
.button:disabled,
.button[disabled],
.wp-block-button__link:disabled,
.wp-block-button__link[disabled],
.wp-element-button:disabled,
.wp-element-button[disabled],
.wc-block-components-button:disabled,
.wc-block-components-button[disabled],
.greybeard-btn:disabled,
.greybeard-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #16bc0e !important;
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
}

button:disabled:hover,
button[disabled]:hover,
input[type="submit"]:disabled:hover,
input[type="submit"][disabled]:hover,
.button:disabled:hover,
.button[disabled]:hover,
.wp-element-button:disabled:hover,
.wp-element-button[disabled]:hover {
    border-color: #16bc0e !important;
    color: #ffffff !important;
}

/* ============================================================
   Wishlist page — product grid layout
   Scoped to .greybeard-wishlist-page so nothing else is affected.
   The classic ul.products markup isn't grid-styled under the
   block theme, so cards stacked full-width; this restores a
   responsive 5-up grid with sensibly sized images.
   ============================================================ */
.greybeard-wishlist-page ul.products {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.75rem !important;
}
.greybeard-wishlist-page ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    text-align: center;
    border: 2px solid #16bc0e !important;
    border-radius: 10px !important;
    overflow: hidden;            /* clip the square image to the 10px corners */
    padding-bottom: 1rem;
}
.greybeard-wishlist-page ul.products li.product .greybeard-card__body,
.greybeard-wishlist-page ul.products li.product .greybeard-card__action {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
.greybeard-wishlist-page ul.products li.product img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block;
    margin: 0 0 0.75rem !important;
}
@media (max-width: 1400px) {
    .greybeard-wishlist-page ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1024px) {
    .greybeard-wishlist-page ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .greybeard-wishlist-page ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .greybeard-wishlist-page ul.products { grid-template-columns: 1fr !important; }
}