/*
 Theme Name:   Nu by Bricks Websites
 Theme URI:    https://nu.brickswebsites.com/
 Description:  eCommerce
 Version:      1.0.0
 Template:     bricks
 Author:       Bricks Websites
 Author URI:   https://brickswebsites.com
 Text domain:  Nu
*/

/* Fonts */
@font-face {
    font-family: "Manrope";
    src: url("/wp-content/fonts/Manrope-Bold.woff2") format("woff2"),
        url("/wp-content/fonts/Manrope-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("/wp-content/fonts/Manrope-SemiBold.woff2") format("woff2"),
        url("/wp-content/fonts/Manrope-SemiBold.woff") format("woff");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("/wp-content/fonts/Manrope-Medium.woff2") format("woff2"),
        url("/wp-content/fonts/Manrope-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("/wp-content/fonts/Manrope-Regular.woff2") format("woff2"),
        url("/wp-content/fonts/Manrope-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}

body,
h1,
h2,
h3,
h4,
p,
a,
button,
blockquote {
    font-family: "Archivo", sans-serif;}

*,
html,
body {
    scrollbar-color: var(--color-text) transparent;
    scrollbar-width: thin;
}

/* Transitions */
a,
button,
.bricks-button,
input,
select,
textarea,
.n-shop--accordion__icon,
.n-filter--checkbox input::before,
.n-filter--radio input::before,
.n-nav--dropdown__backdrop.active,
.n-mini-cart .cart-detail,
.n-slider .splide__arrows,
.n-card--img-wrapper::before,
.wc-block-components-button:not(.is-link) {
    transition: var(--transition-primary);
}
.n-cat-card--img,
.n-about-card--img,
.n-search--cat-card__img {
    transition: var(--transition-slow);
}

/* General */
.brx-body {
    min-height: 100dvh;
}

/* Skip Links */
.skip-link {
    display: flex;
    align-items: center;
    justify-content: center;
    left: var(--space-s);
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--light);
    background-color: var(--dark);
    height: var(--height);
    padding: 0 var(--space-2xs);
    border-radius: 0;
    z-index: 99999;
}
.skip-link:focus {
    top: var(--space-s);
}

/* Paragraph */
:where(p:not(:last-of-type)) {
    margin-bottom: var(--space-2xs);
}

/* Highlight */
::-moz-selection {
    color: var(--light);
    background: var(--primary);
}
::selection {
    color: var(--light);
    background: var(--primary);
}

/* Focus */
:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(0, 126, 167, 0.3);
    border-color: var(--primary) !important;
}

/* Full Height */
.not-set {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* Height */
.n-btn,
.n-prod--size-guide,
.n-shop--filter-toggle,
.n-form :where(input, button) {
    height: var(--height);
}

/* Link Wrapper */
.n-link-wrapper::after,
.n-heading-link a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Will Change */
.n-shop--accordion__icon,
.n-cat-card--img,
.n-about-card--img,
.n-search--cat-card__img {
    will-change: transform;
}

/* Screen Reader Only */
.n-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Cursors */
[aria-current="page"] {
    cursor: default;
}
li:has(label.brx-option-disabled) {
    cursor: not-allowed;
}

/* Pointer Events */
[aria-current="page"],
.n-size-guide--tab-title.brx-open {
    pointer-events: none;
}

/* Current Page */
.n-nav--dropdown__link[aria-current="page"] {
    color: var(--dark);
    padding-left: var(--space-3xs);
}
.n-nav--dropdown__link[aria-current="page"]::after {
    content: "";
    background-color: var(--dark);
    width: 0.25rem;
    height: 0.25rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Buttons */
button {
    font-weight: 500;
    background: inherit;
}

/* Forms */
input,
textarea {
    border-radius: 0;
}
textarea {
    background-color: var(--light);
}
select {
    background-image: url(); /* Needs Icon - if ever needed */
    background-position: calc(100% - var(--space-2xs)) 50%, 100% 50%;
    background-size: var(--text-s);
}

/***** Header *****/
.n-nav--dropdown:first-child {
    border-top: 1px solid var(--border-color);
}

/***** Home Page *****/
/* Hero */
.n-slider .splide__arrows {
    display: none !important;
    visibility: hidden;
}

/* Category Cards */
.n-cat-card--img-wrapper::before,
.n-about-card--img-wrapper::before,
.n-search--cat-card__img-wrapper::before {
    z-index: 1;
}
.n-cat-card--list-item:hover .n-cat-card--img,
.n-about-card--list-item:hover .n-about-card--img,
.n-search--cat-card:hover .n-search--cat-card__img {
    transform: scale(1.05);
}

/***** About Page *****/
.n-video-wrapper::before {
    z-index: 1;
}

/***** Shop Page *****/
.n-shop--accordion-item.brx-open .n-shop--accordion__icon {
    transform: rotate(90deg);
}
/* Filters */
.n-filter--checkbox input,
.n-filter--radio input {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: none;
}
.n-filter--checkbox input::after,
.n-filter--radio input::after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border-color);
}
/* Checked */
.n-filter--checkbox input:not(:checked)::before,
.n-filter--checkbox input:checked::before,
.n-filter--radio input:not(:checked)::before,
.n-filter--radio input:checked::before {
    content: "";
    background-color: var(--primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    display: block;
    width: 0.375em;
    height: 0.375rem;
    opacity: 0;
}
.n-filter--checkbox input:checked::before,
.n-filter--radio input:checked::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Reset Button */
.n-filter--reset.brx-no-active-filter {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
}

/***** Single Product Page *****/
/* Variations */
.n-prod--add tr {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4xs);
}
.n-prod--add th,
.n-prod--add td {
    width: 100%;
}

/* Reviews */
.n-prod-reviews #reviews #review_form_wrapper {
    margin-top: var(--space-s);
}
.n-prod-reviews .comment-reply-title {
    margin-bottom: var(--space-2xs);
}
/* Textarea */
.n-prod-reviews #reviews textarea {
    height: 8rem;
    min-height: 8rem;
    max-height: 14rem;
}

/***** Store Locator *****/
.n-locator--list-item:not(:last-child) {
    padding-bottom: var(--space-s);
    margin-bottom: var(--space-s);
    border-bottom: 1px solid var(--border-color);
}
/* Popup */
/* Close */
.brxe-map .brx-infobox-popup .close-infobox {
    font-size: var(--text-l);
    right: var(--space-3xs);
    top: 0;
}

/***** Footer *****/
/* Form */
.n-form--sub {
    flex-wrap: nowrap;
    gap: var(--space-2xs);
}

/***** Woo *****/
/* Cards */
.n-card--img-wrapper::before {
    opacity: 0;
}
.n-card:hover .n-card--img-wrapper::before {
    opacity: 1;
}

/* Mini Cart */
.n-mini-cart.brxe-woocommerce-mini-cart .cart-detail {
    opacity: 1;
    z-index: 999;
}
.n-mini-cart.brxe-woocommerce-mini-cart .off-canvas-overlay {
    background-color: rgba(18, 18, 18, 0.8);
}
.n-mini-cart .widget_shopping_cart_content::before {
    content: "Cart";
    font-weight: 600;
    margin-bottom: var(--space-s);
}

/* Remove Item */
.n-mini-cart .remove_from_cart_button {
    color: transparent;
}
.n-mini-cart .remove_from_cart_button::before {
    content: "";
    background-image: url(/wp-content/uploads/2025/07/trash-2.svg);
    background-size: 1rem;
    width: 1.2rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Items */
.n-mini-cart.brxe-woocommerce-mini-cart .cart-detail li {
    padding-right: var(--space-m);
    margin-bottom: var(--space-l);
}
/* Image */
.n-mini-cart .cart-detail img {
    margin-right: var(--space-xs);
}
.n-mini-cart .variation,
.n-mini-cart .quantity {
    margin-left: calc(4rem + var(--space-xs));
}
/* Info */
.n-mini-cart .variation,
.n-mini-cart .quantity {
    font-size: var(--text-xs);
}
.n-mini-cart .variation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4xs);
}
.n-mini-cart.brxe-woocommerce-mini-cart .cart-detail li .variation dt {
    font-weight: 500;
}
.n-mini-cart.brxe-woocommerce-mini-cart .cart-detail li .variation dd + dt {
    margin-top: 0;
}
.n-mini-cart.brxe-woocommerce-mini-cart
    .cart-detail
    li
    .variation
    dd:not(:last-child) {
    margin-right: var(--space-xs);
}

/* Remove/Reset */
.n-prod--add .reset_variations,
.n-prod-reviews .woocommerce-Reviews-title {
    display: none !important;
    visibility: hidden !important;
}
form.cart .woocommerce-variation:not(:empty),
form.woocommerce-cart-form .woocommerce-variation:not(:empty) {
    margin-bottom: 0;
}
/* Cart Button */
.n-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout) {
    display: none;
    visibility: hidden;
}

/* Checkout Page */
/* Forms */
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form
    .wc-block-components-text-input
    input[type="password"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"],
.wc-blocks-components-select .wc-blocks-components-select__select {
    background-color: transparent !important;
    height: var(--height) !important;
    border-color: var(--border-color) !important;
    border-radius: 0 !important;
}
/* Select Containers */
.wc-blocks-components-select .wc-blocks-components-select__container {
    background-color: transparent !important;
}

/* Checkboxes */
.wc-block-components-checkbox
    .wc-block-components-checkbox__input[type="checkbox"] {
    padding: 0;
    border-radius: 0 !important;
}

/* Payments */
.wc-block-components-radio-control--highlight-checked:after,
.wc-block-components-radio-control--highlight-checked
    .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked
    label.wc-block-components-radio-control__option--checked-option-highlighted {
    border-radius: 0 !important;
}
.wc-block-checkout__payment-method
    .wc-block-components-radio-control__option
    .wc-block-components-radio-control__input {
    padding: 0;
}
.wc-block-components-radio-control
    .wc-block-components-radio-control__input:checked:before {
    background: var(--primary) !important;
}
.wc-block-components-radio-control
    .wc-block-components-radio-control__input:focus {
    outline: none !important;
}

/* Items */
.wp-block-woocommerce-checkout-order-summary-block {
    border-radius: 0 !important;
}

/* Buttons */
body:not(.woocommerce-block-theme-has-button-styles)
    .wc-block-components-button:not(.is-link) {
    min-height: var(--height) !important;
    height: var(--height);
    width: fit-content;
    color: var(--light);
    background-color: var(--primary);
}
body:not(.woocommerce-block-theme-has-button-styles)
    .wc-block-components-button:not(.is-link):hover {
    background-color: var(--secondary);
}

/* Login Page */
.woocommerce-form-login,
.woocommerce-form-login .woocommerce-form-row {
    text-align: left;
}
.woocommerce-form-login {
    width: 25rem;
}

/********** Responsive **********/
/* Mobile landscape */
@media (min-width: 480px) {
}

/* Tablet portrait */
@media (min-width: 600px) {
}

/* Tablet landscape */
@media (min-width: 801px) {
}

/* Laptop */
@media (min-width: 1025px) {
    /* Header */
    .n-nav--dropdown:first-child {
        border-top: none;
    }
    .n-nav--item button::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    .n-nav .menu-item:last-child {
        display: none;
        visibility: hidden;
    }
    /* Dropdown */
    .n-nav--dropdown-content {
        transition: 0s;
    }
    /* Backdrop */
    .n-nav--dropdown__backdrop.active {
        opacity: 1;
        visibility: visible;
    }
    /* Home Page */
    /* Hero */
    #heroSlider.n-hero--slider .splide__pagination {
        transform: translateX(-50%);
        z-index: 0;
    }
    .n-slider .splide__arrows {
        display: block !important;
        visibility: visible;
        opacity: 0;
    }
    .n-slider:hover .splide__arrows {
        opacity: 1;
    }
}

/* Desktop */
@media (min-width: 1281px) {
}

/***** North Apparel Store — product page additions *****/
/* Paste at the END of the Nu child theme's style.css.                        */
/* Nothing above this point needs to change.                                  */

/* SKU above the product title */
.nas-sku {
    display: block;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    opacity: 0.6;
    margin-bottom: var(--space-4xs);
}

/* Product description — clamped to 3 lines with a show-more toggle */
.nas-desc {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xs);
    margin-bottom: var(--space-2xs);
}
.nas-desc__label {
    font-size: var(--text-s);
    font-weight: 600;
    margin: 0;
}
.nas-desc__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/* line-clamp has to be released, not just raised, or the box stays clipped */
.nas-desc.is-open .nas-desc__body {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.nas-desc__body p:last-of-type {
    margin-bottom: 0;
}
.nas-desc__more {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--text-s);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
.nas-desc__more[hidden] {
    display: none;
}

/* Size Guide sits inline with the Size label, pushed to the far end.
   JS moves the button into that row; this styles the row once it is there. */
.n-prod--add .nas-sizerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
}
.n-prod--add .nas-sizerow .nas-sizeguide {
    flex: 0 0 auto;
    height: auto;
}
/* Nu gives its buttons a 24px block margin. Harmless where the button stands alone,
   but once JS moves this one into the Size row it stretched a 20px label row to 72px
   and opened a gap above the swatches. */
.n-prod--add .nas-sizerow .nas-sizeguide,
.n-prod--add .nas-sizerow .n-prod--size-guide {
    margin-top: 0;
    margin-bottom: 0;
}

/* Bulk-buy quantity pills (server-rendered between the quantity field and buttons) */
.nas-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--space-2xs);
}
.nas-bulk__pill {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: none;
    font-size: var(--text-s);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}
.nas-bulk__pill:hover {
    border-color: currentColor;
}
.nas-bulk__pill[aria-pressed="true"] {
    color: var(--light);
    background-color: var(--dark);
    border-color: transparent;
}

/* Add to Basket + Buy Now stack full width.
   Buy Now is the secondary action, so it is outlined rather than filled. Bricks
   generates its own Woo button styling from the n-prod--add element settings, which
   outranks a plain class selector here — hence !important on the three properties
   that fight it. Everything else is left to cascade normally. */
.woocommerce div.product form.cart button.nas-buy-now,
button.nas-buy-now {
    display: block;
    width: 100%;
    /* Matches the Add to Basket padding set on the n-prod--add element, so the two
       buttons are the same height. A fixed height here would ignore that padding. */
    height: auto;
    padding: 16px var(--space-m);
    margin-top: 0;
    color: var(--color-heading) !important;
    background: none !important;
    background-color: transparent !important;
    border: 1px solid var(--border-color);
}
.woocommerce div.product form.cart button.nas-buy-now:hover,
button.nas-buy-now:hover {
    color: var(--light) !important;
    background-color: var(--dark) !important;
    border-color: var(--dark);
}

/* Add to cart is disabled until a variation is chosen — Woo already adds .disabled
   and .wc-variation-selection-needed, it just looks identical to the live button.
   Bricks compiles the element's own colours to #brxe-…, so this needs !important
   rather than a more specific selector. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
button.single_add_to_cart_button.disabled,
button.single_add_to_cart_button:disabled {
    background-color: #e3e3e3 !important;
    border-color: #e3e3e3 !important;
    color: #8a8a8a !important;
    cursor: not-allowed;
    opacity: 1;
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
button.single_add_to_cart_button:disabled:hover {
    background-color: #e3e3e3 !important;
    color: #8a8a8a !important;
}

/* Checkout header row: back link left, title centred, Stripe note right.
   Both glyphs are ::before data URIs rather than extra icon elements. */
.nas-chk-back,
.nas-chk-secure {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4xs);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.nas-chk-back {
    color: var(--color-heading);
    text-decoration: none;
}
.nas-chk-back:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nas-chk-back::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--nas-icon-arrow-left) center / contain no-repeat;
            mask: var(--nas-icon-arrow-left) center / contain no-repeat;
}
.nas-chk-secure {
    color: var(--text-muted);
}
.nas-chk-secure::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--nas-icon-lock) center / contain no-repeat;
            mask: var(--nas-icon-lock) center / contain no-repeat;
}
/* Masks rather than background-image, so each glyph inherits the text colour. */
:root {
    --nas-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    --nas-icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
    --nas-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
    --nas-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Checkout trust strip. Three fixed slides, so the rotation is a keyframe on the
   track rather than a carousel library — each slide holds, then slides on. */
.nas-cslider {
    overflow: hidden;
    margin-bottom: var(--space-2xs);
    background-color: #f1f1ef;
    border-radius: 8px;
}
.nas-cslider__track {
    display: flex;
    flex-wrap: nowrap;
    width: 300%;
    animation: nas-cslider 15s infinite;
}
.nas-cslider__slide {
    flex: 0 0 33.3333%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xs);
    margin: 0;
    padding: 12px var(--space-2xs);
    font-size: var(--text-xs);
    line-height: 1.3;
    text-align: center;
    color: var(--color-heading);
}
.nas-cslider__icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}
.nas-cslider__icon--lock  { --icon: var(--nas-icon-lock); }
.nas-cslider__icon--clock { --icon: var(--nas-icon-clock); }
.nas-cslider__icon--truck { --icon: var(--nas-icon-truck); }
@keyframes nas-cslider {
    0%, 28%     { transform: translateX(0); }
    33%, 61%    { transform: translateX(-33.3333%); }
    66%, 94%    { transform: translateX(-66.6666%); }
    100%        { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .nas-cslider__track { animation: none; }
}

/* Cart off-canvas: free-shipping banner and the footer block.
   The drawer is Woo's mini-cart, so these style its own markup plus the two pieces
   added on its hooks — no template override to keep in step with Woo. */
.nas-mc-ship {
    margin: 0 0 var(--space-s);
    padding: var(--space-2xs) var(--space-s);
    background-color: #f1f1ef;
}
.nas-mc-ship.is-met {
    background-color: #e8f2ec;
}
.nas-mc-ship__head {
    margin: 0;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--color-heading);
}
.nas-mc-ship__bar {
    height: 4px;
    margin: 8px 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
}
.nas-mc-ship__bar > span {
    display: block;
    height: 100%;
    background-color: var(--color-primary, #15392d);
    border-radius: inherit;
    transition: width 0.3s ease;
}
.nas-mc-ship__sub {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.nas-mc-note {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
/* Subtotal as a label/amount row, then the two buttons side by side. */
.widget_shopping_cart_content .woocommerce-mini-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin: 0 0 var(--space-4xs);
    padding-top: var(--space-2xs);
    border-top: 1px solid var(--border-color);
    font-size: var(--text-s);
}
.widget_shopping_cart_content .woocommerce-mini-cart__total strong {
    font-weight: 600;
}
.widget_shopping_cart_content .woocommerce-mini-cart__total .amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-4xs);
    margin: 0;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px var(--space-2xs);
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
/* Nu's own CSS hides the secondary button in the drawer so only Checkout shows
   (nu-style-base.css, "Cart Button"). The footer now pairs View basket with
   Checkout, so bring it back — same selector, but these additions load after. */
.n-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout),
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a:not(.checkout) {
    display: inline-flex;
    visibility: visible;
}

/* The secondary action is outlined, the primary filled — same pairing as the
   product page's Add to cart / Buy Now. */
/* Bricks' theme style paints BOTH drawer buttons with
   .n-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button (0,4,0), so the
   outlined variant has to out-specify it rather than just come later. */
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a:not(.checkout),
.n-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button:not(.checkout) {
    color: var(--color-heading);
    background-color: transparent;
    border: 1px solid var(--border-color);
}
.n-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
    color: var(--light, #f9f9f9);
    background-color: var(--color-heading);
    border-color: var(--color-heading);
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.checkout {
    color: var(--light, #f9f9f9);
    background-color: var(--color-primary, #15392d);
    border: 1px solid var(--color-primary, #15392d);
}

/* Brand logo overlay, bottom-left of the main product image */
.nas-brand-logo {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 48px;
    width: auto;
    padding: 8px 10px;
    background-color: var(--light);
    border-radius: 4px;
}
/* Bricks puts custom classes on the element wrapper, so a height on .nas-brand-logo
   alone never reaches the <img> inside it — hence the second selector. */
.nas-brand-logo img,
img.nas-brand-logo {
    height: 100%;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
img.nas-brand-logo {
    height: 48px;
    box-sizing: content-box;
}

/* Colour wheel icon.
   Both targets are reachable with an attribute/class selector, so no JS is needed —
   the icon is a background on a ::before box rather than an extra <img> element,
   which keeps it out of the markup and lets the browser cache one file for both. */
.nas-colours-pill::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: -0.15em;
    background-image: url("/wp-content/uploads/2026/10/colour-wheel.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* The pill is positioned absolutely, so it needs to become a flex row for the
   icon and the "+6 Colours" text to sit on one baseline. */
.nas-colours-pill {
    display: inline-flex;
    align-items: center;
}
/* The pill's wheel is a graphic element rather than an inline label mark, so it is
   sized absolutely instead of tracking the 13px pill text. */
.nas-colours-pill::before {
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.35em;
}

/* Variation rows must stack: label above control.
   The child theme already says so (.n-prod--add tr { flex-direction: column }) but
   Bricks compiles its swatch styling against a more specific selector, so the row
   falls back to a two-column table layout — label cell left, swatches right, with
   Size Guide overlapping them. Re-assert the intent with matching specificity. */
.n-prod--add table.variations tr,
.n-prod--add .variations tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.n-prod--add table.variations th,
.n-prod--add table.variations td,
.n-prod--add .variations th,
.n-prod--add .variations td {
    display: block;
    width: 100%;
}
/* Re-declared after the rule above, which would otherwise reset it to block. */
.n-prod--add table.variations th.nas-sizerow,
.n-prod--add .nas-sizerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
}
/* Swatches wrap as a row rather than sitting in a two-column grid. */
.n-prod--add .variations td .bricks-swatches-wrapper,
.n-prod--add .variations td ul {
    display: flex;
    flex-wrap: wrap;
}

/* Low stock notice */
/* Sits inside .n-prod--price-wrapper, inline with the price */
.nas-low-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    white-space: nowrap;
    font-size: var(--text-s);
    font-weight: 500;
    color: oklch(70.5% .213 47.604);
}
.nas-low-stock::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: currentColor;
}

/* Shipping & Returns trust list.
   Structure is Bricks elements; only the three glyphs live here, inlined as data URIs.
   There are no truck/returns/shield assets in the media library and no icon-library
   dependency this way — it also costs zero extra requests. Swapping an icon is a CSS
   edit rather than a builder change. */
.nas-trust {
    display: flex;
    flex-direction: column;
}
.nas-trust__row {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    column-gap: var(--space-2xs);
    padding: var(--space-2xs) 0;
    border-top: 1px solid var(--border-color);
}
.nas-trust__row:first-child {
    padding-top: 0;
    border-top: 0;
}
.nas-trust__row:last-child {
    padding-bottom: 0;
}
.nas-trust__row::before {
    content: "";
    grid-row: 1 / span 2;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.nas-trust__title {
    grid-column: 2;
    margin: 0;
    font-size: var(--text-s);
    font-weight: 600;
}
.nas-trust__body {
    grid-column: 2;
    margin-top: 0.35rem;
}
.nas-trust__body p {
    margin-bottom: 0;
    font-size: var(--text-s);
    color: var(--color-text);
}
.nas-trust__row--ship::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>");
}
.nas-trust__row--return::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/></svg>");
}
.nas-trust__row--secure::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>");
}

/* Fit bar, now a permanent block under the description rather than a tab */
.nas-fit {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xs);
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
}
.nas-fit > h2 {
    font-size: var(--text-s);
    font-weight: 600;
    margin: 0;
}

/* Divider between the remaining accordion items */
.n-prod--info-item + .n-prod--info-item,
.brxe-accordion-nested .n-prod--info-item {
    border-bottom: 1px solid var(--border-color);
}
/* No rule above the first item — the group already reads as a block. */
.brxe-accordion-nested .n-prod--info-item:first-child {
    border-top: 0;
}

/* Accordion toggle icon went white-on-white once the items moved.
   Force it to the heading colour in both states. */
.n-prod--info-title__icon,
.n-prod--info-title__icon svg,
.n-prod--info-item.brx-open .n-prod--info-title__icon,
.n-prod--info-item.brx-open .n-prod--info-title__icon svg {
    color: var(--color-heading);
    fill: currentColor;
    stroke: currentColor;
}

/* Size Guide and the header search button picked up a filled background from the
   swatch/button styling. Both are icon-and-label controls, not buttons. */
.n-prod--add .nas-sizeguide,
.n-prod--add .nas-sizerow .nas-sizeguide,
.n-search--submit,
.brxe-search button[type="submit"] {
    background: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

/* Accepted payment methods inside the secure checkout row */
/* Layout (flex row, wrap, gap) is on the element itself — .brxe-block defaults to
   flex-direction:column and a class can only tie with it, so the row has to be set
   where it compiles to #brxe-…. Only the grid placement stays here. */
.nas-trust__cards {
    grid-column: 2;
    margin-top: 0.5rem;
}
.nas-trust__cards svg {
    height: 22px;
    width: auto;
}

/* "+N Colours" pill, top-right of the featured image (mirrors the brand logo, bottom-left) */
.nas-gal-colours {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px 5px 8px;
    background-color: var(--light);
    border-radius: 999px;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-heading);
}
.nas-gal-colours::before {
    content: "";
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.35em;
    background-image: url("/wp-content/uploads/2026/10/colour-wheel.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 4. Variation labels sit the same distance from their control, Colour and Size alike.
   The Size row also carries Size Guide, which was adding height the Colour row lacked. */
.n-prod--add .variations th,
.n-prod--add .variations th.nas-sizerow {
    padding-bottom: var(--space-4xs);
    margin-bottom: 0;
}
.n-prod--add .variations td {
    padding-top: 0;
}
.n-prod--add .nas-sizerow .nas-sizeguide {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
}

/* 6. Taller accordion headers, with breathing room above and below the title */
.n-prod--info-title {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}

/* 7. Payment icons inline, evenly sized, on one row */
.nas-trust__cards {
    flex-wrap: nowrap;
    gap: var(--space-3xs);
}
.nas-trust__cards > * {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.nas-trust__cards svg {
    height: 22px;
    width: auto;
    max-width: none;
}

/* Additional information spec list.
   Each row is a single flex line: label, dashed leader, value. The leader is a
   flex-grow ::after so it spans the entire gap between the two — in a two-column grid
   it could only ever fill the label's own column and stopped halfway. It is also not
   the usual absolutely-positioned rule masked by a background-coloured span, which
   needs the label background to match the page and breaks on any tinted panel. */
.nas-spec {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}
.nas-spec__grid {
    display: flex;
    flex-direction: column;
}
.nas-spec__row {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0.25rem 0;
    font-size: var(--text-s);
}
.nas-spec__key {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text);
}
.nas-spec__label {
    flex: 0 0 auto;
    white-space: nowrap;
}
.nas-spec__key::after {
    content: "";
    flex: 1 1 auto;
    min-width: 1rem;
    border-top: 1px dashed var(--border-color);
}
.nas-spec__val {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    color: var(--color-heading);
}
.nas-spec__val a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Copy-to-clipboard on the SKU */
.nas-spec__copy {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.875rem;
}
.nas-spec__copy:hover {
    opacity: 1;
}
.nas-spec__copy.is-copied {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23157a3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Show more / less */
.nas-spec__toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: var(--text-s);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.nas-spec__toggle::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease;
}
.nas-spec__toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.nas-spec__extra[hidden] {
    display: none;
}

/* Brand logos inside the Brands mega-menu */
.nas-menu-brand-logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 600px) {
    /* Long values wrap under their label rather than squeezing the leader to nothing. */
    .nas-spec__row {
        flex-wrap: wrap;
    }
    .nas-spec__val {
        flex-basis: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    .nas-spec__key::after {
        display: none;
    }
}

/* Footer link columns are opened by the theme's own script.js
   (toggleFooterAccordions adds .brx-open at >=1025px). That script was simply never
   enqueued; restoring it in functions.php is the real fix, so the CSS override that
   used to live here has been removed rather than left to fight it. */

/* Variation labels: bolder, and the same gap under each one.
   Both rows get identical padding so Colour and Size line up; the Size row carries
   Size Guide, which would otherwise make it taller than the Colour row. */
.n-prod--add .variations th,
.n-prod--add .variations th label,
.n-prod--add .variations th.nas-sizerow label {
    font-weight: 600;
    color: var(--color-heading);
}
.n-prod--add .variations th,
.n-prod--add .variations th.nas-sizerow {
    padding-bottom: var(--space-4xs);
    margin-bottom: 0;
    line-height: 1.3;
}
.n-prod--add .variations tr {
    margin-bottom: var(--space-3xs);
}

/* Divider between the Fit bar and the variation form */
.n-prod--add {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-s);
    margin-top: var(--space-s);
}

/* Accordion group sits clear of the buttons above it */
.n-prod--info,
.brxe-accordion-nested.n-prod--info {
    margin-top: var(--space-m);
}
/* More room inside each tab's content */
.n-prod--info-content {
    padding-bottom: var(--space-xs);
}


/* "You might also like" reads as its own panel */
.n-prod--upsell {
    margin-top: var(--space-l);
    padding: var(--space-s);
    background-color: var(--surface);
}

/* ---------- Homepage hero: edge-anchored ---------- */
/* No panel. A directional scrim darkens only the side the type sits on, so the
   photograph stays whole and still carries the section. */
.nas-hero__scrim {
    background: linear-gradient(
        100deg,
        rgba(10, 16, 12, 0.88) 0%,
        rgba(10, 16, 12, 0.72) 28%,
        rgba(10, 16, 12, 0.30) 58%,
        rgba(10, 16, 12, 0.05) 82%
    );
}
.nas-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.nas-hero__copy,
.nas-hero__copy h1,
.nas-hero__copy h2,
.nas-hero__copy p,
.nas-hero__copy span {
    color: var(--light);
}
.nas-hero__copy {
    padding: 0;
    background: none;
}
/* The subhead sits on a photograph now, so it needs more contrast than --text-muted. */
.nas-hero__copy > span:first-child {
    color: rgba(249, 249, 249, 0.72);
}

/* Brand circles — one loop, logos overlapping into a cluster */
.nas-brands {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nas-brands__item {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--light);
    border: 2px solid rgba(249, 249, 249, 0.9);
    margin-left: -12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.nas-brands__item:first-child {
    margin-left: 0;
}
.nas-brands__logo,
.nas-brands__logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.nas-brands__more {
    margin-left: var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(249, 249, 249, 0.78);
}

/* ---------- USP rows ---------- */
/* Two rows share the n-usp-item class — the "Welcome back" strip and the CTA bar at
   the foot of the homepage — so every rule is scoped to .nas-usp-row and they can be
   styled independently.
   Layout is NOT here — it lives in the elements' own Bricks settings (_display plus
   _direction at each breakpoint, and flex: 1 1 0 on each item for equal columns).
   Bricks only emits flex-direction when _display is flex at the same breakpoint, so
   the earlier attempts that set direction alone silently produced nothing; setting
   both together compiles to #brxe-… and outranks every class. Only the dividers,
   which need ::before and a sibling combinator, remain as CSS. */
/* Dividers sit at the midpoint of the gap, so text / rule / text is evenly spaced.
   At left:0 a rule hugs whichever item follows it. */
.nas-usp-row .n-usp-item {
    position: relative;
    padding-left: 0;
}
.nas-usp-row .n-usp-item::before {
    content: "";
    position: absolute;
    left: calc(var(--space-l) / -2);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 58%;
    background-color: var(--on-primary-muted);
    opacity: 0.5;
    display: none;
}
@media (min-width: 1025px) {
    .nas-usp-row .n-usp-item + .n-usp-item::before {
        display: block;
    }
}
/* The Welcome back strip sits ON the green band, same as the CTA row, so it keeps
   the inherited on-primary divider. An earlier override here painted the rule in
   var(--border-color) — near-black at 8% alpha, invisible against the dark green. */

/* ---------- Mega menu ---------- */
/* Layout, sizing and spacing for the panels are Bricks element/class settings, not
   CSS — see CLAUDE.md "Bricks first, CSS last". Nothing is needed here. */

/* Sale badge — position only. Appearance comes from the n-prod--sale-badge classes
   shared with the product page, so there is one design rather than two. */
.nas-sale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: fit-content;
}

/* Single-image products: let the one tile span both columns.
   CSS rather than a Bricks setting because it depends on :only-child — the gallery
   slots are conditional, so when a product has one image that slot is literally the
   only child, and no element-level setting can express "only when alone".
   71 of 400 products (18%) have a single colourway and so a single image. */
.n-prod--gal__img-wrapper:only-child {
    grid-column: 1 / -1;
}

/* Washing & Care list. CSS rather than Bricks settings because the markup is rendered
   by {nas_washing_care} in PHP — there is no element to style in the builder. */
.nas-care {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4xs);
}
.nas-care__item {
    position: relative;
    padding-left: 1.1em;
    font-size: var(--text-s);
}
.nas-care__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--border-strong, #999);
}
.nas-care__single {
    margin: 0;
    font-size: var(--text-s);
}

/* About page services list. The markup comes from one rich-text element rather than
   22 Bricks elements, so the two-column flow is set here. */
.nas-services {
    columns: 2;
    column-gap: var(--space-2xl);
}
.nas-services h3 {
    font-size: var(--text-m);
    font-weight: 600;
    margin: 0 0 var(--space-4xs);
    break-after: avoid;
}
.nas-services p {
    margin: 0 0 var(--space-s);
    font-size: var(--text-s);
    break-inside: avoid;
}
@media (max-width: 800px) {
    .nas-services { columns: 1; }
}