/* ============================================================
   Sportzone — Default Page Styles (shop, cart, checkout)
   Loaded before theme CSS so theme overrides take precedence.
   ============================================================ */

/* Shop page layout compatibility */
.shop-area { padding-top: 60px; padding-bottom: 60px; }
.shop-contents-wrapper { display: flex; gap: 24px; }
.shop-sidebar { min-width: 260px; }
.product-grid-wrapper { flex: 1; }

/* Cart & Checkout */
.cart-area { padding-top: 60px; padding-bottom: 60px; }
.checkout-area { padding-top: 60px; padding-bottom: 60px; }

/* Product single */
.single-product-details-area { padding-top: 60px; padding-bottom: 60px; }

/* ── Checkout state/city live-dropdown ──────── */
.live-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 2px solid var(--sz-border); border-top: none; z-index: 99; max-height: 200px; overflow-y: auto; }
.live-dropdown:empty { display: none; }
.live-dropdown div { padding: 9px 14px; font-size: 13px; cursor: pointer; font-family: var(--sz-font-body); color: var(--sz-dark); }
.live-dropdown div:hover { background: var(--sz-red-light); color: var(--sz-red); }
/* shift_another_address uses sz-checkout-input class */
.sz-checkout-input { width: 100%; padding: 10px 14px; border: 2px solid var(--sz-border); border-radius: var(--sz-radius); font-family: var(--sz-font-body); font-size: 14px; outline: none; background: var(--sz-white); transition: border-color .2s; }
.sz-checkout-input:focus { border-color: var(--sz-red); }

/* Price range slider — Bootstrap 5 compatible */
.price-range-slider .noUi-connect { background: var(--sz-navy); }
.price-range-slider .noUi-handle { border-color: var(--sz-navy); }

/* Filter sidebar */
.widget-box { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; border: 1px solid #f0f0f0; }
.widget-box .widget-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--sz-navy); }

/* Add to cart button */
.add-to-cart-btn { background: var(--sz-navy); color: #fff; border: none; padding: 6px 24px; border-radius: 6px; font-weight: 500; cursor: pointer; transition: opacity .2s; }
.add-to-cart-btn:hover { opacity: .85; }

/* Rating stars */
.rating-star .las.la-star,
.rating-star .las.la-star-half-alt { color: #f59e0b; }
.rating-star .lar.la-star { color: #d1d5db; }

/* ── Section wrappers (padding via DIMENSION selector) ── */
.sz-cat-section { background: var(--sz-bg); }
.sz-featured-section { background: var(--sz-white); }
.sz-cat-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.sz-img-ph-icon { font-size: 48px; color: var(--sz-red); opacity: .4; }
.sz-badge-navy { background: var(--sz-navy) !important; }
.sz-empty-state { padding: 48px 0; color: var(--sz-muted); text-align: center; }

/* Newsletter widget */
.sz-newsletter-center { text-align: center; max-width: 560px; margin: 0 auto; }
.sz-newsletter-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(198,40,40,.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: var(--sz-red); }
.sz-newsletter-perks { display: flex; justify-content: center; gap: 40px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
.sz-newsletter-perk { text-align: center; }
.sz-newsletter-perk-icon { font-size: 22px; color: var(--sz-red); display: block; margin-bottom: 6px; }
.sz-newsletter-perk-label { font-size: 12px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 1px; }

/* ── Hero Section Widget ────────────────────────── */
.sz-hero-widget { background: var(--sz-navy); position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; }
.sz-hero-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .18; }
.sz-hero-bg-circles { position: absolute; inset: 0; }
.sz-hero-circle { position: absolute; border-radius: 50%; }
.sz-hero-circle-lg { top: -100px; right: -100px; width: 600px; height: 600px; border: 2px solid rgba(198,40,40,.12); }
.sz-hero-circle-md { top: -60px; right: -60px; width: 400px; height: 400px; border: 2px solid rgba(198,40,40,.10); }
.sz-hero-circle-sm { bottom: -80px; left: -80px; width: 300px; height: 300px; border: 2px solid rgba(198,40,40,.08); }
.sz-hero-container { position: relative; z-index: 2; }
.sz-hero-tag { margin-bottom: 16px; }
.sz-hero-title { font-family: var(--sz-font-head); font-size: clamp(32px,5vw,64px); font-weight: 700; line-height: 1.05; color: #fff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
.sz-hero-accent { color: var(--sz-red); }
.sz-hero-sub { font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: 36px; max-width: 480px; line-height: 1.65; }
.sz-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.sz-btn-hero-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.3); font-family: var(--sz-font-head); font-size: 15px; font-weight: 400; cursor: pointer; padding: 12px 28px; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--sz-radius); transition: all .2s; display: inline-flex; align-items: center; gap: 8px; }
.sz-btn-hero-outline:hover { border-color: #fff; color: #fff; }
.sz-hero-stats { display: flex; gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); }
.sz-hero-stat-num { font-family: var(--sz-font-head); font-size: 28px; font-weight: 700; color: var(--sz-red); }
.sz-hero-stat-label { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; }
.sz-hero-img-wrap { position: relative; }
.sz-hero-img-ring { position: absolute; inset: -20px; border-radius: 50%; border: 2px solid rgba(198,40,40,.2); }
.sz-hero-img { max-height: 480px; object-fit: contain; position: relative; z-index: 1; }

/* ── Support Ticket — dash card & btn ── */
.sz-dash-card { background: var(--sz-white,#fff); border: 2px solid var(--sz-border,#e5e7eb); border-radius: var(--sz-radius,6px); padding: 24px; margin-bottom: 20px; }
.sz-dash-section-title { font-family: var(--sz-font-head); font-size: 14px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--sz-dark, #0d1117); display: flex; align-items: center; }
.sz-dash-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-family: var(--sz-font-head); font-size: 15px; font-weight: 400; cursor: pointer; border: 2px solid transparent; transition: all .2s; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--sz-radius,6px); }
.sz-dash-btn-red { background: var(--sz-red,#c62828); color: #fff; border-color: var(--sz-red,#c62828); }
.sz-dash-btn-red:hover { background: var(--sz-red-deep,#b71c1c); border-color: var(--sz-red-deep,#b71c1c); color: #fff; }
.sz-tab-nav { overflow-x: auto; scrollbar-width: none; }
.sz-tab-nav::-webkit-scrollbar { display: none; }