/** Shopify CDN: Minification failed

Line 1488:17 Unexpected "{"
Line 1488:26 Expected ":"
Line 3956:0 All "@import" rules must come first
Line 3957:0 All "@import" rules must come first
Line 3958:0 All "@import" rules must come first

**/
/* =========================================================
   FÁVOLA — Theme Stylesheet
   Design tokens extracted from Figma "Favola" file
   ========================================================= */

:root {
  /* ---- Color palette ---- */
  --color-cream: #f5e7d7;
  --color-cream-2: #f6e8d7;
  --color-cream-3: #f7e9d8;
  --color-cream-deep: #e6d7bd;
  --color-cream-deep-2: #e1cfb3;
  --color-sand: #e8e1d5;

  --color-navy: #0a1a2f;
  --color-navy-2: #101b30;
  --color-navy-3: #1a2235;

  --color-gold: #c9a15e;
  --color-gold-deep: #9c754a;
  --color-gold-light: #b8975a;
  --color-gold-pale: #f6e3c3;

  --color-brown: #7d6541;
  --color-brown-70: rgba(125, 101, 65, 0.7);
  --color-taupe: #9e9278;

  --color-ink: #1a2235;
  --color-white: #ffffff;

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-mark: "Playfair Display", Georgia, serif;
  --font-nav: "Jost", "Work Sans", sans-serif;
  --font-label: "Work Sans", sans-serif;
  --font-script: "Nothing You Could Do", cursive;
  --font-signature: "Tangerine", cursive;

  --container-max: 1440px;
  --sidebar-width: 242px;
}

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

html {
  scroll-behavior: smooth;
}

[id^="product-"] {
  scroll-margin-top: 200px;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

input,
textarea {
  font-family: inherit;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Headings ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.script-text {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.2;
}

/* =========================================================
   LAYOUT SHELL — sidebar + main content
   ========================================================= */
.site-shell {
  /* max-width:var(--container-max); */
  margin: 0 auto;
  position: relative;
}

.site-main {
  min-width: 0;
  position: relative;
}

/* ---- Sidebar navigation (always an off-canvas drawer, opened via "Step inside" / hamburger) ---- */
.site-sidebar {
  background: var(--color-navy-2);
  width: var(--sidebar-width);
  min-height: 100vh;
  padding: 60px 0 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  /* box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35); */
  overflow-y: auto;
}

.site-sidebar.is-open {
  transform: translateX(0);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 47, 0.5);
  z-index: 150;
}

.sidebar-overlay.is-open {
  display: block;
}

.site-sidebar__logo {
  padding: 0 0 30px 32px;
}

.site-sidebar__logo-mark {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-sidebar__logo-mark span {
  border: 1px solid var(--color-gold);
  border-radius: 9999px;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mark);
  color: var(--color-gold);
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
}

.site-sidebar__nav {
  padding: 0 32px;
  width: 100%;
}

.site-sidebar__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gold);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.site-sidebar__toggle svg {
  width: 12px;
  height: 12px;
}

.site-sidebar__links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 16px;
}

.site-sidebar__links a {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold);
  transition: opacity 0.2s ease;
}

.site-sidebar__links a:hover {
  opacity: 0.7;
}

.site-sidebar__links a.is-active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-sidebar__divider {
  width: 118px;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.site-sidebar__divider img {
  width: 80px;
}

.site-sidebar__sub-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

site-sidebar__logo-mark img {
  width: 62px;
  height: 62px;
}

.site-sidebar__sub-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.1px;
  color: var(--color-gold);
}

/* Close button only needs to be visible once the drawer is open; kept simple across breakpoints */
.site-sidebar__close {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gold);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 32px 24px;
}

@media (max-width: 989px) {
  .site-shell {
    display: block;
  }
}

/* ---- Top navigation bar (over hero) ---- */
.site-topbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 40px 24px;
  gap: 24px;
}

.site-topbar--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.site-topbar--dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.0)
  );
  backdrop-filter: blur(1px);
}

.site-topbar--dark-overlay .site-topbar__title,
.site-topbar--dark-overlay .site-topbar__sub {
  color: var(--color-gold);
}

.site-topbar--dark-overlay .site-topbar__step-inside,
.site-topbar--dark-overlay .icon-btn svg {
  color: var(--color-gold);
}

.site-topbar__enter {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.site-topbar__step-inside {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.site-topbar__step-inside svg {
  width: 12px;
  height: 12px;
}

.site-topbar__center {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.site-topbar__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.site-topbar__sub {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--color-taupe);
}

.site-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex: 1;
}

.icon-btn {
  display: flex;
}

.icon-btn svg {
  width: 26px;
  height: 26px;
  color: var(--color-gold-deep);
}

.hamburger-btn {
  display: none;
}

@media (max-width: 749px) {
  .site-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(320px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 60;
    overflow-y: auto;
  }

  .site-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 55;
  }

  .sidebar-overlay.is-open {
    display: block;
  }

  .site-topbar {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .site-topbar__enter {
    order: 1;
  }

  .hamburger-btn {
    order: 2;
  }

  .site-topbar__center {
    order: 3;
    flex: 0 0 100% !important;
    text-align: center;
    min-width: 100% !important;
  }

  .site-topbar__logo-img {
    max-height: 60px !important;
    width: auto;
    margin: 0 auto;
  }

  .site-topbar__actions {
    order: 2;
    display: flex;
    gap: 12px;
  }

  .site-sidebar__logo-mark#sidebar-toggle-logo {
    width: 50px;
    height: 50px;
    background-color: #0a1a2f;
  }

  .site-sidebar__logo-mark#sidebar-toggle-logo img {
    max-width: 40px;
    max-height: 40px;
  }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-nav);
  font-size: 16px;
  letter-spacing: 2px;
  border: 1px solid var(--color-brown);
  color: var(--color-brown);
  background: transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.btn:hover {
  background: var(--color-brown);
  color: var(--color-cream);
}

.btn--full {
  width: 100%;
}

/* .btn--dark {
  border-color: var(--color-navy-3);
  color: var(--color-navy-3);
}

.btn--dark:hover {
  background: var(--color-navy-3);
  color: var(--color-cream);
} */

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  width: fit-content;
}

.link-underline svg {
  width: 16px;
}

/* =========================================================
   HOME — Hero
   ========================================================= */
.hero {
  background: var(--color-cream-2);
  padding: 50px 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero__inner {
  max-width: 60%;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.hero__image {
  width: 100%;
  height: 100%;
}

.hero__caption-wrap {
  background: linear-gradient(
    to bottom,
    rgba(246, 232, 215, 0) 16%,
    var(--color-cream-2) 85%
  );
  padding: 100px 60px 24px;
  margin-top: -244px;
}

.hero__caption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--color-brown);
}

.hero__annotation {
  position: absolute;
  font-family: var(--font-script);
  font-size: 28px;
  color: rgba(10, 26, 47, 0.8);
  transform: rotate(-6deg);
  line-height: 1.15;
  text-align: center;
}

.hero__annotation--1 {
  top: 8%;
  left: 6%;
}

.hero__annotation--2 {
  top: 22%;
  left: 4%;
}

.hero__annotation img {
  width: 80px;
  margin: 8px auto 0;
}

@media (max-width: 989px) {
  .hero {
    padding: 100px 0 30px;
  }

  .hero__inner {
    max-width: 100%;
  }

  .hero__annotation {
    display: none;
  }

  .hero__caption-wrap {
    padding: 60px 20px 20px;
    margin-top: -140px;
  }
}

/* ---- Step closer banner ---- */
.step-closer {
  position: relative;
  aspect-ratio: 16/8;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

@media (max-width: 749px) {
  .step-closer {
    min-height: 500px;
    aspect-ratio: 430/765;
  }
}

.step-closer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 74%, #000 100%);
}

.step-closer__content {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(476px, 90%);
  text-align: center;
  z-index: 2;
}

.step-closer__title {
  color: #fff;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 7px;
  text-transform: uppercase;
}

.step-closer__sub {
  color: #fff;
  opacity: 0.9;
  font-family: var(--font-display);
  font-size: 18px;
  padding: 0;
  line-height: 0px;
}

.step-closer__arrow {
  width: 24px;
  height: 24px;
  color: #fff;
}

/* ---- People / Places / Moments ---- */
.pearl-grid {
  background: var(--color-cream);
  padding: 40px 60px 60px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.pearl-grid__intro {
  font-family: var(--font-mark);
  color: rgba(10, 26, 47, 0.7);
  text-align: center;
  font-size: 18px;
  font-style: italic;
}

.pearl-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}

.pearl-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

.pearl-grid__image {
  background: var(--color-sand);
  aspect-ratio: 1/1.15;
  width: 100%;
  overflow: hidden;
}

.pearl-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pearl-grid__label {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  font-size: 18px;
  text-align: center;
  line-height: 0;
  margin-top: 40px;
}

.pearl-grid__rule {
  width: 80px;
}

@media (max-width: 768px) {
  .pearl-grid {
    padding: 30px 20px;
  }

  .pearl-grid__items {
    grid-template-columns: 1fr;
  }
}

/* ---- Creations banner ---- */
.creations-banner {
  border-top: 1px solid rgba(184, 151, 90, 0.2);
  border-bottom: 1px solid rgba(184, 151, 90, 0.2);
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 61px 60px 25px;
  text-align: center;
  position: relative;
}

.creations-banner__title {
  color: #fff;
  font-size: clamp(22px, 3.4vw, 36px);
  letter-spacing: 12px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.creations-banner__link {
  color: #fff;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

@media (max-width: 749px) {
  .creations-banner {
    min-height: 45vh;
  }
}

/* =========================================================
   Generic content banner (used by inner pages: hero image + title)
   ========================================================= */
.page-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding: 120px 40px 60px;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.05)
  );
}

.page-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 520px;
}

.page-hero__eyebrow-mark {
  width: 120px;
}

.page-hero__title {
  color: var(--color-gold);
  font-size: clamp(28px, 4.5vw, 42px);
  letter-spacing: 8px;
  text-transform: uppercase;
}

.page-hero__sub {
  color: #d4c6ac;
  font-family: var(--font-display);
  font-size: 24px;
}

/* =========================================================
   Product feature rows (Fragrances / Discovers pages)
   ========================================================= */
.feature-row {
  border-bottom: 1px solid rgba(212, 198, 172, 0.15);
  min-height: 774px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 60px;
}

.feature-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
}

.feature-row--right .feature-row__panel {
  margin-left: auto;
}

.feature-row__panel {
  position: relative;
  z-index: 1;
  width: min(521px, 100%);
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.feature-row__eyebrow {
  font-size: 36px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.feature-row__rule {
  width: 80px;
  height: 1px;
  background: var(--color-brown);
  border: none;
}

.feature-row__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-brown);
  font-size: 24px;
}

.feature-row__script {
  font-family: var(--font-script);
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--color-brown);
  line-height: 1.2;
}

.feature-row__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.feature-row__price-value {
  font-family: Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--color-ink);
}

.feature-row__price-meta {
  font-size: 12px;
  color: #645947;
  letter-spacing: 1px;
}

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordion__item {
  border-bottom: 1px solid var(--color-brown);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--color-ink);
}

.accordion__trigger svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.accordion__item.is-open .accordion__trigger svg {
  transform: rotate(180deg);
}

.accordion__panel {
  display: none;
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink);
}

.accordion__item.is-open .accordion__panel {
  display: block;
}

.cart-form {
  width: 100%;
}

@media (max-width: 989px) {
  .feature-row {
    min-height: auto;
    padding: 40px 24px;
  }

  .feature-row__panel {
    width: 100%;
  }

  .feature-row--right .feature-row__panel {
    margin-left: 0;
  }
}

.discover-product-image {
  position: relative;
  overflow: hidden;
}

.discover-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Default layout: content is on the LEFT, image on the RIGHT —
   so the fade goes from opaque (left edge, touching the content)
   to transparent (moving right, into the image). */
.discover-product-image__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to left,
    #F5E7D7 0%,
    transparent 35%
  );
}

/* Reversed layout: content is on the RIGHT, image on the LEFT —
   so the fade must flip to start from the right edge instead. */
.discover-product--reverse .discover-product-image__fade {
  background: linear-gradient(
    to right,
    #F5E7D7 0%,
    transparent 35%
  );
}

/* =========================================================
   Collectors Club
   ========================================================= */

.collectors-hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: right center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.collectors-hero {
  background-image: var(--hero-bg-desktop, none);
}

@media (max-width: 749px) {
  .collectors-hero {
    background-image: var(--hero-bg-mobile, var(--hero-bg-desktop, none));
  }

}

.collectors-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 13, 24, 0.92) 0%,
    rgba(8, 13, 24, 0.65) 32%,
    rgba(8, 13, 24, 0.15) 58%,
    rgba(8, 13, 24, 0.1) 100%
  );
}

.collectors-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 844px;
  padding: 40px 60px;
}

.collectors-hero__title {
  font-family: Cormorant Garamond;
  font-weight: 500;
  font-size: 60px;
  line-height: 66px;
  letter-spacing: 12px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #c9a15e;
}

.collectors-hero__rule {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 22px 0;
  color: #c9a24a;
}

.collectors-hero__rule i {
  font-style: normal;
  font-size: 10px;
  line-height: 1;
}

.collectors-hero__rule span {
  width: 56px;
  height: 1px;
  background: rgba(201, 162, 74, 0.6);
}

.collectors-hero__desc {
  font-family: Cormorant Garamond;
  font-weight: 500;
  font-style: Italic;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: center;
  color: #b79d7c;
  margin: 0;
}

/* ---------- Hero handwritten note ---------- */

.collectors-hero__note {
  position: absolute;
  z-index: 1;
  top: 160px;
  right: 12px;
  max-width: 130px;
  margin: 0;
  font-family: "Nothing You Could Do", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 3px;
  color: #c9a15e;
  text-align: left;
  transform: rotate(-8.8deg);
  opacity: 0.9;
  pointer-events: none;
}

.collectors-hero__note::after {
  content: "";
  position: absolute;
  bottom: -43px;
  right: 28px;
  width: 78px;
  height: 46px;
  rotate: 25deg;
  background: url('data:image/svg+xml;utf8,<svg width="81" height="45" viewBox="0 0 81 45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.422387 43.975C0.561929 43.805 0.815149 43.5175 1.01212 43.3021C1.19913 43.0978 1.41186 42.8721 1.61196 42.664C1.73818 42.5327 1.69595 42.6192 1.78573 42.5275C1.93688 42.3754 2.05481 42.2259 2.21227 42.0711C2.26431 42.0202 2.23437 42.1154 2.28835 42.0612C2.57764 41.771 2.89387 41.411 3.15697 41.1398C4.65735 39.5843 6.0475 38.158 7.5955 36.6204C8.07794 36.1416 8.73255 35.5414 9.242 35.0154C9.29924 34.9562 9.2384 34.9644 9.24743 34.9513C9.39034 34.745 9.38422 34.8555 9.5065 34.7491C9.99217 34.326 10.5213 33.8155 10.9811 33.3527C11.1753 33.1571 10.9302 33.2914 11.1512 33.1358C11.1663 33.1252 11.1456 33.1993 11.2002 33.1527C11.3237 33.0469 11.5433 32.8268 11.638 32.7407C11.8205 32.575 11.8499 32.5464 12.0206 32.3848C12.2544 32.1639 12.5485 31.9124 12.7993 31.6645C12.8528 31.6114 12.7527 31.6505 12.8356 31.5632C12.9184 31.476 13.1543 31.2596 13.2402 31.1924C13.3225 31.1284 13.3115 31.1819 13.3299 31.1746C13.4805 31.1173 13.6827 30.8138 13.7151 30.781C14.3034 30.1864 14.8753 29.7275 15.4779 29.1809C15.9237 28.7765 16.3829 28.343 16.816 27.9609C17.3271 27.5102 17.7986 27.1243 18.2877 26.6931C18.3397 26.6474 18.2475 26.6651 18.311 26.6092C18.9857 26.0146 19.6772 25.4279 20.4012 24.8579C20.4738 24.8008 20.4096 24.9093 20.4838 24.8541C20.9323 24.5193 21.6496 24.0278 21.7913 23.6771C22.0858 23.4424 22.4456 23.1562 22.7322 22.9693C22.917 22.8488 22.7802 23.0184 22.9772 22.8332C23.0217 22.7914 22.9353 22.8107 23.004 22.7505C23.2967 22.4938 23.6211 22.2485 23.9007 21.9982C23.9574 21.9473 23.9191 21.9327 23.9319 21.9142C24.041 21.7606 24.3308 21.6387 24.3863 21.6025C24.8085 21.3259 25.0867 21.0833 25.459 20.7932C25.5455 20.726 25.4142 20.7683 25.4964 20.7022C25.9251 20.3584 26.3723 20.0177 26.8046 19.7134C26.9011 19.6456 26.8397 19.7436 26.8871 19.7128C27.0957 19.577 27.0932 19.4827 27.2933 19.3514C27.3355 19.3236 27.3338 19.3684 27.3435 19.3659C27.4941 19.3266 27.5426 19.1837 27.5711 19.1599C27.9296 18.857 28.223 18.7475 28.5803 18.4659C28.6231 18.4322 28.4984 18.4702 28.6202 18.3775C29.4341 17.7575 30.2959 17.1458 31.1385 16.5898C31.2691 16.5036 31.1976 16.5951 31.2076 16.5927C31.375 16.5516 31.4106 16.4222 31.4505 16.3901C31.7654 16.1391 32.1177 15.9796 32.2814 15.7422C33.6883 14.8054 35.0761 13.8078 36.5388 12.9783C36.5574 12.9677 36.5477 13.0236 36.5847 13.0022C37.0308 12.7449 36.9126 12.7435 37.158 12.4937C37.2199 12.4308 37.4924 12.3729 37.5157 12.3667C37.6008 12.3439 37.56 12.4432 37.5865 12.4324C37.8051 12.3421 37.6634 12.1874 37.931 12.0207C37.9396 12.0158 37.9245 12.0699 37.9489 12.0591C38.0249 12.0258 38.0862 11.97 38.1615 11.9388C38.3338 11.8678 38.4425 11.9182 38.6507 11.7221C38.6771 11.6972 38.5696 11.6256 38.8122 11.484C38.9088 11.4275 39.3316 11.169 39.4547 11.1042C39.5776 11.0392 39.5153 11.1206 39.5246 11.1169C39.8708 10.9675 39.7599 11.0581 39.9583 11.0256C40.1566 10.9931 40.0225 10.869 40.0782 10.8132C40.134 10.7574 40.3908 10.6534 40.4562 10.6317C40.5214 10.6099 40.4612 10.6731 40.5169 10.6498C40.8857 10.4948 40.6231 10.4867 40.722 10.3966C40.9553 10.1842 41.2286 10.1763 41.4795 10.0469C41.5475 10.0119 41.4787 10.0172 41.5363 9.98098C41.7649 9.838 41.9257 9.79312 42.1744 9.61011C42.215 9.58019 42.3929 9.3905 42.561 9.36242C42.5849 9.35858 42.5443 9.41829 42.6481 9.36872C42.8032 9.29466 43.0769 9.15133 43.2333 9.05324C43.3487 8.9808 43.1863 9.00895 43.3445 8.9412C43.4148 8.91118 43.306 9.00623 43.4369 8.94758C43.5671 8.88918 43.886 8.71477 44.0074 8.64845C44.1285 8.58213 44.0428 8.58223 44.0513 8.57455C44.1034 8.52875 44.328 8.38661 44.3487 8.37571C45.3879 7.81715 46.3949 7.37992 47.4172 6.85604C47.4976 6.81498 47.4249 6.80292 47.437 6.79626C47.7071 6.64514 47.5375 6.85358 47.7481 6.79384C47.6824 6.72943 47.8037 6.68796 47.9957 6.58549C48.0881 6.53607 48.0222 6.53045 48.0293 6.52322C48.1476 6.4102 48.2737 6.4233 48.3046 6.42354C48.4187 6.42424 48.4949 6.32362 48.5723 6.32381C48.6499 6.32367 48.5242 6.43644 48.7134 6.34696C48.7535 6.29397 48.5782 6.28656 48.7167 6.2072C49.2392 5.90593 50.2856 5.50411 50.7289 5.31966C51.1712 5.13412 51.3114 5.06869 51.5726 4.96992C52.045 4.79273 51.8501 4.80972 52.1306 4.66318C52.4124 4.51699 52.3266 4.71258 52.3807 4.72465C52.4339 4.73713 52.4665 4.68841 52.5243 4.68364C52.582 4.67894 52.4797 4.7441 52.6022 4.70115C52.7247 4.658 53.0323 4.4731 53.0628 4.42531C53.1269 4.32392 52.9509 4.31414 53.2799 4.21151C53.2988 4.20568 53.2535 4.26543 53.3253 4.24127C53.8946 4.04836 54.4764 3.82834 55.0458 3.6476C55.124 3.62283 55.0701 3.6887 55.1158 3.67477C55.5923 3.53058 55.3988 3.52359 55.6303 3.35435C55.6085 3.47687 55.7736 3.48698 56.1319 3.36221C56.3474 3.28752 56.2949 3.25603 56.4236 3.17649C56.4622 3.15256 56.6253 3.13096 56.6459 3.10061C56.7139 3.00116 56.5437 2.97262 56.9251 2.87842C56.9419 2.87442 56.9027 2.92936 56.9597 2.91282C57.3281 2.80672 57.3479 2.72034 57.7391 2.58466C58.0458 2.47822 58.6093 2.35135 58.9636 2.25373C58.99 2.37224 59.3177 2.24579 59.431 2.12605C59.6632 2.06199 59.9118 1.98631 60.1387 1.93518C60.2168 1.91756 60.1755 1.96547 60.1863 1.96642C60.3509 1.98247 60.4299 1.87665 60.4791 1.85993C61.013 1.68274 61.47 1.62853 61.9736 1.44302C61.9914 1.43645 62.0014 1.34716 62.1545 1.37346C62.1644 1.37544 62.0023 1.4539 62.2467 1.39811C62.4898 1.34255 62.9648 1.27873 63.2989 1.1658C63.3797 1.13836 63.5753 1.02589 63.7549 1.04273C63.7788 1.0451 63.7593 1.07391 63.7944 1.08026C63.9078 1.10024 63.9477 1.00496 64.0852 1.05059C64.2228 1.0963 64.4883 1.09745 64.8239 0.982666C64.8346 0.979157 64.9037 0.897236 65.0126 0.878C65.1865 0.847254 65.4353 0.81655 65.6163 0.784588C65.703 0.769239 65.6403 0.737631 65.6552 0.734253C66.2327 0.610833 66.6627 0.580181 67.2956 0.506829C67.4116 0.493383 67.7371 0.391428 67.9671 0.408155C68.2194 0.426863 67.9922 0.660458 68.5497 0.545523C68.774 0.500155 69.0359 0.208435 69.4592 0.303912C70.2524 0.195249 71.0004 0.212261 71.7989 0.129434C71.8348 0.125729 71.946 0.0481669 72.031 0.0459665C72.1572 0.042826 72.2275 0.074562 72.3174 0.0739411C72.6946 0.0724131 73.038 0.0368876 73.4021 0.0390119C73.5406 0.0399209 73.4923 0.0752335 73.6572 0.0769665C73.822 0.0789549 73.9322 0.0328754 74.1554 0.0576697C74.3239 0.0767074 74.4907 0.174129 74.7133 0.190652C74.7241 0.09754 74.8775 0.102675 75.1512 0.087579C75.2039 0.0846642 75.1488 0.0501455 75.1737 0.0470951C75.2755 0.0339727 75.3679 0.0646194 75.4646 0.0505036C75.4882 0.0471296 75.4907 0.0152933 75.51 0.0107509C75.6747 -0.0292981 75.9387 0.0565368 75.9837 0.0717355C76.1568 0.129039 76.2413 0.0927607 76.3749 0.12017C76.5081 0.147738 76.3056 0.157668 76.4618 0.179489C76.7855 0.224663 77.2025 0.25334 77.5317 0.286416C77.663 0.299401 77.5775 0.2484 77.5963 0.24927C77.8695 0.264681 78.1389 0.339852 78.2992 0.272921C78.4621 0.513003 78.4655 0.269769 78.8485 0.362775C78.8786 0.370281 78.9039 0.478125 78.785 0.478177C78.6662 0.478253 78.4927 0.424129 78.3275 0.428931C78.2883 0.429818 78.0574 0.501805 78.0269 0.504589C77.7873 0.525145 77.7696 0.368093 77.758 0.35823C77.6255 0.252193 77.3453 0.331345 77.2739 0.332497C76.9463 0.336825 76.6718 0.294278 76.3979 0.299743C76.2188 0.303351 76.1952 0.403797 76.056 0.392459C75.5935 0.356311 75.4362 0.207761 74.9938 0.315699C74.899 0.339173 74.9892 0.452079 74.6555 0.356294C74.6346 0.350168 74.3861 0.264978 74.2409 0.31376C74.2226 0.319883 74.2228 0.35224 74.1988 0.354655C74.0385 0.370311 73.9319 0.34369 73.7572 0.355608C73.5828 0.367569 73.3723 0.386847 73.174 0.378254C73.0544 0.373037 72.8998 0.315429 72.842 0.301843C72.679 0.262448 72.5069 0.336736 72.405 0.288287C72.3019 0.239693 72.4983 0.154825 72.2305 0.129956C72.2234 0.214301 72.2037 0.301301 72.1909 0.386335C71.6096 0.403544 71.0353 0.407598 70.451 0.454382C70.3786 0.460303 70.456 0.499844 70.3786 0.507405C70.052 0.539363 69.762 0.531868 69.427 0.576887C69.167 0.612027 68.886 0.689575 68.6149 0.732621C68.4375 0.65568 68.036 0.736746 67.7407 0.767314C67.6373 0.777975 67.6407 0.751633 67.5663 0.753242C67.2852 0.760471 67.4266 0.826989 67.3527 0.850745C67.0358 0.953465 66.9802 0.766836 66.5964 0.830669C66.5759 0.83388 66.3433 0.974558 66.3103 0.986539C66.1002 1.06294 66.2684 0.957107 66.1322 0.971797C65.884 0.998926 65.7086 1.00401 65.4252 1.08519C65.3426 1.10899 65.1525 1.20855 64.9802 1.19079C64.9575 1.18848 64.9631 1.15293 64.9454 1.15424C64.6258 1.18131 64.6378 1.28803 64.4663 1.35864C64.2948 1.42929 64.0043 1.41412 63.9436 1.40527C63.7853 1.38235 64.0516 1.35878 64.0584 1.35201C64.1391 1.27004 63.9397 1.32219 63.7845 1.34958C63.7406 1.252 63.5259 1.30438 63.6236 1.37854C63.6346 1.38654 63.7525 1.35142 63.7845 1.34958C63.6703 1.47843 63.4374 1.54175 63.1552 1.5068C63.023 1.49065 63.1272 1.41274 62.7593 1.51673C62.5923 1.56432 62.6742 1.6191 62.5313 1.67277C62.2058 1.79519 61.7536 1.83734 61.41 1.9367C61.2853 1.97272 61.4175 1.97935 61.3327 2.00532C61.1078 2.07448 60.8996 2.09898 60.6751 2.17532C60.6548 2.1823 60.716 2.20839 60.6452 2.22812C60.1088 2.37881 59.6321 2.4872 59.0731 2.65359C58.805 2.73309 58.3332 2.90243 58.0549 2.9865C57.5726 3.13117 56.9635 3.27037 56.5589 3.42511C56.2951 3.52582 56.3672 3.54479 56.2622 3.61099C56.0602 3.73872 55.6373 3.78629 55.5809 3.79077C55.5786 3.79097 55.8043 3.69981 55.675 3.72366C55.5888 3.7077 55.5835 3.78963 55.5809 3.79077C55.5435 3.79347 55.0873 3.94964 55.0003 3.99071C54.953 4.01281 54.9938 4.03933 54.9689 4.05016C54.3764 4.307 53.7764 4.54902 53.1596 4.77642C53.1485 4.77999 53.1485 4.73297 53.1227 4.74188C52.7621 4.86571 52.5562 5.00783 52.278 5.15746C52.0008 5.30684 51.77 5.39302 51.5702 5.39661C51.357 5.49754 51.033 5.60145 50.8462 5.66132C50.6593 5.72113 50.6687 5.81012 50.6537 5.81853C50.1858 6.08399 49.8837 6.16661 49.3744 6.39223C49.1323 6.49917 48.6608 6.7333 48.4082 6.86414C48.2077 6.96781 48.0765 7.00867 47.8947 7.11059C47.8701 7.12436 47.9122 7.14609 47.9051 7.15113C47.716 7.293 47.776 7.16117 47.7256 7.16721C47.543 7.18919 47.432 7.20746 47.1773 7.36454C47.1185 7.40074 46.9984 7.60893 46.89 7.67176C46.7489 7.75329 46.7824 7.68308 46.6352 7.76986C46.6226 7.77727 46.6386 7.80219 46.544 7.84834C46.1057 8.06283 45.6228 8.29163 45.1753 8.52953C45.1142 8.56191 45.2144 8.56211 45.1265 8.6096C44.7138 8.83244 44.2594 9.07338 43.847 9.27271C43.7454 9.32166 43.7918 9.25918 43.7657 9.26233C43.6056 9.28245 43.4598 9.45984 43.4298 9.47819C42.7156 9.91802 42.1185 10.166 41.3967 10.6252C41.3573 10.6502 41.0939 10.909 40.9166 10.922C40.9045 10.9229 40.7274 10.9335 40.6348 11.0518C40.6291 11.0591 40.7349 11.0448 40.5847 11.1284C40.4345 11.212 40.2109 11.3767 39.985 11.4589C39.9135 11.4849 39.7205 11.507 39.5625 11.677C39.5522 11.6883 39.3328 11.9899 39.1762 11.9687C39.1508 11.9651 39.1135 11.864 38.9146 12.049C38.8768 12.0845 38.9677 12.0564 38.8613 12.1389C38.6983 12.2653 38.451 12.3847 38.2613 12.558C38.2282 12.5884 38.1069 12.7482 37.9506 12.782C37.9262 12.7873 37.9454 12.7336 37.876 12.7725C37.5457 12.9572 37.2243 13.1886 36.8885 13.3746C36.7696 13.4406 36.7973 13.3552 36.6699 13.4188C36.5426 13.4824 36.295 13.6247 36.1851 13.7272C36.0752 13.8296 36.26 13.8176 36.0784 13.9445C35.2904 14.4951 34.4592 14.9858 33.6608 15.5214C33.5423 15.601 33.6582 15.561 33.4851 15.6803C32.8487 16.1175 31.7649 16.9148 31.1767 17.2523C30.7051 17.5221 31.2335 17.0917 30.8847 17.3141C30.7164 17.4216 30.6036 17.6332 30.5667 17.664C30.2066 17.9659 29.9165 18.1197 29.5864 18.38C29.5183 18.4338 29.6121 18.4179 29.5539 18.4632C29.3555 18.6184 29.1259 18.7645 28.9328 18.9125C28.8461 18.9791 28.8817 18.9932 28.7996 19.0513C28.6033 19.1906 28.4251 19.3069 28.2199 19.4231C28.2012 19.4337 28.2916 19.3148 28.1488 19.4203C27.9179 19.5912 27.6159 19.7821 27.3733 20.0064C27.3015 20.073 27.3437 20.1346 27.146 20.221C27.1047 20.2391 27.0945 20.1339 26.9483 20.3438C26.923 20.3793 26.6647 20.71 26.463 20.7812C26.4096 20.8002 26.256 20.8265 26.1692 20.9086C26.1576 20.9199 26.2332 20.9119 26.1579 20.9755C25.8922 21.1988 25.6043 21.4189 25.3341 21.648C25.262 21.7092 25.3982 21.6546 25.29 21.7448C24.9926 21.9929 24.6094 22.2844 24.3085 22.5091C24.1975 22.5919 24.2506 22.5053 24.2404 22.5086C24.076 22.5626 24.053 22.6865 24.0142 22.7238C23.7742 22.954 23.5478 23.0877 23.3109 23.2937C23.2455 23.3504 23.3178 23.342 23.3067 23.3556C23.1899 23.4947 23.2485 23.3563 23.1561 23.4216C22.8972 23.6045 22.6276 23.8298 22.3862 24.0356C22.2975 24.1113 22.4274 24.0629 22.3475 24.1304C21.8745 24.5313 21.3873 24.9326 20.9101 25.3026C20.8188 25.3734 20.8517 25.2999 20.8282 25.3093C20.6654 25.3737 20.5298 25.5885 20.4922 25.63C20.3208 25.819 20.2263 25.8589 20.061 26.0077C19.2527 26.7353 18.2527 27.5794 17.4662 28.2605C16.4618 29.1302 15.6809 29.7917 14.7448 30.6643C14.686 30.7192 14.7771 30.6985 14.7269 30.7462C14.0816 31.3559 13.4263 31.9428 12.7732 32.5794C12.7202 32.631 12.8279 32.5897 12.7439 32.6736C12.5718 32.8457 12.3487 33.0546 12.1642 33.2114C12.0742 33.288 12.1624 33.1514 12.0725 33.229C11.8605 33.4119 11.6574 33.6024 11.4461 33.8158C11.3573 33.9057 11.5257 33.806 11.408 33.9202C10.5946 34.7116 9.90559 35.3979 9.04641 36.1712C8.98943 36.2224 8.87708 36.205 8.77538 36.3314C8.78477 36.358 8.80638 36.3787 8.82185 36.4017C7.73235 37.5118 6.61899 38.6049 5.49879 39.7735C5.45225 39.8221 5.5675 39.7715 5.47773 39.8656C5.2181 40.1379 4.97617 40.3983 4.73333 40.6524C4.45855 40.9406 4.18994 41.2154 3.91671 41.4743C3.86287 41.5254 3.8251 41.4404 3.68801 41.6075C3.66143 41.6396 3.46147 41.8729 3.41097 41.9553C3.40434 41.9666 3.47884 41.9445 3.39986 42.0321C2.92039 42.5629 2.57522 42.929 2.06786 43.4582C1.99561 43.5329 2.03761 43.4224 1.98609 43.4751C1.79619 43.6705 1.66596 43.8204 1.46796 44.045C1.26844 44.2714 1.09991 44.4616 0.953973 44.5999C0.675707 44.8808 0.716985 44.7216 0.549945 44.8046C0.520706 44.8229 0.435993 44.9191 0.35585 44.9484C0.246033 44.9143 0.265995 44.7127 0.134617 44.6931C0.118188 44.6936 0.0444653 44.7809 0.0300396 44.7921C0.0156248 44.8033 0.00535075 44.8028 -0.00015068 44.7639C0.000258537 44.7604 0.0136709 44.7353 0.0738132 44.6528C0.132518 44.572 0.12866 44.5615 0.140774 44.5321C0.148825 44.5016 0.082652 44.513 0.107755 44.4568C0.134227 44.3991 0.207778 44.3685 0.279531 44.2541C0.346628 44.1448 0.304371 44.1191 0.422387 43.975ZM50.0055 5.93576C49.8235 5.97296 49.8608 6.12024 50.0245 6.00717C50.0324 6.00155 50.0149 5.93375 50.0055 5.93576ZM71.0316 0.298558C70.7912 0.24714 70.636 0.355393 70.8058 0.394978C70.9752 0.434806 71.1046 0.314232 71.0316 0.298558ZM73.4779 0.169882C73.2004 0.11963 73.1595 0.332187 73.4546 0.287186C73.4718 0.284673 73.4941 0.172829 73.4779 0.169882ZM1.06508 44.1809C1.06122 44.1822 0.966585 44.2873 0.96664 44.2902C0.952975 44.3779 1.14141 44.1687 1.06508 44.1809ZM75.9144 0.177215C75.8296 0.143675 75.5795 0.164755 75.685 0.205579C75.7698 0.238207 76.0197 0.218675 75.9144 0.177215ZM41.5225 10.1064C41.5189 10.1059 41.4267 10.1566 41.4348 10.1664C41.4612 10.198 41.5824 10.1152 41.5225 10.1064ZM80.0305 0.615136C79.4272 0.510991 79.0818 0.287312 79.742 0.404362C79.8613 0.426068 79.4752 0.420567 79.6255 0.459174C79.8998 0.529691 80.1026 0.450749 80.3774 0.557156C80.4269 0.576258 80.0647 0.621077 80.0294 0.615202C80.0298 0.615181 80.0302 0.615157 80.0305 0.615136Z" fill="%23C9A15E"/></svg>')
    no-repeat center / contain;
}

@media (max-width: 749px) {
  .collectors-hero {
    min-height: 100vh;
    background-position: center;
  }

  .collectors-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 13, 24, 0.55) 60%,
      rgba(8, 13, 24, 0.88) 100%
    );
  }

  .collectors-hero__badge {
    top: 20px;
    left: 20px;
  }

  .collectors-hero__content {
    max-width: 100%;
    padding: 32px;
    top: -45px;
  }

  .collectors-hero__title {
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 6px;
  }

  .collectors-hero__desc {
    font-size: 22px;
  }

  .collectors-hero__note {
    top: auto;
    bottom: 70px;
    right: 0;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 2px;
  }
}

/* ---------- Creations grid ---------- */

.collectors-creations {
  background: #f2ece1;
  padding: 64px 24px 40px;
}

.collectors-creations__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 7px;
  text-align: center;
  text-transform: uppercase;
  color: #7d6541;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin: 0 0 32px;
}

.collectors-creations__heading .flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #c9a24a;
}

.collectors-creations__heading .flourish svg {
  display: block;
  width: auto;
  height: 20px;
}

.collectors-creations__heading .flourish--right {
  display: flex;
  align-items: center;
}

.collectors-creations__grid {
  display: grid;
  grid-template-columns: 0.68fr 1fr 0.68fr;
  gap: 16px;
  width: 100%;
  max-width: 1316px;
  min-width: 0;
  height: 388px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 2 boxes */
.collectors-creations__grid:has(.creation-card:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}

/* 1 box */
.collectors-creations__grid:has(.creation-card:only-child) {
  grid-template-columns: 1fr;
}

.collectors-creations__grid > * {
  min-width: 0;
}

.creation-card {
  position: relative;

  display: block;

  width: 100%;
  height: 388px;

  padding: 7px;

  border: 0;
  border-radius: 0;

  overflow: hidden;

  cursor: pointer;

  background: #f2ece1;
}

.creation-card:focus-visible {
  outline: 2px solid #c9a24a;
  outline-offset: 3px;
}

.creation-card__img,
.creation-card__img--placeholder {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.creation-card__img--placeholder {
  background: linear-gradient(160deg, #22314a, #0e1a2b);
}

.creation-card__shade {
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.creation-card__shade1{
  background: linear-gradient(
  313.8deg,
  rgba(253, 245, 226, 0) 25.88%,
  rgba(253, 245, 226, 0.6) 47.54%,
  #fdf5e2 71.75%
  );
}

.creation-card__shade2{
  background: linear-gradient(
  383.8deg,
  rgba(253, 245, 226, 0) 25.88%,
  rgba(253, 245, 226, 0.6) 47.54%,
  #fdf5e2 71.75%
  );
}

.creation-card__shade3{
  background: linear-gradient(
  313.8deg,
  #70390900 0%, #703909CC 66.54%, #703909 80%);
}





.creation-card__label {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 2;
  padding: 0 30px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 7.2px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #7d6541;
  width: 320px;
}

.creation-card__label1{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
  left: 0;
  padding-right:50px;
}
.creation-card__label2{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
  padding-left:50px;
}

.creation-card__label3{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
  color: #f6e3c5;
  padding-right:50px;
  left: 0;
}

.creation-card__divider {
  display: block;
}

@media (max-width: 749px) {

  .collectors-creations__grid:has(.creation-card:nth-child(2):last-child){
    grid-template-columns: 1fr;
  }

  .collectors-creations__grid {
    grid-template-columns: 1fr;

    width: 100%;

    max-width: 100%;

    height: auto;

    gap: 16px;
  }

  .creation-card {
    width: 100%;

    height: 388px;
  }

  .collectors-creations__heading {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 6px;
  }

  .creation-card__label {
    font-size: 22px;
  }
}

/* =========================================================
   CREATION MODAL
   IMPORTANT:
   Only modal CSS is changed here.
   Hero / creations grid / cards are untouched.
   ========================================================= */

.creation-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 20px;
  box-sizing: border-box;

  overflow: auto;
}

.creation-modal.is-open {
  display: flex;
}

/* ---------------------------------------------------------
   BACKDROP
   --------------------------------------------------------- */

.creation-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(8, 12, 20, 0.68);

  cursor: pointer;
}

#creation-modal-{{ section.id }} .creation-modal__meta .discontinued-label {
  color: #0047AB; font-size:16px; /* Cobalt blue */
}


/* ---------------------------------------------------------
   MODAL CARD - DESKTOP
   Figma desktop background:
   1314 x 753
   --------------------------------------------------------- */

.creation-modal__card {
  position: relative;
  z-index: 2;

  /*
   * Keep the original Figma ratio.
   *
   * The third value prevents the modal from becoming
   * taller than the viewport on short screens.
   */
  width: min(1314px, 92vw, calc((100vh - 40px) * 1314 / 753));

  aspect-ratio: 1314 / 753;

  height: auto;

  flex: 0 0 auto;

  background-image: var(--modal-bg-desktop);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  box-sizing: border-box;

  overflow: hidden;
}

/* ---------------------------------------------------------
   CONTENT AREA - DESKTOP
   --------------------------------------------------------- */

.creation-modal__content {
  position: absolute;

  /*
   * These values control the safe area inside
   * the Figma background.
   */
  left: 8%;
  right: 8%;
  top: 16%;
  bottom: 12%;

  display: grid;

  /*
   * minmax(0, 1fr) is important.
   * It prevents long text from expanding the grid.
   */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  column-gap: 4%;

  width: auto;
  height: auto;

  min-width: 0;
  min-height: 0;

  padding: 15px 25px;

  box-sizing: border-box;

  overflow: hidden;
}

/* ---------------------------------------------------------
   PHOTO
   --------------------------------------------------------- */

.creation-modal__photo {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  display: flex;
  align-items: stretch;
  justify-content: stretch;

  box-sizing: border-box;
}

.creation-modal__photo img {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  object-fit: cover;
  object-position: center;

  margin: 0;
  padding: 20px;

  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------
   RIGHT SIDE COPY
   --------------------------------------------------------- */

.creation-modal__copy {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  max-width: 100%;
  max-height: 100%;

  display: flex;
  flex-direction: column;

  /*
   * Center the whole content vertically.
   */
  justify-content: center;
  align-items: center;

  padding: 0 2%;

  box-sizing: border-box;

  overflow: hidden;

  text-align: center;
}

/* ---------------------------------------------------------
   MAIN TITLE
   --------------------------------------------------------- */

.creation-modal__copy h3 {
  display: block;

  width: 100%;
  max-width: 100%;

  margin: 0 0 7px;
  padding: 0;

  box-sizing: border-box;

  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: normal;

  /*
   * Smaller than your previous 42px maximum.
   * This prevents the title from crossing outside
   * the right content column.
   */
  font-size: clamp(20px, 2.35vw, 36px);

  line-height: 1.12;

  letter-spacing: clamp(2px, 0.34vw, 6px);

  text-align: center;
  text-transform: uppercase;

  color: #7d6541;

  white-space: normal;

  overflow-wrap: break-word;
  word-break: normal;

  flex-shrink: 1;
}

/* ---------------------------------------------------------
   DECORATIVE RULE
   --------------------------------------------------------- */

.creation-modal__rule {
  width: 100%;

  margin: 2px 0 12px;

  flex: 0 0 auto;

  text-align: center;
}

.creation-modal__rule svg {
  display: inline-block;

  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   META
   --------------------------------------------------------- */

.creation-modal__meta {
  width: 100%;
  max-width: 100%;

  margin: 0 0 14px;
  padding: 0;

  box-sizing: border-box;

  font-family: Cormorant Garamond;
  font-weight: 600;
  font-style: italic;

  font-size: clamp(18px, 1.25vw, 18px);

  line-height: 1.35;

  letter-spacing: clamp(1px, 0.3vw, 5px);

  text-align: center;

  color: #7d6541;

  white-space: normal;

  overflow-wrap: break-word;
  word-break: normal;

  flex-shrink: 1;
}

/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.creation-modal__desc {
  width: 100%;
  max-width: 100%;

  margin: 0 0 18px;
  padding: 0;

  box-sizing: border-box;

  font-family: Cormorant Garamond;
  font-weight: 500;
  font-style: normal;

  font-size: clamp(12px, 0.8vw, 16px);

  line-height: 1.9;

  letter-spacing: clamp(0.7px, 0.11vw, 1.8px);

  text-transform: uppercase;

  color: #292d32;

  text-align: left;

  white-space: normal;

  overflow-wrap: break-word;
  word-break: normal;

  flex-shrink: 1;
}

/* ---------------------------------------------------------
   STORYTELLER + SEAL
   --------------------------------------------------------- */

.creation-modal__fghtde {
  width: 100%;
  max-width: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  flex: 0 0 auto;

  box-sizing: border-box;
}

.creation-modal__signature {
  position: relative;
  display: inline-block;
  font-family: var(--font-signature);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: 2px;
  text-align: center;
  color: #0a1a2f;
  transform: rotate(-10deg);
  margin: 10px 0;
}

.creation-modal__signature::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 6%;
  bottom: -30px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M2 6 C 60 26, 130 26, 198 2' stroke='%230A1A2F' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  transform: rotate(180deg);
}

/* ---------------------------------------------------------
   SEAL
   --------------------------------------------------------- */

.creation-modal__seal {
  width: clamp(55px, 7vw, 100px);
  height: clamp(55px, 7vw, 105px);

  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
}

.creation-modal__seal img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  box-shadow: none;

  object-fit: contain;
}

/* ---------------------------------------------------------
   CLOSE BUTTON
   --------------------------------------------------------- */

.creation-modal__close {
  position: absolute;

  top: 0;
  right: 0;

  z-index: 20;

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.35);

  color: #fff;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  box-shadow: none;
}

/* ---------------------------------------------------------
   BODY LOCK
   --------------------------------------------------------- */

body.creation-modal-open {
  overflow: hidden;
}

/* =========================================================
   DESKTOP / TABLET
   ========================================================= */

@media (min-width: 750px) {
  /*
   * Medium desktop / laptop screens.
   *
   * Gives the content a little more room while keeping
   * the background proportions unchanged.
   */
  .creation-modal__content {
    left: 8%;
    right: 8%;

    top: 16%;
    bottom: 12%;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    column-gap: 4%;

    padding: 15px 25px;
  }

  .creation-modal__copy {
    min-width: 0;
    min-height: 0;

    max-width: 100%;
    max-height: 100%;

    padding: 0 2%;

    overflow: hidden;
  }

  /*
   * Desktop title.
   *
   * The important part is:
   * max-width: 100%
   * min-width: 0
   * break-word
   */
  .creation-modal__copy h3 {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    font-size: clamp(20px, 2.35vw, 36px);

    line-height: 1.12;

    letter-spacing: clamp(2px, 0.34vw, 6px);

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;

    box-sizing: border-box;
  }

  .creation-modal__meta {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    font-size: clamp(11px, 1.25vw, 18px);

    line-height: 1.35;

    letter-spacing: clamp(1px, 0.3vw, 5px);
  }

  .creation-modal__desc {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    font-size: clamp(8px, 0.8vw, 18px);

    line-height: 1.9;

    letter-spacing: clamp(0.7px, 0.11vw, 1.8px);
  }

  .creation-modal__fghtde {
    max-width: 100%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 749px) {

  .discover-product-image__fade,.discover-product--reverse .discover-product-image__fade{
    display:none;
  }
  /*
   * The modal itself can scroll if the device viewport
   * is extremely short.
   */
  .creation-modal {
    padding: 15px;

    align-items: center;
    justify-content: center;

    overflow: auto;
  }

  /*
   * MOBILE CARD
   *
   * IMPORTANT:
   * Do NOT use aspect-ratio: 599/450 here.
   *
   * The mobile Figma composition is vertically oriented,
   * so the card needs an explicit usable height.
   */
  .creation-modal__card {
    position: relative;

    width: min(92vw);

    /*
     * This is the key fix for your mobile problem.
     */
    height: min(92vh);

    min-height: 520px;

    max-height: calc(100vh - 30px);

    aspect-ratio: auto;

    flex: 0 0 auto;

    background-image: var(--modal-bg-mobile, var(--modal-bg-desktop));

    background-repeat: no-repeat;

    background-position: center center;

    /*
     * Stretch the supplied Figma background exactly
     * over the modal card.
     */
    background-size: 100% 100%;

    box-sizing: border-box;

    overflow: hidden;
  }

  /* -------------------------------------------------------
     MOBILE CONTENT
     ------------------------------------------------------- */

  .creation-modal__content {
    position: absolute;

    /*
     * Safe area based on the Figma background.
     */
    left: 8%;
    right: 8%;

    top: 8%;
    bottom: 7%;

    width: auto;
    height: auto;

    display: flex;

    flex-direction: column;

    padding: 0;

    gap: 0;

    box-sizing: border-box;

    /*
     * Do NOT hide the entire content.
     */
    overflow: visible;

    min-width: 0;
    min-height: 0;
  }

  /* -------------------------------------------------------
     MOBILE PHOTO
     ------------------------------------------------------- */

  .creation-modal__photo {
    width: 100%;
    height: 100%;

    min-height: 0;

    flex: 0 0 50%;

    overflow: hidden;

    display: flex;

    align-items: stretch;
    justify-content: stretch;

    box-sizing: border-box;
  }

  .creation-modal__photo img {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: cover;
    object-position: center;

    flex: 0 0 auto;

    margin: 0;
    padding: 40px 10px 0;

    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* -------------------------------------------------------
     MOBILE COPY
     ------------------------------------------------------- */

  .creation-modal__copy {
    width: 100%;
    height: 50%;

    min-width: 0;
    min-height: 0;

    max-width: 100%;
    max-height: 100%;

    display: flex;

    flex-direction: column;

    /*
     * Start at the top of the copy area.
     * This is important because the Figma design
     * has title -> rule -> meta -> description -> signature.
     */
    justify-content: flex-start;

    align-items: center;

    padding: 6% 4% 0;

    box-sizing: border-box;

    overflow: hidden;

    text-align: center;
  }

  /* -------------------------------------------------------
     MOBILE TITLE
     ------------------------------------------------------- */

  .creation-modal__copy h3 {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0 0 5px;
    padding: 0;

    box-sizing: border-box;

    font-size: clamp(17px, 5vw, 21px);

    line-height: 1.05;

    letter-spacing: 0.09em;

    text-align: center;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;

    flex-shrink: 1;
  }

  /* -------------------------------------------------------
     MOBILE RULE
     ------------------------------------------------------- */

  .creation-modal__rule {
    width: 100%;

    margin: 2px 0 7px;

    flex: 0 0 auto;

    text-align: center;
  }

  .creation-modal__rule svg {
    display: inline-block;

    width: auto;
    max-width: 100%;

    height: auto;
  }

  /* -------------------------------------------------------
     MOBILE META
     ------------------------------------------------------- */

  .creation-modal__meta {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0 0 7px;
    padding: 0;

    box-sizing: border-box;

    font-size: clamp(20px, 2.2vw, 9px);

    line-height: 1.35;

    letter-spacing: 0.1em;

    text-align: center;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;

    flex-shrink: 1;
  }

  /* -------------------------------------------------------
     MOBILE DESCRIPTION
     ------------------------------------------------------- */

  .creation-modal__desc {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0 0 8px;
    padding: 0;

    box-sizing: border-box;

    font-size: clamp(12px, 2vw, 8px);

    line-height: 1.45;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    text-align: left;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;

    flex-shrink: 1;
  }

  /* -------------------------------------------------------
     MOBILE STORYTELLER
     ------------------------------------------------------- */

  .creation-modal__fghtde {
    width: 100%;
    max-width: 100%;
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  /* -------------------------------------------------------
     MOBILE SEAL
     ------------------------------------------------------- */

  .creation-modal__seal {
    width: 60px;
    height: 60px;

    flex: 0 0 30px;

    display: flex;

    align-items: center;
    justify-content: center;
  }

  .creation-modal__seal img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
  }

  /* -------------------------------------------------------
     MOBILE CLOSE
     ------------------------------------------------------- */

  .creation-modal__close {
    top: 0px;
    right: 0;

    width: 28px;
    height: 28px;

    font-size: 18px;
  }
}

/* =========================================================
   VERY SMALL MOBILE WIDTH
   ========================================================= */

@media (max-width: 380px) {
  .creation-modal {
    padding: 10px;
  }

  .creation-modal__card {
    width: min(94vw, 350px);

    /*
     * Slightly smaller height on narrow phones.
     */
    /* height: min(90vh, 650px); */

    min-height: 500px;

    max-height: calc(100vh - 20px);
  }

  .creation-modal__content {
    left: 7%;
    right: 7%;

    top: 7%;
    bottom: 6%;
  }

  .creation-modal__copy {
    padding-left: 3%;
    padding-right: 3%;
  }

  .creation-modal__copy h3 {
    font-size: clamp(15px, 4.8vw, 19px);

    letter-spacing: 0.075em;
  }

  .creation-modal__meta {
    /* font-size: 6.5px; */
  }

  .creation-modal__desc {
    font-size: 12px;

    line-height: 1.4;

    letter-spacing: 0.06em;
  }

  .creation-modal__seal {
    /* width: 27px;
    height: 27px; */

    flex-basis: 27px;
  }
}

/* =========================================================
   SHORT MOBILE SCREENS
   ========================================================= */

@media (max-width: 749px) and (max-height: 650px) {
  .creation-modal__card {
    /*
     * Let the modal use almost all available height.
     */
    height: calc(100vh - 24px);

    max-height: calc(100vh - 24px);

    min-height: 0;
  }

  .creation-modal__content {
    top: 6%;
    bottom: 5%;
    padding: 20px;
    margin-top: 20px;
  }

  .creation-modal__photo {
    height: 100%;
    flex-basis: 30%;
  }

  .creation-modal__copy {
    height: 100%;

    padding-top: 4%;
  }

  .creation-modal__copy h3 {
    font-size: 20px;

    line-height: 1.05;
  }

  .creation-modal__meta {
    font-size: 16px;

    margin-bottom: 5px;
  }

  .creation-modal__desc {
    font-size: 12px;

    line-height: 1.3;

    margin-bottom: 5px;
  }

  .creation-modal__seal {
    width: 25px;
    height: 25px;

    flex-basis: 25px;
  }

  .creation-modal__signature {
    font-size: 22px;
  }
}

/* =========================================================
   VERY SHORT MOBILE SCREENS
   ========================================================= */

@media (max-width: 749px) and (max-height: 520px) {
  .creation-modal {
    padding: 8px;
  }

  .creation-modal__card {
    width: min(92vw, 330px);

    height: calc(100vh - 16px);

    max-height: calc(100vh - 16px);

    min-height: 0;
  }

  .creation-modal__content {
    top: 5%;
    bottom: 4%;

    left: 7%;
    right: 7%;
  }

  .creation-modal__photo {
    height: 31%;
    flex-basis: 31%;
  }

  .creation-modal__copy {
    height: 69%;

    padding-top: 3%;
  }

  .creation-modal__copy h3 {
    font-size: 13px;

    line-height: 1.05;

    letter-spacing: 0.065em;

    margin-bottom: 3px;
  }

  .creation-modal__rule {
    margin: 1px 0 4px;
  }

  .creation-modal__meta {
    font-size: 5.5px;

    line-height: 1.25;

    margin-bottom: 4px;
  }

  .creation-modal__desc {
    font-size: 12px;

    line-height: 1.25;

    margin-bottom: 4px;
  }

  .creation-modal__signature {
    font-size: 12px;
  }

  .creation-modal__seal {
    width: 23px;
    height: 23px;

    flex-basis: 23px;
  }

  .creation-modal__close {
    top: -30px;

    width: 26px;
    height: 26px;

    font-size: 16px;
  }
}

/* =========================================================
   Storyteller
   ========================================================= */
.storyteller {
  display: flex;
  flex-direction: column;
  background: #f5e7d7;
  margin: 0 auto;
  overflow-x: hidden;
}

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

.storyteller img {
  max-width: 100%;
  height: auto;
}

/* ---------- HERO (full-bleed bg image) ---------- */
.storyteller__hero {
  position: relative;
  min-height: 100svh;
  background-color: #141a2e;
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.storyteller__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 14, 26, 0.88) 0%,
    rgba(10, 14, 26, 0.62) 42%,
    rgba(10, 14, 26, 0.15) 75%
  );
}

.storyteller__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 636px;
  padding: 100px 70px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0;
  color: #f4ede1;
}

.storyteller__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 66px;
  letter-spacing: 12px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #c9a15e;
}

.storyteller__lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  max-width: 300px;
  color: #b79d7c;
}

/* ---------- STORY / CONTENT ---------- */
.storyteller__content {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
  background: #f5e7d7;
  padding: 90px 70px;
  max-width: 1200px;
  margin: 0 auto;
}

.storyteller__content-media {
  position: relative;
  overflow: visible;
  border-radius: 2px;
  aspect-ratio: 602 / 792;
}

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

.storyteller__media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: linear-gradient(135deg, #e7ddc9, #cdbfa0);
}

.storyteller__content-text {
  display: flex;
  align-items: center;
  height: 100%;
}

.storyteller__content-text-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-ink);
}

.storyteller__content-text-inner > p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 2px;
  vertical-align: baseline;
  text-transform: lowercase;
  margin: 0;
  color:#000;
}

.storyteller__content-text-inner > p::first-letter {
  color: #b79d7c;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 0.6;
  letter-spacing: 2px;
  vertical-align: baseline;
  text-transform: uppercase;
}

.storyteller__sign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
}

.storyteller__signature {
  position: relative;
  display: inline-block;
  font-family: var(--font-signature);
  font-weight: 400;
  font-size: 64px;
  line-height: 0;
  letter-spacing: 2px;
  text-align: center;
  color: #0a1a2f;
  transform: rotate(-10deg);
}

.storyteller__signature::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 6%;
  top:40px;
  bottom: -30px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M2 6 C 60 26, 130 26, 198 2' stroke='%230A1A2F' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  transform: rotate(180deg);
}

.storyteller__founder {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #000;
}

.storyteller__seal {
  width: 122px;
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.storyteller__seal-fallback {
  font-family: var(--font-script);
  color: var(--color-gold, #cba25c);
  font-size: 24px;
}

@media (max-width: 900px) {
  .storyteller__hero {
    min-height: 100vh;
    padding: 100px 0 0;
    background-image: var(--bg-mobile, var(--bg-desktop));
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .storyteller__hero-overlay {
    background: none;
  }

  .storyteller__hero-inner {
    padding: 0;
    max-width: 100%;
    width: 385px;
    top: 70px;
  }

  .storyteller__content {
    grid-template-columns: 1fr;
    padding: 60px 24px;
    gap: 32px;
  }

  .storyteller__content-media {
    aspect-ratio: 320/430;
  }

  .storyteller__content-text {
    height: auto;
  }

  .storyteller__seal {
    width: 80px;
    height: 80px;
  }

  .storyteller__title {
    font-size: 36px;
    line-height: 50px;
    letter-spacing: 12px;
  }

  .storyteller__lede {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0px;
    /* max-width: 200px; */
    text-align: center;
    margin: 0;
  }
}

/* ---------- LETTER FORM ---------- */

.storyteller__letter-wrap {
  position: relative;
  max-width:1440px;
  width: 100%;
  padding: clamp(60px, 10vw, 150px) clamp(20px, 5vw, 100px);
  background-color: #f5e7d7;
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin:auto;
}

.letter-card__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: center;
  gap: clamp(24px, 6vw, 80px);
}

.letter-card__form {
  width: 100%;
  max-width: 560px;
  min-width: 0;
}

.letter-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- FORM TITLE ---------- */

.letter-form__title {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto clamp(35px, 5vw, 60px);

  text-align: center;
  letter-spacing: clamp(2px, 0.5vw, 4px);
  text-transform: uppercase;

  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.4;
  color: #7d6541;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
}

.letter-form__title .flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #7d6541;
}

.letter-form__title .flourish svg {
  display: block;
  width: auto;
  height: 20px;
}

.letter-form__title .flourish--right {
  display: flex;
  align-items: center;
}

/* ---------- FORM FIELDS ---------- */

.letter-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.letter-form__field label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 500;
  color: #5c5448;
}

.letter-form__field input,
.letter-form__field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #c9a15e;
  border-radius: 2px;
  background: #ffefd9;
  padding: 13px 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: #3a2f1f;
}

.letter-form__field input {
  min-height: 48px;
}

.letter-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

.letter-form__field input::placeholder,
.letter-form__field textarea::placeholder {
  font-style: italic;
  color: rgba(58, 47, 31, 0.5);
}

.letter-form__field input:focus,
.letter-form__field textarea:focus {
  outline: none;
  border-color: #8a6d3b;
  background: rgba(255, 252, 245, 0.6);
}

/* ---------- SUBMIT BUTTON ---------- */

.letter-form__submit {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 16px 20px;

  background: #7d6541;
  color: #f4ede1;

  border: none;

  letter-spacing: 3px;
  text-transform: uppercase;

  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.letter-form__submit:hover {
  background: #443a24;
}

/* ---------- ERROR ---------- */

.letter-form__error {
  color: #b23b3b;
  font-size: 12px;
}

/* ---------- IMAGE ---------- */

.letter-card__media {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.letter-card__media img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  object-fit: contain;
}

/* ---------- VISUALLY HIDDEN ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* ---------- TABLET ---------- */

@media (max-width: 900px) {
  .storyteller__letter-wrap {
    padding: 70px 32px;
  }

  .letter-form__title {
    margin-bottom: 40px;
  }

  .letter-card__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 45px;
    max-width: 580px;
  }

  .letter-card__form {
    max-width: 100%;
    order: 1;
  }

  .letter-card__media {
    order: 2;
  }

  .letter-card__media img {
    max-width: 520px;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 600px) {
  .storyteller__letter-wrap {
    background-image: var(--bg-mobile, var(--bg-desktop));
    padding: 100px 20px 0px;
    background-size: cover;
  }

  .letter-card__inner {
    display: flex;
    flex-direction: column-reverse;
    max-width: 100%;
    gap: 32px;
  }

  .letter-form__title {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 2px;
    gap: 6px;
    padding: 0 6px;
    max-width: 320px;
  }

  .letter-card__form {
    padding: 0 4px;
  }

  .letter-card__inner {
    gap: 16px;
    padding: 0 40px 32px;
    margin-bottom:45px;
  }

  .letter-form {
    gap: 16px;
  }

  .letter-form__field input,
  .letter-form__field textarea {
    padding: 12px;
    font-size: 16px;
  }

  .letter-form__field textarea {
    min-height: 110px;
  }

  .letter-form__submit {
    min-height: 50px;
    padding: 15px 16px;
  }

  .letter-card__media img {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ---------- SMALL MOBILE ---------- */

@media (max-width: 400px) {
  .storyteller__letter-wrap {
    padding: 80px 12px 32px;
  }

  .letter-form__title {
    font-size: 15px;
    letter-spacing: 1.2px;
    max-width: 280px;
  }

  .letter-card__inner {
    gap: 28px;
  }
}

/* ---------- Thank-you modal ---------- */
.storyteller-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.storyteller-modal.is-open {
  display: flex;
}

.storyteller-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 26, 0.55);
}

.storyteller-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 1536 / 1024;
  background-color: #e8d8bd;
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  box-shadow: 0 40px 80px -20px rgba(10, 14, 26, 0.55);
  animation: storyteller-modal-in 0.25s ease-out;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

@keyframes storyteller-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Text sits in the empty right-hand portion of the artwork */
.storyteller-modal__content {
  width: 50%;
  margin-left: 60%;
  padding-right: 10%;
  text-align: center;
  box-sizing: border-box;
}

.storyteller-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7d6541;
  margin: 0 0 16px;
  text-align: center;
  text-transform: uppercase;
}

.storyteller-modal__subtext {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.7;
  letter-spacing: 2.5px;
  color: #7d6541;
  margin: 0 0 28px;
  text-align: center;
  text-transform: uppercase;
}

.storyteller-modal__cta {
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  background: #7d6541;
  border: none;
  padding: 14px 26px;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.storyteller-modal__cta:hover {
  background: #443a24;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .storyteller-modal__box {
    background-image: var(--bg-mobile, var(--bg-desktop));
    aspect-ratio: auto;
    min-height: 555px;
    background-position: left center;
  }

  .storyteller-modal__content {
    width: 100%;
    margin-left: 0;
    padding: 0 24px;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 32px;
    margin-top: auto;
  }

  .storyteller-modal__title {
    line-height: 38px;
    letter-spacing: 5px;
  }

  .storyteller-modal__subtext {
    margin: 0 0 16px;
  }
}

/* =========================================================
   Coming soon (Il Mondo)
   ========================================================= */
.coming-soon {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: bottom center;
  padding: 0 8vw;
}

.coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 20, 38, 0.55) 0%,
    rgba(6, 20, 38, 0.15) 55%,
    transparent 75%
  );
  pointer-events: none;
}

.coming-soon__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  top: 50px;
  max-width: 399px;
  text-align: left;
}

.coming-soon__eyebrow {
  color: #b79d7c;
  font-family: Jost;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: 6px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
}

.coming-soon__title {
  font-family: Cormorant Garamond;
  color: #c9a15e;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 500;
}

.coming-soon__divider {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.3em;
  opacity: 0.75;
}

.coming-soon__desc {
  color: #b79d7c;
  font-family: Cormorant Garamond;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  margin: 16px 0;
  max-width: 268px;
}

.coming-soon__tag {
  color: #b79d7c;
  letter-spacing: 6px;
  font-size: 12px;
  text-transform: uppercase;
}

/* -------------------- Mobile -------------------- */
@media (max-width: 749px) {
  .coming-soon {
    /* color: #1a2235; */
    background-image: var(--bg-mobile);
    justify-content: flex-start;
    text-align: left;
    padding: 0 24px;
  }

  .coming-soon::after {
    /* background: linear-gradient(
      180deg,
      rgba(6, 20, 38, 0.15) 0%,
      rgba(6, 20, 38, 0.55) 80%
    ); */
  }

  .coming-soon__divider svg path {
    /* fill: #1a2235; */
  }

  .coming-soon__eyebrow,
  .coming-soon__tag {
    /* color: #1a2235; */
  }

  .coming-soon__content {
    /* color: #1a2235; */
    align-items: center;
    text-align: center;
    max-width: 200px;
  }

  .coming-soon__divider {
    /* color: #1a2235; */
  }

  .coming-soon__title {
    /* color: #1a2235; */
    font-weight: 500;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 12px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
  }

  .coming-soon__desc {
    /* color: #1a2235; */
    font-family: Cormorant Garamond;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    max-width: 200px;
  }
}

.site-footer {
  background: var(--color-cream);
  border-top:1px solid #eee;
}

.site-footer {
  background: var(--color-cream);
}

/* ===========================================================
   DESKTOP FOOTER — hidden below 750px
=========================================================== */
.footer-mobile {
  display: none;
}

.footer-desktop {
  display: block;
  padding-top: 40px;
}

.footer-desktop__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 150px;
  padding: 0 60px;
  align-items: start;
}

.footer-desktop__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.footer-desktop__col--center {
  align-items: center;
  gap: 24px;
}
.footer-desktop__col--links {
  align-items: flex-end;
  text-align: right;
  gap: 16px;
}

.footer-desktop__eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-brown);
  font-size: 24px;
  margin: 0;
}
.footer-desktop__sub {
  font-family: var(--font-display);
  color: var(--color-brown-70);
  font-size: 20px;
  margin: 0;
}

.footer-desktop__mark {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  background: var(--color-navy-3);
  border: 1px solid rgba(184, 151, 90, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
}
.footer-desktop__mark span {
  border: 1px solid var(--color-gold-light);
  border-radius: 9999px;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mark);
  color: var(--color-gold-light);
  font-size: 10px;
  letter-spacing: 1px;
}

.footer-desktop__links-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-brown);
  font-size: 16px;
}
.footer-desktop__links-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.footer-desktop__links-list a {
  font-family: var(--font-display);
  color: var(--color-brown);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-desktop__bottom {
  border-top: 1px solid rgba(156, 117, 74, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 60px;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}
.footer-desktop__social {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-desktop__social a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
}
.footer-desktop__social svg {
  width: 16px;
  height: 16px;
}
.footer-desktop__copy {
  font-size: 12px;
  letter-spacing: 2.7px;
  text-transform: uppercase;
}

/* Shared newsletter component */
.newsletter {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.newsletter__label {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-navy-3);
}
.newsletter__form {
  border: 1px solid rgba(26, 34, 53, 0.5);
  padding: 12px 18px;
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
  max-width: 384px;
}
.newsletter__form input {
  border: none;
  background: none;
  flex: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b7280;
}
.newsletter__form input:focus {
  outline: none;
}
.newsletter__form button svg {
  width: 16px;
  height: 16px;
  color: var(--color-navy-3);
}

/* ===========================================================
   MOBILE FOOTER — hidden at 750px and above
=========================================================== */
@media (max-width: 749px) {
  .footer-desktop {
    display: none;
  }

  .footer-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px 0;
  }

  .footer-mobile__mark {
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    background: var(--color-navy-3);
    border: 1px solid rgba(184, 151, 90, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
  }
  .footer-mobile__mark span {
    border: 1px solid var(--color-gold-light);
    border-radius: 9999px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mark);
    color: var(--color-gold-light);
    font-size: 10px;
    letter-spacing: 1px;
  }

  .footer-mobile__heading {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-brown);
    font-size: 26px;
    margin-bottom: 10px;
  }
  .footer-mobile__sub {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-brown-70);
    font-size: 15px;
    max-width: 280px;
    margin-bottom: 24px;
  }

  .footer-mobile__newsletter-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-navy-3);
    margin-bottom: 12px;
    font-weight: 600;
  }
  .footer-mobile .newsletter {
    margin-bottom: 32px;
    padding: 0 40px;
  }

  /* Explore + Social — side by side, two columns */
  .footer-mobile__cols {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    margin-bottom: 28px;
    margin-top: 30px;
  }

  .footer-mobile__links {
    display: flex;
    flex-direction: column;
    gap: 0px;
  }
  .footer-mobile__links-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-brown);
    font-size: 14px;
    line-height: 0;
    padding-bottom: 10px;
  }
  .footer-mobile__links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .footer-mobile__links-list a {
    font-family: var(--font-display);
    color: var(--color-brown);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .footer-mobile__social {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-mobile__social a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: underline;
    white-space: nowrap;
  }
  .footer-mobile__social svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .footer-mobile__copy {
    width: 100%;
    border-top: 1px solid rgba(156, 117, 74, 0.3);
    padding: 20px 0 24px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
}

/* =========================================================
   Minimal storefront templates (product / collection / cart / 404)
   ========================================================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.section-padding {
  padding: 150px 40px 60px;
}

.product {
  display: flex;
  gap: 60px;
  padding: 80px 60px;
  flex-wrap: wrap;
}

.product__media {
  flex: 1 1 420px;
}

.product__media img {
  width: 100%;
}

.product__info {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product__title {
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.product__price {
  font-size: 22px;
  font-family: Georgia, serif;
  color: var(--color-brown);
}

.product__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product__form select {
  border: 1px solid var(--color-brown);
  background: transparent;
  padding: 10px 14px;
  font-size: 14px;
}

.product__description {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-ink);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px;
  padding: 60px;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-card__media {
  background: var(--color-sand);
  aspect-ratio: 1;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
}

.product-card__price {
  font-size: 14px;
  color: var(--color-brown);
}

.cart {
  padding: 150px 60px 80px;
  max-width: 900px;
  margin: 0 auto;
}

.cart__title {
  font-size: 32px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 32px;
  display:none;
}

.cart-line {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(125, 101, 65, 0.2);
}

.cart-line__media {
  width: 100px;
  height: 100%;
  background: var(--color-sand);
  overflow: hidden;
  flex-shrink: 0;
}

.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-line__info p{
  margin:0;
}

.cart-line__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cart__totals {
  display: flex;
  justify-content: space-between;
  padding: 24px 0;
  font-size: 18px;
}

.cart__empty {
  padding: 80px 60px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-brown);
}

.error-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 60px;
}

.error-404__code {
  font-size: 80px;
  letter-spacing: 8px;
  color: var(--color-gold-deep);
}

/* =========================================================
   Fragrance page
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Tangerine:wght@400;700&display=swap");

.fragrance-page {
  width: 100%;
  background: #e6d7bd;
  color: #24201b;
}

.fragrance-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.fragrance-hero img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

.fragrance-hero-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 574px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fragrance-hero-content .fragrance-hero-top-image {
  width: 120px;
  height: auto;
}

.fragrance-hero-content .fragrance-hero-bottom-image {
  width: 70px;
  height: auto;
}

.fragrance-hero-content h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 57.6px;
  letter-spacing: 10.8px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #c9a15e;
}

.fragrance-hero-content p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  max-width: 316px;
  color: #d4c6ac;
  font-style: italic;
}

.fragrance-products {
  width: 100%;
}

.fragrance-product {
  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 774px;

  align-items: center;
}

.fragrance-product--reverse {
  grid-template-columns: 1fr 1fr;
}

/* Reverse image */

.fragrance-product--reverse .fragrance-product-image {
  order: 2;
}

/* Reverse content */

.fragrance-product--reverse .fragrance-product-content {
  order: 1;
}

.fragrance-product-image {
  position: relative;
  overflow: hidden;
}

.fragrance-product-image a {
  display: block;

  width: 100%;
  height: 100%;
}

.fragrance-product-image img {
  display: block;

  /* width: 100%;
  height: 100%;*/

  object-fit: contain;

  transition: transform 0.6s ease;
}

.fragrance-product-image:hover img {
  transform: scale(1.025);
}

.fragrance-product-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 70px clamp(30px, 7vw, 110px);

  background: #e6d7bd;
}

.fragrance-product-title {
  margin: 0 0 14px;
  font-family: Cormorant Garamond;
  font-weight: 600;
  font-size: 36px;
  line-height: 45px;
  letter-spacing: 7.2px;
  vertical-align: middle;
  text-transform: uppercase;
  color: #1a2235;
}

.fragrance-product-title-first {
  display: inline-block;
  border-bottom: 1px solid #7d6541;
  padding-bottom: 4px;
}

.fragrance-product-subhead{
  font-family: Cormorant Garamond;
  font-weight: 500;
  font-style: Italic;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0px;
  vertical-align: middle;
  text-transform: lowercase;
  color:#7D6541;
  margin: 0 0 32px;
}
.fragrance-product-subhead::first-letter{
text-transform:uppercase;
}

.fragrance-product-tagline {
  margin: 0 0 30px;

  font-family: "Nothing You Could Do", cursive;

  font-weight: 400;

  font-size: 30px;
  line-height: 38px;
  max-width: 480px;

  letter-spacing: 0;

  vertical-align: middle;
}

.fragrance-product-price {
  display: flex;

  align-items: baseline;

  gap: 9px;

  margin-bottom: 30px;
}

.fragrance-product-price .price {
  font-weight: 600;
  font-family: Baskerville;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: center;
  vertical-align: middle;
  color: #1a2235;
}

.fragrance-product-price .product-size {
  font-weight: 400;
  font-family: "Jost", sans-serif;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: #645947;
}

.fragrance-accordion {
  width: 100%;

  max-width: 480px;

  margin-top: 0;
}

.fragrance-accordion-item {
  border-top: 1px solid #7d6541;
}

.fragrance-accordion-item:last-child {
  border-bottom: 1px solid #7d6541;
}

/* Accordion heading */

.fragrance-accordion-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  color: "#1A2235";
  list-style: none;
  font-family: Cormorant;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 1px;
  vertical-align: middle;
  text-transform: capitalize;
}

/* Remove default arrow */

.fragrance-accordion-item summary::-webkit-details-marker {
  display: none;
}

.fragrance-accordion-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  transition: transform 0.25s ease;
}

.fragrance-accordion-icon svg,
.fragrance-accordion-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Rotate the chevron 180deg when accordion is open */
.fragrance-accordion-item[open] .fragrance-accordion-icon {
  transform: rotate(180deg);
}

.fragrance-accordion-content {
  padding: 0 0 15px;

  font-size: 12px;

  line-height: 1.7;

  opacity: 0.72;
}

.fragrance-accordion-content p {
  font-family: Cormorant;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 1px;
  vertical-align: middle;
  text-transform: capitalize;
  color: #000;
  margin: 0 0 8px;
}

.fragrance-accordion-content p:last-child {
  margin-bottom: 0;
}


.fragrance-add-to-cart-form {
  width: 100%;

  max-width: 480px;
}

.fragrance-product-button {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  margin-top: 25px;

  padding: 13px 24px;

  border: 1px solid #7d6541;

  background: transparent;

  color: #7d6541;

  font-family: Jost;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2px;

  text-transform: none;

  cursor: pointer;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.fragrance-product-button:hover {
  background: #24201b;

  color: #eee4ce;
}

.fragrance-sold-out-label {
  margin: 25px 0 0;
  font-family: Cormorant Garamond;
  font-weight: 700;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: 7.2px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #7d6541;
}

@media screen and (max-width: 749px) {
  /* Hero */

  .fragrance-hero-content h1 {
    font-size: 34px;
  }

  .fragrance-hero-content p {
    font-size: 13px;
  }

  /* Product */

  .fragrance-product,
  .fragrance-product--reverse {
    display: flex;

    flex-direction: column;

    min-height: auto;
  }

  /* Product image */

  .fragrance-product-image,
  .fragrance-product--reverse .fragrance-product-image {
    order: 1;

    width: 100%;

    height: auto;
  }

  .fragrance-product-image img {
    width: 100%;

    height: auto;

    object-fit: contain;
  }

  /* Product content */

  .fragrance-product-content,
  .fragrance-product--reverse .fragrance-product-content {
    order: 2;

    padding: 45px 40px 50px;
    width: 100%;
  }

  /* Product number */

  .fragrance-product-number {
    margin-bottom: 14px;

    font-size: 9px;
  }

  /* Product title */

  .fragrance-product-title {
    font-size: 30px;

    margin-bottom: 12px;
  }

  /* Tagline */

  .fragrance-product-tagline {
    margin-bottom: 15px;
    line-height: 26px;
    font-size: 21px;
  }

  /* Price */

  .fragrance-product-price {
    margin-bottom: 25px;
  }

  /* Accordion */

  .fragrance-accordion {
    max-width: 100%;
  }

  /* Button */

  .fragrance-add-to-cart-form {
    max-width: 100%;
  }

  .fragrance-product-button {
    margin-top: 25px;
  }

  .fragrance-sold-out-label {
    font-size: 24px;
  }

  .fragrance-product-subhead{
    margin: 0 0 20px;
    line-height: 24px;
  }
}

@media screen and (max-width: 480px) {
  .fragrance-product-content {
    padding: 40px 40px 45px;
  }

  .fragrance-product-title {
    font-size: 28px;
  }

  .fragrance-product-tagline {
    font-size: 19px;
  }

  .fragrance-product-price .price {
    font-size: 16px;
  }

  .fragrance-product-price .product-size {
    font-size: 10px;
  }

  .fragrance-sold-out-label {
    font-size: 20px;
  }
}

/* =========================================================
   Fragrance page end
   ========================================================= */

/* =========================================================
   Discover page start
   ========================================================= */

.discover-page {
  width: 100%;
  background: var(--color-cream);
  color: #24201b;
}

.discover-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.discover-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-hero-image--desktop {
  display: block;
}

.discover-hero-image--mobile {
  display: none;
}

.discover-hero-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  max-width: 574px;

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 2;
}

.discover-hero-content h1 {
  margin: 0;
  font-family: var(--font-display);
  color: #1a2235;
  font-family: Cormorant Garamond;
  font-weight: 400;
  font-size: 52px;
  line-height: 57.6px;
  letter-spacing: 10.8px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.discover-hero-content .flourish svg {
  display: block;
  width: auto;
  height: 20px;
}

.discover-hero-content .flourish svg path {
  fill: #1a2235;
}

.discover-hero-content .discover-hero-subheading {
  margin: 10px 0 0;
  font-family: Jost;
  font-weight: 500;
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: 6px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #1a2235;
}

/* Hero content / description */

.discover-hero-content .discover-hero-text {
  margin-top: 15px;
  font-family: Cormorant Garamond;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  max-width: 484px;
  color: #1a2235;
}

.discover-hero-content .discover-hero-text p {
  margin: 0;
  font-style: italic;
}

.discover-prdct-head {
  padding: 80px 0 40px;
}

.discover_story__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 7px;
  text-align: center;
  text-transform: uppercase;
  color: #7d6541;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin: 0 0 32px;
}

.discover_story__heading .flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #c9a24a;
}

.discover_story__heading .flourish svg {
  display: block;
  width: auto;
  height: 20px;
}

.discover_story__heading .flourish--right {
  display: flex;
  align-items: center;
}

.discover-products {
  width: 100%;
  padding: 0 60px;
}

.discover-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 533px;
  align-items: stretch;
  padding: 40px 0;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      rgba(212, 198, 172, 0.1) 0%,
      rgba(212, 198, 172, 0.8) 50%,
      rgba(212, 198, 172, 0.1) 100%
    )
    1;
  border-image-slice: 1;
}

.discover-product--reverse {
  grid-template-columns: 1fr 1fr;
}

/* Reverse image */

.discover-product--reverse .discover-product-image {
  order: 2;
}

/* Reverse content */

.discover-product--reverse .discover-product-content {
  order: 1;
  padding-right: clamp(30px, 7vw, 110px);
  padding-left: 0;
}

.discover-product-image {
  position: relative;
  overflow: hidden;
}

.discover-product-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.discover-product-image img {
  display: block;
  width: 100%;
  height: 533px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.discover-product-image:hover img {
  transform: scale(1.025);
}

.discover-product-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 70px clamp(30px, 7vw, 110px);
  padding-right: 0;

  background: linear-gradient(
    270.02deg,
    rgba(245, 231, 215, 0) 55.64%,
    rgba(245, 231, 215, 0.7) 62.78%,
    #f5e7d7 99.98%
  );
}

.discover-product-title {
  margin: 0 0 14px;

  font-family: Cormorant Garamond;
  font-weight: 600;
  font-size: 36px;
  line-height: 45px;
  letter-spacing: 7.2px;
  vertical-align: middle;
  text-transform: uppercase;
  color: #1a2235;
}

.discover-product-subhead{
  font-family: Cormorant Garamond;
  font-weight: 500;
  font-style: Italic;
  font-size: 24px;
  leading-trim: NONE;
  line-height: 34px;
  letter-spacing: 2px;
  vertical-align: middle;
  text-transform: capitalize;
  margin-top: 0;
}

.discover-product-tagline{
  font-family: Cormorant Garamond;
  font-weight: 500;
  font-style: Italic;
  font-size: 24px;
  leading-trim: NONE;
  line-height: 30px;
  letter-spacing: 0px;
  vertical-align: middle;

}

.discover-product-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.discover-product-price .price {
  font-weight: 600;
  font-family: Baskerville;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: center;
  vertical-align: middle;
  color: #1a2235;
}

.discover-product-price .product-size {
  font-weight: 400;
  font-family: "Jost", sans-serif;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: #645947;
}

.discover-accordion {
  width: 100%;
  max-width: 480px;
  margin-top: 0;
}

.discover-accordion-item {
  border-top: 1px solid #7d6541;
}

.discover-accordion-item:last-child {
  border-bottom: 1px solid #7d6541;
}

/* Accordion heading */

.discover-accordion-item summary {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 0;

  cursor: pointer;

  font-family: Cormorant;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 1px;
  vertical-align: middle;
  text-transform: capitalize;

  color: "#1A2235";
  list-style: none;
}

/* Remove default arrow */

.discover-accordion-item summary::-webkit-details-marker {
  display: none;
}

.discover-accordion-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  transition: transform 0.25s ease;
}

.discover-accordion-icon svg,
.discover-accordion-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Rotate the chevron 180deg when accordion is open */
.discover-accordion-item[open] .discover-accordion-icon {
  transform: rotate(180deg);
}

.discover-accordion-content {
  padding: 0 0 15px;

  font-size: 12px;

  line-height: 1.7;

  opacity: 0.72;
  transform: translateY(-8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    padding 0.4s ease;
}

.discover-accordion-content p {
  font-family: Cormorant;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 1px;
  vertical-align: middle;
  text-transform: capitalize;
  color: #000;
  margin: 0 0 8px;
}

.discover-accordion-content p:last-child {
  margin-bottom: 0;
}

.discover-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.discover-notes-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201, 161, 94, 0.25);

  font-family: 'Cormorant', serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.discover-notes-list li:last-child {
  border-bottom: none;
}

/* gold bullet dot, 6x6 */
.discover-notes-list li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #C9A15E;
}

.discover-accordion-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.discover-accordion-content ul li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 16px 0;

  font-family: Cormorant;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 1px;
  vertical-align: middle;
  text-transform: capitalize;

  color: #000;

  border-bottom: 1px solid rgba(125, 101, 65, 0.35);
}

.discover-accordion-content ul li:last-child {
  border-bottom: none;
}

.discover-accordion-content ul li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a24a;
}

.discover-add-to-cart-form {
  width: 100%;

  max-width: 480px;
}

.discover-product-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 25px;
  padding: 13px 24px;
  border: 1px solid #7d6541;
  background: transparent;
  color: #7d6541;
  font-family: Jost;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: none;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.discover-product-button:hover {
  background: #24201b;

  color: #eee4ce;
}

.discover-sold-out-label {
  margin: 25px 0 0;
  font-family: Cormorant Garamond;
  font-weight: 700;
  font-style:italic;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: 7.2px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #7d6541;
}

@media screen and (max-width: 749px) {
  /* Hero */

  .discover-hero {
    height: 100svh;
    min-height: 600px;
  }

  .discover-hero-image--desktop {
    display: none;
  }

  .discover-hero-image--mobile {
    display: block;
  }

  .discover-hero-content h1 {
    margin: 0;

    font-size: 34px;
    line-height: 42px;

    letter-spacing: 7px;
  }

  .discover-hero-content {
    left: 50%;
    top: 50%;

    width: calc(100% - 40px);
    max-width: 400px;

    transform: translate(-50%, -50%);
  }

  /* Sub heading */

  .discover-hero-content .discover-hero-subheading {
    margin-top: 8px;

    font-size: 18px;
    line-height: 26px;
  }

  /* Content */

  .discover-hero-content .discover-hero-text {
    max-width: 280px;

    margin-top: 12px;

    font-size: 13px;
    line-height: 20px;
  }

  .discover_story__heading {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0px;
    gap: 2px;
    margin: 0;
  }

  /* Product */

  .discover-product,
  .discover-product--reverse {
    display: flex;

    flex-direction: column;

    min-height: auto;
  }

  .discover-prdct-head {
    padding: 20px 20px 0;
  }

  .discover-products {
    padding: 0 40px;
  }

  /* Product image */

  .discover-product-image,
  .discover-product--reverse .discover-product-image {
    order: 1;

    width: 100%;

    height: auto;
  }

  .discover-product-image img {
    width: 100%;

    height: auto;

    object-fit: contain;
  }

  /* Product content */

  .discover-product-content,
  .discover-product--reverse .discover-product-content {
    order: 2;

    padding: 20px;
  }

  /* Product number */

  .discover-product-number {
    margin-bottom: 14px;

    font-size: 9px;
  }

  /* Product title */

  .discover-product-title {
    font-size: 30px;

    margin-bottom: 12px;
  }

  .discover-product-subhead{
    font-size:20px;
    margin-bottom:18px;
  }

  .discover-product-tagline{
    font-size:18px;
  }

  /* Accordion */

  .discover-accordion {
    max-width: 100%;
  }

  /* Button */

  .discover-add-to-cart-form {
    max-width: 100%;
  }

  .discover-product-button {
    margin-top: 25px;
  }

  .discover-sold-out-label {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {
  .discover-hero {
    min-height: 550px;
  }

  .discover-hero-content {
    width: calc(100% - 30px);
  }

  .discover-hero-content h1 {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 5px;
  }

  .discover-hero-content .discover-hero-subheading {
    font-size: 16px;
    line-height: 23px;
  }

  .discover-hero-content .discover-hero-text {
    max-width: 260px;

    font-size: 12px;
    line-height: 18px;
  }

  .discover-product-content,
  .discover-product--reverse .discover-product-content {
    padding: 0;
    padding-top: 20px;
  }

  .discover-product-title {
    font-size: 28px;
  }

  .discover-product-price .price {
    font-size: 16px;
  }

  .discover-product-price .product-size {
    font-size: 10px;
  }

  .discover-sold-out-label {
    font-size: 20px;
  }
}

/* =========================================================
   Discover page end
   ========================================================= */




/* =========================================================
   Other extra Styles - Please write below this
   ========================================================= */


   input{
    outline:none;
   }

   .shopify-challenge__container{
    padding: 150px 0 50px;
   }

   .custom-currency{
    vertical-align: middle;
   }


   .custom-currency svg{
    vertical-align:baseline !important;
   }

   .currency-amount{
    vertical-align:text-bottom;
   }
@media(max-width:600px){
  .currency-amount{
    vertical-align:baseline;
  }
}


/* ==========================================
   CART DRAWER
   ========================================== */

#CartDrawer {
    position: fixed;
    inset: 0;
    z-index: 999999;

    visibility: hidden;
    pointer-events: none;
}

#CartDrawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* Overlay */

#CartDrawer .cart-drawer__overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    transition: opacity 0.3s ease;
}

#CartDrawer.is-open .cart-drawer__overlay {
    opacity: 1;
}

/* ==========================================
   DRAWER PANEL
   ========================================== */

#CartDrawer .cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;

    width: 420px;
    max-width: 100%;

    height: 100vh;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: #E6D7BD;

    overflow: hidden;

    transform: translateX(100%);
    transition: transform 0.3s ease;

    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);

    box-sizing: border-box;
}

#CartDrawer.is-open .cart-drawer__panel {
    transform: translateX(0);
}

/* ==========================================
   HEADER
   ========================================== */

#CartDrawer .cart-drawer__header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px;

    background: #E6D7BD;

    border-bottom: 1px solid rgba(125, 101, 65, 0.2);

    box-sizing: border-box;
}

#CartDrawer .cart-drawer__header h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: 7px;

    text-transform: uppercase;
    color: #7D6541;
}

#CartDrawer .cart-drawer__header button {
    flex-shrink: 0;

    border: 0;
    background: transparent;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}

/* ==========================================
   SCROLLABLE PRODUCT LIST
   ========================================== */

#CartDrawer #CartDrawerItems {
    flex: 1 1 0%;

    min-height: 0;
    height: auto;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 20px;

    box-sizing: border-box;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Individual product */

#CartDrawer .cart-drawer__item {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding-bottom: 20px;
    margin-bottom: 20px;

    border-bottom: 1px solid rgba(125, 101, 65, 0.2);
}

#CartDrawer .cart-drawer__image {
    flex: 0 0 80px;
}

#CartDrawer .cart-drawer__image img {
    display: block;

    width: 80px;
    height: 80px;

    object-fit: cover;
}

#CartDrawer .cart-drawer__info {
    flex: 1 1 auto;
    min-width: 0;
}

#CartDrawer .cart-drawer__info h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

#CartDrawer .cart-item-price {
    margin: 5px 0;
}

/* Quantity */

#CartDrawer .cart-drawer__quantity {
    display: flex;
    align-items: center;

    gap: 12px;
    margin-top: 10px;
}

#CartDrawer .cart-drawer__quantity button {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border: 1px solid #ddd;
    background: #fff;

    cursor: pointer;
}

#CartDrawer .cart-remove {
    display: inline-block;

    margin-top: 8px;

    border: 0;
    background: transparent;

    text-decoration: underline;
    cursor: pointer;
}

/* Empty cart */

#CartDrawer .cart-drawer__empty {
    padding: 25px 10px;
    text-align: center;
}

/* ==========================================
   STICKY FOOTER
   ========================================== */

#CartDrawer .cart-drawer__footer {
    position: relative;

    flex: 0 0 auto;

    display: block;

    padding: 20px;

    background: #E6D7BD;

    border-top: 1px solid rgba(125, 101, 65, 0.25);

    box-sizing: border-box;

    z-index: 2;

    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Subtotal */

#CartDrawer .cart-drawer__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0 0 15px;
}

/* Checkout form */

#CartDrawer .cart-drawer__footer form {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;
}

/* Checkout button */

#CartDrawer .cart-drawer__checkout {
    display: block;

    width: 100%;
    min-height: 48px;

    padding: 15px;

    box-sizing: border-box;

    border: 0;
    border-radius: 0;

    background: #7D6541;
    color: #fff;

    text-align: center;
    text-decoration: none;

    cursor: pointer;
}

/* ==========================================
   MOBILE
   ========================================== */

@media screen and (max-width: 600px) {

    #CartDrawer .cart-drawer__panel {
        width: 100%;
        max-width: 100%;

        height: 100vh;
        height: 100dvh;
    }

    #CartDrawer .cart-drawer__header {
        padding: 16px;
    }

    #CartDrawer .cart-drawer__header h2 {
        font-size: 22px;
        letter-spacing: 5px;
    }

    #CartDrawer #CartDrawerItems {
        flex: 1 1 0%;

        min-height: 0;
        height: auto;

        overflow-y: auto;

        padding: 16px;
    }

    #CartDrawer .cart-drawer__footer {
        flex: 0 0 auto;

        padding: 16px;

        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    #CartDrawer .cart-drawer__item {
        gap: 12px;
    }

    #CartDrawer .cart-drawer__image {
        flex: 0 0 75px;
    }

    #CartDrawer .cart-drawer__image img {
        width: 75px;
        height: 75px;
    }

    #CartDrawer .cart-drawer__checkout {
        min-height: 46px;
        padding: 14px;
    }
}