/* =============================================================================
   Al Qamara — WooCommerce Styles  (woocommerce.css)

   Enqueued conditionally on WC pages via inc/enqueue.php.
   Extends WC defaults with Bootstrap 5 / Al Qamara design tokens.

   CSS variables inherited from :root (set in functions.php dynamic CSS):
     --alq-primary   #0f172a  dark navy
     --alq-accent    #b8912a  golden
     --alq-footer-bg
   Local aliases defined below for convenience.

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────────────
   00. Local Tokens
   01. Layout Wrapper
   02. Breadcrumb
   03. Shop Header  (title + controls bar)
   04. WC Notices
   05. Product Grid (archive / loop)
   06. Product Card  (content-product.php)
   07. Sale Badge
   08. Hover Overlay
   09. Star Ratings
   10. Single Product Page
   11. Product Tabs
   12. Related / Up-sells
   13. Cart Page
   14. Checkout Page
   15. WC Buttons (global)
   16. Form Fields (global)
   17. Mini Cart  (drawer)
   18. WC Widgets  (sidebar / footer)
   19. Responsive
   20. WooCommerce Account / My Account
   21. Wishlist / Compare Pages  (native — inc/wishlist-compare.php)
============================================================================= */


/* ── 00. Local Tokens ──────────────────────────────────────────────────── */
:root {
    --alq-wc-border   : #e5e7eb;
    --alq-wc-muted    : #6b7280;
    --alq-wc-light    : #f9fafb;
    --alq-wc-success  : #16a34a;
    --alq-wc-error    : #dc2626;
    --alq-wc-info     : #2563eb;
    --alq-wc-radius   : 8px;
    --alq-wc-shadow   : 0 4px 20px rgba(0,0,0,.08);
    --alq-wc-shadow-h : 0 8px 32px rgba(0,0,0,.14);
}


/* ── 01. Layout Wrapper ────────────────────────────────────────────────── */
.alq-wc-main { width: 100%; }

/* Push content above mobile bottom bar on WC pages (mobile only) */
body.woocommerce-active.alq-shop-header { padding-bottom: 64px; }
@media (min-width: 992px) {
    body.woocommerce-active.alq-shop-header { padding-bottom: 0; }
}


/* ── 02. Breadcrumb ────────────────────────────────────────────────────── */
.alq-wc-breadcrumb .breadcrumb {
    font-size: .82rem;
    flex-wrap: wrap;
}
.alq-wc-breadcrumb .breadcrumb-item { color: var(--alq-wc-muted); }
.alq-wc-breadcrumb .breadcrumb-item a {
    color: var(--alq-accent, #b8912a);
    text-decoration: none;
    transition: color .2s;
}
.alq-wc-breadcrumb .breadcrumb-item a:hover { color: var(--alq-primary, #0f172a); }
.alq-wc-breadcrumb .breadcrumb-item.active { color: var(--alq-primary, #0f172a); font-weight: 600; }
.alq-wc-breadcrumb .breadcrumb-item + .breadcrumb-item::before { display: none; }
.alq-wc-bc-sep {
    color          : var(--alq-wc-muted);
    font-size      : .7rem;
    display        : inline-flex;
    align-items    : center;
    vertical-align : middle;
}

/* WC default breadcrumb (fallback) */
.woocommerce-breadcrumb {
    font-size: .82rem;
    color: var(--alq-wc-muted);
    margin-bottom: 1rem;
}
.woocommerce-breadcrumb a {
    color: var(--alq-accent, #b8912a);
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover { text-decoration: underline; }


/* ── 03. Shop Header ───────────────────────────────────────────────────── */

/* Outer wrapper — block container, no flex (single product uses this too) */
.alq-shop-header-bar {
    margin-bottom: 1.75rem;
}

/* Breadcrumb row — py-2 (0.5rem top/bottom) matches single-product.php bar spacing */
.alq-shop-bc-row {
    padding-top   : .5rem;
    padding-bottom: .5rem;
}

/* Title row — border separator below title */
.alq-shop-title-row {
    padding-bottom : 1rem;
    border-bottom  : 1px solid var(--alq-wc-border);
    margin-bottom  : 1rem;
}

.alq-shop-title {
    font-size  : 1.5rem;
    font-weight: 700;
    color      : var(--alq-primary, #0f172a);
    margin     : 0;
}

/* Controls row (result count + ordering + toggle)
   Lives INSIDE data-wp-router-region so it updates on AJAX filter */
.alq-shop-controls {
    flex-wrap  : wrap;
}

/* WC result count — WC adds float:left + margin-bottom which breaks flex centering */
.woocommerce-result-count {
    font-size : .82rem;
    color     : var(--alq-wc-muted);
    margin    : 0 !important;
    float     : none !important;
}

/* WC ordering form — WC adds margin:0 0 1em by default which breaks flex centering */
.woocommerce-ordering { margin: 0 !important; }

/* WC ordering select */
.woocommerce-ordering select.orderby {
    border: 1.5px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    padding: .4rem .85rem;
    font-size: .82rem;
    color: var(--alq-primary, #0f172a);
    background-color: #fff;
    cursor: pointer;
    transition: border-color .2s;
}
.woocommerce-ordering select.orderby:focus {
    border-color: var(--alq-accent, #b8912a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}


/* ── 04. WC Notices ────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;
    padding: .9rem 8.5rem .9rem 1.1rem;  /* right padding reserves space for button */
    border-radius: var(--alq-wc-radius);
    border-left: 4px solid;
    margin-bottom: 1.5rem;
    list-style: none;
    display: block;
    line-height: 1.5;
}
.woocommerce-message {
    background: #f0fdf4;
    border-color: var(--alq-wc-success);
    color: #14532d;
}
.woocommerce-error {
    background: #fef2f2;
    border-color: var(--alq-wc-error);
    color: #7f1d1d;
}
.woocommerce-info {
    background: #eff6ff;
    border-color: var(--alq-accent, #b8912a);
    color: var(--alq-primary, #0f172a);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-error li::before { display: none !important; }

.woocommerce-error li {
    display: block;
    width: 100%;
    font-size: .88rem;
}

/* Button — absolutely pinned to right center; works on any screen width */
.woocommerce-message a.button,
.woocommerce-info a.button {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border-radius: 5px;
    padding: .35rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}


/* ── 05. Product Grid ──────────────────────────────────────────────────── */

/*
 * WooCommerce adds float-era clearfix via ::before / ::after on ul.products.
 * These become unwanted grid/flex items in our CSS Grid layout.
 * Override them to nothing so the first column stays clean.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    content : none !important;
    display : none  !important;
}

/* WC outputs <ul class="products columns-N"> */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat( 3, 1fr );
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    clear: both;
}
/* WC columns-N variants — wrapped in a 992px min-width guard (2026-09-27 fix).
 * Reason: each of these adds an extra class to the selector
 * (.products.columns-N vs. the base .products), which raises its specificity
 * ABOVE the tablet/mobile resets further down (`.woocommerce ul.products`
 * with no columns-N modifier) — those resets therefore lost to columns-4
 * regardless of screen width or source order, rendering 4 cramped columns on
 * a real phone (375px) on any shop using 4 columns. The base 3-column rule
 * right above was never affected (it has the SAME specificity as the mobile
 * resets, so normal source-order cascade — "later wins" — already let mobile
 * override it correctly); only the columns-N modifiers needed guarding. */
@media ( min-width: 992px ) {
    .woocommerce ul.products.columns-2,
    .woocommerce-page ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
    .woocommerce ul.products.columns-1,
    .woocommerce-page ul.products.columns-1 { grid-template-columns: 1fr; }
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float         : none !important;
    width         : auto !important;
    margin        : 0 !important;
    padding       : 0;
    text-align    : left;
    min-width     : 0;  /* prevent CSS grid track from expanding beyond 1fr due to nowrap content */
    /* Make li a flex column so h-100 on .alq-pw-card fills grid-row height */
    display       : flex !important;
    flex-direction: column;
}
.woocommerce ul.products li.product .alq-pw-card,
.woocommerce-page ul.products li.product .alq-pw-card {
    flex: 1;  /* card stretches to fill the li (which fills the grid row) */
}

/* ── Shop Sidebar — Open style ────────────────────────────────────────── */
/*
 * Option B: no card boxes — clean open layout.
 * Widgets are separated by spacing only.
 * Title has a gold left-border accent for visual anchoring.
 */
.alq-shop-sidebar {
    align-self: flex-start; /* needed for sticky to work on desktop */
}

/*
 * Sticky sidebar — desktop only. On mobile it stacks as col-12 block.
 *
 * REVISED: this used to cap the sidebar to max-height:100vh with its own
 * internal overflow-y:auto scrollbar (an Amazon/Daraz-style "sidebar
 * scrolls independently in its own box" pattern). That works fine as long
 * as the sidebar ONLY holds filters, but breaks down the moment anything
 * else gets added below them (e.g. a "Recently Viewed Products" widget) —
 * the extra widget gets squeezed into that same fixed-height box and is
 * only reachable via a second, separate scroll gesture confined to a
 * narrow column, which reads as "cut off" / easy to miss entirely.
 *
 * Most WooCommerce themes (Kadence, Storefront, Flatsome, Astra, etc.)
 * don't cap sidebar height at all: position:sticky is left to do what it
 * already does natively — stay pinned near the top while the PAGE scrolls,
 * and automatically stop being "stuck" once the sidebar's own bottom edge
 * reaches the bottom of its column. No JS, no second scrollbar, no capped
 * height. Whatever is in the sidebar (filters, recently-viewed, anything
 * added later) just adds to its natural height and everything scrolls
 * together as one continuous page — which is what most visitors expect,
 * and is what this now matches.
 *
 * Gated by `body:not(.alq-shop-sidebar-not-sticky)` — controlled by its own
 * independent Customizer toggle (WooCommerce → Shop / Archive → "Sticky
 * Sidebar", `alqamara_shop_sidebar_sticky`), deliberately kept SEPARATE from
 * the blog sidebar's own toggle (Global Settings → Sidebar →
 * `alqamara_blog_sidebar_sticky`) since this theme serves both content/blog
 * sites and WooCommerce stores — a buyer using it for one purpose shouldn't
 * have this choice forced onto the other area.
 */
@media (min-width: 992px) {
    body:not(.alq-shop-sidebar-not-sticky) .alq-shop-sidebar {
        position: sticky;
        top     : calc( var(--alq-header-total-h, 80px) + 1.5rem );
    }
}

.alq-shop-sidebar .widget {
    background    : none;
    border        : none;
    border-radius : 0;
    padding       : 0;
    margin-bottom : 2rem;
}
.alq-shop-sidebar .widget:last-child { margin-bottom: 0; }

/* ── Products column: AJAX loading state ────────────────────────────────────
   WP Interactivity API sets aria-busy="true" on the router-region element
   while navigate() is in progress. We fade the products and show a spinner.

   The spinner used to be centred at 50% of THIS element's own total height
   (::before with top:50%/left:50% inside the position:relative column).
   That's correct in theory, but .alq-products-col holds every product row —
   for a full 12-15 product grid its total height is far taller than one
   screen, so "50% of the column" can land well below the fold and the user
   never sees it. `position: sticky` fixes this: the spinner sticks to a
   fixed spot relative to the VIEWPORT (roughly mid-screen) as the user
   scrolls, while still being clamped to the column's own top/bottom edges
   so it never floats off into unrelated content above or below it.        */
.alq-products-col[aria-busy="true"] {
    position       : relative;
    pointer-events : none;
}
.alq-products-col[aria-busy="true"]::after {
    content     : '';
    position    : absolute;
    inset       : 0;
    background  : rgba(255,255,255,.55);
    z-index     : 10;
    border-radius: 4px;
}
.alq-products-col[aria-busy="true"]::before {
    content    : '';
    display    : block;
    position   : sticky;
    top        : 35vh;
    left       : 50%;
    transform  : translateX(-50%);
    width      : 36px;
    height     : 36px;
    border     : 3px solid rgba(184,145,42,.25);
    border-top : 3px solid var(--alq-accent, #b8912a);
    border-radius: 50%;
    animation  : alq-spin .7s linear infinite;
    z-index    : 11;
}
@keyframes alq-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* Widget titles */
.alq-shop-sidebar .widget-title,
.alq-shop-sidebar .widgettitle {
    font-size     : .82rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color         : var(--alq-primary, #0f172a);
    margin-bottom : .75rem;
    padding       : 0;
    border        : none;
    line-height   : 1.4;
}

/* Widget links */
.alq-shop-sidebar a {
    color          : var(--alq-primary, #0f172a);
    text-decoration: none;
    font-size      : .88rem;
    transition     : color .18s;
}
.alq-shop-sidebar a:hover { color: var(--alq-accent, #b8912a); }

/* Widget list items (categories, tags, etc.) */
.alq-shop-sidebar ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
}
.alq-shop-sidebar ul li {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : .3rem 0;
    border-bottom  : 1px solid var(--alq-wc-border);
    font-size      : .88rem;
}
.alq-shop-sidebar ul li:last-child { border-bottom: none; }
.alq-shop-sidebar ul li .count {
    color      : var(--alq-wc-muted);
    font-size  : .78rem;
    margin-left: .35rem;
}

/* Active category highlight */
.alq-shop-sidebar .current-cat > a,
.alq-shop-sidebar .chosen > a {
    color      : var(--alq-accent, #b8912a);
    font-weight: 600;
}


/* ── View Toggle Buttons ──────────────────────────────────────────────── */
.alq-view-toggle { flex-shrink: 0; }

.alq-view-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 2rem;
    height         : 2rem;
    border         : 1.5px solid var(--alq-wc-border);
    border-radius  : 5px;
    background     : #fff;
    color          : var(--alq-wc-muted);
    font-size      : .9rem;
    cursor         : pointer;
    transition     : border-color .18s, color .18s, background .18s;
    padding        : 0;
    line-height    : 1;
}
.alq-view-btn:hover {
    border-color: var(--alq-accent, #b8912a);
    color       : var(--alq-accent, #b8912a);
}
.alq-view-btn.active {
    background  : var(--alq-accent, #b8912a);
    border-color: var(--alq-accent, #b8912a);
    color       : #fff;
}

/* ── List View layout ─────────────────────────────────────────────────── */
.woocommerce ul.products.alq-list-view,
.woocommerce-page ul.products.alq-list-view {
    grid-template-columns: 1fr !important;
    gap: 1rem;
}
.woocommerce ul.products.alq-list-view li.product .alq-pw-card,
.woocommerce-page ul.products.alq-list-view li.product .alq-pw-card {
    flex-direction: row !important;
    height        : auto !important;
}
.woocommerce ul.products.alq-list-view li.product .alq-pw-thumb-wrap,
.woocommerce-page ul.products.alq-list-view li.product .alq-pw-thumb-wrap {
    width     : 200px;
    min-width : 200px;
    flex-shrink: 0;
    aspect-ratio: unset !important;
    height    : 100%;
}
.woocommerce ul.products.alq-list-view li.product .alq-pw-thumb,
.woocommerce-page ul.products.alq-list-view li.product .alq-pw-thumb {
    height    : 100%;
    object-fit: cover;
}
.woocommerce ul.products.alq-list-view li.product .alq-pw-no-thumb,
.woocommerce-page ul.products.alq-list-view li.product .alq-pw-no-thumb {
    height    : 100%;
    min-height: 160px;
}
.woocommerce ul.products.alq-list-view li.product .alq-pw-body,
.woocommerce-page ul.products.alq-list-view li.product .alq-pw-body {
    padding: 1.1rem 1.25rem;
}
/* Hide hover overlay in list view */
.woocommerce ul.products.alq-list-view li.product .alq-pw-cart-overlay,
.woocommerce-page ul.products.alq-list-view li.product .alq-pw-cart-overlay {
    display: none;
}
/* Mobile list view: keep horizontal row but with a narrower thumbnail.
   Column layout would push price/cart below a large blank thumb area,
   making them hard to see without scrolling each card. */
@media (max-width: 575.98px) {
    .woocommerce ul.products.alq-list-view li.product .alq-pw-thumb-wrap {
        width     : 110px;
        min-width : 110px;
        height    : auto;
    }
    .woocommerce ul.products.alq-list-view li.product .alq-pw-no-thumb {
        min-height: 110px;
    }
    .woocommerce ul.products.alq-list-view li.product .alq-pw-body {
        padding: .75rem 1rem;
    }
}


/* ── 06. Product Card ───────────────────────────────────────────────────── */
/*
 * Card styles are in css/custom.css (.alq-pw-* rules) — the shop page
 * template (content-product.php) now uses the SAME .alq-pw-* classes as
 * the homepage Posts Widget so both stay in sync with one set of CSS.
 *
 * Only fallback styles for WC's default markup (when no theme override):
 */
.woocommerce ul.products li.product a img { width: 100%; height: auto; display: block; }
/*
 * Button: custom.css already defines .alq-pw-cart .button with !important.
 * This rule is a fallback for any WC button that falls outside .alq-pw-cart.
 */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
    background  : var(--alq-accent, #b8912a) !important;
    color       : #fff !important;
    border-radius: 5px;
    font-size   : .82rem !important; font-weight: 600;
    line-height : 1.4 !important;
    width: 100%; display: block; text-align: center;
    padding     : .5rem .9rem !important;
    margin-top  : 0 !important;   /* override WC plugin's margin-top: 1em */
    transition  : background .2s;
}
.woocommerce ul.products li.product a.button:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}


/* ── 07. Sale Badge ─────────────────────────────────────────────────────── */
/*
 * The single product page's Sale badge reuses the SAME .alq-pw-sale-badge
 * pill styling as the shop-loop card (defined once in custom.css, shared
 * with the widget) — see the woocommerce_sale_flash filter in
 * inc/woocommerce.php, which outputs class="onsale alq-pw-sale-badge" with
 * plain "Sale -10%" text (one line, no separate label/pct spans anymore).
 *
 * BUT: WooCommerce core's own plugin stylesheet ALSO targets `.onsale`
 * directly (border-radius:100%, fixed min-width/min-height ~44px, tiny
 * padding — its own circular badge default) and loads after this file, so
 * it was still winning on this page only (the shop-loop badge doesn't
 * carry the `onsale` class, so it never hit this conflict). Result: an
 * oval/egg shape instead of the intended pill. Force the pill back with
 * higher specificity + !important, scoped to only our own badge.
 */
.woocommerce span.onsale.alq-pw-sale-badge {
    border-radius : 999px !important;
    width          : auto  !important;
    height         : auto  !important;
    min-width      : 0     !important;
    min-height     : 0     !important;
    line-height    : 1     !important; /* WC core sets a tall fixed line-height that was inflating the box to an oval */
    padding        : .3rem .6rem !important; /* WC core also shrinks padding to ~2.7px — match custom.css's pill padding */
}


/* ── 08. Hover Overlay ─────────────────────────────────────────────────── */
/*
 * .alq-pw-cart-overlay, .alq-pw-view-details, .alq-pw-icon-btn styles
 * are in custom.css (shared with widget). Nothing needed here.
 */


/* ── 09. Star Ratings ──────────────────────────────────────────────────── */
.star-rating { color: var(--alq-accent, #b8912a); font-size: .85rem; }
.star-rating::before { color: #d1d5db; }
.star-rating span::before { color: var(--alq-accent, #b8912a); }

.woocommerce .star-rating {
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: .9em;
    width: 5.4em;
    font-family: star;
}
.woocommerce .star-rating::before {
    content: '\53\53\53\53\53';
    color: #d1d5db;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}
.woocommerce .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}
.woocommerce .star-rating span::before {
    content: '\53\53\53\53\53';
    top: 0;
    position: absolute;
    left: 0;
    color: var(--alq-accent, #b8912a);
}

.woocommerce-product-rating { display: flex; align-items: center; gap: .4rem; margin: .3rem 0 .5rem !important; }
.woocommerce-review-link { font-size: .78rem; color: var(--alq-wc-muted); text-decoration: none; }
.woocommerce-review-link:hover { color: var(--alq-accent, #b8912a); }


/* ── 10. Single Product Page ────────────────────────────────────────────── */
/* Every selector in this section requires `.type-product` in addition to
 * `.product`. WordPress core's post_class() always adds `type-{post_type}`
 * (i.e. "type-product") to the REAL WooCommerce single-product wrapper
 * (`content-single-product.php` -> `<div id="product-X" class="product
 * type-product ...">`), on both the actual single-product page AND inside
 * any AJAX-loaded copy of that markup (e.g. a Quick View modal).
 * The "Woo Quick View" plugin wraps that real markup in its OWN extra,
 * generic `<div class="product">` container (no `type-product` class) for
 * its own JS targeting. Before this scoping, the bare `.woocommerce
 * div.product` selector matched BOTH divs, turning the plugin's outer
 * wrapper into a second, unwanted 2-column grid — squeezing the real
 * product markup into a single half-width cell (tiny gallery, narrow
 * scrollable summary cutting off button text) with a large blank column
 * next to it. Found live-testing the companion-plugins audit (see
 * PROGRESS.md, Category 4 — Quick View). Adding `.type-product` excludes
 * the plugin's generic wrapper while still matching the real product
 * wrapper everywhere it legitimately appears. */
.woocommerce div.product.type-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* column-gap = horizontal space between the gallery and summary
     * columns only. Was 1.2rem (~19px), noticeably tighter than typical
     * professional WooCommerce themes (~40-64px) — increased to 2rem
     * (~32px). row-gap is DELIBERATELY kept at its original 1.2rem: this
     * grid also stacks other full-width rows below the gallery/summary
     * (the notices wrapper above it, then .woocommerce-tabs / .related /
     * .upsells below) — using the single "gap" shorthand here previously
     * widened the vertical space between ALL of those rows too (e.g. the
     * gap between the breadcrumb area and the gallery/summary row), which
     * was never the intent — only the horizontal gallery↔summary gap
     * needed to change. */
    column-gap: 2rem;
    row-gap: 1.2rem;
    align-items: flex-start;
}
.woocommerce div.product.type-product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product.type-product .summary { grid-column: 2; }
.woocommerce div.product.type-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 3rem; }
.woocommerce div.product.type-product .related { grid-column: 1 / -1; }
.woocommerce div.product.type-product .upsells { grid-column: 1 / -1; }

/* WC sets float + width:48% on div.images / div.summary — inside our grid those
   percentages resolve against the column width (not the container), resulting in
   ~258px instead of the full column.  Force both to fill their grid cell. */
.woocommerce div.product.type-product .woocommerce-product-gallery,
.woocommerce div.product.type-product .summary.entry-summary {
    float     : none !important;
    width     : 100% !important;
    clear     : none !important;
    min-width : 0;          /* prevent grid track from expanding to content size */
}
/* WooCommerce core also puts a 32px margin-bottom on .summary — harmless in
   its own default template, but in this CSS Grid layout it stacks on top of
   the row-gap + the next row's own top margin, making the gallery/summary
   gap bigger than every other section-to-section gap below it. Zeroed here
   to keep spacing consistent with the rest of section 10/11/12
   (top-margin-only, zero bottom-margin, on every row). */
.woocommerce div.product.type-product .summary.entry-summary { margin-bottom: 0; }

/* Product gallery */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper {
    cursor: zoom-in;
}
.woocommerce-product-gallery__wrapper img {
    width: 100%;
    height: auto;
    border-radius: var(--alq-wc-radius);
    display: block;
}
/* Square (1:1) main image — Customizer toggle "Square (1:1) Product Image"
   (default on), body class added in inc/woocommerce.php. Doesn't touch the
   .alq-thumb-left layout below, which already stretches the image to a
   fixed column height via a more specific selector. */
.alq-sp-square-img .woocommerce-product-gallery__wrapper img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}
/* Bottom thumbnail layout (default) —————————————————————————————————————
   WC's own CSS sets  .woocommerce-product-gallery--columns-4 li { width:25% }
   and img { width:100% } which override our values unless we use !important.
   We also switch from flex-wrap:wrap → nowrap + overflow-x:auto so extra
   thumbnails scroll horizontally instead of jumping to a second row.        */
.woocommerce-product-gallery .flex-control-thumbs {
    display       : flex !important;
    flex-wrap     : nowrap !important;
    overflow-x    : auto !important;
    overflow-y    : hidden !important;
    scrollbar-width: none !important;
    gap           : .5rem;
    margin-top    : .5rem !important;
    padding       : 0 !important;
    list-style    : none;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }

/* ── Thumbnail strip arrow navigation ──────────────────────────────────── */
.alq-thumb-nav-wrap {
    position   : relative;
    display    : flex;
    align-items: center;
    gap        : 0;
    margin-top : .5rem;
}
/* thumbs sits inside the wrapper; reset its own margin-top */
.alq-thumb-nav-wrap .flex-control-thumbs { margin-top: 0 !important; flex: 1; min-width: 0; }

/* Horizontal mode: overlay arrows float on top of thumbnail strip */
.alq-thumb-nav-btn {
    position       : absolute;
    top            : 0;
    height         : 72px;
    width          : 40px;
    color          : var(--alq-accent, #b8912a);
    background     : transparent;
    border         : none;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 0;
    z-index        : 2;
    transition     : opacity .2s;
    border-radius  : 0;
}
.alq-thumb-nav-btn svg {
    width : 20px;
    height: 20px;
    display: block;
}
.alq-thumb-nav-prev {
    left      : 0;
    background: linear-gradient(to right, rgba(255,255,255,.92) 40%, rgba(0,0,0,0));
    margin-right: 0;
}
.alq-thumb-nav-next {
    right     : 0;
    background: linear-gradient(to left,  rgba(255,255,255,.92) 40%, rgba(0,0,0,0));
    margin-left: 0;
}
.alq-thumb-nav-btn:hover { opacity: .55; }

/* Left-thumb mode: wrap sits LEFT of main image, overlay arrows top/bottom */
.alq-thumb-left .alq-thumb-nav-wrap {
    order         : -1;
    flex-direction: column;
    flex          : 0 0 72px;
    width         : 72px;
    margin-top    : 0;
    align-self    : stretch;
    overflow      : hidden;
}
/* Left mode: overlay arrows absolutely at top / bottom of the column */
.alq-thumb-left .alq-thumb-nav-btn {
    position : absolute;
    left     : 0;
    right    : 0;
    top      : auto;
    width    : 72px;
    height   : 40px;
    color    : var(--alq-accent, #b8912a);
    border-radius: 0;
    filter   : drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.alq-thumb-left .alq-thumb-nav-btn svg {
    width : 18px;
    height: 18px;
}
.alq-thumb-left .alq-thumb-nav-prev {
    top       : 0;
    bottom    : auto;
    background: linear-gradient(to bottom, rgba(255,255,255,.92) 40%, rgba(0,0,0,0));
    margin    : 0;
}
.alq-thumb-left .alq-thumb-nav-next {
    bottom    : 0;
    top       : auto;
    background: linear-gradient(to top,   rgba(255,255,255,.92) 40%, rgba(0,0,0,0));
    margin    : 0;
}
.alq-thumb-left .alq-thumb-nav-btn:hover { opacity: .55; }

/* Override WC's percentage-based li width */
.woocommerce-product-gallery .flex-control-thumbs li {
    flex  : 0 0 72px !important;
    width : 72px !important;
}
.woocommerce-product-gallery .flex-control-thumbs img {
    width        : 72px !important;
    height       : 72px !important;
    object-fit   : cover;
    border-radius: 5px;
    border       : 2px solid transparent;
    cursor       : pointer;
    transition   : border-color .2s;
    display      : block;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
    border-color: var(--alq-accent, #b8912a);
}

/* Left thumbnail layout (Customizer: Thumbnail Position → Left) ————————
   Thumbs go to the left as a vertical column. align-self:stretch makes
   the column exactly as tall as the main image; overflow-y:auto scrolls
   any extras within that height.                                           */
.woocommerce-product-gallery.alq-thumb-left {
    display       : flex;
    flex-direction: row;
    gap           : 0.75rem;
    align-items   : stretch;        /* both columns same height */
}
.woocommerce-product-gallery.alq-thumb-left .woocommerce-product-gallery__wrapper {
    flex     : 1;
    min-width: 0;
}
.woocommerce-product-gallery.alq-thumb-left .woocommerce-product-gallery__wrapper img {
    width : 100%;
    height: 100%;
    object-fit: cover;
}
.woocommerce-product-gallery.alq-thumb-left .flex-control-thumbs {
    order         : 0 !important;  /* DOM order: prev arrow, thumbs, next arrow */
    flex          : 1 !important;  /* fill space between the two arrows */
    flex-direction: column !important;
    flex-wrap     : nowrap !important;
    width         : 72px !important;
    overflow-x    : hidden !important;
    overflow-y    : auto !important;
    margin-top    : 0 !important;
    max-height    : none !important;
}
.woocommerce-product-gallery.alq-thumb-left .flex-control-thumbs li {
    flex  : 0 0 72px !important;
    width : 72px !important;
}
.woocommerce-product-gallery.alq-thumb-left .flex-control-thumbs img {
    width : 72px !important;
    height: 72px !important;
}

/* Summary / info column */
.woocommerce div.product.type-product .summary .product_title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    margin-bottom: .3rem;
    line-height: 1.3;
}
.woocommerce div.product.type-product p.price,
.woocommerce div.product.type-product span.price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    margin: .6rem 0;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}
.woocommerce div.product.type-product p.price del,
.woocommerce div.product.type-product span.price del {
    font-size: .95rem;
    font-weight: 400;
    color: var(--alq-wc-muted);
    opacity: .7;
}
.woocommerce div.product.type-product p.price ins,
.woocommerce div.product.type-product span.price ins {
    text-decoration: none;
    color: var(--alq-accent, #b8912a);
}

/* Stock status */
.woocommerce div.product.type-product .in-stock  { color: var(--alq-wc-success); font-weight: 600; font-size: .85rem; }
.woocommerce div.product.type-product .out-of-stock { color: var(--alq-wc-error); font-weight: 600; font-size: .85rem; }

/* Short description */
.woocommerce div.product.type-product .woocommerce-product-details__short-description {
    font-size: .9rem;
    color: var(--alq-wc-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

/* Quantity + Add to Cart */
.woocommerce div.product.type-product form.cart {
    display     : flex;
    align-items : center;
    gap         : .75rem;
    flex-wrap   : wrap;
    margin-bottom: 1rem;
}

/* Variable product: variations table + single_variation_wrap each take full width */
.woocommerce div.product.type-product form.cart table.variations,
.woocommerce div.product.type-product form.cart .single_variation_wrap {
    flex : 0 0 100%;
    width: 100%;
}

/* Simple product: qty stays compact on same row as buttons */
.woocommerce div.product.type-product form.cart .quantity {
    flex   : 0 0 auto;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    overflow: hidden;
}
.woocommerce div.product.type-product form.cart .qty {
    width: 56px;
    height: 42px;
    text-align: center;
    border: none;
    font-size: .95rem;
    font-weight: 600;
    color: var(--alq-primary, #0f172a);
    background: #fff;
}
.woocommerce div.product.type-product form.cart .qty:focus { outline: none; box-shadow: none; }

.woocommerce div.product.type-product form.cart .button {
    height: 42px;
    padding: 0 1.6rem;
    font-size: .9rem;
    font-weight: 700;
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none;
    border-radius: var(--alq-wc-radius);
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.woocommerce div.product.type-product form.cart .button:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}

/* Add to Cart — flex:1 fills all remaining space so BuyNow ends at right edge.
   The broad .woocommerce div.product.type-product selector covers both simple and variable
   products regardless of what wrapper a swatches plugin may add around the button. */
.woocommerce div.product.type-product form.cart .single_add_to_cart_button,
.woocommerce div.product.type-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce div.product.type-product .single_add_to_cart_button {
    flex           : 1 1 0 !important;
    min-width      : 0;
    text-align     : center;
    justify-content: center;
}

/* Buy Now — auto width, always at right edge because ATC fills remaining space */
.woocommerce div.product.type-product form.cart .alq-buy-now-btn,
.woocommerce div.product.type-product .woocommerce-variation-add-to-cart .alq-buy-now-btn,
.woocommerce div.product.type-product .alq-buy-now-btn {
    flex           : 0 0 auto !important;
    text-align     : center;
    justify-content: center;
}

/* Buy Now button — outlined style (accent border, transparent fill) */
.woocommerce div.product.type-product form.cart .alq-buy-now-btn {
    background   : transparent !important;
    color        : var(--alq-accent, #b8912a) !important;
    border       : 2px solid var(--alq-accent, #b8912a) !important;
    padding-left : 1.4rem !important;
    padding-right: 1.4rem !important;
    margin-left  : 0 !important;
}
.woocommerce div.product.type-product form.cart .alq-buy-now-btn:hover {
    background: var(--alq-accent, #b8912a) !important;
    color     : #fff !important;
}

/* Very narrow screens (~320px — old/small phones, and notably also the
   width WordPress's own Customizer "mobile" preview uses): with qty input
   + Add to Cart (flex:1, min-width:0) + Buy Now (fixed width) all fighting
   for the same row, Add to Cart's flex-basis:0 can shrink well past what
   "Add to cart" needs at 14px+ font — and since it's `min-width:0` with
   `white-space:nowrap`, the text overflows the button's edges instead of
   the button itself wrapping to a new line. Confirmed live 2026-08-12 via
   the Customizer's mobile device preview (~320px) — text visibly broke out
   of the button there, though normal modern phones (375px+) have enough
   room and look fine untouched. Fix: give Add to Cart a real min-width
   here so the flex row (already `flex-wrap:wrap` on form.cart) pushes Buy
   Now down to its own line instead, rather than squeezing text. */
@media (max-width: 340px) {
    .woocommerce div.product.type-product form.cart .single_add_to_cart_button,
    .woocommerce div.product.type-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
    .woocommerce div.product.type-product .single_add_to_cart_button {
        min-width: 110px;
    }
    .woocommerce div.product.type-product form.cart .alq-buy-now-btn {
        flex: 1 1 100% !important;
    }
}

/* Desktop-only size balance (2026-08-12): Add to Cart is flex:1 (fills all
   leftover row space) and Buy Now is flex:0 0 auto (sized to its own
   padding) — that flex logic stays exactly as-is (must not change: it's
   what keeps Buy Now pinned to the right edge). Widening Buy Now's own
   padding here is the correct lever to make it look bigger, since doing so
   automatically leaves Add to Cart less remaining space to fill — same
   mechanism, just rebalanced. Scoped to desktop only (min-width:992px) —
   mobile already looks fine/equal-sized per the user and is intentionally
   left untouched. */
@media (min-width: 992px) {
    .woocommerce div.product.type-product form.cart .alq-buy-now-btn {
        padding-left  : 2.2rem !important;
        padding-right : 2.2rem !important;
        font-size     : .95rem;
    }
}

/* =============================================================================
   STICKY MOBILE ADD-TO-CART BAR (inc/sticky-add-to-cart.php,
   js/alq-sticky-atc.js) — single product pages only, mobile only (.d-lg-none
   handles the breakpoint). Sits directly above .alq-mobile-bar (58px tall,
   z-index 1040) — `bottom: 58px` here matches that, and JS bumps it further
   up if the cookie consent banner is also visible at the same time (both
   default to this same slot otherwise). Hidden via transform, not the
   `hidden` attribute, since this toggles on every scroll direction change —
   no need for the show/hide timing dance the cookie banner uses for its
   one-time dismiss. Added 2026-08-12.
============================================================================= */
.alq-sticky-atc {
    position  : fixed;
    left      : 0;
    right     : 0;
    bottom    : 58px;
    z-index   : 1035;
    background: #fff;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -4px 16px rgba(0,0,0,.1);
    transform : translateY(100%);
    transition: transform .25s ease;
    pointer-events: none;
}
.alq-sticky-atc.alq-sticky-atc--visible {
    transform     : translateY(0);
    pointer-events: auto;
}
.alq-sticky-atc-inner {
    display    : flex;
    align-items: center;
    gap        : .5rem;
    padding    : .4rem .6rem;
}
/* Thumb + text sized down from the first pass — on the compact bar the
   original 40px thumb / .78rem text read as full desktop size crammed
   into a small space rather than an intentionally compact bar. 2026-08-12. */
.alq-sticky-atc-thumb {
    width        : 34px;
    height       : 34px;
    object-fit   : cover;
    border-radius: 6px;
    flex-shrink  : 0;
}
.alq-sticky-atc-meta {
    flex     : 1 1 auto;
    min-width: 0;
}
.alq-sticky-atc-name {
    font-size    : .7rem;
    font-weight  : 600;
    color        : var(--alq-primary, #0f172a);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}
.alq-sticky-atc-price {
    font-size: .7rem;
    color    : var(--alq-accent, #b8912a);
    font-weight: 600;
}
.alq-sticky-atc-price del { color: #9ca3af; margin-right: .25rem; font-weight: 400; }
/* Button color: matches the REAL single-product Add to Cart button
   (`.single_add_to_cart_button`, accent gold background — see the rule
   near the top of this file) rather than `.btn-custom` (primary navy,
   the theme's general-purpose/content button). Commerce actions use
   accent everywhere on this site (Buy Now's border, the real Add to
   Cart fill, etc.) — the first version of this bar used primary by
   mistake. Also sized down to match the smaller thumb/text above.
   2026-08-12. */
.alq-sticky-atc-btn {
    flex-shrink    : 0;
    display        : inline-flex;
    align-items    : center;
    gap            : .3rem;
    white-space    : nowrap;
    background     : var(--alq-accent, #b8912a);
    color          : #fff;
    border         : none;
    border-radius  : var(--alq-wc-radius, 5px);
    padding        : .45rem .7rem;
    font-size      : .72rem;
    font-weight    : 700;
    cursor         : pointer;
    transition     : background .2s;
}
.alq-sticky-atc-btn:hover {
    background: var(--alq-accent-dark, #9a7821);
}
.alq-sticky-atc-btn i {
    font-size: .85rem;
}

/* =============================================================================
   CHECKOUT / THANK YOU NOTICE BOX (inc/woocommerce.php →
   alqamara_wc_notice_box()) — admin-editable text shown above the checkout
   form / above the order-confirmation details. Replaces the original bare
   `.alert.alert-light.border` (flagged as too plain) with the theme's usual
   accent-bordered card treatment. Both `.alq-checkout-notice` and
   `.alq-thankyou-notice` share this base look; only the icon differs
   (info vs check, set in PHP). 2026-08-12.
============================================================================= */
.alq-wc-notice {
    display      : flex;
    align-items  : flex-start;
    gap          : .75rem;
    background   : color-mix(in srgb, var(--alq-accent, #b8912a) 8%, #fff 92%);
    border       : 1px solid color-mix(in srgb, var(--alq-accent, #b8912a) 25%, #fff 75%);
    border-left  : 4px solid var(--alq-accent, #b8912a);
    border-radius: 10px;
    padding      : 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.alq-wc-notice-icon {
    flex-shrink: 0;
    font-size  : 1.35rem;
    color      : var(--alq-accent, #b8912a);
    line-height: 1;
    margin-top : .15rem;
}
.alq-wc-notice-text {
    color    : var(--alq-primary, #0f172a);
    font-size: .95rem;
    line-height: 1.6;
}
.alq-wc-notice-text p { margin-bottom: .5rem; }
.alq-wc-notice-text p:last-child { margin-bottom: 0; }

/* ── 6-D Order Row: WhatsApp + Messenger buttons ── */
.alq-order-row {
    display    : flex;
    flex-wrap  : nowrap;
    gap        : .6rem;
    margin-top : .6rem;
}

/* Shared base for both order buttons — secondary tier: slightly shorter & smaller */
.alq-order-btn {
    display         : inline-flex !important;
    align-items     : center;
    justify-content : center;
    gap             : .4rem;
    flex            : 1 1 0;
    height          : 36px !important;
    padding         : 0 1rem !important;
    font-size       : .8rem !important;
    font-weight     : 600 !important;
    border-radius   : var(--alq-wc-radius, 4px) !important;
    text-decoration : none !important;
    transition      : background .2s, color .2s, border-color .2s;
    white-space     : nowrap;
    line-height     : 1 !important;
}
.alq-order-btn svg {
    width      : .9rem;
    height     : .9rem;
    flex-shrink: 0;
}

/* WhatsApp — specificity 0-2-1 beats global .woocommerce a.button 0-1-1 */
.woocommerce a.button.alq-wa-btn,
.woocommerce .alq-wa-btn {
    background : var(--alq-whatsapp, #25d366) !important;
    color      : #fff !important;
    border     : 2px solid var(--alq-whatsapp, #25d366) !important;
}
.woocommerce a.button.alq-wa-btn:hover,
.woocommerce .alq-wa-btn:hover {
    background  : var(--alq-whatsapp-dark, #1ebe5d) !important;
    border-color: var(--alq-whatsapp-dark, #1ebe5d) !important;
    color       : #fff !important;
}

/* Messenger — official purple-blue gradient */
.woocommerce a.button.alq-msg-btn,
.woocommerce .alq-msg-btn {
    background : linear-gradient(135deg, var(--alq-messenger, #0084ff) 0%, var(--alq-messenger-end, #7b00ff) 100%) !important;
    color      : #fff !important;
    border     : 2px solid var(--alq-messenger, #0084ff) !important;
}
.woocommerce a.button.alq-msg-btn:hover,
.woocommerce .alq-msg-btn:hover {
    background : linear-gradient(135deg, #006ae0 0%, #6200d6 100%) !important;
    border-color: #006ae0 !important;
    color      : #fff !important;
}

/* Order buttons always stay side-by-side — no stacking even on narrow screens */

/* Product meta (SKU, category) */
.woocommerce div.product.type-product .product_meta {
    font-size: .8rem;
    color: var(--alq-wc-muted);
    margin-top: 1rem;
    border-top: 1px solid var(--alq-wc-border);
    padding-top: .75rem;
}
/* Only direct children → prevents inner .sku span from becoming block (two-line SKU bug) */
.woocommerce div.product.type-product .product_meta > span { display: block; margin-bottom: .2rem; }
.woocommerce div.product.type-product .product_meta a {
    color: var(--alq-accent, #b8912a);
    text-decoration: none;
}
.woocommerce div.product.type-product .product_meta a:hover { text-decoration: underline; }

/* Variable product — variation swatches */
.woocommerce div.product.type-product table.variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: .5rem;
}
.woocommerce div.product.type-product table.variations th { font-size: .85rem; font-weight: 600; padding: .4rem .5rem .4rem 0; }
/* Native select — shown only when JS hasn't run yet or swatches plugin is active */
.woocommerce div.product.type-product table.variations td select {
    width: 100%;
    border: 1.5px solid var(--alq-wc-border);
    border-radius: 5px;
    padding: .38rem .7rem;
    font-size: .88rem;
    color: var(--alq-primary, #0f172a);
    background: #fff;
}
.woocommerce div.product.type-product table.variations td select:focus {
    border-color: var(--alq-accent, #b8912a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}

/* JS hides the select once buttons are built */
.woocommerce div.product.type-product table.variations td select.alq-var-select-hidden {
    display: none !important;
}

/* ── Button group ── */
.alq-var-btn-group {
    display  : flex;
    flex-wrap: wrap;
    gap      : .4rem;
    margin-top: .25rem;
}

.alq-var-btn {
    padding      : .3rem .75rem;
    font-size    : .82rem;
    font-weight  : 500;
    color        : var(--alq-primary, #0f172a);
    background   : #fff;
    border       : 1.5px solid var(--alq-wc-border);
    border-radius: 5px;
    cursor       : pointer;
    transition   : border-color .18s, background .18s, color .18s;
    line-height  : 1.4;
    white-space  : nowrap;
}
.alq-var-btn:hover:not(.disabled):not(.selected) {
    border-color : var(--alq-accent, #b8912a);
    color        : var(--alq-accent, #b8912a);
}
.alq-var-btn.selected {
    border-color : var(--alq-accent, #b8912a);
    background   : var(--alq-accent, #b8912a);
    color        : #fff;
}
.alq-var-btn.selected:hover {
    /* Stay legible on hover: keep white text on the accent background
       instead of falling back to the plain hover state's accent-on-accent
       text, which made the label invisible (bug found while live-testing
       the ThemeHigh Variation Swatches plugin fallback path). */
    color: #fff;
}
.alq-var-btn.disabled {
    opacity: .4;
    cursor : not-allowed;
    text-decoration: line-through;
}
.woocommerce div.product.type-product .reset_variations {
    font-size: .78rem;
    color: var(--alq-wc-muted);
    text-decoration: none;
    display: block;
}
.woocommerce div.product.type-product .reset_variations:hover { color: var(--alq-accent, #b8912a); }

/* WC hides this link via visibility:hidden (not display:none), keeping it in the
   flex flow and pushing the Add to Cart button to the right. Remove from flow
   entirely when hidden — display:none[style*="hidden"] works because WC switches
   the inline style to "visibility: visible" (no "hidden") when it shows the link. */
.woocommerce div.product.type-product .reset_variations[style*="hidden"] {
    display: none !important;
}

/* Badge stack on the single product gallery — position comes from
   .alq-badge-stack in custom.css (top-LEFT, shared everywhere); this only
   bumps the inset and badge text size to suit the bigger gallery image
   (vs. the smaller shop-loop card). Deliberately left-side: WooCommerce's
   own .woocommerce-product-gallery__trigger (the full-screen zoom button)
   lives top-RIGHT, so keeping every badge on the left avoids that
   collision entirely rather than working around it. */
.woocommerce-product-gallery__wrapper .alq-badge-stack {
    top  : .75rem;
    left : .75rem;
}
.woocommerce-product-gallery__wrapper .alq-pw-sale-badge,
.woocommerce-product-gallery__wrapper .alq-new-badge {
    font-size: .74rem;
    padding  : .4rem .85rem;
}

/* Some plugins (e.g. variation-swatches) wrap the entire form.cart content
   inside an anonymous <div> with no class/id. When that div is the ONLY
   direct child of form.cart, our flex layout collapses to content-width.
   :only-child targets it precisely; after the plugin is removed the form
   has multiple children (table + div.single_variation_wrap) so this rule
   no longer matches — completely harmless. */
.woocommerce div.product.type-product form.cart.variations_form > div:only-child {
    flex  : 0 0 100% !important;
    width : 100%     !important;
}

/* Reduce gap between variation selects and Add to Cart button.
   WC JS sets min-height on .single_variation_wrap to prevent layout jumps —
   override with !important so the wrap collapses when empty. */
.woocommerce div.product.type-product .single_variation_wrap              { min-height: 0 !important; }
.woocommerce div.product.type-product .woocommerce-variation              { min-height: 0 !important; }
/* Variable product button row — same flex row as simple product form.cart.
   width:100% is explicit so the row fills the available space regardless of
   what parent structure a swatches plugin may have added or changed. */
.woocommerce div.product.type-product .woocommerce-variation-add-to-cart {
    display    : flex !important;
    flex-wrap  : nowrap !important;
    width      : 100% !important;
    gap        : .75rem;
    align-items: center;
    margin-top : .75rem !important;
}

/* When no variation is selected, the qty input is display:none but the qty
   wrapper (display:flex) still occupies ~2px as a flex item, pushing the
   Add to Cart button 6px to the right. Remove it from flex flow when disabled. */
.woocommerce div.product.type-product .woocommerce-variation-add-to-cart-disabled .quantity {
    display: none !important;
}
.woocommerce div.product.type-product .woocommerce-variation-description  { font-size: .85rem; margin-bottom: .25rem; }
.woocommerce div.product.type-product table.variations                    { margin-bottom: 0 !important; }


/* ── 11. Product Tabs ───────────────────────────────────────────────────── */
/* Kept in sync with .related / .upsells top margin (3rem) below — all
   full-width rows under the gallery/summary grid use the SAME top-margin
   value so every section-to-section gap reads identically. This only
   works if each row's BOTTOM margin is 0 — CSS Grid does not collapse
   margins between rows the way normal block flow does, so a non-zero
   bottom margin on one row plus a non-zero top margin on the next would
   silently double up and produce a visibly bigger gap at that one
   junction. */
.woocommerce div.product.type-product .woocommerce-tabs { margin-top: 3rem; }

.woocommerce div.product.type-product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--alq-wc-border);
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex-wrap: wrap;
}
.woocommerce div.product.type-product .woocommerce-tabs ul.tabs li {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
}
.woocommerce div.product.type-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: .65rem 1.25rem .65rem .1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--alq-wc-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}
.woocommerce div.product.type-product .woocommerce-tabs ul.tabs li a:hover { color: var(--alq-accent, #b8912a); }
.woocommerce div.product.type-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--alq-accent, #b8912a);
    border-bottom-color: var(--alq-accent, #b8912a);
}
.woocommerce div.product.type-product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product.type-product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product.type-product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product.type-product .woocommerce-tabs .panel {
    font-size: .9rem;
    line-height: 1.75;
    color: var(--alq-primary, #0f172a);
}
.woocommerce div.product.type-product .woocommerce-tabs .panel h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }

/* Reviews */
#reviews #comments ol.commentlist li.comment {
    padding: 1rem 0;
    border-bottom: 1px solid var(--alq-wc-border);
}
#reviews #comments ol.commentlist li.comment:last-child { border-bottom: none; }
#reviews #reply-title { font-size: 1rem; font-weight: 700; margin-top: 1.5rem; }

/* Review submit form — bordered card */
#reviews #respond,
#reviews .comment-respond {
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    padding      : 2rem !important;
    margin-top   : 1.5rem !important;
    box-shadow   : var(--alq-wc-shadow) !important;
}


/* ── 12. Related / Up-sells ─────────────────────────────────────────────── */
.woocommerce .related,
.woocommerce .upsells { margin-top: 3rem; }
.woocommerce .related h2,
.woocommerce .upsells h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--alq-wc-border);
}

/* ── 13. Cart Page ──────────────────────────────────────────────────────── */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    overflow: hidden;
}
.woocommerce-cart table.cart th,
.woocommerce table.shop_table th {
    background: var(--alq-wc-light);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--alq-wc-muted);
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--alq-wc-border);
}
.woocommerce-cart table.cart td,
.woocommerce table.shop_table td {
    padding: .85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--alq-wc-border);
    font-size: .9rem;
    color: var(--alq-primary, #0f172a);
}
.woocommerce-cart table.cart tr:last-child td { border-bottom: none; }

/* Cart product image */
.woocommerce-cart table.cart td.product-thumbnail img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--alq-wc-border);
}

/* Product name + price cells — extra padding for breathing room */
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
    padding: 1rem 1.25rem;
}

/* Cart product name */
.woocommerce-cart table.cart td.product-name a {
    color: var(--alq-primary, #0f172a);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--alq-accent, #b8912a); }
.woocommerce-cart table.cart td.product-subtotal { font-weight: 700; color: var(--alq-accent, #b8912a); }

/* Cart quantity input */
.woocommerce-cart table.cart .quantity .qty {
    width: 60px;
    text-align: center;
    border: 1.5px solid var(--alq-wc-border);
    border-radius: 5px;
    padding: .3rem .5rem;
    font-size: .9rem;
}

/* Remove item X */
.woocommerce-cart table.cart td .remove {
    color: var(--alq-wc-muted) !important;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: background .2s, color .2s;
}
.woocommerce-cart table.cart td .remove:hover {
    background: var(--alq-wc-error);
    color: #fff !important;
}

/* Coupon form */
.woocommerce-cart .coupon {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}
.woocommerce-cart .coupon #coupon_code {
    border: 1.5px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    padding: .5rem .85rem;
    font-size: .88rem;
    height: 40px;
    flex: 1 1 180px;
}
.woocommerce-cart .coupon #coupon_code:focus {
    border-color: var(--alq-accent, #b8912a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}
/* Apply Coupon — filled accent, matches global WC button style */
.woocommerce-cart .coupon button[name="apply_coupon"] {
    background: var(--alq-accent, #b8912a) !important;
    border: none;
    color: #fff !important;
    border-radius: var(--alq-wc-radius);
    height: 40px;
    padding: 0 1.1rem;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.woocommerce-cart .coupon button[name="apply_coupon"]:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}

/* Update cart — ghost/secondary (disabled by default until qty changes) */
button[name="update_cart"] {
    background: transparent;
    border: 1.5px solid var(--alq-wc-border);
    color: var(--alq-wc-muted);
    border-radius: var(--alq-wc-radius);
    height: 40px;
    padding: 0 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
button[name="update_cart"]:not([disabled]):hover {
    border-color: var(--alq-accent, #b8912a);
    color: var(--alq-accent, #b8912a);
}

/* Cart actions row (coupon + update cart) */
.woocommerce-cart table.cart td.actions {
    padding: 1rem 1.25rem;
    background: var(--alq-wc-light);
}

/* Cart-page cross-sells show/hide is handled entirely in PHP (see
   alqamara_cart_cross_sells in inc/woocommerce.php) — a `wp_head` style
   tag targets the native block's real wrapper class
   (`.wp-block-woocommerce-product-collection`) only when the Customizer
   toggle is off.
   ─────────────────────────────────────────────────────────────────────
   Card design below: this native "Product Collection" block renders its
   own WooCommerce block markup (Product Image / Title / Price / Button
   blocks) — a completely different DOM shape from the theme's own
   content-product.php shop-loop card (`.alq-pw-card`), so none of that
   card's CSS (or the badge system, which hooks the classic
   woocommerce_product_thumbnails action that this block never fires)
   reaches it automatically. Restyled here to visually match the shop
   card's language (white bg, bordered, rounded corners, hover lift,
   accent-colored price) without touching WooCommerce's own block markup.
   Scoped to the Cart page so it can't affect a Product Collection block
   used anywhere else on the site. */
body.woocommerce-cart .wp-block-woocommerce-product-collection > h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    margin: 3rem 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--alq-wc-border);
}
body.woocommerce-cart .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection li.wc-block-product {
    display        : flex;
    flex-direction : column;
    margin         : 0;
    padding        : 1rem;
    list-style     : none;
    background     : #fff;
    border         : 1px solid var(--alq-wc-border);
    border-radius  : var(--alq-wc-radius);
    transition     : box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection li.wc-block-product:hover {
    box-shadow   : 0 8px 28px rgba(0,0,0,.1);
    transform    : translateY(-3px);
    border-color : var(--alq-accent, #b8912a);
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: .75rem;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-sale-badge {
    position: absolute;
    top     : .5rem;
    left    : .5rem;
    z-index : 2;
}
/* The actual visible pill is nested one level deeper
   (.wc-block-components-product-sale-badge, with its own "alignright"
   positioning/box model that fights a plain background/color override on
   the wrapper above) — style and reposition IT directly. */
body.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge {
    position       : static !important;
    width          : auto !important;
    height         : auto !important;
    min-width      : 0 !important;
    min-height     : 0 !important;
    background     : var(--alq-accent, #b8912a) !important;
    color          : #fff !important;
    border         : none !important;
    border-radius  : 999px !important;
    padding        : .25rem .6rem !important;
    line-height    : 1 !important;
    font-size      : .64rem !important;
    font-weight    : 700 !important;
    letter-spacing : .02em;
    text-transform : uppercase;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge__text {
    color: #fff !important;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image img {
    transition: transform .4s ease;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection li.wc-block-product:hover .wc-block-components-product-image img {
    transform: scale(1.04);
}
body.woocommerce-cart .wp-block-woocommerce-product-collection h2.wp-block-post-title {
    font-size   : .92rem;
    font-weight : 700;
    color       : var(--alq-primary, #0f172a);
    line-height : 1.4;
    margin      : 0 0 .35rem;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection h2.wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection h2.wp-block-post-title a:hover {
    color: var(--alq-accent, #b8912a);
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
    font-size: .84rem;
    margin: 0 0 .75rem;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .woocommerce-Price-amount {
    font-weight: 600;
    color: #64748b;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price del { color: #9ca3af; }
body.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price ins {
    text-decoration: none;
    color: var(--alq-accent, #b8912a);
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button {
    margin-top: auto;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button__button {
    width         : 100% !important;
    background    : var(--alq-accent, #b8912a) !important;
    color         : #fff !important;
    border        : none !important;
    border-radius : 5px !important;
    font-size     : .82rem !important;
    font-weight   : 600 !important;
    padding       : .5rem .9rem !important;
}
body.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button__button:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}
@media (max-width: 767.98px) {
    body.woocommerce-cart .wp-block-woocommerce-product-collection ul.wc-block-product-template {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ── 23a-ii. Cart cross-sells: different position on desktop vs. mobile ──
   The Cart page (post ID 73) now has TWO copies of this same cross-sells
   Product Collection block in its content (see PROGRESS.md, "Follow-up
   round 2", task 44):
     - `.alq-cart-cross-desktop` — nested inside the cart's main/items
       column (its original, pre-task-42 position). On desktop this renders
       as a narrower block sitting below the cart table, beside the sticky
       totals/checkout sidebar — the look the user preferred on desktop.
     - `.alq-cart-cross-mobile` — a root-level block, after the ENTIRE cart
       block (main column + sidebar together). This is the task-42 fix:
       needed so cross-sells doesn't visually wedge itself between the cart
       items and the totals/"Proceed to Checkout" button once the columns
       stack on narrow screens (the exact confusion the user reported).
   Only one copy is ever visible at a time. The breakpoint below matches the
   SAME 700px breakpoint the cart's own main/sidebar columns switch at
   (section 23a-i below), so the swap always happens exactly when the
   layout itself changes from side-by-side to stacked — never a mismatch
   where both or neither copy shows. The Customizer "Show Cross-sells"
   toggle (`alqamara_cart_cross_sells`, wp_head style in inc/woocommerce.php)
   still hides BOTH copies at once when off, since it targets the shared
   `.wp-block-woocommerce-product-collection` class both copies carry. */
@media (max-width: 699.98px) {
    body.woocommerce-cart .alq-cart-cross-desktop { display: none !important; }
}
@media (min-width: 700px) {
    body.woocommerce-cart .alq-cart-cross-mobile { display: none !important; }
}

/* Cart totals box */
.cart_totals {
    background: var(--alq-wc-light);
    border: 1px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    padding: 1.5rem;
}
.cart_totals h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--alq-wc-border);
    color: var(--alq-primary, #0f172a);
}
.cart_totals table { width: 100%; }
.cart_totals table th,
.cart_totals table td { padding: .6rem 0; font-size: .9rem; }
.cart_totals table th { font-weight: 600; color: var(--alq-wc-muted); width: 45%; }
.cart_totals table .order-total td { font-size: 1.1rem; font-weight: 700; color: var(--alq-primary, #0f172a); }
.cart_totals table .order-total th { font-size: .95rem; font-weight: 700; }
.cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    padding: .75rem 1.5rem;
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--alq-wc-radius);
    text-align: center;
    text-decoration: none;
    margin-top: 1rem;
    transition: background .2s;
    border: none;
}
.cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--alq-primary, #0f172a) !important;
}

/* Empty cart page */
.alq-empty-cart { max-width: 480px; margin: 0 auto; }
.alq-empty-cart-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    margin-bottom: .5rem;
}
.alq-empty-cart-msg {
    font-size: .95rem;
    color: var(--alq-wc-muted, #64748b);
    margin-bottom: 0;
}

/* Continue Shopping / Return to Shop button */
.return-to-shop .button,
.woocommerce a.button.wc-backward {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 42px;
    padding: 0 2rem;
    font-size: .95rem;
    font-weight: 700;
}
.return-to-shop .button::before {
    content: '\2190'; /* ← arrow */
    font-size: 1.1rem;
    line-height: 1;
}


/* ── 14. Checkout Page ──────────────────────────────────────────────────── */
.woocommerce-checkout #customer_details { margin-bottom: 1.5rem; }
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--alq-wc-border);
    margin-bottom: 1.25rem;
}

/* Checkout form fields */
.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--alq-primary, #0f172a);
    margin-bottom: .3rem;
    display: block;
}
.woocommerce form .form-row label .required { color: var(--alq-wc-error); margin-left: .15rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    border: 1.5px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    padding: .5rem .85rem;
    font-size: .9rem;
    color: var(--alq-primary, #0f172a);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--alq-accent, #b8912a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}

/* Checkout: additional notes */
.woocommerce-additional-fields h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    margin-bottom: 1rem;
}

/* Order review table */
#order_review table.shop_table { margin-bottom: 1.25rem; }
#order_review table.shop_table tfoot tr td { font-weight: 700; }
#order_review table.shop_table .order-total td,
#order_review table.shop_table .order-total th { font-size: 1rem; color: var(--alq-accent, #b8912a); }

/* Payment methods */
.woocommerce-checkout #payment {
    background: var(--alq-wc-light);
    border: 1px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    padding: 1.25rem;
}
.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods li {
    border-bottom: 1px solid var(--alq-wc-border);
    padding: .6rem 0;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #payment ul.payment_methods label {
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    margin-left: .4rem;
}
.woocommerce-checkout #payment .payment_box {
    background: #fff;
    border: 1px solid var(--alq-wc-border);
    border-radius: 5px;
    padding: .75rem;
    font-size: .85rem;
    color: var(--alq-wc-muted);
    margin-top: .4rem;
}

/* Place order button */
.woocommerce-checkout #payment #place_order,
#payment #place_order {
    display: block;
    width: 100%;
    padding: .85rem 1.5rem;
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
    border-radius: var(--alq-wc-radius);
    cursor: pointer;
    transition: background .2s;
    text-align: center;
}
.woocommerce-checkout #payment #place_order:hover {
    background: var(--alq-primary, #0f172a) !important;
}

/* Checkbox (ship to different address, terms) */
.woocommerce-checkout .woocommerce-form__input-checkbox { margin-right: .4rem; }


/* ── 15. WC Buttons (global) ────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none;
    border-radius: var(--alq-wc-radius);
    padding: .5rem 1.2rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    text-decoration: none;
    display: inline-block;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
    color: #fff !important;
}
.woocommerce a.button.disabled,
.woocommerce button.button.disabled { opacity: .55; cursor: not-allowed; }

/* Review submit — same size as Add to Cart (form.cart .button rule doesn't apply here) */
.woocommerce #respond input#submit.button {
    height     : 42px !important;
    padding    : 0 1.6rem !important;
    font-size  : .9rem !important;
    font-weight: 700 !important;
}


/* ── 16. Form Fields (global) ───────────────────────────────────────────── */
.woocommerce .quantity .qty {
    border: 1.5px solid var(--alq-wc-border);
    border-radius: 5px;
    padding: .4rem .6rem;
    font-size: .9rem;
    color: var(--alq-primary, #0f172a);
    background: #fff;
    width: 60px;
    text-align: center;
}
.woocommerce .quantity .qty:focus {
    border-color: var(--alq-accent, #b8912a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}


/* ── 17. Mini Cart (inside .alq-cart-drawer) ────────────────────────────── */
.alq-cart-drawer-body .widget_shopping_cart_content { padding: 0; }
.alq-cart-drawer-body .woocommerce-mini-cart {
    list-style: none;
    padding: 0;
    margin: 0;
}
.alq-cart-drawer-body .woocommerce-mini-cart__item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 0;
    border-bottom: 1px solid var(--alq-wc-border);
}
.alq-cart-drawer-body .woocommerce-mini-cart__item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--alq-wc-border);
    flex-shrink: 0;
}
.alq-cart-drawer-body .woocommerce-mini-cart__item a {
    font-size: .88rem;
    font-weight: 600;
    color: var(--alq-primary, #0f172a);
    text-decoration: none;
    line-height: 1.35;
}
.alq-cart-drawer-body .woocommerce-mini-cart__item a:hover { color: var(--alq-accent, #b8912a); }
.alq-cart-drawer-body .woocommerce-mini-cart__item .quantity {
    font-size: .8rem;
    color: var(--alq-wc-muted);
    margin-top: .2rem;
    display: block;
}
.alq-cart-drawer-body .woocommerce-mini-cart__item .remove {
    color: var(--alq-wc-muted) !important;
    font-size: 1rem;
    text-decoration: none;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    transition: color .2s;
}
.alq-cart-drawer-body .woocommerce-mini-cart__item .remove:hover { color: var(--alq-wc-error) !important; }

/* Drawer totals */
.alq-cart-drawer-body .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    padding: .85rem 0 1rem;
}
.alq-cart-drawer-body .woocommerce-mini-cart__total .amount { color: var(--alq-accent, #b8912a); }

/* Drawer buttons — layout only; colors handled in custom.css (.alq-cart-drawer) */
.alq-cart-drawer-body .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Empty cart notice in drawer */
.alq-cart-drawer-body .woocommerce-mini-cart--empty {
    text-align: center;
    color: var(--alq-wc-muted);
    font-size: .9rem;
    padding: 2rem 0;
}


/* ── 18. WC Widgets ─────────────────────────────────────────────────────── */

/* Product Search */
.widget_product_search .woocommerce-product-search {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    overflow: hidden;
}
.widget_product_search .woocommerce-product-search .search-field {
    flex: 1;
    border: none;
    padding: .5rem .85rem;
    font-size: .88rem;
    color: var(--alq-primary, #0f172a);
    outline: none;
}
.widget_product_search .woocommerce-product-search button[type="submit"] {
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none;
    padding: .5rem .85rem;
    cursor: pointer;
    font-size: .9rem;
    transition: background .2s;
}
.widget_product_search .woocommerce-product-search button[type="submit"]:hover {
    background: var(--alq-primary, #0f172a) !important;
}

/* Product Categories */
.widget_product_categories ul,
.woocommerce-widget-layered-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget_product_categories ul li,
.woocommerce-widget-layered-nav ul li {
    padding: .3rem 0;
    border-bottom: 1px solid var(--alq-wc-border);
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.widget_product_categories ul li:last-child,
.woocommerce-widget-layered-nav ul li:last-child { border-bottom: none; }
.widget_product_categories ul li a,
.woocommerce-widget-layered-nav ul li a {
    color: var(--alq-primary, #0f172a);
    text-decoration: none;
    transition: color .2s;
}
.widget_product_categories ul li a:hover,
.woocommerce-widget-layered-nav ul li a:hover { color: var(--alq-accent, #b8912a); }
.widget_product_categories ul li .count,
.woocommerce-widget-layered-nav ul li .count {
    font-size: .75rem;
    color: var(--alq-wc-muted);
    background: var(--alq-wc-light);
    border-radius: 99px;
    padding: .1rem .5rem;
}

/* Price Filter */
.widget_price_filter .price_slider_wrapper { padding: .5rem 0 1rem; }
.widget_price_filter .ui-slider {
    background: var(--alq-wc-border);
    border-radius: 99px;
    height: 4px;
    margin: 1rem 0;
    position: relative;
}
.widget_price_filter .ui-slider-range {
    background   : var(--alq-accent, #b8912a) !important;
    height       : 100%;
    border-radius: 99px;
    position     : absolute;
}
.widget_price_filter .ui-slider-handle {
    width        : 14px !important;
    height       : 14px !important;
    background   : var(--alq-accent, #b8912a) !important;
    border-radius: 50% !important;
    border       : 2px solid #fff !important;
    box-shadow   : 0 1px 4px rgba(0,0,0,.2) !important;
    top          : -5px;
    cursor       : grab;
    position     : absolute;
}
.widget_price_filter .ui-slider-handle:active { cursor: grabbing; }

/* ── Rating filter — star color (classic widget) ───────────────────────────── */
.widget_rating_filter .star-rating,
.widget_rating_filter .star-rating::before,
.widget_rating_filter .star-rating span::before {
    color : var(--alq-accent, #b8912a) !important;
}

/* ── WC Blocks: Price Slider range color ────────────────────────────────────
   .range-bar uses background: linear-gradient(... currentColor ...).
   Setting `color` on .range-bar changes what currentColor resolves to.        */
.wc-block-product-filter-price-slider .range-bar {
    color : var(--alq-accent, #b8912a) !important;
}

/* ── WC Blocks: Price Slider — fix truncation & right-align max input ───────
   WC Blocks hardcodes a 60px max-width on text inputs, clipping values like
   "1,00,000 BDT". Fix: override to 110px side columns (handles up to ~1 lakh)
   and remove the 60px max-width cap. Middle 1fr keeps slider spacing.       */
.wc-block-product-filter-price-slider__content {
    grid-template-columns : 88px 1fr 88px !important;
}
.wc-block-product-filter-price-slider__left.text,
.wc-block-product-filter-price-slider__right.text {
    width : 100% !important;
}
.wc-block-product-filter-price-slider__left.text input,
.wc-block-product-filter-price-slider__right.text input {
    max-width : none !important;
    width     : 100% !important;
}
.wc-block-product-filter-price-slider__right.text input {
    text-align : right !important;
}

/* ── WC Blocks: Rating Filter star SVG ──────────────────────────────────────
   Stars are SVG icons inside the checkbox list text; fill = currentColor.     */
.wc-block-product-filter-checkbox-list__text svg,
.wc-block-product-filter-checkbox-list__text-wrapper svg {
    fill  : var(--alq-accent, #b8912a) !important;
    color : var(--alq-accent, #b8912a) !important;
}

/* ── Sidebar block-widget headings (Gutenberg widget editor) ──────────────── */
.alq-shop-sidebar .widget_block h1,
.alq-shop-sidebar .widget_block h2,
.alq-shop-sidebar .widget_block h3,
.alq-shop-sidebar .widget_block h4 {
    font-size     : .82rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color         : var(--alq-primary, #0f172a);
    margin-bottom : .75rem;
    padding       : 0;
    border        : none;
    line-height   : 1.4;
}
.widget_price_filter .price_slider_amount { display: flex; justify-content: space-between; align-items: center; }
.widget_price_filter .price_slider_amount .price_label { font-size: .82rem; color: var(--alq-wc-muted); }
.widget_price_filter .price_slider_amount button {
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none;
    border-radius: 5px;
    padding: .3rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

/* =============================================================================
   WC FILTER BLOCK — Theme-color variables
   Override WC's own CSS custom properties so all filter block elements
   automatically use the theme accent colour without per-element overrides.
   NOTE: WC's actual chip variables are --wc-product-filter-removable-chips-*
   (set on the chips wrapper, not the outer filters block).
============================================================================= */
.wc-block-product-filter-removable-chips {
    --wc-product-filter-removable-chips-background : var(--alq-accent, #b8912a);
    --wc-product-filter-removable-chips-text       : #fff;
    --wc-product-filter-removable-chips-border     : var(--alq-accent, #b8912a);
}

/* =============================================================================
   WC FILTER BLOCK — General checkbox items
   (Rating, Taxonomy/Category, Status/Stock — all use the same class structure)
============================================================================= */
.wc-block-product-filter-checkbox-list__items {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.wc-block-product-filter-checkbox-list__label {
    display     : flex;
    align-items : center;
    gap         : .55rem;
    cursor      : pointer;
    font-size   : .875rem;
    color       : var(--alq-primary, #0f172a);
    padding     : .25rem 0;
    user-select : none;
}
/* Checkbox box — unchecked state kept a bit more defined than a barely-
   visible pale-grey outline (--alq-wc-border resolves close to white-on-
   white), and gets a gentle hover state so it reads as an interactive
   control before it's ever clicked, not just a flat static square. */
.wc-block-product-filter-checkbox-list__input-wrapper {
    position    : relative;   /* containing block for the hidden native input below */
    width       : 17px;
    height      : 17px;
    flex-shrink : 0;
    border      : 1.5px solid #b9bfc9;
    border-radius: 4px;
    background  : #fff;
    display     : flex;
    align-items : center;
    justify-content: center;
    transition  : background .15s, border-color .15s, box-shadow .15s;
}
.wc-block-product-filter-checkbox-list__item:hover
.wc-block-product-filter-checkbox-list__input-wrapper {
    border-color: var(--alq-accent, #b8912a);
}
/* WooCommerce's own CSS always paints a faint ::before tint inside the box
   (background:currentColor at 10% opacity) — that's the "ash/grey, not
   really white" centre being reported. WC only turns it off when a
   ".has-option-element-color" class is present (set via the block editor's
   own colour picker for this block), which our markup never has since we
   style this box entirely ourselves. Turning it off unconditionally here
   instead, so the inside of an unchecked box is genuinely plain white. */
.wc-block-product-filter-checkbox-list__input-wrapper::before {
    display: none !important;
}
/* The real <input> WooCommerce renders inside the wrapper only looks
   invisible by accident — its own default background/border are
   "transparent" (WC's own CSS), which happens to blend in on a plain white
   page but isn't actually hidden, isn't guaranteed to render identically
   across browsers/OS dark-mode or forced-colour settings, and its 1em box
   doesn't perfectly fill our 18px wrapper (leaving faint mismatched edges
   — this was the "box isn't fully white" / "looks a bit off" look).
   Explicitly hiding it (fully transparent, stretched to cover the whole
   wrapper) and letting only our own styled box + the checkmark svg be
   visible is the standard, reliable way to build a custom checkbox — the
   input stays there and stays clickable, it just never paints anything
   itself. */
.wc-block-product-filter-checkbox-list__input {
    position: absolute;
    inset   : 0;
    width   : 100%;
    height  : 100%;
    margin  : 0;
    opacity : 0;
    cursor  : pointer;
}
/* Checked state — box fills with accent */
.wc-block-product-filter-checkbox-list__item:has(input:checked)
.wc-block-product-filter-checkbox-list__input-wrapper {
    background   : var(--alq-accent, #b8912a);
    border-color : var(--alq-accent, #b8912a);
}
/* SVG checkmark colour (WC renders it inside the wrapper) */
.wc-block-product-filter-checkbox-list__input-wrapper svg {
    position: relative;   /* sit above the absolutely-positioned input */
    width  : 12px;
    height : 12px;
    color  : #fff;
    fill   : #fff;
}

/* =============================================================================
   WC FILTER BLOCK — Attribute filter → SIZE pill/chip style
   Converts the standard checkbox list into horizontal pill buttons so that
   values like "L", "M", "XL" look like interactive size selectors.
============================================================================= */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__items {
    flex-direction : row;
    flex-wrap      : wrap;
    gap            : .45rem;
}
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item { flex: none; }

.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__label {
    padding         : .3rem .9rem;
    border          : 1.5px solid var(--alq-wc-border, #e2e8f0);
    border-radius   : 10px;
    font-size       : .82rem;
    font-weight     : 600;
    min-width       : 2.5rem;
    justify-content : center;
    background      : transparent;
    transition      : border-color .15s, background .15s, color .15s;
}
/* Hide the checkbox box inside the pill */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__input-wrapper { display: none; }

/* Hover */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__label:hover {
    border-color : var(--alq-accent, #b8912a);
    color        : var(--alq-accent, #b8912a);
}
/* Selected pill */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item:has(input:checked)
.wc-block-product-filter-checkbox-list__label {
    background   : var(--alq-accent, #b8912a);
    border-color : var(--alq-accent, #b8912a);
    color        : #fff;
}

/* =============================================================================
   WC FILTER BLOCK — Colour swatches in attribute filter
   Injected by alq-filter-apply.js when the term is a colour.
   Works with any swatch plugin OR with standard CSS colour names.
============================================================================= */

/* ── Option B: circles-only, text hidden ────────────────────────────────
   Items with a swatch lose the pill border and show only the coloured
   circle. Text is visually hidden (kept in DOM for screen readers via
   title attribute on the swatch itself).                                    */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item.alq-has-swatch
.wc-block-product-filter-checkbox-list__label {
    padding      : .25rem !important;
    min-width    : auto !important;
    border-color : transparent !important;
    background   : transparent !important;
    gap          : 0;
}
/* Hide border/background on hover too — only the circle reacts */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item.alq-has-swatch
.wc-block-product-filter-checkbox-list__label:hover {
    border-color : transparent !important;
    color        : inherit !important;
    background   : transparent !important;
}
/* Hide the text label — swatch title attr provides tooltip */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item.alq-has-swatch
.wc-block-product-filter-checkbox-list__text-wrapper,
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item.alq-has-swatch
.wc-block-product-filter-checkbox-list__text {
    display : none !important;
}

/* The coloured circle — larger now that it stands alone */
.alq-color-swatch {
    width         : 30px;
    height        : 30px;
    border-radius : 50%;
    flex-shrink   : 0;
    display       : inline-block;
    border        : 2.5px solid rgba(255,255,255,.9);
    box-shadow    : 0 0 0 1.5px rgba(0,0,0,.2);
    cursor        : pointer;
    transition    : box-shadow .15s, transform .15s;
}
/* Hover: subtle lift */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item.alq-has-swatch
.wc-block-product-filter-checkbox-list__label:hover
.alq-color-swatch {
    transform  : scale(1.1);
    box-shadow : 0 0 0 2px rgba(0,0,0,.25);
}
/* Selected: gold ring */
.wp-block-woocommerce-product-filter-attribute
.wc-block-product-filter-checkbox-list__item.alq-has-swatch:has(input:checked)
.alq-color-swatch {
    box-shadow   : 0 0 0 3px var(--alq-accent, #b8912a);
    border-color : #fff;
    transform    : scale(1.08);
}

/* =============================================================================
   WC FILTER BLOCK — Active filter chips (removable)
   WP Interactivity renders <li> items inside the template when filters are
   active. Each chip shows the filter label + a remove (×) button.
============================================================================= */
.wc-block-product-filter-removable-chips__items {
    display   : flex;
    flex-wrap : wrap;
    gap       : .4rem;
    list-style: none;
    padding   : 0;
    margin    : 0 0 .75rem;
}
/* background & color come from --wc-product-filter-removable-chips-* variables above;
   only override layout / border-radius (WC hardcodes 2px) here */
.wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
    border-radius : 100px !important;
    padding       : .22rem .5rem .22rem .75rem;
    font-size     : .78rem;
    font-weight   : 600;
    line-height   : 1.4;
}
.wc-block-product-filter-removable-chips__remove {
    background  : none;
    border      : none;
    padding     : 0;
    cursor      : pointer;
    display     : inline-flex;
    align-items : center;
    justify-content: center;
    color       : rgba(255,255,255,.75);
    border-radius: 50%;
    width       : 18px;
    height      : 18px;
    transition  : background .15s, color .15s;
}
.wc-block-product-filter-removable-chips__remove:hover {
    background : rgba(0,0,0,.15);
    color      : #fff;
}
.wc-block-product-filter-removable-chips__remove-icon {
    width  : 14px !important;
    height : 14px !important;
}

/* ── "Clear filters" button ───────────────────────────────────────────────
   Bootstrap's reboot ships a bare `button{border-radius:0}` reset. WordPress
   prints its own default button-block look wrapped in :where(...) — zero
   specificity, by design, so themes can override it — which means Bootstrap's
   plain-element rule was winning instead, flattening this into an unstyled
   black rectangle. Restyled here to match the chip pills above (rounded,
   theme-coloured outline) instead of fighting Bootstrap on specificity.

   The block editor ALSO prints a per-instance INLINE style on this exact
   button (border-width/padding), since the "Clear filters" block has its
   own saved style attributes — inline styles normally beat any stylesheet
   rule regardless of specificity, so a plain declaration here would only
   win sometimes depending on which value happens to match. `!important` is
   used deliberately on every property below so this button's look is fully
   deterministic — no more depending on selector order, inline styles, or
   whatever else loads after this file. */
.wc-block-product-filter-clear-button {
    display   : block !important;
    width     : 100% !important;
    margin-top: .6rem !important;
}
.wc-block-product-filter-clear-button .wp-block-button__link {
    display        : inline-flex !important;
    align-items    : center !important;
    justify-content: center !important;
    width          : 100% !important;
    background     : transparent !important;
    color          : var(--alq-accent, #b8912a) !important;
    border         : 1px solid var(--alq-accent, #b8912a) !important;
    border-radius  : 10px !important;
    padding        : .4rem 1rem !important;
    font-size      : .82rem !important;
    font-weight    : 600 !important;
    line-height    : 1.4 !important;
    text-decoration: none !important;
    cursor         : pointer !important;
    transition     : background .15s, color .15s !important;
}
.wc-block-product-filter-clear-button .wp-block-button__link:hover {
    background : var(--alq-accent, #b8912a) !important;
    color      : #fff !important;
}

/* ── Custom price-filter Apply button (alq-filter-apply.js) ─────────────── */
.alq-price-apply-btn {
    display       : none;          /* shown via JS only after slider moves */
    width         : 100%;
    background    : var(--alq-accent, #b8912a);
    color         : #fff;
    border        : none;
    border-radius : 5px;
    padding       : .45rem 1rem;
    font-size     : .82rem;
    font-weight   : 600;
    cursor        : pointer;
    margin-top    : .6rem;
    letter-spacing: .04em;
    transition    : background .18s, transform .1s;
}
.alq-price-apply-btn:hover  { background: var(--alq-primary, #0f172a); }
.alq-price-apply-btn:active { transform : scale(.97); }

/* =============================================================================
   MOBILE FILTER OVERLAY — left-slide drawer panel
   Mobile menu (right-side, 300px, 0.35s ease) → filter panel mirrors from LEFT.
   The full-screen overlay div acts as dark backdrop; the 300px dialog slides in.

   Stacking context fix:
     .alq-shop-sidebar { position: sticky } creates a stacking context that
     traps WC overlay's z-index:9999 below navbar (z-index:1030 in root).
     Giving the sidebar z-index:10000 when open puts it above navbar + products.
============================================================================= */
@media (max-width: 600px) {
    /* Lift sidebar stacking context above navbar + products when overlay opens.
       Also kept elevated during ".is-overlay-closing" (added by
       alq-filter-apply.js for the ~0.35s it takes the dialog below to finish
       its slide-out transition) — without this, removing "is-overlay-opened"
       immediately on close drops the z-index instantly while the panel is
       still visibly animating away, so it appears to duck BEHIND the sticky
       navbar/product grid mid-slide instead of staying on top the whole time. */
    .alq-shop-sidebar:has(.wc-block-product-filters.is-overlay-opened),
    .alq-shop-sidebar:has(.wc-block-product-filters.is-overlay-closing) {
        z-index: 10000;
    }
    .wc-block-product-filters.is-overlay-closing .wc-block-product-filters__overlay {
        z-index: 9999;
    }

    /* Background scroll lock while the drawer is open — neither WooCommerce's
       own block CSS nor its Interactivity API JS locks body scroll for this
       overlay, so without this a finger dragging over the open panel scrolls
       the product grid behind it instead of the panel itself. Toggled via
       alq-filter-apply.js (body.alq-overlay-locked). */
    body.alq-overlay-locked {
        overflow: hidden !important;
    }

    /* Full-screen overlay — top:0 covers the navbar */
    .wc-block-product-filters__overlay {
        top: 0 !important;
    }

    /* Dark backdrop — only visible while overlay is open */
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
        background-color: rgba(0, 0, 0, 0.45);
    }

    /* Dialog: convert WC's default bottom-sheet into a left-slide drawer (300px) */
    .wc-block-product-filters .wc-block-product-filters__overlay-dialog {
        position  : fixed !important;
        top       : 0 !important;
        left      : 0 !important;
        bottom    : 0 !important;
        width     : 300px !important;
        max-width : 85vw !important;   /* safety on very narrow screens */
        height    : 100% !important;
        overflow-y: auto;
        overscroll-behavior-y: contain;  /* stop scroll chaining to the page behind once this panel hits its own top/bottom */
        transform : translateX(-110%) !important;  /* hidden off left edge */
        transition: transform 0.2s ease !important;  /* was 0.35s — felt sluggish given results already updated instantly via AJAX */
        box-shadow: 5px 0 20px rgba(0, 0, 0, 0.15);
    }

    /* Slide into view when overlay opens */
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
        transform: translateX(0) !important;
    }

    /* Hide the "Apply" button — its only action is closeOverlay (same as ✕).
       alq-filter-apply.js auto-closes after every AJAX navigation anyway. */
    .wc-block-product-filters__apply {
        display: none !important;
    }
}

/* Mobile: collapse ordering to a sort icon — invisible select overlaid for native picker */
@media (max-width: 575.98px) {
    .woocommerce-ordering {
        position    : relative;
        width       : 2rem;
        height      : 2rem;
        flex-shrink : 0;
        margin-top  : 0 !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
        margin-left : auto !important; /* push icons group to the right */
    }
    .woocommerce-ordering::before {
        content        : '';
        position       : absolute;
        inset          : 0;
        z-index        : 1;
        border         : 1.5px solid var(--alq-wc-border);
        border-radius  : 5px;
        background     : #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888888' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z'/%3E%3C/svg%3E") center/1rem no-repeat;
        pointer-events : none;
    }
    .woocommerce-ordering select.orderby {
        opacity           : 0;
        position          : absolute;
        inset             : 0;
        width             : 2rem;
        height            : 2rem;
        cursor            : pointer;
        z-index           : 2;
        max-width         : none !important;
        font-size         : 16px; /* prevent iOS auto-zoom */
        -webkit-appearance: none;
        appearance        : none;
    }
}

/* ── Widget Product List (Recently Viewed / Products / Top Rated) ── */
/*
 * Uses our content-widget-product.php template override which outputs:
 * <li>
 *   <a class="alq-wpr-thumb"><img class="alq-wpr-img"></a>
 *   <div class="alq-wpr-info">
 *     <a class="alq-wpr-name">Product Name</a>
 *     <div class="alq-wpr-price">price html</div>
 *   </div>
 * </li>
 */
.widget_products ul,
.widget_recently_viewed_products ul,
.widget_top_rated_products ul {
    list-style : none;
    padding    : 0;
    margin     : 0;
}
.widget_products li,
.widget_recently_viewed_products li,
.widget_top_rated_products li {
    display       : flex !important;
    align-items   : stretch !important;
    gap           : 0;
    padding       : .6rem 0 !important;
    border-bottom : 1px solid var(--alq-wc-border);
    margin        : 0 !important;
}
.widget_products li:last-child,
.widget_recently_viewed_products li:last-child,
.widget_top_rated_products li:last-child { border-bottom: none; }

/* Thumbnail — flush left, no inherited sidebar link padding */
.alq-wpr-thumb {
    display      : block;
    flex-shrink  : 0;
    line-height  : 0;
    padding      : 0 !important;
    margin       : 0 !important;
}
.alq-wpr-img,
.widget_products li img,
.widget_recently_viewed_products li img,
.widget_top_rated_products li img {
    width         : 65px !important;
    height        : 65px !important;
    object-fit    : cover;
    border-radius : 0;
    border        : none;
    display       : block;
    float         : none !important;
    margin-left   : 0 !important;
}

/* Info column — gap from image via margin-left, not li gap */
.alq-wpr-info {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    gap            : .2rem;
    min-width      : 0;
    margin-left    : .85rem;
}
.alq-wpr-name {
    font-size       : .9rem;
    font-weight     : 500 !important;
    color           : #4b5563 !important;
    text-decoration : none !important;
    line-height     : 1.4;
    display         : block;
}
.alq-wpr-name:hover { color: var(--alq-accent, #b8912a) !important; }

/* Price */
.alq-wpr-price { font-size: .82rem; }
.alq-wpr-price ins,
.alq-wpr-price .amount,
.alq-wpr-price ins .amount {
    color           : var(--alq-accent, #b8912a);
    font-weight     : 700;
    text-decoration : none;
}
.alq-wpr-price del { opacity: .55; margin-right: .25rem; text-decoration: line-through; }
.alq-wpr-price del .amount { color: var(--alq-wc-muted); font-weight: 400; text-decoration: none; }


/* ── 19. WooCommerce Blocks (Cart Block + Checkout Block) ───────────────── */

/* ---- Proceed to Checkout (cart block) ------------------------------------ */
.wc-block-cart__submit-button.wp-element-button,
.wc-block-components-button.wc-block-cart__submit-button {
    background-color: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--alq-wc-radius) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: background .2s !important;
}
.wc-block-cart__submit-button.wp-element-button:hover,
.wc-block-components-button.wc-block-cart__submit-button:hover {
    background-color: var(--alq-accent-dark, #9a7821) !important;
}

/* ---- Place Order (checkout block) ---------------------------------------- */
.wc-block-components-checkout-place-order-button.wp-element-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
    background-color: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--alq-wc-radius) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: background .2s !important;
}
.wc-block-components-checkout-place-order-button.wp-element-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
    background-color: var(--alq-accent-dark, #9a7821) !important;
}

/* ---- Block form fields ---------------------------------------------------- */
/*
 * WC Blocks uses floating labels (position:absolute) that move to top:6px
 * when the field is active. We must NOT override padding-top too low or the
 * input value will overlap the shrunken label. Keep padding-top ≥ 1.4rem.
 */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select select {
    border        : 1.5px solid var(--alq-wc-border) !important;
    border-radius : var(--alq-wc-radius) !important;
    padding-top   : 1.4rem !important;   /* room for floating label */
    padding-bottom: .4rem !important;
    padding-left  : .85rem !important;
    padding-right : .85rem !important;
    font-size     : .9rem !important;
    color         : var(--alq-primary, #0f172a) !important;
    transition    : border-color .2s, box-shadow .2s !important;
}

/* Required field asterisk (*) via :has() — modern browsers only */
.wc-block-components-text-input:has(input[required]) label::after,
.wc-block-components-combobox:has(input[required]) label::after,
.wc-block-components-country-input:has(input[required]) label::after,
.wc-block-components-select:has(select[required]) label::after {
    content : ' *';
    color   : #e53e3e;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus {
    border-color: var(--alq-accent, #b8912a) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(184,145,42,.15) !important;
}

/* ---- Block cart heading rows --------------------------------------------- */
/* "Product" / "Total" headers → match "Cart Totals" sidebar heading style */
.wc-block-cart-items__header {
    font-size     : 1rem !important;
    font-weight   : 700 !important;
    color         : var(--alq-primary, #0f172a) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom : 2px solid var(--alq-wc-border) !important;
    padding-bottom: .6rem !important;
}
/* Add top padding so "Product/Total" headers align vertically with "Cart Totals" */
.wc-block-cart-items__header th { padding-top: 1.25rem !important; }
.wc-block-cart-items .wc-block-cart-item {
    border-bottom: 1px solid var(--alq-wc-border) !important;
    padding: .85rem 0 !important;
}
/* Cart item product image — 84px */
.wc-block-cart-item__image { width: 84px !important; min-width: 84px !important; }
.wc-block-cart-item__image img {
    width      : 84px !important;
    height     : 84px !important;
    max-width  : 84px !important;
    object-fit : cover !important;
    border-radius: var(--alq-wc-radius, 8px) !important;
    display    : block !important;
}

/* ---- Block product name link --------------------------------------------- */
.wc-block-components-product-name {
    font-weight: 600 !important;
    color: var(--alq-primary, #0f172a) !important;
}
.wc-block-components-product-name:hover { color: var(--alq-accent, #b8912a) !important; }

/* ---- Block quantity stepper ---------------------------------------------- */
.wc-block-components-quantity-selector {
    border: 1.5px solid var(--alq-wc-border) !important;
    border-radius: 5px !important;
    overflow: hidden;
}
.wc-block-components-quantity-selector__button {
    background: var(--alq-wc-light) !important;
    color: var(--alq-primary, #0f172a) !important;
    border: none !important;
    width: 32px !important;
    transition: background .2s !important;
}
.wc-block-components-quantity-selector__button:hover {
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
}
.wc-block-components-quantity-selector__value {
    border: none !important;
    font-weight: 600 !important;
}

/* ---- Block cart totals sidebar ------------------------------------------- */
/* WC Blocks cart.css hides this heading via @container (max-width:699px) — force visible */
.wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title {
    display: block !important;
}
.wc-block-cart__totals-title {
    font-size     : 1rem !important;
    font-weight   : 500 !important;
    color         : var(--alq-primary, #0f172a) !important;
    text-transform: none !important;   /* WC Blocks adds uppercase — remove it */
    border-bottom : 2px solid var(--alq-wc-border) !important;
    padding: 1px 16px 10px 0 !important;
    padding-bottom: .6rem !important;
    margin-bottom : 1rem !important;
}
.wc-block-components-totals-item { border-bottom: 1px solid var(--alq-wc-border) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--alq-accent, #b8912a) !important;
    font-weight: 700 !important;
}

/* ---- Block "Add coupons" link -------------------------------------------- */
.wc-block-components-totals-coupon__link {
    color: var(--alq-accent, #b8912a) !important;
    font-weight: 600 !important;
}
.wc-block-components-totals-coupon__button {
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--alq-wc-radius) !important;
    font-weight: 700 !important;
}
.wc-block-components-totals-coupon__button:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}

/* ---- Order summary (checkout sidebar) ------------------------------------ */
.wp-block-woocommerce-checkout-order-summary-block {
    background: #fff !important;
    border: 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    padding: 1.25rem !important;
}
/*
 * The real WC Blocks class for the accordion-style order summary title is
 * .wc-block-components-checkout-order-summary__title (note "checkout-" prefix).
 * WC default: font-size 14px, font-weight 400, margin-top 16px — override all.
 */
.wc-block-components-checkout-order-summary__title {
    font-size    : 1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .6rem !important;
    margin-top   : 0 !important;
    margin-bottom: .75rem !important;
}
.wc-block-components-checkout-order-summary__title-text {
    font-size  : 1rem !important;
    font-weight: 700 !important;
    color      : var(--alq-primary, #0f172a) !important;
    margin: 0 0 4px 2px !important;
}

/* ── 20a. Checkout — Phase 6 redesign ───────────────────────────────────── */

/* ── __actions internal column order ────────────────────────────────────────
 * __terms is a SIBLING of __actions inside __form (NOT inside __actions).
 * Terms-above-button ordering is handled by flex `order` in the mobile section.
 * Here we just ensure __actions itself is a flex column so its children
 * (fill-wrapper slot, notices, actions_row) stack vertically in correct order.
 */
.wc-block-checkout__actions {
    display       : flex !important;
    flex-direction: column !important;
}
.wc-block-checkout__actions_row {
    order: 10 !important;    /* button always last inside __actions */
}

/* Hide product EXCERPT on cart & checkout — keep variation attributes */
.wc-block-cart  .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-product-metadata__description {
    display: none !important;
}

/* ---- Hide breadcrumb bar on cart & checkout (funnel steps replace it) ---- */
.woocommerce-checkout .alq-wc-breadcrumb,
.woocommerce-checkout .alq-shop-header-bar,
.woocommerce-cart    .alq-wc-breadcrumb,
.woocommerce-cart    .alq-shop-header-bar { display: none !important; }

/* ---- Funnel steps indicator (Your Cart → Checkout → Order Complete) ------ */
/*
 * Static (not sticky) — active step is determined by the current page,
 * not by scroll position. Shown on cart, checkout, and order-received pages.
 */
.alq-checkout-steps {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 0;
    margin-bottom   : 1.75rem;
    padding         : 1rem 1.25rem;
    background      : #fff;
    border-radius   : var(--alq-wc-radius);
    box-shadow      : var(--alq-wc-shadow, 0 1px 4px rgba(0,0,0,.08));
}
.alq-checkout-steps__item {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : .3rem;
    cursor          : default;
    text-decoration : none;
    color           : inherit;
}
a.alq-checkout-steps__item {
    cursor : pointer;
}
a.alq-checkout-steps__item:hover .alq-checkout-steps__num {
    background   : var(--alq-accent, #b8912a);
    border-color : var(--alq-accent, #b8912a);
    color        : #fff;
}
a.alq-checkout-steps__item:hover .alq-checkout-steps__label {
    color : var(--alq-accent, #b8912a);
}
.alq-checkout-steps__num {
    width           : 2rem;
    height          : 2rem;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .8rem;
    font-weight     : 700;
    background      : var(--alq-wc-light, #f8f9fa);
    border          : 2px solid var(--alq-wc-border, #e5e7eb);
    color           : var(--alq-wc-muted, #6b7280);
    transition      : background .2s, border-color .2s, color .2s;
}
.alq-checkout-steps__label {
    font-size   : .72rem;
    font-weight : 500;
    color       : var(--alq-wc-muted, #6b7280);
    transition  : color .2s;
}
.alq-checkout-steps__line {
    flex        : 1;
    min-width   : 3rem;
    max-width   : 6rem;
    height      : 2px;
    background  : var(--alq-wc-border, #e5e7eb);
    margin      : 0 .5rem;
    margin-bottom: 1.1rem; /* align with circle center */
    transition  : background .2s;
}
/* Active step */
.alq-checkout-steps__item.is-active .alq-checkout-steps__num {
    background   : var(--alq-accent, #b8912a);
    border-color : var(--alq-accent, #b8912a);
    color        : #fff;
}
.alq-checkout-steps__item.is-active .alq-checkout-steps__label {
    color      : var(--alq-accent, #b8912a);
    font-weight: 700;
}
/* Completed step */
.alq-checkout-steps__item.is-done .alq-checkout-steps__num {
    background   : var(--alq-accent-dark, #9a7821);
    border-color : var(--alq-accent-dark, #9a7821);
    color        : #fff;
}
.alq-checkout-steps__item.is-done .alq-checkout-steps__label { color: var(--alq-accent-dark, #9a7821); }
.alq-checkout-steps__line.is-done { background: var(--alq-accent, #b8912a); }

/* Remove extra top padding from checkout form wrapper so steps bar aligns with cart */
.woocommerce-checkout form.wc-block-checkout,
.woocommerce-checkout .wp-block-woocommerce-checkout { padding-top: 0 !important; }

/* ---- Form section cards -------------------------------------------------- */
.wc-block-checkout__contact-fields,
.wc-block-checkout__shipping-fields,
.wc-block-checkout__shipping-option,
.wc-block-checkout__payment-method,
.wc-block-checkout__order-notes {
    background    : #fff !important;
    border-radius : var(--alq-wc-radius) !important;
    box-shadow    : var(--alq-wc-shadow, 0 1px 4px rgba(0,0,0,.08)) !important;
    padding       : 1.5rem !important;
    margin-bottom : 1rem !important;
    border        : 1px solid var(--alq-wc-border) !important;
}

/* ---- Section headings ---------------------------------------------------- */
.wc-block-components-checkout-step__title {
    font-size     : 1rem !important;
    font-weight   : 700 !important;
    color         : var(--alq-primary, #0f172a) !important;
    padding-bottom: .6rem !important;
    border-bottom : 2px solid var(--alq-wc-border) !important;
    margin-bottom : 1rem !important;
}
.wc-block-components-checkout-step__heading-container {
    margin-bottom : .25rem !important;
}

/* ---- Checkout furniture visibility (Customizer toggles) ------------------ */
/*
 * Only the two non-field elements are hidden with CSS. Every actual address
 * field (name, address, city, state, postcode, phone) used to be hidden here
 * too — that was removed 2026-08-14, because CSS only hides a field from the
 * customer's eyes, not from WooCommerce's server-side validation: hiding a
 * field WooCommerce still required made the store impossible to check out
 * from. Those fields are now hidden natively through the country-locale
 * filters in inc/woocommerce.php, which the React form and the Store API both
 * honour. The two below are safe to hide with CSS precisely because they are
 * NOT validated fields — an order note and a "same address for billing"
 * checkbox, both optional.
 *
 * The matching `alq-optional-co-*` rules (which hid the red required asterisk
 * to fake an optional field) were removed in the same pass — the asterisk is
 * now simply absent, because the field genuinely is optional.
 */
body.alq-hide-co-order_notes  .wc-block-checkout__order-notes,
body.alq-hide-co-order_notes  .wc-block-checkout__add-note                   { display: none !important; }
body.alq-hide-co-billing_same .wc-block-checkout__use-address-for-billing    { display: none !important; }

/* ---- Checkout 2-col layout: desktop only (≥992px) ----------------------- */
/*
 * WC Blocks default: main ~65%, sidebar ~35%. We widen main to 58% for more
 * form breathing room, and let the sidebar take the rest.
 * At ≤991px, the mobile/tablet single-column section below takes over.
 */
@media (min-width: 992px) {
    .woocommerce-checkout .wc-block-components-sidebar-layout {
        flex-wrap : nowrap !important;       /* prevent early wrap */
        flex-direction: row !important;
    }
    .woocommerce-checkout .wc-block-checkout__main {
        flex      : 1 1 58% !important;
        width     : 58% !important;
        max-width : 58% !important;
        padding-right: 1.25rem !important;
    }
    .woocommerce-checkout .wc-block-checkout__sidebar {
        flex        : 1 1 auto !important;
        width       : auto !important;
        max-width   : none !important;
        padding-left: 0.5rem !important;
        /* Sticky sidebar — floats beside form as user scrolls */
        align-self  : flex-start !important;
        position    : sticky !important;
        top         : calc( var(--alq-header-total-h, 80px) + 1.5rem ) !important;
    }
}

/* ---- Order summary improvements ------------------------------------------ */
/*
 * Wrapper: position:relative keeps the quantity badge (absolute) anchored.
 * Do NOT set overflow:hidden here — it clips the badge bubble.
 */
.wc-block-components-order-summary-item__image {
    position  : relative !important;
    width     : 60px !important;
    min-width : 60px !important;
    height    : 60px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}
.wc-block-components-order-summary-item__image img {
    width       : 60px !important;
    height      : 60px !important;
    max-width   : 60px !important;
    object-fit  : cover !important;
    border-radius: 6px !important;
    display     : block !important;
}
/* Quantity badge: half inside image, half outside (top-right corner) */
.wc-block-components-order-summary-item__quantity {
    position  : absolute !important;
    top       : 0 !important;
    right     : 0 !important;
    transform : translate(50%, -50%) !important;
    z-index   : 1 !important;
}
/* Border between each product in order summary */
.wc-block-components-order-summary-item {
    border-bottom: 1px solid var(--alq-wc-border, #e5e0d8) !important;
    padding-bottom: .75rem !important;
    margin-bottom : .25rem !important;
}
.wc-block-components-order-summary-item:last-child { border-bottom: none !important; }
/* Hide per-item price below name (total is shown on the right already) */
.wc-block-components-order-summary-item__individual-prices { display: none !important; }

/* Order summary image toggle (Customizer) */
body.alq-hide-co-order-images .wc-block-components-order-summary-item__image,
body.alq-hide-co-order-images .wc-block-components-order-summary-item__quantity { display: none !important; }

/* Coupon field toggle (Customizer) — fallback CSS hide for WC Blocks cart */
body.alq-hide-coupon .wc-block-components-totals-coupon { display: none !important; }

.wc-block-components-order-summary-item__full-price {
    font-weight : 600 !important;
    color       : var(--alq-primary, #0f172a) !important;
}
.wc-block-components-totals-item__value {
    font-weight : 700 !important;
    color       : var(--alq-primary, #0f172a) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color     : var(--alq-accent, #b8912a) !important;
    font-size : 1.1rem !important;
}

/* ── 20. Responsive ─────────────────────────────────────────────────────── */

/* Tablet/mobile: single column product layout */
@media ( max-width: 991.98px ) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
    .woocommerce div.product.type-product {
        grid-template-columns: minmax(0, 1fr);
        /* No override needed here: column-gap only matters for the desktop
         * side-by-side layout, and row-gap (the only one that shows once
         * columns stack to one on mobile) was never changed from its
         * original 1.2rem above. */
    }
    .woocommerce div.product.type-product .woocommerce-product-gallery { grid-column: 1; }
    .woocommerce div.product.type-product .summary { grid-column: 1; }
    .woocommerce div.product.type-product .woocommerce-tabs { grid-column: 1; }
    .woocommerce div.product.type-product .related,
    .woocommerce div.product.type-product .upsells { grid-column: 1; }

    /* Tabs: keep on one line, scroll horizontally instead of wrapping */
    .woocommerce div.product.type-product .woocommerce-tabs ul.tabs {
        flex-wrap           : nowrap;
        overflow-x          : auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width     : none;
    }
    .woocommerce div.product.type-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
    /* Smaller tab font + tighter padding so labels fit on one line */
    .woocommerce div.product.type-product .woocommerce-tabs ul.tabs li a {
        font-size: .75rem;
        padding: .55rem .85rem .55rem .1rem;
    }

    /* Related/upsells: always 2 columns on mobile */
    .woocommerce div.product.type-product .related ul.products,
    .woocommerce div.product.type-product .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Wishlist page "You May Also Like" (.alq-wishlist-ymal, in
     * page-templates/wishlist.php) reuses the same .related.products
     * markup/classes as the single-product-page Related section above,
     * but lives on a DIFFERENT page (the standalone Wishlist page, not
     * div.product.type-product) — so the rule above never matched it.
     * That section's own <ul class="products columns-4"> (columns
     * forced via wc_setup_loop) was falling through to the unguarded
     * `.columns-4{grid-template-columns:repeat(4,1fr)}` rule above
     * (line ~249), which has no media query and wins on specificity
     * over the plain mobile `ul.products` reset — 4 cramped columns on
     * a phone screen instead of 2. Same fix, same reasoning, just a
     * selector that actually reaches this section. */
    .alq-wishlist-ymal ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: 2 columns */
@media ( max-width: 575.98px ) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .woocommerce-cart table.cart thead { display: none; }
    .woocommerce-cart table.cart tbody tr { display: flex; flex-wrap: wrap; padding: .75rem 0; border-bottom: 1px solid var(--alq-wc-border); }
    .woocommerce-cart table.cart tbody td { border-bottom: none; padding: .25rem .5rem; }
    .woocommerce-cart table.cart td.product-remove { order: 1; }
    .woocommerce-cart table.cart td.product-thumbnail { order: 2; }
    .woocommerce-cart table.cart td.product-name { order: 3; flex: 1; }
    .woocommerce-cart table.cart td.product-price { order: 4; }
    .woocommerce-cart table.cart td.product-quantity { order: 5; }
    .woocommerce-cart table.cart td.product-subtotal { order: 6; }

    .alq-shop-controls { width: 100%; max-width: 100%; }
    /* Mobile: tighten the gap */
    .woocommerce div.product.type-product form.cart {
        gap: .5rem;
    }
    .woocommerce div.product.type-product .woocommerce-variation-add-to-cart {
        gap: .5rem !important;
    }
    .woocommerce div.product.type-product form.cart .button {
        padding : 0 .9rem;
        width   : auto !important;
        justify-content: center;
    }
    /* Order row: shrink buttons to fit narrow mobile screens (360px+) */
    .alq-order-row {
        gap: .35rem;
    }
    .alq-order-btn {
        font-size: .7rem !important;
        padding  : 0 .3rem !important;
        gap      : .2rem !important;
        height   : 34px !important;
    }
    .alq-order-btn svg {
        width : .7rem;
        height: .7rem;
    }
}

/* ── 21. My Account Page (legacy — superseded by Section 26 below) ──────
 * This block used to style .woocommerce-MyAccount-navigation before the
 * icon-equipped, full-width redesign was built as "26. My Account Page"
 * further down this file. It was never deleted, so on the real My Account
 * page (which matches BOTH this old `.woocommerce-account`-scoped selector
 * AND Section 26's unscoped one) its non-!important `padding: 1rem` on the
 * nav container and `border-radius: 5px` on each link kept silently
 * leaking through wherever Section 26 didn't explicitly override that
 * exact property — Section 26 uses !important everywhere EXCEPT container
 * padding and link border-radius, which it never sets at all. Net effect:
 * the real My Account page's nav sat ~1rem right of the page container
 * with an inset, padded, rounded active/hover background, while the new
 * Wishlist page's sidebar (which reuses the exact same nav markup via
 * do_action('woocommerce_account_navigation') but has no `.woocommerce-
 * account` ancestor, so only Section 26 ever applied) rendered flush with
 * the container edge and full-width — the two pages looked inconsistent
 * even though they're driven by identical HTML. Removed entirely rather
 * than patched, since Section 26 already fully covers this component
 * (layout, hover, active state, per-item icons) and is the correct/newer
 * version — deleting this duplicate makes both pages render identically
 * by construction, not by coincidence. */


/* ── 22. Single Product — Sticky Gallery Layout ─────────────────────────── */

/*
 * Layout:
 *   Left  (col-lg-6): product gallery — sticky while right column scrolls
 *   Right (col-lg-6): title, price, add to cart, description/reviews tabs
 *   Below (full width): related products + up-sells
 */

/* Force all direct children to span full grid width —
   the 2-col split is handled by Bootstrap .row inside .alq-sp-sticky-row */
.woocommerce div.product.type-product > .woocommerce-notices-wrapper,
.woocommerce div.product.type-product > .alq-sp-sticky-row,
.woocommerce div.product.type-product > .alq-sp-below-fold {
    grid-column: 1 / -1;
}

.alq-sp-sticky-row {
    align-items: flex-start;
}

/* Make the gallery column sticky — desktop only (lg breakpoint matches col-lg-6) */
@media (min-width: 992px) {
    .alq-sp-gallery-col {
        position : sticky;
        top      : calc( var(--alq-header-total-h, 80px) + 1.5rem );
        align-self: flex-start;
    }

    /* Padding & spacing for right column — desktop only. Left padding is
     * this layout's equivalent of the gap between gallery and content
     * (the row itself uses Bootstrap's g-0 / zero gutter) — kept in sync
     * with the "default" layout's column-gap above. */
    .alq-sp-content-inner {
        padding: 0 2rem 2rem 2rem;
    }
}

/* Breadcrumb inside the sticky layout right column */
.alq-sp-breadcrumb .alq-wc-breadcrumb { font-size: .8rem; }

/* Tabs inside the right column — remove WC's heavy top margin/border */
.alq-sp-tabs-wrap {
    margin-top: 2rem;
}
.alq-sp-tabs-wrap .woocommerce-tabs {
    margin-top: 0 !important;
    border-top: none !important;
}

/* =============================================================================
   23. Cart Block — White backgrounds, Shipping Calculator, Notices, Mobile
   24. Empty Cart Block — Icon, "New in store" heading, Product grid
============================================================================= */

/* ── 23a-i. Cart layout: match checkout column ratio + gap (desktop only)
   Main 62% (wider product list), sidebar auto (narrower totals), same gap as checkout. */
@media (min-width: 700px) {
    .wc-block-cart__main {
        flex         : 1 1 66% !important;
        width        : 66% !important;
        max-width    : 66% !important;
        padding-right: 1.25rem !important;
    }
    .wc-block-cart__sidebar {
        flex         : 1 1 auto !important;
        width        : auto !important;
        max-width    : none !important;
        padding-left : 0.5rem !important;
        align-self   : flex-start !important;
        position     : sticky !important;
        top          : calc( var(--alq-header-total-h, 80px) + 1.5rem ) !important;
    }
}

/* ── 23a. White card backgrounds ─────────────────────────────────────────── */
/* WC cart.css uses `table.wc-block-cart-items { background: none !important }`
   Must match element+class specificity to override */
table.wc-block-cart-items {
    background     : #fff !important;
    border-radius  : var(--alq-wc-radius) !important;
    box-shadow     : var(--alq-wc-shadow) !important;
    margin-bottom  : 1rem !important;
    border-collapse: separate !important;
    border-spacing : 0 !important;
}
.wp-block-woocommerce-cart-order-summary-block {
    background   : #fff !important;
    border-radius: var(--alq-wc-radius) !important;
    padding      : 1.25rem 1.5rem !important;
    box-shadow   : var(--alq-wc-shadow) !important;
}

/* ── 23b-i. Header cell alignment — match body cell padding-left (16px) ──── */
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product {
    padding-left: 16px !important;
}

/* ── 23b-ii. Desktop cart table — inset content from the white card's edges ─
   WC Blocks gives the cart table's first and last cells no horizontal
   padding, so on desktop the product thumbnail sat flush against the card's
   left edge, the line total against its right edge, and the "Total" column
   heading had nothing between it and the edge either. The header row also
   sat 16px further in than the product name below it (rule 23b-i above),
   so the "Product" heading and the product title were visibly misaligned.

   Fixed on the <table> itself rather than cell-by-cell: one symmetric 1rem
   inset applies to the header row and every item row at once, which keeps
   heading and content in the same vertical line automatically. Cell-level
   padding that duplicated (or fought) that inset is zeroed here.

   Desktop only (≥992px) — the ≤991.98px block near the end of this file
   already gives the mobile grid layout its own row padding, and mobile was
   never affected by this. ------------------------------------------------ */
@media (min-width: 992px) {
    table.wc-block-cart-items {
        padding-left : 1rem !important;
        padding-right: 1rem !important;
    }
    /* The table's own inset now provides this — drop 23b-i's extra 16px so
       the "Product" heading lines up with the product name beneath it. */
    .wc-block-cart-items__header-image,
    .wc-block-cart-items__header-product {
        padding-left: 0 !important;
    }
    .wc-block-cart-items__header-total { padding-right: 0 !important; }
    /* Gap between the thumbnail and the product name, nothing on the outer
       edge (the table inset handles that). */
    .wc-block-cart-item__image {
        padding-left : 0 !important;
        padding-right: 1rem !important;
    }
    .wc-block-cart-item__total { padding-right: 0 !important; }
}

/* ── 23b. Shipping Calculator ────────────────────────────────────────────── */
.wc-block-components-shipping-calculator {
    background   : var(--alq-wc-light);
    border       : 1px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    padding      : .85rem 1rem;
    margin-top   : .5rem;
}
.wc-block-components-shipping-calculator__toggle,
.wc-block-components-totals-shipping__via {
    color          : var(--alq-accent, #b8912a) !important;
    font-weight    : 600 !important;
    font-size      : .88rem !important;
    text-decoration: none !important;
    background     : none !important;
    border         : none !important;
    padding        : 0 !important;
    cursor         : pointer !important;
}
.wc-block-components-shipping-calculator__toggle:hover { text-decoration: underline !important; }
.wc-block-components-shipping-calculator-form { margin-top: .75rem; }
.wc-block-components-shipping-calculator-form .wc-block-components-country-input,
.wc-block-components-shipping-calculator-form .wc-block-components-text-input {
    margin-bottom: .5rem;
}
.wc-block-components-shipping-calculator__button,
.wc-block-components-shipping-calculator-form button[type="submit"] {
    background   : var(--alq-accent, #b8912a) !important;
    color        : #fff !important;
    border       : none !important;
    border-radius: var(--alq-wc-radius) !important;
    padding      : .5rem 1.25rem !important;
    font-weight  : 600 !important;
    font-size    : .88rem !important;
    cursor       : pointer !important;
    transition   : background .2s !important;
    margin-top   : .5rem !important;
}
.wc-block-components-shipping-calculator__button:hover { background: var(--alq-accent-dark, #9a7821) !important; }

/* Shipping totals row */
.wc-block-components-totals-shipping .wc-block-components-totals-item__label { font-weight: 600; }

/* ── 23c. WC Block Notices ────────────────────────────────────────────────── */
.wc-block-components-notice-banner {
    border-radius   : var(--alq-wc-radius) !important;
    padding         : .85rem 1rem .85rem 1.1rem !important;
    font-size       : .9rem !important;
    font-weight     : 500 !important;
    border-left     : 4px solid transparent !important;
    margin-bottom   : 1rem !important;
    display         : flex !important;
    align-items     : flex-start !important;
    gap             : .75rem !important;
    /* Fix (2026-08-14): clicking "Place order" with a validation error
       calls the browser's native scrollIntoView() on this notice (and on
       the invisible ".with-scroll-to-top__scroll-point" marker WooCommerce
       Blocks places above each checkout step — see rule below). Because
       the site header is position:sticky and sits on top (z-index 1030),
       a plain scrollIntoView() stops with the notice's top edge flush
       against the viewport top — i.e. right underneath the sticky header,
       hidden. scroll-margin-top tells the browser to stop that many
       pixels earlier, leaving room for the header. Reuses the same
       --alq-header-total-h variable (set live in js/main.js from the
       header's real measured height) already used for the TOC
       scroll-margin-top and sticky-sidebar offset elsewhere in this
       theme — see css/custom.css. */
    scroll-margin-top: calc( var(--alq-header-total-h, 80px) + 20px ) !important;
}

/* WooCommerce Blocks renders an invisible anchor
   (.with-scroll-to-top__scroll-point) just above each checkout step /
   the top validation-error area and scrolls THAT into view rather than
   the notice itself in some cases (step-level errors). Needs the same
   offset for the same reason as the notice banner above. */
.with-scroll-to-top__scroll-point {
    scroll-margin-top: calc( var(--alq-header-total-h, 80px) + 20px );
}

/* Field-level validation errors: WooCommerce Blocks also scrollIntoView()s
   the first invalid field directly (e.g. an empty required address field)
   when "Place order" is clicked. Same sticky-header overlap problem. */
.wc-block-components-checkout-step.has-error input,
.wc-block-components-checkout-step.has-error select,
.wc-block-checkout__form input:invalid,
.wc-block-checkout__form select:invalid {
    scroll-margin-top: calc( var(--alq-header-total-h, 80px) + 20px );
}
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner--error {
    background      : #fef2f2 !important;
    border-left-color: var(--alq-wc-error, #dc2626) !important;
    color           : #991b1b !important;
}
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner--success {
    background      : #f0fdf4 !important;
    border-left-color: var(--alq-wc-success, #16a34a) !important;
    color           : #166534 !important;
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner--info {
    background      : #fffbeb !important;
    border-left-color: #d97706 !important;
    color           : #92400e !important;
}
/* Snackbar (toast-style) notices */
.wc-block-components-notice-snackbar__content {
    background   : var(--alq-primary, #0f172a) !important;
    color        : #fff !important;
    border-radius: var(--alq-wc-radius) !important;
    font-size    : .88rem !important;
    box-shadow   : var(--alq-wc-shadow-h) !important;
    padding      : .65rem 1rem !important;
}

/* ── 23c. Checkout block mobile/tablet responsive ─────────────────────────
 * Superseded by the display:contents section below (≤991px).
 * Kept as comment only for reference.
 * ── */

/* ── 23d. Cart / Checkout mobile responsive ─────────────────────────────── */
/*
 * WC Blocks handles cart item layout + cart sidebar stacking via its own
 * container queries (@container max-width: 699px) and .is-small/.is-mobile
 * class-based grid. Do NOT override those — let WC Blocks do its job.
 *
 * We handle:
 *   1. Cart image size clamped to grid column (80px) — prevents text overlap
 *   2. Cart table padding aligns with steps bar (12px each side)
 *   3. Gap between cart image and product name
 *   4. Checkout sidebar stacking + padding alignment with steps bar
 */
/* ── Cart mobile grid fix ──────────────────────────────────────────────────
   WC Blocks @container (max-width: 699px) sets the cart row to:
     display: grid; grid-template-columns: 80px 132px;
   The "132px" for the product column is FIXED — it does not stretch or shrink.
   At 768-991px viewport, the sidebar appears and the main cart column narrows;
   the container query (<699px) kicks in inside this narrower column, but our
   previous @media (max-width: 767px) rules did NOT cover 768px+.
   At 320px viewport, "132px product + 80px image + ~80px total" = ~292px
   minimum, which overflows a 296px content area.

   Fix: override grid-template-columns so product column is "1fr" (flexible)
   and image column is a fixed but reasonable size. Also fix the td padding
   that WC Blocks zeroes out via its own container query rule. */

/* Normal mobile/tablet (≤991.98px) */
@media (max-width: 991.98px) {
    /* WC Blocks zeroes td padding in @container (max-width:699px).
       We re-add horizontal breathing room on the ROW instead (grid padding). */
    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
        grid-template-columns: 80px 1fr !important;
        padding-left : .75rem !important;
        padding-right: .75rem !important;
    }
    /* Keep image TD constrained to column 1 width.
       WC Blocks @container adds padding-right: 16px to this TD — remove it so the
       full 80px is usable image space. overflow: hidden clips any stray pixel. */
    .wc-block-cart-item__image {
        width    : 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        padding   : 0 !important;
        overflow  : hidden !important;
    }
    /* WC Blocks root CSS sets img width/height to 84px — override to fit column */
    .wc-block-cart-item__image img {
        width    : 80px !important;
        max-width: 80px !important;
        height   : 80px !important;
        display  : block !important;
    }
    /* Gap between image and product name */
    .wc-block-cart-item__product {
        padding-left: .75rem !important;
    }
    /* Reduce product title font size on mobile */
    .wc-block-cart-item__product .wc-block-components-product-name,
    .wc-block-cart-item__product .wc-block-components-product-name a {
        font-size  : .82rem !important;
        line-height: 1.35 !important;
    }
}

/* Very narrow (≤360px): shrink image column to 60px */
@media (max-width: 360px) {
    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
        grid-template-columns: 60px 1fr !important;
        padding-left : .5rem !important;
        padding-right: .5rem !important;
    }
    .wc-block-cart-item__image {
        width    : 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        padding   : 0 !important;
        overflow  : hidden !important;
    }
    .wc-block-cart-item__image img {
        width    : 60px !important;
        max-width: 60px !important;
        height   : 60px !important;
        display  : block !important;
    }
    .alq-checkout-steps { padding: .5rem .375rem !important; }
}

/* ── Mobile/Tablet (≤991px): form steps → order summary → terms → Place Order
 *
 * display:contents on __main and __form dissolves their layout boxes so their
 * children become direct flex items of sidebar-layout (flex-direction:column).
 * flex `order` then controls the exact sequence:
 *
 *   notices        →  5
 *   checkout steps → 10
 *   sidebar        → 50  (full order summary, between form and terms)
 *   terms          → 75  ("By proceeding..." text, above button)
 *   actions        → 100 (Place Order button — always last)
 *
 * Covers: mobile (≤767px) AND tablet (768–991px) — fixes centering at 880–991px.
 *
 * WC Blocks fill-wrapper: injects a mini order summary accordion inside
 * __actions on narrow viewports. Since we show the full sidebar (order:50),
 * the fill-wrapper is redundant — hide it to avoid double order summary.
 */
@media (max-width: 991px) {
    /* Flex column on outer container */
    .woocommerce-checkout .wc-block-components-sidebar-layout {
        flex-direction: column !important;
    }

    /* Dissolve __main and __form — their children become direct flex items of sidebar-layout */
    .woocommerce-checkout .wc-block-checkout__main,
    .woocommerce-checkout .wc-block-checkout__form {
        display: contents !important;
    }

    /* Notices */
    .woocommerce-checkout .wc-block-components-notices {
        order      : 5 !important;
        width      : 100% !important;
        box-sizing : border-box !important;
    }

    /* Form step cards */
    .woocommerce-checkout .wc-block-components-checkout-step {
        order         : 10 !important;
        width         : 100% !important;
        box-sizing    : border-box !important;
        padding-left  : 1.25rem !important;
        padding-right : 1.25rem !important;
    }
    /* Inner card padding compact on mobile/tablet */
    .woocommerce-checkout .wc-block-checkout__contact-fields,
    .woocommerce-checkout .wc-block-checkout__shipping-fields,
    .woocommerce-checkout .wc-block-checkout__shipping-option,
    .woocommerce-checkout .wc-block-checkout__payment-method,
    .woocommerce-checkout .wc-block-checkout__order-notes {
        padding: 1rem !important;
    }

    /* Order summary sidebar — placed BETWEEN form and terms/button */
    .woocommerce-checkout .wc-block-checkout__sidebar {
        order      : 50 !important;
        display    : block !important;
        width      : 100% !important;
        max-width  : 100% !important;
        position   : static !important;
        padding-left: 0 !important;
        box-sizing : border-box !important;
    }

    /* Hide WC Blocks fill-wrapper (mini order summary toggle inside __actions)
       — sidebar already shows the full order summary above, no need for duplicate */
    .woocommerce-checkout .wc-block-checkout__actions > div:first-child {
        display: none !important;
    }

    /* Terms text: ABOVE Place Order button, BELOW order summary */
    .woocommerce-checkout .wc-block-checkout__terms {
        order         : 75 !important;
        width         : 100% !important;
        padding-left  : 1.25rem !important;
        padding-right : 1.25rem !important;
        box-sizing    : border-box !important;
    }

    /* Place Order button — always last */
    .woocommerce-checkout .wc-block-checkout__actions {
        order         : 100 !important;
        width         : 100% !important;
        padding-left  : 0 !important;
        padding-right : 0 !important;
        margin-top    : 1.5rem !important;
        padding-bottom: 1.5rem !important;
        box-sizing    : border-box !important;
    }
    .woocommerce-checkout .wc-block-checkout__actions_row {
        padding-left  : 0 !important;
        padding-right : 0 !important;
        margin-top    : 1rem !important;
    }

    /* Steps bar — compact */
    .alq-checkout-steps       { padding: .75rem; gap: 0; }
    .alq-checkout-steps__line { min-width: 1.5rem; }
    .alq-checkout-steps__label { font-size: .65rem; }
}

/* ── @container: WC Blocks internal edge cases (no sidebar hide needed now) ── */
@container (max-width: 699px) {
    .wc-block-checkout__actions {
        padding-left : 0 !important;
        padding-right: 0 !important;
        margin-top   : 2rem !important;
    }
    .wc-block-checkout__actions_row {
        padding-left : 0 !important;
        padding-right: 0 !important;
        margin-top   : 1.5rem !important;
    }
}

/* ── 24. Empty Cart Block ─────────────────────────────────────────────────── */

/* Cart icon — replace WC default sad-face with a shopping cart SVG */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    background-color    : var(--alq-accent, #b8912a) !important;
    height              : 4.5em !important;
    width               : 4.5em !important;
    margin              : 2.5rem auto 1.25em !important;
    display             : block !important;
    -webkit-mask-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E") !important;
    mask-image          : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat : no-repeat !important;
    mask-repeat         : no-repeat !important;
    -webkit-mask-size   : contain !important;
    mask-size           : contain !important;
    -webkit-mask-position: center !important;
    mask-position       : center !important;
    content             : '' !important;
}

/* Empty cart heading text */
.wc-block-cart__empty-cart__title {
    font-size    : 1.35rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    margin-bottom: .5rem !important;
}

/* Dot-line separator between empty message and "New in store" */
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
    margin      : 1.75rem auto !important;
    max-width   : 180px !important;
    opacity     : .45 !important;
    border-color: var(--alq-accent, #b8912a) !important;
}

/* ── 25. Order Received (Thank You) Page ─────────────────────────────────────
   Classic WC template: .woocommerce-order-received body class
   =========================================================================== */

/* ---- Narrower content width -----------------------------------------------
   A single-purpose confirmation page doesn't need the full shop-page
   container width. #alq-wc-main is the page's main WooCommerce content
   wrapper. */
.woocommerce-order-received #alq-wc-main {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Thank you notice ---------------------------------------------------- */
.woocommerce-order-received .woocommerce-thankyou-order-received {
    background   : #f0faf4 !important;
    border-left  : 4px solid #38a169 !important;
    border-radius: var(--alq-wc-radius) !important;
    color        : #276749 !important;
    font-weight  : 600 !important;
    padding      : .85rem 1.1rem !important;
    margin-bottom: 1.25rem !important;
}

/* ---- Payment method instructions (e.g. COD "Pay with cash upon delivery.")
   WooCommerce core outputs this via the active payment gateway's own
   thankyou_page() hook (see includes/gateways/cod/class-wc-gateway-cod.php
   — prints its "Instructions" setting as a bare wpautop-wrapped <p>) right
   between the order-overview card and the order-details card, with no
   class or box of its own — it visually floated compared to everything
   else on the page. Flagged by the user 2026-08-14. No unique class exists
   to hook, so this targets it via the adjacent-sibling selector (it's
   always the paragraph immediately after the overview list in WooCommerce's
   own thankyou.php template).

   First version of this box (same day) reused the accent-colored,
   left-bordered `.alq-wc-notice` look — the user pointed out that's the
   wrong visual language here: that style reads as a "notice" (something
   dynamic/attention-grabbing, like the admin-editable Checkout/Thank You
   messages), but this text is a fixed payment-method line that's always
   there unless the store owner changes a WooCommerce setting — it's
   informational, not an alert. Restyled to a plain neutral box (no accent
   color, no left bar) so it reads as a static info line instead. */
.woocommerce-order-received ul.woocommerce-order-overview + p {
    background   : var(--alq-wc-light, #f8f9fa) !important;
    border       : 1px solid var(--alq-wc-border, #e5e7eb) !important;
    border-radius: var(--alq-wc-radius) !important;
    padding      : .85rem 1.1rem !important;
    margin       : 0 0 1.5rem !important;
    font-size    : .9rem !important;
    color        : var(--alq-wc-muted, #6b7280) !important;
}

/* ---- Order overview info card -------------------------------------------- */
.woocommerce-order-received ul.woocommerce-order-overview {
    display      : flex !important;
    flex-wrap    : wrap !important;
    list-style   : none !important;
    margin       : 0 0 1.5rem !important;
    padding      : 0 !important;
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    box-shadow   : var(--alq-wc-shadow) !important;
    overflow     : hidden !important;
}
.woocommerce-order-received ul.woocommerce-order-overview li {
    flex        : 1 1 0 !important;
    min-width   : 120px !important;
    padding     : 1rem 1.25rem !important;
    border-right: 1px solid var(--alq-wc-border) !important;
    margin      : 0 !important;
    font-size   : .88rem !important;
    line-height : 1.4 !important;
}
.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
    border-right: none !important;
}
/* Label (strong) */
.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display       : block !important;
    font-size     : .78rem !important;
    font-weight   : 600 !important;
    letter-spacing: .06em !important;
    color         : var(--alq-wc-muted, #6b7280) !important;
    margin-bottom : .25rem !important;
}

/* ---- Order details section card ------------------------------------------ */
.woocommerce-order-received .woocommerce-order-details {
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    box-shadow   : var(--alq-wc-shadow) !important;
    padding      : 1.25rem !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce-order-received .woocommerce-order-details__title {
    font-size    : 1.2rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .6rem !important;
    margin-top   : 0 !important;
    margin-bottom: .75rem !important;
}

/* ---- Order details table ------------------------------------------------- */
.woocommerce-order-received table.woocommerce-table--order-details {
    width          : 100% !important;
    border-collapse: collapse !important;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th {
    font-size     : 1rem !important;
    font-weight   : 700 !important;
    color         : var(--alq-primary, #0f172a) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom : 2px solid var(--alq-wc-border) !important;
    padding       : .5rem 0 .6rem !important;
}
.woocommerce-order-received table.woocommerce-table--order-details td,
.woocommerce-order-received table.woocommerce-table--order-details tbody th {
    padding      : .75rem 0 !important;
    border-bottom: 1px solid var(--alq-wc-border) !important;
    vertical-align: middle !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tbody tr:last-child td,
.woocommerce-order-received table.woocommerce-table--order-details tbody tr:last-child th {
    border-bottom: none !important;
}
/* Product name link */
.woocommerce-order-received .woocommerce-table__product-name a {
    color          : var(--alq-primary, #0f172a) !important;
    font-weight    : 600 !important;
    text-decoration: none !important;
}
.woocommerce-order-received .woocommerce-table__product-name a:hover {
    color: var(--alq-accent, #b8912a) !important;
}
/* Footer rows (subtotal, shipping, total, payment) */
.woocommerce-order-received table.woocommerce-table--order-details tfoot th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
    padding      : .55rem 0 !important;
    border-bottom: 1px solid var(--alq-wc-border) !important;
    font-size    : .9rem !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none !important;
    font-weight  : 700 !important;
    font-size    : 1rem !important;
    color        : var(--alq-accent, #b8912a) !important;
}

/* ---- Address section — single unified box -------------------------------- */
.woocommerce-order-received .woocommerce-customer-details {
    display      : flex !important;
    gap          : 0 !important;
    margin-top   : 0 !important;
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    box-shadow   : var(--alq-wc-shadow) !important;
    overflow     : hidden !important;
}
.woocommerce-order-received .woocommerce-column--billing-address,
.woocommerce-order-received .woocommerce-column--shipping-address {
    flex         : 1 !important;
    background   : transparent !important;
    border       : none !important;
    border-radius: 0 !important;
    box-shadow   : none !important;
    padding      : 1.25rem !important;
}
/* Divider between Billing (1st column) and Shipping (2nd column), matching
   the one .alq-mb-payment-details already has on its own left edge below —
   keeps all three columns visually separated the same way. */
.woocommerce-order-received .woocommerce-column--billing-address {
    border-right: 1px solid var(--alq-wc-border) !important;
}
/* The addresses <section> (wraps Billing+Shipping) is one flex item at the
   outer .woocommerce-customer-details level, sibling to .alq-mb-payment-details
   below — give it flex-grow 2 (representing its 2 inner columns) against
   payment-details' flex-grow 1 (1 column) so all THREE columns end up an
   even three-way split instead of payment-details being squeezed thin. */
.woocommerce-order-received .woocommerce-customer-details > .woocommerce-columns {
    flex    : 7 1 0 !important;
    min-width: 0 !important;
}
.woocommerce-order-received h2.woocommerce-column__title {
    font-size    : 1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .6rem !important;
    margin-top   : 0 !important;
    margin-bottom: .75rem !important;
}
.woocommerce-order-received address {
    font-style: normal !important;
    font-size : .88rem !important;
    line-height: 1.75 !important;
    color     : var(--alq-primary, #0f172a) !important;
}

/* ---- Billing-address-only layout (no shipping address on the order) ------
   WooCommerce only wraps the addresses in .woocommerce-columns >
   .woocommerce-column when there IS a shipping address to sit beside the
   billing one. For a billing-only order (virtual products, local pickup,
   shipping disabled) its order-details-customer.php template prints the
   <h2> and <address> as DIRECT children of .woocommerce-customer-details
   instead — and since that element is a flex row here, the two became two
   narrow side-by-side columns with no padding: the heading squeezed into a
   ~100px sliver against the card's left border, the address crammed next
   to it. Reported from a real order on the preview site.

   Because a direct-child <h2>/<address> only ever exists in the
   billing-only case (in the two-column case they're nested one level
   deeper), targeting `>` here needs no feature detection and cannot affect
   the normal Billing + Shipping layout above. Give them a full-width row
   each plus the same 1.25rem padding the real columns use, so a
   billing-only order renders as one clean full-width card. ------------- */
.woocommerce-order-received .woocommerce-customer-details { flex-wrap: wrap !important; }
.woocommerce-order-received .woocommerce-customer-details > h2.woocommerce-column__title,
.woocommerce-order-received .woocommerce-customer-details > address {
    flex         : 1 1 100% !important;
    min-width    : 100% !important;
    padding-left : 1.25rem !important;
    padding-right: 1.25rem !important;
}
.woocommerce-order-received .woocommerce-customer-details > h2.woocommerce-column__title {
    padding-top: 1.25rem !important;
}
.woocommerce-order-received .woocommerce-customer-details > address {
    padding-bottom: 1.25rem !important;
}
/* Same case, but the order also used a native Mobile Banking gateway, whose
   details box is appended right after that <address>. Its usual left-edge
   divider only makes sense when it sits BESIDE a column — stacked full
   width it needs the divider on top instead. */
.woocommerce-order-received .woocommerce-customer-details > address + .alq-mb-payment-details {
    flex       : 1 1 100% !important;
    min-width  : 100% !important;
    border-left: none !important;
    border-top : 1px solid var(--alq-wc-border) !important;
}

/* ---- Native Mobile Banking payment-details box ---------------------------
   Sits as a 3rd flex item directly inside WooCommerce's own
   `.woocommerce-customer-details` card (a sibling of the Billing/Shipping
   <section> — see inc/mobile-banking-gateway.php's
   woocommerce_order_details_after_customer_details hook, which WC core
   fires INSIDE that same card). Its heading reuses `.woocommerce-column__title`
   and its body is a real <address> tag, so both already inherit the exact
   typography rules above — only the wrapper's own flex sizing + divider
   border need defining here. -------------------------------------------- */
.woocommerce-order-received .alq-mb-payment-details {
    flex        : 3 1 0 !important;
    min-width   : 0 !important;
    padding     : 1.25rem !important;
    background  : transparent !important;
    border-left : 1px solid var(--alq-wc-border) !important;
}
.woocommerce-order-received .alq-mb-payment-details .alq-mb-detail-row {
    margin: 0 0 .35rem !important;
}
.woocommerce-order-received .alq-mb-payment-details .alq-mb-detail-row:last-child {
    margin-bottom: 0 !important;
}
.woocommerce-order-received .alq-mb-payment-details .alq-mb-detail-label {
    font-weight: 600 !important;
    color      : var(--alq-primary, #0f172a) !important;
}

/* ---- Follow-up line below "Thank you" notice ----------------------------- */
.alq-thankyou-followup {
    display    : block;
    margin-top : .45rem;
    font-size  : .85rem;
    font-weight: 400;
    color      : #276749;
    opacity    : .85;
}

/* ---- Continue Shopping / View Order buttons (centered wrapper) ----------- */
.alq-continue-shopping-wrap {
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : .85rem;
    text-align     : center;
    margin-top     : 1.5rem;
}

/* ---- Continue Shopping button (outline) ----------------------------------- */
.alq-continue-shopping {
    display    : inline-block;
    margin-top : 0;
    padding    : .65rem 1.5rem;
    background : transparent;
    border     : 2px solid var(--alq-accent, #b8912a);
    border-radius: var(--alq-wc-radius);
    color      : var(--alq-accent, #b8912a);
    font-weight: 600;
    font-size  : .9rem;
    text-decoration: none;
    transition : background .2s, color .2s;
}
.alq-continue-shopping:hover {
    background: var(--alq-accent, #b8912a);
    color     : #fff;
}

/* ---- View Order button (solid) -------------------------------------------- */
.alq-view-order {
    display    : inline-block;
    margin-top : 0;
    padding    : .65rem 1.5rem;
    background : var(--alq-primary, #0f172a);
    border     : 2px solid var(--alq-primary, #0f172a);
    border-radius: var(--alq-wc-radius);
    color      : #fff;
    font-weight: 600;
    font-size  : .9rem;
    text-decoration: none;
    transition : background .2s, border-color .2s, color .2s;
}
.alq-view-order:hover {
    background: transparent;
    color     : var(--alq-primary, #0f172a);
}

/* ---- Mobile responsive --------------------------------------------------- */
@media (max-width: 767px) {
    .woocommerce-order-received ul.woocommerce-order-overview li {
        flex     : 1 1 45% !important;
        min-width: 0 !important;
        border-bottom: 1px solid var(--alq-wc-border) !important;
    }
    .woocommerce-order-received .woocommerce-customer-details {
        flex-direction: column !important;
    }
    .woocommerce-order-received .alq-mb-payment-details {
        border-left: none !important;
        border-top : 1px solid var(--alq-wc-border) !important;
    }
}

/* "New in store" heading — bigger + golden underline */
.wp-block-woocommerce-empty-cart-block h2:not(.with-empty-cart-icon),
.wp-block-woocommerce-empty-cart-block h3:not(.with-empty-cart-icon) {
    margin-top    : .25rem !important;
    margin-bottom : .5rem !important;
    padding-bottom: .6rem !important;
    font-size     : 1.75rem !important;
    font-weight   : 700 !important;
    color         : var(--alq-primary, #0f172a) !important;
    text-align    : center;
}
.wp-block-woocommerce-empty-cart-block h2:not(.with-empty-cart-icon)::after,
.wp-block-woocommerce-empty-cart-block h3:not(.with-empty-cart-icon)::after {
    content      : '' !important;
    display      : block !important;
    width        : 50px !important;
    height       : 3px !important;
    background   : var(--alq-accent, #b8912a) !important;
    border-radius: 2px !important;
    margin       : .4rem auto 1.25rem !important;
}

/* ── 24a. "New in store" product grid — matches archive card style ─────── */
/*
   WC Blocks uses selectors like .wc-block-grid.has-4-columns .wc-block-grid__product
   (3 classes) with !important. We need 4+ class specificity to win.
   Context: .wp-block-woocommerce-empty-cart-block .wc-block-grid (2 classes) + item selectors.
*/

/* Grid container */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
    display               : grid !important;
    grid-template-columns : repeat(4, minmax(0, 1fr)) !important;
    gap                   : 1.25rem !important;
    list-style            : none !important;
    padding               : 0 !important;
    margin                : 0 !important;
    flex-wrap             : unset !important; /* cancel WC flex-wrap */
    flex-direction        : unset !important;
}

/* Product card — matches .alq-pw-card archive style */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product {
    width          : 100% !important;
    min-width      : 0 !important;
    max-width      : none !important;   /* WC sets max-width:25% for flex; breaks our grid */
    flex-basis     : auto !important;
    flex-shrink    : 1 !important;
    margin         : 0 !important;
    background     : #fff !important;
    border         : 1px solid #e9ecef !important;
    border-radius  : 10px !important;
    box-shadow     : var(--alq-wc-shadow) !important;
    overflow       : hidden !important;
    transition     : box-shadow .25s, transform .25s, border-color .25s !important;
    display        : flex !important;
    flex-direction : column !important;
    position       : relative !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product:hover {
    transform    : translateY(-3px) !important;
    box-shadow   : 0 8px 28px rgba(0,0,0,.1) !important;
    border-color : var(--alq-accent, #b8912a) !important;
}

/* Product link — block so image fills card width */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-link {
    display        : block !important;
    width          : 100% !important;
    text-decoration: none !important;
    color          : inherit !important;
}

/* Image + hover overlay — same as .alq-pw-cart-overlay on archive cards */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-image {
    display      : block !important;
    width        : 100% !important;
    aspect-ratio : 1 / 1 !important;
    overflow     : hidden !important;
    margin       : 0 !important;
    padding      : 0 !important;
    position     : relative !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-image img {
    display   : block !important;
    width     : 100% !important;
    height    : 100% !important;
    object-fit: cover !important;
    transition: transform .4s ease !important;
    margin    : 0 !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product:hover .wc-block-grid__product-image img {
    transform: scale(1.04) !important;
}
/* Dark overlay — ::before */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-image::before {
    content   : '' !important;
    position  : absolute !important;
    inset     : 0 !important;
    background: rgba(0,0,0,.48) !important;
    opacity   : 0 !important;
    transition: opacity .25s ease !important;
    z-index   : 3 !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product:hover .wc-block-grid__product-image::before {
    opacity: 1 !important;
}
/* "View Details" pill button — ::after */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-image::after {
    content      : 'View Details' !important;
    position     : absolute !important;
    top          : 50% !important;
    left         : 50% !important;
    transform    : translate(-50%, -50%) !important;
    padding      : .35rem 1.1rem !important;
    font-size    : .78rem !important;
    font-weight  : 600 !important;
    background   : #fff !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-radius: 4px !important;
    white-space  : nowrap !important;
    line-height  : 1.5 !important;
    opacity      : 0 !important;
    transition   : opacity .25s ease !important;
    z-index      : 4 !important;
    pointer-events: none !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product:hover .wc-block-grid__product-image::after {
    opacity: 1 !important;
}

/* Title — centered */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-title {
    font-weight        : 600 !important;
    font-size          : .9rem !important;
    color              : var(--alq-primary, #0f172a) !important;
    padding            : .75rem .85rem .3rem !important;
    margin             : 0 !important;
    line-height        : 1.4 !important;
    text-align         : center !important;
    display            : -webkit-box !important;
    -webkit-line-clamp : 2 !important;
    -webkit-box-orient : vertical !important;
    overflow           : hidden !important;
}

/* Price — centered */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-price {
    padding    : 0 .85rem .1rem !important;
    margin     : 0 !important;
    font-size  : .95rem !important;
    font-weight: 700 !important;
    color      : var(--alq-accent, #b8912a) !important;
    text-align : center !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-price del,
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-price del .amount {
    color          : var(--alq-wc-muted) !important;
    font-weight    : 400 !important;
    opacity        : .65 !important;
    font-size      : .82rem !important;
    text-decoration: line-through !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-price ins {
    text-decoration: none !important;
}

/* Add to cart */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart {
    padding   : .5rem .85rem .85rem !important;
    margin-top: auto !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart a.button,
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart button {
    display        : block !important;
    width          : 100% !important;
    text-align     : center !important;
    background     : var(--alq-accent, #b8912a) !important;
    color          : #fff !important;
    border         : none !important;
    border-radius  : var(--alq-wc-radius) !important;
    padding        : .45rem 1rem !important;
    font-size      : .85rem !important;
    font-weight    : 600 !important;
    cursor         : pointer !important;
    transition     : background .2s !important;
    text-decoration: none !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart a.button:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart button:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
    color     : #fff !important;
}

/* Sale badge — perfect circle, matches .alq-pw-sale-badge on archive cards */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-onsale {
    position       : absolute !important;
    top            : .55rem !important;
    left           : .55rem !important;
    display        : flex !important;
    align-items    : center !important;
    justify-content: center !important;
    background     : var(--alq-accent, #b8912a) !important;
    color          : #fff !important;
    font-size      : .68rem !important;
    font-weight    : 700 !important;
    letter-spacing : -.01em !important;
    width          : 2.4rem !important;
    height         : 2.4rem !important;
    min-width      : 0 !important;
    padding        : 0 !important;
    margin         : 0 !important;
    overflow       : hidden !important;
    border-radius  : 50% !important;
    z-index        : 5 !important;
    pointer-events : none !important;
    box-shadow     : 0 2px 6px rgba(0,0,0,.2) !important;
    line-height    : 1 !important;
}

/* Responsive */
@media (max-width: 767px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 479px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
        grid-template-columns: 1fr !important;
    }
}


/* =============================================================================
   25. Single Product — Social Share Buttons (.alq-share-*)
   MOVED to css/custom.css (search "Social Share Buttons") so the same
   styling also applies on blog posts, which don't load this stylesheet.
   Rendered via alqamara_render_share_buttons() (inc/helpers.php), called
   from woocommerce_single_product_summary (inc/woocommerce.php 6-B) here
   and from single.php for blog posts.
============================================================================= */

/* =============================================================================
   26. My Account Page
   Dashboard · Orders · Downloads · Addresses · Account Details · Login
============================================================================= */

/* ── 26a. Layout ─────────────────────────────────────────────────────────── */
/* WC wraps nav + content in .woocommerce — make it flex.
 * Scoped to "#alq-wc-main > .woocommerce" (direct child of the page's main
 * WC content wrapper), NOT the old ".woocommerce-account .woocommerce" —
 * that selector matched ANY element with class "woocommerce" anywhere on
 * a My Account page, which also includes the footer's WooCommerce product
 * widgets (their wrapper div carries class "widget woocommerce
 * widget_top_rated_products") and the mini-cart drawer (also class
 * "woocommerce"). Found live 2026-08-13: on My Account pages, the footer's
 * "Top Rated Products" widget was being forced into this same flex row
 * layout, pushing its title and product list side-by-side instead of
 * stacked and spilling the product title into the next footer column.
 *
 * FURTHER SCOPED to `body.woocommerce-account` — found live 2026-08-14:
 * `#alq-wc-main > .woocommerce` ALSO matches the classic order-received
 * (Thank You) page markup, where WooCommerce's thankyou.php template
 * wraps its own content in a plain `<div class="woocommerce">` that is
 * likewise a direct child of `#alq-wc-main`. Without page-type scoping,
 * this rule turned THAT wrapper into a flex row too, so the funnel-steps
 * bar (inserted as a sibling of `.woocommerce-order` by js/main.js) and
 * the actual order content ended up side-by-side instead of stacked full
 * width — the bug the user reported via screenshot. My Account is the
 * only page that actually needs the nav+content flex row, so this and
 * the sibling rules below are now scoped to it explicitly. */
body.woocommerce-account #alq-wc-main > .woocommerce {
    display  : flex !important;
    gap      : 1.5rem !important;
    align-items: flex-start !important;
}
/* WooCommerce core's own stylesheet puts a `content:" "; display:table;`
 * clearfix on `.woocommerce::before/::after` (for its default float-based
 * layout). Turning `.woocommerce` into a flex container above doesn't
 * remove that pseudo-element — it just turns it into an actual, invisible
 * FIRST flex item (0 width, but still a flex item), which pushed the real
 * first item (the nav) one `gap` (1.5rem) to the right of the container's
 * edge. This was the exact cause of the nav sidebar sitting ~24px right of
 * the page container on the real My Account page while the new Wishlist
 * page's sidebar (a plain custom `<div>`, never subject to this WC
 * clearfix rule) sat flush — found via live bounding-rect inspection
 * showing an unexplained gap between `.woocommerce`'s own left edge and
 * its child `<nav>`'s left edge equal to exactly the flex `gap` value. */
body.woocommerce-account #alq-wc-main > .woocommerce::before,
body.woocommerce-account #alq-wc-main > .woocommerce::after {
    display: none !important;
}

/* ── 26b. Sidebar navigation ─────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
    flex         : 0 0 220px !important;
    width        : 220px !important;
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    box-shadow   : var(--alq-wc-shadow) !important;
    overflow     : hidden !important;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin    : 0 !important;
    padding   : 0 !important;
}
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--alq-wc-border) !important;
    margin       : 0 !important;
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none !important; }

/* Nav links */
.woocommerce-MyAccount-navigation li a {
    display        : flex !important;
    align-items    : center !important;
    gap            : .65rem !important;
    padding        : .85rem 1.1rem !important;
    color          : var(--alq-primary, #0f172a) !important;
    font-weight    : 500 !important;
    font-size      : .88rem !important;
    text-decoration: none !important;
    transition     : background .15s, color .15s, padding-left .15s !important;
}
.woocommerce-MyAccount-navigation li a::before {
    content            : '' !important;
    display            : inline-block !important;
    width              : 16px !important;
    height             : 16px !important;
    background-size    : contain !important;
    background-repeat  : no-repeat !important;
    background-position: center !important;
    flex-shrink        : 0 !important;
    opacity            : .55 !important;
    transition         : opacity .15s !important;
}
.woocommerce-MyAccount-navigation li a:hover {
    background  : var(--alq-wc-light, #f9fafb) !important;
    color       : var(--alq-accent, #b8912a) !important;
    padding-left: 1.35rem !important;
}
.woocommerce-MyAccount-navigation li a:hover::before { opacity: 1 !important; }

/* Active state */
.woocommerce-MyAccount-navigation li.is-active a {
    background : var(--alq-accent, #b8912a) !important;
    color      : #fff !important;
    font-weight: 600 !important;
}
.woocommerce-MyAccount-navigation li.is-active a::before {
    opacity: 1 !important;
    filter : brightness(0) invert(1) !important;
}

/* SVG icons per item (accent color stroke, URL-encoded) */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8912a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8912a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='9' y1='16' x2='13' y2='16'/%3E%3C/svg%3E") !important;
}
/* Wishlist / Compare — added via woocommerce_account_menu_items filter in
   inc/wishlist-compare.php (keys 'alq-wishlist' / 'alq-compare'). WC turns
   the array key straight into this li class, same as every native
   endpoint above — without an explicit icon rule these two items had no
   ::before background-image at all, so they sat with a blank 16px gap and
   looked "empty" next to Dashboard/Orders/etc. Same SVG stroke style
   (accent color, 2px round-cap) as the rest of this nav for visual
   consistency. */
.woocommerce-MyAccount-navigation-link--alq-wishlist a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8912a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation-link--alq-compare a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8912a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3l4 4-4 4'/%3E%3Cpath d='M21 7H9'/%3E%3Cpath d='M7 21l-4-4 4-4'/%3E%3Cpath d='M3 17h12'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8912a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8912a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8912a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e53e3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
}
/* Log out — always red, never accent active style */
.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color     : #e53e3e !important;
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: #fff5f5 !important;
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    opacity: .7 !important;
    filter : none !important;  /* keep red icon, don't invert */
}

/* ── 26c. Content area card ───────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
    flex         : 1 1 0 !important;
    min-width    : 0 !important;
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    box-shadow   : var(--alq-wc-shadow) !important;
    padding      : 1.5rem !important;
}

/* ── 26d. Section headings inside content ────────────────────────────────── */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-size    : 1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .6rem !important;
    margin-top   : 0 !important;
    margin-bottom: .85rem !important;
}

/* ── 26e. Dashboard welcome text ─────────────────────────────────────────── */
.woocommerce-dashboard .woocommerce-MyAccount-content > p:first-child {
    font-size    : .92rem !important;
    color        : var(--alq-wc-muted, #6b7280) !important;
    border-bottom: 1px solid var(--alq-wc-border) !important;
    padding-bottom: .85rem !important;
    margin-bottom : 1rem !important;
}
.woocommerce-dashboard .woocommerce-MyAccount-content > p:first-child strong {
    color    : var(--alq-primary, #0f172a) !important;
    font-size: 1rem !important;
}

/* ── 26f. Orders table ────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
    width          : 100% !important;
    border-collapse: collapse !important;
}
.woocommerce-MyAccount-content table.woocommerce-orders-table thead th,
.woocommerce-MyAccount-content table.shop_table thead th {
    font-size     : .88rem !important;
    font-weight   : 700 !important;
    color         : var(--alq-primary, #0f172a) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom : 2px solid var(--alq-wc-border) !important;
    padding       : .5rem .75rem .6rem !important;
    text-align    : left !important;
}
.woocommerce-MyAccount-content table.woocommerce-orders-table tbody td,
.woocommerce-MyAccount-content table.shop_table tbody td {
    padding       : .75rem !important;
    border-bottom : 1px solid var(--alq-wc-border) !important;
    font-size     : .875rem !important;
    vertical-align: middle !important;
}
.woocommerce-MyAccount-content table tbody tr:last-child td { border-bottom: none !important; }

/* "View" / action buttons in orders table */
.woocommerce-MyAccount-content .woocommerce-button.button,
.woocommerce-MyAccount-content td .button {
    background   : transparent !important;
    border       : 1.5px solid var(--alq-accent, #b8912a) !important;
    color        : var(--alq-accent, #b8912a) !important;
    padding      : .3rem .85rem !important;
    border-radius: 4px !important;
    font-size    : .78rem !important;
    font-weight  : 600 !important;
    transition   : background .15s, color .15s !important;
    text-decoration: none !important;
}
.woocommerce-MyAccount-content .woocommerce-button.button:hover,
.woocommerce-MyAccount-content td .button:hover {
    background: var(--alq-accent, #b8912a) !important;
    color     : #fff !important;
}

/* Order status mark */
.woocommerce-MyAccount-content mark.order-status {
    background   : var(--alq-wc-light, #f3f4f6) !important;
    border-radius: 20px !important;
    padding      : .2rem .7rem !important;
    font-size    : .75rem !important;
    font-weight  : 600 !important;
    color        : var(--alq-primary, #0f172a) !important;
}
.woocommerce-MyAccount-content mark.order-status.status-completed { background: #d1fae5 !important; color: #065f46 !important; }
.woocommerce-MyAccount-content mark.order-status.status-processing { background: #dbeafe !important; color: #1e40af !important; }
.woocommerce-MyAccount-content mark.order-status.status-on-hold { background: #fef3c7 !important; color: #92400e !important; }
.woocommerce-MyAccount-content mark.order-status.status-cancelled { background: #fee2e2 !important; color: #991b1b !important; }
/* Added 2026-08-12 alongside the JS re-wrapper above — the original 4
   colors only covered the statuses visible in testing at the time; these
   3 fill out the rest of WooCommerce's default status set so nothing
   falls back to the plain neutral color. */
.woocommerce-MyAccount-content mark.order-status.status-pending { background: #fef9c3 !important; color: #854d0e !important; }
.woocommerce-MyAccount-content mark.order-status.status-refunded { background: #e0e7ff !important; color: #3730a3 !important; }
.woocommerce-MyAccount-content mark.order-status.status-failed { background: #fecaca !important; color: #7f1d1d !important; }

/* ── 26g. Addresses ──────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-Addresses {
    display: flex !important;
    gap    : 1rem !important;
}
.woocommerce-MyAccount-content .woocommerce-Address {
    flex         : 1 !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    padding      : 1.1rem 1.25rem !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
    display        : flex !important;
    justify-content: space-between !important;
    align-items    : center !important;
    border-bottom  : 2px solid var(--alq-wc-border) !important;
    padding-bottom : .5rem !important;
    margin-bottom  : .75rem !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    font-size    : 1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: none !important;
    padding      : 0 !important;
    margin       : 0 !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit,
.woocommerce-MyAccount-content address + a.edit {
    font-size      : .78rem !important;
    font-weight    : 600 !important;
    color          : var(--alq-accent, #b8912a) !important;
    text-decoration: none !important;
    border         : 1.5px solid var(--alq-accent, #b8912a) !important;
    border-radius  : 4px !important;
    padding        : .2rem .65rem !important;
    transition     : background .15s, color .15s !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover,
.woocommerce-MyAccount-content address + a.edit:hover {
    background: var(--alq-accent, #b8912a) !important;
    color     : #fff !important;
}
.woocommerce-MyAccount-content address {
    font-style : normal !important;
    font-size  : .875rem !important;
    line-height: 1.8 !important;
    color      : var(--alq-primary, #0f172a) !important;
}

/* ── 26g-2. Account Dashboard cards ────────────────────────────────────────
   woocommerce/myaccount/dashboard.php override — the two-card layout
   (Account Details + Recent Orders) shown on the My Account landing tab.
   `.woocommerce-Address` inside the summary card intentionally reuses the
   styling from §26g above (border/radius/header/edit-link) rather than
   duplicating it — same visual language as the dedicated Addresses tab.

   Stacked full-width, NOT side-by-side (changed 2026-08-14, user request +
   agreed on reflection): the two cards' content lengths are unrelated and
   vary independently — Account Details is a fixed 2-3 rows, Recent Orders
   can be anywhere from an empty state to 5 full rows. Side-by-side with
   `align-items:start` left a visibly mismatched pair of box heights (worse
   still when Orders was the short/empty one, sitting next to a taller card
   with a large gap of nothing beside it). Stacking removes the mismatch
   entirely and lets each card use the full row width, which also gives the
   orders list more room before its columns need to wrap on narrow screens. */
.alq-account-greeting {
    font-size    : .9rem !important;
    color        : var(--alq-wc-muted) !important;
    margin-bottom: 1.5rem !important;
}
.alq-account-cards {
    display : flex !important;
    flex-direction: column !important;
    gap     : 1.25rem !important;
}
.alq-account-card {
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    padding      : 1.25rem 1.4rem !important;
    background   : #fff !important;
}
.alq-account-card__header {
    /* This IS the full-width divider the user wants kept — it spans the
       whole header row, from the heading on the left to the Edit/View-all
       link on the right (2026-08-14, confirmed after an earlier mix-up:
       first read of the request removed this rule by mistake, thinking it
       was the redundant one — it wasn't; see the h2 override below for the
       one that actually needed removing). */
    display        : flex !important;
    justify-content: space-between !important;
    align-items    : center !important;
    border-bottom  : 2px solid var(--alq-wc-border) !important;
    padding-bottom : .6rem !important;
    margin-bottom  : 1rem !important;
}
.alq-account-card__header h2 {
    /* §26d ("Section headings inside content") applies a border-bottom to
       EVERY h2/h3 under .woocommerce-MyAccount-content, sized to the h2's
       own width — since this h2 is a flex item (not full-width), that
       produced a SHORT second border directly under just the heading text,
       sitting right above the full-width one on .alq-account-card__header
       above. That short one is what the user actually meant to cut — reset
       it here so only the one full-width line remains. */
    border-bottom : none !important;
    padding-bottom: 0 !important;
    margin        : 0 !important;
    font-size     : 1rem !important;
    font-weight   : 700 !important;
    color         : var(--alq-primary, #0f172a) !important;
    display       : flex !important;
    align-items   : center !important;
    gap           : .45rem !important;
}
.alq-account-card__header h2 i { color: var(--alq-accent, #b8912a) !important; }
.alq-account-card__link {
    font-size      : .8rem !important;
    font-weight    : 600 !important;
    color          : var(--alq-accent, #b8912a) !important;
    text-decoration: none !important;
    white-space    : nowrap !important;
}
.alq-account-card__link:hover { text-decoration: underline !important; }

/* Recent orders list */
.alq-account-orders-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.alq-account-orders-list__item + .alq-account-orders-list__item { border-top: 1px solid var(--alq-wc-border) !important; }
.alq-account-orders-list__link {
    display        : flex !important;
    flex-wrap      : wrap !important;
    align-items    : center !important;
    gap            : .5rem .75rem !important;
    padding        : .65rem 0 !important;
    text-decoration: none !important;
    color          : inherit !important;
}
.alq-account-orders-list__num  { font-weight: 700 !important; color: var(--alq-primary, #0f172a) !important; font-size: .88rem !important; }
.alq-account-orders-list__date { font-size: .78rem !important; color: var(--alq-wc-muted) !important; }
.alq-account-orders-list__total { margin-left: auto !important; font-weight: 700 !important; font-size: .88rem !important; color: var(--alq-primary, #0f172a) !important; }
.alq-account-empty { font-size: .88rem !important; color: var(--alq-wc-muted) !important; margin: 0 !important; }
.alq-account-empty a { color: var(--alq-accent, #b8912a) !important; font-weight: 600 !important; }

/* Account summary (name/email) */
.alq-account-summary { margin: 0 0 1.1rem !important; }
.alq-account-summary__row {
    display        : flex !important;
    justify-content: space-between !important;
    gap            : 1rem !important;
    font-size      : .875rem !important;
    padding        : .35rem 0 !important;
}
.alq-account-summary__row dt { color: var(--alq-wc-muted) !important; font-weight: 600 !important; margin: 0 !important; }
.alq-account-summary__row dd { color: var(--alq-primary, #0f172a) !important; margin: 0 !important; text-align: right !important; }
.alq-account-address + .alq-account-address { margin-top: .85rem !important; }

/* ── 26h. Account details & address edit forms ────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-form-row,
.woocommerce-MyAccount-content .form-row {
    margin-bottom: .85rem !important;
}
.woocommerce-MyAccount-content .woocommerce-form-row label,
.woocommerce-MyAccount-content .form-row label {
    display      : block !important;
    font-size    : .83rem !important;
    font-weight  : 600 !important;
    color        : var(--alq-primary, #0f172a) !important;
    margin-bottom: .3rem !important;
}
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    width        : 100% !important;
    border       : 1.5px solid var(--alq-wc-border) !important;
    border-radius: 6px !important;
    padding      : .6rem .85rem !important;
    font-size    : .9rem !important;
    color        : var(--alq-primary, #0f172a) !important;
    background   : #fff !important;
    transition   : border-color .2s, box-shadow .2s !important;
}
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
    border-color: var(--alq-accent, #b8912a) !important;
    outline     : none !important;
    box-shadow  : 0 0 0 3px rgba(184,145,42,.12) !important;
}
.woocommerce-MyAccount-content fieldset {
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    padding      : 1.1rem 1.25rem !important;
    margin       : 1.25rem 0 !important;
}
.woocommerce-MyAccount-content fieldset legend {
    font-size  : .88rem !important;
    font-weight: 700 !important;
    color      : var(--alq-primary, #0f172a) !important;
    padding    : 0 .5rem !important;
}
/* Submit buttons */
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-Button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
    background   : var(--alq-accent, #b8912a) !important;
    color        : #fff !important;
    border       : none !important;
    padding      : .65rem 1.75rem !important;
    border-radius: var(--alq-wc-radius) !important;
    font-weight  : 600 !important;
    font-size    : .95rem !important;
    cursor       : pointer !important;
    transition   : background .2s !important;
    margin-top   : .5rem !important;
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-Button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}

/* ── 26i. Notices ────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-notice--success {
    background   : #f0faf4 !important;
    border-left  : 4px solid #38a169 !important;
    border-radius: var(--alq-wc-radius) !important;
    color        : #276749 !important;
    font-weight  : 500 !important;
    padding      : .75rem 1rem !important;
    margin-bottom: 1rem !important;
    list-style   : none !important;
}
.woocommerce-MyAccount-content .woocommerce-error {
    background   : #fff5f5 !important;
    border-left  : 4px solid #e53e3e !important;
    border-radius: var(--alq-wc-radius) !important;
    color        : #c53030 !important;
    padding      : .75rem 1rem !important;
    margin-bottom: 1rem !important;
    list-style   : none !important;
}

/* ── 26j. Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.woocommerce-account #alq-wc-main > .woocommerce {
        flex-direction: column !important;
    }
    .woocommerce-MyAccount-navigation {
        flex : none !important;
        width: 100% !important;
    }
    .woocommerce-MyAccount-navigation ul {
        display              : grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .woocommerce-MyAccount-navigation li {
        border-right : none !important;
        border-bottom: 1px solid var(--alq-wc-border) !important;
    }
    /* Divider only between left and right column */
    .woocommerce-MyAccount-navigation li:nth-child(odd) {
        border-right: 1px solid var(--alq-wc-border) !important;
    }
    /* Last row: both items get no bottom border (card border acts as boundary) */
    .woocommerce-MyAccount-navigation li:nth-last-child(-n+2) {
        border-bottom: none !important;
    }
    .woocommerce-MyAccount-content .woocommerce-Addresses {
        flex-direction: column !important;
    }
    .woocommerce-MyAccount-content table.woocommerce-orders-table thead { display: none !important; }
    .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td {
        display: block !important;
        text-align: right !important;
        padding: .5rem .75rem !important;
    }
    .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td::before {
        content    : attr(data-title) !important;
        float      : left !important;
        font-weight: 700 !important;
    }
}

/* =============================================================================
   27. Login / Register Page
   Body class: .woocommerce-account (no .logged-in)
   Forms: .woocommerce-form-login  /  .woocommerce-form-register
============================================================================= */

/* Override section 26 layout for the logged-out state — no sidebar, column-centered */
.woocommerce-account:not(.logged-in) .woocommerce {
    flex-direction: column !important;
    align-items   : center !important;
}

/* Hide external headings (single-form & two-column) — moved inside cards */
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .u-column1 h2,
.woocommerce-account:not(.logged-in) .u-column2 h2 {
    display: none !important;
}
/* Remove WC's default form top-margin in single-form mode */
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-form-register {
    margin-top: 0 !important;
}
/* Inject "Login" / "Register" headings inside each card — same as Reset Password */
.woocommerce-form-login::before {
    content      : "Login";
    display      : block !important;
    font-size    : 1.1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .65rem !important;
    margin-bottom: 1.1rem !important;
}
.woocommerce-form-register::before {
    content      : "Register";
    display      : block !important;
    font-size    : 1.1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .65rem !important;
    margin-bottom: 1.1rem !important;
}

/* ── 27a. Form cards ─────────────────────────────────────────────────────── */
.woocommerce-form-login,
.woocommerce-form-register {
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    box-shadow   : var(--alq-wc-shadow) !important;
    padding      : 1.75rem 2rem !important;
    width        : 100% !important;  /* needed in flex-column + align-items:center */
    max-width    : 480px !important;
    margin       : 0 !important;
}

/* ── 27b. Form headings ──────────────────────────────────────────────────── */
.woocommerce-form-login h2,
.woocommerce-form-register h2 {
    font-size    : 1.1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .65rem !important;
    margin-top   : 0 !important;
    margin-bottom: 1.25rem !important;
}

/* ── 27c. Labels ─────────────────────────────────────────────────────────── */
.woocommerce-form-login .woocommerce-form__label,
.woocommerce-form-register .woocommerce-form__label {
    display      : block !important;
    font-size    : .83rem !important;
    font-weight  : 600 !important;
    color        : var(--alq-primary, #0f172a) !important;
    margin-bottom: .3rem !important;
}

/* ── 27d. Text inputs ────────────────────────────────────────────────────── */
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"] {
    width        : 100% !important;
    border       : 1.5px solid var(--alq-wc-border) !important;
    border-radius: 6px !important;
    padding      : .6rem .85rem !important;
    font-size    : .9rem !important;
    color        : var(--alq-primary, #0f172a) !important;
    background   : #fff !important;
    transition   : border-color .2s, box-shadow .2s !important;
}
.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="password"]:focus,
.woocommerce-form-login input[type="email"]:focus,
.woocommerce-form-register input[type="text"]:focus,
.woocommerce-form-register input[type="password"]:focus,
.woocommerce-form-register input[type="email"]:focus {
    border-color: var(--alq-accent, #b8912a) !important;
    outline     : none !important;
    box-shadow  : 0 0 0 3px rgba(184,145,42,.12) !important;
}

/* ── 27e. Form row spacing ───────────────────────────────────────────────── */
.woocommerce-form-login .woocommerce-form-row,
.woocommerce-form-register .woocommerce-form-row {
    margin-bottom: .85rem !important;
}

/* ── 27f. Remember me row ────────────────────────────────────────────────── */
.woocommerce-form-login__rememberme {
    display    : flex !important;
    align-items: center !important;
    gap        : .4rem !important;
    font-size  : .85rem !important;
    cursor     : pointer !important;
}

/* ── 27g. Submit buttons ─────────────────────────────────────────────────── */
.woocommerce-form-login__submit,
.woocommerce-form-register input[type="submit"],
.woocommerce-form-login input[type="submit"] {
    background     : var(--alq-accent, #b8912a) !important;
    color          : #fff !important;
    border         : none !important;
    padding        : .65rem 1.75rem !important;
    border-radius  : var(--alq-wc-radius) !important;
    font-weight    : 600 !important;
    font-size      : .95rem !important;
    cursor         : pointer !important;
    transition     : background .2s !important;
    text-decoration: none !important;
    margin-top     : .25rem !important;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register input[type="submit"]:hover,
.woocommerce-form-login input[type="submit"]:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
    color     : #fff !important;
}

/* ── 27h. Lost password + privacy text ──────────────────────────────────── */
.woocommerce-form-login .lost_password {
    margin-top: .65rem !important;
}
.woocommerce-form-login .lost_password a {
    font-size      : .82rem !important;
    color          : var(--alq-accent, #b8912a) !important;
    text-decoration: none !important;
}
.woocommerce-form-login .lost_password a:hover { text-decoration: underline !important; }
.woocommerce-privacy-policy-text {
    font-size: .8rem !important;
    color    : var(--alq-wc-muted, #6b7280) !important;
    margin   : .75rem 0 !important;
    line-height: 1.6 !important;
}
.woocommerce-privacy-policy-text a { color: var(--alq-accent, #b8912a) !important; }

/* ── 27i. Logged-out message ─────────────────────────────────────────────── */
.woocommerce-account:not(.logged-in) .woocommerce-message {
    background   : #fffbeb !important;
    border-left  : 4px solid var(--alq-accent, #b8912a) !important;
    border-radius: var(--alq-wc-radius) !important;
    color        : #78350f !important;
    font-size    : .9rem !important;
    padding      : .75rem 1rem !important;
    margin-bottom: 1rem !important;
    list-style   : none !important;
}

/* ── 27j. Two-column layout (Login + Register) ───────────────────────────── */
/* WC wraps both forms in .u-columns.col2-set when registration is enabled */
.woocommerce-account:not(.logged-in) .woocommerce .u-columns.col2-set {
    display  : flex !important;
    gap      : 1.5rem !important;
    width    : 100% !important;
    max-width: 980px !important;
}
.woocommerce-account:not(.logged-in) .woocommerce .u-column1,
.woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    flex : 1 !important;
    float: none !important;
    width: auto !important;
}
/* Column headings ("Login" / "Register") */
.woocommerce-account:not(.logged-in) .u-column1 h2,
.woocommerce-account:not(.logged-in) .u-column2 h2 {
    font-size    : 1.1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    margin-bottom: .65rem !important;
}
/* Privacy policy text inside register form */
.woocommerce-form-register .woocommerce-privacy-policy-text {
    font-size  : .8rem !important;
    color      : var(--alq-wc-muted, #6b7280) !important;
    margin     : .75rem 0 !important;
    line-height: 1.6 !important;
}
/* "A link to set a new password…" helper text */
.woocommerce-form-register > p:not([class]) {
    font-size  : .82rem !important;
    color      : var(--alq-wc-muted, #6b7280) !important;
    margin     : .25rem 0 .85rem !important;
    line-height: 1.5 !important;
}

/* ── 27k. Hide breadcrumb bar on logged-out login/register page only ─────── */
/* Lost Password keeps its breadcrumb (woocommerce-lost-password class)       */
.woocommerce-account:not(.logged-in):not(.woocommerce-lost-password) .alq-shop-header-bar {
    display: none !important;
}

/* ── 27l-0. Lost Password — reduce flex gap inside .woocommerce wrapper ────── */
.woocommerce-lost-password .woocommerce {
    gap: 1rem !important;
}

/* ── 27l. Lost / Reset Password page ─────────────────────────────────────── */
/* Body class: woocommerce-lost-password */
.woocommerce-ResetPassword {
    background   : #fff !important;
    border       : 1px solid var(--alq-wc-border) !important;
    border-radius: var(--alq-wc-radius) !important;
    box-shadow   : var(--alq-wc-shadow) !important;
    padding      : 1.75rem 2rem !important;
    width        : 100% !important;
    max-width    : 480px !important;
    margin       : 0 auto !important;
}
/* Heading injected at the top of the card */
.woocommerce-lost-password .woocommerce-ResetPassword::before {
    content      : "Reset Password";
    display      : block !important;
    font-size    : 1.1rem !important;
    font-weight  : 700 !important;
    color        : var(--alq-primary, #0f172a) !important;
    border-bottom: 2px solid var(--alq-wc-border) !important;
    padding-bottom: .65rem !important;
    margin-bottom: 1.1rem !important;
}
/* Description paragraph (first <p> inside the form) */
.woocommerce-ResetPassword > p:first-of-type {
    font-size    : .85rem !important;
    color        : var(--alq-wc-muted, #6b7280) !important;
    line-height  : 1.6 !important;
    background   : var(--alq-wc-light, #f9fafb) !important;
    border-left  : 3px solid var(--alq-accent, #b8912a) !important;
    border-radius: 4px !important;
    padding      : .6rem .85rem !important;
    margin-bottom: 1rem !important;
}
/* Override WC's 47%-wide form-row-first on this single-input form */
.woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row-last {
    width        : 100% !important;
    float        : none !important;
    margin-right : 0 !important;
    margin-left  : 0 !important;
}
/* Input itself — full width with correct box model */
.woocommerce-ResetPassword input.input-text,
.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword input[type="email"] {
    width     : 100% !important;
    box-sizing: border-box !important;
}

/* Label */
.woocommerce-ResetPassword label {
    display      : block !important;
    font-size    : .83rem !important;
    font-weight  : 600 !important;
    color        : var(--alq-primary, #0f172a) !important;
    margin-bottom: .3rem !important;
}
/* Input */
.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword input[type="email"] {
    width        : 100% !important;
    border       : 1.5px solid var(--alq-wc-border) !important;
    border-radius: 6px !important;
    padding      : .6rem .85rem !important;
    font-size    : .9rem !important;
    color        : var(--alq-primary, #0f172a) !important;
    background   : #fff !important;
    transition   : border-color .2s, box-shadow .2s !important;
}
.woocommerce-ResetPassword input[type="text"]:focus,
.woocommerce-ResetPassword input[type="email"]:focus {
    border-color: var(--alq-accent, #b8912a) !important;
    outline     : none !important;
    box-shadow  : 0 0 0 3px rgba(184,145,42,.12) !important;
}
/* Submit button */
.woocommerce-ResetPassword button[type="submit"] {
    background   : var(--alq-accent, #b8912a) !important;
    color        : #fff !important;
    border       : none !important;
    padding      : .65rem 1.75rem !important;
    border-radius: var(--alq-wc-radius) !important;
    font-weight  : 600 !important;
    font-size    : .95rem !important;
    cursor       : pointer !important;
    transition   : background .2s !important;
    margin-top   : .25rem !important;
}
.woocommerce-ResetPassword button[type="submit"]:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}

/* ── 27l. Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .woocommerce-account:not(.logged-in) .woocommerce {
        flex-direction: column !important;
        align-items   : stretch !important;
    }
    .woocommerce-account:not(.logged-in) .woocommerce .u-columns.col2-set {
        flex-direction: column !important;
    }
    .woocommerce-form-login,
    .woocommerce-form-register,
    .woocommerce-ResetPassword {
        max-width: none !important;
        padding  : 1.25rem !important;
    }
}


/* =============================================================================
   28. No Products Found / Empty Category
   Template: woocommerce/loop/no-products-found.php
============================================================================= */

.alq-no-products {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    text-align     : center;
    padding        : 4rem 1.5rem;
    width          : 100%;
}

.alq-no-products__icon {
    font-size  : 3.5rem;
    line-height: 1;
    color      : var(--alq-accent, #c9a96e);
    margin-bottom: 1.25rem;
    opacity    : .75;
}

.alq-no-products__title {
    font-size  : 1.35rem;
    font-weight: 700;
    color      : var(--alq-primary, #0f172a);
    margin-bottom: .5rem;
}

.alq-no-products__msg {
    font-size  : .95rem;
    color      : #64748b;
    max-width  : 420px;
    margin-bottom: 1.75rem;
    line-height: 1.6;
}

/* AJAX shop filtering (js/alq-ajax-shop.js) reuses the existing
   .alq-products-col[aria-busy="true"] spinner defined earlier in this file —
   no separate loading style needed here. */


/* =============================================================================
   21. WISHLIST / COMPARE PAGES  (native — inc/wishlist-compare.php)
   Wishlist page: My-Account-style two-column layout (sidebar + row-list),
   styled below. Compare page is a dedicated side-by-side table, also
   styled below.
============================================================================= */

/* ── Wishlist page layout — sidebar + main card, same visual language
   (white bg, border, radius, shadow) as .woocommerce-MyAccount-navigation /
   .woocommerce-MyAccount-content (Section 26), but with its own outer
   flex wrapper instead of depending on the `.woocommerce-account .woocommerce`
   ancestor rule — this page is a standalone template, not WC's actual
   My Account page, and its sidebar has to work whether the visitor is
   logged in (real account nav, via woocommerce_account_navigation()) or a
   guest (a login-prompt card in the same slot) — so it can't assume the
   `.woocommerce-account`/`.logged-in` body classes are reliably in the
   states this theme needs. ── */
.alq-wishlist-layout {
    display    : flex;
    gap        : 1.5rem;
    align-items: flex-start;
}
.alq-wishlist-sidebar {
    flex : 0 0 220px;
    width: 220px;
}
/* Reuses the real My Account nav markup (same <nav class="woocommerce-MyAccount-navigation">
   output as the My Account page itself, via woocommerce_account_navigation())
   — its own item/icon/hover/active-state CSS in Section 26 already applies
   here since those rules target the class directly, not through the
   `.woocommerce-account .woocommerce` ancestor (only that ONE outer
   positioning rule needed the ancestor, which this wrapper replaces). */

.alq-wishlist-guest-card {
    background   : #fff;
    border       : 1px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    box-shadow   : var(--alq-wc-shadow);
    padding      : 1.75rem 1.25rem;
    text-align   : center;
}
.alq-wishlist-guest-card i {
    font-size  : 2rem;
    color      : var(--alq-wc-muted, #94a3b8);
    display    : block;
    margin-bottom: .75rem;
}
.alq-wishlist-guest-card h3 {
    font-size  : .95rem;
    font-weight: 700;
    color      : var(--alq-primary, #0f172a);
    margin-bottom: .4rem;
}
.alq-wishlist-guest-card p {
    font-size  : .8rem;
    color      : var(--alq-wc-muted, #64748b);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.alq-wishlist-guest-card .button {
    width: 100%;
    justify-content: center;
}

.alq-wishlist-main {
    flex         : 1 1 0;
    min-width    : 0;
    background   : #fff;
    border       : 1px solid var(--alq-wc-border);
    border-radius: var(--alq-wc-radius);
    box-shadow   : var(--alq-wc-shadow);
    padding      : 1.5rem;
}

.alq-wishlist-page-header {
    border-bottom: 2px solid var(--alq-wc-border);
    padding-bottom: .85rem;
    margin-bottom : 1.25rem;
}
.alq-wishlist-page-header h2 {
    font-size  : 1.1rem;
    font-weight: 700;
    color      : var(--alq-primary, #0f172a);
    margin     : 0 0 .3rem;
}
.alq-wishlist-page-header p {
    font-size  : .85rem;
    color      : var(--alq-wc-muted, #64748b);
    margin     : 0;
}
.alq-wishlist-page-count { font-weight: 700; color: var(--alq-accent, #b8912a); }

/* ── Row list ──────────────────────────────────────────────────────────
 * Same 2-column grid layout at every screen size, by request — this used
 * to be a 3-segment side-by-side flex row (thumb | body | actions) on
 * desktop that only switched to a stacked grid under a mobile media
 * query. The user preferred the mobile version's look outright (image,
 * title beside it, price under the title, Add to Cart under the price)
 * and asked for it everywhere, not just under 768px — so this is now the
 * ONE unconditional layout; the mobile media query below only still
 * handles the page-level sidebar-stacking behaviour, not the row shape. */
.alq-wishlist-row {
    display              : grid;
    grid-template-columns: 76px 1fr;
    column-gap           : .85rem;
    row-gap              : .4rem;
    align-items          : start;
    position             : relative;
    padding              : 1rem 2.4rem 1rem 0; /* right: room for the absolutely-positioned remove button */
    border-bottom        : 1px solid var(--alq-wc-border);
}
.alq-wishlist-row:last-child { border-bottom: none; padding-bottom: 0; }
/* NOTE: deliberately no `:first-child { padding-top: 0 }` override here
 * anymore (there used to be one) — it made the first row's content start
 * flush with the row's top edge while every OTHER row still had its
 * normal 1rem padding-top, but `.alq-wishlist-remove-row-btn` below uses
 * one fixed `top` value for every row. That mismatch is exactly why the
 * remove icon looked correctly placed on the first product only, then
 * rode up flush against the top border on every row after it — the
 * button's `top` was tuned for the first row's zeroed-out padding, not
 * the normal 1rem the rest of the rows actually have. Keeping padding-top
 * uniform on every row (a slightly larger, but harmless, gap under the
 * page header above the first item) makes one `top` value correct
 * everywhere instead of only for one special-cased row. */

.alq-wishlist-row-thumb {
    grid-column  : 1;
    grid-row     : 1 / span 2;
    width        : 76px;
    height       : 76px;
    border-radius: 8px;
    overflow     : hidden;
    display      : block;
    border       : 1px solid var(--alq-wc-border);
}
.alq-wishlist-row-thumb img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.alq-wishlist-row-body {
    grid-column: 2;
    grid-row   : 1;
    min-width  : 0;
}
.alq-wishlist-row-title {
    /* Wraps onto a second line rather than truncating with an ellipsis —
       with the actions row now living underneath instead of squeezed in
       beside the title, the body column has the full row width to
       itself, so there's no need to cut long titles off. */
    display      : block;
    font-size  : .95rem;
    font-weight: 600;
    color      : var(--alq-primary, #0f172a);
    text-decoration: none;
    margin-bottom: .3rem;
}
.alq-wishlist-row-title:hover { color: var(--alq-accent, #b8912a); }
.alq-wishlist-row-rating { margin-bottom: .3rem; }
/* WooCommerce's OWN plugin stylesheet sets `.woocommerce .star-rating{float:right}`
 * as its generic default (meant for contexts like the single-product page,
 * where the rating floats next to other summary text) — our theme's own
 * `.woocommerce .star-rating` rule (Section 09, further up this file)
 * never redeclares `float` at all, so that plugin default keeps applying
 * everywhere it isn't specifically overridden, this row included. That's
 * why the stars rendered pinned to the row's far right edge instead of
 * sitting under the title where the rest of `.alq-wishlist-row-body`'s
 * children stack normally. WooCommerce itself does the identical
 * `float:none` override for its own shop-loop cards (`.products
 * .star-rating`) for the same reason — this is that same fix, scoped to
 * this row instead of changing the global default. */
.alq-wishlist-row-rating .star-rating { float: none; }
.alq-wishlist-row-price  { font-size: .9rem; }
/* Sale-price underline — WooCommerce wraps the current (discounted)
 * price in an `<ins>` tag, which browsers underline by default via their
 * user-agent stylesheet unless something resets it. Every OTHER price
 * display in this theme already does this reset (`.alq-pw-price ins`,
 * `.alq-search-result-price ins`, `.alq-wpr-price ins`, the single
 * product page price) — this row's price was simply missed when the
 * Wishlist page was built, since it wasn't built by copying one of those
 * existing price components. */
.alq-wishlist-row-price del { color: var(--alq-wc-muted, #9ca3af); font-weight: 400; }
.alq-wishlist-row-price ins { text-decoration: none; }

.alq-wishlist-row-actions {
    grid-column    : 2;
    grid-row       : 2;
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    justify-content: flex-start;
    align-items    : center;
    gap            : .5rem;
}
/* AJAX "View cart" link WooCommerce appends next to the Add to Cart
 * button after a successful add. Without this it falls back to a bare
 * unstyled text link — the shop-loop card already solves this with
 * `.alq-pw-cart .added_to_cart` (a gold-outline button matching Add to
 * Cart), but that selector doesn't reach this row's own wrapper, so the
 * Wishlist page looked inconsistent with every other Add to Cart button
 * on the site. Same visual style, just `inline-flex` instead of `block`
 * since this row is a horizontal layout (button sits beside Add to Cart,
 * not stacked under it like the vertical shop card). Same rule is reused
 * for the Compare page's add-to-cart table cell — see
 * `.alq-compare-cart-cell .added_to_cart` in the Compare table section
 * below, identical styling for the identical underlying issue. */
.alq-wishlist-row-actions .added_to_cart,
.alq-compare-cart-cell .added_to_cart {
    display         : inline-flex;
    align-items     : center;
    white-space     : nowrap;
    padding         : .5rem .9rem;
    font-size       : .78rem;
    font-weight     : 600;
    text-decoration : none;
    border          : 1.5px solid var(--alq-accent, #b8912a);
    border-radius   : 5px;
    color           : var(--alq-accent, #b8912a) !important;
    background      : transparent;
    transition      : background .2s, color .2s;
}
.alq-wishlist-row-actions .added_to_cart:hover,
.alq-compare-cart-cell .added_to_cart:hover {
    background : var(--alq-accent, #b8912a);
    color      : #fff !important;
}
.alq-wishlist-remove-row-btn {
    /* `top` matches the row's own `padding-top` (1rem) so the button
       aligns with the thumb/title's actual top edge — now that every row
       has the same padding-top (no more `:first-child` special case),
       one fixed value is correct for every row instead of only the
       first one. Sits in the padding room reserved by
       `.alq-wishlist-row`'s `padding-right:2.4rem`, so it never competes
       with the Add to Cart / View Cart buttons for width. */
    position       : absolute;
    top            : 1rem;
    right          : 0;
    width          : 2.1rem;
    height         : 2.1rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : #fff;
    border         : 1px solid var(--alq-wc-border);
    border-radius  : 50%;
    color          : #dc2626;
    font-size      : .9rem;
    flex-shrink    : 0;
    transition     : background .2s, border-color .2s;
}
.alq-wishlist-remove-row-btn:hover {
    background  : #fee2e2;
    border-color: #dc2626;
}
.alq-wishlist-remove-row-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Empty state (inside .alq-wishlist-main, next to the sidebar —
   deliberately NOT the full-width .alq-empty-cart used on other pages,
   so the layout stays consistent whether the list has items or not) ── */
.alq-wishlist-empty-state {
    text-align: center;
    padding   : 2.5rem 1rem;
}
.alq-wishlist-empty-state i {
    font-size  : 2.5rem;
    color      : var(--alq-accent, #b8912a);
    display    : block;
    margin-bottom: 1rem;
}
.alq-wishlist-empty-state h3 {
    font-size  : 1.05rem;
    font-weight: 700;
    color      : var(--alq-primary, #0f172a);
    margin-bottom: .4rem;
}
.alq-wishlist-empty-state p {
    font-size  : .85rem;
    color      : var(--alq-wc-muted, #64748b);
    margin-bottom: 1.25rem;
}

.alq-wishlist-load-more-wrap {
    text-align: center;
    margin-top: 1.5rem;
}
.alq-wishlist-load-more-btn {
    min-width: 160px;
}
.alq-wishlist-load-more-btn:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 767.98px) {
    .alq-wishlist-layout { flex-direction: column; }
    .alq-wishlist-sidebar { width: 100%; flex: none; }
    /* `.alq-wishlist-main` has `flex:1 1 0` in its base rule, which grows
     * it to fill available space along the flex container's MAIN axis —
     * fine on desktop where the main axis is horizontal (row direction),
     * but once `.alq-wishlist-layout` switches to `flex-direction:column`
     * here, the main axis becomes VERTICAL, so `flex:1 1 0` stops
     * affecting width at all. With `align-items:flex-start` on the
     * container (not `stretch`), the item's width along the now-cross
     * axis defaults to shrink-to-fit its content instead of filling the
     * row — which is exactly why the whole card looked like it was
     * "pulled in from the right": it was rendering slightly narrower than
     * the full available width, leaving a gap on the right side of the
     * page. Explicit `width:100%` here fixes it regardless of content. */
    .alq-wishlist-main { width: 100%; padding: 1rem; }
}

/* Larger thumbnail on desktop, where `.alq-wishlist-main` has plenty of
 * spare width next to the sidebar for it — the 76px base size (tuned to
 * comfortably fit a ~375px phone screen alongside the title/price/button
 * column without reintroducing horizontal overflow) looked a little small
 * once the row layout was unified across both breakpoints. Bumped for
 * screens ≥768px only; mobile keeps the smaller, overflow-safe size. */
@media (min-width: 768px) {
    .alq-wishlist-row { grid-template-columns: 108px 1fr; }
    .alq-wishlist-row-thumb { width: 108px; height: 108px; }
}

/* Redesign (2026-07-29) to match a reference screenshot the user
 * provided — rounded card wrapper, zebra-striped rows, remove(×)
 * button overlaid on the image corner instead of its own row, plus
 * Weight/Color rows and a Clear All / Print Comparison action bar
 * (page-templates/compare.php). Colors kept to the site's own navy/
 * gold palette per the user's explicit choice — the reference used
 * teal. */
.alq-compare-subtitle {
    color      : var(--alq-wc-muted, #64748b);
    font-size  : .95rem;
    margin     : .25rem 0 0;
    flex-basis : 100%; /* own line under the title+row flex container */
}

.alq-compare-table-wrap {
    /* Explicit width cap (not just relying on default block behavior) —
       belt-and-suspenders alongside html,body{overflow-x:hidden} in
       custom.css so this wrap can never itself become the thing that
       forces the mobile layout viewport wider than the screen. The
       table inside is allowed to be wider (min-width below) and scrolls
       within this box via overflow-x:auto; the box itself never does. */
    width         : 100%;
    max-width     : 100%;
    overflow-x    : auto;
    -webkit-overflow-scrolling: touch;
    /* ROOT CAUSE of the long-running compare-page mobile overflow bug
       (finally pinned down 2026-08-18 from the user's DevTools screenshots).
       The remove ("×") buttons on each product column are `position:
       absolute`, but this wrapper was NOT a positioned ancestor — so their
       containing block resolved further up the tree, OUTSIDE this
       scroll container. Absolutely-positioned boxes whose containing block
       is outside a scroll container are NOT clipped by that container's
       overflow, so the third column's button (at x≈561 on a 412px screen)
       leaked out and inflated `document.documentElement.scrollWidth` to 553
       while `body.scrollWidth` correctly stayed at 412 — which is exactly
       why every earlier body-level measurement looked clean and the bug
       seemed unreproducible.

       On mobile that inflated document width widens the LAYOUT VIEWPORT,
       and `position:fixed` elements size themselves to the layout viewport
       — so the bottom WooCommerce icon bar (left:0; right:0) rendered 553px
       wide instead of 412px, pushing its 5th icon off-screen, and the
       slide-in menu drawer got cut off the same way. Both symptoms the user
       screenshotted, both explained by this one escaped absolute button.

       `position: relative` makes this wrapper the containing block for
       those buttons, so they're clipped by its own overflow like everything
       else. Verified live at a real 412px viewport: document scrollWidth
       553 → 412, bottom bar 553 → 412 wide, last icon's right edge 403
       (inside the screen), the table's own horizontal scroll still works,
       and the remove buttons render at pixel-identical positions. */
    position      : relative;
    border        : 1px solid var(--alq-wc-border, #eef0f2);
    border-radius : 14px;
    background    : #fff;
}

.alq-compare-table {
    width          : 100%;
    border-collapse: separate;
    border-spacing : 0;
    min-width      : 560px;
}

.alq-compare-table th,
.alq-compare-table td {
    padding      : 1rem;
    border-bottom: 1px solid #eef0f2;
    border-right : 1px solid #eef0f2; /* per-column divider, matching the reference */
    text-align   : center;
    vertical-align: middle;
}

.alq-compare-table tr:last-child th,
.alq-compare-table tr:last-child td {
    border-bottom: none;
}

.alq-compare-table tr th:last-child,
.alq-compare-table tr td:last-child {
    border-right: none; /* no trailing divider past the last product column */
}

/* Zebra striping — alternate rows tinted, matching the reference. */
.alq-compare-table tr:nth-child(even) {
    background: var(--alq-wc-bg-alt, #f8f9fb);
}

.alq-compare-table th[scope="row"] {
    text-align   : left;
    font-weight  : 700;
    font-size    : .82rem;
    color        : var(--alq-wc-muted, #64748b);
    white-space  : nowrap;
    width        : 1%;
    padding-right: 1.5rem;
}

.alq-compare-table td {
    min-width: 180px;
}

/* `position:relative` on the CELL now, not a wrapper around just the
 * image — the remove button is positioned relative to the whole
 * column/cell (top-right corner of the cell) instead of the image
 * itself, per user feedback that a button clinging to the image's own
 * corner was too easy to miss (2026-07-29). Extra top padding makes
 * room for the button to sit above the image without overlapping it. */
.alq-compare-row-image td {
    position    : relative;
    padding-top : 2.75rem;
}

.alq-compare-thumb-link {
    display        : block;
    text-decoration: none;
}
.alq-compare-thumb-link img {
    width        : 96px;
    height       : 96px;
    object-fit   : cover;
    border-radius: .5rem;
    border       : 1px solid #eef0f2;
    background   : var(--alq-wc-bg-alt, #f8f9fb);
}

/* Remove button — reuses the exact same design as the Wishlist page's
 * own row-remove button (.alq-wishlist-remove-row-btn further up this
 * file): white circle, red trash icon, light-red hover. A proven,
 * clearly-visible pattern already established elsewhere in this build,
 * rather than a plain × mark that turned out hard to notice (and, in
 * an earlier round, briefly invisible outright — see the bi-x-lg bug
 * noted in PROGRESS.md). */
.alq-compare-remove-btn {
    position       : absolute;
    top            : .75rem;
    right          : .75rem;
    width          : 2.1rem;
    height         : 2.1rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : #fff;
    border         : 1px solid var(--alq-wc-border, #eef0f2);
    border-radius  : 50%;
    color          : #dc2626;
    font-size      : .9rem;
    padding        : 0;
    cursor         : pointer;
    transition     : background .2s, border-color .2s;
}
.alq-compare-remove-btn:hover {
    background  : #fee2e2;
    border-color: #dc2626;
}
.alq-compare-remove-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Title row — plain link, no image (image now lives in its own row above). */
.alq-compare-name {
    font-size      : .9rem;
    font-weight    : 600;
    line-height    : 1.35;
    color          : var(--alq-primary, #0f172a);
    text-decoration: none;
}
.alq-compare-name:hover {
    color: var(--alq-accent, #b8912a);
}

.alq-compare-instock    { color: #16a34a; font-weight: 600; font-size: .85rem; }
.alq-compare-outofstock { color: #dc2626; font-weight: 600; font-size: .85rem; }

/* Sale price underline fix — WooCommerce wraps the current/sale price in
 * <ins>, which browsers underline by default. Same bug already fixed on
 * the Wishlist row price (.alq-wishlist-row-price ins) — this table
 * never had that reset, spotted live testing this redesign. Blanket
 * selector is safe here since the only <ins>/<del> in this table are
 * inside the Price row. */
.alq-compare-table ins { text-decoration: none; }
.alq-compare-table del { color: var(--alq-wc-muted, #9ca3af); font-weight: 400; }

.alq-compare-no-reviews {
    color     : var(--alq-wc-muted, #94a3b8);
    font-style: italic;
    font-size : .85rem;
}

/* WooCommerce's own plugin stylesheet sets `.woocommerce .star-rating`
 * to `float:right` — same bug already found and fixed on the Wishlist
 * page's rating display (.alq-wishlist-row-rating .star-rating,
 * further up this file). Every OTHER cell in this table is centered
 * via `text-align:center` on the <td>, but float removes an element
 * from that normal text-flow centering entirely and pins it to the
 * column's right edge instead — exactly what the user spotted. Scoped
 * fix, not a global .star-rating change (other contexts, like the
 * single product page, may still want the default float). */
.alq-compare-table .star-rating {
    float        : none;
    display      : inline-block;
    vertical-align: middle;
}

.alq-compare-desc {
    font-size  : .85rem;
    color      : var(--alq-wc-muted, #64748b);
    line-height: 1.5;
    text-align : left;
}

/* Clear All / Print Comparison action bar — bottom-right, per reference. */
.alq-compare-actions {
    display        : flex;
    justify-content: flex-end;
    align-items    : center;
    gap            : .75rem;
    margin-top     : 1.25rem;
    flex-wrap      : wrap;
}
/* Outline style — user's final call after trying the filled/primary
 * look (2026-07-29): wanted Clear All visually distinct (secondary/
 * outline) from Print Comparison (primary/filled), rather than two
 * identical gold buttons side by side. Reuses the site's ALREADY
 * ESTABLISHED outline-button pattern (same colors/hover behavior as
 * the product page's "Buy Now" button, .alq-buy-now-btn above) instead
 * of inventing a new visual language. */
.alq-compare-clear-all-btn {
    background   : transparent;
    color        : var(--alq-accent, #b8912a);
    border       : 2px solid var(--alq-accent, #b8912a);
    border-radius: var(--alq-wc-radius);
    /* Vertical padding trimmed by the border's own width (2px top +
     * 2px bottom) so the TOTAL rendered height matches Print
     * Comparison's `.button` exactly — that one has no border at all,
     * so with identical padding this button would render 4px taller.
     * User specifically asked for both buttons to be the same height
     * (2026-07-29). */
    padding      : calc(.5rem - 2px) 1.2rem;
    font-size    : .88rem;
    line-height  : 1; /* .button computes line-height:1 (verified via
                          getComputedStyle); without matching it here,
                          Clear All was still ~7px taller than Print
                          Comparison even with the border-compensated
                          padding above — line-height was the other,
                          bigger part of the mismatch. */
    font-weight  : 600;
    cursor       : pointer;
    transition   : background .2s, color .2s;
}
.alq-compare-clear-all-btn:hover {
    background: var(--alq-accent, #b8912a);
    color     : #fff;
}
.alq-compare-clear-all-btn:disabled { opacity: .6; cursor: not-allowed; }
.alq-compare-print-btn i { margin-right: .4rem; }

/* Extra breathing room before the footer — the page's shared `py-4`
 * wrapper (inc/woocommerce.php, same class used by Cart/Checkout/
 * Account) only gives 1.5rem bottom padding, which felt too tight.
 * Added on #alq-wc-main itself (not just .alq-compare-actions) so it
 * also applies to the empty "No products to compare yet" state, not
 * only when the table + action bar are showing. Scoped to just the
 * Compare page's own body class so Wishlist and the other pages
 * sharing that same py-4 wrapper aren't affected. */
body.page-template-page-templatescompare-php #alq-wc-main {
    padding-bottom: 3rem;
}

@media (max-width: 767.98px) {
    .alq-compare-table th[scope="row"] { font-size: .72rem; }
    .alq-compare-table td { min-width: 150px; padding: .75rem; }
    .alq-compare-thumb-link img { width: 72px; height: 72px; }
    .alq-compare-actions { justify-content: stretch; }
    .alq-compare-actions button { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* Print Comparison — only the table itself should print. Scoped to the
 * Compare page's body class so this doesn't affect printing anywhere
 * else on the site. NOTE for theme reviewers: #wpadminbar below is hidden
 * ONLY inside this @media print block (i.e. only in the printed output,
 * e.g. Ctrl+P), never on-screen. The admin bar is never hidden for
 * logged-in users while browsing — this only keeps it out of a printed
 * comparison sheet, the same way it's excluded from any other print
 * stylesheet. */
@media print {
    body.page-template-page-templatescompare-php .alq-topbar,
    body.page-template-page-templatescompare-php .alq-navbar-wrap,
    body.page-template-page-templatescompare-php footer,
    body.page-template-page-templatescompare-php .alq-mobile-bar,
    body.page-template-page-templatescompare-php #back-to-top,
    body.page-template-page-templatescompare-php #whatsapp-float,
    body.page-template-page-templatescompare-php .alq-compare-actions,
    body.page-template-page-templatescompare-php .alq-compare-subtitle,
    body.page-template-page-templatescompare-php .alq-compare-remove-btn,
    body.page-template-page-templatescompare-php #wpadminbar {
        display: none !important;
    }
    body.page-template-page-templatescompare-php .alq-compare-table-wrap {
        border: none;
        padding: 0;
    }
}


/* =============================================================================
   SALE COUNTDOWN TIMER (inc/sale-countdown.php, js/alq-countdown.js) —
   single product page only, directly under the price. Only ever printed
   server-side when WooCommerce's own sale-end-date field is set, so no
   empty-state CSS is needed here.
============================================================================= */
/* Shrinks to fit its own content (a compact "badge", like a real countdown
   clock) rather than stretching to the full price-column width — matches
   how premium WooCommerce themes (Woodmart, Flatsome, etc.) render this
   under-price countdown. Stretching it with justify-content:space-between
   was tried and reverted (2026-08-14): with only 2 flex children (label,
   units-group) it just pushed them to opposite edges with one big ugly
   gap in the middle on desktop, and spread the 4 digit boxes apart from
   each other on mobile — neither looks like a real countdown. */
.alq-sale-countdown {
    display        : inline-flex;
    flex-wrap      : wrap;
    align-items    : center;
    gap            : .9rem;
    margin         : .9rem 0 1.2rem;
    padding        : .75rem 1rem;
    background     : var(--alq-wc-light);
    border         : 1px solid var(--alq-wc-border);
    border-radius  : var(--alq-wc-radius);
    max-width      : 100%;
}
.alq-sale-countdown-label {
    display     : flex;
    align-items : center;
    gap         : .4rem;
    font-size   : .88rem;
    font-weight : 600;
    color       : var(--alq-primary, #0f172a);
    white-space : nowrap;
}
.alq-sale-countdown-label i { color: var(--alq-accent, #b8912a); font-size: 1rem; }

.alq-sale-countdown-units {
    display : flex;
    gap     : .5rem;
}
.alq-sale-countdown-unit {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    min-width      : 44px;
    padding        : .3rem .4rem;
    background     : #fff;
    border         : 1px solid var(--alq-accent, #b8912a);
    border-radius  : 6px;
}
.alq-sale-countdown-num {
    font-size   : 1rem;
    font-weight : 700;
    line-height : 1.2;
    color       : var(--alq-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}
.alq-sale-countdown-unit small {
    font-size   : .62rem;
    color       : var(--alq-wc-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

@media (max-width: 575.98px) {
    .alq-sale-countdown { gap: .6rem; padding: .6rem .75rem; }
    /* flex-basis:100% (not width:100%) forces the label onto its own row
       even inside a shrink-to-fit (inline-flex) parent — the units group
       then sits tightly packed on the row below it, sized to its own
       content, not stretched. */
    .alq-sale-countdown-label { font-size: .78rem; flex: 1 0 100%; }
    .alq-sale-countdown-units { gap: .35rem; }
    .alq-sale-countdown-unit { min-width: 38px; padding: .25rem .3rem; }
    .alq-sale-countdown-num { font-size: .88rem; }
    .alq-sale-countdown-unit small { font-size: .58rem; }
}


/* =============================================================================
   STOCK / BACK-IN-STOCK EMAIL ALERT (inc/stock-alert.php,
   js/alq-stock-alert.js) — single product page only, shown when a product
   is out of stock (right after the add-to-cart area).
============================================================================= */
.alq-stock-alert {
    margin        : 1rem 0;
    padding       : 1rem 1.1rem;
    background    : #fef2f2;
    border        : 1px solid #fecaca;
    border-radius : var(--alq-wc-radius);
}
.alq-stock-alert-intro {
    display     : flex;
    align-items : flex-start;
    gap         : .45rem;
    margin      : 0 0 .65rem;
    font-size   : .82rem;
    color       : var(--alq-primary, #0f172a);
    line-height : 1.5;
}
.alq-stock-alert-intro i {
    color     : var(--alq-wc-error);
    font-size : .95rem;
    margin-top: .15rem;
    flex-shrink: 0;
}
.alq-stock-alert-form {
    display   : flex;
    flex-wrap : wrap;
    gap       : .6rem;
}
/* Sized and colored to match the Add to Cart / Buy Now row above it
   (same 42px height, .9rem font — see form.cart .qty / .button rules
   earlier in this file) instead of inheriting Bootstrap's larger default
   .form-control size. */
.alq-stock-alert-email {
    flex          : 1 1 220px;
    min-width     : 0;
    height        : 42px;
    padding       : 0 .9rem;
    font-size     : .9rem;
    border        : 1.5px solid var(--alq-wc-border);
    border-radius : var(--alq-wc-radius);
}
.alq-stock-alert-email:focus {
    outline  : none;
    box-shadow: none;
    border-color: var(--alq-accent, #b8912a);
}
/* Accent-gold to match the Add to Cart button (this is the WooCommerce
   accent color, not the site-wide navy .btn-custom CTA style) */
.alq-stock-alert-submit {
    flex-shrink   : 0;
    white-space   : nowrap;
    height        : 42px;
    padding       : 0 1.4rem;
    font-size     : .85rem;
    font-weight   : 700;
    background    : var(--alq-accent, #b8912a);
    color         : #fff;
    border        : none;
    border-radius : var(--alq-wc-radius);
    cursor        : pointer;
    transition    : background .2s;
}
.alq-stock-alert-submit:hover:not(:disabled) {
    background: var(--alq-accent-dark, #9a7821);
}
.alq-stock-alert-message {
    margin    : .5rem 0 0;
    font-size : .8rem;
    min-height: 0;
}
.alq-stock-alert-message:empty { margin: 0; }
.alq-stock-alert-message.is-success { color: var(--alq-wc-success); }
.alq-stock-alert-message.is-error   { color: var(--alq-wc-error); }

@media (max-width: 575.98px) {
    .alq-stock-alert { padding: .85rem .9rem; }
    .alq-stock-alert-form { flex-direction: column; align-items: stretch; }
    /* Bug fix: .alq-stock-alert-email has `flex: 1 1 220px` for the
       DESKTOP row layout, where flex-basis:220px sets its width. Once the
       form switches to flex-direction:column here, the main axis becomes
       vertical, so that same flex-basis:220px was being read as a target
       HEIGHT instead — rendering an oversized ~220px-tall input box.
       Resetting flex-basis to auto here lets the element's own
       height:42px rule (and align-items:stretch's own full-width sizing)
       take over correctly. */
    .alq-stock-alert-email { flex: 0 0 auto; width: 100%; }
    .alq-stock-alert-submit { width: 100%; }
}


/* =============================================================================
   QUICK VIEW MODAL — MOVED to css/quick-view.css (2026-07-29 follow-up round).
   This stylesheet only loads on WooCommerce-specific pages (is_shop() /
   is_product() / etc. — see inc/enqueue.php), but Quick View's corner icon
   can appear ANYWHERE a product card renders, including homepage widgets
   (inc/widgets.php) where THIS file never loads at all — confirmed live as
   the exact cause of the modal rendering completely unstyled on the
   homepage. All Quick View CSS now lives in its own dedicated stylesheet,
   enqueued unconditionally by inc/quick-view.php itself (same place its JS
   is already enqueued unconditionally), and is fully self-contained
   (duplicates the handful of single-product-page rules it needs — variation
   select/swatch hiding, the qty+cart+buy-now row ratio, WhatsApp/Messenger
   row — rather than depending on this file being present).
============================================================================= */