/*

WooCommerce Stylesheet

    * Version: 1.0
    * Powered by House Of Scribes
    * https://houseofscribes.co.nz

    Only what base.css can't already do — WooCommerce's own markup that has
    no block equivalent. Check base.css before adding anything here.

    Breakpoints
    * Desktop: 1200px
    * Tablet: 992px
    * Mobile: 768px

    Contents
    * 01. Shared
    * 02. Shop / Archive
    * 03. Single Product
    * 04. Cart & Checkout
    * 05. Shop tables

*/




/* 01. Shared */
/* -------------------------------------------- */

/* jQuery.blockUI's white overlay (cart/checkout AJAX) — !important beats its inline styles */
.blockOverlay {
    background: transparent !important;
    opacity: 0 !important;
}

/* Stacks — WooCommerce's own wrappers, which the column spacing (direct
   children only) can't reach. A gap, not margins, so a missing part leaves no space. */
.woocommerce-notices-wrapper,
.product_meta,
#payment,
#payment > .form-row, /* the terms + Place order / Pay for order row */
#payment .wc_payment_methods,
.woocommerce-bacs-bank-details {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

.woocommerce-notices-wrapper,
.product_meta {
    gap: var(--spacer);
}

#payment .wc_payment_methods,
.woocommerce-bacs-bank-details {
    gap: var(--padding);
}

/* Notices — fixed at the bottom of the screen, over the page (under the
   header and its menu), so showing or dismissing one never moves the content:
   as wide as their text, full width on phones. Button-padded, inverted colours.
   Scoped to the wrapper: the same classes are used for persistent content ("no
   products found") that must never dismiss. They slide up in; js/store.js adds
   the close button and .is-dismissing: fade and slide back down. */
.woocommerce-notices-wrapper {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 999;

    align-items: center;
    pointer-events: none; /* the empty space around a notice stays clickable */
}

@media screen and (max-width: 768px) {
    .woocommerce-notices-wrapper {
        align-items: stretch;
    }
}

@keyframes notice-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    margin: 0;
    padding: var(--button-padding-vertical) calc(var(--button-padding-horizontal) + 28px) var(--button-padding-vertical) var(--button-padding-horizontal);

    background-color: var(--text);
    color: var(--background);
    border-radius: var(--button-border-radius);

    font-size: var(--p);
    text-align: center;

    pointer-events: auto;

    animation: notice-in var(--hover);
    transition: opacity var(--hover), transform var(--hover);
}

.woocommerce-notices-wrapper .is-dismissing {
    opacity: 0;
    transform: translateY(100%);
}

.woocommerce-notices-wrapper a {
    color: var(--background);
}

/* The X is base.css's close icon; this only places it */
.woocommerce-notice-close {
    position: absolute;
    top: 50%;
    right: var(--spacer);
    transform: translateY(-50%);
}

/* Pills — the quantity stepper and the coupon field: one outlined control
   the height of a real button (--button-height), its input borderless inside */
.quantity,
.coupon-fields {
    display: flex;
    align-items: center;

    height: var(--button-height);

    border: var(--button-border-width) var(--button-border-style) color-mix(in srgb, var(--text) var(--button-border-opacity), transparent);
    border-radius: var(--button-border-radius);
}

:is(.quantity, .coupon-fields) input {
    padding-bottom: 0;
    border-bottom: none;
}

/* Quantity stepper — −/+ buttons fused to the input by overflow: hidden */
.quantity {
    display: inline-flex;
    align-self: start; /* forms are flex, and would stretch it */
    overflow: hidden;
}

.quantity .quantity-step {
    position: relative;
    align-self: stretch; /* the pill's full height to tap */
    height: auto; /* not .is-icon's fixed square height: the pill's own border would clip it */
    border: none;
    border-radius: 0;
    font-size: 0; /* the typed − / + stay for no-CSS and screen readers (each has an aria-label) */
}

/* The − and + are base.css's drawn plus / minus icon (09. Components) */

/* A fade, not base.css's fill — two filled buttons this close read too heavy */
.quantity .quantity-step:is(:hover, :focus, :active) {
    color: inherit;
    background-color: transparent;
    box-shadow: none;
    opacity: 0.5;
}

.quantity input[type="number"] {
    width: 2.5em;
    text-align: center;
}

/* "View cart" (added by WooCommerce's JS after an Add to cart): base.css's
   arrow link, spaced from the button and above the card's stretched link */
.added_to_cart {
    position: relative;
    margin-left: var(--padding);
}

/* The sale badge is out of flow, so whatever follows it (card image, product gallery) gets no gap */
.wp-block-column > .onsale + * {
    margin-top: 0;
}

.onsale {
    position: absolute;

    margin-top: var(--spacer);
    margin-left: var(--spacer);
    padding: var(--spacer);

    background: var(--primary);
    border-radius: var(--border-radius);
}



/* 02. Shop / Archive */
/* -------------------------------------------- */

/* Empty state */
.woocommerce-info {
    font-size: var(--p);
}

/* Toolbar — result count + sort */
.woocommerce-result-count {
    opacity: 0.5;
}

.woocommerce-ordering {
    margin: 0;
}

/* The sort at the row's right edge, opposite the count (its form is base.css's select grid); stacked under the count on phones, it stays left with it */
@media screen and (min-width: 769px) {
    .woocommerce-ordering {
        justify-content: end;
    }
}

/* Product cards */
.products > .product img {
    width: 100%;
    height: auto; /* beats base.css's main img { height: 100% }, which would override aspect-ratio */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.products > .product .price {
    font-family: var(--body);
    font-size: var(--p);
    opacity: 0.8;
}

.products > .product .price del {
    margin-right: var(--spacer);
    opacity: 0.5;
    text-decoration: line-through;
}

.products > .product .price ins {
    color: var(--secondary);
    text-decoration: none;
}

.products > .product .star-rating {
    margin-bottom: var(--spacer);
    color: var(--tertiary);
    font-size: var(--small);
}



/* 03. Single Product */
/* -------------------------------------------- */

/* header.hero centres its text; this hero holds controls, so left */
header.hero .wp-block-group.product .wp-block-column {
    text-align: left;
    text-wrap: initial;
}

/* Categories / tags: a wrapping row of chips (base.css a[rel~="tag"]) after the label */
.product_meta :is(.posted_in, .tagged_as) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacer);
}



/* 04. Cart & Checkout */
/* -------------------------------------------- */

/* Cart actions — coupon pill and Update cart, one row */
.cart-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap);

    margin-top: var(--margin);
}

/* The coupon's error / success message lands under the pill, within this width */
.coupon {
    max-width: 350px;
}

.coupon-fields {
    gap: var(--spacer);
}

.coupon-fields input[type="text"] {
    flex: 1 1 30ch; /* room for a 30-character code; on a phone it shrinks to the space left beside the button */
    min-width: 0;
    padding-left: var(--padding);
}

.coupon-fields button {
    border-right: none;
}

.coupon-fields .wp-block-buttons {
    flex-shrink: 0; /* the input takes the room left; the button keeps its label on one line */
}

/* Form messages — size/colour in base.css "Responses" */
.coupon-error-notice,
.coupon-success-notice,
.checkout-inline-error-message {
    margin: var(--spacer) 0 0;
}

/* WooCommerce's order-attribution wrapper of hidden inputs — would add a gap in #customer_details */
wc-order-attribution-inputs {
    display: none;
}

/* Small print (the <p>s, since base.css sizes p directly) */
.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-checkbox-text,
.payment_box p,
#payment .woocommerce-info {
    font-size: var(--small);
}

/* Each payment method: choice box beside its name, description just under it */
#payment .wc_payment_method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--spacer);
    row-gap: calc(var(--spacer) / 2);
}

#payment .wc_payment_method .payment_box {
    flex-basis: 100%;
}

/* Checkout errors show only under their fields: those with a field (data-id)
   are hidden from the top list, and the list goes when all have one */
.woocommerce-NoticeGroup-checkout li[data-id],
.woocommerce-NoticeGroup-checkout:not(:has(li:not([data-id]))) {
    display: none;
}

/* Heading → whatever's under it: always --padding (base.css gives text a
   smaller gap than a table or field group) */
.woocommerce .wp-block-column > :is(h2, h3) + * {
    margin-top: var(--padding);
}

/* Thank-you: the payment method's note runs straight on from the overview */
.woocommerce-order-overview + p {
    margin-top: 0;
}

/* The bank account's name — the gateway's h3, as a bold line of body text */
.wc-bacs-bank-details-account-name {
    font-weight: var(--bold);
    line-height: var(--line-height-body);
}

/* Download button — base.css's icon button, showing --arrow-down */
.woocommerce-MyAccount-downloads-file::before {
    content: var(--arrow-down);
}




/* 05. Shop tables */
/* -------------------------------------------- */

/* One component for every table WooCommerce makes (all carry .shop_table):
   checkout's Your order, order details, order-pay, downloads, the cart and
   its totals, My Account. Rules key on what a row *is* (.order-total, an
   item row, a table with a <tfoot>), not where it sits. Header rows are
   visually hidden (base.css 13. Accessibility). */

/* Labels — body text, not base.css's heading-style th (the bank account name, a product's option names and its specifications too) */
.shop_table th,
.variations th,
.shop_attributes th,
.wc-bacs-bank-details-account-name {
    font-family: var(--body);
    font-size: var(--p);
    letter-spacing: var(--letter-spacing-regular);
}

/* A product's option: its name close beside the select, on the select's text baseline. Each row is a flex row, not a table row: base.css makes the select's cell a grid (for its arrow), and a grid cell drops out of the table's layout, which then gives it spare width — a gap */
table.variations,
.variations tbody {
    display: block;
}

/* "Color:" — a colon after the option's name, like the shop's other labels ("Category:") */
.variations th label::after {
    content: ":";
}

.variations tr {
    display: flex;
    align-items: baseline;
    gap: var(--spacer);
}

/* Cells share a baseline; --margin between columns, none at the outer edges */
.shop_table :is(th, td) {
    vertical-align: baseline;
}

.shop_table :is(th, td) + :is(th, td),
.shop_attributes :is(th, td) + :is(th, td) {
    padding-left: var(--margin);
}

/* A product's specifications (Additional Information): only as wide as its contents, so the labels sit by their values */
.shop_attributes {
    width: auto;
}

/* The last column and amounts right-aligned, amounts never wrap; quantities
   and the downloads table's middle columns centred */
.shop_table :is(th, td):last-child,
.shop_table :is(.product-price, .product-subtotal, .product-total) {
    text-align: right;
}

.shop_table tr:not(.shipping) > td:last-child,
.shop_table :is(.product-price, .product-subtotal, .product-total) {
    white-space: nowrap;
}

.shop_table :is(.product-quantity, .download-remaining, .download-expires) {
    text-align: center;
}

/* WooCommerce's "don't wrap" class — its rule lived in the stylesheet bootstrap.php removes */
.woocommerce .nobr {
    white-space: nowrap;
}

/* Lines — a hairline with --padding either side, padding only next to a line.
   1. Under the items, when totals follow in a <tfoot> */
.shop_table:has(tfoot) tbody {
    border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
}

.shop_table:has(tfoot) tbody tr:last-child :is(th, td),
.shop_table tr:has(+ tr.order-total) :is(th, td) {
    padding-bottom: var(--padding);
}

.shop_table tfoot tr:first-child :is(th, td) {
    padding-top: var(--padding);
}

/* 2. Above the Total */
.shop_table tr.order-total {
    border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
}

.shop_table tr.order-total :is(th, td) {
    padding-block: var(--padding);
}

/* Item rows --padding apart; other rows sit directly under each other */
.shop_table tr:is(.cart_item, .order_item) + tr:is(.cart_item, .order_item) :is(th, td) {
    padding-top: var(--padding);
}

/* Total: bold label and amount (its <strong> inherits rather than going bolder) */
.shop_table tr.order-total,
.shop_table tr.order-total :is(th, td) {
    font-weight: var(--bold);
}

.shop_table tr.order-total strong {
    font-weight: inherit;
}

/* Buttons in the last column (order actions, downloads) right-aligned; the
   order-actions row --padding below the row before */
.shop_table td:last-child .wp-block-buttons {
    justify-content: flex-end;
}

.shop_table tr.order-actions :is(th, td) {
    padding-top: var(--padding);
}

/* Shipping options — right-aligned rows; "Shipping to …" (cart) --spacer below */
.shop_table #shipping_method li {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacer);
}

.shop_table #shipping_method + * {
    margin-top: var(--spacer);
}

/* Cart item rows — tall with the thumbnail, so cells centre on it */
.shop_table.cart td {
    vertical-align: middle;
}

.shop_table.cart .product-thumbnail img {
    display: block;
    width: 240px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius);
}

@media (max-width: 768px) {
    /* Five columns don't fit a phone: each item becomes a grid — thumbnail
       beside the name and remove, quantity + subtotal on their own row under
       both, full width. The name's column can shrink (minmax(0, …)), so a long
       name wraps instead of pushing the row wider than the screen. Price drops
       (Subtotal covers it). */
    .shop_table.cart .product-price {
        display: none;
    }

    .shop_table.cart tbody {
        display: block;
    }

    .shop_table.cart tr.cart_item {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--spacer) var(--padding);
    }

    .shop_table.cart tr.cart_item + tr.cart_item {
        margin-top: var(--padding);
    }

    .shop_table.cart tr.cart_item td {
        padding: 0;
    }

    .shop_table.cart .product-thumbnail { grid-area: 1 / 1; }
    .shop_table.cart .product-name      { grid-area: 1 / 2; }
    .shop_table.cart .product-remove    { grid-area: 1 / 3; }
    .shop_table.cart .product-quantity  { grid-area: 2 / 1 / 3 / 3; text-align: left; }
    .shop_table.cart .product-subtotal  { grid-area: 2 / 3; }

    .shop_table.cart .product-thumbnail img {
        width: 160px;
    }
}