/* ══════════════════════════════════════════
   LUCENTO — Global Shared Styles
   Used by: product.php, cart_page.php, favorites.php, my_orders.php
   Header/footer/mobile-menu styles are in includes/header.css
   ══════════════════════════════════════════ */

:root {
    --gold: #C9A96E;
    --gold-light: #e8d5a3;
    --gold-dark: #9a7a45;
    --gold-pale: #f9f6f0;
    --cream: #faf8f4;
    --ink: #2B2A29;
    --ink2: #232221;
    --ink3: #1C1B1A;
    --plum: #61243C;
    --plum-light: #7d2e4e;
    --plum-dark: #4a1b2e;
    --warm-gray: #8a8078;
    --border: #e8e6e3;
    --border-gold: rgba(201,169,110,0.15);
    --transition: 0.32s cubic-bezier(0.22,1,0.36,1);
    --font-serif: 'Montserrat', sans-serif;
    --font-sans: 'Montserrat', sans-serif;
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { image-rendering: auto; max-width: 100%; }

body {
    font-family: var(--font-sans);
    font-weight: 300;
    background: #fff;
    color: var(--ink);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Buttons (shared across pages) ── */
.lc-btn { display: inline-block; padding: 13px 28px; background: var(--ink); color: #fff; border: 1px solid var(--ink); font-family: var(--font-sans); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; position: relative; overflow: hidden; transition: all var(--transition); border-radius: var(--radius-sm); }
.lc-btn::before { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); z-index: 0; border-radius: var(--radius-sm); }
.lc-btn:hover::before { transform: scaleX(1); }
.lc-btn:hover { border-color: var(--gold); }
.lc-btn span { position: relative; z-index: 1; color: #fff; }
.lc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lc-btn:disabled::before { display: none; }
.lc-btn-block { display: block; width: 100%; }

.details-button, .view-btn, .back-btn, .show-sizes-btn, .add-to-cart-btn, .checkout-btn { display: inline-block; padding: 13px 28px; background: var(--ink); color: #fff; border: 1px solid var(--ink); font-family: var(--font-sans); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; position: relative; overflow: hidden; transition: all var(--transition); border-radius: var(--radius-sm); }
.details-button::before, .view-btn::before, .back-btn::before, .show-sizes-btn::before, .add-to-cart-btn::before, .checkout-btn::before { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); z-index: 0; border-radius: var(--radius-sm); }
.details-button:hover::before, .view-btn:hover::before, .back-btn:hover::before, .show-sizes-btn:hover::before, .add-to-cart-btn:not(:disabled):hover::before, .checkout-btn:not(:disabled):hover::before, .product-card:hover .details-button::before { transform: scaleX(1); }
.details-button:hover, .view-btn:hover, .back-btn:hover, .show-sizes-btn:hover, .add-to-cart-btn:not(:disabled):hover, .checkout-btn:not(:disabled):hover, .product-card:hover .details-button { border-color: var(--gold); }
.details-button span, .details-button-text, .view-btn span, .back-btn span, .show-sizes-btn-text, .add-to-cart-btn span, .checkout-btn span { position: relative; z-index: 1; color: #fff; pointer-events: none; }
.add-to-cart-btn:disabled, .checkout-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.add-to-cart-btn:disabled::before, .checkout-btn:disabled::before { display: none; }
.add-to-cart-btn, .checkout-btn { display: block; width: 100%; }
.details-button { margin-top: auto; }

/* ── Legacy support (kept for pages still referencing these) ── */
.cart-icon { display: flex; align-items: center; color: rgba(255,255,255,.85); text-decoration: none; position: relative; }
.cart-icon svg { width: 22px; height: 22px; stroke: rgba(255,255,255,.85); fill: none; stroke-width: 1.5; opacity: .8; transition: all var(--transition); }
.cart-icon:hover svg { opacity: 1; stroke: var(--gold); transform: scale(1.08); }
.cart-counter { position: absolute; top: -6px; right: -8px; background: var(--plum); color: #fff; min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 400; font-family: var(--font-sans); display: flex; justify-content: center; align-items: center; padding: 0 4px; opacity: 0; transform: scale(0); transition: all var(--transition); pointer-events: none; }
.cart-counter.show { opacity: 1; transform: scale(1); }