:root {
  --ivory: #fff8e8;
  --paper: #fffdf6;
  --blush: #f4c94f;
  --blush-soft: #fff0ca;
  --rose: #d51674;
  --rose-dark: #8e1459;
  --wine: #541048;
  --gold: #d78308;
  --gold-soft: #f4c251;
  --forest: #0f5554;
  --ink: #2d2031;
  --muted: #6f5d6b;
  --line: rgba(97, 24, 84, .16);
  --cempasuchil: #ef8b09;
  --marigold: #ffbd25;
  --bugambilia: #c41478;
  --night: #241127;
}

body {
  background:
    radial-gradient(circle at 4% 18%, rgba(239, 139, 9, .09), transparent 23rem),
    var(--ivory);
}

.season-announcement {
  min-height: 43px;
  background:
    linear-gradient(135deg, transparent 75%, rgba(255, 189, 37, .16) 75%) 0 0 / 22px 22px,
    linear-gradient(225deg, transparent 75%, rgba(213, 22, 116, .22) 75%) 0 0 / 22px 22px,
    linear-gradient(90deg, #2c102d, #64114f 50%, #2c102d);
  border-bottom: 3px solid var(--cempasuchil);
  color: #fff9e7;
}

.season-announcement strong { color: #ffd86d; }

.contact-bar { background: #0c4548; }

.site-header {
  width: min(100% - 64px, 1380px);
  min-height: 104px;
  background: rgba(255, 253, 246, .96);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cempasuchil) 0 33%, var(--bugambilia) 33% 66%, #168f8c 66%);
}

.brand-mark,
.brand-script { color: var(--bugambilia); }

.brand-mark::after { background: var(--cempasuchil); }

.desktop-nav .season-nav,
.mobile-menu .season-nav { color: var(--bugambilia); }

.wa-button {
  background: linear-gradient(135deg, #c35d00, var(--cempasuchil));
  box-shadow: 0 15px 34px rgba(151, 76, 0, .22);
}

.wa-button:hover {
  box-shadow: 0 19px 42px rgba(151, 76, 0, .3);
}

.hero {
  width: 100%;
  min-height: 720px;
  max-width: none;
  margin: 0;
  padding: 64px max(32px, calc((100vw - 1320px) / 2)) 80px;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(54px, 7vw, 112px);
  background:
    radial-gradient(circle at 5% 95%, rgba(213, 22, 116, .23), transparent 30rem),
    radial-gradient(circle at 42% 8%, rgba(239, 139, 9, .14), transparent 25rem),
    linear-gradient(128deg, #1d0c22, #351037 58%, #151b28);
  color: #fff8e7;
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 25px;
  pointer-events: none;
}

.hero::before {
  top: 0;
  background:
    linear-gradient(135deg, var(--cempasuchil) 25%, transparent 25%) -12px 0 / 24px 24px,
    linear-gradient(225deg, var(--cempasuchil) 25%, transparent 25%) -12px 0 / 24px 24px,
    linear-gradient(315deg, var(--bugambilia) 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(45deg, var(--bugambilia) 25%, var(--night) 25%) 0 0 / 24px 24px;
}

.hero::after {
  bottom: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--bugambilia), var(--cempasuchil), #1a9993, var(--bugambilia));
}

.hero-copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 620px;
}

.hero-visual {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 600px;
}

.hero-frame {
  inset: 3% 0 0 4%;
  border: 1px solid rgba(255, 189, 37, .75);
  border-radius: 28px 28px 145px 28px;
}

.hero-frame::before {
  border-color: rgba(213, 22, 116, .4);
  border-radius: inherit;
}

.hero-photo--main {
  left: 0;
  top: 0;
  width: 88%;
  height: 100%;
  border-radius: 28px 28px 145px 28px;
  box-shadow: 0 34px 86px rgba(0, 0, 0, .42);
}

.hero-photo--main img { object-position: center 58%; }

.hero-photo--accent {
  right: 0;
  bottom: 3%;
  width: 31%;
  height: 31%;
  border: 8px solid #2d102e;
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}

.hero-seal {
  right: 1%;
  top: 7%;
  width: 118px;
  height: 118px;
  background: #fff8e7;
  border: 2px solid var(--cempasuchil);
  color: var(--wine);
  transform: rotate(4deg);
}

.hero-seal::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(196, 20, 120, .45);
  border-radius: 50%;
}

.hero-seal b,
.hero-seal small { position: relative; z-index: 1; }

.hero-seal b { font-size: 38px; }
.hero-seal small { color: var(--bugambilia); font-size: 12px; }

.eyebrow {
  margin-bottom: 24px;
  color: #ffd86d;
  font-size: 12px;
}

.eyebrow::before { background: var(--cempasuchil); }

h1 {
  color: #fffaf0;
  font-size: clamp(62px, 6vw, 92px);
  line-height: .88;
}

h1 em {
  color: #ffb11b;
  font-size: .86em;
  text-shadow: 0 8px 30px rgba(239, 139, 9, .15);
}

.hero-text {
  max-width: 570px;
  color: rgba(255, 248, 231, .78);
  font-size: 17px;
}

.hero .text-link {
  color: #ffe4a2;
  border-color: var(--cempasuchil);
}

.hero-phone { color: rgba(255, 248, 231, .68); }
.hero-phone strong { color: #fff; }
.shipping-note { color: #ffd86d; }

.signature-strip {
  width: min(100% - 64px, 1320px);
  min-height: 132px;
  margin: -28px auto 0;
  background: #fffaf0;
  border: 0;
  border-top: 5px solid var(--cempasuchil);
  box-shadow: 0 24px 60px rgba(42, 12, 42, .17);
}

.signature-strip::after { border-color: rgba(196, 20, 120, .22); }
.signature-strip span { color: var(--bugambilia); }
.signature-strip strong { color: var(--wine); }

.seasonal-section {
  margin-top: 0;
  padding-bottom: 135px;
  background:
    radial-gradient(circle at 90% 15%, rgba(213, 22, 116, .12), transparent 25rem),
    #fff3d6;
  color: var(--ink);
}

.seasonal-section::before {
  background: radial-gradient(circle, rgba(239, 139, 9, .2), rgba(239, 139, 9, 0) 70%);
}

.seasonal-section::after {
  background: radial-gradient(circle, rgba(196, 20, 120, .13), rgba(196, 20, 120, 0) 70%);
}

.seasonal-pattern {
  height: 42px;
  margin-bottom: 90px;
  background:
    linear-gradient(135deg, var(--cempasuchil) 25%, transparent 25%) -20px 0 / 40px 40px,
    linear-gradient(225deg, var(--cempasuchil) 25%, transparent 25%) -20px 0 / 40px 40px,
    linear-gradient(315deg, var(--bugambilia) 25%, transparent 25%) 0 0 / 40px 40px,
    linear-gradient(45deg, var(--bugambilia) 25%, #0f5554 25%) 0 0 / 40px 40px;
}

.seasonal-kicker { color: var(--bugambilia); }
.seasonal-kicker::before { background: var(--bugambilia); }
.seasonal-copy h2 { color: var(--wine); }

.seasonal-copy > p:not(.seasonal-kicker) {
  color: #654e5e;
}

.seasonal-details span {
  border-color: rgba(196, 20, 120, .28);
  background: rgba(255, 255, 255, .5);
  color: var(--wine);
}

.seasonal-copy > small { color: #75616f; }

.seasonal-photo {
  border-color: rgba(196, 20, 120, .35);
  box-shadow: 0 26px 70px rgba(77, 31, 59, .23);
}

.seasonal-photo--main {
  inset: 0 12% 0 0;
  border-radius: 28px 28px 110px 28px;
}

.seasonal-photo--main img { object-position: center 60%; }

.seasonal-photo--accent {
  border-color: #fff3d6;
  border-radius: 18px;
}

.seasonal-plaque {
  top: 32px;
  background: #201023;
  border-color: var(--cempasuchil);
  color: #fff8e7;
}

.seasonal-plaque::before { border-color: rgba(255, 189, 37, .28); }
.seasonal-plaque span,
.seasonal-plaque small { color: #ffd56b; }
.seasonal-plaque strong { color: #fff; }

.collections {
  position: relative;
  padding-top: 130px;
}

.collections::before {
  content: "";
  position: absolute;
  top: 35px;
  left: 50%;
  width: 86px;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cempasuchil) 0 33%, var(--bugambilia) 33% 66%, #168f8c 66%);
  transform: translateX(-50%);
}

.section-kicker { color: var(--bugambilia); }
h2 { color: var(--wine); }

.collection-card {
  border: 0;
  border-top: 5px solid var(--cempasuchil);
  background: #fffdf6;
  box-shadow: 0 20px 55px rgba(68, 22, 53, .1);
}

.collection-card:nth-child(2) { border-top-color: var(--bugambilia); }
.collection-card:nth-child(3) { border-top-color: #168f8c; }
.collection-content > span,
.collection-content a { color: var(--bugambilia); }
.collection-content h3 { color: var(--wine); }

.gallery-section {
  background:
    radial-gradient(circle at 10% 20%, rgba(239, 139, 9, .14), transparent 26rem),
    linear-gradient(145deg, #171020, #31102f 65%, #102c31);
  border: 0;
}

.gallery-section h2 { color: #fff9ea; }
.gallery-section .section-kicker { color: #ffc54a; }
.gallery-section .section-heading--split > p { color: rgba(255, 248, 231, .7); }

.gallery-item {
  border: 1px solid rgba(255, 189, 37, .35);
  border-radius: 7px;
}

.gallery-item::after {
  border-color: rgba(255, 196, 67, .65);
  opacity: .45;
}

.essence-section { position: relative; }

.essence-image::before { border-color: var(--cempasuchil); }

.essence-image span {
  background: var(--bugambilia);
  border-color: #ffb929;
  color: #fff;
  font-family: var(--display);
  font-style: italic;
}

.essence-copy .text-link { color: var(--bugambilia); }

.catalog-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%) 0 0 / 30px 30px,
    linear-gradient(135deg, #711052, #2b102d 66%, #0e4b4c);
  border: 1px solid rgba(255, 189, 37, .48);
}

.catalog-panel::before { color: rgba(255, 189, 37, .06); }
.catalog-copy .section-kicker { color: #ffd56b; }
.catalog-sheet--back { background: #0f6664; }
.catalog-sheet--front { background: #ffba24; color: #4a123e; }
.catalog-sheet::after { color: var(--bugambilia); }

.contact-section {
  background:
    radial-gradient(circle at 0 100%, rgba(239, 139, 9, .18), transparent 24rem),
    #0d5052;
  border: 0;
}

.contact-section h2 { color: #fff9e9; }
.contact-section .section-kicker { color: #ffd15b; }
.contact-copy > p:not(.section-kicker) { color: rgba(255, 250, 235, .75); }

.delivery-callout {
  border-left-color: #ffb11b;
  background: rgba(255, 255, 255, .09);
}

.delivery-callout strong { color: #fff; }
.delivery-callout span { color: rgba(255, 250, 235, .7); }

.contact-card {
  background: #fff9e9;
  border: 0;
  border-top: 6px solid var(--cempasuchil);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.contact-card > div > span {
  background: #f8c340;
  color: var(--wine);
}

.contact-card > div:nth-child(2) > span {
  background: var(--bugambilia);
  color: #fff;
}

.contact-card strong,
.contact-card p a { color: var(--wine); }
.contact-socials a { color: var(--bugambilia); }

footer {
  background:
    linear-gradient(90deg, rgba(213, 22, 116, .09), transparent 30%, rgba(239, 139, 9, .08)),
    #190d1d;
  border-top: 5px solid var(--cempasuchil);
}

.brand--footer .brand-mark,
.brand--footer .brand-script { color: #ffbd25; }

@media (max-width: 1120px) {
  .site-header { width: min(100% - 40px, 1000px); }

  .hero {
    grid-template-columns: .92fr 1.08fr;
    padding-inline: 40px;
    gap: 45px;
  }

  .hero-visual { height: 555px; }
  h1 { font-size: clamp(54px, 6vw, 72px); }
}

@media (max-width: 760px) {
  .season-announcement {
    min-height: 48px;
    padding: 8px 12px;
    font-size: 9px;
  }

  .season-announcement strong { display: none; }

  .contact-bar {
    background: #0c4548;
    border-bottom: 1px solid rgba(255, 189, 37, .35);
  }

  .site-header {
    width: 100%;
    min-height: 82px;
    padding: 0 15px;
    background: #fff9e9;
  }

  .mobile-menu summary {
    background: var(--wine);
    border-color: var(--wine);
  }

  .mobile-menu summary span { background: #fff; }

  .mobile-menu nav {
    top: 53px;
    width: min(270px, calc(100vw - 30px));
    background: #fff9e9;
    border-top: 4px solid var(--cempasuchil);
  }

  .hero {
    display: block;
    width: 100%;
    min-height: 690px;
    padding: 0 22px;
    position: relative;
    isolation: isolate;
  }

  .hero::before {
    z-index: 4;
    height: 20px;
    background-size: 20px 20px;
  }

  .hero-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    animation: none;
  }

  .hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
      linear-gradient(180deg, rgba(22, 7, 26, .28), rgba(22, 7, 26, .78) 54%, rgba(22, 7, 26, .97) 90%),
      linear-gradient(90deg, rgba(22, 7, 26, .35), transparent 55%);
  }

  .hero-frame,
  .hero-photo--accent { display: none; }

  .hero-photo--main {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-photo--main img { object-position: 56% 55%; }

  .hero-seal {
    top: 40px;
    right: 18px;
    z-index: 5;
    width: 84px;
    height: 84px;
  }

  .hero-seal b { font-size: 29px; }
  .hero-seal small { font-size: 9px; }

  .hero-copy {
    width: 100%;
    min-height: 690px;
    max-width: 560px;
    margin: 0 auto;
    padding: 82px 0 42px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .eyebrow {
    max-width: calc(100% - 95px);
    color: #ffdc7a;
    font-size: 10px;
    line-height: 1.5;
  }

  h1 {
    max-width: 520px;
    color: #fff;
    font-size: clamp(49px, 14vw, 66px);
    line-height: .9;
  }

  h1 em {
    color: #ffb11b;
    font-size: .88em;
  }

  .hero-text {
    max-width: 510px;
    margin: 22px 0;
    color: rgba(255, 250, 238, .85);
    font-size: 15px;
    line-height: 1.62;
  }

  .hero-actions {
    align-items: stretch;
    gap: 9px;
  }

  .hero .wa-button {
    min-height: 57px;
    background: linear-gradient(135deg, #bb5800, #f19a0b);
  }

  .hero .text-link { display: none; }

  .hero-phone {
    margin: 14px auto 0;
    color: rgba(255, 248, 231, .76);
  }

  .shipping-note {
    margin-top: 9px;
    color: #ffe198;
  }

  .signature-strip {
    width: calc(100% - 30px);
    margin-top: -1px;
    border-top-width: 6px;
    background: #fff9e9;
  }

  .signature-strip > div {
    min-height: 84px;
    padding: 18px 20px;
  }

  .signature-strip > div:nth-child(2) { border-left: 4px solid var(--bugambilia); }
  .signature-strip > div:nth-child(3) { border-left: 4px solid #168f8c; }
  .signature-strip > div:nth-child(4) { border-left: 4px solid var(--cempasuchil); }

  .seasonal-section {
    margin-top: 0;
    padding-bottom: 88px;
  }

  .seasonal-pattern {
    height: 30px;
    margin-bottom: 62px;
    background-size: 30px 30px;
  }

  .seasonal-copy h2,
  .section-heading h2,
  .essence-copy h2,
  .contact-copy h2 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .seasonal-visual { height: 470px; }

  .seasonal-photo--main {
    inset: 0;
    border-radius: 20px 20px 90px 20px;
  }

  .seasonal-photo--accent { display: none; }

  .seasonal-plaque {
    top: auto;
    right: 13px;
    bottom: 18px;
    width: 165px;
    min-height: 125px;
  }

  .collections { padding-top: 100px; }

  .collection-grid { gap: 24px; }

  .collection-card {
    border-top-width: 6px;
    border-radius: 0 0 18px 18px;
  }

  .collection-image { height: 340px; }

  .gallery-section { padding: 92px 0; }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 168px;
    gap: 7px;
  }

  .gallery-item { border-radius: 4px; }

  .essence-image {
    height: 500px;
    padding: 0 12px 12px 0;
  }

  .essence-image::before { inset: 14px 0 0 14px; }

  .essence-image span {
    right: 0;
    bottom: 24px;
    max-width: 78%;
    padding: 14px 18px;
    font-size: 17px;
  }

  .catalog-panel {
    min-height: 760px;
    border-left: 0;
    border-right: 0;
  }

  .catalog-section { width: 100%; }

  .catalog-sheet--front { background: #ffb41c; }

  .contact-section { padding-bottom: 105px; }

  .contact-card {
    border-top-width: 6px;
    border-radius: 0 0 18px 18px;
  }

  .wa-float {
    background: linear-gradient(135deg, #159447, #25d366);
    border: 2px solid rgba(255, 255, 255, .72);
  }
}

@media (max-width: 390px) {
  .hero,
  .hero-copy { min-height: 650px; }
  .hero-copy { padding-top: 75px; }
  h1 { font-size: 47px; }
  .hero-text { font-size: 14px; }
  .collection-image { height: 310px; }
  .gallery-grid { grid-auto-rows: 148px; }
}