/* =====================================================================================================
   Divaar.pk — phone layout pass (Oct 23 2026). Loaded LAST on every shop page (home, category, type,
   product, guides, policies) by lib/site.mjs. Only touches the Design 2.0 shop (html.fx), so Version Zero
   is unchanged, and (apart from the first block) only phones and small tablets.
   ===================================================================================================== */

/* all sizes: the photo arrows sit on a white pill, so their icon must stay dark — on dark photos the
   gallery switches its text to white and the arrows used to disappear (white on white) */
html.fx .pd-gallery .pd-prev, html.fx .pd-gallery .pd-next { color: #14161E !important; }

@media (max-width: 760px) {
  /* nothing may ever push the page sideways */
  html.fx, html.fx body { overflow-x: clip; }
  html.fx img, html.fx video { max-width: 100%; }

  /* the floating bag button: respects the phone's home bar, and the page ends with room for it,
     so the last buttons (Send request, footer links) are never stuck under it */
  html.fx .fx-fab { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); width: 54px; height: 54px; }
  html.fx .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  html.fx .custom { scroll-margin-top: 12px; }

  /* breadcrumbs: one tidy line; the current page's long name is shortened with "…" */
  html.fx .seo-crumbs ol { flex-wrap: nowrap; align-items: center; overflow: hidden; margin-bottom: 14px; }
  html.fx .seo-crumbs li { flex: none; min-width: 0; }
  html.fx .seo-crumbs li:last-child { flex: 0 1 auto; overflow: hidden; }
  /* with four or more steps the last one (this page's own name) is the big title right below — leave it out */
  html.fx .seo-crumbs li:last-child:nth-child(n+4) { display: none; }
  html.fx .seo-crumbs li:last-child > * { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* "Try our lamp": the lamp choices are real buttons, big enough for a thumb, scroll sideways if many */
  html.fx .lt-pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: -4px; padding-bottom: 2px; }
  html.fx .lt-pick::-webkit-scrollbar { display: none; }
  html.fx .lt-opt { flex: none; min-height: 40px; max-width: 72vw; }

  /* small links that are tapped a lot get a comfortable height */
  html.fx .blog-read, html.fx .bp-rail-more { display: inline-flex; align-items: center; min-height: 36px; }

  /* ---------- guides ---------- */
  /* the English / اردو switch: sits at the top of the guide instead of floating over the text */
  html.fx .bp-lang { position: static; transform: none; animation: none; width: max-content; margin: 0 0 12px auto; padding: 4px; box-shadow: 0 6px 18px -10px rgba(20,22,30,.35); }
  html.fx .bp-lang-ic { width: 26px; }
  html.fx .bp-lang-opt { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
  html.fx [dir="rtl"] > .bp-lang { margin: 0 auto 12px 0; }
  /* tables: keep columns readable and scroll sideways, with a soft edge showing there is more */
  html.fx .blog-table { position: relative;
    background: linear-gradient(90deg, var(--fx-page, #fff) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat local,
                linear-gradient(270deg, var(--fx-page, #fff) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
                radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) left / 12px 100% no-repeat scroll,
                radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) right / 12px 100% no-repeat scroll; }
  html.fx .blog-table table { width: max-content; min-width: 100%; background: transparent; }
  html.fx .blog-table th, html.fx .blog-table td { min-width: 120px; max-width: 220px; white-space: normal; }

  /* policy & receipt pages: the header button never pushes past the edge */
  html.fx .page-top .bar { gap: 10px; }
  html.fx .page-top .bar .btn-sm { flex: none; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
  html.fx .page-top .bar .brand { min-width: 0; }
}

/* ---------- grids of products (category & type pages, "More in…", View all): two per row ----------
   One card filled a whole phone screen; two per row lets people compare pieces. The card keeps the
   same design (photo, neon band, glass panel) in a compact size. */
@media (max-width: 560px) {
  html.fx .seo-tiles, html.fx .view-page .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 10px !important; }
  html.fx .seo-tiles > .fx-card { max-width: none; justify-self: stretch; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card { --tag-h: 46px; --fl: 16px; --ss: 8px; border-radius: 20px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .card-media { border-radius: 20px 20px 16px 16px !important; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .card-flag { top: 8px; left: 8px; padding: 4px 8px; font-size: 11px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .card-flag.in-bag-flag, html.fx :is(.seo-tiles, .vp-grid) > .fx-card .in-bag { font-size: 11px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-tag { min-height: 46px; margin-top: -23px !important; padding-left: 10px; padding-right: 6px; gap: 6px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-tag-txt { font-size: 11px; line-height: 1.25; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-plus { width: 36px; height: 36px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-plus svg { width: 16px; height: 16px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-body { padding: 12px 10px 12px 12px; gap: 10px; border-radius: 0 0 20px 20px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-sw { display: none; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-name { padding: 0; min-height: calc(2 * 1.2em + 2px); }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-name b { font-size: 14.5px !important; line-height: 1.2; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-name span { font-size: 13px; line-height: 1.25; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-row { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .price-now { font-size: 16px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .price-was { font-size: 12px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card .fx-buy { width: 100%; height: 40px; padding: 0 8px; font-size: 13.5px; }
  html.fx :is(.seo-tiles, .vp-grid) > .fx-card:hover { transform: none; }
}
/* very narrow phones (old / small Android): one card per row again, not squeezed */
@media (max-width: 339px) {
  html.fx .seo-tiles, html.fx .view-page .vp-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
/* phones held sideways: three per row instead of two big ones */
@media (min-width: 561px) and (max-width: 900px) and (orientation: landscape) {
  html.fx .seo-tiles, html.fx .view-page .vp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px 14px !important; }
}

@media (max-width: 360px) {
  html.fx .nav { padding: 0 8px 0 10px; gap: 6px; }
  html.fx .brand-name { font-size: 18px; }
  html.fx .fx-search, html.fx #cartBtn, html.fx .menu-btn { width: 44px !important; height: 44px !important; }
  html.fx .hero h1, html.fx .hero #heroTitle { font-size: clamp(32px, 11vw, 44px) !important; }
  html.fx .section-head h2, html.fx body :is(#wallart, #lamps, #more) .section-head h2 { font-size: 34px !important; }
  html.fx .perk { padding: 16px; }
}

/* ---------- Oct 23, round 2 ---------- */

/* pop-ups scroll on their own; the page behind never moves (store.js pins the page while one is open) */
html.fx dialog, html.fx dialog .sheet, html.fx #pdScroll { overscroll-behavior: contain; }
@media (max-width: 900px) {
  html.fx.dv-locked { overflow: hidden; }
  html.fx.dv-locked body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
}

@media (max-width: 560px) {
  /* guides ("Ideas & guides", "Helpful guides"): two compact cards per row instead of one per screen;
     an odd last card lies across the full row (photo left, text right) */
  html.fx .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 10px !important; }
  html.fx .gd-grid > .gd-card { border-radius: 20px; }
  html.fx .gd-grid .gd-img { aspect-ratio: 4 / 3; }
  html.fx .gd-grid .gd-txt { gap: 4px; padding: 10px 12px 12px; flex: 1; }
  html.fx .gd-grid .gd-txt small { font-size: 10px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.fx .gd-grid .gd-txt b { font-size: 14px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html.fx .gd-grid .gd-txt > span { display: none; }
  html.fx .gd-grid .gd-txt em { font-size: 11.5px; margin-top: auto; padding-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.fx .gd-grid > .gd-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  html.fx .gd-grid > .gd-card:last-child:nth-child(odd) .gd-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 120px; }
  html.fx .gd-grid > .gd-card:last-child:nth-child(odd) .gd-txt > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; }
  html.fx .gd-grid .gd-card:hover { transform: none; }
}
@media (max-width: 339px) {
  html.fx .gd-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html.fx .gd-grid > .gd-card:last-child:nth-child(odd) { flex-direction: column; }
  html.fx .gd-grid > .gd-card:last-child:nth-child(odd) .gd-img { flex: none; aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
  /* custom-order form: folded to ~60% of the screen with a fade and one button; any tap opens it all */
  html.fx .custom-form { position: relative; }
  html.fx .custom-form .cf-more { display: none; }
  html.fx .custom-form.cf-fold { max-height: 60vh; max-height: 60svh; overflow: hidden; }
  html.fx .custom-form.cf-fold .cf-more { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; justify-content: center; align-items: flex-end;
    height: 46%; padding: 0 22px 22px; border-radius: 0 0 24px 24px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.88) 45%, #fff 75%); }
  html.fx .custom-form.cf-fold .cf-open { width: 100%; min-height: 52px; justify-content: center; gap: 8px; box-shadow: 0 12px 30px -14px rgba(20,22,30,.55); }
  html.fx .custom-form.cf-fold .cf-open svg { width: 18px; height: 18px; }

  /* "Try our lamp": the whole box ≈ 70% of the phone screen — shorter photo, tighter text and switch */
  html.fx .lamptry { padding-top: 28px !important; padding-bottom: 20px !important; }
  html.fx .lamptry .lt-wrap { border-radius: 28px !important; }
  html.fx .lamptry .lt-stage { aspect-ratio: auto !important; height: clamp(130px, calc(70vh - 350px), 340px) !important; height: clamp(130px, calc(70svh - 350px), 340px) !important; max-height: none !important; min-height: 0 !important; }
  html.fx .lamptry .lt-copy { gap: 8px !important; padding: 14px 16px 16px !important; }
  html.fx .lamptry .lt-kicker { font-size: 10.5px; padding: 4px 10px; }
  html.fx .lamptry .lt-copy h2 { font-size: 24px !important; line-height: 1; }
  html.fx .lamptry .lt-text { font-size: 13.5px !important; line-height: 1.35; }
  html.fx .lamptry .lt-opt { min-height: 36px; font-size: 12.5px; }
  html.fx .lamptry .lt-opt img { width: 26px; height: 26px; }
  html.fx .lamptry .lt-control { gap: 12px; padding: 8px 12px 8px 8px !important; border-radius: 20px; margin-top: 2px !important; }
  html.fx .lamptry .lt-board { width: 58px !important; height: 80px !important; border-radius: 14px !important; }
  html.fx .lamptry .lt-board .lt-plate { width: 40px !important; height: 56px !important; padding: 4px !important; border-radius: 10px !important; }
  html.fx .lamptry .lt-board .lt-lbl { font-size: 7.5px !important; }
  html.fx .lamptry .lt-screw.t { top: 4px; } html.fx .lamptry .lt-screw.b { bottom: 4px; }
  html.fx .lamptry .lt-led { right: 7px; top: 7px; }
  html.fx .lamptry .lt-state { padding: 3px 10px !important; font-size: 11px !important; }
  html.fx .lamptry .lt-hint { font-size: 12.5px !important; }
  html.fx .lamptry #ltShop { min-height: 44px; font-size: 14px; }
}