/*
Theme Name: Tropic Exotic 2026
Description: Bold & Tropical — a distinctive design system for Tropic Exotic.
Author: Tropic Exotic
Template: flatsome
Version: 2.0
*/

/* ============================================================
   TROPIC EXOTIC — "SUNSET HORIZON" DESIGN SYSTEM v2
   Signature: deep jungle night + tropical sunset gradients,
   glassmorphism, glow, grain, and organic wave forms.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Core ---- */
  --te-night:      #04211F;   /* deepest jungle night */
  --te-deep:       #06393C;   /* ocean teal */
  --te-deep-2:     #0A5A57;
  --te-jade:       #0E7C6B;

  --te-coral:      #FF5F3D;   /* sunset coral — hero accent */
  --te-coral-dk:   #E8462A;
  --te-mango:      #FFA62B;
  --te-gold:       #FFD166;
  --te-lime:       #5FD08C;
  --te-orchid:     #FF7BA9;   /* tropical flower pop */

  --te-cream:      #FFF9F3;
  --te-sand:       #F6EFE6;
  --te-line:       #E9E0D5;
  --te-ink:        #0C1F1E;
  --te-muted:      #5E7370;

  /* ---- Signature gradients ---- */
  --te-sunset:     linear-gradient(100deg, #FF5F3D 0%, #FF8A3D 45%, #FFC44D 100%);
  --te-lagoon:     linear-gradient(120deg, #04211F 0%, #06393C 40%, #0E7C6B 100%);
  --te-dusk:       linear-gradient(135deg, #06393C 0%, #124E52 45%, #FF5F3D 160%);
  --te-glass:      rgba(255,255,255,.72);

  --te-radius:     20px;
  --te-radius-sm:  12px;
  --te-pill:       999px;

  --te-shadow-sm:  0 2px 10px rgba(4,33,31,.07);
  --te-shadow:     0 10px 30px rgba(4,33,31,.11);
  --te-shadow-lg:  0 24px 60px rgba(4,33,31,.20);
  --te-glow:       0 8px 30px rgba(255,95,61,.42);
  --te-glow-gold:  0 8px 30px rgba(255,166,43,.38);

  --te-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --te-display:    'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --te-ease:       cubic-bezier(.22,.61,.36,1);
  --te-spring:     cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   BASE + TEXTURE
   ============================================================ */
body {
  font-family: var(--te-font);
  color: var(--te-ink);
  background: var(--te-cream);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.68;
  position: relative;
}

/* Subtle film grain over the whole site — adds depth, very low cost */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4,h5,h6,.heading-font,.product-title,
.woocommerce-loop-product__title,.entry-title {
  font-family: var(--te-display);
  color: var(--te-ink);
  letter-spacing: -.028em;
  font-weight: 800;
  line-height: 1.1;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700; }

a { color: var(--te-jade); transition: color .2s var(--te-ease); }
a:hover { color: var(--te-coral); }

/* Signature gradient text utility — used on section titles */
.section-title span,
.te-grad {
  background: var(--te-sunset);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--te-display); font-weight: 900;
}

/* ============================================================
   HEADER — glassmorphic, layered
   ============================================================ */
.header-main { background: transparent !important; }
.header:not(.transparent) .header-wrapper,
.header-wrapper.stuck {
  background: rgba(255,249,243,.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(233,224,213,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--te-shadow-sm);
}
.header-main .nav > li > a {
  font-family: var(--te-display);
  font-weight: 600 !important; font-size: 14.5px !important;
  color: var(--te-ink) !important; text-transform: none !important;
  padding: 9px 15px !important; border-radius: var(--te-pill);
  transition: all .22s var(--te-ease);
}
.header-main .nav > li > a:hover { color: var(--te-coral) !important; background: rgba(255,95,61,.09); }

/* Primary nav bar — deep lagoon gradient with animated sheen */
.header-bottom,
.header-wrapper .header-bottom {
  background: var(--te-lagoon) !important;
  border: none !important;
  position: relative; overflow: hidden;
}
.header-bottom::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,209,102,.14) 45%, transparent 70%);
  background-size: 200% 100%;
  animation: te-sheen 9s linear infinite;
  pointer-events: none;
}
@keyframes te-sheen { to { background-position: -200% 0; } }

.header-bottom .nav > li > a,
.header-bottom .header-bottom-nav > li > a {
  color: #fff !important; font-weight: 600 !important;
  border-radius: var(--te-pill); position: relative; z-index: 1;
  transition: all .22s var(--te-ease);
}
.header-bottom .nav > li > a:hover,
.header-bottom .header-bottom-nav > li > a:hover,
.header-bottom .nav > li.active > a {
  color: var(--te-gold) !important;
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.header-bottom .nav-dropdown {
  border-radius: var(--te-radius-sm) !important;
  box-shadow: var(--te-shadow-lg) !important;
  border: 1px solid var(--te-line) !important; padding: 8px !important;
  background: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.header-bottom .nav-dropdown > li > a { color: var(--te-ink) !important; border-radius: var(--te-radius-sm); font-weight: 600 !important; }
.header-bottom .nav-dropdown > li > a:hover { background: rgba(255,95,61,.10); color: var(--te-coral) !important; }

/* Search on the lagoon bar */
.header-bottom .searchform input[type="search"], .header-bottom .search-field {
  background: rgba(255,255,255,.13) !important;
  border: 1.5px solid rgba(255,255,255,.26) !important;
  color: #fff !important; min-width: 250px;
  border-radius: var(--te-pill) !important; padding-left: 18px !important;
}
.header-bottom .searchform input[type="search"]::placeholder { color: rgba(255,255,255,.68) !important; }
.header-bottom .searchform input[type="search"]:focus {
  background: rgba(255,255,255,.2) !important; border-color: var(--te-gold) !important;
  box-shadow: 0 0 0 4px rgba(255,209,102,.16);
}
.header-bottom .searchform button, .header-bottom .icon-search { color:#fff !important; }

/* Announcement strip — dark, refined, subtle gold rule */
.block-html-after-header > div,
.block-html-after-header div[style*="255, 39, 85"],
.block-html-after-header div[style*="#ff2755"] {
  background: var(--te-night) !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255,209,102,.22) !important;
}
.block-html-after-header p {
  color: rgba(255,255,255,.9) !important; font-family: var(--te-font) !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  letter-spacing: .02em !important; text-transform: none !important;
  margin: 0 !important; animation: none !important;
}
.block-html-after-header p a { color: var(--te-gold) !important; }

/* ============================================================
   BUTTONS — glow + spring
   ============================================================ */
.button, button, input[type="submit"], .btn, a.button, .woocommerce .button {
  font-family: var(--te-display) !important;
  font-weight: 700 !important; text-transform: none !important;
  border-radius: var(--te-pill) !important; border: none !important;
  letter-spacing: .005em !important; font-size: 15px !important;
  padding: 13px 28px !important; min-height: 48px;
  transition: transform .22s var(--te-spring), box-shadow .22s var(--te-ease), filter .22s var(--te-ease) !important;
}
.button:hover, button:hover, .btn:hover, a.button:hover { transform: translateY(-3px); }

/* PRIMARY — sunset gradient + glow */
.single_add_to_cart_button, .button.primary,
.woocommerce button.button.alt, button[name="add-to-cart"],
.add-to-cart-button .button {
  background: var(--te-sunset) !important;
  background-size: 160% auto !important;
  color: #fff !important;
  box-shadow: var(--te-glow) !important;
}
.single_add_to_cart_button:hover, .button.primary:hover,
.woocommerce button.button.alt:hover {
  background-position: right center !important;
  box-shadow: 0 14px 40px rgba(255,95,61,.5) !important;
  color: #fff !important;
}
/* respect WooCommerce disabled state */
.single_add_to_cart_button.disabled, .single_add_to_cart_button:disabled {
  box-shadow: none !important; filter: grayscale(.15);
}

/* SECONDARY */
.buy-now-button .button, .button.secondary, .buy_now_button, .wc-quick-buy-button {
  background: var(--te-night) !important; color: #fff !important;
  box-shadow: 0 8px 24px rgba(4,33,31,.28) !important;
}
.buy-now-button .button:hover, .buy_now_button:hover { background: var(--te-deep-2) !important; }

#place_order, .checkout-button {
  background: linear-gradient(100deg, var(--te-lime), #38B673) !important;
  color: #04302A !important; font-size: 17px !important; min-height: 56px;
  box-shadow: 0 10px 30px rgba(95,208,140,.4) !important;
}

/* ============================================================
   PRODUCT CARDS — gradient-glow border on hover
   ============================================================ */
.product-small .box, .products .product .box {
  background: #fff; border: 1px solid var(--te-line);
  border-radius: var(--te-radius); overflow: hidden; height: 100%;
  position: relative;
  transition: transform .3s var(--te-ease), box-shadow .3s var(--te-ease), border-color .3s var(--te-ease);
}
.product-small .box::before {
  content:''; position:absolute; inset:-1px; border-radius: inherit;
  padding:1.5px; background: var(--te-sunset);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .3s var(--te-ease); pointer-events:none; z-index:2;
}
.product-small .box:hover::before { opacity:1; }
.product-small .box:hover, .products .product .box:hover {
  transform: translateY(-8px); box-shadow: var(--te-shadow-lg); border-color: transparent;
}
.product-small .box-image { background: var(--te-sand); }
.product-small .box-image img { transition: transform .6s var(--te-ease); }
.product-small .box:hover .box-image img { transform: scale(1.07); }

.product-small .box-text, .products .product .box-text { padding: 16px !important; text-align: left; }
.product-small .name.product-title a, .woocommerce-loop-product__title {
  font-family: var(--te-display); font-weight: 700 !important;
  font-size: 15px !important; line-height: 1.3; color: var(--te-ink) !important;
}
.product-small .price, .products .product .price {
  font-family: var(--te-display); font-weight: 800 !important;
  font-size: 16.5px !important; color: var(--te-deep) !important; margin-top: 6px;
}
.product-small .price ins { color: var(--te-coral) !important; text-decoration: none; }
.product-small .price del { color: #A6B2B0 !important; font-weight: 500 !important; }
.product-small .category, .products .product .category {
  font-size: 10.5px !important; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--te-mango) !important;
}

/* Badges */
.badge-container .badge-inner {
  background: var(--te-sunset) !important; color:#fff !important;
  border-radius: var(--te-pill) !important; font-family: var(--te-display);
  font-weight: 800 !important; font-size: 10.5px !important; letter-spacing:.06em;
  text-transform: uppercase; padding: 5px 13px !important; height:auto !important;
  line-height:1.6 !important; box-shadow: var(--te-glow);
}
.out-of-stock-label {
  background: rgba(4,33,31,.86) !important; color:#fff !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--te-pill) !important; font-family: var(--te-display);
  font-weight:700 !important; letter-spacing:.05em; text-transform:uppercase;
  font-size:11px !important; padding:6px 14px !important;
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.product-title.product_title { font-size: clamp(1.8rem,3.6vw,2.7rem) !important; font-weight:900 !important; }
.product-info .price, .single-product .price {
  font-family: var(--te-display); font-weight: 900 !important;
  font-size: 2rem !important;
  background: var(--te-dusk); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
}

/* Answer capsule — signature card */
.product-short-description {
  background: linear-gradient(135deg, #FFF6EC 0%, #FFEFE0 100%);
  border: 1px solid rgba(255,166,43,.35);
  border-left: 5px solid var(--te-mango);
  border-radius: var(--te-radius-sm);
  padding: 18px 20px; font-size: 15.5px; line-height:1.62;
  margin: 20px 0 24px; color:#3A2A18;
  box-shadow: 0 6px 20px rgba(255,166,43,.10);
}

/* Variant swatches — override theme gradient */
.vi-wpvs-option-wrap-button,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-button {
  background-image:none !important; background-color:#fff !important;
  color: var(--te-ink) !important; border:1.5px solid var(--te-line) !important;
  border-radius: var(--te-pill) !important; box-shadow:none !important;
  text-shadow:none !important; font-family: var(--te-display);
  font-weight:700 !important; padding:11px 20px !important;
  transition: all .2s var(--te-spring) !important;
}
.vi-wpvs-option-wrap-button:hover { border-color: var(--te-coral) !important; color: var(--te-coral) !important; transform: translateY(-2px); }
.vi-wpvs-option-wrap-button.vi-wpvs-option-wrap-button-selected,
.vi-wpvs-option-wrap-button-selected,
.vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected {
  background-image: var(--te-sunset) !important; background-color: transparent !important;
  border-color: transparent !important; color:#fff !important;
  box-shadow: var(--te-glow) !important;
}
.vi-wpvs-option-wrap-button span { text-shadow:none !important; }

/* Cart row */
.woocommerce div.product form.cart { display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-width:0; }
.woocommerce div.product form.cart .quantity { margin:0 !important; flex:0 0 auto; }
.quantity input[type="number"], .quantity .qty {
  border-radius: var(--te-pill) !important; border:1.5px solid var(--te-line) !important;
  height:48px; font-weight:700; font-family: var(--te-display);
}
.single_add_to_cart_button, .woocommerce div.product form.cart .button {
  white-space:nowrap !important; min-width:190px !important; flex:0 0 auto !important;
  height:52px !important; display:inline-flex !important; align-items:center; justify-content:center;
}
.buy-now-button .button, .buy_now_button {
  min-width:150px !important; height:52px !important;
  display:inline-flex !important; align-items:center; justify-content:center; white-space:nowrap !important;
}

/* Trust strip */
.te-trust {
  width:100%; clear:both; display:flex; flex-wrap:wrap !important; gap:10px;
  margin-top:20px !important; padding:0; background:none; border:none;
}
.te-trust span {
  font-size:13px; font-weight:700; color: var(--te-deep);
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--te-line);
  padding:9px 15px; border-radius: var(--te-pill);
  box-shadow: var(--te-shadow-sm); flex:0 1 auto;
}

/* Tabs */
.woocommerce-tabs .nav-tabs, .product-tabs { border-bottom:1px solid var(--te-line) !important; gap:6px; }
.woocommerce-tabs .nav-tabs > li > a, .product-tabs > li > a {
  font-family: var(--te-display); font-weight:700 !important; text-transform:none !important;
  font-size:15px !important; color: var(--te-muted) !important; border:none !important;
  padding:13px 22px !important; border-radius: var(--te-radius-sm) var(--te-radius-sm) 0 0;
}
.woocommerce-tabs .nav-tabs > li.active > a, .product-tabs > li.active > a {
  color: var(--te-ink) !important; background:transparent !important;
  border-bottom:3px solid transparent !important;
  border-image: var(--te-sunset) 1 !important;
}

/* Deep content styling */
.woocommerce-Tabs-panel h3, .term-description h3 {
  font-size:1.22rem; color: var(--te-deep); margin-top:1.8em;
  padding-left:14px; border-left:4px solid; border-image: var(--te-sunset) 1;
}
.woocommerce-Tabs-panel ul, .term-description ul { padding-left:20px; }
.woocommerce-Tabs-panel li, .term-description li { margin-bottom:.45em; }

/* ============================================================
   CATEGORY / SHOP — wave divider hero
   ============================================================ */
.shop-page-title, .page-title-inner {
  background: var(--te-dusk) !important; color:#fff;
  padding: 58px 0 76px !important; position:relative; overflow:hidden;
}
.shop-page-title::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:44px;
  background: var(--te-cream);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C200,4 400,44 600,22 C800,0 1000,40 1200,14 L1200,44 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C200,4 400,44 600,22 C800,0 1000,40 1200,14 L1200,44 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.shop-page-title h1, .shop-page-title .page-title-inner h1 { color:#fff !important; position:relative; z-index:1; }
.shop-page-title .breadcrumbs, .shop-page-title a { color:rgba(255,255,255,.8) !important; }
.shop-page-title a:hover { color: var(--te-gold) !important; }

/* Long-form guide card */
.term-description {
  background:#fff; border:1px solid var(--te-line); border-radius: var(--te-radius);
  padding:32px 34px; margin:28px 0 38px; box-shadow: var(--te-shadow-sm);
  font-size:16px; line-height:1.74; position:relative; overflow:hidden;
}
.term-description::before {
  content:''; position:absolute; top:0; left:0; right:0; height:5px; background: var(--te-sunset);
}
.term-description h2 { font-size:1.8rem; margin-top:.2em; color: var(--te-deep); }
.term-description > p:first-of-type strong {
  display:block; background: linear-gradient(135deg,#FFF6EC,#FFEFE0);
  border-left:5px solid var(--te-coral); border-radius: var(--te-radius-sm);
  padding:17px 20px; font-weight:600; color:#3A2A18;
}

/* Section titles */
.section-title-container { margin-bottom:22px; }
.section-title b { background: linear-gradient(90deg, transparent, var(--te-line), transparent) !important; height:1px !important; }
.section-title span { font-size:1.05em; }

/* Kill dead whitespace on stacked sections */
.section .section-content > .row:last-child { margin-bottom:0; }
.home .section { padding-top: 34px !important; padding-bottom: 34px !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-section, footer#footer { background: var(--te-lagoon) !important; color: rgba(255,255,255,.8); position:relative; }
.footer-section::before, footer#footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--te-sunset);
}
.footer-section a, footer#footer a { color: rgba(255,255,255,.8) !important; }
.footer-section a:hover, footer#footer a:hover { color: var(--te-gold) !important; }
.footer-section h3, .footer-section .widget-title, footer#footer .widget-title {
  color:#fff !important; font-family: var(--te-display); font-weight:800; letter-spacing:.01em;
}
.absolute-footer { background: var(--te-night) !important; color: rgba(255,255,255,.5); }

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],textarea,select,.select2-container .select2-selection {
  border-radius: var(--te-radius-sm) !important; border:1.5px solid var(--te-line) !important;
  box-shadow:none !important; font-size:15px; min-height:48px;
  transition: border-color .2s var(--te-ease), box-shadow .2s var(--te-ease);
}
input:focus,textarea:focus,select:focus {
  border-color: var(--te-coral) !important; box-shadow: 0 0 0 4px rgba(255,95,61,.12) !important;
}
.cart_totals,.cart-sidebar,.woocommerce-checkout-review-order {
  background:#fff; border:1px solid var(--te-line); border-radius: var(--te-radius);
  padding:24px; box-shadow: var(--te-shadow-sm);
}

/* ============================================================
   LAYOUT FIXES
   ============================================================ */
.product-info.col-fit, .product-info.summary.col {
  min-width:0 !important; flex:1 1 0% !important; max-width:50% !important;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.te-reveal { opacity:0; transform: translateY(22px); }
.te-reveal.te-in { opacity:1; transform:none; transition: opacity .7s var(--te-ease), transform .7s var(--te-ease); }
@media (prefers-reduced-motion: reduce) {
  .te-reveal, .te-reveal.te-in { opacity:1 !important; transform:none !important; transition:none !important; }
  .header-bottom::after { animation:none !important; }
}

/* ============================================================
   MOBILE — incl. sticky buy bar
   ============================================================ */
@media only screen and (max-width: 849px) {
  .product-info.col-fit, .product-info.summary.col { max-width:100% !important; }
}
@media only screen and (max-width: 48em) {
  body { font-size:15.5px; }
  h1 { font-size:2rem; } h2 { font-size:1.5rem; }
  .product-small .box-text { padding:12px !important; }
  .product-small .name.product-title a { font-size:13.5px !important; }
  .term-description { padding:22px 18px; border-radius: var(--te-radius-sm); }
  .term-description h2 { font-size:1.4rem; }
  .shop-page-title, .page-title-inner { padding:38px 0 54px !important; }
  .te-trust span { font-size:12px; padding:8px 12px; }

  /* sticky mobile buy bar */
  .te-stickybuy {
    position:fixed; left:0; right:0; bottom:0; z-index:9990;
    background: rgba(255,249,243,.94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top:1px solid var(--te-line);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:12px;
    transform: translateY(110%); transition: transform .35s var(--te-ease);
    box-shadow: 0 -8px 30px rgba(4,33,31,.14);
  }
  .te-stickybuy.te-show { transform:none; }
  .te-stickybuy .te-sb-name { font-family: var(--te-display); font-weight:800; font-size:13.5px; line-height:1.2; flex:1; min-width:0; }
  .te-stickybuy .te-sb-name small { display:block; font-weight:600; color: var(--te-muted); font-size:12px; }
  .te-stickybuy .te-sb-btn {
    background: var(--te-sunset); color:#fff; border:none; border-radius: var(--te-pill);
    font-family: var(--te-display); font-weight:800; font-size:14px;
    padding:13px 22px; box-shadow: var(--te-glow); white-space:nowrap;
  }
}

/* ============================================================
   POLISH
   ============================================================ */
::selection { background: var(--te-mango); color:#12211F; }
.breadcrumbs { font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:600; color: var(--te-muted); }
.box-image img, .product-gallery img { border-radius: var(--te-radius-sm); }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background: var(--te-sand); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--te-coral), var(--te-mango)); border-radius:8px; border:2px solid var(--te-sand); }

/* SAFETY: product grids must never be hidden by reveal animation */
.product-small, .products .product, .product-small.te-reveal, .products .product.te-reveal {
  opacity: 1 !important; transform: none !important;
}

/* ============================================================
   HOMEPAGE — kill dead space, elevate category tiles
   ============================================================ */

/* collapse oversized builder gaps */
.home .row, .home .section .row { padding-top: 0 !important; }
.home .section { padding-top: 30px !important; padding-bottom: 30px !important; }
.home .banner-grid-wrapper, .home .row-slider { margin-top: 0 !important; }
.home .col { padding-bottom: 18px !important; }
/* empty spacer columns / rows that create the void */
.home .col-inner > .img:empty, .home .col:empty, .home .row:empty { display:none !important; }
.home .section-content > .row > .col > .col-inner > p:empty { display:none !important; }

/* Category tiles — rounded, lifted, gradient-veiled */
.home .banner, .banner.has-hover {
  border-radius: var(--te-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--te-shadow-sm);
  transition: transform .35s var(--te-ease), box-shadow .35s var(--te-ease);
}
.home .banner:hover, .banner.has-hover:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--te-shadow-lg);
}
.home .banner .bg, .banner .bg { transition: transform .8s var(--te-ease); }
.home .banner:hover .bg, .banner.has-hover:hover .bg { transform: scale(1.08); }
/* readable label veil at the bottom of each tile */
.home .banner::after {
  content:''; position:absolute; inset:auto 0 0 0; height:62%;
  background: linear-gradient(to top, rgba(4,33,31,.82) 0%, rgba(4,33,31,.28) 55%, transparent 100%);
  pointer-events:none; z-index:1;
}
.home .banner .banner-layers, .home .banner .box-text { position:relative; z-index:2; }
.home .banner h1, .home .banner h2, .home .banner h3, .home .banner .banner-layers span {
  font-family: var(--te-display) !important; font-weight:800 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.45) !important; letter-spacing:-.02em;
}

/* Big homepage headings get the signature gradient */
.home h2, .home .section-title span {
  background: var(--te-sunset);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
/* keep headings that sit on dark imagery readable */
.home .banner h2, .home .banner h3 {
  -webkit-text-fill-color:#fff !important; background:none !important; color:#fff !important;
}

/* ============================================================
   HOMEPAGE SPACING — override builder's hardcoded 100px/150px
   (stylesheet !important beats the builder's inline styles)
   ============================================================ */
@media (min-width: 850px) {
  .home .sec_cat .col[style*="100px"],
  .home .sec_banner .col[style*="100px"],
  .home .col[style*="padding: 100px 0px 0px"] { padding-top: 34px !important; }

  .home .row[style*="150px"],
  .home .row[style*="padding: 0px 0px 150px"] { padding-bottom: 44px !important; }

  .home .sec_cat, .home .sec_banner { padding-top: 20px !important; padding-bottom: 20px !important; }
}
@media (max-width: 849px) {
  .home .col[style*="100px"] { padding-top: 18px !important; }
  .home .row[style*="150px"] { padding-bottom: 26px !important; }
}

/* Section heading rhythm */
.home .sec_cat h2, .home .sec_banner h2 { margin-bottom: .35em !important; }

/* ============================================================
   FOOTER — replace builder's coral section with deep lagoon
   ============================================================ */
#footer .section, .footer-wrapper .section,
#footer .section .section-bg, .footer-wrapper .section .section-bg {
  background-color: transparent !important;
  background-image: none !important;
}
#footer .section, .footer-wrapper .section {
  background: var(--te-lagoon) !important;
  position: relative;
}
#footer .section::before, .footer-wrapper .section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--te-sunset); z-index:2;
}
#footer .section h1, #footer .section h2, #footer .section h3,
#footer .section h4, .footer-wrapper .section h3 {
  color:#fff !important; font-family: var(--te-display); font-weight:800;
  letter-spacing:-.01em;
}
#footer .section p, #footer .section li, #footer .section span,
.footer-wrapper .section p { color: rgba(255,255,255,.82) !important; }
#footer .section a, .footer-wrapper .section a { color: rgba(255,255,255,.82) !important; transition: color .2s var(--te-ease); }
#footer .section a:hover, .footer-wrapper .section a:hover { color: var(--te-gold) !important; }
#footer .section hr, #footer .section .divider { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.18) !important; }
/* footer social icons */
#footer .section .button.icon, #footer .section .social-icons a {
  background: rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.2) !important;
}
#footer .section .button.icon:hover { background: var(--te-sunset) !important; border-color:transparent !important; }
/* footer CTA button keeps the sunset */
#footer .section .button:not(.icon) { background: var(--te-sunset) !important; color:#fff !important; box-shadow: var(--te-glow) !important; }

/* ============================================================
   HOMEPAGE HERO SECTION — the real fix
   The decorative palm image (.cat_bg_1) sits in an equal-height
   row, forcing the heading column to match its height and
   creating a large void. Make the palm decorative-only so it
   no longer drives layout height.
   ============================================================ */
@media (min-width: 850px) {
  .sec_cat > .section-content > .row:first-of-type,
  .sec_cat .row[class*="align-equal"] {
    align-items: flex-start !important;
  }
  /* palm becomes an absolutely-positioned decoration */
  .sec_cat .cat_bg_1 {
    position: absolute !important;
    left: 0; top: 0;
    margin: 0 !important;
    pointer-events: none;
    z-index: 0;
  }
  .sec_cat .cat_bg_1 img { max-height: 300px !important; width: auto !important; }
  .sec_cat > .section-content > .row:first-of-type { position: relative; }
  /* heading no longer needs the big top padding */
  .sec_cat .col[style*="100px"] { padding-top: 26px !important; padding-bottom: 6px !important; }
  /* pull the tiles row up */
  .sec_cat > .section-content > .row:nth-of-type(2) { margin-top: 0 !important; padding-top: 0 !important; }
}

/* ============================================================
   FIX: article/page headings were inheriting white text
   (invisible on white backgrounds). Force readable colour in
   all editorial content areas.
   ============================================================ */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
article .entry-content h2, .post-content h2, .page-wrapper h2,
.blog-single h2, .blog-single h3, .entry-header h1 {
  color: var(--te-ink) !important;
  -webkit-text-fill-color: var(--te-ink) !important;
  background: none !important;
}
/* editorial h2 gets a sunset underline accent instead of gradient fill */
.entry-content h2, .blog-single .entry-content h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  margin-top: 1.9em; margin-bottom: .55em;
  padding-bottom: .32em; position: relative;
}
.entry-content h2::after {
  content:''; position:absolute; left:0; bottom:0; width:58px; height:4px;
  background: var(--te-sunset); border-radius: 999px;
}
.entry-content h3 {
  font-size: clamp(1.12rem, 1.9vw, 1.32rem) !important;
  color: var(--te-deep) !important; -webkit-text-fill-color: var(--te-deep) !important;
  margin-top: 1.5em; padding-left: 13px;
  border-left: 4px solid var(--te-mango);
}
/* lead paragraph = the answer capsule */
.entry-content > p:first-of-type strong,
.entry-content > p:first-child strong {
  display:block; background: linear-gradient(135deg,#FFF6EC,#FFEFE0);
  border-left:5px solid var(--te-coral); border-radius: var(--te-radius-sm);
  padding:18px 20px; font-weight:600; color:#3A2A18; font-size:16.5px; line-height:1.6;
}
.entry-content ul, .entry-content ol { padding-left: 22px; margin-bottom: 1.3em; }
.entry-content li { margin-bottom: .48em; }
.entry-content { font-size: 16.5px; line-height: 1.75; }

/* ============================================================
   EDITORIAL TABLES — comparison data in guides
   ============================================================ */
.entry-content table, .term-description table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 1.6em 0 1.9em; font-size: 15px;
  border: 1px solid var(--te-line); border-radius: var(--te-radius-sm);
  overflow: hidden; box-shadow: var(--te-shadow-sm); background:#fff;
  display: table;
}
.entry-content thead th, .term-description thead th {
  background: var(--te-lagoon); color:#fff !important;
  font-family: var(--te-display); font-weight:700; font-size:13.5px;
  letter-spacing:.02em; text-align:left; padding:13px 15px; border:none;
}
.entry-content tbody td, .term-description tbody td {
  padding:12px 15px; border-top:1px solid var(--te-line); vertical-align:top; color: var(--te-ink);
}
.entry-content tbody tr:nth-child(even) td { background: #FFFCF8; }
.entry-content tbody tr:hover td { background: #FFF4EA; }
.entry-content tbody td:first-child { font-weight:700; font-family: var(--te-display); color: var(--te-deep); }

/* horizontal scroll on small screens instead of squashing */
@media (max-width: 640px) {
  .entry-content table, .term-description table { display:block; overflow-x:auto; white-space:nowrap; font-size:14px; }
  .entry-content thead th, .entry-content tbody td { padding:10px 12px; }
}
/* numbered lists in guides */
.entry-content ol { counter-reset: te-ol; list-style:none; padding-left:0; }
.entry-content ol > li {
  counter-increment: te-ol; position:relative; padding-left:40px; margin-bottom:.7em;
}
.entry-content ol > li::before {
  content: counter(te-ol); position:absolute; left:0; top:1px;
  width:26px; height:26px; border-radius:50%; background: var(--te-sunset); color:#fff;
  font-family: var(--te-display); font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}