/* =========================================================
   NextShop: consolidated mobile layer (loaded last on every page).
   Phones: 4 perks/benefits in one row, compact header, stacked
   product/cart/account layouts, compact footer, no sideways scroll.
   ========================================================= */
html, body { overflow-x: clip; max-width: 100%; }
img, video, iframe, svg { max-width: 100%; }

@media (max-width: 820px) {
  .hero-grid { gap: 8px; }
  .showcase { grid-template-columns: 1fr; gap: 16px; }
  .info-grid { grid-template-columns: 1fr; gap: 16px; }
  .pd { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pd-gallery { position: relative; top: auto; }
  .cart-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-sum { position: static; }
}

@media (max-width: 640px) {
  /* ---- base ---- */
  body { font-size: 14px; }
  .container { width: min(100% - 20px, var(--container)); }
  .page { padding-bottom: 96px; }
  .section-title { font-size: 19px; line-height: 1.6; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; }
  .section-head .btn { align-self: flex-start; }
  .panel { border-radius: 18px; }
  .h-title { font-size: 15px; }

  /* ---- header: logo | cart | menu, profile on the right ---- */
  .site-header { top: 6px; margin-top: 6px; }
  .header-bar { height: 58px; padding: 0 8px; gap: 4px; border-radius: 18px; }
  .header-bar > .search { display: none; }
  .logo { margin-inline-end: auto; }
  .logo-mark { width: 30px; height: 27px; }
  .logo-word { font-size: 15px; }
  .header-actions { gap: 4px; order: -1; }
  .user-chip { height: 40px; padding: 0 2px; }
  .user-chip__txt { display: none; }
  .user-drop { left: auto; right: 0; min-width: 240px; }
  .hdr-btn { height: 40px; padding: 0 8px; }
  .cart-label { display: none; }
  .cart-ico { margin-inline-start: 0; width: 22px; height: 22px; }
  .menu-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .dot-badge { top: 0; }

  /* ---- hero ---- */
  .hero { padding-top: 8px; }
  .hero-copy { padding-top: 8px; }
  .hero-title { font-size: 26px; line-height: 1.5; }
  .hero-sub { font-size: 17px; margin-top: 4px; }
  .hero-desc { font-size: 13.5px; line-height: 1.9; margin-top: 10px; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .hero-cta .btn { font-size: 14px; }
  .hero-visual { height: 230px; margin: 4px auto 0; width: 100%; max-width: 100%; }
  .scene { scale: .5; transform-origin: 50% 0; }
  .hero-crown { width: 64px; }
  .cloud--a, .cloud--b, .cloud--c { display: none; }
  .orbit { display: none; }

  /* ---- 4 perks in ONE row, icon + tiny caption ---- */
  .perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 12px 4px; margin-top: 10px; }
  .perk { flex-direction: column; text-align: center; gap: 6px; padding: 4px 2px; justify-content: flex-start; }
  .perk + .perk::before { display: block; top: 20%; bottom: 20%; }
  .perk-ico { width: 30px; height: 30px; }
  .perk b { font-size: 11px; line-height: 1.5; }
  .perk span { display: none; }

  /* ---- robot + banner ---- */
  .robot-card { min-height: 300px; }
  .robot-title { font-size: 19px; top: 20px; left: 16px; }
  .robot-img { width: 70%; right: -10px; bottom: -14px; }
  .robot-btn { font-size: 13px; padding: 0 14px; min-height: 40px; }
  .banner { padding: 16px 14px 26px; }
  .banner-visual { height: 200px; }
  .banner-title strong { font-size: 30px; }
  .banner-title { font-size: 16px; }
  .banner-desc { font-size: 13px; }
  .banner-actions { flex-wrap: wrap; gap: 8px; }
  .banner-actions .btn { min-height: 40px; font-size: 13px; }
  .seal { width: 70px; height: 70px; bottom: 26px; }
  .seal-txt b { font-size: 18px; }

  /* ---- categories panel: compact list ---- */
  .cats { padding: 14px; }
  .cats-list { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cat-item { font-size: 12.5px; padding: 8px; }

  /* ---- 4 benefits in ONE row ---- */
  .benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 6px; margin-top: 16px; }
  .benefit { flex-direction: column; justify-content: center; text-align: center; gap: 4px; min-height: 0; padding: 10px 4px; border-radius: 14px; overflow: hidden; }
  .benefit-txt { max-width: 100%; position: static; }
  .benefit-txt b { font-size: 11px; line-height: 1.5; display: block; }
  .benefit-txt span { display: none; }
  .benefit-obj { position: static; width: 40px; height: 40px; opacity: 1; inset: auto; }

  /* ---- deals strip / catalogs ---- */
  .deal-strip { padding: 14px; border-radius: 20px; }
  .deal-strip__head { flex-wrap: wrap; gap: 10px; }
  .big-timer span { min-width: 46px; }
  .h-scroll { grid-auto-columns: 62%; gap: 10px; }
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .p-card { border-radius: 16px; }
  .p-body { padding: 8px 8px 6px; }
  .p-title { font-size: 12.5px; line-height: 1.6; }
  .p-meta { font-size: 11px; }
  .p-foot { flex-wrap: wrap; gap: 4px; }
  .p-price b { font-size: 13.5px; }
  .p-price s { font-size: 11px; }
  .add-btn { width: 34px; height: 34px; }
  .p-badge { font-size: 10.5px; padding: 2px 7px; }
  .wish-btn--card { width: 30px; height: 30px; }
  .coupon-band { flex-direction: column; text-align: center; gap: 10px; padding: 18px 14px; }
  .coupon-band__gift { width: 84px; }
  .coupon-code { width: 100%; justify-content: center; }
  .info-card { padding: 18px 14px; }
  .faq summary { font-size: 13.5px; }
  .stats { gap: 8px; }
  .stats b { font-size: 18px; }
  .stats span { font-size: 11px; }
  .support-actions .btn { flex: 1 1 100%; }

  /* ---- product page ---- */
  .pd { gap: 12px; }
  .pd-gallery { padding: 10px; border-radius: 18px; }
  .pd-cover { aspect-ratio: 4 / 3; }
  .pd-title { font-size: 20px; line-height: 1.6; }
  .pd-meta { font-size: 12px; gap: 8px; flex-wrap: wrap; }
  .pd-short { font-size: 14px; }
  .pd-buy { padding: 14px; margin-top: 10px; }
  .pd-price b { font-size: 24px; }
  .pd-add { flex-wrap: wrap; min-width: 0; width: 100%; }
  .pd-add .btn { flex: 1 1 100%; min-height: 46px; }
  .pd-actions { gap: 8px; }
  .tabs--page { width: 100%; display: flex; }
  .tabs--page .tab { flex: 1; min-width: 0; padding: 0 6px; font-size: 12.5px; white-space: nowrap; }
  .tab-panel { padding: 14px; }
  .rv-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* ---- cart / checkout / account / misc ---- */
  .cart-list, .co-main, .cart-sum { padding: 14px; }
  .c-row { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
  .c-row__cover { width: 56px; height: 46px; }
  .c-row__qty, .c-row__line, .c-remove { grid-column: 2; }
  .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .tbl-wrap { overflow-x: auto; }
  .alert { font-size: 13px; }
  .toasts { left: 10px; right: 10px; bottom: 84px; }
  .to-top { bottom: 84px; }

  /* ---- footer: compact and orderly ---- */
  .site-footer { margin-top: 36px; padding-bottom: 14px; }
  .footer-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 16px 12px; border-radius: 20px; }
  .f-brand { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: center; gap: 8px; padding: 6px 0 10px; border-bottom: 1px dashed var(--line); }
  .f-brand .logo-mark--xl { width: 44px; height: 38px; margin: 0; }
  .f-brand .logo-word--xl { font-size: 20px; }
  .tagline { display: none; }
  .f-news { grid-column: 1 / -1; }
  .f-news .news-ico { display: none; }
  .f-news .news-head p { font-size: 12px; }
  .f-col { padding: 8px 2px; }
  .f-col + .f-col::before { display: none; }
  .f-col h4 { font-size: 13px; margin-bottom: 6px; }
  .f-links-wrap { grid-template-columns: 1fr 1fr; gap: 6px 10px; grid-column: 1 / -1; }
  .f-quick a, .f-c { font-size: 12px; }
  .news-form { flex-wrap: nowrap; }
  .news-form input { min-width: 0; font-size: 13px; }
  .copyright { font-size: 11px; line-height: 1.9; margin-top: 12px; padding-inline: 6px; }

  /* ---- bottom dock stays out of the way of content ---- */
  .dock__bar { height: 62px; }
  .dock__key { width: 38px; height: 34px; border-radius: 12px; }
  .dock__lbl { font-size: 10.5px; }
  .orb { width: 52px; height: 52px; margin-top: -30px; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 23px; }
  .benefit-obj { width: 34px; height: 34px; }
  .perk-ico { width: 26px; height: 26px; }
  .perk b, .benefit-txt b { font-size: 10px; }
  .grid-products { gap: 8px; }
  .logo-word { font-size: 13px; }
  .hdr-btn { padding: 0 6px; }
}

/* ---- v3 fixes from phone screenshots ---- */
@media (max-width: 640px) {
  /* benefits: icon on top, caption below, no overlap */
  .benefit { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
  .benefit-obj { order: -1; margin: 0 auto !important; transform: none !important; width: 40px !important; height: 40px !important; }
  .benefit:hover .benefit-obj, .benefit:hover .benefit-obj--rocket { transform: none !important; }
  .benefit-txt { order: 2; width: 100%; }
  .benefit-txt b { white-space: normal; font-size: 11px; text-align: center; }

  /* hero laptop scene: centred, not cropped */
  .hero-visual { height: 240px; overflow: hidden; }
  .scene { left: 50%; width: 640px; translate: -50% 0; scale: .5; transform-origin: 50% 0; }
  .float-card, .chip-cube { display: none; }
  .platform, .laptop-wrap { display: block; }

  /* dock: solid enough that content behind it is not visible through it */
  .dock__bar { background: #120d09; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dock { inset-inline: 8px; }
}

/* ---- v4: account menu as a scrollable tab row, clouds back on phones ---- */
@media (max-width: 640px) {
  .acc-side { padding: 10px; position: relative; top: auto; }
  .acc-id { padding-bottom: 8px; margin-bottom: 8px; }
  .acc-nav { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-nav form { flex: none; }
  .acc-nav__item { flex: none; flex-direction: column; justify-content: center; gap: 4px; width: 74px; padding: 8px 4px; text-align: center; font-size: 11px; line-height: 1.4; border: 1px solid var(--line); border-radius: 14px; }
  .acc-nav__item em { position: absolute; margin-inline-start: 0; transform: translate(22px, -22px); }
  .acc-nav__item { position: relative; }
  .acc-nav__ico { width: 34px; height: 34px; }
  .acc-nav__item.is-active { border-color: rgba(255,178,28,.5); }
  .acc-hero { grid-template-columns: 1fr; }
  .acc-cols, .acc-cols--wide, .acc-row { grid-template-columns: minmax(0,1fr); }

  /* clouds: visible again, smaller and softer so they do not cover the text */
  .cloud { display: block; opacity: .45; }
  .cloud--a { width: 170px; left: -70px; bottom: 20px; }
  .cloud--b { width: 150px; right: -30px; top: 30px; }
  .cloud--c { width: 140px; right: -60px; bottom: 40px; }
}
/* v11: compact mobile header and low-cost rendering on phones */
.mobile-header { display:none; }
@media (max-width:640px) {
  .site-header .desktop-header { display:none; }
  .mobile-header { display:flex; direction:rtl; align-items:center; gap:7px; width:100%; min-width:0; height:58px; padding:0 9px; border-radius:17px; background:#15100d; border:1px solid rgba(255,178,28,.28); }
  .mobile-profile { flex:0 0 36px; display:grid; place-items:center; min-height:40px; color:var(--gold); }
  .mobile-header-search { display:block; position:relative; flex:1 1 100px; min-width:0; max-width:none; margin:0; }
  .mobile-header-search input { height:40px; min-width:0; padding-inline:10px 32px; font-size:12px; }
  .mobile-header-search .search-btn { width:30px; height:30px; }
  .mobile-header-search .search-suggest { z-index:180; inset-inline:auto 0; width:min(320px,calc(100vw - 28px)); max-height:min(55vh,360px); }
  .mobile-logo { display:flex; direction:ltr; flex:0 1 auto; align-items:center; gap:2px; min-width:0; color:#fff; font-weight:800; font-size:11px; }
  .mobile-logo .logo-mark { width:29px; height:26px; flex:none; }
  .mobile-logo span:not(.logo-mark) { max-width:65px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-menu-trigger { display:grid; flex:0 0 38px; place-items:center; width:38px; height:40px; padding:0; }
  .bg-glow,.bg-smoke,.light-lines,#particles { display:none !important; }
  .bg-fx { background:radial-gradient(circle at 45% 12%,rgba(255,138,0,.12),transparent 32%); }
  .panel,.header-bar,.mobile-header,.dock__bar,.glass { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .reveal { opacity:1; transform:none; transition:none; }
  .benefits.reveal.in .benefit,.perks.reveal.in .perk { animation:none; }
  .cloud { filter:none; will-change:auto; animation:none !important; }
  .hero-halo { filter:none; opacity:.4; }
  .p-card,.benefit,.wallet-card { transform:none !important; }
  .toasts { left:50% !important; right:auto !important; translate:-50% 0; width:min(92vw,390px); bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
  .toast { width:auto; max-width:100%; justify-content:center; text-align:center; }
}
@media (max-width:360px) { .mobile-logo span:not(.logo-mark) { display:none; } }
.preview-modal { width:min(94vw,760px); max-height:85vh; overflow:auto; }
.preview-images { display:grid; gap:12px; margin-top:16px; }
.preview-images img { width:100%; height:auto; border-radius:12px; object-fit:contain; }

@media (max-width:640px) {
  .scene *, .wallet-card__shine, .ring3d__orbit, .ring3d::after, .p-card::after { animation:none !important; }
  .preview-modal { padding-top:52px; }
}