/* ===== Peluches header/footer (extends style.css) ===== */

.pb-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.pb-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}
.pb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #1E293B;
  text-decoration: none;
}
.pb-brand svg { color: #ef4444; width: 28px; height: 28px; }
.pb-brand:hover { color: #1E293B; }
.pb-nav { display: flex; align-items: center; gap: 32px; }
.pb-nav a {
  color: #374151;
  text-decoration: none;
  font-size: 15px;
  transition: color .2s;
}
.pb-nav a:hover { color: #ef4444; }
.pb-header-actions { display: flex; align-items: center; gap: 16px; }
.pb-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1E293B;
  text-decoration: none;
  font-size: 14px;
  border: 1.5px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 8px;
  position: relative;
  transition: border-color .2s;
}
.pb-cart-link:hover { border-color: #ef4444; color: #1E293B; }
.pb-cart-link svg { width: 16px; height: 16px; }
.pb-cart-count {
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.pb-btn-sm { padding: 8px 18px; font-size: 14px; }
.pb-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.pb-menu-toggle span {
  width: 24px;
  height: 2px;
  background: #1E293B;
  border-radius: 2px;
  transition: all .2s;
}
.pb-nav-mobile {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #f3f4f6;
  padding: 12px 24px 20px;
}
.pb-nav-mobile a {
  color: #374151;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid #f9fafb;
}
.pb-nav-mobile a:last-child { border-bottom: none; }
.pb-nav-mobile.open { display: flex; }

@media (max-width: 900px) {
  .pb-nav, .pb-header-actions .pb-cart-link, .pb-header-actions .pb-btn { display: none; }
  .pb-menu-toggle { display: flex; }
}
@media (max-width: 420px) {
  .pb-header-actions .pb-cart-link { display: inline-flex; }
}

/* WooCommerce tweaks */
.woocommerce ul.products li.product a img { border-radius: 12px; }
.woocommerce .products .star-rating { color: #facc15; }
.woocommerce .price { color: #1E293B !important; font-weight: 800; font-size: 26px !important; }
.woocommerce .price del { color: #9ca3af !important; font-weight: 400; font-size: 18px !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: #dc2626 !important;
}
.woocommerce-message, .woocommerce-info { border-top-color: #ef4444 !important; }
.woocommerce-message::before, .woocommerce-info::before { color: #ef4444 !important; }

/* ===== Shop loop cards ===== */
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  padding: 0;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.pb-card-media { position: relative; }
.pb-card-media .pb-badge-popular { position: absolute; top: 14px; left: 14px; z-index: 10; }
.pb-card-media img { border-radius: 0 !important; }
.pb-card-body { padding: 20px 22px; }
.pb-card-body .woocommerce-loop-product__title {
  font-size: 18px;
  font-weight: 600;
  color: #1E293B;
  margin: 0 0 4px;
}
.pb-card-features { list-style: none; margin: 12px 0; padding: 0; }
.pb-card-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
  padding: 3px 0;
}
.pb-card-actions .button {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 12px !important;
}

/* ===== Single product page ===== */
.pb-single-product {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 32px 0;
}
.pb-single-product .woocommerce-product-gallery,
.pb-single-product .entry-summary {
  flex: 1 1 45%;
  min-width: 320px;
}
.pb-single-product .woocommerce-product-gallery img { border-radius: 16px; }
.pb-badge-popular {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 12px;
}
.pb-product-features {
  margin: 24px 0;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
}
.pb-product-features h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 12px;
}
.pb-product-features ul { list-style: none; margin: 0; padding: 0; }
.pb-product-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4b5563;
  font-size: 14px;
  padding: 6px 0;
}
.pb-feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}
.pb-voice-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 24px 0;
  padding: 20px 24px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}
.pb-voice-note-icon {
  width: 40px;
  height: 40px;
  background: #ef4444;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pb-voice-note-icon svg { width: 22px; height: 22px; color: #fff; }
.pb-voice-note strong { color: #1E293B; font-size: 15px; }
.pb-voice-note p { margin: 4px 0; color: #6b7280; font-size: 14px; }
.pb-voice-note a { color: #ef4444; font-weight: 600; font-size: 14px; text-decoration: none; }
.pb-voice-note a:hover { color: #dc2626; }

/* ---- floating pill navigation, ported from the prototype ---- */
.mtt-nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}
@media(min-width:640px){.mtt-nav{padding:16px 24px}}
.mtt-nav a,.mtt-nav button{font-family:'Nunito Sans',system-ui,sans-serif;text-decoration:none}

/* logo tile */
.mtt-logo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:12px;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);transition:opacity .2s}
.mtt-logo:hover{opacity:.85}
.mtt-logo img{width:28px;height:28px;display:block}

/* centred link pill. Full layout needs room for six links plus the right-hand
   group, so it appears at 1200px and the burger covers everything below. */
.mtt-pill{position:absolute;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:4px;padding:6px;border-radius:999px;background:rgba(0,0,0,.85);backdrop-filter:blur(6px)}
@media(min-width:1200px){.mtt-pill{display:flex}}
.mtt-pill a{padding:6px 15px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.85);transition:color .2s,background-color .2s;white-space:nowrap}
.mtt-pill a:hover{color:#fff}
.mtt-pill a.is-active{background:#fff;color:#1E293B}

/* right-hand group: cart and account share one pill, the CTA keeps its own */
.mtt-right{display:flex;align-items:center;gap:10px;margin-left:auto}

.mtt-actions{display:none;align-items:center;gap:2px;padding:5px;border-radius:999px;background:rgba(0,0,0,.85);backdrop-filter:blur(6px)}
@media(min-width:1200px){.mtt-actions{display:flex}}

.mtt-icon{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:999px;color:#fff;transition:background-color .2s}
.mtt-icon:hover{background:rgba(255,255,255,.14)}
.mtt-icon .pb-cart-count{position:absolute;top:-1px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#E11D48;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}

.mtt-account{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 10px;border-radius:999px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;white-space:nowrap;transition:color .2s,background-color .2s}
.mtt-account:hover{color:#fff;background:rgba(255,255,255,.14)}

.mtt-cta{display:none;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:600;transition:opacity .2s;white-space:nowrap}
@media(min-width:1200px){.mtt-cta{display:inline-flex}}
.mtt-cta:hover{opacity:.85}
.mtt-cta .dot,.mtt-overlay-cta .dot{width:6px;height:6px;flex:none;border-radius:999px;background:#E11D48}

/* burger, everything below 1200px */
.mtt-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:999px;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);cursor:pointer}
@media(min-width:1200px){.mtt-burger{display:none}}
.mtt-burger span{width:20px;height:2px;background:#fff;transition:transform .3s,opacity .3s}
.mtt-burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translateY(7px)}
.mtt-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mtt-burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translateY(-7px)}

/* full-screen overlay */
.mtt-overlay{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:0 32px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.mtt-overlay.is-open{opacity:1;pointer-events:auto}
@media(min-width:1200px){.mtt-overlay{display:none}}
.mtt-overlay>a{width:fit-content;font-family:'Baloo 2',system-ui,sans-serif;font-size:32px;font-weight:500;line-height:1.15;letter-spacing:-.02em;color:#1E293B;text-decoration:none}
.mtt-overlay>a.is-active{color:#E11D48}
.mtt-overlay-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:10px}
.mtt-overlay-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;background:#1E293B;color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.mtt-overlay-min{font-size:15px;font-weight:600;color:#334155;text-decoration:underline;text-underline-offset:4px}

/* the nav floats over the page, so nothing reserves space for it */
body.peluches main{padding-top:0}

/* focus rings: white on the dark chrome, slate on the light overlay */
.mtt-nav a:focus-visible,.mtt-nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mtt-overlay a:focus-visible{outline:2px solid #1E293B;outline-offset:4px}

/* --- nav clearance ---
   The bar floats over the page, so the first section of an inner page has to
   clear it. The home page hero is full-bleed and needs none. */
@media(max-width:1199px){
  body.peluches:not(.home) .elementor > .e-con:first-child{padding-top:100px!important}
}
@media(min-width:1200px){
  body.peluches:not(.home) .elementor > .e-con:first-child{padding-top:120px!important}
}

/* --- nav armour ---
   The theme styles every button, which was repainting the burger blue and
   could do the same to its hover and focus states. Pin every state. */
.mtt-burger,.mtt-burger:hover,.mtt-burger:focus,.mtt-burger:active,.mtt-burger:focus-visible{background:rgba(0,0,0,.85)!important;border:0!important;box-shadow:none!important;color:#fff!important;padding:0!important;border-radius:999px!important}
.mtt-burger span{background:#fff!important}
.mtt-nav .mtt-logo,.mtt-nav .mtt-logo:hover{background:rgba(0,0,0,.85)!important}
.mtt-nav .mtt-pill,.mtt-nav .mtt-actions,.mtt-nav .mtt-cta,.mtt-nav .mtt-cta:hover,.mtt-nav .mtt-cta:focus{background:rgba(0,0,0,.85)!important;color:#fff!important}
.mtt-pill a.is-active,.mtt-pill a.is-active:hover{background:#fff!important;color:#1E293B!important}
.mtt-overlay-cta,.mtt-overlay-cta:hover,.mtt-overlay-cta:focus{background:#1E293B!important;color:#fff!important}

/* --- what every bear includes ---
   Elementor ignores width/height on containers, so the icon badge and the
   equal-height cards are done here instead of in the element tree. */
/* Elementor drops _css_classes on containers, so the card is targeted by its
   position instead: section > row > column > card. flex-grow does the work,
   height is the belt-and-braces for older engines. */
#included .e-con > .e-con > .e-con{height:100%;flex-grow:1}
#included .mtt-inc-icon .elementor-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:#FFF1F2}
#included .mtt-inc-icon .elementor-icon svg,#included .mtt-inc-icon .elementor-icon img{width:24px;height:24px;display:block}
#included .mtt-inc-icon .elementor-icon-wrapper{text-align:left}

/* --- brand typography baseline ---
   Everything outside Elementor was rendering in the system stack: the footer,
   the shop, the cart, product pages and plain WordPress pages. Elementor
   widgets declare their own fonts so this does not fight them. */
body,button,input,select,textarea,.ast-button,.ast-custom-button,
.woocommerce,.woocommerce-page,.pb-footer,.wp-block-heading{
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif
}
h1,h2,h3,h4,h5,h6,.site-title,.pb-footer h3,.woocommerce-loop-product__title,
.product_title,.wp-block-heading{
  font-family:'Baloo 2',system-ui,-apple-system,sans-serif
}
/* Gutenberg's default font families, which shipped with placeholder content */
.has-cardo-font-family,.has-inter-font-family{font-family:'Baloo 2',system-ui,sans-serif!important}

/* --- palette corrections --- */
/* red 500 and the greys were left over from the old template */
.pb-brand svg{color:#E11D48}
.pb-nav a:hover{color:#E11D48}
.pb-cart-link:hover{border-color:#E11D48}
.pb-newsletter-form button,.pb-newsletter-form .pb-btn-red{background:#E11D48!important;color:#fff!important}
.pb-newsletter-form button:hover{background:#BE123C!important}
.woocommerce .price del{color:#64748B!important}
.pb-footer a{color:#CBD5E1}
.pb-footer a:hover{color:#fff}
.pb-footer p,.pb-footer li{color:#CBD5E1}
.pb-footer strong{color:#fff}

/* --- palette sweep ---
   Last of the old template's greys and red 500. Footer links move to slate 100
   so they sit inside the stated palette rather than near it. */
.pb-footer a,.pb-footer-bottom a,.pb-footer li a{color:#F1F5F9!important}
.pb-footer a:hover,.pb-footer-bottom a:hover{color:#fff!important}
.pb-footer p,.pb-footer li,.pb-footer-bottom,.pb-footer div{color:#F1F5F9}
[style*='#9CA3AF'],[style*='#9ca3af']{color:#64748B!important}
.pb-btn-red,.pb-btn-red:hover,button.pb-btn-red{background:#E11D48!important;border-color:#E11D48!important;color:#fff!important}
.pb-newsletter-form button,.pb-newsletter-form input[type=submit]{background:#E11D48!important}
.pb-newsletter-form button:hover{background:#BE123C!important}

/* --- woo buttons --- */
#collection .button,#collection .add_to_cart_button,.woocommerce a.button,.woocommerce button.button,
.woocommerce .button.alt,.woocommerce #respond input#submit{background:#E11D48!important;color:#fff!important;border-radius:999px!important}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button.alt:hover{background:#BE123C!important;color:#fff!important}