/*
Theme Name: BuildMaster
Theme URI: https://buildmaster.ua
Description: Сучасна тема для магазину будівельних матеріалів з WooCommerce
Version: 3.4
Author: BuildMaster Team
Text Domain: buildmaster
WooCommerce: true
*/

/* ========================================
   CSS CUSTOM PROPERTIES
======================================== */
:root {
  /* Light theme */
  --bg: #f4f1ec;
  --bg2: #ece9e2;
  --surface: #ffffff;
  --surface2: #f9f7f4;
  --text: #1a1916;
  --text2: #5a5752;
  --text3: #9a9590;
  --accent: #e85d04;
  --accent2: #c44b00;
  --accent-light: #fff0e6;
  --border: #ddd9d2;
  --border2: #ccc8c0;
  --shadow: 0 2px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
  --radius: 8px;
  --radius-lg: 16px;
  --header-h: 72px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
  --font-head: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --max-w: 1280px;
  --skeleton-from: #e8e4dd;
  --skeleton-to: #f4f1ec;
}

[data-theme="dark"] {
  --bg: #111110;
  --bg2: #181715;
  --surface: #1e1d1b;
  --surface2: #252422;
  --text: #f0ece5;
  --text2: #b0aa9f;
  --text3: #706860;
  --accent: #f48c06;
  --accent2: #e07b00;
  --accent-light: #2a1e00;
  --border: #2e2c28;
  --border2: #3a3830;
  --shadow: 0 2px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.5);
  --skeleton-from: #252422;
  --skeleton-to: #1e1d1b;
}

/* ========================================
   RESET & BASE
======================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  transition:background var(--transition),color var(--transition);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);line-height:1.1;letter-spacing:.02em}

/* ========================================
   TYPOGRAPHY
======================================== */
h1{font-size:clamp(2.5rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.5rem)}
h3{font-size:clamp(1.4rem,2.5vw,2rem)}
h4{font-size:1.25rem}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}

/* ========================================
   LAYOUT
======================================== */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section--sm{padding:48px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.flex{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.text-center{text-align:center}
.gap-8{gap:8px}
.gap-16{gap:16px}
.gap-24{gap:24px}

/* ========================================
   BUTTONS
======================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:var(--radius);
  font-family:var(--font-body);font-size:.9rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  border:2px solid transparent;
  transition:all var(--transition);cursor:pointer;
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.15);
  transform:translateX(-100%);
  transition:transform .3s ease;
}
.btn:hover::after{transform:translateX(0)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,93,4,.35)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border2)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-white{background:#fff;color:var(--text)}
.btn-white:hover{background:var(--accent);color:#fff}
.btn-lg{padding:16px 40px;font-size:1rem}
.btn-sm{padding:8px 18px;font-size:.8rem}
.btn-icon{width:44px;height:44px;padding:0;border-radius:50%}

/* ========================================
   CARDS
======================================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border2)}
.card__body{padding:24px}
.card__img{aspect-ratio:4/3;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card__img img{transform:scale(1.05)}

/* ========================================
   BADGE / TAG
======================================== */
.badge{
  display:inline-block;padding:4px 12px;border-radius:4px;
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.badge-accent{background:var(--accent);color:#fff}
.badge-outline{border:1px solid var(--border2);color:var(--text2)}

/* ========================================
   SECTION HEADER
======================================== */
.section-header{margin-bottom:48px}
.section-header.text-center .section-tag{justify-content:center}
.section-tag{
  display:flex;align-items:center;gap:12px;
  color:var(--accent);font-weight:700;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;
}
.section-tag::before,.section-tag::after{content:'';flex:1;height:2px;background:var(--accent);max-width:40px}
.section-tag::after{display:none}
.section-title{color:var(--text);margin-bottom:16px}
.section-subtitle{color:var(--text2);font-size:1.05rem;max-width:600px}

/* ========================================
   HEADER
======================================== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  height:var(--header-h);
  transition:background var(--transition),box-shadow var(--transition);
}
.site-header.scrolled{box-shadow:var(--shadow)}
.site-header .container{
  height:100%;display:flex;align-items:center;gap:32px;
}
.site-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-logo img{height:44px;width:auto}
.site-logo__text{font-family:var(--font-head);font-size:1.8rem;letter-spacing:.05em}
.site-logo__text span{color:var(--accent)}

/* Primary nav */
.primary-nav{flex:1;display:flex;justify-content:center}
.primary-nav ul{display:flex;align-items:center;gap:4px}
.primary-nav>ul>li{position:relative}
.primary-nav>ul>li>a{
  display:flex;align-items:center;gap:4px;
  padding:8px 14px;border-radius:var(--radius);
  font-size:.875rem;font-weight:600;color:var(--text);
  transition:color var(--transition),background var(--transition);
}
.primary-nav>ul>li>a:hover,
.primary-nav>ul>li.current-menu-item>a{color:var(--accent);background:var(--accent-light)}
.primary-nav>ul>li>a .arrow{
  width:14px;height:14px;transition:transform var(--transition);
}
.primary-nav>ul>li:hover>a .arrow{transform:rotate(180deg)}

/* Dropdown */
.sub-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  min-width:220px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:all var(--transition);z-index:200;
}
.primary-nav>ul>li:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu li a{
  display:block;padding:9px 14px;border-radius:var(--radius);
  font-size:.875rem;font-weight:500;color:var(--text2);
  transition:all var(--transition);
}
.sub-menu li a:hover{background:var(--accent-light);color:var(--accent)}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto}
.header-phone{font-weight:700;font-size:.9rem;color:var(--text);white-space:nowrap}
.header-phone:hover{color:var(--accent)}
.header-socials{display:flex;align-items:center;gap:8px}
.header-socials a{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);color:var(--text2);
  transition:all var(--transition);font-size:.95rem;
}
.header-socials a:hover{background:var(--accent);color:#fff}
.theme-toggle{
  width:40px;height:40px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:all var(--transition);font-size:1.1rem;
}
.theme-toggle:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cart-btn{
  position:relative;width:40px;height:40px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:all var(--transition);font-size:1.1rem;
}
.cart-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cart-count{
  position:absolute;top:-4px;right:-4px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
/* burger → see v1.3 section below */

/* Mobile nav */
/* mobile-nav → see final section */

/* ========================================
   HERO SECTION
======================================== */
.hero{
  min-height:calc(100vh - var(--header-h));
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  background:var(--bg2);
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.35}
[data-theme="dark"] .hero__bg img{opacity:.2}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--bg) 40%,transparent 100%);
}
[data-theme="dark"] .hero__overlay{
  background:linear-gradient(135deg,var(--bg) 50%,transparent 100%);
}
.hero .container{position:relative;z-index:1}
.hero__content{max-width:680px}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent-light);color:var(--accent);
  padding:6px 16px;border-radius:100px;
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:24px;
}
.hero__title{
  font-size:clamp(3rem,7vw,6rem);
  line-height:1;margin-bottom:24px;
}
.hero__title span{color:var(--accent)}
.hero__subtitle{
  font-size:1.15rem;color:var(--text2);
  max-width:520px;margin-bottom:40px;line-height:1.7;
}
.hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero__stats{
  display:flex;gap:40px;margin-top:48px;
  padding-top:40px;border-top:1px solid var(--border);
}
.hero__stat-num{
  font-family:var(--font-head);font-size:2.8rem;color:var(--accent);
  line-height:1;
}
.hero__stat-label{font-size:.85rem;color:var(--text2);margin-top:4px}
.hero__image{
  position:absolute;right:0;top:0;bottom:0;
  width:50%;display:flex;align-items:center;justify-content:center;
}
.hero__image img{
  width:100%;height:100%;object-fit:cover;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
}

/* ========================================
   HERO SLIDER
======================================== */
.hero-slider{position:relative}
.hero-slide{display:none}
.hero-slide.active{display:flex}
.slider-dots{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:10;
}
.slider-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text3);border:none;transition:all var(--transition);
}
.slider-dot.active{background:var(--accent);width:24px;border-radius:4px}
.slider-arrows{
  position:absolute;top:50%;transform:translateY(-50%);
  width:100%;display:flex;justify-content:space-between;
  padding:0 24px;z-index:10;
}
.slider-arrow{
  width:48px;height:48px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);transition:all var(--transition);font-size:1.1rem;
}
.slider-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ========================================
   ADVANTAGES / FEATURES
======================================== */
.features-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;
}
.feature-card{
  padding:32px 28px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:all var(--transition);position:relative;overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition);
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-card:hover::before{transform:scaleX(1)}
.feature-icon{
  width:56px;height:56px;border-radius:var(--radius);
  background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:20px;
}
.feature-title{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.feature-text{color:var(--text2);font-size:.9rem;line-height:1.6}

/* ========================================
   PRODUCTS GRID
======================================== */
.products-section{background:var(--surface2)}
.products-tabs{
  display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap;
}
.products-tab{
  padding:8px 20px;border-radius:100px;
  font-size:.875rem;font-weight:600;
  background:var(--bg2);color:var(--text2);
  border:1px solid var(--border);
  transition:all var(--transition);
}
.products-tab.active,.products-tab:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* ========================================
   PRODUCT CARD (WooCommerce)
======================================== */
.product-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition);position:relative;
  display:flex;flex-direction:column;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.product-card__img{
  position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg2);
}
.product-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.product-card:hover .product-card__img img{transform:scale(1.06)}
.product-card__badges{
  position:absolute;top:12px;left:12px;
  display:flex;flex-direction:column;gap:6px;
}
.product-card__wishlist{
  position:absolute;top:10px;right:10px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:.8rem;
  transition:all var(--transition);
  box-shadow:0 1px 6px rgba(0,0,0,.12);
  cursor:pointer;padding:0;
}
.product-card__wishlist:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.product-card__wishlist[data-in-wishlist="1"] i,
.product-card__wishlist.wishlist-active i { color:var(--accent); }
.product-card__body{padding:16px;flex:1;display:flex;flex-direction:column}
.product-card__cat{
  font-size:.75rem;font-weight:600;color:var(--text3);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;
}
.product-card__title{
  font-family:var(--font-body);font-size:.95rem;font-weight:700;
  color:var(--text);line-height:1.4;margin-bottom:8px;flex:1;
}
.product-card__title a:hover{color:var(--accent)}
.product-card__rating{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.stars{color:#f59e0b;font-size:.85rem;letter-spacing:1px}
.rating-count{font-size:.78rem;color:var(--text3)}
.product-card__price{
  display:block;margin-bottom:12px;
}
.price{font-family:var(--font-head);font-size:1.5rem;color:var(--accent);display:block;text-decoration:none}
.price del{display:block;font-size:.75rem;color:var(--text3);font-family:var(--font-body);font-weight:400;text-decoration:line-through;margin-bottom:1px}
.price ins{display:block;text-decoration:none;color:var(--accent)}
.product-card__footer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);align-items:center}
.product-card__footer .add-to-cart-btn{flex:1}

/* ========================================
   CATEGORIES GRID
======================================== */
.categories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:20px;
}
.cat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition);text-align:center;cursor:pointer;
}
.cat-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.cat-card__img{aspect-ratio:1;overflow:hidden;background:var(--bg2)}
.cat-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cat-card:hover .cat-card__img img{transform:scale(1.1)}
.cat-card__name{
  padding:14px 12px;font-size:.9rem;font-weight:700;
}
.cat-card__count{font-size:.78rem;color:var(--text3);margin-top:2px}

/* ========================================
   ABOUT SECTION
======================================== */
.about-section{position:relative;overflow:hidden}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.about-img{position:relative}
.about-img__main{
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/5;
}
.about-img__main img{width:100%;height:100%;object-fit:cover}
.about-img__accent{
  position:absolute;bottom:-32px;right:-32px;
  width:60%;border-radius:var(--radius-lg);overflow:hidden;
  border:6px solid var(--surface);box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;
}
.about-img__accent img{width:100%;height:100%;object-fit:cover}
.about-badge{
  position:absolute;top:40px;left:-20px;
  background:var(--accent);color:#fff;
  padding:20px 24px;border-radius:var(--radius-lg);
  text-align:center;box-shadow:var(--shadow-lg);
}
.about-badge__num{font-family:var(--font-head);font-size:2.5rem;line-height:1}
.about-badge__text{font-size:.78rem;font-weight:600;opacity:.9;margin-top:4px}
.about-content{padding-left:20px}
.about-points{display:flex;flex-direction:column;gap:20px;margin:32px 0}
.about-point{display:flex;gap:16px;align-items:flex-start}
.about-point__icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.1rem;
}

/* ========================================
   SERVICES
======================================== */
.services-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
}
.service-card{
  padding:36px 32px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:all var(--transition);position:relative;overflow:hidden;
}
.service-card__num{
  position:absolute;top:20px;right:24px;
  font-family:var(--font-head);font-size:4rem;
  color:var(--border);line-height:1;
  transition:color var(--transition);
}
.service-card:hover .service-card__num{color:var(--accent-light)}
.service-card:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-4px)}
.service-card:hover *{color:#fff!important}
.service-icon{
  font-size:2rem;margin-bottom:20px;color:var(--accent);
  transition:color var(--transition);
}
.service-title{font-size:1.2rem;font-weight:700;margin-bottom:10px}
.service-text{color:var(--text2);font-size:.9rem;line-height:1.6}

/* ========================================
   PORTFOLIO / PROJECTS
======================================== */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto;
  gap:16px;
}
.portfolio-item{
  overflow:hidden;border-radius:var(--radius-lg);
  position:relative;background:var(--bg2);cursor:pointer;
}
.portfolio-item:nth-child(1){grid-column:span 7;grid-row:span 2;min-height:480px}
.portfolio-item:nth-child(2){grid-column:span 5;min-height:230px}
.portfolio-item:nth-child(3){grid-column:span 5;min-height:230px}
.portfolio-item:nth-child(4){grid-column:span 4;min-height:300px}
.portfolio-item:nth-child(5){grid-column:span 4;min-height:300px}
.portfolio-item:nth-child(6){grid-column:span 4;min-height:300px}
.portfolio-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.portfolio-item:hover img{transform:scale(1.06)}
.portfolio-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  display:flex;align-items:flex-end;padding:24px;
  opacity:0;transition:opacity var(--transition);
}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-info{color:#fff}
.portfolio-info h4{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.portfolio-info p{font-size:.85rem;opacity:.8}

/* ========================================
   TESTIMONIALS
======================================== */
.testimonials-section{background:var(--bg2)}
.testimonials-slider{position:relative;overflow:hidden}
.testimonials-track{display:flex;gap:24px;transition:transform .4s ease}
.testimonial-card{
  min-width:calc(33.333% - 16px);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;flex-shrink:0;
}
.testimonial-quote{
  font-size:3rem;font-family:Georgia,serif;color:var(--accent);
  line-height:1;margin-bottom:16px;
}
.testimonial-text{color:var(--text2);line-height:1.7;margin-bottom:24px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:14px}
.testimonial-avatar{
  width:48px;height:48px;border-radius:50%;overflow:hidden;
  background:var(--bg2);flex-shrink:0;
}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-name{font-weight:700;font-size:.95rem}
.testimonial-role{font-size:.8rem;color:var(--text3);margin-top:2px}
.testimonials-nav{
  display:flex;justify-content:center;gap:8px;margin-top:32px;
}

/* ========================================
   FAQ
======================================== */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color var(--transition);
}
.faq-item.open{border-color:var(--accent)}
.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;background:none;border:none;
  text-align:left;font-size:1rem;font-weight:700;color:var(--text);
  cursor:pointer;transition:color var(--transition);
}
.faq-question:hover{color:var(--accent)}
.faq-item.open .faq-question{color:var(--accent)}
.faq-icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg2);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all var(--transition);
  font-size:.85rem;color:var(--text2);
}
.faq-item.open .faq-icon{background:var(--accent);color:#fff;transform:rotate(45deg)}
.faq-answer{
  padding:0 24px;max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
}
.faq-item.open .faq-answer{padding:0 24px 20px;max-height:300px}
.faq-answer p{color:var(--text2);line-height:1.7}

/* ========================================
   CTA SECTION
======================================== */
.cta-section{ text-align:center;
  background:var(--accent);color:#fff;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  top:-60px;right:-60px;width:300px;height:300px;
  border-radius:50%;background:rgba(255,255,255,.08);
}
.cta-section::after{
  content:'';position:absolute;
  bottom:-80px;left:10%;width:200px;height:200px;
  border-radius:50%;background:rgba(255,255,255,.06);
}
.cta-content{position:relative;z-index:1;max-width:700px;margin:0 auto;text-align:center}
.cta-content h2{color:#fff;margin-bottom:16px}
.cta-content p{opacity:.9;font-size:1.05rem;margin-bottom:32px}

/* ========================================
   BRANDS / PARTNERS
======================================== */
.brands-section{background:var(--surface2);padding:48px 0}
.brands-track{
  display:flex;gap:40px;overflow:hidden;
}
.brands-list{
  display:flex;gap:40px;align-items:center;
  animation:scroll-brands 20s linear infinite;
  flex-shrink:0;
}
.brands-list img{
  height:48px;width:auto;opacity:.5;
  filter:grayscale(1);transition:all var(--transition);
}
.brands-list img:hover{opacity:1;filter:none}
@keyframes scroll-brands{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}

/* ========================================
   CONTACT SECTION
======================================== */
.contact-section{background:var(--surface2)}
.contact-grid{
  display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:start;
}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.contact-item__icon{
  width:48px;height:48px;border-radius:var(--radius);
  background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.1rem;
}
.contact-item__label{font-size:.78rem;color:var(--text3);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.contact-item__value{font-weight:600;font-size:.95rem}
.map-embed{
  margin-top:24px;border-radius:var(--radius-lg);overflow:hidden;
  height:220px;background:var(--bg2);
}
.map-embed iframe{width:100%;height:100%;border:0}

/* ========================================
   CONTACT FORM
======================================== */
.contact-form-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:40px;
}
.form-title{font-size:1.4rem;font-weight:700;margin-bottom:8px}
.form-subtitle{color:var(--text2);font-size:.9rem;margin-bottom:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-label{font-size:.85rem;font-weight:600;color:var(--text2)}
.form-label .req{color:var(--accent)}
.form-input,.form-textarea,.form-select{
  width:100%;padding:12px 16px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-size:.9rem;font-family:var(--font-body);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,93,4,.12);
}
.form-input.error,.form-textarea.error{border-color:#ef4444}
.form-error{font-size:.78rem;color:#ef4444;margin-top:4px}
.form-textarea{resize:vertical;min-height:120px}
.form-success{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;padding:40px;text-align:center;
}
.form-success__icon{font-size:3rem;color:var(--accent)}
.form-success h3{font-size:1.4rem}
.form-success p{color:var(--text2)}

/* ========================================
   MODAL
======================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;transition:all .25s ease;
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{
  background:var(--surface);border-radius:var(--radius-lg);
  width:100%;max-width:520px;max-height:90vh;
  overflow-y:auto;padding:40px;position:relative;
  transform:scale(.95) translateY(20px);
  transition:transform .25s ease;
  box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:all var(--transition);font-size:1rem;
}
.modal-close:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.modal-title{font-size:1.6rem;margin-bottom:6px}
.modal-subtitle{color:var(--text2);font-size:.9rem;margin-bottom:24px}

/* ========================================
   MINI CART POPUP
======================================== */

/* ========================================
   FOOTER
======================================== */
.site-footer{
  background:var(--bg2);border-top:1px solid var(--border);
  padding:56px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:40px;
  margin-bottom:40px;
}
.footer-brand{ min-width:0; }
.footer-brand .site-logo{display:inline-flex;margin-bottom:14px}
.footer-desc{color:var(--text2);font-size:.875rem;line-height:1.7;margin-bottom:18px;margin-top:0}
.footer-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
.footer-socials a{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);transition:all var(--transition);
  flex-shrink:0;
}
.footer-socials a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.footer-socials a .bm-icon{display:block;width:18px;height:18px}
.footer-title{
  font-family:var(--font-head);
  font-size:.75rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);margin-bottom:16px;margin-top:0;
}
.footer-links{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.footer-links a{
  color:var(--text2);font-size:.875rem;
  text-decoration:none;transition:color var(--transition);
}
.footer-links a:hover{color:var(--accent)}
.footer-contacts{display:flex;flex-direction:column;gap:12px}
.footer-contact-item{
  display:flex;gap:10px;align-items:flex-start;
  color:var(--text2);font-size:.875rem;line-height:1.5;
}
.footer-contact-item .bm-icon{color:var(--accent);flex-shrink:0;margin-top:2px}
.footer-bottom{
  border-top:1px solid var(--border);padding:18px 0;
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--text3);flex-wrap:wrap;gap:8px;
}
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:32px}
  .footer-grid>div:last-child{grid-column:1/-1}
}
@media(max-width:640px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;text-align:center;gap:6px}
}
@media(max-width:400px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
}

/* ========================================
   BACK TO TOP
======================================== */
.back-to-top{
  position:fixed;bottom:24px;right:24px;z-index:900;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;
  border:none;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;box-shadow:0 4px 14px rgba(232,93,4,.4);
  opacity:0;visibility:hidden;transform:translateY(20px);
  transition:all var(--transition);
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(232,93,4,.5)}

/* ========================================
   CHAT WIDGET
======================================== */
.chat-widget{position:fixed;bottom:24px;left:24px;z-index:900}
.chat-btn{
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;box-shadow:0 4px 20px rgba(232,93,4,.4);
  cursor:pointer;transition:all var(--transition);
  position:relative;
}
.chat-btn:hover{transform:scale(1.1)}
.chat-btn::before{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--accent);opacity:.4;
  animation:pulse-ring 2s ease infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.4}
  100%{transform:scale(1.5);opacity:0}
}
.chat-window{
  position:absolute;bottom:70px;left:0;
  width:340px;height:480px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  transform:scale(.9) translateY(20px);
  opacity:0;visibility:hidden;transition:all .25s ease;
  transform-origin:bottom left;
}
.chat-window.open{transform:scale(1) translateY(0);opacity:1;visibility:visible}
.chat-header{
  padding:14px 18px;background:var(--accent);color:#fff;
  display:flex;align-items:center;gap:12px;
}
.chat-header__avatar{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.chat-header__name{font-weight:700;font-size:.95rem}
.chat-header__status{font-size:.75rem;opacity:.85}
.chat-header__close{
  margin-left:auto;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.2);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.9rem;
}
.chat-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
}
.chat-msg{display:flex;flex-direction:column;gap:4px}
.chat-msg.user{align-items:flex-end}
.chat-msg.bot{align-items:flex-start}
.chat-bubble{
  max-width:80%;padding:10px 14px;border-radius:12px;
  font-size:.875rem;line-height:1.5;
}
.chat-msg.bot .chat-bubble{
  background:var(--bg2);color:var(--text);
  border-bottom-left-radius:4px;
}
.chat-msg.user .chat-bubble{
  background:var(--accent);color:#fff;
  border-bottom-right-radius:4px;
}
.chat-time{font-size:.7rem;color:var(--text3)}
.chat-typing{display:flex;gap:4px;padding:10px 14px;background:var(--bg2);border-radius:12px;width:fit-content}
.chat-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--text3);
  animation:typing .8s ease infinite;
}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
.chat-input-area{
  padding:12px 16px;border-top:1px solid var(--border);
  display:flex;gap:8px;
}
.chat-input{
  flex:1;padding:10px 14px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:100px;font-size:.875rem;color:var(--text);
  transition:border-color var(--transition);
}
.chat-input:focus{outline:none;border-color:var(--accent)}
.chat-send{
  width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);font-size:.9rem;
}
.chat-send:hover{background:var(--accent2)}

/* ========================================
   SHOP - ARCHIVE / CATALOG
======================================== */
.shop-layout{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}
.shop-sidebar{
  position:sticky;top:calc(var(--header-h) + 16px);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
}
.sidebar-section{border-bottom:1px solid var(--border)}
.sidebar-section:last-child{border-bottom:none}
.sidebar-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;background:none;border:none;
  font-size:.9rem;font-weight:700;color:var(--text);cursor:pointer;
}
.sidebar-toggle .arrow{
  font-size:.75rem;color:var(--text3);transition:transform var(--transition);
}
.sidebar-toggle.open .arrow{transform:rotate(180deg)}
.sidebar-body{padding:0 20px 16px;display:none}
.sidebar-body.open{display:block}
.sidebar-search{
  width:100%;padding:9px 14px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius);color:var(--text);
  font-size:.875rem;margin-bottom:12px;
}
.sidebar-search:focus{outline:none;border-color:var(--accent)}
.filter-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}
.filter-item{display:flex;align-items:center;gap:10px;cursor:pointer}
.filter-item input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);cursor:pointer;
}
.filter-label{font-size:.875rem;color:var(--text2);flex:1}
.filter-count{font-size:.75rem;color:var(--text3)}
.price-range{padding-top:4px}
.price-inputs{display:flex;gap:10px;margin-bottom:12px}
.price-input{
  flex:1;padding:8px 10px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius);font-size:.85rem;color:var(--text);
  text-align:center;
}
.price-input:focus{outline:none;border-color:var(--accent)}
input[type="range"]{
  width:100%;accent-color:var(--accent);cursor:pointer;
}
.active-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 20px;border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.active-filter-tag{
  display:flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:100px;
  background:var(--accent-light);color:var(--accent);
  font-size:.78rem;font-weight:600;
}
.active-filter-tag button{
  background:none;border:none;color:inherit;padding:0;font-size:.8rem;
}
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:24px;flex-wrap:wrap;
}
.shop-count{font-size:.875rem;color:var(--text2)}
.shop-sort select{
  padding:8px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:.875rem;color:var(--text);cursor:pointer;
}
.shop-sort select:focus{outline:none;border-color:var(--accent)}
.shop-view{display:flex;gap:4px}
.view-btn{
  width:36px;height:36px;border-radius:var(--radius);
  background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);transition:all var(--transition);font-size:.9rem;
}
.view-btn.active,.view-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.products-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;
}


.pagination{
  display:flex;justify-content:center;gap:6px;margin-top:40px;
}
.page-btn{
  width:40px;height:40px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.875rem;color:var(--text2);transition:all var(--transition);
}
.page-btn.active,.page-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ========================================
   SINGLE PRODUCT
======================================== */
.single-product-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.product-gallery{position:sticky;top:calc(var(--header-h) + 16px)}
.gallery-main{
  aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface2);border:1px solid var(--border);
  position:relative;cursor:zoom-in;
}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-zoom{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:.85rem;
  transition:all var(--transition);
}
.gallery-zoom:hover{background:var(--accent);color:#fff}
.gallery-thumbs{
  display:flex;gap:10px;margin-top:12px;overflow-x:auto;
  scrollbar-width:none;
}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumb{
  width:72px;height:72px;flex-shrink:0;
  border-radius:var(--radius);overflow:hidden;
  border:2px solid var(--border);cursor:pointer;
  background:var(--bg2);transition:border-color var(--transition);
}
.gallery-thumb.active,.gallery-thumb:hover{border-color:var(--accent)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.product-info{}
.product-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--text3);margin-bottom:16px;
}
.product-breadcrumb a:hover{color:var(--accent)}
.product-badges{display:flex;gap:8px;margin-bottom:16px}
.product-title{
  font-family:var(--font-body);font-size:1.8rem;font-weight:800;
  line-height:1.3;margin-bottom:12px;
}
.product-sku{font-size:.8rem;color:var(--text3);margin-bottom:16px}
.product-rating{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);margin-bottom:20px;
}
.product-price{
  margin:20px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.product-price .price{font-size:2rem}
.product-short-desc{color:var(--text2);font-size:.9rem;line-height:1.7;margin-bottom:24px}
/* Variable product */
.variations-table{width:100%;margin-bottom:20px}
.variations-row{margin-bottom:16px}
.variations-label{
  font-size:.85rem;font-weight:700;color:var(--text2);
  margin-bottom:8px;display:block;
}
.variations-options{display:flex;flex-wrap:wrap;gap:8px}
.variation-btn{
  padding:7px 16px;border-radius:var(--radius);
  background:var(--bg2);border:1.5px solid var(--border);
  font-size:.85rem;font-weight:600;color:var(--text);
  cursor:pointer;transition:all var(--transition);
}
.variation-btn:hover,.variation-btn.selected{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.variation-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.swatch{width:32px;height:32px;border-radius:50%;padding:0;border:2px solid transparent}
.swatch.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.quantity-wrap{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.qty-control{
  display:flex;align-items:center;gap:0;
  border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.qty-btn{
  width:40px;height:44px;background:var(--bg2);border:none;
  color:var(--text2);font-size:1.1rem;cursor:pointer;
  transition:all var(--transition);
}
.qty-btn:hover{background:var(--accent);color:#fff}
.qty-input{
  width:56px;height:44px;border:none;border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  text-align:center;font-size:1rem;font-weight:700;
  background:var(--surface);color:var(--text);
}
.qty-input:focus{outline:none}
.add-to-cart-wrap{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.add-to-cart-wrap .btn{flex:1}
.product-meta{
  padding:20px 0;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;
  font-size:.85rem;
}
.product-meta span{color:var(--text2)}
.product-meta a{color:var(--text);font-weight:600}
.product-meta a:hover{color:var(--accent)}
.product-share{display:flex;align-items:center;gap:10px;margin-top:8px}
.product-share-label{font-size:.82rem;color:var(--text3);font-weight:600}
.product-share a{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:.85rem;
  transition:all var(--transition);
}
.product-share a:hover{background:var(--accent);color:#fff}

/* Product tabs */
.product-tabs{margin-top:48px}
.tabs-nav{
  display:flex;border-bottom:2px solid var(--border);
  margin-bottom:32px;gap:0;
}
.tab-btn{
  padding:12px 24px;background:none;border:none;
  font-size:.9rem;font-weight:700;color:var(--text2);
  cursor:pointer;position:relative;transition:color var(--transition);
}
.tab-btn::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:var(--accent);transform:scaleX(0);transition:transform var(--transition);
}
.tab-btn.active{color:var(--accent)}
.tab-btn.active::after{transform:scaleX(1)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* Attributes table */
.attr-table{width:100%;border-collapse:collapse}
.attr-table tr{border-bottom:1px solid var(--border)}
.attr-table th,.attr-table td{
  padding:12px 16px;text-align:left;font-size:.9rem;
}
.attr-table th{
  background:var(--bg2);font-weight:700;color:var(--text2);width:35%;
}
.attr-table td{color:var(--text)}

/* ========================================
   CART PAGE
======================================== */
.cart-row{border-bottom:1px solid var(--border)}
.cart-row td{padding:20px 16px;vertical-align:middle}
.coupon-input:focus{outline:none;border-color:var(--accent)}

/* ========================================
   CHECKOUT
======================================== */
.order-item:last-of-type{border-bottom:none}
.payment-methods{display:flex;flex-direction:column;gap:10px}
.payment-method{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:1.5px solid var(--border);
  border-radius:var(--radius);cursor:pointer;transition:border-color var(--transition);
}
.payment-method:has(input:checked){border-color:var(--accent);background:var(--accent-light)}
.payment-method input{accent-color:var(--accent)}

/* ========================================
   ORDER SUCCESS
======================================== */
.order-success{
  text-align:center;padding:80px 24px;max-width:600px;margin:0 auto;
}
.order-success__icon{
  font-size:5rem;color:var(--accent);margin-bottom:24px;
  animation:bounce-in .6s ease;
}
@keyframes bounce-in{
  0%{transform:scale(0)}
  70%{transform:scale(1.15)}
  100%{transform:scale(1)}
}

/* ========================================
   CONTACT PAGE
======================================== */
.contact-page-hero{
  padding:80px 0;background:var(--bg2);
  text-align:center;position:relative;overflow:hidden;
}
.contact-page-hero::before{
  content:'';position:absolute;top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(ellipse at center,var(--accent-light) 0%,transparent 60%);
  opacity:.4;pointer-events:none;
}
.contact-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;margin-bottom:60px;
}
.contact-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px;text-align:center;
  transition:all var(--transition);
}
.contact-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.contact-card__icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin:0 auto 16px;
}
.contact-card__title{font-weight:700;margin-bottom:8px}
.contact-card__value{color:var(--text2);font-size:.9rem}

/* ========================================
   SKELETON LOADING
======================================== */
.skeleton{
  background:linear-gradient(90deg,var(--skeleton-from) 25%,var(--skeleton-to) 50%,var(--skeleton-from) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s infinite;
  border-radius:var(--radius);
}
@keyframes skeleton-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
}
.skeleton-img{aspect-ratio:1}
.skeleton-line{height:14px;margin-bottom:8px}
.skeleton-line.sm{height:10px;width:60%}
.skeleton-line.lg{height:20px;width:80%}

/* ========================================
   ANIMATIONS
======================================== */
[data-aos]{opacity:0;transition:opacity .6s ease,transform .6s ease}
[data-aos="fade-up"]{transform:translateY(30px)}
[data-aos="fade-right"]{transform:translateX(-30px)}
[data-aos="fade-left"]{transform:translateX(30px)}
[data-aos="zoom-in"]{transform:scale(.9)}
[data-aos].aos-animate{opacity:1;transform:none}

/* ========================================
   LAZY LOADING
======================================== */
img.lazy{opacity:0;transition:opacity .4s ease}
img.lazy.loaded{opacity:1}

/* ========================================
   WP CLASSES
======================================== */
.screen-reader-text{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}
.aligncenter{margin:0 auto;display:block}
.alignleft{float:left;margin:0 16px 16px 0}
.alignright{float:right;margin:0 0 16px 16px}
.wp-block-image{margin-bottom:1rem}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;
  font-size:.9rem;display:flex;align-items:center;gap:10px;
}
.woocommerce-message{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.woocommerce-info{background:#dbeafe;color:#1e3a8a;border:1px solid #bfdbfe}
.woocommerce-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.woocommerce-notices-wrapper{margin-bottom:20px}

/* ========================================
   RESPONSIVE
======================================== */
@media(max-width:1200px){
  /* footer-grid responsive: see footer block */
  .about-grid{gap:48px}
  .portfolio-item:nth-child(1){grid-column:span 12;min-height:380px}
  .portfolio-item:nth-child(2),.portfolio-item:nth-child(3){grid-column:span 6}
  .portfolio-item:nth-child(4),.portfolio-item:nth-child(5),.portfolio-item:nth-child(6){grid-column:span 4}
}
@media(max-width:1024px){
  .shop-layout{grid-template-columns:1fr}
  .shop-sidebar{position:static}
  .primary-nav{display:none}
  .single-product-layout{grid-template-columns:1fr}
  .product-gallery{position:static}
        .contact-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .section{padding:56px 0}
  .hero{min-height:auto;padding:80px 0 60px}
  .hero__image{display:none}
  .about-grid{grid-template-columns:1fr}
  .about-img__accent{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  /* footer-grid responsive: see footer block */
  .testimonials-track .testimonial-card{min-width:100%}
  .contact-form-wrap{padding:24px}
  .modal{padding:24px}
  .chat-window{width:calc(100vw - 32px)}
    .hero__stats{gap:24px}
  .hero__actions{flex-direction:column;align-items:stretch}
}
@media(max-width:480px){
  :root{--header-h:60px}
  .container{padding:0 16px}
  .product-card__footer{flex-direction:column}
  .add-to-cart-wrap{flex-direction:column}
  .header-phone{display:none}
  .header-socials{display:none}
}

/* ========================================
   PRINT
======================================== */
@media print{
  .site-header,.site-footer,.back-to-top,.chat-widget{display:none}
  body{color:#000;background:#fff}
}

/* ========================================
   FIX PATCH v1.1
======================================== */

/* ── Product card title: force fixed size after AJAX load ── */
.product-card__title,
.product-card__title a,
#home-products .product-card__title,
#products-grid .product-card__title {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--text) !important;
  margin-bottom: 8px;
}
.product-card__title a { color: var(--text) !important; text-decoration: none; }
.product-card__title a:hover { color: var(--accent) !important; }

/* ── Gallery navigation arrows ── */
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  border: 1.5px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  z-index: 3;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.gallery-nav-btn--prev { left: 10px; }
.gallery-nav-btn--next { right: 10px; }
.gallery-nav-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="dark"] .gallery-nav-btn { background: rgba(30,30,30,.88); color: #fff; }

/* ── Gallery main image transitions ── */
.gallery-main {
  cursor: zoom-in;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg2);
}
#gallery-main-img { transition: opacity .18s ease, transform .18s ease; display: block; width: 100%; }

/* ── Reviews ── */
.reviews-wrap { max-width: 820px; }

.reviews-summary {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.reviews-avg {
  text-align: center;
  min-width: 100px;
}
.reviews-avg__num {
  font-family: var(--font-head);
  font-size: 3rem;
  line-height: 1;
  color: var(--text);
  margin-bottom: 6px;
}
.reviews-avg .stars { color: #f59e0b; font-size: 1.2rem; display: block; margin-bottom: 4px; }
.reviews-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.reviews-bar-row { display: flex; align-items: center; gap: 10px; }
.reviews-bar-label { font-size: .8rem; color: var(--text3); width: 28px; text-align: right; flex-shrink: 0; }
.reviews-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.reviews-bar-fill { height: 100%; background: #f59e0b; border-radius: 99px; transition: width .4s ease; }
.reviews-bar-cnt { font-size: .78rem; color: var(--text3); width: 20px; }

.reviews-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.review-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  transition: box-shadow var(--transition);
}
.review-item:hover { box-shadow: var(--shadow); }
.review-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg2); }
.review-avatar img, .review-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.review-author { font-size: .95rem; font-weight: 700; color: var(--text); }
.review-date { font-size: .78rem; color: var(--text3); }
.review-body { color: var(--text2); font-size: .92rem; line-height: 1.7; }
.review-body p { margin: 0; }

/* ── Review form ── */
.review-form-wrap { padding-top: 28px; border-top: 1px solid var(--border); }
.review-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }

/* Star rating input */
.star-rating-input {
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  width: fit-content;
}
.star-label {
  font-size: 2rem;
  color: var(--border2);
  cursor: pointer;
  transition: color .12s;
  line-height: 1;
  user-select: none;
}
.star-label:hover,
.star-label:hover ~ .star-label { color: #f59e0b; }
.star-rating-input input:checked ~ label { color: #f59e0b; }

/* ── Contact page cards ── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  transition: all var(--transition);
}
.contact-card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.contact-card__icon {
  width: 52px; height: 52px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 14px;
}
.contact-card__title { font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.contact-card__value { color: var(--text2); font-size: .95rem; text-decoration: none; word-break: break-word; }
a.contact-card__value:hover { color: var(--accent); }

/* ── Order success ── */
.order-success {
  max-width: 620px;
  margin: 60px auto;
  text-align: center;
}
.order-success__icon {
  font-size: 5rem;
  color: #22c55e;
  margin-bottom: 20px;
  display: block;
  animation: successPop .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Contact grid ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-page-hero { padding: 60px 0 40px; text-align: center; }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── No products message in grid ── */
.no-products { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--text3); }

/* ── Skeleton cards ── */
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.skeleton { background: linear-gradient(90deg, var(--bg2) 25%, var(--border) 50%, var(--bg2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; }
.skeleton-img { aspect-ratio: 1; width: 100%; }
.skeleton-line { height: 14px; }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ── Responsive fixes ── */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .reviews-summary { flex-direction: column; gap: 16px; }
  .gallery-nav-btn { width: 34px; height: 34px; font-size: .8rem; }
}

/* ═══════════════════════════════════════════
   BLOG / ARCHIVE
═══════════════════════════════════════════ */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.post-card__img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg2);
}
.post-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.post-card:hover .post-card__img img { transform: scale(1.05); }
.post-card__body { padding: 22px; }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.post-card__date { font-size: .78rem; color: var(--text3); }
.post-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
}
.post-card__title a { color: var(--text); }
.post-card__title a:hover { color: var(--accent); }
.post-card__excerpt { font-size: .88rem; color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  font-size: .8rem;
  color: var(--text3);
}

/* ── Post pagination ── */
.blog-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}
.blog-pagination a,
.blog-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 700;
  font-size: .88rem;
  border: 1px solid var(--border);
  transition: all var(--transition);
  color: var(--text2);
}
.blog-pagination a:hover,
.blog-pagination .current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ═══════════════════════════════════════════
   SIDEBAR WIDGETS
═══════════════════════════════════════════ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
}
.widget__title,
.widget-title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

/* ═══════════════════════════════════════════
   SEARCH FORM
═══════════════════════════════════════════ */
.search-form__wrap {
  display: flex;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.search-form__wrap:focus-within { border-color: var(--accent); }
.search-form__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 16px;
  font-size: .95rem;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.search-form__input::placeholder { color: var(--text3); }
.search-form__btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0 18px;
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--transition);
  flex-shrink: 0;
}
.search-form__btn:hover { background: var(--accent-dark, #c44f03); }

/* ═══════════════════════════════════════════
   COMMENTS
═══════════════════════════════════════════ */
.comments-area { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.comments-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 28px;
}
.comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.comment-list ol { list-style: none; padding-left: 24px; margin: 0; }
.comment-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: none; }
.comment-body { display: flex; gap: 16px; align-items: flex-start; }
.comment-author-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.comment-content { flex: 1; min-width: 0; }
.comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.comment-author { font-weight: 700; font-size: .95rem; }
.comment-author a { color: var(--text); }
.comment-date { font-size: .78rem; color: var(--text3); }
.comment-reply a {
  font-size: .78rem;
  color: var(--accent);
  font-weight: 600;
}
.comment-text { font-size: .9rem; line-height: 1.7; color: var(--text2); }
.comment-text p { margin: 0 0 10px; }
.comment-text p:last-child { margin-bottom: 0; }

/* Comment form */
.comment-respond { margin-top: 32px; }
.comment-reply-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 24px; }
.comment-reply-title small { font-size: .75rem; font-weight: 400; }
.comment-reply-title small a { color: var(--accent); }
.comment-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.comment-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.comment-field label { font-size: .85rem; font-weight: 600; color: var(--text2); }
.comment-field label span { color: var(--accent); }
.comment-input,
.comment-textarea {
  padding: 12px 14px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  transition: border-color var(--transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.comment-input:focus, .comment-textarea:focus { border-color: var(--accent); }
.comment-textarea { resize: vertical; min-height: 120px; }
.comment-form-submit { margin-top: 20px; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--text3); margin: 16px 0; }

/* No comments */
.no-comments { color: var(--text3); padding: 24px 0; }
.comments-locked { color: var(--text3); padding: 16px; border-radius: var(--radius); background: var(--bg2); }

/* ═══════════════════════════════════════════
   WOO MY ACCOUNT
═══════════════════════════════════════════ */
.account-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 90px;
}
.account-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--text2);
  font-size: .9rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  transition: all var(--transition);
}
.account-nav a:last-child { border-bottom: none; }
.account-nav a:hover,
.account-nav a.is-active {
  background: var(--accent-light, rgba(232,93,4,.08));
  color: var(--accent);
}
.account-nav a i { width: 18px; text-align: center; }
.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}
.account-card__title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-card__title i { color: var(--accent); }
/* Orders table */
.orders-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.orders-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg2);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.orders-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text2); }
.orders-table tr:last-child td { border-bottom: none; }
.orders-table tr:hover td { background: var(--bg2); }
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-processing { background: rgba(59,130,246,.12); color: #3b82f6; }
.status-completed  { background: rgba(34,197,94,.12);  color: #22c55e; }
.status-cancelled  { background: rgba(239,68,68,.12);  color: #ef4444; }
.status-on-hold    { background: rgba(245,158,11,.12); color: #f59e0b; }
.status-pending    { background: rgba(107,114,128,.12);color: #6b7280; }

/* ═══════════════════════════════════════════
   RESPONSIVE — BLOG + SIDEBAR
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .comment-fields-row { grid-template-columns: 1fr; }
  .account-nav { position: static; }
}

/* ═══════════════════════════════════════════
   MINI CART — повний редизайн
═══════════════════════════════════════════ */
.mini-cart-popup {
  position: fixed;
  top: 0; right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 9990;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
}
.mini-cart-popup.open { transform: translateX(0); }
.mini-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.mini-cart-head h3 {
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.mini-cart-head h3 i { color: var(--accent); }
#mini-cart-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: var(--text2);
  transition: all var(--transition);
}
#mini-cart-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Items area */
.mini-cart-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mini-cart-items { padding: 8px 0; }
.mini-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background var(--transition);
}
.mini-cart-item:last-child { border-bottom: none; }
.mini-cart-item:hover { background: var(--bg2); }
.mini-cart-item__img {
  width: 64px; height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.mini-cart-item__img img {
  width: 100%; height: 100%; object-fit: cover;
}
.mini-cart-item__info { flex: 1; min-width: 0; padding-right: 28px; }
.mini-cart-item__title {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-cart-item__title:hover { color: var(--accent); }
.mini-cart-item__meta {
  font-size: .74rem;
  color: var(--text3);
  margin-bottom: 6px;
}
.mini-cart-item__meta span + span::before { content: ', '; }
.mini-cart-item__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mini-cart-item__qty { font-size: .8rem; color: var(--text3); }
.mini-cart-item__price { font-size: .95rem; font-weight: 800; color: var(--accent); }

/* Remove button */
.mini-cart-remove {
  position: absolute;
  top: 14px; right: 16px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  transition: all var(--transition);
  padding: 0;
}
.mini-cart-remove:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

/* Empty state */
.mini-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 240px;
  padding: 32px;
  text-align: center;
  color: var(--text3);
}
.mini-cart-empty .icon { font-size: 3.5rem; margin-bottom: 14px; opacity: .3; }
.mini-cart-empty p { font-size: .95rem; margin-bottom: 16px; }

/* Footer */
.mini-cart-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mini-cart-total span { font-size: .9rem; color: var(--text2); }
.mini-cart-total-price { font-size: 1.2rem; font-weight: 900; color: var(--accent); }
.mini-cart-foot .btn { text-align: center; }

/* cart + checkout → see final WC override section below */

/* ═══════════════════════════════════════════
   FIX: PRODUCT CARD FOOTER — кнопка перегляду
═══════════════════════════════════════════ */
.product-card__footer {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Кнопка "Купити" займає весь доступний простір */
.product-card__footer .add-to-cart-btn {
  flex: 1;
}
/* Кнопка перегляду — фіксованого розміру, НЕ розтягується */
.product-card__footer .view-btn-link {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: all var(--transition);
}
.product-card__footer .view-btn-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light, rgba(232,93,4,.07));
}

/* ═══════════════════════════════════════════
   FIX: LIST VIEW — повноцінний дизайн
═══════════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
/* List mode overrides */
.products-list {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.products-list .product-card {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 0;
}
.products-list .product-card__img {
  width: 180px;
  height: 160px;
  aspect-ratio: auto;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  flex-shrink: 0;
}
.products-list .product-card__img img {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.products-list .product-card__body {
  padding: 16px 20px;
  flex: 1;
}
.products-list .product-card__title { font-size: 1rem; }
.products-list .product-card__footer {
  padding: 16px 16px 16px 0;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 160px;
  border-top: none;
  border-left: 1px solid var(--border);
}
.products-list .product-card__footer .add-to-cart-btn,
.products-list .product-card__footer .view-btn-link {
  width: 100%;
  justify-content: center;
}
.products-list .product-card__footer .view-btn-link {
  width: 100%;
  height: 36px;
  border-radius: var(--radius);
  font-size: .85rem;
}
.products-list .product-card__footer .view-btn-link::after {
  content: ' Переглянути';
  font-size: .82rem;
  font-weight: 600;
}
/* Hide badges in list mode for cleaner look */
.products-list .product-card__wishlist { display: flex; top: 8px; right: 8px; }

@media (max-width: 640px) {
  .products-list .product-card {
    grid-template-columns: 120px 1fr;
    grid-template-rows: 1fr auto;
  }
  .products-list .product-card__img { width: 120px; height: 120px; grid-row: 1 / 3; }
  .products-list .product-card__footer {
    grid-column: 2;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    padding: 10px 12px;
    min-width: auto;
  }
  .products-list .product-card__footer .view-btn-link::after { content: ''; }
}

/* ═══════════════════════════════════════════════════════════
   ВИПРАВЛЕННЯ v1.2
   1. Hero stats
   2. Reset filters (CSS)
   3. List view — повний перепис
   4. Product card footer + eye button
   5. Відгуки — ширина
   6. CTA кнопки
   7. Cart/Checkout дизайн
═══════════════════════════════════════════════════════════ */

/* ── 1. HERO STATS ────────────────────────────────────── */
.hero__stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__stat {
  flex: 1;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.hero__stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero__stat-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}
.hero__stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}
@media (max-width: 600px) {
  .hero__stats { flex-wrap: wrap; }
  .hero__stat { flex: 0 0 calc(50% - 12px); border-right: none; margin-right: 0; }
}

/* ── 3. LIST VIEW ─────────────────────────────────────── */
#products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
#products-grid.products-list {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
/* Card base: flex column (default) */
.product-card {
  display: flex;
  flex-direction: column;
}
/* List mode: flex row */
#products-grid.products-list .product-card {
  flex-direction: row;
  height: 170px;
  overflow: hidden;
}
#products-grid.products-list .product-card__img {
  width: 170px;
  min-width: 170px;
  height: 170px;
  aspect-ratio: unset;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
#products-grid.products-list .product-card__img img {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
#products-grid.products-list .product-card__body {
  flex: 1;
  padding: 14px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#products-grid.products-list .product-card__title {
  font-size: .9rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#products-grid.products-list .product-card__footer {
  flex-direction: column;
  width: 150px;
  min-width: 150px;
  border-top: none;
  border-left: 1px solid var(--border);
  padding: 12px;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
}
#products-grid.products-list .product-card__footer .add-to-cart-btn {
  width: 100%;
  justify-content: center;
  font-size: .82rem;
  padding: 9px 10px;
}
#products-grid.products-list .product-card__footer .view-btn-link {
  width: 100%;
  height: 34px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text2);
  border: 1.5px solid var(--border);
  background: var(--bg2);
  text-decoration: none;
  transition: all var(--transition);
}
#products-grid.products-list .product-card__footer .view-btn-link::after {
  content: 'Переглянути';
}
#products-grid.products-list .product-card__footer .view-btn-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#products-grid.products-list .product-card__wishlist { display: flex; top: 8px; right: 8px; }
@media (max-width: 580px) {
  #products-grid.products-list .product-card { height: auto; flex-direction: column; }
  #products-grid.products-list .product-card__img { width: 100%; min-width: 0; height: 180px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  #products-grid.products-list .product-card__footer { width: 100%; flex-direction: row; border-left: none; border-top: 1px solid var(--border); }
  #products-grid.products-list .product-card__footer .view-btn-link::after { content: ''; }
}

/* ── 4. PRODUCT CARD FOOTER + EYE BUTTON ─────────────── */
.product-card__footer {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  align-items: center;
  background: var(--surface);
}
.product-card__footer .add-to-cart-btn { flex: 1; }
/* Remove override from old rule */
.product-card__footer .btn { flex: unset; }
.product-card__footer .add-to-cart-btn.btn { flex: 1; }

.view-btn-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--bg2);
  color: var(--text3);
  font-size: .85rem;
  text-decoration: none;
  transition: all var(--transition);
}
.view-btn-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
}

/* ── 5. ВІДГУКИ — ширина карток ──────────────────────── */
.testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform .4s ease;
}
.testimonial-card {
  min-width: calc(33.333% - 16px);
  max-width: 400px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
@media (max-width: 1024px) {
  .testimonial-card { min-width: calc(50% - 12px); max-width: 500px; }
}
@media (max-width: 640px) {
  .testimonial-card { min-width: 100%; max-width: 100%; }
}

/* ── 6. CTA — видимість кнопок ───────────────────────── */
.cta-section .btn-white {
  background: #ffffff;
  color: #1a0a00 !important;
  border: 2px solid #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.cta-section .btn-white:hover {
  background: transparent;
  color: #ffffff !important;
}
.cta-section .btn-outline {
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,.6) !important;
  background: rgba(255,255,255,.1);
}
.cta-section .btn-outline:hover {
  border-color: #ffffff !important;
  background: rgba(255,255,255,.2) !important;
}

/* ── 7. CART ──────────────────────────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.cart-items-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cart-table-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  background: var(--bg2);
  border-bottom: 2px solid var(--border);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  font-weight: 700;
}
.cart-summary-col { position: sticky; top: calc(var(--header-h, 72px) + 20px); }
.cart-summary-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cart-summary-box__title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: .95rem;
}
.cart-summary-box__title i { color: var(--accent); }
.cart-summary-rows { padding: 4px 20px 0; }
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: .88rem;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.cart-summary-row:last-child { border-bottom: none; }
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg2);
  border-top: 2px solid var(--accent);
  font-weight: 800;
  font-size: 1.05rem;
}
.cart-summary-total .total-price { color: var(--accent); font-size: 1.3rem; }
.cart-summary-actions { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.cart-coupon-form { display: flex; gap: 8px; padding: 0 20px 16px; }
.cart-coupon-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface2, var(--bg2));
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .9rem;
  outline: none;
  font-family: inherit;
  transition: border-color var(--transition);
}
.cart-coupon-input:focus { border-color: var(--accent); }
@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary-col { position: static; }
  .cart-table-head { display: none; }
}

/* ── 8. CHECKOUT ──────────────────────────────────────── */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
.checkout-form-col { display: flex; flex-direction: column; gap: 20px; }
.checkout-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.checkout-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  font-weight: 800;
  font-size: .95rem;
}
.checkout-section__head i { color: var(--accent); }
.checkout-section__body { padding: 24px; }
.checkout-field { margin-bottom: 18px; }
.checkout-field:last-child { margin-bottom: 0; }
.checkout-field label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 7px;
}
.checkout-field .required { color: var(--accent); }
.checkout-input, .checkout-select, .checkout-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition), background var(--transition);
}
.checkout-input:focus, .checkout-select:focus, .checkout-textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.checkout-review-col { position: sticky; top: calc(var(--header-h, 72px) + 20px); }
.checkout-review-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.checkout-review-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  font-weight: 800;
  font-size: .95rem;
}
.checkout-review-title i { color: var(--accent); }
.checkout-review-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.checkout-review-item:last-child { border-bottom: none; }
.checkout-review-item__name { flex: 1; font-weight: 600; color: var(--text); }
.checkout-review-item__qty { color: var(--text3); font-size: .78rem; margin-top: 2px; }
.checkout-review-item__price { font-weight: 700; color: var(--accent); white-space: nowrap; }
.checkout-review-totals .checkout-review-item { color: var(--text2); }
.checkout-review-totals .checkout-review-item.is-total {
  background: var(--bg2);
  border-top: 2px solid var(--accent);
  font-weight: 800;
  font-size: 1rem;
}
.checkout-review-totals .checkout-review-item.is-total .checkout-review-item__price {
  color: var(--accent);
  font-size: 1.2rem;
}
.checkout-place-order { padding: 20px; }
.checkout-place-order .btn { width: 100%; justify-content: center; font-size: 1rem; padding: 15px; }
.wc_payment_methods { list-style: none; padding: 0; margin: 0; }
.wc_payment_methods li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.wc_payment_methods li:last-child { border-bottom: none; }
.wc_payment_methods label { font-weight: 600; cursor: pointer; font-size: .9rem; }
.payment_box {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg2);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text2);
  border-left: 3px solid var(--accent);
}
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-review-col { position: static; }
}

/* ═══════════════════════════════════════════════════════
   FIXES v1.3 — All issues fixed cleanly
═══════════════════════════════════════════════════════ */

/* ── 2. HERO STATS — light + dark readable ─────────── */
.hero__stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.hero__stat {
  flex: 1;
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid var(--border);
}
.hero__stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero__stat-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}
.hero__stat-label {
  font-size: .75rem;
  color: var(--text2);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
/* Dark hero background — white-tinted separators */
.hero .hero__stats { border-top-color: rgba(255,255,255,.15); }
.hero .hero__stat { border-right-color: rgba(255,255,255,.15); }
.hero .hero__stat-label { color: rgba(255,255,255,.65); }
@media (max-width: 600px) {
  .hero__stats { flex-wrap: wrap; gap: 20px; }
  .hero__stat { flex: 0 0 calc(50% - 10px); border-right: none; margin-right: 0; padding-right: 0; }
}

/* ── 5. PRODUCT CARD FOOTER — ВІДКРИТИ full-width ───── */
.product-card__footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  align-items: center;
}
/* Both buttons equal width */
.product-card__footer > * { flex: 1; }
.product-card__footer .add-to-cart-btn,
.product-card__footer .view-open-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
/* Remove old view-btn-link icon-only styles */
.view-btn-link { display: none !important; }

/* ── 6. PRODUCTS LIST VIEW ──────────────────────────── */
#products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
#products-grid.products-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#products-grid.products-list .product-card {
  display: grid !important;
  grid-template-columns: 180px 1fr 160px !important;
  height: 160px !important;
  overflow: hidden;
}
#products-grid.products-list .product-card__img {
  width: auto !important;
  height: 160px !important;
  aspect-ratio: unset !important;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}
#products-grid.products-list .product-card__img img {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}
#products-grid.products-list .product-card__body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden;
}
#products-grid.products-list .product-card__title {
  font-size: .9rem !important;
}
#products-grid.products-list .product-card__footer {
  flex-direction: column !important;
  padding: 12px !important;
  border-top: none !important;
  border-left: 1px solid var(--border) !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
}
#products-grid.products-list .product-card__footer > * {
  flex: none !important;
  width: 100% !important;
}
/* Mobile: back to column layout */
@media (max-width: 600px) {
  #products-grid.products-list .product-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    grid-template-columns: unset !important;
  }
  #products-grid.products-list .product-card__img {
    width: 100% !important;
    height: 180px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  #products-grid.products-list .product-card__img img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  #products-grid.products-list .product-card__body {
    justify-content: flex-start !important;
  }
  #products-grid.products-list .product-card__footer {
    flex-direction: row !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    padding: 10px 12px !important;
  }
}

/* ── WISHLIST BTN on single product ─────────────────── */
.add-to-cart-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}
.add-to-cart-wrap .flex-1 { flex: 1; }
.wishlist-btn {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: var(--radius);
}
.wishlist-btn.wishlist-active i,
.wishlist-btn[data-in-wishlist="1"] i { color: var(--accent) !important; }

/* ── WISHLIST grid in My Account ─────────────────────── */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

/* ── HERO STATS OVERRIDE for light themes ────────────── */
/* When hero background is light-colored override back */
[data-theme="light"] .hero .hero__stat-label { color: var(--text2); }
[data-theme="light"] .hero .hero__stats { border-top-color: var(--border); }
[data-theme="light"] .hero .hero__stat { border-right-color: var(--border); }

/* ═══════════════════════════════════════════════════════════════
   WC OVERRIDE — скидаємо дефолтні стилі WooCommerce
   cart / checkout form elements, payment, notices
═══════════════════════════════════════════════════════════════ */

/* ── WC global reset ──────────────────────────────────────── */
.woocommerce, .woocommerce-page { font-family: var(--font-body); color: var(--text); }

/* WC table reset */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table { border: none; border-radius: 0; width: 100%; }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { padding: 0; border: none; }
.woocommerce #content table.cart td.actions { border: none; background: none; padding: 0; }

/* WC form inputs (used by hooks like woocommerce_checkout_payment) */
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; float: none; width: 100%; }
.woocommerce form .form-row label { display: block; font-size: .78rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: .9rem;
  box-shadow: none; outline: none; transition: border-color var(--transition);
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--accent); background: var(--surface); }
.woocommerce form .form-row.woocommerce-validated .input-text { border-color: #22c55e; }
.woocommerce form .form-row.woocommerce-invalid  .input-text { border-color: #ef4444; }

/* Select2 dropdowns */
.woocommerce form .form-row .select2-container .select2-selection { height: 46px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg2); }
.woocommerce form .form-row .select2-container .select2-selection .select2-selection__rendered { line-height: 46px; color: var(--text); }
.woocommerce form .form-row .select2-container .select2-selection .select2-selection__arrow { height: 46px; }

/* WC notices (full override) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: var(--radius) !important;
  padding: 14px 18px !important;
  margin: 0 0 20px !important;
  color: var(--text) !important;
  list-style: none;
}
.woocommerce-error { border-left-color: #ef4444 !important; }
.woocommerce-message { border-left-color: #22c55e !important; }
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a { color: var(--accent); font-weight: 700; }

/* WC buttons override */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius); padding: 12px 24px;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  cursor: pointer; transition: background var(--transition);
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--accent2); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--accent); }

/* ── CHECKOUT — items + totals injected by template ─────── */
.checkout-items { border-bottom: 1px solid var(--border); }
.checkout-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: .88rem; }
.checkout-item:last-child { border-bottom: none; }
.checkout-item__img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; background: var(--bg2); }
.checkout-item__info { flex: 1; min-width: 0; }
.checkout-item__name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkout-item__qty { font-size: .78rem; color: var(--text3); margin-top: 2px; }
.checkout-item__price { font-weight: 700; color: var(--accent); white-space: nowrap; }

/* Checkout totals */
.checkout-totals { padding: 0 20px; }
.summary-line { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--text2); }
.summary-line:last-child { border-bottom: none; }
.summary-line--total { font-weight: 800; font-size: 1rem; color: var(--text); border-top: 2px solid var(--accent); padding-top: 14px; margin-top: 4px; }
.summary-total-price { color: var(--accent); font-size: 1.25rem; }
.summary-line--total .woocommerce-Price-amount { font-size: 1.25rem; font-weight: 800; color: var(--accent); }

/* WC payment methods (hook output) */
.woocommerce-checkout .payment_methods,
.wc_payment_methods { list-style: none; padding: 0; margin: 0; }
.woocommerce-checkout .payment_methods li,
.wc_payment_methods li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.woocommerce-checkout .payment_methods li:last-child,
.wc_payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout .payment_methods label,
.wc_payment_methods label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; font-size: .9rem; color: var(--text); }
.woocommerce-checkout .payment_methods input[type="radio"],
.wc_payment_methods input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.woocommerce-checkout .payment_box,
.payment_box { margin: 8px 0 4px 26px; padding: 12px 14px; background: var(--bg2); border-radius: var(--radius); font-size: .85rem; color: var(--text2); border-left: 3px solid var(--accent); }

/* Terms and conditions */
.woocommerce-terms-and-conditions-wrapper { padding: 16px 20px; font-size: .82rem; color: var(--text2); border-top: 1px solid var(--border); }
.woocommerce-terms-and-conditions-checkbox-text a { color: var(--accent); }

/* WC required star */
abbr.required, span.required { color: var(--accent) !important; text-decoration: none !important; }

/* Shipping methods */
.woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0; }
.woocommerce-shipping-methods li { padding: 10px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.woocommerce-shipping-methods li:last-child { border-bottom: none; }
.woocommerce-shipping-methods input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }

/* Coupon on checkout */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon { margin-bottom: 20px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.woocommerce-checkout .checkout_coupon input { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-family: inherit; font-size: .9rem; outline: none; }
.woocommerce-checkout .checkout_coupon input:focus { border-color: var(--accent); }

/* WC checkout layout override (WC injects col2-set etc) */
.woocommerce-checkout .col2-set { float: none; width: 100%; }
.woocommerce-checkout #order_review_heading { display: none; }

/* WC price */
.woocommerce-Price-amount bdi { font-weight: inherit; }
.woocommerce-Price-currencySymbol { font-size: .85em; }

/* burger CSS is defined in the v1.3 section above */

/* product-card wishlist CSS defined at line 441 */

/* ── ACCOUNT BLOCK ────────────────────────────────────── */
.account-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.account-block__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.account-block__head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

/* ── WISHLIST GRID ────────────────────────────────────── */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px; padding: 20px;
}

/* ── view-open-btn ────────────────────────────────────── */
.product-card__footer .view-open-btn {
  flex: 1; justify-content: center; text-align: center; font-size: .82rem;
}

/* ═══════════════════════════════════════════════════
   WC CART / CHECKOUT OVERRIDES
   Використовуємо !important де потрібно перекрити WC
═══════════════════════════════════════════════════ */

/* ── Override WC's table-based cart layout ──────── */
.woocommerce-cart .woocommerce { all: unset; display: block; }
.woocommerce-cart-form,
.woocommerce-cart-form table.cart { all: unset; display: block; width: 100%; }

/* Cart row — WC adds <tr> but our template uses divs — this is for WC fallback */
.woocommerce-page .cart_item td { border: none !important; padding: 0 !important; background: none !important; }

/* Override WC inputs on cart/checkout */
.woocommerce-cart .input-text,
.woocommerce-checkout .input-text,
.woocommerce-cart select,
.woocommerce-checkout select {
  background: var(--bg2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 11px 14px !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color var(--transition) !important;
}
.woocommerce-cart .input-text:focus,
.woocommerce-checkout .input-text:focus { border-color: var(--accent) !important; }

/* WC button override on cart/checkout */
.woocommerce-cart button[type="submit"],
.woocommerce-checkout button[type="submit"],
.woocommerce-cart .button,
.woocommerce-checkout .button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 11px 22px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  cursor: pointer !important;
  transition: background var(--transition) !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
}
.woocommerce-cart button[type="submit"]:hover,
.woocommerce-checkout button[type="submit"]:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover { background: #c44e03 !important; }

/* WC notices */
.woocommerce-message { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-left: 4px solid #22c55e !important; border-radius: var(--radius) !important; padding: 12px 18px !important; margin-bottom: 20px !important; list-style: none !important; }
.woocommerce-error { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-left: 4px solid #ef4444 !important; border-radius: var(--radius) !important; padding: 12px 18px !important; margin-bottom: 20px !important; list-style: none !important; }
.woocommerce-info { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--accent) !important; border-radius: var(--radius) !important; padding: 12px 18px !important; margin-bottom: 20px !important; }
.woocommerce-message::before, .woocommerce-info::before { display: none !important; }
.woocommerce-message a.button { display: inline-flex; margin-right: 12px; }

/* Checkout: WC adds .col2-set float layout — kill it */
.woocommerce-checkout .col2-set { float: none !important; width: 100% !important; display: block !important; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none !important; width: 100% !important; }

/* Payment methods WC renders with .wc_payment_methods */
.woocommerce-checkout .wc_payment_methods { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-checkout .wc_payment_method { border-bottom: 1px solid var(--border) !important; padding: 12px 0 !important; }
.woocommerce-checkout .wc_payment_method:last-child { border-bottom: none !important; }
.woocommerce-checkout .wc_payment_method > label { display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 600 !important; cursor: pointer !important; }
.woocommerce-checkout .wc_payment_method input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.woocommerce-checkout .payment_box { margin: 8px 0 4px 26px !important; padding: 10px 14px !important; background: var(--bg2) !important; border-radius: var(--radius) !important; font-size: .85rem !important; color: var(--text2) !important; border-left: 3px solid var(--accent) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; }

/* Shipping calculator */
.woocommerce .shipping-calculator-form p { margin-bottom: 12px !important; }
.woocommerce .shipping-calculator-form .input-text,
.woocommerce .shipping-calculator-form select { width: 100% !important; }

/* Cart remove button */
.woocommerce a.remove { background: none !important; color: var(--text3) !important; font-size: 1.1rem !important; font-weight: 400 !important; border-radius: 0 !important; padding: 0 !important; }
.woocommerce a.remove:hover { background: none !important; color: #ef4444 !important; }

/* Cart item quantities */
.woocommerce td.product-quantity .qty { width: 60px !important; text-align: center !important; padding: 8px !important; }

/* Order review in checkout (WC-rendered) */
#order_review_heading { font-size: 1.1rem !important; margin-bottom: 16px !important; color: var(--text) !important; }
#order_review table { width: 100% !important; border-collapse: collapse !important; }
#order_review table th, #order_review table td { padding: 10px 0 !important; border-bottom: 1px solid var(--border) !important; font-size: .9rem !important; color: var(--text) !important; }
#order_review .order-total th, #order_review .order-total td { font-weight: 800 !important; color: var(--accent) !important; font-size: 1rem !important; border-top: 2px solid var(--accent) !important; border-bottom: none !important; padding-top: 14px !important; }

/* Terms checkbox */
.woocommerce-terms-and-conditions-wrapper { margin: 12px 0 !important; font-size: .85rem !important; color: var(--text2) !important; }
.woocommerce-terms-and-conditions-wrapper a { color: var(--accent) !important; }

/* ── Place order button (WC native) ─────────────────────────── */
#place_order {
  display: block !important;
  width: 100% !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 0 24px !important;
  height: 54px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  font-family: var(--font-head) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-top: 16px !important;
  transition: background var(--transition), transform var(--transition) !important;
}
#place_order:hover {
  background: var(--accent2, #c44e03) !important;
  transform: translateY(-1px) !important;
}

/* Checkout items (our template) */
.checkout-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.checkout-item:last-child { border-bottom: none; }
.checkout-item__img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.checkout-item__info { flex: 1; min-width: 0; }
.checkout-item__name { font-weight: 600; color: var(--text); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-item__qty { font-size: .78rem; color: var(--text3); margin-top: 2px; }
.checkout-item__price { font-weight: 700; color: var(--accent); white-space: nowrap; }

.checkout-totals { padding: 0 20px; border-top: 1px solid var(--border); }
.summary-line { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--text2); }
.summary-line:last-child { border-bottom: none; }
.summary-line--total { font-weight: 800; font-size: 1rem; color: var(--text); border-top: 2px solid var(--accent); padding-top: 14px; }
.summary-total-price, .summary-line--total .woocommerce-Price-amount { color: var(--accent) !important; font-size: 1.2rem !important; font-weight: 800 !important; }

/* ── WISHLIST — account page ────────────────────── */
.account-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.account-block__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.account-block__head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 20px; }

/* ── CART ROW last tweaks ────────────────────────── */
.cart-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.cart-row:last-of-type { border-bottom: none; }
.cart-row:hover { background: var(--bg2); }
.cart-product { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.cart-product__img-link { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg2); border: 1px solid var(--border); display: block; }
.cart-product__img-link img { width: 100%; height: 100%; object-fit: cover; }
.cart-product__name { display: block; font-weight: 700; font-size: .9rem; color: var(--text); text-decoration: none; margin-bottom: 4px; }
.cart-product__name:hover { color: var(--accent); }
.cart-product__attrs { font-size: .78rem; color: var(--text3); }
.cart-product__price-mobile { display: none; font-weight: 700; font-size: .85rem; color: var(--accent); margin-top: 4px; }
.cart-col-price { width: 90px; text-align: center; font-size: .88rem; color: var(--text2); flex-shrink: 0; }
.cart-col-qty { width: 120px; flex-shrink: 0; }
.cart-col-sum { width: 90px; text-align: right; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.cart-col-del { width: 36px; flex-shrink: 0; text-align: center; }
.cart-remove-btn { color: var(--text3); font-size: .9rem; text-decoration: none; padding: 6px; display: inline-flex; transition: color var(--transition); }
.cart-remove-btn:hover { color: #ef4444; }
.cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: var(--bg2); border-top: 1px solid var(--border); }
.coupon-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coupon-applied { font-size: .82rem; color: #22c55e; display: flex; align-items: center; gap: 6px; }
@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary-col { position: static; }
  .cart-table-head { display: none; }
  .cart-col-price { display: none; }
  .cart-product__price-mobile { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   v2.2 COMPLETE FIXES
═══════════════════════════════════════════════════════════════ */

/* ── 1. HEADER ICON BUTTONS (account, cart, search, theme) ──── */
.header-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; line-height: 1;
  transition: all var(--transition);
  flex-shrink: 0;
}
.header-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.header-icon-btn i,
.header-icon-btn [class*="fa-"] {
  font-size: 1rem;
  line-height: 1;
  display: block;
  pointer-events: none;
}
.account-btn .account-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; display: block;
}

/* ── 3. BURGER ─────────────────────────────────────────────── */
.burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; flex-shrink: 0;
  transition: border-color var(--transition);
}
.burger:hover { border-color: var(--accent); }
.burger span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: center; pointer-events: none;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px) {
  .burger { display: flex !important; }
  .primary-nav { display: none !important; }
  .header-phone { display: none; }
  .header-cta-btn { display: none; }
}

/* ── MOBILE NAV (panel) ─────────────────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .3s ease;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: all; }
@media (max-width: 1024px) {
  .mobile-nav-overlay { display: block; pointer-events: none; }
}
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(340px, 90vw);
  z-index: 999;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-nav__close {
  width: 36px; height: 36px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text2); cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); flex-shrink: 0;
}
.mobile-nav__close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.mobile-nav ul { list-style: none; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav li { position: relative; }
.mobile-nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-radius: var(--radius);
  font-size: .9rem; font-weight: 600; color: var(--text);
  transition: all var(--transition); text-decoration: none;
}
.mobile-nav a:hover, .mobile-nav li.current-menu-item > a {
  background: var(--accent-light); color: var(--accent);
}
.mobile-nav .sub-menu { display: none !important; }
.mobile-nav li.menu-item-has-children > a::after { display: none; }
.mobile-nav__account {
  padding: 12px; border-top: 1px solid var(--border);
  margin-top: auto; display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav__user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 4px;
}
.mobile-nav__link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius);
  font-size: .88rem; font-weight: 600; color: var(--text2);
  text-decoration: none; transition: all var(--transition);
}
.mobile-nav__link:hover { background: var(--accent-light); color: var(--accent); }
.mobile-nav__footer { padding: 12px; border-top: 1px solid var(--border); }

/* ── MINI-CART QTY CONTROLS ─────────────────────────────────── */
.mini-cart-item__bottom {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px; margin-top: 6px;
}
.mini-cart-qty {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; height: 28px;
}
.mini-cart-qty__btn {
  width: 28px; height: 28px;
  background: var(--bg2); border: none;
  color: var(--text2); font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); flex-shrink: 0; font-weight: 700;
}
.mini-cart-qty__btn:hover { background: var(--accent); color: #fff; }
.mini-cart-qty__num {
  min-width: 28px; text-align: center;
  font-size: .8rem; font-weight: 700; color: var(--text);
  padding: 0 4px; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  line-height: 28px;
}
.mini-cart-item__price { font-weight: 700; color: var(--accent); font-size: .88rem; }

/* ── GALLERY NAV BUTTONS ─────────────────────────────────────── */
.gallery-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  background: rgba(255,255,255,.92);
  border: 1.5px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .85rem; color: var(--text2);
  transition: all var(--transition); z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.gallery-nav-btn--prev { left: 10px; }
.gallery-nav-btn--next { right: 10px; }
.gallery-nav-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="dark"] .gallery-nav-btn { background: rgba(20,20,20,.9); color: #ccc; border-color: rgba(255,255,255,.15); }

/* ── LIVE SEARCH ─────────────────────────────────────────────── */
.header-search {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  z-index: 990;
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease, visibility .28s;
}
.header-search.open {
  transform: translateY(0); opacity: 1; visibility: visible;
}
.header-search .container { padding-top: 14px; padding-bottom: 14px; }
.live-search-wrap {
  display: flex; align-items: center; gap: 12px;
}
.live-search-input-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
}
.live-search-icon {
  position: absolute; left: 14px;
  color: var(--text3); font-size: .95rem; pointer-events: none;
}
.live-search-input {
  width: 100%; padding: 11px 42px 11px 42px;
  background: var(--bg2); border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: 1rem; color: var(--text);
  font-family: var(--font-body); outline: none;
  transition: border-color var(--transition);
}
.live-search-input:focus { border-color: var(--accent); }
.live-search-clear {
  position: absolute; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text3); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.live-search-clear:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.header-search__close {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text2); cursor: pointer; font-size: 1rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.header-search__close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Results dropdown */
.live-search-results {
  max-height: 440px; overflow-y: auto;
  margin-top: 8px;
  border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  overscroll-behavior: contain;
}
.live-search-results:empty { display: none; }
.live-search-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.live-search-item:last-child { border-bottom: none; }
.live-search-item:hover { background: var(--accent-light); }
.live-search-item__img {
  width: 52px; height: 52px; border-radius: var(--radius);
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border);
}
.live-search-item__info { flex: 1; min-width: 0; }
.live-search-item__title {
  font-size: .9rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-search-item__title mark {
  background: transparent; color: var(--accent); font-weight: 700;
}
.live-search-item__cat { font-size: .78rem; color: var(--text3); margin-top: 2px; }
.live-search-item__price {
  font-size: .88rem; font-weight: 700; color: var(--accent);
  flex-shrink: 0; text-align: right; white-space: nowrap;
}
.live-search-loading,
.live-search-empty {
  padding: 20px 16px; text-align: center; color: var(--text2); font-size: .9rem;
}
.live-search-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; font-size: .88rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
  border-top: 1px solid var(--border);
  transition: background var(--transition);
}
.live-search-all:hover { background: var(--accent-light); }

/* ── CTA SECTION (centering) ─────────────────────────────────── */
.cta-section { text-align: center; }
.cta-content { margin: 0 auto; text-align: center; }

/* ── VARIATION SELECT HIDDEN ─────────────────────────────────── */
.bm-variation-select {
  display: none;  /* hidden — visual buttons are used, but select value syncs */
}


/* ═══════════════════════════════════════════════════════════════
   v2.3 — Account Dropdown + Mobile Nav Submenu Fix
═══════════════════════════════════════════════════════════════ */

/* ── ACCOUNT DROPDOWN (Issue 1) ─────────────────────────────── */
.account-dropdown { position: relative; }

.account-dropdown__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 230px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 500;
}
.account-dropdown.open .account-dropdown__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.account-dropdown__user {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.account-dropdown__name { font-weight: 700; font-size: .9rem; color: var(--text); }
.account-dropdown__email { font-size: .75rem; color: var(--text3); margin-top: 2px; }
.account-dropdown__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: var(--text2);
  text-decoration: none; transition: all var(--transition);
}
.account-dropdown__menu a:hover { background: var(--accent-light); color: var(--accent); }
.account-dropdown__menu a i { width: 16px; text-align: center; flex-shrink: 0; }
.account-dropdown__divider { height: 1px; background: var(--border); margin: 4px 0; }
.account-dropdown__logout { color: #ef4444 !important; }
.account-dropdown__logout:hover { background: #fef2f2 !important; color: #dc2626 !important; }
[data-theme="dark"] .account-dropdown__logout:hover { background: rgba(239,68,68,.15) !important; }
.account-dropdown__guest { padding: 10px 12px; }
.account-dropdown__guest p { font-size: .82rem; color: var(--text3); margin-bottom: 10px; }
.account-dropdown__register {
  display: block; text-align: center;
  padding: 8px 12px; margin-top: 6px;
  font-size: .82rem; color: var(--text3);
  text-decoration: underline; text-underline-offset: 2px;
}
.account-dropdown__register:hover { color: var(--accent); }

/* ── MOBILE NAV — no sub-menus, clean links (Issue 4) ────────── */
.mobile-nav .sub-menu,
.mobile-nav .children { display: none !important; }
.mobile-nav li.menu-item-has-children > a .arrow,
.mobile-nav li.menu-item-has-children > a::after { display: none !important; }
.mobile-nav li.menu-item-has-children > a {
  /* No toggle indicator — sub-menu is hidden completely */
}
/* Ensure mobile nav only shows top-level items cleanly */
.mobile-nav > ul > li > a {
  font-size: .95rem; font-weight: 600;
}

/* ── VARIATION SELECT BUTTONS (Issue 5) ─────────────────────── */
.variations-options {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.variation-btn {
  padding: 7px 16px;
  background: var(--bg2); border: 2px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--text2);
  transition: all var(--transition); min-width: 48px;
  display: flex; align-items: center; justify-content: center;
}
.variation-btn:hover { border-color: var(--accent); color: var(--accent); }
.variation-btn.selected {
  border-color: var(--accent); background: var(--accent);
  color: #fff;
}
.variation-btn.swatch {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  min-width: unset;
}
.variation-btn.swatch.selected {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent);
  background: inherit; /* keep color */
}
.bm-variation-select { display: none; } /* hidden — visual buttons drive the UX */

/* ═══════════════════════════════════════════════════════════════
   v2.4 — Wishlist Hover + Account Icon + Cart/Checkout
═══════════════════════════════════════════════════════════════ */

/* ── 4. Wishlist heart hover ─────────────────────────────────── */
.wishlist-btn .fa-heart,
.wishlist-btn .fa-solid.fa-heart,
.product-card__wishlist i {
  transition: color var(--transition), transform var(--transition);
}
.wishlist-btn:hover i,
.wishlist-btn:hover .fa-heart {
  color: #fff !important;
  transform: scale(1.15);
}
/* The button bg on hover */
.product-card__wishlist:hover,
.wishlist-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* account-btn icon rules moved to v2.5 block */

/* ── Cart/Checkout page layout ─────────────────────────────── */
/* Ensure WC renders inside our container cleanly */
.woocommerce-page .section--sm .container > form,
.woocommerce-page .section--sm .container > .woocommerce {
  width: 100%;
}
/* Remove WC default page-level paddings that conflict */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   v2.5 — Clean fixes: icon, price, list-view wishlist
═══════════════════════════════════════════════════════════════ */

/* ── 1. Account button icon — definitive fix ─────────────────── */
/* Remove overflow:hidden that clips FA pseudo-elements */
.account-btn {
  overflow: visible !important;
}
/* FA icons render via ::before — need inline-block NOT flex */
.account-btn > i,
.account-btn > i.fa-solid,
.account-btn > i[class*="fa-"] {
  display: inline-block !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased;
}
.account-btn .account-avatar {
  display: block;
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── 5. Price emphasis in product cards ─────────────────────── */
/* product-card__price — defined in v2.9 block below */

/* ── 6. Wishlist button: inside img, positioning ──────────────── */
/* product-card__img needs position:relative (already set usually) */
.product-card__img { position: relative; }

/* Wishlist button stays top-right of the image in ALL layouts */
.product-card__wishlist {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: .85rem;
  cursor: pointer; padding: 0;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.product-card__wishlist:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: scale(1.08);
}
.product-card__wishlist:hover i { color: #fff !important; }
.product-card__wishlist[data-in-wishlist="1"] i,
.product-card__wishlist i.active { color: var(--accent) !important; }

/* List view: wishlist inside img, so no override needed */
/* Grid list-view: img is 170px wide, button stays top-right of image */
#products-grid.products-list .product-card__wishlist,
.products-list .product-card__wishlist {
  top: 8px; right: 8px;
  /* stays positioned inside .product-card__img which is position:relative */
}

/* ── Mobile nav sub-items (flat indented) ────────────────────── */
.mobile-nav .mobile-nav__flat-sub {
  list-style: none; margin: 0; padding: 0;
  background: var(--bg2);
  border-radius: var(--radius);
  margin: 0 12px 4px;
}
.mobile-nav .mobile-nav__flat-sub li a {
  font-size: .85rem; font-weight: 500;
  color: var(--text3);
}
.mobile-nav .mobile-nav__flat-sub li a:hover { color: var(--accent); background: var(--accent-light); }


/* ═══════════════════════════════════════════════════════════════
   v2.6 — Clear cart btn, price punch, account SVG icon
═══════════════════════════════════════════════════════════════ */

/* ── 1. Mini-cart: clear-all button + total row ──────────────── */
.mini-cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.mini-cart-total { display: flex; align-items: center; gap: 8px; }
.mini-cart-total span { font-size: .85rem; color: var(--text2); }
.mini-cart-total-price { font-size: 1.15rem; font-weight: 700; color: var(--accent); }

.mini-cart-clear-all {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text3);
  font-size: .75rem; font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.mini-cart-clear-all:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}
[data-theme="dark"] .mini-cart-clear-all:hover {
  background: rgba(239,68,68,.15);
  border-color: #ef4444;
  color: #ef4444;
}
.mini-cart-actions {
  display: flex; gap: 8px;
  padding: 10px 16px 14px;
}
.mini-cart-actions .btn { flex: 1; justify-content: center; }

/* Remove old mini-cart-foot style that had separate total */
.mini-cart-foot .mini-cart-total { display: none; }

/* ── 2. Account button: SVG icon ─────────────────────────────── */
.account-btn svg {
  display: block;
  flex-shrink: 0;
  color: inherit;
  pointer-events: none;
}
/* Keep avatar visible */
.account-btn .account-avatar {
  display: block;
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   v2.7 — Price punch + Button uniformity + Account icon + Checkout
═══════════════════════════════════════════════════════════════ */


/* ── PRICE PUNCH: single product page ─────────────────────────── */
.product-summary .price,
.woocommerce-variation-price .price,
.entry-summary .price {
  font-family: var(--font-head) !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  line-height: 1;
  letter-spacing: .03em;
  display: block;
  margin: 12px 0 20px;
}
.product-summary .price del,
.entry-summary .price del {
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  color: var(--text3) !important;
  display: block;
  margin-bottom: 2px;
}
.product-summary .price ins { text-decoration: none; }

/* ── BUTTON UNIFORMITY in product cards ────────────────────────
   Both "Купити" and "Відкрити" identical height + min-width.     */
.product-card__footer {
  display: flex;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  align-items: stretch; /* equal height */
}
.product-card__footer .btn,
.product-card__footer .add-to-cart-btn,
.product-card__footer .view-open-btn,
.product-card__footer .view-btn-link {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: var(--radius) !important;
  text-decoration: none;
  white-space: nowrap;
  gap: 5px;
}
.product-card__footer .add-to-cart-btn { flex: 1; }
.product-card__footer .view-open-btn   { flex: 0 0 auto; }

/* List view — buttons stack vertically, full width */
#products-grid.products-list .product-card__footer .btn,
#products-grid.products-list .product-card__footer .add-to-cart-btn,
#products-grid.products-list .product-card__footer .view-open-btn {
  width: 100% !important;
  flex: none !important;
}

/* ── ACCOUNT BUTTON SVG icon ───────────────────────────────────── */
.account-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.account-btn svg,
.account-btn > svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  pointer-events: none;
  color: currentColor;
  stroke: currentColor;
  overflow: visible;
}
.account-btn .account-avatar {
  display: block;
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── CHECKOUT: form fields typography & sizing ─────────────────── */
/* WC injects its own form markup via do_action(woocommerce_checkout_billing)
   We style the generated fields to match our design system */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  width: 100%;
}
/* Field wrappers */
.woocommerce-checkout p.form-row,
.woocommerce-checkout .form-row {
  margin: 0 0 14px !important;
  padding: 0 !important;
}
/* Labels */
.woocommerce-checkout .form-row label,
.woocommerce-checkout label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* All text inputs */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  transition: border-color var(--transition) !important;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  outline: none !important;
}
.woocommerce-checkout textarea {
  height: 90px !important;
  padding: 12px 14px !important;
  resize: vertical;
  line-height: 1.5;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(232,93,4,.12) !important;
}
/* Error state */
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: #ef4444 !important;
}
/* Required star */
.woocommerce-checkout .required { color: var(--accent); margin-left: 2px; }
/* Validation tip */
.woocommerce-checkout .woocommerce-input-wrapper .description,
.woocommerce-checkout .form-row .woocommerce-error {
  font-size: .78rem;
  color: #ef4444;
  margin-top: 4px;
}
/* Select arrow */
.woocommerce-checkout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
}
/* Half-width fields (WC uses form-row-first / form-row-last) */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: calc(50% - 7px) !important;
  display: inline-block !important;
  vertical-align: top;
}
.woocommerce-checkout .form-row-first { margin-right: 14px !important; }
.woocommerce-checkout .form-row-wide  { display: block !important; width: 100% !important; }

/* Dark mode overrides */
[data-theme="dark"] .woocommerce-checkout input,
[data-theme="dark"] .woocommerce-checkout select,
[data-theme="dark"] .woocommerce-checkout textarea {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════════════════════════
   v2.8 — SVG icons, price fix, wishlist btn, cart qty, checkout
═══════════════════════════════════════════════════════════════ */

/* ── SVG icon base styles ─────────────────────────────────────── */
.bm-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none;
}
.bm-icon.spin {
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 5. Single product wishlist btn — compact square ─────────── */
.add-to-cart-wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.single-wishlist-btn {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  flex: 0 0 50px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius) !important;
}
.single-wishlist-btn .bm-icon { transition: color var(--transition); }
.single-wishlist-btn:hover .bm-icon,
.single-wishlist-btn[data-in-wishlist="1"] .bm-icon,
.single-wishlist-btn .wishlist-icon { color: var(--accent); }
.single-wishlist-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.single-wishlist-btn:hover .bm-icon { color: #fff !important; }

/* ── 6. Cart page qty controls ────────────────────────────────── */
.cart-qty-ctrl {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 36px;
  background: var(--bg);
}
.cart-qty-btn {
  width: 30px;
  height: 34px;
  background: var(--bg2);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  padding: 0;
}
.cart-qty-btn:hover { background: var(--accent); color: #fff; }
.cart-qty-input {
  width: 44px;
  height: 34px;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
  padding: 0;
  appearance: none;
  -moz-appearance: textfield;
}
.cart-qty-input:focus { outline: none; background: var(--accent-light); }
.cart-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── 7. Checkout — place order button ─────────────────────────── */
.checkout-place-order-wrap {
  padding: 16px 20px 20px;
  border-top: 2px solid var(--accent);
  background: var(--surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-top: -2px;
}
.checkout-submit-btn {
  width: 100%;
  height: 52px !important;
  font-size: 1rem !important;
  font-family: var(--font-head) !important;
  font-weight: 400 !important;
  letter-spacing: .06em;
  font-size: 1.2rem !important;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius) !important;
}
.checkout-security-note {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: .75rem;
  color: var(--text3);
  margin: 10px 0 0;
}
/* WC's #place_order button — make it styled and visible */


/* ── SVG icons in layout containers ───────────────────────────── */
.feature-icon .bm-icon,
.service-icon .bm-icon,
.about-point__icon .bm-icon,
.contact-card__icon .bm-icon,
.contact-item__icon .bm-icon,
.checkout-step__num .bm-icon { color: currentColor; }

/* spin animation for loading states */
.bm-icon--spinner { animation: bm-spin .8s linear infinite; }
@keyframes bm-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   v2.9 — definitive fixes
═══════════════════════════════════════════════════════════════ */

/* ── Wishlist heart fill ────────────────────────────────────── */
/* SVG heart: stroke-only by default, filled when active */
.product-card__wishlist .bm-icon svg,
.product-card__wishlist .bm-icon,
.single-wishlist-btn .bm-icon {
  fill: none;
  stroke: currentColor;
  transition: fill .18s ease, stroke .18s ease, color .18s ease;
}
.product-card__wishlist[data-in-wishlist="1"] .bm-icon,
.product-card__wishlist.is-wishlisted .bm-icon {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
  color: var(--accent) !important;
}
.single-wishlist-btn[data-in-wishlist="1"] .bm-icon {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
  color: var(--accent) !important;
}
.product-card__wishlist:hover .bm-icon {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── 10. Headings — reduced sizes ────────────────────────────── */
h1 { font-size: clamp(1.7rem, 3.5vw, 2.8rem) !important; }
h2 { font-size: clamp(1.4rem, 2.8vw, 2.2rem) !important; }
h3 { font-size: clamp(1.05rem, 1.8vw, 1.5rem) !important; }
.section-title { font-size: clamp(1.5rem, 3vw, 2.4rem) !important; }

/* ── 11. Checkout steps ──────────────────────────────────────── */
.checkout-steps {
  display: flex;
  align-items: flex-start;
  margin: 0 0 32px;
  padding: 0;
}
.checkout-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.checkout-step__num {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border2, var(--border));
  background: var(--bg);
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 400;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.checkout-step > span {
  font-size: .72rem;
  color: var(--text3);
  white-space: nowrap;
  font-weight: 500;
  text-align: center;
}
.checkout-step.active .checkout-step__num {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.checkout-step.active > span { color: var(--accent); font-weight: 700; }
.checkout-step.done .checkout-step__num {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.checkout-step.done > span { color: var(--text2); }
/* Line between steps */
.checkout-step__line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 32px;
  margin-top: 18px; /* vertically center with circle (38px/2 - line-height/2) */
  align-self: auto;
}

/* ── 2. Footer social icons — size & alignment ───────────────── */
.footer-socials a .bm-icon { display: block; }
.footer-contact-item .bm-icon { color: var(--accent); flex-shrink: 0; }


/* ══ PRICE — definitive (single clean block, overrides everything) ════════
   Product card: stacked — old price small grey above, new price big orange
   Single product: even larger                                              */

/* Base container */
.product-card__price,
.product-card .product-card__price { display:block; margin:6px 0 12px; }

/* The .price element itself */
.product-card .price {
  font-family: var(--font-head) !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  line-height: 1 !important;
  letter-spacing: .02em;
  display: block !important;
  text-decoration: none !important;
}
/* Amounts inside .price — inherit parent so font-size is controlled once */
.product-card .price .woocommerce-Price-amount,
.product-card .price bdi {
  font-size: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
}
.product-card .price .woocommerce-Price-currencySymbol { font-size: 1.05rem !important; }

/* Sale: <ins> = current price */
.product-card .price ins {
  display: block !important;
  text-decoration: none !important;
  font-size: 1.75rem !important;
  color: var(--accent) !important;
}

/* Sale: <del> = old price — small, grey, above */
.product-card .price del {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  text-decoration: line-through !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}
.product-card .price del .woocommerce-Price-amount,
.product-card .price del bdi {
  font-size: inherit !important;
  color: inherit !important;
  font-family: var(--font-body) !important;
}

/* Single product page price */
.product-summary .price,
.entry-summary .price,
.woocommerce-variation-price .price {
  font-family: var(--font-head) !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  color: var(--accent) !important;
  line-height: 1 !important;
  letter-spacing: .04em;
  display: block !important;
  margin: 10px 0 18px !important;
  text-decoration: none !important;
}
.product-summary .price del,
.entry-summary .price del,
.woocommerce-variation-price .price del {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  text-decoration: line-through !important;
  margin-bottom: 4px !important;
}
.product-summary .price ins,
.entry-summary .price ins,
.woocommerce-variation-price .price ins {
  display: block !important;
  text-decoration: none !important;
  font-size: 2.4rem !important;
  color: var(--accent) !important;
}
.product-summary .price .woocommerce-Price-amount,
.entry-summary .price .woocommerce-Price-amount { font-size: inherit !important; color: inherit !important; }

/* ── Account button icon ─────────────────────────────────────── */
.account-btn .bm-icon,
.account-btn .header-user-icon {
  display: block;
  width: 20px; height: 20px;
}
.account-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   v3.0 — fixes: account icon, theme toggle, description,
          related wishlist, checkout, wishlist hover,
          viber/wa icons, chat size, stock badge, prices
═══════════════════════════════════════════════════════════════ */

/* ── 1. Account button icon ──────────────────────────────────── */
.account-btn .bm-icon,
.account-btn .header-user-icon { display:block; width:20px; height:20px; }

/* ── 2. Theme toggle — CSS-driven icon swap, no JS innerHTML ─── */
/* Light mode: show sun, hide moon */
.theme-icon-sun  { display:flex; align-items:center; }
.theme-icon-moon { display:none; }
/* Dark mode: show moon, hide sun */
[data-theme="dark"] .theme-icon-sun  { display:none; }
[data-theme="dark"] .theme-icon-moon { display:flex; align-items:center; }

/* ── 3. Description — paragraph, list spacing ────────────────── */
.product-description-content,
#tab-description { font-size: .95rem; line-height: 1.8; color: var(--text); }

.product-description-content p,
#tab-description p,
.product-tabs .tab-pane p { margin-bottom: 1em !important; line-height: 1.8 !important; }

.product-description-content p:last-child,
#tab-description p:last-child { margin-bottom: 0 !important; }

.product-description-content ul,
.product-description-content ol,
#tab-description ul,
#tab-description ol {
  margin: 0 0 1em 1.6em !important;
  line-height: 1.8 !important;
}
.product-description-content li,
#tab-description li { margin-bottom: .3em; }

.product-description-content h2,
.product-description-content h3,
.product-description-content h4,
#tab-description h2,
#tab-description h3,
#tab-description h4 { margin: 1.2em 0 .4em !important; }

/* ── 4. Related products wishlist button — always visible ────── */
.products-grid .product-card .product-card__footer { gap: 6px; }
.product-card__wishlist-btn {
  width: 36px !important; min-width: 36px !important;
  height: 36px !important; padding: 0 !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; flex-shrink: 0;
}
.product-card__wishlist-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.product-card__wishlist-btn:hover svg {
  fill: transparent !important; stroke: #fff !important;
}
.product-card__wishlist-btn[data-in-wishlist="1"] svg {
  fill: var(--accent); stroke: var(--accent);
}

/* ── 6. Wishlist heart on product cards — white outline on hover  */
.product-card__wishlist:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.product-card__wishlist:hover svg {
  fill: none !important;
  stroke: #fff !important;
  color: #fff !important;
}
/* Already wishlisted: filled, hover = white filled */
.product-card__wishlist[data-in-wishlist="1"] svg {
  fill: var(--accent);
  stroke: var(--accent);
}
.product-card__wishlist[data-in-wishlist="1"]:hover svg {
  fill: #fff !important;
  stroke: #fff !important;
}

/* ── 7. Viber / WhatsApp icon display ────────────────────────── */
/* viber polyline needs stroke, not fill */
.footer-socials .bm-icon--viber path,
.footer-socials .bm-icon--viber polyline { stroke: currentColor; fill: none; }

/* ── 8. Chat button — bigger AI icon ────────────────────────── */
.chat-btn { width: 64px !important; height: 64px !important; }
.chat-btn .bm-icon,
.chat-btn svg { width: 30px !important; height: 30px !important; }

/* ── 9. Stock badge — prominent green pill ───────────────────── */
.product-stock-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 10px; border-radius: 100px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  margin: 8px 0 6px;
}
.product-stock-badge.in-stock {
  background: rgba(34,197,94,.12);
  color: #16a34a;
  border: 1.5px solid rgba(34,197,94,.4);
}
[data-theme="dark"] .product-stock-badge.in-stock {
  background: rgba(34,197,94,.18);
  color: #4ade80;
  border-color: rgba(74,222,128,.35);
}
.product-stock-badge.out-stock {
  background: rgba(239,68,68,.1);
  color: #dc2626;
  border: 1.5px solid rgba(239,68,68,.35);
}
.product-stock-badge .bm-icon,
.product-stock-badge svg { width: 15px !important; height: 15px !important; }

/* ── 10. Prices — more prominent everywhere ──────────────────── */

/* Product card: big, orange, Bebas Neue */
.product-card .price {
  font-size: 2rem !important;
  letter-spacing: .03em !important;
}
.product-card .price ins { font-size: 2rem !important; }

/* Single product: very large */
.product-summary .price,
.entry-summary .price,
.woocommerce-variation-price .price {
  font-size: 2.8rem !important;
  margin: 12px 0 20px !important;
}
.product-summary .price ins,
.entry-summary .price ins,
.woocommerce-variation-price .price ins { font-size: 2.8rem !important; }

/* Old price — clearly secondary */
.product-card .price del,
.product-summary .price del,
.entry-summary .price del { font-size: .78rem !important; }

/* Currency symbol — slightly smaller than the number */
.product-card .price .woocommerce-Price-currencySymbol { font-size: 1.1rem !important; }
.product-summary .price .woocommerce-Price-currencySymbol,
.entry-summary  .price .woocommerce-Price-currencySymbol { font-size: 1.6rem !important; }

/* Mini cart & checkout item prices */
.mini-cart-item__price .woocommerce-Price-amount,
.checkout-item__price .woocommerce-Price-amount {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 400;
}

/* ── 5. Checkout: ensure #place_order is shown & styled ─────── */
/* (display:none override removed above — this ensures visibility) */
.woocommerce-checkout #place_order,
#payment #place_order {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ── 3-extra. Description paragraph spacing (added separately) ── */
.product-desc p,
.product-desc ul,
.product-desc ol { margin-bottom: 1em; line-height: 1.8; }

/* ═══════════════════════════════════════════════════════════════
   v3.1 — search icon, wishlist, description, cart btn, checkout
═══════════════════════════════════════════════════════════════ */

/* ── 1. Search — hide magnifying glass inside input wrap ──────── */
.live-search-input {
  padding-left: 16px !important; /* was 42px to accommodate icon */
}
.live-search-icon { display: none !important; }

/* searchform.php submit — text label, no icon */
.search-form__btn {
  font-family: var(--font-head);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 20px;
  min-width: 80px;
}

/* ── 2. Related products — wishlist button ────────────────────── */
.related-wishlist-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0;
  font-size: .78rem !important;
  padding: 0 10px !important;
  height: 34px !important;
  white-space: nowrap;
}
.related-wishlist-label {
  font-size: .72rem;
  line-height: 1;
}
.related-wishlist-btn[data-in-wishlist="1"] {
  background: rgba(232,93,4,.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.related-wishlist-btn[data-in-wishlist="1"] svg,
.related-wishlist-btn.is-wishlisted svg {
  fill: var(--accent); stroke: var(--accent);
}
.related-wishlist-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.related-wishlist-btn:hover svg { stroke: #fff !important; fill: none !important; }

/* ── 3. Product description — full editorial formatting ───────── */
.product-description-content,
#tab-description {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--text);
}

/* Paragraphs */
.product-description-content p,
#tab-description p {
  margin-top: 0;
  margin-bottom: 1.1em;
  line-height: 1.85;
}
.product-description-content p:last-child,
#tab-description p:last-child { margin-bottom: 0; }

/* Headings inside description */
.product-description-content h2,
#tab-description h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
  margin: 1.6em 0 .5em !important;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.product-description-content h3,
#tab-description h3 {
  font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
  margin: 1.3em 0 .4em !important;
  color: var(--text);
}
.product-description-content h4,
#tab-description h4 {
  font-size: 1rem !important;
  margin: 1em 0 .3em !important;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: var(--font-head);
}

/* Unordered lists */
.product-description-content ul,
#tab-description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.1em !important;
}
.product-description-content ul li,
#tab-description ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: .45em;
  line-height: 1.7;
}
.product-description-content ul li::before,
#tab-description ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Ordered lists */
.product-description-content ol,
#tab-description ol {
  padding-left: 1.6em !important;
  margin: 0 0 1.1em !important;
  counter-reset: none;
}
.product-description-content ol li,
#tab-description ol li {
  padding-left: .3em;
  margin-bottom: .45em;
  line-height: 1.7;
}

/* Strong / em */
.product-description-content strong,
#tab-description strong { color: var(--text); font-weight: 700; }
.product-description-content em,
#tab-description em { font-style: italic; color: var(--text2); }

/* Blockquote */
.product-description-content blockquote,
#tab-description blockquote {
  margin: 1.2em 0;
  padding: 14px 20px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text2);
  font-style: italic;
}

/* Tables */
.product-description-content table,
#tab-description table {
  width: 100%; border-collapse: collapse; margin: 1em 0;
}
.product-description-content th,
#tab-description th {
  background: var(--surface);
  padding: 8px 12px;
  text-align: left;
  font-family: var(--font-head);
  font-size: .85rem;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--border);
}
.product-description-content td,
#tab-description td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.product-description-content tr:last-child td,
#tab-description tr:last-child td { border-bottom: none; }

/* ── 4. Cart — Proceed to Checkout button ─────────────────────── */
.woocommerce .wc-proceed-to-checkout,
.cart-summary-actions .wc-proceed-to-checkout { display: block; }

.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.button.alt.wc-forward,
.cart-summary-actions a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 52px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 1.1rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background var(--transition), transform var(--transition) !important;
  padding: 0 24px !important;
  box-shadow: 0 4px 14px rgba(232,93,4,.3) !important;
}
.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.button.alt.wc-forward:hover {
  background: var(--accent2, #c44e03) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ── 5. Checkout — our visible place-order button ─────────────── */
.checkout-place-order-wrap { padding: 16px 20px 20px; }

.checkout-submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 54px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 1.2rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background var(--transition), transform var(--transition) !important;
  box-shadow: 0 4px 20px rgba(232,93,4,.35) !important;
}
.checkout-submit-btn:hover:not(:disabled) {
  background: var(--accent2, #c44e03) !important;
  transform: translateY(-1px) !important;
}
.checkout-submit-btn:disabled {
  opacity: .7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.checkout-submit-btn.loading::after {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bm-spin .7s linear infinite;
  margin-left: 6px;
}

/* Hide WC's own #place_order button (we use our styled one above) */
#payment #place_order,
.woocommerce-checkout #place_order.button {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   v3.2 — icons, prices, wishlist, checkout, tabs mobile
═══════════════════════════════════════════════════════════════ */

/* ── 2. Prices — accent color, bolder, bigger ────────────────── */

/* Product card price — bold accent */
.product-card .price,
.product-card .product-card__price .price {
  font-family: var(--font-head) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;        /* was 400 */
  color: var(--accent) !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  display: block !important;
  text-decoration: none !important;
}
.product-card .price ins {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  display: block !important;
  text-decoration: none !important;
}
.product-card .price del {
  font-weight: 400 !important;
  font-size: .72rem !important;
  color: var(--text3) !important;
}

/* Single product page — big bold accent */
.product-summary .price,
.entry-summary .price,
.woocommerce-variation-price .price {
  font-family: var(--font-head) !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;        /* was 400 */
  color: var(--accent) !important;
  letter-spacing: .03em !important;
  display: block !important;
  margin: 14px 0 22px !important;
}
.product-summary .price ins,
.entry-summary .price ins {
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  display: block !important;
  text-decoration: none !important;
}
.product-summary .price del,
.entry-summary .price del {
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
}
.woocommerce-Price-amount {
  font-weight: inherit !important;
}

/* ── 3. Related products — wishlist button (icon-only pill) ───── */
.related-wl-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.related-wl-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.related-wl-btn:hover svg { stroke: #fff !important; fill: none !important; }
.related-wl-btn[data-in-wishlist="1"] {
  background: rgba(232,93,4,.1);
  border-color: var(--accent);
  color: var(--accent);
}
.related-wl-btn[data-in-wishlist="1"] svg,
.related-wl-btn.is-wishlisted svg {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* ── 4. Checkout button — type=submit, properly styled ────────── */
/* Remove conflicting hide rules */
#payment #place_order,
.woocommerce-checkout #place_order.button,
.woocommerce-checkout #place_order {
  display: none !important;   /* hide WC default render — we have our own styled one */
}

/* Our custom button IS #place_order — show it */
.checkout-place-order-wrap #place_order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 54px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 1.2rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background var(--transition), transform var(--transition) !important;
  box-shadow: 0 4px 20px rgba(232,93,4,.35) !important;
  padding: 0 24px !important;
}
.checkout-place-order-wrap #place_order:hover {
  background: var(--accent2, #c44e03) !important;
  transform: translateY(-1px) !important;
}

/* Back to cart link */
.checkout-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  font-size: .82rem;
  text-decoration: none;
  margin-bottom: 12px;
  transition: color var(--transition);
}
.checkout-back-btn:hover { color: var(--accent); }
.checkout-back-btn .bm-icon { flex-shrink: 0; }

/* ── 5. Product tabs — mobile scroll ─────────────────────────── */
.tabs-nav {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* Firefox */
  flex-wrap: nowrap !important;  /* keep tabs on one line */
  scroll-snap-type: x mandatory;
}
.tabs-nav::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.tab-btn {
  white-space: nowrap !important;  /* prevent text wrapping */
  flex-shrink: 0 !important;
  scroll-snap-align: start;
}

@media (max-width: 640px) {
  .tabs-nav { gap: 0; border-bottom: 2px solid var(--border); }
  .tab-btn { padding: 10px 16px; font-size: .82rem; }
  .product-tabs { margin-top: 32px; }
}


/* Hide WC's internally-rendered #place_order (inside .checkout-payment-wrap)
   Our styled button in .checkout-place-order-wrap is the real submit button */
.checkout-payment-wrap #place_order,
.checkout-payment-wrap .wc-block-components-checkout-place-order-button {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   v3.3 — definitive fixes for all 9 reported issues
   (these rules are LAST → highest cascade priority)
═══════════════════════════════════════════════════════════════ */

/* ── 1. Contact section — Google Map ─────────────────────────── */
.contact-map {
  margin-top: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: none;
}

/* ── 2. Account dropdown — ensure clicks register ────────────── */
.account-dropdown { position: relative; z-index: 1200; }
.account-dropdown__menu { z-index: 1201 !important; pointer-events: none; }
.account-dropdown.open .account-dropdown__menu {
  pointer-events: auto !important;
}
.account-dropdown__menu a,
.account-login-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.account-login-btn {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  text-decoration: none !important;
  margin-bottom: 6px;
}
.account-dropdown__register {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 3. Wishlist heart → WHITE on hover ──────────────────────── */
/* All wishlist buttons: on hover heart becomes white */
.product-card__wishlist:hover svg,
.product-card__wishlist:hover .bm-icon svg,
.wishlist-btn:hover svg,
.wishlist-btn:hover .bm-icon svg,
.related-wl-btn:hover svg,
.single-wishlist-btn:hover svg,
.single-wishlist-btn:hover .bm-icon svg {
  fill: none !important;
  stroke: #fff !important;
  color: #fff !important;
}

/* Active (in wishlist) state — filled accent */
.product-card__wishlist[data-in-wishlist="1"] svg,
.wishlist-btn[data-in-wishlist="1"] svg,
.single-wishlist-btn[data-in-wishlist="1"] svg,
.related-wl-btn[data-in-wishlist="1"] svg {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* Active + hover — filled white */
.product-card__wishlist[data-in-wishlist="1"]:hover svg,
.wishlist-btn[data-in-wishlist="1"]:hover svg,
.single-wishlist-btn[data-in-wishlist="1"]:hover svg,
.related-wl-btn[data-in-wishlist="1"]:hover svg {
  fill: #fff !important;
  stroke: #fff !important;
}

/* ── 4. Related products wishlist button ─────────────────────── */
.product-card__footer {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.related-wl-btn {
  flex-shrink: 0 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text3) !important;
  cursor: pointer;
  transition: all var(--transition);
}
.related-wl-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── 5. Single product — equal height add-to-cart + wishlist ─── */
.add-to-cart-wrap {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.single-add-to-cart-btn {
  flex: 1 !important;
  height: 52px !important;
  font-size: 1.05rem !important;
}
.single-wishlist-btn {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius) !important;
}

/* ── 6. Checkout — back button styled as button, not link ───── */
.checkout-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 18px !important;
  height: 40px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  color: var(--text2) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  justify-content: center !important;
}
.checkout-back-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-light, rgba(232,93,4,.07)) !important;
}

/* ── 7. Checkout place-order button — definitive CSS ─────────── */

/* Step 1: Hide ALL WC-rendered #place_order instances outside our wrapper */
.woocommerce-checkout #place_order:not(.checkout-submit-btn),
#payment #place_order:not(.checkout-submit-btn) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Step 2: Our #place_order inside .checkout-place-order-wrap — ALWAYS visible */
.checkout-place-order-wrap #place_order,
.checkout-place-order-wrap .checkout-submit-btn {
  display: flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 54px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .2s ease !important;
  box-shadow: 0 4px 20px rgba(232,93,4,.35) !important;
  padding: 0 24px !important;
  margin: 0 !important;
  overflow: visible !important;
}
.checkout-place-order-wrap #place_order:hover,
.checkout-place-order-wrap .checkout-submit-btn:hover {
  background: #c44e03 !important;
  transform: translateY(-1px) !important;
}

/* ── 8. Viber / WhatsApp — filled icon display ───────────────── */
/* These icons use fill="currentColor" at path level, SVG has fill="none" */
/* The path-level attribute takes priority in SVG spec — but add CSS too */
.bm-icon svg path[fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}
/* Footer social icons need proper color */
.footer-social .bm-icon svg,
.chat-widget .bm-icon svg {
  overflow: visible;
}

/* ── 9. Prices — bigger, bolder, accent, definitive ─────────── */

/* All product card prices */
.product-card .price,
.product-card .woocommerce-Price-amount,
.product-card .price .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-size: 1.95rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em !important;
}
.product-card .price ins .woocommerce-Price-amount {
  font-size: 1.95rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}
.product-card .price del,
.product-card .price del .woocommerce-Price-amount {
  font-size: .75rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  display: block !important;
}
.product-card .price ins { text-decoration: none !important; }

/* Single product page price */
.product-summary .price,
.entry-summary .price {
  font-family: var(--font-head) !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: .02em !important;
  display: block !important;
  margin: 12px 0 20px !important;
}
.product-summary .price .woocommerce-Price-amount,
.entry-summary .price .woocommerce-Price-amount {
  font-size: inherit !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}
.product-summary .price del,
.entry-summary .price del {
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════
   v3.3 — all 9 fixes: map, login, wishlist, cart, checkout, icons, prices
═══════════════════════════════════════════════════════════════ */

/* ── 1. Google Map — contact section ─────────────────────────── */
.contact-map {
  margin-top: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  height: 260px;          /* explicit height so overflow:hidden doesn't collapse */
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── 2. Account dropdown — login / register buttons ──────────── */
/* Raise stacking context so dropdown sits above everything */
.account-dropdown { position: relative; z-index: 1200 !important; }

/* Ensure menu is always interactable when open */
.account-dropdown.open .account-dropdown__menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  z-index: 1200 !important;
}

/* Login button inside dropdown */
.account-dropdown__menu .btn.btn-primary,
.account-login-btn {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  text-decoration: none !important;
  margin-bottom: 4px;
  pointer-events: auto !important;
}

/* Register link */
.account-dropdown__register {
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ── 3. Wishlist heart — WHITE SVG stroke on hover ───────────── */
/* Reset any conflicting fill so only stroke matters on hover */
.product-card__wishlist:hover svg,
.product-card__wishlist:hover svg *,
.wishlist-btn:hover svg,
.wishlist-btn:hover svg *,
.related-wl-btn:hover svg,
.related-wl-btn:hover svg *,
.single-wishlist-btn:hover svg,
.single-wishlist-btn:hover svg * {
  fill: none !important;
  stroke: #fff !important;
  color: #fff !important;
}

/* Active (in wishlist): filled accent colour */
.product-card__wishlist[data-in-wishlist="1"] svg,
.wishlist-btn[data-in-wishlist="1"] svg,
.related-wl-btn[data-in-wishlist="1"] svg,
.single-wishlist-btn[data-in-wishlist="1"] svg {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* Active + hover: filled white */
.product-card__wishlist[data-in-wishlist="1"]:hover svg,
.wishlist-btn[data-in-wishlist="1"]:hover svg,
.related-wl-btn[data-in-wishlist="1"]:hover svg,
.single-wishlist-btn[data-in-wishlist="1"]:hover svg {
  fill: #fff !important;
  stroke: #fff !important;
}

/* ── 4 & 5. Related + single product wishlist buttons ─────────── */

/* Related products — icon-only round button */
.related-wl-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.related-wl-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Single product — same height as btn-lg (52px) */
.single-wishlist-btn {
  height: 52px !important;
  min-width: 52px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.single-wl-label {
  font-size: .78rem;
  white-space: nowrap;
}

/* add-to-cart-wrap: flex row, same height for both buttons */
.add-to-cart-wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.add-to-cart-wrap .btn {
  height: 52px !important;
}

/* ── 6. Checkout back button ──────────────────────────────────── */
.checkout-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
  font-size: .88rem !important;
  height: 40px !important;
  padding: 0 16px !important;
}

/* ── 7. Checkout submit button — full fix ────────────────────── */

/* Hide the WC-rendered place_order button (inside payment wrap) */
.checkout-payment-wrap #place_order {
  display: none !important;
}

/* Our button IS #place_order — explicitly show it via parent scope */
.checkout-place-order-wrap #place_order,
.checkout-place-order-wrap button[name="woocommerce_checkout_place_order"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 56px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 1.2rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(232,93,4,.35) !important;
  transition: background var(--transition), transform var(--transition) !important;
}
.checkout-place-order-wrap #place_order:hover,
.checkout-place-order-wrap button[name="woocommerce_checkout_place_order"]:hover {
  background: var(--accent2, #c44e03) !important;
  transform: translateY(-1px) !important;
}

/* ── 8. Viber / WhatsApp social icons — correct sizing ────────── */
.footer-socials .bm-icon--viber,
.footer-socials .bm-icon--whatsapp,
.chat-widget .bm-icon--viber,
.chat-widget .bm-icon--whatsapp { fill: none; }

/* ── 9. Prices — bigger, bolder, accent ──────────────────────── */

/* Product card */
.product-card .price,
.product-card .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  letter-spacing: .02em !important;
  display: block !important;
}
.product-card .price ins,
.product-card .price ins .woocommerce-Price-amount {
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  display: block !important;
}
.product-card .price del,
.product-card .price del .woocommerce-Price-amount {
  font-size: .75rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  text-decoration: line-through !important;
  display: block !important;
}

/* Single product page */
.product-summary .price,
.entry-summary .price {
  font-family: var(--font-head) !important;
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;
  display: block !important;
  margin: 16px 0 24px !important;
}
.product-summary .price ins,
.entry-summary .price ins {
  display: block !important;
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
}
.product-summary .price del,
.entry-summary .price del {
  font-size: .9rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════
   v3.4 — dropdown, wishlist, checkout, icons, prices
═══════════════════════════════════════════════════════════════ */

/* ── 1. Account dropdown — remove pointer-events block ───────── */
/* Closed: only visibility+opacity hide it (not pointer-events) */
.account-dropdown__menu {
  pointer-events: none !important; /* closed = no clicks */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
}
.account-dropdown.open .account-dropdown__menu {
  pointer-events: auto !important; /* open = all clicks work */
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* Every link/btn inside is always clickable when parent is open */
.account-dropdown.open .account-dropdown__menu a,
.account-dropdown.open .account-dropdown__menu button,
.account-dropdown.open .account-login-btn,
.account-dropdown.open .account-dropdown__register {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ── 2. Related products — wishlist round button ─────────────── */
.related-wl-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.related-wl-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.related-wl-btn[data-in-wishlist="1"] {
  background: rgba(232,93,4,.1);
  border-color: var(--accent);
  color: var(--accent);
}
/* Hover SVG → white */
.related-wl-btn:hover svg          { stroke: #fff !important; fill: none !important; }
.related-wl-btn[data-in-wishlist="1"] svg { fill: var(--accent) !important; stroke: var(--accent) !important; }
.related-wl-btn[data-in-wishlist="1"]:hover svg { fill: #fff !important; stroke: #fff !important; }

/* All wishlist button hover → white heart */
.product-card__wishlist:hover svg,
.wishlist-btn:hover svg,
.single-wishlist-btn:hover svg {
  fill: none !important;
  stroke: #fff !important;
}
.product-card__wishlist[data-in-wishlist="1"] svg,
.wishlist-btn[data-in-wishlist="1"] svg,
.single-wishlist-btn[data-in-wishlist="1"] svg {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}
.product-card__wishlist[data-in-wishlist="1"]:hover svg,
.wishlist-btn[data-in-wishlist="1"]:hover svg,
.single-wishlist-btn[data-in-wishlist="1"]:hover svg {
  fill: #fff !important;
  stroke: #fff !important;
}

/* ── 3. Single product — equal height buttons ────────────────── */
.add-to-cart-wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.add-to-cart-wrap > .btn {
  height: 52px !important;
  min-height: 52px !important;
}
.single-wishlist-btn {
  min-width: 52px !important;
  width: auto !important;
  padding: 0 18px !important;
}
.single-wl-label {
  font-size: .78rem;
  white-space: nowrap;
}

/* ── 4. Checkout — style WC's native #place_order ────────────── */
/* Do NOT hide #place_order — WC's checkout.js needs it */
#place_order,
.woocommerce #place_order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  margin-top: 16px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(232,93,4,.3) !important;
  transition: background var(--transition), transform var(--transition) !important;
}
#place_order:hover {
  background: var(--accent2, #c44e03) !important;
  transform: translateY(-1px) !important;
}

/* Back to cart button */
.checkout-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-size: .85rem !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
}

/* Payment section wrap — show it normally */
.checkout-payment-wrap { display: block; }
.checkout-back-wrap { padding: 16px 20px 4px; }
.checkout-security-wrap { padding: 0 20px 16px; }

/* ── 5. Social icons — Viber/WhatsApp filled ─────────────────── */
.footer-socials a svg.bm-icon--viber,
.footer-socials a svg.bm-icon--whatsapp {
  fill: currentColor !important;
  stroke: none !important;
}

/* ── 6. Prices — old price dim + small; variable single-line ──── */

/* OLD price (del / strikethrough) — small, dim */
.price del,
.price del .woocommerce-Price-amount,
.woocommerce-Price-amount del,
.product-card .price del,
.product-summary .price del,
.entry-summary .price del {
  font-size: .72rem !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  opacity: .7 !important;
  text-decoration: line-through !important;
  display: inline !important;
  margin-right: 4px !important;
}

/* Variable product price range — keep on ONE line */
.product-card .price,
.product-card .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-size: 2.1rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  white-space: nowrap !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Price range (min–max): keep on one line */
.product-card .price .from,
.product-card .price .to { display: inline !important; }

/* Single product */
.product-summary .price,
.entry-summary .price {
  font-family: var(--font-head) !important;
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  white-space: nowrap !important;
  display: block !important;
  margin: 14px 0 20px !important;
  line-height: 1.1 !important;
}
.product-summary .price ins,
.entry-summary .price ins {
  display: inline !important;
  text-decoration: none !important;
}