/* ---------------------------------------------------------------------------
   GBA UX fixes - 2026-08-18
   Additive only. To revert: delete this file and the gba_ux_fixes_css()
   function in functions.php.
   --------------------------------------------------------------------------- */

/* 1. PRODUCT LISTING - consistent image sizing -----------------------------
   woocommerce_thumbnail_cropping is "uncropped", so a short 1oz bar and a
   tall 1kg bar rendered at different heights and the grid went ragged.
   1:1 box + object-fit:contain equalises the cards WITHOUT cropping, which
   matters for elongated cast bars. */
ul.products li.product img,
ul.products li img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

ul.products li.product a {
    display: block;
}

/* 2. PAGINATION -----------------------------------------------------------
   PRE-EXISTING BUG (present on live too): the theme has NO css whatsoever for
   .woocommerce-pagination / .page-numbers, so the pager fell back to a default
   vertical <ul> - the "1 2 3 ->" stack at the bottom of the shop page. */
.woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 30px 0 10px;
    padding: 0;
}

.woocommerce-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}

.woocommerce-pagination ul.page-numbers li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e3dcc7;
    border-radius: 6px;
    color: #8a6f25;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
    background: #f7f2e4;
    border-color: #af8d2f;
}

.woocommerce-pagination ul.page-numbers li .page-numbers.current {
    background: #af8d2f;
    border-color: #af8d2f;
    color: #fff;
}

/* 3. FOOTER SIGNUP - stray required asterisk ------------------------------
   PRE-EXISTING BUG (present on live too): Gravity Forms 2.5+ added a
   .gform_required_legend paragraph and a .gfield_required asterisk span.
   The theme's .subscribe css predates that markup, so the asterisk wrapped
   onto its own line and rendered as a floating red dot under the label.
   The block is a single required email field, so the marker adds nothing. */
.subscribe .gform_required_legend,
.subscribe .gfield_required,
.subscribe .gfield_required_asterisk {
    display: none;
}

.subscribe .gfield_label,
.subscribe .gform-field-label {
    margin-bottom: 0;
    white-space: normal;
}

.subscribe .gform_fields {
    display: inline-block;
    vertical-align: middle;
}

/* 4. CART TABLE - softer, less boxy --------------------------------------- */
.shop_table.cart {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
}

.shop_table.cart th,
.shop_table.cart td {
    border: none;
    border-bottom: 1px solid #efefef;
    padding: 16px 14px;
    vertical-align: middle;
}

.shop_table.cart thead th {
    background: #fafafa;
    border-bottom: 1px solid #e6e6e6;
}

.shop_table.cart tr:last-child td {
    border-bottom: none;
}

/* 5. CART THUMBNAILS - smaller and uniform -------------------------------- */
.shop_table.cart td.product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
}

/* 6. UPDATE CART BUTTON - colour only -------------------------------------
   The button already carries the theme's own classes (btn btn-primary
   btn-yellow btn-large), which give it a fixed 47px height with a matching
   47px line-height, a 236px min-width, uppercase white bold text and the
   theme's signature asymmetric 0 6px 0 6px corners.
   
   So the ONLY thing actually wrong was contrast. Do NOT add padding, border
   or border-radius here: .btn-large sets an explicit height AND line-height,
   so any padding grows the box while the text stays glued to the original
   line box - which reads as "huge and off-centre". */
input[name="update_cart"],
button[name="update_cart"] {
    background: #8a6f25;
    opacity: 1;
}

input[name="update_cart"]:hover:not(:disabled),
button[name="update_cart"]:hover:not(:disabled) {
    background: #6f5a1e;
}

input[name="update_cart"]:disabled,
button[name="update_cart"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 7. CART SOFTENING ------------------------------------------------------
   Scoped to the cart only. An earlier revision styled .btn/.button globally,
   which also hit Gravity Forms' .gform_button and flattened the deliberate
   asymmetric corners on the footer SIGN UP button. */
.woocommerce-cart-form .quantity input,
.woocommerce-cart-form input[type="number"] {
    border-radius: 6px;
}

.cart_totals table,
.cart-collaterals table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
}

.cart_totals table th,
.cart_totals table td {
    border: none;
    border-bottom: 1px solid #efefef;
    padding: 14px;
}

.cart_totals table tr:last-child th,
.cart_totals table tr:last-child td {
    border-bottom: none;
}

/* 8. TODAY'S PRICES TABLES ------------------------------------------------
   PRE-EXISTING BUG (present on live too): the theme has NO css for the
   .prices tables, so they fell back to default browser rendering. Three
   consequences, all reported: ragged cell spacing, prices that don't line
   up vertically (proportional digits), and the two side-by-side tables
   sizing their columns independently so "Selling" in one didn't align with
   "Selling" in the other.

   table-layout:fixed + explicit column widths gives every table identical
   geometry, so the columns line up across tables regardless of how long the
   product names are. */
.prices table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.prices table th,
.prices table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #efefef;
}

.prices table thead th {
    border-bottom: 2px solid #e3dcc7;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    color: #716d63;
    white-space: nowrap;
}

.prices table tr:last-child td {
    border-bottom: none;
}

/* Shared column geometry - this is what makes the two tables align */
.prices table th:first-child,
.prices table td:first-child {
    width: 50%;
    text-align: left;
}

.prices table th:nth-child(2),
.prices table td:nth-child(2),
.prices table th:nth-child(3),
.prices table td:nth-child(3) {
    width: 25%;
    text-align: right;
}

/* Uniform character widths so the prices form a clean vertical column.
   tabular-nums makes every digit the same advance width. */
.prices table td .abc-live-price-product,
.prices table td .woocommerce-Price-amount,
.prices table td bdi {
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum" 1;
            font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

/* Long product names shouldn't blow out the fixed first column */
.prices table td:first-child a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .prices table th,
    .prices table td {
        padding: 10px 8px;
        font-size: 14px;
    }
}

/* 9. COMPACT PRICES VARIANT ----------------------------------------------
   Opt-in via a `prices-compact` body class (added in functions.php).
   ABCM runs 8 tables / 64 rows with product names up to 62 characters, so
   the comfortable spacing that suits Melbourne Mint's 2 tables / 14 rows
   becomes a lot of scrolling. This tightens the rows and widens the name
   column, while keeping the fixed column geometry that makes the tables
   align with each other.

   The stylesheet stays byte-identical across both sites - only the one-line
   body_class filter differs - so the two copies don't drift. */
body.prices-compact .prices table th,
body.prices-compact .prices table td {
    padding: 7px 10px;
    font-size: 15px;
    line-height: 1.35;
}

body.prices-compact .prices table thead th {
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Long names get more room; prices are short and fixed-width */
body.prices-compact .prices table th:first-child,
body.prices-compact .prices table td:first-child {
    width: 58%;
}

body.prices-compact .prices table th:nth-child(2),
body.prices-compact .prices table td:nth-child(2),
body.prices-compact .prices table th:nth-child(3),
body.prices-compact .prices table td:nth-child(3) {
    width: 21%;
}

/* Zebra striping earns its keep once rows get this tight */
body.prices-compact .prices table tbody tr:nth-child(even) td {
    background: #fbfaf7;
}

body.prices-compact .prices table td {
    border-bottom: 1px solid #f4f2ec;
}

@media (max-width: 767px) {
    body.prices-compact .prices table th,
    body.prices-compact .prices table td {
        padding: 6px 6px;
        font-size: 13px;
    }
}

/* 10. WIDER CONTAINER FOR THE COMPACT PRICES PAGE -------------------------
   The theme caps .shell at 1200px. On the compact (ABCM) prices page the
   product names still crowd, so let just that one container run wider.

   :has() keeps this surgical - it widens ONLY the shell that actually
   contains a .prices block, leaving the header, footer and every other
   shell on the site at 1200px. If a browser lacks :has() support the rule
   is simply ignored and the page stays at the old width, so it degrades
   safely rather than breaking. */
body.prices-compact .shell:has(.prices) {
    max-width: 1600px;
}

/* With the extra width, give the name column a little more again */
body.prices-compact .prices table th:first-child,
body.prices-compact .prices table td:first-child {
    width: 62%;
}

body.prices-compact .prices table th:nth-child(2),
body.prices-compact .prices table td:nth-child(2),
body.prices-compact .prices table th:nth-child(3),
body.prices-compact .prices table td:nth-child(3) {
    width: 19%;
}

/* Names now have room to sit on one line - stop the ellipsis kicking in
   prematurely, but keep it as a backstop for genuinely long ones. */
body.prices-compact .prices table td:first-child a {
    white-space: nowrap;
}

@media (max-width: 1300px) {
    body.prices-compact .prices table td:first-child a {
        white-space: normal;
    }
}