/* ================================================================
   T4Y THEME OVERLAY — tea4you.com.ua
   CSS override for Divi + WooCommerce
   v2.1 — fixes: header colors, shop banner, card fonts, price,
           filter active state, quantity input
   ================================================================ */

/* ===== CSS VARIABLES ===== */
:root {
  --t4y-green:       #4A7C59;
  --t4y-green-dark:  #2D5A3D;
  --t4y-green-deep:  #1E3D2A;
  --t4y-green-light: #6B9E7A;
  --t4y-green-pale:  #A8C5B5;
  --t4y-brown:       #8B6F47;
  --t4y-sand:        #D4C5A9;
  --t4y-sand-light:  #E8DFC8;
  --t4y-cream:       #F5F0E8;
  --t4y-cream-warm:  #FAF6EE;
  --t4y-white:       #FFFFFF;
  --t4y-text-dark:   #1C2B20;
  --t4y-text-medium: #3D5247;
  --t4y-text-soft:   #6B7B6E;
  --t4y-text-muted:  #9AAD9E;
  --t4y-gold:        #C9A84C;

  --t4y-radius-sm:   12px;
  --t4y-radius-md:   18px;
  --t4y-radius-lg:   24px;
  --t4y-radius-pill: 999px;

  --t4y-shadow-soft: 0 4px 20px rgba(45, 90, 61, 0.08);
  --t4y-shadow-card: 0 8px 32px rgba(45, 90, 61, 0.12);
  --t4y-shadow-hover: 0 16px 48px rgba(45, 90, 61, 0.20);
  --t4y-shadow-green: 0 8px 32px rgba(74, 124, 89, 0.35);

  --t4y-font-serif: 'Playfair Display', Georgia, serif;
  --t4y-font-sans:  'Inter', system-ui, sans-serif;

  --t4y-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --t4y-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================================================================
   1. GLOBAL
   ================================================================ */

body,
.et_pb_section,
.woocommerce,
.woocommerce-page {
  background-color: var(--t4y-cream) !important;
  font-family: var(--t4y-font-sans) !important;
  color: var(--t4y-text-dark) !important;
}

h1, h2, h3,
.et_pb_module_header,
.et_pb_slide_title,
.page-title,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce h1,
.woocommerce h2 {
  font-family: var(--t4y-font-serif) !important;
  color: var(--t4y-text-dark) !important;
}

h4, h5, h6,
p, li, label,
input, textarea, select, button,
.et_pb_text,
.et_pb_text p,
.woocommerce p,
.woocommerce li {
  font-family: var(--t4y-font-sans) !important;
}

a {
  color: var(--t4y-green) !important;
  transition: color var(--t4y-transition) !important;
}
a:hover {
  color: var(--t4y-green-dark) !important;
}

/* ================================================================
   2. HEADER
   ================================================================ */

#main-header,
#main-header.et-fixed-header,
.et_header_style_centered #main-header,
.et_header_style_left #main-header {
  background: linear-gradient(135deg, var(--t4y-green-dark) 0%, var(--t4y-green-deep) 100%) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.25) !important;
}

/* FIX 1: All menu links — white */
#main-header #top-menu > li > a,
#main-header #top-menu li > a,
#main-header #et-top-navigation nav#top-menu-nav > ul > li > a,
#main-header .et-menu li a,
#main-header .et-menu li > a,
#main-header #et-secondary-menu li a,
#main-header .et_mobile_menu li a,
#main-header .et-menu > li > a {
  color: #F4FBF6 !important;
  font-family: var(--t4y-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2) !important;
  transition: color var(--t4y-transition) !important;
}

/* FIX 1: Hover — light green */
#main-header #top-menu > li > a:hover,
#main-header .et-menu li a:hover,
#main-header .et-menu > li:hover > a {
  color: #B9EAC6 !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: var(--t4y-radius-sm) !important;
}

/* FIX 1: Active page — light green + underline */
#main-header #top-menu > li.current-menu-item > a,
#main-header #top-menu > li.current_page_item > a,
#main-header #top-menu > li.current-menu-parent > a,
#main-header #top-menu > li.current_page_parent > a,
#main-header .et-menu > li.current-menu-item > a,
#main-header .et-menu > li.current-menu-ancestor > a {
  color: #B9EAC6 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  text-decoration-line: underline !important;
  text-decoration-color: #B9EAC6 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* Divi sub-menu */
#main-header #top-menu li ul,
#main-header .et-menu li ul {
  background: var(--t4y-green-deep) !important;
  border-top: 3px solid var(--t4y-green) !important;
  border-radius: 0 0 var(--t4y-radius-sm) var(--t4y-radius-sm) !important;
}
#main-header #top-menu li ul li a,
#main-header .et-menu li ul li a {
  color: rgba(255,255,255,0.8) !important;
}
#main-header #top-menu li ul li a:hover,
#main-header .et-menu li ul li a:hover {
  color: var(--t4y-white) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Logo: invert only header logo, keep content images untouched */
#main-header #logo,
#main-header.et-fixed-header #logo {
  filter: brightness(0) invert(1) !important;
}
/* Revert any legacy inversion on regular images */
#logo,
.et_pb_section .et_pb_image img,
.et_pb_image img {
  filter: none !important;
}

/* Cart icon */
#main-header .et_pb_cart_icon,
#main-header .cart-contents,
#main-header .et-cart-info,
#main-header #et_search_icon:before,
#main-header #et_search_icon::before {
  color: rgba(255,255,255,0.85) !important;
}

/* Mobile menu toggle */
#main-header .mobile_menu_bar::before,
#main-header .mobile_menu_bar:before {
  color: var(--t4y-white) !important;
}
#main-header .et_mobile_menu {
  background: var(--t4y-green-deep) !important;
  border-top: 3px solid var(--t4y-green) !important;
}
#main-header .et_mobile_menu li a {
  color: rgba(255,255,255,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.14) !important;
}
#main-header .et_mobile_menu li a:hover {
  color: var(--t4y-white) !important;
  background: rgba(255,255,255,0.08) !important;
  opacity: 1 !important;
}

/* ================================================================
   3. BREADCRUMBS
   ================================================================ */

.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
  background: transparent !important;
  padding: 12px 0 !important;
  font-size: 13px !important;
  color: var(--t4y-text-soft) !important;
  font-family: var(--t4y-font-sans) !important;
}
.woocommerce-breadcrumb a,
.woocommerce-breadcrumb a:visited {
  color: var(--t4y-green) !important;
  text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover {
  color: var(--t4y-green-dark) !important;
}

/* ================================================================
   4. PRODUCT CARDS (WooCommerce catalog)
   ================================================================ */

ul.products {
  margin: 0 !important;
}

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: linear-gradient(160deg, var(--t4y-green) 0%, var(--t4y-green-dark) 60%, var(--t4y-green-deep) 100%) !important;
  border-radius: var(--t4y-radius-lg) !important;
  border: none !important;
  box-shadow: var(--t4y-shadow-card) !important;
  overflow: hidden !important;
  transition: transform var(--t4y-transition), box-shadow var(--t4y-transition) !important;
  padding: 20px !important;
  position: relative !important;
}

ul.products li.product::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
ul.products li.product::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: var(--t4y-shadow-hover) !important;
}

/* FIX 3: Product title — Inter, smaller, normal weight */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3,
.woocommerce ul.products li.product h2,
.wc-block-grid__product-title {
  font-family: var(--t4y-font-sans) !important;
  color: var(--t4y-white) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
  margin-bottom: 6px !important;
}

/* Product image */
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product img {
  border-radius: var(--t4y-radius-md) !important;
  margin-bottom: 12px !important;
}

/* FIX 4: Price — light yellow, visible on green */
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price {
  color: #FFEAA7 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
ul.products li.product .price del,
ul.products li.product .price del .woocommerce-Price-amount {
  color: rgba(255,255,255,0.45) !important;
  font-size: 14px !important;
}
ul.products li.product .price ins,
ul.products li.product .price ins .woocommerce-Price-amount {
  text-decoration: none !important;
  color: #FFEAA7 !important;
}

/* "Add to cart" button on cards */
ul.products li.product .add_to_cart_button,
ul.products li.product .button,
.woocommerce ul.products li.product .button {
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  color: var(--t4y-white) !important;
  border-radius: var(--t4y-radius-pill) !important;
  font-family: var(--t4y-font-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 20px !important;
  transition: background var(--t4y-transition) !important;
  backdrop-filter: blur(4px) !important;
  display: inline-block !important;
}
ul.products li.product .add_to_cart_button:hover,
ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: rgba(255,255,255,0.3) !important;
  color: var(--t4y-white) !important;
}

/* Sale badge */
ul.products li.product .onsale,
.woocommerce span.onsale {
  background: #E85D4A !important;
  color: white !important;
  border-radius: var(--t4y-radius-pill) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  top: 12px !important;
  left: 12px !important;
}

/* ================================================================
   5. SINGLE PRODUCT PAGE
   ================================================================ */

.single-product,
.woocommerce.single-product div.product {
  background: var(--t4y-cream) !important;
}

/* Product title */
.single-product h1.product_title,
.woocommerce div.product h1.product_title {
  font-family: var(--t4y-font-sans) !important;
  color: var(--t4y-text-dark) !important;
  font-size: clamp(28px, 2.2vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Price on single product */
.single-product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--t4y-green-dark) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--t4y-text-muted) !important;
  font-size: 18px !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none !important;
  color: var(--t4y-green-dark) !important;
}

/* Keep standard WooCommerce desktop product structure */
@media (min-width: 981px) {
  .woocommerce.single-product div.product {
    display: block !important;
  }
  .woocommerce.single-product div.product div.images {
    float: left !important;
    width: 48% !important;
    margin: 0 0 1.5em !important;
  }
  .woocommerce.single-product div.product div.summary {
    float: right !important;
    width: 48% !important;
    margin: 0 0 1.5em !important;
  }
  .woocommerce.single-product div.product .woocommerce-tabs {
    clear: both !important;
    float: none !important;
    width: 100% !important;
  }
}

/* "В 1 клік" — hidden on desktop, shown on mobile via @media block */
/* .t4y-buy-oneclick {
  display: none !important;
} */

/* "Add to cart" button — single product */
.single-product .single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt {
  background: linear-gradient(135deg, var(--t4y-green), var(--t4y-green-dark)) !important;
  color: var(--t4y-white) !important;
  border: none !important;
  border-radius: var(--t4y-radius-pill) !important;
  font-family: var(--t4y-font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 16px 40px !important;
  letter-spacing: 0.3px !important;
  box-shadow: var(--t4y-shadow-green) !important;
  transition: transform var(--t4y-transition-bounce), box-shadow var(--t4y-transition) !important;
  cursor: pointer !important;
}
.single-product .single_add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(74,124,89,0.5) !important;
  background: linear-gradient(135deg, var(--t4y-green-dark), var(--t4y-green-deep)) !important;
  color: var(--t4y-white) !important;
}

/* FIX 6: Quantity input — remove arrows, compact */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}

.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity input.qty {
  border: 1.5px solid var(--t4y-sand) !important;
  border-radius: var(--t4y-radius-sm) !important;
  font-family: var(--t4y-font-sans) !important;
  font-size: 14px !important;
  color: var(--t4y-text-dark) !important;
  background: var(--t4y-white) !important;
  padding: 4px !important;
  width: 40px !important;
  height: 36px !important;
  text-align: center !important;
}

/* FIX 6: Custom +/- buttons — compact */
.t4y-qty-minus,
.t4y-qty-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  background: var(--t4y-green) !important;
  color: var(--t4y-white) !important;
  border: none !important;
  border-radius: var(--t4y-radius-sm) !important;
  cursor: pointer !important;
  font-family: var(--t4y-font-sans) !important;
  font-weight: 600 !important;
  padding: 0 !important;
  transition: background var(--t4y-transition) !important;
  vertical-align: middle !important;
}
.t4y-qty-minus:hover,
.t4y-qty-plus:hover {
  background: var(--t4y-green-dark) !important;
}

/* Product image */
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--t4y-radius-lg) !important;
  box-shadow: var(--t4y-shadow-card) !important;
}

/* Attribute tags (badges) — desktop */
.t4y-attr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.t4y-attr-tag {
  display: inline-block;
  font-size: 13px;
  font-family: var(--t4y-font-sans);
  color: var(--t4y-text-dark);
  border: 1.5px solid var(--t4y-sand);
  border-radius: var(--t4y-radius-pill);
  padding: 4px 14px;
  background: var(--t4y-white);
  line-height: 1.4;
  white-space: nowrap;
}

/* Product short description */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product p.short-description {
  font-family: var(--t4y-font-sans) !important;
  color: var(--t4y-text-medium) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Star rating */
.star-rating,
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
  color: var(--t4y-green) !important;
}
.woocommerce .star-rating span {
  color: var(--t4y-green) !important;
}
.woocommerce .star-rating::before {
  color: var(--t4y-sand) !important;
}

/* ================================================================
   6. WOOCOMMERCE TABS
   ================================================================ */

.woocommerce div.product .woocommerce-tabs ul.tabs {
  background: transparent !important;
  border-bottom: 2px solid var(--t4y-sand) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: var(--t4y-radius-sm) var(--t4y-radius-sm) 0 0 !important;
  margin: 0 4px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--t4y-font-sans) !important;
  color: var(--t4y-text-soft) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--t4y-white) !important;
  border-bottom: 2px solid var(--t4y-green) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--t4y-green) !important;
  font-weight: 600 !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--t4y-white) !important;
  border-radius: 0 var(--t4y-radius-md) var(--t4y-radius-md) var(--t4y-radius-md) !important;
  box-shadow: var(--t4y-shadow-soft) !important;
  padding: 24px !important;
  border: 1px solid rgba(212,197,169,0.3) !important;
}

/* ================================================================
   7. GLOBAL BUTTONS
   ================================================================ */

.button,
.wp-block-button__link,
.et_pb_button,
.et_pb_promo_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: linear-gradient(135deg, var(--t4y-green), var(--t4y-green-dark)) !important;
  color: var(--t4y-white) !important;
  border: none !important;
  border-radius: var(--t4y-radius-pill) !important;
  font-family: var(--t4y-font-sans) !important;
  font-weight: 600 !important;
  transition: transform var(--t4y-transition-bounce), box-shadow var(--t4y-transition) !important;
  cursor: pointer !important;
}

.button:hover,
.wp-block-button__link:hover,
.et_pb_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: linear-gradient(135deg, var(--t4y-green-dark), var(--t4y-green-deep)) !important;
  color: var(--t4y-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--t4y-shadow-green) !important;
}

/* Divi button specific */
.et_pb_button {
  padding: 14px 32px !important;
  font-size: 15px !important;
}
.et_pb_button::after {
  display: none !important;
}

/* ================================================================
   8. SHOP PAGE HEADER / SECTIONS
   ================================================================ */

/* FIX 2: Hide green decorative banner block under breadcrumbs */
.woocommerce-products-header,
.woocommerce-products-header::before,
.woocommerce-products-header::after,
.t4y-shop-banner::after,
.t4y-shop-banner::before {
  display: none !important;
}

/* Page/entry header — transparent, no green block */
.page-header,
.entry-header {
  background: transparent !important;
  padding: 8px 0 0 !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.page-header h1,
.entry-header h1 {
  color: var(--t4y-text-dark) !important;
}

/* Result count & ordering */
.woocommerce-result-count {
  color: var(--t4y-text-soft) !important;
  font-family: var(--t4y-font-sans) !important;
  font-size: 13px !important;
}
.woocommerce-ordering select {
  border: 1.5px solid var(--t4y-sand) !important;
  border-radius: var(--t4y-radius-pill) !important;
  font-family: var(--t4y-font-sans) !important;
  color: var(--t4y-text-medium) !important;
  background: var(--t4y-white) !important;
  padding: 8px 32px 8px 16px !important;
  font-size: 13px !important;
}

/* Sidebar / filters — regular items */
.widget_layered_nav ul li,
.woocommerce-widget-layered-nav ul li {
  font-family: var(--t4y-font-sans) !important;
}
.widget_layered_nav ul li a,
.woocommerce-widget-layered-nav ul li a {
  color: var(--t4y-green) !important;
}

/* FIX 5: Selected filter category — green outline, no brown background */
.widget_layered_nav ul li.chosen a,
.widget_layered_nav ul li.chosen a:hover,
.woocommerce-widget-layered-nav ul li.chosen a,
.woocommerce-widget-layered-nav ul li.chosen a:hover,
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a,
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a:hover {
  border: 2px solid var(--t4y-green) !important;
  background: transparent !important;
  color: var(--t4y-green) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
  font-weight: 600 !important;
}

/* ================================================================
   9. CART & CHECKOUT
   ================================================================ */

.woocommerce-cart table.cart,
.woocommerce-checkout form.checkout {
  background: var(--t4y-white) !important;
  border-radius: var(--t4y-radius-lg) !important;
  box-shadow: var(--t4y-shadow-soft) !important;
  border: 1px solid rgba(212,197,169,0.3) !important;
  overflow: hidden !important;
}

.woocommerce-cart table.cart th {
  background: var(--t4y-green-deep) !important;
  color: var(--t4y-white) !important;
  font-family: var(--t4y-font-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 14px 16px !important;
  border: none !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--t4y-white) !important;
  border-radius: var(--t4y-radius-lg) !important;
  box-shadow: var(--t4y-shadow-card) !important;
  padding: 24px !important;
  border: 1px solid rgba(212,197,169,0.3) !important;
}

/* Checkout fields */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1.5px solid var(--t4y-sand) !important;
  border-radius: var(--t4y-radius-sm) !important;
  font-family: var(--t4y-font-sans) !important;
  color: var(--t4y-text-dark) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  transition: border-color var(--t4y-transition) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--t4y-green) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74,124,89,0.12) !important;
}

/* Place order button */
#place_order,
.woocommerce-checkout #place_order {
  width: 100% !important;
  padding: 18px !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
}

/* ================================================================
   10. NOTIFICATIONS & MESSAGES
   ================================================================ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
  background: var(--t4y-cream-warm) !important;
  border-top: 3px solid var(--t4y-green) !important;
  border-radius: 0 0 var(--t4y-radius-sm) var(--t4y-radius-sm) !important;
  color: var(--t4y-text-medium) !important;
  font-family: var(--t4y-font-sans) !important;
}
.woocommerce-error {
  border-top: 3px solid #E85D4A !important;
  background: #fdf4f3 !important;
  border-radius: 0 0 var(--t4y-radius-sm) var(--t4y-radius-sm) !important;
  font-family: var(--t4y-font-sans) !important;
}

/* ================================================================
   11. FOOTER
   ================================================================ */

#main-footer,
.et_pb_section.et_pb_section_last,
footer.et-l {
  background: var(--t4y-green-deep) !important;
  color: rgba(255,255,255,0.7) !important;
}
#main-footer .et_pb_text,
#main-footer p,
#main-footer li,
#main-footer span,
#main-footer .footer-widget,
#main-footer .widget {
  color: rgba(255,255,255,0.7) !important;
}
#main-footer h1,
#main-footer h2,
#main-footer h3,
#main-footer h4,
#main-footer .widget-title,
#main-footer .et_pb_widget_title {
  font-family: var(--t4y-font-serif) !important;
  color: var(--t4y-white) !important;
}
#main-footer a,
#main-footer .et_pb_text a {
  color: var(--t4y-green-pale) !important;
}
#main-footer a:hover {
  color: var(--t4y-white) !important;
}
#footer-bottom,
#bottom-bar {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.4) !important;
}
#footer-bottom p,
#footer-bottom a,
#bottom-bar p,
#bottom-bar a {
  color: rgba(255,255,255,0.4) !important;
  font-size: 12px !important;
}
#footer-bottom a:hover,
#bottom-bar a:hover {
  color: rgba(255,255,255,0.7) !important;
}

/* ================================================================
   12. DIVI SECTIONS & MODULES
   ================================================================ */

/* White sections stay white */
.et_pb_section.t4y-white {
  background: var(--t4y-white) !important;
}

/* Default section background override */
#main-content .et_pb_section:not([style*="background"]):not(.et_pb_fullwidth_section):not(#main-footer) {
  background-color: var(--t4y-cream) !important;
}

/* Blurbs (icon boxes) */
.et_pb_blurb .et_pb_blurb_container {
  background: var(--t4y-white) !important;
  border-radius: var(--t4y-radius-md) !important;
  box-shadow: var(--t4y-shadow-soft) !important;
  padding: 24px !important;
  border: 1px solid rgba(212,197,169,0.3) !important;
  transition: transform var(--t4y-transition), box-shadow var(--t4y-transition) !important;
}
.et_pb_blurb:hover .et_pb_blurb_container {
  transform: translateY(-4px) !important;
  box-shadow: var(--t4y-shadow-card) !important;
}

/* Divi dividers */
.et_pb_divider_internal {
  border-top-color: var(--t4y-sand) !important;
}

/* ================================================================
   13. SCROLLBAR
   ================================================================ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--t4y-cream); }
::-webkit-scrollbar-thumb { background: var(--t4y-green-pale); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--t4y-green); }

/* ================================================================
   14. RESPONSIVE
   ================================================================ */

/* FIX 3: Desktop — slightly larger product title */
@media (min-width: 981px) {
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2,
  ul.products li.product h3,
  .woocommerce ul.products li.product h2,
  .wc-block-grid__product-title {
    font-size: 15px !important;
  }
}

@media (max-width: 980px) {
  ul.products li.product {
    padding: 16px !important;
  }
  ul.products li.product:hover {
    transform: translateY(-3px) scale(1.01) !important;
  }
  .woocommerce div.product .single_add_to_cart_button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* === FULL-WIDTH MOBILE — всі сторінки === */
@media (max-width: 980px) {
  body #main-content .container,
  body .et_pb_section > .et_pb_row,
  body .et_pb_row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .et_pb_section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .et_pb_column {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Контент сторінок (Про нас, Доставка тощо) */
  body .entry-content,
  body .page .et_pb_post_content,
  body .et_pb_text_inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* WooCommerce сторінки */
  body.woocommerce-page #main-content .container,
  body.woocommerce #main-content .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 600px) {
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2,
  .wc-block-grid__product-title {
    font-size: 14px !important;
  }
  /* product_title size is set in mobile product page block below */
  #main-footer {
    padding: 32px 16px !important;
  }
  /* Compact qty controls on mobile */
  .t4y-qty-minus,
  .t4y-qty-plus {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
}

/* =====================================================
   MOBILE PRODUCT PAGE — фото зліва, інфо справа
   Divi HTML structure:
     div.product
       > div.clearfix          (Divi wrapper for gallery + summary)
       |   > div.images        (product gallery)
       |   > div.summary       (title, price, description, form.cart)
       > .t4y-oneclick-wrap    (moved from form.cart by JS, under image)
       > form.cart             (qty + buy button, full width)
       > .woocommerce-tabs
   JS moves form.cart from inside .summary to div.product (after .clearfix)
   and moves .t4y-buy-oneclick into .t4y-oneclick-wrap (between clearfix and form.cart)
   so: image+info (2 cols) / oneclick under image / qty+buy full width / tabs.
   Breakpoint extended to 980px so landscape phones also get this layout.
   ===================================================== */
@media (max-width: 980px) {
  /* ── .clearfix becomes the flex container ── */
  .single-product div.product > .clearfix {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4% !important;
    align-items: flex-start !important;
    overflow: visible !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  /* Image column — left 48% */
  .single-product div.product > .clearfix > div.images,
  .single-product div.product > .clearfix > .woocommerce-product-gallery {
    width: 48% !important;
    max-width: 48% !important;
    flex: 0 0 48% !important;
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .single-product div.product > .clearfix div.images img,
  .single-product div.product > .clearfix .woocommerce-product-gallery img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Summary column — right 48% */
  .single-product div.product > .clearfix > .summary,
  .single-product div.product > .clearfix > div.summary {
    width: 48% !important;
    max-width: 48% !important;
    flex: 0 0 48% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  /* Title — compact */
  .single-product div.product .product_title,
  .single-product div.product h1.product_title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  /* Price — compact */
  .single-product div.product .summary .price,
  .single-product div.product .summary p.price,
  .single-product div.product .summary span.price {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }

  /* Attribute tags (badges) */
  .single-product div.product .t4y-attr-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .single-product div.product .t4y-attr-tag {
    display: inline-block !important;
    font-size: 12px !important;
    font-family: var(--t4y-font-sans) !important;
    color: var(--t4y-text-dark) !important;
    border: 1.5px solid var(--t4y-sand) !important;
    border-radius: var(--t4y-radius-pill) !important;
    padding: 3px 12px !important;
    background: var(--t4y-white) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }

  /* Short description */
  .single-product div.product .summary .woocommerce-product-details__short-description {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
  }

  /* ── form.cart inside .summary: hide (JS moves it out) ── */
  .single-product div.product .summary form.cart {
    display: none !important;
  }

  /* ── form.cart after JS moves it to div.product: show full width ── */
  .single-product div.product > form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Quantity row: - [input] + */
  .single-product div.product > form.cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .single-product div.product > form.cart .quantity input.qty {
    width: 40px !important;
    height: 34px !important;
    text-align: center !important;
  }

  /* Buy button: full width */
  .single-product div.product > form.cart .single_add_to_cart_button,
  .single-product div.product > form.cart button[type="submit"] {
    width: 100% !important;
    display: block !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    text-align: center !important;
    margin: 0 !important;
    order: 10 !important;
  }

  /* "В 1 клік" — JS moves it OUT of form.cart into .t4y-oneclick-wrap
     (a direct child of div.product, between .clearfix and form.cart).
     If somehow still inside form.cart, hide it so it doesn't disrupt the qty+buy row. */
  .single-product div.product > form.cart .t4y-buy-oneclick {
    display: none !important;
  }

  /* Wrap sits full-width, left-aligned, directly above the qty + buy row */
  .single-product div.product > .t4y-oneclick-wrap,
  body.single-product div.product > .t4y-oneclick-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .single-product div.product > .t4y-oneclick-wrap .t4y-buy-oneclick {
    display: inline-block !important;
    font-size: 13px !important;
    color: var(--t4y-green-dark) !important;
    text-decoration: underline !important;
    font-family: var(--t4y-font-sans) !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  /* Variation swatches inside moved form */
  .single-product div.product > form.cart .variations {
    width: 100% !important;
  }
  .single-product div.product > form.cart .variations td {
    display: block !important;
    width: 100% !important;
  }

  /* Hide wishlist to save space */
  .single-product div.product .yith-add-to-wishlist-button-block,
  .single-product div.product .yith-wcwl-add-to-wishlist {
    display: none !important;
  }

  /* Meta: hide on mobile */
  .single-product div.product .product_meta {
    display: none !important;
  }

  /* TCI micro icons: hide on mobile */
  .tci-micro-icons {
    display: none !important;
  }

  /* Tabs — full width below */
  .single-product div.product .woocommerce-tabs {
    width: 100% !important;
    clear: both !important;
    margin-top: 16px !important;
  }
}

/* "В 1 клік" — hidden on desktop */
.t4y-buy-oneclick {
  display: none !important;
}
@media (max-width: 980px) {
  .t4y-buy-oneclick {
    display: block !important;
  }
}

/* =====================================================
   MOBILE HEADER — replace logo image with "Tea4You" text
   ===================================================== */
@media (max-width: 980px) {
  #main-header .logo_container a img#logo,
  #main-header.et-fixed-header .logo_container a img#logo {
    display: none !important;
  }
  #main-header .logo_container a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-decoration: none !important;
  }
  #main-header .logo_container a::after {
    content: 'Tea4You';
    font-family: var(--t4y-font-serif);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.5px;
    color: #E8833A;
    line-height: 1;
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  #main-header .logo_container a::after {
    font-size: 22px;
  }
}

/* =====================================================
   MOBILE HEADER — icons (account / wishlist / cart)
   Absolutely positioned before burger; does NOT alter
   Divi header padding or logo width.
   ===================================================== */
.t4y-mobile-header-icons {
  display: none;
}
@media (max-width: 980px) {
  #logo,
  .logo_container {
    padding-left: 5px !important;
    margin-left: 0 !important;
  }
  .t4y-mobile-header-icons {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    position: absolute !important;
    right: 55px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
  }
  .t4y-header-icon {
    position: relative;
    display: flex !important;
    align-items: center !important;
    color: #fff !important;
    text-decoration: none !important;
  }
  .t4y-header-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #fff !important;
    fill: none !important;
  }
  .t4y-cart-count {
    position: absolute;
    top: -5px;
    right: -7px;
    background: #E8B55A;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

/* =====================================================
   SINGLE PRODUCT — compact top spacing (all screens)
   ===================================================== */
body.single-product #main-content .container,
body.single-product .et_pb_section:first-child,
body.single-product #content-area {
  padding-top: 8px !important;
  margin-top: 0 !important;
}
body.single-product .woocommerce-breadcrumb {
  margin-top: 0 !important;
  padding-top: 4px !important;
}

/* =====================================================
   MOBILE SINGLE PRODUCT — compact breadcrumbs + rating
   ===================================================== */
@media (max-width: 980px) {
  .single-product .woocommerce-breadcrumb,
  .single-product nav.woocommerce-breadcrumb {
    font-size: 12px !important;
    padding: 4px 0 !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
    color: var(--t4y-text-soft) !important;
  }
  .single-product .woocommerce-breadcrumb a {
    color: var(--t4y-text-soft) !important;
    text-decoration: none !important;
  }
  .single-product .woocommerce-breadcrumb .breadcrumb-separator,
  .single-product .woocommerce-breadcrumb > span:not(:last-child)::after {
    margin: 0 4px !important;
  }

  /* Interactive star-picker: larger hit area, cursor */
  .single-product .woocommerce-product-rating {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }
  .single-product .woocommerce-product-rating .star-rating,
  .single-product .t4y-star-picker {
    font-size: 18px !important;
    cursor: pointer !important;
  }
  .single-product .woocommerce-review-link {
    font-size: 13px !important;
    color: var(--t4y-text-soft) !important;
    text-decoration: underline !important;
  }
}

/* Star-picker visual (replaces read-only stars on mobile) */
.t4y-star-picker {
  display: inline-flex;
  gap: 2px;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
.t4y-star-picker .t4y-star {
  color: var(--t4y-sand);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.t4y-star-picker .t4y-star.is-hover,
.t4y-star-picker .t4y-star.is-selected {
  color: var(--t4y-gold);
  transform: scale(1.08);
}

/* =====================================================
   MOBILE PRODUCT — compact buy button + tidier layout
   form.cart contains only [qty] [Купити] (oneclick moved out by JS)
   ===================================================== */
@media (max-width: 980px) {
  /* Reduce buy button size */
  .single-product div.product > form.cart .single_add_to_cart_button,
  .single-product div.product > form.cart button[type="submit"] {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: var(--t4y-radius-pill) !important;
    order: 2 !important;
  }

  /* Row: [qty] [Купити] on one line. Use wrap so variations / long content can flow. */
  .single-product div.product > form.cart {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 10px !important;
    align-items: stretch !important;
  }
  .single-product div.product > form.cart .quantity {
    flex: 0 0 auto !important;
    order: 1 !important;
  }
  .single-product div.product > form.cart .quantity input.qty {
    width: 36px !important;
    height: 34px !important;
    font-size: 14px !important;
  }
  .single-product div.product > form.cart .t4y-qty-minus,
  .single-product div.product > form.cart .t4y-qty-plus {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
}

/* =====================================================
   LANDSCAPE / TABLET (768-980px): force 2-col grid for
   related products so cards don't squeeze to strips.
   ===================================================== */
@media (min-width: 768px) and (max-width: 980px) {
  .single-product section.related ul.products,
  .single-product section.upsells ul.products,
  .single-product .related.products ul.products,
  .woocommerce.single-product .related ul.products,
  .woocommerce.single-product .upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    float: none !important;
    width: 100% !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .single-product section.related ul.products li.product,
  .single-product section.upsells ul.products li.product,
  .single-product .related.products ul.products li.product,
  .woocommerce.single-product .related ul.products li.product,
  .woocommerce.single-product .upsells ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }
}

/* On small portrait phones — 2 cols for related as well */
@media (max-width: 600px) {
  .single-product section.related ul.products,
  .single-product section.upsells ul.products,
  .single-product .related.products ul.products,
  .woocommerce.single-product .related ul.products,
  .woocommerce.single-product .upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    float: none !important;
    width: 100% !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .single-product section.related ul.products li.product,
  .single-product section.upsells ul.products li.product,
  .single-product .related.products ul.products li.product,
  .woocommerce.single-product .related ul.products li.product,
  .woocommerce.single-product .upsells ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }
}

/* =====================================================
   MOBILE STICKY ADD-TO-CART BAR
   Fixed bottom; shown only when form.cart is off-screen.
   Transform-based show/hide → no layout shift.
   ===================================================== */
.t4y-sticky-atc { display: none; }

@media (max-width: 980px) {
  .t4y-sticky-atc {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--t4y-white, #fff);
    border-top: 1px solid var(--t4y-sand, #e5dfd5);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(110%);
    transition: transform 0.25s ease;
    will-change: transform;
    pointer-events: none;
    font-family: var(--t4y-font-sans, inherit);
  }
  .t4y-sticky-atc.is-visible {
    transform: translateY(0);
    pointer-events: auto;
  }
  .t4y-sticky-atc__info {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
  }
  .t4y-sticky-atc__title {
    font-size: 12px;
    color: var(--t4y-text-soft, #4a4a4a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .t4y-sticky-atc__price {
    font-size: 16px;
    font-weight: 600;
    color: var(--t4y-text-dark, #1f1f1f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .t4y-sticky-atc__price del {
    opacity: 0.5;
    font-size: 13px;
    margin-right: 4px;
  }
  .t4y-sticky-atc__price ins { text-decoration: none; }
  .t4y-sticky-atc__btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--t4y-radius-pill, 999px);
    background: var(--t4y-green-dark, #2f6b3e);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
  }
  .t4y-sticky-atc__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
}

/* =====================================================
   MOBILE CATALOG GRID FIXES
   ===================================================== */
@media (max-width: 980px) {
  /* FIX 1: kill Divi/WooCommerce clearfix pseudos on ul.products —
     they get treated as grid items and leave empty first/last slot */
  ul.products::before,
  ul.products::after,
  .woocommerce ul.products::before,
  .woocommerce ul.products::after,
  .woocommerce-page ul.products::before,
  .woocommerce-page ul.products::after,
  body ul.products::before,
  body ul.products::after,
  #main-content ul.products::before,
  #main-content ul.products::after,
  .et_pb_module ul.products::before,
  .et_pb_module ul.products::after {
    display: none !important;
    content: none !important;
  }

  /* FIX 2: hide ONLY per-page toggle on mobile —
     keep sorting, view toggle, result count and filter button visible */
  .t4y-toolbar .t4y-tb-perpage,
  .t4y-per-page {
    display: none !important;
  }
}

/* =====================================================
   CATALOG SIDEBAR KILL — all viewports
   Divi body.et_right_sidebar renders #sidebar + #left-area
   and squeezes the shop/category header. Force full width.
   ===================================================== */
body.tax-product_cat #sidebar,
body.archive.woocommerce #sidebar,
body.post-type-archive-product #sidebar {
    display: none !important;
}
body.tax-product_cat #left-area,
body.archive.woocommerce #left-area,
body.post-type-archive-product #left-area {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.tax-product_cat .container:before,
body.archive.woocommerce .container:before,
body.post-type-archive-product .container:before {
    display: none !important;
}

/* =====================================================
   MOBILE: hide Divi search magnifier from header
   ===================================================== */
@media (max-width: 980px) {
    #main-header .et_search_outer,
    #main-header .et-search-form,
    #main-header #et_search_icon,
    #main-header .et_pb_search_icon,
    #top-header .et_search_outer,
    #top-header #et_search_icon {
        display: none !important;
    }
}

/* =====================================================
   MOBILE SEARCH BAR — injected under breadcrumbs on
   single-product and shop/category pages
   ===================================================== */
.t4y-mobile-search-bar {
    padding: 8px 12px;
    background: #F5F0E8;
    box-sizing: border-box;
    width: 100%;
}
.t4y-mobile-search-bar form {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 24px;
    padding: 6px 12px;
    margin: 0;
    box-sizing: border-box;
}
.t4y-mobile-search-bar input[type="search"] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    padding: 4px 0;
    margin: 0;
    box-shadow: none;
    min-width: 0;
}
.t4y-mobile-search-bar button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.t4y-mobile-search-bar button svg {
    display: block;
}
@media (min-width: 981px) {
    .t4y-mobile-search-bar { display: none !important; }
}

/* =====================================================
   CUSTOM MOBILE HEADER — replaces Divi #main-header
   Visible only on <=980px. Divi header is hidden below.
   ===================================================== */
.t4y-custom-header { display: none; }
.t4y-mobile-nav    { display: none; }
.t4y-nav-overlay   { display: none; }

@media (max-width: 980px) {
    /* Hide Divi header completely on mobile */
    #main-header,
    #top-header,
    #main-header.et-fixed-header {
        display: none !important;
    }
    body.et_fixed_nav #page-container,
    #page-container {
        padding-top: 0 !important;
    }

    /* Custom header bar */
    .t4y-custom-header {
        display: block;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: linear-gradient(135deg, #2D5A3D, #4A7C59);
        padding: 12px 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .t4y-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        max-width: 100%;
    }

    /* Burger (left) */
    .t4y-burger {
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 0;
    }
    .t4y-burger span {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .t4y-burger.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .t4y-burger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .t4y-burger.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Logo (center) */
    .t4y-header-logo {
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        font-weight: 700;
        color: #E8B55A !important;
        text-decoration: none !important;
        letter-spacing: 0.02em;
        line-height: 1;
    }

    /* Icons (right) */
    .t4y-header-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .t4y-h-icon {
        position: relative;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
    }
    .t4y-h-icon svg {
        width: 22px;
        height: 22px;
        stroke: #fff;
        fill: none;
        display: block;
    }
    .t4y-h-cart .t4y-cart-count {
        position: absolute;
        top: -6px;
        right: -8px;
        background: #E8B55A;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* Slide-in mobile nav */
    .t4y-mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        left: -100%;
        width: 82%;
        max-width: 320px;
        height: 100vh;
        background: #2D5A3D;
        z-index: 10001;
        transition: left 0.3s ease;
        padding: 60px 24px 24px;
        overflow-y: auto;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
    }
    .t4y-mobile-nav.open { left: 0; }
    .t4y-nav-close {
        position: absolute;
        top: 14px;
        right: 14px;
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        padding: 6px 10px;
    }
    .t4y-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .t4y-nav-list li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .t4y-nav-list a {
        display: block;
        padding: 14px 0;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 16px;
        font-weight: 500;
    }
    .t4y-nav-list .sub-menu {
        list-style: none;
        padding: 0 0 8px 12px;
        margin: 0;
    }
    .t4y-nav-list .sub-menu a {
        padding: 10px 0;
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.82) !important;
    }

    .t4y-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }
    .t4y-nav-overlay.open { display: block; }
}

@media (min-width: 981px) {
    .t4y-custom-header,
    .t4y-mobile-nav,
    .t4y-nav-overlay { display: none !important; }
}