/*
Theme Name:   Woodmart Child — نوسازی مبلمان رضایی
Theme URI:    https://renomobl.com
Description:  Child theme for renomobl.com. All customization lives here so
              that updating the Woodmart parent theme never erases it.
Author:       renomobl
Template:     woodmart
Version:      0.1.0
Text Domain:  renomobl
*/

/* -------------------------------------------------------------------------
 * Design tokens
 *
 * Direction (see docs/competitor-research.md): competitors look like cold
 * utilities. This should read as a craft workshop — wood, warmth, texture.
 * ---------------------------------------------------------------------- */

:root {
  /* Warm woods and workshop tones, not marketplace blue */
  --reno-wood-dark:   #3d2b1f;
  --reno-wood:        #6b4a2f;
  --reno-wood-light:  #a67c52;
  --reno-cream:       #f5efe6;
  --reno-sand:        #e8ddcd;
  --reno-ink:         #241a12;
  --reno-muted:       #7a6a5c;

  /* Reserved for the estimate result and primary CTA only. Restraint here is
     what makes the number feel important. */
  --reno-accent:      #b8722c;
  --reno-accent-dark: #96591f;

  --reno-success:     #2f6b4f;

  --reno-radius:      10px;
  --reno-shadow:      0 2px 14px rgba(36, 26, 18, 0.09);
  --reno-shadow-lg:   0 8px 34px rgba(36, 26, 18, 0.14);
}

/* -------------------------------------------------------------------------
 * Persian typography
 *
 * Woodmart ships Yekan Bakh and it is already loading. Enforce Persian
 * numerals so prices never render in a mix of ۱۲۳ and 123.
 * ---------------------------------------------------------------------- */

body,
.woodmart-title-container,
h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "ss02";
}

/* Persian digits wherever a price or figure appears */
.reno-price,
.reno-figure,
.woocommerce-Price-amount {
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * Full-width hero
 *
 * Per the brief. Breaks out of Woodmart's container so the before/after
 * imagery spans the viewport edge to edge.
 * ---------------------------------------------------------------------- */

.reno-hero {
  position: relative;
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);
  min-height: clamp(420px, 62vh, 720px);
  display: grid;
  align-items: center;
  background: var(--reno-cream);
  overflow: hidden;
}

.reno-hero__media,
.reno-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Readability scrim. RTL-aware: fades from the start edge. */
.reno-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(36, 26, 18, 0.72) 0%,
    rgba(36, 26, 18, 0.45) 45%,
    rgba(36, 26, 18, 0.10) 100%
  );
}

html[dir="ltr"] .reno-hero::after {
  background: linear-gradient(
    to right,
    rgba(36, 26, 18, 0.72) 0%,
    rgba(36, 26, 18, 0.45) 45%,
    rgba(36, 26, 18, 0.10) 100%
  );
}

.reno-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  padding: 3rem 1.5rem;
  color: #fff;
}

.reno-hero__title {
  font-size: clamp(1.85rem, 4.4vw, 3.4rem);
  line-height: 1.28;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.75rem;
  max-width: 22ch;
}

.reno-hero__subtitle {
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.9;
  margin: 0 0 2rem;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.92);
}

/* -------------------------------------------------------------------------
 * Primary call to action
 *
 * The estimate tool is the only thing no competitor has. It gets the loudest
 * element on the page, and nothing else is allowed to compete with it.
 * ---------------------------------------------------------------------- */

.reno-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 2.4rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  background: var(--reno-accent);
  border: none;
  border-radius: var(--reno-radius);
  box-shadow: var(--reno-shadow-lg);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.reno-cta:hover,
.reno-cta:focus-visible {
  background: var(--reno-accent-dark);
  color: #fff;
  transform: translateY(-1px);
}

.reno-cta__note {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Visible focus for keyboard users — Woodmart suppresses outlines. */
.reno-cta:focus-visible,
.reno-hero a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Placeholder media
 *
 * Marks every slot that still needs a real photograph of actual work, so an
 * unfinished site is obvious rather than quietly shipping with stand-ins.
 * ---------------------------------------------------------------------- */

.reno-placeholder {
  display: grid;
  place-items: center;
  min-height: 220px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--reno-sand),
      var(--reno-sand) 12px,
      var(--reno-cream) 12px,
      var(--reno-cream) 24px
    );
  border: 2px dashed var(--reno-wood-light);
  border-radius: var(--reno-radius);
  color: var(--reno-wood);
  font-weight: 700;
  text-align: center;
  padding: 1.5rem;
}

/* -------------------------------------------------------------------------
 * Mobile first
 *
 * Traffic is overwhelmingly phones; see docs/competitor-research.md.
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
  .reno-hero {
    min-height: 78vh;
  }

  .reno-hero__inner {
    padding: 2rem 1.15rem;
  }

  .reno-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reno-cta {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
 * Front page: suppress Woodmart's page-title band
 *
 * The theme prints a "وبلاگ" title block above the content on the front page.
 * The hero is the page title here; a second one competes with it.
 * ---------------------------------------------------------------------- */

.home .wd-page-title,
.home .page-title.title-blog {
  display: none;
}

/* Hero placeholders should read as texture, not as a caption competing with
   the headline. Once real photography lands this rule stops mattering. */
.reno-hero__media .reno-placeholder {
  color: rgba(107, 74, 47, 0.42);
  font-size: 0.8rem;
  font-weight: 500;
  align-content: start;
  padding-top: 1rem;
}

.reno-hero__media .reno-placeholder small {
  display: none;
}

/* -------------------------------------------------------------------------
 * Temporary stand-in photography
 *
 * Licensed stock, not this workshop's work. The badge is deliberately
 * visible: these must not reach production unnoticed.
 * ---------------------------------------------------------------------- */

.reno-stockshot {
  position: absolute;
  inset: 0;
  margin: 0;
}

.reno-stockshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reno-stockshot__badge {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 5;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a2f00;
  background: rgba(255, 214, 138, 0.94);
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Slider mechanics
 *
 * Cross-fade rather than horizontal translation: no layout thrash, and it
 * behaves identically in RTL and LTR without direction-dependent maths.
 * ---------------------------------------------------------------------- */

.reno-hero__track {
  position: relative;
  width: 100%;
  min-height: inherit;
  display: grid;
}

.reno-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(420px, 62vh, 720px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease;
}

.reno-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .reno-hero__slide {
    transition: none;
  }
}

/* Slide media sits beneath the scrim */
.reno-hero__slide .reno-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.reno-hero__slide .reno-hero__media .reno-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

/* Woodmart's own button styling loads after this stylesheet and wins on
   specificity, so the slider controls are scoped and reset explicitly.
   Without the element+class selectors these render as 40x42 grey blocks. */

.reno-hero button.reno-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  line-height: 1;
  color: #fff;
  background: rgba(36, 26, 18, 0.42);
  border: none;
  border-radius: 50%;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.reno-hero button.reno-hero__nav:hover,
.reno-hero button.reno-hero__nav:focus-visible {
  background: rgba(36, 26, 18, 0.72);
  color: #fff;
}

.reno-hero button.reno-hero__nav:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Logical properties so the arrows follow the document direction */
.reno-hero button.reno-hero__nav--prev { inset-inline-start: 1.1rem; }
.reno-hero button.reno-hero__nav--next { inset-inline-end: 1.1rem; }

.reno-hero .reno-hero__dots {
  position: absolute;
  bottom: 1.4rem;
  inset-inline: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
}

.reno-hero button.reno-hero__dot {
  /* Woodmart sets min-height: var(--btn-height, 42px) on every button, and
     min-height beats height. Pin all six box dimensions so neither that nor
     flex sizing can stretch a 12px dot into a 42px block. */
  box-sizing: border-box;
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  height: 12px;
  min-height: 12px;
  max-height: 12px;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.reno-hero button.reno-hero__dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

.reno-hero button.reno-hero__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------------- */

.reno-container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.reno-section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.reno-section__title {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--reno-ink);
  text-align: center;
  margin: 0 0 0.85rem;
}

.reno-section__lead {
  text-align: center;
  color: var(--reno-muted);
  margin: 0 auto 2.6rem;
  max-width: 60ch;
  line-height: 2;
}

/* -------------------------------------------------------------------------
 * New vs. renovate comparison
 *
 * The core argument of the business. Given visual weight to match.
 * ---------------------------------------------------------------------- */

.reno-why { background: var(--reno-cream); }

.reno-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.reno-compare__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--reno-radius);
  box-shadow: var(--reno-shadow);
  text-align: center;
}

.reno-compare__card--new {
  border: 2px solid var(--reno-accent);
  box-shadow: var(--reno-shadow-lg);
}

.reno-compare__label {
  font-size: 0.95rem;
  color: var(--reno-muted);
}

.reno-compare__price {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 800;
  color: var(--reno-ink);
}

.reno-compare__card--old .reno-compare__price {
  color: var(--reno-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.reno-compare__note {
  font-size: 0.87rem;
  color: var(--reno-muted);
  line-height: 1.9;
}

.reno-compare__save {
  margin-top: 0.6rem;
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--reno-success);
  border-radius: 999px;
}

.reno-compare__vs {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--reno-muted);
  white-space: nowrap;
}

.reno-why__caveat {
  margin: 1.75rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 0.9rem;
  line-height: 2;
  color: var(--reno-muted);
}

/* -------------------------------------------------------------------------
 * Services
 * ---------------------------------------------------------------------- */

.reno-services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1.25rem;
}

.reno-service {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.reno-service:hover {
  border-color: var(--reno-accent);
  transform: translateY(-2px);
}

.reno-service__name {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.6rem;
}

.reno-service__desc {
  flex: 1;
  font-size: 0.92rem;
  line-height: 2;
  color: var(--reno-muted);
  margin: 0 0 1.15rem;
}

.reno-service__price {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--reno-sand);
}

.reno-service__from,
.reno-service__unit {
  font-size: 0.85rem;
  color: var(--reno-muted);
}

.reno-service__price .reno-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--reno-accent-dark);
  margin-inline: 0.25rem;
}

.reno-service__custom {
  font-weight: 700;
  color: var(--reno-wood);
}

/* -------------------------------------------------------------------------
 * Process
 * ---------------------------------------------------------------------- */

.reno-process { background: var(--reno-cream); }

.reno-process__list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.reno-process__step {
  text-align: center;
  padding: 1.5rem 1rem;
}

.reno-process__num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  background: var(--reno-wood);
  border-radius: 50%;
}

.reno-process__step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.5rem;
}

.reno-process__step p {
  font-size: 0.9rem;
  line-height: 2;
  color: var(--reno-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Closing call to action
 * ---------------------------------------------------------------------- */

.reno-estimate {
  background: var(--reno-wood-dark);
  color: #fff;
}

.reno-estimate__inner { text-align: center; }

.reno-estimate .reno-section__title { color: #fff; }

.reno-estimate__lead {
  max-width: 52ch;
  margin: 0 auto 2rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.86);
}

.reno-cta--lg {
  padding: 1.2rem 3rem;
  font-size: 1.2rem;
}

.reno-estimate__note {
  margin: 1.25rem 0 0;
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.68);
}

/* -------------------------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------------------- */

@media (max-width: 860px) {
  .reno-compare {
    grid-template-columns: 1fr;
  }

  .reno-compare__vs {
    padding-block: 0.35rem;
  }
}

@media (max-width: 768px) {
  .reno-hero__slide {
    min-height: 78vh;
  }

  /* Arrows crowd the text on small screens; dots are enough. */
  .reno-hero__nav {
    display: none;
  }
}

/* =========================================================================
 * Vazirmatn — Persian typeface
 *
 * Self-hosted deliberately: Google Fonts and most CDNs are unreliable from
 * Iran, and a blocked font request means a flash of fallback or no text at
 * all. Three weights only (400/500/700) keeps the payload at ~156 KB.
 *
 * Vazirmatn is SIL Open Font Licence 1.1 — free for commercial use.
 * ====================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Woodmart drives typography through custom properties and redefines them on
   :root in base-rtl.min.css, which loads AFTER this file — equal specificity,
   so the theme would win. `html:root` (0,1,1) outranks `:root` (0,1,0) without
   resorting to !important, and works regardless of load order. */
html:root {
  --wd-text-font: "Vazirmatn", "Yekan Bakh", Tahoma, sans-serif;
  --wd-title-font: "Vazirmatn", "Yekan Bakh", Tahoma, sans-serif;
  --wd-widget-title-font: "Vazirmatn", "Yekan Bakh", Tahoma, sans-serif;
  --wd-entities-title-font: "Vazirmatn", "Yekan Bakh", Tahoma, sans-serif;
  --wd-alternative-font: "Vazirmatn", "Yekan Bakh", Tahoma, sans-serif;
  --reno-font: "Vazirmatn", "Yekan Bakh", Tahoma, sans-serif;
}

/* Woodmart's reset sets `font-family: inherit` on a very long element list and
   loads after this file, so these need the extra `html body` specificity. */
html body,
html body button,
html body input,
html body select,
html body textarea,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .wd-nav > li > a,
html body .woodmart-title-container,
html body .widget-title,
html body .entities-title {
  font-family: var(--reno-font);
}

/* Vazirmatn already renders Persian numerals correctly; the earlier
   feature-settings hack was for Yekan Bakh and is no longer needed. */
body {
  font-feature-settings: normal;
  /* Persian needs more line height than Latin to stay readable. */
  line-height: 1.9;
}

/* =========================================================================
 * Motion
 *
 * Restrained on purpose: this sells craftsmanship and reliability, not
 * novelty. Elements settle into place once; nothing loops, nothing bounces.
 * Everything is disabled wholesale under prefers-reduced-motion.
 * ====================================================================== */

/* Only hide content when JS is available to reveal it again. Without this
   guard a script failure would leave the page permanently blank. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Staggering makes a grid feel deliberate rather than mechanical. */
.js-reveal [data-reveal-delay="1"] { transition-delay: 0.07s; }
.js-reveal [data-reveal-delay="2"] { transition-delay: 0.14s; }
.js-reveal [data-reveal-delay="3"] { transition-delay: 0.21s; }
.js-reveal [data-reveal-delay="4"] { transition-delay: 0.28s; }
.js-reveal [data-reveal-delay="5"] { transition-delay: 0.35s; }
.js-reveal [data-reveal-delay="6"] { transition-delay: 0.42s; }

/* Hero copy animates on slide change without waiting for the observer. */
.reno-hero__slide.is-active .reno-hero__title,
.reno-hero__slide.is-active .reno-hero__subtitle,
.reno-hero__slide.is-active .reno-cta,
.reno-hero__slide.is-active .reno-cta__note {
  animation: reno-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.reno-hero__slide.is-active .reno-hero__subtitle { animation-delay: 0.09s; }
.reno-hero__slide.is-active .reno-cta           { animation-delay: 0.18s; }
.reno-hero__slide.is-active .reno-cta__note     { animation-delay: 0.26s; }

@keyframes reno-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Slow drift on hero imagery adds depth without drawing attention. */
.reno-hero__slide.is-active .reno-stockshot img {
  animation: reno-drift 18s ease-out both;
}

@keyframes reno-drift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Interactive polish */
.reno-service,
.reno-compare__card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.reno-compare__card--new:hover {
  transform: translateY(-3px);
}

.reno-process__num {
  transition: transform 0.22s ease;
}

.reno-process__step:hover .reno-process__num {
  transform: scale(1.08);
}

/* Honour the OS setting. Not a nicety — motion triggers migraine and nausea
   for some people, and this site is read by people in discomfort already. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .reno-hero__slide.is-active .reno-hero__title,
  .reno-hero__slide.is-active .reno-hero__subtitle,
  .reno-hero__slide.is-active .reno-cta,
  .reno-hero__slide.is-active .reno-cta__note,
  .reno-hero__slide.is-active .reno-stockshot img {
    animation: none;
  }

  .reno-service,
  .reno-compare__card,
  .reno-process__num {
    transition: none;
  }
}

/* =========================================================================
 * Footer
 *
 * Three columns on desktop, stacked and centred on mobile, with a centred
 * legal line beneath. Replaces the single cramped row of text.
 * ====================================================================== */

/* Woodmart renders the copyright bar as two columns and drops our whole footer
   into the first one, so on a wide screen it sat in the right-hand 40% with
   half the page empty beside it. The bar becomes one column and the column
   spans the grid. */
.wd-copyrights.wd-layout-two-columns .container.wd-grid-g { display: block; }

.wd-copyrights .wd-col-start,
.wd-copyrights .wd-col-end {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  grid-column: 1 / -1;
}

.reno-footer {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 2.5rem 1.25rem 1.5rem;
  text-align: start;
}

.reno-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr;
  gap: 2.5rem;
  align-items: start;
}

.reno-footer__logo {
  width: 88px;
  height: auto;
  margin-bottom: 0.9rem;
  display: block;
}

.reno-footer__name {
  display: block;
  font-size: 1.05rem;
  color: var(--reno-ink);
  margin-bottom: 0.5rem;
}

.reno-footer__tagline {
  margin: 0;
  font-size: 0.88rem;
  line-height: 2;
  color: var(--reno-muted);
  max-width: 34ch;
}

.reno-footer__heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 1rem;
}

.reno-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.88rem;
}

.reno-footer__list a {
  color: var(--reno-muted);
  transition: color 0.18s ease;
}

.reno-footer__list a:hover,
.reno-footer__list a:focus-visible {
  color: var(--reno-accent-dark);
}

.reno-footer__list--contact li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.4rem;
  color: var(--reno-ink);
}

.reno-footer__list--contact span {
  color: var(--reno-muted);
}

/* Unfilled real-world details are marked, never invented. */
.reno-footer__todo em {
  color: #a3521f;
  background: #fbf0e2;
  padding: 0.05rem 0.45rem;
  border-radius: 4px;
  font-style: normal;
  font-size: 0.82rem;
}

.reno-footer__legal {
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--reno-sand);
  text-align: center;
  font-size: 0.82rem;
  color: var(--reno-muted);
}

/* Three columns down to two before collapsing to one — a 1.6fr brand column
   next to two narrow lists is unreadable on a tablet. */
@media (max-width: 1100px) {
  .reno-footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .reno-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .reno-footer__cols {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
    justify-items: center;
  }

  .reno-footer__col--brand { grid-column: auto; }

  .reno-footer__logo { margin-inline: auto; }

  .reno-footer__tagline { max-width: 46ch; }

  .reno-footer__list--contact li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* =========================================================================
 * Account: login and registration
 *
 * Woodmart's default is a cramped two-column form. This market abandons
 * anything that feels like paperwork, so the forms are wide, single-column,
 * and explain why each field is wanted.
 * ====================================================================== */

.reno-auth {
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) 1.25rem;
}

.reno-auth__intro {
  text-align: center;
  margin-bottom: 2.5rem;
}

.reno-auth__intro h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.6rem;
}

.reno-auth__intro p {
  color: var(--reno-muted);
  margin: 0 auto;
  max-width: 56ch;
}

.reno-auth__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.75rem;
  align-items: start;
}

.reno-auth__card {
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--reno-shadow);
}

.reno-auth__card--register {
  border-color: var(--reno-accent);
  box-shadow: var(--reno-shadow-lg);
}

.reno-auth__card h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.4rem;
}

.reno-auth__hint {
  font-size: 0.88rem;
  color: var(--reno-muted);
  margin: 0 0 1.5rem;
  line-height: 1.9;
}

.reno-field {
  margin-bottom: 1.15rem;
}

.reno-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--reno-ink);
  margin-bottom: 0.4rem;
}

.reno-field .required {
  color: #b3261e;
  text-decoration: none;
}

/* Element+class selectors: Woodmart styles bare inputs and wins otherwise. */
.reno-auth input[type="text"],
.reno-auth input[type="email"],
.reno-auth input[type="tel"],
.reno-auth input[type="password"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--reno-font);
  font-size: 1rem;
  color: var(--reno-ink);
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.reno-auth input:focus {
  border-color: var(--reno-accent);
  box-shadow: 0 0 0 3px rgba(184, 114, 44, 0.16);
  outline: none;
}

/* Phone numbers are Latin-digit and LTR even in an RTL document. */
.reno-auth input[type="tel"] {
  direction: ltr;
  text-align: right;
}

.reno-field__note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--reno-muted);
}

.reno-auth button[type="submit"] {
  width: 100%;
  min-height: 52px;
  margin-top: 0.5rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--reno-font);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--reno-accent);
  border: none;
  border-radius: var(--reno-radius);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.reno-auth button[type="submit"]:hover,
.reno-auth button[type="submit"]:focus-visible {
  background: var(--reno-accent-dark);
}

.reno-auth__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.88rem;
}

.reno-auth__row a {
  color: var(--reno-accent-dark);
  text-decoration: underline;
}

.reno-auth__remember {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--reno-muted);
}

.reno-auth__benefits {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px dashed var(--reno-sand);
  display: grid;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--reno-muted);
}

.reno-auth__benefits li::before {
  content: "✓";
  color: var(--reno-success);
  font-weight: 700;
  margin-inline-end: 0.5rem;
}

/* OTP login is the intended end state but needs an SMS provider, which is
   deferred. Say so rather than shipping a dead button. */
.reno-auth__future {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--reno-muted);
  background: var(--reno-cream);
  border-radius: var(--reno-radius);
}

/* =========================================================================
 * Inner pages
 * ====================================================================== */

.reno-page__head { padding-bottom: 0; }

.reno-page .wd-page-title { display: none; }

.reno-service__detail {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.87rem;
  color: var(--reno-muted);
}

.reno-service__detail li::before {
  content: "—";
  margin-inline-end: 0.45rem;
  color: var(--reno-wood-light);
}

/* About ---------------------------------------------------------------- */

.reno-about__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.reno-about__text h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.8rem;
}

.reno-about__text h2:not(:first-child) { margin-top: 2rem; }

.reno-about__text p {
  line-height: 2.1;
  color: var(--reno-muted);
  margin: 0 0 1rem;
}

.reno-about__media-note {
  margin-top: 0.85rem;
  font-size: 0.83rem;
  color: var(--reno-muted);
  text-align: center;
}

.reno-promise { background: var(--reno-cream); }

.reno-promise__grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.reno-promise__item {
  background: #fff;
  border-radius: var(--reno-radius);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--reno-shadow);
}

.reno-promise__item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.5rem;
}

.reno-promise__item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 2;
  color: var(--reno-muted);
}

.reno-promise__item--todo { border: 1px dashed var(--reno-accent); }

.reno-promise__item--todo em,
.reno-contact__todo em {
  color: #a3521f;
  font-style: normal;
}

/* Contact -------------------------------------------------------------- */

.reno-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
}

.reno-contact__details h2,
.reno-contact__form h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 1.25rem;
}

.reno-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.reno-contact__list li {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--reno-sand);
}

.reno-contact__label {
  font-size: 0.82rem;
  color: var(--reno-muted);
}

.reno-contact__value {
  font-weight: 500;
  color: var(--reno-ink);
}

.reno-contact__note {
  margin-top: 1.5rem;
  font-size: 0.87rem;
  line-height: 2;
  color: var(--reno-muted);
}

/* Portfolio ------------------------------------------------------------ */

.reno-portfolio__grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
}

.reno-portfolio__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.reno-portfolio__media .reno-placeholder { min-height: 170px; }

.reno-portfolio__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.35rem;
}

.reno-portfolio__services {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  color: var(--reno-muted);
}

.reno-portfolio__note {
  margin: 0;
  font-size: 0.8rem;
  color: #a3521f;
}

/* Notices -------------------------------------------------------------- */

.reno-notice {
  padding: 1.15rem 1.35rem;
  background: var(--reno-cream);
  border-radius: var(--reno-radius);
  border-inline-start: 4px solid var(--reno-wood-light);
  font-size: 0.9rem;
  line-height: 2;
  color: var(--reno-muted);
}

.reno-notice--warn {
  background: #fdf4e6;
  border-inline-start-color: var(--reno-accent);
  margin-bottom: 2rem;
}

.reno-notice p { margin: 0 0 0.5rem; }
.reno-notice p:last-child { margin-bottom: 0; }

.reno-notice code {
  background: #fff;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  direction: ltr;
  display: inline-block;
}

@media (max-width: 900px) {
  .reno-about__grid,
  .reno-contact__grid {
    grid-template-columns: 1fr;
  }
}

/* Suppress Woodmart's title band where the template supplies its own <h1>. */
body.reno-has-own-title .wd-page-title,
body.reno-has-own-title .page-title {
  display: none;
}

/* =========================================================================
 * Side login modal
 *
 * Woodmart renders this into the footer and slides it in from the inline
 * start edge. Its default is cramped and generic; this brings it in line with
 * the account page and gives the fields room to breathe.
 * ====================================================================== */

.login-form-side {
  width: min(420px, 92vw);
  padding: 0;
  background: #fff;
}

.login-form-side .wd-heading {
  padding: 1.4rem 1.6rem;
  background: var(--reno-cream);
  border-bottom: 1px solid var(--reno-sand);
}

.login-form-side .wd-heading .title {
  font-family: var(--reno-font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--reno-ink);
}

.login-form-side form.login {
  padding: 1.6rem;
}

.login-form-side .woocommerce-form-row,
.login-form-side .form-row {
  margin-bottom: 1.15rem;
  padding: 0;
}

.login-form-side label {
  display: block;
  font-family: var(--reno-font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--reno-ink);
  margin-bottom: 0.4rem;
}

.login-form-side input[type="text"],
.login-form-side input[type="email"],
.login-form-side input[type="password"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--reno-font);
  font-size: 1rem;
  color: var(--reno-ink);
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.login-form-side input:focus {
  border-color: var(--reno-accent);
  box-shadow: 0 0 0 3px rgba(184, 114, 44, 0.16);
  outline: none;
}

.login-form-side button[type="submit"],
.login-form-side .button {
  width: 100%;
  min-height: 52px;
  font-family: var(--reno-font);
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  background: var(--reno-accent);
  border: none;
  border-radius: var(--reno-radius);
  transition: background-color 0.18s ease;
}

.login-form-side button[type="submit"]:hover,
.login-form-side .button:hover {
  background: var(--reno-accent-dark);
  color: #fff;
}

.login-form-side .woocommerce-form-login__rememberme {
  font-size: 0.87rem;
  color: var(--reno-muted);
}

.login-form-side .lost_password a {
  font-size: 0.87rem;
  color: var(--reno-accent-dark);
  text-decoration: underline;
}

.login-form-side .create-account-question {
  margin: 0;
  padding: 1.5rem 1.6rem;
  background: var(--reno-cream);
  border-top: 1px solid var(--reno-sand);
  text-align: center;
}

.login-form-side .create-account-question p {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--reno-muted);
}

.login-form-side .create-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-family: var(--reno-font);
  font-weight: 700;
  color: var(--reno-accent-dark);
  background: #fff;
  border: 2px solid var(--reno-accent);
  border-radius: var(--reno-radius);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.login-form-side .create-account-button:hover {
  background: var(--reno-accent);
  color: #fff;
}

/* =========================================================================
 * Assessment form
 *
 * Every extra field costs completions, so the form is short and each step
 * fits on one phone screen. The result block is the payoff and gets the
 * strongest visual treatment on the site.
 * ====================================================================== */

.reno-assess__form {
  max-width: 760px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  box-shadow: var(--reno-shadow);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* Progress ------------------------------------------------------------- */

.reno-steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--reno-sand);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--reno-muted);
}

.reno-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.reno-steps__item span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--reno-sand);
  color: var(--reno-wood);
  font-size: 0.8rem;
  font-weight: 700;
}

.reno-steps__item.is-current {
  color: var(--reno-ink);
  font-weight: 700;
}

.reno-steps__item.is-current span {
  background: var(--reno-accent);
  color: #fff;
}

.reno-steps__item.is-done span {
  background: var(--reno-success);
  color: #fff;
}

/* Steps ---------------------------------------------------------------- */

.reno-step {
  display: none;
  border: none;
  margin: 0;
  padding: 0;
}

.reno-step.is-active { display: block; }

.reno-step__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.4rem;
  padding: 0;
}

.reno-step__title:focus { outline: none; }

.reno-step__hint {
  font-size: 0.88rem;
  color: var(--reno-muted);
  margin: 0 0 1.5rem;
}

.reno-step__error {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: #8c1d18;
  background: #fceceb;
  border-radius: var(--reno-radius);
}

.reno-step__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--reno-sand);
}

.reno-assess__form .reno-cta { flex: 1 1 auto; justify-content: center; }

.reno-btn-ghost {
  flex: 0 0 auto;
  padding: 1.05rem 1.75rem;
  font-family: var(--reno-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--reno-muted);
  background: transparent;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.reno-btn-ghost:hover {
  border-color: var(--reno-wood-light);
  color: var(--reno-ink);
}

/* Counters ------------------------------------------------------------- */

.reno-counters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.reno-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
}

.reno-counter__label strong {
  display: block;
  font-size: 1rem;
  color: var(--reno-ink);
}

.reno-counter__label span {
  font-size: 0.8rem;
  color: var(--reno-muted);
}

.reno-counter__controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Element+class: Woodmart's button rules set min-height 42px otherwise. */
.reno-assess__form button.reno-counter__btn {
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--reno-wood);
  background: var(--reno-cream);
  border: 1px solid var(--reno-sand);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.reno-assess__form button.reno-counter__btn:hover {
  background: var(--reno-sand);
}

.reno-counter__input {
  width: 56px;
  height: 40px;
  padding: 0;
  text-align: center;
  font-family: var(--reno-font);
  font-size: 1rem;
  color: var(--reno-ink);
  border: 1px solid var(--reno-sand);
  border-radius: 8px;
  -moz-appearance: textfield;
}

.reno-counter__input::-webkit-outer-spin-button,
.reno-counter__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Checkboxes ----------------------------------------------------------- */

.reno-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.reno-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.reno-check:hover { border-color: var(--reno-wood-light); }

.reno-check:has(input:checked) {
  border-color: var(--reno-accent);
  background: #fdf7f0;
}

.reno-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--reno-accent);
  flex: 0 0 auto;
}

.reno-check__body strong {
  display: block;
  font-size: 0.98rem;
  color: var(--reno-ink);
}

.reno-check__body em {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--reno-muted);
}

.reno-check--inline {
  margin-top: 1rem;
  align-items: center;
}

/* Fields --------------------------------------------------------------- */

.reno-assess__form .reno-select,
.reno-assess__form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--reno-font);
  font-size: 1rem;
  color: var(--reno-ink);
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
}

.reno-assess__form .reno-select:focus,
.reno-assess__form textarea:focus {
  border-color: var(--reno-accent);
  box-shadow: 0 0 0 3px rgba(184, 114, 44, 0.16);
  outline: none;
}

/* Uploads -------------------------------------------------------------- */

.reno-upload {
  padding: 1.25rem;
  border: 2px dashed var(--reno-sand);
  border-radius: var(--reno-radius);
  text-align: center;
}

.reno-assess__form button.reno-upload__btn {
  padding: 0.75rem 1.5rem;
  font-family: var(--reno-font);
  font-weight: 700;
  color: var(--reno-wood);
  background: var(--reno-cream);
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  cursor: pointer;
}

.reno-assess__form button.reno-upload__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reno-upload__hint {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--reno-muted);
}

.reno-upload__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  text-align: start;
}

.reno-upload__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  background: var(--reno-cream);
  border-radius: 8px;
}

.reno-assess__form button.reno-upload__remove {
  min-height: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  color: #8c1d18;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

/* Result --------------------------------------------------------------- */

.reno-result__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.reno-result__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.15rem;
  background: var(--reno-cream);
  border-radius: var(--reno-radius);
}

.reno-result__row dt {
  font-size: 0.92rem;
  color: var(--reno-muted);
}

.reno-result__row dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--reno-ink);
}

/* The headline number. Everything else on the page defers to it. */
.reno-result__row--main {
  background: var(--reno-wood-dark);
  padding: 1.5rem;
}

.reno-result__row--main dt { color: rgba(255, 255, 255, 0.78); }

.reno-result__row--main dd {
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  color: #fff;
}

.reno-result__row--save {
  background: #eaf4ee;
  border: 1px solid #cde5d7;
}

.reno-result__row--save dd { color: var(--reno-success); }

.reno-result__row--save small {
  font-size: 0.85rem;
  font-weight: 500;
  margin-inline-start: 0.35rem;
}

.reno-result__review {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.87rem;
  line-height: 1.9;
  color: #7a4a00;
  background: #fdf4e6;
  border-radius: var(--reno-radius);
}

.reno-result__caveat {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--reno-muted);
  text-align: center;
}

.reno-result__next {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--reno-sand);
  text-align: center;
}

.reno-result__next p {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--reno-muted);
}

@media (max-width: 560px) {
  .reno-counter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .reno-counter__controls { justify-content: space-between; }

  .reno-step__nav { flex-direction: column-reverse; }

  .reno-btn-ghost { width: 100%; }
}

/* =========================================================================
 * Address map picker
 * ====================================================================== */

.reno-map {
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
  overflow: hidden;
}

.reno-map__canvas {
  height: 300px;
  width: 100%;
  background: var(--reno-cream);
}

.reno-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--reno-cream);
  border-top: 1px solid var(--reno-sand);
}

.reno-assess__form button.reno-map__locate {
  min-height: 0;
  padding: 0.5rem 1rem;
  font-family: var(--reno-font);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--reno-wood);
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: 8px;
  cursor: pointer;
}

.reno-assess__form button.reno-map__locate:disabled { opacity: 0.6; }

.reno-map__coords {
  font-size: 0.82rem;
  color: var(--reno-muted);
}

/* Leaflet's controls default to LTR positioning; nudge for RTL pages. */
.reno-map .leaflet-control-attribution {
  font-size: 10px;
  direction: ltr;
}

/* Request block --------------------------------------------------------- */

.reno-result__next {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--reno-sand);
  text-align: start;
}

.reno-result__next h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--reno-ink);
  margin: 0 0 0.5rem;
}

.reno-result__next > p {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  line-height: 2;
  color: var(--reno-muted);
}

.reno-assess__form .reno-field input[type="text"],
.reno-assess__form .reno-field input[type="tel"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--reno-font);
  font-size: 1rem;
  color: var(--reno-ink);
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
}

.reno-assess__form .reno-field input[type="tel"] {
  direction: ltr;
  text-align: right;
}

.reno-assess__form .reno-field input:focus {
  border-color: var(--reno-accent);
  box-shadow: 0 0 0 3px rgba(184, 114, 44, 0.16);
  outline: none;
}

.reno-result__done {
  margin-top: 1.75rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background: #eaf4ee;
  border: 1px solid #cde5d7;
  border-radius: var(--reno-radius);
}

.reno-result__done h3 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--reno-success);
}

.reno-result__done p {
  margin: 0;
  color: var(--reno-ink);
  line-height: 2;
}

/* =========================================================================
 * Sample imagery in content
 * ====================================================================== */

.reno-sample {
  margin: 0;
  border-radius: var(--reno-radius);
  overflow: hidden;
  background: var(--reno-cream);
}

.reno-sample img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.reno-sample__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
}

.reno-sample__label {
  font-weight: 700;
  color: var(--reno-ink);
}

/* Deliberately conspicuous: these must not ship unnoticed. */
.reno-sample__badge {
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a2f00;
  background: rgba(255, 214, 138, 0.94);
  border-radius: 4px;
}

.reno-about__media .reno-sample + .reno-sample { margin-top: 0.75rem; }

.reno-portfolio__media .reno-sample img { height: 170px; }

/* Known-customer summary on the assessment form ------------------------- */

.reno-known {
  padding: 1.15rem 1.35rem;
  background: var(--reno-cream);
  border-radius: var(--reno-radius);
  margin-bottom: 1.5rem;
}

.reno-known__intro {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--reno-muted);
}

.reno-known__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.reno-known__list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.5rem;
}

.reno-known__list span { color: var(--reno-muted); }
.reno-known__list em { color: #a3521f; font-style: normal; }

.reno-known__edit {
  margin: 1rem 0 0;
  font-size: 0.87rem;
}

.reno-known__edit a {
  color: var(--reno-accent-dark);
  text-decoration: underline;
}

/* Account screens ------------------------------------------------------- */

.reno-account-map { margin-top: 1.5rem; }

.reno-account-map .reno-map__canvas { height: 280px; }

.reno-account-intro {
  padding: 1.5rem;
  background: var(--reno-cream);
  border-radius: var(--reno-radius);
  margin-bottom: 1.5rem;
}

.reno-account-intro h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--reno-ink);
}

.reno-account-intro p {
  margin: 0 0 1rem;
  color: var(--reno-muted);
}

.reno-account-intro p:last-child { margin-bottom: 0; }

/* =========================================================================
 * Customer request panel
 *
 * A renovation is a weeks-long job the customer cannot see. Without a status
 * they can check themselves, every question becomes a phone call.
 * ====================================================================== */

.reno-req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.reno-req-card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
}

.reno-req-card.is-waiting {
  border-color: var(--reno-accent);
  background: #fdf9f4;
}

.reno-req-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.reno-req-card__title {
  font-weight: 700;
  color: var(--reno-ink);
  text-decoration: none;
}

.reno-req-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--reno-muted);
}

.reno-req-card__price { font-weight: 700; color: var(--reno-accent-dark); }

.reno-req-card__action {
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--reno-sand);
  font-size: 0.88rem;
}

/* A reply the customer has not read yet. Announced on the list, so they do not
   have to open every request to discover somebody answered. */
.reno-req-card__reply {
  display: inline-block;
  margin: 0.5rem 0 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1d4e79;
  background: #e7f0fa;
  border-radius: 999px;
}

/* Photographs are a contact sheet, not a gallery: one shape, one grid. */
.reno-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--reno-cream);
}

.reno-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.reno-thumb:hover img { transform: scale(1.05); }

.reno-thumb__zoom {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  color: #fff;
  background: rgba(36, 26, 18, 0.72);
  border-start-end-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.reno-thumb:hover .reno-thumb__zoom,
.reno-thumb:focus-visible .reno-thumb__zoom { opacity: 1; }

.reno-status-pill {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--reno-sand);
  color: var(--reno-wood);
}

.reno-status-reno-new       { background: #fdf4e6; color: #96591f; font-weight: 700; }
.reno-status-reno-quoted    { background: #fff4d6; color: #7a5300; font-weight: 700; }
.reno-status-reno-approved  { background: #eaf4ee; color: #2f6b4f; }
.reno-status-reno-progress  { background: #fff4d6; color: #7a5300; }
.reno-status-reno-done      { background: var(--reno-success); color: #fff; }
.reno-status-reno-declined  { background: #fceceb; color: #8c1d18; }
.reno-status-reno-lost      { background: #f4f4f4; color: #8a8a8a; }

/* Conversation states. Deliberately the same three colours the request
   statuses use, because they mean the same three things: needs us, handled,
   finished. */
.reno-ticket-waiting  { background: #fff4d6; color: #7a5300; font-weight: 700; }
.reno-ticket-answered { background: #eaf4ee; color: #2f6b4f; }
.reno-ticket-closed   { background: #f4f4f4; color: #8a8a8a; }

/* «پرسش تازه» ---------------------------------------------------------- */

.reno-ticket-new {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--reno-line);
  border-radius: 12px;
  background: #fff;
}

.reno-ticket-new h3 { margin-top: 0; }
.reno-ticket-new .reno-field { margin-bottom: 1rem; }
.reno-ticket-new input[type="text"],
.reno-ticket-new select,
.reno-ticket-new textarea { width: 100%; box-sizing: border-box; }

/* Timeline -------------------------------------------------------------- */

.reno-timeline {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  counter-reset: step;
}

.reno-timeline__step {
  flex: 1 1 0;
  min-width: 92px;
  position: relative;
  text-align: center;
  padding-top: 2.1rem;
  font-size: 0.78rem;
  color: var(--reno-muted);
}

/* The connecting rail. Drawn from the dot outward so it never overlaps. */
.reno-timeline__step::before {
  content: "";
  position: absolute;
  top: 0.72rem;
  inset-inline-start: 50%;
  width: 100%;
  height: 3px;
  background: var(--reno-sand);
}

.reno-timeline__step:last-child::before { display: none; }

.reno-timeline__dot {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--reno-sand);
  z-index: 2;
}

html[dir="ltr"] .reno-timeline__dot { transform: translateX(-50%); }

.reno-timeline__step.is-done .reno-timeline__dot,
.reno-timeline__step.is-done::before { border-color: var(--reno-success); background: var(--reno-success); }

.reno-timeline__step.is-done .reno-timeline__dot { background: var(--reno-success); }
.reno-timeline__step.is-done::before { background: var(--reno-success); }

.reno-timeline__step.is-current .reno-timeline__dot {
  border-color: var(--reno-accent);
  background: var(--reno-accent);
  box-shadow: 0 0 0 5px rgba(184, 114, 44, 0.18);
}

.reno-timeline__step.is-current { color: var(--reno-ink); font-weight: 700; }

/* Price and decision ---------------------------------------------------- */

.reno-req-status {
  padding: 0.9rem 1.1rem;
  background: var(--reno-cream);
  border-radius: var(--reno-radius);
  font-size: 0.92rem;
}

.reno-req-price {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: var(--reno-radius);
}

.reno-req-price.is-pending { border: 2px solid var(--reno-accent); box-shadow: var(--reno-shadow-lg); }

.reno-req-price h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--reno-muted); font-weight: 500; }

.reno-req-price__amount {
  margin: 0 0 0.75rem;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--reno-ink);
}

.reno-req-price__hint, .reno-req-decision__note {
  font-size: 0.85rem;
  color: var(--reno-muted);
  line-height: 1.9;
}

.reno-req-price__note {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--reno-cream);
  border-radius: var(--reno-radius);
  font-size: 0.9rem;
}

.reno-req-price__note p { margin: 0.4rem 0 0; }

.reno-req-decision {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--reno-sand);
}

.reno-req-decision__intro { margin: 0 0 1rem; font-weight: 700; color: var(--reno-ink); }

.reno-req-decision__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.reno-req-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.reno-req-table th, .reno-req-table td { padding: 0.7rem 0.5rem; text-align: start; border-bottom: 1px solid var(--reno-sand); font-size: 0.9rem; }
.reno-req-table th { width: 8rem; color: var(--reno-muted); font-weight: 500; }

.reno-req-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.reno-req-photos img { width: 100%; height: auto; border-radius: 6px; display: block; }

.reno-req-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.87rem; }
.reno-req-history li { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--reno-sand); }
.reno-req-history time { color: var(--reno-muted); flex: 0 0 auto; }

.reno-req-back { margin-bottom: 0.5rem; font-size: 0.88rem; }
.reno-req-back a { color: var(--reno-accent-dark); }

.reno-account-empty { text-align: center; padding: 2rem 1rem; }
.reno-account-empty p { color: var(--reno-muted); margin-bottom: 1.25rem; }

@media (max-width: 600px) {
  .reno-timeline { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .reno-timeline__step { padding: 0 0 0 0; padding-inline-start: 2rem; text-align: start; min-width: 0; width: 100%; }
  .reno-timeline__step::before { display: none; }
  .reno-timeline__dot { inset-inline-start: 0; transform: none; top: 0.1rem; }
  html[dir="ltr"] .reno-timeline__dot { transform: none; }
}

/* Wishlist and compare are disabled at the option level; this catches any
   markup Woodmart still prints from its header builder templates. */
.wd-header-wishlist,
.wd-header-compare,
.menu-item-wishlist,
.menu-item-compare,
.wd-action-btn.wd-wishlist-btn,
.wd-action-btn.wd-compare-btn {
  display: none !important;
}

/* =========================================================================
 * Fabric choice in the assessment form
 *
 * The colour of a fabric is the decision. Everything here exists to show the
 * swatch as large and as honestly as a screen allows, and to keep the price
 * next to it — the two things a customer weighs against each other.
 * ====================================================================== */

.reno-fabric {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--reno-sand);
}

.reno-fabric__title { font-size: 1rem; margin: 0 0 0.75rem; }

.reno-fabric__source { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.6rem; }

.reno-fabric__cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.reno-fabric__cat {
  padding: 0.4rem 0.95rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--reno-ink);
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.reno-fabric__cat:hover { border-color: var(--reno-accent); }
.reno-fabric__cat.is-active { background: var(--reno-accent); border-color: var(--reno-accent); color: #fff; }

.reno-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.reno-swatch { display: block; cursor: pointer; }
.reno-swatch input { position: absolute; opacity: 0; pointer-events: none; }

.reno-swatch__body {
  display: block;
  padding: 0.5rem;
  background: #fff;
  border: 2px solid var(--reno-sand);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.reno-swatch:hover .reno-swatch__body { border-color: var(--reno-accent); transform: translateY(-2px); }

.reno-swatch input:checked + .reno-swatch__body {
  border-color: var(--reno-accent);
  box-shadow: 0 0 0 3px rgba(184, 114, 44, 0.18);
}

.reno-swatch input:focus-visible + .reno-swatch__body { outline: 3px solid var(--reno-accent); outline-offset: 2px; }

.reno-swatch__body img,
.reno-swatch__blank {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--reno-cream);
  margin-bottom: 0.5rem;
}

.reno-swatch__name { display: block; font-size: 0.85rem; font-weight: 600; line-height: 1.6; }
.reno-swatch__price { display: block; font-size: 0.82rem; color: var(--reno-accent-dark); font-weight: 700; }
.reno-swatch__price small { font-weight: 400; color: var(--reno-muted); }

.reno-check--single { display: block; }

/* =========================================================================
 * Payment box in the customer account
 * ====================================================================== */

.reno-pay-box {
  padding: 1.25rem;
  margin-bottom: 1.75rem;
  background: var(--reno-cream);
  border: 1px solid var(--reno-sand);
  border-radius: 12px;
}

.reno-pay-box__figures {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}

.reno-pay-box__figures li {
  padding: 0.75rem;
  background: #fff;
  border-radius: 8px;
  text-align: center;
}

.reno-pay-box__figures span { display: block; font-size: 0.78rem; color: var(--reno-muted); }
.reno-pay-box__figures strong { display: block; font-size: 1rem; color: var(--reno-accent-dark); }

.reno-pay__ask {
  padding: 0.9rem 1.1rem;
  background: #fff;
  border-inline-start: 4px solid var(--reno-accent);
  border-radius: 8px;
  line-height: 2;
}

.reno-pay__ask.is-waiting { border-inline-start-color: #b8860b; }
.reno-pay__ask.is-done { border-inline-start-color: #2f6b4f; color: #22503b; }

.reno-pay__methods { margin-top: 1.25rem; }
.reno-pay__methods h4 { margin: 0 0 0.6rem; font-size: 0.95rem; }

/* The card number is what the customer copies. It gets to be big. */
.reno-pay__card {
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px dashed var(--reno-accent);
  border-radius: 10px;
  display: grid;
  gap: 0.25rem;
}

.reno-pay__card-label { font-size: 0.78rem; color: var(--reno-muted); }

.reno-pay__card-number {
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  color: var(--reno-ink);
  font-variant-numeric: tabular-nums;
}

.reno-pay__card span { font-size: 0.85rem; color: var(--reno-muted); }
.reno-pay__pos { margin-top: 0.75rem; font-size: 0.88rem; color: var(--reno-muted); }
.reno-pay__note { font-size: 0.85rem; color: var(--reno-muted); line-height: 2; }

.reno-pay__upload { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--reno-sand); }
.reno-pay__upload h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.reno-pay__upload input[type="file"] { width: 100%; padding: 0.6rem; background: #fff; border: 1px solid var(--reno-sand); border-radius: 8px; }

.reno-pay__history { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; }

.reno-pay__history li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border-inline-start: 3px solid var(--reno-sand);
  border-radius: 8px;
  font-size: 0.87rem;
}

.reno-pay__history li.is-confirmed { border-inline-start-color: #2f6b4f; }
.reno-pay__history li.is-pending { border-inline-start-color: #b8860b; }
.reno-pay__history li.is-rejected { border-inline-start-color: #b32d2e; }
.reno-pay__status { margin-inline-start: auto; font-size: 0.82rem; color: var(--reno-muted); }
.reno-pay__reject-note { flex-basis: 100%; margin: 0.3rem 0 0; font-size: 0.82rem; color: #8c1d18; }

/* =========================================================================
 * Address book
 * ====================================================================== */

.reno-addr__intro { color: var(--reno-muted); line-height: 2; }
.reno-addr__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.75rem; }

.reno-addr__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: 10px;
}

.reno-addr__item p { margin: 0.25rem 0; line-height: 1.9; }
.reno-addr__pin { font-size: 0.78rem; color: #2f6b4f; }
.reno-addr__nopin { font-size: 0.78rem; color: var(--reno-muted); }

.reno-addr__actions { display: flex; align-items: center; gap: 0.75rem; }
.reno-addr__actions form { margin: 0; }

.reno-addr__delete {
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
  color: #b32d2e;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.reno-addr__empty { padding: 1.5rem; text-align: center; color: var(--reno-muted); background: var(--reno-cream); border-radius: 10px; }
.reno-addr__form { margin-top: 1.5rem; }
.reno-addr__form h3 { font-size: 1.05rem; margin: 0 0 1rem; }
.reno-addr__cancel { margin-inline-start: 1rem; font-size: 0.88rem; color: var(--reno-muted); }

.reno-pay__copy {
  justify-self: start;
  margin-top: 0.4rem;
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--reno-accent-dark);
  background: var(--reno-cream);
  border: 1px solid var(--reno-sand);
  border-radius: 6px;
  cursor: pointer;
}

.reno-pay__copy:hover { border-color: var(--reno-accent); }
.reno-pay__copy.is-copied { color: #22503b; background: #eaf4ee; border-color: #b9d8c6; }

/* A fabric plan: one row per piece the customer owns. */
.reno-plan { display: grid; gap: 1rem; margin-top: 1rem; }

.reno-plan__row {
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: 12px;
}

.reno-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px dashed var(--reno-sand);
}

.reno-plan__head > strong { font-size: 1.02rem; }

.reno-plan__part { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin: 0; }

.reno-plan__part select {
  padding: 0.35rem 0.6rem;
  font-family: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--reno-sand);
  border-radius: 6px;
  background: #fff;
}

.reno-plan__own {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0 auto;
  font-size: 0.85rem;
  color: var(--reno-muted);
  cursor: pointer;
}

.reno-plan__own input { width: auto; margin: 0; }

.reno-plan__own-note {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: var(--reno-cream);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--reno-muted);
}

@media (max-width: 600px) {
  .reno-plan__own { margin-inline-start: 0; }
}

/* =========================================================================
 * The hidden attribute must win
 *
 * `[hidden]` is display:none in the UA stylesheet, which any author rule with
 * a display property silently beats. `.reno-swatches { display: grid }` did
 * exactly that: every fabric category rendered at once and the category tabs
 * looked broken because nothing appeared to change when they were clicked.
 * ====================================================================== */

[hidden] { display: none !important; }

/* =========================================================================
 * Mobile
 *
 * The page was six and a half screens on a phone: seven service cards with
 * descriptions, four process steps with room to spare, and a footer 897px tall
 * carrying sixty-one words. Everything was present; nothing was reachable.
 *
 * The job on a phone is narrower than the job on a desktop. Somebody standing
 * in their living room looking at a tired sofa wants three things: the promise,
 * the number that answers «is it worth it?», and a way to act. Everything else
 * is scroll tax, so it is either compressed or removed — not shrunk, which just
 * makes dense content dense and small.
 * ====================================================================== */

@media (max-width: 767px) {

  /* Rhythm --------------------------------------------------------------- */

  .reno-section { padding-block: 2.5rem; }
  .reno-container { padding-inline: 1.15rem; }

  .reno-section__title { font-size: 1.32rem; line-height: 1.6; margin-bottom: 0.5rem; }
  .reno-section__lead { font-size: 0.92rem; line-height: 1.95; margin-bottom: 1.5rem; }

  /* Services: a price list, not a catalogue ------------------------------ */

  /* Seven cards with a paragraph each is a brochure. Nobody deciding whether
     to bother reads seven descriptions on a phone — they scan names against
     prices. The descriptions stay on desktop, where there is room to browse. */
  .reno-services__grid {
    display: block;
    border-top: 1px solid var(--reno-sand);
  }

  /* Grid, not a wrapping flex row: at 375px the name and price did not fit on
     one line and wrapped, which put every service back to two rows and gave
     away half of what the list saved. The name now wraps inside its own
     column and the price holds its place. */
  .reno-service {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.2rem 0.75rem;
    padding: 0.85rem 0;
    margin: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--reno-sand);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .reno-service__desc { display: none; }

  .reno-service__name { margin: 0; font-size: 0.95rem; line-height: 1.7; }

  /* The card design underlines each name. In a list that reads as a link. */
  .reno-service__name::after { display: none; }
  .reno-service__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    /* The card layout separates the price from the description with a dashed
       rule. With the description gone it is a line hanging over nothing. */
    border-top: 0;
    padding-top: 0;
  }
  .reno-service__from { font-size: 0.75rem; }
  .reno-service__unit { display: none; }
  .reno-service .reno-price { font-size: 0.95rem; }

  /* Process: same four steps, a third of the height ---------------------- */

  .reno-process__list { gap: 0; }

  .reno-process__step {
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    align-items: start;
    gap: 0.15rem 0.75rem;
    padding: 0.9rem 0;
    margin: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--reno-sand);
    border-radius: 0;
  }

  .reno-process__step:last-child { border-bottom: 0; }

  .reno-process__num {
    grid-row: 1 / 3;
    width: 1.7rem;
    height: 1.7rem;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.7rem;
  }

  /* Centred text is a card convention. In a list it leaves every line starting
     somewhere different, which is what makes a list feel like clutter. */
  .reno-process__step { text-align: start; }
  .reno-process__step h3 { margin: 0; font-size: 0.95rem; text-align: start; }
  .reno-process__step p { margin: 0.15rem 0 0; font-size: 0.87rem; line-height: 1.9; text-align: start; }

  /* The comparison: the argument, tightened ------------------------------ */

  .reno-compare { gap: 0.5rem; }
  .reno-compare__card { padding: 1rem 1.15rem; }
  .reno-compare__price { font-size: 1.35rem; }
  .reno-compare__note { font-size: 0.82rem; }

  /* «در برابر» becomes a rule with a word in it rather than its own block. */
  .reno-compare__vs {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    background: none;
  }

  .reno-compare__vs::before,
  .reno-compare__vs::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--reno-sand);
  }

  .reno-why__caveat { font-size: 0.82rem; line-height: 1.95; }

  /* Footer: contact details, and nothing that repeats the menu ----------- */

  /* «دسترسی سریع» is the same five links as the hamburger, one tap away.
     A duplicate menu is a desktop convention that costs 250px here. */
  .reno-footer__col--links { display: none; }

  .reno-footer { padding: 2rem 1.15rem 1.25rem; }
  .reno-footer__cols { gap: 1.5rem; }
  .reno-footer__logo { width: 64px; }
  .reno-footer__tagline { font-size: 0.87rem; }
  .reno-footer__legal { margin-top: 1.5rem; font-size: 0.78rem; }

  .reno-footer__list--contact li {
    padding-block: 0.4rem;
    font-size: 0.88rem;
  }

  /* Hero: the thesis, not a poster --------------------------------------- */

  .reno-hero__slide { min-height: 78vh; }
  .reno-hero__title { font-size: 1.75rem; line-height: 1.5; }
  .reno-hero__subtitle { font-size: 0.95rem; line-height: 1.95; }

  /* Room for the thumb bar, so it never covers the last line of anything.
     On the wrapper rather than body: Woodmart owns body's padding. */
  .wd-page-content,
  .website-wrapper { padding-bottom: 76px; }
}

/* =========================================================================
 * The thumb bar
 *
 * This site's whole advantage is that it quotes online when no competitor
 * does. On a phone that advantage scrolled off the top of the screen after two
 * swipes. Now the price and the phone stay under the thumb the entire way
 * down — the one bold element on mobile, and the one the business case earns.
 * ====================================================================== */

.reno-thumbbar { display: none; }

@media (max-width: 767px) {
  .reno-thumbbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 400;
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--reno-sand);
    transition: transform 0.28s ease, opacity 0.2s ease;
  }

  /* Tucked away while the hero is on screen: the hero has its own call to
     action, and two at once is one too many. */
  .reno-thumbbar.is-tucked {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }

  /* Pixels, not rem: Woodmart sets the root font to 14px, so a "3rem" tap
     target is 42px — under the 48px a thumb actually needs. A tap target is a
     physical constraint and should not scale with the type. */
  .reno-thumbbar__primary,
  .reno-thumbbar__call { min-height: 48px; }

  .reno-thumbbar__primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--reno-accent);
    border-radius: 10px;
    text-decoration: none;
  }

  .reno-thumbbar__primary:active { background: var(--reno-accent-dark); }

  .reno-thumbbar__call {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 60px;
    padding-inline: 0.75rem;
    font-size: 0.72rem;
    color: var(--reno-accent-dark);
    background: var(--reno-cream);
    border: 1px solid var(--reno-sand);
    border-radius: 10px;
    text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reno-thumbbar { transition: none; }
}

/* =========================================================================
 * The form, on a phone
 *
 * Every tap target here was 40–42px, because Woodmart's --btn-height is 42px
 * and the root font is 14px so "3rem" lands short. The plus and minus on the
 * counters are the most-used controls on the site and the easiest to miss:
 * a mis-tap adds a sofa the customer does not own and quotes them for it.
 * ====================================================================== */

@media (max-width: 767px) {

  .reno-counter {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.85rem 0;
    text-align: start;
  }

  .reno-counter__label { text-align: start; }
  .reno-counter__label strong { font-size: 0.95rem; }
  .reno-counter__label span { font-size: 0.8rem; }

  .reno-counter__controls { gap: 0.4rem; }

  /* Same selector shape as the desktop rule that pins these against
     Woodmart's --btn-height. A plainer selector loses to it, which is how the
     buttons stayed 40px after being told to be 48. */
  .reno-assess__form button.reno-counter__btn {
    /* flex-basis too: the controls row is a flex container and was shrinking
       the button back to 40px wide however often it was told 48. */
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    font-size: 1.25rem;
  }

  .reno-counter__input {
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    height: 48px;
    min-height: 48px;
    font-size: 1.05rem;
  }

  /* Checkboxes and radios are tapped, not clicked. */
  .reno-check { padding: 0.85rem 0.9rem; }
  .reno-check__body strong { font-size: 0.93rem; }
  .reno-check__body em { font-size: 0.8rem; }

  .reno-step__title { font-size: 1.15rem; }
  .reno-step__hint { font-size: 0.85rem; }

  .reno-step__nav { gap: 0.6rem; }

  .reno-step__nav .reno-cta,
  .reno-step__nav .reno-btn-ghost {
    flex: 1;
    min-height: 48px;
    justify-content: center;
    padding-inline: 1rem;
    font-size: 0.95rem;
  }

  /* Two swatches across at 375px: any more and the colour — the entire point
     of a swatch — is too small to judge. */
  .reno-swatches { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .reno-swatch__name { font-size: 0.8rem; }
  .reno-swatch__price { font-size: 0.78rem; }

  .reno-fabric__cat { min-height: 40px; padding-inline: 0.85rem; }

  .reno-field input,
  .reno-field textarea,
  .reno-field select,
  .reno-select { min-height: 48px; font-size: 1rem; }

  .reno-steps { font-size: 0.72rem; gap: 0.25rem; }
}

/* =========================================================================
 * The customer's account, on a phone
 *
 * This is where a customer checks what is happening to their sofa — the whole
 * reason the panel exists is so that question does not become a phone call.
 * On a phone it opened with a five-item menu filling a third of the screen,
 * then a nine-step timeline, and the page scrolled sideways.
 * ====================================================================== */

/* The sideways scroll, at every width.
 *
 * Woodmart lays the account out on a ±30px gutter: the wrapper carries
 * margin:-30px and each column pads 30px back. On a 345px container that makes
 * the wrapper 405px and pushes 15px past the viewport. Cancelling both leaves
 * the layout identical and the page still. */
@media (max-width: 767px) {
  /* Woodmart's account stylesheet is one of its parts/*.min.css files, injected
     later in the document than the child theme — so at equal specificity it
     wins on source order. These selectors carry one class more than its own. */
  .woocommerce .woocommerce-my-account-wrapper { margin-inline: 0; }

  .woocommerce .wd-my-account-sidebar,
  .woocommerce .woocommerce-MyAccount-content { padding-inline: 0; }
}

@media (max-width: 767px) {

  /* Account menu: tabs, not a stack ------------------------------------- */

  /* Five stacked links were 200px — a third of the screen, above the content
     they lead to. As a scrolling strip they cost 56px and read as what they
     are: the sections of this account. */
  .woocommerce-MyAccount-navigation { margin-bottom: 1.25rem; }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0 0.35rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--reno-sand);
  }

  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

  .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
    margin: 0;
    border: 0;
  }

  .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.6rem 0.9rem;
    font-size: 0.87rem;
    color: var(--reno-muted);
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
  }

  .woocommerce-MyAccount-navigation li.is-active a,
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active a {
    color: var(--reno-ink);
    font-weight: 700;
    background: var(--reno-cream);
    border-bottom-color: var(--reno-accent);
  }

  /* Timeline: nine steps, half the height ------------------------------- */

  /* Stacked, it was 338px — a wall between the customer and the price. A
     horizontal strip was tried and rejected: it scrolls, and a step you have
     to discover by swiping is a step you do not see. A three-across grid shows
     all nine at once in half the space, with the current one carrying the
     emphasis. The connector lines go: they mean nothing across a wrap. */
  .reno-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.25rem 0 0;
    overflow: visible;
  }

  .reno-timeline__step {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.3rem;
    padding: 0;
    text-align: center;
  }

  .reno-timeline__step::before { display: none; }

  .reno-timeline__dot {
    position: relative;
    width: 12px;
    height: 12px;
    margin: 0;
  }

  .reno-timeline__label {
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--reno-muted);
  }

  .reno-timeline__step.is-done .reno-timeline__label { color: var(--reno-ink); }

  .reno-timeline__step.is-current .reno-timeline__label {
    color: var(--reno-accent-dark);
    font-weight: 700;
  }

  /* Request cards and detail -------------------------------------------- */

  .reno-req-card { padding: 0.9rem 1rem; }
  .reno-req-card__title { font-size: 0.97rem; }
  .reno-req-card__meta { font-size: 0.82rem; gap: 0.2rem 0.75rem; }

  .reno-req-status { font-size: 0.9rem; line-height: 1.95; }

  .reno-req-price { padding: 1rem 1.15rem; }
  .reno-req-price__amount { font-size: 1.3rem; }

  /* Approve and decline are the two most consequential taps in the whole
     product. They get full width and a real target. */
  .reno-req-decision__buttons { display: grid; gap: 0.6rem; }

  .reno-req-decision__buttons .reno-cta,
  .reno-req-decision__buttons .reno-btn-ghost {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .reno-req-table { font-size: 0.87rem; }
  .reno-req-table th { width: 6.5rem; }

  .reno-req-photos { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

  /* Conversation and history -------------------------------------------- */

  .reno-thread__item { padding: 0.75rem 0.85rem; }
  .reno-thread__form textarea { min-height: 5rem; }
  .reno-thread__form .reno-cta { width: 100%; min-height: 48px; justify-content: center; }

  .reno-req-history li { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.6rem 0; }
  .reno-req-history time { font-size: 0.75rem; }

  /* Payment ------------------------------------------------------------- */

  .reno-pay-box { padding: 1rem; }
  .reno-pay-box__figures { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .reno-pay__card-number { font-size: 1.15rem; letter-spacing: 0.08em; }
  .reno-pay__copy { min-height: 44px; }
  .reno-pay__upload .reno-cta { width: 100%; min-height: 48px; justify-content: center; }

  /* Addresses ----------------------------------------------------------- */

  .reno-addr__item { flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; }

  /* «حذف» is destructive and «ویرایش» is next to it. Both get a real target so
     the wrong one is not tapped by accident. */
  .reno-addr__actions { width: 100%; justify-content: space-between; gap: 0.75rem; }

  .reno-addr__actions > a,
  .reno-addr__delete {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.5rem;
  }

  /* The map's own «موقعیت فعلی من» is a Woodmart-styled ghost button at 42px. */
  .woocommerce-MyAccount-content .reno-btn-ghost { min-height: 44px; }
  .reno-addr__form .reno-cta { width: 100%; min-height: 48px; justify-content: center; }
  .reno-map__canvas { height: 220px; }
}

/* Woodmart's page-title band is a black block carrying a heading the page
   repeats immediately underneath. On a phone that is 215px of duplication
   before any content. */
@media (max-width: 767px) {
  .page-title.title-size-default,
  .page-title.title-design-default { padding-block: 1.25rem; }

  .page-title .entry-title { font-size: 1.4rem; line-height: 1.5; }
  .page-title .wd-breadcrumbs { font-size: 0.78rem; margin-top: 0.35rem; }
}

/* What the customer is being asked to approve ---------------------------- */

.reno-req-breakdown {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--reno-sand);
  border-radius: 10px;
}

.reno-req-breakdown > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--reno-accent-dark);
}

.reno-req-breakdown[open] > summary { margin-bottom: 0.75rem; }

.reno-req-breakdown .reno-lines { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.reno-req-breakdown .reno-lines td { padding: 0.45rem 0.3rem; text-align: start; border-bottom: 1px solid var(--reno-sand); }
.reno-req-breakdown .reno-lines td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.reno-req-breakdown .reno-lines tr.is-credit td { color: #2f6b4f; }

.reno-req-breakdown .reno-lines__total td {
  font-weight: 700;
  color: var(--reno-accent-dark);
  border-bottom: 0;
  border-top: 2px solid var(--reno-sand);
}

/* Ratings -------------------------------------------------------------- */

.reno-rating {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--reno-line);
  border-radius: 12px;
  background: #fff;
}

.reno-rating h4 { margin: 0 0 0.9rem; }

/* The CSS-only star control, and the one part of it that is easy to get
   backwards.

   The DOM holds 5,4,3,2,1, because "fill everything up to here" is expressed
   with `~`, which can only reach FOLLOWING siblings — so the lower scores have
   to come after the higher one.

   `row-reverse` then puts that DOM order back the right way round on screen: in
   RTL the main axis already runs right-to-left, reversing it runs left-to-right,
   and 5,4,3,2,1 laid out left-to-right reads 1,2,3,4,5 from the right — which is
   where a Persian reader starts. Checking ★۴ fills the four rightmost stars.

   No script. This is filled in on a phone, and a star control that needs
   JavaScript is a star control that is sometimes not there. */
.reno-rating__stars-input {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
}

.reno-rating__stars-input input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.reno-rating__stars-input label {
  font-size: 30px;
  line-height: 1;
  color: #d9d2c8;
  cursor: pointer;
  padding: 4px;
  transition: color 0.12s ease;
}

.reno-rating__stars-input label:hover,
.reno-rating__stars-input label:hover ~ label,
.reno-rating__stars-input input:checked ~ label {
  color: #e0a020;
}

.reno-rating__stars-input input:focus-visible + label {
  outline: 2px solid var(--reno-wood);
  outline-offset: 2px;
  border-radius: 4px;
}

.reno-rating__stars {
  font-size: 22px;
  color: #e0a020;
  letter-spacing: 2px;
  margin: 0 0 0.5rem;
}

.reno-rating__stars span {
  font-size: 0.85rem;
  color: var(--reno-muted);
  letter-spacing: normal;
  margin-inline-start: 0.5rem;
}

.reno-rating blockquote {
  margin: 0.5rem 0 0;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--reno-sand);
  color: var(--reno-ink);
}

.reno-field--check label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

.reno-rating textarea { width: 100%; box-sizing: border-box; }

/* Testimonials --------------------------------------------------------- */

.reno-testimonials { margin: 3rem 0; }
.reno-testimonials__title { text-align: center; margin-bottom: 1.5rem; }

.reno-testimonials__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.reno-testimonial {
  padding: 1.25rem;
  border: 1px solid var(--reno-line);
  border-radius: 12px;
  background: #fff;
}

.reno-testimonial__stars { color: #e0a020; margin: 0 0 0.6rem; letter-spacing: 2px; }
.reno-testimonial__body {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  line-height: 1.9;
}
.reno-testimonial__by { margin: 0; font-size: 0.85rem; color: var(--reno-muted); }
.reno-testimonial__by span { margin-inline-start: 0.5rem; }

@media (max-width: 600px) {
  .reno-testimonials__list { grid-template-columns: 1fr; }
  .reno-rating__stars-input label { font-size: 34px; padding: 6px; }
}

.reno-shrink-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--reno-muted);
}

/* Portfolio: before/after comparison ------------------------------------ */

/* The default — two photographs side by side — stays exactly as it was, and is
   what a visitor without JavaScript sees. `.is-comparing` is added by the
   script only when there are two figures to compare, and only then does the
   frame become a single stacked image with a handle across it. */

.reno-portfolio__media.is-comparing {
  --reno-split: 50%;

  position: relative;
  display: block;
  grid-template-columns: none;
  gap: 0;
  border-radius: var(--reno-radius);
  overflow: hidden;
  touch-action: pan-y;      /* the handle is horizontal; the page still scrolls */
}

.reno-portfolio__media.is-comparing > figure {
  margin: 0;
  display: block;
}

.reno-portfolio__media.is-comparing > figure:last-of-type {
  position: absolute;
  inset: 0;

  /* Clipped from the LEFT edge, not the inline-start edge. The handle is a
     physical position on a photograph — it must not flip with the text
     direction, or dragging right would reveal leftwards. */
  clip-path: inset(0 0 0 var(--reno-split));
}

.reno-portfolio__media.is-comparing img,
.reno-portfolio__media.is-comparing .reno-placeholder {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.reno-portfolio__media.is-comparing .reno-sample { border-radius: 0; }

/* The «نمونه — جایگزین شود» badge must survive this layout. These are
   CC-licensed stand-ins with an attribution obligation, and a badge that
   quietly disappears the moment the design changes is how placeholder
   photography ends up shipping as if it were the workshop's own work.

   It becomes an overlay rather than a strip beneath the photograph, because the
   frame is now one fixed-height image and anything below it would be clipped.
   Only the first figure's badge is shown: both photographs come from the same
   placeholder set, so one badge per card says everything two would. */
.reno-portfolio__media.is-comparing .reno-sample__caption {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 2;
  padding: 0;
}

.reno-portfolio__media.is-comparing .reno-sample__label { display: none; }

.reno-portfolio__media.is-comparing > figure:last-of-type .reno-sample__caption {
  display: none;
}

/* The seam. Drawn on the frame rather than on either figure so it sits above
   both without a stacking-context argument. */
.reno-portfolio__media.is-comparing::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reno-split);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.reno-compare__label {
  position: absolute;
  bottom: 10px;
  z-index: 2;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.reno-portfolio__media.is-comparing .reno-compare__label { opacity: 1; }
.reno-compare__label--before { left: 10px; }
.reno-compare__label--after  { right: 10px; }

/* The handle itself: a real range input, made invisible but left exactly where
   it is so it keeps its own hit area, keyboard behaviour and screen-reader
   semantics. Only the thumb is drawn. */
.reno-compare__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;

  /* A range input is RTL-aware; the handle must not be. */
  direction: ltr;
}

.reno-compare__range:focus { outline: none; }

.reno-compare__range:focus-visible {
  outline: 3px solid var(--reno-wood);
  outline-offset: 2px;
}

.reno-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23705a44'%3E%3Cpath d='M9 6 4 12l5 6zM15 6l5 6-5 6z'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: ew-resize;
}

.reno-compare__range::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23705a44'%3E%3Cpath d='M9 6 4 12l5 6zM15 6l5 6-5 6z'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: ew-resize;
}

.reno-compare__range::-moz-range-track { background: transparent; border: 0; }

/* Portfolio: filtering --------------------------------------------------- */

.reno-portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
}

.reno-portfolio__filter {
  padding: 8px 16px;
  min-height: 40px;
  border: 1px solid var(--reno-line);
  border-radius: 999px;
  background: #fff;
  color: var(--reno-ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reno-portfolio__filter:hover { border-color: var(--reno-wood-light); }

.reno-portfolio__filter.is-active {
  background: var(--reno-wood);
  border-color: var(--reno-wood);
  color: #fff;
}

.reno-portfolio__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  padding: 0;
}

.reno-portfolio__tags li {
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--reno-cream);
  color: var(--reno-muted);
}

.reno-portfolio__empty {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--reno-muted);
}

.reno-section--tint { background: var(--reno-cream); }

@media (max-width: 600px) {
  .reno-portfolio__media.is-comparing img,
  .reno-portfolio__media.is-comparing .reno-placeholder { height: 220px; }

  .reno-portfolio__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .reno-portfolio__filter { flex: 0 0 auto; }
}

/* Blog ------------------------------------------------------------------ */

.reno-blog__cats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
}

.reno-blog__cats a {
  display: inline-block;
  padding: 8px 16px;
  min-height: 40px;
  border: 1px solid var(--reno-line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--reno-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.reno-blog__cats a:hover { border-color: var(--reno-wood-light); }

.reno-blog__cats a.is-active {
  background: var(--reno-wood);
  border-color: var(--reno-wood);
  color: #fff;
}

.reno-blog__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.75rem;
}

.reno-blog__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--reno-line);
  border-radius: var(--reno-radius);
  overflow: hidden;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.reno-blog__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(60, 40, 20, 0.1);
}

.reno-blog__media {
  position: relative;
  display: block;
  background: var(--reno-cream);
}

.reno-blog__media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.reno-blog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.15rem 0;
  font-size: 0.75rem;
  color: var(--reno-muted);
}

.reno-blog__cat {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--reno-cream);
  color: var(--reno-wood);
  font-weight: 700;
}

.reno-blog__title {
  display: block;
  padding: 0.5rem 1.15rem 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--reno-ink);
}

.reno-blog__excerpt {
  display: block;
  padding: 0.55rem 1.15rem 0;
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--reno-muted);
}

/* Pushed to the bottom so the link reads the same height whatever the excerpt
   runs to — a row of cards whose call to action sits at five different heights
   looks unfinished. */
.reno-blog__more {
  display: block;
  margin-top: auto;
  padding: 1rem 1.15rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--reno-wood);
}

.reno-blog__back { margin: 1rem 0 0; font-size: 0.9rem; }

/* The badge, floated over a featured image rather than sitting under it. */
.reno-sample__badge--float {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
}

/* Article ---------------------------------------------------------------- */

.reno-article__head { max-width: 760px; }

.reno-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  color: var(--reno-muted);
}

.reno-article__cat {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--reno-cream);
  color: var(--reno-wood);
  font-weight: 700;
  text-decoration: none;
}

.reno-article__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  line-height: 1.55;
  color: var(--reno-ink);
}

.reno-article__lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 2;
  color: var(--reno-muted);
}

.reno-article__hero {
  position: relative;
  margin: 0 0 2.5rem;
  max-width: 900px;
  border-radius: var(--reno-radius);
  overflow: hidden;
}

.reno-article__hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* One column, nothing in the margins. The reader came from a search with a
   question; a sidebar is a set of exits between them and the answer. */
.reno-article__body {
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 2.15;
  color: var(--reno-ink);
}

.reno-article__body h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--reno-ink);
}

.reno-article__body h3 {
  margin: 1.9rem 0 0.6rem;
  font-size: 1.08rem;
  color: var(--reno-wood);
}

.reno-article__body p { margin: 0 0 1.25rem; }

.reno-article__body ul,
.reno-article__body ol {
  margin: 0 0 1.5rem;
  padding-inline-start: 1.4rem;
}

.reno-article__body li { margin-bottom: 0.7rem; }
.reno-article__body strong { color: var(--reno-ink); }

.reno-article__body a {
  color: var(--reno-wood);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reno-article__tags {
  max-width: 720px;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--reno-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reno-article__tags a {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--reno-cream);
  color: var(--reno-muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.reno-estimate__note {
  max-width: 520px;
  margin: 0 auto 1.5rem;
  color: var(--reno-muted);
  line-height: 2;
}

@media (max-width: 600px) {
  .reno-blog__grid { grid-template-columns: 1fr; }
  .reno-blog__cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .reno-blog__cats li { flex: 0 0 auto; }
  .reno-article__body { font-size: 1rem; line-height: 2.05; }
  .reno-article__body h2 { font-size: 1.18rem; margin-top: 2rem; }
}