/* Furni furniture site — homepage visual system. Scoped to body.tw-redesign. */
/* Palette: Deep Teal and Sand. --brand deep teal = footer background + heading
   text. Nav and the testimonial band stay on near-black --ink so the WhatsApp
   CTA is never adjacent to a --brand block (rule 5). --accent terracotta is
   reserved for primary CTAs, hover states, footer links and the review badge.
   Hero is --surface sand. No gradients or shadows added. */

body.tw-redesign {
  --page: #fbfaf7;        /* warm white page background */
  --surface: #e8dcca;     /* sand — cards, alternating sections, hero */
  --brand: #10403b;       /* deep teal — dark backgrounds, footer, heading text */
  --brand-dark: #0c322e;  /* deep teal pressed */
  --accent: #d07c4a;      /* terracotta — primary CTA fills, hover, badge (on --page/--surface) */
  --accent-dark: #bb6b3b; /* terracotta hover (~10% darker, same hue) */
  --accent-on-dark: #d98a57; /* terracotta lifted for text on near-black --ink (~6.5:1) */
  --accent-on-brand: #e59b6e; /* terracotta lifted for text on deep-teal --brand (~5:1) — footer links */
  --ink: #1b1a17;         /* body text */
  --ink-soft: #173d38;    /* dark background alt (teal-leaning) */
  --muted: #5c5a54;       /* secondary text (>=5:1 on --surface) */
  /* legacy aliases — kept only so any stray var() still resolves; theme.css
     itself uses the role tokens above throughout. */
  --walnut: var(--ink);
  --walnut-deep: #122f2b;
  --linen: var(--page);
  --linen-deep: var(--surface);
  --brass: var(--accent);
  --brass-light: var(--accent-on-dark);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", "Inter", sans-serif;
}

body.tw-redesign,
body.tw-redesign p,
body.tw-redesign a,
body.tw-redesign li,
body.tw-redesign span,
body.tw-redesign input,
body.tw-redesign button {
  font-family: var(--sans);
}

body.tw-redesign h1,
body.tw-redesign h2.section-title,
body.tw-redesign h3 {
  font-family: var(--serif);
}

@media (prefers-reduced-motion: reduce) {
  body.tw-redesign * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Reveal-on-scroll ---------- */
body.tw-redesign .tw-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
body.tw-redesign .tw-reveal.tw-in {
  opacity: 1;
  transform: translateY(0);
}

/* Card-grid stagger — product/post cards fade up in sequence once their section reveals */
body.tw-redesign .product-section .row > div,
body.tw-redesign .popular-product .row > div,
body.tw-redesign .blog-section .row > div {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
body.tw-redesign .tw-reveal.tw-in .row > div {
  opacity: 1;
  transform: translateY(0);
}
body.tw-redesign .tw-reveal.tw-in .row > div:nth-child(2) { transition-delay: .08s; }
body.tw-redesign .tw-reveal.tw-in .row > div:nth-child(3) { transition-delay: .16s; }
body.tw-redesign .tw-reveal.tw-in .row > div:nth-child(4) { transition-delay: .24s; }
body.tw-redesign .tw-reveal.tw-in .row > div:nth-child(5) { transition-delay: .3s; }

/* ---------- Nav ---------- */
body.tw-redesign .custom-navbar {
  background: var(--ink) !important;
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(208,124,74,.2);
  transition: box-shadow .3s ease, padding .3s ease;
  position: sticky;
  top: 0;
  z-index: 999;
}
body.tw-redesign .custom-navbar.tw-scrolled {
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.6);
  padding-top: 10px;
  padding-bottom: 10px;
}
body.tw-redesign .custom-navbar .custom-navbar-nav li a {
  color: var(--page) !important;
  opacity: .68;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 12.5px;
  font-weight: 700;
}
body.tw-redesign .custom-navbar .custom-navbar-nav li a:before {
  background: var(--accent) !important;
}
body.tw-redesign .custom-navbar .custom-navbar-nav li a:hover,
body.tw-redesign .custom-navbar .custom-navbar-nav li.active a {
  opacity: 1;
}
body.tw-redesign .custom-navbar .btn.btn-secondary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12.5px;
  padding: 10px 22px;
  transition: transform .25s ease, background .25s ease;
}
body.tw-redesign .custom-navbar .btn.btn-secondary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
}

/* ---------- Hero ---------- */
/* Rule 9: hero background becomes --surface (flat sand, no gradient). Text flips dark. */
body.tw-redesign .hero {
  background: var(--surface);
  position: relative;
  overflow: hidden;
  padding: 7rem 0 8rem 0 !important;
}
body.tw-redesign .hero .row {
  align-items: center;
}
/* Faint brand watermark behind the hero (was the old Sofa Square logo) */
body.tw-redesign .hero:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1180px;
  height: 385px;
  background: url("../images/ERUM-logo.png") center / contain no-repeat;
  transform: translate(-50%, -50%);
  opacity: .04;
  pointer-events: none;
}
body.tw-redesign .hero .container {
  position: relative;
  z-index: 2;
}
body.tw-redesign .hero .eyebrow {
  display: inline-block;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 20px;
}
body.tw-redesign .hero h1 {
  font-weight: 600;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  body.tw-redesign .hero h1 { font-size: 60px; }
}
body.tw-redesign .hero h1 .tw-accent {
  color: var(--brand);
  font-style: italic;
}
body.tw-redesign .hero p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}
body.tw-redesign .hero .tw-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  background: rgba(208,124,74,.12);
}
/* Rule 10: the star glyphs inside the badge stay in --accent */
body.tw-redesign .hero .tw-badge .tw-stars,
body.tw-redesign .hero .tw-badge::first-letter {
  color: var(--accent-dark);
}
/* CTA row — even sizing, one consistent gap, wraps cleanly on small screens */
body.tw-redesign .hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  margin-bottom: 4px;
}
body.tw-redesign .hero .hero-cta .btn {
  margin: 0;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* Primary CTA — terracotta with ink text (rule 4: sits well on --surface) */
body.tw-redesign .hero .btn.btn-secondary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
  transition: transform .25s ease, background .25s ease;
}
body.tw-redesign .hero .btn.btn-secondary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-3px);
}
/* Secondary CTA — transparent, 1px --brand border, --brand text (rule 4) */
body.tw-redesign .hero .btn.btn-white-outline {
  border: 1px solid var(--brand);
  color: var(--brand);
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
body.tw-redesign .hero .btn.btn-white-outline:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--page);
  transform: translateY(-3px);
}
/* Hero image — transparent-PNG product render, so it floats free on the dark
   background (no card frame). Kept in normal flow so the wrapper keeps its
   height (the template's absolute rule collapsed it and hid the image). */
body.tw-redesign .hero .hero-img-wrap {
  position: relative;
  margin: 0 auto;
  line-height: 0;
  display: flex;
  justify-content: center;
}
body.tw-redesign .hero .hero-img-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(208,124,74,.28) 0%, rgba(208,124,74,.14) 45%, rgba(208,124,74,0) 72%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
body.tw-redesign .hero .hero-img-wrap img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 340px;
  margin: 0 auto;
  filter: drop-shadow(0 28px 40px rgba(16,64,59,.28));
}
body.tw-redesign .hero .hero-img-wrap:after {
  display: none;
}
@media (min-width: 576px) {
  body.tw-redesign .hero .hero-img-wrap img { max-height: 420px; }
}
@media (min-width: 992px) {
  body.tw-redesign .hero .hero-img-wrap img { max-height: 480px; }
  body.tw-redesign .hero .hero-img-wrap::before { width: 560px; height: 560px; }
}
@media (min-width: 1400px) {
  body.tw-redesign .hero .hero-img-wrap img { max-height: 540px; }
  body.tw-redesign .hero .hero-img-wrap::before { width: 620px; height: 620px; }
}

/* ---------- Product section ---------- */
body.tw-redesign .product-section {
  background: var(--surface);
  padding: 6.5rem 0;
}
body.tw-redesign .product-section .section-title {
  color: var(--brand);
  font-size: 34px;
}
body.tw-redesign .product-section > .container > .row > div:first-child .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
body.tw-redesign .product-section .product-item .product-thumbnail {
  border-radius: 18px;
  box-shadow: 0 18px 40px -20px rgba(27,26,23,.35);
  transition: .4s cubic-bezier(.2,.7,.2,1);
}
body.tw-redesign .product-section .product-item:hover .product-thumbnail {
  top: -10px;
  box-shadow: 0 30px 50px -20px rgba(27,26,23,.5);
}
body.tw-redesign .product-section .product-item .product-thumbnail img,
body.tw-redesign .product-section .product-item img.product-thumbnail {
  border-radius: 18px;
  transition: transform .5s ease;
}
body.tw-redesign .product-section .product-item:hover img.product-thumbnail {
  transform: scale(1.04);
}
body.tw-redesign .product-section .product-item:before {
  display: none;
}
body.tw-redesign .product-section .product-item h3.product-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
}
body.tw-redesign .product-section .product-item strong.product-price {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
}
body.tw-redesign .product-section .product-item .icon-cross {
  background: var(--brand);
}

/* ---------- Why choose us ---------- */
body.tw-redesign .why-choose-section {
  background: var(--surface);
  padding: 6.5rem 0;
}
body.tw-redesign .why-choose-section .section-title {
  color: var(--brand);
  font-size: 32px;
}
body.tw-redesign .feature .icon:before {
  background: rgba(208,124,74,.22);
}
body.tw-redesign .feature h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
body.tw-redesign .why-choose-section .img-wrap img {
  border-radius: 24px;
  box-shadow: 0 30px 60px -25px rgba(27,26,23,.4);
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (min-width: 992px) {
  body.tw-redesign .why-choose-section .img-wrap img {
    aspect-ratio: 4 / 3;
    height: 100%;
  }
}

/* ---------- We help section ---------- */
body.tw-redesign .we-help-section {
  background: var(--surface);
  padding: 6.5rem 0;
}
body.tw-redesign .we-help-section .section-title {
  color: var(--brand);
  font-size: 32px;
}
body.tw-redesign .we-help-section .imgs-grid .grid img {
  border-radius: 24px;
  box-shadow: 0 24px 50px -22px rgba(27,26,23,.35);
}
body.tw-redesign .custom-list li:before {
  border-color: var(--brand);
  background: var(--brand);
}

/* ---------- Popular product ---------- */
body.tw-redesign .popular-product {
  background: var(--surface);
}
body.tw-redesign .popular-product .product-item-sm .thumbnail img {
  border-radius: 16px;
  box-shadow: 0 14px 30px -16px rgba(27,26,23,.35);
}
body.tw-redesign .popular-product .product-item-sm .thumbnail:before {
  display: none;
}
body.tw-redesign .popular-product .product-item-sm h3 {
  font-family: var(--serif);
  color: var(--ink);
}

/* ---------- Testimonials ---------- */
body.tw-redesign .testimonial-section {
  background: var(--ink);
  padding: 3rem 0 3.2rem 0;
  position: relative;
  overflow: hidden;
}
body.tw-redesign .testimonial-section .section-title {
  color: var(--page);
  font-size: 22px;
  margin-bottom: 8px;
}
/* Aggregate rating — real fact, styled as a quiet pill badge (no per-slide stars implied) */
body.tw-redesign .testimonial-section > .container > .row > div p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-on-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(217,138,87,.35);
  border-radius: 999px;
  padding: 9px 20px;
  background: rgba(217,138,87,.06);
}

body.tw-redesign .testimonial-slider-wrap {
  margin-top: 4px;
}

/* Card */
body.tw-redesign .testimonial-block {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,138,87,.16);
  border-radius: 14px;
  padding: 22px 28px 16px;
  position: relative;
  box-shadow: 0 18px 36px -26px rgba(0,0,0,.6);
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  body.tw-redesign .testimonial-block { padding: 20px 18px 14px; }
}
body.tw-redesign .testimonial-block blockquote {
  position: relative;
  padding-top: 0;
  margin-bottom: 10px;
}
body.tw-redesign .testimonial-block blockquote:before {
  content: "\201C";
  font-family: var(--serif);
  font-size: 44px;
  color: var(--accent);
  opacity: .3;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}
body.tw-redesign .testimonial-block blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--page);
  margin-bottom: 0;
}

/* No client photo — author-pic removed, name/role sit directly under a thin divider */
body.tw-redesign .testimonial-block .author-info {
  position: relative;
  padding-top: 10px;
}
body.tw-redesign .testimonial-block .author-info:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 1px;
  background: var(--accent);
}
body.tw-redesign .testimonial-block .author-info .author-pic {
  display: none;
}
body.tw-redesign .testimonial-block .author-info h3 {
  color: var(--accent-on-dark);
  font-size: 13px;
  letter-spacing: .01em;
  margin-bottom: 2px;
}
body.tw-redesign .testimonial-block .author-info .position {
  color: rgba(251,250,247,.66);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Nav arrows — thin outline circles, brand-consistent with hero/outline buttons.
   Constrained to the card's max-width so they hug the card instead of floating
   at the full container edges. */
body.tw-redesign .testimonial-slider-wrap #testimonial-nav {
  max-width: 640px;
  margin: 0 auto;
  left: 0;
  right: 0;
}
body.tw-redesign .testimonial-slider-wrap #testimonial-nav > span {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: transparent;
  border: 1px solid rgba(217,138,87,.35);
  color: var(--accent-on-dark);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
body.tw-redesign .testimonial-slider-wrap #testimonial-nav .prev { left: -4px; }
body.tw-redesign .testimonial-slider-wrap #testimonial-nav .next { right: -4px; }
body.tw-redesign .testimonial-slider-wrap #testimonial-nav > span:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--page);
  transform: scale(1.06);
}

/* Dots — slim dash instead of plain circle */
body.tw-redesign .testimonial-slider-wrap .tns-nav button:before {
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background-color: rgba(255,255,255,.18);
}
body.tw-redesign .testimonial-slider-wrap .tns-nav button:hover:before,
body.tw-redesign .testimonial-slider-wrap .tns-nav button.tns-nav-active:before {
  background-color: var(--accent);
}

/* ---------- Blog / showroom ---------- */
body.tw-redesign .blog-section {
  background: var(--surface);
}
body.tw-redesign .blog-section .section-title {
  color: var(--brand);
  font-size: 32px;
}
body.tw-redesign .blog-section .post-entry .post-thumbnail img {
  border-radius: 18px;
  box-shadow: 0 20px 40px -20px rgba(27,26,23,.4);
  transition: transform .5s ease, opacity .3s ease;
}
body.tw-redesign .blog-section .post-entry:hover .post-thumbnail img {
  transform: scale(1.03);
  opacity: 1;
}
body.tw-redesign .blog-section .post-content-entry h3 a {
  font-family: var(--serif);
  color: var(--ink);
}
body.tw-redesign .blog-section .more {
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
}

/* ---------- Footer ---------- */
/* Rules 8/4: footer = --brand deep teal, --page text, terracotta links.
   Plain terracotta (--accent) is only 3.6:1 on teal, so links/social use
   --accent-on-brand (lifted, ~5:1). --page on hover. The newsletter submit
   is a filled button (large shape) so --accent fill is fine there.
   WhatsApp renders as plain footer text links here (no green buttons); they
   take the footer link colour and are not adjacent to any other --brand block. */
body.tw-redesign .footer-section {
  background: var(--brand) !important;
}
body.tw-redesign .footer-section a {
  color: var(--accent-on-brand);
}
body.tw-redesign .footer-section a:hover {
  color: var(--page);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.tw-redesign .footer-section .subscription-form h3 {
  color: var(--page);
}
body.tw-redesign .footer-section .footer-logo-wrap .footer-logo {
  color: var(--page);
}
body.tw-redesign .footer-section p,
body.tw-redesign .footer-section .subscription-form p {
  color: rgba(251,250,247,.82);
}
/* Link-column headings / list spacing read cleaner with a touch more contrast */
body.tw-redesign .footer-section .links-wrap ul li a {
  color: rgba(251,250,247,.86);
}
body.tw-redesign .footer-section .links-wrap ul li a:hover {
  color: var(--accent-on-brand);
  text-decoration: none;
}
body.tw-redesign .footer-section .btn.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
body.tw-redesign .footer-section .btn.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--ink);
}
body.tw-redesign .footer-section .subscription-form .form-control {
  background: rgba(251,250,247,.96);
  border-color: rgba(251,250,247,.25);
  color: var(--ink);
}
body.tw-redesign .footer-section .subscription-form .form-control::placeholder {
  color: var(--muted);
}
body.tw-redesign .footer-section .custom-social li a {
  border: 1px solid rgba(229,155,110,.45);
  border-radius: 50%;
  color: var(--accent-on-brand);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
body.tw-redesign .footer-section .custom-social li a:hover {
  background: var(--accent-on-brand);
  border-color: var(--accent-on-brand);
  color: var(--brand);
  transform: translateY(-3px);
}
body.tw-redesign .footer-section .border-top.copyright {
  border-top-color: rgba(251,250,247,.22) !important;
}
body.tw-redesign .footer-section .border-top.copyright a {
  color: rgba(251,250,247,.72);
}
body.tw-redesign .footer-section .border-top.copyright a:hover {
  color: var(--page);
}
/* Decorative sofa cut-out that overhangs the footer top edge — soften it so it
   reads as a watermark on the deep-teal panel instead of a pasted photo. */
body.tw-redesign .footer-section .sofa-img img {
  opacity: .5;
}

/* ---------- Generic content sections (team grid, notices, forms) ---------- */
body.tw-redesign .untree_co-section {
  background: var(--surface);
}
body.tw-redesign .untree_co-section .section-title {
  color: var(--brand);
}
body.tw-redesign .untree_co-section img.mb-5 {
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 20px 40px -20px rgba(27,26,23,.35);
}
body.tw-redesign .untree_co-section h3 a {
  font-family: var(--serif);
  color: var(--ink);
  text-decoration: none;
}
body.tw-redesign .untree_co-section .position {
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12px;
}
body.tw-redesign .untree_co-section .lead {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
}
body.tw-redesign .untree_co-section h2 {
  font-family: var(--serif);
  color: var(--brand);
}
body.tw-redesign .untree_co-section .eyebrow {
  display: inline-block;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Forms */
body.tw-redesign .form-control {
  border-radius: 10px;
  border-color: rgba(43,36,32,.15);
  padding: 10px 14px;
}
body.tw-redesign .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(208,124,74,.15);
}
body.tw-redesign label.text-black {
  font-weight: 700;
  color: var(--ink) !important;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Contact service blocks + map */
body.tw-redesign .service .service-icon {
  background: var(--ink);
  color: var(--page);
}
body.tw-redesign .service-contents p {
  color: var(--ink);
  font-weight: 600;
}
body.tw-redesign .ratio {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 50px -25px rgba(27,26,23,.35);
}

/* Buttons used off the homepage — secondary style per rule 3:
   transparent, 1px --brand border, --brand text. */
body.tw-redesign .btn-outline-black {
  border: 2px solid var(--brand);
  color: var(--brand);
  background: transparent;
  border-radius: 30px;
  font-weight: 700;
  transition: .25s ease;
}
body.tw-redesign .btn-outline-black:hover {
  background: var(--brand);
  color: var(--page);
}
body.tw-redesign .btn-primary-hover-outline {
  background: var(--accent);
  border: 2px solid var(--accent);
  color: var(--ink);
  border-radius: 30px;
  font-weight: 700;
  padding: 12px 30px;
  transition: .25s ease;
}
body.tw-redesign .btn-primary-hover-outline:hover {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}

/* Thank-you / notice icon */
body.tw-redesign .thankyou-icon {
  color: var(--accent);
}
body.tw-redesign .thankyou-icon:before {
  background: rgba(208,124,74,.18);
}
body.tw-redesign .text-primary {
  color: var(--ink) !important;
}

/* ---------- Uniform product cards (homepage product strip) ---------- */
body.tw-redesign .product-section .product-item .product-thumbnail,
body.tw-redesign .product-section .product-item img.product-thumbnail {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: contain;
  background: var(--page);
  padding: 24px;
  box-sizing: border-box;
}

/* ---------- Showroom bento grid ---------- */
body.tw-redesign .showroom-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--page);
  box-shadow: 0 18px 40px -24px rgba(27,26,23, .35);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
  text-decoration: none;
}
body.tw-redesign .showroom-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -20px rgba(27,26,23, .5);
}
body.tw-redesign .showroom-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page);
  overflow: hidden;
}
body.tw-redesign .showroom-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s ease;
}
body.tw-redesign .showroom-card:hover .showroom-card-img img {
  transform: scale(1.05);
}
body.tw-redesign .showroom-card-lg .showroom-card-img {
  aspect-ratio: 1 / 1;
  padding: 36px;
}
body.tw-redesign .showroom-card-sm .showroom-card-img {
  aspect-ratio: 16 / 9;
  padding: 18px;
}
body.tw-redesign .showroom-card-body {
  padding: 22px 26px 26px;
}
body.tw-redesign .showroom-card-lg .showroom-card-body h3 {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 6px;
}
body.tw-redesign .showroom-card-sm .showroom-card-body h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}
body.tw-redesign .showroom-card-body span {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  opacity: .65;
}
body.tw-redesign .showroom-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
body.tw-redesign .showroom-stack .showroom-card {
  flex: 1 1 0;
}
@media (max-width: 991.98px) {
  body.tw-redesign .showroom-card-lg .showroom-card-img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 767.98px) {
  body.tw-redesign .hero { padding: 3.25rem 0 3.75rem 0 !important; }
  body.tw-redesign .hero h1 { font-size: 33px; }
  body.tw-redesign .hero p { font-size: 16px; }
  body.tw-redesign .hero .tw-badge { margin-top: 18px; }
  body.tw-redesign .hero .hero-cta { width: 100%; }
  body.tw-redesign .hero .hero-cta .btn { flex: 1 1 100%; text-align: center; }
  body.tw-redesign .custom-navbar { padding-top: 10px; padding-bottom: 10px; }
  body.tw-redesign .navbar-brand img { height: 50px !important; }
  body.tw-redesign .product-section,
  body.tw-redesign .why-choose-section,
  body.tw-redesign .we-help-section,
  body.tw-redesign .blog-section,
  body.tw-redesign .untree_co-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.tw-redesign .testimonial-section { padding: 2.5rem 0; }
  body.tw-redesign .product-section .section-title,
  body.tw-redesign .why-choose-section .section-title,
  body.tw-redesign .we-help-section .section-title,
  body.tw-redesign .blog-section .section-title { font-size: 26px; }
}