/*
Theme Name:   Tio Pelon's
Theme URI:    https://www.tiopelonsalsita.com
Description:  Divi child theme for Tio Pelon's Salsita. Carries the 2026 Product
              Guide design system onto the site, adds the azulejo tile banner,
              and replaces WooCommerce's variation dropdown with priced pack cards.
Author:       Tio Pelon's Salsita
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  tio-pelons
*/

/* ═══════════════════════════════════════════════════════════════════════════
   IMPORTANT — read before editing.

   This is NOT a copy of the prototype's brand.css. That file uses a global
   reset (*{margin:0}) and generic class names — .btn, .card, .price, .tabs,
   .nav, .stat — every one of which collides with Divi or WooCommerce. Pasting
   it into a live store breaks the layout and the shop.

   Everything here is either a custom property (--tp-*) or namespaced .tp-*,
   with only deliberate, targeted overrides of Divi/Woo selectors.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · brand tokens ──────────────────────────────────────────────────── */
:root {
  --tp-teal: #49b0a9;
  --tp-teal-deep: #33807a;
  --tp-teal-ink: #215b57;
  --tp-yellow: #ffc334;
  --tp-yellow-deep: #e7b82d;
  --tp-red: #dd1c2c;
  --tp-red-deep: #b01320;
  --tp-pink: #e04e71;
  --tp-orange: #f2873e;
  --tp-cream: #f7f2e8;
  --tp-ink: #141110;
  --tp-paper: #fff;

  --tp-display: 'Playfair Display', Georgia, serif;
  --tp-body: 'Spectral', Georgia, serif;
  --tp-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --tp-radius: 14px;
  --tp-rule: rgba(20, 17, 16, 0.14);
}

/* ── 2 · typography ────────────────────────────────────────────────────── */
body,
#et-boc .et-l p,
.et_pb_text {
  font-family: var(--tp-body);
  color: var(--tp-ink);
}
h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4 {
  font-family: var(--tp-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}
h5,
h6 {
  font-weight: 800;
}

/* uppercase utility labels — nav, buttons, eyebrows */
#top-menu li a,
.et_pb_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  font-family: var(--tp-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── 3 · buttons ───────────────────────────────────────────────────────── */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button {
  background: var(--tp-red);
  color: #fff;
  border-radius: 99px;
  padding: 15px 28px;
  border: 0;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover {
  background: var(--tp-red-deep);
  color: #fff;
  transform: translateY(-2px);
}
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button:disabled {
  background: rgba(20, 17, 16, 0.22);
  transform: none;
}

/* ── 4 · the azulejo banner ────────────────────────────────────────────────
   Glazed tile, not papel picado. Moorish tin-glaze -> Spanish azulejo
   (Talavera de la Reina) -> Puebla from 1531 -> San Antonio. Geometry is
   pure, so the tile never competes with the wordmark.                       */
.tp-azulejo {
  height: 54px;
  background: var(--tp-cream) url('../images/azulejo.svg') repeat-x left
    top/auto 54px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.tp-azulejo--sm {
  height: 38px;
  background-size: auto 38px;
}
.tp-azulejo--flip {
  transform: scaleY(-1);
}
.tp-azulejo--plain {
  background-color: transparent;
}
@media (max-width: 767px) {
  .tp-azulejo {
    height: 40px;
    background-size: auto 40px;
  }
}

/* ── 5 · pack-size selector ────────────────────────────────────────────────
   Replaces the "Choose an option" dropdown on variable products. The real
   <select> stays in the DOM and keeps driving WooCommerce — it is only moved
   out of sight. See woocommerce/single-product/add-to-cart/variable.php.    */
.tp-packs {
  margin: 0 0 22px;
}
.tp-packs__label {
  font-family: var(--tp-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 9px;
}
.tp-packs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.tp-pack {
  position: relative;
  text-align: left;
  background: var(--tp-paper);
  border: 2px solid var(--tp-rule);
  border-radius: 12px;
  padding: 16px 15px 15px;
  cursor: pointer;
  font-family: var(--tp-sans);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.tp-pack:hover {
  border-color: rgba(20, 17, 16, 0.4);
}
.tp-pack[aria-pressed='true'] {
  border-color: var(--tp-ink);
  background: var(--tp-cream);
}
.tp-pack:focus-visible {
  outline: 2px solid var(--tp-red);
  outline-offset: 2px;
}
.tp-pack[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.tp-pack__qty {
  font-family: var(--tp-display);
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  display: block;
}
.tp-pack__lbl {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 4px;
  display: block;
}
.tp-pack__amt {
  font-weight: 700;
  font-size: 16px;
  margin-top: 11px;
  display: block;
  font-variant-numeric: tabular-nums;
}
.tp-pack__ea {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.5;
  display: block;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.tp-pack__tag {
  position: absolute;
  top: -9px;
  right: 10px;
  background: var(--tp-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 4px 9px;
}
.tp-pack__tag--best {
  background: var(--tp-teal);
}

/* the native select still runs the show — it is just not shown */
.tp-has-packs table.variations,
.tp-has-packs .reset_variations {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* per-unit line injected by pack-select.js */
.tp-perunit {
  font-family: var(--tp-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(20, 17, 16, 0.55);
  margin: 8px 0 18px;
}
.tp-perunit b {
  color: var(--tp-red);
  font-weight: 700;
}

/* ── 6 · product price typography ──────────────────────────────────────────
   Playfair's $ has a double stroke that overshoots the lining figures, so at
   display sizes it reads as an artifact. Set small and raised instead.      */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--tp-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  color: var(--tp-ink);
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce div.product span.price .woocommerce-Price-currencySymbol {
  font-size: 0.6em;
  vertical-align: 0.24em;
  margin-right: 0.03em;
}

/* ── 7 · heat meter — [tp_heat level="3" label="Medium"] ───────────────── */
.tp-heat {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}
.tp-heat i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(20, 17, 16, 0.16);
  display: block;
}
.tp-heat i.is-on {
  background: var(--tp-red);
}
.tp-heat b {
  font-family: var(--tp-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.55;
  margin-left: 6px;
}

/* EC-BTN-104 + EC-NAV-121: Re-assert hero / CTA text-white on buttons & links.
   Uses class~= (word match) not class*= (substring) to avoid matching hover:text-white etc. */
button[class~='text-white/90'],
a[class~='text-white/90'] {
  color: rgba(255, 255, 255, 0.9);
}
button[class~='text-white/80'],
a[class~='text-white/80'] {
  color: rgba(255, 255, 255, 0.8);
}
button[class~='text-white/70'],
a[class~='text-white/70'] {
  color: rgba(255, 255, 255, 0.7);
}
button[class~='text-white/60'],
a[class~='text-white/60'] {
  color: rgba(255, 255, 255, 0.6);
}
button[class~='text-white/50'],
a[class~='text-white/50'] {
  color: rgba(255, 255, 255, 0.5);
}
button[class~='text-white/40'],
a[class~='text-white/40'] {
  color: rgba(255, 255, 255, 0.4);
}
button[class~='text-white'],
a[class~='text-white'] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* EC-ANIM-008b / EC-ANIM-009: carousel-only override — scroll-reveal elements animate via IO in functions.php */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}



/* =========================================
   TIO PELON'S — RECIPES BLACK CARD FIX
   ========================================= */

body .recipes a.recipe .cap,
body .recipes .recipe .cap {
    background-color: #141110 !important;
    background-image: none !important;
    color: #ffffff !important;
}

body .recipes .recipe .cap b,
body .recipes .recipe .cap p,
body .recipes .recipe .cap span {
    color: #ffffff !important;
}