/* =========================================================
   BONDOK MOBILE LUXURY EXPERIENCE
   Presentation only. No Firebase / Orders / Payment logic.
========================================================= */

@media (max-width: 768px){
  :root{
    --m-bg:#080808;
    --m-panel:#10100f;
    --m-panel-2:#151411;
    --m-gold:#E0B84F;
    --m-gold-soft:#E0B84F;
    --m-text:#f5f2eb;
    --m-muted:#aaa59b;
    --m-line:rgba(224,184,79,.24);
    --m-header-h:78px;
    --m-bottom-h:74px;
  }

  html,body{max-width:100%;overflow-x:hidden!important;}
  body{padding-bottom:calc(var(--m-bottom-h) + env(safe-area-inset-bottom,0px));}

  /* ---------- Unified customer header ---------- */
  body:not(.admin-page) > header,
  body:not(.admin-page) header.navbar,
  body:not(.admin-page) .navbar{
    min-height:var(--m-header-h)!important;
    height:var(--m-header-h)!important;
    padding:0 16px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:10px!important;
    background:rgba(7,7,7,.96)!important;
    border-bottom:1px solid rgba(224,184,79,.12)!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    z-index:5000!important;
  }

  body:not(.admin-page) .logo{
    min-width:0!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
  }
  body:not(.admin-page) .logo-main{
    font-size:clamp(24px,8vw,35px)!important;
    letter-spacing:.14em!important;
    white-space:nowrap!important;
  }
  body:not(.admin-page) .logo-sub{display:none!important;}
  body:not(.admin-page) header > nav,
  body:not(.admin-page) .navbar > nav{display:none!important;}

  body:not(.admin-page) .social-links{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  body:not(.admin-page) .social-links > a{
    width:42px!important;height:42px!important;min-width:42px!important;
    display:inline-flex;align-items:center!important;justify-content:center!important;
    border:1px solid var(--m-line)!important;border-radius:50%!important;
    background:rgba(224,184,79,.035)!important;color:var(--m-text)!important;
    font-size:17px!important;margin:0!important;padding:0!important;
  }
  /* social media links are not header actions on mobile */
  body:not(.admin-page) .social-links > a[href*="wa.me"],
  body:not(.admin-page) .social-links > a[href*="facebook"],
  body:not(.admin-page) .social-links > a[href*="tiktok"],
  body:not(.admin-page) .social-links > a[href*="instagram"]{display:none!important;}
  body:not(.admin-page) #wishlistLink{display:none!important;}
  body:not(.admin-page) #logoutLink{display:none!important;}

  .language-toggle{
    position:static!important;order:0!important;
    width:42px!important;height:42px!important;min-width:42px!important;
    border-radius:50%!important;border:1px solid var(--m-line)!important;
    background:rgba(224,184,79,.035)!important;color:var(--m-gold-soft)!important;
    font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;
    margin:0!important;padding:0!important;
  }

  .menu-toggle{
    position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:46px!important;height:46px!important;min-width:46px!important;
    border:1px solid var(--m-line)!important;border-radius:14px!important;
    background:linear-gradient(145deg,rgba(224,184,79,.08),rgba(255,255,255,.01))!important;
    color:var(--m-gold-soft)!important;font-size:21px!important;
    z-index:6002!important;margin:0!important;padding:0!important;
    box-shadow:none!important;
  }
  .menu-toggle i{transition:transform .3s ease;}
  body.bondok-menu-open .menu-toggle i{transform:rotate(90deg);}

  /* ---------- Luxury mobile menu ---------- */
  .bondok-mobile-drawer{
    position:fixed;inset:0;z-index:6000;pointer-events:none;
  }
  .bondok-mobile-drawer::before{
    content:"";position:absolute;inset:0;background:rgba(0,0,0,.72);opacity:0;transition:.28s ease;
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  }
  .bondok-mobile-drawer__panel{
    position:absolute;top:0;right:0;height:100%;width:min(88vw,370px);
    padding:calc(24px + env(safe-area-inset-top,0px)) 22px 30px;
    background:linear-gradient(180deg,#11100d 0%,#080808 48%,#0b0a08 100%);
    border-left:1px solid rgba(224,184,79,.25);
    transform:translateX(105%);transition:transform .34s cubic-bezier(.22,.8,.2,1);
    box-shadow:-25px 0 70px rgba(0,0,0,.55);overflow:auto;
  }
  html[dir="rtl"] .bondok-mobile-drawer__panel{right:auto;left:0;transform:translateX(-105%);border-left:0;border-right:1px solid rgba(224,184,79,.25);}
  .bondok-mobile-drawer.is-open{pointer-events:auto;}
  .bondok-mobile-drawer.is-open::before{opacity:1;}
  .bondok-mobile-drawer.is-open .bondok-mobile-drawer__panel{transform:translateX(0)!important;}
  .bondok-mobile-drawer__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--m-line);}
  .bondok-mobile-drawer__brand{font-family:Cinzel,serif;font-size:24px;letter-spacing:.2em;color:var(--m-text);}
  .bondok-mobile-drawer__brand b{color:var(--m-gold-soft);font-weight:500;}
  .bondok-mobile-drawer__close{width:42px;height:42px;border:1px solid var(--m-line);border-radius:50%;background:transparent;color:#fff;font-size:18px;}
  .bondok-mobile-drawer__eyebrow{display:block;margin:24px 0 10px;color:var(--m-gold);font-size:10px;font-weight:700;letter-spacing:.28em;}
  .bondok-mobile-drawer__links{display:grid;gap:8px;}
  .bondok-mobile-drawer__links a{
    display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;
    min-height:58px;padding:8px 10px;border:1px solid transparent;border-radius:15px;
    color:#eee;text-decoration:none!important;background:transparent;
  }
  .bondok-mobile-drawer__links a i:first-child{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(224,184,79,.08);color:var(--m-gold-soft);border:1px solid rgba(224,184,79,.13);}
  .bondok-mobile-drawer__links a span{font-size:15px;font-weight:500;letter-spacing:.02em;}
  .bondok-mobile-drawer__links a .fa-chevron-right{font-size:11px;color:#777;}
  .bondok-mobile-drawer__links a.active{border-color:rgba(224,184,79,.27);background:linear-gradient(90deg,rgba(224,184,79,.10),rgba(224,184,79,.025));}
  .bondok-mobile-drawer__links a.active span{color:var(--m-gold-soft);}
  .bondok-mobile-drawer__footer{margin-top:25px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);color:#777;font-size:11px;line-height:1.7;}
  .menu-overlay{display:none!important;}

  /* ---------- App bottom navigation ---------- */
  .bondok-bottom-nav{
    position:fixed;z-index:5500;left:10px;right:10px;bottom:8px;
    height:calc(var(--m-bottom-h) - 8px);padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    border:1px solid rgba(224,184,79,.20);border-radius:22px;
    background:rgba(12,12,11,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 15px 50px rgba(0,0,0,.48);
  }
  .bondok-bottom-nav a,.bondok-bottom-nav button{
    appearance:none;border:0;background:transparent;text-decoration:none!important;color:#8f8c84;
    height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font-size:9px;font-weight:600;letter-spacing:.02em;padding:0;min-width:0;
  }
  .bondok-bottom-nav i{font-size:18px;}
  .bondok-bottom-nav .active{color:var(--m-gold-soft);}
  .bondok-bottom-nav .active i{filter:drop-shadow(0 0 8px rgba(224,184,79,.28));}
  body.auth-page .bondok-bottom-nav, body.login-page .bondok-bottom-nav, body.register-page .bondok-bottom-nav{display:none!important;}

  /* ---------- Single-card swipe carousels ---------- */
  .home-slider,.gallery-slider,.reviews-slider{position:relative!important;overflow:visible!important;display:block!important;padding:0!important;}
  .home-slider .slider-btn,.gallery-slider .gallery-btn,.reviews-slider .reviews-btn,
  .gallery-prev,.gallery-next{display:none!important;}
  .home-slider .collection-grid,.gallery-slider .gallery-grid,.reviews-slider .reviews-grid,
  body.bondok-gallery-page .gallery-grid{
    display:flex!important;grid-template-columns:none!important;gap:16px!important;
    overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;-webkit-overflow-scrolling:touch!important;
    padding:8px max(7vw,18px) 14px!important;margin:0!important;
    scrollbar-width:none!important;overscroll-behavior-x:contain;
  }
  .home-slider .collection-grid::-webkit-scrollbar,.gallery-slider .gallery-grid::-webkit-scrollbar,.reviews-slider .reviews-grid::-webkit-scrollbar,body.bondok-gallery-page .gallery-grid::-webkit-scrollbar{display:none!important;}
  .home-slider .collection-grid > *,.gallery-slider .gallery-grid > *,.reviews-slider .reviews-grid > *,body.bondok-gallery-page .gallery-grid > *{
    flex:0 0 86vw!important;width:86vw!important;max-width:440px!important;min-width:0!important;
    scroll-snap-align:center!important;scroll-snap-stop:always!important;margin:0!important;
  }
  .bondok-swipe-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px auto 2px;min-height:14px;}
  .bondok-swipe-dots button{width:6px;height:6px;border:0;border-radius:50%;padding:0;background:#5b5547;transition:.25s ease;}
  .bondok-swipe-dots button.active{width:22px;border-radius:999px;background:var(--m-gold-soft);}

  /* ---------- Profile / notifications mobile ---------- */
  .profile-page{padding-left:14px!important;padding-right:14px!important;}
  .profile-dashboard{display:block!important;}
  .profile-sidebar{width:100%!important;max-width:none!important;margin:0 0 18px!important;position:static!important;}
  .profile-side-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .profile-side-btn{min-width:0!important;height:auto!important;min-height:64px!important;padding:12px!important;font-size:12px!important;}
  .profile-side-btn > i:last-child{display:none!important;}
  .profile-content,.profile-main-content{width:100%!important;min-width:0!important;}
  .notifications-header,.notification-header,.profile-section-header{display:flex!important;align-items:flex-start!important;gap:12px!important;flex-wrap:wrap!important;}
  #markAllReadBtn,.mark-all-read{width:100%!important;min-height:48px!important;margin:0!important;}
  .notification-item{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:12px!important;padding:16px!important;align-items:start!important;}
  .notification-item h3,.notification-item p,.notification-item time{max-width:100%!important;overflow-wrap:anywhere!important;white-space:normal!important;}
  .notifications-empty{padding:42px 18px!important;text-align:center!important;}

  /* ---------- Generic mobile comfort ---------- */
  input,select,textarea,button{font-size:16px;}
  .modal,.modal-content,.popup-content{max-width:calc(100vw - 24px)!important;}
  .section-title h2,.collection-header h1{line-height:1.12!important;overflow-wrap:anywhere;}
}

@media (max-width:768px){
  .bondok-android-download{width:100%;min-height:62px;margin-top:18px;padding:8px 14px;border:1px solid rgba(224,184,79,.44);border-radius:16px;background:linear-gradient(135deg,#E0B84F 0%,#93681E 100%);color:#090909!important;text-decoration:none!important;font-family:Poppins,sans-serif;display:grid;grid-template-columns:36px minmax(0,1fr) 28px;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(224,184,79,.12);}
  .bondok-android-download>i:first-child{font-size:23px;text-align:center;}
  .bondok-android-download>i:last-child{font-size:13px;text-align:center;}
  .bondok-android-download span{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
  .bondok-android-download b{font-family:Cinzel,serif;font-size:13px;letter-spacing:.035em;line-height:1.2;}
  .bondok-android-download small{font-size:9px;font-weight:700;letter-spacing:.08em;opacity:.72;line-height:1.2;}
  .bondok-android-download:active{transform:scale(.985);}
}

/* =========================================================
   BONDOK MOBILE LUXURY — REQUESTED POLISH PASS (2026-08-18)
   UI only. Desktop and business logic remain untouched.
========================================================= */
@media (max-width:768px){
  /* Header must contain only brand + auth/cart action. */
  body:not(.admin-page) > header,
  body:not(.admin-page) header.navbar,
  body:not(.admin-page) .navbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    padding-left:16px!important;padding-right:16px!important;
  }
  body:not(.admin-page) .social-links{display:flex!important;gap:0!important;}
  body:not(.admin-page) .social-links > a[href*="wa.me"],
  body:not(.admin-page) .social-links > a[href*="facebook"],
  body:not(.admin-page) .social-links > a[href*="tiktok"],
  body:not(.admin-page) .social-links > a[href*="instagram"],
  body:not(.admin-page) #profileLink,
  body:not(.admin-page) #wishlistLink,
  body:not(.admin-page) #customerWishlistLink,
  body:not(.admin-page) #logoutLink,
  body:not(.admin-page) .language-toggle{display:none!important;}

  /* Side 3-dots opener: always available, but kept OUTSIDE the header. */
  body:not(.admin-page) .menu-toggle{
    position:fixed!important;
    left:10px!important;right:auto!important;
    top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:40px!important;height:52px!important;min-width:40px!important;
    border-radius:0 16px 16px 0!important;z-index:5600!important;
    background:rgba(12,12,11,.97)!important;
    border:1px solid rgba(224,184,79,.30)!important;border-left:0!important;
    color:var(--m-gold-soft)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.45)!important;
  }
  body:not(.admin-page) .menu-toggle i{font-size:20px!important;}
  html[dir="rtl"] body:not(.admin-page) .menu-toggle{
    left:auto!important;right:10px!important;
    border-left:1px solid rgba(224,184,79,.30)!important;border-right:0!important;
    border-radius:16px 0 0 16px!important;
  }

  /* Live notifications stay visible on the site without entering the header. */
  html body:not(.admin-page) .social-links > .customer-notification-wrap,
  html body:not(.admin-page) .customer-notification-wrap{
    position:fixed!important;
    right:14px!important;left:auto!important;
    bottom:calc(var(--m-bottom-h) + 18px + env(safe-area-inset-bottom,0px))!important;
    top:auto!important;
    z-index:5605!important;
    display:inline-flex!important;
    width:46px!important;height:46px!important;max-width:46px!important;
  }
  html[dir="rtl"] body:not(.admin-page) .customer-notification-wrap{right:auto!important;left:14px!important;}
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-link{
    width:46px!important;height:46px!important;min-width:46px!important;
    background:rgba(12,12,11,.97)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.45)!important;
  }
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-menu{
    position:fixed!important;
    right:10px!important;left:10px!important;
    bottom:calc(var(--m-bottom-h) + 76px + env(safe-area-inset-bottom,0px))!important;
    top:auto!important;
    width:auto!important;max-width:none!important;max-height:min(70dvh,620px)!important;
    overflow-y:auto!important;border-radius:18px!important;
  }
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-head,
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-item{
    max-width:100%!important;min-width:0!important;
  }
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-content,
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-title-row{
    min-width:0!important;max-width:100%!important;
  }
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-title,
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-message,
  html body:not(.admin-page) .customer-notification-wrap .customer-notification-time{
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;max-width:100%!important;
  }

  /* Home hero starts sooner beneath the mobile header. */
  body:not(.admin-page) .hero{
    min-height:610px!important;
    padding-top:28px!important;
  }
  body:not(.admin-page) .hero .hero-text{
    padding-bottom:42px!important;
  }

  /* Profile notifications: no overlapping copy, buttons or timestamps. */
  #notificationsSection,
  #notificationsSection .profile-extras-card,
  #notificationsSection .profile-notifications-list{width:100%!important;max-width:100%!important;min-width:0!important;}
  #notificationsSection .profile-notifications-title{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;
    align-items:start!important;
  }
  #notificationsSection .profile-notifications-title > *{min-width:0!important;max-width:100%!important;}
  #notificationsSection #profileMarkAllRead{width:100%!important;min-height:46px!important;margin:0!important;}
  #notificationsSection .profile-notification-item{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:12px!important;align-items:start!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:14px!important;overflow:hidden!important;
  }
  #notificationsSection .profile-notification-item > div:nth-child(2){min-width:0!important;max-width:100%!important;}
  #notificationsSection .profile-notification-item h3,
  #notificationsSection .profile-notification-item p,
  #notificationsSection .profile-notification-item time{
    display:block!important;width:100%!important;max-width:100%!important;
    margin-left:0!important;margin-right:0!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
    line-height:1.55!important;
  }
  #notificationsSection .profile-notification-item h3{font-size:14px!important;margin:0 0 6px!important;}
  #notificationsSection .profile-notification-item p{font-size:12px!important;margin:0!important;}
  #notificationsSection .profile-notification-item time{font-size:10px!important;margin-top:8px!important;}
  #notificationsSection .profile-notification-item > i:last-child{display:none!important;}
}

@media (max-width:390px){
  body:not(.admin-page) .hero{min-height:570px!important;}
  #notificationsSection .profile-notification-item{grid-template-columns:36px minmax(0,1fr)!important;padding:12px!important;gap:10px!important;}
  #notificationsSection .profile-notification-icon{width:36px!important;height:36px!important;}
}

@media (max-width:768px){
  .bondok-mobile-drawer__logout{
    display:none;width:100%;min-height:52px;margin-top:20px;padding:0 16px;
    align-items:center;justify-content:center;gap:10px;
    border:1px solid rgba(224,184,79,.28);border-radius:15px;
    background:rgba(224,184,79,.07);color:#E0B84F;
    font:600 13px/1 Poppins,sans-serif;letter-spacing:.04em;cursor:pointer;
  }
  .bondok-mobile-drawer__logout.is-visible{display:flex;}
}

/* =========================================================
   CUSTOMER MOBILE HEADER + MENU POSITION — FINAL FIX
   Keep the 3-dots menu inside the fixed header, immediately
   before the Login/Cart action. UI only.
========================================================= */
@media (max-width:768px){
  body:not(.admin-page) > header,
  body:not(.admin-page) header.navbar,
  body:not(.admin-page) .navbar{
    grid-template-columns:minmax(0,1fr) auto auto!important;
    column-gap:8px!important;
  }

  body:not(.admin-page) .menu-toggle{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    order:2!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:13px!important;
    border:1px solid rgba(224,184,79,.28)!important;
    background:rgba(224,184,79,.045)!important;
    box-shadow:none!important;
    margin:0!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:var(--m-gold-soft)!important;
    z-index:auto!important;
  }
  body:not(.admin-page) .menu-toggle i{
    font-size:20px!important;
  }

  body:not(.admin-page) .social-links{
    order:3!important;
    flex:0 0 auto!important;
  }

  /* Header stays fixed, so the menu follows the customer while scrolling. */
  body:not(.admin-page) .navbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
  }
}

/* =========================================================
   CUSTOMER MOBILE HEADER — V3.3 POSITION CORRECTION
   Visual order on phones: LOGO | LOGIN/CART | 3-DOTS.
   The menu remains part of the fixed header while scrolling.
========================================================= */
@media (max-width:768px){
  body:not(.admin-page) > header,
  body:not(.admin-page) header.navbar,
  body:not(.admin-page) .navbar{
    grid-template-columns:minmax(0,1fr) auto auto!important;
    column-gap:8px!important;
  }

  /* Auth/cart immediately after the logo. */
  body:not(.admin-page) .social-links{
    order:2!important;
    flex:0 0 auto!important;
  }

  /* Three-dots is the RIGHTMOST header control. */
  body:not(.admin-page) .menu-toggle{
    order:3!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    margin:0!important;
  }
}


/* =========================================================
   BONDOK PWA LUXURY LAUNCH SCREEN
   Presentation only — no commerce/auth logic is changed.
========================================================= */
#bondokPwaLaunch{
    position:fixed;
    inset:0;
    z-index:2147483647;
    display:flex;
    background:#060606;
    opacity:1;
    visibility:visible;
    transition:opacity .34s ease, visibility .34s ease;
}
#bondokPwaLaunch img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
#bondokPwaLaunch.is-hiding{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
@media (min-width:769px){
    #bondokPwaLaunch{display:none !important;}
}

/* =========================================================
   BONDOK ANDROID APP — INSTANT SEARCH V1.7
   Activated only when the native Android shell marks the page.
========================================================= */
@media (max-width:768px){
  body.bondok-search-open{overflow:hidden!important;touch-action:none;}
  .bondok-app-search{position:fixed;inset:0;z-index:999999;display:none;background:rgba(3,3,3,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:0;}
  .bondok-app-search.is-open{display:block;animation:bondokSearchFade .18s ease both;}
  .bondok-app-search__shell{position:absolute;inset:0;background:radial-gradient(circle at 76% 0,rgba(224,184,79,.10),transparent 29%),linear-gradient(180deg,#0b0b0a 0%,#050505 100%);padding:24px 18px calc(var(--m-bottom-h,82px) + 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .bondok-app-search__head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 2px 19px;border-bottom:1px solid rgba(255,255,255,.07);}
  .bondok-app-search__head>div{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .bondok-app-search__head span{font-size:9px;font-weight:700;letter-spacing:.22em;color:#E0B84F;}
  .bondok-app-search__head strong{font-family:Cinzel,serif;font-size:24px;font-weight:500;letter-spacing:.025em;color:#f5f2ea;}
  .bondok-app-search__head button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(224,184,79,.24);background:rgba(224,184,79,.06);color:#FFE59A;font-size:17px;flex:0 0 auto;}
  .bondok-app-search__input{margin-top:20px;height:58px;border:1px solid rgba(224,184,79,.30);border-radius:17px;background:rgba(255,255,255,.035);display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;padding:0 8px;box-shadow:0 16px 38px rgba(0,0,0,.22);}
  .bondok-app-search__input>i{color:#E0B84F;text-align:center;font-size:16px;}
  .bondok-app-search__input input{width:100%;height:100%;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:500 15px/1.2 Poppins,sans-serif!important;padding:0!important;box-shadow:none!important;}
  .bondok-app-search__input input::placeholder{color:#777!important;}
  .bondok-app-search__input button{border:0;background:transparent;color:#8d887b;opacity:0;pointer-events:none;width:42px;height:42px;}
  .bondok-app-search__input button.is-visible{opacity:1;pointer-events:auto;}
  .bondok-app-search__meta{min-height:39px;padding:15px 3px 8px;color:#8f8a7d;font:500 11px/1.4 Poppins,sans-serif;letter-spacing:.035em;}
  .bondok-app-search__results{display:flex;flex-direction:column;gap:10px;padding-bottom:22px;}
  .bondok-app-search__result{display:grid;grid-template-columns:68px minmax(0,1fr) 28px;align-items:center;gap:13px;min-height:86px;padding:9px 10px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:linear-gradient(110deg,rgba(255,255,255,.035),rgba(224,184,79,.028));text-decoration:none!important;box-shadow:0 13px 28px rgba(0,0,0,.18);}
  .bondok-app-search__result:active{transform:scale(.985);border-color:rgba(224,184,79,.28);}
  .bondok-app-search__result img{width:68px;height:68px;object-fit:cover;border-radius:13px;background:#111;border:1px solid rgba(224,184,79,.14);}
  .bondok-app-search__copy{min-width:0;display:flex;flex-direction:column;gap:3px;}
  .bondok-app-search__copy small{color:#E0B84F;font:700 8px/1.2 Poppins,sans-serif;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bondok-app-search__copy b{color:#f6f2e9;font:500 14px/1.35 Cinzel,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bondok-app-search__copy em{color:#9d9789;font:500 10px/1.3 Poppins,sans-serif;font-style:normal;}
  .bondok-app-search__result>i{color:#7d7460;font-size:11px;text-align:center;}
  @keyframes bondokSearchFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}


/* =========================================================
   BONDOK MOBILE WEB — APP NAV + PERFORMANCE PASS
========================================================= */
@media (max-width:768px){

  html{
    scroll-behavior:auto !important;
  }

  body{
    overscroll-behavior-y:auto;
  }

  /* App-like header: brand + utility actions + dots. */
  body:not(.admin-page) header.navbar,
  body:not(.admin-page) .navbar{
    grid-template-columns:minmax(0,1fr) auto auto !important;
    min-height:72px !important;
    height:72px !important;
    padding:0 14px !important;
    gap:7px !important;
    background:rgba(7,7,7,.985) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body:not(.admin-page) .logo-main{
    font-size:clamp(23px,7.2vw,31px) !important;
  }

  body:not(.admin-page) .social-links{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }

  body:not(.admin-page) .language-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:13px !important;
  }

  /* Guest/member account is handled in the app-style bottom dock, never header. */
  body:not(.admin-page) #loginLink,
  body:not(.admin-page) #profileLink,
  body:not(.admin-page) #wishlistLink,
  body:not(.admin-page) #customerWishlistLink,
  body:not(.admin-page) #logoutLink{
    display:none !important;
  }

  body:not(.admin-page) #cartLink,
  body.bondok-guest:not(.admin-page) #guestTrackOrderLink{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:13px !important;
  }

  body:not(.admin-page) .menu-toggle{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:13px !important;
  }

  /* Member notification sits with header utilities, never as a floating bubble. */
  html body:not(.admin-page) .customer-notification-wrap{
    position:static !important;
    inset:auto !important;
    width:40px !important;
    height:40px !important;
    max-width:40px !important;
    flex:0 0 40px !important;
  }

  html body:not(.admin-page) .customer-notification-wrap .customer-notification-link{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:13px !important;
    box-shadow:none !important;
  }

  html body:not(.admin-page) .customer-notification-wrap .customer-notification-menu{
    position:fixed !important;
    top:78px !important;
    right:10px !important;
    left:10px !important;
    bottom:auto !important;
    max-height:min(70dvh,620px) !important;
  }

  /* Match customer-app dock proportions. */
  .bondok-bottom-nav{
    left:10px !important;
    right:10px !important;
    bottom:8px !important;
    height:66px !important;
    padding:6px 7px calc(6px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:21px !important;
    background:rgba(12,12,11,.985) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 12px 34px rgba(0,0,0,.46) !important;
  }

  .bondok-bottom-nav a,
  .bondok-bottom-nav button{
    height:52px !important;
    font-size:9px !important;
  }

  .bondok-bottom-nav i{
    font-size:18px !important;
  }

  /* Faster, lighter mobile scrolling without making the design flat. */
  .navbar,
  .bondok-bottom-nav,
  .bondok-mobile-drawer__panel,
  .customer-notification-menu{
    will-change:auto !important;
  }

  .bondok-mobile-drawer::before{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .bondok-mobile-drawer__panel{
    box-shadow:-16px 0 42px rgba(0,0,0,.45) !important;
  }

  .fade-up,
  .hidden{
    transition-duration:.36s !important;
  }

  .gallery-card img,
  .review-card,
  .product-card,
  .perfume-card{
    will-change:auto !important;
  }

  /* Section anchor accuracy under the fixed mobile header. */
  #gallery,
  #reviews,
  #story,
  #contact{
    scroll-margin-top:86px !important;
  }
}


/* ===== BONDOK MOBILE NAV SVG/TEXT SIZE FINAL TUNED ===== */
@media (max-width: 900px){
  .bondok-bottom-nav{
    min-height:72px !important;
  }

  .bondok-bottom-nav a,
  .bondok-bottom-nav button{
    height:58px !important;
    gap:5px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  .bondok-bottom-nav a > span,
  .bondok-bottom-nav button > span{
    font-size:11px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
  }

  .bondok-bottom-nav i,
  .bondok-bottom-nav svg,
  .bondok-bottom-nav .svg-inline--fa{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    font-size:22px !important;
    line-height:22px !important;
    display:block !important;
  }
}