/* ==========================================================================
   Shop page – modern layout
   Matches header/footer width & replaces all float-based layout from
   grid.css / master.css with Flexbox and CSS Grid.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Section wrapper
   -------------------------------------------------------------------------- */
.shop-section {
    width: 100%;
    background-color: var(--color-white);
}


/* --------------------------------------------------------------------------
   2. Content container — aligns to header/footer max-width & padding
   -------------------------------------------------------------------------- */
.shop-section > .c {
    max-width: var(--container-max-width);
    padding: 0 var(--container-padding);
    margin: 0 auto;

    /* Replace clearfix + float children with a flex column stack */
    display: flex;
    flex-direction: column;

    /* Override grid.css */
    float: none;
    clear: none;
}

/* Neutralise float, width, and left-margin on all direct .col children */
.shop-section > .c > .col {
    float: none;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   3. Basket bar
   -------------------------------------------------------------------------- */
#shop-basket-bar {
    padding: var(--spacing-sm) 0;
    text-align: right;
}


/* --------------------------------------------------------------------------
   4. Shop message — no layout changes needed, just spacing cleanup
   -------------------------------------------------------------------------- */
#shop-message {
    padding: var(--spacing-md) 0;
}


/* --------------------------------------------------------------------------
   5. You-are-here toolbar
      Replaces .c-9 (breadcrumbs) + .c-3 (currency) float split with Grid
   -------------------------------------------------------------------------- */

/* --- Breadcrumb fix ---
   master.css adds a position:absolute, background:#fff, 44px-tall ::after
   block to each breadcrumb <a>, which masks the start of the following word.
   The HTML already supplies &gt; separators, so the pseudo-element is
   redundant and must be suppressed. ---------------------------------------- */
.productbreadcrumbs_area a {
    line-height: var(--spacing-lg);   /* was 44px; normalise to token */
    margin-left: 0;
    white-space: nowrap;              /* keep each crumb on one piece */
}

.productbreadcrumbs_area a::after {
    display: none;                    /* suppress the white masking block */
}

.productbreadcrumbs_area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
}
/* -------------------------------------------------------------------- */
#you-are-here {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: start;
    gap: var(--spacing-md);

    /* Override master.css values with token equivalents */
    border-bottom: 1px solid var(--color-stone-grey);
    padding-bottom: var(--spacing-sm);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

/* Restore larger gap on the category shop page (product grid needs more breathing room) */
.shop-section--catalogue #you-are-here {
    margin-bottom: var(--spacing-xl);
}

#you-are-here > .col {
    float: none;
    width: auto;
    margin: 0;
}

/* Breadcrumb list — was float: left in master.css */
#you-are-here ul {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0 0 var(--spacing-xs) 0;
    padding: 0;
}

#you-are-here ul li {
    float: none;
}


/* --------------------------------------------------------------------------
   6. Shop items shell
   -------------------------------------------------------------------------- */
#shop-items {
    margin-top: 0;
    margin-bottom: var(--spacing-3xl);
    /* Establish a Block Formatting Context. A BFC unconditionally contains
       every descendant float regardless of its source (master-dev.css applies
       float:left to a.button, .vat.button, #card-element, and any future
       injected elements). No float inside this element can escape it. */
    display: flow-root;
}


/* --------------------------------------------------------------------------
   7. Product category grid
      The JS injects .col.c-3 children — we override them with CSS Grid
   -------------------------------------------------------------------------- */
#holdingContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);

    /* Override .col.c-12 floats */
    float: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Neutralise the injected .col.c-3 float layout */
#holdingContainer > .col {
    float: none;
    width: auto;
    margin: 0;
}

/* Category card — fixed 300px wide */
#holdingContainer > .col > a {
    display: block;
    width: 300px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

#holdingContainer > .col > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#holdingContainer > .col > a > img {
    display: block;
    width: 300px;
    height: 300px;
    object-fit: cover;
}

/* Shop table — spans all grid columns, overrides the inline width:640px */
#holdingContainer > table,
#holdingContainer > .shop-table {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: 100%;
    margin-top: var(--spacing-lg);
}


/* --------------------------------------------------------------------------
   8. Basket table — icon alignment
   -------------------------------------------------------------------------- */

/* Trash icon — the <a> is the only child in its cell; make it a centered
   flex container so the image sits in the middle of the cell in both axes. */
#shop-items table td > a:only-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quantity cell — align the text input and the refresh <a><img> on the same
   horizontal axis using vertical-align (flex would break table layout). */
#shop-items table td.quantity {
    white-space: nowrap;          /* prevent wrapping between input and icon */
}

#shop-items table td.quantity input[type="text"] {
    vertical-align: middle;
}

#shop-items table td.quantity > a {
    display: inline-flex;         /* keeps the <a> inline alongside the input */
    align-items: center;          /* centres the image vertically inside <a> */
    vertical-align: middle;       /* aligns the whole <a> with the input midpoint */
    margin-left: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   9. Checkout page — layout, tables, form inputs & buttons
   -------------------------------------------------------------------------- */

/* Override the category grid — checkout stacks its two blocks vertically */
.shop-section--checkout #holdingContainer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Cancel ALL .col floats within the checkout section in one shot.
   grid.css applies float:left to every .col regardless of nesting depth.
   Our per-element overrides only cover direct children; deeper .col nodes
   (col.c-8 spacer, col.c-4 table-wrapper, col.c-12 buttons-wrapper) escape
   their containers, collapsing the section and causing the footer overlap. */
.shop-section--checkout .col {
    float: none;
}

/* master-dev.css floats #card-element (Stripe card widget) left — cancel it
   so it stays inside its flex container and doesn't escape to the footer. */
.shop-section--checkout #card-element {
    float: none;
}

/* #user-admin wraps #holdingContainer and #ccDiv. As a plain block div with
   no BFC, it cannot contain any floated .col elements injected by the CMS JS.
   Making it a flex column establishes a BFC and guarantees it wraps all
   dynamic content regardless of how the JS places it in the DOM.
   master-dev.css caps it at max-width:960px — remove that so both tables
   use the full available content area width. */
.shop-section--checkout #user-admin {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    gap: var(--spacing-lg);
}

/* Neutralise the .col.c-12 wrapper around the order summary table */
.shop-section--checkout #holdingContainer > .col {
    width: 100%;
    float: none;
    margin: 0;
}

/* VAT / totals row — flex so the totals panel sits flush right */
#vat {
    display: flex;
    align-items: flex-start;
    float: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

#vat > .col {
    float: none;
    margin: 0;
}

/* The empty height:20px spacer div — flex-grow pushes the totals panel right */
#vat > .col:first-child {
    flex: 1;
}

/* Totals + payment panel (was .col.c-4) */
/* master-dev.css sets position:relative + margin-bottom:80px on .col.table-wrapper
   to act as the positioning context for the absolutely-placed .buttons-wrapper.
   Cancel both so it behaves as a normal flex column child. */
.table-wrapper {
    flex: 0 0 clamp(320px, 50%, 640px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: static;
    margin-bottom: 0;
}

.table-wrapper > .col {
    float: none;
    width: 100%;
    margin: 0;
}

/* Payment button wrapper */
/* master-dev.css sets position:absolute + bottom:-130px on .buttons-wrapper so it
   hangs 130px below .col.table-wrapper. Cancel it so the buttons stay inside the
   flex column and don't bleed over the footer.
   The DOM places .buttons-wrapper before the totals <table>, so use order:1 to
   push it after the table visually without touching the HTML. */
.buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    float: none;
    width: 100%;
    margin: 0;
    position: static;
    bottom: auto;
    order: 1;
}

/* ---- Shared table base (order summary + order total) ---- */
table.checkout-order-summary,
table.checkout-order-total {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-base);
    color: var(--color-charcoal-900);
}

table.checkout-order-summary th,
table.checkout-order-total th {
    background-color: var(--color-grey-light);
    color: var(--color-charcoal-700);
    font-family: var(--font-family-instrument-sans);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 2px solid var(--color-stone-grey);
    text-align: left;
}

table.checkout-order-summary td,
table.checkout-order-total td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-stone-grey);
    vertical-align: middle;
}

/* Alternating row tint on the order summary */
table.checkout-order-summary tbody tr:nth-child(even) {
    background-color: var(--color-off-white);
}

table.checkout-order-summary tbody tr:hover {
    background-color: var(--color-grey-light);
    transition: background-color var(--transition-base);
}

/* Column alignment */
table.checkout-order-summary th.quantity,
table.checkout-order-summary td.quantity,
table.checkout-order-summary td.center {
    text-align: center;
}

table.checkout-order-summary th.totals,
table.checkout-order-summary td.totals,
table.checkout-order-summary th[abbr="Discount"],
table.checkout-order-summary td[abbr="Discount"],
table.checkout-order-summary td[style*="text-align:right"],
table.checkout-order-total td[style*="text-align:right"] {
    text-align: right;
}

/* Total row — bold + warm tint */
table.checkout-order-summary td.total,
table.checkout-order-total td.total {
    font-weight: var(--font-weight-bold);
    background-color: var(--color-warm-cream);
    border-top: 2px solid var(--color-stone-grey);
}

/* ---- Order total panel (right-side table) ---- */
table.checkout-order-total {
    font-size: var(--font-size-sm);
}

table.checkout-order-total td:last-child {
    text-align: right;
}

/* Form inputs inside the totals table (voucher, VAT number, PO number).
   Label cell: 1/3, input cell: 2/3 so the label never wraps. */
table.checkout-order-total tr.orderDetailsDynamic td:first-child {
    width: 33%;
    white-space: nowrap;
}
table.checkout-order-total tr.orderDetailsDynamic td:last-child {
    width: 67%;
}
table.checkout-order-total td:has(input[type="text"]) {
    width: auto;
}
table.checkout-order-total input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-xs-2);
    border: 1px solid var(--color-stone-grey);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    color: var(--color-charcoal-900);
    background-color: var(--color-white);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

table.checkout-order-total input[type="text"]:focus {
    outline: none;
    border-color: var(--color-brand-color);
    box-shadow: 0 0 0 3px rgba(90, 45, 130, 0.12);
}

/* ---- Buttons (Pay by Bank Transfer, Submit voucher, Submit VAT) ---- */
/* All buttons share the same outlined/secondary style: white at rest, filled on hover */
#shop-items a.button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background-color: transparent;
    color: var(--color-brand-color);
    border: 1px solid var(--color-brand-color);
}

#shop-items a.button:hover {
    background-color: var(--color-brand-color);
    color: var(--color-white);
    opacity: 1;
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-brand-color);
    outline: none;
}

/* --------------------------------------------------------------------------
   10. Basket page — navigation buttons (Continue Shopping + Checkout)
   -------------------------------------------------------------------------- */

/* Switch the basket #holdingContainer to flex so the table spans full width
   and the two buttons sit in a row beneath it. */
.shop-section--basket #holdingContainer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.shop-section--basket #holdingContainer > table {
    flex: 0 0 100%;
    /* Override the grid-column rule from Section 7 */
    grid-column: unset;
    margin-top: var(--spacing-lg);
}

/* Both buttons share the same outlined/secondary style as checkout buttons */
#shop-items a.checkout,
#shop-items a.continue-shopping {
    display: inline-block;
    box-sizing: border-box;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background-color: transparent;
    color: var(--color-brand-color);
    border: 1px solid var(--color-brand-color);
    float: none;
}

#shop-items a.checkout:hover,
#shop-items a.continue-shopping:hover {
    background-color: var(--color-brand-color);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-brand-color);
    outline: none;
}

/* DOM order: checkout first, continue-shopping second.
   Visually: continue-shopping left, checkout right.
   Use order + margin-left:auto to flip without touching HTML. */
#shop-items a.checkout {
    order: 2;
    margin-left: auto;
}

#shop-items a.continue-shopping {
    order: 1;
}

/* --------------------------------------------------------------------------
   11. Login page — two-panel layout & button styling
   -------------------------------------------------------------------------- */

/* Cancel all .col floats within the login section */
.shop-section--login .col {
    float: none;
}

/* Password-change panel — constrain to the left half, matching a login panel.
   All .field, label, input and button styles below apply automatically
   because this element lives inside .shop-section--login. */
.shop-section--login #wp_change_form_div {
    max-width: calc(50% - var(--spacing-xl) / 2);
    float: none;
}

/* Two-panel layout: login left, register right */
.shop-section--login .col.c-12 > .col.c-12 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.shop-section--login .col.login,
.shop-section--login .col.register {
    flex: 1 1 280px;
    float: none;
    margin: 0;
    width: auto;
}

/* Section headings */
.shop-section--login h2 {
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal-900);
    margin-bottom: var(--spacing-md);
}

/* Form fields — flex column so label stacks above input */
.shop-section--login .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--spacing-sm);
    float: none;
}

.shop-section--login .field label {
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal-700);
}

.shop-section--login .field input[type="text"],
.shop-section--login .field input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-stone-grey);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    color: var(--color-charcoal-900);
    background-color: var(--color-white);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.shop-section--login .field input[type="text"]:focus,
.shop-section--login .field input[type="password"]:focus {
    outline: none;
    border-color: var(--color-brand-color);
    box-shadow: 0 0 0 3px rgba(90, 45, 130, 0.12);
}

/* Button fields — inherit flex column from .field; cancel master-dev.css's
   padding-left:120px (label-offset trick) which narrows the button area. */
.shop-section--login .field.float-buttons {
    float: none;
    padding-left: 0;
    gap: var(--spacing-xs);
}

/* Cancel the min-width:50% master-dev.css sets on the first button */
.shop-section--login .field.float-buttons input[type="button"].button:first-child {
    min-width: 0;
    margin-right: 0;
}

/* All buttons: outlined style matching the other pages.
   width:100% makes every button span the full field width just like the
   text inputs above, regardless of label length. */
.shop-section--login input[type="button"].button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background-color: transparent;
    color: var(--color-brand-color);
    border: 1px solid var(--color-brand-color);
    float: none;
}

.shop-section--login input[type="button"].button:hover {
    background-color: var(--color-brand-color);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-brand-color);
    outline: none;
    text-decoration: none !important;
}

@media (max-width: 640px) {
    .shop-section--login .col.login,
    .shop-section--login .col.register {
        flex: 0 0 100%;
    }
}

/* ---- Checkout responsive ---- */
@media (max-width: 768px) {
    #vat {
        flex-direction: column;
    }

    #vat > .col:first-child {
        display: none;  /* hide spacer when stacked */
    }

    .table-wrapper {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* Tablet landscape — 3-column product grid */
@media (max-width: 1024px) {
    #holdingContainer {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet portrait — stack breadcrumb toolbar, 2-column product grid */
@media (max-width: 768px) {
    .shop-section > .c {
        padding: 0 var(--spacing-sm);
    }

    #you-are-here {
        grid-template-columns: 1fr;
    }

    #holdingContainer {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile — single-column product grid */
@media (max-width: 480px) {
    #holdingContainer {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   12. Address page (Delivery + Invoice side by side)
   ============================================================ */

/* Cancel floats on all .col descendants */
.shop-section--address .col {
    float: none;
}

.shop-section--address {
    padding: var(--spacing-3xl) 0;
}

/* The .c class on the wrapper gives it grid.css's margin:0 auto / max-width:1200px.
   We override max-width via .shop-section > .c (already in Section 2).
   float:none !important ensures master-dev.css and grid.css floats cannot win. */
.shop-section--address > .c {
    float: none !important;
    /* grid.css sets margin-left:0 !important on .col:first-child, which
       prevents margin:0 auto from centering. Override both sides. */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    padding: 0 var(--container-padding);
}

/* Make <form> a flex row so the two panels sit side by side */
.shop-section--address form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

/* Each address panel takes equal space */
.shop-section--address .col.half-address {
    flex: 1 1 280px;
    min-width: 0;
}

/* Hide the empty placeholder .col.c-6 that is not a half-address panel */
.shop-section--address .col.c-6:not(.half-address) {
    display: none;
}

/* Section headings */
.shop-section--address h2 {
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal-900);
    margin-bottom: var(--spacing-md);
}

/* Form fields — label left, input right on same row */
.shop-section--address .field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
    float: none;
}

.shop-section--address .field label {
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal-700);
    flex: 0 0 130px;
    text-align: right;
}

.shop-section--address .field input[type="text"],
.shop-section--address .field select {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-stone-grey);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    color: var(--color-charcoal-900);
    background-color: var(--color-white);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.shop-section--address .field input[type="text"]:focus,
.shop-section--address .field select:focus {
    outline: none;
    border-color: var(--color-brand-color);
    box-shadow: 0 0 0 3px rgba(90, 45, 130, 0.12);
}

/* Submit button — outlined style matching all other pages */
.shop-section--address input[type="button"].button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-family-instrument-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background-color: transparent;
    color: var(--color-brand-color);
    border: 1px solid var(--color-brand-color);
    float: none;
}

.shop-section--address input[type="button"].button:hover {
    background-color: var(--color-brand-color);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-brand-color);
    outline: none;
    text-decoration: none !important;
}

@media (max-width: 640px) {
    .shop-section--address .col.half-address {
        flex: 0 0 100%;
    }
}