*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:#f7fbff;color:#0c1a2e;overflow-x:hidden;}
.nav-glass{background:rgba(250,252,255,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(185,227,253,0.4);}
.search-wrap{position:relative;flex:1;max-width:420px;}
.search-input{width:100%;height:38px;background:#f0f8ff;border:1.5px solid #e0f0fe;border-radius:10px;padding:0 14px 0 38px;font-size:13.5px;color:#0c456d;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s;}
.search-input::placeholder{color:#94a3b8;}
.search-input:focus{border-color:#7dcefb;box-shadow:0 0 0 3px rgba(56,181,248,.12);}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#7dcefb;pointer-events:none;}
.cart-btn{position:relative;width:38px;height:38px;border-radius:10px;border:1.5px solid #e0f0fe;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0;}
.cart-btn:hover{background:#e0f0fe;border-color:#7dcefb;}
.cart-badge{position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;background:#0e9de8;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #f7fbff;opacity:0;transform:scale(0);transition:opacity .2s,transform .2s;}
.cart-badge.show{opacity:1;transform:scale(1);}
/* filter btn mobile only */
.mobile-filter-btn{display:none;}
@media(max-width:900px){.mobile-filter-btn{display:flex;width:38px;height:38px;border-radius:10px;border:1.5px solid #e0f0fe;background:#fff;align-items:center;justify-content:center;cursor:pointer;color:#027ec4;transition:background .2s;flex-shrink:0;}}
.mobile-filter-btn:hover{background:#e0f0fe;}
/* sidebar left */
.sidebar{width:240px;flex-shrink:0;}
@media(max-width:900px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:300;width:290px;background:#fff;transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:8px 0 32px rgba(2,126,196,.1);padding-top:64px;}
  .sidebar.open{transform:translateX(0);}
}
.sidebar-overlay{position:fixed;inset:0;z-index:290;background:rgba(12,26,46,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s;display:none;}
@media(max-width:900px){.sidebar-overlay{display:block;}}
.sidebar-overlay.open{opacity:1;pointer-events:all;}
.cat-section-title{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;padding:0 4px;margin-bottom:6px;margin-top:20px;}
.cat-section-title:first-child{margin-top:0;}
.cat-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;transition:background .15s;text-decoration:none;border:none;background:none;width:100%;text-align:left;}
.cat-item:hover{background:#f0f8ff;}
.cat-item.active{background:#e0f0fe;}
.cat-item.active .cat-item-name{color:#027ec4;font-weight:600;}
.cat-item.active .cat-item-count{color:#7dcefb;}
.cat-item-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.cat-item-name{font-size:13px;font-weight:500;color:#075483;flex:1;}
.cat-item-count{font-size:11px;color:#b9e3fd;font-weight:600;background:#f0f8ff;padding:2px 7px;border-radius:999px;}
.cat-item.active .cat-item-count{background:#c8e9fd;}
.range-input{width:100%;accent-color:#027ec4;cursor:pointer;}
/* product grid */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

@media(max-width:1200px){
  .product-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:768px){
  .product-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
}

/* UBAH INI */
@media(max-width:420px){
  .product-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
/* card */
.product-card {
    background: #fff;
    border: 1px solid #e0f0fe;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;          /* tambah ini */
    flex-direction: column; /* tambah ini */
}
.product-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(2,126,196,.12);}
.product-img-wrap{position:relative;overflow:hidden;aspect-ratio:1/1;cursor:pointer;}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.product-card:hover .product-img-wrap img{transform:scale(1.05);}
.product-cat-tag{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);color:#fff;}
.product-card-body{
  position:relative;
  margin-top:-18px;

  background:#fff;

  border-top-left-radius:18px;
  border-top-right-radius:18px;

  padding:18px;
  display:flex;
  flex-direction:column;
  flex:1;

  z-index:2;
}
.product-card-body .product-add-btn {
    margin-top: auto;
    padding-top: 10px; /* jaga jarak dari harga */
}
/* add btn — bawah harga */
.product-add-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;width:100%;background:linear-gradient(135deg,#e0f0fe,#f0f8ff);border:1.5px solid #e0f0fe;cursor:pointer;justify-content:center;transition:background .2s,border-color .2s,transform .15s;margin-top:10px;}
.product-add-btn:hover{background:linear-gradient(135deg,#b9e3fd,#e0f0fe);border-color:#7dcefb;transform:scale(1.01);}
.product-add-btn.added{background:linear-gradient(135deg,#0e9de8,#027ec4);border-color:#027ec4;}
.product-add-btn.added svg path,.product-add-btn.added svg circle{stroke:#fff;fill:#fff;}
.product-add-btn.added .add-btn-label{color:#fff;}
.add-btn-label{font-size:12px;font-weight:600;color:#027ec4;white-space:nowrap;}
.price-original{font-size:11.5px;color:#94a3b8;text-decoration:line-through;font-weight:400;}
.price-sale{font-family:'DM Serif Display',serif;font-size:17px;color:#027ec4;font-weight:400;line-height:1;}
.price-discount-badge{display:inline-block;background:#fef2f2;color:#dc2626;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:.04em;}
/* sort */
.sort-select{height:36px;border:1.5px solid #e0f0fe;border-radius:9px;background:#fff;color:#075483;font-size:13px;padding:0 32px 0 12px;outline:none;cursor:pointer;font-family:'DM Sans',sans-serif;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237dcefb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .2s;}
.sort-select:focus{border-color:#7dcefb;}
/* pagination */
.page-btn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid #e0f0fe;background:#fff;color:#075483;transition:all .18s;text-decoration:none;}
.page-btn:hover{background:#e0f0fe;border-color:#7dcefb;color:#027ec4;}
.page-btn.active{background:#027ec4;border-color:#027ec4;color:#fff;}
.page-btn.disabled{opacity:.35;cursor:default;pointer-events:none;}
/* shared overlay */
.overlay-backdrop{position:fixed;inset:0;background:rgba(12,26,46,.45);backdrop-filter:blur(4px);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s;}
.overlay-backdrop.open{opacity:1;pointer-events:all;}


  /* CART SIDEBAR */
  .cart-sidebar{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
  
    width:400px;
    max-width:100vw;
  
    background:#fff;
  
    z-index:510;
  
    display:flex;
    flex-direction:column;
  
    transform:translateX(100%);
  
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  
    border-left:1px solid #e0f0fe;
  
    box-shadow:-12px 0 48px rgba(2,126,196,.08);
  }
  
  .cart-sidebar.open{
    transform:translateX(0);
  }
  
  .cart-header{
    padding:22px 24px 18px;
  
    border-bottom:1px solid #f0f8ff;
  
    display:flex;
    align-items:center;
    justify-content:space-between;
  
    flex-shrink:0;
  }
  
  .cart-body{
    flex:1;
    overflow-y:auto;
    padding:16px 24px;
  }
  
  .cart-footer{
    padding:18px 24px 24px;
    border-top:1px solid #f0f8ff;
    flex-shrink:0;
  }
  
  .cart-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  
    height:100%;
  
    gap:14px;
  
    color:#94a3b8;
  }
  
  .cart-item{
    display:flex;
  
    gap:14px;
  
    padding:16px 0;
  
    border-bottom:1px solid #f0f8ff;
  
    align-items:flex-start;
  }
  
  .cart-item:last-child{
    border-bottom:none;
  }
  
  .cart-item-img{
    width:88px;
    height:88px;
  
    border-radius:16px;
  
    object-fit:cover;
  
    flex-shrink:0;
  
    border:1px solid #e0f0fe;
  
    background:#f0f8ff;
  }
  
  .cart-item-info{
    flex:1;
  }
  
  .cart-item-name{
    font-size:14px;
    font-weight:700;
    color:#0c456d;
    line-height:1.5;
    margin-bottom:6px;
  }
  
  .cart-item-price{
    font-size:15px;
    font-weight:700;
    color:#027ec4;
  
    font-family:'DM Serif Display', serif;
  }
  
  .qty-ctrl{
    display:inline-flex;
    align-items:center;
  
    border:1px solid #e0f0fe;
  
    border-radius:10px;
  
    overflow:hidden;
  
    margin-top:10px;
  }
  
  .qty-btn{
    width:32px;
    height:32px;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    background:#f0f8ff;
  
    border:none;
  
    cursor:pointer;
  
    font-size:15px;
  
    color:#027ec4;
  
    transition:.2s;
  }
  
  .qty-btn:hover{
    background:#e0f0fe;
  }
  
  .qty-val{
    width:38px;
  
    text-align:center;
  
    font-size:14px;
  
    font-weight:700;
  
    color:#0c456d;
  }
  
  .cart-remove{
    cursor:pointer;
  
    color:#94a3b8;
  
    font-size:18px;
  
    margin-top:4px;
  
    transition:.2s;
  }
  
  .cart-remove:hover{
    color:#ef4444;
  }
  
  .btn-checkout{
    width:100%;
  
    padding:14px;
  
    border:none;
  
    border-radius:14px;
  
    cursor:pointer;
  
    font-size:14px;
  
    font-weight:700;
  
    color:#fff;
  
    background:linear-gradient(
      135deg,
      #0e9de8,
      #027ec4
    );
  
    transition:.2s;
  }
  
  .btn-checkout:hover{
    opacity:.92;
    transform:translateY(-1px);
  }
  
  .cart-continue-btn{
    width:100%;
  
    margin-top:10px;
  
    padding:10px;
  
    border:none;
  
    background:none;
  
    cursor:pointer;
  
    font-size:13px;
  
    font-weight:500;
  
    color:#64748b;
  }
  
  @media(max-width:768px){
  
    .cart-sidebar{
      width:100%;
    }
  
    .cart-item-img{
      width:82px;
      height:82px;
    }
  
  }

  /* PREVIEW SIDEBAR */
  .preview-sidebar{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:520px;
    max-width:100vw;
    background:#fff;
    z-index:505;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    box-shadow:-18px 0 60px rgba(2,126,196,.12);
  }
  
  .preview-sidebar.open{
    transform:translateX(0);
  }
  
  .preview-header{
    padding:20px 24px 16px;
    border-bottom:1px solid #e0f0fe;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
  }
  
  .preview-body{
    flex:1;
    overflow-y:auto;
  }
  
  .preview-footer{
    padding:18px 24px 24px;
    border-top:1px solid #e0f0fe;
    background:#fff;
    flex-shrink:0;
  }
  
  .preview-image-wrap{
    position:relative;
    background:#ffffff;
    padding:0;
    aspect-ratio:1/1;
    overflow:hidden;
  }
  
  .preview-img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  
  /* DETAIL SECTION */
  .product-info-section{
    margin-top:10px;
  }
  
  .info-row{
    padding:20px 0;
    border-bottom:2px solid #d9eaf8;
  }
  
  .info-row:last-child{
    border-bottom:none;
  }
  
  .info-label{
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:10px;
  }
  
  .info-value{
    font-size:15px;
    line-height:1.9;
    font-weight:500;
    color:#075483;
  }
  
  /* TRUST BADGE */
  .trust-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 13px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:700;
    border:1px solid;
    white-space:nowrap;
  }

  #overlay-backdrop{
    position:fixed;
    inset:0;
  
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(4px);
  
    opacity:0;
    visibility:hidden;
  
    transition:.25s;
  
    z-index:500;
  }
  
  #overlay-backdrop.open{
    opacity:1;
    visibility:visible;
  }

  #category-list{
    max-height:420px;
    overflow-y:auto;
    padding-right:4px;
  }
  
  #category-list::-webkit-scrollbar{
    width:6px;
  }
  
  #category-list::-webkit-scrollbar-track{
    background:transparent;
  }
  
  #category-list::-webkit-scrollbar-thumb{
    background:#cde9fc;
    border-radius:999px;
  }

  /* misc */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;}
  .reveal.visible{opacity:1;transform:none;}
  .section-label{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#027ec4;margin-bottom:.5rem;}
  .section-label::before{content:'';display:block;width:20px;height:2px;background:#0e9de8;border-radius:2px;}
  .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:16px;text-align:center;}
  .close-btn{width:34px;height:34px;border-radius:10px;border:1px solid #e0f0fe;background:#f7fbff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7dcefb;transition:background .18s,color .18s;flex-shrink:0;}
  .close-btn:hover{background:#e0f0fe;color:#027ec4;}

  /* ── FOOTER ── */
  .footer-bg { background: #0a1628; }
  .footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(14,157,232,0.4), transparent); }
  .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 18px; }
  .footer-link { display: block; font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; padding: 4px 0; transition: color 0.2s, padding-left 0.2s; }
  .footer-link:hover { color: #38b5f8; padding-left: 6px; }
  .footer-social { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; }
  .footer-social:hover { background: rgba(14,157,232,0.15); border-color: rgba(14,157,232,0.4); color: #38b5f8; }
  .footer-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(14,157,232,0.08); border: 1px solid rgba(14,157,232,0.2); border-radius: 8px; padding: 6px 12px; font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }

  /* ==========================
  FOOTER MINI TITLE
  ========================== */

  .footer-mini-title{
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.28);
    margin-bottom:12px;
  }

  /* ==========================
    SHIPPING
  ========================== */

  .footer-shipping{
    margin-top:24px;
  }

  .shipping-logos{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  .shipping-logos img{
    width:58px;
    height:34px;

    object-fit:contain;

    background:#fff;
    padding:5px 8px;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.08);

    transition:.25s;
  }

  .shipping-logos img:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(14,157,232,.15);
  }

  /* ==========================
    MARKETPLACE
  ========================== */

  .footer-marketplace{
    margin-top:24px;
  }

  .marketplace-link{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:10px;

    font-size:13px;

    color:rgba(255,255,255,.50);

    text-decoration:none;

    transition:.2s;
  }

  .marketplace-link:hover{
    color:#38b5f8;
    transform:translateX(4px);
  }

  .marketplace-dot{
    width:9px;
    height:9px;

    border-radius:50%;

    flex-shrink:0;
  }

  .marketplace-dot.tokopedia{
    background:#42b549;
  }

  .marketplace-dot.shopee{
    background:#ee4d2d;
  }

  /* MOBILE */

  @media(max-width:768px){

    .footer-shipping,
    .footer-marketplace{
      margin-top:20px;
    }

    .shipping-logos img{
      width:52px;
      height:30px;
    }

  }
  /* ── FOOTER END ── */

    /* ── SHOPPING GUIDE TOOLTIP (floating, pojok kanan bawah) ── */
    .guide-fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg,#0e9de8,#027ec4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      box-shadow: 0 6px 24px rgba(2,126,196,0.35);
      z-index: 850;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .guide-fab:hover { transform: scale(1.07); box-shadow: 0 8px 28px rgba(2,126,196,0.45); }
    .guide-fab svg { width: 22px; height: 22px; }
    /* Denyut halus supaya pertama kali terlihat oleh pengunjung baru */
    .guide-fab::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #027ec4;
      opacity: 0.55;
      animation: guidePulse 2.4s ease-out infinite;
      pointer-events: none;
    }
    @keyframes guidePulse {
      0%   { transform: scale(1);   opacity: 0.45; }
      70%  { transform: scale(1.7); opacity: 0; }
      100% { transform: scale(1.7); opacity: 0; }
    }
  
    .guide-panel {
      position: fixed;
      bottom: 86px;
      right: 24px;
      width: 320px;
      max-width: calc(100vw - 32px);
      background: #fff;
      border-radius: 18px;
      border: 1px solid #e0f0fe;
      box-shadow: 0 16px 48px rgba(2,126,196,0.22);
      z-index: 851;
      padding: 18px;
      opacity: 0;
      transform: translateY(12px) scale(0.97);
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .guide-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .guide-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .guide-panel-title { font-family:'DM Serif Display',serif; font-size: 16px; color: #0c456d; }
    .guide-panel-sub { font-size: 11.5px; color: #7dabc9; margin-top: 1px; }
    .guide-panel-close {
      width: 24px; height: 24px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: #f0f8ff; border: none; cursor: pointer; flex-shrink: 0;
      color: #7dabc9; font-size: 14px; line-height: 1;
      transition: background 0.2s;
    }
    .guide-panel-close:hover { background: #e0f0fe; }
  
    .guide-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
    .guide-step { display: flex; align-items: flex-start; gap: 11px; }
    .guide-step-num {
      flex-shrink: 0;
      width: 24px; height: 24px; border-radius: 50%;
      background: #f0f8ff; border: 1.5px solid #b9e3fd;
      color: #027ec4; font-size: 11.5px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .guide-step-text { font-size: 12.5px; color: #3a6a8c; line-height: 1.5; padding-top: 2px; }
    .guide-step-text strong { color: #0c456d; font-weight: 700; }
  
    @media (max-width: 480px) {
      .guide-fab { bottom: 18px; right: 18px; width: 46px; height: 46px; }
      .guide-panel { bottom: 76px; right: 16px; left: 16px; width: auto; }
    }