:root {
  color-scheme: dark;
  --black: #10100f;
  --ivory: #f5ebd9;
  --gold: #c5a46c;
  --border: #8e754e;
  --muted: #b9af9d;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 8%, #171613, var(--black) 68%);
  color: var(--ivory);
  font: 1rem/1.45 'Segoe UI', Arial, sans-serif;
}

button, a { color: inherit; }
a { text-decoration: none; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
[hidden] { display: none !important; }

.catalog, .product { margin: auto; padding-block: clamp(24px, 3.6vw, 56px); }
.catalog { width: min(89%, 1180px); }
.product { width: min(89.6%, 950px); }
.back { display: inline-block; font-size: clamp(.75rem, 1.8vw, 1.2rem); }
.back:hover { text-decoration: underline; text-underline-offset: .25em; }

.brand {
  display: grid;
  justify-items: center;
  gap: .3rem;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
.brand span { font: clamp(2.15rem, 7vw, 5.8rem)/.95 var(--serif); }
.brand b { color: var(--gold); font-weight: normal; }
.brand small { color: var(--gold); font-size: clamp(.53rem, 1.65vw, 1.05rem); letter-spacing: .055em; }

.catalog-header .brand { margin-top: clamp(23px, 3vw, 44px); }
.catalog-header h1 {
  margin: clamp(26px, 4.2vw, 60px) 0 .45em;
  text-align: center;
  font: clamp(1.8rem, 4vw, 3.45rem)/1.1 var(--serif);
}
.count { color: var(--muted); font: .47em 'Segoe UI', sans-serif; white-space: nowrap; }
.filters { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
.filters button { background: none; border: 0; padding: .4em .75em; font-size: clamp(.76rem, 1.75vw, 1.22rem); }
.filters button + button { border-inline-start: 1px solid var(--border); }
.filters button:hover, .filters button[aria-pressed="true"] { color: var(--gold); }
.collection { margin-top: clamp(32px, 5.5vw, 82px); }
.collection h2 {
  margin: 0 0 .65em;
  font: clamp(1.2rem, 3.8vw, 3.2rem)/1.12 var(--serif);
  text-transform: uppercase;
}
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3.1vw, 42px); }
#totes .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
#totes .card { text-align: center; }
.name { display: block; margin-top: .45em; font: clamp(1.12rem, 3.1vw, 2.55rem)/1.14 var(--serif); }
.action { display: block; margin-top: .25em; color: var(--gold); font-size: clamp(.75rem, 2vw, 1.5rem); }
.card:hover .action { text-decoration: underline; text-underline-offset: .2em; }

/* Each frame shows a selected area of the original image at its native aspect ratio. */
.crop {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--w) / var(--h);
  border-radius: 3px;
  background: #211d18;
}
.crop img {
  position: absolute;
  inset-inline-start: calc(-100% * var(--x) / var(--w));
  top: calc(-100% * var(--y) / var(--h));
  width: calc(100% * var(--source-width, 1536) / var(--w));
  max-width: none;
  height: auto;
}

.product-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  margin-bottom: clamp(26px, 6.85vw, 74px);
}
.product-header .back, .product-line { margin-top: clamp(6px, 2.2vw, 28px); }
.product-header .brand > span { font-size: clamp(2rem, 6.9vw, 4.8rem); color: var(--gold); }
.product-header .brand-letter-white { color: #fff; font: inherit; }
.product-header .brand small { font-size: clamp(.48rem, 1.55vw, .88rem); }
.product-line {
  justify-self: end;
  margin-bottom: 0;
  color: var(--gold);
  text-align: right;
  font-size: clamp(.68rem, 1.7vw, 1.1rem);
  line-height: 1.25;
}
.product .crop { border-radius: clamp(3px, .5vw, 7px); }
.secondary-photos { display: grid; grid-template-columns: 662fr 686fr; gap: 2%; margin-top: 2%; }
.product-tote .secondary-photos, .product-specs .secondary-photos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.7%;
}
.product-specs .secondary-photos .crop { aspect-ratio: 2.12; }
.product-specs .secondary-photos .crop img {
  top: calc(-212% * var(--y) / var(--w) + 50% - 106% * var(--h) / var(--w));
}
.product-info {
  margin-top: clamp(26px, 4.6vw, 64px);
}
.product-title { margin-bottom: clamp(24px, 4vw, 57px); }
.product {
  --name-font-size: clamp(3rem, 10vw, 7rem);
}
.product-title h1 {
  margin: 0;
  font: var(--name-font-size)/.98 var(--serif);
}
.price {
  --price-font-size: clamp(1.4rem, 4vw, 3.25rem);
  margin: .25em 0 0;
  color: var(--gold);
  font-size: var(--price-font-size);
  line-height: 1.1;
}
.product-specs .product-title { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.product-specs .price { margin: 0; font-size: calc(var(--price-font-size) + 10px); white-space: nowrap; }
.product-status { margin: -12px 0 14px; color: var(--muted); text-align: right; }
.materials { padding: 7px clamp(15px, 2.6vw, 32px); border: 1px solid var(--border); border-radius: 5px; }
.product-specs .materials { padding-block: 5px; }
.product-weekender { --weekender-name-size: calc(var(--name-font-size) - 15px); }
.product-weekender .product-title h1 { font-size: var(--weekender-name-size); }
.product-weekender .price { font-size: calc(var(--price-font-size) + 25px); }
.product-weekender .materials { padding-block: 15px; }
.product-wide {
  width: min(89.6%, 1180px);
  --header-gap: clamp(26px, 6.85vw, 74px);
  --gallery-rise: 80px;
  --header-minimum-gap: 12px;
  padding-block-start: max(12px, calc(clamp(24px, 3.6vw, 56px) - max(0px, var(--gallery-rise) - var(--header-gap) + var(--header-minimum-gap))));
}
.product-wide .product-header {
  margin-bottom: max(var(--header-minimum-gap), calc(var(--header-gap) - var(--gallery-rise)));
}
.product-wide .product-info {
  --product-info-gap: clamp(24px, 3.4vw, 44px);
  display: grid;
  row-gap: var(--product-info-gap);
  margin-top: clamp(32px, 4.4vw, 60px);
}
.product-wide .product-title { margin-bottom: 0; }
.product-wide .product-photos { container-type: inline-size; }
.product-wide.product-portrait { max-width: 600px; }
.product-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.7%;
}
.product-wide .hero-photo {
  --photo-height: calc(100cqw * var(--h) / var(--w) - var(--photo-trim, 0px));
  --additional-crop: max(0px, calc(var(--photo-height) - var(--photo-max-height)));
  width: 100%;
  height: min(var(--photo-max-height), var(--photo-height));
}
.product-wide .hero-photo img {
  width: 100%;
  top: calc(-100cqw * var(--y) / var(--w) - var(--photo-top-trim, 0px) - var(--additional-crop) / 2);
}
.product-wide .secondary-photos .crop {
  aspect-ratio: 941 / 570;
}
.product-wide .secondary-photos .crop img {
  top: calc(-100% * var(--y) * 941 / (var(--w) * 570));
}
.product-title-inset { padding-inline-end: 30px; }
.product-weekender .price-pending {
  font-size: clamp(.875rem, 2.6vw, 1.5rem);
  text-align: right;
  white-space: normal;
}
.materials h2 {
  margin: 0 0 .6em;
  color: var(--gold);
  font-size: clamp(.84rem, 2.3vw, 1.55rem);
  font-weight: 400;
  text-transform: uppercase;
}
.materials p { margin: .35em 0 0; font-size: clamp(.86rem, 2.25vw, 1.42rem); }
.contact h2 {
  --contact-font-size: clamp(1.25rem, 3.2vw, 2.15rem);
  display: grid;
  min-height: clamp(60px, 8vw, 104px);
  place-items: center;
  margin: 0;
  color: #fff;
  font-size: var(--contact-font-size);
  font-weight: 400;
  text-align: center;
}
.product-wide .contact {
  display: grid;
  row-gap: clamp(16px, 2vw, 26px);
}
.product-wide .product-info-balanced .contact { row-gap: var(--product-info-gap); }
.product-wide .contact h2 {
  min-height: 0;
  font-size: max(18px, calc(min(calc(var(--weekender-name-size) * .9), 7.5vw) - 30px));
  line-height: 1.15;
  white-space: nowrap;
}
.contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3%; }
.contact-actions a {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: .65em;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: clamp(.76rem, 2.45vw, 1.58rem);
  font-weight: 600;
  text-transform: uppercase;
}
.contact-actions .whatsapp { background: var(--gold); color: var(--black); }
.contact-actions a:hover { filter: brightness(1.15); }

@media (max-width: 480px) {
  .filters button { padding: .35em .55em; }
  .product-header { gap: .35rem; }
  .product-wide .product-title-inset { padding-inline-end: clamp(16px, calc(20vw - 48px), 30px); }
}