/* Custom overrides & Elementor-friendly helpers */

.fs-footer-menu{list-style:none; display:flex; gap:12px; padding:0; margin:0; flex-wrap:wrap}
.fs-footer-menu li{margin:0}
.fs-footer-menu a{color:var(--fs-subtext); font-weight:700; font-size:13px}
.fs-footer-menu a:hover{color:var(--fs-primary)}

/* Woo mini cart (lebih kuat, agar tidak ketumpuk di halaman /shop) */
.fs-drawer .woocommerce-mini-cart{
  list-style:none;
  padding:0 !important;
  margin:0 !important;
}

.fs-drawer .woocommerce-mini-cart-item{
  display:grid !important;
  grid-template-columns:56px minmax(0, 1fr) auto !important;
  gap:10px !important;
  align-items:start !important;
  padding:10px 0 !important;
  border-bottom:1px solid var(--fs-border) !important;
}

.fs-drawer .woocommerce-mini-cart-item a{
  font-weight:800;
  display:block;
  line-height:1.25;
  word-break:break-word;
}

/* Pastikan gambar tidak bikin layout melebar */
.fs-drawer .woocommerce-mini-cart-item img{
  width:56px !important;
  height:56px !important;
  object-fit:cover;
  border-radius:12px;
  margin:0 !important;
}

/* Qty + harga biar rapi */
.fs-drawer .woocommerce-mini-cart-item .quantity{
  grid-column:2 / 3;
  color:var(--fs-subtext);
  font-size:12.5px;
  line-height:1.2;
}

/* tombol remove (X) di mini-cart: rapih + tidak ketabrak teks */
.fs-drawer .woocommerce-mini-cart-item a.remove{
  grid-column:3 / 4;
  justify-self:end;
  align-self:start;
  width:28px;
  height:28px;
  line-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  border:1px solid var(--fs-border);
  background:var(--fs-surface);
  color:var(--fs-text) !important;
  font-size:18px;
  font-weight:900;
}

/* Kalau theme menambahkan teks "Hapus" (hint), sembunyikan di mini-cart agar tidak berantakan */
.fs-drawer .woocommerce-mini-cart-item .fs-cart-remove-hint{
  display:none;
}

.fs-drawer .woocommerce-mini-cart__total{margin-top:10px; font-weight:900}

/* Better forms */
input, select, textarea{border-radius:12px; border:1px solid var(--fs-border); padding:10px 12px; background:var(--fs-surface); color:var(--fs-text)}

/* Woo checkout: rapikan nama depan/belakang (desktop) + tetap responsif */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{
  width:48%;
}
.woocommerce form .form-row-first{float:left; clear:both;}
.woocommerce form .form-row-last{float:right;}
@media (max-width: 640px){
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{
    width:100%;
    float:none;
  }
}

/* Cart: teks "Hapus" di samping ikon X */
.woocommerce-cart a.remove{display:inline-flex; align-items:center; gap:8px;}
.fs-cart-remove-hint{font-size:12px; font-weight:800; opacity:.85;}
@media (max-width: 640px){
  .fs-cart-remove-hint{font-size:11.5px}
}


/* Header user buttons (login/akun/logout) */
.fs-user-area{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.fs-user-name{font-weight:800; font-size:13px; opacity:.95}
.fs-btn-user{display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 10px; border-radius:12px; font-weight:900; font-size:13px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff}
.fs-btn-user.logout{background:rgba(17,24,39,.35); border-color:rgba(255,255,255,.18)}
@media (max-width: 640px){
  .fs-user-name{display:none}
  .fs-btn-user{height:34px; padding:0 9px; font-size:12.5px}
}

/* Footer copy: khusus mobile */
.fs-footer-copy--mobile{display:none}
@media (max-width: 640px){
  .fs-footer-copy--desktop{display:none}
  .fs-footer-copy--mobile{display:block}
  .fs-footer-tagline{display:none}
}

/* Cart page (mobile) fixes */
.woocommerce-cart .woocommerce{overflow-x:hidden}

/* Ensure cross-sells/related products are grid-based (avoid floats) */
.woocommerce-cart .cross-sells ul.products,
.woocommerce-cart .cart-collaterals ul.products,
.woocommerce-cart ul.products,
.woocommerce .related ul.products,
.woocommerce .upsells ul.products{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:0;
  padding:0;
}
@media (min-width: 768px){
  .woocommerce-cart .cross-sells ul.products,
  .woocommerce-cart .cart-collaterals ul.products,
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){
  .woocommerce-cart .cross-sells ul.products,
  .woocommerce-cart .cart-collaterals ul.products,
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

.woocommerce-cart .cross-sells ul.products li.product,
.woocommerce-cart .cart-collaterals ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  clear:none !important;
}

/* Prevent product cards from stretching weirdly */
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__link,
.woocommerce .related ul.products li.product .woocommerce-loop-product__link,
.woocommerce .upsells ul.products li.product .woocommerce-loop-product__link{
  display:block;
}

/* Make cart table more mobile-friendly */
@media (max-width: 640px){
  .woocommerce-cart table.shop_table{display:block; width:100%; overflow:auto; -webkit-overflow-scrolling:touch}
  .woocommerce-cart .cart-collaterals{margin-top:14px}
}



/* Product grids: 1 mobile, 2 tablet, 4 desktop */
@media (min-width: 600px){
  .woocommerce-cart .cross-sells ul.products,
  .woocommerce-cart .cart-collaterals ul.products,
  .woocommerce-cart ul.products,
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}


/* =============================
   My Account Dashboard (Buttons)
   ============================= */

.fs-account-dashboard{margin-top:8px}

.fs-account-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(10px, 2.2vw, 14px);
}

@media (max-width: 640px){
  .fs-account-grid{grid-template-columns:1fr; gap:10px}
}

.fs-account-tile{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  text-decoration:none;
  color:var(--fs-text);
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border:1px solid rgba(17,24,39,.10);
  box-shadow:0 10px 24px rgba(17,24,39,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:hidden;
}

/* subtle glow */
.fs-account-tile::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(circle at 20% 20%, rgba(99,102,241,.18), transparent 45%),
             radial-gradient(circle at 80% 30%, rgba(16,185,129,.14), transparent 40%);
  opacity:.9;
  transform:translateZ(0);
  pointer-events:none;
}

.fs-account-tile > *{position:relative}

.fs-account-tile__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(99,102,241,.12);
  border:1px solid rgba(99,102,241,.18);
  color:var(--fs-primary);
  flex:0 0 auto;
}

.fs-account-tile:nth-child(2) .fs-account-tile__icon{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.16);
  color:#ef4444;
}

.fs-account-tile:nth-child(3) .fs-account-tile__icon{
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.16);
  color:#10b981;
}

.fs-account-tile:nth-child(4) .fs-account-tile__icon{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.18);
  color:#FB7185;
}

.fs-account-tile__title{display:block; font-weight:900; font-size:15px; line-height:1.1}
.fs-account-tile__sub{display:block; margin-top:2px; font-size:12.5px; color:var(--fs-subtext)}

.fs-account-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(17,24,39,.10);
  border-color:rgba(99,102,241,.22);
}

.fs-account-tile:focus-visible{
  outline:3px solid rgba(99,102,241,.30);
  outline-offset:2px;
}


/* =============================
   Shop grid (rapi, tanpa bolong)
   ============================= */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .products{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:0;
}
@media (min-width: 700px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (min-width: 1024px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products{grid-template-columns:repeat(4, minmax(0, 1fr));}
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}

/* Kartu produk: tinggi konsisten, rapi di semua device */
.fs-card.fs-product{height:100%; display:flex; flex-direction:column;}
.fs-product__media{aspect-ratio:1/1; overflow:hidden; border-radius:14px;}
.fs-product__media img{width:100%; height:100%; object-fit:cover; display:block;}
.fs-product__body{display:flex; flex-direction:column; gap:6px; padding-top:10px;}
/* Biar kolom rapi: judul max 2 baris, tinggi konsisten */
.fs-product__name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
.fs-product__buy{margin-top:auto;}

/* Rating di kartu produk */
.fs-product__rating{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px}
.fs-product__rating .star-rating{margin:0}
.fs-product__rating-meta{font-size:12.5px; opacity:.9}

/* Pagination WooCommerce: samakan dengan style blog */
.woocommerce nav.woocommerce-pagination{margin-top:14px}
.woocommerce nav.woocommerce-pagination ul{border:0; display:flex; gap:8px; justify-content:center; padding:0; margin:0}
.woocommerce nav.woocommerce-pagination ul li{border:0; margin:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--fs-border);
  background:var(--fs-surface);
  font-weight:700;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--fs-primary);
  color:#fff;
  border-color:transparent;
}

/* =============================
   Reviews section (full width)
   ============================= */
.fs-product-reviews{margin-top:12px; padding:12px; border:1px solid var(--fs-border); border-radius:14px; background:var(--fs-surface)}
/* Pastikan ulasan di area summary selalu full width pada layout desktop */
@media (min-width: 900px){
  .single-product .summary .fs-product-reviews--in-summary{width:100%;}
}
.fs-product-reviews__summary{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed var(--fs-border)}
.fs-product-reviews__meta{font-size:13px; opacity:.9}
.fs-product-reviews .commentlist{list-style:none; margin:0; padding:0}
.fs-product-reviews .commentlist li{margin:10px 0; padding:12px; border:1px solid var(--fs-border); border-radius:12px; background:var(--fs-muted)}
.fs-product-reviews #respond{margin-top:12px; padding:12px; border:1px solid var(--fs-border); border-radius:12px; background:var(--fs-surface)}
.fs-product-reviews #respond input[type="text"],
.fs-product-reviews #respond input[type="email"],
.fs-product-reviews #respond textarea{width:100%; max-width:100%; border:1px solid var(--fs-border); border-radius:10px; padding:10px}
.fs-product-reviews #respond .form-submit input{width:100%; border-radius:12px; padding:12px; font-weight:900}

/* Bintang rating warna emas (shop + single) */
.star-rating span::before,
.woocommerce .star-rating span::before{color:#f5b301 !important;}
.woocommerce p.stars a{color:#f5b301 !important;}

/* Tombol kirim ulasan lebih kontras */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background: var(--fs-primary, #ee4d2d);
  color:#fff;
  border-color: transparent;
}
.woocommerce #respond input#submit:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  filter: brightness(.95);
}

/* =============================
   Shop tabs (Produk Terbaru / Produk Promo)
   ============================= */

.fs-section__head--shop{margin-bottom:10px}

.fs-shop-tabs{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between; /* kiri-kanan */
  gap:12px;
}

.fs-shop-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--fs-border);
  background:var(--fs-surface);
  color:var(--fs-text);
  font-weight:900;
  font-size:13.5px;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(17,24,39,.06);
}

.fs-shop-tab--right{justify-self:end}

.fs-shop-tab:hover{
  border-color:color-mix(in srgb, var(--fs-primary) 35%, var(--fs-border));
}

.fs-shop-tab.is-active{
  background:color-mix(in srgb, var(--fs-primary) 14%, var(--fs-surface));
  border-color:color-mix(in srgb, var(--fs-primary) 55%, var(--fs-border));
  color:var(--fs-primary);
}

/* Mobile/tablet: tombol tetap presisi dan enak dipandang */
@media (max-width: 640px){
  .fs-shop-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .fs-shop-tab{width:100%}
}


/* =============================
   FIX: Grid produk /shop harus rata
   Penyebab umum gap: rule Woo `.first{clear:both}` atau float/width override.
   Kita paksa layout grid + reset clear khusus halaman produk archive.
   ============================= */

.post-type-archive-product .woocommerce ul.products,
.tax-product_cat .woocommerce ul.products,
.tax-product_tag .woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px !important; /* sedikit lebih kecil biar rapih */
  grid-auto-flow:row dense;
}

@media (min-width: 768px){
  .post-type-archive-product .woocommerce ul.products,
  .tax-product_cat .woocommerce ul.products,
  .tax-product_tag .woocommerce ul.products{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
}

@media (min-width: 1024px){
  .post-type-archive-product .woocommerce ul.products,
  .tax-product_cat .woocommerce ul.products,
  .tax-product_tag .woocommerce ul.products{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
}

.post-type-archive-product .woocommerce ul.products li.product,
.tax-product_cat .woocommerce ul.products li.product,
.tax-product_tag .woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  clear:none !important;
}

/* Woo kadang memberi class first/last dengan clear. Matikan supaya tidak bikin bolong */
.post-type-archive-product .woocommerce ul.products li.product.first,
.tax-product_cat .woocommerce ul.products li.product.first,
.tax-product_tag .woocommerce ul.products li.product.first{
  clear:none !important;
}


/* =============================
   SHOP GRID (REQUEST): selalu 2 kolom sampai baris terakhir
   - Mobile/Tablet/Desktop tetap 2 kolom agar tidak ada bolong
   - Ini juga menghindari efek CSS plugin yang mengubah kolom
   ============================= */

.post-type-archive-product .woocommerce ul.products,
.tax-product_cat .woocommerce ul.products,
.tax-product_tag .woocommerce ul.products{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  justify-items:stretch;
}

.post-type-archive-product .woocommerce ul.products li.product,
.tax-product_cat .woocommerce ul.products li.product,
.tax-product_tag .woocommerce ul.products li.product{
  width:auto !important;
  max-width:none !important;
  justify-self:stretch;
}


/* =============================
   Homepage banner (di atas Produk Baru)
   ============================= */

.fs-home-banner{
  margin:10px 0 12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--fs-border);
  box-shadow:var(--fs-shadow);
}

.fs-home-banner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 6;
  object-fit:cover;
}

@media (max-width: 640px){
  .fs-home-banner img{aspect-ratio: 16 / 8;}
}


/* =============================
   CTA Login/Daftar (sebelum footer)
   ============================= */

.fs-auth-cta__inner{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.fs-auth-cta__title{font-weight:900; font-size:15px; line-height:1.2}
.fs-auth-cta__sub{margin-top:3px; color:var(--fs-subtext); font-size:13px}

.fs-auth-cta__actions{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width: 640px){
  .fs-auth-cta__inner{flex-direction:column; align-items:stretch}
  .fs-auth-cta__actions a{width:100%}
}


/* =============================
   WhatsApp bubble + popover
   ============================= */

.fs-wa-float{position:fixed;right:14px;bottom:86px;z-index:75}
@media(min-width:768px){.fs-wa-float{bottom:20px}}

.fs-wa-bubble{
  width:54px;
  height:54px;
  border-radius:999px;
  border:0;
  background:#25D366;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--fs-shadow);
  cursor:pointer;
}

.fs-wa-pop{
  position:absolute;
  right:0;
  bottom:62px;
  width:min(270px, calc(100vw - 28px));
  background:var(--fs-surface);
  color:var(--fs-text);
  border:1px solid var(--fs-border);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(17,24,39,.18);
  padding:12px;
  display:none;
}

.fs-wa-pop.is-open{display:block}

.fs-wa-pop__text{font-weight:900; font-size:13.5px; line-height:1.25}

.fs-wa-pop__btn{
  margin-top:10px;
  display:inline-flex;
  width:100%;
  align-items:center;
  justify-content:center;
  height:40px;
  border-radius:12px;
  background:#25D366;
  color:#fff;
  font-weight:900;
  text-decoration:none;
}

.fs-wa-pop::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:-8px;
  width:14px;
  height:14px;
  background:var(--fs-surface);
  border-right:1px solid var(--fs-border);
  border-bottom:1px solid var(--fs-border);
  transform:rotate(45deg);
}


/* =============================
   Homepage banner grid + CTA WA
   ============================= */

.fs-home-banner-grid{
  margin:10px 0 12px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--fs-border);
  box-shadow:var(--fs-shadow);
  background:var(--fs-surface);
  display:grid;
  grid-template-columns:1fr;
}

.fs-home-banner-grid__media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 7;
  object-fit:cover;
}

.fs-home-banner-grid__cta{
  padding:10px 12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--fs-primary) 12%, var(--fs-surface)), var(--fs-surface));
}

.fs-home-banner-grid__link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed color-mix(in srgb, var(--fs-primary) 55%, var(--fs-border));
  color:var(--fs-primary);
  font-weight:1000;
  letter-spacing:.2px;
  font-size:13px;
  background:color-mix(in srgb, var(--fs-primary) 6%, var(--fs-surface));
}

.fs-home-banner-grid__link:hover{
  background:color-mix(in srgb, var(--fs-primary) 10%, var(--fs-surface));
}

@media (min-width: 768px){
  .fs-home-banner-grid__media img{aspect-ratio: 16 / 6;}
  .fs-home-banner-grid__cta{padding:12px 14px;}
  .fs-home-banner-grid__link{font-size:13.5px;}
}


/* =============================
   CTA Akun (dipakai juga di homepage)
   ============================= */

.fs-auth-cta__inner{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.fs-auth-cta__title{font-weight:900; font-size:15px; line-height:1.2}
.fs-auth-cta__sub{margin-top:3px; color:var(--fs-subtext); font-size:13px}

.fs-auth-cta__actions{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width: 640px){
  .fs-auth-cta__inner{flex-direction:column; align-items:stretch}
  .fs-auth-cta__actions a{width:100%}
}


/* =============================
   Single Product Tabs (Desktop)
   - Rapikan "Deskripsi" & "Informasi tambahan"
   ============================= */

.single-product .woocommerce-tabs{margin-top:16px}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after{display:none !important}

@media (min-width: 1024px){
  .single-product .woocommerce-tabs{
    display:grid;
    grid-template-columns:220px minmax(0, 1fr);
    gap:16px;
    align-items:start;
  }

  .single-product .woocommerce-tabs ul.tabs{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
    border:0;
  }

  .single-product .woocommerce-tabs ul.tabs li{
    margin:0;
    padding:0;
    border:1px solid var(--fs-border);
    border-radius:14px;
    background:var(--fs-muted);
    overflow:hidden;
    width:100%;
  }

  .single-product .woocommerce-tabs ul.tabs li a{
    display:block;
    padding:12px 14px;
    font-weight:900;
    text-decoration:none;
    color:var(--fs-text);
  }

  .single-product .woocommerce-tabs ul.tabs li.active{
    background:var(--fs-surface);
    border-color:rgba(99,102,241,.35);
    box-shadow:0 10px 24px rgba(17,24,39,.06);
  }

  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    margin:0;
    padding:16px;
    border:1px solid var(--fs-border);
    border-radius:16px;
    background:var(--fs-surface);
  }

  .single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2{
    margin:0 0 10px;
    font-size:18px;
    font-weight:1000;
  }

  /* Table "Informasi tambahan" (lebih "hidup") */
  .single-product .woocommerce-tabs table.shop_attributes{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin:0;
    border:1px solid rgba(99,102,241,.20);
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(255,255,255,0));
  }

  [data-theme="dark"] .single-product .woocommerce-tabs table.shop_attributes{
    border-color:rgba(129,140,248,.22);
    background:linear-gradient(180deg, rgba(129,140,248,.10), rgba(17,24,39,0));
  }

  .single-product .woocommerce-tabs table.shop_attributes th,
  .single-product .woocommerce-tabs table.shop_attributes td{
    padding:11px 12px;
    border-bottom:1px solid var(--fs-border);
    vertical-align:top;
    background:transparent;
  }

  .single-product .woocommerce-tabs table.shop_attributes tr:last-child th,
  .single-product .woocommerce-tabs table.shop_attributes tr:last-child td{
    border-bottom:0;
  }

  .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) th,
  .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) td{
    background:rgba(99,102,241,.04);
  }

  [data-theme="dark"] .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) th,
  [data-theme="dark"] .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) td{
    background:rgba(129,140,248,.07);
  }

  .single-product .woocommerce-tabs table.shop_attributes th{
    width:200px;
    font-weight:1000;
    color:var(--fs-text);
    position:relative;
  }

  .single-product .woocommerce-tabs table.shop_attributes th::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg, var(--fs-primary), rgba(16,185,129,.85));
    border-radius:999px;
    opacity:.9;
  }

  .single-product .woocommerce-tabs table.shop_attributes td{
    color:var(--fs-subtext);
  }
}

/* Desktop: tetap rapi, tapi ikut styling baru */


/* Tabel atribut: lebih rapi + mudah dibaca */
@media (min-width: 1024px){
  .single-product .woocommerce-tabs table.shop_attributes{
    border:1px solid rgba(99,102,241,.20);
    border-radius:16px;
    overflow:hidden;
  }

  [data-theme="dark"] .single-product .woocommerce-tabs table.shop_attributes{
    border-color:rgba(129,140,248,.22);
  }

  .single-product .woocommerce-tabs table.shop_attributes th,
  .single-product .woocommerce-tabs table.shop_attributes td{
    border-bottom:1px solid var(--fs-border);
  }

  .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) th,
  .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) td{
    background:rgba(17,24,39,.03);
  }

  [data-theme="dark"] .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) th,
  [data-theme="dark"] .single-product .woocommerce-tabs table.shop_attributes tr:nth-child(odd) td{
    background:rgba(255,255,255,.04);
  }

  .single-product .woocommerce-tabs table.shop_attributes th{
    width:180px;
    white-space:nowrap;
  }

  .single-product .woocommerce-tabs table.shop_attributes td{
    word-break:break-word;
  }

  /* Link WA di atribut */
  .single-product .woocommerce-tabs a.fs-attr-wa{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background:#25D366;
    color:#fff;
    font-weight:900;
    text-decoration:none;
  }
  .single-product .woocommerce-tabs a.fs-attr-wa:hover{filter:brightness(.96)}
}


/* =============================
   Single Product: 3 kolom desktop
   - Kolom 1: Deskripsi
   - Kolom 2: Informasi tambahan
   - Kolom 3: CTA "Cari produk lainnya"
   Catatan:
   - Di mobile tetap seperti biasa (tab)
   ============================= */

@media (min-width: 1024px){
  /* Grid wrapper (dibuat via hook di inc/woocommerce.php) */
  .single-product .fs-tabs-grid{
    width:100%;
    max-width:var(--fs-max);
    margin:16px auto 0;
    padding:0 12px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 320px;
    gap:16px;
    align-items:start;
  }

  /* Sembunyikan tab navigation, tampilkan kedua panel sekaligus */
  .single-product .woocommerce-tabs ul.tabs{display:none !important}

  /* Reset layout tabs lama 2 kolom (kalau ada) */
  .single-product .woocommerce-tabs{display:block !important}

  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    display:block !important;
    margin:0;
    padding:16px;
    border:1px solid var(--fs-border);
    border-radius:16px;
    background:var(--fs-surface);
    box-shadow:0 10px 24px rgba(17,24,39,.04);
  }

  /* Pastikan panel urut: deskripsi dulu, tambahan kedua */
  .single-product .woocommerce-tabs #tab-description{grid-column:1}
  .single-product .woocommerce-tabs #tab-additional_information{grid-column:2}

  .single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2{
    margin:0 0 10px;
    font-size:18px;
    font-weight:1000;
  }

  /* Kolom CTA */
  .single-product .fs-tabs-cta{grid-column:3}
  .single-product .fs-tabs-cta .fs-card{position:sticky; top:16px}
}

@media (min-width: 1280px){
  .single-product .fs-tabs-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 360px}
}


/* =============================
   Desktop responsive fix (Rev4)
   Tujuan:
   - Tabs tetap bisa diklik (Deskripsi / Informasi tambahan)
   - Konten panjang tidak bikin halaman memanjang: panel diberi max-height + scroll
   - Layout desktop: Tabs kiri, Konten tengah, CTA kanan
   Override dari aturan Rev3 sebelumnya.
   ============================= */

@media (min-width: 1024px){
  .single-product .fs-tabs-grid{
    width:100%;
    max-width:var(--fs-max);
    margin:16px auto 0;
    padding:0 12px;
    display:grid;
    grid-template-columns:240px minmax(0, 1fr) 320px;
    gap:16px;
    align-items:start;
  }

  /* Jadikan area tabs menempati kolom 1-2 */
  .single-product .fs-tabs-grid .woocommerce-tabs{
    grid-column:1 / 3;
    display:grid;
    grid-template-columns:240px minmax(0, 1fr);
    gap:16px;
    margin:0;
    padding:0;
  }

  /* Tampilkan navigation tabs (jangan disembunyikan) */
  .single-product .woocommerce-tabs ul.tabs{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
    border:0;
  }

  .single-product .woocommerce-tabs ul.tabs li{
    margin:0;
    padding:0;
    border:1px solid var(--fs-border);
    border-radius:14px;
    background:var(--fs-muted);
    overflow:hidden;
    width:100%;
  }

  .single-product .woocommerce-tabs ul.tabs li a{
    display:block;
    padding:12px 14px;
    font-weight:1000;
    text-decoration:none;
    color:var(--fs-text);
  }

  .single-product .woocommerce-tabs ul.tabs li.active{
    background:var(--fs-surface);
    border-color:rgba(99,102,241,.35);
    box-shadow:0 10px 24px rgba(17,24,39,.06);
  }

  /* Panel konten: jangan paksa tampil semua, ikuti behavior default Woo (active panel saja) */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    margin:0;
    padding:16px;
    border:1px solid var(--fs-border);
    border-radius:16px;
    background:var(--fs-surface);
    box-shadow:0 10px 24px rgba(17,24,39,.04);

    /* Ini yang bikin tidak memanjang kebawah */
    max-height: min(70vh, 720px);
    overflow:auto;
  }

  /* Headline panel */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2{
    position:sticky;
    top:0;
    margin:-16px -16px 12px;
    padding:12px 16px;
    background:linear-gradient(180deg, var(--fs-surface), rgba(255,255,255,0));
    font-size:18px;
    font-weight:1000;
    z-index:2;
  }
  [data-theme="dark"] .single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2{
    background:linear-gradient(180deg, var(--fs-surface), rgba(0,0,0,0));
  }

  /* CTA kanan */
  .single-product .fs-tabs-cta{grid-column:3}
  .single-product .fs-tabs-cta .fs-card{position:sticky; top:16px}
}

@media (min-width: 1280px){
  .single-product .fs-tabs-grid{grid-template-columns:260px minmax(0, 1fr) 360px}
  .single-product .fs-tabs-grid .woocommerce-tabs{grid-template-columns:260px minmax(0, 1fr)}
}


/* =============================
   Rev5 Desktop Tabs Fix
   - Pastikan HANYA panel tab aktif yang terlihat di desktop
   - Mobile tidak diubah
   ============================= */

@media (min-width: 1024px){
  /* Override kemungkinan CSS lama yang memaksa semua panel tampil */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    display:none !important;
  }
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel.active{
    display:block !important;
  }
}


/* =============================
   Rev6 Responsive Width Fix (Desktop)
   - Benahi lebar agar tidak aneh/kepotong
   - 1024-1279px: 2 kolom (Tabs + Konten), CTA di bawah (full width)
   - >=1280px: 3 kolom (Tabs + Konten + CTA)
   Catatan: Ini override blok-blok sebelumnya.
   ============================= */

@media (min-width: 1024px){
  .single-product .fs-tabs-grid{
    width:100% !important;
    max-width:var(--fs-max) !important;
    margin:16px auto 0 !important;
    padding:0 12px !important;
    display:grid !important;
    grid-template-columns:240px minmax(0, 1fr) !important;
    gap:16px !important;
    align-items:start !important;
  }

  .single-product .fs-tabs-grid .woocommerce-tabs{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:240px minmax(0, 1fr) !important;
    gap:16px !important;
  }

  .single-product .woocommerce-tabs ul.tabs{width:100% !important}

  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    width:100% !important;
    min-width:0 !important;
  }

  /* CTA turun ke bawah untuk layar desktop kecil */
  .single-product .fs-tabs-cta{
    grid-column:1 / -1 !important;
  }

  .single-product .fs-tabs-cta .fs-card{
    position:static !important;
  }
}

@media (min-width: 1280px){
  .single-product .fs-tabs-grid{
    grid-template-columns:260px minmax(0, 1fr) 360px !important;
  }

  .single-product .fs-tabs-grid .woocommerce-tabs{
    grid-column:1 / 3 !important;
    grid-template-columns:260px minmax(0, 1fr) !important;
  }

  .single-product .fs-tabs-cta{
    grid-column:3 !important;
  }

  .single-product .fs-tabs-cta .fs-card{
    position:sticky !important;
    top:16px !important;
  }
}


/* =============================
   Rev7 Tabs Visible Fix (Desktop)
   Masalah:
   - Panel tidak punya class .active di markup awal, jadi Rev5 menyembunyikan semua.
   Solusi:
   - Default tampilkan #tab-description
   - Saat tab diklik, Woo biasanya mengubah display inline atau aria-hidden;
     kita dukung keduanya.
   - Mobile tidak diubah.
   ============================= */

@media (min-width: 1024px){
  /* Reset: sembunyikan semua panel dulu */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    display:none !important;
  }

  /* Default: tampilkan Deskripsi */
  .single-product .woocommerce-tabs #tab-description{
    display:block !important;
  }

  /* Jika Woo menandai panel dengan aria-hidden */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel[aria-hidden="false"]{
    display:block !important;
  }

  /* Jika Woo memakai inline style display:block */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel[style*="display: block"]{
    display:block !important;
  }

  /* Kompat: kalau ada class active */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel.active{
    display:block !important;
  }
}


/* =============================
   Rev8 Desktop Tabs Layout Final
   - Tab list di kiri
   - Panel konten di kanan (lebar penuh kolom)
   - Hanya 1 panel tampil (dikunci oleh JS + CSS fallback)
   ============================= */

@media (min-width: 1024px){
  /* Pastikan area tabs benar-benar 2 kolom (kiri=nav, kanan=panel) */
  .single-product .fs-tabs-grid .woocommerce-tabs{
    display:grid !important;
    grid-template-columns:260px minmax(0, 1fr) !important;
    gap:16px !important;
    align-items:start !important;
  }

  .single-product .fs-tabs-grid .woocommerce-tabs ul.tabs{
    grid-column:1 !important;
    position:sticky;
    top:16px;
    max-height: calc(100vh - 32px);
    overflow:auto;
  }

  .single-product .fs-tabs-grid .woocommerce-tabs .woocommerce-Tabs-panel{
    grid-column:2 !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* fallback: kalau ada panel yang masih kebuka, paksa hanya yang kita tandai */
  .single-product .fs-tabs-grid .woocommerce-tabs .woocommerce-Tabs-panel{
    display:none !important;
  }
  .single-product .fs-tabs-grid .woocommerce-tabs .woocommerce-Tabs-panel.fs-is-active{
    display:block !important;
  }
}


/* =============================
   Rev9 Tabs Desktop (Standar + Posisi Baru)
   Tujuan:
   - Tabs berada di bawah kategori (sudah via hook PHP)
   - Desktop tetap responsif
   - Hanya 1 panel tampil saat klik tab (tanpa layout grid aneh)
   ============================= */

@media (min-width: 1024px){
  .single-product .woocommerce-tabs{display:block !important; max-width:100% !important}

  /* Tab nav rapi (horizontal) */
  .single-product .woocommerce-tabs ul.tabs{
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    margin:12px 0 0;
    padding:0;
    border:0;
  }

  /* Panel: hide semua dulu, lalu tampilkan yang aktif */
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{display:none !important}
  .single-product .woocommerce-tabs #tab-description{display:block !important}

  .single-product .woocommerce-tabs .woocommerce-Tabs-panel[aria-hidden="false"],
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel[style*="display: block"],
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel.active{
    display:block !important;
  }

  .single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    margin:12px 0 0;
    padding:16px;
    border:1px solid var(--fs-border);
    border-radius:16px;
    background:var(--fs-surface);
  }
}


/* =============================
   Rev10 Desktop Grid 2 Kolom (Tanpa scroll horizontal)
   - 1 grid: Deskripsi (kiri) + Informasi tambahan (kanan)
   - Tombol CTA ada di bawah tabs (via hook PHP)
   - Hanya berlaku desktop
   ============================= */

@media (min-width: 1024px){
  /* Bungkus tabs jadi grid 2 kolom */
  .single-product .summary .woocommerce-tabs{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:16px;
    margin-top:12px;
  }

  /* Sembunyikan tombol tab (karena kita tampilkan 2 panel sekaligus) */
  .single-product .summary .woocommerce-tabs ul.tabs{
    display:none !important;
  }

  /* Paksa kedua panel tampil, masing-masing kolom */
  .single-product .summary .woocommerce-tabs #tab-description,
  .single-product .summary .woocommerce-tabs #tab-additional_information{
    display:block !important;
    margin:0;
    padding:14px;
    border:1px solid var(--fs-border);
    border-radius:16px;
    background:var(--fs-surface);
    min-width:0;
  }

  .single-product .summary .woocommerce-tabs #tab-description{grid-column:1}
  .single-product .summary .woocommerce-tabs #tab-additional_information{grid-column:2}

  /* Kecilkan teks supaya tidak perlu geser kanan */
  .single-product .summary .woocommerce-tabs,
  .single-product .summary .woocommerce-tabs *{
    font-size:13.5px;
    line-height:1.45;
  }

  .single-product .summary .woocommerce-tabs h2{
    font-size:15px;
    font-weight:1000;
    margin:0 0 10px;
  }

  /* Anti overflow horizontal */
  .single-product .summary .woocommerce-tabs,
  .single-product .summary .woocommerce-tabs .woocommerce-Tabs-panel,
  .single-product .summary .woocommerce-tabs .woocommerce-Tabs-panel *{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .single-product .summary .woocommerce-tabs .woocommerce-Tabs-panel img{
    max-width:100%;
    height:auto;
  }

  /* Table atribut biar tidak melebar */
  .single-product .summary .woocommerce-tabs table.shop_attributes th{
    width:140px;
    white-space:normal;
  }
  .single-product .summary .woocommerce-tabs table.shop_attributes td,
  .single-product .summary .woocommerce-tabs table.shop_attributes th{
    font-size:13px;
  }

  /* CTA full-width di bawah grid */
  .single-product .summary .fs-cta-under-tabs{
    grid-column:1 / -1;
  }
}


/* =============================
   Rev11: No horizontal scroll (Desktop)
   Target: Deskripsi + Informasi tambahan 2 kolom tetap rapi,
   semua teks terlihat tanpa perlu geser kanan.
   ============================= */

@media (min-width: 1024px){
  /* Hard stop untuk scroll horizontal */
  .single-product .summary,
  .single-product .summary .woocommerce-tabs,
  .single-product .summary .woocommerce-tabs .woocommerce-Tabs-panel{
    overflow-x:hidden !important;
  }

  /* Pastikan konten bisa wrap */
  .single-product .summary .woocommerce-tabs .woocommerce-Tabs-panel,
  .single-product .summary .woocommerce-tabs .woocommerce-Tabs-panel *{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Link/URL sering bikin melebar */
  .single-product .summary .woocommerce-tabs .woocommerce-Tabs-panel a{
    word-break:break-all;
  }

  /* Tabel atribut jangan melebar */
  .single-product .summary .woocommerce-tabs table.shop_attributes{
    width:100% !important;
    table-layout:fixed;
  }

  .single-product .summary .woocommerce-tabs table.shop_attributes th,
  .single-product .summary .woocommerce-tabs table.shop_attributes td{
    width:auto;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Biar judul kolom th tidak memaksa lebar */
  .single-product .summary .woocommerce-tabs table.shop_attributes th{
    width:36% !important;
  }
}


/* =============================
   Rev12: Tabs nav + highlight orange tipis (Desktop)
   - Tampilkan tombol tab lagi (sebagai navigasi scroll)
   - Warna aktif orange tipis
   ============================= */

@media (min-width: 1024px){
  /* Tampilkan tabs nav */
  .single-product .summary .woocommerce-tabs ul.tabs{
    display:flex !important;
    grid-column:1 / -1;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 10px;
    padding:0;
    border:0;
  }

  .single-product .summary .woocommerce-tabs ul.tabs li{
    margin:0;
    padding:0;
    border:1px solid var(--fs-border);
    border-radius:999px;
    background:var(--fs-muted);
    overflow:hidden;
  }

  .single-product .summary .woocommerce-tabs ul.tabs li a{
    display:block;
    padding:8px 12px;
    font-weight:1000;
    font-size:13px;
    text-decoration:none;
    color:var(--fs-text);
  }

  /* Active = orange tipis */
  .single-product .summary .woocommerce-tabs ul.tabs li.active{
    background:rgba(225,29,72,.10) !important;
    border-color:rgba(225,29,72,.25) !important;
  }

  .single-product .summary .woocommerce-tabs ul.tabs li.active a{
    color:#E11D48 !important;
  }
}


/* =============================
   Rev12: Table shop_attributes rapi desktop
   ============================= */

@media (min-width: 1024px){
  .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes{
    border:1px solid var(--fs-border);
    border-radius:14px;
    overflow:hidden;
    border-collapse:separate;
    border-spacing:0;
    background:var(--fs-surface);
  }

  .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes th,
  .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes td{
    padding:10px 12px;
    border-bottom:1px solid var(--fs-border);
    vertical-align:top;
  }

  .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes tr:last-child th,
  .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes tr:last-child td{
    border-bottom:0;
  }

  .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes tr:nth-child(odd) th,
  .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes tr:nth-child(odd) td{
    background:rgba(17,24,39,.03);
  }

  [data-theme="dark"] .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes tr:nth-child(odd) th,
  [data-theme="dark"] .single-product .summary .woocommerce-tabs #tab-additional_information table.shop_attributes tr:nth-child(odd) td{
    background:rgba(255,255,255,.04);
  }
}


/* =============================
   Toast notif (Add to cart)
   - Mengambang di kanan bawah
   - Auto-hide
   ============================= */
#fs-toast-host{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.fs-toast{
  pointer-events:auto;
  min-width:260px;
  max-width:min(360px, calc(100vw - 28px));
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(99,102,241,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:0 18px 42px rgba(17,24,39,.14);
  color:var(--fs-text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transform:translateY(10px);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}

[data-theme="dark"] .fs-toast{
  border-color:rgba(129,140,248,.26);
  background:linear-gradient(135deg, rgba(17,24,39,.92), rgba(17,24,39,.78));
  box-shadow:0 18px 42px rgba(0,0,0,.35);
}

.fs-toast.is-show{transform:translateY(0); opacity:1;}
.fs-toast.is-hide{transform:translateY(10px); opacity:0;}

.fs-toast__msg{font-weight:900; font-size:13.5px; line-height:1.2}
.fs-toast__actions{display:inline-flex; align-items:center; gap:8px}

.fs-toast__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  text-decoration:none;
  font-weight:1000;
  font-size:12.5px;
  color:#fff;
  background:linear-gradient(135deg, var(--fs-primary), #10b981);
  box-shadow:0 10px 20px rgba(99,102,241,.18);
}
.fs-toast__btn:hover{filter:brightness(.97)}

.fs-toast__close{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.25);
  color:var(--fs-text);
  font-size:20px;
  line-height:1;
  font-weight:900;
}

[data-theme="dark"] .fs-toast__close{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}

@media (max-width: 640px){
  #fs-toast-host{right:10px; left:10px; bottom:10px; align-items:stretch}
  .fs-toast{min-width:unset; max-width:unset}
}


/* =============================
   Single Product: Informasi Tambahan (lebih menarik)
   ============================= */
.single-product .fs-additional-under-title{
  margin:10px 0 12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(225,29,72,.22);
  background:linear-gradient(135deg, rgba(225,29,72,.10), rgba(251,113,133,.10));
  box-shadow:0 12px 28px rgba(17,24,39,.08);
}

[data-theme="dark"] .single-product .fs-additional-under-title{
  border-color:rgba(251,113,133,.22);
  background:linear-gradient(135deg, rgba(225,29,72,.18), rgba(251,113,133,.10));
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.single-product .fs-additional-under-title table.shop_attributes{
  margin:0;
}


/* =============================
   Mini Cart: Rapi + tombol Hapus + responsif
   ============================= */

/* Pastikan drawer tidak overflow horizontal */
.fs-drawer__panel, .fs-drawer__body{overflow-x:hidden !important;}

/* Panel width responsif */
.fs-drawer__panel{width:min(460px, 92vw);}
@media (max-width: 480px){
  .fs-drawer__panel{width:100vw; max-width:100vw; border-left:none;}
  .fs-drawer__head, .fs-drawer__foot{padding:12px;}
  .fs-drawer__body{padding:10px 12px;}
}
@media (min-width: 481px) and (max-width: 900px){
  .fs-drawer__panel{width:min(520px, 92vw);}
}
@media (min-width: 901px){
  .fs-drawer__panel{width:min(440px, 36vw);}
}

/* Item mini-cart: grid stabil, teks tidak keluar */
.fs-drawer .woocommerce-mini-cart-item{
  display:grid !important;
  grid-template-columns:56px minmax(0, 1fr) auto !important;
  grid-template-rows:auto auto !important;
  column-gap:10px !important;
  row-gap:6px !important;
  align-items:start !important;
  min-width:0 !important;
}

.fs-drawer .woocommerce-mini-cart-item img{
  width:56px !important;
  height:56px !important;
}

/* Nama produk lebih kecil tapi terbaca */
.fs-drawer .woocommerce-mini-cart-item > a:not(.remove){
  min-width:0 !important;
  overflow:hidden !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-word;
  line-height:1.25;
  font-weight:900;
  font-size:13px;
}

@media (max-width: 480px){
  .fs-drawer .woocommerce-mini-cart-item{
    grid-template-columns:48px minmax(0, 1fr) auto !important;
  }
  .fs-drawer .woocommerce-mini-cart-item img{
    width:48px !important;
    height:48px !important;
  }
  .fs-drawer .woocommerce-mini-cart-item > a:not(.remove){
    font-size:12.5px;
  }
}

/* Qty/harga jangan melebar */
.fs-drawer .woocommerce-mini-cart-item .quantity{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  margin:0 !important;
}

/* Tombol remove jadi 'Hapus' (tanpa X) */
.fs-drawer .woocommerce-mini-cart-item a.remove{
  justify-self:end;
  align-self:center;
  width:auto !important;
  height:auto !important;
  line-height:normal !important;
  padding:7px 10px !important;
  border-radius:10px !important;
  background:var(--fs-muted) !important;
  border:1px solid var(--fs-border) !important;
  font-size:0 !important;      /* sembunyikan simbol × */
  color:transparent !important;
  text-decoration:none !important;
  max-width:92px;
  white-space:nowrap;
  overflow:hidden;
}
.fs-drawer .woocommerce-mini-cart-item a.remove::after{
  content:"Hapus";
  font-size:12px;
  font-weight:900;
  color:var(--fs-text);
}

/* Hilangkan teks hint "Hapus" tambahan (kalau ada) */
.fs-drawer .woocommerce-mini-cart-item .fs-cart-remove-hint{display:none !important;}

/* Hilangkan tombol bawaan Woo di mini-cart (View cart / Checkout) */
.fs-drawer .woocommerce-mini-cart__buttons{display:none !important;}

/* Mini cart mobile: hilangkan link teks "Lihat Keranjang" / "Pembayaran" (kalau muncul) */
@media (max-width: 640px){
  .fs-drawer a.wc-forward,
  .fs-drawer a.checkout{display:none !important;}
}


/* =============================
   1) Product card: thumbnail + harga + qty + cart icon
   ============================= */

.fs-product{position:relative; overflow:hidden}
.fs-product__media{position:relative}

/* wishlist overlay */
.fs-product__overlay{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
}

.fs-product__overlay .fs-wishlist-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(17,24,39,.10);
  box-shadow:0 10px 24px rgba(17,24,39,.10);
}

/* area beli */
.fs-product__buy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

.fs-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--fs-border);
  border-radius:12px;
  overflow:hidden;
  background:var(--fs-surface);
}

.fs-qty__btn{
  width:36px;
  height:36px;
  border:0;
  background:var(--fs-muted);
  color:var(--fs-text);
  font-weight:900;
  cursor:pointer;
}

.fs-qty__input{
  width:52px;
  height:36px;
  border:0;
  text-align:center;
  font-weight:900;
  background:transparent;
  padding:0;
}

.fs-add-to-cart--icon{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--fs-border);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  color:var(--fs-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px rgba(17,24,39,.08);
}

.fs-add-to-cart--icon svg{width:20px;height:20px}

/* Animasi terbang */
.fs-fly-dot{
  position:fixed;
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--fs-primary);
  box-shadow:0 10px 24px rgba(17,24,39,.20);
  transform:translate(0,0) scale(1);
  opacity:1;
  z-index:9999;
  pointer-events:none;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}

[data-fs-open-cart].is-bump{transform:scale(1.08)}



/* =============================
   2) Thankyou / Pesanan berhasil (responsif)
   ============================= */

.fs-thankyou{padding:6px 0}

.fs-thankyou__hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background:linear-gradient(135deg, rgba(99,102,241,.12), rgba(34,197,94,.10));
  box-shadow:0 18px 40px rgba(17,24,39,.06);
}

.fs-thankyou__icon{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(34,197,94,.16);
  color:rgb(22,163,74);
}
.fs-thankyou__icon svg{width:24px;height:24px}

.fs-thankyou__title{margin:0; font-size:22px; line-height:1.2}
.fs-thankyou__subtitle{margin:4px 0 0; color:var(--fs-subtext); font-weight:700}

.fs-thankyou__cta{grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap}

.fs-thankyou__grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (min-width: 900px){
  .fs-thankyou__grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

.fs-thankyou__card{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow:0 14px 30px rgba(17,24,39,.06);
}

.fs-thankyou__label{font-size:12px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--fs-subtext)}
.fs-thankyou__value{margin-top:6px; font-size:15px; font-weight:900; color:var(--fs-text); word-break:break-word}

@media (max-width: 640px){
  .fs-thankyou__hero{grid-template-columns:1fr;}
  .fs-thankyou__cta .fs-btn{width:100%}
}


/* Auto-hide notice (cart) */
.fs-notice-hide{opacity:0; transform:translateY(-6px); transition:opacity .35s ease, transform .35s ease;}

/* =============================
   3-4) Single product: Deskripsi box + rapih setelah Informasi Tambahan
   ============================= */

.fs-product-description{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background:
    linear-gradient(135deg, rgba(99,102,241,.10), rgba(236,72,153,.08)),
    radial-gradient(800px 200px at 20% 0%, rgba(34,197,94,.12), transparent 60%);
}

.fs-product-description__title{margin:0 0 10px; font-size:16px; font-weight:900}
.fs-product-description__content{color:var(--fs-text); line-height:1.65}
.fs-product-description__content p{margin:0 0 10px}
.fs-product-description__content p:last-child{margin-bottom:0}

/* Pastikan tombol add-to-cart setelah informasi tambahan tetap nyaman di mobile */
.single-product form.cart{margin-top:12px}
.single-product form.cart .quantity{margin-right:10px}
@media (max-width: 640px){
  .single-product form.cart{display:grid; gap:10px}
  .single-product form.cart .quantity{margin:0}
  .single-product form.cart button.single_add_to_cart_button{width:100%}
}

/* Hapus styling overlay wishlist (tidak dipakai lagi) */
.fs-product__overlay{display:none !important;}

/* Woo notices: close button */
.woocommerce-message,.woocommerce-info,.woocommerce-error{position:relative; padding-right:44px}
.fs-notice-close{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.12);
  background:rgba(255,255,255,.75);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.fs-notice-close svg{width:18px;height:18px}

/* =============================
   4) Halaman pembayaran / order received (BACS) lebih menarik
   ============================= */

.fs-thankyou__details{margin-top:14px; display:grid; gap:12px}

.fs-thankyou__details .woocommerce-order-details,
.fs-thankyou__details .woocommerce-customer-details,
.fs-thankyou__details .woocommerce-bacs-bank-details,
.fs-thankyou__details .woocommerce-notice{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow:0 18px 40px rgba(17,24,39,.06);
}

.fs-thankyou__details h2,
.fs-thankyou__details h3{margin:0 0 10px; font-size:16px}

.fs-thankyou__details table{width:100%}
.fs-thankyou__details table th{font-weight:900}

/* bank details list rapi */
.woocommerce-bacs-bank-details .wc-bacs-bank-details{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.woocommerce-bacs-bank-details .wc-bacs-bank-details li{margin:0; padding:12px; border-radius:16px; border:1px dashed rgba(17,24,39,.14); background:rgba(99,102,241,.06)}

@media (min-width: 900px){
  .fs-thankyou__details{grid-template-columns:1.2fr .8fr; align-items:start}
  .fs-thankyou__details .woocommerce-order-details{grid-column:1 / 2}
  .fs-thankyou__details .woocommerce-bacs-bank-details{grid-column:2 / 3}
  .fs-thankyou__details .woocommerce-customer-details{grid-column:1 / -1}
}

/* Layout panels thankyou */
.fs-thankyou__panel-title{margin:0 0 10px; font-size:16px; font-weight:900}
.fs-thankyou__panel{padding:14px; border-radius:18px; border:1px solid rgba(17,24,39,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow:0 18px 40px rgba(17,24,39,.06);
}

/* Jadikan tabel order detail lebih readable di mobile */
.fs-thankyou__panel table.shop_table{margin:0}
.fs-thankyou__panel table.shop_table th,
.fs-thankyou__panel table.shop_table td{padding:10px 10px}

@media (max-width: 640px){
  .fs-thankyou__panel table.shop_table{display:block; width:100%; overflow:auto; -webkit-overflow-scrolling:touch}
}

/* Grid urutan panel: mobile 1 kolom; desktop 2 kolom dengan bank di kanan */
.fs-thankyou__details{margin-top:14px; display:grid; gap:12px}
@media (min-width: 900px){
  .fs-thankyou__details{grid-template-columns:1.2fr .8fr; align-items:start}
  .fs-thankyou__panel--order{grid-column:1/2}
  .fs-thankyou__panel--bank{grid-column:2/3}
  .fs-thankyou__panel--customer{grid-column:1/-1}
}





/* =========================
   SEO Area Section (Homepage)
   - Consistent with hero style (pink gradient)
   - Responsive: 1 col (mobile), 2 col (tablet), 3 col (desktop)
========================= */

.fs-area-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 768px){
  .fs-area-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
}
@media (min-width: 1024px){
  .fs-area-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;}
}

.fs-area-card{overflow:hidden}

.fs-area-card__head{
  border-radius:calc(var(--fs-radius) + 2px);
  padding:14px 14px 12px;
  color:#fff;
  background:linear-gradient(135deg, rgba(225,29,72,.95), rgba(251,113,133,.80));
}

.fs-area-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:8px;
}

.fs-area-card__title{
  margin:0;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
}
@media (min-width: 900px){
  .fs-area-card__title{font-size:19px}
}

.fs-area-card__body{padding:14px}

.fs-area-card__body p{
  margin:0 0 10px;
  color:var(--fs-subtext);
  font-size:13.5px;
  line-height:1.7;
}

.fs-area-card__body ul{
  margin:0 0 12px;
  padding-left:18px;
  color:var(--fs-text);
  font-size:13.5px;
  line-height:1.6;
}

.fs-area-card__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Outline button variant (lightweight) */
.fs-btn--outline{
  background:var(--fs-surface);
  border-color:var(--fs-border);
  color:var(--fs-text);
}
.fs-btn--outline:hover{
  background:var(--fs-muted);
}


/* -------------------------------------------------------------
 * Artikel (Homepage + Produk)
 * ----------------------------------------------------------- */
.fs-articles-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
}

.fs-article-card{
	display:flex;
	flex-direction:column;
	border:1px solid var(--fs-border);
	background:var(--fs-surface);
	border-radius:14px;
	overflow:hidden;
	transition:transform .18s ease, box-shadow .18s ease;
}

.fs-article-card:hover{
	transform:translateY(-2px);
	box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.fs-article-card__media{
	display:block;
	aspect-ratio:16/10;
	background:linear-gradient(135deg, rgba(255,105,180,.14), rgba(255,255,255,0));
}

.fs-article-card__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.fs-article-card__placeholder{
	width:100%;
	height:100%;
	background:linear-gradient(135deg, rgba(255,105,180,.16), rgba(145, 85, 255, .08));
}

.fs-article-card__body{
	padding:12px;
	display:flex;
	flex-direction:column;
	gap:8px;
}

.fs-article-card__meta{
	font-size:12px;
	color:var(--fs-subtext);
}

.fs-article-card__title{
	margin:0;
	font-size:15px;
	line-height:1.25;
}

.fs-article-card__title a{
	color:var(--fs-text);
	text-decoration:none;
}

.fs-article-card__title a:hover{ text-decoration:underline; }

.fs-article-card__excerpt{
	font-size:13px;
	color:var(--fs-subtext);
	line-height:1.5;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	min-height:calc(1.5em * 3);
}

.fs-article-card__actions{
	margin-top:auto;
}

/* button kecil (hanya untuk blok artikel) */
.fs-btn--sm{
	padding:8px 10px;
	font-size:13px;
	border-radius:12px;
}

/* Tablet */
@media (max-width: 1024px){
	.fs-articles-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 640px){
	.fs-articles-grid{ grid-template-columns:1fr; gap:12px; }
	.fs-article-card__title{ font-size:14px; }
}