/*
Theme Name: Bixbi Playful
Theme URI: http://192.109.139.203:50505/
Author: Bixbi
Description: A bold, playful WooCommerce theme for the Bixbi pet store — coral, teal & sunny yellow, chunky rounded type and shadowed cards.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: bixbi-playful
WC requires at least: 6.0
WC tested up to: 11.0
*/

:root{
  --coral:#FF6B5C; --coral-dark:#EF4433;
  --teal:#12B3A6; --teal-dark:#0C7E75; --teal-deep:#0C3B38;
  --yellow:#FFC93C; --yellow-soft:#FFE39A;
  --cream:#FFF8EE; --white:#ffffff;
  --ink:#2A2F36; --muted:#6A727A;
  --radius:24px; --radius-lg:36px; --pill:999px;
  --shadow:0 12px 30px rgba(42,47,54,.10);
  --shadow-lift:0 20px 44px rgba(239,68,51,.18);
  --container:1200px;
  --font-head:"Baloo 2", system-ui, sans-serif;
  --font-body:"Nunito", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head); line-height:1.1; margin:0 0 .4em; font-weight:800; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.25rem}
a{color:var(--teal-dark); text-decoration:none}
a:hover{color:var(--coral)}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:70px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 44px}
.section-head p{color:var(--muted); font-size:1.05rem; margin:0}
.eyebrow{display:inline-block; font-family:var(--font-head); font-weight:700; color:var(--coral);
  background:#fff; border:2px solid var(--yellow); padding:4px 16px; border-radius:var(--pill);
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px}

/* ---------- buttons ---------- */
.btn,.button,button.button,a.button,.wp-element-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.added_to_cart{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1;
  padding:14px 26px; border:none; border-radius:var(--pill); cursor:pointer;
  background:var(--teal); color:#fff !important; box-shadow:0 8px 18px rgba(18,179,166,.30);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease; text-align:center;
}
.btn:hover,.button:hover,a.button:hover,.wp-element-button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.added_to_cart:hover{
  transform:translateY(-3px); box-shadow:0 14px 26px rgba(18,179,166,.38); background:var(--teal-dark); color:#fff !important;
}
.btn-coral,.woocommerce a.button.alt,.woocommerce button.button.alt,.single_add_to_cart_button{
  background:var(--coral) !important; color:#fff !important; box-shadow:var(--shadow-lift) !important;
}
.btn-coral:hover,.woocommerce a.button.alt:hover,.single_add_to_cart_button:hover{background:var(--coral-dark) !important}
.btn-ghost{background:#fff; color:var(--ink) !important; box-shadow:0 8px 18px rgba(42,47,54,.10)}
.btn-ghost:hover{background:var(--yellow-soft); color:var(--ink) !important}
.btn-lg{padding:18px 34px; font-size:1.12rem}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:3px solid var(--yellow-soft)}
.site-header .container{display:flex; align-items:center; gap:24px; min-height:76px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800;
  font-size:1.7rem; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .dot{width:40px; height:40px; border-radius:50%; background:var(--coral); display:grid; place-items:center;
  font-size:1.15rem; box-shadow:0 6px 14px rgba(239,68,51,.35); transform:rotate(-6deg)}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none; display:flex; gap:6px; margin:0; padding:0}
.main-nav a{display:inline-block; padding:9px 16px; border-radius:var(--pill); color:var(--ink);
  font-weight:700; transition:background .15s,color .15s}
.main-nav a:hover,.main-nav .current-menu-item>a{background:var(--yellow-soft); color:var(--ink)}
.cart-link{display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:#fff;
  padding:10px 16px; border-radius:var(--pill); font-family:var(--font-head); font-weight:700;
  box-shadow:0 8px 18px rgba(18,179,166,.30)}
.cart-link:hover{background:var(--teal-dark); color:#fff; transform:translateY(-2px)}
.cart-link .count{background:var(--yellow); color:var(--ink); border-radius:var(--pill);
  min-width:22px; height:22px; display:grid; place-items:center; font-size:.8rem; padding:0 6px}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{padding:40px 0 20px}
.hero-panel{background:linear-gradient(135deg,var(--yellow) 0%,#FFDD77 100%); border-radius:var(--radius-lg);
  padding:64px 56px; display:grid; grid-template-columns:1fr; gap:32px; align-items:center;
  position:relative; overflow:hidden; box-shadow:var(--shadow)}
.hero-copy{max-width:34ch}
.hero-panel:before{content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px;
  background:rgba(255,255,255,.35); border-radius:50%}
.hero-panel:after{content:""; position:absolute; left:-60px; bottom:-90px; width:200px; height:200px;
  background:rgba(255,107,92,.25); border-radius:50%}
.hero-copy{position:relative; z-index:2}
.hero-copy h1{color:var(--teal-deep)}
.hero-copy p{font-size:1.2rem; color:#5a4a1e; font-weight:600; margin:0 0 26px; max-width:32ch}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-art{position:relative; z-index:2; display:grid; place-items:center}
.hero-blob{width:min(360px,80%); aspect-ratio:1; background:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:9rem; box-shadow:0 24px 50px rgba(0,0,0,.12);
  border:10px solid var(--coral)}
.hero-badge{position:absolute; background:#fff; border-radius:var(--pill); padding:10px 18px;
  font-family:var(--font-head); font-weight:800; box-shadow:var(--shadow); color:var(--teal-dark)}
.hero-badge.b1{top:6%; left:2%; transform:rotate(-8deg)}
.hero-badge.b2{bottom:8%; right:0; color:var(--coral); transform:rotate(6deg)}

/* ---------- category chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.chip{display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:var(--pill);
  font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:#fff;
  box-shadow:var(--shadow); transition:transform .16s}
.chip:hover{transform:translateY(-4px) rotate(-1deg); color:#fff}
.chip .emo{font-size:1.4rem}
.chip.c1{background:var(--coral)} .chip.c2{background:var(--teal)}
.chip.c3{background:#F4A73B} .chip.c4{background:var(--teal-dark)}
.chip.c5{background:#E8636F} .chip.c6{background:#5AA9A0}

/* ---------- product grid (WooCommerce) ---------- */
.woocommerce ul.products,.woocommerce-page ul.products,ul.products{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  gap:26px !important; margin:0 !important; padding:0 !important; list-style:none !important; float:none !important}
.woocommerce ul.products.columns-3,ul.products.columns-3{grid-template-columns:repeat(3,1fr) !important}
.woocommerce ul.products.columns-2,ul.products.columns-2{grid-template-columns:repeat(2,1fr) !important}
.woocommerce ul.products.columns-1,ul.products.columns-1{grid-template-columns:1fr !important}
/* kill WooCommerce clearfix pseudo-elements — with display:grid they become phantom cells and break alignment */
.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products::before,ul.products::after{content:none !important; display:none !important}
.woocommerce ul.products li.product,ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important; clear:none !important}
.woocommerce ul.products li.product::before{content:none !important; display:none !important}
.woocommerce ul.products li.product{
  background:#fff; border-radius:var(--radius); padding:16px 16px 20px; text-align:center;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; position:relative}
.woocommerce ul.products li.product:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift)}
.woocommerce ul.products li.product img{border-radius:18px; margin:0 auto 14px; background:var(--cream)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--ink); padding:0 4px 6px; min-height:2.4em}
.woocommerce ul.products li.product .price{color:var(--coral); font-weight:800; font-size:1.18rem; font-family:var(--font-head)}
.woocommerce ul.products li.product .price del{color:var(--muted); font-weight:600; margin-right:6px}
.woocommerce ul.products li.product .button{margin-top:14px}
.woocommerce ul.products li.product .onsale{background:var(--coral); color:#fff; border-radius:var(--pill);
  padding:4px 12px; font-family:var(--font-head); font-weight:700; position:absolute; top:14px; left:14px; min-height:auto}
.woocommerce .star-rating span:before{color:var(--yellow)}

/* ---------- trust band ---------- */
.trust{background:var(--teal); color:#fff; border-radius:var(--radius-lg); margin:0 auto; max-width:var(--container)}
.trust .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:42px}
.trust .item{text-align:center}
.trust .emo{font-size:2.2rem; display:block; margin-bottom:8px}
.trust .item strong{font-family:var(--font-head); display:block; font-size:1.05rem}
.trust .item span{color:rgba(255,255,255,.85); font-size:.92rem}

/* ---------- cta band ---------- */
.cta-panel{background:var(--coral); color:#fff; border-radius:var(--radius-lg); padding:56px; text-align:center;
  position:relative; overflow:hidden; box-shadow:var(--shadow)}
.cta-panel:before{content:""; position:absolute; inset:auto -60px -80px auto; width:240px; height:240px;
  background:rgba(255,255,255,.12); border-radius:50%}
.cta-panel h2{color:#fff; position:relative}
.cta-panel p{position:relative; margin:0 auto 24px; max-width:44ch; color:rgba(255,255,255,.92)}
.cta-form{position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta-form input{border:none; border-radius:var(--pill); padding:16px 22px; font-family:var(--font-body);
  font-size:1rem; min-width:min(340px,80vw)}

/* ---------- footer ---------- */
.site-footer{background:var(--teal-deep); color:#cfe4e1; margin-top:70px; border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.site-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding:64px 24px 32px; max-width:var(--container); margin:0 auto}
.site-footer h4{color:#fff; font-family:var(--font-head); font-size:1.1rem; margin-bottom:14px}
.site-footer .brand{color:#fff; margin-bottom:14px}
.site-footer p{color:#a9cbc7; font-size:.95rem}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:#bfe0dc; font-weight:600}
.site-footer a:hover{color:var(--yellow)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:20px; color:#8fb6b1; font-size:.9rem}

/* ---------- shop/archive tweaks ---------- */
.shop-main{padding:40px 0 20px; min-height:50vh}
.page-title,.woocommerce-products-header__title{font-family:var(--font-head)}
.woocommerce .woocommerce-result-count{float:none; display:block; color:var(--muted); font-weight:700; margin:0 0 14px}

/* sort-by dropdown */
.woocommerce .woocommerce-ordering{float:none; display:block; margin:0 0 26px}
.woocommerce .woocommerce-ordering select,.woocommerce select.orderby{
  font-family:var(--font-head); font-weight:700; color:var(--ink); background-color:#fff;
  border:2px solid var(--yellow-soft); border-radius:var(--pill); padding:11px 46px 11px 20px;
  cursor:pointer; box-shadow:var(--shadow); appearance:none; -webkit-appearance:none; font-size:.98rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF6B5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center}
.woocommerce .woocommerce-ordering select:hover,.woocommerce select.orderby:hover{border-color:var(--coral)}

/* pagination */
.woocommerce nav.woocommerce-pagination{margin-top:46px; text-align:center; border:none}
.woocommerce nav.woocommerce-pagination ul{display:inline-flex; flex-wrap:wrap; gap:10px; border:none; list-style:none; margin:0; padding:0}
.woocommerce nav.woocommerce-pagination ul li{border:none; margin:0; overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  font-family:var(--font-head); font-weight:800; min-width:46px; height:46px; padding:0 14px;
  display:inline-grid; place-items:center; border-radius:16px; background:#fff; color:var(--ink) !important;
  box-shadow:var(--shadow); border:none; transition:transform .15s, background .15s, color .15s}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--teal); color:#fff !important; transform:translateY(-3px)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--coral); color:#fff !important}

/* ---------- static pages (whitepaper-style content) ---------- */
.page-narrow{max-width:820px}
.page-content{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:56px; margin:20px 0 10px}
.page-content__title{margin-bottom:24px}
.page-content .entry{font-size:1.08rem; line-height:1.75; color:#39424b}
.page-content .entry h2{margin-top:1.6em; font-size:1.7rem}
.page-content .entry h3{margin-top:1.4em; color:var(--teal-dark); font-size:1.25rem}
.page-content .entry p{margin:0 0 1.1em}
.page-content .entry ul{margin:0 0 1.2em; padding-left:1.3em}
.page-content .entry li{margin-bottom:.5em}
.page-content .entry strong{color:var(--ink)}
.page-content .entry hr{border:none; border-top:2px solid var(--cream); margin:2em 0}
.page-content .entry .lead{font-size:1.22rem; color:var(--ink); font-weight:600}
@media(max-width:640px){.page-content{padding:32px 22px}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-panel{grid-template-columns:1fr; padding:40px; text-align:center}
  .hero-actions{justify-content:center}
  .hero-copy p{margin-left:auto; margin-right:auto}
  ul.products.columns-4{grid-template-columns:repeat(3,1fr)}
  .trust .grid{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .main-nav{display:none; position:absolute; top:76px; left:0; right:0; background:#fff; padding:12px 24px;
    box-shadow:var(--shadow); border-bottom:3px solid var(--yellow-soft)}
  .site-header.open .main-nav{display:block}
  .main-nav ul{flex-direction:column}
  .nav-toggle{display:inline-grid; place-items:center; width:44px; height:44px; border:none; background:var(--yellow-soft);
    border-radius:14px; font-size:1.3rem; cursor:pointer; margin-left:auto}
  ul.products.columns-4,ul.products.columns-3{grid-template-columns:repeat(2,1fr)}
  .trust .grid,.site-footer .cols{grid-template-columns:1fr}
  .hero-blob{font-size:6rem}
  .section{padding:48px 0}
}