/*
 Theme Name:   Caesarstone Israel B2B Portal
 Theme URI:    https://caesarstone.co.il
 Description:  Professional B2B ordering portal for Caesarstone Israel. Features Hebrew RTL catalog, email-only authentication, AJAX product filtering, zero-cost checkout flow, and Oracle ERP integration. Built for fabricator partners.
 Author:       Aviv Keter
 Author URI:   https://github.com/avivketer
 Template:     storefront
 Version:      1.5.0
 Requires at least: 6.0
 Tested up to: 6.7
 Requires PHP: 8.2
 Text Domain:  israel-b2b
 Tags:         rtl-language-support, e-commerce, custom-logo, b2b, woocommerce, hebrew
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ======================================================================
/*
 Theme Name:   Caesarstone Israel B2B Portal
 Theme URI:    https://caesarstone.co.il
 Description:  Professional B2B ordering portal for Caesarstone Israel. Features Hebrew RTL catalog, email-only authentication, AJAX product filtering, zero-cost checkout flow, and Oracle ERP integration. Built for fabricator partners.
 Author:       Aviv Keter
 Author URI:   https://github.com/avivketer
 Template:     storefront
 Version:      1.1.0
 Requires at least: 6.0
 Tested up to: 6.7
 Requires PHP: 8.2
 Text Domain:  israel-b2b
 Tags:         rtl-language-support, e-commerce, custom-logo, b2b, woocommerce, hebrew
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ======================================================================
   SOURCE: fonts.css
   ====================================================================== */

/* ==========================================================================
   Publico Banner (Titles/Headlines)
   ========================================================================== */

@font-face {
    font-family: 'Publico Banner';
    src: url('assets/fonts/PublicoBanner-Roman-Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Publico Banner';
    src: url('assets/fonts/PublicoBanner-Medium-Web.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Publico Banner';
    src: url('assets/fonts/PublicoBanner-Bold-Web.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Italic variants */
/* ==========================================================================
   Frutiger LT Pro (Body/Content Text)
   ========================================================================== */

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Roman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Frutiger ships here in three weights only: Light 300, Roman 400, Bold 700.
   There is no 600 file, so the 600 slot is mapped to Bold — asking for 600
   then gets real Frutiger outlines instead of a browser-synthesised fake. */
@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ======================================================================
   SOURCE: base.css
   ====================================================================== */

/* ==========================================================================
   CSS Variables (Design Tokens)
   ========================================================================== */

:root {
    /* Caesarstone Colors - Black & White Theme */
    --color-primary: var(--cs-black);
    /* Caesarstone Black */
    --color-primary-light: #3d3d3b;
    --color-primary-dark: #000000;

    --color-secondary: #ffffff;
    /* White */
    --color-accent: var(--cs-black);
    /* Black accent */

    /* Grays - Neutral palette */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: var(--cs-black);
    /* Caesarstone Black */

    --color-success: #22c55e;
    --color-warning: #eab308;
    --color-error: #ef4444;

    /* Typography.

       Frutiger LT Pro first, Heebo behind it. That is not two fonts fighting,
       it is the same split caesarstone.co.il makes: its stack is
       "Frutiger LT Pro", "Narkiss Tam", … — Frutiger covers the Latin, and
       every Hebrew glyph falls through to the Hebrew face behind it, because
       Frutiger has no Hebrew. We ship Frutiger in Light 300, Roman 400 and
       Bold 600/700 already; until now nothing asked for it, so the browser
       never even downloaded it and every product name rendered in Heebo.

       Narkiss Tam is licensed for the public site and is not ours to ship, so
       Heebo stays the Hebrew face. What this buys is that a slab name, a SKU
       and a price — all Latin — are set in the same face here as in the
       public catalog, which is what makes the two pages look like one brand.

       --font-accent is kept as an alias for the places that already ask for
       Frutiger by name. */
    --font-sans: 'Frutiger LT Pro', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Frutiger LT Pro', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-accent: var(--font-sans);
    --font-mono: 'Fira Code', 'Consolas', monospace;

    /* One type scale. The order flow used to reach for ad-hoc sizes —
       0.6875, 0.75, 0.8125, 0.875, 0.9375, 1, 1.0625, 1.125, 1.25, 1.75, 2rem
       — eleven steps, several of them a hair apart and indistinguishable on
       screen. These six are the whole ladder for cart, checkout and order
       confirmation. */
    /* Legacy names, kept as aliases of the cs-* ladder below so nothing that
       still says --text-* falls off it. New rules use --cs-* directly. */
    --text-xs: var(--cs-text-sm);
    --text-sm: var(--cs-text-sm);
    --text-base: var(--cs-text);
    --text-md: var(--cs-text);
    --text-lg: var(--cs-text-lg);
    --text-xl: var(--cs-display-sm);

    /* Site design tokens (cs-*). The home page is built from these alone;
       the rest of the theme is meant to move onto them screen by screen. */
    --cs-black: #0b0b0d; /* sampled from the black marble slab */
    /* One type ladder, four sizes: 14 / 16 / 20 / 40 (32 for the display size
       under 768px). A screen on these tokens shows no other size. */
    --cs-text-sm: 0.875rem;
    --cs-text: 1rem;
    --cs-text-lg: 1.25rem;
    --cs-display: 2.5rem;
    --cs-display-sm: 2rem;
    /* One subdued white for secondary text on dark surfaces */
    --cs-on-dark-muted: rgba(255, 255, 255, 0.8);
    --cs-muted: #6b6b68;
    --cs-line: #e5e5e3;
    --cs-paper: #f6f5f2;
    --cs-radius: 0;  /* home page surfaces; see the radius scale below */
    --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Header height: one number for every page. The home hero is pulled up
       under the header by exactly this much, and the inner pages keep a
       header of the same height, so nothing jumps between the two. */
    --header-h: 60px;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Border radius. The public catalog at caesarstone.co.il is square: a
       product tile, a panel and an image all have no radius at all, and only
       the small controls are softened, by a few pixels. That is the whole
       scale here too — 0 for anything that is a surface, 4px for anything
       you click or type into — so the portal reads as one site instead of
       the five radii (4, 6, 8, 12, 14, 16, 20px) it grew by accident.
       --radius-full stays for the handful of things that really are circles:
       the cart count, an avatar, a step marker. */
    --radius-sm: 4px;   /* chips and badges */
    --radius-md: 4px;   /* buttons, inputs, selects */
    --radius-lg: 0;     /* cards, panels, tables, media */
    --radius-xl: 0;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

@media (min-width: 768px) {
    :root {
        --header-h: 72px;
    }
}

/* ==========================================================================
   Caesarstone Logo (Shared Component)
   ========================================================================== */

.cs-logo {
    display: block;
    height: auto;
}

.cs-logo-header {
    width: 140px;
}

.cs-logo-white path,
.cs-logo-white g {
    fill: #ffffff !important;
}

@media (min-width: 768px) {
    .cs-logo-header {
        width: 160px;
    }
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Use logical properties for RTL-aware spacing */
html[dir="rtl"] .site-logo {
    margin-inline-end: auto;
}

html[dir="rtl"] .header-nav {
    margin-inline-start: auto;
}

html[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumbs {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumbs .separator {
    transform: scaleX(-1);
}

html[dir="rtl"] .cart-badge {
    margin-inline-start: var(--space-1);
    margin-inline-end: 0;
}

html[dir="rtl"] .item-remove {
    left: var(--space-2);
    right: auto;
}

html[dir="rtl"] .step-item::before {
    right: 15px;
    left: auto;
}

html[dir="rtl"] .pagination .prev::before {
    content: '→';
}

html[dir="rtl"] .pagination .next::after {
    content: '↠';
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    font-size: var(--cs-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-gray-800);
    background: var(--color-gray-50);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-900);
}

h1 {
    font-size: var(--cs-display-sm);
}

h2 {
    font-size: var(--cs-text-lg);
}

h3 {
    font-size: var(--cs-text-lg);
}

h4 {
    font-size: var(--cs-text-lg);
}

@media (min-width: 640px) {
    h1 {
        font-size: var(--cs-display);
    }

    h2 {
        font-size: var(--cs-display-sm);
    }

    h3 {
        font-size: var(--cs-text-lg);
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--cs-text);
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 0;
    /* Sharp corners for Caesarstone style */
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Primary Button - Solid Black */
.btn-primary {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    color: #fff !important;
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(29, 29, 27, 0.25);
}

/* Secondary Button - Outlined */
.btn-secondary {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-gray-300);
}

.btn-secondary:hover {
    background: var(--color-gray-100);
    border-color: var(--color-primary);
}

.action-dropdown-list li:hover {
    background: var(--color-gray-50);
    color: var(--color-primary);
}

/* Custom Cart/Checkout Buttons */
.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    background: var(--cs-black);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--cs-text);
    border: none;
    cursor: pointer;
    transition: opacity 0.3s, background 0.3s;
}
.btn-submit svg {
    transition: transform 0.3s ease;
    transform: translateX(0);
}
.btn-submit:hover { opacity: 0.85; }
.btn-submit:hover svg {
    transform: translateX(-6px);
}

a.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 40px;
    background: transparent !important;
    color: var(--cs-black) !important;
    font-weight: 700;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--cs-text);
    border: 2px solid var(--cs-black) !important;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
a.btn-secondary svg {
    transition: transform 0.3s ease;
    transform: translateX(0);
}
a.btn-secondary:hover {
    background: var(--cs-black) !important;
    color: #fff !important;
}
a.btn-secondary:hover svg {
    transform: translateX(-6px);
}

/* ==========================================================================
   Shop Banner Slider
   ========================================================================== */
.shop-banner-slider-container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 30px auto;
    overflow: hidden;
    background: #f8f9fa;
    border-radius: 0;
}

.shop-banner-slider {
    position: relative;
    width: 100%;
    height: 300px;
}

.shop-banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s;
    z-index: 1;
}

.shop-banner-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.shop-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slider Controls */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--color-text-dark);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
    opacity: 0;
}

.shop-banner-slider-container:hover .slider-control {
    opacity: 1;
}

.slider-control:hover {
    background: #fff;
    color: var(--color-primary);
    transform: translateY(-50%) scale(1.05);
}

.slider-control.prev {
    left: 20px;
}

.slider-control.next {
    right: 20px;
}

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.slider-dot.active {
    background: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .shop-banner-slider {
        height: 200px; /* Shorter on mobile */
        padding-bottom: 0;
    }
    .slider-control {
        width: 36px;
        height: 36px;
        opacity: 1; /* Always show on mobile */
    }
    .slider-control.prev { left: 10px; }
    .slider-control.next { right: 10px; }
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--cs-text);
}

.btn-block {
    width: 100%;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

/* The element-qualified twins below are not decoration.
 *
 * Storefront styles text fields as `input[type="text"], input[type="tel"], …,
 * textarea, .input-text`. That is (0,1,1) for every input, which outranks a
 * bare class — so this look reached the textarea, which Storefront matches as
 * a plain element at (0,0,1), and never reached a single <input>. Every text
 * input in the portal has been rendering as Storefront's borderless #f2f2f2
 * box while the textarea beside it rendered as intended, which is why the two
 * never matched on the checkout.
 *
 * `input.form-input` ties Storefront's specificity and wins on order, the
 * child theme's stylesheet being enqueued after the parent's. The file already
 * relies on the same trick for `textarea.form-input`.
 *
 * The bare class stays in the list: it is what still covers an element the
 * qualified selectors do not name.
 */
.form-input,
.form-select,
input.form-input,
textarea.form-input,
select.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--cs-text);
    color: var(--color-gray-800);
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
input.form-input:focus,
textarea.form-input:focus,
select.form-select:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #fff;
}

.form-input::placeholder,
input.form-input::placeholder,
textarea.form-input::placeholder {
    color: var(--color-gray-400);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.card-body {
    padding: var(--space-5);
}

@media (min-width: 640px) {
    .card-body {
        padding: var(--space-6);
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--color-gray-500);
}

.text-small {
    font-size: var(--cs-text-sm);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}

/* ======================================================================
   SOURCE: header.css
   ====================================================================== */

/* ==========================================================================
   Site Header
   One fixed height on every page (--header-h). On the home page the hero is
   pulled up under it, and until the visitor scrolls the header is
   transparent with white type over the darkened video; from the first
   scroll it is white with black type, as on caesarstone.co.il. The inline
   script after the header markup in header.php toggles .is-scrolled. The
   transparent state is gated on html.js, so without JavaScript the header
   is simply white and there is never white type over white content.
   ========================================================================== */

.site-header {
    /* Everything in the header takes its colour from these values, so each
       state is one set of values rather than a second set of rules.
       --header-on-fg is the ink on a --header-fg fill: the cart count, and
       the logout button on hover. */
    --header-bg: #ffffff;
    --header-fg: var(--cs-black);
    --header-fg-muted: #525252;
    --header-on-fg: #ffffff;
    --header-line: var(--color-gray-200, #e5e5e5);
    --header-btn-line: var(--color-gray-300, #d4d4d4);
    --header-hover-bg: rgba(0, 0, 0, 0.05);
    --header-text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    padding: 0;
    background: var(--header-bg);
    color: var(--header-fg);
    border-bottom: 1px solid var(--header-line);
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0);
    transition:
        background-color 0.4s var(--cs-ease),
        color 0.4s var(--cs-ease),
        border-color 0.4s var(--cs-ease),
        box-shadow 0.4s var(--cs-ease);
}

.site-header > .container,
.header-inner {
    height: 100%;
}

/* The page has scrolled under the header: a soft shadow lifts it off. */
.site-header.is-scrolled {
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.25);
}

/* Home page: the hero starts at the top of the viewport, under the header. */
.header-over-hero .hero-slider {
    margin-top: calc(-1 * var(--header-h));
}

/* ...and until the first scroll the header is see-through, in white. Not
   with the menu open, though: that panel hangs off a solid white bar. */
.js .header-over-hero .site-header:not(.is-scrolled):not(.is-open) {
    --header-bg: transparent;
    --header-fg: #ffffff;
    --header-fg-muted: rgba(255, 255, 255, 0.85);
    --header-on-fg: var(--cs-black);
    --header-line: transparent;
    --header-btn-line: rgba(255, 255, 255, 0.6);
    --header-hover-bg: rgba(255, 255, 255, 0.14);
    --header-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-header a:focus-visible {
    outline: 2px solid var(--header-fg);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ==========================================================================
   Header Logo
   ========================================================================== */

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

/* The mark is drawn in brand black. Here it takes the header's colour, so
   it is white on the hero and black on the page along with everything else. */
.site-logo .cs-logo path,
.site-logo .cs-logo g {
    fill: currentColor;
    transition: fill 0.4s var(--cs-ease);
}

.site-logo svg {
    width: 140px;
    height: auto;
    transform-origin: right center;
    transition: transform 0.4s var(--cs-ease);
}

/* Scrolled, the mark steps down a little, the way the public site's does. */
.is-scrolled .site-logo svg {
    transform: scale(0.9);
}

@media (min-width: 768px) {
    .site-logo svg {
        width: 160px;
    }
}

/* ==========================================================================
   Header Navigation
   ========================================================================== */

.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-nav a {
    color: var(--header-fg-muted);
    font-weight: 500;
    font-size: var(--cs-text);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    text-shadow: var(--header-text-shadow);
    transition: color 0.2s, text-shadow 0.4s var(--cs-ease);
}

.header-nav a:hover,
.header-nav a.active {
    color: var(--header-fg);
    text-decoration: none;
}

.header-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    left: 0;
    height: 2px;
    background: currentColor;
}

/* ==========================================================================
   Header Cart Link + Badge
   ========================================================================== */

/* A 44px box: on the phone this is the one control beside the logo, so it
   has to be a finger-sized target, and the extra room is what the badge
   sits in. */
.header-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--header-fg);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 0.4s var(--cs-ease), background-color 0.2s;
}

.header-cart-link:hover {
    color: var(--header-fg);
    background: var(--header-hover-bg);
}

.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: var(--cs-text-sm);
    font-weight: 700;
    color: #fff;
    background: var(--color-primary, var(--cs-black));
    border-radius: 50%;
}

/* In the header the count inverts with the header: a black disc with a
   white number on the page, a white disc with a black number on the hero. */
.header-cart-link .cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--header-on-fg);
    background: var(--header-fg);
    transition: color 0.4s var(--cs-ease), background-color 0.4s var(--cs-ease);
}

/* ==========================================================================
   Header User & Utilities
   ========================================================================== */

.header-user {
    display: none;
}

.user-company {
    font-size: var(--cs-text-sm);
    font-weight: 500;
    color: var(--header-fg-muted);
    text-shadow: var(--header-text-shadow);
    transition: color 0.4s var(--cs-ease), text-shadow 0.4s var(--cs-ease);
}

.btn-sm {
    padding: 4px 12px;
    font-size: var(--cs-text-sm);
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: flex;
    }

    .header-user {
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

/* ==========================================================================
   Header Menu (under 768px)
   The nav, the company name and the logout move into a panel that drops
   down from the header. The button is a 44px target beside the cart.
   Opening the menu also turns the header solid (.is-open), so the panel
   never hangs off a see-through bar.
   ========================================================================== */

.header-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--header-fg);
    cursor: pointer;
    transition: color 0.4s var(--cs-ease), background-color 0.2s;
}

.header-menu-toggle:hover {
    background: var(--header-hover-bg);
}

.header-menu-toggle:focus-visible {
    outline: 2px solid var(--header-fg);
    outline-offset: 3px;
}

/* Three bars drawn in CSS, so they can fold into a cross. */
.header-menu-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: background-color 0.2s;
}

.header-menu-icon::before,
.header-menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: top 0.3s var(--cs-ease), transform 0.3s var(--cs-ease);
}

.header-menu-icon::before {
    top: -6px;
}

.header-menu-icon::after {
    top: 6px;
}

.header-menu-toggle[aria-expanded="true"] .header-menu-icon {
    background-color: transparent;
}

.header-menu-toggle[aria-expanded="true"] .header-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.header-menu-toggle[aria-expanded="true"] .header-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

.header-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 4px 0 20px;
    background: #ffffff;
    color: var(--cs-black);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.25s var(--cs-ease),
        transform 0.25s var(--cs-ease),
        visibility 0s linear 0.25s;
}

.site-header.is-open .header-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.25s var(--cs-ease),
        transform 0.25s var(--cs-ease),
        visibility 0s;
}

.header-menu-nav {
    display: flex;
    flex-direction: column;
}

.header-menu-nav a {
    display: block;
    padding: 14px 0;
    font-size: var(--cs-text-lg);
    font-weight: 500;
    color: var(--cs-black);
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-200);
}

.header-menu-nav a.active {
    font-weight: 700;
}

.header-menu-nav a:focus-visible {
    outline: 2px solid var(--cs-black);
    outline-offset: -2px;
}

/* The panel is white whatever the bar is doing, so its own colours are
   pinned here rather than taken from the header's state. */
.header-menu-user {
    --header-fg: var(--cs-black);
    --header-on-fg: #ffffff;
    --header-btn-line: var(--color-gray-300);
    --header-text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
}

.header-menu-user .user-company {
    font-size: var(--cs-text);
    color: var(--color-gray-600);
}

@media (min-width: 768px) {
    .header-menu-toggle,
    .header-menu {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-logo svg,
    .site-logo .cs-logo path,
    .site-logo .cs-logo g,
    .header-nav a,
    .header-cart-link,
    .header-cart-link .cart-badge,
    .user-company,
    .header-menu-toggle,
    .header-menu-icon,
    .header-menu-icon::before,
    .header-menu-icon::after,
    .header-menu,
    .site-header.is-open .header-menu {
        transition: none;
    }

    .is-scrolled .site-logo svg,
    .header-menu {
        transform: none;
    }
}

/* ======================================================================
   SOURCE: footer.css
   ====================================================================== */

/* ==========================================================================
   Footer — dark grid: brand + social, quick links, company, contact
   ========================================================================== */

.site-footer-full {
    background: var(--cs-black);
    color: #ffffff;
    /* The bottom bar carries the bottom padding, so there is no dead band of
       dark space under the last line. */
    padding: 64px 0 0;
    /* A short page (an empty cart, a 404) used to leave the page background
       showing below the footer. Sticky at top:100vh parks the footer on the
       bottom of the window while the document is shorter than the window, and
       lets it flow normally the moment it is not. */
    position: sticky;
    top: 100vh;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    /* start, not stretch: a short column should not inherit the tallest
       column's height and read as an empty box. */
    align-items: start;
    padding-bottom: 44px;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
        gap: 40px 32px;
    }

    /* Contact hidden in the Customizer: three columns, not four with a hole. */
    .footer-grid.no-contact {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Everything in the footer sits on its column's centre line. */
.footer-col:not(:first-child) {
    text-align: center;
}

/* ---------- Brand ---------- */

.footer-brand {
    max-width: 340px;
    margin-inline: auto;
    text-align: center;
}

.footer-brand .footer-logo {
    display: block;
    width: 180px;
    height: auto;
    margin-bottom: 16px;
    margin-inline: auto;
}

.footer-tagline {
    color: #a3a3a3;
    font-size: var(--cs-text-sm);
    line-height: 1.7;
}

/* ---------- Social accounts ---------- */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    justify-content: center;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #d4d4d4;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--cs-black);
    transform: translateY(-2px);
    text-decoration: none;
}

/* The icons keep their own viewBox, so one box size fits all of them, and they
   take their colour from the link. */
.footer-social-icon {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ---------- Column headings ---------- */

.footer-col h4 {
    position: relative;
    font-size: var(--cs-text);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
    margin: 0 0 18px;
    padding-bottom: 10px;
    font-family: var(--font-heading, 'Heebo', sans-serif);
}

/* A short rule centred under the heading: inset-inline: 0 spans the column
   and margin: 0 auto parks the 13% wide bar in the middle of it. */
.footer-col h4::after {
    content: '';
    position: absolute;
    margin: 0 auto;
    width: 13%;
    bottom: 0;
    inset-inline: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
}

/* ---------- Link lists ---------- */

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links li:last-child {
    margin-bottom: 0;
}

.footer-links a {
    color: #a3a3a3;
    font-size: var(--cs-text-sm);
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* ---------- Contact ---------- */

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 14px;
    font-size: var(--cs-text-sm);
    color: #a3a3a3;
    line-height: 1.6;
}

.footer-contact li:last-child {
    margin-bottom: 0;
}

.footer-contact-label {
    display: block;
    color: #e5e5e5;
    font-size: var(--cs-text-sm);
    margin-bottom: 2px;
}

.footer-contact a {
    color: #a3a3a3;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-contact a:hover {
    color: #ffffff;
}

/* ---------- Bottom bar ---------- */

/* Only the copyright line lives here, so it sits centred under the columns. */
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 0 24px;
}

.footer-bottom p {
    margin: 0;
    color: #8f8f8c;
    font-size: var(--cs-text-sm);
}

@media (max-width: 639px) {
    .site-footer-full {
        padding-top: 48px;
    }

    .footer-brand {
        max-width: none;
    }
}

/* ======================================================================
   SOURCE: home.css
   ====================================================================== */

/* ==========================================================================
   HOME PAGE
   Full-bleed sections stacked on white. Everything here is scoped to the
   home page's own classes so nothing leaks into the catalog or account.
   ========================================================================== */

.home-page {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   HERO — a muted Vimeo loop over the banner image
   ========================================================================== */

.hero-slider {
    --hero-height: 540px;
    position: relative;
    width: 100%;
    min-height: var(--hero-height);
    display: flex;
    overflow: hidden;
    background: var(--cs-black);
    color: #ffffff;
}

/* The header overlays the first --header-h of the hero, so from here up the
   hero is taller by about that much than it used to be. */
@media (min-width: 640px) {
    .hero-slider {
        --hero-height: 500px;
    }
}

@media (min-width: 1024px) {
    .hero-slider {
        --hero-height: 560px;
    }
}

.hero-slide {
    position: relative;
    width: 100%;
    min-height: var(--hero-height);
    display: flex;
    align-items: flex-end;
}

/* Darkening for the white copy, and for the white header that sits on the
   top of the hero until the first scroll. The bottom gradient carries the
   title, as before. The top one is a steeper band under the header, so the
   nav keeps at least 4.5:1 against even a white frame of the video, and it
   fades out over three and a half header heights so the video still reads
   as a video. */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.78) 0,
            rgba(0, 0, 0, 0.55) var(--header-h),
            rgba(0, 0, 0, 0.22) calc(var(--header-h) * 2),
            rgba(0, 0, 0, 0) calc(var(--header-h) * 3.5)
        ),
        linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.4) 100%);
}

/* The banner image is the poster: it is what shows until the video plays,
   on a slow connection, and whenever the visitor has motion turned off. */
.hero-image {
    position: absolute;
    inset: 0;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* A 16:9 player sized to cover the hero at any width: as tall as the hero
   or as tall as a full-width 16:9 frame, whichever is bigger, then centred. */
.hero-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    height: max(var(--hero-height), 56.25vw);
    width: calc(max(var(--hero-height), 56.25vw) * 16 / 9);
    max-width: none; /* the theme caps every iframe at 100% */
    transform: translate(-50%, -50%) scale(1.02);
    border: 0;
    opacity: 0;
    transition: opacity 1.2s ease 0.4s;
}

.hero-video iframe.is-ready {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* In flow, so a long title grows the hero instead of clipping. The top
   padding clears the header that sits over the hero, with room to spare. */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: calc(var(--header-h) + 28px);
}

.hero-content .container {
    padding-bottom: 48px;
}

@media (min-width: 1024px) {
    .hero-content .container {
        padding-bottom: 80px;
    }
}

.hero-text {
    max-width: 640px;
    text-align: start;
    margin: 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cs-on-dark-muted);
}

.hero-text h1 {
    color: #ffffff;
    font-size: var(--cs-display-sm);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    font-family: var(--font-heading, 'Heebo', sans-serif);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
    .hero-text h1 {
        font-size: var(--cs-display);
    }
}

.hero-subtitle {
    font-size: var(--cs-text);
    line-height: 1.5;
    color: var(--cs-on-dark-muted);
    margin: 0 0 26px;
    max-width: 520px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

@media (min-width: 1024px) {
    .hero-subtitle {
        font-size: var(--cs-text-lg);
    }
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-cta,
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 28px;
    border-radius: var(--radius-md);
    font-size: var(--cs-text);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s var(--cs-ease), box-shadow 0.25s var(--cs-ease), background 0.25s ease, color 0.25s ease;
}

.hero-cta {
    background: #ffffff;
    color: var(--cs-black);
    border: 2px solid #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-cta:hover,
.hero-cta:focus-visible {
    background: #f2f1ee;
    color: var(--cs-black);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.hero-cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 2px solid var(--cs-on-dark-muted);
    backdrop-filter: blur(6px);
}

.hero-cta-secondary:hover,
.hero-cta-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
    text-decoration: none;
}

.hero-cta svg,
.hero-cta-secondary svg {
    transition: transform 0.3s var(--cs-ease);
}

.hero-cta:hover svg,
.hero-cta-secondary:hover svg {
    transform: translateX(-5px);
}

/* ==========================================================================
   QUICK ACTIONS — the signed-in company's shortcuts, riding the hero's edge
   ========================================================================== */

.home-quick {
    background: #ffffff;
    padding: 0 0 8px;
}

.home-quick-card {
    position: relative;
    z-index: 3;
    margin-top: -36px;
    /* Black Caesarstone marble (the 0511 slab) under a light scrim. The slab
       image is 370x798, so it is scaled up here and reads as texture. */
    background:
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32)),
        var(--cs-black) url('assets/images/black-marble-quick-card.jpg') center 35% / cover no-repeat;
    color: #ffffff;
    border: 1px solid #2c2c2a;
    border-radius: var(--cs-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
}

@media (min-width: 768px) {
    .home-quick-card {
        grid-template-columns: minmax(220px, 1.2fr) 3fr;
    }
}

.home-quick-greeting {
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.38);
}

@media (min-width: 768px) {
    .home-quick-greeting {
        border-bottom: 0;
        border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
    }
}

.home-quick-greeting .label {
    display: block;
    font-size: var(--cs-text);
    color: var(--cs-on-dark-muted);
    margin-bottom: 4px;
}

.home-quick-greeting .company {
    display: block;
    font-size: var(--cs-text-lg);
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-heading, 'Heebo', sans-serif);
    line-height: 1.3;
}

.home-quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
    .home-quick-links {
        grid-template-columns: repeat(4, 1fr);
    }
}

.home-quick-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 24px;
    color: #ffffff;
    text-decoration: none;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease;
}

.home-quick-link:nth-child(2n) {
    border-inline-end: 0;
}

.home-quick-link:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
    .home-quick-link:nth-child(2n) {
        border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
    }

    .home-quick-link:last-child {
        border-inline-end: 0;
    }

    .home-quick-link:nth-child(-n + 2) {
        border-bottom: 0;
    }
}

.home-quick-link:hover,
.home-quick-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.home-quick-link .home-quick-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 0;
    background: #ffffff;
    color: var(--cs-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--cs-ease);
}

.home-quick-link:hover .home-quick-icon {
    transform: translateY(-2px);
}

.home-quick-link strong {
    font-size: var(--cs-text);
    color: #ffffff;
    font-weight: 700;
    font-family: var(--font-heading, 'Heebo', sans-serif);
}

.home-quick-link span {
    font-size: var(--cs-text-sm);
    color: var(--cs-on-dark-muted);
    line-height: 1.5;
}

/* ==========================================================================
   HOW TO ORDER
   ========================================================================== */

.howto-section {
    padding: 64px 0 72px;
    background: #ffffff;
}

@media (min-width: 1024px) {
    .howto-section {
        padding: 88px 0 96px;
    }
}

.home-kicker {
    display: block;
    text-align: center;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--cs-muted);
    margin-bottom: 10px;
}

.howto-content h2 {
    font-size: var(--cs-display-sm);
    color: var(--cs-black);
    margin: 0 0 44px;
    text-align: center;
    font-family: var(--font-heading, 'Heebo', sans-serif);
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .howto-content h2 {
        font-size: var(--cs-display);
    }
}

.howto-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .howto-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

.step-card {
    position: relative;
    text-align: start;
    padding: 30px 28px 32px;
    background: var(--cs-paper);
    border: 1px solid transparent;
    border-radius: var(--cs-radius);
    transition: transform 0.3s var(--cs-ease), box-shadow 0.3s var(--cs-ease), border-color 0.3s ease, background 0.3s ease;
}

.step-card:hover {
    transform: translateY(-4px);
    background: #ffffff;
    border-color: var(--cs-line);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
}

.step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.howto-step-icon {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: var(--cs-black);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.howto-step-icon .icon-flip {
    transform: scaleX(-1);
}

.step-number {
    display: block;
    font-family: var(--font-heading, 'Heebo', sans-serif);
    font-size: var(--cs-display-sm);
    font-weight: 800;
    line-height: 1;
    color: var(--cs-line);
    letter-spacing: -0.03em;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .step-number {
        font-size: var(--cs-display);
    }
}

.step-card:hover .step-number {
    color: var(--cs-black);
}

.step-card h3 {
    font-size: var(--cs-text-lg);
    color: var(--cs-black);
    margin: 0 0 8px;
    font-weight: 700;
    font-family: var(--font-heading, 'Heebo', sans-serif);
}

.step-card p {
    color: var(--cs-muted);
    font-size: var(--cs-text);
    line-height: 1.5;
    margin: 0;
}

.howto-cta {
    text-align: center;
    margin-top: 44px;
}

.howto-cta .btn-submit {
    width: auto;
    font-size: var(--cs-text);
    display: inline-flex;
    flex-direction: row;
    padding: 0 40px;
    border-radius: var(--radius-md);
    height: 52px;
}

/* ==========================================================================
   CATEGORY CARDS
   ========================================================================== */

.categories-section {
    padding: 72px 0 96px;
    background: var(--cs-paper);
}

@media (min-width: 1024px) {
    .categories-section {
        padding: 88px 0 112px;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: var(--cs-display-sm);
    color: var(--cs-black);
    margin: 0 0 10px;
    font-weight: 700;
    font-family: var(--font-heading, 'Heebo', sans-serif);
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .section-header h2 {
        font-size: var(--cs-display);
    }
}

.section-header p {
    color: var(--cs-muted);
    font-size: var(--cs-text);
    margin: 0;
}

.categories-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 640px) {
    .categories-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .categories-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
    }
}

.category-card-large {
    position: relative;
    display: block;
    border-radius: var(--cs-radius);
    overflow: hidden;
    height: 340px;
    text-decoration: none;
    color: #ffffff;
    background: var(--cs-black);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s var(--cs-ease), box-shadow 0.35s var(--cs-ease);
    /* Safari drops the rounded clipping on a transformed child without this. */
    isolation: isolate;
}

@media (min-width: 768px) {
    .category-card-large {
        height: 420px;
    }
}

.category-card-large:hover,
.category-card-large:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.16);
    color: #ffffff;
    text-decoration: none;
}

.category-card-large .category-image {
    position: absolute;
    inset: 0;
}

.category-card-large .category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--cs-ease);
}

.category-card-large:hover .category-image img {
    transform: scale(1.06);
}

.category-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 28px 28px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.05) 75%, transparent 100%);
    z-index: 2;
}

.category-overlay h3 {
    font-size: var(--cs-text-lg);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    font-family: var(--font-heading, 'Heebo', sans-serif);
    letter-spacing: -0.01em;
}

/* No description: the title-to-button gap matches the footer link spacing. */
.category-overlay h3 + .view-link {
    margin-top: 18px;
}

.category-overlay p {
    font-size: var(--cs-text);
    color: var(--cs-on-dark-muted);
    margin: 0 0 18px;
    line-height: 1.5;
}

.view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    color: #ffffff;
    border: 2px solid var(--cs-on-dark-muted);
    padding: 9px 22px;
    border-radius: var(--radius-md);
    margin-top: 0;
    align-self: flex-start;
    transition: all 0.3s ease;
}

.view-link svg {
    transition: transform 0.3s var(--cs-ease);
}

.category-card-large:hover .view-link {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--cs-black);
}

.category-card-large:hover .view-link svg {
    transform: translateX(-4px);
}

/* Ensure no WP admin bar overlap. The offset is also set, with !important,
   by the sticky-header fix in israel-market-b2b; keep the two in step. */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Under 600px the admin bar is no longer fixed — it scrolls away with the
   page, so the header sticks to the top of the viewport again. */
@media screen and (max-width: 600px) {
    .admin-bar .site-header {
        top: 0;
    }
}

/* ======================================================================
   SOURCE: catalog.css
   ====================================================================== */

/* ==========================================================================
   @font-face — Caesarstone Brand Fonts
   ========================================================================== */

/* Frutiger LT Pro — Body / UI */
@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Roman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger LT Pro';
    src: url('assets/fonts/FrutigerLTPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Publico Banner — Headings */
@font-face {
    font-family: 'Publico Banner';
    src: url('assets/fonts/PublicoBanner-Roman-Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Publico Banner';
    src: url('assets/fonts/PublicoBanner-Medium-Web.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Publico Banner';
    src: url('assets/fonts/PublicoBanner-Bold-Web.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Header — styles are in header.css (loaded globally)
   ========================================================================== */

/* ==========================================================================
   Mini Cart
   ========================================================================== */

.mini-cart {
    position: relative;
}

.mini-cart-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    text-decoration: none;
    color: var(--color-gray-800);
}

.cart-icon {
    font-size: var(--cs-text-lg);
}

.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: var(--cs-text-sm);
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

.cart-count.pulse {
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.mini-cart-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: 1000;
}

.mini-cart.open .mini-cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mini-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.mini-cart-header h4 {
    font-size: var(--cs-text);
    margin: 0;
}

.mini-cart-items-count {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.mini-cart-items {
    padding: var(--space-3);
    max-height: 240px;
    overflow-y: auto;
}

.empty-cart-msg {
    text-align: center;
    color: var(--color-gray-400);
    padding: var(--space-4);
    font-size: var(--cs-text-sm);
}

.mini-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}

.mini-cart-item:last-child {
    border-bottom: none;
}

.mini-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mini-item-info strong {
    font-size: var(--cs-text-sm);
}

.mini-item-info span {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.mini-item-qty {
    font-weight: 600;
    font-size: var(--cs-text-sm);
}

.more-items {
    text-align: center;
    font-size: var(--cs-text-sm);
    color: var(--color-gray-400);
    padding: var(--space-2);
}

.mini-cart-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
}

/* ==========================================================================
   Catalog Layout
   ========================================================================== */

.catalog-main {
    padding: var(--space-6) 0;
}

.catalog-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

@media (min-width: 640px) {
    .catalog-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.catalog-title-area h1 {
    margin-bottom: var(--space-1);
}

/* Under the catalog title, on one line: breadcrumb | result count. */
.catalog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.catalog-meta .breadcrumbs-opt2,
.catalog-meta .product-count {
    margin: 0;
}

.catalog-meta-sep {
    color: var(--color-gray-300);
}

.catalog-stats,
.product-count {
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
}

/* Page Wrapper (archive-product.php uses .catalog-page) */
.catalog-page {
    padding: var(--space-6) 0;
}

/* Catalog Header Content (inner flex row) */
.catalog-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .catalog-header-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   Filter Bar (archive-product.php structure)
   ========================================================================== */

.filter-bar {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.filter-bar>.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

/* Filter Actions — horizontal row of sort/filter/search */
.filter-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.filter-action-group {
    position: relative;
}

.filter-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    font-size: var(--cs-text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.filter-action-btn:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}

.filter-action-btn svg {
    flex-shrink: 0;
}

/* Search — expandable input */
.search-group {
    position: relative;
}

.search-group .search-input-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-primary);
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0);
    transform-origin: right center;
    transition: all 0.3s ease;
    width: 320px;
    z-index: 10;
}

.search-group.active .filter-action-btn {
    opacity: 0;
    visibility: hidden;
}

.search-group.active .search-input-wrapper {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
}

.search-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: none;
    font-size: var(--cs-text-sm);
    outline: none;
}

.search-input::placeholder {
    color: var(--color-gray-400);
}

/* ==========================================================================
   Category Toggle Boxes
   ========================================================================== */

.category-toggles {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.category-toggle {
    padding: var(--space-2) var(--space-5);
    background: transparent;
    border: 1px solid var(--color-gray-300);
    font-size: var(--cs-text);
    font-weight: 500;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.category-toggle.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ==========================================================================
   Modern Filter Toolbar
   ========================================================================== */

.filter-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.filter-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-tool-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 20px;
    background: var(--cs-black);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--cs-text);
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-tool-btn:hover {
    background: #3d3d3b !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 29, 27, 0.25);
}

.filter-tool-btn svg {
    flex-shrink: 0;
    color: #ffffff;
    stroke: #ffffff;
}

/* Expandable Search */
.search-expandable {
    position: relative;
}

.search-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    font-size: var(--cs-text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-toggle-btn:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}

.search-input-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-primary);
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0);
    transform-origin: right center;
    transition: all 0.3s ease;
    width: 320px;
}

.search-expandable.active .search-toggle-btn {
    opacity: 0;
    visibility: hidden;
}

.search-expandable.active .search-input-wrapper {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
}

.search-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: none;
    font-size: var(--cs-text-sm);
    outline: none;
}

.search-input::placeholder {
    color: var(--color-gray-400);
}

.search-close-btn {
    padding: var(--space-2);
    background: none;
    border: none;
    font-size: var(--cs-text-lg);
    color: var(--color-gray-500);
    cursor: pointer;
    line-height: 1;
}

.search-close-btn:hover {
    color: var(--color-gray-700);
}

/* ==========================================================================
   Filter Side Panel
   ========================================================================== */

.filter-panel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.filter-panel.active {
    opacity: 1;
    visibility: visible;
}

.filter-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.filter-panel-content {
    position: absolute;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.filter-panel.active .filter-panel-content {
    right: 0;
}

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-200);
}

.filter-panel-header h3 {
    font-size: var(--cs-text-lg);
    margin: 0;
}

.filter-panel-close {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    font-size: var(--cs-display-sm);
    color: var(--color-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-panel-close:hover {
    color: var(--color-gray-700);
}

.filter-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 0;
}

.filter-accordion {
    border-bottom: 1px solid var(--color-gray-100);
}

.filter-accordion-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    font-size: var(--cs-text);
    font-weight: 500;
    color: var(--color-gray-700);
    cursor: pointer;
    text-align: right;
}

.filter-accordion-header:hover {
    background: var(--color-gray-50);
}

.filter-accordion-header span {
    flex: 1;
}

.accordion-arrow {
    transition: transform 0.2s ease;
}

.filter-accordion-header.active .accordion-arrow {
    transform: rotate(180deg);
}

.filter-accordion-content {
    display: none;
    padding: 0 var(--space-5) var(--space-4);
}

.filter-accordion-content.active {
    display: block;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-pill {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-gray-300);
    font-size: var(--cs-text-sm);
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.filter-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.filter-panel-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-gray-200);
}

.filter-panel-footer .btn {
    flex: 1;
}

/* ==========================================================================
   Selected Items Bar
   ========================================================================== */

.selected-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    margin-bottom: var(--space-5);
}

.selected-count {
    font-weight: 600;
    font-size: var(--cs-text);
}

/* ==========================================================================
   Product Grid
   ========================================================================== */

.product-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

@media (min-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Product Card with Checkbox
   ========================================================================== */

.product-card {
    position: relative;
    background: #fff;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), opacity 1s ease-in-out;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.product-card.filter-hide {
    opacity: 0;
    pointer-events: none;
}

.product-card.filter-hidden {
    display: none;
}

.product-card.filter-show {
    opacity: 1;
}

/* New product load animation */
.product-card.new-load {
    animation: newProductLoad 0.6s ease-out forwards;
}

@keyframes filterFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes newProductLoad {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Product Checkbox */
.product-checkbox {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 10;
    cursor: pointer;
}

.product-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.product-checkbox .checkmark {
    display: block;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid var(--color-gray-300);
    transition: all var(--transition-fast);
}

.product-checkbox:hover .checkmark {
    border-color: var(--color-primary);
}

.product-checkbox input:checked~.checkmark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.product-checkbox input:checked~.checkmark::after {
    content: '\2713';
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--cs-text-sm);
    font-weight: bold;
    height: 100%;
}

/* Product Link */
.product-link {
    display: block;
    text-decoration: none;
}

.product-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.product-card:hover .product-image img {
    transform: scale(1.03);
}

.product-category {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--cs-text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
}

.product-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: 4px 10px;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    z-index: 5;
}

.product-badge.new {
    background: #fff;
    color: #e65100;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.product-info {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-info .btn-add-single {
    margin-top: auto;
}

.product-name {
    font-family: var(--font-heading);
    font-size: var(--cs-text);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--color-gray-900);
}

.product-sku {
    display: none;
}

.product-attrs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.product-attrs .attr {
    padding: 3px 10px;
    font-size: var(--cs-text-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
}

.btn-add-single {
    width: 100%;
    font-size: var(--cs-text-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-900);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background var(--transition-fast);
}

.btn-add-single:hover {
    background: var(--color-gray-700, #404040);
    color: #fff;
}

/* Hide category capsule on product cards */
.product-card .product-category {
    display: none;
}

/* ==========================================================================
   Product List View
   ========================================================================== */

.product-list {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
    .product-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.product-list .product-card {
    display: flex;
    flex-direction: row;
}

.product-list .product-checkbox {
    top: 50%;
    transform: translateY(-50%);
}

.product-list .product-image {
    width: 100px;
    min-width: 100px;
    aspect-ratio: 1;
}

.product-list .product-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
}

.product-list .product-name {
    flex: 1;
    margin: 0;
}

.product-list .product-sku,
.product-list .product-attrs {
    display: none;
}

.product-list .product-category {
    display: none;
}

.product-list .btn-add-single {
    width: auto;
    white-space: nowrap;
}

/* ==========================================================================
   Product Options Popup
   ========================================================================== */

.product-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.product-popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.popup-content {
    position: relative;
    width: 92vw;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    z-index: 1;
    transform: translateY(24px);
    transition: transform var(--transition-fast);
    border-radius: 0;
    box-sizing: border-box;
}

.product-popup.active .popup-content {
    transform: translateY(0);
}

.popup-close {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--color-gray-200);
    font-size: var(--cs-text-lg);
    color: var(--color-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.popup-close:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.popup-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-gray-200);
}

.popup-header h3 {
    margin-bottom: var(--space-1);
}

.popup-sku {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.popup-body {
    padding: 0; /* layout padding handled by .opt-layout-split children */
}

.option-group {
    margin-bottom: var(--space-5);
}

.option-group:last-child {
    margin-bottom: 0;
}

.option-label {
    display: block;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--color-gray-700);
}

.option-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.option-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-gray-200);
    background: #fff;
    font-size: var(--cs-text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.option-btn:hover {
    border-color: var(--color-gray-400);
}

.option-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Quantity Input */
.quantity-input {
    display: inline-flex;
    border: 1px solid var(--color-gray-200);
}

.qty-btn {
    width: 40px;
    height: 40px;
    background: var(--color-gray-50);
    border: none;
    font-size: var(--cs-text-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.qty-btn:hover {
    background: var(--color-gray-100);
}

.quantity-input input {
    width: 60px;
    height: 40px;
    border: none;
    border-right: 1px solid var(--color-gray-200);
    border-left: 1px solid var(--color-gray-200);
    text-align: center;
    font-size: var(--cs-text);
    font-weight: 600;
}

.quantity-input input:focus {
    outline: none;
}

.popup-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

/* ==========================================================================
   Toast Notification
   ========================================================================== */

.toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--color-primary);
    color: #fff;
    font-weight: 500;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 3000;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast-icon {
    font-size: var(--cs-text-lg);
}

/* ==========================================================================
   Load More Button
   ========================================================================== */

.load-more-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) 0;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-weight: 500;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.load-more-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.load-more-info {
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
    margin: 0;
}


/* ==========================================================================
   Quick Order Strip (Sticky Bottom Bar)
   ========================================================================== */

.quick-order-strip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1500;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
}

.quick-order-strip.active {
    transform: translateY(0);
}

.quick-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.quick-order-title {
    font-weight: 700;
    font-size: var(--cs-text);
    color: var(--color-primary);
}

.quick-order-count {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-600);
}

.quick-order-items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.quick-order-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    min-width: 200px;
}

.quick-order-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.quick-order-item-name {
    font-size: var(--cs-text-sm);
    font-weight: 500;
}

.quick-order-item-sku {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    font-family: var(--font-mono);
}

.quick-order-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-gray-300);
}

.quick-order-qty button {
    width: 28px;
    height: 28px;
    background: var(--color-gray-100);
    border: none;
    font-size: var(--cs-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-order-qty button:hover {
    background: var(--color-gray-200);
}

.quick-order-qty input {
    width: 40px;
    height: 28px;
    border: none;
    border-right: 1px solid var(--color-gray-300);
    border-left: 1px solid var(--color-gray-300);
    text-align: center;
    font-size: var(--cs-text-sm);
    font-weight: 600;
}

.quick-order-item-remove {
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    font-size: var(--cs-text-lg);
    padding: 0 var(--space-1);
}

.quick-order-item-remove:hover {
    color: #e53935;
}

.quick-order-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.quick-order-actions .btn {
    flex: none;
    min-width: 120px;
}

@media (min-width: 768px) {
    .quick-order-actions .btn {
        min-width: 150px;
    }
}

/* ==========================================================================
   Footer — styles are in footer.css (loaded globally)
   ========================================================================== */

/* ==========================================================================
   Quick Order Content (inside strip)
   ========================================================================== */

.quick-order-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    gap: var(--space-4);
}

.selected-count {
    font-size: var(--cs-text);
    font-weight: 500;
    color: var(--color-gray-700);
    direction: rtl;
}

.selected-count strong {
    font-size: var(--cs-text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-left: var(--space-1);
}

/* ==========================================================================
   Selected Product Card Highlight
   ========================================================================== */

.product-card.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Header Cart Link — styles are in header.css (loaded globally) */



/* ==========================================================================
   Footer Menu Lists (WP Nav Menu output)
   ========================================================================== */

.footer-col .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col .menu li {
    margin-bottom: var(--space-2);
}

.footer-col .menu a {
    color: var(--color-gray-400);
    text-decoration: none;
    font-size: var(--cs-text-sm);
    transition: color var(--transition-fast);
}

.footer-col .menu a:hover {
    color: #fff;
}

/* ======================================================================
   SOURCE: product.css
   ====================================================================== */

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
    padding: var(--space-4) 0;
    background: var(--color-gray-50);
    font-size: var(--cs-text-sm);
}

.breadcrumb a {
    color: var(--color-gray-600);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb .separator {
    color: var(--color-gray-400);
    margin: 0 var(--space-2);
}

.breadcrumb .current {
    color: var(--color-gray-900);
    font-weight: 500;
}

/* ==========================================================================
   Product Layout
   ========================================================================== */

.product-main {
    padding: var(--space-6) 0;
}

.product-layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .product-layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }
}

/* ==========================================================================
   Product Gallery
   ========================================================================== */

.product-gallery {
    position: sticky;
    top: calc(var(--space-4) + 60px);
}

.gallery-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
    background: var(--color-gray-100);
}

.gallery-main img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.gallery-thumbs {
    display: flex;
    gap: var(--space-3);
}

.thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: none;
    transition: border-color var(--transition-fast);
}

.thumb:hover {
    border-color: var(--color-gray-300);
}

.thumb.active {
    border-color: var(--color-primary);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Product Details
   ========================================================================== */

.product-meta {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.product-category-badge {
    padding: var(--space-1) var(--space-3);
    font-size: var(--cs-text-sm);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
}

.product-sku-badge {
    padding: var(--space-1) var(--space-3);
    font-size: var(--cs-text-sm);
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
}

.product-title {
    font-size: var(--cs-display-sm);
    margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
    .product-title {
        font-size: var(--cs-display);
    }
}

.product-description {
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

/* ==========================================================================
   Attributes
   ========================================================================== */

.product-attributes {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.attributes-title {
    font-size: var(--cs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-4);
}

.attributes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.attribute-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.attribute-item dt {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.attribute-item dd {
    font-size: var(--cs-text);
    font-weight: 600;
    color: var(--color-gray-900);
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.product-pricing {
    padding: var(--space-5);
    background: linear-gradient(135deg, #f0f7ff, #e8f4ff);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.price-label {
    display: block;
    font-size: var(--cs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-1);
}

.price-value {
    display: block;
    font-size: var(--cs-text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.price-note {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

/* ==========================================================================
   Product Actions
   ========================================================================== */

.product-actions {
    margin-bottom: var(--space-6);
}

.quantity-selector {
    margin-bottom: var(--space-4);
}

.quantity-input {
    display: flex;
    align-items: center;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 160px;
}

.qty-btn {
    width: 48px;
    height: 48px;
    font-size: var(--cs-text-lg);
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.qty-btn:hover {
    background: var(--color-gray-100);
}

.quantity-input input {
    flex: 1;
    width: 100%;
    height: 48px;
    text-align: center;
    font-size: var(--cs-text);
    font-weight: 600;
    border: none;
    -moz-appearance: textfield;
}

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

/* ==========================================================================
   Product Notes
   ========================================================================== */

.product-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.note-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--cs-text-sm);
    color: var(--color-gray-600);
}

.note-icon {
    font-size: var(--cs-text-lg);
}

/* ======================================================================
   SOURCE: cart.css
   ====================================================================== */

/* ==========================================================================
   Cart Layout
   ========================================================================== */

.cart-main {
    padding: var(--space-6) 0;
    min-height: 60vh;
}

.cart-header {
    margin-bottom: var(--space-6);
}

.cart-header h1 {
    margin-bottom: var(--space-1);
}

.cart-layout {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .cart-layout {
        grid-template-columns: 1fr 380px;
        gap: var(--space-8);
    }
    /* TASK 5: Prevent sidebar from stretching to match items column height */
    .cart-summary {
        align-self: start;
    }
}

/* ==========================================================================
   Cart Items
   ========================================================================== */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
}

/* ==========================================================================
   Cart Table Container  (matches prototype .cart-mockup-container)
   ========================================================================== */
.cart-items-table {
    border: 1px solid #e0e0e0;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
}

/* ==========================================================================
   Cart Column Headers  — CSS Grid, exact prototype: 3fr 1.5fr 1.5fr 50px
   ========================================================================== */
.cart-headers {
    display: grid;
    grid-template-columns: 3fr 1.5fr 1.5fr 50px;
    background: #f9f9f9;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    color: #333;
    font-size: var(--cs-text-sm);
    direction: rtl;
}

/* Individual header cells */
.header-product { /* left-most in RTL = rightmost visually */ }
.header-qty     { text-align: center; }
.header-price   { text-align: left; }  /* price aligns left (visual) */
.header-remove  { /* empty spacer */ }

/* ==========================================================================
   Cart Items  — same grid columns as headers = pixel-perfect alignment
   ========================================================================== */
.cart-item {
    display: grid;
    grid-template-columns: 3fr 1.5fr 1.5fr 50px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
    direction: rtl;
    transition: background 150ms ease;
}

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

.cart-item:hover {
    background: #fafafa;
}

/* Cart items are inside the form, so the form needs flex + gap too */
#cart-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Column 1: Image & Name */
.item-details {
    display: flex;
    align-items: center;
    gap: 15px;
    /* no flex: needed — grid handles the column width */
}

.item-image {
    width: 100px;
    height: 100px;
    border-radius: 0;
    object-fit: cover;
    border: 1px solid var(--border-color, #ebebeb);
}

.item-title {
    font-size: var(--cs-text);
    font-weight: 600;
    margin: 0 0 5px 0;
}

.item-meta {
    font-size: var(--cs-text-sm);
    color: #666;
    margin: 0;
}

/* Column 2: Quantity */
.item-quantity {
    display: flex;
    justify-content: center;
    /* no flex: needed — grid handles the column width */
}

.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color, #ebebeb);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 45px;
    background: #fff;
}

.qty-btn {
    background: #f9f9f9;
    border: none;
    width: 40px;
    height: 100%;
    cursor: pointer;
    font-size: var(--cs-text-lg);
    color: var(--primary-color, var(--cs-black));
    transition: background 0.2s;
}

.qty-btn:hover {
    background: #eee;
}

.qty-input {
    width: 50px;
    height: 100%;
    border: none;
    border-right: 1px solid var(--border-color, #ebebeb);
    border-left: 1px solid var(--border-color, #ebebeb);
    text-align: center;
    font-weight: 600;
    font-size: var(--cs-text);
    color: var(--primary-color, var(--cs-black));
    -moz-appearance: textfield;
}

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

/* Column 3: Price */
.item-price-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* price sits at left edge of column */
    /* no flex: needed — grid handles the column width */
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 160px;
}

.price-label {
    font-size: var(--cs-text-sm);
    color: #555;
}

.price-label.bold {
    font-weight: bold;
    color: #000;
}

.regular-price {
    text-decoration: line-through;
    color: #999;
    font-size: var(--cs-text-sm);
    direction: ltr;
    display: inline-block;
}

.item-price {
    font-size: var(--cs-text-lg);
    font-weight: 700;
    color: #000;
    margin: 0;
    direction: ltr;
    display: inline-block;
}

/* Column 4: Remove Button */
.item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    /* no flex: needed — grid handles the column width */
}

.item-remove svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    min-width: 18px;
}

/* TASK 7: Override WooCommerce global .remove styles that hide our trash SVG */
.cart-item .item-remove a.remove {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    font-size: 0 !important;       /* hide the WC "×" character */
    line-height: 1 !important;
    text-indent: 0 !important;
    color: #999 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}
.cart-item .item-remove a.remove svg {
    display: block !important;
    width: 18px;
    height: 18px;
    color: #999;
    transition: color 0.2s;
}
.cart-item .item-remove a.remove:hover svg {
    color: #ef4444 !important;
}

.cart-continue {
    padding-top: var(--space-4);
    text-align: center;
}

/* Toast notification for quantity change & item removal */
.cart-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e293b;
    color: #fff;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--cs-text-sm);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}

.cart-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.cart-toast .toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cart-toast .toast-icon.success {
    color: #10b981;
}

.cart-toast .toast-undo {
    color: #60a5fa;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    border: none;
    background: none;
    font-size: var(--cs-text-sm);
}

.cart-toast .toast-undo:hover {
    color: #93c5fd;
}

/* ==========================================================================
   Order Summary
   ========================================================================== */

.summary-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    position: sticky;
    top: calc(var(--space-4) + 60px);
}

.summary-title {
    font-size: var(--cs-text-lg);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

/* The summary's vertical rhythm.

   This used to be a parent `gap` *plus* a padding-bottom on each row, and the
   three groups inside the checkout sidebar sat in three different parents —
   .summary-rows (gap 12), .review-items (no gap) and a bare inline-styled div
   (no gap). The result was four different rhythms in one card, and the price
   rows put their divider 13px below their own text and 0px above the next
   row's: the line was glued to the row beneath it.

   The rhythm now belongs to the row alone: symmetric vertical padding with a
   bottom border. A divider is therefore always exactly midway between the two
   lines of text it separates, whatever the parent does. */
.summary-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-5);
}

.summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100, #f5f5f5);
    font-size: var(--cs-text);
    color: var(--color-gray-600);
}

/* No divider above the first row or below the last — the card's title rule and
   the total's rule already close the group. */
.summary-row:first-child {
    padding-top: 0;
}

.summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-2);
}

.total-label {
    font-weight: 500;
    color: var(--color-gray-800);
}

.total-value {
    font-size: var(--cs-text-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    white-space: nowrap; /* TASK 6: prevent price wrapping to 2nd line */
    flex-shrink: 0;
}

.summary-pricing {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4);
    background: linear-gradient(135deg, #f0f7ff, #e8f4ff);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

.pricing-label {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-600);
}

.pricing-value {
    font-weight: 600;
    color: var(--color-primary);
}

/* Proceed button — text aligned left */
.summary-card .btn-block {
    display: block;
    width: 100%;
    text-align: left;
}

/* Make the submit button fill the full sidebar width */
.cart-summary .btn-submit,
.summary-card .btn-submit {
    display: flex;
    width: 100%;
    margin-top: var(--space-4, 16px);
    box-sizing: border-box;
}



/* ======================================================================
   SOURCE: checkout.css
   ====================================================================== */

/* ==========================================================================
   Checkout Steps
   ========================================================================== */

.checkout-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--cs-text-sm);
}

.step {
    color: var(--color-gray-400);
    font-weight: 500;
}

.step.active {
    color: var(--color-primary);
}

.step.completed {
    color: var(--color-gray-600);
}

.step-separator {
    color: var(--color-gray-300);
}

/* ==========================================================================
   Checkout Layout
   ========================================================================== */

.checkout-main {
    padding: var(--space-6) 0;
}

.checkout-header {
    margin-bottom: var(--space-6);
}

.checkout-header h1 {
    margin-bottom: var(--space-1);
}

.checkout-layout {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .checkout-layout {
        grid-template-columns: 1fr 380px;
        gap: var(--space-8);
    }
}

/* ==========================================================================
   Checkout Sections
   ========================================================================== */

.checkout-section {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (min-width: 640px) {
    .checkout-section {
        padding: var(--space-6);
    }
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--cs-text-lg);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.section-icon {
    font-size: var(--cs-text-lg);
}

/* Account Info Card */
.account-info-card {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .account-info-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label {
    font-size: var(--cs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
}

.info-value {
    font-size: var(--cs-text);
    font-weight: 500;
    color: var(--color-gray-800);
}

/* Form Grid */
.form-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid .full-width {
        grid-column: 1 / -1;
    }
}

.form-hint {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-2);
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

/* ==========================================================================
   Customer Details Card (checkout)
   ========================================================================== */

.customer-details-card {
    display: grid;
    gap: var(--space-2);
}

.customer-details-card .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-gray-50);
}

.customer-details-card .detail-row:last-child {
    border-bottom: none;
}

.customer-details-card .detail-label {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    font-weight: 500;
}

.customer-details-card .detail-value {
    font-size: var(--cs-text);
    font-weight: 500;
    color: var(--color-gray-800);
}

/* ==========================================================================
   Oracle Address Selector
   ========================================================================== */

.address-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.address-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    position: relative;
}

.address-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.address-option .address-card {
    flex: 1;
    padding: var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.address-option .address-card strong {
    font-size: var(--cs-text);
    color: var(--color-gray-800);
}

.address-option .address-card span {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.address-option:hover .address-card {
    border-color: var(--color-gray-400);
}

.address-option input[type="radio"]:checked ~ .address-card,
.address-option.selected .address-card {
    border-color: var(--color-primary);
    background: #f0f7ff;
    box-shadow: 0 0 0 1px var(--color-primary);
}

.address-card.single-address {
    padding: var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    color: var(--color-gray-600);
    font-size: var(--cs-text);
}

/* ==========================================================================
   Checkout Fields (PO, Date, Instructions)
   ========================================================================== */

.checkout-field {
    margin-bottom: var(--space-4);
}

.checkout-field:last-child {
    margin-bottom: 0;
}

.checkout-field label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--cs-text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.checkout-field .optional {
    font-size: var(--cs-text-sm);
    font-weight: 400;
    color: var(--color-gray-400);
}

.checkout-field input[type="text"],
.checkout-field input[type="date"],
.checkout-field textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: var(--cs-text);
    font-family: inherit;
    color: var(--color-gray-800);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.checkout-field input:focus,
.checkout-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.checkout-field textarea {
    resize: vertical;
    min-height: 60px;
}

/* ==========================================================================
   Checkout Summary
   ========================================================================== */

.checkout-summary .summary-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    position: sticky;
    top: calc(var(--space-4) + 60px);
}

.summary-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.summary-item .item-name {
    font-weight: 500;
    color: var(--color-gray-800);
}

.summary-item .item-attr {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.summary-item .item-qty {
    font-weight: 500;
    color: var(--color-gray-600);
}

.submit-order-btn {
    margin-top: var(--space-2);
}

.back-to-cart {
    display: block;
    text-align: center;
    margin-top: var(--space-4);
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.back-to-cart:hover {
    color: var(--color-primary);
}

/* ======================================================================
   SOURCE: confirmation.css
   ====================================================================== */

/* ==========================================================================
   Confirmation Layout
   ========================================================================== */

.confirmation-main {
    padding: var(--space-8) 0;
    min-height: 70vh;
}

.confirmation-content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

/* ==========================================================================
   Success Icon
   ========================================================================== */

.success-icon {
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
    animation: scaleIn 0.4s ease-out;
}

.checkmark {
    color: #fff;
    font-size: var(--cs-display);
    font-weight: 700;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================================
   Title & Subtitle
   ========================================================================== */

.confirmation-title {
    font-size: var(--cs-display-sm);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

.confirmation-subtitle {
    font-size: var(--cs-text);
    color: var(--color-gray-600);
    margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
    .confirmation-title {
        font-size: var(--cs-display);
    }
}

/* ==========================================================================
   Order Details Card
   ========================================================================== */

.order-details-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
    text-align: left;
}

.order-number {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-5);
}

.order-number .label {
    font-size: var(--cs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
}

.order-number .value {
    font-size: var(--cs-text-lg);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-primary);
}

.order-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-item .info-label {
    font-size: var(--cs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
}

.info-item .info-value {
    font-size: var(--cs-text);
    font-weight: 500;
    color: var(--color-gray-800);
}

.status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--cs-text-sm);
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border-radius: var(--radius-sm);
}

.order-items-summary {
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--space-5);
}

.order-items-summary h3 {
    font-size: var(--cs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.items-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.items-list li {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-gray-50);
}

.items-list li:last-child {
    border-bottom: none;
}

.items-list .item-name {
    color: var(--color-gray-700);
}

.items-list .item-qty {
    font-weight: 500;
    color: var(--color-gray-600);
}

/* ==========================================================================
   Next Steps Timeline
   ========================================================================== */

.next-steps {
    margin-bottom: var(--space-8);
    text-align: left;
}

.next-steps h2 {
    font-size: var(--cs-text-lg);
    margin-bottom: var(--space-5);
    text-align: center;
}

.steps-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
}

.step-item {
    display: flex;
    gap: var(--space-4);
    position: relative;
}

.step-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: -16px;
    width: 2px;
    background: var(--color-gray-200);
}

.step-item:last-child::before {
    display: none;
}

.step-marker {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--cs-text-sm);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.step-item.completed .step-marker {
    background: var(--color-success);
    color: #fff;
}

.step-item.active .step-marker {
    background: var(--color-primary);
    color: #fff;
}

.step-item.completed::before,
.step-item.active::before {
    background: var(--color-success);
}

.step-content h4 {
    font-size: var(--cs-text);
    margin-bottom: var(--space-1);
}

.step-content p {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

/* ==========================================================================
   Actions
   ========================================================================== */

.confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

@media (min-width: 480px) {
    .confirmation-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ==========================================================================
   Contact Info
   ========================================================================== */

.contact-info {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.contact-info a {
    color: var(--color-primary);
    font-weight: 500;
}

/* ======================================================================
   SOURCE: login.css
   ====================================================================== */

/* ==========================================================================
   Login Page Layout
   ========================================================================== */

.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: var(--space-6) 0;
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Login Card */
.login-card {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
    position: relative;
}

/* Login States */
.login-state {
    display: none;
}

.login-state.active {
    display: block;
}

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-header h1 {
    font-size: var(--cs-display-sm);
    margin-bottom: var(--space-2);
}

.login-header .subtitle {
    color: var(--color-gray-500);
    font-size: var(--cs-text);
}

.success-icon,
.error-icon-large {
    font-size: var(--cs-display);
    margin-bottom: var(--space-3);
    display: block;
}

/* Login Form */
.login-form {
    margin-bottom: var(--space-5);
}

.login-form .form-group {
    margin-bottom: var(--space-4);
}

.login-form .form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    color: var(--color-gray-700);
}

.login-form .form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--cs-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-form .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* Code Input */
.code-form .code-inputs {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    direction: ltr;
    /* Numbers LTR */
}

.code-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: var(--cs-text-lg);
    font-weight: 600;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.code-digit:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* Login Help */
.login-help {
    text-align: center;
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.login-help p {
    margin-bottom: var(--space-2);
}

.login-help a {
    color: var(--color-primary);
    font-weight: 500;
}

.login-help .timer {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-400);
}

.resend-link {
    cursor: pointer;
}

/* Back Button */
.back-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    font-size: var(--cs-text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.back-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

/* Error State */
.error-details {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    font-size: var(--cs-text-sm);
    color: #991b1b;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Button Styles */
.btn-block {
    display: block;
    width: 100%;
}

.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--cs-text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 640px) {
    .login-header h1 {
        font-size: var(--cs-display-sm);
    }

    .code-digit {
        width: 52px;
        height: 60px;
    }
}

/* ======================================================================
   SOURCE: account.css
   ====================================================================== */

/* ==========================================================================
   Account Main Layout
   ========================================================================== */

.account-main {
    padding: var(--space-6) 0;
    min-height: calc(100vh - 180px);
}

.account-header {
    margin-bottom: var(--space-6);
}

.account-header h1 {
    margin-bottom: var(--space-1);
}

.account-layout {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .account-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--space-8);
    }
}

/* ==========================================================================
   Account Sidebar
   ========================================================================== */

.account-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: 100px;
    align-self: start;
}

.account-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.account-avatar {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
    color: #fff;
    font-size: var(--cs-text-lg);
    font-weight: 600;
}

.account-company {
    font-size: var(--cs-text);
    margin-bottom: var(--space-1);
}

.account-email {
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
    margin-bottom: var(--space-4);
}

.account-details {
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--space-4);
    text-align: right;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--cs-text-sm);
}

.detail-label {
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.detail-value {
    color: var(--color-gray-800);
    text-align: left;
}

/* Account Navigation */
.account-nav {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-sm);
}

.account-nav .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    transition: background var(--transition-fast);
}

.account-nav .nav-item:hover {
    background: var(--color-gray-50);
    text-decoration: none;
}

.account-nav .nav-item.active {
    background: var(--color-primary);
    color: #fff;
}

.nav-icon {
    font-size: var(--cs-text-lg);
}

/* ==========================================================================
   Orders Section
   ========================================================================== */

.orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.orders-header h2 {
    margin: 0;
}

.orders-stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
}

.stat-separator {
    color: var(--color-gray-300);
}

/* Orders List */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Order Card */
.order-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.order-card.order-cancelled {
    opacity: 0.7;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.order-number {
    font-weight: 600;
    color: var(--color-gray-900);
}

.order-date {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

/* Order Status Badges */
.order-status {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--cs-text-sm);
    font-weight: 600;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-approved {
    background: #dbeafe;
    color: #1e40af;
}

.status-completed {
    background: #dcfce7;
    color: #166534;
}

.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

/* Order Items */
.order-items {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.order-items.collapsed {
    padding: var(--space-3) var(--space-4);
}

.items-summary {
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
}

.order-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.order-item img {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.order-item .item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-item .item-name {
    font-weight: 500;
    font-size: var(--cs-text-sm);
}

.order-item .item-attrs {
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
}

.order-item .item-qty {
    color: var(--color-gray-600);
    font-size: var(--cs-text-sm);
}

/* Order Footer */
.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
}

.order-total {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--cs-text-sm);
}

.total-label {
    color: var(--color-gray-500);
}

.total-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* Pagination */
.orders-pagination {
    margin-top: var(--space-6);
    text-align: center;
}

.pagination-info {
    margin-top: var(--space-3);
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
}

/* ==========================================================================
   Modal Styles
   ========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 1000;
}

.modal-content {
    background: #fff;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    width: 32px;
    height: 32px;
    background: var(--color-gray-100);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--cs-text-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
    transition: background var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-gray-200);
}

.modal-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.modal-header h2 {
    margin-bottom: var(--space-1);
}

.modal-header .order-number {
    color: var(--color-gray-500);
    font-size: var(--cs-text-sm);
}

.modal-body {
    padding: var(--space-5);
}

.modal-section {
    margin-bottom: var(--space-5);
}

.modal-section:last-child {
    margin-bottom: 0;
}

.modal-section h4 {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status Timeline */
.status-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.timeline-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    opacity: 0.5;
}

.timeline-step.completed,
.timeline-step.active {
    opacity: 1;
}

.step-icon {
    width: 28px;
    height: 28px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cs-text-sm);
}

.timeline-step.completed .step-icon {
    background: var(--color-success);
    color: #fff;
}

.timeline-step.active .step-icon {
    background: var(--color-primary);
    color: #fff;
}

.step-label {
    flex: 1;
    font-weight: 500;
}

.step-date {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .account-sidebar {
        order: 2;
    }

    .account-content {
        order: 1;
    }

    .account-card .account-details {
        display: none;
    }

    .order-item img {
        width: 40px;
        height: 40px;
    }
}


/* ======================================================================
   STOREFRONT THEME OVERRIDES
   ====================================================================== */

/* Fix Storefront's float layout on WooCommerce pages.
   Storefront uses float:left on #primary which causes the footer
   to overlap the main content area. We clear the container properly. */
.woocommerce-page #content .col-full {
    overflow: hidden;
    /* clearfix for floated #primary */
}

.woocommerce-page .content-area {
    float: none !important;
    width: 100% !important;
}

/* Ensure the cart page has a light background */
.cart-main {
    background: var(--color-gray-50, #fafafa);
    position: relative;
    z-index: 1;
}

/* Storefront default body color override */
body.woocommerce-cart,
body.woocommerce-checkout {
    background: var(--color-gray-50, #fafafa);
}

/* Override Storefront's #content wrapper */
body.woocommerce-cart #content,
body.woocommerce-checkout #content {
    background: var(--color-gray-50, #fafafa);
}

/* Empty cart state — matches prototype  */
.empty-cart {
    text-align: center;
    padding: var(--space-12, 48px) var(--space-4, 16px);
    max-width: 480px;
    margin: 0 auto;
}

.empty-cart-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-6, 24px);
    background: linear-gradient(135deg, #f0f7ff, #e8f4ff);
    border-radius: var(--radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-cart-icon svg {
    width: 56px;
    height: 56px;
    color: var(--color-primary, var(--cs-black));
    opacity: 0.7;
}

.empty-cart h2 {
    font-size: var(--cs-text-lg);
    margin-bottom: var(--space-2, 8px);
    color: var(--color-gray-900, #171717);
}

.empty-cart p {
    color: var(--color-gray-500, #737373);
    font-size: var(--cs-text);
    margin-bottom: var(--space-6, 24px);
    line-height: 1.6;
}

.empty-cart .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.empty-cart .btn svg {
    width: 18px;
    height: 18px;
}

/* Hide WooCommerce's default "cart is empty" notice — we use our own design */
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .return-to-shop {
    display: none !important;
}

/* Hide Storefront's default page title on cart/checkout pages
   (we use our own inline heading in the template) */
body.woocommerce-account .entry-header,
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header {
    display: none;
}

/* Remove Storefront default padding on WooCommerce content area */
body.woocommerce-cart .hentry,
body.woocommerce-checkout .hentry {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Ensure Storefront .entry-content wrapper doesn't add unwanted margins */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
    margin: 0;
}

/* Cart page breadcrumb — hide on custom cart */
body.woocommerce-cart .storefront-breadcrumb,
body.woocommerce-checkout .storefront-breadcrumb {
    display: none;
}

/* Fix white space under footer — push footer down without breaking layout */
body.woocommerce-cart .cart-main {
    min-height: 60vh;
}

body.woocommerce-cart .cart-main>.container {
    width: 100%;
}

/* ==========================================================================
   E2E UI FIXES (Checkout & My Account)
   ========================================================================== */

/* Order Review Sidebar */
.order-review-sidebar {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: var(--space-6);
    position: sticky;
    top: 100px; /* offset from top nav */
    align-self: start; /* needed for sticky in grid */
}

/* Address Selector (Radio Button Logic) */
.address-selector .address-option {
    cursor: pointer;
    position: relative;
    display: block; /* ensure it takes full width */
}
.address-selector .address-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.address-selector .address-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    border: 2px solid #eee;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    background: #fafafa;
}
.address-selector input[type="radio"]:checked + .address-card {
    border-color: var(--color-primary);
    background: rgba(43, 108, 176, 0.05); /* subtle primary bg */
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* My Account Layout Fixes */
.myaccount-addresses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-2);
}
.myaccount-address-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
}
.myaccount-address-card strong {
    font-size: var(--cs-text);
    color: var(--color-gray-900);
    margin-bottom: var(--space-1);
}
.myaccount-address-card span {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-600);
}
.detail-item.full-width-item {
    grid-column: 1 / -1;
}
/* ==========================================================================
   E2E UI FIXES (V2 - Prototypes)
   ========================================================================== */

/* Progress Bar */
.progress-bar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-6);
}
.progress-step {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-gray-600);
}
.progress-step.active, .progress-step.completed {
    font-weight: 600;
    padding: 0;
}
.step-circle {
    width: 30px;
    height: 30px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    font-size: var(--cs-text-sm);
}
.progress-step.active .step-circle, .progress-step.completed .step-circle {
    background: var(--color-primary);
}
.progress-line {
    height: 2px;
    width: 100px;
    background: var(--color-gray-200);
    margin: 0 15px;
}
.progress-line.completed {
    background: var(--color-primary);
}

/* Two Column Grid */
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
@media (max-width: 900px) {
    .two-col-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Submit Button Hover Fix */
.btn-submit {
    transition: background 0.3s ease;
}
.btn-submit:hover {
    background: #333 !important;
    color: #ffffff !important;
}

/* My Account - Profile Card */
.profile-card {
    background: #fff;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: var(--space-6);
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-gray-200);
}
.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cs-text-lg);
    color: var(--color-gray-600);
}
.profile-title h2 { margin: 0 0 5px 0; font-size: var(--cs-text-lg); }
.profile-title p { margin: 0; color: var(--color-gray-600); font-size: var(--cs-text-sm); }
.profile-details { display: flex; flex-direction: column; gap: 15px; }
.detail-row { display: flex; justify-content: space-between; font-size: var(--cs-text); }
.detail-label { color: var(--color-gray-600); font-weight: 600; }
.detail-value { color: var(--color-gray-900); font-weight: 500; }

/* My Account - Orders & Content Section */
.content-section {
    background: #fff;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: var(--space-6);
}
.content-section h3, .content-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: var(--cs-text-lg);
    border-bottom: 2px solid var(--color-gray-50);
    padding-bottom: 10px;
}
.order-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.order-header {
    background: var(--color-gray-50);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.order-meta { display: flex; gap: 20px; }
.order-meta-item span { display: block; font-size: var(--cs-text-sm); color: var(--color-gray-600); margin-bottom: 4px; }
.order-meta-item strong { font-size: var(--cs-text); }
.order-status { padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--cs-text-sm); font-weight: bold; }
.status-processing { background: #ebf8ff; color: #2b6cb0; }
.status-completed { background: #f0fff4; color: #2f855a; }
.status-cancelled, .status-failed { background: #fff5f5; color: #c53030; }
.status-pending { background: #fffff0; color: #d69e2e; }

.order-body {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-items { color: var(--color-gray-600); font-size: var(--cs-text); }
.btn-view {
    padding: 8px 20px;
    background: white;
    border: 1px solid var(--color-gray-900);
    color: var(--color-gray-900);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-view:hover { background: var(--color-gray-900); color: white !important; }

/* Order Complete Success Card */
.success-card {
    background: #fff;
    padding: 50px 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
}
.success-icon {
    width: 80px;
    height: 80px;
    background: #f0fff4;
    color: #2f855a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cs-display);
    margin: 0 auto 20px auto;
}
.success-card h1 { margin-top: 0; margin-bottom: 10px; font-size: var(--cs-display-sm); color: var(--color-primary); }
.success-message { color: var(--color-gray-600); font-size: var(--cs-text); margin-bottom: 40px; line-height: 1.6; }
.order-details-box {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 30px;
    display: flex;
    justify-content: space-around;
    text-align: right;
    margin-bottom: 40px;
}
.order-details-box .detail-item span { display: block; color: var(--color-gray-600); font-size: var(--cs-text-sm); margin-bottom: 5px; }
.order-details-box .detail-item strong { display: block; font-size: var(--cs-text); color: var(--color-primary); }
.success-card .actions { display: flex; justify-content: center; gap: 20px; }
/* TASK 9b: Scoped CTA rules — equal size, proper hover, no dark-on-dark */
.success-card .actions a.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 50px !important;
    padding: 0 32px !important;
    font-size: var(--cs-text) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    transition: background 0.25s, color 0.25s !important;
    border-width: 2px !important;
    border-style: solid !important;
}
.success-card .actions a.btn-primary {
    background: var(--cs-black) !important;
    color: #fff !important;
    border-color: var(--cs-black) !important;
}
.success-card .actions a.btn-primary:hover {
    background: #444 !important;
    color: #fff !important;
    border-color: #444 !important;
}
.success-card .actions a.btn-secondary {
    background: transparent !important;
    color: var(--cs-black) !important;
    border-color: var(--cs-black) !important;
}
.success-card .actions a.btn-secondary:hover {
    background: var(--cs-black) !important;
    color: #fff !important;
    border-color: var(--cs-black) !important;
}
@media (max-width: 600px) {
    .order-details-box { flex-direction: column; gap: 20px; text-align: center; }
    .success-card .actions { flex-direction: column; align-items: center; }
    .progress-line { width: 40px; }
    .order-body { flex-direction: column; gap: 15px; align-items: flex-start; }
    .order-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .order-meta { flex-direction: column; gap: 10px; }
}


/* ==========================================================================
   E2E UI FIXES (V3 - Layouts)

   This section used to open with a second :root, 5,900 lines below the one
   that declares the design tokens, redeclaring eight of them. It was written
   when those variables were genuinely missing ("Missing CSS Variables"); they
   have not been missing for a long time, and all it did since was win.

   Five of the eight were the same value twice over (--color-gray-50, -100,
   -200, and --space-3/4/6, whose 12/16/24px are what 0.75/1/1.5rem already
   compute to at the 16px root). Two were not, and those two were the reason
   an edit to the documented palette did nothing:

     --color-gray-600   #737373 here, #525252 in the token block. #737373 is
                        the ladder's own --color-gray-500, so secondary text
                        was sitting one step lighter than the palette says,
                        at 4.7:1 on white instead of 7.6:1.
     --color-gray-900   #171717 here, var(--cs-black) = #0b0b0d in the token
                        block — the black sampled off the marble slab.

   The radii went the same way in #105. There is one :root now; if a token
   needs a different value, it is changed where it is declared.
   ========================================================================== */

.account-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    align-items: start;
    text-align: right;
}

@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.address-card {
    border: 1px solid var(--color-gray-200);
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}
.address-card strong {
    display: block;
    font-size: var(--cs-text);
    margin-bottom: 8px;
    color: var(--color-gray-900);
}
.address-card p {
    margin: 0;
    color: var(--color-gray-600);
    font-size: var(--cs-text-sm);
    line-height: 1.5;
}

/* ==========================================================================
   Order History Card (My Account)
   ========================================================================== */
.order-card { border: 1px solid #ebebeb; border-radius: 0; margin-bottom: 30px; overflow: hidden; background: #fff; }
.order-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #fafafa; border-bottom: 1px solid #ebebeb; flex-wrap: wrap; gap: 15px; }
.order-header-info { display: flex; gap: 40px; flex-wrap: wrap; }
.info-block { display: flex; flex-direction: column; gap: 5px; }
.info-label { font-size: var(--cs-text-sm); color: #666; }
.info-value { font-weight: 700; font-size: var(--cs-text); color: var(--cs-black); }
.order-items-preview { padding: 20px; }
.status-pill { background: #e3f2fd; color: #1976d2; padding: 6px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--cs-text-sm); display: inline-block; }
.btn-view { border: 1px solid var(--cs-black); background: transparent; padding: 8px 24px; border-radius: var(--radius-md); font-weight: 600; color: var(--cs-black); text-decoration: none; transition: all 0.2s; display: inline-block; }
.btn-view:hover { background: var(--cs-black); color: #fff; text-decoration: none; }

/* ==========================================================================
   Layout Splits (Cart, Checkout, Account, Order)
   ========================================================================== */
.account-layout, .order-details-layout { display: flex; align-items: flex-start; gap: 40px; width: 100%; }
.main-section, .account-content, .order-details-section { flex: 2; width: 100%; }
.sidebar-section, .account-sidebar { flex: 1; width: 100%; }

@media (max-width: 900px) {
    .account-layout, .order-details-layout { flex-direction: column; }
    .main-section, .account-content, .order-details-section,
    .sidebar-section, .account-sidebar { flex: none; width: 100%; }
}

/* ==========================================================================
   Unified Product Component
   ========================================================================== */
.product-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #ebebeb;
    background: #fff;
    margin-bottom: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.product-info-right { display: flex; align-items: center; gap: 20px; }
.product-thumbnail { width: 80px; height: 80px; border-radius: 0; object-fit: cover; flex-shrink: 0; }
.product-details { display: flex; flex-direction: column; gap: 4px; }
.product-name { font-size: var(--cs-text); font-weight: 700; margin: 0; color: var(--cs-black); }
.product-meta { font-size: var(--cs-text-sm); color: #666; margin: 0; }
.product-quantity-left { 
    font-size: var(--cs-text); font-weight: 600; color: var(--cs-black); 
    background: #f5f5f5; padding: 8px 16px; border-radius: var(--radius-sm);
}

/* Summary Box Overrides (Checkout & Cart Sidebars) */
.cart-summary .product-line-item,
.order-review-sidebar .product-line-item {
    padding: 15px; margin-bottom: 15px; border: 1px solid #eee; box-shadow: none;
}
.cart-summary .product-info-right,
.order-review-sidebar .product-info-right { gap: 15px; }
.cart-summary .product-thumbnail,
.order-review-sidebar .product-thumbnail { width: 50px; height: 50px; flex-shrink: 0; }
.cart-summary .product-name,
.order-review-sidebar .product-name { font-size: var(--cs-text); }
.cart-summary .product-quantity-left,
.order-review-sidebar .product-quantity-left { font-size: var(--cs-text-sm); padding: 4px 10px; }

/* ==========================================================================
   Hide Native Number Input Spinner Arrows
   ========================================================================== */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* ==========================================================================
   Action Dropdowns (Sort & Filter)
   ========================================================================== */
.action-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    min-width: 200px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}
.action-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.action-dropdown-list { list-style: none; padding: 10px 0; margin: 0; }
.action-dropdown-list li { padding: 8px 20px; text-align: right; }
.action-dropdown-list button.sort-option {
    background: none; border: none; padding: 0; margin: 0; width: 100%; text-align: right;
    font-size: var(--cs-text); color: var(--color-gray-900); cursor: pointer; font-family: inherit;
}
.action-dropdown-list button.sort-option:hover { color: var(--color-primary); }
.action-dropdown-list button.sort-option.active { font-weight: bold; color: var(--color-primary); }

/* Header layout: logo on the right, controls on the left; from 768px the nav
   sits in a centred middle column. Under that the nav lives in the drop-down
   panel (see "Header Menu"), so its slot in the bar is hidden outright here.
   The .desktop-only utility alone was not enough: the display:flex this rule
   used to set at every width overrode it, which is how the phone got the
   whole desktop nav squeezed into one row and the cart pushed off the edge. */
.header-main-centered {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.header-group-right,
.header-group-left {
    display: flex;
    align-items: center;
}
.header-group-left {
    justify-content: flex-end;
    gap: var(--space-1);
}
.header-group-center {
    display: none;
}
@media (min-width: 768px) {
    .header-main-centered {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
    .header-group-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-group-left {
        gap: var(--space-4);
    }
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border: 1px solid var(--header-btn-line, var(--color-gray-300));
    background: transparent;
    color: var(--header-fg, var(--color-gray-700));
    font-size: var(--cs-text-sm);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Page Title Option 2 (Contained Banner) */
.page-header-opt2 {
    background: var(--color-gray-50);
    padding: 12px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-gray-200);
    border-top: 1px solid var(--color-gray-200);
}
.breadcrumbs-opt2 {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumbs-opt2 a {
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumbs-opt2 a:hover {
    color: var(--color-primary);
}
.breadcrumbs-opt2 span.current {
    color: var(--color-gray-900);
    font-weight: 500;
}
.page-title-opt2 {
    font-size: var(--cs-display-sm);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
    line-height: 1.2;
}

/* Hide Default WooCommerce / Storefront Titles so we don't duplicate them */
.entry-header { display: none !important; }
.woocommerce-products-header { display: none !important; }
.page-title { display: none !important; }

/* ==========================================================================
   GLOBAL CTA CONSISTENT HOVER STYLES
   Rule: Dark primary buttons darken on hover, keep white text (never invert).
   Secondary buttons invert to dark.
   ========================================================================== */

/* Ensure transition on all CTA types */
.btn,
.btn-submit,
.btn-primary,
.btn-add-single,
.checkout-button,
#place_order,
button.button.alt,
input[type="submit"].button.alt,
.woocommerce-checkout .button,
.woocommerce-orders-table .button {
    transition: all 0.3s ease !important;
}

/* Ensure normal state of dark CTAs */
.btn-submit,
.btn-add-single,
.checkout-button,
#place_order,
button.button.alt,
input[type="submit"].button.alt {
    background-color: var(--cs-black) !important;
    color: #ffffff !important;
    border: 1px solid var(--cs-black) !important;
    box-shadow: none !important;
}

/* Hover: Darken background, keep white text (consistent for all dark CTAs) */
.btn:hover,
.btn-submit:hover,
.btn-primary:hover,
.btn-add-single:hover,
.checkout-button:hover,
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.checkout-button:hover,
#place_order:hover,
.woocommerce #place_order:hover,
button.button.alt:hover,
input[type="submit"].button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce-checkout .button:hover,
.woocommerce-orders-table .button:hover {
    background-color: #3d3d3b !important;
    color: #ffffff !important;
    border-color: #3d3d3b !important;
    opacity: 1 !important;
}

/* Bulletproof: force white on all child elements too */
.btn:hover, .btn:hover *,
.btn-submit:hover, .btn-submit:hover *,
a.btn-submit:hover, a.btn-submit:hover *,
button.btn-submit:hover, button.btn-submit:hover *,
.btn-primary:hover, .btn-primary:hover *,
.btn-add-single:hover, .btn-add-single:hover *,
.checkout-button:hover, .checkout-button:hover *,
a.checkout-button:hover, a.checkout-button:hover *,
.wc-proceed-to-checkout a.checkout-button:hover, .wc-proceed-to-checkout a.checkout-button:hover * {
    color: #ffffff !important;
}

/* SVG stroke inside primary buttons on hover */
.btn:hover svg,
.btn-submit:hover svg,
.btn-primary:hover svg,
.checkout-button:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Secondary White Buttons → Invert to Black on hover */
.btn-secondary,
a.btn-secondary,
.return-to-shop .button.wc-backward,
.woocommerce-cart .actions .button {
    background-color: #ffffff !important;
    color: var(--cs-black) !important;
    border: 1px solid var(--cs-black) !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
.return-to-shop .button.wc-backward:hover,
.woocommerce-cart .actions .button:hover {
    background-color: var(--cs-black) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Header Logout Button. The hover fills with the header's ink: black with
   white text on the page, white with black text on the hero. !important, as
   before, over Storefront's link hover. */
.btn-logout:hover,
.btn-logout:focus-visible {
    background-color: var(--header-fg, var(--cs-black)) !important;
    color: var(--header-on-fg, #ffffff) !important;
    border-color: var(--header-fg, var(--cs-black)) !important;
}

/* Collection Cards View Link */
.view-link:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* ==========================================================================
   CATALOG GRID REFINEMENTS & TABS
   ========================================================================== */

/* Catalog Category Filter Tabs (Option 3: Refined Blocks 6px Radius) */
.cat-toggle {
    background: #e5e7eb !important;
    color: #4b5563 !important;
    border: none !important;
    padding: 8px 24px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.cat-toggle:hover {
    background: #d1d5db !important;
    color: #111827 !important;
}
.cat-toggle.active {
    background: var(--cs-black) !important;
    color: #ffffff !important;
}

/* Bottom-Aligned Product Cards (Flexbox) */
.product-card, 
ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.product-info, 
ul.products li.product > .product-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    color: var(--color-primary) !important;
}

/* ── Product Name Link ───────────────────────────────────── */
.product-name-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.product-name-link:hover .product-name {
    color: var(--color-primary-light);
}

/* ── Catalog Product Card Layout & Pricing Block (Master Approved) ── */
.product-card .price-wrapper {
    margin-top: 10px;
    background: #f9f9f9;
    padding: 10px 12px;
    border-radius: 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    direction: rtl !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.price-wrapper .price-row,
.product-card .price-row,
.price-row {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Label on RIGHT in RTL (order: 1) */
.price-wrapper .price-label,
.product-card .price-label {
    order: 1 !important;
    font-size: var(--cs-text-sm) !important;
    color: #666 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    text-align: right !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The label is read, the number is what matters: "המחיר שלך:" at 400 in
   black, the price beside it at 700. Both at 700 made the row one bold
   lump and left the number nothing to stand out from. */
.price-wrapper .price-label--yours,
.product-card .price-label--yours {
    font-weight: 400 !important;
    color: #000 !important;
}

/* Price Value on LEFT in RTL (order: 2) */
.price-wrapper .basic-price,
.product-card .basic-price {
    order: 2 !important;
    font-size: var(--cs-text-sm) !important;
    color: #999 !important;
    text-decoration: line-through !important;
    direction: ltr !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.price-wrapper .client-price,
.product-card .client-price {
    order: 2 !important;
    font-size: var(--cs-text-sm) !important;
    font-weight: 700 !important;
    color: #000 !important;
    direction: ltr !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Actions / CTA (Pinned to bottom of flex card) ─────────────────── */
.product-card-actions {
    margin-top: auto;
    padding-top: 14px;
    width: 100%;
}

.product-card-actions .btn-add-single,
.product-card-actions .btn-choose-options {
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

/* Legacy hover (kept for compatibility) */
.product-info .btn-add-single:hover,
.product-info .add_to_cart_button:hover,
ul.products li.product .button.add_to_cart_button:hover {
    background-color: #3d3d3b !important;
    color: #ffffff !important;
    border-color: #3d3d3b !important;
}


/* ==========================================================================
   Popup / Single Product CTA - Revert Style
   ========================================================================== */
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
    background-color: #ffffff !important;
    color: var(--cs-black) !important;
    border: 1px solid var(--cs-black) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: var(--cs-text) !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.woocommerce button.button.alt.single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: var(--cs-black) !important;
    color: #ffffff !important;
    border-color: var(--cs-black) !important;
}

/* Disabled State for Popup CTA */
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button:disabled,
.woocommerce button.single_add_to_cart_button:disabled[disabled] {
    background-color: #f9fafb !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* Ensure hover doesn't override the disabled state */
.woocommerce button.single_add_to_cart_button.disabled:hover,
.woocommerce button.single_add_to_cart_button:disabled:hover,
.woocommerce button.single_add_to_cart_button:disabled[disabled]:hover {
    background-color: #f9fafb !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
}

/* ==========================================================================
   Global Button Underline Fix
   ========================================================================== */
a.btn, a.button, a.btn-submit, a.btn-primary, a.btn-secondary, a.btn-add-single, a.checkout-button, a.single_add_to_cart_button,
.btn, .button, .btn-submit, .btn-primary, .btn-secondary, .btn-add-single, .checkout-button, .single_add_to_cart_button {
    text-decoration: none !important;
}

/* ==========================================================================
   Order Received Page CTAs Alignment
   ========================================================================== */
.woocommerce-checkout .actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}
.woocommerce-checkout .actions .btn {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    padding: 15px 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius-md) !important; /* Match standard button radius */
}

/* ==========================================================================
   Catalog Grid CTA - Revert Style & Font Size Fix
   ========================================================================== */
.product-info .btn-add-single, 
.product-info .add_to_cart_button, 
ul.products li.product .button,
ul.products li.product .button.add_to_cart_button,
ul.products li.product .button.product_type_variable {
    background-color: #ffffff !important;
    color: var(--cs-black) !important;
    border: 1px solid var(--cs-black) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 10px 0 !important;
    font-size: var(--cs-text) !important;
    border-radius: var(--radius-md) !important;
    margin-top: auto !important;
}

.product-info .btn-add-single:hover, 
.product-info .add_to_cart_button:hover, 
ul.products li.product .button:hover,
ul.products li.product .button.add_to_cart_button:hover,
ul.products li.product .button.product_type_variable:hover {
    background-color: var(--cs-black) !important;
    color: #ffffff !important;
    border-color: var(--cs-black) !important;
}

/* ==========================================================================
   Bulletproof Global Underline Removal (including hover states and My Account)
   ========================================================================== */
a.btn, a.button, a.woocommerce-button, a.btn-submit, a.btn-primary, a.btn-secondary, a.btn-add-single, a.checkout-button, a.single_add_to_cart_button, a.btn-view,
.btn, .button, .woocommerce-button, .btn-submit, .btn-primary, .btn-secondary, .btn-add-single, .checkout-button, .single_add_to_cart_button, .btn-view,
a.btn:hover, a.button:hover, a.woocommerce-button:hover, a.btn-submit:hover, a.btn-primary:hover, a.btn-secondary:hover, a.btn-add-single:hover, a.checkout-button:hover, a.single_add_to_cart_button:hover, a.btn-view:hover,
.btn:hover, .button:hover, .woocommerce-button:hover, .btn-submit:hover, .btn-primary:hover, .btn-secondary:hover, .btn-add-single:hover, .checkout-button:hover, .single_add_to_cart_button:hover, .btn-view:hover {
    text-decoration: none !important;
}
/* ==========================================================================
   Seamless Table Layout for Summaries & Order History
   ========================================================================== */
.summary-table-header, .order-products-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cs-black);
    margin-bottom: 15px;
    font-weight: 700;
    font-size: var(--cs-text);
    color: var(--cs-black);
}
.order-products-header {
    padding: 15px 20px 10px 20px;
    background: #fff;
}
.header-right { flex: 1; text-align: right; }
.header-left { width: 80px; text-align: center; }

.cart-summary .product-line-item,
.order-review-sidebar .product-line-item,
.order-items-preview .product-line-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #ebebeb !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    background: transparent !important;
}
.cart-summary .product-line-item:last-child,
.order-review-sidebar .product-line-item:last-child,
.order-items-preview .product-line-item:last-child {
    border-bottom: none !important;
    margin-bottom: 15px !important;
}

.cart-summary .product-info-right,
.order-review-sidebar .product-info-right,
.order-items-preview .product-info-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    padding-left: 15px;
}

.cart-summary .product-quantity-left,
.order-review-sidebar .product-quantity-left,
.order-items-preview .product-quantity-left {
    width: 70px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: var(--cs-text) !important;
    background: #f9f9f9 !important;
    border: 1px solid #ebebeb !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 0 !important;
    color: var(--cs-black) !important;
}
/* Align summary totals with the quantity column */
.review-total, .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* No fixed width here.

   This used to be `width: 70px; text-align: center` — an old attempt to line
   the total up with the 70px quantity column. The price outgrew the box: at
   ₪16,756 in 20px bold the text needs ~85px, and because the row is RTL the
   overflow came out of the *left* side, so the ₪ rendered about 15px outside
   the card's padding. The total is a label/value row now, and its value sizes
   to its content and sits on the same edge as every other price and the
   button beneath it. */
.summary-total .total-value {
    font-weight: 700;
}

/* =========================================
   CONTENT PAGE TEMPLATE STYLES
   ========================================= */

.page-banner {
    background: var(--color-gray-50);
    padding: 40px 0;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--color-gray-200);
}

.breadcrumbs {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs a {
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumbs a:hover {
    color: var(--color-primary);
}
.breadcrumbs span.current {
    color: var(--color-gray-900);
    font-weight: 500;
}

.b2b-page-title {
    font-size: var(--cs-display);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
    line-height: 1.2;
}

.b2b-content-card {
    max-width: 800px;
    margin: 0 auto 100px auto;
    background: #fff;
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    line-height: 1.6;
}

.b2b-content-card h2 {
    font-size: var(--cs-text-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-gray-100);
}

.b2b-content-card h2:first-child {
    margin-top: 0;
}

.b2b-content-card h3 {
    font-size: var(--cs-text-lg);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.b2b-content-card p {
    color: var(--color-gray-700);
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: var(--cs-text);
}

.b2b-content-card ul, .b2b-content-card ol {
    color: var(--color-gray-700);
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-right: 1.5rem;
    font-size: var(--cs-text);
}

.b2b-content-card li {
    margin-bottom: 0.5rem;
}

.b2b-content-card a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.b2b-content-card a:hover {
    color: #1d4ed8;
}

.b2b-content-card strong {
    font-weight: 600;
    color: var(--color-gray-900);
}

.last-updated {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    margin-bottom: 2rem;
    font-style: italic;
}


/* ==========================================================================
   NEW APPROVED CART & CHECKOUT CSS
   ========================================================================== */
False
/**
 * Checkout Page Styles
 * Checkout form and order submission
 */

/* ==========================================================================
   Checkout Steps
   ========================================================================== */

.checkout-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--cs-text-sm);
}

.step {
    color: var(--color-gray-400);
    font-weight: 500;
}

.step.active {
    color: var(--color-primary);
}

.step.completed {
    color: var(--color-gray-600);
}

.step-separator {
    color: var(--color-gray-300);
}

/* ==========================================================================
   Checkout Layout
   ========================================================================== */

.checkout-main {
    padding: var(--space-6) 0;
}

.checkout-header {
    margin-bottom: var(--space-6);
}

.checkout-header h1 {
    margin-bottom: var(--space-1);
}

.checkout-layout {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .checkout-layout {
        grid-template-columns: 1fr 400px;
        gap: var(--space-8);
    }
}

/* ==========================================================================
   Checkout Sections
   ========================================================================== */

.checkout-section {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (min-width: 640px) {
    .checkout-section {
        padding: var(--space-6);
    }
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--cs-text-lg);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.section-icon {
    font-size: var(--cs-text-lg);
}

/* Account Info Card */
.account-info-card {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .account-info-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label {
    font-size: var(--cs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
}

.info-value {
    font-size: var(--cs-text);
    font-weight: 500;
    color: var(--color-gray-800);
}

/* Form Grid */
.form-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid .full-width {
        grid-column: 1 / -1;
    }
}

.form-hint {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-2);
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

/* ==========================================================================
   Checkout Summary
   ========================================================================== */

.checkout-summary .summary-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    position: sticky;
    top: calc(var(--space-4) + 60px);
}

.summary-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.summary-item .item-name {
    font-weight: 500;
    color: var(--color-gray-800);
}

.summary-item .item-attr {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.summary-item .item-qty {
    font-weight: 500;
    color: var(--color-gray-600);
}

.submit-order-btn {
    margin-top: var(--space-2);
}

.back-to-cart {
    display: block;
    text-align: center;
    margin-top: var(--space-4);
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.back-to-cart:hover {
    color: var(--color-primary);
}



/* ==========================================================================
   NEW CART DESIGN
   ========================================================================== */
.cart-mockup-container {
            border: 1px solid #e0e0e0;
            border-radius: 0;
            background: #fff;
            overflow: hidden;
            margin-top: 20px;
        }
        .cart-mockup-headers {
            display: grid;
            grid-template-columns: 3fr 1.5fr 1.5fr 50px;
            background: #f9f9f9;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            font-weight: 600;
            color: #333;
        }
        .cart-mockup-item {
            display: grid;
            grid-template-columns: 3fr 1.5fr 1.5fr 50px;
            padding: 20px;
            border-bottom: 1px solid #eee;
            align-items: center;
        }
        .cart-mockup-item:last-child {
            border-bottom: none;
        }
        .cart-mockup-product {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .cart-mockup-product img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 0;
            border: 1px solid #eee;
        }
        .cart-mockup-qty-control {
            display: flex;
            align-items: center;
            width: fit-content;
            margin: 0 auto;
            border: 1px solid #ddd;
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .cart-mockup-qty-control button,
        .cart-mockup-qty-control button.qty-btn {
            width: 35px !important;
            height: 35px !important;
            background: #f5f5f5;
            cursor: pointer;
            font-size: var(--cs-text-lg);
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: none;
            line-height: 1;
        }
        .cart-mockup-qty-control input {
            width: 40px;
            height: 35px;
            border: none;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            text-align: center !important;
            font-weight: 600;
            padding: 0;
            margin: 0;
            -moz-appearance: textfield;
        }
        .cart-mockup-qty-control input::-webkit-outer-spin-button,
        .cart-mockup-qty-control input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .cart-mockup-remove {
            color: #999;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: color 0.2s;
        }
        .cart-mockup-remove:hover {
            color: #dc3545;
        }

/* ==========================================================================
   Checkout Progress Bar Styles
   ========================================================================== */
.checkout-progress-wrapper {
    background: transparent;
    width: 100%;
    margin-bottom: 20px;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    max-width: 500px;
    margin: 0 auto 30px auto;
}

.progress-line {
    flex-grow: 1;
    height: 3px;
    background-color: #e5e7eb;
    margin: 0 10px;
    margin-bottom: 25px; /* Aligns with center of circles */
    transition: background-color 0.3s ease;
}

.progress-line.completed {
    background-color: var(--cs-black);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 90px;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cs-text);
    font-weight: 600;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.progress-step span {
    font-size: var(--cs-text-sm);
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Completed State */
.progress-step.completed .step-circle {
    background-color: var(--cs-black);
    border-color: var(--cs-black);
    color: #ffffff;
}
.progress-step.completed span {
    color: var(--cs-black);
}

/* Active State */
.progress-step.active .step-circle {
    border-color: var(--cs-black);
    color: var(--cs-black);
    background-color: #ffffff;
}
.progress-step.active span {
    color: var(--cs-black);
}


/* ======================================================================
   SOURCE: cart-checkout-refresh.css
   Cart, checkout and order-confirmation refresh.
   ====================================================================== */

/* ==========================================================================
   Item Attributes — one line, not a stacked column

   WooCommerce renders a cart item's variation data as a <dl> (cart, checkout)
   or a <ul class="wc-item-meta"> (order details), and the vendor CSS leaves
   both as blocks. On a four-attribute product that produced eight stacked
   lines — "עובי:" / "20" / "גימור:" / "Polished" / … — a thin, broken-looking
   column beside the product name.

   Both structures are laid out here as one wrapping row of label-value pairs
   separated by a hairline pipe:  עובי: 20 | גימור: Polished | רמה: A

   The separator hangs off each pair *except the first*, so a wrapped row never
   ends on a dangling pipe. In RTL the flex row runs right-to-left on its own,
   which is why nothing here reverses anything by hand.
   ========================================================================== */

.b2b-item-attrs {
    margin-top: 6px;
}

/* --- Cart and checkout: woocommerce/cart/cart-item-data.php → ul.b2b-attr-list ---
   One <li> per label-value pair, so a wrap can only land between attributes and
   never between a label and its own value. That template override is what makes
   the rule possible; WooCommerce's stock <dl> has no element around a pair. */
.b2b-item-attrs .b2b-attr-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--cs-text-sm);
    line-height: 1.5;
}

.b2b-item-attrs .b2b-attr {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Holds one pair together; wrapping happens between list items instead. */
    white-space: nowrap;
}

.b2b-item-attrs .b2b-attr-label {
    font-weight: 400;
    color: var(--color-gray-500);
}

.b2b-item-attrs .b2b-attr-value {
    font-weight: 600;
    color: var(--color-gray-800);
}

.b2b-item-attrs .b2b-attr:not(:first-child)::before {
    content: "|";
    margin-inline-end: 9px;
    margin-inline-start: 9px;
    font-weight: 400;
    color: var(--color-gray-300);
}

/* --- The customer's note on one line: cart, checkout, confirmation ---
   Drawn by israel_b2b_line_note_html() under the attribute row, only when
   the line carries one. A quote: one surface, an ink rule down its leading
   edge (the words are the customer's own, as on the order-level note), at
   the attribute step. The order screens draw the same thing with their own
   tokens — .line-customer-note in order-lines.css. */
.b2b-line-note {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--color-gray-50);
    border-inline-start: 2px solid var(--color-gray-900);
    font-size: var(--cs-text-sm);
    line-height: 1.5;
    color: var(--color-gray-600);
    overflow-wrap: anywhere;
}

.b2b-line-note-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--color-gray-800);
}

/* --- Order details: wc_display_item_meta() → ul.wc-item-meta --- */
.b2b-item-attrs .wc-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--cs-text-sm);
    line-height: 1.5;
}

.b2b-item-attrs .wc-item-meta li {
    display: flex;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.b2b-item-attrs .wc-item-meta .wc-item-meta-label {
    margin: 0;
    margin-inline-end: 5px;
    float: none;
    clear: none;
    display: inline;
    font-weight: 400;
    color: var(--color-gray-500);
    white-space: nowrap;
}

.b2b-item-attrs .wc-item-meta p {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: var(--color-gray-800);
    white-space: nowrap;
}

.b2b-item-attrs .wc-item-meta li:not(:first-child)::before {
    content: "|";
    margin-inline-end: 9px;
    margin-inline-start: 9px;
    font-weight: 400;
    color: var(--color-gray-300);
}

/* The checkout sidebar is a ~180px column, so its copy of the row is smaller
   and allowed to break a long finish name rather than overflow the card. */
.checkout-sidebar .b2b-item-attrs .b2b-attr-list,
.checkout-sidebar .b2b-item-attrs .wc-item-meta {
    font-size: var(--cs-text-sm);
}

.checkout-sidebar .b2b-item-attrs .b2b-attr:not(:first-child)::before,
.checkout-sidebar .b2b-item-attrs .wc-item-meta li:not(:first-child)::before {
    margin-inline-end: 6px;
    margin-inline-start: 6px;
}

/* ==========================================================================
   Cart — table polish
   ========================================================================== */

.cart-mockup-container {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

.cart-mockup-headers {
    font-size: var(--cs-text-sm);
    letter-spacing: 0.02em;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border-bottom-color: var(--color-gray-200);
}

.cart-mockup-item {
    column-gap: var(--space-4);
    transition: background var(--transition-fast);
}

.cart-mockup-item:hover {
    background: var(--color-gray-50);
}

.cart-mockup-product-info {
    min-width: 0;
}

.cart-mockup-product img {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-color: var(--color-gray-200);
    border-radius: var(--radius-md);
}

.cart-mockup-qty-control {
    border-color: var(--color-gray-300);
    border-radius: var(--radius-md);
}

.cart-mockup-qty-control button.qty-btn:hover {
    background: var(--color-gray-200);
}

.cart-mockup-remove .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    font-size: var(--cs-text);
    line-height: 1;
    color: var(--color-gray-400);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cart-mockup-remove .remove:hover,
.cart-mockup-remove .remove:focus-visible {
    background: #fdeaea;
    color: #dc3545;
}

/* Stack the row on phones: the 3fr/1.5fr/1.5fr/50px grid squeezes the product
   name into two characters per line well before the viewport runs out. */
@media (max-width: 767px) {
    .cart-mockup-headers {
        display: none;
    }

    .cart-mockup-item {
        grid-template-columns: 1fr auto;
        align-items: start;
        row-gap: var(--space-4);
        padding: var(--space-4);
    }

    .cart-mockup-product {
        grid-column: 1;
        grid-row: 1;
    }

    .cart-mockup-remove {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .cart-mockup-item .item-quantity {
        grid-column: 1;
        grid-row: 2;
    }

    .cart-mockup-item .item-price-actions {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }

    .cart-mockup-qty-control {
        margin: 0;
    }

    .cart-mockup-product img {
        width: 68px;
        height: 68px;
    }
}

/* ==========================================================================
   Checkout — section hint
   ========================================================================== */

.section-hint {
    margin: calc(var(--space-4) * -1) 0 var(--space-5);
    font-size: var(--cs-text-sm);
    line-height: 1.55;
    color: var(--color-gray-500);
}

/* ==========================================================================
   Checkout — account detail tiles

   Replaces the inline-styled .account-info-grid these tiles used to carry,
   including the <style> block that shipped inside the template.
   ========================================================================== */

.b2b-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .b2b-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .b2b-info-tile-wide {
        grid-column: 1 / -1;
    }
}

.b2b-info-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: var(--space-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.b2b-info-label {
    font-size: var(--cs-text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-gray-500);
}

.b2b-info-value {
    font-size: var(--cs-text);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-gray-900);
}

/* dir="ltr" on a phone number or an email would otherwise drag it to the left
   edge of the tile; the text stays on the RTL side it belongs on. */
.b2b-info-value[dir="ltr"] {
    text-align: right;
}

.b2b-info-value-email {
    font-size: var(--cs-text-sm);
    overflow-wrap: anywhere;
}

.b2b-info-value.is-missing {
    font-weight: 500;
    font-style: italic;
    color: var(--color-gray-400);
}

.b2b-info-meta {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

/* The one editable field on an otherwise read-only card: the checkout's phone.
 *
 * It is drawn as the value it is, not as a form control. A full white box was
 * the first attempt and it read as a foreign object: 39px of white on a gray
 * card, against a 21px line of text in the tile beside it, so the two tiles no
 * longer looked like the same card. Here the number sits on the same baseline,
 * at the same size and weight as .b2b-info-value, over a dashed underline —
 * the one mark that says the value can be typed over.
 *
 * Hover and focus are what keep it discoverable: the underline darkens under
 * the pointer, and focus gives it the full border and white ground the box
 * used to carry all the time. That is the affordance the first version was
 * reaching for; it just did not need to be on screen when nobody is looking at
 * it.
 *
 * The border is 1px on every side from the start, transparent except along the
 * bottom, so focus only recolours it — nothing reflows. The negative inline
 * margin pulls the padding back out, so the text lines up with the values in
 * the other tiles while the focus box still has room to breathe; 8px of it
 * reaches into the tile's own 16px padding and cannot overflow the card.
 */
input.b2b-info-input {
    width: calc(100% + 16px);
    margin-inline: -8px;
    padding: 2px 8px 4px;
    font-family: inherit;
    font-size: var(--cs-text);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-gray-900);
    text-align: right;
    background: transparent;
    border: 1px solid transparent;
    border-bottom-color: var(--color-gray-300);
    border-bottom-style: dashed;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

input.b2b-info-input:hover {
    border-bottom-color: var(--color-gray-500);
}

input.b2b-info-input:focus {
    outline: none;
    border: 1px solid var(--color-gray-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

input.b2b-info-input::placeholder {
    font-weight: 500;
    color: var(--color-gray-400);
}

/* ==========================================================================
   Checkout — delivery address cards
   ========================================================================== */

.b2b-address-fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

.b2b-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}

.b2b-address-option {
    display: block;
    margin: 0;
    cursor: pointer;
}

/* The radio is hidden visually but stays in the tab order and keeps its
   focus ring on the card via :focus-visible below. */
.b2b-address-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.b2b-address-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    padding: var(--space-4);
    background: #fff;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-align: right;
    transition: border-color var(--transition-fast), background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.b2b-address-option:hover .b2b-address-card {
    border-color: var(--color-gray-400);
}

.b2b-address-option input[type="radio"]:checked + .b2b-address-card {
    border-color: var(--color-primary);
    background: var(--color-gray-50);
}

.b2b-address-option input[type="radio"]:focus-visible + .b2b-address-card {
    box-shadow: 0 0 0 3px rgba(29, 29, 27, 0.18);
}

.b2b-address-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--cs-text);
    font-weight: 700;
    color: var(--color-gray-900);
}

.b2b-address-badge {
    padding: 2px 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--cs-text-sm);
    font-weight: 600;
    color: var(--color-gray-600);
}

.b2b-address-line {
    font-size: var(--cs-text-sm);
    line-height: 1.55;
    color: var(--color-gray-600);
}

/* Single known address, or none at all — stated rather than offered. */
.b2b-address-card-static {
    background: var(--color-gray-50);
    border-width: 1px;
    border-color: var(--color-gray-200);
}

/* A notice, not a warning sign.

   This was cream on cream with a mustard heading (#fffdf5 / #f0e0b0 / #7a5a00),
   which read as muddy against a portal that is otherwise black, white and
   grey. It is now the same neutral card as its siblings, with the amber
   spent in one place only: a thin accent bar on the leading edge. */
.b2b-address-card-empty {
    position: relative;
    background: var(--color-gray-50);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline-start: var(--space-5);
    overflow: hidden;
}

.b2b-address-card-empty::before {
    content: "";
    position: absolute;
    inset-block: 0;
    /* inline-start, so the bar sits on the side the text starts from: the
       right in RTL, matching the padding added on that same edge. */
    inset-inline-start: 0;
    width: 3px;
    background: #c8901f;
}

.b2b-address-card-empty .b2b-address-name {
    color: var(--color-gray-900);
}

.b2b-address-card-empty .b2b-address-line {
    color: var(--color-gray-600);
}

/* No address is a fault, not a footnote: a customer cannot exist in Oracle
   without one, so the card says something is wrong with the customer record
   rather than describing a situation the order can proceed in. Same shape as
   the amber notice above it — the accent bar carries the difference, in the
   red the checkout already uses for its error notices. */
.b2b-address-card-missing {
    position: relative;
    background: #fff7f7;
    border-width: 1px;
    border-color: #f3d2d2;
    padding-inline-start: var(--space-5);
    overflow: hidden;
}

.b2b-address-card-missing::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: #d30000;
}

.b2b-address-card-missing .b2b-address-name {
    color: #d30000;
}

.b2b-address-card-missing .b2b-address-line {
    color: var(--color-gray-700);
}

/* The submit button is held, not hidden, so the page still reads as the
   checkout it is — with the reason sitting under the button that will not
   move. */
.btn-submit:disabled,
.btn-submit[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.b2b-submit-blocked-note {
    margin: var(--space-2) 0 0;
    font-size: var(--cs-text-sm);
    line-height: 1.55;
    color: var(--color-gray-600);
    text-align: center;
}

/* ==========================================================================
   Checkout — delivery-date notice
   ========================================================================== */

.calendar-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: var(--cs-text-sm);
    line-height: 1.55;
    color: var(--color-gray-600);
}

.calendar-notice-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-gray-400);
}

.calendar-notice p {
    margin: 0;
}

/* ==========================================================================
   Checkout — order-notes character counter
   ========================================================================== */

.char-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: 6px;
    font-size: var(--cs-text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-gray-500);
    transition: color var(--transition-fast);
}

.char-counter-count {
    margin-inline-start: auto;
    /* The count reads "0 / 250" left-to-right in any locale. */
    direction: ltr;
    unicode-bidi: isolate;
}

.char-counter.is-near-limit {
    color: #a86500;
}

.char-counter.is-at-limit {
    color: #d30000;
    font-weight: 700;
}

.char-counter-limit {
    color: #d30000;
    font-weight: 700;
}

/* Ring the textarea itself once there is no room left, so the state is
   visible without reading the counter. The textarea sits *before* the counter
   in the DOM, so a sibling combinator cannot reach it — :has() on the shared
   .form-group is what makes this work, and browsers without :has() simply keep
   the plain border and the red counter. */
.form-group:has(.char-counter.is-at-limit) textarea.form-input {
    border-color: #d30000;
}

/* ==========================================================================
   Order Confirmation
   ========================================================================== */

.confirmation-container {
    max-width: 760px;
    margin: 0 auto var(--space-12);
}

.success-card {
    padding: var(--space-10) var(--space-6);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
    .success-card {
        padding: var(--space-12) var(--space-10);
    }
}

.success-icon {
    width: 68px;
    height: 68px;
    margin-bottom: var(--space-5);
    background: #eaf7ef;
    border: 2px solid #bfe5cd;
    color: #1f7a4d;
}

.success-card h1 {
    font-size: var(--cs-display-sm);
    line-height: 1.25;
}

@media (min-width: 640px) {
    .success-card h1 {
        font-size: var(--cs-display-sm);
    }
}

.success-message {
    max-width: 46ch;
    margin: 0 auto var(--space-6);
    font-size: var(--cs-text);
    color: var(--color-gray-600);
}

.success-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0 0 var(--space-8);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-align: right;
    font-size: var(--cs-text-sm);
    line-height: 1.6;
    color: var(--color-gray-700);
}

.success-callout-icon {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-gray-500);
}

.success-callout strong {
    color: var(--color-gray-900);
}

/* The three or four order facts. A grid rather than the old flex row with
   1px dividers, which collapsed into a cramped line on narrow screens. */
.confirmation-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    margin: 0 0 var(--space-8);
    padding: 0;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: right;
}

.confirmation-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-4);
    background: #fff;
}

.confirmation-fact dt {
    margin: 0;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-gray-500);
}

.confirmation-fact dd {
    margin: 0;
    font-size: var(--cs-text);
    font-weight: 600;
    color: var(--color-gray-900);
}

.confirmation-fact dd[dir="ltr"] {
    text-align: right;
}

/* The portal order number is 16 digits ("#2204202609240728"); at text-lg it
   broke onto a second line inside its cell even on a desktop screen. Keep it
   on one line at the body size, and give every cell enough room for it. */
.confirmation-fact dd.is-emphasis {
    font-size: var(--cs-text);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.confirmation-fact dd.is-empty {
    font-weight: 500;
    color: var(--color-gray-400);
}

/* --- Panels below the success card --- */
.confirmation-panel {
    margin-top: var(--space-5);
    padding: var(--space-6);
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.confirmation-panel-title {
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--cs-text);
}

.confirmation-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.confirmation-item:first-child {
    padding-top: 0;
}

.confirmation-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.confirmation-item-image {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.confirmation-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.confirmation-item-name {
    margin: 0;
    font-size: var(--cs-text);
    font-weight: 700;
    color: var(--color-gray-900);
}

.confirmation-item-qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 54px;
}

.confirmation-item-qty-label {
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
}

.confirmation-item-qty-value {
    font-size: var(--cs-text);
    font-weight: 700;
    color: var(--color-gray-900);
}

.confirmation-summary {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
}

.confirmation-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    font-size: var(--cs-text);
    color: var(--color-gray-600);
}

.confirmation-summary-row .is-emphasis {
    font-weight: 700;
    color: var(--color-gray-900);
    white-space: nowrap;
}

.confirmation-summary-note {
    margin: var(--space-2) 0 0;
    font-size: var(--cs-text-sm);
    font-style: italic;
    color: var(--color-gray-500);
}

.confirmation-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.confirmation-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.confirmation-block-label {
    font-size: var(--cs-text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-gray-500);
}

.confirmation-block-value {
    font-size: var(--cs-text);
    line-height: 1.6;
    color: var(--color-gray-800);
    overflow-wrap: anywhere;
}

.confirmation-footnote {
    margin: var(--space-5) 0 0;
    font-size: var(--cs-text-sm);
    color: var(--color-gray-500);
    text-align: center;
}

@media (max-width: 599px) {
    .confirmation-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .confirmation-item-qty {
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-2);
        min-width: 0;
    }
}

/* ==========================================================================
   Checkout sidebar — the order review table

   Replaces the inline `flex: 2 / 1 / 1` and spacing that used to live on every
   one of these elements. Three columns, declared once, so the headers and the
   item rows cannot drift out of alignment.
   ========================================================================== */

.review-headers {
    font-size: var(--cs-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-gray-500);
}

.review-col-product {
    flex: 2 1 0;
    min-width: 0;
}

.review-col-qty {
    flex: 0 0 46px;
    text-align: center;
}

.review-col-total {
    flex: 1 1 0;
    text-align: left;
    white-space: nowrap;
}

.review-item {
    align-items: center;
}

.review-item .product-name {
    margin: 0;
    font-size: var(--cs-text-sm);
    font-weight: 600;
    color: var(--color-gray-900);
}

.review-item .review-col-qty {
    font-weight: 600;
    color: var(--color-gray-900);
}

.review-item .review-col-total {
    font-weight: 700;
    font-size: var(--cs-text-sm);
    color: var(--color-gray-900);
}

/* The item list is a plain container; its rows carry the shared rhythm, and its
   last row keeps its divider because the price block follows it. */
.review-items {
    display: flex;
    flex-direction: column;
}

.review-items .summary-row:first-child {
    padding-top: var(--space-3);
}

/* The last item keeps its divider: it is the last child of .review-items, but
   the price block follows it, so that line is what separates the two groups.
   Without this the generic :last-child rule strips it and the totals run
   straight into the item list. */
.review-items .summary-row:last-child {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}

/* Price block: totals below the item list. */
.summary-totals {
    display: flex;
    flex-direction: column;
}

.summary-totals .summary-row:first-child {
    padding-top: var(--space-3);
}

.summary-row-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* ==========================================================================
   Order Summary — the VAT breakdown

   The cart, the checkout and the order confirmation all show the same three
   rows: the ex-VAT subtotal, the VAT itself, and the total including it. The
   total is the figure a shopper acts on, so it carries the weight; the
   qualifier under its label is there so "סה״כ לתשלום" can never be read as the
   ex-VAT figure sitting two rows above it.
   ========================================================================== */

/* One line: "סה״כ לתשלום (כולל מע״מ)". It was two, which read as a stacked
   fragment rather than a label. */
.total-label {
    line-height: 1.35;
}

.total-label-note {
    font-size: var(--cs-text-sm);
    font-weight: 400;
    color: var(--color-gray-500);
    white-space: nowrap;
}

/* The total is set apart from the rows above it by a heavier rule. */
.summary-total {
    align-items: center;
    border-top-width: 2px;
    border-top-color: var(--color-gray-200);
}

.summary-total .total-value {
    font-size: var(--cs-text-lg);
}

/* Confirmation page: its summary is a plain stack of rows, so the total gets
   the same separation there. */
.confirmation-summary-row.is-total {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 2px solid var(--color-gray-200);
    font-size: var(--cs-text);
    color: var(--color-gray-900);
}

.confirmation-summary-row.is-total .total-label {
    font-weight: 600;
}

.confirmation-summary-row.is-total .is-emphasis {
    font-size: var(--cs-text-lg);
}

/* ==========================================================================
   Accent face

   Frutiger is a Latin-only family, so it is put only where the text is Latin:
   product names and the page title. Everything else is Heebo, which is what
   the Hebrew was silently falling back to all along.
   ========================================================================== */

.item-title,
.review-item .product-name,
.confirmation-item-name,
.cart-header h1,
.success-card h1 {
    font-family: var(--font-accent);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Cart quantity control
   ========================================================================== */

.cart-mockup-qty-control button.qty-btn {
    color: var(--color-gray-700);
    font-size: var(--cs-text);
    font-weight: 400;
    background: #fff;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cart-mockup-qty-control button.qty-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.cart-mockup-qty-control button.qty-btn:active {
    background: var(--color-gray-200);
}

.cart-mockup-qty-control button.qty-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* ==========================================================================
   Order confirmation — the success mark

   The tick draws itself once on arrival, with the ring easing in behind it.
   Anyone who has asked their system not to animate simply gets the finished
   mark.
   ========================================================================== */

.success-icon {
    position: relative;
    animation: b2b-success-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.success-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid #bfe5cd;
    opacity: 0;
    animation: b2b-success-ring 900ms ease-out 220ms both;
}

.success-icon svg {
    position: relative;
    z-index: 1;
}

.success-icon svg polyline {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: b2b-success-draw 460ms ease-out 200ms forwards;
}

@keyframes b2b-success-pop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes b2b-success-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes b2b-success-ring {
    0%   { opacity: 0.9; transform: scale(0.85); }
    100% { opacity: 0;   transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
    .success-icon,
    .success-icon::after,
    .success-icon svg polyline {
        animation: none;
    }

    .success-icon svg polyline {
        stroke-dashoffset: 0;
    }

    .success-icon::after {
        opacity: 0;
    }
}

/* ==========================================================================
   Typography consistency across the order flow

   The cart was rendering ten distinct font sizes, four of them within 3px of
   each other (13, 13.6, 15, 16, 17, 17.6, 18, 19.2, 20, 36) because inline
   `em` sizes in the templates compounded against rem sizes in the sheet. These
   rules put the chrome on the same six-step scale as everything else, and are
   scoped to the three order-flow wrappers so the rest of the site is untouched.
   ========================================================================== */

/* Form controls do not inherit the font by default, which is why the cart's
   + and − buttons were rendering in Storefront's Source Sans Pro. */
button,
input,
select,
textarea {
    font-family: inherit;
}

.cart-main .cart-header h1,
.checkout-main .cart-header h1 {
    font-size: var(--cs-display-sm);
    line-height: 1.2;
}

.cart-main .cart-header .text-muted,
.checkout-main .cart-header .text-muted {
    font-size: var(--cs-text);
}

.cart-main .summary-title,
.checkout-main .summary-title,
.confirmation-page .confirmation-panel-title {
    font-size: var(--cs-text);
}

.cart-main .item-title,
.cart-main .item-price-actions {
    font-size: var(--cs-text);
    font-weight: 700;
    color: var(--color-gray-900);
}

.cart-main .item-title {
    margin: 0;
}

.cart-main .item-price-actions {
    text-align: left;
}

/* .item-price was 1.2rem (19.2px), a seventh step three pixels off the row's
   title. It matches the title now. */
.cart-main .item-price {
    font-size: var(--cs-text);
}

/* WooCommerce's price markup carries its own em size; hold it to the row. */
.cart-main .item-price-actions .woocommerce-Price-amount,
.cart-main .item-price .woocommerce-Price-amount,
.summary-card .woocommerce-Price-amount,
.confirmation-summary .woocommerce-Price-amount {
    font-size: inherit;
}

.cart-main .progress-step span,
.checkout-main .progress-step span,
.confirmation-page .progress-step span {
    font-size: var(--cs-text-sm);
}

.cart-main .step-circle,
.checkout-main .step-circle,
.confirmation-page .step-circle {
    font-size: var(--cs-text);
}

.cart-main .btn-submit,
.cart-main .btn-secondary,
.checkout-main .btn-submit,
.confirmation-page .actions a.btn {
    font-size: var(--cs-text);
}

.summary-total .total-label {
    font-size: var(--cs-text);
}

/* Checkout form chrome: .section-title was 18px and the form labels 14px, two
   more steps a hair off the ones either side of them. */
.checkout-main .section-title {
    font-size: var(--cs-text);
}

.checkout-main .form-label,
.checkout-main .form-label .optional {
    font-size: var(--cs-text-sm);
}

.checkout-main .form-input,
.checkout-main textarea.form-input {
    font-size: var(--cs-text);
}

/* ---------------------------------------------------------------------------
   Order history — what the order came to

   The same three rows as the order confirmation, so the two screens read as
   one system. Sits inside the order card, under the item list, separated by a
   rule rather than a box: it is the closing line of the card, not a panel of
   its own.

   The rows themselves are drawn in assets/css/order-lines.css, beside the
   order page's copy of them, so the two cannot be given different sizes
   again. Only the container is here, because only the container differs.
   --------------------------------------------------------------------------- */

.order-price-summary {
    padding: var(--space-4) 20px;
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
}

/* ---------------------------------------------------------------------------
   The catalog, laid out the way caesarstone.co.il/catalog lays it out

   The public catalog draws a product as a bare tile: a tall slab image, the
   name under it, nothing around it — no white card, no border, no shadow, no
   rounded corners. Five of them to a row, 20px apart, on a 1320px wrap. The
   portal's catalog was drawing the same products as floating white cards with
   a 6px grey price box inside, which is why the two pages did not look like
   the same brand.

   This section only removes chrome and re-proportions the tile. Everything
   the fabricator needs that the public catalog has no use for — the two
   prices and the CTA — stays, drawn flat.
   --------------------------------------------------------------------------- */

/* Storefront rounds every single image by 3px. On a square site that shows up
   on 60 product photos at once, and it is the one radius no rule of ours set. */
img {
    border-radius: 0;
}

/* The wrap the five columns need: 5 x 240 + 4 x 20 = 1280, plus the gutters. */
@media (min-width: 1280px) {
    .catalog-page .container {
        max-width: 1320px;
    }
}

/* The same ladder the public catalog climbs: two to a row on a phone at a
   14px gap, five on a desktop at 20px. The portal started at one tile per
   row below 480px, which turned 95 products into a very long scroll. */
.product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .product-grid {
        gap: 20px;
    }
}

@media (min-width: 1280px) {
    .product-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Nothing matched the search or filters: one message across the whole row
   instead of a blank grid. */
.product-grid .no-products {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.no-products-title {
    margin: 0;
    font-size: var(--cs-text-lg);
    font-weight: 700;
    color: var(--color-gray-900);
}

.no-products-text {
    margin: 0;
    max-width: 36ch;
    color: var(--color-gray-500);
}

.no-products-reset {
    margin-top: var(--space-2);
}

/* The tile itself: no card. */
.product-card {
    background: transparent;
    box-shadow: none;
    text-align: start;
}

.product-card:hover {
    box-shadow: none;
    transform: none;
}

/* The slab proportion the renders are shot at (515 x 800), the same crop the
   public catalog shows. The old 3/4 box cut the top and bottom off them. */
.product-image {
    aspect-ratio: 515 / 800;
    background: var(--cs-paper);
}

/* Only the image answers the hover, as it does on the public catalog. */
.product-card:hover .product-image img {
    transform: scale(1.04);
}

.product-info {
    padding: 20px 15px;
    text-align: start;
}

.product-name {
    font-size: var(--cs-text-lg);
    font-weight: 400;
    line-height: 1.5;
    color: var(--cs-black);
    margin-bottom: 12px;
}

/* The prices: rows, not a panel. The grey 6px box was the only rounded
   surface left on the page.

   The 12px under the block is deliberate and is not the same 12px as the one
   above it. Above the prices sits the name — content next to content, and
   they belong together. Below sits the CTA, which is a control, and a control
   wants more air than a line of text does: 12 here plus the 18 the actions
   block already carries makes 30, so the button reads as the end of the tile
   rather than as the last row of the price table. */
.product-card .price-wrapper {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    gap: 6px !important;
}

.product-card .price-wrapper + .product-card-actions,
.product-card-actions {
    padding-top: 18px;
}

/* The CTA, drawn like the framed buttons on caesarstone.co.il: a black rule,
   no fill, 4px corners, the letter-spacing that keeps a short Hebrew label
   from looking cramped. */
.product-card-actions .btn-add-single,
.product-card-actions .btn-choose-options {
    letter-spacing: 0.45px;
}

/* The search field sat at 6px with an inset shadow it inherited; the filter
   button beside it was already square-ish at 4px. */
.catalog-page .search-input {
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   The catalog surface, measured off caesarstone.co.il/catalog

   Three things still separated the two pages once the tile itself matched.

   The paper. The public catalog is drawn on plain white; the portal sits on
   #fafafa, a grey that reads as slightly dirty next to it. Only the catalog
   screen is moved here — the rest of the portal keeps its own paper until
   there is a reason to change it.

   The glow. What looks like a tinted background behind each tile on the
   public catalog is not a background at all: the text block under the image
   carries `box-shadow: #f2eeec 0 4px 44px`, a warm cream halo on white. It is
   what stops a row of tiles reading as five loose photographs.

   The collection chip. ICON, Quartz, פורצלן — the public catalog puts the
   collection under the name as a grey chip, and the portal was hiding the one
   it already renders.
   --------------------------------------------------------------------------- */

.catalog-page {
    background: #ffffff;
}

.product-info {
    box-shadow: 0 4px 44px #f2eeec;
}

/* The chip sits on the slab, in the corner, not on the line under the name.

   That is not a departure from the public catalog so much as a move to its
   other zone: `.stone-top` there is a 15px-inset strip laid over the top of
   the image, and it is where the "חדש" badge and the compare link live. This
   takes the same inset and the same white fill that badge uses, so the chip
   reads as a label on the photograph rather than a second line of text
   competing with the name.

   What it buys: the name and the price become one block with nothing between
   them. What it costs: the collection is no longer beside the name when you
   scan the column of names — on the slab it is read per tile.

   Positioned against .product-card, which is already `position: relative`;
   the image fills the top of the card, so the corner of one is the corner of
   the other. `inset-inline-start` rather than `right`, so it stays on the
   start edge if the page is ever rendered LTR.

   Type: 14px at Roman 400, not the Light 300 the public catalog uses. Light
   is the weight that looked thin and uneven here: "Quartz" is Frutiger and
   "פורצלן" is Heebo, and the two Light cuts are not the same darkness, so
   neighbouring chips read as two different labels. At 400 both cuts sit on
   the same line, and the chip matches the name under it.

   White at 92% with a hairline. A solid white chip on Alpine Mist, a slab
   that is itself near-white, had no edge at all; the 1px ring at 6% black
   and the soft 1px shadow give it one there and disappear on a darker slab.

   Square, not the 4px the other chips take. Lying on the photograph it reads
   as a surface rather than as a control, and the scale says a surface has no
   radius — the same reason the tile, the image and the panels have none. */
.product-card .product-category {
    display: inline-block;
    position: absolute;
    top: 15px;
    inset-inline-start: 15px;
    z-index: 5;
    width: fit-content;
    margin: 0;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: var(--cs-text-sm);
    font-weight: 400;
    line-height: 20px;
    color: var(--cs-black);
}

/* ---------------------------------------------------------------------------
   Catalog type: three weights

   The screen had been set in seven — the chip at Light 300, the name at 400,
   the breadcrumb's current crumb at 500, the CTA and the filter button at
   600, the price label and the price at 700, the title at 700 — and the mix
   is what made a tile look assembled rather than designed. Three now, each
   with one job:

     700  the page title, and the one number a fabricator is here for: the
          customer price
     500  a control you press: the tile CTA, the filter button, load more
     400  everything that is read: the chip, the name, the price labels, the
          list price, the breadcrumb, the count, the search field

   Heebo is loaded at 300-800 and Frutiger maps 600 to Bold, so each of the
   three is a real cut in both faces, not a browser-synthesised one.
   --------------------------------------------------------------------------- */

.product-card .btn-add-single,
.product-card .btn-choose-options,
.filter-tool-btn,
.load-more-btn {
    font-weight: 500;
}

.catalog-meta .breadcrumbs-opt2 span.current {
    font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Availability on the tile

   Oracle's own words for the product's stock, under the name — but only when
   every variation of the product says the same thing, because a tile has no
   variation and may not promise what one of them cannot keep. The ordinary
   "במלאי" never prints here: sixty tiles saying it would say nothing. The
   chosen variation's own label is in the options popup, whatever the tile
   says (Israel_Mkt_Stock_Label).

   A chip on the photograph, not a line in the text block. Until 1.8.45 it
   sat between the name and the prices, in bold, and it broke the column
   every tile keeps — name, list price, your price — on the few tiles that
   had it, so the grid read as uneven. It now lies on the photo the way the
   category chip does: the same surface (white at 92% with the hairline
   ring), the same type (14px Roman 400), the same square. The category is
   at the start edge, availability at the end edge, so one photograph can
   carry both without either moving. What reaches the tile is by
   definition news ("המלאי מוגבל", "לא זמין במלאי"); the ordinary label is
   dropped before the tile sees it, so one rule covers both classes.

   Just the words. It briefly carried an ink dot before them to tell it from
   the category chip; Itay asked for the plain text (14.10.2026), and the
   words do the telling. No colour — news, not an alarm.

   On a phone the tiles are two to a row and ~170px wide; the two chips
   would meet in the middle. There the availability chip steps down under
   the category chip at the start edge instead: a short stack, still on the
   photograph.
   --------------------------------------------------------------------------- */

.product-card .product-stock {
    display: inline-block;
    position: absolute;
    top: 15px;
    inset-inline-end: 15px;
    z-index: 5;
    width: fit-content;
    max-width: calc(100% - 30px);
    margin: 0;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: var(--cs-text-sm);
    font-weight: 400;
    line-height: 20px;
    color: var(--cs-black);
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 767px) {
    .product-card .product-stock {
        top: 51px;                  /* 15px + the category chip's 28px + 8px */
        inset-inline-end: auto;
        inset-inline-start: 15px;
    }
}

/* ---------------------------------------------------------------------------
   Catalog header: one row

   The title and its meta line sat on the start side; the search field and
   the filter button sat centred below them, under a rule that ran the full
   width of the window — three alignments for one header. Now one row on a
   desktop: title and meta at the start, the tools at the end, bottom edges
   aligned, one rule the width of the container under the whole thing. On a
   phone the tools drop under the title and the search field takes the width.

   The filter button was the one black-filled control on a page whose every
   other button is drawn as a black rule on white. It takes that frame too,
   and fills black on hover the way the tile CTAs do. Its hover rule above
   carries !important, so this one has to as well.

   The search field: 44px tall like the button beside it, the magnifier at
   the leading edge where the text starts, the clear × at the trailing edge
   where the text ends. The inline styles it used to carry in the template
   live here now. 16px rather than 14px for the input itself, so a phone
   does not zoom the page when the field is focused.
   --------------------------------------------------------------------------- */

.catalog-page .catalog-header {
    margin-bottom: 24px;
}

.catalog-page .catalog-header-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-gray-200);
}

@media (min-width: 768px) {
    .catalog-page .catalog-header-content {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
    }
}

.catalog-page .catalog-title-area h1 {
    margin: 0 0 6px;
}

.catalog-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.catalog-tools .search-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .catalog-tools .search-group {
        flex: 0 0 auto;
    }
}

.catalog-page .search-input {
    width: 100%;
    height: 44px;
    padding: 0;
    padding-inline: 40px 36px;
    background: #ffffff;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-size: var(--cs-text);
    font-weight: 400;
    color: var(--cs-black);
    outline: none;
    transition: border-color var(--transition-fast);
}

@media (min-width: 768px) {
    .catalog-page .search-input {
        width: 300px;
    }
}

.catalog-page .search-input:focus {
    border-color: var(--cs-black);
}

.catalog-tools .search-icon {
    position: absolute;
    inset-inline-start: 14px;
    color: var(--color-gray-500);
    pointer-events: none;
}

.catalog-tools .search-clear {
    position: absolute;
    inset-inline-end: 8px;
    display: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-gray-500);
    font-size: var(--cs-text-lg);
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

.catalog-tools .search-clear:hover {
    color: var(--cs-black);
}

.filter-tool-btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 18px;
    background: #ffffff;
    border: 1px solid var(--cs-black);
    border-radius: var(--radius-md);
    color: var(--cs-black);
    letter-spacing: 0.45px;
}

.filter-tool-btn svg {
    color: currentColor;
    stroke: currentColor;
}

.filter-tool-btn:hover {
    background: var(--cs-black) !important;
    color: #ffffff !important;
    transform: none;
    box-shadow: none;
}