/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Hello Elementor Child Theme
 Author:       Elementor Team
 Author URI:   https://elementor.com/
 Template:     hello-elementor
 Version:      1.0.29
 Requires at least: 6.0
 Tested up to: 7.0
 Requires PHP: 7.4
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  hello-elementor-child
*/

/* Add your custom styles below this line */


/* Herbals Pure logo sizing (round badge). The breakpoint rules repeat the full selector list so
   they match the base rule's specificity and actually win. */
.elementor-widget-image img[src*='herbalspure-logo'],
.elementskit-nav-logo img[src*='herbalspure-logo'],
img[src*='herbalspure-logo'] {
  max-height: none !important;
  max-width: 130px !important;
  width: 130px !important;
  height: auto !important;
}
@media (max-width: 1024px) {
  .elementor-widget-image img[src*='herbalspure-logo'],
  .elementskit-nav-logo img[src*='herbalspure-logo'],
  img[src*='herbalspure-logo'] {
    max-width: 110px !important;
    width: 110px !important;
  }
}
@media (max-width: 767px) {
  .elementor-widget-image img[src*='herbalspure-logo'],
  .elementskit-nav-logo img[src*='herbalspure-logo'],
  img[src*='herbalspure-logo'] {
    max-width: 90px !important;
    width: 90px !important;
  }
}
/* Header logo widget (ElementsKit header 104) sits flush left at every width, with breathing room
   above and below */
.elementor-element-423e1123 {
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Keep header nav on one clean row like reference */
.elementskit-navbar-nav-default .elementskit-navbar-nav > li > a {
  white-space: nowrap;
}

/* Home hero product slider (assets/js/hero-slider.js). Slides are stacked in one grid cell so the
   hero keeps the height of the tallest slide and nothing jumps when they change; the arrows and
   dots sit in a second row underneath, so they stay above the fold. */
.hp-hero-slider {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  position: relative;
}
.hp-hero-slider > .hp-hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.hp-hero-slider:not(.is-ready) > .hp-hero-slide:first-child,
.hp-hero-slider > .hp-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.6s ease;
}
.hp-hero-slide.is-active .hp-hero-text {
  animation: hpHeroText 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hp-hero-slide.is-active .hp-hero-media {
  animation: hpHeroMedia 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}
@keyframes hpHeroText {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: none; }
}
@keyframes hpHeroMedia {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.hp-hero-nav {
  grid-area: 2 / 1;
  justify-self: center;
  margin-top: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
}
.hp-hero-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp-hero-slider .hp-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.hp-hero-slider .hp-hero-dot.is-active {
  width: 30px;
  background: var(--e-global-color-accent, #ffb700);
}
.hp-hero-slider .hp-hero-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.hp-hero-slider .hp-hero-arrow:hover,
.hp-hero-slider .hp-hero-arrow:focus-visible {
  background: var(--e-global-color-accent, #ffb700);
  border-color: var(--e-global-color-accent, #ffb700);
  color: var(--e-global-color-secondary, #102212);
}
.hp-hero-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The hero is 100vh tall but starts below the 130px header, so centring the slides in it put the
   dots below the fold; bottom padding centres the content in the part of the hero you can see. */
@media (min-width: 1025px) {
  .hp-hero-slider {
    padding-top: 40px !important;
    padding-bottom: 110px !important;
  }
  /* Size the product shots by screen height as well as column width, so on shorter laptop
     screens they don't fill the column and run up against the header. */
  .hp-hero-slider .hp-hero-media {
    justify-content: center;
  }
  .hp-hero-slider .hp-hero-media img {
    width: auto;
    max-width: 92%;
    max-height: clamp(320px, calc(100vh - 320px), 500px);
    object-fit: contain;
  }
}
/* Below ~1400px the boxed hero row is wider than the screen and the text sits almost on the edge. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .hp-hero-slider > .hp-hero-slide {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 1024px) {
  .hp-hero-nav {
    margin-top: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-hero-slide.is-active .hp-hero-text,
  .hp-hero-slide.is-active .hp-hero-media {
    animation: none;
  }
  .hp-hero-slider > .hp-hero-slide {
    transition: none;
  }
}

/* Products dropdown lists full product names, which wrap to 3-4 lines in the kit's 180px panel. */
@media (min-width: 1025px) {
  .elementskit-navbar-nav .elementskit-submenu-panel {
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }
  .elementskit-navbar-nav .elementskit-submenu-panel > li > a.dropdown-item {
    font-size: 17px;
    line-height: 1.3;
  }
}

/* WooCommerce product titles inherit the kit's -3px h2 tracking, which is meant for
   large headings and runs words together at product-card size. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  letter-spacing: -0.2px;
  line-height: 1.25;
}

/* WooCommerce pages (shop, product, cart, checkout, account) use WooCommerce's own templates, so
   their h1/h2 pick up the kit's 90px and 60px display headings. Scale them down, add room under
   the header, and leave space at the bottom for the footer's product image, which overhangs the
   content above it. */
.woocommerce-page .site-main {
  padding-top: 70px;
  padding-bottom: 200px;
}
.woocommerce-page .woocommerce-products-header__title,
.woocommerce-page .page-header .entry-title {
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .woocommerce-page .woocommerce-products-header__title,
  .woocommerce-page .page-header .entry-title {
    font-size: 36px;
  }
}
.single-product div.product .product_title {
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
.single-product div.product .summary p.price {
  font-size: 30px;
  font-weight: 700;
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
  margin-bottom: 18px;
}
/* Sale prices (shop, product page and the Elementor price tags on Home/Products): the struck
   regular price smaller and muted, the sale price without the browser's <ins> underline. */
.price del,
.elementor-heading-title del {
  font-size: 0.7em;
  font-weight: 500;
  opacity: 0.55;
  margin-right: 4px;
}
.elementor-heading-title del {
  display: block;
  margin: 0 0 2px;
}
.price ins,
.elementor-heading-title ins {
  text-decoration: none;
}
.single-product div.product .woocommerce-product-details__short-description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.single-product div.product .product_meta {
  font-size: 15px;
}
.single-product div.product .woocommerce-tabs {
  margin-top: 30px;
}
.single-product div.product .woocommerce-tabs .panel h2,
.single-product .related > h2,
.single-product .upsells > h2 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.single-product div.product .woocommerce-tabs .panel h3,
.single-product div.product .woocommerce-tabs .panel h4 {
  font-size: 22px;
  letter-spacing: -0.3px;
  margin: 20px 0 10px;
}
.single-product div.product .woocommerce-tabs .panel {
  font-size: 17px;
  line-height: 1.65;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
  font-size: 17px;
}
@media (max-width: 1024px) {
  .woocommerce-page .site-main {
    padding-top: 50px;
    padding-bottom: 160px;
  }
  .single-product div.product .product_title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .woocommerce-page .site-main {
    padding-top: 36px;
    padding-bottom: 130px;
  }
  .single-product div.product .product_title {
    font-size: 30px;
    letter-spacing: -0.5px;
  }
  .single-product div.product .summary p.price {
    font-size: 26px;
  }
  .single-product div.product .woocommerce-product-details__short-description {
    font-size: 16px;
  }
  .single-product div.product .woocommerce-tabs .panel h2,
  .single-product .related > h2 {
    font-size: 26px;
  }
}

/* Cart & Checkout blocks. Hello's .alignwide pulls them 80px left of the page title, and the
   blocks' default type (13px grey labels, underlined yellow links, light-grey totals) doesn't
   match the site, so line them up with the title, card them, and use the site's palette. */
.woocommerce-page .site-main .wp-block-woocommerce-cart.alignwide,
.woocommerce-page .site-main .wp-block-woocommerce-checkout.alignwide {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
}
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  color: #5b665c;
}
.wp-block-woocommerce-cart .wc-block-cart {
  align-items: flex-start;
  gap: 32px;
}
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  background: #fff;
  border: 1px solid rgba(11, 79, 30, 0.12);
  border-radius: 24px;
  padding: 24px 28px !important;
  box-shadow: 0 10px 30px rgba(16, 34, 18, 0.05);
}
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  background: var(--e-global-color-9873f43, rgba(11, 79, 30, 0.06));
}
.wp-block-woocommerce-cart .wc-block-cart-items th,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-global-color-4d3d7c1, #0b4f1e) !important;
}
.wp-block-woocommerce-cart table.wc-block-cart-items,
.wp-block-woocommerce-cart table.wc-block-cart-items th,
.wp-block-woocommerce-cart table.wc-block-cart-items tr,
.wp-block-woocommerce-cart table.wc-block-cart-items td {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th {
  border-bottom: 1px solid rgba(11, 79, 30, 0.12) !important;
}
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row td {
  border-top: 1px solid rgba(11, 79, 30, 0.12) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  width: 84px;
  border-radius: 14px;
  background: #f4f7f2;
}
.wp-block-woocommerce-cart .wc-block-cart-items td.wc-block-cart-item__image {
  width: 100px;
}
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-name {
  font-family: "Inter Tight", sans-serif;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--e-global-color-secondary, #102212) !important;
  text-decoration: none !important;
}
.wp-block-woocommerce-cart a.wc-block-components-product-name:hover {
  color: var(--e-global-color-4d3d7c1, #0b4f1e) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__prices {
  font-size: 15px !important;
  margin: 4px 0 6px;
}
.wp-block-woocommerce-cart .wc-block-components-product-metadata {
  font-size: 14px !important;
  line-height: 1.5;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--e-global-color-secondary, #102212);
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  border-radius: 999px;
  overflow: hidden;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector::after {
  border-radius: 999px;
  border-color: rgba(11, 79, 30, 0.25);
}
.wp-block-woocommerce-cart .wc-block-components-totals-coupon,
.wp-block-woocommerce-cart .wc-block-components-panel__button {
  font-size: 15px !important;
  color: var(--e-global-color-secondary, #102212);
}
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
  border-color: rgba(11, 79, 30, 0.12) !important;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--e-global-color-secondary, #102212);
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 24px !important;
  font-weight: 700;
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
  font-size: 18px;
  text-decoration: none !important;
  min-height: 58px;
}
/* Checkout: step headings inherit the kit's -3px h2 tracking ("Contactinformation"); form
   fields get the site's rounded look; the order summary becomes a card like the cart totals. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wc-block-components-title {
  font-family: "Inter Tight", sans-serif;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  color: var(--e-global-color-secondary, #102212);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description,
.wp-block-woocommerce-checkout .wc-block-checkout__guest-checkout-notice {
  font-size: 14px;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__container,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
  border-radius: 12px !important;
  border-color: rgba(11, 79, 30, 0.25) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select:focus {
  border-color: var(--e-global-color-4d3d7c1, #0b4f1e) !important;
  box-shadow: 0 0 0 1px var(--e-global-color-4d3d7c1, #0b4f1e) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  border-radius: 14px;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label {
  font-weight: 600;
  color: var(--e-global-color-secondary, #102212);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
  border-color: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
  background: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--e-global-color-9873f43, rgba(11, 79, 30, 0.06));
  border: 1px solid rgba(11, 79, 30, 0.12);
  border-radius: 24px;
  padding: 10px 8px;
  box-shadow: 0 10px 30px rgba(16, 34, 18, 0.05);
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
  border-radius: 10px;
  background: #fff;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity {
  background: var(--e-global-color-4d3d7c1, #0b4f1e) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
/* Payment method box: one rounded green outline instead of WooCommerce's square dark one. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after {
  display: none;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked {
  border: 1.5px solid var(--e-global-color-4d3d7c1, #0b4f1e);
  border-radius: 14px;
  background: #fff;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  box-shadow: none !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text,
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__button,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  color: var(--e-global-color-secondary, #102212) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
  font-size: 16px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata {
  font-size: 13px;
  line-height: 1.45;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
  font-weight: 700;
  color: var(--e-global-color-secondary, #102212);
}
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
  border-color: rgba(11, 79, 30, 0.12) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-item {
  font-size: 15px;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--e-global-color-secondary, #102212);
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 24px !important;
  font-weight: 700;
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.wp-block-woocommerce-checkout .wc-block-checkout__terms {
  font-size: 14px;
}
.wp-block-woocommerce-checkout .wc-block-checkout__terms a,
.woocommerce-order a {
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
}

/* Order received page: its h2s ("Order details", "Billing address") are 60px kit headings. */
.woocommerce-order h2,
.woocommerce-order .woocommerce-column__title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 36px 0 14px;
}
.woocommerce-order .woocommerce-table--order-details,
.woocommerce-order address {
  border-radius: 16px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .woocommerce-page .site-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart__main,
  .wp-block-woocommerce-cart .wc-block-cart__sidebar {
    padding: 18px !important;
    border-radius: 18px;
  }
  .wp-block-woocommerce-cart .wc-block-components-product-name {
    font-size: 17px !important;
  }
  .woocommerce-order h2,
  .woocommerce-order .woocommerce-column__title {
    font-size: 24px;
  }
}

/* WooCommerce buttons in the site palette instead of WooCommerce purple. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button:not(.is-link) {
  background-color: var(--e-global-color-accent, #ffb700);
  color: var(--e-global-color-secondary, #102212);
  border-radius: 999px;
  font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
  background-color: var(--e-global-color-4d3d7c1, #0b4f1e);
  color: #fff;
}

/* Footer "Visit Us" details. The kit's 20px / 1em style was sized for the template's short dummy
   details; the real address wraps to several lines and the email is wider than the column. */
body .elementor-105 .elementor-element.elementor-element-4f686f8e .elementskit-infobox .box-body > p,
body .elementor-105 .elementor-element.elementor-element-67cac4b6 .elementskit-infobox .box-body > p,
body .elementor-105 .elementor-element.elementor-element-46a8a857 .elementskit-infobox .box-body > p {
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Footer newsletter: MetForm form "Newsletter Subscribe" (post IDs differ local/live) in footer widget 695f0cb8. One pill
   with the email field and a yellow Subscribe button, instead of MetForm's white box + blue button. */
.hp-newsletter .hp-newsletter-row {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-width: 560px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s;
}
.hp-newsletter .hp-newsletter-row:focus-within {
  border-color: var(--e-global-color-accent, #ffb700);
}
.hp-newsletter .hp-newsletter-email {
  flex: 1 1 auto;
  min-width: 0;
}
body .hp-newsletter .elementor-element.hp-newsletter-email .mf-input {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff !important;
  font-size: 16px;
  box-shadow: none;
}
body .hp-newsletter .elementor-element.hp-newsletter-email .mf-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}
.hp-newsletter .hp-newsletter-email .mf-error-message {
  position: absolute;
  padding: 4px 0 0 18px;
  font-size: 14px;
  color: #ff8a80 !important;
}
.hp-newsletter .hp-newsletter-btn {
  flex: 0 0 auto;
}
body .hp-newsletter .elementor-element.hp-newsletter-btn .metform-btn,
body .hp-newsletter .elementor-element.hp-newsletter-btn .metform-btn:focus {
  height: 48px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--e-global-color-accent, #ffb700);
  color: var(--e-global-color-secondary, #102212);
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
  transition: background-color 0.2s, color 0.2s;
}
body .hp-newsletter .elementor-element.hp-newsletter-btn .metform-btn:hover,
body .hp-newsletter .elementor-element.hp-newsletter-btn .metform-btn:focus-visible {
  background: #fff;
  color: var(--e-global-color-secondary, #102212);
}
.hp-newsletter .mf-response-msg-wrap {
  max-width: 560px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
body .hp-newsletter .mf-response-msg-wrap .mf-response-msg {
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  text-align: left;
}
.hp-newsletter .mf-response-msg-wrap .mf-response-msg i,
.hp-newsletter .mf-response-msg-wrap .mf-response-msg p {
  margin: 0;
  font-size: 16px;
  color: #fff;
}
.hp-newsletter .mf-response-msg-wrap .mf-response-msg i.mf-success-icon {
  color: var(--e-global-color-accent, #ffb700);
}
@media (max-width: 767px) {
  body .hp-newsletter .elementor-element.hp-newsletter-email .mf-input {
    height: 44px;
    padding: 0 14px;
  }
  body .hp-newsletter .elementor-element.hp-newsletter-btn .metform-btn {
    height: 44px;
    padding: 0 20px;
  }
}

/* Contact page form: MetForm form "Contact Us" (post IDs differ local/live) in contact page 102 widget 153d3b13,
   inside the green "Let's Get in Touch" card. Translucent fields and the yellow pill button match the footer newsletter. */
.hp-contact-form .hp-contact-row {
  gap: 0 18px;
  margin-bottom: 18px;
}
.hp-contact-form .hp-contact-row--split > .elementor-element {
  flex: 1 1 calc(50% - 9px);
  min-width: 0;
}
.hp-contact-form .hp-contact-field {
  width: 100%;
}
body .hp-contact-form .elementor-element.hp-contact-field .mf-input-label {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
body .hp-contact-form .elementor-element.hp-contact-field .mf-input-required-indicator {
  color: var(--e-global-color-accent, #ffb700);
}
body .hp-contact-form .elementor-element.hp-contact-field .mf-input {
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
  font-size: 16px;
  box-shadow: none;
  transition: border-color 0.2s, background-color 0.2s;
}
body .hp-contact-form .elementor-element.hp-contact-field .mf-input:focus {
  border-color: var(--e-global-color-accent, #ffb700);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
body .hp-contact-form .elementor-element.hp-contact-field .mf-input[aria-invalid="true"] {
  border-color: #ff8a80;
}
body .hp-contact-form .elementor-element.hp-contact-field .mf-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}
body .hp-contact-form .elementor-element.hp-contact-message .mf-input.mf-textarea {
  height: 150px;
  min-height: 120px;
  padding: 14px 18px;
  resize: vertical;
}
.hp-contact-form .hp-contact-field .mf-error-message {
  display: block;
  padding-top: 6px;
  font-size: 14px;
  color: #ff8a80 !important;
}
body .hp-contact-form .elementor-element.hp-contact-btn .metform-btn,
body .hp-contact-form .elementor-element.hp-contact-btn .metform-btn:focus {
  height: 52px;
  padding: 0 36px;
  border: 0;
  border-radius: 999px;
  background: var(--e-global-color-accent, #ffb700);
  color: var(--e-global-color-secondary, #102212);
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
  transition: background-color 0.2s, color 0.2s;
}
body .hp-contact-form .elementor-element.hp-contact-btn .metform-btn:hover,
body .hp-contact-form .elementor-element.hp-contact-btn .metform-btn:focus-visible {
  background: #fff;
  color: var(--e-global-color-secondary, #102212);
}
.hp-contact-form .mf-response-msg-wrap {
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
body .hp-contact-form .mf-response-msg-wrap .mf-response-msg {
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  text-align: left;
}
.hp-contact-form .mf-response-msg-wrap .mf-response-msg i,
.hp-contact-form .mf-response-msg-wrap .mf-response-msg p {
  margin: 0;
  font-size: 16px;
  color: #fff;
}
.hp-contact-form .mf-response-msg-wrap .mf-response-msg i.mf-success-icon {
  color: var(--e-global-color-accent, #ffb700);
}
@media (max-width: 767px) {
  .hp-contact-form .hp-contact-row--split {
    flex-wrap: wrap;
    gap: 18px;
  }
  .hp-contact-form .hp-contact-row--split > .elementor-element {
    flex-basis: 100%;
  }
}

/* Terms & Conditions / Privacy Policy body text. The kit's heading sizes and tight
   tracking are meant for section titles, so long-form policy text gets its own scale. */
.elementor-widget.hp-legal {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #5b665c;
}
.elementor-widget.hp-legal h3 {
  font-family: "Inter Tight", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--e-global-color-secondary, #102212);
  margin: 2.2em 0 0.7em;
}
.elementor-widget.hp-legal p,
.elementor-widget.hp-legal ul {
  margin: 0 0 1em;
}
.elementor-widget.hp-legal ul {
  padding-left: 1.25em;
}
.elementor-widget.hp-legal li {
  margin-bottom: 0.45em;
}
.elementor-widget.hp-legal li::marker {
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.elementor-widget.hp-legal strong {
  color: var(--e-global-color-secondary, #102212);
}
.elementor-widget.hp-legal a {
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor-widget.hp-legal a:hover {
  color: var(--e-global-color-accent, #ffb700);
}
.elementor-widget.hp-legal .hp-legal-updated {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--e-global-color-9873f43, rgba(11, 79, 30, 0.12));
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 1.5em;
}
.elementor-widget.hp-legal .hp-legal-note {
  background: var(--e-global-color-9873f43, rgba(11, 79, 30, 0.12));
  border-left: 4px solid var(--e-global-color-accent, #ffb700);
  border-radius: 0 16px 16px 0;
  padding: 1.1em 1.4em 0.2em;
  margin-bottom: 1.2em;
}
@media (min-width: 1025px) {
  .hp-legal-aside {
    position: sticky;
    top: 40px;
    align-self: flex-start;
  }
}
@media (max-width: 767px) {
  .elementor-widget.hp-legal {
    font-size: 16px;
  }
  .elementor-widget.hp-legal h3 {
    font-size: 22px;
  }
}
/* Header account button ([herbalspure_account_link]) and menu cart, which replaced the social icons.
   The account toggle copies the old icons' look: green tile, white icon, white tile on hover. */
.hp-account {
  position: relative;
}
.hp-account .hp-account__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--e-global-color-4d3d7c1, #0b4f1e);
  color: var(--e-global-color-primary, #fff);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.hp-account .hp-account__toggle:hover,
.hp-account .hp-account__toggle:focus-visible,
.hp-account--logged-in:focus-within .hp-account__toggle {
  background: var(--e-global-color-primary, #fff);
  color: var(--e-global-color-secondary, #102212);
}
.hp-account__icon {
  flex-shrink: 0;
}
.hp-account__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 34, 18, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
/* Bridges the gap between toggle and menu so the hover isn't lost on the way down. */
.hp-account__menu::before {
  content: '';
  position: absolute;
  inset: -10px 0 auto;
  height: 10px;
}
.hp-account--logged-in:hover .hp-account__menu,
.hp-account--logged-in:focus-within .hp-account__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}
.hp-account .hp-account__menu a {
  display: block;
  padding: 8px 18px;
  color: var(--e-global-color-secondary, #102212);
  font-size: 15px;
}
.hp-account .hp-account__menu a:hover,
.hp-account .hp-account__menu a:focus-visible {
  background: var(--e-global-color-9873f43, rgba(11, 79, 30, 0.12));
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.hp-header-cart .elementor-menu-cart__toggle .elementor-button {
  transition: background-color 0.2s, color 0.2s;
}
/* Side cart drawer: the kit's yellow link colour and button border otherwise leak in. */
.elementor-widget.hp-header-cart {
  --cart-padding: 28px 24px;
  --menu-cart-subtotal-color: var(--e-global-color-secondary, #102212);
  --product-price-color: var(--e-global-color-text, #959595);
  --cart-footer-buttons-border-radius: 999px;
  --view-cart-button-background-color: transparent;
  --view-cart-button-text-color: var(--e-global-color-4d3d7c1, #0b4f1e);
  --view-cart-button-hover-background-color: var(--e-global-color-4d3d7c1, #0b4f1e);
  --view-cart-button-hover-text-color: var(--e-global-color-primary, #fff);
  --checkout-button-background-color: var(--e-global-color-accent, #ffb700);
  --checkout-button-text-color: var(--e-global-color-secondary, #102212);
  --checkout-button-hover-background-color: var(--e-global-color-4d3d7c1, #0b4f1e);
  --checkout-button-hover-text-color: var(--e-global-color-primary, #fff);
}
.hp-header-cart .elementor-menu-cart__product-name a {
  color: var(--e-global-color-secondary, #102212);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.hp-header-cart .elementor-menu-cart__product-name a:hover {
  color: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.hp-header-cart .elementor-menu-cart__footer-buttons .elementor-button {
  border: 2px solid var(--e-global-color-4d3d7c1, #0b4f1e);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
}
.hp-header-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout {
  border-color: var(--e-global-color-accent, #ffb700);
}
.hp-header-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  border-color: var(--e-global-color-4d3d7c1, #0b4f1e);
}
.hp-header-cart .elementor-menu-cart__toggle .elementor-button-icon[data-counter]:before {
  font-weight: 700;
}
/* My Account login / register forms. */
.woocommerce-account .woocommerce .u-columns h2 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 10px 0 16px;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  margin-top: 0;
  padding: 28px;
  border: 1px solid var(--e-global-color-9873f43, rgba(11, 79, 30, 0.12));
  border-radius: 16px;
  background: #fff;
}
.woocommerce-account .woocommerce form .form-row label {
  color: var(--e-global-color-secondary, #102212);
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 6px;
}
.woocommerce-account .woocommerce form .form-row .input-text {
  border-radius: 8px;
  padding: 10px 12px;
}
.woocommerce-account .woocommerce .woocommerce-privacy-policy-text p {
  font-size: 15px;
  line-height: 1.5;
}
/* My Account dashboard navigation as a card instead of a bulleted list of yellow links. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 10px;
  list-style: none;
  border: 1px solid var(--e-global-color-9873f43, rgba(11, 79, 30, 0.12));
  border-radius: 16px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--e-global-color-secondary, #102212);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--e-global-color-9873f43, rgba(11, 79, 30, 0.12));
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--e-global-color-4d3d7c1, #0b4f1e);
  color: var(--e-global-color-primary, #fff);
}
@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 24px;
  }
}
/* Phones: icon-only tiles beside the hamburger. */
@media (max-width: 767px) {
  .hp-header-actions-mobile .hp-account__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hp-header-actions-mobile .hp-account__toggle {
    padding: 10px;
  }
  /* Shrink-wrap the icon group so it sits on one line with the hamburger. */
  .e-con.hp-header-actions-mobile {
    --width: auto;
    flex: 0 0 auto;
  }
  .e-con:has(> .hp-header-actions-mobile) {
    --flex-wrap: nowrap;
  }
}

/* Off-canvas mobile menu (header 104 nav widget): the header's dark green instead of the plugin's
   white gradient, with white links and yellow for the current page and hover. The panel only
   exists at the widget's tablet breakpoint and below. */
@media (max-width: 1024px) {
  .elementor-element-16f7919d .elementskit-menu-container {
    background: #102212 !important;
  }
  .elementor-element-16f7919d .elementskit-submenu-panel,
  .elementor-element-16f7919d .elementskit-submenu-panel > li > a {
    background: transparent !important;
  }
  .elementor-element-16f7919d .elementskit-navbar-nav > li > a,
  .elementor-element-16f7919d .elementskit-submenu-panel > li > a {
    color: #fff !important;
  }
  .elementor-element-16f7919d .elementskit-navbar-nav > li.current-menu-item > a,
  .elementor-element-16f7919d .elementskit-navbar-nav > li.current-menu-ancestor > a,
  .elementor-element-16f7919d .elementskit-navbar-nav > li > a.active,
  .elementor-element-16f7919d .elementskit-submenu-panel > li.current-menu-item > a,
  .elementor-element-16f7919d .elementskit-navbar-nav > li > a:hover,
  .elementor-element-16f7919d .elementskit-navbar-nav > li > a:focus-visible,
  .elementor-element-16f7919d .elementskit-submenu-panel > li > a:hover,
  .elementor-element-16f7919d .elementskit-submenu-panel > li > a:focus-visible {
    color: var(--e-global-color-accent, #ffb400) !important;
  }
  /* Sub-menu arrow: the plugin draws it 42px wide; size the arrow to the 18px text, and keep a
     30px tap target around it with padding. */
  .elementor-element-16f7919d .elementskit-dropdown-has > a svg.elementskit-submenu-indicator {
    width: 30px !important;
    height: 30px !important;
    padding: 8px !important;
  }
  .elementor-element-16f7919d button.elementskit-menu-close {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
  }
}

/* Testimonials page: [herbalspure_testimonials] (functions.php, assets/js/testimonials.js).
   Product filter chips, a card grid that mixes English, Roman Urdu and Urdu (right-to-left in
   Noto Nastaliq Urdu), and a WhatsApp call to share feedback. */
.hp-testimonials {
  --hp-t-ink: var(--e-global-color-secondary, #102212);
  --hp-t-green: var(--e-global-color-4d3d7c1, #0b4f1e);
  --hp-t-accent: var(--e-global-color-accent, #ffb700);
  --hp-t-card: #eef3ef;
  --hp-t-muted: #5f6f63;
  width: 100%;
  font-family: var(--e-global-typography-secondary-font-family, "Manrope"), sans-serif;
}
.hp-testimonials__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}
.hp-testimonials__filters button {
  padding: 10px 18px;
  border: 1px solid rgba(16, 34, 18, 0.15);
  border-radius: 999px;
  background: #fff;
  color: var(--hp-t-ink);
  font-family: var(--e-global-typography-primary-font-family, "Inter Tight"), sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.hp-testimonials__filters button:hover {
  border-color: var(--hp-t-green);
  background: #fff;
  color: var(--hp-t-green);
}
.hp-testimonials__filters button.is-active {
  border-color: var(--hp-t-ink);
  background: var(--hp-t-ink);
  color: #fff;
}
.hp-testimonials__filters button:focus-visible {
  outline: 2px solid var(--hp-t-accent);
  outline-offset: 2px;
}
/* Masonry columns, so an odd number of cards never leaves one stranded on a row */
.hp-testimonials__grid {
  columns: 3;
  column-gap: 24px;
}
.hp-testimonial {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  break-inside: avoid;
  padding: 28px;
  border-radius: 28px;
  background: var(--hp-t-card);
  color: var(--hp-t-ink);
}
.hp-testimonial[hidden] {
  display: none;
}
.hp-testimonial__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hp-testimonials a.hp-testimonial__product {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--hp-t-ink);
  font-family: var(--e-global-typography-primary-font-family, "Inter Tight"), sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.hp-testimonials a.hp-testimonial__product:hover {
  color: var(--hp-t-green);
}
.hp-testimonial__product img {
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}
.hp-testimonial__text {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-style: normal;
}
.hp-testimonial__text::before {
  content: "\201C";
  display: block;
  height: 30px;
  color: var(--hp-t-accent);
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
}
.hp-testimonial__text[dir="rtl"]::before {
  content: "\201D";
}
.hp-testimonial__text p {
  margin: 0;
  color: var(--hp-t-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}
.hp-testimonial--roman .hp-testimonial__text p {
  font-style: italic;
}
.hp-testimonial__text[lang="ur"] p {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 2.2;
}
.hp-testimonial__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 34, 18, 0.1);
}
.hp-testimonial__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hp-t-green);
  color: #fff;
}
.hp-testimonial__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.hp-testimonial__meta strong {
  font-size: 15px;
  font-weight: 700;
}
.hp-testimonial__meta span {
  color: var(--hp-t-muted);
  font-size: 13px;
}
.hp-testimonial__who[lang="ur"] .hp-testimonial__meta {
  font-family: "Noto Nastaliq Urdu", serif;
  line-height: 1.9;
}
.hp-testimonials__share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding: 32px 36px;
  border-radius: 28px;
  background: var(--hp-t-ink);
  color: #fff;
}
.hp-testimonials__share h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--e-global-typography-primary-font-family, "Inter Tight"), sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.hp-testimonials__share p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.5;
}
.hp-testimonials__share .hp-testimonials__share-ur {
  margin-top: 6px;
  color: var(--hp-t-accent);
  font-family: "Noto Nastaliq Urdu", serif;
  line-height: 2;
  text-align: left;
}
.hp-testimonials a.hp-testimonials__share-btn {
  flex: 0 0 auto;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--hp-t-accent);
  color: var(--hp-t-ink);
  font-family: var(--e-global-typography-primary-font-family, "Inter Tight"), sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.hp-testimonials a.hp-testimonials__share-btn:hover,
.hp-testimonials a.hp-testimonials__share-btn:focus {
  background: #fff;
  color: var(--hp-t-ink);
}
/* Home page preview: one even row of cards; below desktop it becomes a swipeable row */
.hp-testimonials--preview .hp-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  columns: auto;
}
.hp-testimonials--preview .hp-testimonial {
  margin-bottom: 0;
}
.hp-testimonials__more {
  margin-top: 40px;
  text-align: center;
}
@media (max-width: 1024px) {
  .hp-testimonials--preview .hp-testimonials__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86%, 420px);
    margin-inline: -16px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .hp-testimonials--preview .hp-testimonial {
    scroll-snap-align: start;
  }
  .hp-testimonials__more {
    margin-top: 24px;
  }
}
.hp-testimonials .hp-testimonials__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--hp-t-ink);
  color: #fff;
  font-family: var(--e-global-typography-primary-font-family, "Inter Tight"), sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}
.hp-testimonials .hp-testimonials__more a:hover,
.hp-testimonials .hp-testimonials__more a:focus {
  background: var(--hp-t-accent);
  color: var(--hp-t-ink);
}
@media (max-width: 1024px) {
  .hp-testimonials__grid {
    columns: 2;
  }
}
@media (max-width: 767px) {
  .hp-testimonials__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: -16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hp-testimonials__filters button {
    flex: 0 0 auto;
  }
  .hp-testimonials__grid {
    columns: 1;
  }
  .hp-testimonial {
    margin-bottom: 16px;
    padding: 22px;
    border-radius: 22px;
  }
  .hp-testimonials__share {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px;
  }
  .hp-testimonials__share h3 {
    font-size: 22px;
  }
}