/* ============================================================
   BLAZE STORE — Shared Stylesheet
   Used by: index.html, product.html, product-detail.html, checkout.html
   ============================================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary:       #E85C3A;
  --primary-dark:  #C94424;
  --primary-light: #F07A54;
  --accent:        #FF8C42;
  --accent-light:  #FFB07A;
  --bg:            #0D0B08;
  --bg-card:       rgba(255,255,255,0.05);
  --bg-glass:      rgba(255,255,255,0.06);
  --border-glass:  rgba(255,255,255,0.08);
  --text:          #F5F0EB;
  --text-muted:    #B8AFA8;
  --shadow:        0 25px 50px -12px rgba(0,0,0,0.8);
  --shadow-card:   0 20px 40px -12px rgba(0,0,0,0.6);
  --radius:        20px;
  --radius-sm:     12px;
  --transition:    0.4s cubic-bezier(0.22,1,0.36,1);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar        { width: 8px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-light); }

a   { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ===== ORBS ===== */
.orb { position: fixed; border-radius: 50%; filter: blur(140px); pointer-events: none; z-index: 0; opacity: 0.4; animation: orbFloat 20s ease-in-out infinite alternate; }
.orb--1 { width:700px; height:700px; background: radial-gradient(circle,#E85C3A,transparent 70%); top:-250px; right:-250px; animation-delay:0s; }
.orb--2 { width:550px; height:550px; background: radial-gradient(circle,#FF8C42,transparent 70%); bottom:-180px; left:-180px; animation-delay:-7s; opacity:0.25; }
.orb--3 { width:450px; height:450px; background: radial-gradient(circle,#D94A2A,transparent 70%); top:50%; left:50%; transform:translateX(-50%); animation-delay:-14s; opacity:0.12; }
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(50px,-70px) scale(1.1); }
  66%  { transform: translate(-40px,50px) scale(0.9); }
  100% { transform: translate(30px,-30px) scale(1.05); }
}

/* ===== HEADER ===== */
.header { position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:var(--transition); }
.header--scrolled { background:rgba(13,11,8,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,0.05); padding:12px 0; box-shadow:0 8px 32px rgba(0,0,0,0.5); }
.header .container { display:flex; align-items:center; justify-content:space-between; }

.logo { font-size:26px; font-weight:900; letter-spacing:-0.5px; display:flex; align-items:center; gap:10px; }
.logo span { background:linear-gradient(135deg,var(--primary-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo i { color:var(--accent); font-size:28px; -webkit-text-fill-color:initial; }

.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--text-muted); transition:var(--transition); position:relative; letter-spacing:0.3px; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--primary-light),var(--accent)); transition:var(--transition); border-radius:4px; }
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.header-actions { display:flex; align-items:center; gap:20px; }
.header-actions button { font-size:20px; color:var(--text-muted); transition:var(--transition); position:relative; padding:6px; border-radius:50%; }
.header-actions button:hover { color:#fff; }

.cart-badge { position:absolute; top:-4px; right:-4px; background:linear-gradient(135deg,var(--accent),#E0702A); color:#0B0A0F; font-size:10px; font-weight:800; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.hamburger { display:none; flex-direction:column; gap:5px; padding:4px; }
.hamburger span { width:24px; height:2px; background:#fff; border-radius:4px; transition:var(--transition); }

/* ===== SECTION ===== */
.section { position:relative; z-index:1; padding:80px 0; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:44px; gap:16px; }
.section-header h2 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-1px; }
.section-header h2 span { background:linear-gradient(135deg,var(--primary-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-header p { color:var(--text-muted); max-width:400px; font-size:15px; }
.view-all { color:var(--primary-light); font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; transition:var(--transition); white-space:nowrap; }
.view-all:hover { color:var(--accent); gap:14px; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 34px; border-radius:100px; font-weight:600; font-size:15px; transition:var(--transition); position:relative; overflow:hidden; }
.btn--primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 8px 32px rgba(232,92,58,0.35); }
.btn--primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 12px 48px rgba(232,92,58,0.5); }
.btn--ghost { border:1px solid rgba(255,255,255,0.12); color:#fff; background:rgba(255,255,255,0.03); }
.btn--ghost:hover { border-color:var(--primary-light); background:rgba(232,92,58,0.1); transform:translateY(-3px); }
.btn--sm { padding:10px 24px; font-size:13px; }

/* ===== CATEGORIES ===== */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; }
.category-card { background:var(--bg-card); border:1px solid rgba(255,255,255,0.04); border-radius:var(--radius-sm); padding:28px 16px; text-align:center; transition:var(--transition); cursor:pointer; position:relative; overflow:hidden; }
.category-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--primary),transparent); opacity:0; transition:var(--transition); }
.category-card:hover { transform:translateY(-8px); border-color:rgba(232,92,58,0.3); box-shadow:0 20px 40px rgba(0,0,0,0.3); }
.category-card:hover::before { opacity:0.08; }
.category-card .icon  { font-size:32px; margin-bottom:10px; display:block; position:relative; color:var(--accent); }
.category-card .name  { font-weight:600; font-size:14px; position:relative; }
.category-card .count { font-size:12px; color:var(--text-muted); position:relative; }

/* ===== PRODUCT CARDS ===== */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:30px; }
.product-card { background:var(--bg-card); border-radius:var(--radius); border:1px solid rgba(255,255,255,0.05); overflow:hidden; transition:var(--transition); position:relative; box-shadow:var(--shadow-card); cursor:pointer; }
.product-card:hover { transform:translateY(-12px); border-color:rgba(232,92,58,0.3); box-shadow:0 30px 60px rgba(0,0,0,0.7); }
.product-card .image-wrap { position:relative; overflow:hidden; aspect-ratio:1/1; background:rgba(255,255,255,0.02); }
.product-card .image-wrap .product-img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.product-card:hover .image-wrap .product-img { transform:scale(1.06); }
.product-card .image-wrap .badge { position:absolute; top:14px; left:14px; padding:5px 16px; border-radius:100px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; z-index:2; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.badge--sale { background:#E85D3A; color:#fff; }
.badge--new  { background:var(--primary-light); color:#fff; }
.product-card .image-wrap .quick-add { position:absolute; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(13,11,8,0.9); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08); padding:10px 28px; border-radius:100px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; opacity:0; transition:var(--transition); color:#fff; white-space:nowrap; z-index:3; }
.product-card:hover .image-wrap .quick-add { opacity:1; transform:translateX(-50%) translateY(0); }
.product-card:hover .image-wrap .quick-add:hover { background:var(--primary); border-color:var(--primary); }
.product-card .image-wrap .wishlist-btn { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(13,11,8,0.7); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.06); color:var(--text-muted); font-size:16px; transition:var(--transition); display:flex; align-items:center; justify-content:center; z-index:2; }
.product-card .image-wrap .wishlist-btn:hover { color:#E85D3A; background:rgba(232,93,58,0.15); border-color:rgba(232,93,58,0.3); }
.product-card .info { padding:20px 22px 24px; background:rgba(255,255,255,0.02); }
.product-card .info .product-category { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:4px; font-weight:500; }
.product-card .info .product-title    { font-size:17px; font-weight:700; margin-bottom:6px; line-height:1.3; }
.product-card .info .product-rating   { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); margin-bottom:10px; }
.product-card .info .product-rating .stars { color:var(--accent); letter-spacing:1px; }
.product-card .info .price-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-card .info .product-price { font-size:22px; font-weight:800; color:#fff; }
.product-card .info .product-price .old { font-size:15px; font-weight:400; color:var(--text-muted); text-decoration:line-through; margin-left:10px; }
/* Mobile add-to-cart — hidden desktop, shown on touch */
.mobile-cart-btn { display:none; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-size:16px; flex-shrink:0; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(232,92,58,0.4); transition:var(--transition); }
.mobile-cart-btn:active { transform:scale(0.9); }

/* ===== CART SIDEBAR ===== */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:2000; opacity:0; pointer-events:none; transition:var(--transition); }
.cart-overlay.active { opacity:1; pointer-events:all; }
.cart-sidebar { position:fixed; top:0; right:-480px; width:100%; max-width:440px; height:100%; background:#13100D; border-left:1px solid rgba(255,255,255,0.06); z-index:2001; transition:var(--transition); display:flex; flex-direction:column; padding:28px 24px; box-shadow:-20px 0 60px rgba(0,0,0,0.6); }
.cart-sidebar.open { right:0; }
.cart-sidebar .cart-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.06); }
.cart-sidebar .cart-header h3 { font-size:22px; font-weight:700; }
.cart-sidebar .cart-header h3 span { font-size:14px; font-weight:400; color:var(--text-muted); }
.cart-sidebar .cart-close { font-size:24px; color:var(--text-muted); transition:var(--transition); padding:4px; }
.cart-sidebar .cart-close:hover { color:#fff; transform:rotate(90deg); }
.cart-items { flex:1; overflow-y:auto; padding:20px 0; display:flex; flex-direction:column; gap:16px; }
.cart-items .empty-cart { text-align:center; color:var(--text-muted); margin:auto; padding:40px 0; }
.cart-items .empty-cart i { font-size:56px; margin-bottom:16px; opacity:0.3; display:block; }
.cart-item { display:flex; gap:14px; padding:12px; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.04); }
.cart-item .item-img { width:64px; height:64px; border-radius:10px; background:rgba(255,255,255,0.04); flex-shrink:0; overflow:hidden; }
.cart-item .item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item .item-details { flex:1; }
.cart-item .item-details .item-name { font-weight:600; font-size:14px; }
.cart-item .item-details .item-variant { font-size:12px; color:var(--text-muted); margin-top:2px; }
.cart-item .item-details .item-price { font-size:14px; color:var(--accent); font-weight:600; margin-top:2px; }
.cart-item .item-qty { display:flex; align-items:center; gap:8px; margin-top:4px; }
.cart-item .item-qty button { width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.06); color:#fff; font-size:14px; transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.cart-item .item-qty button:hover { background:var(--primary); }
.cart-item .item-qty span { font-size:14px; font-weight:500; min-width:20px; text-align:center; }
.cart-item .item-remove { color:var(--text-muted); transition:var(--transition); font-size:14px; padding:4px; }
.cart-item .item-remove:hover { color:#E85D3A; }
.cart-footer { border-top:1px solid rgba(255,255,255,0.06); padding-top:20px; }
.cart-footer .cart-total { display:flex; justify-content:space-between; font-size:18px; font-weight:700; margin-bottom:16px; }
.cart-footer .cart-total .total-price { color:var(--accent); }
.cart-footer .btn-checkout { width:100%; padding:16px; border-radius:100px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-weight:700; font-size:16px; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:10px; }
.cart-footer .btn-checkout:hover { transform:scale(1.02); box-shadow:0 8px 32px rgba(232,92,58,0.4); }

/* ===== TESTIMONIALS ===== */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.testimonial-card { background:var(--bg-card); border:1px solid rgba(255,255,255,0.04); border-radius:var(--radius-sm); padding:28px 24px; transition:var(--transition); }
.testimonial-card:hover { transform:translateY(-6px); border-color:rgba(232,92,58,0.15); box-shadow:var(--shadow-card); }
.testimonial-card .stars { color:var(--accent); margin-bottom:10px; letter-spacing:2px; font-size:14px; }
.testimonial-card blockquote { font-size:15px; line-height:1.7; color:var(--text-muted); margin-bottom:16px; }
.testimonial-card .author { display:flex; align-items:center; gap:12px; }
.testimonial-card .author .avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.testimonial-card .author-name { font-weight:600; font-size:14px; }
.testimonial-card .author-role { font-size:12px; color:var(--text-muted); }

/* ===== NEWSLETTER ===== */
.newsletter { position:relative; z-index:1; background:linear-gradient(135deg,rgba(232,92,58,0.12),rgba(255,140,66,0.06)); border:1px solid rgba(232,92,58,0.15); border-radius:var(--radius); padding:60px; text-align:center; margin:0 0 40px; }
.newsletter h2 { font-size:clamp(24px,3.5vw,38px); font-weight:800; margin-bottom:10px; }
.newsletter p  { color:var(--text-muted); font-size:16px; margin-bottom:28px; }
.newsletter .form { display:flex; gap:12px; max-width:480px; margin:0 auto; }
.newsletter .form input { flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:100px; padding:14px 24px; color:#fff; font-size:15px; font-family:inherit; outline:none; transition:var(--transition); }
.newsletter .form input:focus { border-color:var(--primary-light); background:rgba(255,255,255,0.1); }
.newsletter .form input::placeholder { color:var(--text-muted); }

/* ===== FOOTER ===== */
.footer { position:relative; z-index:1; padding:40px 0 24px; border-top:1px solid rgba(255,255,255,0.04); margin-top:20px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:32px; }
.footer-brand p { color:var(--text-muted); font-size:14px; max-width:300px; margin-top:8px; line-height:1.7; }
.footer-brand .socials { display:flex; gap:12px; margin-top:16px; }
.footer-brand .socials a { width:38px; height:38px; border-radius:50%; background:var(--bg-card); border:1px solid rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:var(--transition); }
.footer-brand .socials a:hover { color:#fff; border-color:var(--primary-light); background:rgba(232,92,58,0.1); transform:translateY(-3px); }
.footer-col h4 { font-size:14px; font-weight:600; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.8px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-col ul a { color:var(--text-muted); font-size:14px; transition:var(--transition); }
.footer-col ul a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.04); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--text-muted); }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:30px; right:30px; z-index:3000; background:#1A1714; border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-sm); padding:16px 24px; display:flex; align-items:center; gap:14px; box-shadow:0 20px 60px rgba(0,0,0,0.6); backdrop-filter:blur(20px); transform:translateY(120px); opacity:0; transition:var(--transition); min-width:280px; }
.toast.show { transform:translateY(0); opacity:1; }
.toast .toast-icon { font-size:24px; color:var(--accent); }
.toast .toast-msg  { font-size:14px; font-weight:500; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes floatProduct { from { transform:translateY(0) rotate(-2deg); } to { transform:translateY(-16px) rotate(2deg); } }
@keyframes cardFadeIn { to { opacity:1; transform:translateY(0); } }
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===== PRODUCT DETAIL - VARIANT SELECTORS ===== */
.variant-group { margin-bottom: 22px; }
.variant-group label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:10px; }
.variant-group label span { color:var(--text); font-weight:700; }
.size-options { display:flex; flex-wrap:wrap; gap:10px; }
.size-btn { padding:8px 18px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.12); font-size:14px; font-weight:600; color:var(--text-muted); transition:var(--transition); background:transparent; }
.size-btn:hover { border-color:var(--primary-light); color:#fff; }
.size-btn.active { border-color:var(--primary); background:rgba(232,92,58,0.15); color:var(--primary-light); }
.size-btn.out { opacity:0.35; cursor:not-allowed; text-decoration:line-through; }
.color-options { display:flex; gap:12px; }
.color-btn { width:34px; height:34px; border-radius:50%; border:3px solid transparent; transition:var(--transition); position:relative; cursor:pointer; }
.color-btn:hover { transform:scale(1.15); }
.color-btn.active { border-color:#fff; box-shadow:0 0 0 3px var(--primary); }
.color-btn .color-tooltip { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#1A1714; border:1px solid rgba(255,255,255,0.1); padding:4px 10px; border-radius:6px; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:var(--transition); }
.color-btn:hover .color-tooltip { opacity:1; }

/* ===== CHECKOUT ===== */
.checkout-grid { display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
.checkout-form-section h2 { font-size:24px; font-weight:800; margin-bottom:28px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; }
.form-group input, .form-group select, .form-group textarea { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm); padding:14px 18px; color:#fff; font-size:15px; font-family:inherit; outline:none; transition:var(--transition); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary-light); background:rgba(255,255,255,0.09); }
.form-group select option { background:#1A1714; }
.form-group textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-section-title { font-size:16px; font-weight:700; color:var(--primary-light); margin:28px 0 16px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.06); }
.payment-options { display:flex; gap:12px; margin-bottom:8px; }
.payment-option { flex:1; border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm); padding:14px; text-align:center; cursor:pointer; transition:var(--transition); }
.payment-option:hover { border-color:var(--primary-light); }
.payment-option.active { border-color:var(--primary); background:rgba(232,92,58,0.1); }
.payment-option i { font-size:22px; display:block; margin-bottom:6px; color:var(--accent); }
.payment-option span { font-size:12px; font-weight:600; }
.order-summary { background:var(--bg-card); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); padding:28px; position:sticky; top:100px; }
.order-summary h3 { font-size:18px; font-weight:700; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.06); }
.order-item { display:flex; gap:14px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.04); }
.order-item:last-of-type { border-bottom:none; }
.order-item img { width:60px; height:60px; border-radius:10px; object-fit:cover; background:rgba(255,255,255,0.04); flex-shrink:0; }
.order-item-info { flex:1; }
.order-item-name { font-size:14px; font-weight:600; margin-bottom:4px; }
.order-item-variant { font-size:12px; color:var(--text-muted); }
.order-item-price { font-size:14px; font-weight:700; color:var(--accent); margin-top:4px; }
.order-divider { height:1px; background:rgba(255,255,255,0.06); margin:16px 0; }
.order-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--text-muted); }
.order-row.total { font-size:18px; font-weight:800; color:#fff; margin-top:4px; }
.order-row.total .amount { color:var(--accent); }
.btn-place-order { width:100%; margin-top:20px; padding:18px; border-radius:100px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; gap:12px; transition:var(--transition); }
.btn-place-order:hover { transform:scale(1.02); box-shadow:0 8px 32px rgba(232,92,58,0.45); }
.secure-badge { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; font-size:12px; color:var(--text-muted); }
.secure-badge i { color:var(--accent); }

/* ===== PRODUCT LISTING - FILTER BAR ===== */
.filter-bar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; align-items:center; }
.filter-chip { padding:8px 20px; border-radius:100px; border:1px solid rgba(255,255,255,0.1); font-size:13px; font-weight:500; color:var(--text-muted); transition:var(--transition); cursor:pointer; }
.filter-chip:hover { border-color:var(--primary-light); color:#fff; }
.filter-chip.active { background:rgba(232,92,58,0.15); border-color:var(--primary); color:var(--primary-light); }
.sort-select { margin-left:auto; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm); padding:10px 16px; color:#fff; font-size:13px; font-family:inherit; outline:none; cursor:pointer; }
.sort-select option { background:#1A1714; }

/* ===== PAGE HERO (sub-pages) ===== */
.page-hero { padding:140px 0 60px; text-align:center; position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(32px,5vw,56px); font-weight:900; letter-spacing:-1.5px; margin-bottom:12px; }
.page-hero p  { color:var(--text-muted); font-size:16px; }
.breadcrumb   { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:14px; font-size:13px; color:var(--text-muted); }
.breadcrumb a { color:var(--primary-light); }
.breadcrumb i { font-size:10px; }

/* ===== SUCCESS / CONFIRM ===== */
.success-box { text-align:center; padding:60px 40px; background:var(--bg-card); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); }
.success-box .check-icon { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; font-size:36px; color:#fff; }
.success-box h2 { font-size:28px; font-weight:800; margin-bottom:10px; }
.success-box p  { color:var(--text-muted); font-size:16px; margin-bottom:28px; }

/* ===== PAGINATION ===== */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:48px; flex-wrap:wrap; }
.page-btn { min-width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.1); background:transparent; color:var(--text-muted); font-size:14px; font-weight:600; font-family:inherit; transition:var(--transition); padding:0 12px; cursor:pointer; }
.page-btn:hover:not(:disabled) { border-color:var(--primary-light); color:#fff; background:rgba(232,92,58,0.1); }
.page-btn.active { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-color:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(232,92,58,0.35); }
.page-btn:disabled { opacity:0.3; cursor:not-allowed; }
.page-dots { color:var(--text-muted); font-size:14px; padding:0 4px; }
.page-info { font-size:13px; color:var(--text-muted); margin-left:8px; white-space:nowrap; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary { position:static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(13,11,8,0.95); backdrop-filter:blur(20px); padding:24px; gap:16px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .section { padding:50px 0; }
  .section-header { flex-direction:column; align-items:flex-start; }
  .cart-sidebar { max-width:100%; right:-100%; }
  .newsletter { padding:40px 20px; }
  .newsletter .form { flex-direction:column; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .products-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; }
  .categories-grid { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
  .form-row { grid-template-columns:1fr; }
  .payment-options { flex-direction:column; }
  /* Mobile: hide hover quick-add, show permanent + button */
  .product-card .image-wrap .quick-add { display:none !important; }
  .mobile-cart-btn { display:flex; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .product-card .info { padding:14px 14px 18px; }
  .product-card .info .product-title { font-size:14px; }
  .product-card .info .product-price { font-size:16px; }
  .mobile-cart-btn { width:34px; height:34px; font-size:14px; }
}