/* Deshi Drop — bottom bar (6 tabs) + Gallery page */

/* ================= bottom tab bar: six equal columns, comfortable tap targets ================= */
.mobile-tabbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-content: initial; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(20,79,44,.08); }
.mobile-tabbar .tab-item { min-width: 0; min-height: 50px; justify-content: center; gap: 2px; padding: 4px 0 2px; font-size: 10.5px; line-height: 1.15; text-align: center; border-radius: 12px;
  transition: color .25s ease, background-color .25s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.mobile-tabbar .tab-item svg { width: 22px; height: 22px; flex: none; transition: transform .3s cubic-bezier(.2,.9,.3,1.4); }
.mobile-tabbar .tab-item > span:not(.cart-count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-tabbar .tab-item.active { color: var(--fm-accent-dark); background: rgba(28,107,60,.1); }
.mobile-tabbar .tab-item.active svg { transform: translateY(-1px) scale(1.08); }
.mobile-tabbar .tab-item.active::before { top: -6px; left: 28%; right: 28%; }
.mobile-tabbar .tab-item:active { transform: scale(.94); }
.mobile-tabbar .tab-item .cart-count { top: 0; inset-inline-end: 14%; }
body { padding-bottom: 76px; }
@media (max-width: 360px) { .mobile-tabbar .tab-item { font-size: 9.5px; } .mobile-tabbar .tab-item svg { width: 21px; height: 21px; } }

/* ================= Gallery page ================= */
.gal-page { min-height: 100vh; background: linear-gradient(180deg, #e9f5ed 0%, #fff 340px); }
.gal-page[hidden] { display: none; }
.gal-main { max-width: 1180px; margin: 0 auto; padding: 8px 14px 40px; outline: none; }
.gal-hero { text-align: center; padding: 18px 8px 14px; }
.gal-eyebrow { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(28,107,60,.3); color: var(--fm-accent-dark); font: 800 11.5px/1.2 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
:lang(ar) .gal-eyebrow, :lang(bn) .gal-eyebrow { letter-spacing: 0; text-transform: none; }
.gal-hero h1 { margin: 10px 0 6px; font: 800 clamp(30px, 8vw, 46px)/1.1 'Manrope', sans-serif; letter-spacing: -.8px; }
.gal-hero h1::after { content: ""; display: block; width: 64px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--fm-accent), var(--fm-red)); }
.gal-hero p { margin: 10px auto 0; max-width: 520px; color: var(--fm-muted); font-size: 15px; }

.gal-bar { position: sticky; top: 0; z-index: 20; margin: 6px -14px 0; padding: 8px 14px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(28,107,60,.14); display: grid; gap: 8px; }
.gal-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; scroll-snap-type: x proximity; }
.gal-chips::-webkit-scrollbar { display: none; }
.gal-chip { flex: none; scroll-snap-align: start; position: relative; isolation: isolate; overflow: hidden; padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(28,107,60,.35); background: #fff; color: var(--fm-charcoal); font: 700 13px/1 'Inter', sans-serif; cursor: pointer; transition: color .3s ease, transform .2s ease; white-space: nowrap; }
.gal-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--fm-accent) 0%, var(--fm-accent-dark) 100%); transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.gal-chip:hover::before, .gal-chip.on::before { transform: scaleX(1); }
.gal-chip:hover, .gal-chip.on { color: #fff; }
.gal-chip:active { transform: scale(.95); }
.gal-chip em { margin-inline-start: 6px; font-style: normal; font-size: 11px; opacity: .7; }
.gal-tools { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gal-tools::-webkit-scrollbar { display: none; }
.gal-tool { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 12px; border: 1px solid var(--fm-border); background: #fff; color: var(--fm-charcoal); font: 700 12.5px/1 'Inter', sans-serif; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.gal-tool:hover { border-color: var(--fm-accent); color: var(--fm-accent-dark); }
.gal-tool:active { transform: scale(.95); }
.gal-tool[aria-pressed="true"] { background: #fff1f2; border-color: var(--fm-red); color: var(--fm-red); }
.gal-tool[aria-pressed="true"] svg { fill: currentColor; }
.gal-tool em { font-style: normal; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.07); font-size: 11px; }
.gal-add { margin-inline-start: auto; background: var(--fm-accent-dark); border-color: var(--fm-accent-dark); color: #fff; }
.gal-add:hover { background: var(--fm-accent); color: #fff; }
.gal-chip:focus-visible, .gal-tool:focus-visible, .gl-btn:focus-visible, .gl-nav:focus-visible, .gal-card:focus-visible, .gm-go:focus-visible { outline: 3px solid var(--fm-accent-dark); outline-offset: 2px; }
.gal-count { margin: 12px 2px 10px; color: var(--fm-muted); font-size: 13px; font-weight: 600; }

/* masonry (CSS columns) / uniform grid */
.gal-grid { column-count: 2; column-gap: 10px; transition: opacity .2s ease; }
.gal-grid.swap { opacity: 0; }
.gal-grid.is-grid { column-count: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .gal-grid { column-count: 3; column-gap: 14px; } .gal-grid.is-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 980px) { .gal-grid { column-count: 4; } .gal-grid.is-grid { grid-template-columns: repeat(4, 1fr); } }
.gal-card { position: relative; display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #dcefe2, #f3f8f4); cursor: zoom-in; break-inside: avoid; text-align: start; box-shadow: 0 4px 14px rgba(20,79,44,.12); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; -webkit-tap-highlight-color: transparent; }
@media (min-width: 640px) { .gal-card { margin-bottom: 14px; } }
.gal-grid.is-grid .gal-card { margin: 0; aspect-ratio: 1 / 1; }
.gal-card img { display: block; width: 100%; height: auto; opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.gal-grid.is-grid .gal-card img { height: 100%; object-fit: cover; }
.gal-card img.ld { opacity: 1; transform: none; }
.gal-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,79,44,.22); }
.gal-card:hover img.ld { transform: scale(1.05); }
/* before/after: caption slides up over a gradient */
.gal-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(8,32,18,.8)); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.gal-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(255,255,255,.9); transition: box-shadow .3s ease; z-index: 2; pointer-events: none; }
.gal-card:hover::after, .gal-card:focus-visible::after { opacity: 1; }
.gal-card:hover::before { box-shadow: inset 0 0 0 3px rgba(255,255,255,.85); }
.gc-cap { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 10px 12px; color: #fff; font: 700 13px/1.3 'Inter', sans-serif; transform: translateY(14px); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.gal-card:hover .gc-cap, .gal-card:focus-visible .gc-cap { transform: none; opacity: 1; }
@media (hover: none) { .gal-card::after { opacity: .75; inset-block-start: 62%; } .gc-cap { transform: none; opacity: 1; font-size: 12px; } }
.gc-fav { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--fm-charcoal); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .2s ease, color .2s ease; }
.gc-fav:hover { transform: scale(1.12); }
.gc-fav[aria-pressed="true"] { color: var(--fm-red); }
.gc-fav[aria-pressed="true"] svg { fill: currentColor; }
.gc-fav.pop { animation: gcPop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes gcPop { 40% { transform: scale(1.45); } }
.gc-badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; padding: 3px 8px; border-radius: 999px; background: rgba(20,79,44,.92); color: #fff; font: 800 10px/1.3 'Inter', sans-serif; }
.gc-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.gc-play i { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.gc-play svg { margin-inline-start: 3px; color: var(--fm-accent-dark); }
.gal-empty { padding: 56px 20px; text-align: center; color: var(--fm-muted); }
.gal-empty[hidden] { display: none; }
.gal-empty svg { color: var(--fm-accent); margin-bottom: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .gal-card.pre { opacity: 0; transform: translateY(18px) scale(.97); }
  .gal-card.in { animation: galIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
  @keyframes galIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
}

/* ================= viewer ================= */
.gal-lb { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: rgba(6,18,11,.96); color: #fff; touch-action: none; overscroll-behavior: contain; }
.gal-lb[hidden] { display: none; }
.gl-top { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 6px; z-index: 3; }
.gl-count { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font: 700 13px/1 'Inter', sans-serif; }
.gl-actions { display: flex; gap: 4px; }
.gl-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: #fff; cursor: pointer; transition: background-color .2s ease, transform .15s ease; text-decoration: none; }
.gl-btn:hover, .gl-nav:hover { background: rgba(255,255,255,.16); }
.gl-btn:active { transform: scale(.9); }
.gl-btn[aria-pressed="true"] { color: #ff6b78; } .gl-btn[aria-pressed="true"] svg { fill: currentColor; }
.gl-btn[hidden] { display: none; }
#gl-play .i-pause { display: none; } #gl-play.on .i-pause { display: block; } #gl-play.on .i-play { display: none; }
.gl-progress { height: 3px; background: rgba(255,255,255,.14); } .gl-progress[hidden] { display: none; }
.gl-progress i { display: block; height: 100%; width: 100%; background: var(--fm-accent); transform-origin: left; transform: scaleX(0); }
.gl-progress.run i { animation: glRun var(--gl-iv, 3800ms) linear forwards; }
@keyframes glRun { to { transform: scaleX(1); } }
.gl-stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.gl-media { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.gl-media img, .gl-media video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; border-radius: 6px; transform-origin: 0 0; will-change: transform; touch-action: none; cursor: grab; }
.gl-media img.zoomed { cursor: grabbing; }
.gl-media.no-anim img { transition: none; }
.gl-media img { transition: transform .25s ease; }
.gl-media img.dragging { transition: none; }
.gl-nav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; display: none; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background-color .2s ease; }
.gl-prev { left: 12px; } .gl-next { right: 12px; }
@media (hover: hover) and (min-width: 700px) { .gl-nav { display: grid; } }
.gl-info { padding: 8px 18px 6px; text-align: center; }
.gl-info b { display: block; font: 800 17px/1.3 'Manrope', sans-serif; }
.gl-info span { display: block; margin-top: 2px; color: rgba(255,255,255,.78); font-size: 13.5px; line-height: 1.45; }
.gl-info small { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; font-weight: 700; }
.gl-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; justify-content: safe center; }
.gl-thumbs::-webkit-scrollbar { display: none; }
.gl-th { flex: none; width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; opacity: .55; cursor: pointer; background: #1b3326; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; }
.gl-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-th.on { opacity: 1; border-color: #fff; transform: scale(1.06); }
.gl-th:focus-visible { outline: 3px solid #fff; }
@media (prefers-reduced-motion: no-preference) {
  .gal-lb:not([hidden]) { animation: glFade .25s ease-out both; }
  .gl-media.from-next img, .gl-media.from-next video { animation: glNext .35s cubic-bezier(.2,.8,.2,1) both; }
  .gl-media.from-prev img, .gl-media.from-prev video { animation: glPrev .35s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes glFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes glNext { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
  @keyframes glPrev { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
}
::view-transition-group(gimg) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* ================= add-photos modal ================= */
.gal-modal { position: fixed; inset: 0; z-index: 310; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gal-modal[hidden] { display: none; }
@media (min-width: 600px) { .gal-modal { align-items: center; padding: 16px; } }
.gm-card { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: linear-gradient(160deg, #e3f3e8 0%, #fff 45%); box-shadow: 0 -10px 40px rgba(0,0,0,.3); }
@media (min-width: 600px) { .gm-card { border-radius: 24px; } }
.gm-card h2 { margin: 0 0 12px; font: 800 22px/1.2 'Manrope', sans-serif; }
.gm-x { position: absolute; top: 12px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.07); font-size: 22px; line-height: 1; cursor: pointer; }
.gm-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; text-align: center; border: 2px dashed rgba(28,107,60,.5); border-radius: 18px; background: rgba(255,255,255,.7); color: var(--fm-accent-dark); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.gm-drop:hover, .gm-drop.over { background: #fff; border-color: var(--fm-accent-dark); transform: scale(1.01); }
.gm-drop b { color: var(--fm-charcoal); font-size: 14.5px; } .gm-drop small { color: var(--fm-muted); font-size: 12px; }
.gm-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.gm-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.gm-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--fm-border); }
.gm-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.gm-fields { display: grid; gap: 5px; min-width: 0; }
.gm-fields input, .gm-fields select { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--fm-border); border-radius: 9px; font: 500 13px 'Inter', sans-serif; background: #fff; }
.gm-rm { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f4eaea; color: var(--fm-red); cursor: pointer; font-size: 18px; line-height: 1; }
.gm-note { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: #fff8e6; border: 1px solid #f0dca0; color: #6b5311; font-size: 12.5px; line-height: 1.5; }
.gm-go { width: 100%; padding: 14px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--fm-accent), var(--fm-accent-dark)); color: #fff; font: 800 15px/1 'Inter', sans-serif; cursor: pointer; box-shadow: 0 6px 16px rgba(20,79,44,.3); transition: transform .2s ease, opacity .2s ease; }
.gm-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.gm-go:not(:disabled):active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) { .gal-modal:not([hidden]) .gm-card { animation: gmUp .4s cubic-bezier(.2,.9,.25,1.1) both; } @keyframes gmUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } }
.gal-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 400; max-width: 90vw; padding: 10px 18px; border-radius: 999px; background: #17261d; color: #fff; font: 600 13.5px/1.3 'Inter', sans-serif; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.gal-toast.show { opacity: 1; transform: translate(-50%, 0); }
body.gal-open .wa-wrap { display: none; }
body.gal-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gal-card, .gal-card img, .gal-chip::before, .gc-cap { transition: none; } }