:root {
  --paper: #faf6ec; --cream: #f0e7d6; --ink: #202e25; --green: #263e32;
  --muted: #535b4e; --rust: #963f30; --line: #dacfbb;
  --serif: "Instrument Serif", Georgia, serif; --sans: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.6 var(--sans); }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 5px; }
figure, p, h1, h2, h3 { margin: 0; }
.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.top { border-bottom: 1px solid var(--line); }
.header { min-height: 82px; display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 30px/1 var(--serif); white-space: nowrap; }
.flower { color: var(--rust); font-size: 26px; }
nav { display: flex; gap: 33px; font-size: 14px; font-weight: 600; }
nav a:hover, footer a:hover { color: var(--rust); }
.outline, .button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; border-radius: 6px; font-weight: 700; }
.outline { border: 1px solid var(--green); padding: 9px 15px; font-size: 13px; }
.outline:hover { background: var(--cream); }
.button { background: var(--green); color: white; padding: 15px 22px; min-height: 54px; }
.button:hover { background: #385646; }
.hero { display: grid; grid-template-columns: .92fr 1fr; align-items: center; gap: clamp(36px, 6vw, 90px); padding-block: 47px 42px; }
.eyebrow { color: var(--rust); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .15em; margin-bottom: 15px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(66px, 7.25vw, 111px); line-height: .92; letter-spacing: -.035em; }
h2 { font-size: clamp(48px, 5.2vw, 76px); line-height: .95; letter-spacing: -.028em; }
h1 em, h2 em { color: var(--rust); font-weight: 400; }
.lead, .section-heading > p, .description { color: var(--muted); }
.lead { font-size: 18px; max-width: 395px; margin-block: 25px 23px; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 0; margin-bottom: 18px; }
.price strong { font-size: 26px; letter-spacing: -.035em; }
.price span, .note { font-size: 13px; color: var(--muted); }
.hero-arch { aspect-ratio: 1.11; overflow: hidden; position: relative; display: grid; place-items: center; isolation: isolate; background: #eee2c9; border-radius: 49% 49% 10px 10px / 51% 51% 10px 10px; border: 1px solid #e3d3b3; }
.hero-arch img { width: 86%; max-height: 98%; object-fit: contain; mix-blend-mode: multiply; }
.ornament { position: absolute; z-index: 1; color: #8c4f38; top: 9%; right: 22%; font-size: 25px; }
.hero-art figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px 0; color: var(--muted); font-size: 13px; }
.ribbon { background: var(--green); color: #fbf5e6; }
.ribbon-inner { display: flex; justify-content: center; align-items: center; gap: clamp(15px, 4.5vw, 65px); min-height: 62px; padding-block: 12px; font-size: 14px; font-weight: 600; }
.ribbon b { color: #ebc494; font-size: 17px; }
.uses, .details { padding-block: 83px; }
.section-heading, .details { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 38px; }
.section-heading > p { max-width: 380px; justify-self: end; }
.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 33px; }
.use-photo { border-radius: 9px; overflow: hidden; aspect-ratio: 1; padding: 3%; }
.use-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sage { background: #e8ebdb; }
.sand { background: #f0e4cb; }
.rose { background: #f1e2dc; }
.use-grid figcaption { padding-top: 12px; }
.use-grid h3 { font-size: 33px; line-height: 1.1; }
.use-grid p { color: var(--muted); font-size: 14px; margin-top: 3px; }
.selection { background: #f0e7d6; border-block: 1px solid var(--line); }
.selection-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 7vw, 96px); align-items: center; padding-block: 68px; }
.selected-photo {
  width: min(100%, 480px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #e6dfca;
}
.selected-photo img {
  width: 89%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: translateY(1%);
}
/* The black plate is smaller and higher in the original photograph. */
.selection-inner:has(input[value="preto"]:checked) .selected-photo img {
  transform: translateY(5%) scale(1.1);
}
.description { margin-block: 18px 23px; max-width: 400px; }
fieldset { padding: 0; margin: 0 0 15px; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; font-size: 14px; }
legend strong { margin-left: 6px; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatches label {
  position: relative;
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #faf8f1;
  cursor: pointer;
}
.swatches input { position: absolute; opacity: 0; }
.swatches img {
  width: 90%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: translateY(1%);
}
.swatches input[value="preto"] + img { transform: translateY(5%) scale(1.1); }
.swatches label:has(input:checked) { outline: 2px solid var(--green); outline-offset: -2px; }
.swatches label:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }
.note { margin-top: 10px; }
.details { align-items: start; }
.faq { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 15px 0; }
summary { font-weight: 700; cursor: pointer; }
details p { color: var(--muted); margin-top: 8px; }
footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 100px; display: flex; gap: 16px 30px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-block: 18px; }
.footer-inner > p, .footer-inner > a:last-child { font-size: 13px; color: var(--muted); }
.footer-inner p a { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); }
  nav { gap: 15px; }
  .header { gap: 15px; }
  .hero { gap: 30px; }
  h1 { font-size: clamp(54px, 8.9vw, 79px); }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 36px); }
  .header { min-height: 62px; }
  .brand { font-size: 25px; }
  .flower { font-size: 22px; }
  nav { display: none; }
  .outline { padding: 7px 9px; font-size: 11px; gap: 6px; }
  .hero { grid-template-columns: 1fr; padding-block: 34px 26px; gap: 24px; }
  h1 { font-size: clamp(59px, 13vw, 82px); }
  .lead { margin-block: 18px 14px; font-size: 16px; }
  .hero-arch { aspect-ratio: 1.22; }
  .ribbon-inner { font-size: 11px; gap: 8px; justify-content: space-between; }
  .ribbon b { font-size: 12px; }
  .uses, .details { padding-block: 52px; }
  .section-heading, .details, .selection-inner { grid-template-columns: 1fr; gap: 18px; }
  .section-heading > p { justify-self: start; }
  .use-grid { gap: 18px; grid-template-columns: 1fr; margin-top: 22px; }
  .selection-inner { padding-block: 40px; gap: 24px; }
  .selected-photo { width: min(100%, 400px); }
  .swatches label { width: 45px; height: 45px; }
  .swatches { gap: 5px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.arrow {
  width: 9px;
  height: 9px;
  position: relative;
  flex: none;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.arrow::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 1px;
  background: currentColor;
  right: -1px;
  top: -1px;
  transform: rotate(-45deg);
  transform-origin: right;
}
.catalog-tab { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 800px) {
  .header:has(.catalog-tab) { flex-wrap: wrap; padding-block: 12px; }
  .header:has(.catalog-tab) nav { order: 1; width: 100%; justify-content: center; }
}
@media (max-width: 650px) {
  .header:has(.catalog-tab) { row-gap: 8px; }
  .header:has(.catalog-tab) nav { display: flex; justify-content: flex-start; }
  .header:has(.catalog-tab) nav a:not(.catalog-tab) { display: none; }
}
.whatsapp-buy[aria-disabled="true"] { opacity: .62; cursor: default; }