/*
Theme Name: Frog Street Storefront (Direction A)
Theme URI: https://store.frogstreet.com
Description: Child theme for the Frog Street WooCommerce storefront — Direction A
  (on the current WP Shop WooCommerce theme). Applies the Frog Street design
  tokens, Bebas Neue + Lexend typography, and styled WooCommerce product cards,
  buttons, prices, and sale badges.
Author: Frog Street
Version: 0.1.0
Text Domain: frogstreet-child

  ┌──────────────────────────────────────────────────────────────────────┐
  │ IMPORTANT — set the parent theme below.                                │
  │ The "Template:" line MUST exactly match the FOLDER NAME of your active │
  │ parent theme (WP Shop WooCommerce) inside wp-content/themes/.          │
  │ If you're not sure of the folder name, see INSTALL.md ("Step 0").      │
  │ If WordPress says "The parent theme is missing" when activating, the   │
  │ value below is wrong — tell me the theme name and I'll correct it.     │
  └──────────────────────────────────────────────────────────────────────┘
Template: wp-shop-woocommerce
*/

/* ====================================================================== */
/*  Design tokens (from the Frog Street design system)                    */
/* ====================================================================== */
:root {
  /* Brand */
  --c-green: #00A54C;
  --c-green-dark: #008A3F;
  --c-green-10: #E5F6ED;
  --c-green-20: #CCEDDB;
  --c-pink: #DC2A87;

  /* Curriculum tier colors (per Program Level) */
  --c-infant: #EE6624;
  --c-toddler: #008ACC;
  --c-threes: #A65EA5;
  --c-preschool: #A65EA5;
  --c-prek: #DC2A87;

  /* Direction A neutrals */
  --c-text: #2c3e50;
  --c-ink: #1B1F1D;
  --c-ink-3: #5C6360;
  --c-line: #e0e0e0;
  --c-page: #f7f7f7;
  --c-card-bg: #fafafa;
  --c-sale: #ff4444;

  /* Type */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Radius (Direction A favors tight 3–6px) */
  --r-sm: 4px;
  --r-md: 6px;
}

/* ====================================================================== */
/*  Typography                                                            */
/* ====================================================================== */
body,
.woocommerce,
.woocommerce-page {
  font-family: var(--font-body);
  color: var(--c-text);
}

h1, h2, h3, h4, h5,
.woocommerce-products-header__title,
.product_title {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

/* Eyebrow label (uppercase, green) — used above product titles */
.fs-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-green);
  margin: 0 0 4px;
}

/* ====================================================================== */
/*  Product cards (standard WooCommerce loop)                             */
/* ====================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.woocommerce ul.products li.product:hover {
  border-color: #bbb;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.woocommerce ul.products li.product a img {
  background: var(--c-card-bg);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--c-text);
  padding: 0;
}

/* Star rating */
.woocommerce .star-rating span::before,
.woocommerce ul.products li.product .star-rating span::before {
  color: #f5b50a;
}

/* ====================================================================== */
/*  Prices + sale styling                                                 */
/* ====================================================================== */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--c-text);
  font-weight: 600;
}

/* struck-through compare-at price */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--c-ink-3);
  opacity: 0.7;
  font-weight: 400;
}

/* sale price in red */
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: var(--c-sale);
  text-decoration: none;
  font-weight: 700;
}

/* "Sale!" badge — top-left, red pill */
.woocommerce span.onsale {
  background: var(--c-sale);
  color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 6px 10px;
  top: 12px;
  left: 12px;
  margin: 0;
}

/* ====================================================================== */
/*  Buttons (green Add to cart)                                           */
/* ====================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--c-green);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: 10px 16px;
  transition: background 150ms ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--c-green-dark);
  color: #fff;
}

/* Added-to-cart confirmation link */
.woocommerce a.added_to_cart {
  color: var(--c-green-dark);
  font-weight: 600;
}

/* ====================================================================== */
/*  Tier color accents — driven by the product-category body/term class   */
/*  (eyebrow color matches the Program Level)                             */
/* ====================================================================== */
.product_cat-infant    .fs-eyebrow { color: var(--c-infant); }
.product_cat-toddler   .fs-eyebrow { color: var(--c-toddler); }
.product_cat-threes    .fs-eyebrow { color: var(--c-threes); }
.product_cat-preschool .fs-eyebrow { color: var(--c-preschool); }
.product_cat-prek      .fs-eyebrow { color: var(--c-prek); }

/* ====================================================================== */
/*  Single product page (PDP) tweaks                                      */
/* ====================================================================== */
.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
}

.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--r-md);
}

.woocommerce div.product form.cart .button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Section headings with a green underline accent */
.woocommerce-products-header__title,
.woocommerce h2.products-section-title {
  position: relative;
  padding-bottom: 10px;
}
.woocommerce-products-header__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  background: var(--c-green);
  border-radius: 2px;
}