/*---------------------------------------------------------------------------------

 Theme Name:   TSA
 Theme URI:    https://tshirtssouthafrica.com/
 Description:  T Shirts south africa
 Author:       Michael Joudal
 Author URI:   https://progressiveweb.co.za
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/* =========================================================
   T-SHIRTS SOUTH AFRICA / DIVI CHILD THEME UI SYSTEM
   Clean, light, simple corporate UI
   Palette:
   #34495e
   #2c3e50
   #e74c3c
   #c0392b
   #ecf0f1
   #bdc3c7
========================================================= */

/* ------------------------------
   1. ROOT VARIABLES
------------------------------ */
:root{
  --tsa-bg: #ecf0f1;
  --tsa-surface: #ffffff;
  --tsa-surface-soft: #f7f9fa;
  --tsa-border: #d7dde3;
  --tsa-border-strong: #bdc3c7;

  --tsa-text: #2c3e50;
  --tsa-text-soft: #34495e;
  --tsa-heading: #2c3e50;

  --tsa-primary: #e74c3c;
  --tsa-primary-dark: #c0392b;

  --tsa-radius-sm: 10px;
  --tsa-radius-md: 14px;
  --tsa-radius-lg: 18px;
  --tsa-radius-xl: 24px;

  --tsa-shadow-sm: 0 4px 12px rgba(44,62,80,0.06);
  --tsa-shadow-md: 0 10px 30px rgba(44,62,80,0.08);
  --tsa-shadow-lg: 0 18px 40px rgba(44,62,80,0.10);

  --tsa-max-width: 1280px;
  --tsa-transition: all .25s ease;
}

/* ------------------------------
   2. GLOBAL RESET / BASE
------------------------------ */
html{
  scroll-behavior: smooth;
}

body{
  background: var(--tsa-bg);
  color: var(--tsa-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
.et_pb_text,
.et_pb_module,
p,
li,
input,
textarea,
select{
  color: var(--tsa-text);
}

h1,h2,h3,h4,h5,h6{
  color: var(--tsa-heading);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1{ font-size: clamp(32px, 4vw, 52px); }
h2{ font-size: clamp(28px, 3vw, 40px); }
h3{ font-size: clamp(22px, 2vw, 30px); }
h4{ font-size: 22px; }
h5{ font-size: 18px; }
h6{ font-size: 16px; }

p{
  margin-bottom: 1em;
}

a{
  color: var(--tsa-primary-dark);
  text-decoration: none;
  transition: var(--tsa-transition);
}

a:hover{
  color: var(--tsa-primary);
}

/* Selection */
::selection{
  background: var(--tsa-primary);
  color: #fff;
}

/* ------------------------------
   3. DIVI LAYOUT SPACING
------------------------------ */
.et_pb_section{
  background-color: transparent;
}

.et_pb_row{
  width: 90%;
  max-width: var(--tsa-max-width);
}

.et_pb_section.et_section_regular{
  padding: 50px 0;
}

.et_pb_row,
.container,
.et-l--header .et_pb_row,
.et-l--footer .et_pb_row{
  max-width: var(--tsa-max-width);
}

/* ------------------------------
   4. HEADER / MENU
------------------------------ */
#main-header{
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(44,62,80,0.06);
  border-bottom: 1px solid rgba(215,221,227,0.9);
}

#main-header.et-fixed-header{
  box-shadow: 0 8px 24px rgba(44,62,80,0.08);
}

#logo{
  max-height: 70%;
}

#top-menu li > a,
.et_mobile_menu li a{
  color: var(--tsa-text) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: var(--tsa-transition);
}

#top-menu li > a:hover,
.et_mobile_menu li a:hover{
  color: var(--tsa-primary) !important;
  opacity: 1 !important;
}

#top-menu-nav #top-menu li.current-menu-item > a,
#mobile_menu .current-menu-item > a{
  color: var(--tsa-primary) !important;
}

#top-menu li.menu-item-has-children > a:first-child:after{
  color: var(--tsa-text-soft);
}

.nav li ul{
  border-top: 3px solid var(--tsa-primary);
  border-radius: 0 0 var(--tsa-radius-md) var(--tsa-radius-md);
  box-shadow: var(--tsa-shadow-md);
  background: #fff;
  border-left: 1px solid var(--tsa-border);
  border-right: 1px solid var(--tsa-border);
  border-bottom: 1px solid var(--tsa-border);
}

.nav li ul li a{
  padding: 12px 18px;
  font-weight: 600;
}

.mobile_menu_bar:before{
  color: var(--tsa-text);
}

.et_mobile_menu{
  border-top: 3px solid var(--tsa-primary);
  background: #fff !important;
  box-shadow: var(--tsa-shadow-md);
}

/* CTA menu item support */
#top-menu li.cta-menu-btn > a{
  background: var(--tsa-primary);
  color: #fff !important;
  padding: 12px 18px !important;
  border-radius: 999px;
  border: 1px solid var(--tsa-primary-dark);
  box-shadow: 0 8px 18px rgba(231,76,60,0.18);
}

#top-menu li.cta-menu-btn > a:hover{
  background: var(--tsa-primary-dark);
  color: #fff !important;
}

/* ------------------------------
   5. BUTTONS
------------------------------ */
.et_pb_button,
.button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
input[type="submit"],
button,
form .et_contact_bottom_container button{
  background: var(--tsa-primary);
  color: #fff !important;
  border: 1px solid var(--tsa-primary-dark);
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 14px 24px !important;
  box-shadow: 0 10px 20px rgba(231,76,60,0.16);
  transition: var(--tsa-transition);
}

.et_pb_button:hover,
.button:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
input[type="submit"]:hover,
button:hover,
form .et_contact_bottom_container button:hover{
  background: var(--tsa-primary-dark) !important;
  border-color: var(--tsa-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(192,57,43,0.18);
}

/* Secondary / outline style */
.tsa-btn-outline,
.et_pb_button.tsa-btn-outline{
  background: #fff !important;
  color: var(--tsa-primary-dark) !important;
  border: 1px solid var(--tsa-primary-dark) !important;
  box-shadow: none !important;
}

.tsa-btn-outline:hover,
.et_pb_button.tsa-btn-outline:hover{
  background: var(--tsa-primary) !important;
  color: #fff !important;
}

/* ------------------------------
   6. CARD UI / BOXES
------------------------------ */
.tsa-card,
.et_pb_blurb.tsa-card,
.et_pb_text.tsa-card,
.et_pb_module.tsa-card,
.et_pb_pricing_table,
.et_pb_team_member,
.et_pb_promo,
.et_pb_testimonial,
.et_pb_toggle,
.et_pb_accordion .et_pb_toggle,
.et_pb_tabs,
.et_pb_tab,
.et_pb_post,
.single-post .et_pb_post,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce div.product,
.sidebar .et_pb_widget,
.widget_block,
.widget{
  background: var(--tsa-surface);
  border: 1px solid var(--tsa-border);
  border-radius: var(--tsa-radius-lg);
  box-shadow: var(--tsa-shadow-md);
}

.et_pb_text.tsa-card,
.et_pb_module.tsa-card,
.et_pb_promo,
.et_pb_pricing_table,
.et_pb_team_member,
.et_pb_testimonial,
.et_pb_toggle,
.et_pb_post,
.sidebar .et_pb_widget,
.widget{
  padding: 24px;
}

/* ------------------------------
   7. HERO / BANNERS
------------------------------ */
.tsa-hero-light,
.et_pb_section.tsa-hero-light{
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%) !important;
  border-bottom: 1px solid var(--tsa-border);
}

.tsa-hero-panel{
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%);
  border: 1px solid var(--tsa-border);
  border-radius: var(--tsa-radius-xl);
  box-shadow: var(--tsa-shadow-lg);
  padding: 40px;
}

.tsa-kicker{
  display: inline-block;
  color: var(--tsa-primary-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

/* ------------------------------
   8. DIVI BLURBS / ICONS
------------------------------ */
.et_pb_blurb .et_pb_main_blurb_image .et-pb-icon{
  color: var(--tsa-primary);
  background: #fff;
  border: 1px solid var(--tsa-border);
  border-radius: 50%;
  box-shadow: var(--tsa-shadow-sm);
  padding: 16px;
}

.et_pb_blurb_content{
  max-width: 100%;
}

.et_pb_blurb h4,
.et_pb_module_header{
  color: var(--tsa-heading);
}

/* ------------------------------
   9. FORMS
------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select,
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width: 100%;
  background: #fff;
  color: var(--tsa-text);
  border: 1px solid var(--tsa-border);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 50px;
  box-shadow: none;
  transition: var(--tsa-transition);
}

textarea,
.et_pb_contact_form textarea{
  min-height: 140px;
}

input:focus,
textarea:focus,
select:focus,
.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color: var(--tsa-primary);
  box-shadow: 0 0 0 3px rgba(231,76,60,0.10);
  outline: none;
}

::-webkit-input-placeholder{ color: #7a8996; }
::-moz-placeholder{ color: #7a8996; }
:-ms-input-placeholder{ color: #7a8996; }
::placeholder{ color: #7a8996; }

.et_contact_bottom_container{
  float: none;
  display: flex;
  justify-content: flex-start;
  margin-top: 15px;
}

/* ------------------------------
   10. SEARCH / FILTER UI
------------------------------ */
.et_pb_search{
  background: #fff;
  border: 1px solid var(--tsa-border);
  border-radius: var(--tsa-radius-lg);
  box-shadow: var(--tsa-shadow-sm);
  overflow: hidden;
}

.et_pb_search input.et_pb_s,
.et_pb_search .et_pb_searchform input.et_pb_searchsubmit{
  border-radius: 0 !important;
}

.et_pb_search input.et_pb_s{
  background: transparent;
  border: none;
  color: var(--tsa-text);
}

.et_pb_search input.et_pb_searchsubmit{
  background: var(--tsa-primary);
  color: #fff !important;
}

/* ------------------------------
   11. BLOG / ARTICLE UI
------------------------------ */
.et_pb_post{
  overflow: hidden;
}

.et_pb_post .entry-featured-image-url img{
  border-radius: 14px;
}

.et_pb_post h2.entry-title a{
  color: var(--tsa-heading);
}

.et_pb_post h2.entry-title a:hover{
  color: var(--tsa-primary-dark);
}

.post-meta,
.post-meta a{
  color: var(--tsa-text-soft) !important;
  font-size: 14px;
}

blockquote{
  background: #fff;
  border-left: 4px solid var(--tsa-primary);
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  box-shadow: var(--tsa-shadow-sm);
  color: var(--tsa-text);
}

hr{
  border: 0;
  border-top: 1px solid var(--tsa-border);
  margin: 30px 0;
}

/* ------------------------------
   12. SIDEBAR / WIDGETS
------------------------------ */
.et_pb_widget,
.widget{
  margin-bottom: 24px;
}

.et_pb_widget .widgettitle,
.widgettitle,
.wp-block-heading{
  font-size: 18px;
  color: var(--tsa-heading);
  margin-bottom: 14px;
}

.et_pb_widget ul,
.widget ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.et_pb_widget ul li,
.widget ul li{
  padding: 8px 0;
  border-bottom: 1px solid var(--tsa-border);
}

.et_pb_widget ul li:last-child,
.widget ul li:last-child{
  border-bottom: 0;
}

/* ------------------------------
   13. FOOTER
------------------------------ */
#main-footer{
  background: #2c3e50;
  color: #ecf0f1;
}

#footer-widgets{
  padding: 60px 0 20px;
}

.footer-widget h4,
#main-footer h4,
#main-footer .title{
  color: #fff;
}

.footer-widget,
.footer-widget p,
.footer-widget li,
#footer-info{
  color: rgba(236,240,241,0.9);
}

.footer-widget a,
#footer-info a{
  color: #fff;
}

.footer-widget a:hover,
#footer-info a:hover{
  color: #e74c3c;
}

#footer-bottom{
  background: #34495e;
  padding: 16px 0;
}

/* ------------------------------
   14. TABLES
------------------------------ */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--tsa-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--tsa-shadow-sm);
}

table th{
  background: #34495e;
  color: #fff;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tsa-border);
}

table td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--tsa-border);
  color: var(--tsa-text);
}

table tr:last-child td{
  border-bottom: 0;
}

/* ------------------------------
   15. ACCORDIONS / TOGGLES / TABS
------------------------------ */
.et_pb_toggle{
  margin-bottom: 16px;
}

.et_pb_toggle_title,
.et_pb_tab a{
  color: var(--tsa-heading);
  font-weight: 700;
}

.et_pb_toggle_open{
  border-color: var(--tsa-primary);
}

.et_pb_toggle_close{
  background: #fff;
}

ul.et_pb_tabs_controls{
  background: #fff;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--tsa-border);
}

ul.et_pb_tabs_controls:after{
  border-top: 1px solid var(--tsa-border);
}

.et_pb_tabs_controls li{
  border-right: 1px solid var(--tsa-border);
}

.et_pb_tabs_controls li.et_pb_tab_active{
  background: var(--tsa-surface-soft);
}

.et_pb_tabs_controls li a{
  font-weight: 700;
}

/* ------------------------------
   16. TESTIMONIALS / QUOTES
------------------------------ */
.et_pb_testimonial{
  position: relative;
}

.et_pb_testimonial:before{
  color: rgba(231,76,60,0.16);
}

.et_pb_testimonial_description,
.et_pb_testimonial_author{
  color: var(--tsa-text);
}

/* ------------------------------
   17. WOOCOMMERCE
------------------------------ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  padding: 18px;
  overflow: hidden;
  transition: var(--tsa-transition);
}

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

.woocommerce ul.products li.product a img{
  border-radius: 14px;
  margin-bottom: 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color: var(--tsa-heading);
  font-size: 20px;
  font-weight: 800;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--tsa-primary-dark) !important;
  font-weight: 800;
  font-size: 22px;
}

.woocommerce span.onsale{
  background: var(--tsa-primary);
  color: #fff;
  border-radius: 999px;
  min-width: auto;
  min-height: auto;
  line-height: 1;
  padding: 10px 14px;
  font-weight: 700;
  box-shadow: var(--tsa-shadow-sm);
}

.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding-left: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border: 1px solid var(--tsa-border);
  background: #fff;
  border-radius: 14px 14px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background: var(--tsa-surface-soft);
  border-bottom-color: var(--tsa-surface-soft);
}

.woocommerce div.product .woocommerce-tabs .panel{
  background: #fff;
  border: 1px solid var(--tsa-border);
  border-radius: 0 14px 14px 14px;
  padding: 24px;
  box-shadow: var(--tsa-shadow-sm);
}
/* =========================================================
   SUPPORT CSS FOR CHILD THEME UX SCRIPT
========================================================= */

/* Header behavior */
body.tsa-scrolled #main-header{
  box-shadow: 0 8px 24px rgba(44,62,80,0.08);
}

body.tsa-header-hide #main-header.et-fixed-header{
  transform: translateY(-100%);
}

body.tsa-header-show #main-header.et-fixed-header{
  transform: translateY(0);
}

#main-header{
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Mobile submenu buttons */
#mobile_menu .menu-item-has-children{
  position: relative;
}

#mobile_menu .tsa-submenu-toggle{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 1px solid #d7dde3;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  z-index: 3;
}

#mobile_menu .tsa-submenu-toggle span,
#mobile_menu .tsa-submenu-toggle span:before{
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: #2c3e50;
  transform: translate(-50%, -50%);
}

#mobile_menu .tsa-submenu-toggle span:before{
  width: 2px;
  height: 12px;
}

#mobile_menu .tsa-submenu-toggle[aria-expanded="true"] span:before{
  display: none;
}

#mobile_menu .menu-item-has-children > a{
  padding-right: 60px !important;
}

/* Scroll reveal */
.tsa-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.tsa-in-view{
  opacity: 1;
  transform: translateY(0);
}

body.reduced-motion .tsa-reveal,
body.reduced-motion .tsa-in-view{
  opacity: 1;
  transform: none;
  transition: none;
}

/* Responsive tables */
.tsa-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}

/* Form focus helper */
.tsa-field-focus{
  position: relative;
}

/* Quantity buttons */
.quantity{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quantity .qty{
  text-align: center;
  min-width: 70px;
}

.tsa-qty-btn{
  width: 40px;
  height: 40px;
  border: 1px solid #d7dde3;
  background: #fff;
  color: #2c3e50;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.tsa-qty-btn:hover{
  background: #ecf0f1;
}

/* Touch helper */
.tsa-touch-active{
  transform: scale(0.98);
}

/* Safe full-height sections on mobile */
.tsa-full-height{
  min-height: calc(var(--vh, 1vh) * 100);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background: #fff !important;
  border: 1px solid var(--tsa-border) !important;
  border-left: 4px solid var(--tsa-primary) !important;
  border-radius: 14px;
  color: var(--tsa-text);
  box-shadow: var(--tsa-shadow-sm);
}

.woocommerce-message:before,
.woocommerce-info:before,
.woocommerce-error:before{
  color: var(--tsa-primary);
}

/* Quantity */
.woocommerce .quantity .qty{
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--tsa-border);
}

/* ------------------------------
   18. BREADCRUMBS / PAGINATION
------------------------------ */
.et_pb_posts_nav a,
.pagination a,
.pagination span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background: #fff;
  border: 1px solid var(--tsa-border);
  color: var(--tsa-text);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--tsa-shadow-sm);
}

.pagination .current,
.woocommerce nav.woocommerce-pagination ul li span.current{
  background: var(--tsa-primary);
  border-color: var(--tsa-primary-dark);
  color: #fff !important;
}

/* ------------------------------
   19. IMAGE STYLING
------------------------------ */
img{
  max-width: 100%;
  height: auto;
}

.et_pb_image img,
.wp-post-image,
.woocommerce-product-gallery__image img{
  border-radius: 16px;
}

.tsa-soft-image img{
  background: linear-gradient(180deg, #ffffff 0%, #ecf0f1 100%);
  border: 1px solid var(--tsa-border);
  box-shadow: var(--tsa-shadow-sm);
  padding: 10px;
  border-radius: 18px;
}

/* ------------------------------
   20. UTILITY CLASSES
------------------------------ */
.tsa-surface{
  background: var(--tsa-surface);
  border: 1px solid var(--tsa-border);
  border-radius: var(--tsa-radius-lg);
  box-shadow: var(--tsa-shadow-md);
}

.tsa-soft{
  background: var(--tsa-surface-soft);
}

.tsa-border-left-accent{
  border-left: 4px solid var(--tsa-primary);
}

.tsa-text-primary{
  color: var(--tsa-primary-dark) !important;
}

.tsa-text-dark{
  color: var(--tsa-heading) !important;
}

.tsa-text-soft{
  color: var(--tsa-text-soft) !important;
}

.tsa-rounded{
  border-radius: var(--tsa-radius-lg);
}

.tsa-shadow{
  box-shadow: var(--tsa-shadow-md);
}

.tsa-max{
  max-width: var(--tsa-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------
   21. DIVI SHOP / PRODUCT GRID HELPERS
------------------------------ */
.et_shop_image{
  border-radius: 14px;
  overflow: hidden;
}

.et_overlay{
  border: 0;
  background: rgba(44,62,80,0.12);
}

.et_overlay:before{
  color: #fff;
  background: var(--tsa-primary);
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  margin-left: -28px;
  margin-top: -28px;
  font-size: 24px;
}

/* ------------------------------
   22. BACK TO TOP
------------------------------ */
.et_pb_scroll_top.et-visible{
  background: var(--tsa-primary);
  border-radius: 14px;
  box-shadow: var(--tsa-shadow-md);
}

.et_pb_scroll_top:before{
  color: #fff;
}

/* ------------------------------
   23. MOBILE
------------------------------ */
@media (max-width: 980px){
  .et_pb_row{
    width: 92%;
  }

  #top-menu li.cta-menu-btn > a{
    padding: 10px 14px !important;
  }

  .tsa-hero-panel{
    padding: 28px;
  }

  .et_pb_section.et_section_regular{
    padding: 40px 0;
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    padding: 14px;
  }
}

@media (max-width: 767px){
  body{
    font-size: 15px;
  }

  .et_pb_row{
    width: 94%;
  }

  h1{ font-size: clamp(28px, 9vw, 40px); }
  h2{ font-size: clamp(24px, 7vw, 34px); }
  h3{ font-size: clamp(20px, 6vw, 28px); }

  .tsa-hero-panel{
    padding: 22px;
    border-radius: 18px;
  }

  .et_pb_button,
  .button,
  .wp-element-button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  input[type="submit"],
  button{
    width: 100%;
    text-align: center;
  }

  table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}