/* ════════════════════════════════════════════════════════════════
   NOVUS — Cart CSS
   File: assets/css/cart.css
   Load order: AFTER woocommerce-general (see functions.php §4)

   Table of Contents:
    0.  Fonts Note
    1.  WooCommerce Page Hero (Global — all WC pages)
    2.  Page Padding, Background & Title Fixes
    3.  Grid Layout Fix
    4.  Cart Table
    5.  Remove Button
    6.  Thumbnail
    7.  Product Name & Variations
    8.  Price & Subtotal
    9.  Qty Stepper
   10.  Actions Row — Coupon + Update Cart
   11.  Cart Totals Panel
   12.  Proceed to Checkout Button
   13.  Empty Cart State
   14.  Responsive — 1024px / 960px / 768px / 640px / 480px / 380px
   ════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   0. FONTS
   Loaded via wp_enqueue_style('novus-fonts') in functions.php §4.
   No @import needed here.
───────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────
   1. WOOCOMMERCE PAGE HERO
   Rendered via novus_woo_page_hero() hooked on
   woocommerce_before_main_content at priority 5 (functions.php §9).
   Covers: Cart, Checkout, Order Received, My Account, Shop, Category.
   Replaces the old .novus-page-hero — do not use that class anymore.
───────────────────────────────────────────────────────────────── */

.novus-woo-hero {
    background-color: var(--plum);
    padding: 5rem 2rem;
    text-align: center;
    width: 100%;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.novus-woo-hero__inner {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Eyebrow row — line · text · line */
.novus-woo-hero__eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.novus-woo-hero__line {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--gold);
    opacity: 0.7;
}

.novus-woo-hero__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    white-space: nowrap;
}

/* Large serif heading */
.novus-woo-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 400;
    color: var(--cream);
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin: 0;
}

/* Italic serif sub-quote */
.novus-woo-hero__sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    margin: 0;
}


/* ─────────────────────────────────────────────────────────────────
   2. PAGE PADDING, BACKGROUND & TITLE FIXES
   - Strips the theme's default .page-content padding on WC pages
     (that was causing the grey padded box in the screenshot)
   - Scopes inner .woocommerce container to max-width + centred
   - Hides the WordPress page title ("Cart") rendered by the theme —
     the hero above replaces it
───────────────────────────────────────────────────────────────── */

/* Strip theme padding injected via inline style on .page-content */
body.woocommerce-cart .page-content,
body.woocommerce-page .page-content,
body.woocommerce-checkout .page-content,
body.woocommerce-account .page-content {
    padding: 0 !important;
    min-height: unset !important;
}

body.woocommerce-cart {
    background: var(--cream, #FAF7F2);
}

body.woocommerce-cart .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0!important;
}

/* Hide WordPress page title — hero heading replaces it */
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-account h1.entry-title {
    display: none !important;
}

/* ── Hide any stray WC notices outside the cart form ──────────── */
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty,
body.woocommerce-cart .woocommerce > p:empty {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. GRID LAYOUT FIX
   Overrides WooCommerce's legacy float layout entirely.
   .novus-cart-page wraps both the form and .cart-collaterals
   (see woocommerce/cart/cart.php template override).
   Sidebar sticks below the header on scroll.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart .novus-cart-page {
    padding: 3rem 2rem 4rem !important;
}

.novus-cart-page {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 2.5rem !important;
    align-items: start !important;
    float: none !important;
    width: 100% !important;
}

/* Kill WooCommerce pseudo-element clearfix */
.novus-cart-page::before,
.novus-cart-page::after {
    display: none !important;
}

.novus-cart-page .woocommerce-cart-form {
    grid-column: 1 !important;
    float: none !important;
    width: 100% !important;
}

.novus-cart-page .cart-collaterals {
    grid-column: 2 !important;
    float: none !important;
    width: 100% !important;
    position: sticky !important;
    top: 6rem !important; /* clears fixed header */
}

/* Kill WC float layout on collaterals children */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .cart-collaterals .cross-sells {
    float: none !important;
    width: 100% !important;
}


/* ─────────────────────────────────────────────────────────────────
   4. CART TABLE
   Overrides WC default table styles with Novus card aesthetic.
   border-bottom: none on the table — actions row provides it.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #EDE8F5 !important;
    border-bottom: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* Table head */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead th {
    padding: 1rem 1.2rem !important;
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--muted, #7A6F82) !important;
    font-weight: 500 !important;
    text-align: left !important;
    background: rgba(243, 232, 255, 0.35) !important;
    border-bottom: 2px solid #EDE8F5 !important;
}

/* Fixed column widths */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead th.product-thumbnail { width: 90px !important; }
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead th.product-remove   { width: 44px !important; }
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead th.product-price,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead th.product-subtotal { text-align: right !important; }

/* Body rows */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tbody tr.cart_item {
    border-bottom: 1px solid #EDE8F5 !important;
    transition: background 0.2s !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tbody tr.cart_item:hover {
    background: rgba(243, 232, 255, 0.18) !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tbody tr.cart_item td {
    padding: 1.2rem !important;
    vertical-align: middle !important;
    border-top: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   5. REMOVE BUTTON
   Circular ×, rotates on hover for a subtle luxury feel.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart table.shop_table td.product-remove {
    width: 44px !important;
    text-align: center !important;
    padding: 0 0.5rem !important;
}

body.woocommerce-cart table.shop_table td.product-remove a.remove {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 0 !important;
    border: 1px solid #EDE8F5 !important;
    background: white !important;
    color: var(--muted, #7A6F82) !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.25s !important;
    margin: auto !important;
    line-height: 1 !important;
}
body.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
    transform: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   6. THUMBNAIL
   Portrait ratio (72×88px) to suit scarf/clothing imagery.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart table.shop_table td.product-thumbnail {
    width: 90px !important;
    padding: 1rem 1rem 1rem 1.2rem !important;
}
body.woocommerce-cart table.shop_table td.product-thumbnail a {
    display: block !important;
    width: 72px !important;
    height: 88px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
body.woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
    margin: 0 !important;
}
body.woocommerce-cart table.shop_table td.product-thumbnail a:hover img {
    transform: scale(1.07) !important;
}


/* ─────────────────────────────────────────────────────────────────
   7. PRODUCT NAME & VARIATIONS
   Name uses serif for editorial feel.
   Variations rendered as small pill badges.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart table.shop_table td.product-name {
    padding-left: 0.8rem !important;
}
body.woocommerce-cart table.shop_table td.product-name a {
    font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
    font-size: 1.05rem !important;
    color: var(--charcoal, #1A1A1A) !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 0.3rem !important;
    letter-spacing: 0.02em !important;
    transition: color 0.2s !important;
}
body.woocommerce-cart table.shop_table td.product-name a:hover {
    color: var(--violet, #6B21A8) !important;
}

/* Variation pills (e.g. Colour: Red, Size: M) */
body.woocommerce-cart table.shop_table td.product-name dl.variation {
    margin: 0.4rem 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
}
body.woocommerce-cart table.shop_table td.product-name dl.variation dt,
body.woocommerce-cart table.shop_table td.product-name dl.variation dd {
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.7rem !important;
    background: var(--pale-lavender, #F3E8FF) !important;
    padding: 0.15rem 0.55rem !important;
    border-radius: 100px !important;
    margin: 0 !important;
    color: var(--violet, #6B21A8) !important;
}


/* ─────────────────────────────────────────────────────────────────
   8. PRICE & SUBTOTAL
   Right-aligned, serif numerals.
   Strike-through for original price, clean insert for sale price.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart table.shop_table td.product-price,
body.woocommerce-cart table.shop_table td.product-subtotal {
    text-align: right !important;
    white-space: nowrap !important;
}
body.woocommerce-cart table.shop_table td.product-price .woocommerce-Price-amount,
body.woocommerce-cart table.shop_table td.product-subtotal .woocommerce-Price-amount {
    font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
    font-size: 1.05rem !important;
    color: var(--plum, #2D0A4E) !important;
}
body.woocommerce-cart table.shop_table td.product-price del,
body.woocommerce-cart table.shop_table td.product-subtotal del {
    color: var(--muted, #7A6F82) !important;
    font-size: 0.82rem !important;
}
body.woocommerce-cart table.shop_table td.product-price ins,
body.woocommerce-cart table.shop_table td.product-subtotal ins {
    text-decoration: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   9. QTY STEPPER
   ± buttons are injected by JS (novus-scripts.js).
   Native spinner arrows hidden via -webkit-appearance.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart table.shop_table td.product-quantity {
    text-align: center !important;
}
body.woocommerce-cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #EDE8F5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: white !important;
}
body.woocommerce-cart .quantity input.qty {
    width: 50px !important;
    border: none !important;
    text-align: center !important;
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--charcoal, #1A1A1A) !important;
    padding: 0.55rem 0 !important;
    background: transparent !important;
    outline: none !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
}
body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

/* JS-injected ± buttons */
body.woocommerce-cart .quantity .qty-btn {
    width: 32px !important;
    min-height: 36px !important;
    border: none !important;
    background: var(--plum, #2D0A4E) !important; 
    color: var(--white, #FFFFFF) !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 0.2s !important;
}
body.woocommerce-cart .quantity .qty-btn:hover {
    background: var(--violet, #6B21A8) !important;  /* ← flat color swap */
    color: white !important;
}


/* ─────────────────────────────────────────────────────────────────
   10. ACTIONS ROW — Coupon + Update Cart
   Coupon floats left, Update Cart floats right.
   Actions row forms the bottom edge of the cart table card.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart table.shop_table td.actions {
    background: rgba(243, 232, 255, 0.25) !important;
    border-top: 1px solid #EDE8F5 !important;
    border-bottom: 1px solid #EDE8F5 !important;
    padding: 1.1rem 1.2rem !important;
}

/* Coupon wrapper */
body.woocommerce-cart table.shop_table td.actions .coupon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    float: left !important;
}
body.woocommerce-cart table.shop_table td.actions .coupon label {
    display: none !important; /* screen-reader only — hidden visually */
}

/* Coupon input */
body.woocommerce-cart table.shop_table td.actions .coupon input#coupon_code {
    padding: 0.65rem 1rem !important;
    border: 1px solid #EDE8F5 !important;
    border-radius: 0 !important;    
    font-family: var(--font-body, 'Raleway', sans-serif) !important;
    font-size: 0.85rem !important;
    color: var(--charcoal, #1A1A1A) !important;
    outline: none !important;
    background: white !important;
    width: 180px !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
}
body.woocommerce-cart table.shop_table td.actions .coupon input#coupon_code:focus {
   border-color: var(--plum, #2D0A4E) !important;  
    box-shadow: none !important;                     
}
body.woocommerce-cart table.shop_table td.actions .coupon input#coupon_code::placeholder {
    color: rgba(122, 111, 130, 0.4) !important;
}

/* Apply coupon button */
body.woocommerce-cart table.shop_table td.actions .coupon button[name="apply_coupon"],
body.woocommerce-cart table.shop_table td.actions .coupon .button {
    padding: 0.65rem 1.3rem !important;
    border: 1px solid var(--plum, #2D0A4E) !important;
   border-radius: 0 !important;              
    background: var(--plum, #2D0A4E) !important;    
    color: white !important;       
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
    box-shadow: none !important;
}
body.woocommerce-cart table.shop_table td.actions .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart table.shop_table td.actions .coupon .button:hover {
    background: var(--plum, #2D0A4E) !important;
    color: white !important;
}

/* Update cart button */
body.woocommerce-cart table.shop_table td.actions button[name="update_cart"] {
    float: right !important;
    padding: 0.65rem 1.5rem !important;
   border: 1px solid var(--muted, #7A6F82) !important;  
    border-radius: 0 !important;              
    background: transparent !important;       
    color: var(--muted, #7A6F82) !important;
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
    box-shadow: none !important;
}
body.woocommerce-cart table.shop_table td.actions button[name="update_cart"]:hover {
    border-color: var(--violet, #6B21A8) !important;
    color: var(--violet, #6B21A8) !important;
    background: transparent !important;
}
body.woocommerce-cart table.shop_table td.actions button[name="update_cart"]:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Clearfix for the floated coupon + update button */
body.woocommerce-cart table.shop_table td.actions::after {
    content: '';
    display: table;
    clear: both;
}


/* ─────────────────────────────────────────────────────────────────
   11. CART TOTALS PANEL
   Right-column sticky card. Shipping options styled with
   accent-color for the radio buttons.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart .cart-collaterals .cart_totals {
    background: white !important;
    border-radius: 0 !important;    
    border: 1px solid #EDE8F5 !important;
    overflow: hidden !important;
    float: none !important;
    width: 100% !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals h2 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: var(--plum, #2D0A4E) !important;
    letter-spacing: 0.04em !important;
    padding: 1.2rem 1.5rem 1rem !important;
    border-bottom: 1px solid #EDE8F5 !important;
    margin: 0 !important;
}

/* Totals table */
body.woocommerce-cart .cart_totals table.shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    box-shadow: none !important;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
    padding: 0.9rem 1.5rem !important;
    border-bottom: 1px solid #EDE8F5 !important;
    border-top: none !important;
    vertical-align: middle !important;
}
body.woocommerce-cart .cart_totals table.shop_table th {
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--muted, #7A6F82) !important;
    font-weight: 500 !important;
    width: 38% !important;
    text-align: left !important;
    background: transparent !important;
}
body.woocommerce-cart .cart_totals table.shop_table td {
    font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
    font-size: 0.95rem !important;
    color: var(--charcoal, #1A1A1A) !important;
    text-align: right !important;
}

/* Shipping options */
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td { text-align: left !important; }
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method li {
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.8rem !important;
    color: var(--charcoal, #1A1A1A) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.2rem 0 !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method label {
    cursor: pointer !important;
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping input[type="radio"] {
    accent-color: var(--violet, #6B21A8) !important;
    width: 14px !important;
    height: 14px !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping .amount {
    font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
    color: var(--plum, #2D0A4E) !important;
}

/* Order total row — highlighted */
body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    border-bottom: none !important;
    background: rgba(243, 232, 255, 0.25) !important;
    padding: 1.1rem 1.5rem !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    color: var(--plum, #2D0A4E) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.4rem !important;
    color: var(--plum, #2D0A4E) !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.order-total .woocommerce-Price-amount {
    color: var(--plum, #2D0A4E) !important;
    font-size: 1.4rem !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.order-total small {
    display: block !important;
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: 0.65rem !important;
    color: var(--muted, #7A6F82) !important;
    font-weight: 400 !important;
    margin-top: 0.15rem !important;
}

/* Applied coupon discount row */
body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount td { color: #15803d !important; }
body.woocommerce-cart .cart_totals table.shop_table tr.cart-discount a.remove { color: #ef4444 !important; }


/* ─────────────────────────────────────────────────────────────────
   12. PROCEED TO CHECKOUT BUTTON
   Gradient from plum → violet. Lifts on hover.
───────────────────────────────────────────────────────────────── */

body.woocommerce-cart .wc-proceed-to-checkout {
    padding: 1.2rem 1.5rem !important;
    border-top: 1px solid #EDE8F5 !important;
    background: white !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout .button.alt {
    display: block !important;
    width: 100% !important;
    padding: 1.1rem 2rem !important;
    background: var(--plum); color: white;  
    color: white !important;
    text-decoration: none !important;
    font-family: var(--font-sans, 'Jost', sans-serif) !important;
    font-size: .72rem; letter-spacing: .2em;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 0 !important;              
    border: none !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    box-shadow: none !important;              
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .button.alt:hover {
    background: var(--violet, #6B21A8) !important;   
    box-shadow: none !important;             
    transform: none !important;              
    color: white !important;
}


/* ─────────────────────────────────────────────────────────────────
   13. EMPTY CART STATE
   Shown via woocommerce/cart/cart-empty.php template override.
   do_action('woocommerce_cart_is_empty') REMOVED from that template
   to prevent the duplicate WC notice box.
───────────────────────────────────────────────────────────────── */

.novus-empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1.5rem;
    min-height: 60vh;
}

/* Decorative gold top-line */
.ec-line {
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 2.5rem;
    opacity: 0.7;
}

/* Bag icon — thin stroke, muted plum */
.ec-icon {
    width: 64px;
    height: 64px;
    color: var(--plum);
    opacity: 0.25;
    margin-bottom: 2rem;
}
.ec-icon svg {
    width: 100%;
    height: 100%;
}

/* Eyebrow label */
.ec-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    display: block;
    margin-bottom: 1rem;
}

/* Main heading */
.ec-heading {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 300;
    color: var(--charcoal);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 1.2rem;
}

/* Supporting text */
.ec-sub {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.8;
    letter-spacing: 0.02em;
    max-width: 360px;
    margin-bottom: 2.5rem;
}

/* Primary CTA — charcoal fill → plum hover */
.ec-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2.5rem;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
    background: var(--charcoal);
    border: 1px solid var(--charcoal);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    margin-bottom: 2rem;
}
.ec-btn:hover {
    background: var(--plum);
    border-color: var(--plum);
    color: var(--cream);
}

/* Secondary nav links — My Account · Wishlist · Our Story */
.ec-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ec-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}
.ec-links a:hover {
    color: var(--plum);
}

/* Gold dot separator between links */
.ec-dot {
    color: var(--gold);
    opacity: 0.5;
}


/* ─────────────────────────────────────────────────────────────────
   14. RESPONSIVE
   Breakpoints (desktop-first, largest → smallest):
    1024px — Tablet landscape
     960px — Grid stacks to single column
     768px — Mobile (merged 767+768 into one block)
     640px — Hide price column
     480px — Full card-grid mobile layout
     380px — Small mobile
───────────────────────────────────────────────────────────────── */

/* ── 1024px — Tablet landscape ───────────────────────── */
@media (max-width: 1024px) {

    .novus-woo-hero {
        padding: 4rem 2rem;
    }
    .novus-woo-hero__eyebrow-wrap {
        gap: 0.75rem;
    }
    .novus-woo-hero__line {
        width: 36px;
    }

    .novus-empty-cart {
        padding: 5rem 2rem;
        min-height: 55vh;
    }
    .ec-heading {
        font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    }
    .ec-sub {
        font-size: 0.78rem;
        max-width: 420px;
    }
    .ec-btn {
        padding: 0.8rem 2.2rem;
    }
}

/* ── 960px — Grid stacks to single column ────────────── */
@media (max-width: 960px) {

    .novus-cart-page {
        grid-template-columns: 1fr !important;
    }
    .novus-cart-page .woocommerce-cart-form,
    .novus-cart-page .cart-collaterals {
        grid-column: 1 !important;
        position: static !important;
    }
}

/* ── 768px — Mobile ──────────────────────────────────── */
@media (max-width: 768px) {

    /* Hero */
    .novus-woo-hero {
        padding: 3.5rem 1.25rem;
    }
    .novus-woo-hero__line {
        width: 24px;
    }
    .novus-woo-hero__eyebrow {
        font-size: 0.52rem;
        letter-spacing: 0.2em;
    }
    .novus-woo-hero__title {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }
    .novus-woo-hero__sub {
        font-size: 0.78rem;
    }

    /* Empty cart */
    .novus-empty-cart {
        padding: 4rem 1.25rem;
        min-height: 70vh;
    }
    .ec-line {
        margin-bottom: 2rem;
    }
    .ec-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 1.5rem;
    }
    .ec-eyebrow {
        font-size: 0.55rem;
        letter-spacing: 0.22em;
        margin-bottom: 0.8rem;
    }
    .ec-heading {
        font-size: clamp(1.5rem, 7vw, 2rem);
        margin-bottom: 1rem;
    }
    .ec-sub {
        font-size: 0.75rem;
        line-height: 1.75;
        max-width: 100%;
        margin-bottom: 2rem;
    }
    .ec-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 0.9rem 1.5rem;
        font-size: 0.65rem;
    }
    .ec-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 0.75rem;
        font-size: 0.62rem;
    }
    .ec-dot {
        display: none; /* links wrap — dots unnecessary */
    }

    /* Cart table */
    body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td {
        padding: 1rem 0.9rem !important;
    }
    body.woocommerce-cart table.shop_table td.product-thumbnail a {
        width: 58px !important;
        height: 72px !important;
    }
}

/* ── 640px — Hide price column ───────────────────────── */
@media (max-width: 640px) {
    body.woocommerce-cart table.shop_table thead th.product-price,
    body.woocommerce-cart table.shop_table td.product-price {
        display: none !important;
    }
}

/* ── 480px — Full card-grid mobile layout ────────────── */
@media (max-width: 480px) {

    body.woocommerce-cart .woocommerce {
        padding: 0 !important;
    }

    /* Hide table head — data-title attributes label each cell */
    body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead {
        display: none !important;
    }

    /* Rearrange each row as a named grid card */
    body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: 66px 1fr 38px !important;
        grid-template-areas:
            "img name rmv"
            "img qty  qty"
            "img sub  sub" !important;
        padding: 1rem !important;
        gap: 0.25rem 0 !important;
    }
    body.woocommerce-cart table.shop_table tbody tr.cart_item td {
        padding: 0 0.4rem 0 0 !important;
        border: none !important;
        display: block !important;
    }
    body.woocommerce-cart table.shop_table td.product-remove    { grid-area: rmv !important; text-align: right !important; }
    body.woocommerce-cart table.shop_table td.product-thumbnail { grid-area: img !important; padding: 0 0.7rem 0 0 !important; }
    body.woocommerce-cart table.shop_table td.product-name      { grid-area: name !important; }
    body.woocommerce-cart table.shop_table td.product-quantity  { grid-area: qty !important; text-align: left !important; }
    body.woocommerce-cart table.shop_table td.product-subtotal  { grid-area: sub !important; text-align: left !important; }
    body.woocommerce-cart table.shop_table td.product-price     { display: none !important; }

    /* Actions row stacks vertically */
    body.woocommerce-cart table.shop_table td.actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
    }
    body.woocommerce-cart table.shop_table td.actions .coupon {
        float: none !important;
        width: 100% !important;
    }
    body.woocommerce-cart table.shop_table td.actions button[name="update_cart"] {
        float: none !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 380px — Small mobile ────────────────────────────── */
@media (max-width: 380px) {

    /* Hero */
    .novus-woo-hero {
        padding: 2.5rem 1rem 2rem;
    }
    .novus-woo-hero__eyebrow-wrap {
        flex-direction: column;
        gap: 0.4rem;
    }
    .novus-woo-hero__line {
        display: none; /* lines too narrow — drop them */
    }
    .novus-woo-hero__title {
        font-size: 1.6rem;
    }

    /* Empty cart */
    .novus-empty-cart {
        padding: 3rem 1rem;
    }
    .ec-heading {
        font-size: 1.4rem;
    }
    .ec-sub {
        font-size: 0.72rem;
    }
    .ec-btn {
        max-width: 100%;
        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }
    .ec-links {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}