/* Tata letak publik bersama: header, footer, dan navigasi keranjang mobile. */
.public-catalog-nav .public-nav-actions{display:flex;align-items:center;gap:10px}
.public-catalog-nav .public-cart-button,.public-catalog-nav .public-search-button{width:auto!important;min-width:44px!important;padding:0 11px!important;gap:6px!important}
.public-action-label{font-size:12px;font-weight:900}
.public-site-footer{margin-top:42px;background:#fffdfb;border-top:1px solid rgba(34,46,80,.09);color:#4b5563}
.public-footer-grid{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:44px 0 36px;display:grid;grid-template-columns:1.5fr .75fr .75fr 1fr;gap:32px}
.public-footer-brand>img{width:66px;height:66px;object-fit:contain;border-radius:18px;background:#fff;border:1px solid rgba(34,46,80,.10);padding:5px}
.public-footer-brand h3{margin:13px 0 8px;color:#142033;font-family:Georgia,'Times New Roman',serif;font-size:24px}
.public-footer-brand p{margin:0;line-height:1.65;max-width:440px}
.public-footer-contact{display:grid;gap:7px;margin-top:14px;font-size:13px;font-weight:700}
.public-footer-links,.public-footer-support{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.public-footer-links h4,.public-footer-support h4{margin:0 0 5px;color:#142033;font-size:15px}
.public-footer-links a,.public-footer-links button{border:0;background:transparent;padding:0;color:#667085;cursor:pointer;font:inherit;font-size:13px;text-align:left}
.public-footer-links a:hover,.public-footer-links button:hover{color:var(--cat-primary,var(--primary,#174f2d))}
.public-footer-support>img{width:76px;height:58px;object-fit:contain;background:#fff;border:1px solid rgba(34,46,80,.09);border-radius:14px;padding:5px}
.public-footer-support p{margin:0;font-size:12px;line-height:1.55;color:#7b8494}
.public-bottom-nav,.public-bottom-spacer{display:none}
@media(max-width:900px){
  .public-catalog-nav .nav-inner{grid-template-columns:minmax(0,1fr) auto!important}
  .public-catalog-nav .public-nav-actions{display:flex!important;gap:6px!important}
  .public-catalog-nav .public-nav-actions .btn{display:none!important}
  .public-catalog-nav .public-search-button{display:none!important}
  .public-catalog-nav .public-cart-button{display:flex!important;min-width:46px!important;height:42px!important;padding:0 8px!important}
  .public-catalog-nav .public-cart-button .public-action-label{display:none}
  .public-catalog-nav .public-mobile-search{grid-column:1/-1!important;display:block!important}
  .public-footer-grid{grid-template-columns:1fr 1fr;padding:34px 0 105px;gap:26px}
  .public-footer-brand{grid-column:1/-1}
  .public-bottom-nav{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:160;width:min(520px,calc(100% - 20px));display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:7px;border-radius:24px;background:rgba(255,253,251,.96);backdrop-filter:blur(18px);border:1px solid rgba(34,46,80,.12);box-shadow:0 22px 58px rgba(15,23,42,.20)}
  .public-bottom-nav a,.public-bottom-nav button{position:relative;border:0;background:transparent;border-radius:18px;min-height:50px;color:#526071;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:inherit;font-size:11px;font-weight:900;cursor:pointer}
  .public-bottom-nav .active{background:color-mix(in srgb,var(--cat-primary,var(--primary,#174f2d)) 11%,#fff);color:var(--cat-primary,var(--primary,#174f2d))}
  .public-bottom-icon{font-size:18px;line-height:1}
  .public-bottom-badge{position:absolute;right:11px;top:4px;display:none;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--cat-accent,var(--accent,#e7b7b4));color:#142033;border:2px solid #fff;font-size:10px;place-items:center}
  .public-bottom-badge.show{display:grid}
  .public-bottom-spacer{display:block;height:88px}
}
@media(max-width:560px){
  .public-footer-grid{grid-template-columns:1fr;padding-top:30px}
  .public-footer-brand{grid-column:auto}
  .public-footer-links,.public-footer-support{border-top:1px solid rgba(34,46,80,.08);padding-top:18px}
}

/* public-bottom-nav five-menu polish */
@media(max-width:900px){
  .public-bottom-nav{width:min(560px,calc(100% - 16px));gap:3px;padding:6px}
  .public-bottom-nav a,.public-bottom-nav button{min-width:0;padding:5px 2px;font-size:10.5px}
  .public-bottom-badge{right:7px}
}
@media(max-width:380px){
  .public-bottom-nav a,.public-bottom-nav button{font-size:9.5px}
  .public-bottom-icon{font-size:17px}
}

/* ============================================================
   Modal keranjang/checkout mobile yang ringkas.
   Navigasi bawah disembunyikan saat modal terbuka, sehingga tidak
   diperlukan spacer, margin tombol, atau padding bawah berlebihan.
   ============================================================ */
@media (max-width: 900px){
  body.public-modal-open{
    overflow:hidden !important;
  }

  body.public-modal-open .public-bottom-nav,
  body.public-modal-open .public-bottom-spacer{
    display:none !important;
  }

  body.public-modal-open .floating-chat{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.public-modal-open #cartModal.modal-bg.show,
  body.public-modal-open #checkoutModal.modal-bg.show{
    inset:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow:hidden !important;
    padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  }

  body.public-modal-open #cartModal > .modal,
  body.public-modal-open #checkoutModal > .modal{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100vh - 16px) !important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    border-radius:26px !important;
    overflow:hidden !important;
  }

  body.public-modal-open #cartModal .modal-head,
  body.public-modal-open #checkoutModal .modal-head{
    flex:0 0 auto !important;
  }

  body.public-modal-open #cartModal .modal-body,
  body.public-modal-open #checkoutModal .modal-body{
    flex:0 1 auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 118px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    padding:18px !important;
    scroll-padding-bottom:24px !important;
  }

  body.public-modal-open #cartModal .checkout-actions,
  body.public-modal-open #checkoutModal .checkout-actions{
    position:static !important;
    inset:auto !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  body.public-modal-open #cartModal .btn-create-order,
  body.public-modal-open #checkoutModal .btn-submit-order{
    margin-bottom:0 !important;
  }

  #cartModal .cart-action-bottom-spacer,
  #checkoutModal .cart-action-bottom-spacer{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    flex:0 0 0 !important;
  }
}

@media (max-width: 560px){
  body.public-modal-open #cartModal .checkout-actions,
  body.public-modal-open #checkoutModal .checkout-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.public-modal-open #cartModal .checkout-actions .btn,
  body.public-modal-open #checkoutModal .checkout-actions .btn{
    width:100% !important;
    min-height:52px !important;
  }
}

/* ============================================================
   FIX 2026-08-03: modal keranjang mengikuti tinggi konten mobile.
   Menghapus ruang putih besar di bawah tombol aksi.
   ============================================================ */
@media (max-width: 900px) {
  body.public-modal-open #cartModal.modal-bg.show {
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  body.public-modal-open #cartModal > .modal {
    display: flex !important;
    flex: 0 0 auto !important;
    width: min(100%, 680px) !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  body.public-modal-open #cartModal .modal-body {
    display: block !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 132px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    padding: 16px !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 18px !important;
  }

  body.public-modal-open #cartModal .checkout-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    position: static !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  body.public-modal-open #cartModal .checkout-actions::after,
  body.public-modal-open #cartModal .modal-body::after {
    content: none !important;
    display: none !important;
  }

  body.public-modal-open #cartModal .checkout-actions .btn,
  body.public-modal-open #cartModal .btn-create-order {
    width: 100% !important;
    margin: 0 !important;
  }

  #cartModal .cart-action-bottom-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}