/*
Theme Name: Furry Smiles
Theme URI: https://furrysmiles.eu
Description: Storefront child theme for Furry Smiles -- EU pet supplies, "Bubblegum Pup" design system.
Author: Furry Smiles / Velacore WebServices
Template: storefront
Version: 1.0.0
Text Domain: furry-smiles
*/

/* ==========================================================================
   Furry Smiles -- Bubblegum Pup design tokens
   ========================================================================== */

:root{
  --fs-paper:      #FAF1E6;
  --fs-ink:         #2A2420;
  --fs-coral:       #E8654A;
  --fs-coral-dark:  #C2492F;
  --fs-teal:        #2F8F86;
  --fs-leaf-bg:     #DCEFD6;
  --fs-leaf-fg:     #3C6B2E;
  --fs-line:        #EBDFCB;
  --fs-sub:         #6E6355;

  --fs-font-display: 'Fredoka', sans-serif;
  --fs-font-body:    'Work Sans', sans-serif;
  --fs-font-mono:    'IBM Plex Mono', monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */

body{
  background: var(--fs-paper);
  color: var(--fs-ink);
  font-family: var(--fs-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title, .site-title a{
  font-family: var(--fs-font-display);
  font-weight: 600;
  color: var(--fs-ink);
}

a{
  color: var(--fs-teal);
}
a:hover, a:focus{
  color: var(--fs-coral-dark);
}

/* ==========================================================================
   Promo strip (injected via functions.php)
   ========================================================================== */

.fs-promo-strip{
  background: var(--fs-teal);
  color: #fff;
  text-align: center;
  font-family: var(--fs-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 12px;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header{
  background: var(--fs-paper);
  border-bottom: 1px solid var(--fs-line);
}

.main-navigation ul li a{
  font-family: var(--fs-font-body);
  font-weight: 500;
  color: var(--fs-ink);
}
.main-navigation ul li a:hover{
  color: var(--fs-coral);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
a.woocommerce-LoopProduct-link .add_to_cart_button,
.single_add_to_cart_button,
.checkout-button{
  background: var(--fs-coral) !important;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  font-family: var(--fs-font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background .15s;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover{
  background: var(--fs-coral-dark) !important;
}

/* ==========================================================================
   Product grid
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background: #fff;
  border: 1px solid var(--fs-line);
  border-radius: 12px;
  padding: 12px;
}

.woocommerce ul.products li.product .price{
  color: var(--fs-sub);
  font-family: var(--fs-font-body);
}
.woocommerce ul.products li.product .price ins{
  color: var(--fs-coral-dark);
}

.woocommerce span.onsale{
  background: var(--fs-coral);
  font-family: var(--fs-font-mono);
  font-size: 11px;
  border-radius: 20px;
}

/* Eco-tag badge -- apply the "fs-eco-badge" class to products tagged eco-friendly
   (see functions.php for the auto-badge hook) */
.fs-eco-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--fs-leaf-bg);
  color: var(--fs-leaf-fg);
  font-family: var(--fs-font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background: var(--fs-ink);
  color: var(--fs-paper);
}
.site-footer a{
  color: var(--fs-paper);
}