/* AnnaBay Club — one rum, one page. Every rum page has the same four blocks (the hero with the
   bottle, the rum itself with tasting notes and facts, the medals, the signature serve and where to
   find it) but takes the colours and the mood of its own rum, from the menu bar to the footer.
   The theme is two variables on <body class="rum-theme rum-theme--…">.
   Aged 5YO: black and gold, like a bottle in a dark bar. */

.rum-theme {
  --rum-dark: #151112;
  --rum-mid: #1d1719;
  --rum-accent: var(--gold-bright);
  --rum-dark-rgb: 21, 17, 18;
  --rum-accent-rgb: 245, 200, 90;
  --rum-line: rgba(var(--rum-accent-rgb), 0.28);
  background: var(--rum-dark);
  color: var(--white);
}

/* Amber Rum: golden hour. A gold page with red and white type. */
.rum-theme--amber {
  --rum-dark: #c99200;
  --rum-mid: #b98500;
  --rum-accent: #d50032;
  --rum-dark-rgb: 201, 146, 0;
  --rum-accent-rgb: 213, 0, 50;
  --rum-line: rgba(255, 255, 255, 0.55);
}

.rum-theme--amber .btn--gold {
  --bg: var(--red);
  --tab: var(--red-dark);
  --fg: var(--white);
}

.rum-theme--amber .top__book,
html.menu-open .rum-theme--amber .top__book {
  background: var(--red);
  color: var(--white);
}

.rum-theme.rum-theme--amber .top__logo-white {
  content: url("/assets/img/logo-red-240.webp");
}

.rum-theme--amber .foot__grid > img {
  content: url("/assets/img/logo-white-240.webp");
}

/* The photo stays clean: no golden glow over it, just a hard edge on a wide screen */
.rum-theme--amber .phero::after {
  background: linear-gradient(to top, rgba(40, 20, 0, 0.7) 0%, rgba(40, 20, 0, 0.35) 40%, rgba(40, 20, 0, 0) 74%);
}

@media (min-width: 900px) {
  .rum-theme--amber .phero::after {
    background: none;
  }
}

.rum-theme--amber .top {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.rum-theme--amber .phero__line,
.rum-theme--amber .phero__text,
.rum-theme--amber .prize__sub,
.rum-theme--amber .serve__copy p,
.rum-theme--amber .prize__list span,
.rum-theme--amber .prize__list small,
.rum-theme--amber .notes dd,
.rum-theme--amber .factlist dd {
  color: var(--white);
}

.rum-theme--amber .frame img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 28px 56px rgba(90, 50, 0, 0.45);
}

/* Medals on a red card: gold result, white text */
.rum-theme--amber .prize__list li {
  padding: 28px 20px 26px;
  border-radius: 8px;
  background: var(--red);
  box-shadow: 5px 5px 0 var(--black);
}

.rum-theme--amber .prize__list strong {
  color: var(--gold-bright);
}

.rum-theme--amber .prize__list img {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

/* Small red type needs a deeper red on gold to stay readable */
.rum-theme--amber .rum .kicker,
.rum-theme--amber .notes dt,
.rum-theme--amber .factlist dt,
.rum-theme--amber .subhead,
.rum-theme--amber .find__more a {
  color: #8f0022;
}

.rum-theme--amber .crumb a {
  color: var(--white);
}

.rum-theme--amber .foot__nav a:hover,
.rum-theme--amber .find__more a:hover {
  color: var(--red);
}

/* ---------- The site's own bars, in the rum's colours ---------- */
.rum-theme .top {
  background: var(--rum-dark);
  color: var(--white);
  box-shadow: 0 1px 0 var(--rum-line);
}

.rum-theme .top__book {
  background: var(--rum-accent);
  color: var(--rum-dark);
}

.rum-theme .menu {
  background: var(--rum-dark);
  color: var(--rum-accent);
}

.rum-theme .menu li:nth-child(even) a,
.rum-theme .menu li:nth-child(odd) a:hover {
  -webkit-text-stroke-color: var(--rum-accent);
}

.rum-theme .menu li:nth-child(even) a:hover {
  color: var(--rum-accent);
}

html.menu-open .rum-theme .top,
.rum-theme.menu-open .top {
  background: var(--rum-dark);
  color: var(--rum-accent);
}

html.menu-open .rum-theme .top__logo-white {
  opacity: 1;
}

html.menu-open .rum-theme .top__logo-red {
  opacity: 0;
}

html.menu-open .rum-theme .top__book {
  background: var(--rum-accent);
  color: var(--rum-dark);
}

.rum-theme .foot {
  background: var(--rum-dark);
  color: var(--white);
  border-top: 1px solid var(--rum-line);
}

.rum-theme .foot::before {
  display: none;
}

.rum-theme .foot.torn {
  margin-block: 0;
  -webkit-mask: none;
  mask: none;
}

.rum-theme .foot__grid > img {
  content: url("/assets/img/logo-white-240.webp");
}

.rum-theme .foot__nav a {
  color: var(--white);
}

.rum-theme .foot__nav a:hover {
  color: var(--rum-accent);
}

.rum-theme .foot__social,
.rum-theme .social-link {
  color: var(--white);
  background: transparent;
}

.rum-theme .foot__social .social-link:hover {
  background: var(--white);
  color: var(--rum-dark);
}

.rum-theme .foot a {
  color: inherit;
}

.rum-theme .foot__nav a {
  color: var(--white);
}

/* ---------- Shared bits ---------- */
.rum {
  --ink: var(--rum-accent);
}

.rum .kicker {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rum-accent);
}

.rum .big {
  color: var(--rum-accent);
}

/* A photo in the rum's light: a thin gold line and a deep shadow, no frame */
.frame {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
}

.frame::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--rum-accent-rgb), 0.18), rgba(var(--rum-accent-rgb), 0));
}

.frame--wide {
  width: min(100%, 560px);
}

.frame.frame--wide img {
  aspect-ratio: 3 / 2;
}

.frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--rum-line), 0 28px 56px rgba(0, 0, 0, 0.6);
}

/* ---------- 1. Hero: the bottle photo ----------
   Phone: the photo behind the text. Computer: text on the left, the photo filling the right half. */
.phero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100svh - var(--header-h) - var(--consent-h, 0px)), 780px);
  padding: 72px 0 56px;
  background: var(--rum-dark);
  overflow: hidden;
  isolation: isolate;
}

.phero__bg,
.phero__bg img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(var(--rum-dark-rgb), 0.95) 0%, rgba(var(--rum-dark-rgb), 0.7) 40%, rgba(var(--rum-dark-rgb), 0.05) 74%);
}

.phero__copy {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.phero .big {
  font-size: clamp(72px, 22vw, 168px);
}

.crumb {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.crumb a {
  color: var(--white);
}

.crumb a:hover {
  color: var(--rum-accent);
}

.phero__line {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.1;
  color: var(--white);
}

.phero__text {
  max-width: 34ch;
  font-size: 17px;
}

.phero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 900px) {
  .phero {
    align-items: center;
    padding: 72px 0;
  }
  .phero__bg,
  .phero__bg img {
    left: 50%;
    width: 50%;
  }
  .phero__bg img {
    left: 0;
    width: 100%;
  }
  .phero::after {
    left: 50%;
    background: linear-gradient(to right, var(--rum-dark) 0%, rgba(var(--rum-dark-rgb), 0) 22%);
  }
  .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .phero .big {
    font-size: clamp(110px, 12vw, 190px);
  }
  .phero__text {
    font-size: 19px;
  }
}

/* ---------- 2. The rum: tasting notes and facts ---------- */
.rumdetail {
  padding-block: 88px;
  background: var(--rum-mid);
  border-top: 1px solid var(--rum-line);
}

.rumdetail__inner {
  display: grid;
  gap: 56px;
  align-items: center;
}

.rumdetail__copy {
  display: grid;
  gap: 22px;
}

.rumdetail__copy .big + .notes + .big {
  margin-top: 28px;
}

.notes,
.factlist {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--rum-line);
}

.notes > div,
.factlist > div {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rum-line);
}

.notes dt,
.factlist dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rum-accent);
}

.notes dd,
.factlist dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white);
}

.subhead {
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rum-accent);
}

@media (min-width: 900px) {
  .rumdetail {
    padding-block: 120px;
  }
  .rumdetail__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 96px;
  }
  .notes > div,
  .factlist > div {
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
    gap: 24px;
  }
}

/* ---------- 3. Awards ---------- */
.prize {
  padding-block: 88px;
  background: var(--rum-dark);
  border-top: 1px solid var(--rum-line);
  text-align: center;
}

.prize__inner {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.prize__sub {
  max-width: 40ch;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
}

.prize__list {
  display: grid;
  gap: 44px;
  width: 100%;
  max-width: 760px;
  margin-block: 24px 16px;
}

.prize__list li {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.prize__list img {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}

.prize__list strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 46px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--rum-accent);
}

.prize__list span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}

.prize__list small {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
  .prize {
    padding-block: 112px;
  }
  .prize__list {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* ---------- 4. Signature serve, and where to find it ---------- */
.serve {
  padding-top: 88px;
  background: var(--rum-mid);
  border-top: 1px solid var(--rum-line);
}

.serve__inner {
  display: grid;
  gap: 56px;
  align-items: center;
}

.serve__copy {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.serve__copy p:not(.kicker) {
  max-width: 34ch;
  font-size: 18px;
}

.serve__copy .btn {
  margin-top: 8px;
}

.find {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: 88px;
  padding-block: 56px 72px;
  border-top: 1px solid var(--rum-line);
  text-align: center;
}

.find__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 8vw, 56px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--rum-accent);
}

.find__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.find__more {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.find__more a {
  color: var(--rum-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.find__more a:hover {
  color: var(--white);
}

@media (min-width: 900px) {
  .serve {
    padding-top: 120px;
  }
  .serve__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 96px;
  }
  .serve__copy p:not(.kicker) {
    font-size: 20px;
  }
  .find {
    margin-top: 112px;
    padding-block: 72px 96px;
  }
}

/* The AnnaBay logo in the menu bar and the open menu: gold. The footer stays white. */
.rum-theme .top__logo-white {
  content: url("/assets/img/logo-gold-240.webp");
}

.rum-theme .foot__legal a,
.rum-theme .foot__legal button,
.rum-theme .foot address a {
  color: var(--white);
}

/* ---------- Amber Rum: bands of colour instead of one gold page ----------
   Hero: full photo with white type. Notes: white. Medals: gold. Serve and find: red. */
.rum-theme--amber .phero {
  --ink: var(--white);
}

.rum-theme--amber .phero .big,
.rum-theme--amber .phero .kicker {
  color: var(--white);
}

.rum-theme--amber .phero .kicker {
  color: var(--gold-bright);
}

.rum-theme--amber .crumb a,
.rum-theme--amber .crumb span {
  color: var(--white);
}

.rum-theme--amber .btn--line {
  --fg: var(--white);
}

@media (min-width: 900px) {
  .rum-theme--amber .phero__bg {
    left: 0;
    width: 100%;
  }
  .rum-theme--amber .phero::after {
    left: 0;
    background: linear-gradient(to right, rgba(40, 20, 0, 0.62) 0%, rgba(40, 20, 0, 0.3) 38%, rgba(40, 20, 0, 0) 58%);
  }
  .rum-theme--amber .phero__bg img {
    object-position: 50% 45%;
  }
}

/* Notes and facts on a lighter gold, with black type: strong contrast, still gold */
.rum-theme--amber .rumdetail {
  --ink: var(--black);
  --rum-line: rgba(62, 43, 46, 0.35);
  background: var(--gold-light);
  border-top: 0;
}

.rum-theme--amber .rumdetail .big {
  color: var(--black);
}

.rum-theme--amber .rumdetail .notes dd,
.rum-theme--amber .rumdetail .factlist dd {
  color: var(--black);
}

.rum-theme--amber .rumdetail .notes dt,
.rum-theme--amber .rumdetail .factlist dt {
  color: #8f0022;
}

.rum-theme--amber .rumdetail .frame::before {
  display: none;
}

.rum-theme--amber .rumdetail .frame img {
  box-shadow: 8px 8px 0 var(--black);
}

.rum-theme--amber .prize {
  border-top: 0;
}

/* Serve and find on red */
.rum-theme--amber .serve {
  --ink: var(--white);
  --rum-line: rgba(255, 255, 255, 0.4);
  background: var(--red);
  border-top: 0;
}

.rum-theme--amber .serve .big,
.rum-theme--amber .serve .kicker,
.rum-theme--amber .find__title {
  color: var(--white);
}

.rum-theme--amber .serve .kicker {
  color: var(--gold-bright);
}

.rum-theme--amber .serve .btn--gold,
.rum-theme--amber .find .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: var(--red);
}

.rum-theme--amber .serve .frame::before {
  display: none;
}

.rum-theme--amber .serve .frame img {
  box-shadow: 8px 8px 0 var(--black);
}

.rum-theme--amber .find__more,
.rum-theme--amber .find__more a,
.rum-theme--amber .find__more a:hover {
  color: var(--white);
}

/* Medals: black type on the deep gold band */
.rum-theme--amber .prize {
  --ink: var(--black);
}

.rum-theme--amber .prize .big {
  color: var(--black);
}

.rum-theme--amber .prize__sub {
  color: var(--black);
}

/* ---------- One long engraved drawing behind the whole page ----------
   A single layer from top to bottom, never repeated: it is scaled to cover the page and sits
   between the band colours and the content. The hero covers its own part. White Rum: the beach
   scene. Amber Rum: sugar cane, the distillery and the barrels. */
/* A closing "find it" band without a serve block above it */
.serve--find {
  padding-top: 0;
}

.serve--find .find {
  margin-top: 0;
  border-top: 0;
}


/* ---------- Product page rhythm: every block of text is followed by a photo ---------- */
.band {
  margin: 0;
  background: var(--rum-dark);
}

.band img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
}

@media (min-width: 768px) {
  .band img {
    aspect-ratio: 3 / 2;
    max-width: 1200px;
    margin-inline: auto;
    object-position: 50% 30%;
  }
}

.rumdetail--dark {
  background: var(--rum-dark);
}

@media (min-width: 900px) {
  .rumdetail--copyfirst .rumdetail__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }
  .rumdetail--dark .rumdetail__inner > .frame {
    order: -1;
  }
  .rumdetail--dark .rumdetail__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }
}

/* Medals: two side by side, on a phone too */
.prize__list {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.prize__list img {
  width: 84px;
}

.prize__list strong {
  font-size: 28px;
}

.prize__list span {
  font-size: 16px;
}

.prize__list small {
  font-size: 13px;
}

@media (min-width: 768px) {
  .prize__list {
    gap: 64px;
  }
  .prize__list img {
    width: 120px;
  }
  .prize__list strong {
    font-size: 46px;
  }
  .prize__list span {
    font-size: 22px;
  }
  .prize__list small {
    font-size: 16px;
  }
}

/* The button sits under the photo */
.serve__media {
  display: grid;
  justify-items: center;
  gap: 28px;
}

.serve__media .frame {
  width: min(100%, 440px);
}


/* Signature serve on the Aged page: centred text, then a big photo, then the button */
:is(.rum-theme--aged, .rum-theme--amber) .serve__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 40px;
  text-align: center;
}

:is(.rum-theme--aged, .rum-theme--amber) .serve__copy {
  justify-items: center;
}

:is(.rum-theme--aged, .rum-theme--amber) .serve__copy p:not(.kicker) {
  max-width: 44ch;
}

:is(.rum-theme--aged, .rum-theme--amber) .serve__media {
  width: 100%;
}

:is(.rum-theme--aged, .rum-theme--amber) .serve__media .frame {
  width: min(100%, 900px);
}

:is(.rum-theme--aged, .rum-theme--amber) .serve__media .frame img {
  aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
  :is(.rum-theme--aged, .rum-theme--amber) .serve__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}


/* Medals: the same height, so the words under them line up */
.prize__list img {
  width: auto;
  height: 92px;
}

@media (min-width: 768px) {
  .prize__list img {
    width: auto;
    height: 130px;
  }
}

/* ---------- Aged 5YO on a computer: fill the width, bigger words and photos ---------- */
@media (min-width: 900px) {
  :is(.rum-theme--aged, .rum-theme--amber) {
    --max: 1440px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) main .big--sm {
    font-size: clamp(72px, 7vw, 112px);
  }
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail,
  :is(.rum-theme--aged, .rum-theme--amber) .prize {
    padding-block: 96px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail__inner {
    gap: 80px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail--dark .rumdetail__inner,
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail--copyfirst .rumdetail__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail .frame {
    width: 100%;
    max-width: 640px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail--copyfirst .frame {
    justify-self: start;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail--dark .frame {
    justify-self: end;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .notes dt,
  :is(.rum-theme--aged, .rum-theme--amber) .factlist dt {
    font-size: 17px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .notes dd,
  :is(.rum-theme--aged, .rum-theme--amber) .factlist dd {
    font-size: 19px;
    line-height: 1.45;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .notes > div,
  :is(.rum-theme--aged, .rum-theme--amber) .factlist > div {
    grid-template-columns: 12rem 1fr;
    padding-block: 20px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .rumdetail__copy {
    gap: 30px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .prize__sub {
    max-width: 60ch;
    font-size: 22px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .prize__list {
    max-width: 1000px;
    margin-block: 40px 28px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .prize__list img {
    height: 170px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .prize__list strong {
    font-size: 64px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .prize__list span {
    font-size: 28px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .prize__list small {
    font-size: 19px;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .band img {
    max-width: 1440px;
    aspect-ratio: 16 / 10;
    object-position: 50% 40%;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .serve__copy p:not(.kicker) {
    font-size: 24px;
    max-width: 50ch;
  }
  :is(.rum-theme--aged, .rum-theme--amber) .serve__media .frame {
    width: min(100%, 1180px);
  }
  :is(.rum-theme--aged, .rum-theme--amber) .find__title {
    font-size: clamp(56px, 5vw, 84px);
  }
  :is(.rum-theme--aged, .rum-theme--amber) .find__more,
  :is(.rum-theme--aged, .rum-theme--amber) .find .btn {
    font-size: 20px;
  }
}

/* ---------- Aged 5YO: a wide engraved drawing behind the page, sliding sideways as you scroll down ----------
   The layer stays in the window; pan.js sets --pan (0 to 100) and the picture moves with it. */
.rum-theme--aged::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: url("/assets/img/wm-aged-wide.webp?v=3") no-repeat;
  background-size: auto 115%;
  background-position: calc(var(--pan, 0) * 1%) 40%;
  pointer-events: none;
}

.rum-theme--aged .phero {
  position: relative;
  z-index: 3;
}

.rum-theme--aged main .container,
.rum-theme--aged .band,
.rum-theme--aged .foot > * {
  position: relative;
  z-index: 2;
}


/* ---------- Amber Rum: the same layout as Aged, in gold ---------- */
.rum-theme--amber .rumdetail--dark {
  background: var(--rum-dark);
}

.rum-theme--amber .serve__media .frame img {
  aspect-ratio: 4 / 5;
}

.rum-theme--amber .serve__media .frame {
  width: min(100%, 520px);
}

@media (min-width: 900px) {
  .rum-theme--amber .serve__media .frame {
    width: min(100%, 600px);
  }
}

.rum-theme--amber .phero {
  position: relative;
  z-index: 3;
}

.rum-theme--amber main .container,
.rum-theme--amber .band,
.rum-theme--amber .foot > * {
  position: relative;
  z-index: 2;
}


/* ---------- Amber Rum on sand: the beige of the home page, red type, the engraving behind it ---------- */
.rum-theme--amber {
  --rum-dark: #f3ede4;
  --rum-mid: #f3ede4;
  --rum-accent: #d50032;
  --rum-dark-rgb: 243, 237, 228;
  --rum-accent-rgb: 213, 0, 50;
  --rum-line: rgba(213, 0, 50, 0.3);
  color: var(--black);
}

.rum-theme--amber .top {
  color: var(--red);
  box-shadow: 0 1px 0 rgba(213, 0, 50, 0.2);
}

.rum-theme--amber .rumdetail,
.rum-theme--amber .prize,
.rum-theme--amber .serve {
  --ink: var(--red);
  background: var(--sand);
  border-top: 0;
}

.rum-theme--amber .rumdetail .big,
.rum-theme--amber .prize .big,
.rum-theme--amber .serve .big,
.rum-theme--amber .serve .kicker,
.rum-theme--amber .find__title,
.rum-theme--amber .rum .kicker:not(.phero .kicker) {
  color: var(--red);
}

.rum-theme--amber .rumdetail .notes dt,
.rum-theme--amber .rumdetail .factlist dt,
.rum-theme--amber .find__more a,
.rum-theme--amber .find__more a:hover {
  color: var(--red);
}

.rum-theme--amber .rumdetail .notes dd,
.rum-theme--amber .rumdetail .factlist dd,
.rum-theme--amber .prize__sub,
.rum-theme--amber .serve__copy p,
.rum-theme--amber .find__more {
  color: var(--black);
}

.rum-theme--amber .rumdetail .frame img,
.rum-theme--amber .serve .frame img {
  box-shadow: 8px 8px 0 var(--black);
}

.rum-theme--amber .serve .btn--gold,
.rum-theme--amber .find .btn--gold {
  --bg: var(--red);
  --tab: var(--red-dark);
  --fg: var(--white);
}

.rum-theme--amber .find .btn--line {
  --fg: var(--red);
}

.rum-theme--amber .find {
  border-top-color: rgba(213, 0, 50, 0.3);
}

/* The footer as on the home page: sand, red type, the engraving */
.rum-theme--amber .foot {
  background: var(--sand);
  color: var(--black);
  border-top: 0;
}

.rum-theme--amber .foot::before {
  display: block;
}

.rum-theme--amber .foot__grid > img {
  content: url("/assets/img/logo-red-240.webp");
}

.rum-theme--amber .foot__nav a,
.rum-theme--amber .foot__social,
.rum-theme--amber .social-link {
  color: var(--red);
}

.rum-theme--amber .foot__nav a:hover {
  color: var(--black);
}

.rum-theme--amber .foot__social .social-link:hover {
  background: var(--red);
  color: var(--white);
}

.rum-theme--amber .foot__legal a,
.rum-theme--amber .foot__legal button,
.rum-theme--amber .foot address a {
  color: var(--black);
}


/* ---------- Amber Rum: golden details on the sand (words, buttons, lines, frames) ---------- */
.rum-theme--amber {
  --amber-gold: #c99200;
  --amber-gold-text: #9c6f00;
}

.rum-theme--amber .top {
  box-shadow: 0 2px 0 var(--amber-gold);
}

/* The outlined word of every heading is gold, the solid word stays red */
.rum-theme--amber .rumdetail .hollow,
.rum-theme--amber .prize .hollow,
.rum-theme--amber .serve .hollow {
  --ink: var(--amber-gold);
  -webkit-text-stroke-width: 3px;
}

.rum-theme--amber .rum .kicker:not(.phero .kicker),
.rum-theme--amber .rumdetail .notes dt,
.rum-theme--amber .rumdetail .factlist dt {
  color: var(--amber-gold-text);
}

/* Golden lines between rows and sections */
.rum-theme--amber .rumdetail,
.rum-theme--amber .serve {
  --rum-line: rgba(201, 146, 0, 0.7);
}

.rum-theme--amber .notes,
.rum-theme--amber .factlist,
.rum-theme--amber .notes > div,
.rum-theme--amber .factlist > div {
  border-color: var(--amber-gold);
}

.rum-theme--amber .prize,
.rum-theme--amber .rumdetail--copyfirst,
.rum-theme--amber .rumdetail--dark,
.rum-theme--amber .serve {
  border-top: 3px solid var(--amber-gold);
}

/* Photos: a thin gold frame, then the black shadow */
.rum-theme--amber .rumdetail .frame img,
.rum-theme--amber .serve .frame img {
  box-shadow: 0 0 0 4px var(--amber-gold), 12px 12px 0 4px var(--black);
}

/* Medals: gold edge on the red cards */
.rum-theme--amber .prize__list li {
  border: 3px solid var(--amber-gold);
  box-shadow: 6px 6px 0 var(--black);
}

/* Buttons: gold with dark type, the outline button gold-brown */
.rum-theme--amber .btn--gold,
.rum-theme--amber .serve .btn--gold,
.rum-theme--amber .find .btn--gold {
  --bg: var(--amber-gold);
  --tab: #a77a00;
  --fg: var(--black);
}

.rum-theme--amber .find .btn--line,
.rum-theme--amber .btn--line {
  --fg: var(--amber-gold-text);
  border-color: var(--amber-gold);
}

/* "Find it, taste it": a golden bar under the title */
.rum-theme--amber .find__title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin: 18px auto 0;
  background: var(--amber-gold);
}

.rum-theme--amber .find {
  border-top: 0;
}

/* Footer: a golden edge, gold links on hover */
.rum-theme--amber .foot {
  border-top: 3px solid var(--amber-gold);
}

.rum-theme--amber .foot__nav a:hover {
  color: var(--amber-gold-text);
}

.rum-theme--amber .social-link {
  border-color: var(--amber-gold);
}

/* The outline button on the hero photo stays white */
.rum-theme--amber .phero .btn--line {
  --fg: var(--white);
  border-color: var(--white);
}

/* ---------- Amber Rum: gold words instead of red, medals without a box, always side by side ---------- */
.rum-theme--amber .rumdetail .big,
.rum-theme--amber .prize .big,
.rum-theme--amber .serve .big,
.rum-theme--amber .serve .kicker,
.rum-theme--amber .find__title {
  color: var(--amber-gold);
}

.rum-theme--amber .find__more a,
.rum-theme--amber .find__more a:hover,
.rum-theme--amber .foot__nav a,
.rum-theme--amber .foot__social {
  color: var(--amber-gold-text);
}

.rum-theme--amber .foot__nav a:hover {
  color: var(--black);
}

.rum-theme--amber .prize__list {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  align-items: stretch;
}

.rum-theme--amber .prize__list li {
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.rum-theme--amber .prize__list img {
  align-self: end;
  filter: drop-shadow(0 6px 10px rgba(62, 43, 46, 0.3));
}

.rum-theme--amber .prize__list strong {
  color: var(--amber-gold);
}

.rum-theme--amber .prize__list span,
.rum-theme--amber .prize__list small {
  color: var(--black);
}

.rum-theme--amber .prize__list {
  row-gap: 4px;
}

/* ---------- Amber Rum: the menu bar in gold ---------- */
.rum-theme.rum-theme--amber .top__logo-white {
  content: url("/assets/img/logo-amber-240.webp");
}

.rum-theme--amber .top,
html.menu-open .rum-theme--amber .top {
  color: var(--amber-gold);
}

.rum-theme--amber .top__book,
html.menu-open .rum-theme--amber .top__book {
  background: var(--amber-gold);
  color: var(--black);
}

.rum-theme--amber .top__menu {
  color: var(--amber-gold);
}

/* The logo in the footer stays red */
.rum-theme.rum-theme--amber .foot__grid > img {
  content: url("/assets/img/logo-red-240.webp");
}

/* ---------- Amber Rum: logo in the bar and the footer, and the open menu, all in the button gold ---------- */
.rum-theme.rum-theme--amber .foot__grid > img {
  content: url("/assets/img/logo-amber-240.webp");
}

.rum-theme--amber .menu {
  color: var(--amber-gold);
}

.rum-theme--amber .menu a {
  color: var(--amber-gold);
}

.rum-theme--amber .menu li:nth-child(even) a,
.rum-theme--amber .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: var(--amber-gold);
}

.rum-theme--amber .menu li:nth-child(even) a:hover {
  color: var(--amber-gold);
}


/* ---------- Amber Rum: the golden hour engraving (cane, distillery, barrels, the bay of Punda, the fort) ----------
   Same mechanism as the home page print: one picture held still behind the sections and slid sideways by
   main.js as you scroll (--px). */
.rum-theme--amber .paper::before {
  background-image: url("/assets/img/wm-amber-sand.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.08;
}

/* Amber hero: the photo is shown as it is, no dark filter; a soft text shadow keeps the words readable */
.rum-theme--amber .phero::after {
  display: none;
}

.rum-theme--amber .phero__copy {
  text-shadow: 0 2px 14px rgba(40, 20, 0, 0.55);
}

.rum-theme--amber .phero__copy .btn {
  text-shadow: none;
}

/* Readable on a bright photo without a filter over it: shadow on the big word, white kicker, a dark button fill */
.rum-theme--amber .phero__copy {
  text-shadow: 0 1px 10px rgba(40, 20, 0, 0.5);
}

.rum-theme--amber .phero .big {
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(40, 20, 0, 0.55));
}

.rum-theme--amber .phero .kicker {
  color: var(--white);
}

.rum-theme--amber .phero .btn--line {
  --bg: rgba(40, 20, 0, 0.5);
  --tab: rgba(255, 255, 255, 0.2);
}


/* ---------- White Rum: the Amber page on white, with red where Amber has gold ---------- */
.rum-theme--white {
  --amber-gold: #d50032;
  --amber-gold-text: #d50032;
  --rum-dark: #ffffff;
  --rum-mid: #ffffff;
  --rum-dark-rgb: 255, 255, 255;
  --rum-line: rgba(213, 0, 50, 0.3);
}

.rum-theme--white .rumdetail,
.rum-theme--white .prize,
.rum-theme--white .serve {
  background: var(--white);
  --rum-line: rgba(213, 0, 50, 0.7);
}

.rum-theme--white .rumdetail--dark,
.rum-theme--white .rumdetail--copyfirst {
  background: var(--white);
}

.rum-theme--white .foot {
  background: var(--white);
}

/* Bar: red logo, red button, red burger */
.rum-theme.rum-theme--white .top__logo-white,
.rum-theme.rum-theme--white .foot__grid > img {
  content: url("/assets/img/logo-red-240.webp");
}

.rum-theme--white .top,
html.menu-open .rum-theme--white .top {
  background: var(--white);
  color: var(--red);
}

.rum-theme--white .top__book,
html.menu-open .rum-theme--white .top__book {
  background: var(--red);
  color: var(--white);
}

.rum-theme--white .top__menu {
  color: var(--red);
}

/* Menu: red letters */
.rum-theme--white .menu {
  background: var(--white);
  color: var(--red);
}

.rum-theme--white .menu a {
  color: var(--red);
}

.rum-theme--white .menu li:nth-child(even) a,
.rum-theme--white .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: var(--red);
}

.rum-theme--white .menu li:nth-child(even) a:hover {
  color: var(--red);
}

/* Buttons: red with white type */
.rum-theme--white .btn--gold,
.rum-theme--white .serve .btn--gold,
.rum-theme--white .find .btn--gold {
  --bg: var(--red);
  --tab: var(--red-dark);
  --fg: var(--white);
}

.rum-theme--white .btn--line,
.rum-theme--white .find .btn--line {
  --fg: var(--red);
  border-color: var(--red);
}

.rum-theme--white .phero .btn--line {
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--white .foot__nav a:hover,
.rum-theme--white .find__more a:hover {
  color: var(--black);
}

.rum-theme--white .foot__social .social-link:hover {
  background: var(--red);
  color: var(--white);
}

.rum-theme--white .prize__list img {
  filter: drop-shadow(0 6px 10px rgba(62, 43, 46, 0.3));
}


/* White hero: the beach photo over the full width, no filter. The words get a soft shadow; the buttons a fill. */
.rum-theme--white .phero {
  background: var(--white);
}

.rum-theme--white .phero__copy {
  text-shadow: 0 1px 10px rgba(40, 20, 0, 0.5);
}

.rum-theme--white .phero .big {
  filter: drop-shadow(0 2px 12px rgba(40, 20, 0, 0.55));
}

.rum-theme--white .phero .btn--line {
  --bg: rgba(40, 20, 0, 0.5);
  --tab: rgba(255, 255, 255, 0.2);
}

.rum-theme--white .phero__copy .btn {
  text-shadow: none;
}

/* The tall coral photo as the band: show the whole bottle, centred, not stretched over the full width */
.rum-theme--white .band img {
  aspect-ratio: 4 / 5;
  max-width: 640px;
  margin-inline: auto;
  object-position: 50% 50%;
}

@media (min-width: 900px) {
  .rum-theme--white .band img {
    aspect-ratio: 4 / 5;
    max-width: 720px;
  }
}

/* White hero: the sky and the sand are light, so the words are red and black instead of white */
.rum-theme--white .phero {
  --ink: var(--red);
}

.rum-theme--white .phero .big,
.rum-theme--white .phero .kicker {
  color: var(--red);
  filter: none;
  text-shadow: none;
}

.rum-theme--white .phero__line,
.rum-theme--white .phero__text,
.rum-theme--white .crumb a,
.rum-theme--white .crumb span {
  color: var(--black);
}

.rum-theme--white .phero__copy {
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
}

.rum-theme--white .phero .btn--gold {
  --bg: var(--red);
  --tab: var(--red-dark);
  --fg: var(--white);
}

.rum-theme--white .phero .btn--line {
  --bg: rgba(255, 255, 255, 0.85);
  --tab: rgba(213, 0, 50, 0.15);
  --fg: var(--red);
  border-color: var(--red);
}

/* White hero, take two: white words with a deeper soft shadow, a faint shade on the left under the text */
.rum-theme--white .phero {
  --ink: var(--white);
}

.rum-theme--white .phero .big,
.rum-theme--white .phero .kicker,
.rum-theme--white .phero__line,
.rum-theme--white .phero__text,
.rum-theme--white .crumb a,
.rum-theme--white .crumb span {
  color: var(--white);
}

.rum-theme--white .phero .hollow {
  color: transparent;
  -webkit-text-stroke: 3px var(--white);
}

.rum-theme--white .phero .big {
  filter: drop-shadow(0 2px 6px rgba(30, 15, 0, 0.55)) drop-shadow(0 4px 22px rgba(30, 15, 0, 0.5));
}

.rum-theme--white .phero__copy {
  text-shadow: 0 1px 4px rgba(30, 15, 0, 0.6), 0 2px 18px rgba(30, 15, 0, 0.55);
}

.rum-theme--white .phero::after {
  display: block;
  content: "";
  background: linear-gradient(to right, rgba(30, 15, 0, 0.32) 0%, rgba(30, 15, 0, 0.16) 40%, rgba(30, 15, 0, 0) 62%);
}

@media (max-width: 899px) {
  .rum-theme--white .phero::after {
    background: linear-gradient(to top, rgba(30, 15, 0, 0.45) 0%, rgba(30, 15, 0, 0.2) 45%, rgba(30, 15, 0, 0) 75%);
  }
}

.rum-theme--white .phero .btn--line {
  --bg: rgba(30, 15, 0, 0.45);
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}


/* ---------- Coconut Rum: the Amber layout on sand, the coconut engraving behind it, teal from the coconut bottle for the details ---------- */
.rum-theme--coconut {
  --amber-gold: #4d9be6;
  --amber-gold-text: #4d9be6;
}

.rum-theme--coconut .paper::before {
  background-image: url("/assets/img/wm-coconut.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.2;
}

/* Bar and buttons stay red, like the rest of the site */
.rum-theme.rum-theme--coconut .top__logo-white,
.rum-theme.rum-theme--coconut .foot__grid > img {
  content: url("/assets/img/logo-teal-240.webp?v=3");
}

.rum-theme--coconut .top,
html.menu-open .rum-theme--coconut .top {
  color: #4d9be6;
}

.rum-theme--coconut .top__book,
html.menu-open .rum-theme--coconut .top__book {
  background: #4d9be6;
  color: var(--white);
}

.rum-theme--coconut .top__menu {
  color: #4d9be6;
}

.rum-theme--coconut .menu,
.rum-theme--coconut .menu a {
  color: #4d9be6;
}

.rum-theme--coconut .menu li:nth-child(even) a,
.rum-theme--coconut .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: #4d9be6;
}

.rum-theme--coconut .menu li:nth-child(even) a:hover {
  color: #4d9be6;
}

.rum-theme--coconut .btn--gold {
  --bg: var(--red);
  --tab: #3a78bd;
  --fg: var(--white);
}

.rum-theme--coconut .foot__nav a {
  color: #4d9be6;
}

.rum-theme--coconut .foot__social {
  color: #4d9be6;
}

/* Words in the sections: red solid, teal outline */
.rum-theme--coconut .rumdetail .big {
  color: #4d9be6;
}

.rum-theme--coconut .rumdetail .hollow {
  --ink: var(--amber-gold-text);
}

/* The hero: the photo as it is, white words with a soft shadow */
.rum-theme--coconut .phero {
  background: var(--sand);
}


/* White hero: no shade over the photo at all */
.rum-theme--white .phero::after,
.rum-theme--coconut .phero::after {
  display: none;
}

/* Coconut hero: teal panel with the words, the photo beside it (on a phone: the photo, then the words) */
.rum-theme--coconut .phero {
  --ink: var(--white);
  background: #4d9be6;
}

.rum-theme--coconut .phero .big,
.rum-theme--coconut .phero .kicker,
.rum-theme--coconut .phero__line,
.rum-theme--coconut .phero__text,
.rum-theme--coconut .crumb a,
.rum-theme--coconut .crumb span {
  color: var(--white);
}

.rum-theme--coconut .phero .big,
.rum-theme--coconut .phero__copy {
  filter: none;
  text-shadow: none;
}

.rum-theme--coconut .phero .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: #4d9be6;
}

.rum-theme--coconut .phero .btn--line {
  --bg: transparent;
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--coconut .phero__bg img {
  object-position: 62% 50%;
}

@media (max-width: 899px) {
  .rum-theme--coconut .phero {
    display: block;
    padding: 0 0 48px;
    min-height: 0;
  }
  .rum-theme--coconut .phero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
  }
  .rum-theme--coconut .phero__bg img {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 900px) {
  .rum-theme--coconut .phero__bg {
    left: 50%;
    width: 50%;
  }
  .rum-theme--coconut .phero__bg img {
    left: 0;
    width: 100%;
  }
  .rum-theme--coconut .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .rum-theme--coconut .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .rum-theme--coconut .phero .big {
    font-size: clamp(90px, 10.5vw, 170px);
  }
}


/* Coconut: every accent teal, also the hover colours and the footer */
.rum-theme--coconut .foot__nav a:hover,
.rum-theme--coconut .find__more a:hover {
  color: var(--black);
}

.rum-theme--coconut .foot__social .social-link:hover {
  background: #4d9be6;
  color: var(--white);
}

.rum-theme--coconut .social-link {
  border-color: #4d9be6;
}

.rum-theme--coconut .foot {
  border-top-color: #4d9be6;
}


/* Coconut: the closing "find it" band in teal */
.rum-theme--coconut .find__title,
.rum-theme--coconut .find__more a {
  color: #4d9be6;
}

.rum-theme--coconut .find__title::after {
  background: #4d9be6;
}

.rum-theme--coconut .find .btn--line {
  --fg: #4d9be6;
  border-color: #4d9be6;
}

.rum-theme--coconut .find .btn--gold {
  --bg: #4d9be6;
  --tab: #3a78bd;
  --fg: var(--white);
}

.rum-theme--coconut .find__more {
  color: var(--black);
}


/* "Also from our flavours": the title on one line, the flavours in a row under it */
.find__more--list {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 10px;
}

.find__more--list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}


/* White Rum: the pineapple, barrel and sailboat engraving, as soft as the Amber one */
.rum-theme--white .paper::before {
  background-image: url("/assets/img/wm-white.webp?v=2");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.1;
}


/* ---------- Pineapple Rum: the Amber layout on sand, the pineapple engraving behind it, green from the pineapple bottle for the details ---------- */
.rum-theme--pineapple {
  --amber-gold: #68a407;
  --amber-gold-text: #68a407;
}

.rum-theme--pineapple .paper::before {
  background-image: url("/assets/img/wm-pineapple.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.2;
}

/* Bar and buttons stay red, like the rest of the site */
.rum-theme.rum-theme--pineapple .top__logo-white,
.rum-theme.rum-theme--pineapple .foot__grid > img {
  content: url("/assets/img/logo-green-240.webp?v=2");
}

.rum-theme--pineapple .top,
html.menu-open .rum-theme--pineapple .top {
  color: #68a407;
}

.rum-theme--pineapple .top__book,
html.menu-open .rum-theme--pineapple .top__book {
  background: #68a407;
  color: var(--white);
}

.rum-theme--pineapple .top__menu {
  color: #68a407;
}

.rum-theme--pineapple .menu,
.rum-theme--pineapple .menu a {
  color: #68a407;
}

.rum-theme--pineapple .menu li:nth-child(even) a,
.rum-theme--pineapple .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: #68a407;
}

.rum-theme--pineapple .menu li:nth-child(even) a:hover {
  color: #68a407;
}

.rum-theme--pineapple .btn--gold {
  --bg: var(--red);
  --tab: #4f8205;
  --fg: var(--white);
}

.rum-theme--pineapple .foot__nav a {
  color: #68a407;
}

.rum-theme--pineapple .foot__social {
  color: #68a407;
}

/* Words in the sections: red solid, green outline */
.rum-theme--pineapple .rumdetail .big {
  color: #68a407;
}

.rum-theme--pineapple .rumdetail .hollow {
  --ink: var(--amber-gold-text);
}

/* The hero: the photo as it is, white words with a soft shadow */
.rum-theme--pineapple .phero {
  background: var(--sand);
}


/* White hero: no shade over the photo at all */
.rum-theme--white .phero::after,
.rum-theme--pineapple .phero::after {
  display: none;
}

/* Pineapple hero: green panel with the words, the photo beside it (on a phone: the photo, then the words) */
.rum-theme--pineapple .phero {
  --ink: var(--white);
  background: #68a407;
}

.rum-theme--pineapple .phero .big,
.rum-theme--pineapple .phero .kicker,
.rum-theme--pineapple .phero__line,
.rum-theme--pineapple .phero__text,
.rum-theme--pineapple .crumb a,
.rum-theme--pineapple .crumb span {
  color: var(--white);
}

.rum-theme--pineapple .phero .big,
.rum-theme--pineapple .phero__copy {
  filter: none;
  text-shadow: none;
}

.rum-theme--pineapple .phero .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: #68a407;
}

.rum-theme--pineapple .phero .btn--line {
  --bg: transparent;
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--pineapple .phero__bg img {
  object-position: 62% 50%;
}

@media (max-width: 899px) {
  .rum-theme--pineapple .phero {
    display: block;
    padding: 0 0 48px;
    min-height: 0;
  }
  .rum-theme--pineapple .phero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
  }
  .rum-theme--pineapple .phero__bg img {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 900px) {
  .rum-theme--pineapple .phero__bg {
    left: 50%;
    width: 50%;
  }
  .rum-theme--pineapple .phero__bg img {
    left: 0;
    width: 100%;
  }
  .rum-theme--pineapple .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .rum-theme--pineapple .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .rum-theme--pineapple .phero .big {
    font-size: clamp(90px, 10.5vw, 170px);
  }
}


/* Pineapple: every accent green, also the hover colours and the footer */
.rum-theme--pineapple .foot__nav a:hover,
.rum-theme--pineapple .find__more a:hover {
  color: var(--black);
}

.rum-theme--pineapple .foot__social .social-link:hover {
  background: #68a407;
  color: var(--white);
}

.rum-theme--pineapple .social-link {
  border-color: #68a407;
}

.rum-theme--pineapple .foot {
  border-top-color: #68a407;
}


/* Pineapple: the closing "find it" band in green */
.rum-theme--pineapple .find__title,
.rum-theme--pineapple .find__more a {
  color: #68a407;
}

.rum-theme--pineapple .find__title::after {
  background: #68a407;
}

.rum-theme--pineapple .find .btn--line {
  --fg: #68a407;
  border-color: #68a407;
}

.rum-theme--pineapple .find .btn--gold {
  --bg: #68a407;
  --tab: #4f8205;
  --fg: var(--white);
}

.rum-theme--pineapple .find__more {
  color: var(--black);
}


/* "Also from our flavours": the title on one line, the flavours in a row under it */
.find__more--list {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 10px;
}

.find__more--list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}


/* White Rum: the pineapple, barrel and sailboat engraving, as soft as the Amber one */
.rum-theme--white .paper::before {
  background-image: url("/assets/img/wm-white.webp?v=2");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.1;
}

.rum-theme--pineapple .phero__bg img {
  object-position: 50% 62%;
}

/* Pineapple: a long word, so a smaller title on a computer; the panel keeps some air around it */
@media (min-width: 900px) {
  .rum-theme--pineapple .phero .big {
    font-size: clamp(80px, 8.6vw, 140px);
  }
}


/* ---------- Watermarks on the product pages: all equally strong, all lightly softened ----------
   Each drawing has a different amount of line work, so the opacity is set per page to give the same
   visible weight, and the same light blur takes the hard edge off every one. */
.rum-theme--amber .paper::before,
.rum-theme--white .paper::before,
.rum-theme--coconut .paper::before,
.rum-theme--pineapple .paper::before {
  filter: blur(0.8px);
}

.rum-theme--amber .paper::before {
  opacity: 0.13;
}

.rum-theme--white .paper::before {
  opacity: 0.115;
}

.rum-theme--coconut .paper::before {
  opacity: 0.12;
}

.rum-theme--pineapple .paper::before {
  opacity: 0.09;
}

.rum-theme--aged::after {
  filter: blur(0.8px);
  opacity: 1;
}

/* Flavour pages on a computer: the photos alternate. Hero photo on the right, then the notes photo on the
   left, then the facts photo on the right. Never two on the same side in a row. */
@media (min-width: 900px) {
  :is(.rum-theme--coconut, .rum-theme--pineapple) .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  :is(.rum-theme--coconut, .rum-theme--pineapple) .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
}


/* ---------- Passionfruit Rum ---------- */
/* ---------- Passionfruit Rum: the Amber layout on sand, the passionfruit engraving behind it, colour from the passionfruit bottle for the details ---------- */
.rum-theme--passionfruit {
  --amber-gold: #97134e;
  --amber-gold-text: #97134e;
}

.rum-theme--passionfruit .paper::before {
  background-image: url("/assets/img/wm-passionfruit.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.2;
}

/* Bar and buttons stay red, like the rest of the site */
.rum-theme.rum-theme--passionfruit .top__logo-white,
.rum-theme.rum-theme--passionfruit .foot__grid > img {
  content: url("/assets/img/logo-passionfruit-240.webp?v=2");
}

.rum-theme--passionfruit .top,
html.menu-open .rum-theme--passionfruit .top {
  color: #97134e;
}

.rum-theme--passionfruit .top__book,
html.menu-open .rum-theme--passionfruit .top__book {
  background: #97134e;
  color: var(--white);
}

.rum-theme--passionfruit .top__menu {
  color: #97134e;
}

.rum-theme--passionfruit .menu,
.rum-theme--passionfruit .menu a {
  color: #97134e;
}

.rum-theme--passionfruit .menu li:nth-child(even) a,
.rum-theme--passionfruit .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: #97134e;
}

.rum-theme--passionfruit .menu li:nth-child(even) a:hover {
  color: #97134e;
}

.rum-theme--passionfruit .btn--gold {
  --bg: var(--red);
  --tab: #74093b;
  --fg: var(--white);
}

.rum-theme--passionfruit .foot__nav a {
  color: #97134e;
}

.rum-theme--passionfruit .foot__social {
  color: #97134e;
}

/* Words in the sections: red solid, colour outline */
.rum-theme--passionfruit .rumdetail .big {
  color: #97134e;
}

.rum-theme--passionfruit .rumdetail .hollow {
  --ink: var(--amber-gold-text);
}

/* The hero: the photo as it is, white words with a soft shadow */
.rum-theme--passionfruit .phero {
  background: var(--sand);
}


/* Passionfruit hero: colour panel with the words, the photo beside it (on a phone: the photo, then the words) */
.rum-theme--passionfruit .phero {
  --ink: var(--white);
  background: #97134e;
}

.rum-theme--passionfruit .phero .big,
.rum-theme--passionfruit .phero .kicker,
.rum-theme--passionfruit .phero__line,
.rum-theme--passionfruit .phero__text,
.rum-theme--passionfruit .crumb a,
.rum-theme--passionfruit .crumb span {
  color: var(--white);
}

.rum-theme--passionfruit .phero .big,
.rum-theme--passionfruit .phero__copy {
  filter: none;
  text-shadow: none;
}

.rum-theme--passionfruit .phero .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: #97134e;
}

.rum-theme--passionfruit .phero .btn--line {
  --bg: transparent;
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--passionfruit .phero__bg img {
  object-position: 62% 50%;
}

@media (max-width: 899px) {
  .rum-theme--passionfruit .phero {
    display: block;
    padding: 0 0 48px;
    min-height: 0;
  }
  .rum-theme--passionfruit .phero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
  }
  .rum-theme--passionfruit .phero__bg img {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 900px) {
  .rum-theme--passionfruit .phero__bg {
    left: 50%;
    width: 50%;
  }
  .rum-theme--passionfruit .phero__bg img {
    left: 0;
    width: 100%;
  }
  .rum-theme--passionfruit .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .rum-theme--passionfruit .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .rum-theme--passionfruit .phero .big {
    font-size: clamp(90px, 10.5vw, 170px);
  }
}


/* Passionfruit: every accent colour, also the hover colours and the footer */
.rum-theme--passionfruit .foot__nav a:hover,
.rum-theme--passionfruit .find__more a:hover {
  color: var(--black);
}

.rum-theme--passionfruit .foot__social .social-link:hover {
  background: #97134e;
  color: var(--white);
}

.rum-theme--passionfruit .social-link {
  border-color: #97134e;
}

.rum-theme--passionfruit .foot {
  border-top-color: #97134e;
}


/* Passionfruit: the closing "find it" band in colour */
.rum-theme--passionfruit .find__title,
.rum-theme--passionfruit .find__more a {
  color: #97134e;
}

.rum-theme--passionfruit .find__title::after {
  background: #97134e;
}

.rum-theme--passionfruit .find .btn--line {
  --fg: #97134e;
  border-color: #97134e;
}

.rum-theme--passionfruit .find .btn--gold {
  --bg: #97134e;
  --tab: #74093b;
  --fg: var(--white);
}

.rum-theme--passionfruit .find__more {
  color: var(--black);
}


.rum-theme--passionfruit .paper::before {
  filter: blur(0.8px);
  opacity: 0.085;
}

@media (min-width: 900px) {
  .rum-theme--passionfruit .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  .rum-theme--passionfruit .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
}


/* ---------- Mango Rum ---------- */
/* ---------- Mango Rum: the Amber layout on sand, the mango engraving behind it, colour from the mango bottle for the details ---------- */
.rum-theme--mango {
  --amber-gold: #ee5f10;
  --amber-gold-text: #ee5f10;
}

.rum-theme--mango .paper::before {
  background-image: url("/assets/img/wm-mango.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.2;
}

/* Bar and buttons stay red, like the rest of the site */
.rum-theme.rum-theme--mango .top__logo-white,
.rum-theme.rum-theme--mango .foot__grid > img {
  content: url("/assets/img/logo-mango-240.webp?v=3");
}

.rum-theme--mango .top,
html.menu-open .rum-theme--mango .top {
  color: #ee5f10;
}

.rum-theme--mango .top__book,
html.menu-open .rum-theme--mango .top__book {
  background: #ee5f10;
  color: var(--white);
}

.rum-theme--mango .top__menu {
  color: #ee5f10;
}

.rum-theme--mango .menu,
.rum-theme--mango .menu a {
  color: #ee5f10;
}

.rum-theme--mango .menu li:nth-child(even) a,
.rum-theme--mango .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: #ee5f10;
}

.rum-theme--mango .menu li:nth-child(even) a:hover {
  color: #ee5f10;
}

.rum-theme--mango .btn--gold {
  --bg: var(--red);
  --tab: #bd4c0c;
  --fg: var(--white);
}

.rum-theme--mango .foot__nav a {
  color: #ee5f10;
}

.rum-theme--mango .foot__social {
  color: #ee5f10;
}

/* Words in the sections: red solid, colour outline */
.rum-theme--mango .rumdetail .big {
  color: #ee5f10;
}

.rum-theme--mango .rumdetail .hollow {
  --ink: var(--amber-gold-text);
}

/* The hero: the photo as it is, white words with a soft shadow */
.rum-theme--mango .phero {
  background: var(--sand);
}


/* Mango hero: colour panel with the words, the photo beside it (on a phone: the photo, then the words) */
.rum-theme--mango .phero {
  --ink: var(--white);
  background: #ee5f10;
}

.rum-theme--mango .phero .big,
.rum-theme--mango .phero .kicker,
.rum-theme--mango .phero__line,
.rum-theme--mango .phero__text,
.rum-theme--mango .crumb a,
.rum-theme--mango .crumb span {
  color: var(--white);
}

.rum-theme--mango .phero .big,
.rum-theme--mango .phero__copy {
  filter: none;
  text-shadow: none;
}

.rum-theme--mango .phero .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: #ee5f10;
}

.rum-theme--mango .phero .btn--line {
  --bg: transparent;
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--mango .phero__bg img {
  object-position: 62% 50%;
}

@media (max-width: 899px) {
  .rum-theme--mango .phero {
    display: block;
    padding: 0 0 48px;
    min-height: 0;
  }
  .rum-theme--mango .phero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
  }
  .rum-theme--mango .phero__bg img {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 900px) {
  .rum-theme--mango .phero__bg {
    left: 50%;
    width: 50%;
  }
  .rum-theme--mango .phero__bg img {
    left: 0;
    width: 100%;
  }
  .rum-theme--mango .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .rum-theme--mango .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .rum-theme--mango .phero .big {
    font-size: clamp(90px, 10.5vw, 170px);
  }
}


/* Mango: every accent colour, also the hover colours and the footer */
.rum-theme--mango .foot__nav a:hover,
.rum-theme--mango .find__more a:hover {
  color: var(--black);
}

.rum-theme--mango .foot__social .social-link:hover {
  background: #ee5f10;
  color: var(--white);
}

.rum-theme--mango .social-link {
  border-color: #ee5f10;
}

.rum-theme--mango .foot {
  border-top-color: #ee5f10;
}


/* Mango: the closing "find it" band in colour */
.rum-theme--mango .find__title,
.rum-theme--mango .find__more a {
  color: #ee5f10;
}

.rum-theme--mango .find__title::after {
  background: #ee5f10;
}

.rum-theme--mango .find .btn--line {
  --fg: #ee5f10;
  border-color: #ee5f10;
}

.rum-theme--mango .find .btn--gold {
  --bg: #ee5f10;
  --tab: #bd4c0c;
  --fg: var(--white);
}

.rum-theme--mango .find__more {
  color: var(--black);
}


.rum-theme--mango .paper::before {
  filter: blur(0.8px);
  opacity: 0.079;
}

@media (min-width: 900px) {
  .rum-theme--mango .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  .rum-theme--mango .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
}


/* ---------- Lemon Rum ---------- */
/* ---------- Lemon Rum: the Amber layout on sand, the lemon engraving behind it, colour from the lemon bottle for the details ---------- */
.rum-theme--lemon {
  --amber-gold: #f4cb2b;
  --amber-gold-text: #f4cb2b;
}

.rum-theme--lemon .paper::before {
  background-image: url("/assets/img/wm-lemon.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.2;
}

/* Bar and buttons stay red, like the rest of the site */
.rum-theme.rum-theme--lemon .top__logo-white,
.rum-theme.rum-theme--lemon .foot__grid > img {
  content: url("/assets/img/logo-lemon-240.webp?v=2");
}

.rum-theme--lemon .top,
html.menu-open .rum-theme--lemon .top {
  color: #f4cb2b;
}

.rum-theme--lemon .top__book,
html.menu-open .rum-theme--lemon .top__book {
  background: #f4cb2b;
  color: var(--white);
}

.rum-theme--lemon .top__menu {
  color: #f4cb2b;
}

.rum-theme--lemon .menu,
.rum-theme--lemon .menu a {
  color: #f4cb2b;
}

.rum-theme--lemon .menu li:nth-child(even) a,
.rum-theme--lemon .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: #f4cb2b;
}

.rum-theme--lemon .menu li:nth-child(even) a:hover {
  color: #f4cb2b;
}

.rum-theme--lemon .btn--gold {
  --bg: var(--red);
  --tab: #c9a720;
  --fg: var(--white);
}

.rum-theme--lemon .foot__nav a {
  color: #f4cb2b;
}

.rum-theme--lemon .foot__social {
  color: #f4cb2b;
}

/* Words in the sections: red solid, colour outline */
.rum-theme--lemon .rumdetail .big {
  color: #f4cb2b;
}

.rum-theme--lemon .rumdetail .hollow {
  --ink: var(--amber-gold-text);
}

/* The hero: the photo as it is, white words with a soft shadow */
.rum-theme--lemon .phero {
  background: var(--sand);
}


/* Lemon hero: colour panel with the words, the photo beside it (on a phone: the photo, then the words) */
.rum-theme--lemon .phero {
  --ink: var(--white);
  background: #f4cb2b;
}

.rum-theme--lemon .phero .big,
.rum-theme--lemon .phero .kicker,
.rum-theme--lemon .phero__line,
.rum-theme--lemon .phero__text,
.rum-theme--lemon .crumb a,
.rum-theme--lemon .crumb span {
  color: var(--white);
}

.rum-theme--lemon .phero .big,
.rum-theme--lemon .phero__copy {
  filter: none;
  text-shadow: none;
}

.rum-theme--lemon .phero .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: #f4cb2b;
}

.rum-theme--lemon .phero .btn--line {
  --bg: transparent;
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--lemon .phero__bg img {
  object-position: 62% 50%;
}

@media (max-width: 899px) {
  .rum-theme--lemon .phero {
    display: block;
    padding: 0 0 48px;
    min-height: 0;
  }
  .rum-theme--lemon .phero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
  }
  .rum-theme--lemon .phero__bg img {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 900px) {
  .rum-theme--lemon .phero__bg {
    left: 50%;
    width: 50%;
  }
  .rum-theme--lemon .phero__bg img {
    left: 0;
    width: 100%;
  }
  .rum-theme--lemon .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .rum-theme--lemon .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .rum-theme--lemon .phero .big {
    font-size: clamp(90px, 10.5vw, 170px);
  }
}


/* Lemon: every accent colour, also the hover colours and the footer */
.rum-theme--lemon .foot__nav a:hover,
.rum-theme--lemon .find__more a:hover {
  color: var(--black);
}

.rum-theme--lemon .foot__social .social-link:hover {
  background: #f4cb2b;
  color: var(--white);
}

.rum-theme--lemon .social-link {
  border-color: #f4cb2b;
}

.rum-theme--lemon .foot {
  border-top-color: #f4cb2b;
}


/* Lemon: the closing "find it" band in colour */
.rum-theme--lemon .find__title,
.rum-theme--lemon .find__more a {
  color: #f4cb2b;
}

.rum-theme--lemon .find__title::after {
  background: #f4cb2b;
}

.rum-theme--lemon .find .btn--line {
  --fg: #f4cb2b;
  border-color: #f4cb2b;
}

.rum-theme--lemon .find .btn--gold {
  --bg: #f4cb2b;
  --tab: #c9a720;
  --fg: var(--white);
}

.rum-theme--lemon .find__more {
  color: var(--black);
}


.rum-theme--lemon .paper::before {
  filter: blur(0.8px);
  opacity: 0.08;
}

@media (min-width: 900px) {
  .rum-theme--lemon .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  .rum-theme--lemon .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
}


/* ---------- Tamarind Rum ---------- */
/* ---------- Tamarind Rum: the Amber layout on sand, the tamarind engraving behind it, colour from the tamarind bottle for the details ---------- */
.rum-theme--tamarind {
  --amber-gold: #d16c15;
  --amber-gold-text: #d16c15;
}

.rum-theme--tamarind .paper::before {
  background-image: url("/assets/img/wm-tamarind.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.2;
}

/* Bar and buttons stay red, like the rest of the site */
.rum-theme.rum-theme--tamarind .top__logo-white,
.rum-theme.rum-theme--tamarind .foot__grid > img {
  content: url("/assets/img/logo-tamarind-240.webp?v=2");
}

.rum-theme--tamarind .top,
html.menu-open .rum-theme--tamarind .top {
  color: #d16c15;
}

.rum-theme--tamarind .top__book,
html.menu-open .rum-theme--tamarind .top__book {
  background: #d16c15;
  color: var(--white);
}

.rum-theme--tamarind .top__menu {
  color: #d16c15;
}

.rum-theme--tamarind .menu,
.rum-theme--tamarind .menu a {
  color: #d16c15;
}

.rum-theme--tamarind .menu li:nth-child(even) a,
.rum-theme--tamarind .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: #d16c15;
}

.rum-theme--tamarind .menu li:nth-child(even) a:hover {
  color: #d16c15;
}

.rum-theme--tamarind .btn--gold {
  --bg: var(--red);
  --tab: #a5540f;
  --fg: var(--white);
}

.rum-theme--tamarind .foot__nav a {
  color: #d16c15;
}

.rum-theme--tamarind .foot__social {
  color: #d16c15;
}

/* Words in the sections: red solid, colour outline */
.rum-theme--tamarind .rumdetail .big {
  color: #d16c15;
}

.rum-theme--tamarind .rumdetail .hollow {
  --ink: var(--amber-gold-text);
}

/* The hero: the photo as it is, white words with a soft shadow */
.rum-theme--tamarind .phero {
  background: var(--sand);
}


/* Tamarind hero: colour panel with the words, the photo beside it (on a phone: the photo, then the words) */
.rum-theme--tamarind .phero {
  --ink: var(--white);
  background: #d16c15;
}

.rum-theme--tamarind .phero .big,
.rum-theme--tamarind .phero .kicker,
.rum-theme--tamarind .phero__line,
.rum-theme--tamarind .phero__text,
.rum-theme--tamarind .crumb a,
.rum-theme--tamarind .crumb span {
  color: var(--white);
}

.rum-theme--tamarind .phero .big,
.rum-theme--tamarind .phero__copy {
  filter: none;
  text-shadow: none;
}

.rum-theme--tamarind .phero .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: #d16c15;
}

.rum-theme--tamarind .phero .btn--line {
  --bg: transparent;
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--tamarind .phero__bg img {
  object-position: 62% 50%;
}

@media (max-width: 899px) {
  .rum-theme--tamarind .phero {
    display: block;
    padding: 0 0 48px;
    min-height: 0;
  }
  .rum-theme--tamarind .phero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
  }
  .rum-theme--tamarind .phero__bg img {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 900px) {
  .rum-theme--tamarind .phero__bg {
    left: 50%;
    width: 50%;
  }
  .rum-theme--tamarind .phero__bg img {
    left: 0;
    width: 100%;
  }
  .rum-theme--tamarind .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .rum-theme--tamarind .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .rum-theme--tamarind .phero .big {
    font-size: clamp(90px, 10.5vw, 170px);
  }
}


/* Tamarind: every accent colour, also the hover colours and the footer */
.rum-theme--tamarind .foot__nav a:hover,
.rum-theme--tamarind .find__more a:hover {
  color: var(--black);
}

.rum-theme--tamarind .foot__social .social-link:hover {
  background: #d16c15;
  color: var(--white);
}

.rum-theme--tamarind .social-link {
  border-color: #d16c15;
}

.rum-theme--tamarind .foot {
  border-top-color: #d16c15;
}


/* Tamarind: the closing "find it" band in colour */
.rum-theme--tamarind .find__title,
.rum-theme--tamarind .find__more a {
  color: #d16c15;
}

.rum-theme--tamarind .find__title::after {
  background: #d16c15;
}

.rum-theme--tamarind .find .btn--line {
  --fg: #d16c15;
  border-color: #d16c15;
}

.rum-theme--tamarind .find .btn--gold {
  --bg: #d16c15;
  --tab: #a5540f;
  --fg: var(--white);
}

.rum-theme--tamarind .find__more {
  color: var(--black);
}


.rum-theme--tamarind .paper::before {
  filter: blur(0.8px);
  opacity: 0.077;
}

@media (min-width: 900px) {
  .rum-theme--tamarind .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  .rum-theme--tamarind .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
}


/* Long words and long lines in the flavour heroes */
@media (min-width: 900px) {
  .rum-theme--passionfruit .phero .big {
    font-size: clamp(60px, 7.4vw, 118px);
  }
  .rum-theme--tamarind .phero__line {
    font-size: 24px;
  }
}

@media (min-width: 900px) {
  .rum-theme--passionfruit .phero__line,
  .rum-theme--tamarind .phero__line {
    max-width: 24ch;
    font-size: 26px;
  }
}


/* Small labels need a deeper tone than the bright accents */
.rum-theme--mango {
  --amber-gold-text: #bd4c0c;
}

.rum-theme--coconut .phero__bg img {
  object-position: 50% 58%;
}


/* ---------- Kima Kòrá ---------- */
/* ---------- Kima Rum: the Amber layout on sand, the kima engraving behind it, colour from the kima bottle for the details ---------- */
.rum-theme--kima {
  --amber-gold: #d50032;
  --amber-gold-text: #d50032;
}

.rum-theme--kima .paper::before {
  background-image: url("/assets/img/wm-kima.webp?v=1");
  background-size: auto 115%;
  background-repeat: no-repeat;
  background-position: calc(var(--px, 0.5) * 100%) 50%;
  opacity: 0.2;
}

/* Bar and buttons stay red, like the rest of the site */
.rum-theme.rum-theme--kima .top__logo-white,
.rum-theme.rum-theme--kima .foot__grid > img {
  content: url("/assets/img/logo-red-240.webp");
}

.rum-theme--kima .top,
html.menu-open .rum-theme--kima .top {
  color: #d50032;
}

.rum-theme--kima .top__book,
html.menu-open .rum-theme--kima .top__book {
  background: #d50032;
  color: var(--white);
}

.rum-theme--kima .top__menu {
  color: #d50032;
}

.rum-theme--kima .menu,
.rum-theme--kima .menu a {
  color: #d50032;
}

.rum-theme--kima .menu li:nth-child(even) a,
.rum-theme--kima .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: #d50032;
}

.rum-theme--kima .menu li:nth-child(even) a:hover {
  color: #d50032;
}

.rum-theme--kima .btn--gold {
  --bg: var(--red);
  --tab: #a8001f;
  --fg: var(--white);
}

.rum-theme--kima .foot__nav a {
  color: #d50032;
}

.rum-theme--kima .foot__social {
  color: #d50032;
}

/* Words in the sections: red solid, colour outline */
.rum-theme--kima .rumdetail .big {
  color: #d50032;
}

.rum-theme--kima .rumdetail .hollow {
  --ink: var(--amber-gold-text);
}

/* The hero: the photo as it is, white words with a soft shadow */
.rum-theme--kima .phero {
  background: var(--sand);
}


/* Kima hero: colour panel with the words, the photo beside it (on a phone: the words on the photo) */
.rum-theme--kima .phero {
  --ink: var(--white);
  background: #d50032;
}

.rum-theme--kima .phero .big,
.rum-theme--kima .phero .kicker,
.rum-theme--kima .phero__line,
.rum-theme--kima .phero__text,
.rum-theme--kima .crumb a,
.rum-theme--kima .crumb span {
  color: var(--white);
}

.rum-theme--kima .phero .big,
.rum-theme--kima .phero__copy {
  filter: none;
  text-shadow: none;
}

.rum-theme--kima .phero .btn--gold {
  --bg: var(--white);
  --tab: var(--sand);
  --fg: #d50032;
}

.rum-theme--kima .phero .btn--line {
  --bg: transparent;
  --tab: rgba(255, 255, 255, 0.2);
  --fg: var(--white);
  border-color: var(--white);
}

.rum-theme--kima .phero__bg img {
  object-position: 62% 50%;
}

/* Phone: the words on the photo, like Family Reserve (a dark fade at the bottom keeps them readable) */
@media (max-width: 899px) {
  .rum-theme--kima .phero::after {
    display: block;
    left: 0;
    background: linear-gradient(to top, rgba(21, 17, 18, 0.92) 0%, rgba(21, 17, 18, 0.7) 36%, rgba(21, 17, 18, 0.32) 56%, rgba(21, 17, 18, 0) 78%);
  }
  .rum-theme--kima .phero__copy {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  }
}

@media (min-width: 900px) {
  .rum-theme--kima .phero__bg {
    left: 50%;
    width: 50%;
  }
  .rum-theme--kima .phero__bg img {
    left: 0;
    width: 100%;
  }
  .rum-theme--kima .phero__copy {
    width: calc(50% - 40px);
    margin-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .rum-theme--kima .phero__copy.container {
    max-width: none;
    padding-inline: 0;
  }
  .rum-theme--kima .phero .big {
    font-size: clamp(90px, 10.5vw, 170px);
  }
}


/* Kima: every accent colour, also the hover colours and the footer */
.rum-theme--kima .foot__nav a:hover,
.rum-theme--kima .find__more a:hover {
  color: var(--black);
}

.rum-theme--kima .foot__social .social-link:hover {
  background: #d50032;
  color: var(--white);
}

.rum-theme--kima .social-link {
  border-color: #d50032;
}

.rum-theme--kima .foot {
  border-top-color: #d50032;
}


/* Kima: the closing "find it" band in colour */
.rum-theme--kima .find__title,
.rum-theme--kima .find__more a {
  color: #d50032;
}

.rum-theme--kima .find__title::after {
  background: #d50032;
}

.rum-theme--kima .find .btn--line {
  --fg: #d50032;
  border-color: #d50032;
}

.rum-theme--kima .find .btn--gold {
  --bg: #d50032;
  --tab: #a8001f;
  --fg: var(--white);
}

.rum-theme--kima .find__more {
  color: var(--black);
}


.rum-theme--kima .paper::before {
  filter: blur(0.8px);
  opacity: 0.077;
}

@media (min-width: 900px) {
  .rum-theme--kima .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  .rum-theme--kima .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
  .rum-theme--kima .phero .big {
    font-size: clamp(90px, 10vw, 160px);
  }
}

.rum-theme--kima .story p {
  margin-bottom: 18px;
  font-size: 18px;
  line-height: 1.55;
}

.rum-theme--kima .phero__bg img {
  object-position: 50% 40%;
}

/* Kima Kòrá: the accents on Ò and Á need room, so the second word sits lower */
.rum-theme--kima .phero .big {
  line-height: 0.84;
}

.rum-theme--kima .phero .big .hollow {
  margin-top: 0.2em;
}


/* ---------- Family Reserve: the Aged layout without medals and cocktail ---------- */
.rum-theme--family .story p {
  margin-bottom: 18px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--white);
}

@media (min-width: 900px) {
  .rum-theme--family .story p {
    font-size: 20px;
  }
  .rum-theme--family .phero .big {
    font-size: clamp(90px, 9.6vw, 160px);
  }
  /* Story: photo left, text right (phone keeps text first) */
  .rum-theme--family .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  /* Current edition: text left, photo right */
  .rum-theme--family .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
}

.rum-theme--family .phero__bg img {
  object-position: 50% 45%;
}

.rum-theme--family .serve--find {
  padding-top: 72px;
}


/* The photo band between the sections is part of the print too, so the watermark runs on behind it */
.band.paper {
  position: relative;
  background: transparent;
}

.rum-theme--amber .band.paper { background: var(--sand); }
.rum-theme--white .band.paper { background: var(--white); }
.rum-theme--aged .band.paper { background: var(--rum-dark); }

/* Amber hero: the whole wide photo, not zoomed in */
@media (min-width: 900px) {
  .rum-theme--amber .phero {
    min-height: 0;
    aspect-ratio: 2 / 1;
  }
  .rum-theme--amber .phero__bg img {
    object-position: 50% 50%;
  }
}

/* White Rum: the watermark runs through every white section, the band photo included */
.rum-theme--white .band.paper {
  background: var(--white);
}

.rum-theme--white .paper::before {
  opacity: 0.115;
}


/* The photo after the hero on Amber: the wide photo, centred on the bottle and the glass */
.rum-theme--amber .band img {
  object-position: 50% 50%;
}


/* New flavour photos: where the bottle sits in each hero */
.rum-theme--passionfruit .phero__bg img {
  object-position: 48% 55%;
}

.rum-theme--tamarind .phero__bg img {
  object-position: 50% 55%;
}


.rum-theme--tamarind .phero__bg img {
  object-position: 49% 55%;
}


.rum-theme--mango .phero__bg img {
  object-position: 50% 52%;
}

/* A long name always fits the screen: the title shrinks with the width of the phone, never runs off the edge */
@media (max-width: 899px) {
  .rum-theme--passionfruit .phero .big {
    font-size: calc((100vw - 44px) / 5.2);
  }
  .rum-theme--pineapple .phero .big {
    font-size: min(clamp(72px, 22vw, 168px), calc((100vw - 44px) / 3.95));
  }
}


.rum-theme--tamarind .phero__bg img {
  object-position: 50% 50%;
}


.rum-theme--coconut .phero__bg img {
  object-position: 50% 50%;
}


/* ---------- Amber Rum page only: light gold #e0b84a instead of beige, every accent red ----------
   Small words (labels, kickers) use the darker red for contrast; headings, buttons, menu and logo use the brand red. */
.rum-theme.rum-theme--amber-rum {
  --rum-dark: #e0b84a;
  --rum-mid: #e0b84a;
  --rum-line: rgba(198, 51, 43, 0.45);
  --red: #c6332b;
  --red-dark: #a42720;
  --amber-gold: #c6332b;
  --amber-gold-text: #c6332b;
  background: #e0b84a;
}

/* Sections, header and footer on the light gold */
.rum-theme--amber-rum .rumdetail,
.rum-theme--amber-rum .prize,
.rum-theme--amber-rum .serve,
.rum-theme--amber-rum .find,
.rum-theme--amber-rum .foot,
.rum-theme--amber-rum .top,
html.menu-open .rum-theme--amber-rum .top {
  background: #e0b84a;
}

.rum-theme--amber-rum .rumdetail,
.rum-theme--amber-rum .prize,
.rum-theme--amber-rum .serve {
  --ink: var(--red);
}

/* Header: red logo, red words, red button */
.rum-theme.rum-theme--amber-rum .top__logo-white {
  content: url("/assets/img/logo-red-240.webp");
}

.rum-theme--amber-rum .top,
html.menu-open .rum-theme--amber-rum .top,
.rum-theme--amber-rum .top__menu,
.rum-theme--amber-rum .menu,
.rum-theme--amber-rum .menu a {
  color: var(--red);
}

.rum-theme--amber-rum .top {
  box-shadow: 0 2px 0 var(--red);
}

.rum-theme--amber-rum .top__book,
html.menu-open .rum-theme--amber-rum .top__book {
  background: var(--red);
  color: var(--white);
}

.rum-theme--amber-rum .menu li:nth-child(even) a,
.rum-theme--amber-rum .menu li:nth-child(odd) a:hover {
  color: transparent;
  -webkit-text-stroke-color: var(--red);
}

.rum-theme--amber-rum .menu li:nth-child(even) a:hover {
  color: var(--red);
}

/* Headings: solid and outlined word both red */
.rum-theme--amber-rum .prize .big,
.rum-theme--amber-rum .prize__list strong {
  color: var(--red);
}

.rum-theme--amber-rum .prize .hollow,
.rum-theme--amber-rum .rumdetail .hollow,
.rum-theme--amber-rum .serve .hollow {
  --ink: var(--red);
}

/* Hero: the small line on the photo goes white */
.rum-theme--amber-rum .phero .kicker {
  color: var(--white);
}

/* Hero title: "Rum" solid white like "Amber", not outlined */
.rum-theme--amber-rum .phero .big .hollow {
  color: var(--white);
  -webkit-text-stroke: 0;
}

/* Lines, frames, medal cards */
.rum-theme--amber-rum .rumdetail,
.rum-theme--amber-rum .serve {
  --rum-line: rgba(198, 51, 43, 0.55);
}

.rum-theme--amber-rum .prize__list li {
  border-color: var(--white);
}

.rum-theme--amber-rum .find {
  border-top-color: rgba(198, 51, 43, 0.45);
}

.rum-theme--amber-rum .foot::before,
.rum-theme--amber-rum .paper::before {
  opacity: 0.1;
}

.rum-theme.rum-theme--amber-rum .foot__grid > img {
  content: url("/assets/img/logo-red-240.webp");
}

/* Every button on this page: red with white words (the medals button had dark words and a gold tab) */
.rum-theme--amber-rum .btn--gold,
.rum-theme--amber-rum .prize .btn--gold,
.rum-theme--amber-rum .serve .btn--gold,
.rum-theme--amber-rum .find .btn--gold {
  --bg: var(--red);
  --tab: var(--red-dark);
  --fg: var(--white);
}


/* ---------- Product pages: no coloured edge round the photos, only a soft shadow (Aged 5YO and Family Reserve already are like that) ---------- */
.rum-theme:not(.rum-theme--aged):not(.rum-theme--family) .rumdetail .frame:not(.frame--render) img {
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
}

/* The cocktail photo at the bottom is a polaroid, like on the Cocktails page, with a soft shadow instead of the black edge */
.rum-theme .serve .frame--polaroid {
  width: min(100%, 420px);
  padding: 12px 12px 0;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.3);
  transform: rotate(-1.5deg);
}

.rum-theme .serve .frame--polaroid::before {
  display: none;
}

.rum-theme .serve .frame--polaroid img {
  border-radius: 3px;
  box-shadow: none;
}

.rum-theme .serve .frame--polaroid figcaption {
  padding: 14px 4px 20px;
  font-family: var(--script);
  font-size: 44px;
  line-height: 1;
  text-align: center;
  color: var(--red);
}


/* ---------- The facts show a render of the bottle instead of a photo ---------- */
.rum-theme .rumdetail .frame--render {
  display: flex;
  justify-content: center;
}

.rum-theme .rumdetail .frame--render::before {
  display: none;
}

.rum-theme .rumdetail .frame--render img {
  width: auto;
  height: clamp(420px, 70vw, 600px);
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 26px 28px rgba(0, 0, 0, 0.32));
}

/* Aged 5YO: the rocks photo as a full hero, the words on the left over a dark fade */
.rum-theme--aged .phero__bg img {
  object-position: 62% 50%;
}

@media (min-width: 900px) {
  .rum-theme--aged .phero__bg {
    left: 0;
    width: 100%;
  }
  .rum-theme--aged .phero::after {
    left: 0;
    background: linear-gradient(to right, rgba(21, 17, 18, 0.85) 0%, rgba(21, 17, 18, 0.5) 36%, rgba(21, 17, 18, 0) 62%);
  }
}

/* Aged: the polaroid words are black (on Amber and White they stay red) */
.rum-theme--aged .serve .frame--polaroid figcaption {
  color: var(--black);
}

/* White Rum: the flat-lay band is wide, so show all of it */
.rum-theme--white .band img,
.rum-theme--white .band img:is(*) {
  aspect-ratio: 4 / 3;
  max-width: 1200px;
}

@media (min-width: 900px) {
  .rum-theme--white .band img {
    aspect-ratio: 4 / 3;
    max-width: 1200px;
  }
}

/* Aged on a phone: the photo runs the full length of the hero, the words sit on it over a dark fade at the bottom */
@media (max-width: 899px) {
  .rum-theme--aged .phero {
    min-height: min(calc(100svh - var(--header-h)), 820px);
  }
  .rum-theme--aged .phero__bg,
  .rum-theme--aged .phero__bg img {
    inset: 0;
    height: 100%;
  }
  .rum-theme--aged .phero__bg img {
    object-position: 58% 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rum-theme--aged .phero::after {
    display: block;
    left: 0;
    background: linear-gradient(to top, rgba(21, 17, 18, 0.88) 0%, rgba(21, 17, 18, 0.7) 18%, rgba(21, 17, 18, 0.3) 38%, rgba(21, 17, 18, 0) 56%);
  }
  .rum-theme--aged .phero__copy {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.55);
  }
}

/* Aged hero: the "Where to buy" words are white, without the text shadow of the hero copy */
.rum-theme--aged .phero .btn {
  text-shadow: none;
}

.rum-theme--aged .phero .btn--gold {
  --fg: var(--white);
}

/* ---------- Flavour pages on a computer: the text sits right beside its photo, the pair centred ----------
   Before, the photo hugged the left edge and the text ran to the right edge with a wide gap in between. */
@media (min-width: 900px) {
  :is(.rum-theme--passionfruit, .rum-theme--coconut, .rum-theme--tamarind, .rum-theme--lemon, .rum-theme--mango, .rum-theme--pineapple) .rumdetail__inner {
    width: min(100% - 2 * var(--gutter), 1200px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
    gap: 48px;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    justify-content: center;
  }
  :is(.rum-theme--passionfruit, .rum-theme--coconut, .rum-theme--tamarind, .rum-theme--lemon, .rum-theme--mango, .rum-theme--pineapple) .rumdetail--dark .rumdetail__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  }
  :is(.rum-theme--passionfruit, .rum-theme--coconut, .rum-theme--tamarind, .rum-theme--lemon, .rum-theme--mango, .rum-theme--pineapple) .rumdetail .frame {
    width: 100%;
    max-width: 520px;
  }
  :is(.rum-theme--passionfruit, .rum-theme--coconut, .rum-theme--tamarind, .rum-theme--lemon, .rum-theme--mango, .rum-theme--pineapple) .rumdetail--dark .frame--render {
    max-width: none;
  }
}

@media (min-width: 900px) {
  :is(.rum-theme--passionfruit, .rum-theme--coconut, .rum-theme--tamarind, .rum-theme--lemon, .rum-theme--mango, .rum-theme--pineapple) .rumdetail--copyfirst .rumdetail__inner {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  }
  :is(.rum-theme--passionfruit, .rum-theme--coconut, .rum-theme--tamarind, .rum-theme--lemon, .rum-theme--mango, .rum-theme--pineapple) .rumdetail--copyfirst .rumdetail__inner > .frame {
    order: -1;
    justify-self: start;
  }
  :is(.rum-theme--passionfruit, .rum-theme--coconut, .rum-theme--tamarind, .rum-theme--lemon, .rum-theme--mango, .rum-theme--pineapple) .rumdetail--dark .rumdetail__inner > .frame {
    order: 1;
    justify-self: end;
  }
}

/* ---------- Amber Rum page: every word that is not red is white ---------- */
.rum-theme--amber-rum,
.rum-theme--amber-rum .rumdetail .notes dd,
.rum-theme--amber-rum .rumdetail .factlist dd,
.rum-theme--amber-rum .prize__sub,
.rum-theme--amber-rum .prize__list span,
.rum-theme--amber-rum .prize__list small,
.rum-theme--amber-rum .serve__copy p:not(.kicker),
.rum-theme--amber-rum .find__more,
.rum-theme--amber-rum .prize .big + p,
.rum-theme--amber-rum .prize p,
.rum-theme--amber-rum .foot,
.rum-theme--amber-rum .foot address,
.rum-theme--amber-rum .foot address a,
.rum-theme--amber-rum .foot__legal a,
.rum-theme--amber-rum .foot__legal button,
.rum-theme--amber-rum .foot__legal,
.rum-theme--amber-rum .foot__fine {
  color: var(--white);
}

/* Amber Rum page: the grey engraving multiplied over gold turns the lines olive-green, so the lines are warmed to a soft red-brown */
.rum-theme--amber-rum .paper::before,
.rum-theme--amber-rum .foot::before {
  filter: sepia(1) saturate(4) hue-rotate(-32deg) brightness(0.95);
  opacity: 0.1;
}

/* Amber Rum page: the gold is fully solid and the watermark is drawn in front of the content, not behind it */
.rum-theme--amber-rum,
.rum-theme--amber-rum .rumdetail,
.rum-theme--amber-rum .prize,
.rum-theme--amber-rum .serve,
.rum-theme--amber-rum .find,
.rum-theme--amber-rum .foot,
.rum-theme--amber-rum .top {
  background-color: #e0b84a;
  opacity: 1;
}

.rum-theme--amber-rum .paper::before,
.rum-theme--amber-rum .foot::before {
  z-index: 5;
  pointer-events: none;
}

/* Amber Rum page: the new engraving of the Punda waterfront, the Queen Juliana Bridge, the fort and a glass on a barrel.
   The lines are already warm red-brown, so the colour filter from before is gone. */
.rum-theme--amber-rum .paper::before,
.rum-theme--amber-rum .foot::before {
  background-image: url("/assets/img/wm-amber-bay.webp?v=1");
  filter: none;
  opacity: 0.22;
}

/* Amber Rum page: the medals, photos and bottle render sit above the watermark, so the engraving never shows through them */
.rum-theme--amber-rum .prize__list,
.rum-theme--amber-rum .rumdetail .frame,
.rum-theme--amber-rum .serve__media {
  position: relative;
  z-index: 6;
}

/* Pineapple Rum: parrot-mural hero, keep the bottle base and crate in view on desktop */
@media (min-width: 900px) {
  .rum-theme--pineapple .phero__bg img { object-position: 50% 78%; }
}