/*
Theme Name: Wakeykoi Pro Mega
Theme URI: https://wakeykoi.uk/
Author: Wakeykoi & Aquatics LTD
Description: Mobile-first WooCommerce theme with wood-accent borders, light blue icons, black text, dropdown nav, breadcrumbs, 100+ species guides, and a 1000-intent chat assistant.
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: wakeykoi_pro_mega
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --blue:#4A90E2;
  --text:#000000;
  --bg:#ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}

a{color:var(--text);text-decoration:none}
a.button, .button, .wp-element-button, .wc-block-components-button__button{
  background:var(--blue);
  color:#fff;
  border-radius:12px;
  padding:.7rem 1.1rem;
  display:inline-block;
  border:2px solid var(--blue);
  font-weight:600;
}
.button.ghost{background:transparent;color:var(--blue);}

.container{max-width:1200px;margin:0 auto;padding:18px 14px}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);z-index:40;}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.brand img{height:42px}
.nav-links{display:flex;gap:14px;align-items:center}
.nav-links a{padding:8px 10px;border-radius:10px}
.nav-links .dropdown{position:relative}
.nav-links .dropdown-menu{display:none;position:absolute;top:110%;left:0;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;min-width:220px;box-shadow:0 10px 25px rgba(0,0,0,.08);}
.nav-links .dropdown:hover .dropdown-menu{display:block}
.nav-icons a{color:var(--text);}

.hamburger{display:none;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}
@media (max-width:880px){
  .nav-links{display:none}
  .hamburger{display:block}
  .mobile-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50}
  .mobile-sheet{position:absolute;right:0;top:0;height:100%;width:78%;max-width:360px;background:#fff;padding:18px;overflow:auto}
  .mobile-menu.open{display:block}
}

.hero{padding:36px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.hero .lead{font-size:15px;opacity:.9;margin:6px 0 0}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.section{padding:18px 0}
.section h2{font-size:24px;margin:0 0 12px;font-weight:700}

.grid{display:grid;gap:14px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.card{background:#fff;border-radius:16px;padding:14px; 
  position:relative;
  background:#fff;
  border:8px solid transparent;
  border-radius:16px;
  border-image: repeating-linear-gradient(
      45deg,
      #b9834e 0 6px,
      #a36c3a 6px 12px,
      #c59667 12px 18px,
      #8a5a30 18px 24px,
      #caa27b 24px 30px) 8 round;
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
 }
.card h3{margin:0 0 6px;font-size:18px}

.badge{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}

.breadcrumbs{font-size:13px;opacity:.8;margin:8px 0 8px}
.breadcrumbs a{color:var(--blue)}

.product-badge-collection{position:absolute;top:10px;left:10px;background:var(--blue);color:#fff;font-size:12px;border-radius:999px;padding:4px 10px}
.product-card{position:relative}

.site-footer{border-top:1px solid rgba(0,0,0,.08);margin-top:24px}
.footer-inner{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center}

/* Chat widget */
#wk-chat-launcher{position:fixed;right:16px;bottom:16px;background:var(--blue);color:#fff;border-radius:999px;padding:12px 16px;font-weight:700;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.2)}
#wk-chat{position:fixed;right:12px;bottom:72px;width:340px;max-width:92vw;background:#fff;border-radius:14px; 
  position:relative;
  background:#fff;
  border:8px solid transparent;
  border-radius:16px;
  border-image: repeating-linear-gradient(
      45deg,
      #b9834e 0 6px,
      #a36c3a 6px 12px,
      #c59667 12px 18px,
      #8a5a30 18px 24px,
      #caa27b 24px 30px) 8 round;
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
 padding:0;overflow:hidden;display:none;z-index:60}
#wk-chat.open{display:block}
#wk-chat header{background:var(--blue);color:#fff;padding:10px 12px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
#wk-chat .body{padding:10px;max-height:50vh;overflow:auto}
#wk-chat .msg{margin-bottom:8px;font-size:14px}
#wk-chat .msg.me{text-align:right}
#wk-chat .input{display:flex;gap:6px;border-top:1px solid rgba(0,0,0,.08);padding:8px}
#wk-chat .input input{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,.2)}
#wk-chat .input button{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:10px 12px;font-weight:600}