/* ═══════════════════════════════════════════════════════════
   DEREB — main.css
   Design tokens + full site styles
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1. DESIGN TOKENS
─────────────────────────────────────────── */
:root {
  --ink:    #12100E;
  --cream:  #F2ECE2;
  --amber:  #B8872C;
  --warm:   #F7F4EF;
  --white:  #FFFFFF;
  --gray-1: #F5F3EF;
  --gray-2: #E8E3DA;
  --gray-3: #C4B9A8;
  --gray-4: #8A7E70;
  --gray-5: #554F47;

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

  --header-h: 68px;
  --radius:   4px;
  --radius-lg: 8px;
  --shadow-sm: 0 2px 8px rgba(18,16,14,.08);
  --shadow-md: 0 4px 24px rgba(18,16,14,.12);
  --shadow-lg: 0 8px 48px rgba(18,16,14,.16);

  --transition: 0.22s ease;
  --container:  1220px;
  --gap:        2rem;
}

/* ───────────────────────────────────────────
   2. RESET / BASE
─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  padding-top: var(--header-h);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: 1.25;
  font-weight: 700;
}

button { cursor: pointer; border: none; background: none; font-family: inherit; }

input, select, textarea {
  font-family: var(--font-body);
  font-size: 1rem;
}

.screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  padding: .5rem 1rem;
  background: var(--amber);
  color: #fff;
  font-size: .875rem;
  transform: translateY(-100%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

/* ───────────────────────────────────────────
   3. CONTAINER
─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ───────────────────────────────────────────
   4. BUTTONS
─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform .12s;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.btn:active { transform: scale(.97); }

/* Amber (primary) */
.btn--amber {
  background: var(--amber);
  color: #fff;
  border: 2px solid var(--amber);
}
.btn--amber:hover { background: #a07525; border-color: #a07525; }

/* Dark */
.btn--dark {
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
}
.btn--dark:hover { background: #2b2723; border-color: #2b2723; }

/* Outline dark */
.btn--outline-dark {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn--outline-dark:hover { background: var(--ink); color: #fff; }

/* Outline light */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.6);
}
.btn--outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--gray-2);
}
.btn--ghost:hover { border-color: var(--ink); }

/* Sizes */
.btn--lg { padding: .9375rem 2.25rem; font-size: 1rem; }
.btn--sm { padding: .5rem 1.25rem; font-size: .875rem; }
.btn--block { width: 100%; justify-content: center; }

/* ───────────────────────────────────────────
   5. SITE HEADER
─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-h);
  background: var(--ink);
  z-index: 900;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35); }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Logo */
.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.site-header__logo img { height: 40px; width: auto; }
.site-header__logo-text {
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}

/* Nav */
.site-nav { flex: 1; display: flex; justify-content: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .875rem;
  color: rgba(255,255,255,.82);
  font-size: .9375rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}
.nav__link:hover,
.nav__link.is-active { color: #fff; background: rgba(255,255,255,.08); }

/* Dropdown arrow */
.nav__arrow {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition);
}
.nav__item--has-dropdown:hover .nav__arrow,
.nav__item--has-dropdown.is-open .nav__arrow { transform: rotate(180deg); }

/* Dropdown */
.nav__dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: .5rem 0;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  transform: translateX(-50%) translateY(-6px);
  z-index: 100;
}
.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: .625rem 1.25rem;
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  transition: color var(--transition), background var(--transition);
}
.nav__dropdown-link:hover { color: #fff; background: rgba(255,255,255,.06); }

/* Header actions */
.site-header__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__phone {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.85);
  font-size: .9375rem;
  font-weight: 500;
  transition: color var(--transition);
}
.site-header__phone:hover { color: #fff; }
.site-header__phone-icon { flex-shrink: 0; }

/* Hamburger */
.site-header__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  color: #fff;
  transition: background var(--transition);
}
.site-header__toggle:hover { background: rgba(255,255,255,.08); }

.hamburger { display: flex; flex-direction: column; gap: 5px; }
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-is-open .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-is-open .hamburger span:nth-child(2) { opacity: 0; }
.nav-is-open .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ───────────────────────────────────────────
   6. MOBILE MENU
─────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 90vw);
  height: 100%;
  background: var(--ink);
  z-index: 950;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  color: #fff;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__inner {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100%;
}

.mobile-menu__close {
  align-self: flex-end;
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.mobile-menu__close:hover { color: #fff; }

.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list .nav__link {
  font-size: 1.125rem;
  padding: .875rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 0;
  color: rgba(255,255,255,.85);
}
.mobile-nav__list .nav__link:hover { color: #fff; background: transparent; }
.mobile-nav__list .nav__dropdown {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: none;
  border: none;
  padding: 0 0 0 1rem;
  background: transparent;
  display: none;
}
.mobile-nav__list .nav__item--has-dropdown.is-open .nav__dropdown { display: block; }

.mobile-menu__contacts {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-menu__phone {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

.mobile-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 940;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.mobile-menu__overlay.is-visible { opacity: 1; visibility: visible; }

/* ───────────────────────────────────────────
   7. PAGE TITLE BAR
─────────────────────────────────────────── */
.page-title-bar {
  padding: 4rem 0 3rem;
}

.page-title-bar--dark {
  background: var(--ink);
  color: #fff;
}

.page-title-bar__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: #fff;
  margin-top: .5rem;
}

.page-title-bar__pre {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: .5rem;
}

.page-title-bar__desc { color: rgba(255,255,255,.7); margin-top: .75rem; max-width: 60ch; }

.page-title-bar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.page-title-bar__author {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  margin-top: 1rem;
}
.page-title-bar__author img { border-radius: 50%; }

/* ───────────────────────────────────────────
   8. BREADCRUMBS
─────────────────────────────────────────── */
.woocommerce-breadcrumb,
.breadcrumb {
  font-size: .8125rem;
  color: rgba(255,255,255,.5);
  margin-bottom: .5rem;
}
.woocommerce-breadcrumb a,
.breadcrumb a { color: rgba(255,255,255,.5); }
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover { color: #fff; }

/* ───────────────────────────────────────────
   9. HERO
─────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03);
  transition: transform 8s ease;
}
.hero:hover .hero__bg { transform: scale(1.0); }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(18,16,14,.82) 0%,
    rgba(18,16,14,.55) 60%,
    rgba(18,16,14,.3) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding-block: 6rem;
}

.hero__eyebrow {
  display: inline-block;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 1.25rem;
  padding: .3rem .875rem;
  border: 1px solid rgba(184,135,44,.4);
  border-radius: 2rem;
}

.hero__heading {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.hero__heading em {
  font-style: italic;
  color: var(--amber);
}

.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: rgba(255,255,255,.78);
  max-width: 52ch;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll span {
  display: block;
  width: 2px;
  height: 48px;
  background: rgba(255,255,255,.3);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .3; height: 30px; }
  50% { opacity: 1; height: 48px; }
}

/* ───────────────────────────────────────────
   10. STATS STRIP
─────────────────────────────────────────── */
.stats-strip {
  background: var(--cream);
  border-top: 1px solid var(--gray-2);
  border-bottom: 1px solid var(--gray-2);
  padding: 3rem 0;
}

.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--gray-2);
}
.stat-item:last-child { border-right: none; }

.stat-item__value {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-item__label {
  font-size: .875rem;
  color: var(--gray-5);
  line-height: 1.4;
}

/* ───────────────────────────────────────────
   11. SECTIONS
─────────────────────────────────────────── */
.section { padding: 5rem 0; }
.section--warm { background: var(--warm); }

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.section-header__heading {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  margin-bottom: .75rem;
}
.section-header__sub {
  font-size: 1.0625rem;
  color: var(--gray-5);
}

.section-footer {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* ───────────────────────────────────────────
   12. PROCESS STEPS
─────────────────────────────────────────── */
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  counter-reset: steps;
}

.process-step {
  position: relative;
  padding: 2rem 1.5rem 1.75rem;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: box-shadow var(--transition), transform var(--transition);
}
.process-step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Connecting line between steps */
.process-step + .process-step::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: -1.25rem;
  width: .5rem;
  height: 2px;
  background: var(--gray-2);
}

.process-step__num {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  margin-bottom: .75rem;
  position: relative;
  z-index: 0;
}
.process-step__num::after {
  content: '';
  position: absolute;
  inset: -.25rem -.5rem;
  background: var(--amber);
  opacity: .1;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0);
  transition: transform .3s;
}
.process-step:hover .process-step__num::after { transform: scale(1); }

.process-step__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.process-step__desc {
  font-size: .9375rem;
  color: var(--gray-5);
  line-height: 1.65;
}

/* ───────────────────────────────────────────
   13. PORTFOLIO GRID
─────────────────────────────────────────── */
.portfolio-grid {
  display: grid;
  gap: 1.5rem;
}
.portfolio-grid--3 { grid-template-columns: repeat(3, 1fr); }
.portfolio-grid--4 { grid-template-columns: repeat(4, 1fr); }

.portfolio-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.portfolio-card__inner {
  display: block;
  position: relative;
  overflow: hidden;
}

/* 4:3 ratio */
.portfolio-card__thumb-wrap {
  position: relative;
  padding-top: 75%;
  overflow: hidden;
  background: var(--gray-1);
}
.portfolio-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.portfolio-card__thumb--placeholder {
  position: absolute;
  inset: 0;
  background: var(--gray-2);
}
.portfolio-card__inner:hover .portfolio-card__thumb { transform: scale(1.06); }

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,16,14,.85) 0%, rgba(18,16,14,.0) 60%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.portfolio-card__inner:hover .portfolio-card__overlay { opacity: 1; }

.portfolio-card__overlay-inner { color: #fff; }
.portfolio-card__cat {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: .4rem;
}
.portfolio-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.portfolio-card__excerpt {
  font-size: .875rem;
  color: rgba(255,255,255,.75);
  margin-bottom: .75rem;
}

/* Placeholder card (no CPT) */
.portfolio-card__placeholder {
  position: absolute;
  inset: 0;
  background: var(--gray-2);
}

/* ───────────────────────────────────────────
   14. BLOG GRID
─────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-2);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* 16:9 thumb */
.blog-card__thumb-wrap {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--gray-1);
}
.blog-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.blog-card__thumb--placeholder {
  position: absolute;
  inset: 0;
  background: var(--gray-2);
}
.blog-card__thumb-wrap:hover .blog-card__thumb { transform: scale(1.04); }

.blog-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .875rem;
  flex-wrap: wrap;
}

.blog-card__category {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--amber);
  background: rgba(184,135,44,.1);
  padding: .25rem .625rem;
  border-radius: 2rem;
  transition: background var(--transition);
}
.blog-card__category:hover { background: rgba(184,135,44,.18); }

.blog-card__date {
  font-size: .8125rem;
  color: var(--gray-4);
}

.blog-card__title {
  font-size: 1.125rem;
  margin-bottom: .625rem;
  line-height: 1.35;
}
.blog-card__title a:hover { color: var(--amber); }

.blog-card__excerpt {
  font-size: .9375rem;
  color: var(--gray-5);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1rem;
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--amber);
  margin-top: auto;
  transition: gap var(--transition);
}
.blog-card__more:hover { gap: .625rem; }

/* Category badge (single post) */
.post-category-badge {
  display: inline-block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--amber);
  background: rgba(184,135,44,.15);
  padding: .3rem .75rem;
  border-radius: 2rem;
}

/* Post date */
.post-date { font-size: .8125rem; color: rgba(255,255,255,.55); }

/* Post tag */
.post-tag {
  display: inline-block;
  font-size: .8125rem;
  padding: .25rem .75rem;
  border-radius: 2rem;
  background: var(--gray-1);
  color: var(--gray-5);
  border: 1px solid var(--gray-2);
  transition: background var(--transition), border-color var(--transition);
}
.post-tag:hover { background: var(--cream); border-color: var(--gray-3); }

/* ───────────────────────────────────────────
   15. SINGLE POST
────────────────────�����������─────────────���──────── */
.single-post { padding-block: 3rem; }
.single-post__hero-image {
  margin-bottom: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.single-post__hero-image img { width: 100%; object-fit: cover; max-height: 520px; }

.single-post__layout { max-width: 800px; margin: 0 auto; }
.single-post__content { }

.single-post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-2);
}
.single-post__tags-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-4);
  margin-right: .25rem;
}

/* Post navigation */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-2);
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.25rem;
  background: var(--gray-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-2);
  transition: background var(--transition), border-color var(--transition);
}
.post-nav__link:hover { background: var(--cream); border-color: var(--gray-3); }
.post-nav__link--right { text-align: right; }
.post-nav__dir {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--amber);
}
.post-nav__link--right .post-nav__dir { justify-content: flex-end; }
.post-nav__title {
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}

/* ───────────────────────────────────────────
   16. PROSE (content area)
─────────────────────────────────────────── */
.prose {
  max-width: 72ch;
  color: var(--ink);
  line-height: 1.75;
}
.prose h2 { font-size: 1.625rem; margin-top: 2.25rem; margin-bottom: .875rem; }
.prose h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: .75rem; }
.prose h4 { font-size: 1.0625rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.prose p { margin-bottom: 1.25rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #8f6620; }
.prose blockquote {
  border-left: 3px solid var(--amber);
  padding: .75rem 1.5rem;
  background: var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.75rem 0;
  font-style: italic;
  color: var(--gray-5);
}
.prose img { border-radius: var(--radius-lg); margin: 1.75rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .9375rem; }
.prose th, .prose td { padding: .75rem 1rem; border: 1px solid var(--gray-2); text-align: left; }
.prose th { background: var(--gray-1); font-weight: 600; }
.prose code {
  font-size: .875em;
  background: var(--cream);
  padding: .1em .4em;
  border-radius: 3px;
  font-family: monospace;
}
.prose pre {
  background: var(--ink);
  color: var(--cream);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 1.75rem 0;
}

/* ───────────────────────────────────────────
   17. SITE CONTENT + SIDEBAR
─────────────────────────────────────────── */
.site-content { padding-block: 3rem; }

.site-content__with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2.5rem;
  align-items: start;
}

.site-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.sidebar-widget {
  background: var(--gray-1);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.sidebar-widget__title {
  font-size: 1rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--gray-2);
}

/* ───────────────────────────────────────────
   18. WOOCOMMERCE — ARCHIVE
─────────────────────────────────────────── */
.wc-archive-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: start;
  padding-block: 3rem;
}

.wc-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

/* WC toolbar */
.woocommerce-products-header { display: none; }

.woocommerce-ordering select {
  padding: .5rem 2rem .5rem .875rem;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-body);
  font-size: .875rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2312100E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  cursor: pointer;
}

.woocommerce-result-count {
  font-size: .875rem;
  color: var(--gray-4);
  margin: 0;
}

/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.products-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* WC loop wrapper */
ul.products, .woocommerce ul.products {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

/* Product card */
.product-card {
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.product-card__thumb-wrap {
  position: relative;
  padding-top: 75%;
  overflow: hidden;
  background: var(--gray-1);
}
.product-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.product-card__thumb-wrap:hover .product-card__thumb { transform: scale(1.05); }

/* Badges */
.product-card__badge {
  position: absolute;
  top: .875rem;
  right: .875rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .25rem .625rem;
  border-radius: 2rem;
}
.product-card__badge--sale { background: var(--amber); color: #fff; }
.product-card__badge--oos { background: var(--gray-3); color: #fff; }

.product-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card__title {
  font-size: 1rem;
  margin-bottom: .5rem;
  line-height: 1.3;
  flex: 1;
}
.product-card__title a:hover { color: var(--amber); }
.product-card__price {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
}
.product-card__btn { width: 100%; justify-content: center; }

/* WC price */
.woocommerce-Price-amount { font-weight: 600; }
ins .woocommerce-Price-amount { color: var(--amber); }
del .woocommerce-Price-amount { color: var(--gray-4); font-size: .875em; }

/* WC pagination */
.woocommerce-pagination, .woocommerce nav.woocommerce-pagination {
  margin-top: 2.5rem;
}
.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: .375rem;
  flex-wrap: wrap;
  padding: 0;
  border: none;
}
.woocommerce-pagination ul li { margin: 0; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .75rem;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  font-size: .9375rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.woocommerce-pagination ul li a:hover { background: var(--cream); border-color: var(--gray-3); }
.woocommerce-pagination ul li span.current {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ───────────────────────────────────────────
   19. WOOCOMMERCE — SINGLE PRODUCT
─────────────────────────────────────────── */
.single-product-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  padding-block: 3rem;
  align-items: start;
}

.single-product-layout__gallery {}

/* Woo gallery */
.woocommerce-product-gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.woocommerce-product-gallery img { border-radius: var(--radius-lg); }
.woocommerce-product-gallery__trigger { display: none; }
.flex-viewport { border-radius: var(--radius-lg); overflow: hidden; }

/* Summary */
.product-summary__category {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: .75rem;
}
.product-summary__category a { color: inherit; }

.product-summary__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: .875rem;
  line-height: 1.2;
}

.product-summary__price .price {
  font-size: 1.625rem;
  font-weight: 700;
  display: block;
  margin-bottom: 1.25rem;
}

.product-summary__short-desc {
  font-size: .9375rem;
  color: var(--gray-5);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-2);
}

.product-summary__atc { margin-bottom: 1.5rem; }

/* WC qty + add-to-cart */
.quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  overflow: hidden;
  margin-right: .75rem;
}
.qty {
  width: 3.5rem;
  height: 2.75rem;
  border: none;
  text-align: center;
  font-size: 1rem;
  background: #fff;
}
.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.75rem;
  background: var(--amber);
  color: #fff;
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.single_add_to_cart_button:hover { background: #a07525; border-color: #a07525; }

.product-summary__meta {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--gray-4);
}
.product-summary__meta span { display: block; margin-bottom: .25rem; }

/* Dark CTA block */
.product-cta-block {
  background: var(--ink);
  border-radius: var(--radius-lg);
  margin: 1.75rem 0;
  overflow: hidden;
}
.product-cta-block__inner {
  padding: 1.75rem;
  color: #fff;
}
.product-cta-block__heading {
  font-family: var(--font-head);
  font-size: 1.25rem;
  margin-bottom: .625rem;
}
.product-cta-block__text {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.product-cta-block__actions {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.product-cta-block__phone {
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  transition: color var(--transition);
}
.product-cta-block__phone:hover { color: var(--amber); }

/* Trust badges */
.trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--gray-5);
  padding: .625rem .875rem;
  background: var(--gray-1);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
}
.trust-badge__icon { flex-shrink: 0; color: var(--amber); }

/* Product tabs */
.single-product-tabs { padding-block: 3rem; border-top: 1px solid var(--gray-2); }
.woocommerce-tabs .tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-2);
  margin: 0 0 2rem;
  padding: 0;
}
.woocommerce-tabs .tabs li {
  position: relative;
  list-style: none;
}
.woocommerce-tabs .tabs li a {
  display: block;
  padding: .875rem 1.5rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--gray-4);
  transition: color var(--transition);
}
.woocommerce-tabs .tabs li.active a { color: var(--ink); }
.woocommerce-tabs .tabs li.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--amber);
}
.woocommerce-Tabs-panel { max-width: 800px; }

/* Related products */
.single-product-related { padding-bottom: 4rem; }
.single-product-related__heading {
  font-size: 1.5rem;
  margin-bottom: 1.75rem;
}

/* ───────────────────────────────────────────
   20. CTA STRIP
─────────────────────────────────────────── */
.cta-strip {
  background: var(--ink);
  padding: 4rem 0;
}
.cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-strip__heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: #fff;
  margin-bottom: .375rem;
}
.cta-strip__sub {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
}
.cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
}

/* ───────────────────────────────────────────
   21. CTA SECTION (homepage)
─────────────────────────────────────────── */
.cta-section {
  background: var(--cream);
}
.cta-section__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  align-items: center;
}
.cta-section__heading {
  font-size: clamp(1.625rem, 2.5vw, 2rem);
  margin-bottom: 1.25rem;
}
.cta-section__list {
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--gray-5);
  font-size: .9375rem;
  line-height: 2;
}
.cta-section__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cta-section__wa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  color: #25d366;
  transition: opacity var(--transition);
}
.cta-section__wa:hover { opacity: .8; }

/* ───────────────────────────────────────────
   22. SITE FOOTER
─────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 3rem;
  padding-block: 4rem;
}

.site-footer__logo-text {
  display: block;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.site-footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1rem; }

.site-footer__desc {
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  color: rgba(255,255,255,.55);
}

.site-footer__social {
  display: flex;
  gap: .75rem;
}
.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  transition: background var(--transition), color var(--transition);
}
.footer-social__link:hover { background: var(--amber); color: #fff; }

.site-footer__nav-heading {
  font-family: var(--font-body);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  margin-bottom: 1.25rem;
}

.footer-nav { display: flex; flex-direction: column; gap: .625rem; }
.footer-nav li a {
  font-size: .9375rem;
  color: rgba(255,255,255,.65);
  transition: color var(--transition);
}
.footer-nav li a:hover { color: #fff; }

.footer-contacts { display: flex; flex-direction: column; gap: .875rem; }
.footer-contacts__item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: rgba(255,255,255,.65);
}
.footer-contacts__item a { color: inherit; transition: color var(--transition); }
.footer-contacts__item a:hover { color: #fff; }
.footer-contacts__item--address { align-items: flex-start; }
.footer-contacts__icon { flex-shrink: 0; color: var(--amber); margin-top: .15rem; }

.footer-contacts__hours {
  margin-top: 1rem;
  font-size: .875rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 1.25rem;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.site-footer__copy { font-size: .875rem; color: rgba(255,255,255,.35); }
.site-footer__legal a { font-size: .875rem; color: rgba(255,255,255,.35); transition: color var(--transition); }
.site-footer__legal a:hover { color: rgba(255,255,255,.7); }

/* ───────────────────────────────────────────
   23. 404
─────────────────────────────────────────── */
.error-404 {
  text-align: center;
  padding-block: 6rem;
}
.error-404__inner { max-width: 640px; margin: 0 auto; }
.error-404__number {
  font-family: var(--font-head);
  font-size: clamp(7rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
  margin-bottom: -1rem;
}
.error-404__heading { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.error-404__message {
  font-size: 1.0625rem;
  color: var(--gray-5);
  max-width: 52ch;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
.error-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.error-404__search { margin-top: 1.5rem; }
.error-404__search p { font-size: .9375rem; color: var(--gray-4); margin-bottom: .75rem; }

/* Search form */
.search-form {
  display: flex;
  gap: .5rem;
  max-width: 400px;
  margin: 0 auto;
}
.search-form input[type="search"] {
  flex: 1;
  padding: .75rem 1rem;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  font-size: .9375rem;
  outline: none;
  transition: border-color var(--transition);
}
.search-form input[type="search"]:focus { border-color: var(--amber); }
.search-form button[type="submit"] {
  padding: .75rem 1.25rem;
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.search-form button[type="submit"]:hover { background: #a07525; }

/* ───────────────────────────────────────────
   24. PAGINATION
─────────────────────────────────────────── */
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.nav-links a,
.nav-links span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .75rem;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  font-size: .9375rem;
  color: var(--ink);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-links a:hover { background: var(--cream); border-color: var(--gray-3); }
.nav-links .current {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.nav-links .dots { border: none; }

/* ───────────────────────────────────────────
   25. NO RESULTS
─────────────────────────────────────────── */
.no-results {
  padding: 3rem 0;
  text-align: center;
}
.no-results__heading { font-size: 1.5rem; margin-bottom: 1rem; }

/* ───────────────────────────────────────────
   26. PAGE CONTENT
─────────────────────────────────────────── */
.page-content { padding-block: 3rem; }
.page-content__featured-image {
  margin-bottom: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.page-content__featured-image img { width: 100%; max-height: 480px; object-fit: cover; }

/* ───────────────────────────────────────────
   27. REVEAL ANIMATION
─────────────────────────────────────────── */
[data-reveal] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal] > *.is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal] > *:nth-child(1) { transition-delay: .05s; }
[data-reveal] > *:nth-child(2) { transition-delay: .13s; }
[data-reveal] > *:nth-child(3) { transition-delay: .21s; }
[data-reveal] > *:nth-child(4) { transition-delay: .29s; }

/* ───────────────────────────────────────────
   28. WC NOTICES
─────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: .9375rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.woocommerce-message { background: #e8f5e9; color: #1b5e20; border-left: 4px solid #4caf50; }
.woocommerce-error { background: #fdecea; color: #7f1d1d; border-left: 4px solid #ef4444; }
.woocommerce-info { background: #e3f2fd; color: #0c3f6e; border-left: 4px solid #3b82f6; }

/* ───────────────────────────────────────────
   29. RESPONSIVE
─────────────────────────────────────────── */

/* ── 1100px ── */
@media (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .single-product-layout { grid-template-columns: 1fr; gap: 2rem; }
  .woocommerce-product-gallery { position: static; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--gray-2); }
}

/* ── 900px ── */
@media (max-width: 1200px) {
  .site-nav { display: none; }
  .site-header__phone-label { display: none; }
  .site-header__toggle { display: flex; }
  .site-content__with-sidebar { grid-template-columns: 1fr; }
  .site-sidebar { position: static; }
  .wc-archive-layout { grid-template-columns: 1fr; }
  .wc-sidebar { position: static; }
  .portfolio-grid--3, .portfolio-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .cta-section__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .trust-badges { grid-template-columns: 1fr; }
}

/* ── 680px ── */
@media (max-width: 680px) {
  :root { --gap: 1.25rem; }

  .site-header__actions .btn { display: none; }

  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--gray-2); }
  .stat-item:last-child { border-bottom: none; }

  .process__grid { grid-template-columns: 1fr; }
  .portfolio-grid--3, .portfolio-grid--4 { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  ul.products, .woocommerce ul.products { grid-template-columns: 1fr; }
  .products-grid--4 { grid-template-columns: repeat(2, 1fr); }

  .cta-strip__inner { flex-direction: column; text-align: center; }
  .cta-strip__actions { width: 100%; justify-content: center; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }

  .post-nav { grid-template-columns: 1fr; }

  .woocommerce-tabs .tabs { overflow-x: auto; }
}

/* ── 440px ── */
@media (max-width: 440px) {
  .btn--lg { padding: .8125rem 1.5rem; font-size: .9375rem; }
  .hero__heading { font-size: 2rem; }
  .error-404__number { font-size: 7rem; }
}

/* ───────────────────────────────────────────
   30. UTILITY
─────────────────────────────────────────── */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* Woo cart icon in header (if used) */
.site-header__cart {
  position: relative;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.82);
  transition: color var(--transition);
}
.site-header__cart:hover { color: #fff; }
.cart-count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 18px; height: 18px;
  background: var(--amber);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Page links (multi-page posts) */
.page-links {
  margin: 2rem 0;
  font-size: .9375rem;
}

/* ====================================
   DEREB THEME — Quick Fixes v1.1
   ==================================== */

/* Page title bar for ALL pages */
.page-title-bar {
  background: var(--ink);
  padding: 48px 0 44px;
  margin-bottom: 0;
}
.page-title-bar .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.page-title-bar h1 {
  font-family: var(--ff-heading);
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
.page-title-bar .breadcrumb {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242,236,226,0.45);
  white-space: nowrap;
  padding-bottom: 8px;
}
.page-title-bar .breadcrumb a {
  color: rgba(242,236,226,0.55);
  text-decoration: none;
}
.page-title-bar .breadcrumb a:hover { color: var(--amber); }

/* Sidebar link colors */
.shop-sidebar a,
.widget a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}
.shop-sidebar a:hover, .widget a:hover { color: var(--amber); }
.shop-sidebar .widget-title, .widget .widget-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--amber);
}

/* WooCommerce product — single product layout */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: start;
  margin-top: 48px;
}
.woocommerce div.product .woocommerce-product-gallery {
  grid-column: 1;
}
.woocommerce div.product .summary {
  grid-column: 2;
  position: sticky;
  top: 90px;
}
.woocommerce div.product .product_title {
  font-family: var(--ff-heading);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}
.woocommerce div.product .price {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 24px;
}
.woocommerce div.product form.cart button {
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--ink);
  padding: 16px 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
}
.woocommerce div.product form.cart button:hover {
  background: transparent;
  color: var(--ink);
}

/* Navigation horizontal fit */
.main-nav .nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}
.main-nav .nav-list > li > a {
  font-size: 10.5px;
  padding: 0 10px;
  white-space: nowrap;
}

/* Header phone smaller */
.header-phone {
  font-size: 12px;
  white-space: nowrap;
}

/* Active nav item */
.main-nav .nav-list > li > a.active,
.main-nav .nav-list > li.current-menu-item > a,
.main-nav .nav-list > li.current-menu-parent > a {
  color: var(--amber) !important;
  background: transparent !important;
}

/* Woocommerce shop sidebar */
.woocommerce-sidebar {
  min-width: 220px;
  max-width: 260px;
}
.product-category-list li {
  border-bottom: 1px solid rgba(18,16,14,0.08);
}
.product-category-list li a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink);
}

/* Shop sort/filter bar */
.woocommerce-result-count {
  font-size: 13px;
  color: rgba(18,16,14,0.45);
}
.woocommerce-ordering select {
  border: 1px solid rgba(18,16,14,0.15);
  border-radius: 2px;
  padding: 6px 12px;
  font-size: 13px;
  background: white;
}

/* Portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.portfolio-item-card {
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(18,16,14,0.1);
  transition: transform 0.3s, border-color 0.3s;
}
.portfolio-item-card:hover {
  transform: translateY(-4px);
  border-color: var(--amber);
}
.portfolio-item-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.45s;
}
.portfolio-item-card:hover img { transform: scale(1.04); }
.portfolio-item-card .card-body {
  padding: 16px 20px;
  background: white;
}
.portfolio-item-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* Product cards in grid */
.product-card {
  border: 1px solid rgba(18,16,14,0.1);
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
  background: white;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--amber);
}
.product-card__img-wrap {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--warm);
}
.product-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s;
}
.product-card:hover .product-card__img-wrap img { transform: scale(1.04); }
.product-card__body {
  padding: 16px 20px 20px;
}
.product-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.35;
}
.product-card__title a { color: inherit; text-decoration: none; }
.product-card:hover .product-card__title a { color: var(--amber); }
.product-card__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}

/* Responsive fixes */
@media (max-width: 1100px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
  }
  .woocommerce div.product .summary {
    grid-column: 1;
    position: static;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .main-nav .nav-list > li > a {
    font-size: 10px;
    padding: 0 8px;
  }
}
/* DEREB FIX v1.3 - 1778193276807 */


/* ================================================
   DEREB v1.3 — All Critical Fixes
   ================================================ */

/* Front page — full width, no container */
.front-page-main { padding: 0; margin: 0; }
.front-page-main > * { max-width: none !important; }
.front-page-main .vc_row,
.front-page-main .wpb_row,
.front-page-main section { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Header layout */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: #12100E;
  height: 68px;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 68px;
  max-width: none;
}
.header-logo { flex-shrink: 0; }
.header-logo a { color: #F2ECE2; text-decoration: none; font-family: 'Playfair Display',serif; font-size: 22px; font-weight: 700; }
.header-logo img { height: 40px; width: auto; }
.main-nav { flex: 1; overflow: hidden; min-width: 0; }
.header-actions { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }

/* Nav list */
.nav-list { display: flex; list-style: none; padding: 0; margin: 0; flex-wrap: nowrap; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: flex; align-items: center; height: 68px;
  padding: 0 9px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(242,236,226,0.75); text-decoration: none;
  white-space: nowrap; transition: color 0.2s;
}
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-parent > a { color: #B8872C !important; }

/* Dropdown */
.nav-list .sub-menu {
  position: absolute; top: 68px; left: 0; z-index: 500;
  min-width: 220px; background: #fff;
  border-top: 2px solid #B8872C;
  box-shadow: 0 8px 24px rgba(18,16,14,0.12);
  border-radius: 0 0 3px 3px;
  padding: 6px 0; list-style: none;
  display: none;
}
.nav-list > li:hover .sub-menu { display: block; }
.nav-list .sub-menu a {
  display: block; padding: 10px 20px; font-size: 13px; font-weight: 500;
  color: rgba(18,16,14,0.85) !important; text-decoration: none !important;
  background: transparent !important; border-bottom: 1px solid rgba(18,16,14,0.05);
  transition: color 0.15s, padding-left 0.15s; white-space: nowrap;
}
.nav-list .sub-menu a:hover { color: #B8872C !important; padding-left: 26px !important; }
.nav-list .sub-menu li:last-child a { border-bottom: none; }

/* Header actions */
.header-phone {
  font-size: 11px; color: rgba(242,236,226,0.7); text-decoration: none;
  white-space: nowrap; display: flex; align-items: center; gap: 4px;
}
.btn-amber, .header-cta {
  background: #B8872C; color: #F2ECE2 !important; padding: 10px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none !important; border-radius: 2px; white-space: nowrap;
  display: inline-block; transition: background 0.2s; border: none; cursor: pointer;
}
.btn-amber:hover, .header-cta:hover { background: #9A6E22 !important; }

/* Mobile toggle */
.mobile-menu-toggle {
  display: none; flex-direction: column; gap: 5px; padding: 8px;
  background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.mobile-menu-toggle span {
  display: block; width: 22px; height: 2px; background: rgba(242,236,226,0.8); border-radius: 1px;
}

/* Mobile overlay */
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; background: #12100E; z-index: 9999;
  flex-direction: column; padding: 80px 32px 40px; overflow-y: auto;
}
.mobile-nav-overlay.is-open { display: flex; }
.mobile-nav-close {
  position: absolute; top: 20px; right: 24px; background: none;
  border: none; color: rgba(242,236,226,0.6); font-size: 28px; cursor: pointer; padding: 8px;
}
.mobile-nav-overlay .nav-list { flex-direction: column; }
.mobile-nav-overlay .nav-list > li > a {
  height: auto; line-height: 1.4; padding: 16px 0; font-size: 22px;
  border-bottom: 1px solid rgba(242,236,226,0.1); letter-spacing: 0;
}
.mobile-nav-overlay .sub-menu {
  position: static; display: block; background: transparent;
  border: none; box-shadow: none; padding: 0 0 0 16px;
}
.mobile-nav-overlay .sub-menu a {
  color: rgba(242,236,226,0.6) !important; font-size: 15px !important; padding: 10px 0 !important;
}

/* Page title bar */
.page-title-bar { background: #12100E; padding: 44px 0 40px; }
.page-title-bar .page-title-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.page-title-bar h1 {
  font-family: 'Playfair Display',Georgia,serif;
  font-size: clamp(28px,5vw,52px); font-weight: 700; color: #F2ECE2;
  letter-spacing: -0.025em; line-height: 1.1; margin: 0;
}
.breadcrumb { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242,236,226,0.45); white-space: nowrap; }
.breadcrumb a { color: rgba(242,236,226,0.55); text-decoration: none; }
.breadcrumb a:hover { color: #B8872C; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* Body offset for fixed header */
body { padding-top: 68px !important; }

/* Sidebar links */
.widget a, .woocommerce-widget-layered-nav a, .product-categories a {
  color: #12100E !important; text-decoration: none; transition: color 0.2s;
}
.widget a:hover, .product-categories a:hover { color: #B8872C !important; }
.widget-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #B8872C; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #B8872C;
}

/* WooCommerce product page */
.woocommerce div.product {
  display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: start; margin-top: 48px;
}
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product .summary { grid-column: 2; position: sticky; top: 90px; }
.woocommerce div.product .product_title {
  font-family: 'Playfair Display',Georgia,serif; font-size: clamp(22px,2.5vw,32px);
  font-weight: 700; color: #12100E; margin: 0 0 16px;
}
.woocommerce div.product .price {
  font-size: 26px; font-weight: 700; color: #12100E; margin-bottom: 24px;
}
.woocommerce div.product form.cart button,
.woocommerce div.product .single_add_to_cart_button {
  background: #12100E !important; color: #F2ECE2 !important; border: 2px solid #12100E !important;
  padding: 16px 32px !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  border-radius: 2px !important; width: 100% !important; cursor: pointer; transition: all 0.2s;
}
.woocommerce div.product form.cart button:hover { background: transparent !important; color: #12100E !important; }

/* Product grid */
.products.columns-3 { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
.woocommerce ul.products li.product { margin: 0 !important; width: auto !important; border: 1px solid rgba(18,16,14,0.1); border-radius: 2px; overflow: hidden; background: #fff; transition: transform 0.3s, border-color 0.3s; }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); border-color: #B8872C; }
.woocommerce ul.products li.product a img { width: 100% !important; height: auto !important; display: block !important; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.45s; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px; font-weight: 600; color: #12100E; padding: 16px 16px 4px;
}
.woocommerce ul.products li.product .price { padding: 0 16px 12px; font-weight: 700; color: #12100E; }
.woocommerce ul.products li.product a.button {
  margin: 0 16px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(18,16,14,0.2); color: #12100E; padding: 8px 16px; border-radius: 2px; transition: all 0.2s;
}
.woocommerce ul.products li.product a.button:hover { background: #12100E; color: #F2ECE2; border-color: #12100E; }

/* Responsive */
@media (max-width: 1100px) {
  .header-phone { display: none; }
  .nav-list > li > a { padding: 0 7px; font-size: 9.5px; }
}
@media (max-width: 1200px) {
  .main-nav { display: none; }
  .header-phone { display: none; }
  .mobile-menu-toggle { display: flex; }
  .header-cta { display: none !important; }
  body { padding-top: 56px !important; }
  #site-header { height: 56px; }
  .header-inner { height: 56px; }
}
@media (max-width: 768px) {
  .woocommerce div.product { grid-template-columns: 1fr !important; }
  .woocommerce div.product .summary { position: static !important; }
  .products.columns-3 { grid-template-columns: repeat(2,1fr) !important; }
  .page-title-bar .page-title-inner { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .container { padding: 0 20px; }
}
@media (max-width: 480px) {
  .products.columns-3 { grid-template-columns: 1fr !important; }
}

/* ================================================
   SHOP GRID FIX — Override WooCommerce defaults
   ================================================ */

/* Shop layout wrapper */
.woocommerce-page .woocommerce,
.archive.woocommerce .woocommerce {
  display: block;
}

/* Remove WooCommerce float/width from product items */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}
.woocommerce ul.products::after { display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(18,16,14,0.1) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: transform 0.3s, border-color 0.3s !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  border-color: #B8872C !important;
}

/* Product image */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a:has(img) {
  display: block !important;
}
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.45s !important;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04) !important;
}

/* Product info area */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #12100E !important;
  line-height: 1.35 !important;
  padding: 14px 16px 6px !important;
  margin: 0 !important;
  transition: color 0.2s !important;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover h2 { color: #B8872C !important; }

.woocommerce ul.products li.product .price {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #12100E !important;
  padding: 0 16px 12px !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: inline-block !important;
  margin: 0 16px 16px !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid rgba(18,16,14,0.2) !important;
  color: #12100E !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.woocommerce ul.products li.product a.button:hover {
  background: #12100E !important;
  color: #F2ECE2 !important;
  border-color: #12100E !important;
}

/* Shop layout — sidebar + products */
.shop-with-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 60px;
}
.shop-sidebar {
  background: #F7F4EF;
  border-radius: 3px;
  padding: 24px;
  position: sticky;
  top: 90px;
}
.shop-sidebar .widget-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B8872C;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #B8872C;
}
.shop-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.shop-sidebar ul li {
  border-bottom: 1px solid rgba(18,16,14,0.08);
}
.shop-sidebar ul li a {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 14px;
  color: #12100E !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
.shop-sidebar ul li a:hover { color: #B8872C !important; }
.shop-sidebar ul li a .count {
  color: rgba(18,16,14,0.35);
  font-size: 12px;
}
.shop-products-area { min-width: 0; }
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(18,16,14,0.1);
}
.shop-toolbar .woocommerce-result-count {
  font-size: 13px;
  color: rgba(18,16,14,0.45);
  margin: 0;
}
.shop-toolbar select {
  border: 1px solid rgba(18,16,14,0.15);
  border-radius: 2px;
  padding: 6px 12px;
  font-size: 13px;
  color: #12100E;
  background: white;
}

/* Pagination */
.woocommerce-pagination {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(18,16,14,0.1);
}
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #12100E !important;
  border: 1px solid rgba(18,16,14,0.2) !important;
  border-radius: 2px;
  margin: 0 3px;
  text-decoration: none !important;
  transition: all 0.2s;
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover {
  background: #12100E !important;
  color: #F2ECE2 !important;
  border-color: #12100E !important;
}

@media (max-width: 960px) {
  .shop-with-sidebar { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* ================================================
   PORTFOLIO ARCHIVE — Grid & Cards
   ================================================ */

.portfolio-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.portfolio-card {
  border-radius: 2px;
  overflow: hidden;
  background: #F7F4EF;
}

.portfolio-card__link {
  display: block;
  position: relative;
  text-decoration: none;
}

.portfolio-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #E8E4DE;
  display: block;
}

.portfolio-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.portfolio-card__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(18,16,14,0.4);
  padding: 20px;
  text-align: center;
}

.portfolio-card:hover .portfolio-card__img img {
  transform: scale(1.06);
}

.portfolio-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(18,16,14,0.85) 0%, transparent 100%);
  padding: 40px 20px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}

.portfolio-card:hover .portfolio-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-card__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #F2ECE2;
  line-height: 1.35;
}

.portfolio-card__arrow {
  font-size: 18px;
  color: #B8872C;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Portfolio pagination */
.archive-content .nav-links {
  display: flex;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(18,16,14,0.1);
}
.archive-content .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #12100E !important;
  border: 1px solid rgba(18,16,14,0.2) !important;
  border-radius: 2px;
  text-decoration: none !important;
  transition: all 0.2s;
}
.archive-content .page-numbers.current,
.archive-content .page-numbers:hover {
  background: #12100E !important;
  color: #F2ECE2 !important;
  border-color: #12100E !important;
}

/* Blog archive grid */
.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* Product grid wider — reduce sidebar, more space */
.wc-archive-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 60px;
  align-items: start;
}
.wc-sidebar {
  position: sticky;
  top: 90px;
  background: #F7F4EF;
  padding: 20px;
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 900px) {
  .portfolio-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .wc-archive-layout { grid-template-columns: 1fr; }
  .wc-sidebar { position: static; }
}
@media (max-width: 580px) {
  .portfolio-archive-grid { grid-template-columns: 1fr; }
  .blog-archive-grid { grid-template-columns: 1fr; }
}

/* ================================================
   CATALOG PRODUCT CARDS — wider grid fix
   ================================================ */

/* Override WooCommerce container behavior */
.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(18,16,14,0.1) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: transform 0.3s, border-color 0.3s !important;
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  border-color: #B8872C !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block !important;
  position: relative !important;
}
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s !important;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #12100E !important;
  line-height: 1.4 !important;
  padding: 14px 14px 6px !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #12100E !important;
  padding: 0 14px 10px !important;
  margin: 0 !important;
  display: block !important;
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: block !important;
  margin: 0 14px 14px !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid rgba(18,16,14,0.2) !important;
  color: #12100E !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.2s !important;
  margin-top: auto !important;
}
.woocommerce ul.products li.product a.button:hover {
  background: #12100E !important;
  color: #F2ECE2 !important;
  border-color: #12100E !important;
}

/* Woocommerce layout — narrow sidebar */
.wc-archive-layout {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  gap: 32px !important;
  padding-top: 32px !important;
  padding-bottom: 60px !important;
  align-items: start !important;
}

/* Homepage portfolio section — fix empty grid */
.home-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.home-portfolio-grid .portfolio-item {
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.home-portfolio-grid .portfolio-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}
.home-portfolio-grid .portfolio-item:hover img { transform: scale(1.05); }

/* Fix WPBakery portfolio section spacing */
.wpb_gallery .wpb_gallery_slides { display: block !important; }

@media (max-width: 900px) {
  .wc-archive-layout { grid-template-columns: 1fr !important; }
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 580px) {
  .woocommerce ul.products.columns-3 { grid-template-columns: 1fr !important; }
}

/* ================================================
   RESPONSIVE CATALOG — 2 columns at smaller screens
   ================================================ */

/* Better product image height */
.woocommerce ul.products li.product img {
  height: 200px !important;
}

/* 2 columns at ≤ 1200px to prevent narrow cards */
@media (max-width: 1200px) {
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .wc-archive-layout {
    grid-template-columns: 1fr !important;
  }
  .wc-sidebar { position: static !important; }
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 500px) {
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Portfolio shortcode grid same as archive */
.portfolio-shortcode-grid {
  display: grid !important;
  gap: 20px !important;
}
@media (max-width: 768px) {
  .portfolio-shortcode-grid { grid-template-columns: repeat(2,1fr) !important; }
  .portfolio-archive-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .portfolio-shortcode-grid { grid-template-columns: 1fr !important; }
  .portfolio-archive-grid { grid-template-columns: 1fr !important; }
}

/* ================================================
   FINAL ALL-IN-ONE FIXES
   ================================================ */

/* Logo */
.header-logo img.header-logo-img { height: 38px; width: auto; display: block; }
.logo-text-link { text-decoration: none; display: flex; align-items: center; }
.logo-text-fallback { font-family: 'Playfair Display',Georgia,serif; font-size: 22px; font-weight: 700; color: #F2ECE2; }

/* Nav — force single line, no wrapping */
.nav-list { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
.nav-list > li > a {
  display: flex !important;
  align-items: center !important;
  height: 68px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: rgba(242,236,226,.75) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color .2s !important;
}

/* Header phone */
.header-phone {
  font-size: 11px !important;
  color: rgba(242,236,226,.7) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.header-phone svg { flex-shrink: 0; }

/* VK social in footer */
.dh-foot-vk {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: rgba(0,119,255,.1) !important;
  border: 1px solid rgba(0,119,255,.25) !important;
  color: #5B8ADD !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  transition: background .2s !important;
}
.dh-foot-vk:hover { background: rgba(0,119,255,.18) !important; color: #5B8ADD !important; }

/* CF7 Form styles */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100% !important;
  border: 1px solid rgba(18,16,14,.15) !important;
  border-radius: 2px !important;
  padding: 12px 16px !important;
  font-family: 'Inter',system-ui,sans-serif !important;
  font-size: 14px !important;
  color: #12100E !important;
  background: #fff !important;
  transition: border-color .2s !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { border-color: #B8872C !important; }
.wpcf7-form input[type="submit"] {
  background: #B8872C !important;
  color: #F2ECE2 !important;
  border: none !important;
  padding: 14px 36px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background .2s !important;
  width: auto !important;
  -webkit-appearance: none !important;
}
.wpcf7-form input[type="submit"]:hover { background: #9A6E22 !important; }
.wpcf7-form .wpcf7-form-control-wrap { display: block !important; margin-bottom: 12px !important; }
.wpcf7-form p { margin: 0 0 12px !important; }
.wpcf7-form .wpcf7-response-output { padding: 12px 16px !important; font-size: 14px !important; border-radius: 2px !important; }

/* WPBakery grid reset — prevent 1-column layout */
.vc_row { display: flex !important; flex-wrap: wrap !important; }
.vc_col-sm-6, .vc_col-md-6 { width: 50% !important; padding: 0 15px !important; box-sizing: border-box !important; }
.vc_col-sm-4, .vc_col-md-4 { width: 33.333% !important; padding: 0 15px !important; box-sizing: border-box !important; }
.vc_col-sm-3, .vc_col-md-3 { width: 25% !important; padding: 0 15px !important; box-sizing: border-box !important; }
.vc_col-sm-8, .vc_col-md-8 { width: 66.666% !important; padding: 0 15px !important; box-sizing: border-box !important; }
.vc_col-sm-12, .vc_col-md-12 { width: 100% !important; padding: 0 15px !important; box-sizing: border-box !important; }

/* Blog grid */
.blog-archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

/* Catalog — show proper title */
.wc-archive-layout .page-title-bar h1 { font-size: clamp(24px,4vw,44px) !important; }

/* Archive pagination */
.nav-links { display: flex; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(18,16,14,.1); }
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; font-size: 14px; color: #12100E !important;
  border: 1px solid rgba(18,16,14,.2) !important; border-radius: 2px;
  text-decoration: none !important; transition: all .2s;
}
.nav-links .page-numbers.current, .nav-links .page-numbers:hover {
  background: #12100E !important; color: #F2ECE2 !important; border-color: #12100E !important;
}

@media (max-width: 900px) {
  .vc_row { flex-direction: column !important; }
  .vc_col-sm-6, .vc_col-md-6, .vc_col-sm-4, .vc_col-md-4, .vc_col-sm-3, .vc_col-md-3, .vc_col-sm-8, .vc_col-md-8 { width: 100% !important; }
  .blog-archive-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .main-nav { display: none !important; }
  .header-phone { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
  .header-cta { display: none !important; }
}

/* ═══ PORTO ACCORDION (FAQ) ═══════════════════════════════ */
.dereb-accordion {
  border: 1px solid #E8E3DA;
  border-radius: 8px;
  overflow: hidden;
  margin: 2rem 0;
}
.dereb-accordion__item + .dereb-accordion__item { border-top: 1px solid #E8E3DA; }
.dereb-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  cursor: pointer;
  user-select: none;
  background: #fff;
  transition: background .22s ease;
}
.dereb-accordion__header:hover,
.dereb-accordion__item.is-open .dereb-accordion__header { background: #F7F4EF; }
.dereb-accordion__title {
  font-weight: 600;
  font-size: 1rem;
  color: #12100E;
  flex: 1;
  padding-right: 1rem;
  line-height: 1.4;
}
.dereb-accordion__icon {
  width: 22px; height: 22px; flex-shrink: 0;
  position: relative; border-radius: 50%;
  border: 2px solid #C4B9A8;
  transition: border-color .22s ease;
}
.dereb-accordion__icon::before,
.dereb-accordion__icon::after {
  content: ''; position: absolute;
  background: #12100E; border-radius: 2px;
}
.dereb-accordion__icon::before {
  width: 10px; height: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.dereb-accordion__icon::after {
  width: 2px; height: 10px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transition: transform .25s ease, opacity .25s ease;
}
.dereb-accordion__item.is-open .dereb-accordion__icon { border-color: #B8872C; }
.dereb-accordion__item.is-open .dereb-accordion__icon::after {
  transform: translate(-50%,-50%) rotate(90deg);
  opacity: 0;
}
.dereb-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.dereb-accordion__item.is-open .dereb-accordion__body { max-height: 2000px; }
.dereb-accordion__content {
  padding: 1.25rem 1.5rem 1.5rem;
  color: #554F47;
  line-height: 1.75;
}
.dereb-accordion__content p:last-child { margin-bottom: 0; }

/* ═══ PORTFOLIO SHORTCODE ══════════════════════════════════ */
.dereb-portfolio-grid { display: grid; gap: 24px; grid-template-columns: repeat(3,1fr); }
.dereb-portfolio-grid--cols-2 { grid-template-columns: repeat(2,1fr); }
.dereb-portfolio-grid--cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1024px) { .dereb-portfolio-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .dereb-portfolio-grid { grid-template-columns: 1fr; } }

/* ═══ INFO BOX / SEPARATOR ═════════════════════════════════ */
.dereb-info-box { padding:1.5rem; border:1px solid #E8E3DA; border-radius:8px; text-align:center; }
.dereb-info-box__icon { font-size:2rem; margin-bottom:.75rem; color:#B8872C; }
.dereb-info-box__title { font-size:1.0625rem; font-weight:600; margin-bottom:.5rem; }
.dereb-info-box__body { font-size:.9375rem; color:#554F47; }
.dereb-separator { border:0; border-top:1px solid #E8E3DA; margin:2rem 0; }


/* ═══ CF7 CALCULATOR GRID (force Bootstrap flex) ══════════ */
.wpcf7-form .row,
form.wpcf7-form .row,
.page-content-wrap .row,
div.row { display: flex !important; flex-wrap: wrap !important; }
.wpcf7-form .col-md-4,
.page-content-wrap .col-md-4,
div.col-md-4 { width: 33.333% !important; box-sizing: border-box !important; padding: 0 10px !important; }
.wpcf7-form .col-md-6,
.page-content-wrap .col-md-6,
div.col-md-6 { width: 50% !important; box-sizing: border-box !important; padding: 0 10px !important; }
.wpcf7-form .col-md-12,
.page-content-wrap .col-md-12,
div.col-md-12 { width: 100% !important; box-sizing: border-box !important; }
@media (max-width: 767px) {
  .wpcf7-form .col-md-4,
  .wpcf7-form .col-md-6 { width: 100% !important; }
}

/* CF7 image-style labels in calculator */
.wpcf7-form label.form-group { cursor: pointer; display: block; text-align: center; }
.wpcf7-form label.form-group img { max-width: 100%; height: auto; border-radius: 6px; }


/* FIX: WPBakery full-width rows — handled by :not() above */

/* ═══════════════════════════════════════════════════════
   FIX: WooCommerce catalog — product title wrapping
════════════════════════════════════════════════════════ */
.woocommerce-loop-product__title {
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  font-size: 0.9375rem !important;
  line-height: 1.35 !important;
  min-height: 2.7em;
}

/* Product card price + button */
.woocommerce ul.products li.product .price {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  display: block !important;
  margin: .5rem 0 !important;
}
.woocommerce ul.products li.product .button {
  display: inline-block !important;
  padding: .45rem 1rem !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--amber) !important;
}

/* Product image fix — allow natural height */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: WooCommerce — hide/translate English UI strings
════════════════════════════════════════════════════════ */
/* Hide "Showing 1-12 of N results" */
.woocommerce-result-count { display: none !important; }

/* Style "Default sorting" dropdown */
.woocommerce-ordering select {
  border: 1px solid var(--gray-2) !important;
  border-radius: var(--radius) !important;
  padding: .4rem .75rem !important;
  font-size: .875rem !important;
  color: var(--ink) !important;
  background: var(--white) !important;
  cursor: pointer !important;
}

/* WooCommerce breadcrumb: hide default Porto breadcrumb if present */
.woocommerce .woocommerce-breadcrumb { display: none !important; }

/* ═══════════════════════════════════════════════════════
   FIX: WhatsApp / Joinchat button colours
════════════════════════════════════════════════════════ */
/* Override Porto WhatsApp button (green → amber) */
.joinchat__button,
.joinchat .joinchat__button { background-color: var(--amber) !important; }

/* Contact page WA button */
a[href*="wa.me"],
a[href*="whatsapp"] {
  /* don't override all WA links — only style-specific ones */
}
/* Contacts page WA button that has specific class */
.dh-contact__wa,
.contact-wa-btn {
  background: var(--amber) !important;
  color: var(--white) !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: Reviews page — Porto testimonial avatars
════════════════════════════════════════════════════════ */
.porto-testimonial-avatar,
.testimonial-avatar,
.porto-testimonial .author-image,
.strong-testimonials-view .entry-author-image img,
strong-testimonials-view img { border-radius: 50% !important; }

/* ─── Porto Strong Testimonials overrides ────────── */
.wpmtst-testimonial-col-holder { padding: 1.5rem !important; }

/* ═══════════════════════════════════════════════════════
   FIX: Catalog page title bar breadcrumb
════════════════════════════════════════════════════════ */
/* The WooCommerce page title bar breadcrumb shows "Магазин"
   We hide the default WC breadcrumb and show ours from the template */
.wc-breadcrumb { display: none !important; }

/* ═══════════════════════════════════════════════════════
   FIX: Home — vc_row-has-fill (background images)
   WPBakery adds background via inline style; ensure it shows
════════════════════════════════════════════════════════ */
.vc_row-has-fill {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Ensure WPBakery's own background overlay shows */
.vc_row-has-fill > .vc_column-inner > .wpb_wrapper {
  position: relative;
  z-index: 1;
}

/* Hero section is first vc_row — make sure text is visible */
.vc_row:first-child .wpb_text_column,
.vc_row:first-child .vc_column_text { color: #fff !important; }

/* ═══════════════════════════════════════════════════════
   FIX: WPBakery content width on inner pages
   (page.php → .page-content-wrap .vc_row)
════════════════════════════════════════════════════════ */
.page-content-wrap .vc_row:not([data-vc-full-width]) {
  display: flex !important;
  flex-wrap: wrap !important;
}


/* ═══════════════════════════════════════════════════════
   WPBakery — ensure text visibility without Porto CSS
════════════════════════════════════════════════════════ */

/* Default text colour for all WPBakery text elements */
.wpb_text_column,
.wpb_text_column p,
.wpb_text_column h1,
.wpb_text_column h2,
.wpb_text_column h3,
.wpb_text_column h4,
.wpb_text_column h5,
.wpb_text_column h6,
.wpb_text_column li,
.wpb_text_column span:not([style*="color"]) {
  color: inherit;
}

/* For rows with light/cream backgrounds: force dark text */
.vc_row-has-fill .wpb_text_column,
.vc_section-has-fill .wpb_text_column {
  color: inherit;
}

/* Light-background WPBakery rows: ensure dark text */
.wpb_column .wpb_text_column { color: var(--ink); }

/* But dark-background rows keep white text (Porto hero etc.) */
.vc_row[style*="background-color: rgb(18"] .wpb_text_column,
.vc_row[style*="background-color: #12"] .wpb_text_column,
.vc_row[style*="background-color:#12"] .wpb_text_column {
  color: #fff;
}

/* WPBakery headings — make sure they're visible */
.wpb_content_element h1,
.wpb_content_element h2,
.wpb_content_element h3,
.wpb_content_element h4 {
  color: var(--ink);
}

/* Porto-style card/box elements - common on homepages */
.porto-content-box,
.porto-info-box,
.dh-feature-card {
  color: var(--ink);
}

/* Fix: WPBakery vc_custom colour boxes — keep their gradient/bg */
[class*="vc_custom_"] { background-attachment: scroll !important; }

/* Fix: ensure vc_row background-image rows show their background */
.vc_row-has-fill,
[class*="vc_custom_"][style*="background"] {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Remove Porto's wpb_animate_when_almost_visible white-on-init */
.wpb_animate_when_almost_visible {
  opacity: 1 !important;
}
.wpb_start_animation.fadeInUp,
.wpb_start_animation.fadeIn,
.wpb_start_animation.bounceIn {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ─── Number labels (01, 02, 03) in step sections ── */
.vc_col-has-fill .wpb_text_column h2,
.vc_col-has-fill .wpb_text_column p { color: var(--ink); }


/* ═══════════════════════════════════════════════════════
   CATALOG LAYOUT — sidebar narrow, products wide
════════════════════════════════════════════════════════ */

/* WooCommerce wrapper layout */
.wc-main { width: 100%; }

/* Sidebar + content layout */
.woocommerce .woocommerce-page,
.woocommerce-page .site-content,
.wc-main > .woocommerce {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* Sidebar — fixed narrow width */
.woocommerce .widget_product_categories,
.woocommerce-sidebar,
#secondary.widget-area,
.site-sidebar,
div#sidebar,
aside.widget-area {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

/* Main product area — takes all remaining space */
div#primary.site-main,
.wc-main > main,
.woocommerce-main-area {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Restore the woocommerce ul.products grid to use full width */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Product card */
.woocommerce ul.products li.product {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow var(--transition) !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Product image */
.woocommerce ul.products li.product a.woocommerce-loop-product__link { display: block !important; }
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .9375rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
  padding: .75rem 1rem .25rem !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  flex: 1;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  padding: 0 1rem .75rem !important;
  display: block !important;
}
.woocommerce ul.products li.product .price del { opacity: .5; font-size: .875rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: block !important;
  width: calc(100% - 2rem) !important;
  margin: 0 1rem 1rem !important;
  padding: .55rem 0 !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background var(--transition) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: var(--amber) !important;
}

/* WooCommerce ordering/result bar */
.woocommerce-ordering,
.woocommerce-result-count {
  margin-bottom: 1rem;
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-sidebar,
  aside.widget-area,
  div#sidebar { display: none !important; }
}


/* ═══════════════════════════════════════════════════════
   CATALOG — correct selectors from archive-product.php
   Layout: .wc-archive-layout > .wc-sidebar + .wc-main
════════════════════════════════════════════════════════ */

.wc-archive-layout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 2rem !important;
}

.wc-sidebar {
  flex: 0 0 230px !important;
  width: 230px !important;
  min-width: 0 !important;
}

.wc-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Sidebar category widget */
.wc-sidebar .widget_product_categories { margin: 0; }
.wc-sidebar .widget-title,
.wc-sidebar .widgettitle {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--gray-2);
}
.wc-sidebar ul.product-categories,
.wc-sidebar ul.children {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wc-sidebar ul.product-categories li {
  padding: .25rem 0;
  border-bottom: 1px solid var(--gray-1);
  font-size: .875rem;
  line-height: 1.5;
}
.wc-sidebar ul.product-categories a {
  color: var(--gray-5);
  text-decoration: none;
  transition: color var(--transition);
}
.wc-sidebar ul.product-categories a:hover,
.wc-sidebar ul.product-categories .current-cat > a { color: var(--amber); }
.wc-sidebar ul.product-categories .count {
  color: var(--gray-3);
  font-size: .75rem;
}
.wc-sidebar ul.children {
  padding-left: .75rem !important;
  border-left: 2px solid var(--gray-1);
  margin-top: .25rem !important;
}

/* Product grid inside .wc-main */
.wc-main .woocommerce ul.products,
.wc-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  .wc-main .woocommerce ul.products,
  .wc-main ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .wc-archive-layout { flex-direction: column !important; }
  .wc-sidebar { width: 100% !important; flex: 0 0 auto !important; }
  .wc-main ul.products { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════
   REVIEWS — testimonial avatars to match theme colours
═�����═══════════════════════════�����══���═���═════════════════════ */
/* Strong Testimonials / custom initials avatars */
.testimonial-excerpt-text + .testimonial-title-name,
.wpmtst-testimonial .testimonial-gravatar,
.wpmtst-testimonial .testimonial-gravatar img,
.testimonial-gravatar img,
.wpmtst-testimonial span[style*="background"],
.strong-text [style*="background-color: #"],
.testimonial-company-name { color: var(--ink) !important; }

/* Override coloured initial circles with dark/amber */
.testimonial-gravatar span,
.strong-avatar-initial,
span.avatar-initial,
.wpmtst-testimonial [class*="gravatar"] {
  background-color: var(--amber) !important;
  color: var(--white) !important;
  border-radius: 50% !important;
}

/* More specific — any element with a bright green or random bg used for initials */
[style*="background-color: #1abc9c"],
[style*="background-color: #2ecc71"],
[style*="background-color: #3498db"],
[style*="background-color: #e74c3c"],
[style*="background-color: #9b59b6"] {
  background-color: var(--amber) !important;
}
[style*="background-color: #2c3e50"],
[style*="background-color: #34495e"],
[style*="background-color: #1a1a2e"] {
  background-color: var(--ink) !important;
}

/* ─── Review layout ───────────────────────────────── */
.wpmtst-testimonial-wrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.wpmtst-testimonial {
  padding: 1.5rem !important;
  border: 1px solid var(--gray-2) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--white) !important;
}
.wpmtst-testimonial .testimonial-content p { color: var(--gray-5) !important; line-height: 1.75 !important; }
.wpmtst-testimonial .testimonial-title { margin-top: 1rem !important; }
.wpmtst-testimonial .testimonial-title strong { color: var(--ink) !important; font-weight: 700 !important; }
.wpmtst-testimonial .testimonial-company { color: var(--gray-4) !important; font-size: .875rem !important; }
@media (max-width: 640px) {
  .wpmtst-testimonial-wrap { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════
   CATALOG — "Default sorting" select translated feel
════════════════════════════════════════════════════════ */
.woocommerce-ordering { margin-bottom: 1.25rem !important; }
.woocommerce-ordering select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2312100E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  border: 1px solid var(--gray-2) !important;
  border-radius: var(--radius) !important;
  padding: .45rem 2rem .45rem .75rem !important;
  font-size: .875rem !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
}

/* ═══════════════════════════════════════════════════════
   PORTFOLIO — overlay always hidden, show only on hover
════════════════════════════════════════════════════════ */
.portfolio-card__overlay {
  opacity: 0 !important;
  transition: opacity var(--transition) !important;
}
.portfolio-card:hover .portfolio-card__overlay,
.portfolio-card__link:hover .portfolio-card__overlay,
.portfolio-card__link:focus .portfolio-card__overlay {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════
   BLOG GRID — force 3 columns
════════════════════════════════════════════════════════ */
.blog-archive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}
@media (max-width: 1024px) {
  .blog-archive-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 640px) {
  .blog-archive-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════
   HOME — stats strip show all 4 items
════════════════════════════════════════════════════════ */
.stats-strip__grid {
  display: flex !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}
.stat-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}


/* ═══════════════════════════════════════════════════════
   REVIEWS — avatar initials circles recolour
   Pattern: div[style with 70px circle + white text]
════════════════════════════════════════════════════════ */
div[style*="border-radius:50%"][style*="color:#fff"],
div[style*="border-radius: 50%"][style*="color:#fff"],
div[style*="border-radius:50%"][style*="color: #fff"],
div[style*="border-radius: 50%"][style*="color: #fff"],
div[style*="border-radius:50%;"][style*="font-weight:700"],
div[style*="border-radius: 50%;"][style*="font-weight:700"] {
  background: var(--amber) !important;
}


/* ═══ NAV BREAKPOINT FIX — hamburger at ≤1200px ═══════ */
/* At >1200px: show desktop nav */
@media (min-width: 1201px) {
  .main-nav { display: flex !important; }
  .site-nav { display: flex !important; }
  .mobile-menu-toggle { display: none !important; }
  .site-header__toggle { display: none !important; }
  .header-cta { display: inline-flex !important; }
  .header-phone { display: flex !important; }
}

/* At ≤1200px: hide desktop nav, show hamburger */
@media (max-width: 1200px) {
  .main-nav { display: none !important; }
  .site-nav { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
  .site-header__toggle { display: flex !important; }
  .header-cta { display: none !important; }
  .header-phone { display: none !important; }
  body { padding-top: 56px !important; }
  #site-header { height: 56px !important; }
  .header-inner, .site-header__inner { height: 56px !important; }
}

/* Fix admin bar overlap */
.admin-bar #site-header {
  top: 32px;
}
.admin-bar body {
  padding-top: calc(68px + 32px);
}
@media (max-width: 1200px) {
  .admin-bar body { padding-top: calc(56px + 32px) !important; }
  .admin-bar #site-header { top: 32px !important; }
}


/* ═══════════════════════════════════════════════════════
   FIX: Stats strip — show all 4, prevent clipping
════════════════════════════════════════════════════════ */
.stats-strip { overflow: visible !important; }
.stats-strip__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  flex: none !important;
  width: 100% !important;
}
.stat-item { min-width: 0 !important; white-space: nowrap; }
@media (max-width: 900px) {
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .stats-strip__grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════
   FIX: Joinchat / WhatsApp floating button — amber
════════════════════════════════════════════════════════ */
#joinchat,
.joinchat,
.joinchat__button,
#joinchat .joinchat__button,
.joinchat .joinchat__button {
  background-color: var(--amber) !important;
  --color: var(--amber) !important;
}
.joinchat__button svg path { fill: #fff !important; }

/* ═══════════════════════════════════════════════════════
   FIX: Contacts page WhatsApp link button colour
════════════════════════════════════════════════════════ */
/* WhatsApp link in contacts — matches button style */
a[href*="wa.me"].button-whatsapp,
a[href*="whatsapp"].button-whatsapp,
.contact-wa { color: var(--ink) !important; }

/* WPBakery raw HTML WhatsApp button on contacts */
.wpb_raw_code a[href*="wa.me"],
.wpb_wrapper a[href*="wa.me"] {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}
.wpb_raw_code a[href*="wa.me"]:hover { background: var(--amber) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════
   FIX: Reviews — card borders and backgrounds
════════════════════════════════════════════════════════ */
/* The reviews use WPBakery raw HTML with custom divs
   Target the review item containers */
.wpb_text_column .testimonial-item,
.wpb_wrapper [style*="margin-top:18px"],
.wpb_wrapper [style*="margin-top: 18px"],
.wpb_wrapper > div > p,
.wpb_raw_html > div { /* broad fallback */ }

/* Try to target testimonial card containers */
.wpb_content_element > .wpb_wrapper > div {
  /* don't override all divs */
}

/* Strong Testimonials / WPBakery testimonial wrappers */
.wpmtst-testimonial-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
  margin: 2rem 0 !important;
}
.wpmtst-testimonial-wrap .wpmtst-testimonial {
  background: var(--white) !important;
  border: 1px solid var(--gray-2) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.5rem !important;
}
/* WPBakery 2-column layout for reviews (vc_col-sm-6) */
.otzyvy-page .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper,
body.page-id-996 .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════
   FIX: Catalog — WooCommerce ordering text in Russian feel
════════════════════════════════════════════════════════ */
/* Hide English "Default sorting" placeholder,
   replace with pseudo-element workaround (not possible in CSS alone)
   So just style the select nicely */
.woocommerce-ordering select option[value="menu_order"]:first-child {
  /* can't change text in CSS */
}
/* Add Russian label via ::before on wrapper */
.woocommerce-ordering::before {
  content: 'Сортировка: ';
  font-size: .875rem;
  color: var(--gray-4);
  margin-right: .5rem;
  white-space: nowrap;
}
.woocommerce-ordering {
  display: flex !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: Calculator step 3 — material images
   (CF7 form, Bootstrap cols, images in col-md-4)
════════════════════════════════════════════════════════ */
/* Ensure CF7 form images in materials step show properly */
.wpcf7-form img { max-width: 100%; height: auto; display: block; }
/* Some calculator steps may have no images — just show labels cleanly */
.wpcf7-form .wpcf7-list-item {
  margin: 0 !important;
  display: block !important;
}
.wpcf7-form .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .5rem 0 !important;
  cursor: pointer !important;
  font-size: .9375rem !important;
}
.wpcf7-form .wpcf7-list-item input[type="radio"],
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--amber) !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: Home hero right column — ensure image visible
════════════════════════════════════════════════════════ */
/* WPBakery full-width 2-col hero — right image column */
.vc_row[data-vc-full-width] .vc_col-sm-6:last-child img,
.vc_row[data-vc-full-width] .vc_col-sm-6:last-child .wpb_single_image {
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: Footer social icons (VK) visibility
════════════════════════════════════════════════════════ */
.site-footer__social a,
.footer-social__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.7) !important;
  transition: background var(--transition) !important;
}
.site-footer__social a:hover,
.footer-social__link:hover {
  background: var(--amber) !important;
  color: #fff !important;
}
.site-footer__social svg,
.footer-social__link svg { width: 18px !important; height: 18px !important; }


/* ═══════════════════════════════════════════════════════
   FIX: Reviews — Porto testimonial card styling
   Classes: .porto-testimonial, .testimonial
════════════════════════════════════════════════════════ */
.porto-testimonial,
.testimonial {
  background: var(--white) !important;
  border: 1px solid var(--gray-2) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.75rem !important;
  margin-bottom: 0 !important;
  position: relative !important;
}

/* Testimonial text */
.testimonial .testimonial-content,
.porto-testimonial .testimonial-content {
  color: var(--gray-5) !important;
  font-size: .9375rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.25rem !important;
}

/* Author block */
.testimonial .testimonial-author,
.porto-testimonial .testimonial-author {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  margin-top: 1rem !important;
}

/* Remove Porto quotes */
.testimonial.testimonial-with-quotes .testimonial-content::before,
.testimonial.testimonial-with-quotes .testimonial-content::after {
  color: var(--amber) !important;
  font-size: 2rem !important;
  line-height: 0 !important;
  vertical-align: -0.5rem !important;
}

/* Testimonial carousel — make it a grid */
.testimonial-carousel,
.testimonials-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}
@media (max-width: 768px) {
  .testimonial-carousel,
  .testimonials-wrapper { grid-template-columns: 1fr !important; }
}

/* Porto carousel controls — hide if broken */
.testimonial-carousel .owl-controls,
.testimonial-carousel .slick-dots { display: none; }

/* ═══════════════════════════════════════════════════════
   FIX: Contacts WhatsApp button — match theme
   WPBakery raw HTML: <a href="wa.me/...">WhatsApp →</a>
════════════════════════════════════════════════════════ */
/* Any button-like link in WPBakery content on contacts */
.wpb_wrapper a[href*="wa.me"],
.wpb_raw_code a[href*="wa.me"],
.page-content-wrap a[href*="wa.me"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .6rem 1.25rem !important;
  background: #fff !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--gray-2) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  text-decoration: none !important;
  transition: all var(--transition) !important;
}
.wpb_wrapper a[href*="wa.me"]:hover,
.wpb_raw_code a[href*="wa.me"]:hover,
.page-content-wrap a[href*="wa.me"]:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════
   Joinchat — amber instead of green
════════════════════════════════════════════════════════ */
:root {
  --joinchat-color: #B8872C !important;
  --joinchat-ico: #fff !important;
}
.joinchat__button,
div.joinchat__button {
  background-color: #B8872C !important;
  background: #B8872C !important;
}

/* ═══════════════════════════════════════════════════════
   Reviews — Porto testimonial card borders (stronger)
════════════════════════════════════════════════════════ */
.col-md-6 .porto-testimonial,
.col-md-6 .testimonial,
.row .porto-testimonial,
.row .testimonial {
  background: #fff !important;
  border: 1px solid #E8E3DA !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 2px 8px rgba(18,16,14,.06) !important;
}
/* Quotes color */
.testimonial.testimonial-with-quotes .testimonial-content::before {
  content: '"' !important;
  color: #B8872C !important;
  font-size: 3rem !important;
  line-height: 0 !important;
  vertical-align: -.6rem !important;
  margin-right: .25rem !important;
}
.testimonial-content p { color: #554F47 !important; font-size: .9375rem !important; line-height: 1.75 !important; }
.testimonial-author strong { color: #12100E !important; font-size: .9375rem !important; }
.testimonial-author span { color: #8A7E70 !important; font-size: .8125rem !important; }

/* ═══════════════════════════════════════════════════════
   Catalog — "Сортировка:" label before dropdown
   (::before pseudo-element fix)
════════════════════════════════════════════════════════ */
.woocommerce-ordering { display: flex !important; align-items: center !important; gap: .5rem !important; }
.woocommerce-ordering::before { content: 'Сортировка: ' !important; font-size: .875rem !important; color: #8A7E70 !important; white-space: nowrap !important; }

/* ═══════════════════════════════════════════════════════
   Home hero — ensure right column visible
════════════════════════════════════════════════════════ */
/* WPBakery 2-col hero: ensure both columns show */
.vc_row[data-vc-full-width] .vc_col-sm-6 { display: block !important; }
.vc_row[data-vc-full-width] .wpb_single_image .vc_single_image-wrapper { display: block !important; }
.vc_row[data-vc-full-width] .wpb_single_image img { max-width: 100% !important; height: auto !important; display: block !important; }

/* ═══════════════════════════════════════════════════════
   Portfolio — last row empty slot invisible
════════════════════════════════════════════════════════ */
.portfolio-archive-grid article.portfolio-card:empty { display: none !important; }