/*
Theme Name: Ayurveda Wellness
Theme URI: https://example.com/ayurveda-wellness
Author: Your Studio
Author URI: https://example.com
Description: A light, modern WooCommerce theme for multispeciality Ayurveda treatment & wellness centres. Includes a 5-slide header hero, multi-level navigation, Home / About / Shop / Contact templates and full WooCommerce support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ayurveda-wellness
Tags: light, e-commerce, custom-menu, custom-logo, translation-ready, one-column, two-columns
*/

/* =========================================================
   0. DESIGN TOKENS
   Palette grounded in Ayurveda's tri-dosha (Vata / Pitta / Kapha)
   material world: herb-leaf green, turmeric root, sandalwood clay.
========================================================= */
:root{
  /* surfaces */
  --c-bg:        #FBF8F1;   /* warm rice-paper ivory */
  --c-bg-alt:    #F1EBD8;   /* toasted sand */
  --c-surface:   #FFFFFF;
  --c-surface-2: #F6F2E7;

  /* brand */
  --c-primary:      #33502F; /* deep tulsi-leaf green */
  --c-primary-dark: #20321E;
  --c-primary-soft: #DDE6D3;
  --c-accent:       #C68A3B; /* turmeric root */
  --c-accent-dark:  #A66F27;
  --c-accent-soft:  #EDD9AE;
  --c-clay:         #A85C46; /* sandalwood / clay, used sparingly */

  /* text */
  --c-text:       #23281C;
  --c-text-muted: #5C6552;
  --c-text-soft:  #838C77;
  --c-on-primary: #FBF8F1;

  --c-border: #E4DCC4;
  --c-shadow: 30 40 20;

  /* type */
  --f-display: "Fraunces", "Georgia", serif;
  --f-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --wrap: 1220px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --gap: clamp(1.25rem, 2vw, 2.5rem);
}

/* =========================================================
   1. RESET & BASE
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }
:focus-visible{ outline: 2px solid var(--c-accent-dark); outline-offset: 3px; }

h1,h2,h3,h4{ font-family: var(--f-display); color: var(--c-primary-dark); line-height:1.15; margin: 0 0 .5em; font-weight: 600; }
h1{ font-size: clamp(2.4rem, 4.5vw, 4rem); font-weight: 500; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1em; color: var(--c-text-muted); }
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Extra breathing room on the sides for About Us & Contact Us — content on
   these pages otherwise ran closer to the browser edge than the rest of the
   site. Scoped to these two templates only, so no other page is affected.
   (WordPress auto-adds body classes from the "Template Name" file, e.g.
   page-about.php -> .page-template-page-about-php.) */
body.page-template-page-about-php .wrap,
body.page-template-page-contact-php .wrap{ padding-left: 64px; padding-right: 64px; }
@media (max-width: 900px){
  body.page-template-page-about-php .wrap,
  body.page-template-page-contact-php .wrap{ padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 640px){
  body.page-template-page-about-php .wrap,
  body.page-template-page-contact-php .wrap{ padding-left: 24px; padding-right: 24px; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-body); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--c-accent-dark);
  margin-bottom: .9em;
}
.eyebrow::before{ content:""; width:18px; height:1px; background: var(--c-accent-dark); display:inline-block; }
.section{ padding: clamp(3.5rem, 7vw, 7rem) 0; position: relative; }
.section--alt{ background: var(--c-bg-alt); }
.section-head{ max-width: 640px; margin-bottom: clamp(2rem,4vw,3.5rem); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head-avatars{ display:flex; justify-content:center; margin-bottom:1rem; }
.section-head-avatars img{
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid var(--c-surface); box-shadow:0 2px 6px rgba(var(--c-shadow)/.25);
  margin-left:-12px;
}
.section-head-avatars img:first-child{ margin-left:0; }

/* organic divider used between sections — nods to leaf/root forms */
.blob-divider{ display:block; width:100%; height:60px; margin-top:-1px; }
.blob-divider path{ fill: var(--c-bg); }
.section--alt + .section .blob-divider path{ fill: var(--c-bg); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding: .9em 1.7em; border-radius: 999px; border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover{ background: var(--c-primary-dark); transform: translateY(-2px); }
.btn-accent{ background: var(--c-accent); color: var(--c-primary-dark); }
.btn-accent:hover{ background: var(--c-accent-dark); color: #fff; transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: currentColor; color: var(--c-on-primary); }
.btn-outline:hover{ background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn-outline.dark{ color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline.dark:hover{ background: var(--c-primary); color:#fff; }

/* =========================================================
   2. SITE HEADER + MULTI-LEVEL NAVIGATION
========================================================= */
.site-header{
  position: sticky; top:0; z-index: 999;
  background: rgba(251,248,241,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px; max-width: var(--wrap); margin:0 auto; gap: 1.5rem;
}
.site-branding{ display:flex; align-items:center; gap:.7rem; }
.site-branding img{ max-height: var(--logo-height, 46px); width:auto; }
.site-title{ font-family: var(--f-display); font-size:1.5rem; color: var(--c-primary-dark); font-weight:600; margin:0; }
.site-title a{ display:flex; align-items:center; gap:.6rem; }
.site-description{ display:none; }

.dosha-mark{ width:34px; height:34px; flex-shrink:0; }

/* primary nav */
.primary-nav{ display:flex; align-items:center; gap: 3.15rem; } /* +50% width */
.primary-nav > ul{ display:flex; align-items:center; gap: 2.85rem; } /* +50% width */
.primary-nav > ul > li{ position:relative; }
.primary-nav > ul > li > a{
  display:flex; align-items:center; gap:.35em;
  font-weight:600; font-size:.92rem; color: var(--c-primary-dark);
  padding: 10px 2px; position:relative;
}
.primary-nav > ul > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.primary-nav > ul > li:hover > a::after,
.primary-nav > ul > li.current-menu-item > a::after{ transform: scaleX(1); }
.primary-nav .menu-item-has-children > a::before{
  content:"◆"; font-size:.45em; color: var(--c-accent-dark); order:2; margin-left:2px; position: relative; top:-4px;
}

/* dropdowns — supports unlimited nested levels */
.primary-nav ul ul{
  position:absolute; top: 100%; left:0; min-width: 230px;
  background: var(--c-surface); border:1px solid var(--c-border);
  border-radius: var(--radius-sm); box-shadow: 0 18px 34px -14px rgba(var(--c-shadow) / .25);
  padding: 8px; opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 40;
}
.primary-nav ul ul ul{ top: -8px; left: 100%; }
.primary-nav li:hover > ul,
.primary-nav li.js-open > ul{ opacity:1; visibility:visible; transform: translateY(0); }
.primary-nav ul ul li{ position:relative; }
.primary-nav ul ul a{
  display:flex; justify-content:space-between; align-items:center; gap:.5em;
  padding: 9px 12px; border-radius: 6px; font-size:.88rem; font-weight:500; color: var(--c-text);
  white-space:nowrap;
}
.primary-nav ul ul a:hover{ background: var(--c-primary-soft); color: var(--c-primary-dark); }
.primary-nav ul ul .menu-item-has-children > a::after{ content:"›"; font-weight:700; color: var(--c-text-soft); }

.header-cta{ display:flex; align-items:center; gap: 14px; }
.header-cta .btn{ padding:.7em 1.3em; font-size:.85rem; }
.header-icon-link{ position:relative; display:inline-flex; padding:6px; color: var(--c-primary-dark); }
.header-icon-link svg{ width:22px; height:22px; }
.cart-count{
  position:absolute; top:-2px; right:-2px; background: var(--c-accent);
  color: var(--c-primary-dark); font-size:.62rem; font-weight:700;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

.menu-toggle{ display:none; background:none; border:1px solid var(--c-border); border-radius: 8px; padding:9px 11px; }
.menu-toggle span{ display:block; width:20px; height:2px; background: var(--c-primary-dark); margin:4px 0; }

/* =========================================================
   3. HERO SLIDER (5 slides)
========================================================= */
.hero-slider{ position:relative; overflow:hidden; background: var(--c-primary-dark); }
.hero-slide{
  position: relative; display:flex; align-items:center; min-height: min(101vh, 936px);
  opacity:0; visibility:hidden; position:absolute; inset:0;
  transition: opacity .9s ease;
}
.hero-slide.is-active{ position:relative; opacity:1; visibility:visible; }
.hero-slider-track{ position:relative; min-height: min(101vh, 936px); }
.hero-slide .slide-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.hero-slide-content{
  position:relative; z-index:2; max-width: 620px; padding: 0 24px; margin: 0 auto; width:100%;
}
.hero-slide-content .wrap-inner{ max-width: var(--wrap); margin:0 auto; padding-left:0; }
.hero-slide-content .eyebrow{ color: var(--c-accent-soft); }
.hero-slide-content .eyebrow::before{ display:none; }
.hero-slide h2{ color:#fff; font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-bottom:.4em; }
.hero-slide p{ color: rgba(255,255,255,.85); font-size:1.08rem; max-width: 480px; }
.hero-slide .hero-actions{ display:flex; gap:.9rem; margin-top:1.6rem; flex-wrap:wrap; }

.hero-dots{ position:absolute; z-index:5; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:10px; }
.hero-dots button{
  width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.7); background: transparent; padding:0;
  transition: background .2s, width .2s;
}
.hero-dots button.is-active{ background: var(--c-accent); border-color: var(--c-accent); width:24px; border-radius:6px; }

.hero-arrow{
  position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center;
  transition: background .2s;
}
.hero-arrow:hover{ background: rgba(255,255,255,.22); }
.hero-arrow.prev{ left:22px; } .hero-arrow.next{ right:22px; }
.hero-arrow svg{ width:18px; height:18px; }

.dosha-badge{
  position:absolute; z-index:4; right: clamp(20px, 5vw, 70px); bottom: 70px;
  width:118px; height:118px; display:none;
  align-items:center; justify-content:center; text-align:center;
  background: rgba(251,248,241,.14); border: 1px solid rgba(255,255,255,.4);
  border-radius:50%; color:#fff; font-family: var(--f-display); font-size:.72rem; letter-spacing:.08em;
}

@media(min-width: 900px){ .dosha-badge{ display:flex; } }

/* =========================================================
   4. HOME SECTIONS
========================================================= */
.intro-section{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:center; }
.intro-media{ position:relative; }
.intro-media img{ border-radius: var(--radius-lg); }
.intro-media .float-card{
  position:absolute; left:-24px; bottom:-24px; background: var(--c-surface);
  border-radius: var(--radius-md); padding: 18px 22px; box-shadow: 0 22px 40px -18px rgba(var(--c-shadow) / .3);
  display:flex; align-items:center; gap:12px; max-width:230px;
}
.float-card .num{ font-family: var(--f-display); font-size:1.7rem; color: var(--c-accent-dark); }
.float-card span{ font-size:.78rem; color: var(--c-text-muted); display:block; line-height:1.3; }

.stat-row{ display:flex; gap: clamp(1.5rem,4vw,3rem); margin-top:2rem; flex-wrap:wrap; }
.stat-row .stat b{ font-family: var(--f-display); font-size:2rem; color: var(--c-primary); display:block; }
.stat-row .stat span{ font-size:.82rem; color: var(--c-text-muted); }

/* specialities — leaf-cluster asymmetric grid, not a plain 3x3 */
.speciality-grid{
  display:grid; gap: 1.25rem;
  grid-template-columns: repeat(6, 1fr);
}
.speciality-card{
  grid-column: span 3; overflow:hidden; position:relative;
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-md);
  padding: 1.9rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.speciality-image{
  display:block; width: calc(100% + 3.8rem); max-width:none;
  margin: -1.9rem -1.9rem 1.25rem -1.9rem;
  height: 170px; object-fit: cover;
}
.speciality-card:nth-child(1){ grid-column: span 4; }
.speciality-card:nth-child(2){ grid-column: span 2; }
.speciality-card:nth-child(3){ grid-column: span 2; }
.speciality-card:nth-child(4){ grid-column: span 4; }
.speciality-card:nth-child(5){ grid-column: span 3; }
.speciality-card:nth-child(6){ grid-column: span 3; }
.speciality-card:hover{ transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(var(--c-shadow)/.3); border-color: var(--c-accent-soft); }
.speciality-icon{
  width:46px; height:46px; border-radius:12px; background: var(--c-primary-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color: var(--c-primary);
}
/* Float each speciality's icon as a badge straddling the photo, so the icon
   reads as clearly tied to (and relevant for) that specific treatment. */
.speciality-card .speciality-icon{
  position:absolute; top:147px; left:1.9rem; z-index:2; margin:0;
  background:#fff; box-shadow: 0 12px 22px -10px rgba(var(--c-shadow)/.45);
}
.speciality-icon svg{ width:24px; height:24px; }
.speciality-card h3{ margin: 1.6rem 0 .4rem; font-size:1.15rem; }
.speciality-card p{ font-size:.92rem; margin-bottom:0; }

/* products */
.shop-teaser-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* testimonials */
.testimonial-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.testimonial-card{
  background: var(--c-surface); border-radius: var(--radius-md); padding: 1.8rem;
  border: 1px solid var(--c-border);
}
.testimonial-card .stars{ color: var(--c-accent-dark); letter-spacing:2px; margin-bottom:.8rem; font-size:.9rem; }
.testimonial-card p{ font-style: italic; color: var(--c-text); }
.testimonial-person{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.testimonial-person img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.testimonial-person b{ font-size:.9rem; display:block; }
.testimonial-person span{ font-size:.78rem; color: var(--c-text-muted); }

/* cta band */
.cta-band{
  background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--radius-lg);
  padding: clamp(2.2rem,5vw,3.6rem); display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; margin:0; max-width:520px; }
.cta-band p{ color: rgba(255,255,255,.78); margin: .6rem 0 0; }
.cta-band-icon{ width:52px; height:52px; border-radius:50%; object-fit:cover; margin-bottom:1rem; border:2px solid rgba(255,255,255,.5); }

/* variant with a photo — used on the homepage's closing "Ready to begin
   your wellness journey?" band. Base .cta-band styling above is untouched
   so other uses (e.g. the About page CTA) are unaffected. */
.cta-band.has-media{ display:grid; grid-template-columns: 340px 1fr; align-items:stretch; gap:0; padding:0; }
.cta-band.has-media .cta-band-media{ align-self:stretch; }
.cta-band.has-media .cta-band-media img{ width:100%; height:100%; min-height:240px; object-fit:cover; display:block; }
.cta-band.has-media .cta-band-content{
  padding: clamp(2.2rem,5vw,3.6rem); display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
@media (max-width: 780px){
  .cta-band.has-media{ grid-template-columns: 1fr; }
  .cta-band.has-media .cta-band-media img{ min-height:200px; }
}

/* =========================================================
   5. PAGE HEADER (About / Shop / Contact)
========================================================= */
.page-hero{
  background: var(--c-primary-dark); color:#fff; padding: 4.5rem 0 3.5rem; text-align:center;
  position:relative; overflow:hidden;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; }
.page-hero .breadcrumb{ color: rgba(255,255,255,.65); font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; }
.page-hero .breadcrumb a{ color: var(--c-accent-soft); }

/* about page */
.about-values{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.about-value{ text-align:center; padding: 1.6rem 1rem; }
.about-value .speciality-icon{ margin:0 auto 1rem; }
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); }
.team-card img{ border-radius: var(--radius-md); aspect-ratio: 3/4; object-fit:cover; }
.team-card h3{ margin: 1rem 0 .1rem; font-size:1.05rem; }
.team-card span{ font-size:.82rem; color: var(--c-accent-dark); font-weight:600; }

/* contact page */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap); align-items:start; }
.contact-info-card{
  background: var(--c-primary); color:#fff; border-radius: var(--radius-lg); padding: 2.4rem;
}
.contact-info-card h3{ color:#fff; }
.contact-info-row{ display:flex; gap:.9rem; padding: 1rem 0; border-top:1px solid rgba(255,255,255,.16); }
.contact-info-row:first-of-type{ border-top:none; }
.contact-info-row svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; color: var(--c-accent-soft); }
.contact-info-row b{ display:block; font-size:.9rem; }
.contact-info-row span{ color: rgba(255,255,255,.75); font-size:.88rem; }
.social-row{ display:flex; gap:.6rem; margin-top:1.5rem; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; }
.social-row svg{ width:16px; height:16px; }

.contact-form-card{ background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-lg); padding: 2.4rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field{ margin-bottom:1.1rem; }
.form-field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color: var(--c-primary-dark); }
.form-field input, .form-field textarea{
  width:100%; padding: .85em 1em; border:1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg-alt); color: var(--c-text); transition: border-color .2s, background .2s;
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--c-accent-dark); background:#fff; outline:none; }
.form-notice{ padding: .9em 1.1em; border-radius: var(--radius-sm); margin-bottom:1.2rem; font-size:.9rem; }
.form-notice.success{ background: var(--c-primary-soft); color: var(--c-primary-dark); }
.form-notice.error{ background: #F5DCD4; color: #7A3421; }
.map-wrap{ margin-top: var(--gap); border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--c-border); }
.map-wrap iframe{ width:100%; height:360px; border:0; display:block; }

/* =========================================================
   6. FOOTER
========================================================= */
.site-footer{ background: var(--c-primary-dark); color: rgba(251,248,241,.82); margin-top: 4rem; }
.footer-top{ padding: clamp(3rem,6vw,4.5rem) 0 2.5rem; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--gap); }
.footer-brand .site-title, .footer-brand .site-title a{ color:#fff; }
.footer-brand .site-title img{ max-height: var(--logo-height, 46px); width:auto; }
.footer-brand p{ color: rgba(251,248,241,.65); font-size:.9rem; max-width: 300px; margin-top:1rem; }
.site-footer h4{ color:#fff; font-family: var(--f-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; }
.footer-col ul li{ margin-bottom:.65rem; }
.footer-col ul a{ color: rgba(251,248,241,.72); font-size:.92rem; transition:color .2s; }
.footer-col ul a:hover{ color: var(--c-accent-soft); }
.footer-bottom{
  border-top:1px solid rgba(251,248,241,.14); padding: 1.4rem 0; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; font-size:.8rem; color: rgba(251,248,241,.55);
}
.footer-bottom a{ color: rgba(251,248,241,.7); }
.footer-socials{ display:flex; gap:.6rem; }
.footer-socials a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(251,248,241,.25); display:flex; align-items:center; justify-content:center; }
.footer-socials svg{ width:15px; height:15px; }

/* =========================================================
   7. WOOCOMMERCE
========================================================= */
.woocommerce ul.products{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; list-style:none; }
.woocommerce ul.products li.product{
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-md);
  padding: 1rem 1rem 1.4rem; position:relative; transition: transform .25s, box-shadow .25s;
}
.woocommerce ul.products li.product:hover{ transform: translateY(-5px); box-shadow: 0 22px 38px -20px rgba(var(--c-shadow)/.3); }
/* Product image fills its card entirely — full width and height,
   cropped to fit — on the shop archive, single product and the
   home page product teaser alike. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:block !important; overflow:hidden;
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: var(--c-bg-alt); margin-bottom:.9rem;
}
.woocommerce ul.products li.product a img{ width:100% !important; height:100% !important; object-fit:cover !important; margin:0; border-radius:0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--f-display); font-size:1rem; color: var(--c-primary-dark); font-weight:600; margin: .2rem 0 .3rem; padding:0;
}
.woocommerce ul.products li.product .price{ color: var(--c-accent-dark); font-weight:700; }
.woocommerce ul.products li.product .price del{ color: var(--c-text-soft); font-weight:400; }
.woocommerce ul.products li.product .button{
  margin-top: .8rem; display:inline-block; width:100%; text-align:center;
  background: var(--c-primary); color:#fff; border-radius: 999px; padding: .7em 1em; font-size:.85rem; font-weight:600;
}
.woocommerce ul.products li.product .button:hover{ background: var(--c-primary-dark); }
.woocommerce ul.products li.product .onsale{
  position:absolute; top:14px; left:14px; background: var(--c-accent); color: var(--c-primary-dark);
  font-size:.7rem; font-weight:700; padding:.3em .7em; border-radius: 999px; min-height:0; min-width:0; margin:0; text-transform:uppercase;
}
.woocommerce .star-rating{ color: var(--c-accent-dark); }
.woocommerce nav.woocommerce-pagination ul{ border:none; display:flex; gap:.5rem; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--c-border); border-radius:8px; padding:.5em .9em;
}
.woocommerce-breadcrumb{ color: rgba(255,255,255,.65); }
.woocommerce div.product .woocommerce-product-gallery{ border-radius: var(--radius-md); overflow:hidden; background: var(--c-bg-alt); }
.woocommerce div.product .woocommerce-product-gallery img{ width:100%; height:auto; object-fit:contain; }
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{ display:none; } /* thumbnail image removed */
.woocommerce div.product p.price, .woocommerce div.product span.price{ color: var(--c-accent-dark); font-size:1.4rem; font-family: var(--f-display); }
.woocommerce div.product form.cart .button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--c-primary); color:#fff; border-radius:999px; padding:.9em 1.8em; font-weight:600; border:none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover{ background: var(--c-primary-dark); color:#fff; }
.woocommerce span.onsale{ background: var(--c-accent); }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  background: var(--c-surface); border-top-color: var(--c-accent); border-radius: var(--radius-sm); padding:1em 1.3em;
}
.woocommerce table.shop_table{ border-radius: var(--radius-md); overflow:hidden; border-color: var(--c-border); }
.woocommerce #content table.cart img, .woocommerce table.cart img{ border-radius: 8px; }
.woocommerce-checkout #payment, .woocommerce-cart-form, .cart-collaterals .cart_totals{
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-md); padding: 1.5rem;
}
.woocommerce-shop .page-hero, .woocommerce-page .page-hero{ margin-bottom: 0; }
.woocommerce .widget_price_filter .price_slider_amount .button{ float:right; }
.woocommerce-ordering select{ border:1px solid var(--c-border); border-radius: var(--radius-sm); padding:.6em 1em; background: var(--c-surface); }

/* Hide "Compare" buttons/links added by third-party compare plugins
   (this theme has no compare feature of its own). Covers the most common
   plugin markup — tell your developer the plugin name if any remain visible. */
.compare, .add_to_compare, a.compare, a.added_to_compare,
.yith-compare, .yith-woocompare-open, .woosc-btn, .woosw-btn,
[class*="compare-button"], [class*="product-compare"]{ display:none !important; }

.shop-layout{ display:grid; grid-template-columns: 260px 1fr; gap: var(--gap); align-items:start; }
.shop-sidebar .widget{ background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-md); padding:1.4rem; margin-bottom:1.25rem; }
.shop-sidebar .widget-title{ font-family: var(--f-display); font-size:1.05rem; color: var(--c-primary-dark); margin-bottom:.9rem; }
.shop-sidebar .widget ul li{ padding:.4rem 0; border-bottom:1px dashed var(--c-border); font-size:.9rem; }
.shop-sidebar .widget ul li a{ display:flex; justify-content:space-between; color: var(--c-text-muted); }
.shop-sidebar .widget ul li a:hover{ color: var(--c-primary); }

/* =========================================================
   8. UTILITIES / ANIMATION
========================================================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   8.5 ELEMENTOR COMPATIBILITY
   Theme-wide resets (list-style, button cursor, link color) are useful for the
   hand-built templates above but would fight content built inside Elementor's
   own widgets, so they're relaxed again inside anything Elementor renders.
========================================================= */
.elementor-widget-container ul,
.elementor-widget-container ol{ list-style: revert; padding-left: 1.2em; }
.elementor-widget-container p{ color: inherit; }
.elementor-button{ transition: transform .25s ease, background .25s ease; }
.elementor-section.elementor-section-boxed > .elementor-container{ max-width: var(--wrap); }
.elementor-location-header ~ #main-content,
body.elementor-page #main-content{ padding-top: 0; }

/* =========================================================
   9. RESPONSIVE
========================================================= */
@media (max-width: 1080px){
  .about-values{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .woocommerce ul.products{ grid-template-columns: repeat(3,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:block; }
  .intro-section, .contact-grid, .shop-layout{ grid-template-columns: 1fr; }
  .speciality-grid{ grid-template-columns: repeat(2,1fr); }
  .speciality-card, .speciality-card:nth-child(1), .speciality-card:nth-child(2),
  .speciality-card:nth-child(3), .speciality-card:nth-child(4){ grid-column: span 1; }
  .testimonial-row{ grid-template-columns: 1fr; }
  .woocommerce ul.products{ grid-template-columns: repeat(2,1fr); }

  .primary-nav.is-open{
    display:block; position:absolute; top:100%; left:0; right:0; background: var(--c-surface);
    border-bottom:1px solid var(--c-border); padding: 1rem 24px 1.5rem; max-height: 78vh; overflow:auto;
  }
  .primary-nav.is-open > ul{ flex-direction:column; align-items:flex-start; gap:0; }
  .primary-nav.is-open ul ul{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; width:100%; margin-left: .8rem; }
  .primary-nav.is-open li.js-open > ul{ display:block; }
  .primary-nav.is-open > ul > li{ width:100%; border-bottom:1px dashed var(--c-border); }
  .primary-nav.is-open ul ul ul{ left:0; }
}
@media (max-width: 640px){
  .about-values{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
  .woocommerce ul.products{ grid-template-columns: 1fr 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
}