/* ==========================================================================
   OZVAPEX — WordPress theme stylesheet
   Geometry + tokens measured from the live Woodmart theme:
   container 1250px, topbar 50px (white), header 70px, nav 80px (#f5f5f5),
   primary #1246AB, Mulish (titles) / Work Sans (text)
   ========================================================================== */
@import url('fonts.css');

:root {
  --primary: #1246AB;
  --primary-dark: #10409c;
  --link: #1A55A8;
  --text: #777;
  --title: #242424;
  --border: #ebebeb;
  --border-light: #f0f0f0;
  --bg: #fff;
  --nav-bg: #f5f5f5;
  --stock: #3fa049;
  --out: #e53935;
  --container: 1250px;
  --font-text: 'Work Sans', Arial, Helvetica, sans-serif;
  --font-title: 'Mulish', Arial, Helvetica, sans-serif;
  --shadow-pop: 0 4px 18px rgba(0,0,0,.12);
  --top-h: 50px;
  --head-h: 70px;
  --nav-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: #333; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--primary); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--title);
  font-weight: 700;
  margin: 0 0 .55em;
  line-height: 1.35;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { margin: 0 0 1.1em; }
strong, b { color: #444; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 15px; width: 100%; }
.hidden { display: none !important; }

/* ------------------------------- top bar ------------------------------- */
.top-bar {
  background: #fff;
  min-height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 15px;
}
.top-bar h5 {
  color: #242424;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

/* ------------------------------- header -------------------------------- */
.site-header { background: #fff; position: relative; z-index: 500; }
.header-main { height: var(--head-h); }
.header-main .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { flex: 0 0 auto; display: flex; align-items: center; padding: 5px 0; }
.logo img { width: 236px; height: auto; }

.header-tools { display: flex; align-items: center; gap: 0; }
.header-search { margin-right: 16px; position: relative; }
.header-search form { display: flex; align-items: center; }
.header-search input[type="search"] {
  width: 264px; height: 50px;
  border: 0; background: #f5f5f5;
  padding: 0 16px; font-size: 15px; color: #777;
  outline: none; border-radius: 0;
}
.header-search input[type="search"]::placeholder { color: #999; }
.header-search button { height: 50px; width: 50px; border: 0; background: #f5f5f5; color: #555; display: inline-flex; align-items: center; justify-content: center; }
.header-search button:hover { color: var(--primary); }
.header-search svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 50px; color: #333; position: relative;
}
.tool:hover { color: rgba(51,51,51,.6); }
.tool svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tool-count {
  position: absolute; top: 5px; left: 26px;
  font-size: 11px; line-height: 1; background: #fff; color: var(--primary);
  font-family: var(--font-title); font-weight: 700;
}
.tool-divider { display: none; }
.cart-subtotal { display: none; }

.search-suggest {
  position: absolute; top: calc(100% + 2px); left: 0; right: 50px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  max-height: 380px; overflow: auto; z-index: 600; display: none;
}
.search-suggest.open { display: block; }
.search-suggest a { display: flex; gap: 12px; padding: 10px 12px; align-items: center; border-bottom: 1px solid var(--border-light); }
.search-suggest a:hover { background: #fafafa; }
.search-suggest img { width: 46px; height: 46px; object-fit: contain; }
.search-suggest .ss-title { font-size: 13px; color: #333; font-family: var(--font-title); font-weight: 600; line-height: 1.3; }
.search-suggest .ss-price { font-size: 12px; color: var(--primary); font-weight: 700; }

/* -------------------------------- nav ---------------------------------- */
.main-nav { background: var(--nav-bg); position: relative; }
.main-nav .container { display: flex; align-items: center; justify-content: center; height: var(--nav-h); position: relative; }
.nav-list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-item { position: static; }
.nav-item > a {
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
  padding: 10px 11px;
  font-family: var(--font-title);
  font-size: 14.5px; font-weight: 700; color: #333;
  text-transform: capitalize; letter-spacing: .2px;
}
.nav-item > a svg { width: 8px; height: 8px; stroke: #333; fill: none; stroke-width: 2.6; opacity: .5; margin-top: 2px; flex: 0 0 auto; }
.nav-item:hover > a { color: rgba(51,51,51,.6); }
.nav-item:hover > a svg { stroke: rgba(51,51,51,.6); }
.nav-item.red > a { color: #333; }
.nav-item.current > a { color: var(--primary); }

/* mega dropdown */
.mega {
  position: absolute; top: 100%; left: 50%;
  width: min(1220px, 94vw);
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: 26px 26px 18px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
  transition: all .22s ease; z-index: 400;
}
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.mega-card { text-align: center; }
.mega-card .thumb { position: relative; overflow: hidden; background: #fff; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.mega-card img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.mega-card:hover img { transform: scale(1.05); }
.mega-card h3 { font-size: 13px; font-family: var(--font-title); font-weight: 700; color: #333; margin: 10px 0 2px; line-height: 1.35; }
.mega-card h3 mark { background: none; color: #999; font-weight: 400; }
.mega-card .more { font-size: 12px; color: #999; }
.mega-card:hover .more { color: var(--primary); }

/* mobile header */
.mobile-bar { display: none; }
.mobile-menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; background: #fff; z-index: 900;
  transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; box-shadow: 2px 0 20px rgba(0,0,0,.15);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.mobile-menu-head strong { font-family: var(--font-title); font-size: 15px; }
.mobile-menu-head button { background: none; border: 0; font-size: 13px; color: #777; display: flex; align-items: center; gap: 6px; }
.mobile-menu-head svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-list > li { border-bottom: 1px solid var(--border-light); }
.mm-list > li > a, .mm-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 18px; font-family: var(--font-title); font-size: 14px; font-weight: 700; color: #333;
  background: none; border: 0; text-align: left;
}
.mm-toggle svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s ease; }
.mm-sub { list-style: none; margin: 0; padding: 0 0 8px; display: none; }
.mm-sub.open { display: block; }
.mm-sub a { display: block; padding: 8px 18px 8px 30px; font-size: 13.5px; color: #666; }
.mm-toggle.open svg { transform: rotate(180deg); }
.menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 890; opacity: 0; visibility: hidden; transition: all .25s; }
.menu-overlay.open { opacity: 1; visibility: visible; }

/* ------------------------------ page shell ------------------------------ */
.main-content { min-height: 40vh; }
.page-title-bar { padding: 0 0 6px; }
.breadcrumbs { font-size: 14px; color: #999; padding: 14px 0 8px; }
.breadcrumbs a { color: #999; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .sep { margin: 0 7px; color: #ccc; }
.page-title { font-size: 30px; margin: 6px 0 18px; color: var(--title); }
.term-desc { margin-bottom: 18px; color: var(--text); max-width: 900px; font-size: 15px; }

/* ------------------------------- buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 0; padding: 13px 24px;
  font-family: var(--font-title); font-size: 14px; font-weight: 700; line-height: 1.2;
  color: #fff; background: var(--primary);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  transition: background .2s ease, color .2s ease; text-align: center;
}
.btn:hover { background: var(--primary-dark); color: #fff; }
.btn:active { position: relative; bottom: -1px; }
.btn-black { background: #242424; }
.btn-black:hover { background: #000; }
.btn-outline { background: #f7f7f7; color: #333; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.btn-outline:hover { background: #efefef; color: #333; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------ hero slider ----------------------------- */
.hero-wrap { padding: 20px 0 0; }
.hero {
  position: relative; overflow: hidden;
  aspect-ratio: 1620 / 620;
  background: #000;
  margin: 0 auto;
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 767px) {
  .hero.hero-has-mobile { aspect-ratio: 1 / 1; }
}
.hero-slide .hero-link { position: absolute; inset: 0; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 56px; background: rgba(0,0,0,.35); border: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease, background .2s; z-index: 5;
}
.hero:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: rgba(0,0,0,.6); }
.hero-arrow.prev { left: 0; }
.hero-arrow.next { right: 0; }
.hero-arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 8px; justify-content: center; z-index: 5; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); padding: 0; }
.post-grid + .hero-dots button { background: #d8d8d8; }
.post-grid + .hero-dots button.active { background: #333; }
.hero-dots button.active { background: #fff; }
.hero-mobile { display: none; }

/* ------------------------------- homepage ------------------------------- */
.home-notice { padding: 15px 0 35px; text-align: center; }
.home-notice h2 { font-size: 16px; font-weight: 400; color: #777; font-family: var(--font-text); margin: 0; line-height: 1.6; }

.brand-sep { display: flex; align-items: center; gap: 0; padding: 0 0 35px; }
.brand-sep h4 {
  margin: 0; padding: 0 12.8px; font-size: 16px; letter-spacing: .2px; white-space: nowrap;
  line-height: 1;
}
.brand-sep h4::before, .brand-sep h4::after { content: ''; }

.card-row { display: grid; gap: 30px; margin-bottom: 35px; }
.card-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
.card-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.show-card { display: block; background: #fff; transition: opacity .25s ease; }
.show-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.show-card:hover { opacity: .9; }

.home-copy { padding: 0 0 10px; text-align: center; }
.home-copy h1 { font-size: 28px; margin: 0 0 20px; line-height: 1.3; }
.home-copy h2 { font-size: 19px; margin: 22px 0 10px; }
.home-copy p { color: var(--text); font-size: 15px; }
.home-copy a { color: var(--link); }
.home-copy a:hover { text-decoration: underline; }

/* blog cards */
.section-head { margin: 24px 0 6px; text-align: center; }
.section-head h2 { font-size: 21px; margin-bottom: 10px; }
.section-head p { color: var(--text); font-size: 15px; }
.post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 24px 0 40px; }
.post-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 290px; overflow: hidden; background: #111;
  padding: 30px 18px 16px; text-align: center; justify-content: flex-end;
}
.post-card .bg { position: absolute; inset: 0; z-index: 0; }
.post-card .bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.88) 100%); }
.post-card:hover .bg img { transform: scale(1.05); }
.post-card .date {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: #fff; color: #333; padding: 4px 10px 5px; line-height: 1.1;
  font-family: var(--font-title); text-align: center;
}
.post-card .date b { display: block; font-size: 19px; font-weight: 700; }
.post-card .date span { display: block; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
.post-card .cat {
  position: relative; z-index: 2; align-self: center; display: inline-block;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .3px; padding: 4px 10px; margin-bottom: 10px; text-transform: uppercase;
}
.post-card h3 { position: relative; z-index: 2; font-size: 16px; margin: 0 0 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card h3 a { color: #fff; }
.post-card h3 a:hover { color: rgba(255,255,255,.8); }
.post-card .post-meta {
  position: relative; z-index: 2; margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,.7);
}
.post-card .post-meta a { color: rgba(255,255,255,.7); }
.post-card .post-meta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.post-card .avatar { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.35); }
.post-card .excerpt, .post-card .more { display: none; }

/* newsletter */
.newsletter { padding: 44px 0 60px; text-align: center; }
.newsletter h2 { font-size: 26px; font-weight: 800; color: #1b3f7a; letter-spacing: .2px; margin-bottom: 14px; }
.newsletter p { font-size: 16px; color: #666; margin-bottom: 22px; }
.newsletter form { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.newsletter input {
  width: 295px; height: 50px; border: 1px solid #ccc; background: #fff;
  padding: 0 16px; font-size: 16px; color: #555; outline: none; border-radius: 4px;
}
.newsletter input:focus { border-color: #888; }
.newsletter .btn { height: 50px; padding: 0 24px; font-size: 18px; font-weight: 700; background: #1b3f7a; border-radius: 4px; box-shadow: none; }
.newsletter .btn:hover { background: #142f5c; }

/* services strip */
.services { background: #fff; padding: 30px 0; }
.services .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #333; text-align: center; }
.service-item svg { width: 44px; height: 44px; stroke: #333; fill: none; stroke-width: 1.5; }
.service-item span { font-family: var(--font-title); font-size: 14px; font-weight: 600; line-height: 1.3; }

/* ------------------------------ category page --------------------------- */
.cat-hero {
  position: relative; min-height: 245px; display: flex; align-items: center; justify-content: center;
  background: #10131a center/cover no-repeat; color: #fff; padding: 30px 15px;
  text-align: center;
}
.cat-hero::after { content: ''; position: absolute; inset: 0; background: rgba(12,14,20,.45); }
.cat-hero-inner { position: relative; z-index: 2; max-width: 1220px; width: 100%; }
.cat-hero h1 { color: #fff; font-size: 30px; margin: 0 0 26px; letter-spacing: .5px; }
.cat-hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 34px; }
.cat-hero-links a { color: #fff; font-family: var(--font-title); font-size: 15px; font-weight: 600; line-height: 1.35; opacity: .92; }
.cat-hero-links a:hover { opacity: 1; color: #fff; text-decoration: underline; }
.cat-hero-links small { display: block; font-size: 13px; font-weight: 400; opacity: .75; margin-top: 2px; }

.cat-intro { padding: 30px 0 6px; }
.cat-intro h2 { font-size: 22px; margin-bottom: 12px; }
.cat-intro p { font-size: 15px; color: var(--text); }
.cat-intro .more-text { display: none; }
.cat-intro.open .more-text { display: block; }
.show-more {
  background: none; border: 0; padding: 0; margin-top: 6px;
  font-family: var(--font-title); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #333; border-bottom: 2px solid #333;
  padding-bottom: 2px;
}
.show-more:hover { color: var(--primary); border-color: var(--primary); }

.our-cats { padding: 26px 0 30px; text-align: center; }
.our-cats > .container > h2 { font-size: 30px; }
.our-cats > .container > h2 { font-size: 30px; margin-bottom: 8px; }
.our-cats .sub { color: var(--text); font-size: 16px; margin-bottom: 26px; }
.our-cat-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.our-cat { position: relative; display: block; background: #fff; overflow: hidden; text-align: center; }
.our-cat img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .3s ease; }
.our-cat:hover img { transform: scale(1.04); }
.our-cat .name {
  background: var(--primary); color: #fff; font-family: var(--font-title);
  font-size: 12px; font-weight: 700; padding: 7px 6px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .3px;
}
.our-cat:hover .name { background: var(--primary-dark); }

.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 34px; padding: 10px 0 40px; }
.shop-layout.no-sidebar { grid-template-columns: 1fr; }
.sidebar { font-size: 14px; }
.sidebar-inner { border: 1px solid var(--border); padding: 18px; }
.sidebar h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; color: #666; font-size: 14px; border-bottom: 1px solid var(--border-light); }
.cat-list li:last-child a { border-bottom: 0; }
.cat-list a:hover, .cat-list a.active { color: var(--primary); font-weight: 600; }
.cat-list .n { color: #bbb; font-size: 12px; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 6px 0 18px; font-size: 14px; color: #777; }
.shop-toolbar .left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.shop-toolbar .result-count { color: #777; font-size: 14px; }
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-group label { font-size: 13px; color: #777; }
.shop-toolbar select, .shop-toolbar button.tgl, .form-select {
  height: 38px; border: 1px solid rgba(0,0,0,.1);
  background: #f7f7f7 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 10px 6px; padding: 0 30px 0 12px; font-size: 13.5px; color: #555;
  appearance: none; border-radius: 0; outline: none;
}
.shop-toolbar button.tgl { background-image: none; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; }
.shop-toolbar button.tgl svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.shop-toolbar button.tgl:hover { background: #efefef; }
.view-toggle { display: flex; gap: 4px; }
.view-toggle button { width: 34px; height: 34px; border: 1px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #bbb; }
.view-toggle button.active { color: #333; border-color: #333; }
.view-toggle svg { width: 15px; height: 15px; fill: currentColor; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

.product-card {
  position: relative; background: #fff; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 0 0 18px; text-align: center;
}
.product-card .p-top { position: relative; overflow: hidden; background: #fff; padding: 0; }
.product-card .p-top > a {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: #fff;
}
.product-card .p-top img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  transition: transform .35s ease;
}
.product-card:hover .p-top img { transform: scale(1.03); }
.product-label {
  position: absolute; top: 10px; left: 10px; background: #242424; color: #fff;
  font-family: var(--font-title); font-size: 12px; font-weight: 700;
  padding: 3px 8px; z-index: 3; line-height: 1.5;
}
.product-label.out { background: #b4b4b4; }
.p-actions { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; opacity: 0; transform: translateX(6px); transition: all .25s ease; }
.product-card:hover .p-actions { opacity: 1; transform: none; }
.p-actions button, .p-actions a { width: 36px; height: 36px; background: #fff; border: 0; box-shadow: 0 1px 6px rgba(0,0,0,.14); display: inline-flex; align-items: center; justify-content: center; color: #333; }
.p-actions button:hover, .p-actions a:hover { background: #242424; color: #fff; }
.p-actions svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.p-actions .wish.on svg { fill: #e04343; stroke: #e04343; }

.p-body { padding: 14px 16px 0; display: flex; flex-direction: column; flex: 1; }
.p-flavour { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: #333; margin: 0 0 4px; line-height: 1.3; text-transform: uppercase; letter-spacing: .2px; }
.p-title { font-size: 15px; font-family: var(--font-title); font-weight: 600; color: #333; line-height: 1.45; margin: 0 0 6px; }
.p-flavour{display:none}
.p-title a { color: #333; }
.p-title a:hover { color: rgba(51,51,51,.65); }
.p-stock { font-size: 14px; margin: 0 0 8px; color: var(--stock); }
.p-stock.out { color: var(--out); }
.p-price { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: #242424; margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; justify-content: center; flex-wrap: wrap; }
.p-price del { color: #b4b4b4; font-weight: 400; font-size: 14px; }
.p-price ins { text-decoration: none; }
.p-cart { display: flex; gap: 8px; margin-top: auto; justify-content: center; align-items: stretch; }
.qty { display: inline-flex; align-items: center; border: 1px solid #e0e0e0; height: 38px; flex: 0 0 auto; background: #fafafa; }
.qty button { width: 26px; height: 36px; border: 0; background: transparent; color: #999; font-size: 15px; line-height: 1; }
.qty button:hover { color: var(--primary); }
.qty input { width: 32px; height: 36px; border: 0; background: transparent; text-align: center; font-size: 14px; color: #333; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add-cart {
  height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--primary); color: #fff; border: 0;
  font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: .4px;
  box-shadow: none; white-space: nowrap; padding: 0 12px;
}
.add-cart:hover { background: var(--primary-dark); color: #fff; }
.add-cart.added { background: #242424; }
.add-cart[disabled] { background: var(--primary); color: #fff; opacity: .9; cursor: not-allowed; }

/* list view */
.product-grid.list-view { grid-template-columns: 1fr; }
.list-view .product-card { flex-direction: row; gap: 24px; padding: 20px; text-align: left; }
.list-view .product-card .p-top { width: 240px; flex: 0 0 240px; }
.list-view .product-card .p-top > a { padding: 0; }
.list-view .p-body { padding: 0; }
.list-view .p-price, .list-view .p-cart { justify-content: flex-start; }
.list-view .p-cart { margin-top: 8px; max-width: 320px; }

.pagination { display: flex; gap: 6px; justify-content: center; padding: 34px 0 10px; flex-wrap: wrap; }
.pagination button, .pagination a {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #fff; color: #555; font-size: 14px; padding: 0 10px;
}
.pagination .active { background: #242424; border-color: #242424; color: #fff; }
.pagination button:hover { background: #f2f2f2; }
.empty-state { padding: 40px 0; color: #999; }

/* ------------------------------ product page ---------------------------- */
.product-single { padding: 6px 0 30px; }
.ps-crumbs { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ps-nav { display: flex; gap: 14px; color: #999; }
.ps-nav a { color: #999; font-size: 15px; }
.ps-nav a:hover { color: var(--primary); }
.ps-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; padding: 10px 0 0; }
.ps-gallery { position: sticky; top: 20px; }
.ps-main { position: relative; background: #fff; }
.ps-main img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.ps-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ps-thumbs button { width: 74px; height: 74px; padding: 0; border: 1px solid var(--border); background: #fff; }
.ps-thumbs button.active { border-color: #333; }
.ps-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.ps-summary h1 { font-size: 30px; margin: 0 0 12px; line-height: 1.3; }
.ps-sku { font-size: 13px; color: #999; margin-bottom: 12px; }
.ps-price { font-family: var(--font-title); font-size: 24px; font-weight: 700; color: var(--link); display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.ps-price del { font-size: 17px; color: #b4b4b4; font-weight: 400; }
.ps-price ins { text-decoration: none; }
.ps-stock { display: inline-block; color: var(--stock); font-size: 13px; margin-bottom: 16px; font-weight: 600; }
.ps-stock.out { color: #d9534f; background: #fdecec; padding: 3px 10px; }
.ps-short { color: var(--text); font-size: 15px; margin-bottom: 18px; }
.ps-buy { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; flex-wrap: wrap; }
.ps-buy .qty { height: 46px; }
.ps-buy .qty button { height: 44px; width: 34px; }
.ps-buy .qty input { height: 44px; width: 42px; }
.ps-buy .btn { min-width: 220px; height: 46px; }
.ps-meta { font-size: 13.5px; color: #999; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 20px; }
.ps-meta a { color: #666; }

.tabs { margin-top: 20px; }
.tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab-nav button {
  border: 0; background: none; padding: 14px 22px; font-family: var(--font-title);
  font-size: 15px; font-weight: 700; color: #999; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-nav button.active { color: #242424; border-bottom-color: #242424; }
.tab-panel { display: none; padding: 22px 0; font-size: 15px; line-height: 1.8; max-width: 1100px; }
.tab-panel.active { display: block; }
.tab-panel h2 { font-size: 21px; margin: 26px 0 12px; text-align: left; }
.tab-panel h3 { font-size: 18px; margin: 22px 0 10px; }
.tab-panel ul, .tab-panel ol { padding-left: 22px; }
.tab-panel li { margin-bottom: 8px; }
.tab-panel a { color: var(--link); }
.tab-panel table { margin: 18px 0; }
.tab-panel tr:nth-child(odd) { background: #fafafa; }
.tab-panel th, .tab-panel td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; font-size: 14.5px; }
.tab-panel th { width: 220px; color: #444; font-family: var(--font-title); }
.related { padding: 26px 0 10px; }
.related .section-head { text-align: left; }

/* sticky product bar */
.sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 800;
  box-shadow: 0 2px 14px rgba(0,0,0,.09); transform: translateY(-110%); transition: transform .3s ease;
}
.sticky-bar.show { transform: none; }
.sticky-bar .container { display: flex; align-items: center; gap: 16px; padding: 10px 15px; }
.sticky-bar img { width: 42px; height: 42px; object-fit: contain; }
.sticky-bar .sb-title { font-family: var(--font-title); font-size: 14px; font-weight: 600; color: #333; flex: 1; }
.sticky-bar .sb-price { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--link); }
.sticky-bar .sb-flag { font-size: 12px; color: #d9534f; background: #fdecec; padding: 2px 8px; }
.sticky-bar .wish { background: none; border: 0; color: #666; }
.sticky-bar .wish svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* -------------------------------- cart ---------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; padding: 10px 0 50px; align-items: start; }
.cart-table { width: 100%; font-size: 14px; }
.cart-table th { text-align: left; font-family: var(--font-title); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #999; border-bottom: 1px solid var(--border); padding: 10px 8px; font-weight: 700; }
.cart-table td { border-bottom: 1px solid var(--border-light); padding: 16px 8px; vertical-align: middle; }
.cart-item { display: flex; align-items: center; gap: 14px; }
.cart-item img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--border-light); }
.cart-item .ci-title { font-family: var(--font-title); font-weight: 700; font-size: 14px; color: #333; }
.cart-item .ci-title:hover { color: var(--primary); }
.cart-remove { background: none; border: 0; color: #bbb; font-size: 18px; line-height: 1; padding: 4px 8px; }
.cart-remove:hover { color: #e04343; }
.cart-summary { border: 1px solid var(--border); padding: 22px; }
.cart-summary h3 { font-size: 18px; margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14.5px; color: #666; border-bottom: 1px solid var(--border-light); }
.summary-row.total { border-bottom: 0; font-family: var(--font-title); font-size: 18px; font-weight: 700; color: #242424; padding-top: 14px; }
.cart-empty { padding: 30px 0 50px; }
.cart-empty .btn { margin-top: 10px; }
.coupon { display: flex; gap: 8px; margin: 14px 0; }
.coupon input { flex: 1; height: 42px; border: 1px solid rgba(0,0,0,.12); padding: 0 12px; font-size: 14px; background: #fff; }

/* -------------------------------- forms --------------------------------- */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 14px; font-weight: 600; color: #444; margin-bottom: 6px; font-family: var(--font-title); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; border: 1px solid rgba(0,0,0,.1); background: #f7f7f7;
  padding: 11px 14px; font-size: 14px; color: #555; outline: none; border-radius: 0;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { background: #fff; border-color: rgba(0,0,0,.25); }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 13px; color: #999; }
.form-status { font-size: 14px; padding: 10px 0; }
.form-status.ok { color: var(--stock); }

/* ------------------------------ static pages ---------------------------- */
.page-body { padding: 6px 0 50px; }
.page-body .entry { max-width: 940px; font-size: 15.5px; line-height: 1.8; }
.page-body .entry h1 { font-size: 30px; margin-top: 10px; }
.page-body .entry h2 { font-size: 22px; margin-top: 30px; }
.page-body .entry h3 { font-size: 18px; margin-top: 24px; }
.page-body .entry img { margin: 16px 0; }
.page-body .entry a { color: var(--link); }
.page-body .entry a:hover { text-decoration: underline; }
.page-body .entry ul, .page-body .entry ol { padding-left: 22px; }
.page-body .entry li { margin-bottom: 8px; }
.page-body .entry table { margin: 18px 0; font-size: 14.5px; }
.page-body .entry th, .page-body .entry td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.page-body .entry th { background: #f7f7f7; font-family: var(--font-title); }

/* FAQ accordion */
.faq-list { max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; background: none; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; text-align: left; font-family: var(--font-title); font-size: 16px; font-weight: 700; color: #333; }
.faq-q:hover { color: var(--primary); }
.faq-a { display: none; padding: 0 0 18px; color: var(--text); font-size: 15px; line-height: 1.75; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-q .plus { font-size: 20px; color: #999; transition: transform .2s; line-height: 1; }

/* ------------------------------- blog page ------------------------------ */
.blog-layout { padding: 6px 0 50px; }
.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.post-single { padding: 6px 0 50px; }
.post-single .entry { max-width: 900px; font-size: 16px; line-height: 1.85; }
.post-single .entry h2 { font-size: 22px; margin-top: 30px; }
.post-single .entry h3 { font-size: 18px; margin-top: 24px; }
.post-single .entry img { margin: 18px 0; }
.post-single .entry a { color: var(--link); }
.post-hero { margin: 18px 0 24px; }
.post-hero img { width: 100%; max-height: 480px; object-fit: cover; }
.post-head h1 { font-size: 32px; margin-bottom: 10px; }
.post-meta { font-size: 13px; color: #999; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; align-items: center; }
.post-meta a { color: #999; }

/* -------------------------------- footer -------------------------------- */
.site-footer { background: #fff; color: var(--text); font-size: 15px; }
.footer-main { display: grid; grid-template-columns: 1.6fr .9fr .9fr .9fr .9fr; gap: 30px; padding: 60px 0 40px; }
.footer-main > div { min-width: 0; }
.footer-logo img { width: 210px; margin-bottom: 26px; }
.footer-email-label { font-size: 15px; color: #777; margin: 0 0 2px 26px; }
.footer-title { font-family: var(--font-title); font-weight: 600; font-size: 16px; color: #333; margin: 0 0 18px; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 12px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.footer-list a { color: #777; }
.footer-list a:hover { color: var(--link); }
.footer-list svg { width: 17px; height: 17px; stroke: #555; fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.footer-list li:hover svg { stroke: var(--link); }
.footer-bottom { border-top: 1px solid var(--border); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #999; }
.footer-bottom strong { color: #333; }
.footer-bottom img { width: 505px; max-width: 70vw; }

/* ------------------------------- age gate ------------------------------- */
.age-gate { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.age-gate.hidden { display: none; }
.age-gate-box { background: #fff; max-width: 500px; width: 100%; padding: 44px 40px 34px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.age-gate-box h4 { font-size: 30px; margin-bottom: 16px; font-weight: 700; }
.age-gate-box p { color: #666; font-size: 16px; margin-bottom: 28px; line-height: 1.6; }
.age-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.age-gate-actions .btn { min-width: 167px; height: 44px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; }
.age-gate-actions .btn-outline { background: #f7f7f7; }
.age-gate-error { color: #d33; font-size: 14px; margin-top: 14px; display: none; }
.age-gate-error.show { display: block; }

/* toast */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: #242424; color: #fff;
  padding: 13px 20px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 9998; transform: translateY(20px); opacity: 0; transition: all .28s ease;
  pointer-events: none; max-width: 320px;
}
.toast.show { transform: none; opacity: 1; }
.toast a { color: #8fb4ff; font-weight: 700; margin-left: 6px; }

/* back to top */
.to-top {
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px;
  background: rgba(36,36,36,.9); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center; z-index: 700;
  opacity: 0; visibility: hidden; transition: all .25s;
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1200px) {
  .mega-grid { grid-template-columns: repeat(5, 1fr); }
  .nav-item > a { padding: 10px 10px; font-size: 14px; }
  .our-cat-row { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1024px) {
  :root { --top-h: 40px; --head-h: 60px; }
  .nav-desktop { display: none; }
  .mobile-bar { display: block; }
  .header-main { display: none; }
  .mobile-bar .container { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mobile-bar .logo img { width: 175px; }
  .mobile-bar > .container > button { background: none; border: 0; color: #333; padding: 0; }
  .mobile-bar svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .mobile-tools { display: flex; align-items: center; gap: 2px; }
  .mobile-tools a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #333; position: relative; }
  .mobile-tools .tool-count { position: absolute; top: 3px; right: 2px; left: auto; }
  .top-bar h5 { font-size: 12.5px; }
  .home-notice { padding: 10px 0 20px; }
  .home-notice h2 { font-size: 13px; }
  .hero { aspect-ratio: 1/1; }
  .hero-desktop { display: none; }
  .hero-mobile { display: block; }
  .shop-layout { grid-template-columns: 1fr; gap: 20px; }
  .sidebar { display: none; }
  .sidebar.mobile-open { display: block; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .ps-layout { grid-template-columns: 1fr; gap: 24px; }
  .ps-gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; gap: 24px; }
  .footer-main { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 40px 0 30px; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .services .container { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .our-cat-row { grid-template-columns: repeat(4, 1fr); }
  .cat-hero { min-height: 180px; }
  .cat-hero h1 { font-size: 24px; }
}
@media (max-width: 767px) {
  body { font-size: 15px; }
  h1, .page-title, .home-copy h1 { font-size: 24px; }
  h2, .home-copy h2, .section-head h2 { font-size: 19px; }
  .card-row.cols-4, .card-row.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid.list-view { grid-template-columns: 1fr; }
  .list-view .product-card { flex-direction: column; }
  .list-view .product-card .p-top { width: 100%; flex: none; }
  .post-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .post-card { min-height: 230px; padding: 20px 10px 12px; }
  .post-card h3 { font-size: 14px; }
  .brand-sep h4 { font-size: 14px; }
  .our-cat-row { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
  .footer-logo { grid-column: 1 / -1; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom img { width: 300px; }
  .ps-summary h1 { font-size: 22px; }
  .ps-price { font-size: 20px; }
  .ps-buy .btn { min-width: 0; flex: 1; }
  .services .container { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-item svg { width: 32px; height: 32px; }
  .service-item span { font-size: 12px; }
  .newsletter h2 { font-size: 21px; }
  .newsletter input { width: 210px; }
  .newsletter .btn { padding: 0 18px; font-size: 16px; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { border-bottom: 1px solid var(--border); padding: 12px 0; }
  .cart-table td { border: 0; padding: 6px 0; }
  .cart-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #aaa; margin-bottom: 4px; }
  .age-gate-box { padding: 26px 20px 22px; }
  .age-gate-box h4 { font-size: 22px; }
  .mega { display: none; }
  .home-copy { text-align: left; }
  .home-copy h1 { font-size: 22px; }
  .sticky-bar .sb-title { font-size: 12px; }
  .ps-layout { gap: 16px; }
  .p-flavour { font-size: 15px; }
  .p-title { font-size: 13.5px; }
  .product-card .p-body { padding: 10px 10px 0; }
  .add-cart { font-size: 11px; padding: 0 8px; }
  .qty input { width: 24px; }
  .qty button { width: 22px; }
}
@media (max-width: 420px) {
  .p-cart .qty { display: none; }
  .add-cart { width: 100%; }
}

/* ==========================================================================
   WooCommerce integration
   The theme templates re-use the clone's own class names (.product-grid,
   .product-card, .ps-*, .cat-hero) so WooCommerce output matches the design.
   These rules neutralise the plugin defaults those templates sit inside.
   ========================================================================== */

/* --- loop shell ---------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  list-style: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}
/* The card body is rendered by woocommerce/content-product.php */
ul.products li.product .product-card { height: 100%; }
ul.products li.product .product-card,
ul.products li.product .product-card:hover { box-shadow: none; }
ul.products li.product a img { margin: 0; }

/* --- WooCommerce notices / info ----------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  border: 0;
  border-left: 4px solid var(--primary);
  background: #f6f8fd;
  color: #444;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.woocommerce-error { border-left-color: #d9534f; background: #fdf3f3; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  padding: 9px 16px;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  border-radius: 0;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: var(--primary-dark); color: #fff; }

/* --- breadcrumb --------------------------------------------------------- */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
  font-size: 14px;
  color: #999;
  padding: 14px 0 8px;
  margin: 0;
}
.woocommerce-breadcrumb a { color: #999; }
.woocommerce-breadcrumb a:hover { color: var(--primary); }
.woocommerce-breadcrumb a::after { content: '/'; color: #ccc; margin: 0 7px; }
nav.woocommerce-breadcrumb { line-height: 1.5; }

/* --- result count / ordering ------------------------------------------- */
.woocommerce-result-count { float: none; margin: 0; color: #777; font-size: 14px; }
.woocommerce-ordering { float: none; margin: 0; }
.woocommerce-ordering select {
  height: 38px;
  border: 1px solid rgba(0,0,0,.1);
  background: #f7f7f7;
  padding: 0 12px;
  font-size: 13.5px;
  color: #555;
  border-radius: 0;
  outline: none;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering { margin: 0 0 18px; }
.oz-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 6px 0 18px;
  font-size: 14px;
  color: #777;
}

/* --- pagination --------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination { text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 34px 0 10px;
  flex-wrap: wrap;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 1px solid var(--border);
  float: none;
  margin: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 14px;
  color: #555;
  background: #fff;
  border: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #242424;
  color: #fff;
}

/* --- star rating -------------------------------------------------------- */
.star-rating {
  display: inline-block;
  position: relative;
  width: 5.4em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  font-family: star, sans-serif;
  color: #f7c948;
  font-size: 13px;
}
.product-card .star-rating { margin: 0 auto 4px; }
.woocommerce .star-rating::before { content: 'sssss'; opacity: .25; color: #f7c948; }
.woocommerce .star-rating span::before { content: 'SSSSS'; color: #f7c948; }

/* --- single product ---------------------------------------------------- */
.woocommerce div.product { margin: 0; position: relative; }
.woocommerce div.product .product_title { font-size: 30px; margin: 0 0 12px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  color: var(--link);
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 12px;
}
.woocommerce div.product p.price del { font-size: 17px; color: #b4b4b4; font-weight: 400; opacity: 1; }
.woocommerce div.product p.price ins { text-decoration: none; font-weight: 700; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text);
  font-size: 15px;
  margin-bottom: 18px;
}
.woocommerce div.product .stock { color: var(--stock); font-size: 13px; font-weight: 600; }
.woocommerce div.product .out-of-stock { color: #d9534f; background: #fdecec; padding: 3px 10px; }
.woocommerce div.product form.cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin: 0 0 16px; }
.woocommerce div.product form.cart div.quantity { margin: 0; float: none; }
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"] {
  min-width: 220px;
  height: 46px;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 0 24px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.woocommerce div.product form.cart .button:hover { background: var(--primary-dark); color: #fff; }
.woocommerce div.product form.cart .variations { margin-bottom: 14px; border: 0; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: 4px 10px 4px 0; border: 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations label { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: #333; }
.woocommerce div.product form.cart .variations select {
  height: 40px;
  border: 1px solid rgba(0,0,0,.12);
  background: #f7f7f7;
  padding: 0 12px;
  min-width: 210px;
  border-radius: 0;
}
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty {
  width: 46px;
  height: 46px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-radius: 0;
  -moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity .qty-button,
.woocommerce .quantity .minus,
.woocommerce .quantity .plus { border-radius: 0; }

.woocommerce div.product .product_meta {
  font-size: 13.5px;
  color: #999;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 20px;
}
.woocommerce div.product .product_meta a { color: #666; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }

/* gallery */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: 74px; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  border: 1px solid var(--border);
  opacity: 1;
  padding: 0;
  background: #fff;
  width: 100%;
  height: 74px;
  object-fit: contain;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { border-color: #333; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
  width: 36px;
  height: 36px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid #333;
  border-radius: 50%;
  display: block;
}

/* tabs */
.woocommerce div.product .woocommerce-tabs { margin: 20px 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin: 0 0 -1px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 14px 22px;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: #999;
  text-shadow: none;
  display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: none;
  border-bottom-color: #242424;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #242424; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: #242424; }
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 22px 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  max-width: 1100px;
  border: 0;
  box-shadow: none;
  background: none;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 21px; margin: 26px 0 12px; }
.woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 18px; margin: 22px 0 10px; }
.woocommerce div.product .woocommerce-tabs .panel a { color: var(--link); }
.woocommerce div.product .woocommerce-tabs .panel table { margin: 18px 0; border-collapse: collapse; }
.woocommerce div.product .woocommerce-tabs .panel th,
.woocommerce div.product .woocommerce-tabs .panel td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  font-size: 14.5px;
}
.woocommerce div.product .woocommerce-tabs .panel th { width: 220px; color: #444; font-family: var(--font-title); }

/* related products */
.woocommerce .related,
.woocommerce .upsells { padding: 26px 0 10px; clear: both; }
.woocommerce .related > h2,
.woocommerce .upsells > h2 { font-size: 21px; text-align: left; margin-bottom: 18px; }

/* --- cart -------------------------------------------------------------- */
.woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0 0 24px;
  font-size: 14px;
}
.woocommerce table.shop_table th {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  text-align: left;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
}
.woocommerce table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--border-light);
  padding: 16px 8px;
  vertical-align: middle;
  background: none;
}
.woocommerce table.shop_table td.product-name a { font-family: var(--font-title); font-weight: 700; color: #333; font-size: 14px; }
.woocommerce table.shop_table td.product-thumbnail img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--border-light); }
.woocommerce table.cart img { width: 72px; }
.woocommerce table.shop_table td.actions { padding: 16px 0; }
.woocommerce table.shop_table td.actions .coupon { float: left; display: flex; gap: 8px; align-items: stretch; }
.woocommerce table.shop_table td.actions .coupon .input-text {
  height: 42px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 0 14px;
  min-width: 200px;
  border-radius: 0;
}
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 12px 20px;
  height: auto;
  line-height: 1.2;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.woocommerce .cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--primary-dark); color: #fff; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: #f7f7f7;
  color: #333;
  border-radius: 0;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 20px;
  line-height: 1.2;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: #efefef; color: #333; }
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover { background: var(--primary-dark); }

.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  border: 1px solid var(--border);
  padding: 22px;
  background: #fafafa;
}
.woocommerce .cart-collaterals .cart_totals h2 { font-size: 18px; margin-bottom: 14px; }
.woocommerce .cart-collaterals .cart_totals table { margin: 0 0 16px; }
.woocommerce .cart-collaterals .cart_totals table td,
.woocommerce .cart-collaterals .cart_totals table th { border-bottom: 1px solid #ececec; padding: 10px 0; }
.woocommerce .cart-collaterals .cart_totals .checkout-button { width: 100%; text-align: center; }
.woocommerce .cart-empty { padding: 40px 0; text-align: center; color: #999; }
.woocommerce .return-to-shop { text-align: center; margin-bottom: 50px; }
.woocommerce-cart .cart-layout { padding: 10px 0 50px; }

/* --- checkout ---------------------------------------------------------- */
.woocommerce form .form-row label { font-family: var(--font-title); font-size: 13.5px; font-weight: 600; color: #444; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-input-wrapper input,
.woocommerce .woocommerce-input-wrapper textarea {
  height: 46px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 0 14px;
  font-size: 15px;
  color: #444;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}
.woocommerce form .form-row textarea { height: auto; padding: 12px 14px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: #888; }
.woocommerce-checkout #payment {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid #ececec; }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: 0; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment #place_order { width: 100%; }

/* --- account / forms --------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 240px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border-light); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 16px; font-family: var(--font-title); font-size: 14px; font-weight: 600; color: #555; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--primary); background: #f7f9fd; }
.woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 280px); }
.woocommerce form.login,
.woocommerce form.register { border: 1px solid var(--border); border-radius: 0; padding: 24px; }

/* --- product card: Woo price/rating injected inside the clone markup --- */
.product-card .p-inner { padding: 14px 16px 0; display: flex; flex-direction: column; flex: 1; }
.product-card .p-title a { color: #333; }
.product-card .p-title a:hover { color: rgba(51,51,51,.65); }
.product-card .p-price { margin: 0 0 12px; }
.product-card .p-price .woocommerce-Price-amount { font-weight: 700; }
.product-card .onback-order { color: var(--out); }
.product-card .product-cats { font-size: 12px; color: #b4b4b4; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.product-card .p-short { font-size: 13.5px; line-height: 1.6; color: #888; margin: 0 0 10px; }
.product-card .button.add_to_cart_button.loading::after,
.product-card .button.ajax_add_to_cart.loading::after { top: 50%; margin-top: -8px; }

/* --- responsive: WooCommerce bits -------------------------------------- */
@media (max-width: 1200px) {
  ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .woocommerce .cart-collaterals .cart_totals { max-width: 100%; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100%; }
}
@media (max-width: 767px) {
  ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product .product_title { font-size: 24px; }
  .woocommerce div.product form.cart .button { min-width: 0; width: 100%; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 14px; font-size: 14px; }
  .woocommerce table.shop_table { font-size: 13px; }
  .woocommerce table.shop_table td.actions .coupon { float: none; width: 100%; margin-bottom: 10px; }
  .woocommerce table.shop_table td.actions .coupon .input-text { flex: 1; min-width: 0; }
}

/* --- single product: theme layout hooks -------------------------------- */
.ps-single .ps-gallery,
.ps-single .ps-summary { width: 100%; float: none; }
.woocommerce div.product.ps-single div.images,
.woocommerce div.product.ps-single div.summary { width: 100%; float: none; margin: 0; }
.woocommerce div.product.ps-single div.images .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.woocommerce div.product.ps-single .summary .price { margin-top: 4px; }
.woocommerce div.product.ps-single .summary .woocommerce-product-rating { margin-bottom: 8px; }
.woocommerce div.product.ps-single .summary p.stock { margin: 0 0 14px; font-size: 13px; }
.woocommerce div.product.ps-single .summary .woocommerce-variation-price { margin-bottom: 12px; }
.woocommerce div.product.ps-single .ps-gallery { position: sticky; top: 20px; }
.woocommerce div.product.ps-single span.onsale { display: none; }

/* single product: related / upsells grid already handled by ul.products */
.woocommerce .ps-single + .related ul.products { margin-bottom: 30px; }

/* cart & checkout page shells (rendered through page.php) */
.woocommerce-cart .main-content > .container,
.woocommerce-checkout .main-content > .container { padding-top: 10px; }
.page-hero { text-align: center; padding: 10px 0 26px; }
.page-hero h1 { font-size: 30px; margin: 0 0 8px; }
.page-hero .crumbs { font-size: 14px; color: #999; }
.page-hero .crumbs a { color: #999; }
.page-hero .crumbs a:hover { color: var(--primary); }

/* generic page / post content */
.entry-body { font-size: 15.5px; line-height: 1.85; color: var(--text); max-width: 1000px; }
.entry-body h1, .entry-body h2, .entry-body h3, .entry-body h4 { color: var(--title); }
.entry-body h2 { font-size: 24px; margin: 30px 0 12px; }
.entry-body h3 { font-size: 19px; margin: 24px 0 10px; }
.entry-body a { color: var(--link); }
.entry-body a:hover { text-decoration: underline; }
.entry-body ul, .entry-body ol { padding-left: 22px; }
.entry-body li { margin-bottom: 8px; }
.entry-body img { margin: 18px 0; }
.entry-body blockquote {
  margin: 22px 0; padding: 16px 22px; border-left: 3px solid var(--primary);
  background: #f8f9fc; color: #555; font-style: italic;
}
.entry-body table { margin: 18px 0; }
.entry-body th, .entry-body td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; font-size: 14.5px; }
.entry-body tr:nth-child(odd) { background: #fafafa; }

/* faq accordion */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left;
  padding: 16px 30px 16px 0; position: relative;
  font-family: var(--font-title); font-size: 16px; font-weight: 600; color: #333;
}
.faq-q::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: #999;
}
.faq-item.open .faq-q::after { content: '–'; }
.faq-a { display: none; padding: 0 0 18px; font-size: 15px; color: var(--text); }
.faq-item.open .faq-a { display: block; }

/* blog index */
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 10px 0 50px; }
.blog-card { background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; }
.blog-card .thumb { display: block; overflow: hidden; }
.blog-card .thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .thumb img { transform: scale(1.04); }
.blog-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card .meta { font-size: 12.5px; color: #999; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.blog-card h2 { font-size: 18px; line-height: 1.4; margin: 0 0 10px; }
.blog-card h2 a { color: #333; }
.blog-card h2 a:hover { color: var(--primary); }
.blog-card p { font-size: 14.5px; color: var(--text); margin: 0 0 14px; }
.blog-card .more-link {
  margin-top: auto; font-family: var(--font-title); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--primary);
}
.post-single .thumb { margin: 0 0 24px; }
.post-single .thumb img { width: 100%; height: auto; }
.post-single .post-meta-line { font-size: 13px; color: #999; margin-bottom: 20px; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding: 22px 0; font-size: 14px; }

/* 404 + search */
.center-box { text-align: center; padding: 70px 0 90px; }
.center-box h1 { font-size: 64px; margin: 0 0 10px; color: var(--primary); }
.center-box p { font-size: 16px; color: var(--text); margin-bottom: 24px; }
.search-page-form { max-width: 520px; margin: 0 auto 30px; display: flex; gap: 8px; }
.search-page-form input[type="search"] {
  flex: 1; height: 46px; border: 1px solid #ccc; padding: 0 14px; font-size: 15px; border-radius: 0; outline: none;
}

/* --- single post: clone geometry (hero capped, measure 900) ------------- */
.post-single .thumb { margin: 18px 0 24px; }
.post-single .thumb img { width: 100%; max-height: 480px; object-fit: cover; }
.post-single .entry-body { max-width: 900px; font-size: 16px; line-height: 1.85; }
.post-single .entry-body h2 { font-size: 22px; margin: 30px 0 12px; }
.post-single .entry-body h3 { font-size: 18px; margin: 24px 0 10px; }
.post-single .post-meta-line { margin: 0 0 4px; }