/*
Theme Name: Brushworq Trade
Theme URI: https://brushworq.co.uk
Description: Standalone wholesale theme for Brushworq Trade. Built to remove all dependency on a parent theme.
Author: Brushworq
Version: 2.0.0
Text Domain: brushworq-trade
Requires PHP: 8.1
*/

/* ======================================================
   1. VARIABLES — palette carried over unchanged (confirmed correct)
   ====================================================== */

:root {
    --trade-navy:        #1a2433;
    --trade-slate:       #2e3d52;
    --trade-gold:        #c8a96e;
    --trade-gold-hover:  #b8924e;
    --trade-cream:       #faf8f4;
    --trade-warm-white:  #ffffff;
    --trade-border:      #ddd8cf;
    --trade-muted:       #7a7264;
    --trade-text:        #2e3d52;

    --font-heading: 'Montserrat', sans-serif;
    --font-body:    'Lato', sans-serif;

    /* Layout — single source of truth for every page type */
    --content-max-width: 1200px;
    --content-padding:   24px;
    --content-padding-mobile: 16px;
    --radius: 8px;
}

/* ======================================================
   2. RESET / BASE
   ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--trade-cream);
    color: var(--trade-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--trade-navy); text-decoration: none; }
a:hover { color: var(--trade-gold-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--trade-navy);
    line-height: 1.25;
    margin: 0 0 .6em;
}

/* ======================================================
   3. CONTAINER — the fix for the missing margins.
   Every page type (home, shop, category, product, standard
   page) routes through THIS class and nothing else. There is
   no second, competing container definition anywhere in this
   theme, so there is nothing for margins to disagree with.
   ====================================================== */

.container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

@media (max-width: 600px) {
    .container { padding: 0 var(--content-padding-mobile); }
}

.site-main {
    display: block;
    padding: 40px 0 64px;
}

/* Page / archive title — centred, consistent everywhere */
.page-title,
.woocommerce-products-header__title,
.entry-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: .4em;
}

.page-intro,
.woocommerce-products-header__description,
.term-description {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
    color: var(--trade-muted);
}

/* ======================================================
   4. HEADER
   ====================================================== */

.site-header {
    background: var(--trade-navy);
    border-bottom: 3px solid var(--trade-gold);
    padding: 16px 0;
    position: relative;
    z-index: 900;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-logo img { width: 120px; height: auto; }

.site-title {
    color: var(--trade-cream);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0;
    display: flex;
    align-items: center;
}

.trade-badge {
    display: inline-block;
    background: var(--trade-gold);
    color: var(--trade-navy);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.main-navigation { flex: 1; }

.main-navigation .menu {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.main-navigation a:hover { color: var(--trade-gold); }

.main-navigation .sub-menu {
    list-style: none;
    background: var(--trade-navy);
    border: 1px solid var(--trade-slate);
    border-radius: var(--radius);
    padding: 8px 0;
    position: absolute;
    min-width: 200px;
}

.main-navigation .sub-menu a {
    display: block;
    padding: 8px 16px;
    color: rgba(255,255,255,.8);
    text-transform: none;
}

.main-navigation .sub-menu a:hover {
    background: rgba(200,169,110,.12);
    color: var(--trade-gold);
}

.header-actions { display: flex; align-items: center; gap: 16px; }

.trade-account-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--trade-cream);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid rgba(200,169,110,.4);
    border-radius: 6px;
    padding: 8px 16px;
    transition: all .25s ease;
    white-space: nowrap;
}

.trade-account-link:hover {
    background: var(--trade-gold);
    color: var(--trade-navy);
    border-color: var(--trade-gold);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.burger-bar {
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,.9);
    display: block;
}

@media (max-width: 860px) {
    .menu-toggle { display: flex; }

    .main-navigation {
        display: none;
        flex-basis: 100%;
        order: 3;
    }

    .main-navigation.is-open { display: block; }

    .main-navigation .menu {
        flex-direction: column;
        gap: 0;
        padding-top: 16px;
    }

    .main-navigation .menu a {
        padding: 14px 4px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .main-navigation .sub-menu {
        position: static;
        border: none;
        padding-left: 16px;
    }

    .desktop-account-link { display: none; }
}

.mobile-account-links {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
}

@media (max-width: 860px) {
    .mobile-account-links {
        display: flex;
    }
    .mobile-account-links a {
        color: rgba(255,255,255,.85);
        padding: 10px 4px;
        text-transform: uppercase;
        font-size: .8rem;
        font-weight: 600;
    }
}

/* ======================================================
   5. BUTTONS
   ====================================================== */

.button,
button,
input[type="submit"],
.single_add_to_cart_button,
.button.add_to_cart_button,
.button.checkout {
    background: var(--trade-gold) !important;
    color: var(--trade-navy) !important;
    border: none;
    box-shadow: none;
    font-weight: 700 !important;
    letter-spacing: .06em;
    border-radius: 6px !important;
    padding: 12px 24px;
    cursor: pointer;
    font-family: var(--font-body);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover,
.button.add_to_cart_button:hover,
.button.checkout:hover {
    background: var(--trade-gold-hover) !important;
    box-shadow: 0 6px 18px rgba(200,169,110,.25);
}

/* ======================================================
   6. SHOP / CATEGORY ARCHIVE — product grid
   ====================================================== */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}

/* WooCommerce's own stylesheet outputs <ul class="products columns-4"> and
   applies float:left + a fixed percentage width to every li.product at a
   HIGHER specificity than a plain rule can beat. That width then resolves
   against the grid track itself, shrinking each tile a second time — that's
   the narrow, gappy "columnar" look. Stripping both explicitly, on every
   columns-N variant WooCommerce might output, so the grid above is the only
   thing sizing these tiles. */
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.woocommerce ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    border: 1px solid var(--trade-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--trade-warm-white);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: box-shadow .2s ease, border-color .2s ease;
    padding: 0 0 16px;
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--trade-gold);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Real products (individual cards) — tall card-shaped crop */
.woocommerce ul.products li.product:not(.product-category) img {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    margin-bottom: 14px;
}

/* Category tiles (e.g. the /shop/ collections grid) — square crop,
   these are photos representing a whole range, not a single card,
   so they should never be forced into the card's tall aspect ratio. */
.woocommerce ul.products li.product-category img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 14px;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    color: var(--trade-navy) !important;
    font-size: 1rem;
    padding: 0 12px;
}

.woocommerce ul.products li.product-category mark.count {
    background: none;
    color: var(--trade-muted);
    font-weight: 600;
}

.woocommerce-loop-product__title {
    color: var(--trade-navy) !important;
    font-size: 1rem;
    padding: 0 12px;
}

.woocommerce ul.products .price {
    color: var(--trade-navy) !important;
    font-size: .95rem !important;
    display: block;
    padding: 0 12px;
}

/* Collection / category grid on the shop landing page */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.collections-grid .collection-card { text-align: center; }
.collections-grid .collection-card img {
    border-radius: var(--radius);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 10px;
}

/* ======================================================
   7. SINGLE PRODUCT PAGE
   ====================================================== */

.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

@media (max-width: 860px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
    }
}

.woocommerce div.product div.images {
    max-width: 100%;
}

/* This is the fix for the oversized / fuzzy product image.
   The image is served at 2x its display width (see functions.php),
   so it stays sharp — this rule constrains the DISPLAY size only,
   it never scales the source file down after the browser has it. */
.woocommerce div.product div.images img {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--trade-border);
}

.woocommerce div.product .product_title {
    text-align: left;
    font-size: 1.8rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--trade-navy);
    font-size: 1.1rem;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    margin-bottom: 16px;
}

.woocommerce div.product .product_meta {
    font-size: .85rem;
    color: var(--trade-muted);
    border-top: 1px solid var(--trade-border);
    padding-top: 16px;
    margin-top: 20px;
}

.woocommerce div.product .product_meta a { color: var(--trade-muted); }

/* Long description, moved up next to the summary (see functions.php) */
.product-full-description {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--trade-border);
    color: var(--trade-text);
    font-size: .95rem;
    line-height: 1.7;
}

/* Description tab is unset in functions.php (moved above instead) —
   Additional Information and Reviews tabs are untouched and still show here.
   grid-column spans both columns of div.product's grid, so tabs and
   related products sit full-width below the image/summary row. */
.woocommerce-tabs,
.woocommerce div.product .related.products {
    grid-column: 1 / -1;
    margin-top: 40px;
    clear: both;
}

/* ======================================================
   8. MINIMUM ORDER NOTICE
   ====================================================== */

.trade-minimum-notice {
    background: rgba(200,169,110,.12);
    border: 1px solid var(--trade-gold);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 0 0 32px;
    font-size: .9rem;
    color: var(--trade-navy);
    font-weight: 600;
    text-align: center;
}

/* ======================================================
   9. FORMS
   ====================================================== */

input, textarea, select {
    font-family: var(--font-body);
    border: 1px solid var(--trade-border);
    border-radius: 6px;
    padding: 10px 12px;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--trade-gold);
    box-shadow: 0 0 0 3px rgba(200,169,110,.15);
}

/* ======================================================
   10. FOOTER
   ====================================================== */

.site-footer {
    background: var(--trade-navy);
    border-top: 3px solid var(--trade-gold);
    margin-top: 80px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 56px 0;
}

@media (max-width: 860px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-title { color: var(--trade-cream); font-size: 1.5rem; }
.footer-text { color: rgba(255,255,255,.6); font-size: .9rem; }
.footer-heading {
    color: var(--trade-gold);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 14px;
}

.footer-collections-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-collections-grid .footer-links { flex: 1 1 100px; }

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li { margin-bottom: 8px; }

.footer-links a {
    color: rgba(255,255,255,.65);
    font-size: .85rem;
}

.footer-links a:hover { color: var(--trade-gold); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0;
}

.footer-bottom p {
    color: rgba(255,255,255,.45);
    font-size: .8rem;
    margin: 0;
}

.footer-small { text-align: right; }

@media (max-width: 560px) {
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-small { text-align: center; }
}

/* ======================================================
   11. TRADE GATE / ACCOUNT PAGES
   ====================================================== */

.trade-gate {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
    padding: 0 20px;
}

.trade-gate h2 { font-size: 1.8rem; margin-bottom: 12px; }
.trade-gate p { color: var(--trade-muted); margin-bottom: 32px; }

/* ======================================================
   12. ORDER TOTAL BAR
   ====================================================== */

.order-total-bar {
    position: sticky;
    bottom: 0;
    background: var(--trade-navy);
    color: var(--trade-cream);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 800;
    border-top: 2px solid var(--trade-gold);
    font-size: .9rem;
    font-weight: 600;
}

.order-total-bar .total-amount { color: var(--trade-gold); font-size: 1.1rem; font-weight: 800; }
.order-total-bar .minimum-met { color: #6ee7b7; font-size: .8rem; }
.order-total-bar .minimum-unmet { color: rgba(255,255,255,.5); font-size: .8rem; }