/* ===========================================================================
   HOMESARA THEME — page-gallery.css
   Shared by all 10 original gallery pages (curtain/sofa/headboard/blinds/
   wallpaper/cushions/flooring/mattress/wall-panel/rugs) — confirmed
   byte-identical across all 10 source files (md5 62650ff613309be274fcae
   584243cb82), so no reconciliation was needed. Extracted verbatim from
   legacy/curtain-gallery.css.
   =========================================================================== */

html{scroll-behavior:smooth;}

button,input{font-family:inherit;}

.section{padding:56px 0;}

.cpt-tag{display:inline-block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--brown-800);background:var(--white);border:1px solid var(--line);border-radius:20px;padding:5px 12px;margin-bottom:12px;}

.topbar{background:var(--topbar);border-bottom:1px solid var(--line);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;font-size:12.5px;color:var(--brown-800);}
.topbar .left{display:flex;gap:26px;align-items:center;}
.topbar .item{display:flex;align-items:center;gap:6px;font-weight:500;}
.topbar .icon{width:14px;height:14px;color:var(--gold-dark);}

header.main{border-bottom:1px solid var(--line);background:var(--white);}
.header-inner{display:flex;align-items:center;gap:34px;padding-top:18px;padding-bottom:18px;}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo-mark{width:46px;height:46px;flex-shrink:0;}
.logo-text{line-height:1;}
.logo-text .tag{display:block;font-size:10.5px;letter-spacing:5px;color:var(--gold-dark);margin-top:3px;font-weight:600;}
.search-bar{flex:1;display:flex;max-width:560px;border:1.5px solid var(--line);border-radius:3px;overflow:hidden;position:relative;}
.search-bar input{border:none;outline:none;flex:1;padding:12px 16px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--cream);}
.search-bar input::placeholder{color:var(--muted);}
.search-bar button{background:var(--brown-800);border:none;padding:0 20px;color:var(--white);cursor:pointer;}
.header-actions{display:flex;align-items:center;gap:28px;margin-left:auto;flex-shrink:0;}
.header-actions .action{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--brown-900);font-weight:500;text-decoration:none;}
.header-actions .action .icon{color:var(--gold-dark);width:20px;height:20px;}
.header-actions .action .lbl small{display:block;color:var(--muted);font-weight:400;font-size:11px;}
.header-actions .action .lbl b{font-weight:600;font-size:13px;}

nav.catnav{background:var(--white);border-bottom:1px solid var(--line);}
.catnav-inner{display:flex;align-items:center;gap:34px;height:52px;position:relative;}
.all-cat{background:var(--brown-900);color:var(--white);height:34px;padding:0 16px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;border-radius:2px;white-space:nowrap;cursor:pointer;}
.all-cat .care{transition:transform .2s ease;}
.all-cat.open .care{transform:rotate(180deg);}
.catnav-links{display:flex;gap:30px;flex:1;}
.catnav-links a{font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;}
.catnav-links a:hover{color:var(--gold-dark);}
.catnav-links a.current{color:var(--gold-dark);font-weight:700;}
.catnav-links a.sale{color:var(--red);font-weight:600;}
.mobile-menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;background:var(--cream-2);border:none;border-radius:4px;color:var(--brown-900);margin-left:auto;flex-shrink:0;}
.all-cat-panel{display:none;position:absolute;top:calc(100% + 10px);left:0;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 45px rgba(20,14,8,.18);padding:10px;min-width:260px;z-index:80;grid-template-columns:1fr 1fr;gap:2px;}
.all-cat-panel.open{display:grid;}
.all-cat-panel a{padding:10px 12px;font-size:13px;font-weight:500;color:var(--ink);border-radius:5px;white-space:nowrap;}
.all-cat-panel a:hover{background:var(--cream-2);color:var(--gold-dark);}
.all-cat-panel a.view-all-link{grid-column:1/-1;border-top:1px solid var(--line);margin-top:4px;padding-top:12px;font-weight:700;color:var(--brown-800);}
.all-cat-panel a.sale{color:var(--red);font-weight:700;}
@media (max-width:640px){ .all-cat-panel{grid-template-columns:1fr;left:-6px;right:-6px;min-width:0;} }
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;}
.nav-dropdown-trigger:hover{color:var(--gold-dark);}
.nav-dropdown-trigger .care{width:11px;height:11px;transition:transform .2s ease;}
.nav-dropdown.open .nav-dropdown-trigger .care{transform:rotate(180deg);}
.nav-dropdown-panel{display:none;position:absolute;top:calc(100% + 10px);left:0;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 45px rgba(20,14,8,.18);padding:8px;min-width:190px;z-index:80;}
.nav-dropdown.open .nav-dropdown-panel{display:block;}
.nav-dropdown-panel a{display:block;padding:10px 14px;font-size:13px;font-weight:500;color:var(--ink);border-radius:5px;white-space:nowrap;}
.nav-dropdown-panel a:hover{background:var(--cream-2);color:var(--gold-dark);}
.action.wishlist-action{position:relative;}
.wishlist-panel{display:none;position:absolute;top:calc(100% + 14px);right:0;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 45px rgba(20,14,8,.18);padding:14px;min-width:230px;z-index:80;font-size:12.5px;color:var(--ink);}
.wishlist-panel.open{display:block;}
.wishlist-panel .wl-empty{color:var(--muted);line-height:1.6;}
.wishlist-panel .wl-empty a{color:var(--gold-dark);font-weight:600;}
.wishlist-panel .wl-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);}
.wishlist-panel .wl-item:last-child{border-bottom:none;}
.wishlist-panel .wl-item button{background:none;border:none;color:var(--muted);font-size:15px;line-height:1;padding:0 2px;}
.wishlist-panel .wl-item button:hover{color:var(--red);}
.wishlist-panel .wl-title{font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--brown-800);margin-bottom:10px;}
#toastWrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast-msg{background:var(--brown-900);color:var(--white);padding:12px 20px;border-radius:30px;font-size:13px;font-weight:500;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;max-width:88vw;text-align:center;}
.toast-msg.show{opacity:1;transform:translateY(0);}

.page-hero{background:var(--cream-2);}
.page-hero-inner{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;padding:44px 0 0;}
.page-hero h1{font-size:34px;margin:0 0 12px;color:var(--ink);}
.page-hero p{font-size:14px;color:var(--muted);max-width:430px;margin:0 0 20px;line-height:1.7;}
.breadcrumb{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;padding-bottom:36px;}
.breadcrumb a{color:var(--brown-800);font-weight:600;}
.page-hero-img{border-radius:8px 8px 0 0;overflow:hidden;height:260px;align-self:end;}
.page-hero-img img{width:100%;height:100%;object-fit:cover;}

.stats-card2{background:var(--white);border-radius:8px;box-shadow:0 20px 45px rgba(58,42,28,.14);padding:28px 10px;margin:-46px auto 0;max-width:1160px;position:relative;z-index:4;overflow:hidden;}
.stats-card2 .stat{display:flex;align-items:center;gap:13px;position:relative;padding:0 8px;}
.stats-card2 .stat:not(:last-child)::after{content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;background:var(--line);display:none;}
@media (min-width:901px){.stats-card2 .stat:not(:last-child)::after{display:block;}}
.stats-card2 .stat .circ{width:46px;height:46px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stats-card2 .stat .circ svg{width:21px;height:21px;color:var(--brown-800);}
.stats-card2 .stat b{display:block;font-size:13px;color:var(--ink);font-weight:600;line-height:1.3;}
.stats-card2 .stat span{font-size:11px;color:var(--muted);}

footer{background:#fbf9f5;border-top:1px solid var(--line);padding-top:56px;}
.foot-grid{display:grid;grid-template-columns:1.4fr .9fr 1fr 1fr 1.3fr;gap:26px;padding-bottom:40px;}
.foot-grid h5{font-size:12.5px;letter-spacing:1px;font-weight:600;color:var(--ink);margin:0 0 18px;text-transform:uppercase;}
.foot-grid p{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0 0 18px;max-width:220px;}
.foot-grid ul li{margin-bottom:11px;font-size:12.5px;color:var(--muted);}
.foot-bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);flex-wrap:wrap;gap:8px;}

.whatsapp-fab{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.22);z-index:50;}
.whatsapp-fab svg{width:28px;height:28px;color:var(--white);}

@media (max-width:960px){
  .wrap{padding:0 18px;}
  .header-inner{flex-wrap:wrap;gap:14px;padding-top:14px;padding-bottom:14px;justify-content:space-between;}
  .search-bar{order:3;flex:1 1 100%;max-width:100%;}
  .header-actions .action .lbl{display:none;}
  .mobile-menu-btn{display:flex;}
  .catnav-inner{position:relative;flex-wrap:nowrap;}
  .catnav-links{display:none;position:absolute;top:calc(100% + 1px);left:-18px;right:-18px;flex-direction:column;gap:0;background:var(--white);border-top:1px solid var(--line);box-shadow:0 16px 30px rgba(0,0,0,.12);z-index:60;max-height:70vh;overflow-y:auto;}
  .catnav-links.open{display:flex;}
  .catnav-links a{padding:14px 22px;border-bottom:1px solid var(--line);}
  .page-hero-inner{grid-template-columns:1fr;}
  .page-hero-img{height:200px;order:-1;}
  .stats-card2{padding:24px 16px;margin-top:-30px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
/* ============ REAL Smart Gallery Pro CSS, copied verbatim from wp-content/plugins/sgp-v2-modified/public/css/sgp-public.css ============ */
/* Smart Gallery Pro - Frontend v6 — All Fixes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Scroll lock ── */
html.sgp-no-scroll,
body.sgp-no-scroll { overflow: hidden !important; }

/* ════════════════════════════════════════════
   WRAPPER
   ════════════════════════════════════════════ */
.sgp-gallery-wrap {
    font-family: 'Inter', sans-serif !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.sgp-gallery-wrap *,
.sgp-gallery-wrap *::before,
.sgp-gallery-wrap *::after {
    box-sizing: border-box !important;
}

/* ── Hide header/title ── */
.sgp-gallery-wrap .sgp-gallery-header {
    display: none !important;
}
/* Hide filter bar ONLY when the topbar is NOT active */
.sgp-gallery-wrap .sgp-filter-bar:not(.sgp-topbar-active),
.sgp-filter-bar:not(.sgp-topbar-active) {
    display: none !important;
}

/* ════════════════════════════════════════════
   GRID — columns driven by --sgp-cols
   ════════════════════════════════════════════ */
.sgp-gallery-wrap .sgp-grid {
    --sgp-cols: 4;
    display: grid !important;
    grid-template-columns: repeat(var(--sgp-cols), 1fr) !important;
    grid-auto-rows: 240px !important;
    grid-auto-flow: dense !important;
    gap: 20px !important;
    width: 100% !important;
}

/* ── Masonry layout: bento spans ── */
.sgp-gallery-wrap .sgp-grid.sgp-layout-masonry .sgp-item.sgp-col-2 {
    grid-column: span 2 !important;
}
.sgp-gallery-wrap .sgp-grid.sgp-layout-masonry .sgp-item.sgp-row-2 {
    grid-row: span 2 !important;
}

/* ── Uniform grid: all cells equal, no spans ── */
.sgp-gallery-wrap .sgp-grid.sgp-layout-grid .sgp-item.sgp-col-2,
.sgp-gallery-wrap .sgp-grid.sgp-layout-grid .sgp-item.sgp-row-2 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
}

/* ══════════════════════════════════════════════
   JUSTIFIED ROW LAYOUT
   Images sized proportionally to their aspect ratio,
   filling rows edge-to-edge like Flickr/500px/Erik Johansson.
   Each image shows fully — no cropping.
   ══════════════════════════════════════════════ */
.sgp-gallery-wrap .sgp-grid.sgp-layout-justified {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    /* Override CSS grid properties */
    grid-template-columns: none !important;
    grid-auto-rows: unset !important;
    grid-auto-flow: unset !important;
}
.sgp-gallery-wrap .sgp-grid.sgp-layout-justified .sgp-item {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    background: #e8e8e8 !important;
    /* flex-grow is set dynamically via JS based on aspect ratio */
}
.sgp-gallery-wrap .sgp-grid.sgp-layout-justified .sgp-item .sgp-item-inner {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.sgp-gallery-wrap .sgp-grid.sgp-layout-justified .sgp-item .sgp-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    transition: transform 0.42s cubic-bezier(0.4,0,0.2,1) !important;
}
.sgp-gallery-wrap .sgp-grid.sgp-layout-justified .sgp-item:not(.sgp-item-video):hover .sgp-thumb {
    transform: scale(1.06) !important;
}
/* Kill bento spans in justified layout */
.sgp-gallery-wrap .sgp-grid.sgp-layout-justified .sgp-item.sgp-col-2,
.sgp-gallery-wrap .sgp-grid.sgp-layout-justified .sgp-item.sgp-row-2 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
}

/* Item */
.sgp-gallery-wrap .sgp-item {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    background: #e8e8e8 !important;
    min-height: 0 !important;
}
.sgp-gallery-wrap .sgp-item.sgp-hidden {
    display: none !important;
}

.sgp-gallery-wrap .sgp-item-inner {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.sgp-gallery-wrap .sgp-media-wrap {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
}

/* Image fills cell */
.sgp-gallery-wrap .sgp-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.42s cubic-bezier(0.4,0,0.2,1) !important;
}
.sgp-gallery-wrap .sgp-item:not(.sgp-item-video):hover .sgp-thumb {
    transform: scale(1.06) !important;
}

/* Serial badge */
.sgp-gallery-wrap .sgp-serial-badge {
    position: absolute !important;
    top: 10px !important; left: 10px !important; z-index: 5 !important;
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important; font-size: 10px !important;
    font-weight: 700 !important; padding: 4px 9px !important;
    border-radius: 6px !important; letter-spacing: 0.6px !important;
    backdrop-filter: blur(6px) !important;
    pointer-events: none !important; line-height: 1 !important;
}

/* ════════════════════════════════════════════
   VIDEO ITEM
   ════════════════════════════════════════════ */

/* Dark bg fallback (when no thumbnail) */
.sgp-gallery-wrap .sgp-video-no-thumb {
    position: absolute !important;
    inset: 0 !important;
    background: #1a1a2e !important;
    z-index: 0 !important;
}

/* Thumbnail — always visible by default */
.sgp-gallery-wrap .sgp-video-thumb-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    z-index: 1 !important;
    opacity: 1 !important;
    transition: opacity 0.35s ease, transform 0.42s cubic-bezier(0.4,0,0.2,1) !important;
}
.sgp-gallery-wrap .sgp-item-video:hover .sgp-video-thumb-img {
    transform: scale(1.04) !important;
}

/* Video element — hidden until hover */
.sgp-gallery-wrap .sgp-hover-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

/* Play icon — centered, above thumbnail, below overlay */
.sgp-gallery-wrap .sgp-play-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition: opacity 0.25s ease !important;
}
.sgp-gallery-wrap .sgp-play-icon-inner {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.92) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.4) !important;
    transition: transform 0.22s ease !important;
    flex-shrink: 0 !important;
}
.sgp-gallery-wrap .sgp-play-icon-inner svg {
    width: 22px !important;
    height: 22px !important;
    margin-left: 4px !important;
    display: block !important;
}
.sgp-gallery-wrap .sgp-item-video:hover .sgp-play-icon-inner {
    transform: scale(1.12) !important;
}

/* ════════════════════════════════════════════
   HOVER OVERLAY
   ════════════════════════════════════════════ */
.sgp-gallery-wrap .sgp-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 6 !important;
    background: rgba(0,0,0,0) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: background 0.28s, opacity 0.28s !important;
}
.sgp-gallery-wrap .sgp-item:not(.sgp-item-video):hover .sgp-overlay {
    background: rgba(0,0,0,0.3) !important;
    opacity: 1 !important;
}
.sgp-gallery-wrap .sgp-item-video:hover .sgp-overlay {
    background: rgba(0,0,0,0.12) !important;
    opacity: 1 !important;
}

.sgp-gallery-wrap .sgp-lightbox-btn {
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
    color: #fff !important; cursor: pointer !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
    transform: scale(0.8) !important;
    transition: transform 0.2s, background 0.2s !important;
    padding: 0 !important;
}
.sgp-gallery-wrap .sgp-item:hover .sgp-lightbox-btn {
    transform: scale(1) !important;
}
.sgp-gallery-wrap .sgp-lightbox-btn:hover {
    background: #e8e8e8 !important; color: #111 !important;
    transform: scale(1.1) !important;
}
.sgp-gallery-wrap .sgp-lightbox-btn svg {
    width: 18px !important; height: 18px !important;
    pointer-events: none !important; display: block !important;
}

/* Empty state */
.sgp-gallery-wrap .sgp-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important; padding: 80px 20px !important;
    color: #bbb !important; font-size: 14px !important;
}

/* ════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════ */
#sgp-lightbox-global {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.22s ease, visibility 0.22s ease !important;
    pointer-events: none !important;
}
#sgp-lightbox-global.sgp-active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}
#sgp-lightbox-global .sgp-lb-bg {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,0.93) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    cursor: pointer !important;
}
#sgp-lightbox-global .sgp-lb-stage {
    position: relative !important; z-index: 2 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important;
    max-width: 90vw !important;
    animation: sgpLbPop 0.26s cubic-bezier(0.34,1.4,0.64,1) both !important;
}
#sgp-lightbox-global:not(.sgp-active) .sgp-lb-stage {
    animation: none !important;
}
@keyframes sgpLbPop {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
#sgp-lightbox-global .sgp-lb-media-wrap {
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    max-width: 90vw !important; max-height: 82vh !important;
    overflow: hidden !important; border-radius: 12px !important;
    line-height: 0 !important;
}
#sgp-lightbox-global .sgp-lb-media-wrap img {
    display: block !important;
    max-width: 90vw !important; max-height: 82vh !important;
    width: auto !important; height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7) !important;
}
#sgp-lightbox-global .sgp-lb-media-wrap video {
    display: block !important;
    max-width: 90vw !important; max-height: 82vh !important;
    border-radius: 12px !important; outline: none !important;
}
#sgp-lightbox-global .sgp-lb-info {
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; padding: 12px 2px 0 !important;
    max-width: 90vw !important;
}
#sgp-lightbox-global .sgp-lb-serial {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important; padding: 5px 14px !important;
    border-radius: 6px !important; font-size: 16px !important;
    font-weight: 700 !important; letter-spacing: 1px !important;
    white-space: nowrap !important; flex-shrink: 0 !important;
}
/* flex items default to min-width:auto, so overflow:hidden/text-overflow:
   ellipsis are silently ignored unless the item is allowed to shrink below
   its own text's intrinsic width - min-width:0 is what actually lets the
   ellipsis kick in instead of the caption spilling past the screen edge. */
/* Filename/title (e.g. "WhatsApp Video 2026-07-18 at...") isn't meant for
   visitors - only the "Homesara <serial>" badge shows in the caption bar. */
#sgp-lightbox-global .sgp-lb-title {
    display: none !important;
}
@media (max-width: 520px) {
    #sgp-lightbox-global .sgp-lb-serial { font-size: 13px !important; padding: 4px 10px !important; }
}
#sgp-lightbox-global .sgp-lb-close,
#sgp-lightbox-global .sgp-lb-prev,
#sgp-lightbox-global .sgp-lb-next {
    position: fixed !important; z-index: 3 !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important; cursor: pointer !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(8px) !important;
    transition: background 0.2s !important; line-height: 1 !important;
    font-family: sans-serif !important;
}
#sgp-lightbox-global .sgp-lb-close {
    top: 18px !important; right: 18px !important;
    width: 44px !important; height: 44px !important;
    font-size: 22px !important;
}
#sgp-lightbox-global .sgp-lb-prev {
    left: 16px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important; height: 50px !important;
    padding: 0 !important;
}
#sgp-lightbox-global .sgp-lb-next {
    right: 16px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important; height: 50px !important;
    padding: 0 !important;
}
#sgp-lightbox-global .sgp-lb-prev svg,
#sgp-lightbox-global .sgp-lb-next svg {
    width: 24px !important; height: 24px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
#sgp-lightbox-global .sgp-lb-close:hover { background: rgba(255,255,255,0.22) !important; }
#sgp-lightbox-global .sgp-lb-prev:hover  { background: rgba(255,255,255,0.18) !important; }
#sgp-lightbox-global .sgp-lb-next:hover  { background: rgba(255,255,255,0.18) !important; }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sgp-gallery-wrap .sgp-grid {
        --sgp-cols: 3 !important;
        grid-auto-rows: 200px !important;
    }
    .sgp-gallery-wrap .sgp-grid.sgp-layout-justified {
        grid-auto-rows: unset !important;
    }
}

@media (max-width: 700px) {
    .sgp-gallery-wrap .sgp-grid {
        --sgp-cols: 2 !important;
        grid-auto-rows: 155px !important;
        gap: 14px !important;
    }
    .sgp-gallery-wrap .sgp-grid.sgp-layout-justified {
        grid-auto-rows: unset !important;
        gap: 14px !important;
    }
    /* Kill ALL bento spans on mobile */
    .sgp-gallery-wrap .sgp-grid .sgp-item.sgp-col-2,
    .sgp-gallery-wrap .sgp-grid .sgp-item.sgp-row-2,
    .sgp-gallery-wrap .sgp-grid .sgp-item:nth-child(7n+1),
    .sgp-gallery-wrap .sgp-grid .sgp-item:nth-child(7n+3),
    .sgp-gallery-wrap .sgp-grid .sgp-item:nth-child(7n+5) {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    /* Smaller play button on mobile */
    .sgp-gallery-wrap .sgp-play-icon-inner {
        width: 40px !important;
        height: 40px !important;
    }
    .sgp-gallery-wrap .sgp-play-icon-inner svg {
        width: 16px !important;
        height: 16px !important;
        margin-left: 3px !important;
    }
    #sgp-lightbox-global .sgp-lb-prev { left: 8px !important; }
    #sgp-lightbox-global .sgp-lb-next { right: 8px !important; }
    #sgp-lightbox-global .sgp-lb-media-wrap img,
    #sgp-lightbox-global .sgp-lb-media-wrap video {
        max-width: 96vw !important; max-height: 75vh !important;
    }
}

@media (max-width: 380px) {
    .sgp-gallery-wrap .sgp-grid {
        grid-auto-rows: 130px !important;
    }
}

/* ════════════════════════════════════════════
   TOP NAVIGATION / GALLERY FILTER BAR
   Only shown when gallery has show_topbar = 1
   (class sgp-topbar-active overrides display:none)
   ════════════════════════════════════════════ */
.sgp-filter-bar.sgp-topbar-active {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 18px !important;
    padding: 6px 2px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.sgp-filter-bar.sgp-topbar-active .sgp-filter-btn {
    padding: 8px 20px !important;
    border-radius: 30px !important;
    border: 1.5px solid #d4b896 !important;
    background: transparent !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
}
.sgp-filter-bar.sgp-topbar-active .sgp-filter-btn:hover {
    background: #f5ece3 !important;
    border-color: #b8976c !important;
    color: #333 !important;
    transform: translateY(-1px) !important;
}
.sgp-filter-bar.sgp-topbar-active .sgp-filter-btn.active {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

/* Loading state during tab switch */
.sgp-grid.sgp-loading {
    opacity: 0.4 !important;
    pointer-events: none !important;
    transition: opacity 0.2s !important;
}

@media (max-width: 700px) {
    .sgp-filter-bar.sgp-topbar-active {
        gap: 14px !important;
        margin-bottom: 14px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 10px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .sgp-filter-bar.sgp-topbar-active::-webkit-scrollbar { display: none !important; }
    .sgp-filter-bar.sgp-topbar-active .sgp-filter-btn {
        padding: 7px 16px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
}