/* ============================================================
   Guan Kee — shop layer (custom): WhatsApp quote cart +
   related products. Reversible: remove gk-shop.css/.js + tags.
   Brand colours: green #2e9e4f (CTA), blue #1f3a93 (accent).
   ============================================================ */
:root{ --gk-green:#2e9e4f; --gk-green-d:#268043; --gk-blue:#1f3a93; }

/* ---------- Add-to-cart button (cards + single) ---------- */
.gk-add-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--gk-green); color:#fff; border:0; cursor:pointer;
  font:600 14px/1 inherit; padding:0 20px; height:40px; border-radius:5px;
  text-wrap:nowrap; white-space:nowrap; transition:background .2s ease, transform .15s ease;
}
.gk-add-btn:hover{ background:var(--gk-green-d); color:#fff; transform:translateY(-1px); }
.gk-add-btn svg{ width:18px; height:18px; fill:currentColor; }
.gk-add-btn.gk-added{ background:var(--gk-blue); }
.wd-add-btn-replace{ text-align:center; }

/* ---------- Floating cart button ---------- */
.gk-cart-fab{
  position:fixed; right:22px; bottom:24px; z-index:9998;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--gk-blue); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.gk-cart-fab:hover{ transform:scale(1.07); }
.gk-cart-fab svg{ width:26px; height:26px; fill:#fff; }
.gk-cart-fab .gk-badge{
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px;
  background:var(--gk-green); color:#fff; border-radius:11px; font:700 12px/22px system-ui,sans-serif;
  text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.3); transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.gk-cart-fab .gk-badge.show{ transform:scale(1); }

/* ---------- Drawer + overlay ---------- */
.gk-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.gk-overlay.open{ opacity:1; visibility:visible; }
.gk-drawer{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:90vw; z-index:10000;
  background:#fff; box-shadow:-6px 0 30px rgba(0,0,0,.18);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.gk-drawer.open{ transform:translateX(0); }
.gk-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid #eee;
}
.gk-drawer-head h3{ margin:0; font-size:18px; color:var(--gk-blue); font-weight:700; }
.gk-drawer-close{ background:none; border:0; font-size:26px; line-height:1; cursor:pointer; color:#888; }
.gk-drawer-close:hover{ color:#222; }
.gk-drawer-body{ flex:1; overflow-y:auto; padding:8px 16px; }
.gk-empty{ text-align:center; color:#999; padding:60px 20px; font-size:15px; }

.gk-line{ display:flex; gap:12px; padding:14px 4px; border-bottom:1px solid #f0f0f0; }
.gk-line-img{ width:64px; height:64px; flex:0 0 64px; border-radius:8px; overflow:hidden; background:#f6f6f6; }
.gk-line-img img{ width:100%; height:100%; object-fit:cover; }
.gk-line-info{ flex:1; min-width:0; }
.gk-line-name{ font-size:14px; font-weight:600; color:#222; text-decoration:none; display:block; line-height:1.3; }
.gk-line-name:hover{ color:var(--gk-blue); }
.gk-line-opt{ font-size:12px; color:#888; margin-top:2px; }
.gk-qty{ display:inline-flex; align-items:center; margin-top:8px; border:1px solid #ddd; border-radius:6px; overflow:hidden; }
.gk-qty button{ width:28px; height:28px; border:0; background:#f5f5f5; cursor:pointer; font-size:16px; color:#333; }
.gk-qty button:hover{ background:#e9e9e9; }
.gk-qty span{ min-width:34px; text-align:center; font-size:14px; font-weight:600; }
.gk-line-remove{ background:none; border:0; color:#c0392b; cursor:pointer; font-size:12px; align-self:flex-start; margin-left:auto; }
.gk-line-remove:hover{ text-decoration:underline; }

.gk-drawer-foot{ padding:16px 20px; border-top:1px solid #eee; }
.gk-note{ font-size:12px; color:#999; text-align:center; margin:0 0 12px; }
.gk-quote-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#25D366; color:#fff; border:0; cursor:pointer; height:50px; border-radius:8px;
  font:700 15px/1 inherit; transition:background .2s ease;
}
.gk-quote-btn:hover{ background:#1da851; }
.gk-quote-btn svg{ width:22px; height:22px; fill:#fff; }
.gk-clear{ display:block; width:100%; text-align:center; margin-top:10px; background:none; border:0; color:#999; cursor:pointer; font-size:13px; }
.gk-clear:hover{ color:#c0392b; }

/* ---------- Toast ---------- */
.gk-toast{
  position:fixed; left:50%; bottom:32px; transform:translate(-50%,20px); z-index:10001;
  background:#222; color:#fff; padding:12px 22px; border-radius:30px; font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; visibility:hidden; transition:all .3s ease; pointer-events:none;
}
.gk-toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }

/* ---------- Related products ---------- */
.gk-related{ padding:50px 0 10px; }
.gk-related-inner{ max-width:1222px; margin:0 auto; padding:0 20px; }
.gk-related h2{ font-size:26px; color:#222; margin:0 0 26px; font-weight:700; text-align:center; }
.gk-related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.gk-rel-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.gk-rel-card:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,.10); }
.gk-rel-thumb{ display:block; aspect-ratio:7/8; background:#f6f4ef; overflow:hidden; }
.gk-rel-thumb img{ width:100%; height:100%; object-fit:cover; }
.gk-rel-body{ padding:14px 14px 18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.gk-rel-title{ font-size:15px; font-weight:600; color:#222; text-decoration:none; line-height:1.35; flex:1; }
.gk-rel-title:hover{ color:var(--gk-blue); }
.gk-rel-card .gk-add-btn{ width:100%; }
@media (max-width:1024px){ .gk-related-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .gk-related-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } .gk-related h2{ font-size:22px; } }

/* ---------- Remove WoodMart scroll-to-top (cart FAB owns that corner) ---------- */
.scrollToTop, #wd-scroll-top-js, .wd-scroll-to-top{ display:none !important; }

/* ---------- Instant product search dropdown ---------- */
.gk-search-wrap{ position:relative; }
/* suppress the dead WooCommerce AJAX results, show ours instead */
.woodmart-ajax-search .wd-search-results{ display:none !important; }
.gk-search-results{
  position:absolute; top:100%; left:0; right:0; z-index:10002;
  background:#fff; border:1px solid #eee; border-radius:10px; margin-top:8px;
  box-shadow:0 14px 36px rgba(0,0,0,.14); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease; max-height:60vh; overflow-y:auto;
}
.gk-search-results.open{ opacity:1; visibility:visible; transform:translateY(0); }
.gk-search-item{ display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none; border-bottom:1px solid #f4f4f4; }
.gk-search-item:last-child{ border-bottom:0; }
.gk-search-item:hover{ background:#f6f8f6; }
.gk-search-thumb{ width:46px; height:46px; flex:0 0 46px; border-radius:6px; overflow:hidden; background:#f3f3f3; }
.gk-search-thumb img{ width:100%; height:100%; object-fit:cover; }
.gk-search-name{ font-size:14px; color:#222; font-weight:500; line-height:1.3; }
.gk-search-item:hover .gk-search-name{ color:var(--gk-blue); }
.gk-search-empty{ padding:18px 16px; text-align:center; color:#999; font-size:14px; }

/* ---------- Custom filter bar (category / shop pages) ---------- */
.gk-filterbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 24px; padding:12px 0;
}
.gk-filterbar-label{ font-weight:700; color:var(--gk-blue); font-size:14px; margin-right:4px; }
.gk-fdrop{ position:relative; }
.gk-fdrop-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:#fff; border:1px solid #d8d8d8; border-radius:24px; padding:8px 16px;
  font:500 13px/1 inherit; color:#333; transition:border-color .2s, box-shadow .2s;
}
.gk-fdrop-btn i{ font-style:normal; font-size:10px; opacity:.6; }
.gk-fdrop-btn:hover{ border-color:var(--gk-blue); }
.gk-fdrop.open .gk-fdrop-btn{ border-color:var(--gk-blue); box-shadow:0 0 0 3px rgba(31,58,147,.10); }
.gk-fdrop.gk-active .gk-fdrop-btn{ background:var(--gk-blue); color:#fff; border-color:var(--gk-blue); }
.gk-fdrop.gk-active .gk-fdrop-btn i{ opacity:.9; }
.gk-fdrop-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:50; min-width:190px; max-height:300px; overflow-y:auto;
  background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.14);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .16s ease;
}
.gk-fdrop.open .gk-fdrop-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.gk-fopt{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:#333; }
.gk-fopt:hover{ background:#f5f7f5; }
.gk-fopt input{ width:16px; height:16px; accent-color:var(--gk-green); cursor:pointer; }
.gk-fclear{ background:none; border:0; color:#c0392b; cursor:pointer; font-size:13px; font-weight:600; padding:8px 6px; }
.gk-fclear:hover{ text-decoration:underline; }
.gk-fcount{ margin-left:auto; color:#999; font-size:13px; }
@media (max-width:600px){ .gk-fcount{ width:100%; margin:6px 0 0; } }

/* ---------- Interactive shop browser (category pills + product grid) ---------- */
.gk-shop{ margin:6px 0 10px; }
/* layout: sidebar + main */
.gk-shop-layout{ display:flex; align-items:flex-start; gap:36px; margin:10px 0; }
.gk-shop-sidebar{ flex:0 0 232px; position:sticky; top:24px; }
.gk-shop-main{ flex:1; min-width:0; }

/* category sidebar */
.gk-side-title{ font:700 12px/1 inherit; text-transform:uppercase; letter-spacing:.09em; color:#9a9488; margin:0 0 14px; padding:0 14px; }
.gk-cat-list{ list-style:none; margin:0; padding:0; }
.gk-cat-list li{ margin:0; }
.gk-cat-list button{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:none; border:0; text-align:left; cursor:pointer;
  padding:11px 14px; border-radius:9px; font:500 14.5px/1.25 inherit; color:#454545;
  transition:background .15s ease, color .15s ease;
}
.gk-cat-name{ flex:1; }
.gk-cat-n{ font:600 11px/1 inherit; color:#9a9488; background:rgba(0,0,0,.05); padding:3px 9px; border-radius:11px; flex:0 0 auto; }
.gk-cat-list button:hover{ background:#efece3; color:var(--gk-blue); }
.gk-cat-list button.active{ background:var(--gk-blue); color:#fff; font-weight:600; }
.gk-cat-list button.active .gk-cat-n{ background:rgba(255,255,255,.22); color:#fff; }

/* mobile category dropdown (hidden on desktop) */
.gk-shop-mobilecat{ display:none; margin:0 0 18px; }
.gk-cat-select{
  width:100%; padding:13px 14px; border:1px solid #dcdcdc; border-radius:9px;
  font:600 15px/1 inherit; color:#333; background:#fff;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#1f3a93 50%),linear-gradient(135deg,#1f3a93 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}

/* product grid (3-up beside the sidebar) */
.gk-shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

@media (max-width:991px){
  .gk-shop-layout{ flex-direction:column; gap:0; margin-top:4px; }
  .gk-shop-sidebar{ display:none; }
  .gk-shop-mobilecat{ display:block; }
  .gk-shop-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
}
@media (max-width:480px){
  .gk-shop-grid{ gap:12px; }
}
.gk-shop-empty{ grid-column:1/-1; text-align:center; color:#999; padding:50px 20px; font-size:15px; }
.gk-shop-more{ text-align:center; margin:34px 0 6px; }
.gk-loadmore{
  background:#fff; border:1px solid var(--gk-blue); color:var(--gk-blue); cursor:pointer;
  border-radius:30px; padding:12px 36px; font:600 14px/1 inherit; transition:background .2s, color .2s;
}
.gk-loadmore:hover{ background:var(--gk-blue); color:#fff; }
.gk-shop-filterhost .gk-filterbar{ margin-bottom:18px; }

/* ---------- Standardise section backgrounds to brand cream (#F6F3ED) ---------- */
/* Related Products + Recently Viewed (both use .gk-related) */
.gk-related{ background:#F6F3ED !important; }
/* Product "Description" section (the Elementor container holding the description widget) */
.e-con.e-parent:has(.elementor-widget-wd_single_product_content),
.e-con.e-parent:has(.elementor-widget-wd_single_product_content) > .e-con-inner{
  background-color:#F6F3ED !important;
}

/* ---------- FAQ section (product pages) ---------- */
.gk-faq{ background:#F6F3ED; padding:46px 0 30px; }
.gk-faq-inner{ max-width:900px; margin:0 auto; padding:0 20px; }
.gk-faq h2{ text-align:center; font-size:26px; color:#222; margin:0 0 26px; font-weight:700; }
.gk-faq details{ background:#fff; border:1px solid #ececec; border-radius:10px; margin-bottom:12px; overflow:hidden; }
.gk-faq summary{ cursor:pointer; padding:16px 48px 16px 20px; font-weight:600; font-size:15px; color:#222; list-style:none; position:relative; }
.gk-faq summary::-webkit-details-marker{ display:none; }
.gk-faq summary::after{ content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; line-height:1; color:var(--gk-blue); }
.gk-faq details[open] summary::after{ content:'\2212'; }
.gk-faq details > div{ padding:0 20px 18px; color:#555; line-height:1.65; font-size:14px; }
@media (max-width:600px){ .gk-faq h2{ font-size:22px; } }

/* ---------- Defensive: hide any reviews section if a product uses classic layout ---------- */
#reviews, #tab-reviews, li.reviews_tab, .woocommerce-Reviews,
.wd-single-tabs .reviews_tab, .woocommerce-tabs #reviews{ display:none !important; }