:root {
  --rt3-paper: #f4eee5;
  --rt3-paper-soft: #fbf7f0;
  --rt3-ink: #382318;
  --rt3-ink-soft: #745a48;
  --rt3-copper: #b77a43;
  --rt3-gold: #d5a45d;
  --rt3-dark: #291a12;
  --rt3-line: rgba(91, 58, 37, 0.2);
  --rt3-shadow: 0 22px 60px rgba(45, 28, 18, 0.12);
}

html {
  scroll-behavior: smooth;
}

body.rt3-page {
  margin: 0;
  overflow-x: hidden;
  color: var(--rt3-ink);
  background: var(--rt3-paper-soft);
}

body.rt3-page,
body.rt3-page button,
body.rt3-page input {
  font-family: "Jost", Arial, sans-serif;
  letter-spacing: 0;
}

body.rt3-page.admin-bar .rt3-header {
  top: 32px;
}

.rt3,
.rt3 *,
.rt3 *::before,
.rt3 *::after {
  box-sizing: border-box;
}

.rt3 {
  min-height: 100vh;
  overflow: hidden;
  color: var(--rt3-ink);
  background: var(--rt3-paper-soft);
  font-size: 16px;
  line-height: 1.65;
}

.rt3 img,
.rt3 video,
.rt3 iframe {
  display: block;
  max-width: 100%;
}

.rt3 h1,
.rt3 h2,
.rt3 h3,
.rt3 h4,
.rt3 p,
.rt3 figure {
  margin: 0;
}

.rt3 h1,
.rt3 h2,
.rt3 h3,
.rt3 h4 {
  color: inherit;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

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

.rt3 button {
  appearance: none;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.rt3-shell {
  width: min(1420px, calc(100% - 80px));
  margin-inline: auto;
}

.rt3-section {
  padding: 108px 0;
}

.rt3-eyebrow {
  color: var(--rt3-copper);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.rt3-eyebrow-light {
  color: #e7bd7d;
}

.rt3-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.rt3-btn:hover,
.rt3-btn:focus-visible {
  transform: translateY(-2px);
}

.rt3 .rt3-btn-light {
  color: var(--rt3-dark);
  background: #fff8ed;
}

.rt3 .rt3-btn-light:hover,
.rt3 .rt3-btn-light:focus-visible {
  color: #fff8ed;
  background: var(--rt3-copper);
}

.rt3 .rt3-btn-ghost {
  color: #fff8ed;
  border-color: rgba(255, 248, 237, 0.55);
  background: rgba(25, 14, 9, 0.16);
  backdrop-filter: blur(8px);
}

.rt3 .rt3-btn-ghost:hover,
.rt3 .rt3-btn-ghost:focus-visible {
  color: var(--rt3-dark);
  border-color: #fff8ed;
  background: #fff8ed;
}

.rt3 .rt3-btn-dark {
  color: #fff8ed;
  background: var(--rt3-dark);
}

.rt3 .rt3-btn-dark:hover,
.rt3 .rt3-btn-dark:focus-visible {
  color: var(--rt3-dark);
  border-color: var(--rt3-dark);
  background: transparent;
}

/* Header and hero */
.rt3-header {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: none;
}

.rt3-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 28px 56px;
  color: #fff8ef;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.rt3-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.rt3-nav-left {
  justify-content: flex-end;
}

.rt3-nav-right {
  justify-content: flex-start;
}

.rt3-nav a {
  position: relative;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: color 260ms ease;
}

.rt3-nav a:hover,
.rt3-nav a:focus-visible {
  color: #e2c9a4;
}

.rt3-footer a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms ease;
}

.rt3-footer a:hover::after,
.rt3-footer a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.rt3-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  color: #fff8ef;
}

.rt3-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.rt3-hero {
  position: relative;
  min-height: max(760px, 100svh);
  overflow: hidden;
  color: #fffaf3;
  background: #21130c;
}

.rt3-hero-slides,
.rt3-hero-slide,
.rt3-hero-slide img,
.rt3-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rt3-hero-slide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1100ms ease;
}

.rt3-hero-slide img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.055);
  transition: transform 7200ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.rt3-hero-slide.is-active {
  z-index: 1;
  opacity: 1;
}

.rt3-hero-slide.is-active img {
  transform: scale(1);
}

.rt3-hero-shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(19, 10, 5, 0.72) 0%, rgba(19, 10, 5, 0.43) 46%, rgba(19, 10, 5, 0.22) 100%),
    linear-gradient(0deg, rgba(20, 11, 6, 0.55), transparent 48%);
}

.rt3-hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: max(760px, 100svh);
  align-items: center;
  padding-top: 92px;
}

.rt3-hero-copy {
  width: min(720px, 70%);
  margin-left: 8%;
}

.rt3-hero-copy h1 {
  margin: 18px 0 24px;
  color: #fffaf3;
  font-size: 82px;
  line-height: 0.9;
}

.rt3-lead {
  max-width: 590px;
  color: rgba(255, 250, 243, 0.82);
  font-size: 16px;
  line-height: 1.8;
}

.rt3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.rt3-hero-progress {
  position: absolute;
  z-index: 4;
  bottom: 40px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1420px, calc(100% - 80px));
  color: rgba(255, 250, 243, 0.78);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.rt3-hero-progress i {
  position: relative;
  width: 92px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.34);
}

.rt3-hero-progress i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: #fffaf3;
  transform: translateX(-100%);
  animation: rt3-progress 6s linear infinite;
}

.rt3-hero-dots {
  position: absolute;
  z-index: 4;
  right: 40px;
  bottom: 38px;
  display: flex;
  gap: 8px;
}

.rt3-hero-dots button {
  width: 24px;
  height: 24px;
  padding: 7px;
}

.rt3-hero-dots button::before {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transition: background-color 220ms ease, transform 220ms ease;
}

.rt3-hero-dots button.is-active::before {
  background: #fff;
  transform: scale(1.35);
}

@keyframes rt3-progress {
  to { transform: translateX(100%); }
}

/* Customer voices */
.rt3-voices {
  position: relative;
  z-index: 6;
  display: grid;
  width: min(1340px, calc(100% - 120px));
  min-height: 230px;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  margin: -34px auto 0;
  padding: 38px 44px;
  border-radius: 4px;
  background: rgba(251, 247, 240, 0.97);
  box-shadow: var(--rt3-shadow);
}

.rt3-voices-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--rt3-line);
}

.rt3-voices-label h2 {
  margin-top: 6px;
  font-size: 36px;
  line-height: 1;
}

.rt3-voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.rt3-voice {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-content: center;
  column-gap: 15px;
}

.rt3-voice img {
  grid-row: 1 / span 3;
  width: 58px;
  height: 58px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--rt3-gold);
}

.rt3-voice b {
  font-size: 14px;
}

.rt3-voice small {
  color: var(--rt3-ink-soft);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rt3-voice span {
  color: var(--rt3-gold);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.rt3-voice q {
  grid-column: 1 / -1;
  margin-top: 15px;
  color: var(--rt3-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
}

/* About */
.rt3-about {
  padding-top: 126px;
  background: var(--rt3-paper-soft);
}

.rt3-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
  align-items: stretch;
}

.rt3-about-media {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  border-radius: 4px 0 0 4px;
  background: #1e130d;
}

.rt3-about-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rt3-media-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #fff9ef;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 2px;
  background: rgba(28, 16, 10, 0.56);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.rt3-media-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e7bd7d;
  box-shadow: 0 0 0 4px rgba(231, 189, 125, 0.17);
}

.rt3-about-copy {
  padding: 76px 70px 58px;
  border-radius: 0 4px 4px 0;
  background: #eadfce;
}

.rt3-about-copy h2,
.rt3-section-head h2,
.rt3-product-intro h2,
.rt3-blog-intro h2,
.rt3-faq h2 {
  margin: 16px 0 24px;
  font-size: 58px;
  line-height: 0.98;
}

.rt3-copy {
  max-width: 620px;
  color: #6f5442;
  line-height: 1.85;
}

.rt3-feature-list {
  margin-top: 34px;
  border-top: 1px solid var(--rt3-line);
}

.rt3-feature-list article {
  display: grid;
  min-height: 108px;
  grid-template-columns: 48px 1fr 70px;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--rt3-line);
}

.rt3-feature-list article > span {
  color: var(--rt3-copper);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
}

.rt3-feature-list h3 {
  font-family: "Jost", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.rt3-feature-list p {
  margin-top: 5px;
  color: #876a54;
  font-size: 13px;
  line-height: 1.5;
}

.rt3-feature-list img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.rt3-feature-list article:hover img {
  transform: scale(1.08) rotate(3deg);
}

/* Workshop */
.rt3-workshop {
  color: #fff5e9;
  background: var(--rt3-dark);
}

.rt3-workshop-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.76fr) minmax(0, 1.34fr);
  align-items: center;
  gap: 62px;
}

.rt3-workshop-story h2 {
  margin: 18px 0 24px;
  color: #fff5e9;
  font-size: 68px;
  line-height: 0.9;
}

.rt3-workshop-story > p:last-of-type {
  max-width: 520px;
  color: rgba(255, 245, 233, 0.7);
}

.rt3-book {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: 42px;
  overflow: hidden;
  border-radius: 4px;
  background: #160d08;
  perspective: 1800px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28);
}

.rt3-book-under,
.rt3-book-page,
.rt3-book-page img,
.rt3-book-page::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rt3-book-under,
.rt3-book-page img {
  object-fit: cover;
}

.rt3-book-page {
  z-index: 2;
  transform-origin: left center;
  transform-style: preserve-3d;
}

.rt3-book-page::after {
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(22,13,8,0.72));
}

.rt3-book.is-turning .rt3-book-page {
  animation: rt3-page-turn 2200ms cubic-bezier(0.55, 0.04, 0.22, 1) both;
}

.rt3-book.is-turning .rt3-book-page::after {
  animation: rt3-page-shadow 2200ms ease both;
}

.rt3-book-meta {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 22px 18px;
  color: #fff;
  background: linear-gradient(transparent, rgba(18, 10, 6, 0.82));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.rt3-book-meta b {
  display: flex;
  gap: 6px;
}

.rt3-book-meta b i {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 50%;
}

.rt3-book-meta b i.is-active {
  background: #fff;
}

@keyframes rt3-page-turn {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  45% { filter: brightness(0.76); }
  100% { transform: rotateY(-102deg); filter: brightness(0.55); }
}

@keyframes rt3-page-shadow {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.9; }
}

.rt3-workshop-tools {
  display: grid;
  gap: 28px;
}

.rt3-steps {
  display: grid;
  min-height: 210px;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 240, 220, 0.18);
  border-radius: 4px;
}

.rt3-steps article {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 240, 220, 0.18);
}

.rt3-steps article:last-child {
  border-right: 0;
}

.rt3-steps img,
.rt3-steps article > i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rt3-steps img {
  object-fit: cover;
  opacity: 0.54;
  filter: saturate(0.74);
  transition: opacity 400ms ease, transform 600ms ease;
}

.rt3-steps article > i {
  background: linear-gradient(180deg, rgba(21, 11, 7, 0.05), rgba(21, 11, 7, 0.86));
}

.rt3-steps article > span,
.rt3-steps article > div {
  position: absolute;
  z-index: 2;
  left: 18px;
}

.rt3-steps article > span {
  top: 16px;
  color: #e4b66f;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px;
}

.rt3-steps article > div {
  right: 16px;
  bottom: 15px;
}

.rt3-steps b,
.rt3-steps small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.rt3-steps small {
  margin-top: 4px;
  color: rgba(255, 245, 233, 0.57);
}

.rt3-steps article:hover img {
  opacity: 0.9;
  transform: scale(1.06);
}

.rt3-package-panel {
  padding: 34px 36px 26px;
  color: var(--rt3-ink);
  border-radius: 4px;
  background: var(--rt3-paper);
}

.rt3-package-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.rt3-package-head h3 {
  margin-top: 7px;
  font-size: 37px;
  line-height: 1;
}

.rt3-package-head > a {
  position: relative;
  color: var(--rt3-copper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rt3-packages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.rt3-packages article {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 132px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 8px;
  border: 1px solid #d9c5ae;
  border-radius: 4px;
  background: rgba(255,255,255,0.46);
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.rt3-packages article:hover,
.rt3-packages article.is-featured {
  border-color: #d78938;
  background: #fffaf3;
  transform: translateY(-3px);
}

.rt3-packages em {
  position: absolute;
  top: -11px;
  padding: 3px 9px;
  color: #fff;
  border-radius: 10px;
  background: #d78938;
  font-size: 8px;
  font-style: normal;
}

.rt3-packages h4 {
  font-family: "Jost", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.rt3-packages b {
  margin-top: 5px;
  color: #b7652b;
  font-size: 12px;
}

.rt3-packages small {
  margin-top: 8px;
  color: #7c6554;
  font-size: 9px;
}

.rt3-package-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 18px;
  color: #7b604c;
  border-top: 1px solid #d7c5ae;
  font-size: 10px;
}

/* Showroom */
.rt3-showroom {
  background: #fffdfa;
}

.rt3-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}

.rt3-section-head > div {
  max-width: 920px;
}

.rt3-section-head > div > p:last-child {
  max-width: 650px;
  color: var(--rt3-ink-soft);
}

.rt3-matterport {
  position: relative;
  aspect-ratio: 16 / 8.25;
  margin-top: 40px;
  overflow: hidden;
  border-radius: 4px;
  background: #20150f;
  box-shadow: var(--rt3-shadow);
}

.rt3-matterport iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.rt3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.rt3-chips span {
  padding: 9px 15px;
  border: 1px solid var(--rt3-line);
  border-radius: 20px;
  color: var(--rt3-ink-soft);
  background: #fff;
  font-size: 11px;
}

/* Products */
.rt3-products {
  background: #e9ddcc;
}

.rt3-product-layout {
  display: grid;
  min-height: 530px;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: center;
  gap: 70px;
}

.rt3-product-intro > p:nth-of-type(2) {
  color: var(--rt3-ink-soft);
}

.rt3-product-intro > div {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 42px;
  color: var(--rt3-copper);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.rt3-product-intro > div i {
  width: 50px;
  height: 1px;
  background: var(--rt3-copper);
}

.rt3-collection-stage {
  position: relative;
  min-height: 470px;
}

.rt3-collection {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 18px;
  visibility: hidden;
  pointer-events: none;
}

.rt3-collection.is-active {
  z-index: 2;
  visibility: visible;
  pointer-events: auto;
}

.rt3-collection article {
  min-width: 0;
  opacity: 0;
  transform: translateY(calc(var(--step) + 28px)) scale(0.96);
}

.rt3-collection.is-active article {
  animation: rt3-product-reveal 780ms cubic-bezier(0.21, 0.72, 0.24, 1) var(--delay) forwards;
}

.rt3-collection article > div {
  aspect-ratio: 0.82;
  overflow: hidden;
  border-radius: 4px;
  background: #d6c3ac;
  box-shadow: 0 16px 32px rgba(64, 41, 25, 0.12);
}

.rt3-collection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2,0.7,0.2,1);
}

.rt3-collection article:hover img {
  transform: scale(1.07);
}

.rt3-collection h3 {
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.05;
}

.rt3-collection p {
  margin-top: 6px;
  color: var(--rt3-copper);
  font-size: 11px;
}

@keyframes rt3-product-reveal {
  to { opacity: 1; transform: translateY(var(--step)) scale(1); }
}

.rt3-collection-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(96, 61, 38, 0.36);
}

.rt3-collection-tabs button,
.rt3-collection-tabs span {
  min-height: 35px;
  padding: 8px 17px;
  color: var(--rt3-ink);
  border: 1px solid rgba(96, 61, 38, 0.34);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rt3-collection-tabs button {
  transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.rt3-collection-tabs button:hover,
.rt3-collection-tabs button.is-active {
  color: #fff;
  background: #9b6946;
  transform: translateY(-2px);
}

.rt3-collection-tabs span {
  opacity: 0.5;
}

/* Blog */
.rt3-blog {
  background: var(--rt3-paper-soft);
}

.rt3-blog-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 80px;
}

.rt3-blog-intro p:last-child {
  color: var(--rt3-ink-soft);
}

.rt3-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rt3-posts article > div {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #dbcab6;
}

.rt3-posts img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms ease;
}

.rt3-posts article:hover img {
  transform: scale(1.055);
}

.rt3-posts small {
  display: block;
  margin-top: 17px;
  color: var(--rt3-copper);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.rt3-posts h3 {
  min-height: 56px;
  margin-top: 7px;
  font-size: 25px;
  line-height: 1.05;
}

.rt3-posts a {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 200ms ease, transform 200ms ease;
}

.rt3-posts a:hover {
  color: var(--rt3-copper);
  transform: translateX(4px);
}

/* FAQ and footer */
.rt3-faq {
  color: #fff5e9;
  background: #38251a;
}

.rt3-faq-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 90px;
}

.rt3-faq h2 {
  color: #fff5e9;
}

.rt3-faq-list {
  border-top: 1px solid rgba(255,255,255,0.2);
}

.rt3-faq-list details {
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.rt3-faq-list summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}

.rt3-faq-list summary::-webkit-details-marker {
  display: none;
}

.rt3-faq-list summary span {
  flex: 0 0 auto;
  color: #dfb36f;
  font-size: 24px;
  transition: transform 280ms ease;
}

.rt3-faq-list details[open] summary span {
  transform: rotate(45deg);
}

.rt3-faq-list details p {
  max-width: 760px;
  padding: 0 50px 25px 0;
  color: rgba(255,245,233,0.67);
  font-size: 13px;
}

.rt3-footer {
  padding: 76px 0 28px;
  color: #eadfce;
  background: #21150f;
}

.rt3-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.6fr;
  gap: 80px;
}

.rt3-footer h2 {
  color: #fff5e9;
  font-size: 39px;
}

.rt3-footer-grid > div:first-child p {
  max-width: 500px;
  margin-top: 16px;
  color: rgba(234,223,206,0.66);
}

.rt3-footer-grid > div:nth-child(2) p:last-child {
  margin-top: 15px;
  color: rgba(234,223,206,0.7);
}

.rt3-footer-grid > div:last-child a {
  position: relative;
  display: table;
  margin-top: 10px;
  font-size: 13px;
}

.rt3-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 58px;
  padding-top: 22px;
  color: rgba(234,223,206,0.5);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Motion is opt-in after JavaScript starts, avoiding blank content without JS. */
.rt3-page.is-motion-ready .rt3-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.rt3-page.is-motion-ready .rt3-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .rt3-shell {
    width: min(100% - 48px, 1120px);
  }

  .rt3-header-inner {
    gap: 24px;
    padding-inline: 28px;
  }

  .rt3-nav {
    gap: 22px;
  }

  .rt3-hero-progress {
    width: calc(100% - 48px);
  }

  .rt3-voices {
    width: calc(100% - 48px);
    grid-template-columns: 190px 1fr;
    gap: 28px;
    padding-inline: 30px;
  }

  .rt3-voice-grid {
    gap: 22px;
  }

  .rt3-about-copy {
    padding-inline: 46px;
  }

  .rt3-workshop-grid {
    grid-template-columns: 0.72fr 1.28fr;
    gap: 38px;
  }

  .rt3-product-layout {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 42px;
  }
}

@media (max-width: 980px) {
  body.rt3-page.admin-bar .rt3-header {
    top: 46px;
  }

  .rt3-section {
    padding: 84px 0;
  }

  .rt3-header-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    padding: 24px 24px 18px;
  }

  .rt3-brand {
    grid-row: 1;
  }

  .rt3-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .rt3-nav-left,
  .rt3-nav-right {
    justify-content: center;
  }

  .rt3-hero-copy {
    width: 82%;
    margin-left: 4%;
  }

  .rt3-hero-copy h1 {
    font-size: 64px;
  }

  .rt3-voices {
    grid-template-columns: 1fr;
  }

  .rt3-voices-label {
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 1px solid var(--rt3-line);
  }

  .rt3-about-grid,
  .rt3-workshop-grid,
  .rt3-blog-grid,
  .rt3-faq-grid {
    grid-template-columns: 1fr;
  }

  .rt3-about-media {
    min-height: 520px;
    border-radius: 4px 4px 0 0;
  }

  .rt3-about-copy {
    border-radius: 0 0 4px 4px;
  }

  .rt3-workshop-grid,
  .rt3-blog-grid,
  .rt3-faq-grid {
    gap: 56px;
  }

  .rt3-book {
    max-width: 700px;
  }

  .rt3-matterport {
    aspect-ratio: 16 / 10;
  }

  .rt3-product-layout {
    min-height: 660px;
    grid-template-columns: 1fr;
  }

  .rt3-product-intro {
    max-width: 580px;
  }

  .rt3-collection-stage {
    min-height: 480px;
  }
}

@media (max-width: 720px) {
  body.rt3-page.admin-bar .rt3-header {
    top: 46px;
  }

  .rt3 {
    font-size: 15px;
  }

  .rt3-shell {
    width: calc(100% - 28px);
  }

  .rt3-section {
    padding: 66px 0;
  }

  .rt3-header {
    top: 0;
  }

  .rt3-header-inner {
    gap: 10px;
    padding: 20px 18px 14px;
  }

  .rt3-brand {
    gap: 4px;
    font-size: 17px;
  }

  .rt3-brand img {
    width: 44px;
    height: 44px;
  }

  .rt3-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }

  .rt3-nav a {
    padding: 2px 0;
    font-size: 11px;
  }

  .rt3-hero,
  .rt3-hero-inner {
    min-height: 100svh;
  }

  .rt3-hero-slide img {
    object-position: 60% center;
  }

  .rt3-hero-shade {
    background: linear-gradient(90deg, rgba(19,10,5,0.76), rgba(19,10,5,0.26)), linear-gradient(0deg, rgba(20,11,6,0.72), transparent 60%);
  }

  .rt3-hero-inner {
    padding-top: 112px;
    padding-bottom: 100px;
  }

  .rt3-hero-copy {
    width: 100%;
    margin-left: 0;
  }

  .rt3-hero-copy h1 {
    margin-top: 14px;
    font-size: 46px;
    line-height: 0.94;
  }

  .rt3-lead {
    max-width: 340px;
    font-size: 13px;
    line-height: 1.65;
  }

  .rt3-actions {
    margin-top: 24px;
  }

  .rt3-btn {
    min-height: 44px;
    padding-inline: 17px;
    font-size: 9px;
  }

  .rt3-hero-progress {
    bottom: 28px;
    left: 14px;
    width: auto;
    gap: 9px;
    font-size: 8px;
    transform: none;
  }

  .rt3-hero-progress i {
    width: 35px;
  }

  .rt3-hero-progress span:last-child {
    display: none;
  }

  .rt3-hero-dots {
    right: 12px;
    bottom: 22px;
    gap: 2px;
  }

  .rt3-voices {
    width: calc(100% - 28px);
    margin-top: 18px;
    padding: 28px 20px;
  }

  .rt3-voice-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rt3-voice {
    grid-template-columns: 52px 1fr;
  }

  .rt3-voice img {
    width: 52px;
    height: 52px;
  }

  .rt3-about {
    padding-top: 66px;
  }

  .rt3-about-media {
    min-height: 350px;
  }

  .rt3-about-copy {
    padding: 44px 24px 34px;
  }

  .rt3-about-copy h2,
  .rt3-section-head h2,
  .rt3-product-intro h2,
  .rt3-blog-intro h2,
  .rt3-faq h2 {
    font-size: 43px;
  }

  .rt3-feature-list article {
    grid-template-columns: 34px 1fr 48px;
    gap: 12px;
  }

  .rt3-feature-list img {
    width: 46px;
    height: 46px;
  }

  .rt3-workshop-story h2 {
    font-size: 52px;
  }

  .rt3-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .rt3-steps article:nth-child(2) {
    border-right: 0;
  }

  .rt3-steps article:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 240, 220, 0.18);
  }

  .rt3-package-panel {
    padding: 28px 18px 22px;
  }

  .rt3-package-head {
    align-items: flex-start;
  }

  .rt3-package-head h3 {
    font-size: 31px;
  }

  .rt3-packages {
    grid-template-columns: repeat(2, 1fr);
  }

  .rt3-packages article:last-child {
    grid-column: 1 / -1;
  }

  .rt3-package-meta {
    flex-wrap: wrap;
  }

  .rt3-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .rt3-matterport {
    aspect-ratio: 4 / 5;
    margin-top: 28px;
  }

  .rt3-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .rt3-chips span {
    flex: 0 0 auto;
  }

  .rt3-product-layout {
    min-height: 920px;
    gap: 30px;
  }

  .rt3-collection-stage {
    min-height: 650px;
  }

  .rt3-collection {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }

  .rt3-collection article {
    transform: translateY(20px) scale(0.96);
  }

  .rt3-collection.is-active article {
    animation-name: rt3-product-mobile-reveal;
  }

  .rt3-collection article > div {
    aspect-ratio: 0.9;
  }

  .rt3-collection h3 {
    margin-top: 10px;
    font-size: 20px;
  }

  @keyframes rt3-product-mobile-reveal {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .rt3-collection-tabs span {
    display: none;
  }

  .rt3-blog-grid {
    gap: 38px;
  }

  .rt3-posts {
    grid-template-columns: 1fr;
  }

  .rt3-posts h3 {
    min-height: 0;
  }

  .rt3-faq-grid {
    gap: 28px;
  }

  .rt3-footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .rt3-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rt3 *, .rt3 *::before, .rt3 *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .rt3-page.is-motion-ready .rt3-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   ĐỒNG BỘ VỚI /demo3 — font, thang cỡ chữ, canh lề, khoảng cách
   Nguồn chuẩn: silver-saigon-craft/demo3-v0/page-full.tsx (Tailwind → px)
   Inter (sans) + Playfair Display (serif); container 1420px; py-32 = 128px
   ========================================================================= */

/* --- Font stack --- */
body.rt3-page,
body.rt3-page button,
body.rt3-page input,
body.rt3-page select,
body.rt3-page textarea,
.rt3 {
  font-family: "Inter", system-ui, -apple-system, Arial, sans-serif;
}

.rt3 h1,
.rt3 h2,
.rt3 h3,
.rt3 h4,
.rt3-brand,
.rt3-serif {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
}

/* --- Container & nhịp section (max-w-[1420px] · lg:px-10 · lg:py-32) --- */
.rt3-shell {
  width: min(1420px, calc(100% - 80px));
}

.rt3-section {
  padding: 128px 0;
}

/* --- Eyebrow: text-[10px] font-medium tracking-[.26em] --- */
.rt3-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: #916c4b;
}

.rt3-eyebrow.rt3-eyebrow-light,
.rt3-workshop .rt3-eyebrow,
.rt3-faq .rt3-eyebrow {
  color: #dbc19d;
}

/* --- Hero: text-[5.4rem] leading-[.98] tracking-[-.025em] --- */
.rt3-hero-copy h1 {
  margin: 28px 0 0;
  font-size: 86.4px;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.rt3-hero-copy .rt3-lead,
.rt3-hero-copy p {
  margin-top: 28px;
  max-width: 448px;
  font-size: 14px;
  line-height: 28px;
}

/* --- Tiêu đề từng section (khác nhau theo demo3, không dùng chung 1 cỡ) --- */
.rt3-about-copy h2 {                       /* lg:text-5xl leading-[1.05] */
  font-size: 48px;
  line-height: 1.05;
}

.rt3-workshop-story h2 {                   /* lg:text-7xl leading-[.95] */
  font-size: 72px;
  line-height: 0.95;
}

.rt3-showroom .rt3-section-head h2,        /* lg:text-6xl leading-none */
.rt3-product-intro h2 {
  font-size: 60px;
  line-height: 1;
}

.rt3-blog-intro h2 {                       /* text-4xl */
  font-size: 36px;
  line-height: 1.1;
}

.rt3-faq h2 {                              /* text-5xl leading-none */
  font-size: 48px;
  line-height: 1;
}

/* --- Tiêu đề nhỏ --- */
.rt3-collection h3 {                       /* text-xl leading-tight */
  font-size: 20px;
  line-height: 1.25;
}

.rt3-posts h3 {                            /* text-2xl leading-tight */
  font-size: 24px;
  line-height: 1.25;
}

.rt3-package-head h3,                      /* text-3xl */
.rt3-voices-label h2 {
  font-size: 30px;
  line-height: 1.1;
}

/* --- Nút: rounded-full px-6 py-3 text-[10px] tracking-[.2em] --- */
.rt3-btn,
.rt3-actions a {
  min-height: 0;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* --- Responsive theo breakpoint lg(1024px)/sm(640px) của demo3 --- */
@media (max-width: 1180px) {
  .rt3-hero-copy h1 { font-size: 60px; }
  .rt3-workshop-story h2 { font-size: 48px; }
  .rt3-showroom .rt3-section-head h2,
  .rt3-product-intro h2 { font-size: 36px; }
  .rt3-about-copy h2 { font-size: 36px; }
}

@media (max-width: 1024px) {
  .rt3-section { padding: 96px 0; }        /* py-24 */
  .rt3-shell { width: min(1420px, calc(100% - 40px)); }
}

@media (max-width: 640px) {
  .rt3-hero-copy h1 { font-size: 53.6px; } /* text-[3.35rem] */
}

/* --- Ẩn markup thừa của Flatsome (off-canvas menu, popup) vì đã bỏ CSS theme --- */
body.rt3-page #main-menu,
body.rt3-page .mobile-sidebar,
body.rt3-page .mfp-hide,
body.rt3-page .off-canvas,
body.rt3-page #login-form-popup,
body.rt3-page .searchform-wrapper.ux-search-box,
body.rt3-page > form,
body.rt3-page > ul,
body.rt3-page > .widget {
  display: none !important;
}

/* --- Lưới sản phẩm giống demo3: grid tĩnh, luôn hiện đủ 4 thẻ --- */
.rt3-product-layout {
  min-height: 0;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 40px;
  align-items: start;
}

.rt3-collection-stage {
  min-height: 0;
}

.rt3-collection {
  gap: 32px 16px;
  align-items: start;
  padding-bottom: 112px;
}

/* Thẻ luôn hiển thị; animation chỉ là hiệu ứng vào, không quyết định hiển thị */
.rt3-collection article {
  opacity: 1;
  transform: translateY(var(--step));
}

@keyframes rt3-product-reveal {
  from { opacity: 0; transform: translateY(calc(var(--step) + 28px)) scale(0.96); }
  to   { opacity: 1; transform: translateY(var(--step)) scale(1); }
}

.rt3-collection article > div {
  aspect-ratio: 3 / 4;                 /* demo3: aspect-[3/4] */
  border-radius: 1.2rem;               /* demo3: rounded-[1.2rem] */
  box-shadow: 0 14px 30px rgba(67, 42, 25, 0.08);
}

.rt3-collection article h3 {
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.25;
}

.rt3-collection article p {
  margin-top: 4px;
  font-size: 11px;
  color: #9b704d;
}

@media (max-width: 1024px) {
  .rt3-product-layout { grid-template-columns: 1fr; }
  .rt3-collection { padding-bottom: 0; }
  .rt3-collection article { transform: none; }
}

@media (max-width: 720px) {
  .rt3-collection { grid-template-columns: repeat(2, 1fr); }
}

/* --- Khối Sản phẩm: khớp chi tiết demo3 --- */
/* Ảnh phải lấp đầy khung 3/4 (demo3: aspect-[3/4] w-full object-cover) */
.rt3-collection article > div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.rt3-collection article:hover > div img {
  transform: scale(1.05);
}

/* Tiêu đề: mt-4 text-6xl leading-none */
.rt3-product-intro h2 {
  margin: 16px 0 0;
  font-size: 60px;
  line-height: 1;
}

/* Mô tả: mt-5 max-w-sm text-[12px] leading-6 */
.rt3-product-intro > p:nth-of-type(2) {
  margin-top: 20px;
  max-width: 384px;
  font-size: 12px;
  line-height: 24px;
  color: #756252;
}

/* Dòng 02 / 03 — nhãn: mt-7 text-[9px] tracking-[.18em] */
.rt3-product-intro > div {
  margin-top: 28px;
  gap: 12px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #967050;
}

.rt3-product-intro > div i {
  width: 40px;
  background: #b79b7e;
}

/* Hàng tab: mt-14 border-t pt-5, nút px-4 py-2 text-[10px] tracking-[.14em] */
.rt3-collection-tabs {
  margin-top: 56px;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid #bfa98f;
}

.rt3-collection-tabs button,
.rt3-collection-tabs span {
  min-height: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #bda68d;
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.rt3-collection-tabs button.is-active {
  border-color: #8e6444;
  background: #8e6444;
  color: #fff;
}

.rt3-collection-tabs span {
  border-color: rgba(189, 166, 141, 0.65);
  color: #7a6453;
}

@media (max-width: 1180px) {
  .rt3-product-intro h2 { font-size: 48px; }
}

/* --- Fix: khung sản phẩm phải chiếm chiều cao thật (không dùng absolute) ---
   Các bộ sưu tập xếp chồng trong cùng 1 ô grid → stage cao bằng bộ cao nhất,
   nên hàng tab bên dưới không bị đè. */
.rt3-collection-stage {
  position: relative;
  display: grid;
  min-height: 0;
}

.rt3-collection {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}

/* ============================================================================
   FIX GỐC: container phải khớp demo3
   demo3 = max-w-[1420px] + px-10 (40px) → vùng nội dung 1340px
   run-test-3 trước đây lấy 1420px làm vùng nội dung → mọi thứ to hơn 80px
   ========================================================================= */
.rt3-shell {
  width: min(1420px, 100%);
  margin-inline: auto;
  padding-inline: 40px;
}

@media (max-width: 1180px) {
  .rt3-shell { width: min(1420px, 100%); padding-inline: 40px; }
}

@media (max-width: 1024px) {
  .rt3-shell { padding-inline: 20px; }   /* demo3: px-5 */
}

@media (max-width: 720px) {
  .rt3-shell { width: 100%; padding-inline: 20px; }
}

/* --- Màu nền đúng như demo3 (đo trực tiếp từ trang live) --- */
body.rt3-page,
.rt3 {
  background-color: #f4eee5;
  color: #3d2b20;
}

.rt3-hero        { background-color: #23170f; }
.rt3-workshop    { background-color: #2c1d14; }
.rt3-products    { background-color: #eadfd1; }
.rt3-faq         { background-color: #2b1c13; }
.rt3-footer      { background-color: #1c120c; }

/* Các section nền trong suốt (dùng nền trang) như demo3 */
.rt3-about,
.rt3-showroom,
.rt3-blog {
  background-color: transparent;
}

/* Blog h2: text-4xl leading mặc định = 40px */
.rt3-blog-intro h2 { line-height: 40px; }

/* --- Hero: demo3 = min-h-[780px] lg:min-h-[860px] (KHÔNG dùng 100svh) --- */
.rt3-hero,
.rt3-hero-inner {
  min-height: 860px;
}

/* --- Footer: demo3 brand = font-serif text-3xl (30px) --- */
.rt3-footer h2 {
  font-size: 30px;
  line-height: 36px;
}

/* --- About: 3 dòng đặc điểm = text-[12px] font-semibold tracking-[.14em] --- */
.rt3-feature-list h3,
.rt3-about-copy h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 16px;
}

@media (max-width: 1024px) {
  .rt3-hero,
  .rt3-hero-inner { min-height: 780px; }
}

/* --- BLOG: demo3 = grid gap-8 lg:grid-cols-[220px_1fr]; thẻ grid gap-5 md:grid-cols-3 --- */
.rt3-blog-grid {
  grid-template-columns: 220px 1fr;
  gap: 32px;
}

.rt3-posts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.rt3-posts article > div {
  overflow: hidden;
  border-radius: 1.2rem;
}

.rt3-posts article img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 700ms ease;
}

.rt3-posts article:hover img { transform: scale(1.05); }

.rt3-posts article small {          /* mt-4 text-[10px] tracking-[.18em] */
  display: block;
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a724f;
}

.rt3-posts h3 {                     /* mt-2 text-2xl leading-tight */
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.25;
}

.rt3-posts article > a {            /* mt-3 text-[10px] tracking-[.16em] */
  display: inline-block;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e6444;
}

.rt3-blog-intro p {                 /* mt-4 text-[12px] leading-6 */
  margin-top: 16px;
  font-size: 12px;
  line-height: 24px;
  color: #786759;
}

/* --- FAQ: demo3 = grid gap-10 lg:grid-cols-[.7fr_1.3fr]; details py-5 --- */
.rt3-faq-grid {
  grid-template-columns: 0.7fr 1.3fr;
  gap: 40px;
}

.rt3-faq-list {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.rt3-faq-list details {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.rt3-faq-list details:last-child { border-bottom: 0; }

.rt3-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
}

.rt3-faq-list summary span { color: #d9b990; font-size: 14px; }

.rt3-faq-list details p {           /* pt-4 text-[12px] leading-6 */
  max-width: 42rem;
  margin: 0;
  padding-top: 16px;
  border: 0;
  font-size: 12px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
}

/* --- FOOTER: demo3 = px-5 py-16 lg:px-10; brand text-3xl --- */
.rt3-footer { padding: 64px 0; }
.rt3-footer-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr; gap: 40px; }

@media (max-width: 1024px) {
  .rt3-blog-grid { grid-template-columns: 1fr; }
  .rt3-faq-grid { grid-template-columns: 1fr; }
  .rt3-footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .rt3-posts { grid-template-columns: 1fr; }
}

/* --- FAQ: bỏ min-height sót lại khiến mỗi mục cao 113px thay vì 61px --- */
.rt3-faq-list summary { min-height: 0; }

/* --- ABOUT: demo3 = py-32, grid lg:grid-cols-[1.1fr_.9fr], media lg:min-h-[720px] --- */
.rt3-about { padding-top: 128px; padding-bottom: 128px; }
.rt3-about-grid { grid-template-columns: 1.1fr 0.9fr; gap: 0; }
.rt3-about-media { min-height: 720px; }

/* --- WORKSHOP: demo3 = gap-12, lg:grid-cols-[.88fr_1.12fr] --- */
.rt3-workshop-grid { grid-template-columns: 0.88fr 1.12fr; gap: 48px; }

/* --- FOOTER: demo3 = py-16 (64px) --- */
.rt3-footer { padding: 64px 0; }

@media (max-width: 1024px) {
  .rt3-about-grid,
  .rt3-workshop-grid { grid-template-columns: 1fr; }
  .rt3-about-media { min-height: 480px; }
  .rt3-about { padding-top: 96px; padding-bottom: 96px; }
}

/* --- ABOUT: cột nội dung demo3 = px-16 py-12 (không cao hơn 720px của cột ảnh) --- */
.rt3-about-copy {
  padding: 48px 64px;
  justify-content: center;
}

.rt3-about-copy h2 { margin-top: 20px; }          /* mt-5 */
.rt3-about-copy > p { margin-top: 24px; font-size: 13px; line-height: 28px; max-width: 32rem; }  /* mt-6 text-[13px] leading-7 */
.rt3-feature-list { margin-top: 36px; }           /* mt-9 */

/* --- FAQ: summary theo text-sm của Tailwind (14px / line-height 20px) --- */
.rt3-faq-list summary { line-height: 20px; }
.rt3-faq-list summary span { line-height: 20px; }

/* --- FOOTER: demo3 = py-16, grid pb-12 + border-b, dòng cuối pt-6 --- */
.rt3-footer-grid {
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.rt3-footer-bottom {
  margin-top: 0;
  padding-top: 24px;
  border-top: 0;
}

@media (max-width: 1024px) {
  .rt3-about-copy { padding: 48px 28px; }
}

/* --- ABOUT: bỏ margin thừa (demo3: eyebrow không có mt, h2 không có mb) --- */
.rt3-about-copy > .rt3-eyebrow { margin-top: 0; }
.rt3-about-copy h2 { margin-bottom: 0; }

/* --- FOOTER: typography theo demo3 (brand text-3xl, mô tả 12/24, mt-4) --- */
.rt3-footer h2 { margin: 0; line-height: 36px; }
.rt3-footer-grid p { margin-top: 16px; font-size: 12px; line-height: 24px; }
.rt3-footer-grid > div > p:first-child { margin-top: 0; }
.rt3-footer-grid a { font-size: 12px; line-height: 24px; }
.rt3-footer-bottom { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

/* --- FOOTER cột "Khám phá": demo3 = mt-4 grid gap-2 text-[12px] --- */
.rt3-footer-grid > div > a {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
}

.rt3-footer-grid > div > a + a { margin-top: 8px; }
.rt3-footer-grid > div > .rt3-eyebrow + a { margin-top: 16px; }
.rt3-footer-grid > div > .rt3-eyebrow { line-height: 14px; }

/* --- KHỐI ĐÁNH GIÁ: demo3 = max-w-[1360px] lg:px-10, -mt-14,
       rounded-[2rem] border-[#cdbda9]/55 bg-[#fffaf3]/95 p-6 gap-5 --- */
.rt3-voices {
  width: min(1280px, calc(100% - 80px));
  max-width: 1280px;
  margin-top: -56px;
  margin-inline: auto;
  padding: 24px;
  gap: 20px;
  border: 1px solid rgba(205, 189, 169, 0.55);
  border-radius: 2rem;
  background: rgba(255, 250, 243, 0.95);
  box-shadow: 0 25px 80px rgba(45, 28, 18, 0.12);
}

@media (max-width: 1024px) {
  .rt3-voices { margin-top: -40px; padding: 20px; }
}

/* --- Dòng "Cuộn để khám phá" ở đáy hero: demo3 = bottom-6, left-1/2, width auto,
       gap-4, text-[9px] tracking-[.24em] text-white/65; vạch w-14 h-px --- */
.rt3-hero-progress {
  bottom: 24px;
  width: auto;
  max-width: none;
  gap: 16px;
  justify-content: center;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.rt3-hero-progress i,
.rt3-hero-progress span:not(:first-child):not(:last-child) {
  width: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1180px) {
  .rt3-hero-progress { width: auto; }
}

@media (max-width: 640px) {
  .rt3-hero-progress { display: none; }   /* demo3: hidden sm:flex */
}

/* --- Khối đánh giá phải hiện ngay như demo3 (không chờ hiệu ứng cuộn).
       Trước đây nó nằm trong .rt3-reveal → opacity:0 + translateY(24px) lúc tải,
       làm lộ cạnh dưới của hero thành một đường kẻ ngang. --- */
.rt3-page.is-motion-ready .rt3-voices.rt3-reveal,
.rt3-page.is-motion-ready .rt3-voices.rt3-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* --- Panel đánh giá phải nằm TRÊN các lớp absolute của hero (z-index:4).
       Trước đây panel là static nên dòng "Cuộn để khám phá" xuyên lên trên. --- */
.rt3-voices {
  position: relative;
  z-index: 10;
}

/* --- Nền panel đục hoàn toàn: demo3 để 95% nên khi slide hero sáng thì dòng
       "Cuộn để khám phá" (nằm dưới panel) hắt xuyên lên. Màu giữ nguyên #fffaf3. --- */
.rt3-voices { background: #fffaf3; }

/* --- Ẩn chấm tròn điều hướng slider hero (demo3 không có) --- */
.rt3-hero-dots { display: none !important; }

/* ============================================================================
   Chuyển bộ sưu tập sản phẩm: chậm & nhẹ nhàng
   - Crossfade giữa các bộ (900ms) thay vì đổi tức thì
   - Từng thẻ trôi lên rất nhẹ, lệch nhịp nhau (stagger)
   - Nếu animation không chạy, thẻ vẫn hiển thị (opacity gốc = 1)
   ========================================================================= */
/* ===== CROSSFADE ĐIỆN ẢNH =====
   Bộ ĐANG hiện: opacity 1 tức thì, nằm DƯỚI (z-index 1) → không bao giờ phụ
   thuộc transition nên không thể bị kẹt vô hình.
   Bộ VỪA RỜI ĐI: nằm TRÊN (z-index 2) và mờ dần 1→0 trong 1,6s, để lộ dần bộ
   mới bên dưới. Kết quả: hai ảnh hoà vào nhau, không có gì "nhảy". */
.rt3-collection {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1600ms;
  pointer-events: none;
}

.rt3-collection.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: none;
  pointer-events: auto;
}

/* fill: none → khi animation kết thúc (hoặc không chạy), thẻ trở về trạng thái
   gốc vốn đã hiển thị đầy đủ. Không bao giờ bị kẹt ở opacity 0. */
/* Thẻ không còn hiệu ứng riêng — việc chuyển do crossfade đảm nhiệm.
   Dùng !important để chắc chắn đè được animation cũ (.is-active article có
   độ ưu tiên cao hơn) vốn từng làm thẻ kẹt ở opacity 0. */
.rt3-collection article,
.rt3-collection.is-active article {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Ken Burns: ảnh phóng rất chậm suốt thời gian bộ đó hiển thị.
   Khung hình đầu là scale(1) nên nếu trình duyệt đóng băng animation,
   ảnh vẫn hiện bình thường. */
.rt3-collection.is-active article > div img {
  animation: rt3KenBurns 16s cubic-bezier(0.33, 0, 0.2, 1) both;
  will-change: transform;
}

@keyframes rt3KenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Rê chuột thì dừng zoom lại, giữ nguyên khung hình hiện tại */
.rt3-collection article:hover > div img {
  animation-play-state: paused;
}

/* Ảnh trong thẻ cũng đổi mềm hơn khi hover */
.rt3-collection article > div img {
  transition: transform 700ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .rt3-collection,
  .rt3-collection.is-active { transition: none; }
  .rt3-collection.is-active article { animation: none; opacity: 1; filter: none; }
}

/* Tôn trọng thiết lập giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
  .rt3-collection { transition: none; }
  .rt3-collection.is-active article > div img { animation: none; }
}

/* ============================================================================
   WORKSHOP — khớp demo3: bo góc các khung + cột phải căn ĐÁY (self-end)
   demo3: grid gap-12 lg:grid-cols-[.88fr_1.12fr]; cột phải có "self-end"
          ảnh: rounded-[1.5rem] · lưới 4 bước: rounded-[1.35rem] + border
          panel gói: rounded-[1.5rem] p-8 · thẻ gói: rounded-xl (12px)
   ========================================================================= */
.rt3-workshop-grid {
  gap: 48px;
  align-items: start;
}

/* Cột phải tụt xuống cho đáy thẳng hàng với ảnh bên trái */
.rt3-workshop-tools {
  align-self: end;
}

/* Ảnh workshop bên trái */
.rt3-book {
  border-radius: 1.5rem;
  overflow: hidden;
}

/* Lưới 4 bước */
.rt3-steps {
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.rt3-steps article {
  min-height: 176px;
}

/* Panel gói trải nghiệm */
.rt3-package-panel {
  margin-top: 32px;
  border-radius: 1.5rem;
  padding: 32px;
}

/* Từng thẻ gói */
.rt3-packages article {
  border-radius: 12px;
  min-height: 116px;
}

@media (max-width: 1024px) {
  .rt3-workshop-tools { align-self: start; }
  .rt3-package-panel { padding: 24px; }
}

/* ============================================================================
   VỀ CHÚNG TÔI — khớp demo3
   demo3: <div class="grid overflow-hidden rounded-[2rem] bg-[#e9ddce] ...">
          nhãn: rounded-full border border-white/30 bg-black/25 px-4 py-2
   ========================================================================= */
.rt3-about-grid {
  border-radius: 2rem;
  overflow: hidden;
  background: #e9ddce;
}

/* Ảnh/video nằm trong khung đã bo nên tự bo theo, bỏ bo góc riêng */
.rt3-about-media {
  border-radius: 0;
}

/* Nhãn "01 / The story" dạng viên thuốc */
.rt3-media-badge {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Khung About kiêm luôn .rt3-shell nên có padding 40px hai bên → nền kem lọt
   vào trong khung. demo3 đặt khung BÊN TRONG phần padding, rộng đúng 1340px. */
.rt3-about-grid {
  width: min(1340px, calc(100% - 80px));
  padding: 0;
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .rt3-about-grid { width: calc(100% - 40px); }
}

/* Link "Xem tất cả sản phẩm" trong khối giới thiệu sản phẩm */
.rt3-shop-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid #8e6444;
  color: #8e6444;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 260ms ease, border-color 260ms ease, gap 260ms ease;
}

.rt3-shop-all:hover { gap: 14px; color: #3d2b20; border-color: #3d2b20; }

/* ============================================================================
   SẢN PHẨM TRANG CHỦ — mosaic theo mockup tháng 08/2026
   Phạm vi được giới hạn bằng .rt3-products-mosaic để trang shop và thẻ sản
   phẩm ở các trang con không bị ảnh hưởng.
   ========================================================================= */
.rt3-products-mosaic {
  position: relative;
  padding: 104px 0 68px;
  background-color: #f3eadf;
  background-image: var(--rt3-product-paper);
  background-position: center;
  background-size: cover;
}

.rt3-products-mosaic .rt3-product-layout {
  display: grid;
  min-height: 0;
  grid-template-columns: 310px minmax(0, 1fr);
  align-items: start;
  gap: 42px;
}

.rt3-products-mosaic .rt3-product-intro {
  position: relative;
  z-index: 3;
  padding: 62px 0 0 16px;
}

.rt3-products-mosaic .rt3-product-intro h2 {
  margin-top: 24px;
  font-size: 64px;
  line-height: 0.94;
}

.rt3-products-mosaic .rt3-product-intro > p:nth-of-type(2) {
  max-width: 285px;
  margin-top: 28px;
  color: #6f5947;
  font-size: 13px;
  line-height: 1.85;
}

.rt3-product-flourish {
  display: grid;
  width: 270px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  color: #aa835f;
}

.rt3-product-flourish i {
  width: 100%;
  height: 1px;
  background: rgba(151, 111, 75, 0.48);
}

.rt3-product-flourish span {
  font-size: 15px;
}

.rt3-products-mosaic .rt3-product-state {
  display: none;
}

.rt3-products-mosaic .rt3-shop-all {
  margin-top: 32px;
  color: #936645;
  border-color: #936645;
  font-size: 11px;
}

.rt3-product-monogram {
  position: absolute;
  z-index: -1;
  top: 445px;
  left: 80px;
  color: rgba(135, 94, 62, 0.08);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 150px;
  font-style: italic;
  line-height: 1;
  pointer-events: none;
}

.rt3-products-mosaic .rt3-mosaic-stage {
  position: relative;
  display: grid;
  height: 680px;
  min-height: 680px;
}

.rt3-products-mosaic .rt3-mosaic {
  position: relative;
  inset: auto;
  display: grid;
  height: 100%;
  min-height: 0;
  grid-area: 1 / 1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  padding: 0;
}

.rt3-products-mosaic .rt3-mosaic-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: #fff9f1;
  border: 1px solid rgba(85, 53, 31, 0.12);
  border-radius: 14px;
  background: #4d3525;
  box-shadow: 0 14px 34px rgba(58, 36, 22, 0.1);
  transform: none !important;
  isolation: isolate;
}

.rt3-products-mosaic .rt3-mosaic-card > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.72, 0.2, 1), filter 500ms ease;
}

.rt3-products-mosaic .rt3-mosaic-card > i {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 13, 7, 0.02) 35%, rgba(24, 13, 7, 0.8) 100%);
  pointer-events: none;
}

.rt3-products-mosaic .rt3-mosaic-card:hover > img,
.rt3-products-mosaic .rt3-mosaic-card:focus-within > img {
  transform: scale(1.055);
  filter: saturate(1.06);
}

.rt3-products-mosaic .rt3-mosaic-copy {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  left: 18px;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
  aspect-ratio: auto;
  background: none;
  box-shadow: none;
}

.rt3-products-mosaic .rt3-mosaic-copy h3 {
  margin: 0;
  color: #fff9f1;
  font-size: 22px;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.36);
}

.rt3-products-mosaic .rt3-mosaic-copy p {
  margin-top: 7px;
  color: rgba(255, 249, 241, 0.9);
  font-size: 12px;
  line-height: 1.2;
}

.rt3-mosaic-badge {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 20px;
  color: #fff;
  background: rgba(42, 24, 14, 0.18);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.rt3-mosaic-arrow {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  font-size: 18px;
  transition: color 240ms ease, background-color 240ms ease, transform 240ms ease;
}

.rt3-mosaic-card:hover .rt3-mosaic-arrow {
  color: #3d2b20;
  background: #fff9f1;
  transform: translateX(3px);
}

.rt3-products-mosaic .rt3-mosaic-card--featured { grid-column: 1 / 5; grid-row: 1 / 5; }
.rt3-products-mosaic .rt3-mosaic-card--small-a  { grid-column: 5 / 8; grid-row: 1 / 3; }
.rt3-products-mosaic .rt3-mosaic-card--small-b  { grid-column: 8 / 11; grid-row: 1 / 3; }
.rt3-products-mosaic .rt3-mosaic-card--tall     { grid-column: 11 / 13; grid-row: 1 / 5; }
.rt3-products-mosaic .rt3-mosaic-card--small-c  { grid-column: 5 / 8; grid-row: 3 / 5; }
.rt3-products-mosaic .rt3-mosaic-card--small-d  { grid-column: 8 / 11; grid-row: 3 / 5; }
.rt3-products-mosaic .rt3-mosaic-card--wide-a   { grid-column: 1 / 7; grid-row: 5 / 7; }
.rt3-products-mosaic .rt3-mosaic-card--wide-b   { grid-column: 7 / 13; grid-row: 5 / 7; }

.rt3-products-mosaic .rt3-mosaic-card--featured .rt3-mosaic-copy {
  right: 68px;
  bottom: 22px;
  left: 22px;
}

.rt3-products-mosaic .rt3-mosaic-card--featured .rt3-mosaic-copy h3,
.rt3-products-mosaic .rt3-mosaic-card--tall .rt3-mosaic-copy h3 {
  font-size: 25px;
}

.rt3-products-mosaic .rt3-mosaic-card--wide-a > img,
.rt3-products-mosaic .rt3-mosaic-card--wide-b > img {
  object-position: center 48%;
}

.rt3-products-mosaic .rt3-collection-tabs {
  margin-top: 22px;
  padding-top: 18px;
  border-color: rgba(146, 103, 69, 0.32);
}

.rt3-products-mosaic .rt3-collection-tabs button,
.rt3-products-mosaic .rt3-collection-tabs span {
  padding: 8px 20px;
  border-color: rgba(150, 107, 73, 0.38);
  background: rgba(255, 250, 244, 0.38);
}

.rt3-products-mosaic .rt3-collection-tabs button:hover,
.rt3-products-mosaic .rt3-collection-tabs button.is-active {
  color: #fffaf3;
  border-color: #9a6a45;
  background: #9a6a45;
}

@media (max-width: 1180px) {
  .rt3-products-mosaic .rt3-product-layout {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 28px;
  }

  .rt3-products-mosaic .rt3-product-intro { padding-left: 0; }
  .rt3-products-mosaic .rt3-product-intro h2 { font-size: 52px; }
  .rt3-products-mosaic .rt3-mosaic-stage { height: 620px; min-height: 620px; }
  .rt3-products-mosaic .rt3-mosaic-copy h3 { font-size: 19px; }
}

@media (max-width: 960px) {
  .rt3-products-mosaic { padding-top: 78px; }

  .rt3-products-mosaic .rt3-product-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .rt3-products-mosaic .rt3-product-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
    padding-top: 0;
  }

  .rt3-products-mosaic .rt3-product-intro .rt3-eyebrow,
  .rt3-products-mosaic .rt3-product-intro h2,
  .rt3-products-mosaic .rt3-product-flourish {
    grid-column: 1;
  }

  .rt3-products-mosaic .rt3-product-intro > p:nth-of-type(2),
  .rt3-products-mosaic .rt3-product-intro .rt3-shop-all {
    grid-column: 2;
  }

  .rt3-products-mosaic .rt3-product-intro > p:nth-of-type(2) {
    grid-row: 1 / span 3;
    align-self: end;
    max-width: 390px;
    margin-top: 0;
  }

  .rt3-products-mosaic .rt3-product-intro .rt3-shop-all {
    justify-self: start;
  }

  .rt3-product-monogram { display: none; }
}

@media (max-width: 720px) {
  .rt3-products-mosaic {
    padding: 62px 0 50px;
    background-position: center top;
  }

  .rt3-products-mosaic .rt3-product-intro {
    display: block;
  }

  .rt3-products-mosaic .rt3-product-intro h2 {
    font-size: 46px;
  }

  .rt3-products-mosaic .rt3-product-intro > p:nth-of-type(2) {
    max-width: 430px;
    margin-top: 24px;
  }

  .rt3-product-flourish { width: min(270px, 100%); }

  .rt3-products-mosaic .rt3-mosaic-stage {
    height: 1160px;
    min-height: 1160px;
  }

  .rt3-products-mosaic .rt3-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }

  .rt3-products-mosaic .rt3-mosaic-card--featured { grid-column: 1; grid-row: 1 / 3; }
  .rt3-products-mosaic .rt3-mosaic-card--tall     { grid-column: 2; grid-row: 1 / 3; }
  .rt3-products-mosaic .rt3-mosaic-card--small-a  { grid-column: 1; grid-row: 3; }
  .rt3-products-mosaic .rt3-mosaic-card--small-b  { grid-column: 2; grid-row: 3; }
  .rt3-products-mosaic .rt3-mosaic-card--small-c  { grid-column: 1; grid-row: 4; }
  .rt3-products-mosaic .rt3-mosaic-card--small-d  { grid-column: 2; grid-row: 4; }
  .rt3-products-mosaic .rt3-mosaic-card--wide-a   { grid-column: 1 / 3; grid-row: 5; }
  .rt3-products-mosaic .rt3-mosaic-card--wide-b   { grid-column: 1 / 3; grid-row: 6; }

  .rt3-products-mosaic .rt3-mosaic-copy {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .rt3-products-mosaic .rt3-mosaic-copy h3,
  .rt3-products-mosaic .rt3-mosaic-card--featured .rt3-mosaic-copy h3,
  .rt3-products-mosaic .rt3-mosaic-card--tall .rt3-mosaic-copy h3 {
    font-size: 18px;
  }

  .rt3-products-mosaic .rt3-mosaic-card--featured .rt3-mosaic-copy {
    right: 12px;
    bottom: 15px;
    left: 12px;
  }

  .rt3-mosaic-arrow { display: none; }
  .rt3-mosaic-badge { top: 12px; left: 12px; }

  .rt3-products-mosaic .rt3-collection-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .rt3-products-mosaic .rt3-collection-tabs::-webkit-scrollbar { display: none; }

  .rt3-products-mosaic .rt3-collection-tabs button,
  .rt3-products-mosaic .rt3-collection-tabs span {
    flex: 0 0 auto;
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt3-products-mosaic .rt3-mosaic-card > img { transition: none; }
}