/* Beef Sires Styles - Version 1.2 - Updated for all beef-sires child categories */

/* Lazy Loading Styles for Table Images - Performance Optimization */
.lazy-table-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: #f5f5f5;
}

.loaded-table-image {
    opacity: 1;
    animation: fadeInImage 0.3s ease-in-out;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Table Loading Indicator */
.angus-data-table.loading {
    position: relative;
    min-height: 400px;
}

.angus-data-table.loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.angus-data-table.loading::after {
    content: "Loading product data...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #003c71;
    font-weight: 600;
    z-index: 11;
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Main Layout */
.angus-page-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 5px;
    box-sizing: border-box;
    clear: both;
    overflow-x: hidden;
    width: 100%;
}

/* Ensure the content area takes full width for all beef-sires child categories */
.tax-product_cat.term-angus #primary.content-area,
.tax-product_cat.term-charolais #primary.content-area,
.tax-product_cat.term-hereford #primary.content-area,
.tax-product_cat.term-murray-grey #primary.content-area,
.tax-product_cat.term-red-angus #primary.content-area,
.tax-product_cat.term-simmental #primary.content-area,
.tax-product_cat.term-south-devon #primary.content-area,
.tax-product_cat.term-speckle-park #primary.content-area,
.tax-product_cat.term-wagyu #primary.content-area,
.tax-product_cat.term-beef-sires #primary.content-area,
.tax-product_cat.beef-sires-page .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Site main styles for beef-sires categories */
.tax-product_cat.term-angus #main.site-main,
.tax-product_cat.term-charolais #main.site-main,
.tax-product_cat.term-hereford #main.site-main,
.tax-product_cat.term-murray-grey #main.site-main,
.tax-product_cat.term-red-angus #main.site-main,
.tax-product_cat.term-simmental #main.site-main,
.tax-product_cat.term-south-devon #main.site-main,
.tax-product_cat.term-speckle-park #main.site-main,
.tax-product_cat.term-wagyu #main.site-main,
.tax-product_cat.term-beef-sires #main.site-main,
.tax-product_cat.beef-sires-page .site-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override WooCommerce styles for beef-sires categories */
.tax-product_cat.term-angus .woocommerce-products-header,
.tax-product_cat.term-charolais .woocommerce-products-header,
.tax-product_cat.term-hereford .woocommerce-products-header,
.tax-product_cat.term-murray-grey .woocommerce-products-header,
.tax-product_cat.term-red-angus .woocommerce-products-header,
.tax-product_cat.term-simmental .woocommerce-products-header,
.tax-product_cat.term-south-devon .woocommerce-products-header,
.tax-product_cat.term-speckle-park .woocommerce-products-header,
.tax-product_cat.term-wagyu .woocommerce-products-header,
.tax-product_cat.term-beef-sires .woocommerce-products-header,
.tax-product_cat.beef-sires-page .woocommerce-products-header {
    display: none;
}

.tax-product_cat.term-angus .woocommerce-breadcrumb,
.tax-product_cat.term-charolais .woocommerce-breadcrumb,
.tax-product_cat.term-hereford .woocommerce-breadcrumb,
.tax-product_cat.term-murray-grey .woocommerce-breadcrumb,
.tax-product_cat.term-red-angus .woocommerce-breadcrumb,
.tax-product_cat.term-simmental .woocommerce-breadcrumb,
.tax-product_cat.term-south-devon .woocommerce-breadcrumb,
.tax-product_cat.term-speckle-park .woocommerce-breadcrumb,
.tax-product_cat.term-wagyu .woocommerce-breadcrumb,
.tax-product_cat.term-beef-sires .woocommerce-breadcrumb,
.tax-product_cat.beef-sires-page .woocommerce-breadcrumb {
    display: none;
}

.angus-page-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0px;
    width: 100%;
    clear: both;
}

.angus-sidebar {
    width: 25%;
    padding: 0 15px;
    box-sizing: border-box;
}

.angus-main-content {
    width: 75%;
    padding: 0 15px;
    box-sizing: border-box;
}

.angus-page-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.75rem; /* 28px based on 16px base */
    color: #333;
}

/* Product Card */
.angus-product-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.angus-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Product title link styling */
.product-header-link {
    text-decoration: none;
    display: block;
    transition: opacity 0.3s ease;
}

.product-header-link:hover {
    opacity: 0.8;
}

.product-header-link:hover h3 {
    color: #0d2847;
}

.product-header {
    background-color: white;
    padding: 15px 3px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.product-header h3 {
    color: #15406F;
    margin: 0;
    font-size: 1.125rem; /* 18px based on 16px base */
    font-weight: 700;
    text-transform: uppercase;
}

.product-image {
    height: auto;
    overflow: hidden;
    border-bottom: 1px solid #e0e0e0;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-price {
    padding: 10px;
    text-align: center;
    font-size: 1.125rem; /* 18px based on 16px base */
    font-weight: 700;
    color: #003c71;
    background-color: #d9eaf9;
    border-bottom: 1px solid #e0e0e0;
}

.product-price .inc-gst {
    font-size: 0.875rem; /* 14px based on 16px base */
    font-weight: 400;
}

.product-sire {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f5f5f5;
}

.product-sire .label {
    font-weight: 600;
    font-style: italic;
    margin-right: 5px;
}

.product-sire .value {
    font-weight: 700;
}

.product-stats {
    padding: 0;
    background-color: #fff;
}

/* H28: hide the stats block on bull grid cards while the design is finalised.
   display:none drops the block out of layout entirely, so each card shrinks
   by the block's height automatically — no additional sizing work needed.
   To restore: delete this block (the original .product-stats rule above is
   preserved untouched). */
.product-stats {
    display: none;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    border-bottom: 1px solid #e0e0e0;
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 5px;
    border-right: 1px solid #e0e0e0;
    height: 55px;
}

.stat-item:last-child {
    border-right: none;
}

.stat-label {
    font-size: 0.875rem; /* 14px based on 16px base */
    color: #666;
    margin-bottom: 5px;
    font-weight: 600;
}

.stat-value {
    font-size: 1.25rem; /* 20px based on 16px base */
    font-weight: 700;
    color: #003c71;
}

/* Specific styling for different stat items */
.stat-item.ce-dir,
.stat-item.gl,
.stat-item.day200,
.stat-item.day600,
.stat-item.ema {
    background-color: #b9d7f8;
}

.stat-item.ce-dtr,
.stat-item.bw,
.stat-item.day400,
.stat-item.sc,
.stat-item.cw,
.stat-item.imf {
    background-color: #9fdacc;
}

.stat-item.dtc {
    background-color: #b9d7f8;
}

/* Specific colors for the values */
.stat-item.ce-dir .stat-value,
.stat-item.gl .stat-value,
.stat-item.day200 .stat-value,
.stat-item.day600 .stat-value,
.stat-item.cw .stat-value,
.stat-item.imf .stat-value {
    color: #003c71;
}

.stat-item.ce-dtr .stat-value,
.stat-item.bw .stat-value,
.stat-item.day400 .stat-value,
.stat-item.sc .stat-value,
.stat-item.ema .stat-value,
.stat-item.dtc .stat-value {
    color: #003c71;
}

.product-actions {
    padding: 15px;
    text-align: center;
    background-color: #fff;
}

.product-actions .angus-button {
    background-color: #fff;
    color: #003c71;
    border: 2px solid #003c71;
    border-radius: 4px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 1rem; /* 16px - matches base */
    transition: all 0.3s ease;
    width: 80%;
    text-transform: uppercase;
}

.product-actions .angus-button:hover {
    background-color: #003c71;
    color: #fff;
}

/* View and Sort Options */
.view-sort-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.view-toggle a {
    display: inline-block;
    padding: 8px 15px;
    background-color: white;
    color: #003c71;
    border: 1px solid #003c71;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.875rem; /* 14px based on 16px base */
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.view-toggle a:hover {
    background-color: #f0f0f0;
}

.sorting-options {
    display: flex;
    gap: 15px;
    align-items: center;
}

.sort-option {
    padding: 8px 15px;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.875rem; /* 14px based on 16px base */
    transition: all 0.3s ease;
}

.sort-option.active {
    background-color: #003c71;
    color: white;
}

/* Products Grid */
.angus-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
}

/* Responsive Styles */
@media (max-width: 1799px) {
    .angus-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .angus-product-card {
        max-width: 320px;
    }
}

@media (max-width: 1440px) {
    .angus-page-container {
        padding: 30px 5px;
    }
}

@media (max-width: 1359px) {
    .angus-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .angus-product-card {
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .angus-sidebar,
    .angus-main-content {
        width: 100%;
    }

    .angus-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .angus-product-card {
        max-width: 100%;
        width: 100%;
    }

    .product-header h3 {
        font-size: 1rem; /* 16px - matches base */
    }
}

@media (max-width: 768px) {
    .stat-label {
        font-size: 0.75rem; /* 12px based on 16px base */
    }

    .stat-value {
        font-size: 1.125rem; /* 18px based on 16px base */
    }

    .product-header h3 {
        font-size: 1.125rem; /* 18px based on 16px base */
    }

    .stat-item {
        height: 50px;
    }

    .angus-search-box {
        margin-left: 0;
        margin-top: 10px;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }
    
    .angus-search-box input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .angus-products-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .angus-product-card {
        max-width: 100%;
    }
    
    /* Center the Select Options button on mobile */
    .product-price-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .product-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 15px 10px !important;
        text-align: center !important;
    }
    
    .product-actions .angus-button,
    .product-actions a.button,
    .product-actions .select-options {
        width: auto !important;
        min-width: 150px !important;
        max-width: 200px !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .view-sort-container {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        width: 100%;
    }
    
    /* Make view toggle buttons full width on mobile */
    .view-toggle {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .view-toggle a {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
        text-align: center;
        box-sizing: border-box;
        font-size: 0.875rem !important;
    }
    
    .view-toggle a:last-child {
        margin-bottom: 0;
    }

    .sorting-options {
        flex-wrap: wrap;
        width: 100%;
        flex-direction: column;
    }

    .sort-option {
        flex: 1 0 100%;
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .stat-item {
        height: 50px;
    }
    
    /* Ensure search box is full width on mobile */
    .angus-search-box {
        margin-left: 0 !important;
        margin-top: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }
    
    .angus-search-box input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Table View */
.angus-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    display: none; /* Hidden by default */
}

/* Real data table style */
.angus-data-table {
    display: none !important;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem; /* 14px based on 16px base */
    table-layout: auto; /* Allow table to adjust based on content */
    max-width: 100%; /* Ensure table doesn't exceed container width */
}

.angus-data-table.visible {
    display: block !important;
}

/* Table Headers */
.angus-data-table thead th {
    background-color: #333;
    color: white;
    padding: 8px 5px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #444;
    white-space: nowrap;
    font-size: 0.8125rem; /* 13px based on 16px base */
    position: sticky;
    top: 0;
}

/* First header cell (Title) */
.angus-data-table thead th.column-title {
    text-align: left;
    padding-left: 10px;
}

.angus-data-table thead th.sortable {
    cursor: pointer;
    position: relative;
}

.angus-data-table thead th.sortable:hover {
    background-color: #444;
}

.angus-data-table thead th.sortable:after {
    content: "↕";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    font-size: 12px;
}

.angus-data-table thead th.sort-asc:after {
    content: "↑";
    opacity: 1;
    color: #fff;
}

.angus-data-table thead th.sort-desc:after {
    content: "↓";
    opacity: 1;
    color: #fff;
}

/* Table Rows */
.angus-data-table tbody tr:nth-child(odd) {
    background-color: #5e6d78;
}

.angus-data-table tbody tr:nth-child(even) {
    background-color: #4a5761;
}

.angus-data-table tbody tr:hover {
    background-color: #3a464f;
}

/* Table Cells */
.angus-data-table td {
    padding: 8px 5px;
    text-align: center;
    border: 1px solid #555;
    color: white;
    white-space: nowrap;
}

/* Title column */
.angus-data-table th.column-title,
.angus-data-table td.column-title {
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
}

/* Action buttons */
.angus-data-table .select-options {
    background-color: white;
    color: #333;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.2s;
}

.angus-data-table .select-options:hover {
    background-color: #f0f0f0;
}

/* Search box override for mobile */
@media (max-width: 767px) {
    .sorting-options .angus-search-box {
        margin-left: 0 !important;
        margin-top: 10px !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 100% !important;
        position: relative;
        display: block !important;
    }
    
    .sorting-options .angus-search-box input[type="text"] {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure sorting options container allows full width */
    .sorting-options {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    .sorting-options .sort-option {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* No results message */
.no-products-message {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin: 30px 0;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
    clear: both;
    font-size: 18px;
    color: #333;
    font-weight: 500;
}

/* Remove top padding on the main content wrapper for beef-sires pages */
.site-main {
    padding-top: 0;
}

/* === Simmental category card alignment (added 2026-05-06) === */
/* Forces every bull card to match the Naples N78 layout: equal image
   area height + flex-column card so price/sire/stats rows align across
   the row regardless of original photo aspect ratio or placeholder. */
body.term-simmental .angus-product-card {
  display: flex;
  flex-direction: column;
}
body.term-simmental .angus-product-card .product-image,
body.term-simmental .angus-product-card .product-image .grid-view-image {
  height: 240px;
  min-height: 240px;
}
body.term-simmental .angus-product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}