/*
Theme Name: Favs-n-Acks Reskin
Theme URI: https://favsnackstoronto.com/
Description: Visual reskin for Favs-n-Acks TO — new chili-red/gold/cream palette, bilingual typography (Inter + Noto Sans SC), professional AI banners and built-in SEO. Layout, content and all WooCommerce functionality unchanged. Child theme of Storefront.
Author: FinVision AI
Version: 1.1.4
Template: storefront
Text Domain: favsnacks-reskin
*/

/* ============ Design tokens ============ */
:root {
  --fav-red: #be3a2b;
  --fav-red-dark: #96281b;
  --fav-gold: #e5a83b;
  --fav-gold-soft: #f7e8c9;
  --fav-ink: #2a2a2a;
  --fav-muted: #6f6a63;
  --fav-cream: #fdf9f3;
  --fav-line: #ede2d3;
  --fav-radius: 14px;
  --fav-shadow: 0 10px 30px rgba(60, 30, 15, 0.10);
  --fav-font: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/* ============ Base ============ */
body {
  font-family: var(--fav-font);
  color: var(--fav-ink);
  background: var(--fav-cream);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--fav-font); color: var(--fav-ink); letter-spacing: -0.01em; }
a { color: var(--fav-red); }
a:hover { color: var(--fav-red-dark); }

/* ============ Header ============ */
.site-header { background: #fff; border-bottom: 3px solid var(--fav-gold); }
.site-branding .site-title a { color: var(--fav-red); font-weight: 800; }
.site-header .site-search .widget_product_search input[type="search"] {
  border-radius: 999px; border: 2px solid var(--fav-line); background: var(--fav-cream); padding: 0.7em 1.4em;
}
.site-header .site-search .widget_product_search input[type="search"]:focus { border-color: var(--fav-gold); outline: none; }
.site-header-cart .cart-contents .count {
  background: var(--fav-red); border-radius: 999px; font-weight: 700;
}

/* ============ Primary nav (light bar — v1.1.4: dark bar retired per owner feedback) ============ */
.storefront-primary-navigation { background: #fff; border-bottom: 3px solid var(--fav-gold); box-shadow: 0 2px 8px rgba(42,42,42,.06); }
.main-navigation ul li a { color: var(--fav-ink); font-weight: 500; }
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--fav-red); }
.main-navigation ul ul { background: #fff; border-top: 3px solid var(--fav-red); box-shadow: var(--fav-shadow); }
.main-navigation ul ul li a { color: var(--fav-ink); }
.main-navigation ul ul li a:hover { color: var(--fav-red); background: var(--fav-cream); }
/* Header cart amount stays readable on light backgrounds */
.site-header-cart .cart-contents { color: var(--fav-ink); }

/* ============ Buttons ============ */
button, input[type="button"], input[type="submit"],
.button, .added_to_cart, .widget a.button, .site-header-cart .widget_shopping_cart a.button {
  background: var(--fav-red); border-radius: 999px; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(190, 58, 43, 0.28);
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover,
.button:hover, .added_to_cart:hover, .widget a.button:hover {
  background: var(--fav-red-dark); transform: translateY(-1px);
}
.button.alt, button.alt { background: var(--fav-ink); }
.button.alt:hover, button.alt:hover { background: #000; }

/* ============ Homepage section titles ============ */
.storefront-homepage .entry-content > h2,
.page-template-template-homepage .entry-content h2 {
  position: relative; padding-left: 18px; font-weight: 800; font-size: 1.65rem; margin: 2.2rem 0 1.2rem;
}
.storefront-homepage .entry-content > h2::before,
.page-template-template-homepage .entry-content h2::before {
  content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 6px;
  border-radius: 3px; background: linear-gradient(180deg, var(--fav-red), var(--fav-gold));
}

/* ============ Product cards ============ */
ul.products li.product {
  background: #fff; border-radius: var(--fav-radius); overflow: hidden;
  box-shadow: 0 2px 10px rgba(60, 30, 15, 0.06); transition: transform 0.22s ease, box-shadow 0.22s ease;
  border: 1px solid var(--fav-line);
}
ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--fav-shadow); }
ul.products li.product .woocommerce-loop-product__title { font-weight: 600; padding: 0 14px; }
ul.products li.product .price { color: var(--fav-red); font-weight: 700; font-size: 1.08rem; padding: 0 14px; }
ul.products li.product .price del { color: var(--fav-muted); font-weight: 400; }
ul.products li.product .button { margin: 12px 14px 18px; }
.woocommerce span.onsale, .wc-block-components-product-sale-badge {
  background: var(--fav-gold); color: var(--fav-ink); font-weight: 700; border-radius: 999px;
}
.star-rating span::before, .star-rating::before { color: var(--fav-gold); }

/* Product category tiles */
ul.products li.product-category a img { border-radius: var(--fav-radius); }
ul.products li.product-category .woocommerce-loop-category__title { font-weight: 700; }
ul.products li.product-category .woocommerce-loop-category__title mark { color: var(--fav-red); background: none; }

/* ============ Single product ============ */
.single-product div.product .summary .price { color: var(--fav-red); font-size: 1.7rem; font-weight: 800; }
.single-product div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fav-red); }
.single-product div.product .woocommerce-tabs ul.tabs li.active::after { background: var(--fav-red); }
.woocommerce-breadcrumb { color: var(--fav-muted); }
.woocommerce-breadcrumb a { color: var(--fav-red); }

/* ============ Notices / forms ============ */
.woocommerce-message, .woocommerce-info { border-top-color: var(--fav-red); background: #fff; border-radius: 0 12px 12px 0; }
.woocommerce-error { border-top-color: var(--fav-red-dark); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], textarea, select {
  border-radius: 10px; border: 1.5px solid var(--fav-line); background: #fff;
}
input:focus, textarea:focus, select:focus { border-color: var(--fav-gold); outline: none; box-shadow: 0 0 0 3px rgba(229,168,59,0.18); }

/* ============ Cart / checkout ============ */
.woocommerce-cart .cart_totals, .woocommerce-checkout .col2-set { background: #fff; border-radius: var(--fav-radius); }
#order_review { background: #fff; border-radius: var(--fav-radius); border: 1px solid var(--fav-line); }

/* ============ Footer ============ */
.site-footer { background: var(--fav-ink); color: #cfc6b8; }
.site-footer h2, .site-footer h3, .site-footer .widget-title { color: #fff; border-bottom: 2px solid var(--fav-red); display: inline-block; padding-bottom: 6px; }
.site-footer a { color: #e8ddcb; }
.site-footer a:hover { color: var(--fav-gold); }
.site-info { background: #1d1d1d; color: #8d8578; }

/* ============ Optional hero banner ============ */
.favsnack-hero {
  background-size: cover; background-position: center; border-radius: 0;
  padding: 110px 24px; text-align: center; color: #fff; position: relative; margin-bottom: 2.5rem;
}
.favsnack-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,8,4,0.55), rgba(20,8,4,0.35)); }
.favsnack-hero-inner { position: relative; max-width: 860px; margin: 0 auto; }
.favsnack-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 900; text-shadow: 0 2px 18px rgba(0,0,0,0.45); margin-bottom: 0.6rem; }
.favsnack-hero p { font-size: 1.1rem; opacity: 0.92; margin-bottom: 1.6rem; }
.favsnack-hero-btn {
  display: inline-block; background: var(--fav-red); color: #fff !important; font-weight: 700;
  padding: 14px 42px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 24px rgba(190,58,43,0.4);
}
.favsnack-hero-btn:hover { background: var(--fav-red-dark); transform: translateY(-2px); }

/* ============ Pagination ============ */
.woocommerce-pagination .page-numbers li .page-numbers.current { background: var(--fav-red); border-radius: 8px; }
.woocommerce-pagination .page-numbers li .page-numbers { border-radius: 8px; }

/* ============ v1.1.3: truly even boxes — flexbox grid ============ */
/* The grid itself flexes, so every card in a row stretches to the same height */
ul.products { display: flex; flex-wrap: wrap; }
/* Retire the float clearfix — its phantom pseudo-items would break flex rows */
ul.products::before, ul.products::after { display: none; }
/* Cards are vertical flex containers */
ul.products li.product,
ul.products li.product-category { display: flex; flex-direction: column; }
/* Product link fills the card; price is pushed to the bottom so prices line up */
ul.products li.product > a:not(.button) { display: flex; flex-direction: column; flex: 1 0 auto; }
ul.products li.product .price { margin-top: auto; padding-top: 6px; }
/* Button sits right under the price */
ul.products li.product .button { margin-top: 10px; }
/* Category tile link fills its card too */
ul.products li.product-category > a { display: flex; flex-direction: column; flex: 1 0 auto; }
/* No mid-word breaks in card titles */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product-category .woocommerce-loop-category__title { overflow-wrap: break-word; word-break: normal; }
/* Keep every nav link readable, visited or not */
.main-navigation ul li a:visited { color: var(--fav-ink); }
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--fav-red); }

/* ============ v1.1.2: comfortable proportions for the 5-column grid ============ */
/* Uniform square image boxes — same size everywhere; contain (not cover) so product
   artwork and label text are never cropped off at the edges (v1.1.4) */
ul.products li.product img,
ul.products li.product-category img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; background: #fff; }
/* Breathing room inside narrow cards */
ul.products li.product { padding: 12px; }
/* Titles: slightly smaller for narrow columns */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product-category .woocommerce-loop-category__title { font-size: 0.95rem; line-height: 1.45; }
/* Price sits snug; button goes full-width so every card ends on the same neat pill */
ul.products li.product .price { margin-bottom: 8px; }
ul.products li.product .button { width: 100%; margin-left: 0; margin-right: 0; }

/* ============ Mobile ============ */
@media (max-width: 768px) {
  .favsnack-hero { padding: 70px 18px; }
  .storefront-homepage .entry-content > h2 { font-size: 1.35rem; }
}