/*
Theme Name: Kidz-Vidz Shop
Theme URI: https://www.kidz-vidz.com
Description: Playful kid-friendly WooCommerce theme for Kidz-Vidz — bright, bold, built for parents to buy from. Includes animated hero, TV-framed products and 3D card tilt. Child theme of Storefront.
Author: Kidz-Vidz
Author URI: https://www.kidz-vidz.com
Template: storefront
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kidzvidz-shop
Tags: e-commerce, kids, colorful, woocommerce
*/

/* ============================================================
   KIDZ-VIDZ SHOP  v2
   Signature: products framed as retro TV screens (from the logo)
   ============================================================ */

:root{
  --kv-orange:#F16522;
  --kv-orange-dark:#C44F16;
  --kv-yellow:#F7CD58;
  --kv-rasp:#E12D4B;
  --kv-rasp-dark:#AD2039;
  --kv-sky:#5BC8F5;
  --kv-grass:#8BC34A;
  --kv-grass-dark:#6F9E37;
  --kv-grape:#B07BD4;
  --kv-cream:#FFF8EC;
  --kv-ink:#2B2118;
  --kv-ink-soft:#6B5D50;
  --kv-radius:22px;
}

body,button,input,select,textarea,.site{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  background-color:var(--kv-cream);
  color:var(--kv-ink);
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6,.site-title,.page-title,.entry-title,
.woocommerce-loop-product__title,.product_title,.widget-title,.cart_totals h2{
  font-family:'Baloo 2',cursive !important;
  letter-spacing:-.01em;line-height:1.15;color:var(--kv-ink);
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.kv-topbar{
  background:var(--kv-rasp);color:#fff;text-align:center;
  padding:.55rem 1rem;font-weight:700;font-size:.86rem;letter-spacing:.02em;
}

/* ---------- HEADER ---------- */
.site-header{
  background-color:var(--kv-cream) !important;
  border-bottom:3px solid rgba(43,33,24,.08);
  padding:1rem 0 !important;
}
.site-header .custom-logo{max-height:56px;width:auto}
.site-title a{color:var(--kv-ink) !important;font-size:1.5rem}
.site-description{color:var(--kv-orange) !important;font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.main-navigation ul li a{font-weight:700;color:var(--kv-ink) !important;border-bottom:3px solid transparent;transition:.18s}
.main-navigation ul li a:hover{color:var(--kv-orange) !important;border-bottom-color:var(--kv-yellow)}
.site-header-cart .cart-contents{
  background:var(--kv-orange);color:#fff !important;border-radius:999px;
  padding:.6rem 1.15rem;font-weight:800;box-shadow:0 3px 0 var(--kv-orange-dark);transition:.15s;
}
.site-header-cart .cart-contents:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--kv-orange-dark)}
.site-header-cart .cart-contents.kv-pop{animation:kvCartPop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes kvCartPop{0%{transform:scale(1)}35%{transform:scale(1.2) rotate(-8deg)}60%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1)}}

/* ---------- HERO ---------- */
.kv-hero{
  position:relative;overflow:hidden;padding:3.5rem 1.25rem 4rem;
  background:
    radial-gradient(circle at 12% 20%, rgba(91,200,245,.22) 0 18%, transparent 18.5%),
    radial-gradient(circle at 88% 12%, rgba(139,195,74,.20) 0 14%, transparent 14.5%),
    radial-gradient(circle at 78% 82%, rgba(176,123,212,.18) 0 16%, transparent 16.5%),
    var(--kv-cream);
}
.kv-hero-in{
  max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
}
.kv-eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--kv-yellow);
  color:var(--kv-ink);padding:.4rem .9rem;border-radius:999px;font-weight:800;
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.1rem;
  box-shadow:0 4px 0 rgba(43,33,24,.15);
}
.kv-hero h1{font-size:clamp(2.2rem,5vw,3.7rem) !important;margin-bottom:1rem !important}
.kv-hero h1 .kv-pop{color:var(--kv-orange)}
.kv-hero h1 .kv-pop2{color:var(--kv-sky)}
.kv-lede{font-size:1.1rem;color:var(--kv-ink-soft);max-width:34ch;margin-bottom:1.8rem;font-weight:600}
.kv-herobtns{display:flex;gap:.9rem;flex-wrap:wrap}
.kv-btn{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:800;font-size:1rem;border-radius:999px;padding:.9rem 1.6rem;transition:.15s;border:none;cursor:pointer;
}
.kv-btn-primary{background:var(--kv-rasp);color:#fff !important;box-shadow:0 4px 0 var(--kv-rasp-dark)}
.kv-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--kv-rasp-dark);color:#fff !important}
.kv-btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--kv-rasp-dark)}
.kv-btn-ghost{background:#fff;color:var(--kv-ink) !important;box-shadow:0 4px 0 rgba(43,33,24,.15)}
.kv-btn-ghost:hover{transform:translateY(-2px);color:var(--kv-ink) !important}

.kv-tvstage{position:relative;display:flex;justify-content:center;align-items:center;perspective:1000px}
.kv-tvbig{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 12px 0 rgba(43,33,24,.10));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.kv-hero:hover .kv-tvbig{transform:rotateY(-6deg) rotateX(3deg)}
.kv-float{position:absolute;animation:kvBob 4s ease-in-out infinite;will-change:transform}
.kv-f1{top:-4%;left:2%;animation-delay:.1s;font-size:2.6rem}
.kv-f2{bottom:2%;right:-2%;animation-delay:.9s;font-size:2.4rem}
.kv-f3{top:38%;right:-6%;animation-delay:1.6s;font-size:2.2rem}
@keyframes kvBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(4deg)}}

/* ---------- TRUST STRIP ---------- */
.kv-trust{background:#fff;border-top:3px solid rgba(43,33,24,.07);border-bottom:3px solid rgba(43,33,24,.07);padding:1.4rem 0}
.kv-trust-in{max-width:1180px;margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.kv-trust-item{display:flex;gap:.7rem;align-items:flex-start}
.kv-trust-item .kv-ic{font-size:1.5rem;line-height:1;flex:none}
.kv-trust-item b{display:block;font-family:'Baloo 2';font-size:1rem}
.kv-trust-item span{font-size:.84rem;color:var(--kv-ink-soft);font-weight:600}

/* ---------- SECTION HEADS ---------- */
.kv-sec-head{text-align:center;margin:0 auto 2.4rem;max-width:1180px;padding:0 1.25rem}
.kv-sec-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem) !important;margin-bottom:.5rem !important}
.kv-sec-head p{color:var(--kv-ink-soft);font-weight:600;max-width:52ch;margin:0 auto}

/* ---------- PRODUCT GRID — TV SCREENS ---------- */
.woocommerce ul.products{
  display:grid !important;grid-template-columns:repeat(3,1fr);gap:1.7rem;
  margin:0 0 2rem !important;perspective:1400px;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none !important}
.woocommerce ul.products li.product{
  background:#fff;border-radius:var(--kv-radius);overflow:hidden;position:relative;
  width:auto !important;margin:0 !important;float:none !important;padding:0 0 1.35rem !important;
  box-shadow:0 5px 0 rgba(43,33,24,.12);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .25s;
  display:flex;flex-direction:column;transform-style:preserve-3d;will-change:transform;
}
.woocommerce ul.products li.product.kv-tilting{transition:transform .08s linear}
.woocommerce ul.products li.product:hover{box-shadow:0 10px 0 rgba(43,33,24,.12)}

/* the TV frame */
.woocommerce ul.products li.product a img{
  border:5px solid var(--kv-ink);border-radius:18px;
  margin:1.1rem 1.1rem .9rem;width:calc(100% - 2.2rem);
  aspect-ratio:4/3;object-fit:cover;background:var(--kv-yellow);
  box-shadow:inset 0 -10px 22px rgba(0,0,0,.16);
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.woocommerce ul.products li.product:hover a img{transform:translateZ(30px) scale(1.04)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.14rem !important;padding:0 1.25rem .4rem !important;line-height:1.25;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{transform:translateZ(16px)}
.woocommerce ul.products li.product .price{
  font-family:'Baloo 2' !important;font-size:1.5rem !important;color:var(--kv-ink) !important;
  padding:0 1.25rem .8rem;display:block;
}
.woocommerce ul.products li.product .price del{opacity:.45;font-size:1rem}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--kv-rasp) !important}
.woocommerce ul.products li.product .button{margin:0 1.25rem !important;align-self:flex-start}

/* pointer glare */
.kv-glare{
  position:absolute;inset:1.1rem 1.1rem auto;height:calc(100% - 2.2rem);border-radius:18px;pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.40),rgba(255,255,255,0) 55%);
  opacity:0;transition:opacity .25s;z-index:2;
}
.woocommerce ul.products li.product:hover .kv-glare{opacity:1}

/* channel-change on filter */
@keyframes kvChannel{
  0%{opacity:1;transform:scaleY(1)}
  18%{opacity:.9;transform:scaleY(.006) scaleX(1.04);filter:brightness(2.4)}
  30%{opacity:.85;transform:scaleY(.006) scaleX(1.04);filter:brightness(2.4)}
  55%{opacity:1;transform:scaleY(1);filter:brightness(1)}
  100%{opacity:1;transform:scaleY(1)}
}
ul.products.kv-switching li.product{animation:kvChannel .42s ease both}
ul.products.kv-switching li.product:nth-child(2){animation-delay:.04s}
ul.products.kv-switching li.product:nth-child(3){animation-delay:.08s}
ul.products.kv-switching li.product:nth-child(4){animation-delay:.12s}
ul.products.kv-switching li.product:nth-child(5){animation-delay:.16s}
ul.products.kv-switching li.product:nth-child(6){animation-delay:.2s}
.kv-static{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 4px);
  mix-blend-mode:overlay;
}
.kv-static.kv-flash{animation:kvStatic .3s steps(3) both}
@keyframes kvStatic{0%{opacity:.6}100%{opacity:0}}

/* flying emoji */
.kv-flyer{position:fixed;z-index:150;pointer-events:none;font-size:2rem;transition:transform .75s cubic-bezier(.35,.1,.4,1),opacity .75s}

/* sale badge */
.woocommerce span.onsale{
  background-color:var(--kv-rasp) !important;color:#fff !important;font-family:'Nunito' !important;
  font-weight:800 !important;font-size:.72rem !important;border-radius:999px !important;
  padding:.28rem .75rem !important;min-height:auto !important;min-width:auto !important;
  line-height:1.5 !important;top:1.5rem !important;left:1.5rem !important;right:auto !important;margin:0 !important;z-index:3;
}

/* ---------- CATEGORY PILLS ---------- */
.kv-cats{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin:0 auto 2.2rem;max-width:1180px;padding:0 1.25rem}
.kv-cat{
  background:#fff;border:3px solid rgba(43,33,24,.10);border-radius:999px;
  padding:.55rem 1.15rem;font-weight:800;font-size:.9rem;cursor:pointer;
  transition:.16s;color:var(--kv-ink) !important;text-decoration:none;
  box-shadow:0 3px 0 rgba(43,33,24,.10);font-family:'Nunito';
}
.kv-cat:hover{transform:translateY(-3px);box-shadow:0 6px 0 rgba(43,33,24,.10);color:var(--kv-ink) !important}
.kv-cat.kv-on{background:var(--kv-ink);color:#fff !important;border-color:var(--kv-ink);box-shadow:0 3px 0 rgba(0,0,0,.35)}

/* ---------- BUTTONS ---------- */
button,input[type=button],input[type=reset],input[type=submit],.button,.added_to_cart{
  font-family:'Nunito' !important;font-weight:800 !important;border-radius:999px !important;
  border:none !important;padding:.75rem 1.5rem !important;transition:.15s !important;text-shadow:none !important;
}
.button.alt,button.alt,.single_add_to_cart_button,.checkout-button,#place_order,
button[name=woocommerce_checkout_place_order]{
  background-color:var(--kv-rasp) !important;color:#fff !important;box-shadow:0 4px 0 var(--kv-rasp-dark) !important;
}
.button.alt:hover,.single_add_to_cart_button:hover,.checkout-button:hover,#place_order:hover{
  background-color:var(--kv-rasp) !important;transform:translateY(-2px);box-shadow:0 6px 0 var(--kv-rasp-dark) !important;
}
.button.alt:active,.single_add_to_cart_button:active,.checkout-button:active{transform:translateY(2px);box-shadow:0 2px 0 var(--kv-rasp-dark) !important}
.woocommerce ul.products li.product .button,.add_to_cart_button{
  background-color:var(--kv-grass) !important;color:#fff !important;
  box-shadow:0 3px 0 var(--kv-grass-dark) !important;font-size:.88rem !important;padding:.6rem 1.1rem !important;
  position:relative;overflow:hidden;
}
.woocommerce ul.products li.product .button:hover,.add_to_cart_button:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--kv-grass-dark) !important}
.added_to_cart{background-color:var(--kv-sky) !important;color:#fff !important;box-shadow:0 3px 0 #3BA3CC !important;margin-left:.4rem}
.kv-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:kvRip .55s ease-out;pointer-events:none}
@keyframes kvRip{to{transform:scale(3.2);opacity:0}}

/* ---------- BOOKS SECTION ---------- */
.kv-books{background:linear-gradient(180deg,var(--kv-yellow) 0%,#FBDD88 100%);padding:3.6rem 1.25rem;margin-top:3rem}
.kv-books-in{max-width:1180px;margin:0 auto;text-align:center}
.kv-books h2{font-size:clamp(1.8rem,3.5vw,2.5rem) !important;margin-bottom:.7rem !important}
.kv-books p{color:#6b5320;font-weight:700;max-width:56ch;margin:0 auto 1.7rem}
.kv-bookrow{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.kv-bookcard{background:#fff;border-radius:16px;padding:1rem;width:155px;box-shadow:0 5px 0 rgba(43,33,24,.14);transition:.18s;perspective:600px}
.kv-bookcard:hover{transform:translateY(-4px) rotate(-1.5deg)}
.kv-bookcover{
  aspect-ratio:3/4;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2';color:#fff;font-size:.95rem;text-align:center;padding:.5rem;line-height:1.2;
  margin-bottom:.6rem;transition:transform .4s cubic-bezier(.2,.8,.3,1);transform-style:preserve-3d;
}
.kv-bookcard:hover .kv-bookcover{transform:rotateY(-16deg) translateZ(20px)}
.kv-bookcard b{font-size:.85rem;display:block;color:var(--kv-ink)}

/* ---------- PARENTS BAND ---------- */
.kv-parents{background:var(--kv-ink);color:#fff;padding:3.4rem 0}
.kv-parents-in{max-width:1180px;margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.kv-parents h2{color:#fff !important;font-size:clamp(1.7rem,3.2vw,2.3rem) !important;margin-bottom:.9rem !important}
.kv-parents p{color:rgba(255,255,255,.78);font-weight:600}
.kv-plist{list-style:none;display:grid;gap:.85rem;margin:0;padding:0}
.kv-plist li{display:flex;gap:.75rem;align-items:flex-start;font-weight:600}
.kv-tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--kv-grass);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#fff;font-weight:900}

/* ---------- SINGLE PRODUCT ---------- */
.single-product div.product .images img{border:6px solid var(--kv-ink);border-radius:20px;background:var(--kv-yellow)}
.single-product .product_title{font-size:clamp(1.8rem,3.4vw,2.5rem) !important}
.single-product div.product p.price{font-family:'Baloo 2' !important;font-size:2rem !important;color:var(--kv-rasp) !important}
.quantity .qty{border:3px solid rgba(43,33,24,.12);border-radius:999px;padding:.55rem;font-weight:800;font-family:'Nunito'}
.woocommerce-tabs ul.tabs li{border-radius:999px !important;background:#fff !important;border:3px solid rgba(43,33,24,.10) !important;margin-right:.5rem !important}
.woocommerce-tabs ul.tabs li.active{background:var(--kv-ink) !important;border-color:var(--kv-ink) !important}
.woocommerce-tabs ul.tabs li.active a{color:#fff !important}
.woocommerce-tabs ul.tabs li a{font-weight:800 !important;color:var(--kv-ink)}
.woocommerce-tabs ul.tabs::before{display:none}

/* ---------- CART & CHECKOUT ---------- */
.woocommerce-cart table.cart,.woocommerce-checkout-review-order-table,.cart_totals table{
  background:#fff;border-radius:var(--kv-radius);overflow:hidden;box-shadow:0 4px 0 rgba(43,33,24,.10);
}
.woocommerce table.shop_table th{font-family:'Baloo 2';color:var(--kv-ink);background:var(--kv-yellow)}
.woocommerce-cart table.cart img{border:3px solid var(--kv-ink);border-radius:12px;width:64px}
.woocommerce-info,.woocommerce-message{
  background:#fff !important;border-top-color:var(--kv-grass) !important;border-radius:14px;
  font-weight:700;box-shadow:0 3px 0 rgba(43,33,24,.10);
}
.woocommerce-info::before,.woocommerce-message::before{color:var(--kv-grass) !important}
.woocommerce-error{background:#fff !important;border-top-color:var(--kv-rasp) !important;border-radius:14px;font-weight:700}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.select2-container .select2-selection--single{
  border:3px solid rgba(43,33,24,.12) !important;border-radius:14px !important;
  padding:.75rem 1rem !important;font-family:'Nunito';font-weight:600;background:#fff;
}
.woocommerce form .form-row input.input-text:focus{border-color:var(--kv-sky) !important;outline:none}
.woocommerce form .form-row label{font-weight:800;color:var(--kv-ink)}
.woocommerce-checkout #payment{background:#fff;border-radius:var(--kv-radius);box-shadow:0 4px 0 rgba(43,33,24,.10)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:3px solid rgba(43,33,24,.08)}

/* ---------- FOOTER ---------- */
.site-footer{background-color:var(--kv-cream) !important;color:var(--kv-ink) !important;border-top:3px solid rgba(43,33,24,.08);padding-top:2.6rem}
.site-footer a{color:var(--kv-ink-soft) !important;font-weight:600}
.site-footer a:hover{color:var(--kv-orange) !important}
.site-footer h2,.site-footer .widget-title{font-family:'Baloo 2';color:var(--kv-ink) !important;font-size:1.05rem}

/* ---------- WIDGETS / PAGINATION ---------- */
.widget{background:#fff;border-radius:18px;padding:1.3rem;box-shadow:0 4px 0 rgba(43,33,24,.08);margin-bottom:1.5rem}
.woocommerce nav.woocommerce-pagination ul{border:none}
.woocommerce nav.woocommerce-pagination ul li{border:none;margin:0 .25rem}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border-radius:999px;background:#fff;font-weight:800;box-shadow:0 3px 0 rgba(43,33,24,.12);padding:.5rem .9rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--kv-ink);color:#fff}

/* ---------- SCROLL REVEAL ---------- */
.kv-reveal{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
.kv-reveal.kv-in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .kv-hero-in{grid-template-columns:1fr;gap:2.2rem;text-align:center}
  .kv-lede{margin-left:auto;margin-right:auto}
  .kv-herobtns{justify-content:center}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .kv-trust-in{grid-template-columns:repeat(2,1fr)}
  .kv-parents-in{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:640px){
  .woocommerce ul.products{grid-template-columns:1fr}
  .kv-trust-in{grid-template-columns:1fr}
  .kv-hero{padding:2.5rem 1rem 3rem}
}

/* ---------- MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .kv-reveal{opacity:1 !important;transform:none !important}
  .woocommerce ul.products li.product:hover{transform:none !important}
}
