/* =====================================================================
   DeepGo — zamonaviy qatlam (style.css dan KEYIN ulanadi)
   Panel va admin sahifalariga ta'sir qilmaydi: ular header.php ni ishlatmaydi.
   ===================================================================== */

:root {
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.06);
  --shadow-lg: 0 18px 40px -12px rgba(16,24,40,.28);
  --ease: cubic-bezier(.22,.9,.3,1);
  --glass: rgba(255,255,255,.78);
  --brand-grad: linear-gradient(135deg, #1f7a4d 0%, #2fa36b 60%, #6fcf97 100%);
}

/* ── Tungi rejim ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #0e1218; --card: #171c24; --text: #e8edf3; --text-muted: #94a0ae;
  --border: #29313c; --brand-light: #14291f; --brand: #35b574; --brand-dark: #5bd696;
  --glass: rgba(23,28,36,.78);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  color-scheme: dark;
}
[data-theme="dark"] .site-header,
[data-theme="dark"] .cat-bar,
[data-theme="dark"] .search-form,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .cat-icon,
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .btn-google,
[data-theme="dark"] .pagination a,
[data-theme="dark"] .top-option { background: var(--card); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .cat-bar { background: var(--card); }
[data-theme="dark"] .search-form input { background: transparent; color: var(--text); }
[data-theme="dark"] .product-thumb,
[data-theme="dark"] .gallery-main { background: #0f141a; }
[data-theme="dark"] .btn-primary { color: #06210f; }
[data-theme="dark"] .logo { color: var(--brand); }

body { transition: background-color .3s, color .3s; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:1000; background:var(--brand); color:#fff; padding:8px 14px; border-radius:8px; transition:top .2s; }
.skip-link:focus { top:10px; color:#fff; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ── Skroll ko'rsatkichi ─────────────────────────────────────────── */
.scroll-progress { position:fixed; inset:0 auto auto 0; height:3px; width:0; z-index:200; background:var(--brand-grad); }

/* ── Header (shisha effekti) ─────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); transition: box-shadow .25s, background .25s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(16,24,40,.12); }
.logo { font-weight: 800; letter-spacing: -.3px; }
.logo i { display:inline-block; transition: transform .4s var(--ease); }
.logo:hover i { transform: rotate(-14deg) scale(1.15); }
.search-form { position: relative; border-radius: 999px; transition: box-shadow .2s, border-color .2s; }
.search-form:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { position:relative; width:40px; height:40px; display:inline-grid; place-items:center; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; font-size:16px; transition: transform .2s var(--ease), background .2s; }
.icon-btn:hover { transform: translateY(-2px); color: var(--brand); }
.fav-count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#e53935; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
.fav-count.bump { animation: pop .4s var(--ease); }

/* Qidiruv tavsiyalari */
.search-suggest { position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; z-index:150; animation: dropIn .18s var(--ease); }
.search-suggest a { display:flex; align-items:center; gap:10px; padding:9px 12px; color:var(--text); }
.search-suggest a:hover, .search-suggest a.active { background: var(--brand-light); }
.search-suggest img { width:42px; height:42px; border-radius:8px; object-fit:cover; flex:none; background:#eef0f3; }
.search-suggest .ss-ico { width:42px; height:42px; display:grid; place-items:center; border-radius:8px; background:var(--brand-light); color:var(--brand); flex:none; }
.search-suggest b { display:block; font-weight:600; font-size:14px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-suggest small { color:var(--text-muted); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { position:relative; margin:18px 0 10px; border-radius:28px; overflow:hidden; color:#fff; isolation:isolate; min-height:420px; display:flex; align-items:center; background: radial-gradient(1200px 500px at 85% -10%, #3cc481 0%, transparent 60%), linear-gradient(135deg, #0f4d31 0%, #1f7a4d 55%, #2a9d6a 100%); }
.hero-video, .hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.hero-video { object-fit:cover; opacity:.55; }
.hero-video + .hero-canvas { opacity:.5; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(8,40,26,.78) 0%, rgba(8,40,26,.25) 70%, transparent 100%); }
.hero-orbs span { position:absolute; border-radius:50%; filter: blur(40px); opacity:.45; z-index:-1; animation: drift 14s ease-in-out infinite alternate; }
.hero-orbs span:nth-child(1){ width:260px;height:260px;background:#ffb938;left:-60px;top:-40px; }
.hero-orbs span:nth-child(2){ width:320px;height:320px;background:#6fe3a5;right:12%;bottom:-120px; animation-delay:-4s; }
.hero-orbs span:nth-child(3){ width:180px;height:180px;background:#5aa9ff;right:-40px;top:30px; animation-delay:-8s; }
.hero-inner { position:relative; max-width:100%; padding:44px 34px; }
.hero-kicker { display:inline-flex; gap:8px; align-items:center; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); font-size:13px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero-kicker i { color:#ffcf66; }
.hero h1 { font-size: clamp(28px, 4.6vw, 50px); line-height:1.1; margin:16px 0 12px; font-weight:800; letter-spacing:-.8px; }
.hero .grad { background: linear-gradient(90deg,#ffe29a,#ffb938,#fff3c4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation: shimmer 5s linear infinite; }
.hero-sub { margin:0 0 22px; font-size:16px; opacity:.9; max-width:520px; }
.hero-search { display:flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:6px 6px 6px 18px; box-shadow:0 14px 34px rgba(0,0,0,.28); max-width:560px; }
.hero-search i { color:#9ca3af; }
.hero-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:16px; padding:10px 4px; color:#1c2024; }
.hero-search .btn { border-radius:999px; padding:11px 24px; }
.hero-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hero-chips a { color:#fff; font-size:13px; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); transition: background .2s, transform .2s var(--ease); }
.hero-chips a:hover { background:rgba(255,255,255,.28); color:#fff; transform: translateY(-2px); }
.hero-stats { display:flex; gap:28px; margin-top:26px; }
.hero-stats b { display:block; font-size:28px; font-weight:800; line-height:1; }
.hero-stats span { font-size:13px; opacity:.8; }

/* Suzuvchi mahsulot kartalari */
.hero-float { position:absolute; right:4%; top:0; bottom:0; width:340px; pointer-events:none; }
.float-card { position:absolute; width:150px; background:rgba(255,255,255,.96); border-radius:18px; padding:8px; box-shadow:0 22px 40px rgba(0,0,0,.35); color:#1c2024; pointer-events:auto; animation: floaty 6s ease-in-out infinite; }
.float-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.float-card span { display:block; padding:6px 4px 2px; font-weight:700; font-size:13px; }
.float-card.f1 { right:150px; top:14%; transform:rotate(-6deg); }
.float-card.f2 { right:10px; top:30%; transform:rotate(5deg); animation-delay:-2s; width:170px; }
.float-card.f3 { right:120px; bottom:8%; transform:rotate(-2deg); animation-delay:-4s; width:130px; }

/* ── Kartalar ────────────────────────────────────────────────────── */
.grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.product-card { border-radius: var(--radius); transition: transform .35s var(--ease), box-shadow .35s var(--ease); will-change: transform; transform-style: preserve-3d; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-thumb { border-radius: var(--radius) var(--radius) 0 0; }
.product-thumb img { position:absolute; inset:0; transition: transform .7s var(--ease), opacity .45s ease; }
.product-thumb img.loaded-fade { animation: fadeIn .6s ease both; }
.product-card:hover .product-thumb img.img-main { transform: scale(1.09); }
.product-thumb.has-alt .img-alt { opacity:0; transform: scale(1.08); }
.product-card:hover .product-thumb.has-alt .img-alt { opacity:1; transform: scale(1); }
.product-card:hover .product-thumb.has-alt .img-main { opacity:0; }
.thumb-shine { position:absolute; inset:0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease); pointer-events:none; }
.product-card:hover .thumb-shine { transform: translateX(120%); }
.product-price { font-weight:800; font-size:17px; }
.product-title { transition: color .2s; }
.product-card:hover .product-title { color: var(--brand); }
.top-badge { z-index:2; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.top-badge.top1 { animation: glow 2.2s ease-in-out infinite; }
.top-badge.new { background: var(--brand-grad); color:#fff; position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }

/* Saralash (yurakcha) */
.fav-btn { position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#6b7280; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.18); transition: transform .25s var(--ease), color .2s; }
.fav-btn:hover { transform: scale(1.12); color:#e53935; }
.fav-btn.on { color:#e53935; }
.fav-btn.on i { font-weight:900; animation: pop .45s var(--ease); }
.fav-btn.fav-inline { position:static; width:auto; height:auto; padding:8px 14px; border-radius:999px; display:inline-flex; gap:6px; align-items:center; font-size:14px; border:1px solid var(--border); background:var(--card); color:var(--text); box-shadow:none; }

/* ── Skroll orqali paydo bo'lish ─────────────────────────────────── */
.js [data-reveal] { opacity:0; transform: translateY(26px) scale(.98); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { opacity:1; transform:none; }
.js .product-card[data-reveal].in:hover { transform: translateY(-6px); }

/* ── Filtr paneli, kategoriya, kichik bo'limlar ──────────────────── */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; padding:10px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); }
.filter-bar select, .filter-bar input { height:38px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); font:inherit; font-size:14px; }
.filter-bar input { width:150px; }
.cat-tile .cat-icon { transition: transform .35s var(--ease), background .2s; }
.cat-tile:hover .cat-icon { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.store-card { border-radius: var(--radius); transition: transform .3s var(--ease), box-shadow .3s; }
.store-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.btn { transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.btn:active { transform: scale(.97); }
/*.btn-primary { background: var(--brand-grad); }*/
.btn-primary:hover { box-shadow: 0 8px 20px rgba(31,122,77,.35); transform: translateY(-1px); }
.btn-whatsapp { background:#25d366; color:#fff; }
.btn-whatsapp:hover { background:#1ebe5a; color:#fff; }
.banner-strip { box-shadow: var(--shadow); }
.banner-strip img { transition: transform .8s var(--ease); }
.banner-strip:hover img { transform: scale(1.02); }
.banner-middle { margin: 26px 0; }
.link-btn { background:none; border:0; color:var(--brand); cursor:pointer; font:inherit; font-size:14px; }

/* Oxirgi ko'rilganlar */
.recent-row { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.recent-row a { flex:0 0 150px; scroll-snap-align:start; background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); color:var(--text); transition: transform .3s var(--ease); }
.recent-row a:hover { transform: translateY(-4px); }
.recent-row img { width:100%; aspect-ratio:1; object-fit:cover; }
.recent-row span { display:block; padding:8px 10px 2px; font-size:13px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.recent-row b { display:block; padding:0 10px 10px; font-size:13px; color:var(--brand); }

/* ── Mahsulot sahifasi ───────────────────────────────────────────── */
.gallery-main { cursor: zoom-in; transition: opacity .25s, transform .4s var(--ease); }
.gallery-main.swap { opacity:0; transform: scale(.98); }
.gallery-thumbs img { border-radius:10px; transition: transform .25s var(--ease), border-color .15s, opacity .15s; }
.gallery-thumbs img:hover { transform: translateY(-3px); }
.side-card { border-radius: var(--radius); }
.big-price { background: var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.share-row { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.share-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; font-size:17px; transition: transform .25s var(--ease), color .2s; }
.share-btn:hover { transform: translateY(-3px); color: var(--brand); }
.mobile-cta { display:none; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:500; background:rgba(5,8,12,.92); display:flex; align-items:center; justify-content:center; animation: fadeIn .2s ease; touch-action: pan-y; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation: zoomIn .35s var(--ease); user-select:none; }
.lightbox button { position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0; width:46px; height:46px; border-radius:50%; font-size:20px; cursor:pointer; transition: background .2s; }
.lightbox button:hover { background:rgba(255,255,255,.28); }
.lb-close { top:18px; right:18px; } .lb-prev { left:18px; } .lb-next { right:18px; }
.lb-count { position:absolute; bottom:18px; color:#fff; font-size:14px; opacity:.8; }

/* Pastki yordamchilar */
.to-top { position:fixed; right:18px; bottom:22px; z-index:90; width:46px; height:46px; border-radius:50%; border:0; background:var(--brand-grad); color:#fff; font-size:17px; cursor:pointer; box-shadow:0 10px 24px rgba(31,122,77,.4); animation: pop .4s var(--ease); }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:600; background:#111827; color:#fff; padding:11px 20px; border-radius:999px; font-size:14px; box-shadow:var(--shadow-lg); animation: dropIn .25s var(--ease); }

/* ── Animatsiyalar ───────────────────────────────────────────────── */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes zoomIn { from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none} }
@keyframes dropIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
@keyframes pop { 0%{transform:scale(.6)} 60%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes floaty { 0%,100%{translate:0 0} 50%{translate:0 -16px} }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.15); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes glow { 0%,100%{box-shadow:0 4px 12px rgba(229,57,53,.35)} 50%{box-shadow:0 4px 20px rgba(229,57,53,.75)} }

/* ── Moslashuvchanlik ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-float { display:none; }
  .hero { min-height: 380px; border-radius: 22px; }
  .hero::after { background: linear-gradient(180deg, rgba(8,40,26,.55), rgba(8,40,26,.35)); }
}
@media (max-width: 768px) {
  .grid { gap: 12px; grid-template-columns: repeat(2, 1fr); }
  .hero-inner { padding: 30px 20px; }
  .hero-stats { gap: 20px; }
  .hero-stats b { font-size: 22px; }
  .filter-bar input { width: calc(50% - 4px); }
  .header-actions .btn span { display:none; }
  .mobile-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:95; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--border); }
  .mc-price { font-weight:800; font-size:18px; }
  .page-product main.container { padding-bottom: 90px; }
  .to-top { bottom: 80px; }
}

/* Harakatni kamaytirishni so'raganlar uchun */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js [data-reveal] { opacity:1; transform:none; }
  .hero-video { display:none; }
}