/* ============================================
   Embroidery Zone 2 — Template Stylesheet
   Black & Gold premium embroidery design system
   ============================================ */

/* ---- Design Tokens ---- */
:root {
    --ez-black: #0d0d0d;
    --ez-dark: #1a1a1a;
    --ez-card: #222;
    --ez-gold: #e6b800;
    --ez-gold-light: #ffd633;
    --ez-gold-dim: #b89400;
    --ez-purple: #d4c5f9;
    --ez-green: #b8e0d2;
    --ez-white: #f5f5f5;
    --ez-muted: #999;

    /* Map store.css variables to our dark/gold theme so auto-injected
       shopping components match the design. */
    --store-primary: var(--ez-gold);
    --store-primary-hover: var(--ez-gold-light);
    --store-primary-light: rgba(230, 184, 0, 0.08);
    --store-text-primary: var(--ez-white);
    --store-text-secondary: var(--ez-muted);
    --store-text-tertiary: #777;
    --store-text-muted: var(--ez-muted);
    --store-border: rgba(255, 255, 255, 0.08);
    --store-border-dark: rgba(255, 255, 255, 0.12);
    --store-bg: var(--ez-dark);
    --store-bg-secondary: var(--ez-black);
    --store-bg-tertiary: var(--ez-card);
    --store-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --store-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --store-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);

    /* Expose standard names used by some templates */
    --primary: var(--ez-gold);
    --primary-dark: var(--ez-gold-dim);
    --white: var(--ez-white);
}

/* ---- Base ---- */
* { box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--ez-black);
    color: var(--ez-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

a { color: var(--ez-gold); text-decoration: none; }
a:hover { color: var(--ez-gold-light); }

/* ---- Stitched Border Utility ---- */
.stitch-border { position: relative; padding: 12px; }
.stitch-border::before {
    content: ""; position: absolute; inset: 6px;
    border: 2px dashed var(--ez-gold); border-radius: inherit;
    opacity: 0.4; pointer-events: none;
}

/* ---- Navbar ---- */
.navbar-custom {
    background: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(230, 184, 0, 0.15);
    transition: all 0.3s ease;
}
.navbar-custom.scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.navbar-brand-text {
    font-family: 'Poppins', sans-serif; font-weight: 800;
    font-size: 1.4rem; color: var(--ez-gold) !important;
    letter-spacing: -0.5px;
}
.navbar-brand-text span { color: var(--ez-white); }
.nav-link-custom {
    color: var(--ez-white) !important; font-weight: 500;
    font-size: 0.95rem; margin: 0 0.3rem;
    padding: 0.5rem 1rem !important; border-radius: 30px;
    transition: all 0.2s ease;
}
.nav-link-custom:hover { background: rgba(230, 184, 0, 0.12); color: var(--ez-gold) !important; }
.nav-link-custom.active { background: var(--ez-gold); color: var(--ez-black) !important; }

/* ---- Buttons ---- */
.btn-gold {
    background: var(--ez-gold); color: var(--ez-black); border: none;
    border-radius: 30px; font-weight: 600; padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}
.btn-gold:hover { background: var(--ez-gold-light); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(230, 184, 0, 0.35); }
.btn-outline-gold {
    background: transparent; color: var(--ez-gold); border: 2px solid var(--ez-gold);
    border-radius: 30px; font-weight: 600; padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}
.btn-outline-gold:hover { background: var(--ez-gold); color: var(--ez-black); }

/* ---- Hero ---- */
.hero {
    min-height: 88vh; display: flex; align-items: center;
    position: relative; overflow: hidden;
}
.hero-bg-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15; z-index: 0; }
.orb-gold { width: 500px; height: 500px; background: var(--ez-gold); top: -100px; right: -80px; }
.orb-purple { width: 400px; height: 400px; background: var(--ez-purple); bottom: -80px; left: -60px; opacity: 0.08; }
.orb-green { width: 300px; height: 300px; background: var(--ez-green); top: 40%; left: 50%; opacity: 0.06; }
.hero-content { position: relative; z-index: 1; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(212, 197, 249, 0.1); border: 1px solid rgba(212, 197, 249, 0.3);
    color: var(--ez-purple); padding: 6px 18px; border-radius: 30px;
    font-size: 0.85rem; font-weight: 500; margin-bottom: 1.5rem;
}
.hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ez-green); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800;
    line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 1.2rem;
}
.hero-title .gold { color: var(--ez-gold); }
.hero-sub { font-size: 1.15rem; color: var(--ez-muted); max-width: 520px; margin-bottom: 2rem; line-height: 1.6; }
.hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; flex-wrap: wrap; }
.stat-item .stat-num { font-family: 'Poppins', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--ez-gold); }
.stat-item .stat-label { font-size: 0.82rem; color: var(--ez-muted); }

/* ---- Floating Embroidery Visual ---- */
.hero-visual { position: relative; z-index: 1; }
.float-card {
    background: var(--ez-dark); border: 1px solid rgba(230, 184, 0, 0.2);
    border-radius: 20px; padding: 2rem; position: relative; overflow: hidden;
}
.float-card::after {
    content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(135deg, var(--ez-gold), transparent, var(--ez-purple));
    border-radius: 20px; z-index: -1; opacity: 0.3;
}
.thread-svg { position: absolute; z-index: 0; opacity: 0.12; }
.thread-1 { top: -20px; right: -30px; width: 180px; transform: rotate(15deg); }
.thread-2 { bottom: -15px; left: -20px; width: 140px; transform: rotate(-25deg); }
.mini-design-card {
    background: var(--ez-black); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px; padding: 1rem; transition: transform 0.2s ease;
}
.mini-design-card:hover { transform: scale(1.03); }
.mini-design-thumb {
    width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--ez-dark);
    display: flex; align-items: center; justify-content: center; margin-bottom: 0.6rem;
}
.mini-design-thumb svg { width: 48px; height: 48px; }
.mini-design-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.mini-design-card .title { font-size: 0.82rem; font-weight: 600; margin: 0; }
.mini-design-card .price { font-size: 0.78rem; color: var(--ez-gold); font-weight: 600; }

/* ---- Section Headings ---- */
.section-padding { padding: 5rem 0; }
.section-eyebrow {
    color: var(--ez-gold); font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem;
}
.section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.5px; margin-bottom: 0.8rem; }
.section-desc { color: var(--ez-muted); font-size: 1.05rem; max-width: 600px; }

/* ---- Category Cards ---- */
.category-card {
    background: var(--ez-dark); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px; overflow: hidden; transition: all 0.3s ease;
    cursor: pointer; position: relative; display: block;
}
.category-card:hover {
    transform: translateY(-6px); border-color: rgba(230, 184, 0, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.category-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.4s ease; }
.category-card:hover .category-img { transform: scale(1.05); }
.category-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(13,13,13,0.95) 30%, transparent);
    padding: 2rem 1.5rem 1.5rem;
}
.category-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.3rem; }
.category-count { font-size: 0.82rem; color: var(--ez-gold); font-weight: 500; }
.category-arrow {
    position: absolute; top: 1.2rem; right: 1.2rem; width: 40px; height: 40px;
    background: rgba(230, 184, 0, 0.9); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateX(10px); transition: all 0.3s ease;
}
.category-card:hover .category-arrow { opacity: 1; transform: translateX(0); }

/* ---- Product Cards (homepage static) ---- */
.product-card {
    background: var(--ez-dark); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px; overflow: hidden; transition: all 0.25s ease;
}
.product-card:hover {
    transform: translateY(-4px); border-color: rgba(230, 184, 0, 0.25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.product-thumb {
    width: 100%; aspect-ratio: 1; background: var(--ez-black);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.product-thumb svg { width: 60%; height: 60%; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-badge {
    position: absolute; top: 0.8rem; left: 0.8rem; background: var(--ez-gold);
    color: var(--ez-black); font-size: 0.72rem; font-weight: 700;
    padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}
.product-badge.new { background: var(--ez-green); }
.product-body { padding: 1.1rem 1.2rem; }
.product-cat { font-size: 0.75rem; color: var(--ez-muted); margin-bottom: 0.6rem; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-size: 1.05rem; font-weight: 700; color: var(--ez-gold); }
.product-btn {
    background: rgba(230, 184, 0, 0.1); color: var(--ez-gold); border: none;
    border-radius: 10px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.product-btn:hover { background: var(--ez-gold); color: var(--ez-black); }

/* ---- Formats Band ---- */
.formats-band {
    background: var(--ez-dark); border-top: 1px solid rgba(230, 184, 0, 0.1);
    border-bottom: 1px solid rgba(230, 184, 0, 0.1);
}
.format-chip {
    display: inline-block; background: rgba(230, 184, 0, 0.08);
    border: 1px solid rgba(230, 184, 0, 0.2); color: var(--ez-gold);
    font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: 0.9rem; padding: 8px 20px; border-radius: 30px; margin: 0.3rem;
}

/* ---- Newsletter ---- */
.newsletter-section {
    background: linear-gradient(135deg, var(--ez-dark) 0%, var(--ez-black) 100%);
    border-radius: 24px; padding: 3.5rem 2.5rem; position: relative;
    overflow: hidden; border: 1px solid rgba(230, 184, 0, 0.1);
}
.newsletter-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.1; }
.newsletter-form { display: flex; gap: 0.8rem; max-width: 480px; margin-top: 1.5rem; }
.newsletter-form input {
    flex: 1; background: var(--ez-black); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px; padding: 0.65rem 1.3rem; color: var(--ez-white); font-size: 0.95rem;
}
.newsletter-form input:focus { outline: none; border-color: var(--ez-gold); box-shadow: 0 0 0 3px rgba(230, 184, 0, 0.1); }
.newsletter-form input::placeholder { color: var(--ez-muted); }

/* ---- Footer ---- */
.footer {
    background: var(--ez-dark); border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3rem 0 2rem;
}
.footer-brand { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--ez-gold); }
.footer-text { color: var(--ez-muted); font-size: 0.9rem; }
.footer-link {
    color: var(--ez-muted); text-decoration: none; font-size: 0.9rem;
    display: block; margin-bottom: 0.5rem; transition: color 0.2s ease;
}
.footer-link:hover { color: var(--ez-gold); }
.social-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ez-muted); text-decoration: none; transition: all 0.2s ease;
}
.social-btn:hover { background: var(--ez-gold); color: var(--ez-black); }

/* ---- Animations ---- */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ============================================
   Store / Shopping Page Overrides
   These theme the auto-injected store.css
   components to match the black/gold design.
   ============================================ */

/* Store hero band */
.store-hero {
    background: linear-gradient(135deg, var(--ez-dark) 0%, var(--ez-black) 100%) !important;
    border-bottom: 1px solid rgba(230, 184, 0, 0.15);
}
.store-hero h1 { color: var(--ez-gold) !important; }
.store-hero p { color: var(--ez-muted) !important; }

/* Store sidebar */
.store-sidebar h3 { color: var(--ez-white); }
.store-sidebar .filter-btn {
    background: var(--ez-black); color: var(--ez-gold);
    border: 2px solid rgba(230, 184, 0, 0.3);
}
.store-sidebar .filter-btn:hover,
.store-sidebar .filter-btn.active {
    background: var(--ez-gold); color: var(--ez-black);
}

/* Product listing cards (server-rendered by ShoppingService) */
.product-listing .product-card,
.products-grid .product-card {
    background: var(--ez-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 18px !important;
}
.product-listing .product-card:hover,
.products-grid .product-card:hover {
    border-color: rgba(230, 184, 0, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}
.product-image { border-radius: 18px 18px 0 0; }
.product-details, .product-content { padding: 1.1rem 1.2rem; }
.product-title { color: var(--ez-white) !important; }
.product-title a { color: var(--ez-white) !important; }
.product-title a:hover { color: var(--ez-gold) !important; }
.product-category-badge {
    background: rgba(230, 184, 0, 0.1) !important; color: var(--ez-gold) !important;
    border: 1px solid rgba(230, 184, 0, 0.2) !important;
}
.product-category { color: var(--ez-muted) !important; }
.product-price { color: var(--ez-gold) !important; }
.product-description { color: var(--ez-muted) !important; }

/* Add-to-cart button on product cards */
.cart-add-btn, .cart-add-button {
    background: var(--ez-gold) !important; color: var(--ez-black) !important;
    border-radius: 30px !important; font-weight: 600 !important;
    border: none !important;
}
.cart-add-btn:hover, .cart-add-button:hover {
    background: var(--ez-gold-light) !important;
}
.cart-quantity-input {
    background: var(--ez-black) !important; color: var(--ez-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
}

/* Product detail page */
.product-detail-card {
    background: var(--ez-dark) !important; border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.product-detail-card .product-images-section .hp-data-image {
    border-radius: 14px;
}
.breadcrumb { background: var(--ez-dark) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; }
.breadcrumb a { color: var(--ez-muted) !important; }
.breadcrumb a:hover { color: var(--ez-gold) !important; }
.breadcrumb-current { color: var(--ez-white) !important; }

/* Cart page */
.cart-item {
    background: var(--ez-dark) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
}
.cart-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; }
.cart-item-title { color: var(--ez-white) !important; }
.cart-item-type, .cart-item-variant { color: var(--ez-muted) !important; }
.cart-item-price { color: var(--ez-gold) !important; }
.cart-item-image-wrapper { background: var(--ez-black) !important; }

.cart-summary, .cart-summary-card {
    background: var(--ez-dark) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
}
.cart-summary h3, .cart-summary-card h3 { color: var(--ez-white) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
.cart-summary-subtotal, .cart-summary-tax, .cart-summary-total { color: var(--ez-muted) !important; }
.cart-summary-total { color: var(--ez-gold) !important; border-top-color: rgba(255, 255, 255, 0.06) !important; }
.cart-remove-btn {
    background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important;
}
.cart-remove-btn:hover { background: rgba(239, 68, 68, 0.25) !important; }

.cart-checkout-btn {
    background: var(--ez-gold) !important; color: var(--ez-black) !important;
    border-radius: 30px !important; font-weight: 600 !important;
}
.cart-checkout-btn:hover { background: var(--ez-gold-light) !important; color: var(--ez-black) !important; }
.cart-continue-btn {
    background: transparent !important; color: var(--ez-gold) !important;
    border: 2px solid var(--ez-gold) !important; border-radius: 30px !important;
}
.cart-continue-btn:hover { background: var(--ez-gold) !important; color: var(--ez-black) !important; }
.cart-empty { background: var(--ez-dark) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; }
.cart-empty h2 { color: var(--ez-white) !important; }
.cart-empty p { color: var(--ez-muted) !important; }

/* Checkout page */
.checkout-section {
    background: var(--ez-dark) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important; padding: 1.5rem !important;
}
.checkout-section h3 { color: var(--ez-white) !important; }
.form-control, .checkout-input {
    background: var(--ez-black) !important; color: var(--ez-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important;
}
.form-control:focus, .checkout-input:focus {
    border-color: var(--ez-gold) !important;
    box-shadow: 0 0 0 3px rgba(230, 184, 0, 0.1) !important;
    background: var(--ez-black) !important; color: var(--ez-white) !important;
}
.form-control::placeholder, .checkout-input::placeholder { color: var(--ez-muted) !important; }
.checkout-submit-btn {
    background: var(--ez-gold) !important; color: var(--ez-black) !important;
    border-radius: 30px !important; font-weight: 600 !important; border: none !important;
}
.payment-method-btn {
    background: var(--ez-black) !important; color: var(--ez-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}
.payment-method-btn:hover { border-color: var(--ez-gold) !important; }
.payment-method-btn.active { background: rgba(230, 184, 0, 0.1) !important; border-color: var(--ez-gold) !important; color: var(--ez-gold) !important; }

/* Quantity controls */
.cart-quantity-decrease, .cart-quantity-increase {
    background: var(--ez-card) !important; color: var(--ez-gold) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.cart-quantity-decrease:hover, .cart-quantity-increase:hover {
    background: var(--ez-gold) !important; color: var(--ez-black) !important;
}

/* Order confirmation */
.confirmation-header { background: var(--ez-gold) !important; color: var(--ez-black) !important; }
.confirmation-header h1 { color: var(--ez-black) !important; }
.confirmation-header p { color: var(--ez-black) !important; }
.order-details { background: var(--ez-dark) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; }
.detail-label { color: var(--ez-muted) !important; }
.detail-row { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
.order-total { border-top-color: rgba(255, 255, 255, 0.06) !important; color: var(--ez-gold) !important; }

/* Cart badge in navbar */
.cart-badge { background: var(--ez-gold) !important; }
.cart-count { color: var(--ez-black) !important; }
.cart-btn-icon { color: var(--ez-gold) !important; }

/* Pagination */
.pagination a, .pagination span {
    background: var(--ez-dark) !important; color: var(--ez-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.pagination a:hover { background: var(--ez-card) !important; color: var(--ez-gold) !important; }
.pagination-current { background: var(--ez-gold) !important; color: var(--ez-black) !important; }

/* Loading / empty states */
.loading-spinner { color: var(--ez-muted) !important; }
.no-products { color: var(--ez-muted) !important; }

/* Notifications */
.cart-notification-success, .store-notification-success, .order-notification-success {
    background: rgba(184, 224, 210, 0.15) !important; color: var(--ez-green) !important;
    border: 1px solid rgba(184, 224, 210, 0.3) !important;
}
.cart-notification-error, .store-notification-error, .order-notification-error {
    background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important;
}

/* ---- Generic CMS page content ---- */
.cms-content { padding: 3rem 0; }
.cms-content h1, .cms-content h2, .cms-content h3 { color: var(--ez-white); }
.cms-content p { color: var(--ez-muted); line-height: 1.7; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hero { min-height: auto; padding: 5rem 0 3rem; }
    .hero-visual { margin-top: 3rem; }
    .newsletter-form { flex-direction: column; }
    .newsletter-section { padding: 2.5rem 1.5rem; }
}