/* ==========================================
   MEDIAPARK — style.css (FULL)
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --accent:      #e8192c;
    --accent-dark: #c0111f;
    --accent-light:#ff4d5e;
    --bg:          #f2f4f7;
    --white:       #ffffff;
    --dark:        #0d1117;
    --text:        #2d3748;
    --muted:       #718096;
    --border:      #e2e8f0;
    --shadow-sm:   0 1px 4px rgba(0,0,0,.07);
    --shadow-md:   0 4px 20px rgba(0,0,0,.10);
    --shadow-lg:   0 12px 40px rgba(0,0,0,.16);
    --radius:      14px;
    --radius-sm:   9px;
    --tr:          .22s cubic-bezier(.4,0,.2,1);
    --font-head:   'Manrope', sans-serif;
    --font-body:   'Plus Jakarta Sans', sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,select,textarea { font-family:inherit; }
.container { max-width:1320px; margin:0 auto; padding:0 24px; }

/* ══ TOP BAR ══ */
.header-top-bar { background:var(--dark); color:#8a9bb0; font-size:12px; }
.header-top-bar .container { display:flex; justify-content:center; gap:40px; padding:8px 24px; flex-wrap:wrap; }

/* ══ NAVBAR ══ */
.site-header { position:sticky; top:0; z-index:1000; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.navbar { padding:13px 0; }
.navbar-inner { display:flex; align-items:center; gap:16px; }

.logo a { font-family:var(--font-head); font-size:28px; font-weight:900; letter-spacing:-1px; white-space:nowrap; }
.logo-accent { color:var(--accent); }
.logo-main { color:var(--dark); }

.catalog-btn { display:flex; align-items:center; gap:8px; background:var(--accent); color:#fff; padding:10px 22px; border-radius:var(--radius-sm); font-family:var(--font-head); font-weight:700; font-size:14px; white-space:nowrap; transition:background var(--tr),transform var(--tr); }
.catalog-btn:hover { background:var(--accent-dark); transform:translateY(-1px); }

.search-wrap { flex:1; max-width:580px; position:relative; display:flex; }
.search-wrap input { width:100%; padding:11px 50px 11px 18px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:#f8fafc; font-size:14px; color:var(--dark); transition:border-color var(--tr); outline:none; }
.search-wrap input:focus { border-color:var(--accent); background:#fff; }
.search-btn { position:absolute; right:0; top:0; bottom:0; width:48px; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:color var(--tr); }
.search-btn:hover { color:var(--accent); }

.search-dropdown { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); border:1px solid var(--border); max-height:340px; overflow-y:auto; z-index:100; display:none; }
.search-dropdown.active { display:block; }
.search-result-item { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; transition:background var(--tr); border-bottom:1px solid #f1f5f9; }
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:#f8fafc; }
.search-result-item img { width:42px; height:42px; object-fit:contain; border-radius:6px; background:#f1f5f9; }
.item-name { font-size:13px; font-weight:500; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-price { font-size:12px; color:var(--accent); font-weight:700; }

.header-actions { display:flex; align-items:center; gap:4px; }
.action-btn { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 12px; border-radius:var(--radius-sm); font-size:11px; font-weight:600; color:var(--text); cursor:pointer; transition:color var(--tr),background var(--tr); white-space:nowrap; text-decoration:none; }
.action-btn:hover { color:var(--accent); background:#fff5f5; }
.action-btn svg { flex-shrink:0; }
.badge { position:absolute; top:4px; right:6px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:100px; display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1; }

/* ══ CATEGORY BAR ══ */
.category-bar { border-top:1px solid var(--border); background:#fff; }
.category-list { display:flex; overflow-x:auto; scrollbar-width:none; padding:0; }
.category-list::-webkit-scrollbar { display:none; }
.category-item { padding:12px 20px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; border-bottom:2.5px solid transparent; transition:color var(--tr),border-color var(--tr); }
.category-item:hover,.category-item.active-cat { color:var(--accent); border-bottom-color:var(--accent); }
.skeleton-item { opacity:.3; animation:pulse 1.5s ease-in-out infinite; }

/* ══ SKELETON ══ */
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:.6} }
.skeleton-block { background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.hero-skeleton { display:flex; gap:16px; }
.slider-skel { flex:1; height:340px; }
.daily-skel { width:280px; height:340px; flex-shrink:0; }
.cat-skel { min-width:110px; height:110px; border-radius:50%; }
.prod-skel { height:340px; }
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }

/* ══ HERO ══ */
.hero-section { margin:22px 0; display:flex; gap:16px; }
.slider-container { flex:1; border-radius:var(--radius); overflow:hidden; position:relative; background:#e2e8f0; min-height:320px; }
.ad-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.ad-slide.active { opacity:1; }
.ad-slide img { width:100%; height:100%; object-fit:cover; }
.slider-placeholder { width:100%; height:100%; min-height:320px; background:linear-gradient(135deg,#0d1117 0%,var(--accent-dark) 60%,#0d1117 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; padding:40px; }
.promo-tag { font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--accent-light); margin-bottom:14px; }
.slider-placeholder h2 { font-family:var(--font-head); font-size:44px; font-weight:900; line-height:1.05; margin-bottom:12px; }
.slider-placeholder p { font-size:15px; opacity:.7; margin-bottom:28px; }
.slider-cta { background:var(--accent); color:#fff; padding:12px 34px; border-radius:var(--radius-sm); font-family:var(--font-head); font-weight:800; font-size:15px; transition:transform var(--tr),background var(--tr); }
.slider-cta:hover { background:var(--accent-light); transform:translateY(-2px); }
.slider-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.slider-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:all var(--tr); border:none; }
.slider-dot.active { background:#fff; width:22px; border-radius:4px; }

.daily-container { width:280px; flex-shrink:0; }
.daily-card { background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); height:100%; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.daily-header { background:linear-gradient(90deg,var(--accent-dark),var(--accent)); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.daily-header h4 { font-family:var(--font-head); font-size:14px; font-weight:800; }
.timer { font-family:'Courier New',monospace; font-size:15px; font-weight:700; background:rgba(0,0,0,.25); padding:3px 8px; border-radius:5px; letter-spacing:1px; }
.daily-body { flex:1; padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.daily-body img { width:120px; height:120px; object-fit:contain; margin:12px auto; }
.daily-name { font-size:13px; font-weight:500; color:var(--text); margin-bottom:12px; line-height:1.4; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.daily-price-box { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
.daily-price-box .price { font-family:var(--font-head); font-size:15px; font-weight:900; color:var(--dark); }
.daily-cart-btn { background:var(--accent); color:#fff; width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:16px; transition:background var(--tr),transform var(--tr); }
.daily-cart-btn:hover { background:var(--accent-dark); transform:scale(1.06); }

/* ══ SECTIONS ══ */
.popular-section,.products-section { margin-bottom:38px; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-title { font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--dark); position:relative; padding-left:14px; }
.section-title::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:4px; background:var(--accent); border-radius:2px; }
.sort-controls select { padding:8px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13px; color:var(--text); background:#fff; cursor:pointer; outline:none; transition:border-color var(--tr); }
.sort-controls select:focus { border-color:var(--accent); }

/* ══ CAT GRID ══ */
.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(2,auto); gap:10px; }
.pop-cat-card { background:#fff; border-radius:var(--radius); padding:14px 10px 0 14px; cursor:pointer; border:1.5px solid var(--border); display:flex; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:6px; transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr); overflow:hidden; min-height:88px; }
.pop-cat-card:hover { border-color:var(--accent); box-shadow:0 4px 18px rgba(232,25,44,.12); transform:translateY(-2px); }
.pop-cat-img { width:76px; height:66px; display:flex; align-items:flex-end; justify-content:center; flex-shrink:0; }
.pop-cat-img img { width:76px; height:66px; object-fit:contain; display:block; }
.pop-cat-info { font-size:13px; font-weight:700; color:var(--dark); line-height:1.35; padding-bottom:14px; flex:1; }
.pop-cat-all { align-items:center; justify-content:center; flex-direction:column; gap:6px; background:#f8fafc; padding:14px; }
.pop-cat-all-label { font-size:13px; font-weight:700; color:var(--dark); text-align:center; padding-bottom:0; }
.pop-cat-arrow { font-size:22px; color:var(--accent); font-weight:900; line-height:1; }
.cat-skel { height:88px; border-radius:var(--radius); }

/* ══ PRODUCT GRID ══ */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.product-card { background:#fff; border-radius:var(--radius); padding:16px; border:1.5px solid var(--border); display:flex; flex-direction:column; position:relative; cursor:pointer; transition:box-shadow var(--tr),transform var(--tr),border-color var(--tr); overflow:hidden; }
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#c9d3df; }
.p-badge { position:absolute; top:12px; left:12px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; padding:3px 9px; border-radius:5px; z-index:2; letter-spacing:.5px; }
.p-wishlist-btn { position:absolute; top:10px; right:10px; background:#fff; border:1.5px solid var(--border); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; z-index:2; transition:border-color var(--tr),color var(--tr),background var(--tr); color:#b0bec5; font-size:15px; }
.p-wishlist-btn:hover,.p-wishlist-btn.active { border-color:var(--accent); color:var(--accent); background:#fff5f5; }
.p-image-box { height:170px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; padding:8px; }
.p-image-box img { max-width:100%; max-height:100%; object-fit:contain; transition:transform var(--tr); }
.product-card:hover .p-image-box img { transform:scale(1.05); }
.p-title { font-size:13.5px; font-weight:500; color:var(--text); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px; margin-bottom:8px; }
.p-installment-info { font-size:12px; color:#fff; background:#1a56db; border-radius:6px; padding:4px 10px; display:inline-block; margin-bottom:10px; font-weight:600; }
.p-footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid #f1f5f9; }
.p-price { font-family:var(--font-head); font-size:17px; font-weight:900; color:var(--dark); }
.p-cart-btn { background:var(--accent); color:#fff; width:38px; height:38px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:16px; transition:background var(--tr),transform var(--tr); flex-shrink:0; }
.p-cart-btn:hover { background:var(--accent-dark); transform:scale(1.07); }
.empty-msg,.error-msg { text-align:center; padding:60px 20px; color:var(--muted); font-size:15px; }
.empty-msg svg { margin:0 auto 16px; opacity:.3; }

/* ══ CART DRAWER ══ */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1100; opacity:0; visibility:hidden; transition:opacity var(--tr),visibility var(--tr); backdrop-filter:blur(3px); }
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:400px; max-width:95vw; background:#fff; z-index:1200; display:flex; flex-direction:column; box-shadow:-4px 0 40px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.cart-drawer.open { transform:translateX(0); }
.cart-header { padding:20px 20px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cart-header h3 { font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--dark); }
.close-cart { width:32px; height:32px; border-radius:50%; background:#f1f5f9; color:var(--text); font-size:14px; display:flex; align-items:center; justify-content:center; transition:background var(--tr); }
.close-cart:hover { background:var(--border); }
.cart-items { flex:1; overflow-y:auto; padding:16px; }
.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--muted); gap:12px; padding:40px; text-align:center; }
.cart-item { display:flex; gap:12px; padding:12px; background:#f8fafc; border-radius:var(--radius-sm); margin-bottom:10px; border:1px solid var(--border); animation:slideIn .25s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.cart-item img { width:60px; height:60px; object-fit:contain; background:#fff; border-radius:8px; padding:4px; flex-shrink:0; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:13px; font-weight:500; color:var(--dark); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-item-price { font-size:13px; font-weight:700; color:var(--accent); }
.cart-item-controls { display:flex; align-items:center; gap:8px; margin-top:6px; }
.qty-btn { width:26px; height:26px; background:#fff; border:1.5px solid var(--border); border-radius:6px; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--dark); transition:border-color var(--tr); }
.qty-btn:hover { border-color:var(--accent); color:var(--accent); }
.qty-val { font-size:13px; font-weight:700; min-width:20px; text-align:center; }
.remove-item { margin-left:auto; color:#b0bec5; font-size:18px; cursor:pointer; align-self:flex-start; transition:color var(--tr); }
.remove-item:hover { color:var(--accent); }
.cart-footer { padding:16px 20px 20px; border-top:1px solid var(--border); }
.cart-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:15px; }
.cart-total strong { font-family:var(--font-head); font-size:18px; font-weight:900; color:var(--dark); }
.checkout-btn { width:100%; background:var(--accent); color:#fff; padding:14px; border-radius:var(--radius-sm); font-family:var(--font-head); font-size:15px; font-weight:800; text-align:center; transition:background var(--tr),transform var(--tr); display:block; }
.checkout-btn:hover { background:var(--accent-dark); transform:translateY(-1px); }

/* ══ AUTH PAGES ══ */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f8fafc 0%,#e8f0fe 100%); padding:24px; }
.auth-card { background:#fff; border-radius:22px; padding:44px 40px 38px; width:480px; max-width:100%; box-shadow:var(--shadow-lg); border:1px solid var(--border); }
.auth-logo { text-align:center; margin-bottom:30px; }
.auth-logo a { font-family:var(--font-head); font-size:34px; font-weight:900; letter-spacing:-1.5px; }
.auth-card h1 { font-family:var(--font-head); font-size:26px; font-weight:900; color:var(--dark); margin-bottom:6px; }
.auth-card .subtitle { font-size:14px; color:var(--muted); margin-bottom:28px; line-height:1.5; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:700; color:var(--dark); margin-bottom:7px; }
.form-group input { width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; color:var(--dark); background:#f8fafc; outline:none; transition:border-color var(--tr),background var(--tr),box-shadow var(--tr); }
.form-group input:focus { border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(232,25,44,.08); }
.email-verify-wrap { display:flex; gap:8px; }
.email-verify-wrap input { flex:1; }
.email-verify-wrap button { padding:13px 16px; background:var(--accent); color:#fff; border-radius:var(--radius-sm); font-size:13px; font-weight:700; white-space:nowrap; transition:background var(--tr); }
.email-verify-wrap button:hover { background:var(--accent-dark); }
.email-verify-wrap button:disabled { background:#94a3b8; cursor:not-allowed; }
.otp-timer { font-size:12px; color:var(--muted); margin-top:5px; }
.submit-btn { width:100%; background:var(--accent); color:#fff; padding:15px; border-radius:var(--radius-sm); font-family:var(--font-head); font-size:16px; font-weight:800; margin-top:8px; transition:background var(--tr),transform var(--tr),box-shadow var(--tr); box-shadow:0 4px 14px rgba(232,25,44,.3); }
.submit-btn:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(232,25,44,.4); }
.submit-btn:disabled { background:#94a3b8; transform:none; box-shadow:none; cursor:not-allowed; }
.auth-error { color:#dc2626; font-size:13px; margin-top:12px; min-height:18px; font-weight:500; }
.auth-success { color:#16a34a; font-size:13px; margin-top:12px; min-height:18px; font-weight:500; }
.auth-switch { text-align:center; margin-top:22px; font-size:14px; color:var(--muted); }
.auth-switch a { color:var(--accent); font-weight:700; }
.auth-switch a:hover { text-decoration:underline; }
.divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--muted); font-size:13px; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* Password confirm group */
.pw-confirm-note { font-size:12px; color:var(--muted); margin-top:4px; }
.pw-match { color:#16a34a; font-weight:600; }
.pw-nomatch { color:#dc2626; font-weight:600; }

/* ══ OTP PAGE ══ */
.otp-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f8fafc 0%,#e8f0fe 100%); padding:24px; }
.otp-card { background:#fff; border-radius:22px; padding:50px 42px; width:460px; max-width:100%; box-shadow:var(--shadow-lg); text-align:center; border:1px solid var(--border); }
.otp-icon { font-size:68px; margin-bottom:20px; line-height:1; }
.otp-card h1 { font-family:var(--font-head); font-size:26px; font-weight:900; color:var(--dark); margin-bottom:10px; }
.otp-card p { font-size:14px; color:var(--muted); margin-bottom:30px; line-height:1.7; }
.otp-email-display { font-weight:800; color:var(--dark); }
.otp-inputs { display:flex; gap:10px; justify-content:center; margin-bottom:22px; }
.otp-inputs input { width:52px; height:62px; text-align:center; font-size:24px; font-weight:900; font-family:var(--font-head); border:2px solid var(--border); border-radius:12px; color:var(--dark); background:#f8fafc; outline:none; transition:border-color var(--tr),background var(--tr),box-shadow var(--tr); }
.otp-inputs input:focus { border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(232,25,44,.1); }
.otp-inputs input.filled { border-color:var(--accent); background:#fff; }
.otp-resend { font-size:13px; color:var(--muted); margin-bottom:22px; }
.otp-resend button { color:var(--accent); font-weight:700; background:none; border:none; cursor:pointer; transition:opacity var(--tr); }
.otp-resend button:disabled { color:var(--muted); cursor:default; opacity:.7; }

/* ══ PAGE WRAPPER ══ */
.page-wrapper { flex:1; padding:30px 0 60px; }
.detail-page-wrapper { flex:1; padding:30px 0 60px; }
.page-title { font-family:var(--font-head); font-size:26px; font-weight:900; color:var(--dark); margin-bottom:24px; padding-left:14px; position:relative; }
.page-title::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:4px; background:var(--accent); border-radius:2px; }

/* ══ CART PAGE ══ */
.cart-page-layout { display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
.cart-page-items { display:flex; flex-direction:column; gap:12px; }
.cart-page-item { background:#fff; border-radius:var(--radius); padding:18px; border:1.5px solid var(--border); display:flex; gap:16px; align-items:center; transition:box-shadow var(--tr); }
.cart-page-item:hover { box-shadow:var(--shadow-sm); }
.cart-page-item img { width:80px; height:80px; object-fit:contain; background:#f8fafc; border-radius:10px; padding:6px; flex-shrink:0; }
.cart-page-item-info { flex:1; min-width:0; }
.cart-page-item-name { font-size:14px; font-weight:600; color:var(--dark); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-page-item-price { font-family:var(--font-head); font-size:16px; font-weight:900; color:var(--accent); margin-bottom:10px; }
.cart-page-item-controls { display:flex; align-items:center; gap:10px; }
.qty-btn-lg { width:32px; height:32px; background:#f1f5f9; border:1.5px solid var(--border); border-radius:8px; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color var(--tr),background var(--tr); }
.qty-btn-lg:hover { border-color:var(--accent); background:#fff5f5; }
.qty-val-lg { font-size:15px; font-weight:800; font-family:var(--font-head); min-width:28px; text-align:center; }
.remove-btn-lg { background:none; border:none; color:#b0bec5; cursor:pointer; font-size:20px; transition:color var(--tr); flex-shrink:0; margin-left:auto; }
.remove-btn-lg:hover { color:var(--accent); }
.cart-summary { background:#fff; border-radius:var(--radius); padding:24px; border:1.5px solid var(--border); position:sticky; top:88px; }
.cart-summary h3 { font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--dark); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.summary-row { display:flex; justify-content:space-between; font-size:14px; color:var(--muted); margin-bottom:10px; }
.summary-row.total { font-family:var(--font-head); font-size:18px; font-weight:900; color:var(--dark); padding-top:14px; border-top:1px solid var(--border); margin-top:8px; }
.order-btn { width:100%; background:var(--accent); color:#fff; padding:15px; border-radius:var(--radius-sm); font-family:var(--font-head); font-size:15px; font-weight:800; margin-top:16px; transition:background var(--tr),transform var(--tr); box-shadow:0 4px 14px rgba(232,25,44,.3); }
.order-btn:hover { background:var(--accent-dark); transform:translateY(-1px); }
.cart-empty-page { text-align:center; padding:80px 20px; background:#fff; border-radius:var(--radius); border:1.5px solid var(--border); }
.cart-empty-page svg { margin:0 auto 16px; opacity:.2; }
.cart-empty-page h3 { font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--dark); margin-bottom:8px; }
.cart-empty-page p { color:var(--muted); margin-bottom:20px; }
.back-btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; padding:12px 28px; border-radius:var(--radius-sm); font-family:var(--font-head); font-weight:700; font-size:14px; transition:background var(--tr); text-decoration:none; }
.back-btn:hover { background:var(--accent-dark); }

/* ══ WISHLIST PAGE ══ */
.wishlist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }

/* ══ DETAIL PAGE ══ */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:24px; flex-wrap:wrap; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { color:var(--dark); font-weight:600; }
.detail-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; background:#fff; border-radius:var(--radius); padding:34px; border:1.5px solid var(--border); box-shadow:var(--shadow-sm); }
.detail-main-img { width:100%; height:360px; display:flex; align-items:center; justify-content:center; background:#f8fafc; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:14px; overflow:hidden; }
.detail-main-img img { max-width:85%; max-height:85%; object-fit:contain; transition:transform .4s ease; }
.detail-main-img img:hover { transform:scale(1.05); }
.detail-thumbs { display:flex; gap:10px; flex-wrap:wrap; }
.detail-thumb { width:68px; height:68px; border-radius:10px; border:2px solid var(--border); overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; background:#f8fafc; padding:6px; transition:border-color var(--tr); }
.detail-thumb.active { border-color:var(--accent); }
.detail-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.detail-title { font-family:var(--font-head); font-size:22px; font-weight:900; color:var(--dark); margin-bottom:18px; line-height:1.3; }
.detail-price { font-family:var(--font-head); font-size:34px; font-weight:900; color:var(--dark); margin-bottom:6px; }
.detail-monthly { font-size:13px; color:#fff; background:#1a56db; border-radius:7px; padding:6px 14px; display:inline-block; margin-bottom:20px; font-weight:700; }
.detail-stock { display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:14px; }
.stock-dot { width:9px; height:9px; background:#22c55e; border-radius:50%; flex-shrink:0; }
.stock-label { color:#16a34a; font-weight:700; }
.detail-actions { display:flex; gap:12px; margin-bottom:24px; }
.detail-cart-btn { flex:1; background:var(--accent); color:#fff; padding:15px; border-radius:var(--radius-sm); font-family:var(--font-head); font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; transition:background var(--tr),transform var(--tr); box-shadow:0 4px 14px rgba(232,25,44,.3); }
.detail-cart-btn:hover { background:var(--accent-dark); transform:translateY(-1px); }
.detail-wish-btn { width:52px; height:52px; border-radius:var(--radius-sm); border:2px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; color:#b0bec5; cursor:pointer; transition:all var(--tr); flex-shrink:0; }
.detail-wish-btn:hover,.detail-wish-btn.active { border-color:var(--accent); color:var(--accent); background:#fff5f5; }
.detail-comments { margin-top:32px; }
.detail-comments h3 { font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--dark); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.comment-item { background:#f8fafc; border-radius:var(--radius-sm); padding:12px; margin-bottom:8px; border:1px solid var(--border); }
.comment-user { font-size:12px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.comment-text { font-size:13px; color:var(--text); }

/* ══ COMING SOON ══ */
.coming-soon-box { text-align:center; background:#fff; border-radius:24px; padding:60px 48px; max-width:480px; width:100%; border:1.5px solid var(--border); box-shadow:var(--shadow-md); margin:0 auto; }
.coming-soon-box .cs-icon { font-size:72px; margin-bottom:20px; line-height:1; animation:float 3s ease-in-out infinite; display:block; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.coming-soon-box h2 { font-family:var(--font-head); font-size:26px; font-weight:900; color:var(--dark); margin-bottom:10px; }
.coming-soon-box p { font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:24px; }

/* ══ TOAST ══ */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast { background:#0d1117; color:#fff; padding:13px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; min-width:260px; animation:toastIn .3s ease,toastOut .3s ease 2.7s forwards; }
.toast.success { border-left:4px solid #22c55e; }
.toast.error { border-left:4px solid var(--accent); }
.toast.info { border-left:4px solid #3b82f6; }
@keyframes toastIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(16px)} }

/* ══ LOADER ══ */
.loader-spinner { width:36px; height:36px; border:3px solid #e2e8f0; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ══ FOOTER ══ */
.footer-wrapper { background:#0d1117; color:#8a9bb0; padding:54px 0 22px; margin-top:auto; }
.footer-content { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:42px; margin-bottom:42px; }
.footer-logo { font-family:var(--font-head); font-size:26px; font-weight:900; color:#fff; margin-bottom:16px; }
.footer-logo .accent { color:var(--accent); }
.footer-hint { font-size:13px; margin-bottom:8px; }
.footer-phone { font-family:var(--font-head); font-size:22px; font-weight:700; color:#fff; display:block; margin-bottom:14px; transition:color var(--tr); }
.footer-phone:hover { color:var(--accent); }
.work-hours { font-size:13px; line-height:1.8; margin-bottom:18px; }
.work-hours strong { color:#e2e8f0; }
.footer-apps { display:flex; gap:10px; flex-wrap:wrap; }
.app-badge { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); padding:8px 14px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; transition:background var(--tr); }
.app-badge:hover { background:rgba(255,255,255,.13); }
.footer-col h4 { font-family:var(--font-head); font-size:14px; font-weight:800; color:#fff; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.payment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pay-item { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:10px; display:flex; align-items:center; justify-content:center; min-height:44px; font-size:10px; font-weight:600; color:#fff; transition:background var(--tr); }
.pay-item:hover { background:rgba(255,255,255,.14); }
.pay-item img { max-width:60px; max-height:24px; object-fit:contain; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links li a { font-size:13.5px; color:#8a9bb0; transition:color var(--tr); }
.footer-links li a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
.bottom-flex { display:flex; justify-content:space-between; align-items:center; }
.copyright { font-size:13px; }
.social-icons { display:flex; gap:10px; }
.social-link { width:36px; height:36px; background:rgba(255,255,255,.08); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#8a9bb0; transition:background var(--tr),color var(--tr); }
.social-link:hover { background:var(--accent); color:#fff; }

/* ══ MODAL (product modal overlay on index) ══ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.52); z-index:1300; opacity:0; visibility:hidden; transition:opacity var(--tr),visibility var(--tr); backdrop-filter:blur(4px); }
.modal-overlay.open { opacity:1; visibility:visible; }
.modal-close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; background:#f1f5f9; font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); transition:background var(--tr); }
.modal-close:hover { background:var(--border); }

/* ══ RESPONSIVE ══ */
@media(max-width:1100px) {
    .footer-content { grid-template-columns:1fr 1fr; }
    .daily-container { width:240px; }
    .cart-page-layout { grid-template-columns:1fr; }
    .cat-grid { grid-template-columns:repeat(4,1fr); }
}
@media(max-width:900px) {
    .search-wrap { max-width:300px; }
    .detail-layout { grid-template-columns:1fr; gap:24px; }
    .cat-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px) {
    .header-top-bar { display:none; }
    .search-wrap { display:none; }
    .action-btn span { display:none; }
    .action-btn { padding:8px; }
    .hero-section { flex-direction:column; }
    .daily-container { width:100%; }
    .slider-container { min-height:220px; }
    .footer-content { grid-template-columns:1fr; }
    .bottom-flex { flex-direction:column; gap:16px; text-align:center; }
    .auth-card { padding:30px 22px; }
    .otp-card { padding:36px 22px; }
    .otp-inputs input { width:42px; height:52px; font-size:20px; }
    .coming-soon-box { padding:40px 24px; }
    .cat-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px) {
    .logo a { font-size:22px; }
    .product-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
    .p-price { font-size:15px; }
    .cart-page-layout { grid-template-columns:1fr; }
}