/* =====================================================================
   BIZIPLEX — shop.css  (additions ONLY; loads after brands.css, product-pages.css, site.css)
   It never restyles your product cards, engagement bars or buttons. It adds:
   blur-fit for services/flyers, the video icon, the photo gallery + video player, live breadcrumbs,
   search-this-brand, seller card, stay-safe note, the smart bottom contact bar, and the owner forms.
   Uses only existing colour tokens, so dark mode follows automatically.
   ===================================================================== */

/* ---------- services / flyers / odd shapes: whole image over a soft blurred copy ---------- */
.lp-fit-blur { position: relative; overflow: hidden; isolation: isolate; }
.lp-fit-blur::before {
  content: ""; position: absolute; inset: -12%; z-index: 0;
  background: var(--bz-bg) center / cover no-repeat; filter: blur(22px) saturate(1.25); opacity: .85; transform: scale(1.1);
}
.lp-fit-blur > img, .lp-fit-blur > .bz-video { position: relative; z-index: 1; }
.lp-prodcard-imgwrap.lp-fit-blur img, .lp-prodfeed-imgwrap.lp-fit-blur img, .lp-related-card-imgwrap.lp-fit-blur img { object-fit: contain; }
.lp-related-card-imgwrap { position: relative; }
.lp-vid-badge {
  position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; pointer-events: none;
  background: rgba(17,17,17,.68); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.lp-related-card-imgwrap .lp-vid-badge { width: 22px; height: 22px; right: 6px; bottom: 6px; }

/* ---------- live "buttons": breadcrumbs, brand nav ---------- */
.bz-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 0 10px; }
.bz-crumbs i { font-style: normal; color: var(--ink-faint); font-size: 15px; }
.bz-crumb {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; max-width: 100%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); text-decoration: none;
  font: 700 12.5px var(--font-body); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
a.bz-crumb:hover { transform: translateY(-1px); border-color: var(--liyog-green); color: var(--liyog-green-dark); box-shadow: var(--shadow-md); }
a.bz-crumb:active { transform: scale(.96); }
.bz-crumb-now { color: var(--ink); background: var(--surface-soft, var(--bg)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lp-shop-nav-btn-alive { position: relative; }
.lp-shop-nav-btn-alive::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--liyog-green); opacity: 0; animation: bz-ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes bz-ring { 0% { opacity: .55; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.14); } }

/* ---------- search this brand ---------- */
.bz-searchpill {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; margin: 0 0 14px;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-faint);
  font: 600 14px var(--font-body); cursor: text; text-align: left; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bz-searchpill svg { color: var(--liyog-green-dark); flex-shrink: 0; }
.bz-searchpill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-searchpill:hover, .bz-searchpill:focus-visible { border-color: var(--liyog-green); box-shadow: 0 0 0 4px rgba(0,169,79,.12); outline: none; }
.bz-fsearch {
  position: fixed; z-index: 790; right: 12px; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 4px;
  top: calc(var(--bz-header-h) + var(--bz-th-h, 56px) + 10px);
  border: 1px solid rgba(255,215,0,.5); border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.14); color: var(--ink-faint); font: 600 12px var(--font-body);
  opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.bz-fsearch[hidden] { display: none; }
.bz-fsearch.is-on { opacity: 1; transform: none; pointer-events: auto; }
.bz-fsearch-icon {
  position: relative; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #3a2a00;
  background: radial-gradient(circle at 30% 25%, #FFF3B0, #FFD700 55%, #FFA500); animation: bz-glint 2.6s ease-in-out infinite;
}
.bz-fsearch-icon::after { content: "✦"; position: absolute; top: -5px; right: -3px; font-size: 11px; color: #FFD700; animation: bz-twinkle 2.6s ease-in-out infinite; }
@keyframes bz-glint { 0%,100% { box-shadow: 0 0 6px rgba(255,200,0,.55); } 50% { box-shadow: 0 0 18px 4px rgba(255,200,0,.85); } }
@keyframes bz-twinkle { 0%,100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
.bz-fsearch.is-compact .bz-fsearch-text { display: none; }
.bz-fsearch.is-compact { padding-right: 4px; }

/* ---------- gallery (edge to edge, same spot as the original hero) ---------- */
.lp-product-hero-wrap.lp-fit-blur { background: var(--surface-soft, var(--bg)); }
.lp-product-hero-wrap.lp-fit-blur .lp-product-hero-img { position: relative; z-index: 1; }
.lp-product-hero-wrap.bz-gal { cursor: default; position: relative; }
.bz-gal-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  height: clamp(260px, min(100vw, 62vh), 640px); overscroll-behavior-x: contain;
}
.bz-gal-track::-webkit-scrollbar { display: none; }
.bz-gal-track:focus-visible { outline: 3px solid var(--liyog-green); outline-offset: -3px; }
.bz-gal-slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.bz-gal-slide > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bz-gal-slide.bz-gal-video { background: #000; cursor: default; }
.bz-gal-count { position: absolute; top: 12px; right: 12px; z-index: 5; padding: 4px 11px; border-radius: 999px; background: rgba(17,17,17,.66); color: #fff; font: 700 12px var(--font-body); }
.bz-vid-chip {
  position: absolute; top: 12px; left: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 999px;
  background: rgba(17,17,17,.7); color: #fff; font: 800 11.5px var(--font-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bz-gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; display: none;
  align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: #111; cursor: pointer; box-shadow: var(--shadow-md);
}
@media (hover: hover) { .bz-gal-arrow { display: inline-flex; } }
.bz-gal-prev { left: 12px; } .bz-gal-next { right: 12px; }
.bz-gal-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 5; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.bz-gal-dot { pointer-events: auto; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; transition: width .2s, background .2s; position: relative; }
.bz-gal-dot::after { content: ""; position: absolute; inset: -9px -4px; }
.bz-gal-dot.is-active { width: 20px; border-radius: 4px; background: #fff; }
.bz-gal-dot-video { background: #ff3b30; }

/* ---------- video player (tap to play, loads YouTube only on tap) ---------- */
.bz-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; max-height: 100%; }
.bz-video-play, .bz-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #000; cursor: pointer; }
.bz-video-poster { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.bz-video-btn { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,0,0,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.bz-video-fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; background: #111; color: #fff; font-size: 13.5px; }
.bz-video-fail a { color: #7CC7FF; font-weight: 700; }

/* ---------- tags, price conversion, seller card, safety ---------- */
.bz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bz-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 800 11px var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.bz-tag-soft { background: var(--surface-soft, var(--bg)); color: var(--ink-soft); border: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-weight: 700; }
.bz-tag-video { background: rgba(255,59,48,.12); color: #d6281e; }
.lp-product-page-price small, .lp-product-page-price .bz-price-orig { display: block; font: 600 11px var(--font-body); opacity: .85; letter-spacing: 0; }
.bz-seller {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bz-seller:hover { transform: translateY(-2px); border-color: var(--liyog-green); box-shadow: var(--shadow-md); }
.bz-seller img, .bz-seller-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-soft, var(--bg)); }
.bz-seller-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bz-seller-text strong { font: 800 14.5px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-seller-text small { color: var(--ink-soft); font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bz-seller-go { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--liyog-green); color: #fff; font: 800 12.5px var(--font-body); }
.bz-safe { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,185,0,.12); border: 1px solid rgba(255,185,0,.45); }
.bz-safe svg { flex: none; margin-top: 1px; color: #B07A00; }
.bz-safe p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.bz-safe strong { color: var(--ink); }
.bz-row-scroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.bz-row-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .bz-collection-row .lp-related-products-scroll { display: flex; } .bz-collection-row .lp-related-card { flex: 0 0 170px; } }

/* ---------- smart bottom contact bar (phones/tablets only; sits right above the bottom nav) ---------- */
.bz-ctabar { display: none; }
@media (max-width: 819px) {
  .bz-ctabar {
    position: fixed; left: 0; right: 0; z-index: 870; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 8px 10px;
    bottom: calc(var(--bz-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(0,0,0,.09);
    transform: translateY(130%); transition: transform .25s ease; visibility: hidden;
  }
  .bz-ctabar.is-on { transform: none; visibility: visible; }
  .bz-has-ctabar .lp-product-page-body { padding-bottom: 96px; }
}
.bz-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 46px; padding: 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; font: 800 clamp(12px, 3.5vw, 14.5px) var(--font-body); white-space: nowrap; box-shadow: var(--shadow-sm);
}
.bz-cta span { overflow: hidden; text-overflow: ellipsis; }
.bz-cta svg { flex: none; }
.bz-cta-wa { background: linear-gradient(135deg, #2FE87A, #1DA851); }
.bz-cta-call { background: linear-gradient(135deg, #4A9FFF, var(--liyog-blue)); }
.bz-cta-ask { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.bz-cta:active { transform: scale(.97); }

/* ---------- search sheet ---------- */
.bz-ss { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,7,5,.55); }
.bz-ss[hidden] { display: none; }
.bz-ss-card { width: min(100%, 560px); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); animation: lp-sheet-up .25s var(--ease, ease); }
@media (min-width: 640px) { .bz-ss { align-items: flex-start; padding-top: 9vh; } .bz-ss-card { border-radius: 24px; max-height: 78vh; } }
.bz-ss-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; }
.bz-ss-field { flex: 1; position: relative; display: flex; align-items: center; }
.bz-ss-field svg { position: absolute; left: 14px; color: var(--liyog-green-dark); pointer-events: none; }
.bz-ss-field input { width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface-soft, var(--bg)); color: var(--ink); font: 600 15px var(--font-body); }
.bz-ss-field input:focus { outline: none; border-color: var(--liyog-green); box-shadow: 0 0 0 4px rgba(0,169,79,.12); }
.bz-ss-close { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--line); color: var(--ink-soft); cursor: pointer; font-size: 16px; }
.bz-ss-body { overflow-y: auto; padding: 4px 14px 14px; -webkit-overflow-scrolling: touch; }
.bz-ss-label { margin: 12px 2px 6px; font: 800 11px var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.bz-ss-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 14px; background: none; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; font-family: var(--font-body); }
.bz-ss-row:hover, .bz-ss-row:focus-visible { background: var(--surface-soft, var(--bg)); outline: none; }
.bz-ss-thumb { position: relative; width: 54px; height: 54px; flex: none; border-radius: 12px; overflow: hidden; background: var(--surface-soft, var(--bg)); }
.bz-ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-ss-thumb .lp-vid-badge { width: 20px; height: 20px; right: 3px; bottom: 3px; }
.bz-ss-t { min-width: 0; flex: 1; }
.bz-ss-t strong { display: block; font: 700 14px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-ss-t span { font: 700 12.5px var(--font-body); color: var(--liyog-green-dark); }
.bz-ss-t small { color: var(--ink-faint); font-size: 11.5px; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.bz-ss-go { color: var(--ink-faint); font-size: 18px; flex: none; }
.bz-ss-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 2px; font: 700 12.5px var(--font-body); color: var(--ink-soft); }
.bz-ss-pager button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 12.5px var(--font-body); cursor: pointer; }
.bz-ss-pager button:disabled { opacity: .35; cursor: default; }
.bz-ss-empty, .bz-ss-loading { text-align: center; padding: 26px 12px; color: var(--ink-faint); font-size: 13.5px; }
.bz-ss-back { background: none; border: 0; padding: 6px 2px; color: var(--liyog-green-dark); font: 800 13px var(--font-body); cursor: pointer; }
.bz-ss-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-ss-recent button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 12.5px var(--font-body); cursor: pointer; }
.bz-ss-video { margin-top: 10px; border-radius: 16px; overflow: hidden; }

/* ---------- profile page: collection rows (use the normal product cards) ---------- */
.bz-pc { margin: 28px 20px 0; }
.bz-pc-row { margin-bottom: 22px; }
.bz-pc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bz-pc-head h3 { margin: 0; font: 800 17px var(--font-display); color: var(--ink); }
.bz-pc-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 6px; }
.bz-pc-scroll::-webkit-scrollbar { display: none; }
.bz-pc-scroll > .lp-prodcard { flex: 0 0 168px; scroll-snap-align: start; height: auto; }
@media (min-width: 720px) { .bz-pc-scroll > .lp-prodcard { flex-basis: 200px; } }

/* ---------- small shared pieces + owner forms (upload / collections) ---------- */
.bz-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 13px var(--font-body); cursor: pointer; text-decoration: none; }
.bz-pill:hover { border-color: var(--liyog-green); color: var(--liyog-green-dark); }
.bz-pill-quiet { color: var(--ink-soft); }
.bz-linkbtn { background: none; border: 0; padding: 0; color: var(--liyog-green-dark); font: 800 13.5px var(--font-body); cursor: pointer; }
.bz-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 13px var(--font-body); cursor: pointer; }
.bz-chip.is-active { background: var(--liyog-green); border-color: var(--liyog-green); color: #fff; }
.bz-st-seg { display: flex; gap: 8px; margin-bottom: 14px; }
.bz-st-seg button { flex: 1; min-height: 46px; padding: 6px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 700 14px var(--font-body); cursor: pointer; }
.bz-st-seg button small { display: block; font-weight: 600; font-size: 11px; color: var(--ink-faint); }
.bz-st-seg button.is-active { border-color: var(--liyog-green); background: rgba(0,169,79,.1); color: var(--liyog-green-dark); }
.bz-st-row { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.bz-st-row3 { margin-top: 8px; }
.bz-st-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bz-st-slot { position: relative; aspect-ratio: 1; border-radius: 14px; border: 1.5px dashed var(--ink-faint); background: var(--surface-soft, var(--bg)); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; color: var(--ink-faint); font: 700 12px var(--font-body); text-align: center; }
.bz-st-slot img { width: 100%; height: 100%; object-fit: cover; }
.bz-st-slot em { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--liyog-green); color: #fff; font: 800 10px var(--font-body); font-style: normal; }
.bz-st-slot b, .bz-st-slot u { position: absolute; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; }
.bz-st-slot b { right: 6px; } .bz-st-slot u { right: 38px; }
.bz-st-slot.is-busy::after { content: "Uploading…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; }
.bz-st-note { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.45; }
.bz-st-tip { padding: 10px 12px; border-radius: 12px; background: rgba(0,169,79,.08); border: 1px solid rgba(0,169,79,.25); color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; margin-top: 8px; }
.bz-st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-st-newcoll { display: flex; gap: 8px; margin-top: 10px; }
.bz-st-newcoll input { flex: 1; min-width: 0; }
.bz-st-vidprev { margin-top: 8px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.bz-st-vidprev img { width: 96px; border-radius: 10px; }
.bz-st-list { display: flex; flex-direction: column; gap: 8px; }
.bz-st-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bz-st-item img, .bz-st-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-soft, var(--bg)); flex: none; }
.bz-st-t { flex: 1; min-width: 0; } .bz-st-t strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bz-st-t small { color: var(--ink-faint); }
.bz-st-mini { height: 32px; min-width: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 12.5px var(--font-body); cursor: pointer; }
.bz-st-crop { position: fixed; inset: 0; z-index: 1800; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8,7,5,.7); }
.bz-st-crop-card { width: min(100%, 420px); background: var(--surface); border-radius: 22px; padding: 18px; box-shadow: var(--shadow-lg); }
.bz-st-crop-box { width: 100%; max-height: 52vh; margin: 12px auto; border-radius: 14px; overflow: hidden; background: #000; }
.bz-st-crop-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-st-crop-ratios { display: flex; gap: 8px; }
.bz-st-crop-ratios .bz-chip { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .bz-fsearch-icon, .bz-fsearch-icon::after, .lp-shop-nav-btn-alive::after { animation: none; } .bz-ctabar, .bz-fsearch { transition: none; } }

/* =====================================================================
   ROUND 3 — catalogue, collection page, video page, filter, dial, offline
   ===================================================================== */

/* ---- header: brand name and "Brand Profile" share ONE row on every screen ---- */
.lp-shop-topheader-inline .lp-shop-topheader-inner { flex-wrap: nowrap; gap: 10px; }
.lp-shop-topheader-inline .lp-shop-topheader-brand { flex: 1 1 auto; min-width: 0; }
.lp-shop-topheader-inline .lp-shop-topheader-nav { width: auto; margin-left: auto; flex-wrap: nowrap; flex: 0 0 auto; gap: 8px; }
.lp-shop-topheader-inline .lp-shop-nav-btn { white-space: nowrap; min-height: 36px; }
.lp-shop-nav-btn svg { flex-shrink: 0; }
@media (max-width: 559px) { .lp-shop-topheader-inline .lp-shop-theme-toggle { display: none; } .lp-shop-topheader-inline .lp-shop-nav-btn { padding: 8px 12px; } }
@media (max-width: 340px) { .lp-shop-topheader-inline .lp-shop-nav-btn svg { display: none; } }

/* ---- hero tagline + search bar that feels alive ---- */
.bz-tagline { position: relative; padding-left: 12px; border-left: 3px solid var(--liyog-gold); font-size: 15px; }
.bz-toolbar { padding: 6px 0 4px; }
.bz-searchpill-lg { height: 52px; margin: 0; font-size: 15px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, rgba(0,169,79,.55), rgba(255,215,0,.65), rgba(0,169,79,.55)) border-box; border: 1.5px solid transparent; background-size: 100% 100%, 220% 100%; animation: bz-sheen 6s linear infinite; }
@keyframes bz-sheen { 0% { background-position: 0 0, 0% 0; } 100% { background-position: 0 0, 220% 0; } }
.bz-searchpill-lg:hover, .bz-searchpill-lg:focus-visible { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .bz-searchpill-lg { animation: none; } }

/* ---- scrollable filter tabs ---- */
.bz-tabs { display: flex; align-items: center; gap: 8px; margin: 8px -20px 14px; padding: 4px 20px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.bz-tabs::-webkit-scrollbar { display: none; }
.bz-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font: 700 13px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; scroll-snap-align: start; transition: background .15s, color .15s, border-color .15s, transform .12s; }
.bz-tab i { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--surface-soft, var(--bg)); color: var(--ink-faint); }
.bz-tab:hover { border-color: var(--liyog-green); color: var(--liyog-green-dark); }
.bz-tab:active { transform: scale(.96); }
.bz-tab.is-active { background: var(--liyog-green); border-color: var(--liyog-green); color: #fff; }
.bz-tab.is-active i { background: rgba(255,255,255,.25); color: #fff; }
.bz-tab.lp-shop-filter-btn-featured.is-active { background: var(--liyog-gold); border-color: var(--liyog-gold); color: #1a1400; }
.bz-sortgroup { display: contents; }
.bz-sortgroup[hidden] { display: none; }
.bz-tabs-sep { flex: 0 0 1px; height: 22px; background: var(--line); margin: 0 4px; }
.bz-qchip { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); } .bz-qchip a { margin-left: 8px; color: var(--liyog-green-dark); font-weight: 800; text-decoration: none; }

/* ---- grids for the extra views ---- */
.lp-shop-grid.bz-grid-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lp-shop-grid.bz-grid-svc { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
.bz-svc-cell { min-width: 0; }
.bz-ad-slot { grid-column: 1 / -1; min-height: 0; }

/* ---- horizontal strips (collections / videos / services) ---- */
.bz-strip { grid-column: 1 / -1; margin: 6px 0 18px; }
.bz-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bz-strip-head h2 { margin: 0; font: 800 17px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.bz-strip-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (hover: none) { .bz-strip-scroll { scrollbar-width: none; } .bz-strip-scroll::-webkit-scrollbar { display: none; } }
.bz-strip-item { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; }
.bz-strip-item-col { width: min(78vw, 300px); }
.bz-strip-item-vid { width: min(72vw, 270px); }
.bz-strip-item-svc { width: min(66vw, 250px); }
.bz-strip-item-svc .lp-prodcard { height: auto; }
.bz-strip .lp-related-card { flex: 0 0 150px; }

/* ---- service card: its own shape (1:1, 4:5, 16:9) ---- */
.lp-svc-media { aspect-ratio: var(--bz-ar, 1.7778); }
.lp-prodcard.lp-svccard .lp-svc-media img { object-fit: cover; }
.lp-prodcard.lp-svccard .lp-svc-media.lp-fit-blur img { object-fit: contain; }
.bz-svc-tag { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 2px 9px; border-radius: 999px; background: rgba(17,17,17,.7); color: #fff; font: 800 10px var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.lp-prodcard-price small, .lp-prodfeed-price small { display: block; font: 600 10.5px var(--font-body); opacity: .85; letter-spacing: 0; }
.lp-prodcard-price[data-fx-done], .lp-prodfeed-price[data-fx-done] { border-radius: 14px; }

/* ---- collection card (YouTube-playlist feel) ---- */
.bz-colcard { display: block; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s; }
.bz-colcard:hover, .bz-colcard:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--liyog-green); outline: none; }
.bz-colcard-frame { position: relative; }
.bz-colcard-media, .bz-pl-cover { position: relative; aspect-ratio: 16 / 9; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-soft, var(--bg)); }
.bz-colcard-media img, .bz-pl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-colcard-media.lp-fit-blur img, .bz-pl-cover.lp-fit-blur img { object-fit: contain; }
.bz-cover-fallback { background: linear-gradient(135deg, var(--bz-fb, #00A94F), #FFB900); }
.bz-cover-fallback::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 60%); }
.bz-cover-logo { width: 56px !important; height: 56px !important; object-fit: contain !important; position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.bz-colcard-count { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.74); color: #fff; font: 800 11px var(--font-body); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bz-colcard-body { padding: 11px 13px 13px; }
.bz-colcard-body strong { display: block; font: 800 14.5px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-colcard-body p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bz-colcard-view { display: inline-block; margin-top: 8px; color: var(--liyog-green-dark); font: 800 12.5px var(--font-body); }

/* ---- video card ---- */
.bz-vidcard { display: block; color: var(--ink); text-decoration: none; }
.bz-vidcard-media { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: var(--shadow-sm); }
.bz-vidcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.bz-vidcard:hover .bz-vidcard-media img { transform: scale(1.04); }
.bz-vidcard-play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,0,0,.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.bz-vidcard-tag { position: absolute; left: 8px; top: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(17,17,17,.7); color: #fff; font: 800 10px var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.bz-vidcard-body { padding: 8px 2px 0; } .bz-vidcard-body strong { display: block; font: 700 13.5px/1.3 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bz-vidcard-body span { font: 800 12.5px var(--font-body); color: var(--liyog-green-dark); }

/* ---- collection page ---- */
.bz-pl-wrap, .bz-vp-wrap { max-width: 1100px; margin: 0 auto; }
.bz-pl { display: grid; gap: 18px; }
.bz-pl-side { min-width: 0; } .bz-pl-cover { border-radius: 20px; box-shadow: var(--shadow-md); }
.bz-pl-title { margin: 14px 0 6px; font: 800 clamp(22px, 4vw, 30px)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.bz-pl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }
.bz-pl-desc { margin: 10px 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.bz-pl-actions { margin-top: 4px; }
.bz-pl-list { min-width: 0; }
@media (min-width: 900px) { .bz-pl { grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; } .bz-pl-side { position: sticky; top: calc(var(--bz-header-h) + 84px); } }
.bz-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.bz-item:hover, .bz-item:focus-visible { transform: translateY(-1px); border-color: var(--liyog-green); box-shadow: var(--shadow-md); outline: none; }
.bz-item-n { width: 22px; text-align: center; font: 800 12.5px var(--font-body); color: var(--ink-faint); flex: none; }
.bz-item-thumb { position: relative; width: 84px; height: 84px; flex: none; border-radius: 12px; overflow: hidden; background: var(--surface-soft, var(--bg)); }
.bz-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bz-item-thumb.lp-fit-blur img { object-fit: contain; }
.bz-item-thumb .lp-vid-badge { width: 22px; height: 22px; right: 4px; bottom: 4px; }
.bz-item-t { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bz-item-t strong { font: 700 14.5px/1.3 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bz-item-price { font: 800 13px var(--font-body); color: var(--liyog-green-dark); } .bz-item-price small { display: inline; margin-left: 6px; font-weight: 600; opacity: .8; }
.bz-item-t small { font: 700 11px var(--font-body); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }

/* ---- video page ---- */
.bz-vp { display: grid; gap: 22px; }
.bz-vp-player { border-radius: 20px; overflow: hidden; background: #000; box-shadow: var(--shadow-md); }
.bz-vp-player .bz-video { max-height: none; }
.bz-rail-title { margin: 0 0 12px; font: 800 16px var(--font-display); color: var(--ink); }
.bz-vp-related { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (min-width: 980px) { .bz-vp { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; } .bz-vp-related { grid-template-columns: 1fr; } }
.bz-btn-link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; margin: 4px 0 10px; border-radius: 999px; background: var(--liyog-green); color: #fff; font: 800 14px var(--font-body); text-decoration: none; }
.bz-btn-link:hover { filter: brightness(1.07); }

/* ---- floating filter button + sheet ---- */
.bz-ffilter { position: fixed; z-index: 790; left: 12px; top: calc(var(--bz-header-h) + var(--bz-th-h, 56px) + 10px); display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: 800 12.5px var(--font-body); box-shadow: 0 6px 20px rgba(0,0,0,.14); cursor: pointer; opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none; transition: opacity .25s, transform .25s; }
.bz-ffilter[hidden] { display: none; } .bz-ffilter.is-on { opacity: 1; transform: none; pointer-events: auto; } .bz-ffilter svg { color: var(--liyog-green-dark); }
.bz-ss-row.is-on strong { color: var(--liyog-green-dark); }
.bz-ss-seeall { display: block; text-align: center; padding: 10px; font: 800 13px var(--font-body); color: var(--liyog-green-dark); text-decoration: none; }

/* ---- contact dial (WhatsApp / Call / SMS / Inquiry) ---- */
.bz-dial { position: fixed; z-index: 1450; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; animation: lp-ad-in .22s ease both; }
.bz-dial-i { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: 800 13.5px var(--font-body); text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.2); border: 1px solid var(--line); }
.bz-dial-ic { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.bz-dial-wa .bz-dial-ic { background: linear-gradient(135deg, #2FE87A, #1DA851); } .bz-dial-call .bz-dial-ic { background: linear-gradient(135deg, #4A9FFF, var(--liyog-blue)); } .bz-dial-sms .bz-dial-ic { background: linear-gradient(135deg, #8B7BFF, var(--liyog-indigo)); } .bz-dial-ask .bz-dial-ic { background: linear-gradient(135deg, #FFB900, #FF7A00); }
.bz-dial-i:hover, .bz-dial-i:focus-visible { transform: translateX(-2px); outline: none; border-color: var(--liyog-green); }

/* ---- loading skeletons, navigation state, connection banner ---- */
.bz-skel { background: linear-gradient(90deg, var(--line) 25%, var(--surface-soft, var(--bg)) 50%, var(--line) 75%); background-size: 200% 100%; animation: lp-sk-shimmer 1.4s ease-in-out infinite; border-radius: 16px; }
.bz-skel-card { width: 200px; height: 190px; }
html.bz-navigating body::before { content: ""; position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 3000; background: linear-gradient(90deg, var(--liyog-gold), var(--liyog-green)); transform-origin: left; animation: bz-bar 1.1s ease-in-out infinite; }
@keyframes bz-bar { 0% { transform: scaleX(.05); } 60% { transform: scaleX(.8); } 100% { transform: scaleX(.95); } }
html.bz-navigating #lp-shop-grid, html.bz-navigating .bz-strip { opacity: .45; transition: opacity .2s; pointer-events: none; }
.bz-net { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bz-bottomnav-h) + 76px + env(safe-area-inset-bottom, 0px)); z-index: 3100; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px); padding: 11px 14px; border-radius: 16px; font: 700 13px var(--font-body); box-shadow: var(--shadow-lg); }
@media (min-width: 820px) { .bz-net { bottom: 22px; } }
.bz-net-off { background: #3b2a00; color: #FFE9A8; } .bz-net-on { background: var(--liyog-green-dark); color: #fff; }
.bz-net button { flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.2); color: inherit; font: 800 12.5px var(--font-body); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .bz-skel, html.bz-navigating body::before, .bz-dial { animation: none; } }

/* rows dropped into the grid while scrolling must span the full width */
.bz-row-host { grid-column: 1 / -1; margin: 8px 0 14px; }
.bz-row-host[hidden] { display: none; }
.lp-shop-grid > .lp-section { grid-column: 1 / -1; }
.lp-shop-grid > .bz-svc-cell { min-width: 0; }