/* =====================================================================
   VEDA ORGANICS — CUSTOM DESIGN SYSTEM
   Layered on top of OceanWP + Elementor + WooCommerce.
   Organized in sections — search the ALL-CAPS headers to jump around.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. COLOR & DESIGN TOKENS
   OceanWP reads --owp-primary-color / --owp-link-color site-wide, so
   overriding these alone reskins buttons, links, badges, hovers, etc.
--------------------------------------------------------------------- */
:root{
  /* Brand palette — organic green + warm gold, matches the Veda logo */
  --veda-primary:        #2E7D4F;   /* deep forest green */
  --veda-primary-dark:   #1F5C38;   /* hover / active green */
  --veda-primary-light:  #E7F3EC;   /* pale green tint for backgrounds */
  --veda-accent:         #4E7A29;   /* olive-green — distinct from the primary forest green so highlights still pop */
  --veda-accent-dark:    #3B5D1F;
  --veda-dark:           #16261C;   /* near-black green — headings, footer */
  --veda-text:           #4A4A4A;
  --veda-cream:          #F8F6EF;   /* soft off-white section background */
  --veda-white:          #FFFFFF;
  --veda-border:         #E7E2D6;
  --veda-shadow:         0 10px 30px rgba(22, 38, 28, 0.08);
  --veda-shadow-hover:   0 18px 40px rgba(22, 38, 28, 0.16);
  --veda-radius:         14px;
  --veda-radius-sm:      8px;
  --veda-transition:     all .35s cubic-bezier(.22,.61,.36,1);

  /* Tell OceanWP to use our palette everywhere it references these */
  --owp-primary-color: var(--veda-primary);
  --owp-primary-color-hover: var(--veda-primary-dark);
  --owp-link-color: var(--veda-primary);
  --owp-link-color-hover: var(--veda-primary-dark);
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY
--------------------------------------------------------------------- */
body{
  font-family: 'Poppins', 'Open Sans', sans-serif;
  color: var(--veda-text);
}
h1,h2,h3,h4,h5,h6,
.theme-heading,
.elementor-heading-title{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--veda-dark);
  letter-spacing: .2px;
}
.theme-heading .text::before{ color: var(--veda-accent); }

/* Section overline / eyebrow style, works with any small heading */
.theme-heading{
  color: var(--veda-primary);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   3. GLOBAL BODY / PAGE
--------------------------------------------------------------------- */
body{
  overflow-x: hidden; /* keeps animated elements from causing horizontal scroll */
}
::selection{ background: var(--veda-primary); color:#fff; }

/* Slim, elegant custom scrollbar (desktop) */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--veda-cream); }
::-webkit-scrollbar-thumb{ background: var(--veda-primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--veda-primary-dark); }

/* ---------------------------------------------------------------------
   4. BUTTONS — global, WooCommerce, Elementor, WPForms
--------------------------------------------------------------------- */
input[type=button],input[type=reset],input[type=submit],button[type=submit],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wp-element-button,
.woocommerce-checkout .wp-element-button,
.wp-block-button__link,
.elementor-button,
body div.wpforms-container-full .wpforms-form input[type=submit],
body div.wpforms-container-full .wpforms-form button[type=submit]{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--veda-primary), var(--veda-primary-dark));
  border-radius: 50px !important;
  padding: 12px 26px !important;
  font-weight: 600;
  letter-spacing: .06em;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(46,125,79,0.28);
  transition: var(--veda-transition);
  border: none;
  white-space: nowrap;
}
input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover,button[type=submit]:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wp-element-button:hover,
.woocommerce-checkout .wp-element-button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
body div.wpforms-container-full .wpforms-form input[type=submit]:hover,
body div.wpforms-container-full .wpforms-form button[type=submit]:hover{
  background: linear-gradient(135deg, var(--veda-primary-dark), var(--veda-dark));
  box-shadow: 0 12px 28px rgba(31,92,56,0.4);
  transform: translateY(-3px);
}
/* Gold "outline" secondary button style — add class .btn-gold in Elementor button widget */
.elementor-button.btn-gold,
.btn-gold{
  background: transparent !important;
  border: 2px solid var(--veda-accent) !important;
  color: var(--veda-accent-dark) !important;
  box-shadow: none;
}
.elementor-button.btn-gold:hover,
.btn-gold:hover{
  background: var(--veda-accent) !important;
  color: #fff !important;
  transform: translateY(-3px);
}

/* Subtle shine sweep on hover for primary buttons */
.button::after,
.elementor-button::after,
.single_add_to_cart_button::after{
  content:"";
  position:absolute; top:0; left:-75%;
  width:50%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.button:hover::after,
.elementor-button:hover::after,
.single_add_to_cart_button:hover::after{ left: 130%; }

/* ---------------------------------------------------------------------
   5. HEADER / NAVIGATION
--------------------------------------------------------------------- */
#site-header{
  transition: box-shadow .3s ease, padding .3s ease, background-color .3s ease;
}
#site-header.is-sticky,
.is-sticky #site-header,
#site-header.veda-scrolled{
  box-shadow: 0 6px 24px rgba(22,38,28,.08);
}
#site-logo #site-logo-inner a img{
  transition: transform .35s ease;
}
#site-logo #site-logo-inner a:hover img{
  transform: scale(1.05);
  opacity: 1 !important;
}
#site-navigation-wrap .dropdown-menu>li>a{
  font-weight: 600;
  letter-spacing: .04em;
}
#site-navigation-wrap .dropdown-menu>li>a:hover,
#site-navigation-wrap .dropdown-menu>li.current-menu-item>a{
  color: var(--veda-primary) !important;
}
/* Animated underline on nav items (works with OceanWP effect classes too) */
#site-navigation-wrap .dropdown-menu > li > a.menu-link > span{ position: relative; }
#site-navigation-wrap .dropdown-menu > li > a.menu-link > span::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:100%; height:2px;
  background: var(--veda-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
#site-navigation-wrap .dropdown-menu > li > a.menu-link:hover > span::after,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a.menu-link > span::after,
#site-navigation-wrap .dropdown-menu > li.current_page_item > a.menu-link > span::after{
  transform: scaleX(1);
}

.dropdown-menu .sub-menu{ border-top: 3px solid var(--veda-primary) !important; }

/* Cart icon bump on hover */
.oceanwp-social-menu ul li a,
.header-cart-icon,
a.icon-cart{ transition: var(--veda-transition); }
.header-cart-icon:hover,
a.icon-cart:hover{ transform: translateY(-2px); color: var(--veda-primary) !important; }

/* ---------------------------------------------------------------------
   6. HERO / SECTION UTILITIES
   Add these classes to any Elementor Section (Advanced > CSS Classes)
   for instant styling — no rebuilding required.
--------------------------------------------------------------------- */
.veda-section-cream{ background-color: var(--veda-cream) !important; }
.veda-section-dark{ background-color: var(--veda-dark) !important; color: #fff !important; }
.veda-section-dark h1,.veda-section-dark h2,.veda-section-dark h3{ color: #fff !important; }
.veda-section-primary{ background: linear-gradient(135deg, var(--veda-primary), var(--veda-primary-dark)) !important; color:#fff !important; }
.veda-section-primary h1,.veda-section-primary h2,.veda-section-primary h3{ color:#fff !important; }

/* Soft decorative divider you can drop in as an HTML widget */
.veda-divider{
  width: 70px; height: 3px; margin: 14px auto;
  background: var(--veda-accent); border-radius: 4px;
}

/* ---------------------------------------------------------------------
   7. ICON ACCENTS
   Font Awesome is already loaded site-wide via OceanWP/Elementor, so
   these classes just give ready-made "badge" containers for any <i> icon.
--------------------------------------------------------------------- */
.veda-icon-badge{
  display: inline-flex; align-items:center; justify-content:center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--veda-primary-light);
  color: var(--veda-primary);
  font-size: 28px;
  margin-bottom: 18px;
  transition: var(--veda-transition);
}
.elementor-widget-wrap:hover .veda-icon-badge,
.veda-icon-badge:hover{
  background: var(--veda-primary);
  color: #fff;
  transform: translateY(-6px) rotate(-6deg);
}
.veda-icon-badge.gold{ background: #E9F0DC; color: var(--veda-accent-dark); }
.elementor-widget-wrap:hover .veda-icon-badge.gold,
.veda-icon-badge.gold:hover{ background: var(--veda-accent); color:#fff; }

/* Leaf-style bullet accents for feature lists */
ul.veda-leaf-list{ list-style:none; margin:0; padding:0; }
ul.veda-leaf-list li{
  position:relative; padding-left:30px; margin-bottom:12px; line-height:1.6;
}
ul.veda-leaf-list li::before{
  content:"\f06c"; /* fa-leaf */
  font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:0; top:2px;
  color: var(--veda-primary);
}

/* ---------------------------------------------------------------------
   8. CARDS — generic Elementor boxes, blog entries
--------------------------------------------------------------------- */
.elementor-widget-image-box .elementor-image-box-wrapper,
.blog-entry.grid-entry .blog-entry-inner{
  border-radius: var(--veda-radius);
  border-color: var(--veda-border) !important;
  box-shadow: var(--veda-shadow);
  transition: var(--veda-transition);
}
.elementor-widget-image-box .elementor-image-box-wrapper:hover,
.blog-entry.grid-entry:hover .blog-entry-inner{
  transform: translateY(-8px);
  box-shadow: var(--veda-shadow-hover);
}
.blog-entry.post .thumbnail{ border-radius: var(--veda-radius) var(--veda-radius) 0 0; overflow:hidden; }
.blog-entry.post .thumbnail img{ transition: transform .6s ease; }
.blog-entry.post .thumbnail:hover img{ transform: scale(1.08); }

/* ---------------------------------------------------------------------
   9. WOOCOMMERCE — shop grid, single product, cart, checkout
--------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background: #fff;
  border-radius: var(--veda-radius);
  padding: 14px 14px 20px !important;
  box-shadow: var(--veda-shadow);
  transition: var(--veda-transition);
  border: 1px solid var(--veda-border);
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-8px);
  box-shadow: var(--veda-shadow-hover);
  border-color: var(--veda-primary);
}
.woocommerce ul.products li.product img{
  border-radius: var(--veda-radius-sm);
  transition: transform .5s ease;
}
.woocommerce ul.products li.product:hover img{ transform: scale(1.06); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Poppins', sans-serif;
  font-weight: 600;
  color: var(--veda-dark);
}
.woocommerce ul.products li.product .price{
  color: var(--veda-primary);
  font-weight: 700;
}
.woocommerce ul.products li.product .price del{ color:#aaa; opacity:.7; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* Sale ribbon badge */
.woocommerce span.onsale{
  background: var(--veda-accent) !important;
  color:#fff !important;
  font-weight:600;
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(78,122,41,.4);
}

/* Star ratings in gold */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before{ color: var(--veda-accent); }

/* Add-to-cart button on the shop grid — smaller, tidier pill */
.woocommerce ul.products li.product .button{
  border-radius: 50px !important;
  padding: 9px 20px !important;
  font-size: 12px;
}
.woocommerce ul.products li.product .added_to_cart{
  color: var(--veda-primary);
  font-weight: 600;
}

/* Single product page */
.woocommerce div.product .single_add_to_cart_button{
  min-height: 44px;
  padding: 11px 28px !important;
  font-size: 13px;
}
.woocommerce div.product .quantity input.qty{
  border-radius: var(--veda-radius-sm);
  border-color: var(--veda-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom: 3px solid var(--veda-primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-weight:600; }

/* Cart / checkout tables */
.woocommerce table.shop_table{
  border-radius: var(--veda-radius);
  overflow: hidden;
  border-color: var(--veda-border) !important;
}
.woocommerce table.shop_table th{
  background: var(--veda-primary-light);
  color: var(--veda-dark);
}
.woocommerce-checkout #payment{
  border-radius: var(--veda-radius);
}
.woocommerce-checkout #payment ul.payment_methods li.woocommerce-notice--info,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  border-radius: var(--veda-radius-sm) !important;
}

/* Mini-cart / cart icon badge (count bubble) */
.cart-contents-count,
.woo-cart-num-items{
  background: var(--veda-accent) !important;
}

/* Wishlist heart hover (ti-woocommerce-wishlist) */
.tinvwl-add-to-wishlist-button a,
.tinv-wraper a{ transition: var(--veda-transition); }
.tinvwl-add-to-wishlist-button a:hover{ color: var(--veda-accent) !important; transform: scale(1.15); }

/* ---------------------------------------------------------------------
   10. FOOTER
--------------------------------------------------------------------- */
#footer-widgets{
  background: var(--veda-dark) !important;
}
#footer-widgets .widget-title{
  font-family: 'Playfair Display', serif;
  position: relative;
  padding-bottom: 12px;
}
#footer-widgets .widget-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 40px; height: 2px;
  background: var(--veda-accent);
}
#footer-widgets .footer-box a:hover{ color: var(--veda-accent) !important; }

/* Footer logo — shrink to an elegant size instead of a big square.
   Scoped ONLY to the first footer column so it doesn't also catch the
   Recent Posts thumbnails elsewhere in the footer. */
#footer-widgets .footer-box:first-child img{
  max-width: 130px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 6px;
}

/* Footer body copy (the paragraph under the logo, and any plain text
   widgets) — force a clearly readable off-white instead of the low
   contrast dark tone it was inheriting */
#footer-widgets p,
#footer-widgets .elementor-widget-text-editor,
#footer-widgets .elementor-widget-text-editor p,
#footer-widgets .elementor-widget-heading .elementor-heading-title,
#footer-widgets .footer-widget,
#footer-widgets .footer-widget *{
  color: rgba(255,255,255,.82) !important;
}
/* ...but keep our gold accents, headings and hover states from being
   flattened by the rule above */
#footer-widgets .widget-title,
#footer-widgets .widget-title *{ color: #fff !important; }
#footer-widgets a:hover,
#footer-widgets a:hover *{ color: var(--veda-accent) !important; }

/* Contact info block (Elementor Icon List / Icon Box widgets) — the
   default blue icon color was disappearing against the dark green
   background. Recolor icons gold, text bright white, for real contrast. */
#footer-widgets .elementor-icon-list-icon,
#footer-widgets .elementor-icon-list-icon i,
#footer-widgets .elementor-icon-list-item i,
#footer-widgets .elementor-widget-icon-list i,
#footer-widgets .elementor-icon-box-icon,
#footer-widgets .elementor-icon-box-icon i,
#footer-widgets .elementor-icon{
  color: var(--veda-accent) !important;
  fill: var(--veda-accent) !important;
}
#footer-widgets .elementor-icon-box-icon,
#footer-widgets .elementor-icon{
  background: rgba(255,255,255,.08) !important;
  border-color: var(--veda-accent) !important;
}
#footer-widgets .elementor-icon-list-text,
#footer-widgets .elementor-icon-box-content,
#footer-widgets .elementor-icon-box-title,
#footer-widgets .elementor-icon-box-description{
  color: rgba(255,255,255,.9) !important;
}
#footer-widgets svg{ fill: var(--veda-accent) !important; }

/* Contact Info block (Address / Phone / Email) — each row is an
   Elementor Icon Box widget, and the Phone widget had a much larger
   inline icon-to-text margin than Address/Email, making its gap look
   uneven. Force one small, consistent gap on all three, and override
   any per-widget inline margin Elementor may have set. */
#footer-widgets .elementor-icon-box-wrapper{
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
#footer-widgets .elementor-icon-box-wrapper .elementor-icon-box-icon{
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
#footer-widgets .elementor-icon-box-content{
  margin: 0 !important;
}
/* Same fix in case this block instead uses the Icon List widget */
#footer-widgets .elementor-icon-list-items .elementor-icon-list-item{
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
#footer-widgets .elementor-icon-list-icon{
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Divider lines under Quick Links items and between Recent Posts
   entries — OceanWP's default border color was made for a light
   background, so it read as bright white against our dark green
   footer. Softened to a subtle, low-opacity line instead. */
#footer-widgets .footer-widget ul li,
#footer-widgets .footer-box ul li,
#footer-widgets ul li{
  border-color: rgba(255,255,255,.12) !important;
}

/* Recent Posts widget (thumbnail + title + date list) — force a
   proper flex layout so the title text sits beside the thumbnail
   instead of overlapping it, with smaller, tidier sizing overall. */
#footer-widgets .footer-widget ul li{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
#footer-widgets .footer-widget ul li img{
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
/* the text column next to the thumbnail: whatever isn't the image
   itself should wrap normally and never spill under/over the image */
#footer-widgets .footer-widget ul li > a:not(:only-child),
#footer-widgets .footer-widget ul li > div,
#footer-widgets .footer-widget ul li > span:not(.screen-reader-text){
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}
#footer-widgets .footer-widget ul li a{
  font-size: 13px !important;
  line-height: 1.4 !important;
  display: block !important;
}
#footer-widgets .footer-widget ul li .meta,
#footer-widgets .footer-widget ul li time,
#footer-widgets .footer-widget ul li .post-date,
#footer-widgets .footer-widget ul li .entry-date{
  display: block !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.55) !important;
  margin-top: 3px !important;
}

#footer-bottom{ background: #0F1911 !important; }
#footer-bottom a:hover{ color: var(--veda-accent) !important; }

/* Social icons — circular with lift + color pop */
.oceanwp-social-menu .colored ul li a,
.site-footer .social-widget li a{
  transition: var(--veda-transition);
}
.oceanwp-social-menu .colored ul li a:hover,
.site-footer .social-widget li a:hover{
  transform: translateY(-4px) scale(1.08);
}

/* Scroll-to-top button restyled */
#scroll-top{
  background: var(--veda-primary) !important;
  border-radius: 50% !important;
  width: 46px !important; height: 46px !important; line-height: 46px !important;
  box-shadow: 0 8px 20px rgba(46,125,79,.35);
}
#scroll-top:hover{ background: var(--veda-primary-dark) !important; transform: translateY(-4px); }

/* ---------------------------------------------------------------------
   11. SCROLL-REVEAL ANIMATION CLASSES
   Paired with assets/js/custom-animations.js, which auto-applies these
   to common Elementor / WooCommerce / blog elements site-wide.
--------------------------------------------------------------------- */
.veda-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.veda-reveal.veda-in{
  opacity: 1;
  transform: translateY(0);
}
.veda-reveal-zoom{
  opacity: 0;
  transform: scale(.92);
  transition: opacity .7s ease, transform .7s ease;
}
.veda-reveal-zoom.veda-in{ opacity:1; transform: scale(1); }

.veda-reveal-left{ opacity:0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.veda-reveal-left.veda-in{ opacity:1; transform: translateX(0); }
.veda-reveal-right{ opacity:0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.veda-reveal-right.veda-in{ opacity:1; transform: translateX(0); }

/* Icons get their own bouncier, more playful entrance than plain text/images */
.veda-reveal-pop{
  opacity: 0;
  transform: scale(.5) rotate(-12deg);
  transition: opacity .55s cubic-bezier(.34,1.56,.64,1), transform .55s cubic-bezier(.34,1.56,.64,1);
}
.veda-reveal-pop.veda-in{ opacity: 1; transform: scale(1) rotate(0deg); }

/* Simple fade only — for dense body copy where a slide/zoom feels like too much */
.veda-reveal-fade{ opacity: 0; transition: opacity .8s ease; }
.veda-reveal-fade.veda-in{ opacity: 1; }

/* Flip-up — good for stat numbers, price tags, badges */
.veda-reveal-flip{
  opacity: 0;
  transform: perspective(600px) rotateX(50deg);
  transform-origin: top center;
  transition: opacity .6s ease, transform .6s ease;
}
.veda-reveal-flip.veda-in{ opacity: 1; transform: perspective(600px) rotateX(0deg); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .veda-reveal,.veda-reveal-zoom,.veda-reveal-left,.veda-reveal-right,
  .veda-reveal-pop,.veda-reveal-fade,.veda-reveal-flip{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Icons also get a lively hover wiggle wherever they sit, independent of scroll */
.elementor-icon,
.veda-icon-badge,
.elementor-widget-icon-box .elementor-icon-box-icon{
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.elementor-widget-icon-box:hover .elementor-icon-box-icon,
.elementor-icon:hover{
  transform: scale(1.12) rotate(-6deg);
}

/* Gentle floating effect utility — add class .veda-float to any Elementor image widget */
.veda-float{ animation: veda-floating 4.5s ease-in-out infinite; }
@keyframes veda-floating{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

/* ---------------------------------------------------------------------
   12. MOBILE RESPONSIVENESS
--------------------------------------------------------------------- */
@media only screen and (max-width: 959px){
  h1{ font-size: 30px; }
  h2{ font-size: 24px; }
  h3{ font-size: 20px; }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{ padding: 10px 10px 16px !important; }
}

@media only screen and (max-width: 767px){
  /* Logo scales down a touch so it never crowds the hamburger */
  #site-logo #site-logo-inner{ height: auto; }
  #site-logo #site-logo-inner a img{ max-height: 46px; width:auto; }

  /* Hamburger + cart icons: comfortable touch targets */
  .oceanwp-mobile-menu-icon a,
  .header-cart-icon{ min-width: 44px; min-height: 44px; line-height: 44px !important; }

  h1{ font-size: 26px; }
  h2{ font-size: 21px; }
  h3{ font-size: 18px; }

  .container{ max-width: 92% !important; }

  /* Shop grid: 2 columns on phones instead of a cramped single/triple column */
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 13px; }
  .woocommerce ul.products li.product .price{ font-size: 13px; }

  /* Buttons full-width and thumb-friendly on small screens */
  .woocommerce div.product .single_add_to_cart_button,
  .woocommerce #respond input#submit,
  .wpforms-submit-container button[type=submit]{
    width: 100%;
  }

  /* Footer widgets stack cleanly with breathing room */
  #footer-widgets .footer-box{ margin-bottom: 26px; text-align: left; }

  /* Reduce hover-lift distances on touch devices (no hover state, keep tap feedback subtle) */
  .woocommerce ul.products li.product:hover,
  .blog-entry.grid-entry:hover .blog-entry-inner,
  .elementor-widget-image-box .elementor-image-box-wrapper:hover{
    transform: translateY(-3px);
  }

  #scroll-top{ width: 40px !important; height: 40px !important; line-height: 40px !important; right: 14px !important; bottom: 14px !important; }
}

@media only screen and (max-width: 480px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .page-header-title{ font-size: 22px !important; }
}

/* ---------------------------------------------------------------------
   16. HEADER FIXES — search icon size + sticky logo size
--------------------------------------------------------------------- */

/* The global button rule (section 4) styles every <button>/<a class="button">
   site-wide, which was also inflating OceanWP's icon-only header search
   toggle into a huge filled circle. Reset it back to a plain small icon
   that matches the nav items, sized just slightly larger for easy tapping. */
#site-header button.site-search-toggle,
#site-header a.site-search-toggle,
#site-header .search-toggle-li a,
#site-header .search-toggle-li button,
#site-header #search-toggle a,
#site-header #search-toggle button,
#searchform-header-replace-close,
.search-overlay-toggle{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--veda-dark) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-size: 15px !important;
  line-height: 74px !important;
}
#site-header button.site-search-toggle::after,
#site-header a.site-search-toggle::after{
  display: none !important; /* remove the button shine sweep on this icon */
}
#site-header button.site-search-toggle:hover,
#site-header a.site-search-toggle:hover,
#site-header .search-toggle-li a:hover,
#site-header #search-toggle a:hover{
  color: var(--veda-primary) !important;
  background: transparent !important;
  transform: none !important;
}

/* Sticky-scroll logo: OceanWP's own Customizer setting was shrinking it
   too aggressively. Keep it at a clean, legible size in both states. */
#site-logo #site-logo-inner{ height: auto !important; }
#site-logo #site-logo-inner a img{
  max-height: 62px !important;
  width: auto !important;
}
.is-sticky #site-logo #site-logo-inner a img,
#site-header.veda-scrolled #site-logo #site-logo-inner a img{
  max-height: 50px !important;
  width: auto !important;
}
@media only screen and (max-width: 767px){
  #site-logo #site-logo-inner a img{ max-height: 46px !important; }
  .is-sticky #site-logo #site-logo-inner a img,
  #site-header.veda-scrolled #site-logo #site-logo-inner a img{
    max-height: 40px !important;
  }
}

/* ---------------------------------------------------------------------
   13. ELEGANT EYEBROW LABEL + HIGHLIGHTED HEADING WORD
   Reference pattern: small gold dash + uppercase label above a large
   serif heading, with one word set in italic accent color.

   Usage in Elementor:
   - Eyebrow text widget → CSS Classes: veda-eyebrow
   - Heading widget → wrap the word to highlight in a <span> with
     class veda-word (Elementor Heading widget supports basic HTML,
     or use a Text Editor widget). Example:
       One mill. Two names your market can <span class="veda-word">remember</span>.
--------------------------------------------------------------------- */
.veda-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--veda-accent-dark);
  margin-bottom: 18px;
}
.veda-eyebrow::before{
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  background: var(--veda-accent);
}

.veda-word{
  font-style: italic !important;
  color: var(--veda-accent-dark) !important;
  font-weight: 700 !important;
}

/* Large elegant heading size for hero-style sections */
.veda-hero-heading{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--veda-dark);
  font-size: 48px;
  line-height: 1.25;
  margin: 0 0 22px;
}
.veda-hero-subtext{
  font-family: 'Poppins', sans-serif;
  color: var(--veda-text);
  font-size: 16px;
  line-height: 1.9;
  max-width: 520px;
  margin: 0 0 32px;
}
@media only screen and (max-width: 767px){
  .veda-hero-heading{ font-size: 30px; }
}

/* ---------------------------------------------------------------------
   14. HERO SPLIT LAYOUT — content left, floating image cluster right
   Wrap the whole hero in an Elementor Section with CSS Class
   "veda-hero-split". Put content in the left Column (class
   "veda-hero-content") and images in the right Column (class
   "veda-hero-visual"). See assets/snippets/hero-section.html for a
   full ready-to-paste example built from your own product photography.
--------------------------------------------------------------------- */
.veda-hero-split{
  padding: 90px 0 !important;
  background: var(--veda-cream);
  overflow: visible !important;
}
.veda-hero-split .elementor-container{
  align-items: center;
  gap: 40px;
}
.veda-hero-content{ position: relative; z-index: 2; }

.veda-hero-visual{
  position: relative;
  min-height: 420px;
}
.veda-hero-visual img{
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(22,38,28,.16);
}
/* Main (large) floating image */
.veda-hero-img-main{
  position: relative;
  width: 78%;
  margin-left: auto;
  z-index: 2;
  animation: veda-floating 6s ease-in-out infinite;
}
/* Secondary (small) floating image, offset bottom-left, on its own rhythm */
.veda-hero-img-secondary{
  position: absolute;
  left: 0;
  bottom: -6%;
  width: 42%;
  z-index: 3;
  border: 6px solid #fff;
  animation: veda-floating 5s ease-in-out infinite;
  animation-delay: .6s;
}
/* Small floating info chip, e.g. "100% Organic" */
.veda-hero-chip{
  position: absolute;
  top: 8%;
  left: -6%;
  z-index: 4;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--veda-shadow-hover);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  animation: veda-floating 5.5s ease-in-out infinite;
  animation-delay: .3s;
}
.veda-hero-chip i{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--veda-primary-light);
  color: var(--veda-primary);
  display: flex; align-items:center; justify-content:center;
  font-size: 16px;
  flex-shrink: 0;
}
.veda-hero-chip strong{ display:block; font-size: 13px; color: var(--veda-dark); }
.veda-hero-chip span{ display:block; font-size: 11px; color: #888; }

/* Soft decorative blob behind the images for depth */
.veda-hero-visual::before{
  content: "";
  position: absolute;
  top: 6%;
  right: 4%;
  width: 80%;
  height: 80%;
  background: var(--veda-primary-light);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  z-index: 1;
}

/* Trust row under the hero CTAs, e.g. "100% Organic · Lab Tested · Pan-India Shipping" */
.veda-trust-row{
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--veda-border);
}
.veda-trust-row .veda-trust-item{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--veda-dark);
}
.veda-trust-row .veda-trust-item i{ color: var(--veda-primary); font-size: 16px; }

@media only screen and (max-width: 959px){
  .veda-hero-visual{ min-height: 320px; margin-top: 50px; }
  .veda-hero-chip{ display: none; } /* keeps mobile clean — re-enable if you like the density */
}
@media only screen and (max-width: 767px){
  .veda-hero-split{ padding: 60px 0 !important; }
  .veda-hero-img-secondary{ width: 46%; bottom: -4%; }
}

/* ---------------------------------------------------------------------
   15. FOOTER — ELEGANT, NO DEAD GAP
   OceanWP's default footer columns use float layout, which leaves an
   uneven empty gap above #footer-bottom whenever one column is taller
   than the others. Flexbox fixes that: columns stay flush regardless
   of content length.
--------------------------------------------------------------------- */
#footer-widgets .oceanwp-row{
  display: flex !important;
  flex-wrap: wrap;
  margin: 0 -20px !important;
}
#footer-widgets .oceanwp-row .col{
  float: none !important;
  display: flex;
  flex-direction: column;
  padding: 0 20px !important;
}
#footer-widgets{
  padding: 52px 0 28px !important;
}
#footer-widgets .footer-widget{
  margin-bottom: 16px;
}
#footer-widgets .footer-widget:last-child{
  margin-bottom: 0;
}
/* Trim any stray bottom margin on the last element inside each widget
   (a common cause of mismatched column heights / gaps) */
#footer-widgets .footer-widget > *:last-child{ margin-bottom: 0 !important; }

#footer-bottom{
  margin-top: 0 !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media only screen and (max-width: 959px){
  #footer-widgets .oceanwp-row{ margin: 0 -12px !important; }
  #footer-widgets .oceanwp-row .col{ padding: 0 12px !important; margin-bottom: 34px; }
}

/* ---------------------------------------------------------------------
   17. SIDEBAR — remove everywhere, including the Blog, and expand the
   main content to fill the freed-up space.

   CRITICAL FIX: the previous version of this rule included bare
   [class*="sidebar"] / [id*="sidebar"] selectors with no tag
   restriction. OceanWP puts a class like "right-sidebar" on the
   <body> tag itself to indicate the page's layout MODE (not an actual
   sidebar container) — so that selector matched <body> too, setting
   display:none on the entire page, which is why the Blog page went
   completely blank. Restricted to div/aside elements only, which can
   never match <body>, while still catching non-standard sidebar
   wrapper names on div/aside containers specifically.
--------------------------------------------------------------------- */
#secondary,
.widget-area,
#right-sidebar,
#left-sidebar,
aside.widget-area,
div[class*="sidebar"],
div[id*="sidebar"],
aside[class*="sidebar"],
aside[id*="sidebar"]{
  display: none !important;
}
#primary,
.content-area{
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
   18. SEARCH WIDGET — button was wrapping ("Sea / rch") because the
   global button padding made it wider than the sidebar had room for,
   and the form didn't protect it from being flex-squeezed.
--------------------------------------------------------------------- */
.search-form{
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: nowrap;
}
.search-form .search-field{
  flex: 1 1 auto;
  min-width: 0;
}
.search-form .search-submit{
  flex-shrink: 0;
  padding: 12px 20px !important;
}

/* ---------------------------------------------------------------------
   19. SINGLE PRODUCT — hide social-share icons, style "You May Also
   Like" (see functions.php, which replaces WooCommerce's default
   related-products output — the default was empty on your site
   because it only shows products sharing a category/tag, and your 3
   products aren't tagged consistently).
--------------------------------------------------------------------- */
.woocommerce div.product [class*="sharing"],
.woocommerce div.product [class*="share-buttons"],
.woocommerce div.product [class*="product-share"],
.woocommerce div.product .op-share,
.woocommerce div.product .social-share{
  display: none !important;
}

.veda-related-products{
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--veda-border);
}
.veda-related-products > h2{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--veda-dark);
  font-size: 26px;
  text-align: center;
  margin: 0 0 30px;
}

#footer-widgets li.phone > i,
#footer-widgets li.email > i,
#footer-widgets li.address > i,
#footer-widgets li.mobile > i,
#footer-widgets li.fax > i{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#footer-widgets li.phone > i::before,
#footer-widgets li.email > i::before,
#footer-widgets li.address > i::before,
#footer-widgets li.mobile > i::before,
#footer-widgets li.fax > i::before{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* ---------------------------------------------------------------------
   20. SEARCH RESULTS — Product / Blog Post / Page labels
   (badge element is inserted by custom-animations.js)
--------------------------------------------------------------------- */
.veda-search-type-badge{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
}
.veda-search-type-product{
  background: var(--veda-primary-light);
  color: var(--veda-primary-dark);
}
.veda-search-type-blog-post{
  background: #EEF0E2;
  color: var(--veda-accent-dark);
}
.veda-search-type-page{
  background: #F0F0F0;
  color: #666;
}

/* Product cards: show the pointer everywhere in the card, not just on
   the image/title links (JS in custom-animations.js makes the whole
   card clickable; this just gives the correct visual cue) */
.woocommerce ul.products li.product{
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   21. SHOP GRID — switch to flexbox on desktop too (already used on
   mobile), so wrapping is based purely on available width instead of
   WooCommerce's server-rendered "first"/"last" classes. Those classes
   carry a clear:left rule meant for float-based layouts; when the JS
   Moringa-first reorder moves products around visually, those classes
   stay attached to whichever product originally held that position,
   and the leftover clear:left was forcing an incorrect row break.
   Flexbox wraps by width alone and ignores clear entirely, so this
   sidesteps the issue regardless of what class ends up where.
--------------------------------------------------------------------- */
@media only screen and (min-width: 768px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    float: none !important;
    clear: none !important;
    width: calc(33.333% - 16px) !important;
    margin: 0 0 2em 0 !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    width: calc(50% - 12px) !important;
  }
}

/* ---------------------------------------------------------------------
   22. HIDE REVIEWS TAB — visual safety net for the functional-level
   removal already done in functions.php (unset($tabs['reviews'])).
   This CSS rule got dropped during an earlier file reconciliation —
   re-added here so Reviews is hidden even if functions.php somehow
   hasn't been applied yet.
--------------------------------------------------------------------- */
.woocommerce-tabs ul.tabs li.reviews_tab,
#tab-reviews,
.woocommerce-Reviews,
#reviews{
  display: none !important;
}