/*
Theme Name: Flatsome Child - HiVoxel
Template: flatsome
Version: 2.15.0
*/

:root {
  --hv-blue: #003C71;
  --hv-turquoise: #4FDBDA;
  --hv-black: #1C1C1C;
  --hv-gray: #4A4A4A;
  --hv-white: #FFFFFF;
  --hv-gray-light: #A7A9AC;
  --hv-orange: #FF6F3C;

  --hv-font-heading: 'Montserrat', sans-serif;
  --hv-font-body: 'Roboto', sans-serif;
}

/* -- Fix the boxed-layout lavender background left over from the old setup -- */
html,
body.boxed {
  background-color: var(--hv-white) !important;
}

body.boxed #wrapper {
  box-shadow: none;
}

/* -- Typography: enforce brand fonts everywhere -- */
body {
  font-family: var(--hv-font-body);
  color: var(--hv-black);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .product_title, .title,
.nav-title, .logo, .site-title {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  color: var(--hv-black);
}

/* -- Buttons: pill-shaped everywhere, on-brand -- */
.button, a.button {
  border-radius: 999px !important;
  padding-left: 28px;
  padding-right: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.button:hover, a.button:hover {
  transform: translateY(-2px);
}

.button.hv-cta,
a.button.hv-cta {
  background: linear-gradient(135deg, var(--hv-orange), #ff8c5c);
  border-color: transparent;
  color: var(--hv-white);
  font-family: var(--hv-font-heading);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(255, 111, 60, 0.35);
}

.button.hv-cta:hover,
a.button.hv-cta:hover {
  box-shadow: 0 12px 28px rgba(255, 111, 60, 0.45);
}

.button.hv-outline,
a.button.hv-outline {
  background-color: transparent;
  border: 2px solid var(--hv-white);
  color: var(--hv-white);
  font-family: var(--hv-font-heading);
  font-weight: 600;
}

.button.hv-outline:hover,
a.button.hv-outline:hover {
  background-color: var(--hv-white);
  color: var(--hv-blue);
}

/* -- Gradient text accent -- */
.hv-gradient-text {
  background: linear-gradient(90deg, var(--hv-turquoise), #8fe9e8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* -- Decorative glow blobs (used behind hero / dark sections for depth) -- */
.hv-glow-wrap {
  position: relative;
  overflow: hidden;
}

.hv-glow-wrap::before,
.hv-glow-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hv-glow-wrap::before {
  width: 420px;
  height: 420px;
  background: rgba(79, 219, 218, 0.28);
  top: -140px;
  right: -100px;
}

.hv-glow-wrap::after {
  width: 300px;
  height: 300px;
  background: rgba(255, 111, 60, 0.18);
  bottom: -120px;
  left: -60px;
}

.hv-glow-wrap > .section-content,
.hv-glow-wrap > .row {
  position: relative;
  z-index: 1;
}

/* -- Floating voxel accent (small squares, subtle nod to the brand name) --
   Split into two layers so GSAP (mouse-repel, moves .hv-voxel via x/y) and CSS
   (idle rotation on .hv-voxel-inner) never fight over the same `transform` property. */
.hv-voxel {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  display: none;
}

.hv-voxel-inner {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  animation: hv-float 7s ease-in-out infinite;
}

@media (min-width: 1000px) {
  .hv-voxel {
    display: block;
  }
}

/* -- Header CTA button: only show once there's room so nav never wraps -- */
li.header-button-1 {
  display: none !important;
}

@media (min-width: 1300px) {
  li.header-button-1 {
    display: block !important;
  }
}

@keyframes hv-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(12deg); }
}

/* -- Scroll reveal (animated via hivoxel.js / GSAP) -- */
.hv-reveal {
  opacity: 0;
  transform: translateY(24px);
}

/* -- Trust bar above header -- */
.hv-trustbar {
  background: linear-gradient(90deg, var(--hv-blue), #002448);
  color: var(--hv-white);
  text-align: center;
  font-family: var(--hv-font-body);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  padding: 10px 16px;
  position: relative;
  z-index: 10;
}

.hv-trustbar a {
  color: var(--hv-turquoise);
  font-weight: 600;
  text-decoration: none;
}

.hv-trustbar a:hover {
  color: var(--hv-orange);
}

/* -- Color filter widget on the shop sidebar has ~65 terms — cap it to roughly 7 visible
   rows with its own scrollbar instead of pushing the rest of the sidebar far down the page -- */
.widget_layered_nav .wc-layered-nav-list,
.widget_layered_nav ul.woocommerce-widget-layered-nav-list {
  max-height: 270px;
  overflow-y: auto;
  padding-right: 6px;
}

/* -- FinBrand360 studio credit in the footer: their own brand gradient (sampled live
   from finbrand360.com's .grad-text class), not HiVoxel's turquoise gradient -- */
.hv-finbrand-credit {
  background: linear-gradient(100deg, #00C0FF 0%, #1A73EB 38%, #7B2DFF 70%, #B64DFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 300;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.hv-finbrand-credit:hover {
  opacity: 1;
}

/* -- Final WhatsApp CTA section: eyebrow label, icon badge, and the wave divider that
   flows into the (now dark navy) footer bar right below it -- */
.hv-final-cta {
  position: relative;
}

/* keep the soft turquoise glow (::before, top-right) — it reads fine on this light bg —
   but the orange one (::after) sat close enough to the section's bottom edge that
   overflow:hidden clipped its blur mid-fade instead of letting it fade to fully
   transparent first, leaving a visible hard edge right where the wave divider starts.
   Anchoring it near the TOP instead (same band as ::before) guarantees 150px+ of clear
   space below it before the section ends, regardless of how tall the section renders
   at different viewport widths. */
.hv-final-cta::after {
  bottom: auto;
  top: 10px;
  left: -80px;
}

.hv-eyebrow {
  display: inline-block;
  font-family: var(--hv-font-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hv-orange);
}

.hv-final-cta-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hv-turquoise), #2fb8b7);
  color: #fff;
  box-shadow: 0 10px 24px rgba(79, 219, 218, 0.35);
  margin-bottom: 4px;
}

.hv-final-cta-icon svg {
  width: 28px;
  height: 28px;
}

.hv-wave-divider {
  line-height: 0;
}

.hv-wave-divider svg {
  width: 100%;
  height: 70px;
  display: block;
}

/* -- Footer secondary nav (Nosotros / Tienda / Contacto): give it real hover polish
   instead of plain flat links -- */
.footer-nav.links li a {
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75) !important;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

.footer-nav.links li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--hv-turquoise);
  transition: width 0.25s ease;
}

.footer-nav.links li a:hover {
  color: var(--hv-turquoise) !important;
}

.footer-nav.links li a:hover::after {
  width: 100%;
}

.footer-nav.links li {
  position: relative;
  margin-right: 4px;
}

.footer-nav.links li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   SHOP / CATEGORY PAGE — product card redesign
   Default Flatsome cards were flat (no shadow/hover), category
   label was plain gray text, add-to-cart button was Flatsome's
   default blue — none of it matched the rest of the site.
   ============================================================ */

/* -- Card container: real elevation + lift on hover -- */
.product-small.box {
  background: #fff;
  border-radius: 18px;
  padding: 16px 16px 22px;
  box-shadow: 0 2px 14px rgba(0, 60, 113, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-small.col:hover .product-small.box {
  transform: translateY(-7px);
  box-shadow: 0 20px 36px rgba(0, 60, 113, 0.14);
}

/* -- Product image: rounded, soft bg, gentle zoom on hover -- */
.product-small .box-image {
  border-radius: 14px;
  overflow: hidden;
  background: #F7F8F9;
}

.product-small .box-image img {
  transition: transform 0.5s ease;
}

.product-small.col:hover .box-image img {
  transform: scale(1.07);
}

/* -- Category label: small colored pill instead of plain gray text -- */
.product-small .category.product-cat {
  display: inline-block;
  background: rgba(0, 60, 113, 0.08);
  color: var(--hv-blue) !important;
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.07em;
  padding: 4px 11px;
  border-radius: 20px;
  opacity: 1 !important;
  margin-bottom: 8px;
}

/* -- Product title -- */
.product-small .product-title a {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  color: var(--hv-black);
  transition: color 0.2s ease;
}

.product-small.col:hover .product-title a {
  color: var(--hv-blue);
}

/* -- Price: brand accent color, bolder -- */
.product-small .price-wrapper .price,
.product-small .price-wrapper .amount {
  color: var(--hv-orange) !important;
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 16px;
}

/* -- Add to cart / Elegir opciones button: brand blue gradient, full-width -- */
.product-small .add_to_cart_button.button {
  background: linear-gradient(135deg, var(--hv-blue), #005a9e) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-family: var(--hv-font-heading);
  font-size: 11px;
  line-height: 1.3;
  padding: 10px 14px;
  height: auto;
  width: 100%;
  text-align: center;
  margin-top: 12px;
  box-shadow: 0 6px 16px rgba(0, 60, 113, 0.25);
}

.product-small .add_to_cart_button.button:hover {
  box-shadow: 0 10px 22px rgba(0, 60, 113, 0.35);
}

/* -- Quick view pill: brand color instead of default -- */
.quick-view {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--hv-blue) !important;
  font-family: var(--hv-font-heading);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* -- Sidebar widget titles: small accent underline for a bit of polish -- */
.widget-title.shop-sidebar {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 18px !important;
}

.widget-title.shop-sidebar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hv-turquoise), var(--hv-blue));
}

/* -- Breadcrumb: subtle brand accent on the current page -- */
.woocommerce-breadcrumb.breadcrumbs {
  font-family: var(--hv-font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.woocommerce-breadcrumb.breadcrumbs a {
  color: var(--hv-gray);
  transition: color 0.2s ease;
}

.woocommerce-breadcrumb.breadcrumbs a:hover {
  color: var(--hv-blue);
}

/* -- Result count + sort dropdown row: a touch more breathing room -- */
.woocommerce-result-count {
  font-family: var(--hv-font-heading);
  font-weight: 600;
  color: var(--hv-gray);
}

/* ============================================================
   "Productos destacados" — horizontal featured-product cards
   (image left / info right + real color swatches), rendered by
   the [hv_featured_products] shortcode.
   ============================================================ */
.hv-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 849px) {
  .hv-featured-grid {
    grid-template-columns: 1fr;
  }
}

.hv-featured-card {
  display: flex;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 60, 113, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hv-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px rgba(0, 60, 113, 0.13);
}

.hv-featured-card-image {
  flex: 0 0 42%;
  display: block;
  background: #F7F8F9;
}

.hv-featured-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hv-featured-card-body {
  flex: 1;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hv-featured-card-title {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--hv-black);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.hv-featured-card-title:hover {
  color: var(--hv-blue);
}

.hv-featured-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: auto;
  padding-bottom: 14px;
}

.hv-featured-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  flex: 0 0 auto;
}

.hv-featured-swatch-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--hv-gray);
  align-self: center;
  margin-left: 2px;
}

.hv-featured-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #EEF0F2;
  padding-top: 14px;
  margin-top: 14px;
}

.hv-featured-price {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--hv-blue);
}

.hv-featured-price del {
  opacity: 0.5;
  font-size: 13px;
  margin-right: 4px;
}

.hv-featured-cart-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--hv-turquoise), #2fb8b7);
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 219, 218, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hv-featured-cart-btn svg {
  width: 18px;
  height: 18px;
}

.hv-featured-cart-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(79, 219, 218, 0.45);
}

/* -- Product page: "select a color first" notice + swatch highlight (see hivoxel.js) -- */
.hv-select-color-notice {
  color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

@keyframes hv-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.hv-variations-missing .variable-items-wrapper {
  animation: hv-shake 0.4s ease;
  outline: 2px solid #C0392B;
  outline-offset: 4px;
  border-radius: 8px;
}

/* -- Selected color's hex code, shown as one line above "Añadir al carrito"
   (see hivoxel.js) — client tried a hex label under every swatch first and
   found it too busy; this replaces that with a single line that updates on
   selection instead. -- */
.hv-color-hex-display {
  font-family: monospace;
  font-size: 13px;
  color: var(--hv-black);
  background: #F7F8F9;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0;
  display: inline-block;
}

.hv-color-hex-display strong {
  color: var(--hv-blue);
  font-family: var(--hv-font-heading);
  letter-spacing: 0.02em;
}

/* Breadcrumb bar overlaid on a dark product/category header photo — Flatsome
   marks that context with .dark on the title-bar wrapper. Scoped to just that
   case so it doesn't fight the shop archive's breadcrumb, which sits on a
   plain white background and needs its own darker, non-shadowed color instead. */
.page-title.dark .woocommerce-breadcrumb a,
.page-title.dark .woocommerce-breadcrumb .divider {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* -- Checkout: Ecuador-only shipping notice above the billing form -- */
.hv-checkout-notice {
  background: rgba(79, 219, 218, 0.1);
  border: 1px solid rgba(79, 219, 218, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hv-blue);
  margin-bottom: 18px;
}

/* -- Hide SKU on product pages: not used (no inventory codes assigned) -- */
.product_meta .sku_wrapper {
  display: none !important;
}

/* -- Header row: force every top-level item (logo, nav, WhatsApp button, cart) to truly
   vertically center as a group — align-items:center on the flex row wasn't enough on its
   own because a couple of items (cart link) had their own asymmetric internal padding
   inflating their box height unevenly. -- */
.header-inner.flex-row > * {
  align-self: center !important;
}

.header-cart-link {
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* -- Header CTA button (button-1 element) -- */
.header-button-1 .button {
  background: linear-gradient(135deg, var(--hv-orange), #ff8c5c) !important;
  border-color: transparent !important;
  color: var(--hv-white) !important;
  font-family: var(--hv-font-heading);
  font-size: 13px;
  text-transform: none !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(255, 111, 60, 0.3);
}

/* -- Header always needs an opaque background: it's transparent by default, which is
   invisible over the boxed hero but lets page content show straight through once the
   header goes sticky/fixed on scroll. -- */
.header-main,
.header .header-wrapper-inner,
.header {
  background-color: var(--hv-white);
}

/* -- Sticky header gets a shadow once scrolled -- */
.stuck .header-main,
.header.show-on-scroll .header-main {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* -- Flatsome forces a fixed 70px height on the sticky/stuck header (its own CSS), which the
   two-line logo (59px tall with our normal-state padding) no longer fits inside — shrink the
   logo and padding specifically in this state so nothing overflows the header's edge. -- */
.stuck .header-main,
.header.show-on-scroll .header-main {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.stuck #logo img,
.header.show-on-scroll #logo img {
  max-height: 44px !important;
}

.stuck #logo,
.header.show-on-scroll #logo {
  margin-top: 0;
  margin-bottom: 0;
}

/* -- Hero image: real depth instead of floating flat --
   The shadow has to live on `.img` (Flatsome's own wrapper, overflow:visible), not on the
   `<img>` itself — its direct parent `.img-inner` has overflow:hidden (for the hover-zoom
   effect) and was clipping the shadow off completely. */
.hv-hero-photo .img {
  border-radius: 24px;
  /* dark drop-shadow alone barely reads on this section's navy background, so pair it
     with a soft turquoise ambient glow that actually shows up against dark blue */
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.6), 0 20px 70px 5px rgba(79, 219, 218, 0.25);
}

/* the actual rounding has to happen on img-inner too (it's the element with overflow:hidden
   that really clips the photo) — the outer .img wrapper's radius above only shapes the shadow */
.hv-hero-photo .img-inner,
.hv-hero-photo img {
  border-radius: 24px;
}

/* -- "Tu aliado en cada creación" floating pill badges (FinBrand360-inspired, HiVoxel colors) -- */
.hv-pill-section {
  background: linear-gradient(160deg, #071E33, #003C71 60%, #052a48);
}

.hv-pill-wrap {
  padding: 10px;
}

/* -- Full glass card: the pill now wraps title AND description, not just the label -- */
.hv-pill-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.hv-pill-title {
  margin-bottom: 10px;
}

.hv-pill-title span:not(.hv-pill-icon) {
  color: #fff;
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hv-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hv-pill-icon svg {
  width: 26px;
  height: 26px;
}

.hv-pill-wrap:hover .hv-pill-card {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(79, 219, 218, 0.5);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.7);
}

.hv-pill-card-body {
  flex: 1;
}

.hv-pill-card p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

@media (max-width: 549px) {
  .hv-pill-card {
    padding: 28px 24px;
    gap: 16px;
  }

  .hv-pill-icon {
    width: 46px;
    height: 46px;
  }

  .hv-pill-icon svg {
    width: 22px;
    height: 22px;
  }
}


.hv-feature h4 {
  color: var(--hv-black);
  margin-bottom: 8px;
  font-size: 17px;
}

.hv-feature p {
  color: var(--hv-gray);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* -- Product cards (Sunlu-inspired): soft pastel background, contained floating photo, arrow link -- */
.hv-prod-card {
  position: relative;
  border-radius: 20px;
  padding: 40px 34px;
  min-height: 340px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hv-prod-card-text {
  position: relative;
  z-index: 2;
  max-width: 60%;
}

.hv-prod-card-text h3 {
  color: var(--hv-black);
  margin-bottom: 8px;
}

.hv-prod-card-text p {
  color: var(--hv-gray);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.hv-prod-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--hv-blue);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.hv-prod-link:hover {
  gap: 10px;
  color: var(--hv-orange);
}

.hv-prod-link span {
  display: inline-block;
}

.hv-prod-card-img {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 62%;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

/* -- Full-bleed variant: real photo covers the whole card, dark gradient for legible text -- */
.hv-prod-card--full {
  background-size: cover;
  background-position: center;
  justify-content: flex-end;
}

.hv-prod-card--full .hv-prod-card-text {
  max-width: 100%;
  position: relative;
  z-index: 2;
}

.hv-prod-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.hv-prod-card-text--light h3 {
  color: var(--hv-white);
}

.hv-prod-card-text--light p {
  color: rgba(255, 255, 255, 0.88);
}

.hv-prod-link--light {
  color: var(--hv-white);
}

.hv-prod-link--light:hover {
  color: var(--hv-orange);
}

@media (max-width: 549px) {
  .hv-prod-card {
    min-height: 300px;
    padding: 28px 24px;
  }

  .hv-prod-card-text {
    max-width: 70%;
  }

  .hv-prod-card-img {
    width: 55%;
  }
}

/* -- Hero photo composition: decorative blob + floating badge, so the image feels designed-in -- */
.hv-hero-photo {
  position: relative;
  isolation: isolate;
}

.hv-hero-blob {
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(135deg, var(--hv-turquoise), var(--hv-orange));
  border-radius: 20px;
  opacity: 0.85;
  z-index: -1;
}

.hv-hero-badge {
  position: absolute;
  left: 24px;
  bottom: -18px;
  z-index: 5;
  background: var(--hv-white);
  color: var(--hv-black);
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

@media (max-width: 549px) {
  .hv-hero-blob {
    top: -14px;
    right: -14px;
    left: 14px;
  }

  .hv-hero-badge {
    font-size: 11.5px;
    padding: 8px 14px;
    left: 14px;
  }
}

/* -- Header: more breathing room, refined nav -- */
#logo {
  margin-right: 20px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

/* The logo image had no height cap in the normal (non-stuck) state, so it rendered at its
   full aspect-scaled size (~55-60px) — taller than the header row itself, overflowing it
   and reading as "cut off"/off-center. Cap it here too, not just in the .stuck state. */
#logo img {
  max-height: 46px !important;
  width: auto;
}

.header-main {
  padding-top: 20px;
  padding-bottom: 20px;
}

.nav > li > a {
  font-family: var(--hv-font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none !important;
  color: var(--hv-black);
  padding-left: 14px;
  padding-right: 14px;
  position: relative;
  white-space: nowrap;
}

.nav > li:hover > a,
.nav > li.active > a {
  color: var(--hv-blue);
}

.header .search,
.header .search a,
.header nav,
.header .nav,
.header .nav li,
.header .nav li a {
  border: none !important;
  box-shadow: none !important;
}

.header .search {
  margin-left: 6px;
  margin-right: 6px;
}

.header .search > a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.header .search > a:hover {
  background-color: rgba(0, 60, 113, 0.08);
}

#logo a {
  transition: transform 0.2s ease;
  display: inline-block;
}

#logo a:hover {
  transform: scale(1.03);
}

/* -- Branded accent bar under the header (also closes a sub-pixel seam that showed as a stray line) --
   Absolutely positioned against the header itself (not appended in normal flow) so it always sits
   exactly at the bottom edge, including in Flatsome's sticky/cloned header state where a two-line
   logo can make the flow-based height unpredictable. */
.header {
  position: relative;
}

.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hv-blue), var(--hv-turquoise), var(--hv-orange));
  z-index: 20;
}

/* -- Search lightbox (replaces the old small dropdown search entirely) -- */
#search-lightbox {
  max-width: 640px;
  width: 90vw;
  padding: 20px;
}

#search-lightbox .search-form {
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 14px;
  gap: 14px;
}

#search-lightbox .search-field {
  background: transparent !important;
  border: none !important;
  color: #fff;
  font-family: var(--hv-font-heading);
  font-size: 28px;
  font-weight: 600;
  padding: 8px 0 !important;
}

#search-lightbox .search-field::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

#search-lightbox .ux-search-submit {
  background: transparent !important;
  color: var(--hv-turquoise) !important;
  width: auto;
  height: auto;
}

#search-lightbox .ux-search-submit svg,
#search-lightbox .ux-search-submit i {
  width: 26px;
  height: 26px;
  font-size: 26px;
}

.mfp-bg {
  background: rgba(7, 30, 51, 0.9) !important;
}

/* -- Header search box: clean, rounded, on-brand -- */
.search-form .search-field {
  border: 1.5px solid var(--hv-gray-light);
  border-radius: 999px 0 0 999px;
  padding-left: 18px;
  background-color: var(--hv-white);
}

.search-form .search-field:focus {
  border-color: var(--hv-turquoise);
  box-shadow: 0 0 0 3px rgba(79, 219, 218, 0.25);
}

.ux-search-submit.secondary {
  background-color: var(--hv-blue) !important;
  border-radius: 0 999px 999px 0;
}

.ux-search-submit.secondary:hover {
  background-color: var(--hv-orange) !important;
}

/* ============================================================
   Checkout "Tu pedido" review box — replace the plain default
   WooCommerce table with a cleaner card layout.
   ============================================================ */
#order_review.woocommerce-checkout-review-order {
  background: var(--hv-white);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(0, 60, 113, 0.06);
}

.woocommerce-checkout-review-order-table {
  border: none;
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-checkout-review-order-table thead th {
  display: none;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  border: none;
  padding: 12px 0;
}

.woocommerce-checkout-review-order-table tbody tr.cart_item {
  border-bottom: 1px solid #F0F1F3;
}

.woocommerce-checkout-review-order-table tbody td.product-name {
  font-size: 14px;
  color: var(--hv-gray);
}

.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--hv-blue);
  font-weight: 700;
}

.woocommerce-checkout-review-order-table tbody td.product-total {
  font-weight: 600;
  color: var(--hv-black);
  text-align: right;
  white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot tr {
  border-bottom: 1px solid #F0F1F3;
}

.woocommerce-checkout-review-order-table tfoot tr:last-child {
  border-bottom: none;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  font-size: 14px;
  text-align: right;
}

.woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
  color: var(--hv-gray);
  font-weight: 500;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  padding-top: 16px;
  font-family: var(--hv-font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--hv-blue);
}

.shipping__list_item {
  list-style: none;
  padding: 6px 0;
}

.shipping__list_label {
  font-size: 14px;
  cursor: pointer;
}

.shipping_method:checked + .shipping__list_label {
  color: var(--hv-blue);
  font-weight: 700;
}

#payment .wc_payment_methods {
  border-top: 1px solid #F0F1F3;
  margin-top: 8px;
  padding-top: 16px;
  list-style: none;
}

#payment .wc_payment_method label {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  color: var(--hv-blue);
}

#payment .payment_box {
  background: #F4FBFB;
  border-left: 3px solid var(--hv-turquoise);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--hv-gray);
}

.place-order .button.alt {
  width: 100%;
  background: var(--hv-orange) !important;
  border-radius: 999px;
  font-family: var(--hv-font-heading);
  font-weight: 700;
  padding: 16px !important;
  font-size: 15px;
  margin-top: 18px;
}

.place-order .button.alt:hover {
  background: var(--hv-blue) !important;
}

/* "Shipping to X." line: was only useful for address-based rate calculation, which we
   don't use anymore now that shipping is an explicit choice (pickup vs. province). */
.woocommerce-shipping-destination {
  display: none;
}

/* ============================================================
   Checkout billing form — modernize the plain default inputs
   ============================================================ */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: 1.5px solid #E0E2E5;
  border-radius: 10px;
  box-shadow: none;
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-checkout textarea {
  height: auto;
  padding: 12px 14px;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--hv-turquoise);
  box-shadow: 0 0 0 3px rgba(79, 219, 218, 0.25);
  outline: none;
}

.woocommerce-checkout label {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--hv-black);
  margin-bottom: 6px;
  display: block;
}

.woocommerce-checkout .form-row {
  margin-bottom: 18px;
}

/* Remove the boxed border around the order-summary sidebar column — the order-review
   card inside it already has its own rounded border + shadow, so this outer sharp-cornered
   border was just doubling the box look. */
body.woocommerce-checkout .col-inner.has-border {
  border: none;
}

.woocommerce-privacy-policy-text {
  text-align: center;
}

/* The "Ecuador-only shipping" notice above the form already says this — the static
   "País: Ecuador" row right below it was redundant. The hidden billing_country input
   inside it stays (still needed so the order saves country=EC), only the visible row goes. */
#billing_country_field {
  display: none;
}

/* Address 1 kept WooCommerce's default "pairs with address_2" half-width class even
   though address_2 was removed from the form, leaving it stranded at half width. */
#billing_address_1_field {
  width: 100% !important;
  float: none !important;
}

/* Product page banner: the breadcrumb/title sits over the product's own gallery photo,
   with a semi-transparent black overlay meant to keep the white text legible. 25% wasn't
   enough against our light, studio-white product shots — darken it further. */
.featured-title .title-overlay {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

.featured-title .woocommerce-breadcrumb,
.featured-title .page-title-inner .title {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Contact page — info cards (light background variant of the
   dark homepage "pill" cards, reusing .hv-pill-icon for sizing)
   ============================================================ */
.hv-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 4px 20px rgba(0, 60, 113, 0.06);
}

.hv-contact-card-title {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--hv-black);
  margin-bottom: 4px;
}

.hv-contact-card p {
  color: var(--hv-gray);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.hv-contact-card a {
  color: var(--hv-blue);
  text-decoration: underline;
}

.hv-contact-card .hv-pill-icon {
  width: 46px;
  height: 46px;
}

.hv-contact-card .hv-pill-icon svg {
  width: 32px;
  height: 32px;
}

.hv-contact-card--stack {
  flex-direction: column;
  gap: 18px;
}

.hv-social-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* ============================================================
   Nosotros page — pull quote, mission/vision cards, pillar cards
   ============================================================ */
.hv-quote-card {
  background: linear-gradient(135deg, rgba(0, 60, 113, 0.05), rgba(79, 219, 218, 0.1));
  border: 1px solid rgba(0, 60, 113, 0.12);
  border-radius: 20px;
  padding: 40px 36px;
}

.hv-quote-mark {
  width: 34px;
  height: 34px;
  color: var(--hv-turquoise);
  opacity: 0.6;
  margin-bottom: 14px;
}

.hv-quote-text {
  font-family: var(--hv-font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--hv-blue);
  line-height: 1.5;
  margin: 0;
}

.hv-quote-author {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--hv-gray);
  font-weight: 600;
}

.hv-mv-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 40px 32px 32px;
  box-shadow: 0 4px 20px rgba(0, 60, 113, 0.06);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.hv-mv-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.hv-mv-icon {
  display: inline-flex;
  margin-bottom: 18px;
}

.hv-mv-icon svg {
  width: 36px;
  height: 36px;
}

.hv-mv-title {
  font-family: var(--hv-font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--hv-black);
  margin-bottom: 12px;
}

.hv-mv-card p {
  color: var(--hv-gray);
  line-height: 1.7;
  margin: 0;
}

.hv-pillar-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* Generic "floating rounded card" section treatment, reused across pages. */
.hv-rounded-section {
  border-radius: 28px;
  margin-top: 16px;
  overflow: hidden;
}

/* ============================================================
   Mobile: center text, cards and standalone buttons everywhere —
   client preference for how the site reads on a phone.
   ============================================================ */
@media (max-width: 549px) {
  .page-wrapper h1,
  .page-wrapper h2,
  .page-wrapper h3,
  .page-wrapper h4,
  .page-wrapper h5 {
    text-align: center;
  }

  .ux_text,
  .ux_text p,
  .ux_text h1,
  .ux_text h2,
  .ux_text h3,
  .ux_text h4,
  .ux_text h5 {
    text-align: center !important;
  }

  .ux_text p {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center column content (headings, text, standalone buttons) without touching
     the box model of full-width buttons like add-to-cart or place-order. */
  .col {
    text-align: center;
  }

  /* Icon+text info cards: stack icon above centered text instead of icon-left row */
  .hv-contact-card,
  .hv-pillar-card,
  .hv-social-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hv-mv-card,
  .hv-quote-card {
    text-align: center;
  }

  .hv-mv-icon {
    margin-left: auto;
    margin-right: auto;
  }

  /* WooCommerce shop grid cards */
  .product-small .category.product-cat,
  .product-small .product-title,
  .product-small .price-wrapper {
    text-align: center;
    width: 100%;
  }

  /* Background-image feature cards (Filamentos 3D / Impresoras 3D) */
  .hv-prod-card-text {
    text-align: center;
  }

  /* Hero paragraphs hardcode text-align:left for desktop (intentional, sits
     next to the photo column) — override to center on mobile where they
     stack full-width above/below the photo. */
  .hv-hero-lead,
  .hv-hero-badges {
    text-align: center !important;
  }

  /* 3D viewer controls panel: center title, swatch row and helper texts */
  .hv-3d-controls-title,
  .hv-3d-selected,
  .hv-3d-note {
    text-align: center;
  }

  .hv-3d-swatches {
    justify-content: center;
  }

  .hv-prod-link {
    justify-content: center;
  }

  /* Cart page "Continue shopping" / "Update cart" buttons stack and center
     instead of floating left/right */
  .woocommerce-cart .actions,
  .woocommerce-cart .actions > div {
    text-align: center !important;
  }

  .woocommerce-cart .actions > div,
  .woocommerce-cart .actions .pull-left,
  .woocommerce-cart .actions .pull-right,
  .woocommerce-cart .actions .button {
    float: none !important;
    width: 100%;
    margin-bottom: 10px;
  }

  /* Product description / specs tab content */
  .woocommerce-Tabs-panel p,
  .woocommerce-Tabs-panel li {
    text-align: center;
  }

  /* Final-CTA WhatsApp icon badge is a block-level flex circle — text-align:center on
     its parent doesn't center it, needs its own auto margins. */
  .hv-final-cta-icon {
    margin-left: auto;
    margin-right: auto;
  }

  /* Mobile header: the hamburger-menu column and the cart-icon column have different
     natural widths (cart has an icon + count badge, menu is a bare icon), so the logo
     sitting between them in a 3-column flex row wasn't visually centered even though it
     was centered in the space between two unequal columns. Force both side columns to
     the same width so the middle (logo) column is genuinely centered. */
  .header-inner > .flex-col.flex-left.show-for-medium,
  .header-inner > .flex-col.flex-right.show-for-medium {
    min-width: 86px;
  }

  /* Flatsome's align="right" column attribute renders as a nested .col-inner.text-right
     div, which sits BELOW .col in the tree — the .col{text-align:center} rule above
     doesn't reach it, so the final-CTA button kept hugging the right edge on mobile. */
  .col-inner.text-right {
    text-align: center !important;
  }

  /* Home hero photo: shrink and center it as its own smaller floating card instead of
     nearly filling the screen width edge to edge. */
  .hv-hero-photo {
    max-width: 78%;
    margin-left: auto;
    margin-right: auto;
  }

  /* "Realizar pago por WhatsApp" checkout button — too tall/round on narrow screens */
  .place-order .button.alt {
    padding: 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}

.hv-center-row {
  justify-content: center;
}

/* ============================================================
   3D viewer prototype section (Home page test copy only)
   ============================================================ */
.hv-3d-wrap {
  position: relative;
}

.hv-3d-wrap model-viewer {
  box-shadow: 0 4px 30px rgba(0, 60, 113, 0.08);
}

.hv-3d-tap-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  border: none;
  border-radius: 20px;
  background: rgba(0, 60, 113, 0.4);
  color: #fff;
  font-family: var(--hv-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.25s ease;
}

.hv-3d-tap-icon {
  font-size: 1.2rem;
}

.hv-3d-tap-hint--hidden {
  opacity: 0;
  pointer-events: none;
}

.hv-3d-controls {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 4px 20px rgba(0, 60, 113, 0.06);
}

.hv-3d-controls-title {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--hv-black);
  margin-bottom: 14px;
}

.hv-3d-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hv-3d-swatch {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: var(--sw-color, #ccc);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hv-3d-swatch:hover {
  transform: translateY(-2px);
}

.hv-3d-swatch.active {
  border-color: var(--hv-blue);
  box-shadow: 0 0 0 3px rgba(0, 60, 113, 0.15);
}

.hv-3d-selected {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--hv-black);
}

.hv-3d-selected strong {
  color: var(--hv-blue);
  font-family: var(--hv-font-heading);
}

.hv-3d-note {
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--hv-gray);
  line-height: 1.5;
}

/* Volume-discount ("Combo Creador"/"Combo HiVoxel Pro") progress notice */
.hv-promo-notice {
  background: linear-gradient(135deg, rgba(79, 219, 218, 0.1), rgba(255, 111, 60, 0.08));
  border: 1px solid rgba(0, 60, 113, 0.12);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.hv-promo-notice p {
  margin: 4px 0;
  font-size: 0.92rem;
  color: var(--hv-blue);
  font-weight: 600;
}

.hv-cta-row {
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 999px) {
  .hv-cta-row .col {
    text-align: center;
  }

  .hv-cta-row .hv-final-cta-icon {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Contact page: the hero and info section look like floating rounded cards, with a
   little breathing room so the rounded corners don't look odd pressed flush together. */
.hv-contact-hero {
  border-radius: 28px;
  margin-top: 16px;
}

.hv-contact-info {
  border-radius: 28px;
  overflow: hidden;
  margin-top: 16px;
}

/* ============================================================
   Rich product description (specs + gallery), like Sunlu/eSun's
   own product pages — used inside WooCommerce product descriptions.
   ============================================================ */
.hv-pd-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hv-black);
}

.hv-pd-h3 {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--hv-blue);
  margin: 36px 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hv-turquoise);
}

.hv-pd-h4 {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--hv-black);
  margin: 22px 0 10px;
}

.hv-pd-basic-grid,
.hv-pd-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.hv-pd-basic-grid > div,
.hv-pd-stat-grid > div {
  background: #F7F8F9;
  border-radius: 12px;
  padding: 12px 14px;
}

.hv-pd-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hv-gray);
  margin-bottom: 4px;
}

.hv-pd-basic-grid strong,
.hv-pd-stat-grid strong {
  font-family: var(--hv-font-heading);
  font-size: 0.95rem;
  color: var(--hv-black);
}

.hv-pd-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin: 32px 0;
}

.hv-pd-feature-rev {
  direction: rtl;
}

.hv-pd-feature-rev > * {
  direction: ltr;
}

.hv-pd-feature img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 60, 113, 0.08);
}

.hv-pd-feature h4 {
  font-family: var(--hv-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--hv-blue);
  margin-bottom: 6px;
}

.hv-pd-feature p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--hv-black);
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 767px) {
  .hv-pd-basic-grid,
  .hv-pd-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hv-pd-feature,
  .hv-pd-feature-rev {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 14px;
    margin: 24px 0;
  }
}