/* ==========================================================
   PYROPATHS BRAND SYSTEM
   ========================================================== */

:root {
  --pp-onyx: #161616;
  --pp-taupe: #4A4540;
  --pp-bone: #EDE4D4;
  --pp-red-ochre: #BA582B;
  --pp-chestnut: #8C2F1E;
  --pp-goldenrod: #D6A23A;

  --pp-white: #FFFFFF;
  --pp-surface: #F7F1E7;
  --pp-border: rgba(22, 22, 22, 0.16);
  --pp-shadow: 0 10px 28px rgba(22, 22, 22, 0.10);

  /* The supplied Avenir Next Rounded file is not bundled in the theme package.
     This stack uses it when available and falls back gracefully elsewhere. */
  --pp-font: "Avenir Next Rounded", "Avenir Next", Avenir, "Trebuchet MS", Arial, sans-serif;

  --pp-radius-sm: 6px;
  --pp-radius-md: 10px;
  --pp-radius-lg: 16px;
  --pp-transition: 180ms ease;
}

/* ==========================================================
   GLOBAL TYPOGRAPHY + PAGE SURFACE
   ========================================================== */

html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  font-family: var(--pp-font) !important;
}

body {
  color: var(--pp-onyx);
  background: var(--pp-bone);
}

::selection {
  background: var(--pp-goldenrod);
  color: var(--pp-onyx);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.wp-block-post-title {
  color: var(--pp-onyx);
  font-family: var(--pp-font) !important;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.wp-block-post-title {
  margin: 0 0 12px 0 !important;
  font-size: clamp(1.75rem, 3vw, 3rem) !important;
  line-height: 1.08 !important;
}

.wp-block-post-title a,
.entry-title a {
  color: var(--pp-onyx) !important;
  text-decoration: none !important;
}

p,
li,
.wp-block-post-excerpt,
.entry-content {
  line-height: 1.65;
}

.entry-content a:not(.wp-block-button__link),
.widget a:not(.button),
.woocommerce-product-details__short-description a {
  color: var(--pp-chestnut);
  text-decoration-color: rgba(140, 47, 30, 0.35);
  text-underline-offset: 0.14em;
  transition: color var(--pp-transition), text-decoration-color var(--pp-transition);
}

.entry-content a:not(.wp-block-button__link):hover,
.widget a:not(.button):hover,
.woocommerce-product-details__short-description a:hover {
  color: var(--pp-red-ochre);
  text-decoration-color: currentColor;
}

hr,
.wp-block-separator {
  border-color: var(--pp-border);
}

blockquote,
.wp-block-quote {
  margin-left: 0;
  padding: 1rem 1.35rem;
  border-left: 5px solid var(--pp-red-ochre);
  background: rgba(255, 255, 255, 0.42);
  border-radius: 0 var(--pp-radius-md) var(--pp-radius-md) 0;
}

/* ==========================================================
   ASTRA HEADER + NAVIGATION
   ========================================================== */

.site-header,
.ast-primary-header-bar,
.wp-block-template-part header {
  background: var(--pp-bone) !important;
  border-bottom: 1px solid var(--pp-border);
}

.ast-primary-header-bar {
  box-shadow: 0 4px 20px rgba(22, 22, 22, 0.04);
}

.site-title a,
.site-description {
  color: var(--pp-onyx) !important;
}

.site-title a {
  font-weight: 700;
}

.ast-builder-menu-1 .menu-link,
.wp-block-navigation a,
.main-navigation a {
  color: var(--pp-onyx) !important;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-decoration: none;
  transition: color var(--pp-transition);
}

.ast-builder-menu-1 .menu-item:hover > .menu-link,
.ast-builder-menu-1 .current-menu-item > .menu-link,
.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a,
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--pp-chestnut) !important;
}

.ast-desktop .ast-builder-menu-1 .sub-menu,
.main-header-menu .sub-menu {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  box-shadow: var(--pp-shadow);
}

.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
  background: var(--pp-bone);
}

/* Keep a square brand mark from becoming oversized in the header. */
.custom-logo-link img,
.site-logo-img img {
  max-height: 74px;
  width: auto;
}

/* ==========================================================
   BUTTONS + CALLS TO ACTION
   ========================================================== */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.ast-button,
.button,
.wp-block-button__link,
.hotlines-cta .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.single-product .single_add_to_cart_button {
  background: var(--pp-red-ochre) !important;
  color: var(--pp-white) !important;
  border: 2px solid var(--pp-red-ochre) !important;
  border-radius: var(--pp-radius-sm) !important;
  padding: 0.78em 1.45em;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none;
  transition: background var(--pp-transition), border-color var(--pp-transition), transform var(--pp-transition), box-shadow var(--pp-transition);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
.hotlines-cta .wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce ul.products li.product .button:hover,
.single-product .single_add_to_cart_button:hover {
  background: var(--pp-chestnut) !important;
  border-color: var(--pp-chestnut) !important;
  color: var(--pp-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(22, 22, 22, 0.14);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  background: transparent !important;
  color: var(--pp-chestnut) !important;
  border-color: var(--pp-chestnut) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
  background: var(--pp-chestnut) !important;
  color: var(--pp-white) !important;
}

/* Optional warm secondary CTA: add class "pp-button-gold" to a Button block. */
.pp-button-gold .wp-block-button__link,
.wp-block-button__link.pp-button-gold {
  background: var(--pp-goldenrod) !important;
  border-color: var(--pp-goldenrod) !important;
  color: var(--pp-onyx) !important;
}

.pp-button-gold .wp-block-button__link:hover,
.wp-block-button__link.pp-button-gold:hover {
  background: var(--pp-onyx) !important;
  border-color: var(--pp-onyx) !important;
  color: var(--pp-bone) !important;
}

/* ==========================================================
   CONTENT SURFACES + CARDS
   ========================================================== */

.ast-container,
.site-content > .ast-container {
  color: var(--pp-onyx);
}

.pp-card,
.wp-block-group.pp-card,
.woocommerce ul.products li.product {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  box-shadow: 0 3px 14px rgba(22, 22, 22, 0.05);
}

.pp-card,
.wp-block-group.pp-card {
  padding: clamp(1rem, 2.5vw, 1.6rem);
}

.woocommerce ul.products li.product {
  padding: 1rem;
  overflow: hidden;
  transition: transform var(--pp-transition), box-shadow var(--pp-transition);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow);
}

.wp-block-cover__background,
.wp-block-cover__gradient-background {
  /* Do not globally force an overlay opacity. Existing Cover blocks control it. */
}

.wp-block-post-featured-image img,
.woocommerce ul.products li.product a img {
  border-radius: var(--pp-radius-md);
}

/* ==========================================================
   FORMS
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  background: var(--pp-white);
  color: var(--pp-onyx);
  border: 1px solid rgba(74, 69, 64, 0.42) !important;
  border-radius: var(--pp-radius-sm) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: var(--pp-red-ochre) !important;
  box-shadow: 0 0 0 3px rgba(186, 88, 43, 0.16) !important;
  outline: none;
}

/* ==========================================================
   WOOCOMMERCE
   ========================================================== */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount {
  color: var(--pp-chestnut) !important;
  font-weight: 700;
}

.woocommerce span.onsale {
  background: var(--pp-goldenrod) !important;
  color: var(--pp-onyx) !important;
  font-weight: 700;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--pp-red-ochre);
  background: var(--pp-surface);
  color: var(--pp-onyx);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--pp-red-ochre);
}

.woocommerce-error {
  border-top-color: var(--pp-chestnut);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--pp-red-ochre);
}

/* ==========================================================
   PYROPATHS HEAT LEVELS
   Yellow = Goldenrod / Orange = Red Ochre / Red = Chestnut
   ========================================================== */

.heat-yellow,
.pp-heat-yellow {
  --heat-color: var(--pp-goldenrod);
  --heat-text: var(--pp-onyx);
}

.heat-orange,
.pp-heat-orange {
  --heat-color: var(--pp-red-ochre);
  --heat-text: var(--pp-white);
}

.heat-red,
.pp-heat-red {
  --heat-color: var(--pp-chestnut);
  --heat-text: var(--pp-white);
}

.heat-level,
.pp-heat-level {
  border-left: 7px solid var(--heat-color);
}

.pp-heat-badge,
.heat-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--heat-color);
  color: var(--heat-text);
  border-radius: 999px;
  padding: 0.35em 0.78em;
  font-weight: 700;
  line-height: 1;
}

/* Existing heat-navigation gallery behavior. */
body .hotlines-heat-nav {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

body .hotlines-heat-nav .wp-block-image,
body .hotlines-heat-nav figure,
body .hotlines-heat-nav .wp-block-column,
body .hotlines-heat-nav .blocks-gallery-item {
  margin: 0 !important;
  padding: 0 !important;
}

body .hotlines-heat-nav img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

body .hotlines-heat-nav.wp-block-gallery {
  --wp--style--unstable-gallery-gap: 0px !important;
  gap: 0 !important;
}

/* ==========================================================
   FAVORITES PAGE
   ========================================================== */

.hotlines-favorites ul {
  padding-left: 0;
}

.hotlines-favorites li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--pp-border);
}

.hotlines-favorites li img,
.hotlines-favorites li video,
.hotlines-favorites li iframe {
  width: 260px;
  max-width: 260px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--pp-radius-md);
  flex-shrink: 0;
}

.hotlines-favorites li a {
  color: var(--pp-onyx) !important;
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  text-decoration: none;
}

.hotlines-favorites li a:hover {
  color: var(--pp-chestnut) !important;
}

/* ==========================================================
   TABLES + MISC UI
   ========================================================== */

.wp-block-table table,
table {
  border-color: var(--pp-border);
}

.wp-block-table th,
table th {
  background: var(--pp-taupe);
  color: var(--pp-white);
}

.wp-block-table td,
.wp-block-table th,
table td,
table th {
  border-color: var(--pp-border);
}

/* Brand utility classes for page builders / block editor Advanced > CSS class. */
.pp-bg-onyx { background-color: var(--pp-onyx) !important; color: var(--pp-bone) !important; }
.pp-bg-taupe { background-color: var(--pp-taupe) !important; color: var(--pp-white) !important; }
.pp-bg-bone { background-color: var(--pp-bone) !important; color: var(--pp-onyx) !important; }
.pp-bg-ochre { background-color: var(--pp-red-ochre) !important; color: var(--pp-white) !important; }
.pp-bg-chestnut { background-color: var(--pp-chestnut) !important; color: var(--pp-white) !important; }
.pp-bg-goldenrod { background-color: var(--pp-goldenrod) !important; color: var(--pp-onyx) !important; }

.pp-text-onyx { color: var(--pp-onyx) !important; }
.pp-text-taupe { color: var(--pp-taupe) !important; }
.pp-text-ochre { color: var(--pp-red-ochre) !important; }
.pp-text-chestnut { color: var(--pp-chestnut) !important; }
.pp-text-goldenrod { color: var(--pp-goldenrod) !important; }

/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer,
.site-primary-footer-wrap,
.ast-footer-overlay,
.wp-block-template-part footer {
  background: var(--pp-onyx) !important;
  color: var(--pp-bone) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer .widget-title,
.site-footer .site-title a {
  color: var(--pp-bone) !important;
}

.site-footer a,
.site-primary-footer-wrap a {
  color: var(--pp-goldenrod) !important;
}

.site-footer a:hover,
.site-primary-footer-wrap a:hover {
  color: var(--pp-white) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
  .hotlines-favorites li {
    display: block;
  }

  .hotlines-favorites li img,
  .hotlines-favorites li video,
  .hotlines-favorites li iframe {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }

  .custom-logo-link img,
  .site-logo-img img {
    max-height: 58px;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}