/* ==========================================================================
   Factory Sale - Cart / Checkout / Mini-cart / My Account (2026-08)
   Loaded after css/style.css + css/important.css, so it can rely on the
   theme's existing custom properties (--border-radius-cards, --font-primary,
   brand blue #003399, etc.) and only adds the new layouts.
   ========================================================================== */

:root {
    --fs-brand: #003399;
    --fs-brand-dark: #002366;
    --fs-text: #222222;
    --fs-border: #D6D6D6;
    --fs-bg-muted: #F5F6F8;
}

.fs-input,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-form-login .input-text,
.woocommerce-form-register .input-text {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #CED2DD !important;
    border-radius: 4px !important;
    padding: 14px 16px;
    font-family: var(--font-primary), sans-serif;
    font-size: 16px;
    color: var(--fs-text);
    background: #fff;
}

.fs-input:not(textarea),
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
    height: 50px !important;
    padding-top: 0;
    padding-bottom: 0;
}

.woocommerce-checkout select,
.woocommerce-form-login select,
.woocommerce-form-register select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23767676' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

.fs-input:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-form-login .input-text:focus,
.woocommerce-form-register .input-text:focus {
    outline: none;
    border-color: var(--fs-brand) !important;
}

.fs-btn-primary,
.fs-place-order-btn,
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
    background-color: var(--fs-brand) !important;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    /* Was `border: none`. These buttons also carry Bootstrap's .btn class
       (Log In, Create Account, Save changes, Place order), whose :hover
       state adds a real `border: 2px solid ...` (see style.css .btn /
       .btn:hover, 2026-09 QA fix). .btn reserves a transparent 2px border
       at rest for exactly this reason, but this rule has equal specificity
       and comes later, so it was winning at rest and resetting that
       reservation to 0 -- the button still grew by 2px on hover and
       visibly jumped (2026-09 QA: "buttons jump when hovering over").
       Reserve the same transparent border here too. */
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 14px 24px;
    transition: background-color .2s ease-in-out;
}

.fs-btn-primary:hover,
.fs-place-order-btn:hover,
.woocommerce #payment #place_order:hover {
    background-color: var(--fs-brand-dark) !important;
    color: #fff;
}

.fs-btn-outline {
    border: 1px solid var(--fs-brand);
    background: transparent;
    color: var(--fs-brand);
    border-radius: 4px;
    padding: 10px 18px;
    font-weight: 500;
    transition: all .2s ease-in-out;
    white-space: nowrap;
}

.fs-btn-outline:hover {
    background: var(--fs-brand);
    color: #fff;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}

/* --------------------------------------------------------------------- */
/* Header mini-cart hover dropdown (screen 3)                             */
/* --------------------------------------------------------------------- */

.header-cart { position: relative; }

/* .fs-header-cart-wrap is only one of three narrow columns in the header's
   right-hand cluster (My account | cart | language -- see header.php's
   .div-r-z-9 wrapper). Anchoring the dropdown's "right: 0" to that narrow
   column made it sit flush with the LEFT edge of the language dropdown
   instead of the true right edge of the header, so the panel visibly
   started too far left (QA: "position it on the right side"). Anchor it to
   the whole .div-r-z-9 cluster instead, which spans all the way to the
   header's real right edge. */
.div-r-z-9 { position: relative; }

.fs-header-mini-cart {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid var(--fs-border);
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    padding: 20px;
    z-index: 1050;
    text-align: left;
}

@media (min-width: 1200px) {
    .fs-header-cart-wrap:hover .fs-header-mini-cart,
    .fs-header-cart-wrap.fs-open .fs-header-mini-cart {
        display: block;
    }
}

.fs-header-mini-cart .woocommerce-mini-cart {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    /* Per the CSS overflow spec, setting only overflow-y to a non-"visible"
       value makes the browser compute overflow-x as "auto" too (an axis
       can't stay "visible" once the other is scrollable) -- so any long,
       unbreakable text in a cart item (a long product title, or an Addify
       add-on option name) was enough to add an unwanted horizontal
       scrollbar to this dropdown (2026-09 QA fix). Force it off, and let
       the text wrap instead of overflowing. */
    overflow-x: hidden;
}

.fs-header-mini-cart .checkout-product-item,
.fs-header-mini-cart .checkout-product-item .col-8,
.fs-header-mini-cart .checkout-product-item .col-4,
.fs-header-mini-cart .cart-product-title,
.fs-header-mini-cart .cart-product-meta {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.fs-header-mini-cart .woocommerce-mini-cart-item {
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.fs-header-mini-cart .woocommerce-mini-cart-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

/* The default WooCommerce mini-cart thumbnail (`woocommerce_thumbnail`
   image size) renders full-size with no CSS constraint, so it was blowing
   up to fill the whole 360px panel. Pin it to a small square thumbnail. */
.fs-header-mini-cart .checkout-product-item img,
.fs-header-mini-cart .woocommerce-mini-cart-item img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.fs-header-mini-cart .checkout-product-item {
    align-items: flex-start !important;
}

.fs-header-mini-cart .checkout-product-item .col-8,
.fs-header-mini-cart .checkout-product-item .col-4 {
    align-items: flex-start !important;
}

.fs-header-mini-cart .cart-product-title {
    font-size: 12px;
    font-weight: 500 !important;
    color: var(--fs-text);
}

.fs-header-mini-cart .cart-total {
    font-size: 14px;
    white-space: nowrap;
}

/* "(incl. VAT)" is appended by WC_Cart::get_product_subtotal()/get_cart_subtotal()
   as a sibling <small class="tax_label"> right next to the price -- by default
   that keeps it on the same line as the price (cramped in this narrow column).
   Force it onto its own line, right-aligned under the price, in both the
   per-item row and the Subtotal row below. */
.fs-header-mini-cart .cart-total .tax_label,
.fs-header-mini-cart .woocommerce-mini-cart__total .tax_label {
    display: block;
    text-align: right;
    font-weight: 400;
    font-size: 12px;
    color: #767676;
    white-space: nowrap;
}

.fs-header-mini-cart .woocommerce-mini-cart__total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-weight: 600;
    border-top: 1px solid var(--fs-border);
    padding-top: 12px;
    margin: 0 0 12px;
}

/* Subtotal's tax_label is a flex item alongside "Subtotal:" and the price --
   flex-basis: 100% (with flex-wrap above) always pushes it onto a fresh full
   line instead of squeezing next to the amount. */
.fs-header-mini-cart .woocommerce-mini-cart__total .tax_label {
    flex-basis: 100%;
    order: 3;
}

/* "+ Options" badge (mini-cart.php) for cart items with plugin-driven
   add-ons/variations. No border/background -- just plain muted text under
   the title (.text-muted already sets the colour in mini-cart.php). */
.fs-header-mini-cart .fs-mini-cart-options-badge {
    display: inline-block;
    margin-top: 2px;
}

.fs-header-mini-cart .woocommerce-mini-cart__buttons { display: none; }
.fs-header-mini-cart .woocommerce-mini-cart__empty-message {
    margin: 0;
    color: #767676;
    font-size: 14px;
}

/* --------------------------------------------------------------------- */
/* Cart page (screen 1)                                                   */
/* --------------------------------------------------------------------- */

.fs-cart-box {
    border: 1px solid var(--fs-border);
    border-radius: var(--border-radius-cards, 16px);
    padding: 24px;
}

.fs-cart-box__title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.fs-col-qty,
.fs-col-total {
    font-size: 24px;
    font-weight: 400;
    color: var(--fs-text);
}

.fs-cart-items { margin-top: 16px; }

.fs-cart-item {
    padding: 16px 0;
    border-bottom: 1px solid #EFEFEF;
}

.fs-cart-item:last-child { border-bottom: 0; }

/* A row for a product with plugin-driven options/add-ons (e.g. Addify) can
   grow very tall -- the options list under the name is several lines long.
   .col-6 already has align-items-start, but that alone wasn't enough to
   stop the thumbnail from being stretched by its <a> wrapper to match that
   height (QA: thumbnail rendered as a tall, squeezed sliver instead of a
   normal square crop). Pin both the link and the image to a fixed 72x72
   box explicitly so neither can grow with the sibling content. */
.fs-cart-item__thumb {
    flex-shrink: 0;
    align-self: flex-start;
}

.fs-cart-item__thumb a {
    display: block;
    width: 72px;
    height: 72px;
}

.fs-cart-item__thumb img {
    display: block;
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    border-radius: 8px;
}

.fs-cart-item__name a {
    color: var(--fs-text);
    font-weight: 500;
    text-decoration: none;
}

.fs-cart-item__meta {
    color: #767676;
    font-size: 13px;
    margin-top: 4px;
}

.fs-cart-item__total {
    font-weight: 600;
    text-align: right;
}

/* "(incl. VAT)" is appended by WC_Cart::get_product_subtotal() as a sibling
   <small class="tax_label"> right after the price -- push it onto its own
   line under the price instead of squeezing next to it (2026-09 QA fix). */
.fs-cart-item__total .tax_label {
    display: block;
    text-align: right;
    font-weight: 400;
    font-size: 12px;
    color: #767676;
}

.fs-cart-item__remove {
    color: var(--fs-brand);
    font-size: 13px;
    text-decoration: underline;
    margin-top: 6px;
}

.fs-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fs-border);
    border-radius: 4px;
    overflow: hidden;
}

.fs-qty-btn {
    border: none;
    background: #fff;
    width: 32px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.fs-qty-input {
    width: 44px;
    height: 36px;
    border: none;
    border-left: 1px solid var(--fs-border);
    border-right: 1px solid var(--fs-border);
    text-align: center;
    -moz-appearance: textfield;
}

.fs-qty-input::-webkit-outer-spin-button,
.fs-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Cart item row on small screens: keep the same Products / QTY / Total
   three-column layout as desktop (per design) instead of stacking the
   stepper and price under the name -- just narrower. */
@media (max-width: 575.98px) {
    .fs-cart-box { padding: 16px; }
    .fs-cart-box__title { font-size: 18px; }
    .fs-col-qty, .fs-col-total { font-size: 18px; }
    .fs-cart-item { padding: 12px 0; }
    .fs-cart-item .col-6.d-flex { gap: 8px !important; }
    .fs-cart-item__thumb img { width: 56px; height: 56px; }
    .fs-cart-item__name { font-size: 14px; }
    .fs-cart-item__meta { font-size: 12px; }
    .fs-qty-stepper { transform-origin: left center; }
    .fs-qty-btn { width: 26px; height: 32px; font-size: 16px; }
    .fs-qty-input { width: 30px; height: 32px; font-size: 14px; }
    .fs-cart-item__total { font-size: 14px; }
    .fs-cart-item__remove { font-size: 12px; }
}

/* Checkout order-review table on small screens. Two earlier attempts at
   this (table-layout:fixed with 56/16/28 then 52/12/36 percentage columns)
   both still left either the price ("(incl. VAT)" wrapping mid-word, long
   prices bleeding past the card edge) or the product name (its own column
   measuring far narrower than expected, text spilling out horizontally
   into the QTY/Total columns) squeezed into a column too narrow for its
   content -- percentage-based columns on a name+thumb+multi-line-options
   block just don't have enough room at this width no matter how the split
   is tuned (2026-09 QA: "price goes out of bounds" / "name goes out of
   bounds"). Drop the 3-column table shape entirely here: each row becomes
   a full-width block (name/thumb/options on top, qty and price as a row
   below it), so nothing is ever squeezed into a narrow sub-column. */
@media (max-width: 575.98px) {
    .fs-checkout-box { padding: 16px; }
    .fs-checkout-box__title { font-size: 18px; }

    .fs-order-review-table thead { display: none; }
    .fs-order-review-table,
    .fs-order-review-table tbody,
    .fs-order-review-table tr,
    .fs-order-review-table td {
        display: block;
        width: 100%;
    }
    .fs-order-review-table tr {
        padding: 12px 0;
        border-bottom: 1px solid #EFEFEF;
    }
    /* !important: same source-order issue as the text-align fix below --
       the desktop rule (.fs-order-review-table th, td { border-bottom:
       1px solid #EFEFEF }) sits later in this file with equal specificity,
       so it was winning back a border-bottom on EVERY td (name, qty,
       total each got their own divider line -- three cluttered lines per
       product instead of the one intended at the end of the whole row).
       Separately, WooCommerce core's own default stylesheet also puts a
       border-TOP on every .shop_table td (".woocommerce table.shop_table
       td { border-top: 1px solid rgba(0,0,0,.1) }") -- a completely
       different property from the one above, so it kept adding its own
       extra lines even after border-bottom was fixed. Kill both. */
    .fs-order-review-table td {
        border-bottom: 0 !important;
        border-top: 0 !important;
        padding: 0;
    }
    /* QTY and Total each get their own full-width row too (not just
       product-name) -- side-by-side inline-block left both bunched
       together on the left with a lot of dead space on the right.
       !important: the desktop rule two-column-table rule further down
       this file (text-align: center/right for these same two selectors)
       has equal specificity and comes later in the file, so it was
       winning over this mobile override regardless of media query --
       both QTY and Total looked centered instead of flush left like the
       product name/thumb above them. */
    .fs-order-review-table td.product-qty,
    .fs-order-review-table td.product-total {
        margin-top: 8px;
        font-size: 13px;
        text-align: left !important;
    }

    .fs-order-item { gap: 8px; }
    .fs-order-item__thumb img { width: 44px; height: 44px; }
    .fs-order-item__name { font-size: 13px; }
    .fs-order-item__remove { font-size: 11px; margin-top: 2px; }

    /* Checkout/billing form fields: design stacks them full-width in a
       single column on mobile instead of the desktop 48%/48% two-up
       layout (form-row-first/last use float+inline-block with no
       breakpoint override otherwise). */
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
}

/* WooCommerce core ships .cart-collaterals .cart_totals at width:48%/float,
   sized for its own default 2-column cart -- overrides that back to 100%
   so the box fills its actual Bootstrap column (.col-xl-4) instead. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
}

.fs-cart-total-box {
    border: 1px solid var(--fs-border);
    border-radius: var(--border-radius-cards, 16px);
    padding: 24px;
}

.fs-cart-total-box__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px;
}

.fs-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 15px;
}

/* Sub Total's "(incl. VAT)" (<small class="tax_label">) and Total's
   "(includes €X VAT)" (<small class="includes_tax">) are both appended
   inline right after the price by WC core -- push them onto their own
   line under the amount, right-aligned, instead of squeezing next to it
   on one row (2026-09 QA fix, cart AND checkout -- both cart-totals.php
   and checkout/review-order.php share this same .fs-totals-row markup).
   This also covers the "Included VAT" line that used to repeat the same
   info separately below -- now removed from both templates. !important
   guards against wc_cart_totals_order_total_html()'s own nested <strong>
   (it wraps its price in <strong>, and this whole thing gets wrapped in a
   second <strong> by the theme templates) carrying an inherited alignment. */
.fs-totals-row strong .tax_label,
.fs-totals-row strong .includes_tax {
    display: block !important;
    text-align: right !important;
    font-weight: 400;
    font-size: 12px;
    color: #767676;
}

.fs-shipping-not-included { color: #767676; font-weight: 400; }

.fs-totals-row--total {
    border-bottom: none;
    font-size: 18px;
    font-weight: 700;
    padding-top: 16px;
}

.fs-coupon-row { padding: 12px 0; border-bottom: 1px solid #EFEFEF; }
.fs-coupon-label { display: block; font-size: 14px; margin-bottom: 8px; }

.fs-proceed-to-checkout { margin-top: 16px; }
.fs-proceed-to-checkout .checkout-button {
    display: block;
    text-align: center;
    background-color: var(--fs-brand) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 4px;
    padding: 14px;
    text-decoration: none !important;
}
.fs-proceed-to-checkout .checkout-button:hover { background-color: var(--fs-brand-dark) !important; }

.fs-payment-badges { margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.fs-payment-badges img { height: 24px; width: auto; }

/* --------------------------------------------------------------------- */
/* Checkout page (screen 2)                                               */
/* --------------------------------------------------------------------- */

.fs-checkout-box {
    border: 1px solid var(--fs-border);
    border-radius: var(--border-radius-cards, 16px);
    padding: 24px;
    margin-bottom: 24px;
}

.fs-checkout-box__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
}

.fs-shipping-info h3,
.fs-billing-address h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
}

/* "Billing Address" box: our own static title + divider line, then
   WooCommerce's "Ship to a different address?" checkbox underneath.
   That checkbox is wrapped in its own <h3 id="ship-to-different-address">
   by form-shipping.php, which would otherwise also pick up the bold
   20px heading styles above -- reset it back to a normal checkbox row. */
.fs-billing-address__divider {
    border: none;
    border-top: 1px solid var(--fs-border);
    margin: 0 0 20px;
}

#ship-to-different-address {
    font-size: 15px;
    font-weight: 400;
    margin: 0;
}

#ship-to-different-address .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

.fs-customer-type-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.fs-customer-type-tabs .fs-tab {
    flex: 1;
    border: 1px solid var(--fs-border);
    background: #fff;
    color: var(--fs-text);
    border-radius: 4px;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.fs-customer-type-tabs .fs-tab.is-active {
    background: var(--fs-brand);
    border-color: var(--fs-brand);
    color: #fff;
}

.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 48.9%;
    display: inline-block;
}
.woocommerce-checkout .form-row-first { float: left; clear: both; }
.woocommerce-checkout .form-row-last { float: right; }
.woocommerce-checkout .form-row-wide { width: 100%; clear: both; }
/* Excludes WooCommerce's own checkbox labels (.woocommerce-form__label-for-checkbox
   -- terms & conditions, "ship to a different address", etc.) as well as our
   own .fs-checkbox-label ones. Those labels WRAP their <input>, so hiding
   the label was hiding the checkbox itself -- the terms checkbox became
   impossible to check while checkout validation still required it. */
.woocommerce-checkout .form-row label:not(.fs-checkbox-label):not(.screen-reader-text):not(.woocommerce-form__label-for-checkbox) { display: none; }

/* Company-only fields hidden when the "Individual Client" tab is active */
body.fs-customer-type-individual .fs-company-only { display: none; }

.woocommerce-billing-fields .woocommerce-additional-fields { margin-top: 16px; }
.woocommerce-additional-fields h3 { display: none; }
#order_comments_field { display: none; margin-top: 12px; }
#order_comments_field.fs-visible { display: block; }
.fs-order-note-toggle { margin: 8px 0 0; }

.fs-payment-methods ul.wc_payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fs-payment-methods .wc_payment_method {
    border: 1px solid var(--fs-border);
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 10px;
}

.fs-order-summary { position: sticky; top: 24px; }

.fs-order-review-table {
    width: 100%;
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.fs-order-review-table th,
.fs-order-review-table td {
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    text-align: left;
}
.fs-order-review-table thead th {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 16px;
}
.fs-order-review-table tbody tr:last-child td { border-bottom: 0; }
.fs-order-review-table th.product-qty,
.fs-order-review-table td.product-qty { text-align: center; }
.fs-order-review-table th.product-total,
.fs-order-review-table td.product-total { text-align: right; font-weight: 600; }

.fs-order-item { display: flex; align-items: flex-start; gap: 12px; }

/* Same fix as .fs-cart-item__thumb on the cart page: a product row with a
   long plugin-options list (Addify etc.) grows very tall, and align-items:
   flex-start on .fs-order-item alone wasn't enough to stop the thumbnail
   from being stretched to match -- it rendered as a tall, squeezed sliver
   instead of a normal square crop (2026-09 QA fix, checkout copy of the
   cart-page bug). Pin the image to a fixed 56x56 box explicitly. */
.fs-order-item__thumb {
    flex-shrink: 0;
    align-self: flex-start;
}
.fs-order-item__thumb img {
    display: block;
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    border-radius: 8px;
}
.fs-order-item__name { font-weight: 500; }

/* Options list for products with plugin-driven add-ons (Addify etc.) --
   used to share .fs-order-item__name with the product title, inheriting
   the same font-weight/size and reading as one big jumbled block on a
   product with many options (2026-09 QA fix). Own, smaller/muted styling,
   consistent with the same dt/dd sizing already used elsewhere for this
   exact data (see the #fs-cart-popup-content/.cart-product-meta rule). */
.fs-order-item__meta {
    margin-top: 4px;
    color: #767676;
}
.fs-order-item__meta dt {
    font-size: 12px;
    font-weight: 600;
}
.fs-order-item__meta dd {
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 4px;
}
/* The value text sits in a nested <p> inside <dd> -- a plain "dd" rule
   only sets the size on <dd> itself, but a generic global `p` rule
   elsewhere in the theme's CSS was still winning on the actual text
   since it directly targets the <p>, not through inheritance. Target the
   <p> explicitly so it doesn't fall back to that larger default size. */
.fs-order-item__meta dd p { margin: 0; font-size: 12px; font-weight: 400; }

.fs-order-item__remove {
    display: inline-block;
    color: var(--fs-brand);
    font-size: 13px;
    text-decoration: underline;
    margin-top: 4px;
}

.fs-terms-and-submit { margin-top: 16px; }
.fs-place-order-btn { margin-top: 12px; }

/* --------------------------------------------------------------------- */
/* My Account: login / register (screen: Log in / Sign up)                */
/* --------------------------------------------------------------------- */

.fs-account-grid { border-top: 1px solid var(--fs-border); }
.fs-account-col--login { padding: 48px; }
.fs-account-col--register { padding: 48px; background: var(--fs-bg-muted); }
.fs-account-grid--login-only .fs-account-col--login { width: 100%; max-width: 520px; }

/* WooCommerce core wraps form.login / form.register in a bordered "card"
   style by default (border + border-radius + padding). The Sign up side's
   own background/padding already gives it that boxed look in the design,
   but the Log in side is meant to be borderless -- only the individual
   input fields should show a border. Strip WooCommerce's default box just
   for the login form. */
.fs-account-col--login form.woocommerce-form-login,
.fs-account-col--register form.woocommerce-form-register {
    border: none;
    border-radius: 0;
    padding: 0;
}

/* The theme's header cart/login icon link also uses a bare ".login" class
   (see header.php), which collides with WooCommerce's own
   "woocommerce-form-login login" form class and was making the whole
   login/register form (and every field inside it) shrink-wrap into a
   single flex row instead of stacking full-width. Reset it back to a
   normal block form here -- more specific than ".login" alone, so it wins
   regardless of stylesheet order. */
form.woocommerce-form-login,
form.woocommerce-form-register {
    display: block;
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    width: 100%;
    margin-bottom: 16px;
}

.fs-account-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.fs-account-subtitle { color: #767676; margin-bottom: 24px; }
.fs-account-note { color: #767676; font-size: 13px; }

.woocommerce-checkout .fs-checkbox-label,
.fs-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 400;
    cursor: pointer;
}

/* 2026-09 QA ("These two should either both be bolded or both be regular"):
   the Mailchimp "Subscribe to our newsletter" checkbox (WooCommerce core
   label markup) rendered lighter/smaller than our own "Add note to your
   order" (.fs-checkbox-label) right below it. Give every checkout checkbox
   label the same weight/size/colour. */
.woocommerce-checkout .mailchimp-newsletter label,
.woocommerce-checkout .mailchimp-newsletter label span,
.woocommerce-checkout .fs-no-vat-row label,
.woocommerce-checkout .fs-checkbox-label {
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--fs-text);
}
.woocommerce-checkout .mailchimp-newsletter label,
.woocommerce-checkout .fs-no-vat-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* WooCommerce core still floats its own .woocommerce-form-login__submit /
   .woocommerce-form-register__submit buttons (classic login form default
   layout). Our redesign already makes them full-width blocks via .w-100 /
   .fs-btn-primary, so the leftover float just squeezes the next sibling
   (.fs-social-divider) into whatever thin sliver of the row is left,
   instead of a full-width line -- clear it. */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
    float: none;
}

.fs-social-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #767676;
    font-size: 13px;
    margin: 24px 0 16px;
    clear: both;
}
.fs-social-divider::before,
.fs-social-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--fs-border);
}
.fs-social-divider span { padding: 0 12px; }

.fs-social-login { display: flex; gap: 12px; justify-content: center; }
.fs-social-btn {
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fs-border);
    border-radius: 6px;
    background: #fff;
    padding: 0;
    cursor: pointer;
}
a.fs-social-btn:hover { border-color: var(--fs-brand); }
button.fs-social-btn[aria-disabled="true"] { cursor: not-allowed; }
.fs-social-btn svg { width: 20px; height: 20px; }

@media (max-width: 1199px) {
    .fs-account-col--login,
    .fs-account-col--register { padding: 32px 20px; }
    .fs-order-summary { position: static; }
}

/* --------------------------------------------------------------------- */
/* My Account: orders / order details / personal information (2026-08)   */
/* --------------------------------------------------------------------- */

.woocommerce-MyAccount-content,
.woocommerce-account .woocommerce {
    max-width: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content {
    padding-top: 0;
}

@media (min-width: 992px) {
    .woocommerce-account .woocommerce > .woocommerce-notices-wrapper + div,
    .woocommerce-account form.login,
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        box-sizing: border-box;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: left;
        width: 280px;
        margin-right: 24px;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        float: left;
        width: calc(100% - 304px);
    }
}

.fs-account-nav ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fs-border); border-radius: 6px; overflow: hidden; }
.fs-account-nav li { border-bottom: 1px solid var(--fs-border); }
.fs-account-nav li:last-child { border-bottom: none; }
.fs-account-nav li a,
.fs-account-nav li > span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    color: var(--fs-text);
    text-decoration: none;
    font-weight: 500;
}
.fs-account-nav li.is-active a {
    background: var(--fs-brand);
    color: #fff;
}
.fs-account-nav-item--disabled > span {
    color: #9a9a9a;
    cursor: not-allowed;
}
.fs-account-nav-icon { flex: none; }

.fs-account-card {
    border: 1px solid var(--fs-border);
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.fs-account-card-title { font-size: 24px; font-weight: 700; margin: 0; }
.fs-account-card--with-back { padding: 16px 24px; margin-bottom: 16px; }
.fs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fs-text);
    font-weight: 700;
    text-decoration: none;
}

.fs-orders-list { display: flex; flex-direction: column; gap: 20px; }

.fs-order-card {
    border: 1px solid var(--fs-border);
    border-radius: 6px;
    overflow: hidden;
}
.fs-order-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--fs-bg-muted);
    flex-wrap: wrap;
}
.fs-order-card__number a { color: var(--fs-brand); font-weight: 700; text-decoration: none; }
.fs-order-card__number strong { color: var(--fs-brand); }
.fs-order-card__sep { color: var(--fs-border); }
.fs-order-card__date { margin-left: auto; color: #767676; }

.fs-status-placed { color: var(--fs-text); }
.fs-status-dispatch { color: var(--fs-text); }
.fs-status-delivered { color: #1a8f4c; }
.fs-status-other { color: #b3261e; }

.fs-order-card__items { padding: 4px 20px; }
.fs-order-card__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--fs-border);
}
.fs-order-card__item:last-child { border-bottom: none; }
.fs-order-card__item-thumb {
    flex: none;
    width: 64px;
    height: 64px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    background: var(--fs-bg-muted);
}
.fs-order-card__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-order-card__item-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fs-order-card__item-name { color: var(--fs-text); font-weight: 600; text-decoration: none; }
.fs-order-card__item-meta { color: #767676; font-size: 13px; }
.fs-order-card__item-total { flex: none; font-weight: 700; }

.fs-order-card__details-btn { display: block; width: calc(100% - 40px); margin: 8px 20px 20px; text-align: center; }

.fs-account-empty { border: 1px solid var(--fs-border); border-radius: 6px; padding: 48px 24px; text-align: center; }
.fs-account-empty p { margin-bottom: 16px; color: #767676; }

.fs-order-detail-rows { padding: 4px 20px 16px; }
.fs-order-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fs-border);
}
.fs-order-detail-row:first-child { border-top: 1px solid var(--fs-border); }
.fs-order-detail-row > span:first-child { color: #767676; }
.fs-order-detail-row > span:last-child { font-weight: 600; text-align: right; }

.fs-order-summary-title { font-size: 20px; font-weight: 700; margin: 8px 20px 4px; }
.fs-order-summary-rows { padding: 0 20px 20px; }
.fs-order-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--fs-border);
}
.fs-order-summary-row--total {
    border-bottom: none;
    background: var(--fs-bg-muted);
    margin: 4px -20px -20px;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 700;
}

.fs-personal-info-card { padding: 24px; }
.fs-personal-info-form .fs-account-subtitle { margin-bottom: 20px; }
.fs-personal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-bottom: 8px;
}
.fs-form-field-wrap { margin: 0 !important; }
.fs-form-field-wrap select.fs-input { width: 100%; }
.fs-restrict-ordering-row { margin: 16px 0 24px; }
.fs-save-changes-btn { min-width: 200px; }

.fs-personal-info-card label:has(> input.input-radio) {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

@media (max-width: 991px) {
    .fs-personal-info-grid { grid-template-columns: 1fr; }
    .fs-order-card__head { flex-direction: column; align-items: flex-start; }
    .fs-order-card__date { margin-left: 0; }
}

/* --------------------------------------------------------------------- */
/* Favorites / wishlist (2026-08)                                        */
/* --------------------------------------------------------------------- */

.fs-favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #9a9a9a;
    cursor: pointer;
    transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.fs-favorite-btn:hover { color: var(--fs-brand); transform: scale(1.06); }
.fs-favorite-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fs-favorite-btn--active { color: #e0294b; }
.fs-favorite-btn--active svg { fill: currentColor; stroke: none; }

/* Inline variant next to the single product title, instead of the
   absolute-positioned corner badge used on cards. */
.fs-favorite-btn--inline {
    position: static;
    flex: none;
    box-shadow: none;
    border: 1px solid var(--fs-border);
}

.fs-account-empty--favorites { padding-top: 40px; }
.fs-account-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1px solid var(--fs-border);
    color: var(--fs-brand);
    margin-bottom: 24px;
}
.fs-account-empty-icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fs-account-empty-title { font-size: 22px; font-weight: 700; color: var(--fs-text); margin-bottom: 8px !important; }

.fs-favorites-grid { margin-top: 4px; }

/* --------------------------------------------------------------------- */
/* Price Inquiry page: "Request a quote" product list (2026-08)          */
/* --------------------------------------------------------------------- */

.fs-quote-items-box .checkout-product-item:not(:first-child) {
    border-top: 1px solid #CED2DD;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.fs-quote-item-price {
    text-align: right;
}

.fs-quote-item-price ins {
    color: #0F9A60;
    font-weight: 700;
    text-decoration: none;
}

.fs-quote-item-price del {
    color: #767676;
    font-weight: 400;
    font-size: 14px;
}

.fs-quote-item-notes {
    color: #767676;
    font-size: 14px;
    line-height: 1.4;
}
.fs-quote-item-notes .fs-vat-suffix {
    display: block;
    font-size: 14px;
    color: #767676;
}

/* --------------------------------------------------------------------- */
/* Single product: "Add to cart" / "Request a quote" buttons (2026-08)   */
/* The theme's own global ".btn { background: var(--accents-4) }" rule   */
/* (css/style.css) makes every plain .btn solid green by default, so     */
/* Bootstrap's ".btn-outline-primary" never actually renders as an       */
/* outline here -- override it back to a proper outline button.          */
/* --------------------------------------------------------------------- */

.btn-request-quote {
    background-color: #fff;
    color: #003399;
    border: 1px solid #003399;
}

.btn-request-quote:hover {
    background-color: #003399;
    color: #fff;
}

/* WooCommerce enhances the country/state <select> fields into a Select2
   widget on checkout -- the plain <select> above is hidden
   (select2-hidden-accessible) and Select2 renders its own span-based
   widget instead, so the .fs-input / select rules above never touch what
   the shopper actually sees. Restyle the Select2 widget to match the
   other checkout fields (border, radius, height, chevron). */
.select2-container--default .select2-selection--single {
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #CED2DD;
    border-radius: 4px;
    display: flex;
    align-items: center;
    background: #fff;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--fs-brand);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal;
    padding: 0 40px 0 16px;
    color: var(--fs-text);
    font-family: var(--font-primary), sans-serif;
    font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #767676;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px;
    right: 14px;
    top: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #767676 transparent transparent transparent;
    border-width: 6px 5px 0 5px;
    margin-left: -5px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #767676 transparent;
    border-width: 0 5px 6px 5px;
}

.select2-dropdown {
    border-color: #CED2DD;
    border-radius: 4px;
    font-family: var(--font-primary), sans-serif;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--fs-brand);
}

/* 2026-09 QA fix: "Amount of products and sorting are broken on the
 * categories and subcategories pages". woocommerce_result_count() /
 * woocommerce_catalog_ordering() render completely unstyled raw
 * WooCommerce markup (they used to sit above the breadcrumb with no
 * container at all, causing an overlap on mobile). They now render
 * inside .fs-shop-toolbar next to the product grid; this gives them a
 * look consistent with the rest of the theme's form controls. */
.fs-shop-toolbar {
    flex-wrap: wrap;
}

.fs-shop-toolbar__count {
    font-size: 14px;
}

.fs-shop-toolbar__count .woocommerce-result-count {
    margin: 0;
}

.fs-shop-toolbar__ordering .woocommerce-ordering {
    display: inline-block;
    max-width: 100%;
}

.fs-shop-toolbar__ordering select.orderby {
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding: 10px 32px 10px 14px;
    border: 1px solid #CED2DD;
    border-radius: 4px;
    background-color: #fff;
    color: var(--fs-text);
    font-family: var(--font-primary), sans-serif;
    font-size: 14px;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23767676' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}

@media (max-width: 575.98px) {
    .fs-shop-toolbar__count,
    .fs-shop-toolbar__ordering {
        width: 100%;
        text-align: left !important;
    }

    .fs-shop-toolbar__ordering select.orderby {
        width: 100%;
    }
}

/* 2026-09 QA fix ("Mobile - Selected options break the product details
 * page, order summary section and order details page"): WooCommerce's
 * own item-meta / variation markup (wc_get_formatted_cart_item_data() ->
 * <dl class="variation">, and order-item meta -> <ul class="wc-item-meta">)
 * had no theme styling at all, so long selected-option text (attribute
 * name + value + SKU, e.g. "Radiators, Connection options: Fixed/plugged:
 * Bluetooth 1000W (6410081278405) (+EUR 622.00)") never wrapped. On narrow
 * mobile viewports that forced the row - and the whole page - wider than
 * the screen, so the page could be scrolled horizontally and text got cut
 * off at the left/right edges instead of wrapping onto new lines. */
dl.variation,
.wc-item-meta {
    max-width: 100%;
}

dl.variation dt,
dl.variation dd,
dl.variation dd p,
.wc-item-meta li {
    white-space: normal !important;
    overflow-wrap: break-word;
    max-width: 100%;
}

dl.variation {
    margin: 4px 0 0;
}

/* Tried making dt/dd "display: inline" (so "Label: Value" reads on one
   line) with a ::before trick to force a break between option pairs --
   but inside a table-layout:fixed cell (the checkout Order Summary column
   on mobile), that combination didn't reliably get the FULL column width:
   text wrapped into a sliver only a few px wide, breaking words down to
   single letters per line ("Blue" as "B"/"l"/"u"/"e") even though
   word-break was already off (2026-09 QA: "Mobile - Selected options
   break..."). Plain block display for both is far more predictable --
   each label gets its own full-width line, then its value gets its own
   full-width line right below, so there's never a narrow leftover sliver
   for the browser to squeeze text into. */
dl.variation dt {
    float: none;
    clear: both;
    font-weight: 600;
    display: block;
    margin: 4px 0 0;
}

dl.variation dd {
    margin: 0 0 2px;
    display: block;
}

dl.variation dd p {
    display: inline;
    margin: 0;
}

.fs-order-item__info,
.fs-order-item__name {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* order-received / My Account > order view table: same unstyled core WC
   table as checkout's order-review table used to be (see the mobile
   .fs-order-review-table fix elsewhere in this file) -- give it the same
   safe, fixed-width, wrapping treatment on small screens. */
@media (max-width: 575.98px) {
    .woocommerce-table--order-details {
        table-layout: fixed;
        width: 100%;
    }

    .woocommerce-table--order-details th,
    .woocommerce-table--order-details td {
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        font-size: 13px;
        padding: 8px 4px;
    }

    .woocommerce-table--order-details .woocommerce-table__product-name,
    .woocommerce-table--order-details .product-name {
        width: 56%;
    }

    .woocommerce-table--order-details .product-total,
    .woocommerce-table--order-details .woocommerce-table__product-total {
        width: 22%;
    }
}

/* Safety net: whatever the exact overflowing element on a given page turns
   out to be (third-party plugin markup included, e.g. Addify product
   options selects on the product page), don't let it drag the whole page
   into a horizontally-scrollable state on mobile -- content should wrap,
   never force the viewport wider. */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* Addify "Product Options and Add-ons" plugin fields on the single product
   page (af_addon_field_class) ship with no responsive width handling of
   their own -- constrain their inputs/selects to the field width instead
   of their natural (possibly wider) intrinsic size. */
.af_addon_field_class,
.af_addon_field_class * {
    max-width: 100%;
    box-sizing: border-box;
}

.af_addon_field_class select,
.af_addon_field_class input[type="text"],
.af_addon_field_class input[type="number"] {
    width: 100%;
}

/* Same plugin's own live "selected options" summary further down the
   product page (the "1 X <product> / <option> (<sku>) (+€X) x1 / ..." list
   right above the Add to cart button) is a plain <table> with no width
   constraint or text wrapping of its own -- each option line just ran off
   the right edge of the screen on mobile instead of wrapping (2026-09 QA:
   "Mobile - Selected options break the product details page"). */
.af_addon_total_price {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
.af_addon_total_price td,
.af_addon_total_price li {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}