@charset "utf-8";

/*
Theme Name: Salmara - Seafood Restaurant & Oyster Bar HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Illustrated Icons
2. Preloader & Reveals
   2.1 Oyster Open
   2.2 Reveal States
   2.3 Tide Wash
   2.4 Net Overlay
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Accordion
   7.2 Tabs & Arrows
   7.3 Faces & Badges
   7.4 Newsletter
   7.5 Menu Rows
   7.6 Photo Compositions
   7.7 Years Line
   7.8 Voices
   7.9 Cards
   7.10 Hours & Info
8. Sea Pieces
   8.1 Catch Board
   8.2 Oyster List
   8.3 Boats
   8.4 Platter Ring
   8.5 Horizon Band
   8.6 Platter Builder
   8.7 Oyster Tray
   8.8 Fish & Boat Cards
   8.9 Steps, Figures & Links
   8.10 Product Minis
9. Home One
   9.1 Hero Slider
   9.2 Today's Catch
   9.3 Book A Table Bar
   9.4 Mosaic & The Tide
   9.5 The Sea Band
   9.6 Events Band & Sand Band
10. Home Two
   10.1 Hero Two
   10.2 Split Panels
   10.3 Oyster Hour Offer
   10.4 Classes & Shop Rows
11. Home Three
   11.1 Hero Three
   11.2 Philosophy & Rooms
   11.3 Sand Call To Action
12. Inner Pages
   12.1 Sidebar & Widgets
   12.2 Rows, Choices & Pages
   12.3 Quantity Stepper
13. Booking, Box & Class Pages
   13.1 Panels & Wizards
   13.2 Menu Page
   13.3 The Week
   13.4 Oysters At Home Builder
   13.5 Classes Calendar
   13.6 Class & Seats
   13.7 Private Events
   13.8 History & Chef
   13.9 Gallery
   13.10 Account Dashboard
   13.11 Contact & Articles
14. Table Shop
   14.1 Shop Grid
   14.2 Product Page
   14.3 Bag, Checkout & Wishlist
   14.4 Toast
15. Blog & Account
   15.1 Blog List
   15.2 Blog Details
   15.3 Account Pages
   15.4 Coming Soon & 404
16. Subheader
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand */
  --mr-deep: #0F1D24;
  --mr-deep-rgb: 15, 29, 36;
  --mr-deep-2: #0A151B;
  --mr-deep-3: #1A2C35;
  --mr-tide: #225F86;
  --mr-tide-rgb: 34, 95, 134;
  --mr-tide-deep: #1A4B6C;
  --mr-foam: #9CC9E4;
  --mr-leader: #B9C2C5;
  --mr-coral: #B8452C;
  --mr-sand-fixed: #ECE4D6;
  --mr-wet: #D9CCB6;
  --mr-wet-rgb: 217, 204, 182;
  --mr-mist-fixed: #F1F5F6;
  /* the pale ground the tableware photographs sit on, the same in both themes */
  --mr-product: #F3F4F4;
  /* semantic (the dark theme swaps these) */
  --mr-bg: #FFFFFF;
  --mr-bg-rgb: 255, 255, 255;
  --mr-surface: #FFFFFF;
  --mr-surface-rgb: 255, 255, 255;
  --mr-mist: #F1F5F6;
  --mr-mist-rgb: 241, 245, 246;
  --mr-mist-2: #F8FAFB;
  --mr-sand: #ECE4D6;
  --mr-heading: #0F1D24;
  --mr-heading-rgb: 15, 29, 36;
  --mr-text: #4A555B;
  --mr-muted: #66727A;
  --mr-line: #DFE5E7;
  --mr-line-2: #B9C2C5;
  --mr-field: #F1F5F6;
  --mr-primary: #0F1D24;
  --mr-on-primary: #FFFFFF;
  --mr-accent-text: #225F86;
  --mr-coral-text: #B8452C;
  --mr-leaf: #2F7D5B;
  --mr-leaf-text: #24694B;
  --mr-sea: #1D587D;
  --mr-sea-rgb: 29, 88, 125;
  --mr-shadow: 0 18px 44px rgba(15, 29, 36, 0.08);
  --mr-shadow-lg: 0 30px 70px rgba(15, 29, 36, 0.14);
  --mr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type */
  --mr-ff-display: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --mr-ff-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --mr-fs-h1: clamp(42px, 4.4vw, 74px);
  --mr-fs-h2: clamp(30px, 2.55vw, 44px);
  --mr-fs-h3: clamp(22px, 1.6vw, 27px);
  --mr-fs-h4: 21px;
  --mr-fs-h5: 18px;
  --mr-fs-h6: 15.5px;
  /* WebGL colours (per section below) */
  --gl-1: #ECE4D6;
  --gl-2: #CDBFA6;
  --gl-3: #FFFDF8;
  --gl-alpha: 0.85;
}
[data-theme="dark"] {
  --mr-bg: #0B161C;
  --mr-bg-rgb: 11, 22, 28;
  --mr-surface: #111F27;
  --mr-surface-rgb: 17, 31, 39;
  --mr-mist: #13232C;
  --mr-mist-rgb: 19, 35, 44;
  --mr-mist-2: #0F1C23;
  --mr-sand: #1D1B17;
  --mr-heading: #EEF2F3;
  --mr-heading-rgb: 238, 242, 243;
  --mr-text: #B9C4C9;
  --mr-muted: #93A1A8;
  --mr-line: rgba(238, 242, 243, 0.12);
  --mr-line-2: rgba(238, 242, 243, 0.26);
  --mr-field: #172A34;
  --mr-primary: #EEF2F3;
  --mr-on-primary: #0B161C;
  --mr-accent-text: #7DB7DA;
  --mr-coral-text: #F08C74;
  --mr-leaf-text: #7FCBA6;
  --mr-sea: #12384F;
  --mr-sea-rgb: 18, 56, 79;
  --mr-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  --mr-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.45);
  --gl-1: #1D1B17;
  --gl-2: #121110;
  --gl-3: #3A3428;
  --gl-alpha: 0.9;
}
/* sea bands: tide blue in light, deep water in dark, white copy */
.is-sea {
  --mr-heading: #FFFFFF;
  --mr-heading-rgb: 255, 255, 255;
  --mr-text: rgba(255, 255, 255, 0.86);
  --mr-muted: rgba(255, 255, 255, 0.72);
  --mr-line: rgba(255, 255, 255, 0.18);
  --mr-line-2: rgba(255, 255, 255, 0.34);
  --mr-accent-text: #BFE0F3;
  --mr-coral-text: #FFB6A3;
  --mr-leaf-text: #A8E6C8;
  --mr-surface: #23658F;
  --mr-surface-rgb: 35, 101, 143;
  --mr-field: rgba(255, 255, 255, 0.1);
  --mr-primary: #FFFFFF;
  --mr-on-primary: #0F1D24;
  background-color: var(--mr-sea);
  color: var(--mr-text);
}
/* a light card placed inside a sea band keeps its own ink */
.is-sea .mr-on-light {
  --mr-heading: #0F1D24;
  --mr-text: #4A555B;
  --mr-muted: #66727A;
  --mr-line: #DFE5E7;
  --mr-accent-text: #225F86;
  --mr-coral-text: #B8452C;
  --mr-surface: #FFFFFF;
  --mr-field: #F1F5F6;
  --mr-primary: #0F1D24;
  --mr-on-primary: #FFFFFF;
}
[data-theme="dark"] .is-sea .mr-on-light {
  --mr-heading: #EEF2F3;
  --mr-text: #B9C4C9;
  --mr-muted: #93A1A8;
  --mr-line: rgba(238, 242, 243, 0.12);
  --mr-accent-text: #7DB7DA;
  --mr-coral-text: #F08C74;
  --mr-surface: #111F27;
  --mr-field: #172A34;
  --mr-primary: #EEF2F3;
  --mr-on-primary: #0B161C;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--mr-bg);
  color: var(--mr-text);
  font-family: var(--mr-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--mr-ease), background-color 0.3s var(--mr-ease);
}
a:hover {
  color: var(--mr-accent-text);
}
::selection {
  background: var(--mr-tide);
  color: #FFFFFF;
}
:focus-visible {
  outline: 2px solid var(--mr-tide);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: light condensed capitals for every heading, Work Sans for everything that is read */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-weight: 400;
  text-transform: uppercase;
}
h1 {
  font-size: var(--mr-fs-h1);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: 0.06em;
}
h2 {
  font-size: var(--mr-fs-h2);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: 0.07em;
}
h3 {
  font-size: var(--mr-fs-h3);
  line-height: 1.24;
  letter-spacing: 0.06em;
}
h4 {
  font-size: var(--mr-fs-h4);
  line-height: 1.3;
  letter-spacing: 0.06em;
}
h5 {
  font-size: var(--mr-fs-h5);
  line-height: 1.34;
  letter-spacing: 0.07em;
}
h6 {
  font-size: var(--mr-fs-h6);
  line-height: 1.4;
  letter-spacing: 0.08em;
}
/* a heading at its outline level that looks like another level */
.mr-h2 {
  font-size: var(--mr-fs-h2);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: 0.07em;
}
.mr-h3 {
  font-size: var(--mr-fs-h3);
  font-weight: 400;
  line-height: 1.24;
}
.mr-h4 {
  font-size: var(--mr-fs-h4);
  font-weight: 400;
  line-height: 1.3;
}
.mr-h5 {
  font-size: var(--mr-fs-h5);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: 0.07em;
}
.mr-h6 {
  font-size: var(--mr-fs-h6);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--mr-accent-text);
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.mr-lead {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--mr-text);
}
.mr-caps {
  font-family: var(--mr-ff-body);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mr-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.mr-bg-mist {
  background-color: var(--mr-mist);
}
.mr-bg-mist-2 {
  background-color: var(--mr-mist-2);
}
/* the sand band: wind ripples (WebGL) over the sand colour, one per page */
.mr-bg-sand {
  position: relative;
  isolation: isolate;
  background-color: var(--mr-sand);
  --mr-field: #FFFFFF;
  /* small grey text stays AA on the sand */
  --mr-muted: #56626A;
}
[data-theme="dark"] .mr-bg-sand {
  --mr-field: var(--mr-surface);
  --mr-muted: #93A1A8;
}
/* photo band: one style everywhere (cover photo under a sea-ink wash from the copy side, white copy) */
.mr-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--mr-deep);
  --mr-heading: #FFFFFF;
  --mr-text: rgba(255, 255, 255, 0.88);
  --mr-muted: rgba(255, 255, 255, 0.74);
  --mr-accent-text: #BFE0F3;
  --mr-primary: #FFFFFF;
  --mr-on-primary: #0F1D24;
  color: var(--mr-text);
}
.mr-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mr-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 30, 42, 0.92) 0%, rgba(10, 30, 42, 0.76) 42%, rgba(10, 30, 42, 0.22) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: tracked caps above, light condensed capitals, a short thin rule */
.mr-title {
  margin-bottom: 60px;
}
.mr-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--mr-accent-text);
  font-family: var(--mr-ff-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.mr-title h2 {
  max-width: 820px;
}
/* the base's 40px rule under a title */
.mr-rule {
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 26px;
  background: var(--mr-heading);
  transform-origin: left center;
}
.mr-title .mr-lead {
  max-width: 640px;
  margin: 24px 0 0;
}
.mr-title.text-center h2,
.mr-title.text-center .mr-lead {
  margin-left: auto;
  margin-right: auto;
}
.mr-title.text-center .mr-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.mr-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.mr-title.is-split .mr-lead {
  max-width: 520px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's button: a solid ink block with widely tracked small caps */
.mr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: 0;
  background: var(--mr-primary);
  color: var(--mr-on-primary);
  font-family: var(--mr-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--mr-ease), color 0.35s var(--mr-ease), box-shadow 0.35s var(--mr-ease), transform 0.35s var(--mr-ease);
}
.mr-btn i {
  position: relative;
  font-size: 12px;
  transition: transform 0.4s var(--mr-ease), opacity 0.3s ease;
}
/* house physics: the button lifts, its arrow slides out and a twin slides in behind it */
.mr-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mr-btn:hover {
  background: var(--mr-tide);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--mr-tide-rgb), 0.24);
  transform: translateY(-2px);
}
.mr-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.mr-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.mr-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.mr-btn.is-tide {
  background: var(--mr-tide);
  color: #FFFFFF;
}
.mr-btn.is-tide:hover {
  background: var(--mr-deep);
}
.mr-btn.is-tonal {
  background: var(--mr-mist);
  color: var(--mr-heading);
}
.mr-btn.is-tonal i {
  color: var(--mr-accent-text);
}
/* on a mist or sand ground the tonal face turns white so it still reads as a button */
.mr-bg-mist .mr-btn.is-tonal,
.mr-bg-sand .mr-btn.is-tonal {
  background: var(--mr-surface);
}
.mr-btn.is-tonal:hover {
  background: var(--mr-tide);
  color: #FFFFFF;
}
.mr-btn.is-tonal:hover i {
  color: #FFFFFF;
}
.mr-btn.is-light {
  background: #FFFFFF;
  color: var(--mr-deep);
}
.mr-btn.is-light:hover {
  background: var(--mr-tide);
  color: #FFFFFF;
}
.mr-btn.is-sm {
  height: 42px;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: 0.22em;
}
.mr-btn.is-block {
  width: 100%;
}
.is-sea .mr-btn.is-tonal,
.mr-photo-band .mr-btn.is-tonal {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.is-sea .mr-btn.is-tonal i,
.mr-photo-band .mr-btn.is-tonal i {
  color: var(--mr-foam);
}
.is-sea .mr-btn:hover,
.mr-photo-band .mr-btn:hover {
  background: #FFFFFF;
  color: var(--mr-deep);
}
/* the base's "discover": small tracked caps with a short line under the first letters */
.mr-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.mr-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--mr-ease);
}
.mr-more i {
  font-size: 11px;
  transition: transform 0.35s var(--mr-ease);
}
.mr-more:hover {
  color: var(--mr-accent-text);
}
.mr-more:hover::after {
  width: 100%;
}
.mr-more:hover i {
  transform: translateX(4px);
}
.mr-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}

/*----- 1.5 Forms -----*/
.mr-field {
  position: relative;
  margin-bottom: 20px;
}
.mr-field label,
.mr-label {
  display: block;
  margin-bottom: 8px;
  color: var(--mr-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* tonal fields: a mist face, no outline; the focus draws a tide line under them */
.mr-input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 50px 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: var(--mr-field);
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 15.5px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.mr-bg-mist .mr-input {
  background: var(--mr-surface);
}
textarea.mr-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.mr-input::placeholder {
  color: var(--mr-muted);
}
.mr-input:focus {
  border-bottom-color: var(--mr-tide);
  box-shadow: 0 6px 18px rgba(var(--mr-tide-rgb), 0.12);
  outline: 0;
}
.mr-input.is-invalid {
  border-bottom-color: var(--mr-coral);
  box-shadow: inset 0 -1px 0 var(--mr-coral);
}
.mr-field > i {
  position: absolute;
  right: 20px;
  top: 48px;
  color: var(--mr-accent-text);
  font-size: 14px;
  pointer-events: none;
}
.mr-field.is-area > i {
  top: 52px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--mr-muted);
}
.form-status.is-ok {
  color: var(--mr-leaf-text);
}
.form-status.is-error {
  color: var(--mr-coral-text);
}
.mr-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.mr-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--mr-tide);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.mr-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mr-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--mr-ease);
}
.mr-social a:hover {
  background: var(--mr-tide);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.is-sea .mr-social a {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.mr-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
/* the base's play ring: a thin white circle with a solid triangle */
.mr-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 22px;
  transition: transform 0.4s var(--mr-ease), background-color 0.4s ease, color 0.4s ease;
}
.mr-play i {
  margin-left: 4px;
}
.mr-play:hover {
  background: #FFFFFF;
  color: var(--mr-deep);
  transform: scale(1.06);
}
/* progress line (seats taken, a box's places): filled by the engines */
.mr-meter {
  position: relative;
  height: 3px;
  background: var(--mr-line);
}
.mr-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--mr-tide);
  transition: width 1.2s var(--mr-ease);
}
.mr-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--mr-tide);
  font-size: 12px;
}
/* a small tracked-caps tag (New, Sale, Few seats left) */
.mr-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mr-accent-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mr-tag.is-red {
  color: var(--mr-coral-text);
}
.mr-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--mr-deep);
  color: #FFFFFF;
  font-size: 14.5px;
  box-shadow: var(--mr-shadow-lg);
  transform: translate(-50%, 140%);
  transition: transform 0.5s var(--mr-ease);
}
.mr-toast i {
  color: var(--mr-foam);
}
.mr-toast.is-shown {
  transform: translate(-50%, 0);
}
.mr-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--mr-deep);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--mr-ease), background-color 0.3s ease;
}
[data-theme="dark"] .mr-back-top {
  background: var(--mr-tide);
}
.mr-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mr-back-top:hover {
  background: var(--mr-tide);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.mr-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.mr-gl.is-on {
  opacity: 1;
}

/*----- 1.7 Illustrated Icons -----*/
.mr-ico {
  display: inline-flex;
  flex-shrink: 0;
}
.mr-ico img {
  width: 100%;
  height: 100%;
}
.mr-ico .ico-night,
[data-theme="dark"] .mr-ico .ico-day,
.is-sea .mr-ico .ico-day,
.mr-photo-band .mr-ico .ico-day {
  display: none;
}
[data-theme="dark"] .mr-ico .ico-night,
.is-sea .mr-ico .ico-night,
.mr-photo-band .mr-ico .ico-night {
  display: block;
}
.is-sea .mr-on-light .mr-ico .ico-night {
  display: none;
}
.is-sea .mr-on-light .mr-ico .ico-day {
  display: block;
}
[data-theme="dark"] .is-sea .mr-on-light .mr-ico .ico-night {
  display: block;
}
[data-theme="dark"] .is-sea .mr-on-light .mr-ico .ico-day {
  display: none;
}

/*======================
2. Preloader & Reveals
========================*/
/*----- 2.1 Oyster Open -----*/
/* a closed oyster above the wordmark; the lid hinges open at its left end, the pearl rises out
   of the shell and settles into the first letter of the wordmark (its place measured from the logo) */
.mr-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mr-bg);
}
.no-js .mr-preloader {
  display: none;
}
.mr-preloader .pre-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.mr-preloader .pre-oyster {
  position: relative;
  width: 176px;
  height: 92px;
}
.mr-preloader .pre-oyster img {
  position: absolute;
  left: 0;
  display: block;
}
.mr-preloader .shell-bottom {
  bottom: 0;
  width: 173px;
}
.mr-preloader .shell-top {
  bottom: 30px;
  left: 2px;
  width: 176px;
  transform-origin: 4% 82%;
}
/* where the pearl sits on the meat before it lifts */
.mr-preloader .pre-seat {
  position: absolute;
  left: 52%;
  bottom: 44px;
  width: 2px;
  height: 2px;
}
.mr-preloader .pre-word {
  position: relative;
  height: 48px;
}
.mr-preloader .pre-word img {
  display: block;
  height: 48px;
  width: auto;
}
.mr-preloader .pre-word .logo-light {
  display: none;
}
[data-theme="dark"] .mr-preloader .pre-word .logo-main {
  display: none;
}
[data-theme="dark"] .mr-preloader .pre-word .logo-light {
  display: block;
}
.mr-preloader .pre-word img + img {
  position: absolute;
  left: 0;
  top: 0;
}
/* the pearl: the wordmark's dot (the logo files carry the same pearl at the same place) */
.mr-preloader .pre-dot {
  position: absolute;
  left: 29.05%;
  top: 77.73%;
  width: 9.1px;
  height: 9.1px;
  margin: -4.55px 0 0 -4.55px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 7%, #A9CBE0 20%, #3E7FA8 52%, #1A4B6C 86%, #12384F 100%);
  box-shadow: 0 1px 3px rgba(15, 29, 36, 0.25);
}
[data-theme="dark"] .mr-preloader .pre-dot {
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 12%, #EEF4F8 30%, #C5DBE8 64%, #93B8CF 100%);
}

/*----- 2.2 Reveal States -----*/
/* nothing is hidden by CSS: the reveal engine sets every start state itself, so
   every skip path (reduced motion, no script, a hidden tab) leaves the page as authored */
.mr-rule {
  will-change: transform;
}

/*----- 2.3 Tide Wash -----*/
/* a photo the tide uncovers: the reveal engine draws its wave edge as a clip-path */
.mr-tide {
  position: relative;
  overflow: hidden;
}

/*----- 2.4 Net Overlay -----*/
/* the hover accent: a fine fishing net fades in over a card's photo, settling as it lands */
.mr-net {
  position: relative;
  overflow: hidden;
}
.mr-net::after {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 3;
  background: url(../img/textures/net.png) center / 88px 88px repeat, linear-gradient(160deg, rgba(var(--mr-tide-rgb), 0.08), rgba(var(--mr-tide-rgb), 0.26));
  opacity: 0;
  transform: scale(1.1) rotate(-1.5deg);
  transition: opacity 0.5s ease, transform 0.9s var(--mr-ease);
  pointer-events: none;
}
.mr-net:hover::after,
a:hover > .mr-net::after,
.mr-net:focus-within::after,
.mr-net-host:hover .mr-net::after {
  opacity: 1;
  transform: none;
}
.mr-net img {
  transition: transform 1.1s var(--mr-ease);
}
.mr-net:hover img,
.mr-net-host:hover .mr-net img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .mr-net::after,
  .mr-net img {
    transition: none;
  }
}

/*======================
3. Header
========================*/
/* Salmara's header, in the base's three moods - all white and airy: style one splits the menu round a centred
   wordmark with the Book button at the far left (Home 1 and the inner pages), style two puts the wordmark on the left
   and the menu in the middle (Home 2), style three is the compact bar without the top line (Home 3). */
.mr-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--mr-surface);
  --hd-ink: var(--mr-heading);
  --hd-hover: var(--mr-accent-text);
  --hd-icon: var(--mr-mist);
  --hd-line: var(--mr-line);
}
.mr-header .wide {
  display: flex;
  align-items: center;
  padding: 0 40px;
}
.mr-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.mr-logo img {
  height: 30px;
  width: auto;
}
.mr-logo .logo-light,
[data-theme="dark"] .mr-logo .logo-main {
  display: none;
}
[data-theme="dark"] .mr-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 40px;
  background: var(--mr-mist);
  color: var(--mr-text);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  overflow: visible;
  transition: height 0.4s var(--mr-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-top a:hover {
  color: var(--mr-accent-text);
}
.header-top i {
  margin-right: 6px;
  color: var(--mr-accent-text);
}
.top-phone b {
  margin-left: 4px;
  font-weight: 600;
}
.mr-open {
  display: inline-flex;
  align-items: center;
}
.mr-open::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.mr-open.is-open::before {
  opacity: 1;
  background: var(--mr-leaf);
  box-shadow: 0 0 0 4px rgba(47, 125, 91, 0.16);
}
/* Oyster Hour: a small pearl that brightens while it runs */
.mr-hour {
  display: inline-flex;
  align-items: center;
}
.mr-hour::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 10%, #A9CBE0 30%, #3E7FA8 70%, #1A4B6C 100%);
  opacity: 0.55;
}
.mr-hour.is-on::before {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(var(--mr-tide-rgb), 0.16);
}
.header-top .top-right > a {
  position: relative;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 1px;
  height: 11px;
  background: var(--mr-line-2);
  transform: translateY(-50%);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 92px;
  gap: 36px;
}
/* style one: [Book + left menu] [wordmark] [right menu + actions] */
.header-style-one .header-main .wide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.hd-side {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
}
.hd-side.is-right {
  justify-content: flex-end;
}
.header-style-one .mr-logo {
  justify-self: center;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--mr-tide);
  color: #FFFFFF;
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mr-tide);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.mr-theme-toggle .ti-sun,
[data-theme="dark"] .mr-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .mr-theme-toggle .ti-sun {
  display: inline-block;
}
/* the base's black Reserve block at the far left */
.header-book {
  flex-shrink: 0;
}
.header-style-two .header-book,
.header-style-three .header-book {
  margin-left: 8px;
}
/* the base's two-line menu mark */
.mr-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 44px;
  height: 42px;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.mr-menu-toggle span {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--hd-ink);
  transition: width 0.3s var(--mr-ease);
}
.mr-menu-toggle span:nth-child(2) {
  width: 26px;
}
.mr-menu-toggle span:nth-child(3) {
  width: 18px;
}
.mr-menu-toggle:hover span {
  width: 26px;
}
/* style three: the compact bar without the top line */
.header-style-three .header-main .wide {
  height: 84px;
}

/*----- 3.3 Main Menu -----*/
.mr-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mr-nav li {
  position: relative;
}
.mr-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 36px 0;
  color: var(--hd-ink);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mr-nav > ul > li > a i {
  font-size: 7px;
  opacity: 0.55;
  transition: transform 0.3s var(--mr-ease);
}
.mr-nav > ul > li:hover > a,
.mr-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.mr-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.mr-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 18px 0;
  list-style: none;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--mr-ease), transform 0.35s var(--mr-ease), visibility 0.3s;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.mr-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.mr-nav li:hover > .sub-menu,
.mr-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mr-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 28px;
  color: var(--mr-heading);
  font-size: 14.5px;
  font-weight: 400;
  transition: color 0.3s var(--mr-ease), padding 0.35s var(--mr-ease);
}
.mr-nav .sub-menu a i {
  font-size: 9px;
  color: var(--mr-muted);
}
.mr-nav .sub-menu li:hover > a,
.mr-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--mr-accent-text);
}
.mr-nav .sub-menu .sub-menu {
  top: -18px;
  left: 100%;
}
.mr-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}
/* the right-hand menu of style one opens its third level to the left, inside the window */
.mr-nav.is-right .sub-menu {
  left: auto;
  right: -28px;
}
.mr-nav.is-right .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.mr-nav.is-right .sub-menu .sub-menu::before {
  left: auto;
  right: -12px;
}

/*----- 3.4 Home Mega Menu -----*/
.mr-nav .has-mega {
  position: static;
}
.mr-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(960px, calc(100vw - 60px));
  padding: 30px;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--mr-ease), transform 0.35s var(--mr-ease), visibility 0.3s;
}
.mr-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.mr-nav .has-mega:hover > .mega-menu,
.mr-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--mr-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--mr-mist);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--mr-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--mr-accent-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--mr-ff-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--mr-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.mr-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: mr-header-in 0.6s var(--mr-ease) both;
}
.mr-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.mr-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(15, 29, 36, 0.1);
}
.mr-header.is-sticky .header-main .wide {
  height: 76px;
}
.mr-header.is-sticky .mr-nav > ul > li > a {
  padding: 28px 0;
}
.mr-header-spacer {
  display: none;
}
.mr-header-spacer.is-on {
  display: block;
}
@keyframes mr-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.mr-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--mr-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--mr-ease), box-shadow 0.6s var(--mr-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.mr-offcanvas.open {
  box-shadow: var(--mr-shadow-lg);
  transform: none;
}
.mr-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 30, 42, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mr-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--mr-line);
}
.offcanvas-head .mr-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--mr-ease);
}
.offcanvas-close:hover {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--mr-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--mr-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--mr-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--mr-line);
  color: var(--mr-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--mr-tide);
  color: var(--mr-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--mr-ff-display);
  font-size: 30px;
  line-height: 1.2;
  color: var(--mr-tide);
}
.oc-phone {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 500;
}
.oc-mail {
  color: var(--mr-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.mr-select {
  position: relative;
}
.mr-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.mr-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--mr-field);
  font-size: 15px;
  text-align: left;
  color: var(--mr-heading);
  transition: border-color 0.3s var(--mr-ease), background-color 0.3s ease;
}
/* tonal like every field: white on mist and sand grounds, mist again inside a white panel there */
.mr-bg-mist .mr-select .select-button,
.mr-bg-sand .mr-select .select-button {
  background: var(--mr-surface);
}
.mr-bg-mist .mr-panel .select-button,
.mr-bg-mist .split-panel .select-button,
.mr-bg-mist .mr-panel .mr-input,
.mr-bg-mist .split-panel .mr-input {
  background: var(--mr-mist);
}
.mr-select.is-open .select-button,
.mr-select .select-button:hover {
  border-bottom-color: var(--mr-tide);
}
.mr-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mr-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--mr-accent-text);
  transition: transform 0.35s var(--mr-ease);
}
.mr-select.is-open .select-button i {
  transform: rotate(180deg);
}
.mr-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--mr-surface);
  border-top: 2px solid var(--mr-tide);
  box-shadow: var(--mr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--mr-ease), transform 0.3s var(--mr-ease), visibility 0.3s;
}
.mr-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--mr-tide);
  transform: translateY(-10px);
}
.mr-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mr-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--mr-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--mr-ease), color 0.2s var(--mr-ease);
}
.mr-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mr-accent-text);
}
.mr-select .select-option .option-meta.is-none {
  color: var(--mr-muted);
}
.mr-select .select-option.is-focused,
.mr-select .select-option:hover {
  background-color: var(--mr-mist);
}
.mr-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.mr-select .select-option.is-selected {
  color: var(--mr-accent-text);
}
.mr-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--mr-accent-text);
}
.mr-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--mr-mist);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.mr-lang {
  position: relative;
  flex-shrink: 0;
}
.mr-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: var(--mr-surface);
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mr-lang .lang-btn:hover,
.mr-lang .lang-btn[aria-expanded="true"] {
  background: var(--mr-tide);
  color: #FFFFFF;
}
.mr-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.mr-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.mr-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.mr-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--mr-mist);
  color: var(--mr-heading);
}
.mr-lang.is-icon .lang-btn:hover,
.mr-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--mr-deep);
  color: #FFFFFF;
}
.mr-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow-lg);
  font-family: var(--mr-ff-body);
  text-align: start;
  white-space: normal;
}
.mr-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.mr-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.mr-lang .lang-menu[hidden] {
  display: none;
}
.mr-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mr-muted);
}
.mr-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mr-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mr-line);
}
.mr-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.mr-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mr-muted);
}
.mr-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--mr-accent-text);
  opacity: 0;
}
.mr-lang .lang-item:hover,
.mr-lang .lang-item[aria-pressed="true"] {
  background: var(--mr-mist);
}
.mr-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.mr-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.mr-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--mr-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mr-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Accordion -----*/
.mr-accordion .acc-item {
  border-bottom: 1px solid var(--mr-line);
}
.mr-accordion .acc-item:first-child {
  border-top: 1px solid var(--mr-line);
}
.mr-accordion .acc-title {
  margin: 0;
  font-size: inherit;
  text-transform: none;
}
.mr-accordion .acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.mr-accordion .acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-accent-text);
  font-size: 11px;
  transition: transform 0.35s var(--mr-ease), background-color 0.3s ease, color 0.3s ease;
}
.mr-bg-mist .mr-accordion .acc-head i,
.mr-bg-sand .mr-accordion .acc-head i {
  background: var(--mr-surface);
}
.mr-accordion .acc-item.is-open .acc-head {
  color: var(--mr-accent-text);
}
.mr-accordion .acc-item.is-open .acc-head i {
  transform: rotate(45deg);
  background: var(--mr-tide);
  color: #FFFFFF;
}
.mr-accordion .acc-body {
  padding: 0 50px 24px 0;
}
.mr-accordion .acc-item.is-unmatched {
  display: none;
}

/*----- 7.2 Tabs & Arrows -----*/
.mr-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.mr-filter-tabs button {
  height: 42px;
  padding: 0 22px;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mr-bg-mist .mr-filter-tabs button,
.mr-bg-sand .mr-filter-tabs button {
  background: var(--mr-surface);
}
.mr-filter-tabs button:hover {
  color: var(--mr-accent-text);
}
.mr-filter-tabs button.is-active {
  background: var(--mr-primary);
  color: var(--mr-on-primary);
}
.mr-filter-tabs.is-sm {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 22px;
}
.mr-filter-tabs.is-sm button {
  height: 36px;
  padding: 0 16px;
  font-size: 10.5px;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
/* the base's thin chevrons */
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--mr-ease);
}
.slider-arrow:hover {
  background: var(--mr-tide);
  color: #FFFFFF;
}
.is-sea .slider-arrow {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.is-sea .slider-arrow:hover {
  background: #FFFFFF;
  color: var(--mr-deep);
}

/*----- 7.3 Faces & Badges -----*/
.mr-avatars {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.mr-avatars .faces {
  display: flex;
}
.mr-avatars .faces img,
.mr-avatars .faces .more {
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border: 3px solid var(--mr-bg);
  border-radius: 50%;
  object-fit: cover;
}
.mr-bg-mist .mr-avatars .faces img,
.mr-bg-mist .mr-avatars .faces .more {
  border-color: var(--mr-mist);
}
.mr-avatars .faces img:first-child {
  margin-left: 0;
}
.mr-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mr-tide);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}
.mr-avatars .txt {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--mr-muted);
}
.mr-avatars .txt b {
  color: var(--mr-heading);
  font-size: 14.5px;
  font-weight: 600;
}
.is-sea .mr-avatars .faces img,
.is-sea .mr-avatars .faces .more {
  border-color: var(--mr-sea);
}
.mr-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--mr-mist);
  color: var(--mr-heading);
}
.mr-review > i {
  font-size: 22px;
  color: var(--mr-accent-text);
}
.mr-review .rv-score {
  font-family: var(--mr-ff-display);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}
.mr-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mr-review small {
  color: var(--mr-muted);
  font-size: 13px;
}
.is-sea .mr-review {
  background: rgba(255, 255, 255, 0.1);
}

/*----- 7.4 Newsletter -----*/
/* the base's underline field with a paper plane */
.mr-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 440px;
}
.mr-newsletter input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 52px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--mr-line-2);
  border-radius: 0;
  background: var(--mr-field);
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 15px;
}
.mr-bg-mist .mr-newsletter input,
.mr-bg-sand .mr-newsletter input {
  background: var(--mr-surface);
}
.mr-newsletter input::placeholder {
  color: var(--mr-muted);
}
.mr-newsletter input:focus {
  border-bottom-color: var(--mr-tide);
  outline: 0;
}
.mr-newsletter button {
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  height: 52px;
  color: var(--mr-accent-text);
  font-size: 16px;
  transition: color 0.3s ease, transform 0.3s var(--mr-ease);
}
.mr-newsletter button:hover {
  color: var(--mr-heading);
  transform: translateX(3px);
}
.mr-newsletter .form-status {
  flex-basis: 100%;
}

/*----- 7.5 Menu Rows -----*/
/* the base's menu: a dish in light condensed caps, a fine dotted leader, the price; a star on the chef's picks */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-row .mr-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.menu-row .mr-name {
  margin: 0;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mr-star {
  margin-right: 8px;
  color: var(--mr-tide);
  font-size: 10px;
  vertical-align: 2px;
}
.mr-dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--mr-leader);
  transform: translateY(-4px);
}
.menu-row .mr-price {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 19px;
  font-weight: 300;
  white-space: nowrap;
}
.menu-row .mr-note {
  margin: 2px 0 0;
  color: var(--mr-muted);
  font-size: 14.5px;
}
.menu-row .mr-tag {
  display: inline-block;
  margin-left: 4px;
  color: var(--mr-leaf-text);
  font-size: 10px;
  letter-spacing: 0.14em;
}

/*----- 7.6 Photo Compositions -----*/
/* the base's overlapping pair: a tall photo, a square one stepping over its corner */
.offset-pair {
  position: relative;
  padding: 0 0 70px;
}
.offset-pair .op-tall {
  width: 58%;
  aspect-ratio: 378 / 575;
}
.offset-pair .op-square {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  aspect-ratio: 1;
  box-shadow: var(--mr-shadow-lg);
}
.offset-pair.is-flip .op-tall {
  margin-left: auto;
}
.offset-pair.is-flip .op-square {
  right: auto;
  left: 0;
}
.offset-pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tall-photo {
  position: relative;
  aspect-ratio: 4 / 5;
}
.tall-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mr-video-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(420px, 44vw, 720px);
  overflow: clip;
  background: var(--mr-deep);
}
.mr-video-band .vb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mr-video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 42, 0.32);
}
.mr-video-band .mr-play {
  position: relative;
  z-index: 2;
}
/* label / value rows (no bullet lists) */
.kv-rows {
  margin: 26px 0 32px;
}
.kv-rows li,
.mr-facts li,
.rc-facts li,
.bc-facts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mr-line);
  font-size: 14.5px;
}
.kv-rows li:first-child {
  border-top: 1px solid var(--mr-line);
}
.kv-rows li span,
.mr-facts li span,
.rc-facts li span,
.bc-facts li span {
  color: var(--mr-muted);
}
.kv-rows li b,
.mr-facts li b,
.rc-facts li b,
.bc-facts li b {
  color: var(--mr-heading);
  font-weight: 500;
  text-align: right;
}
/* an icon beside a name and a line (the about page's three ways to sit) */
.kind-rows {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 30px;
}
.kind-rows li {
  display: flex;
  align-items: center;
  gap: 20px;
}
.kind-rows .mr-ico {
  width: 58px;
  height: 58px;
}
.kind-rows span {
  display: flex;
  flex-direction: column;
  color: var(--mr-muted);
  font-size: 14.5px;
}
.kind-rows b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*----- 7.7 Years Line -----*/
/* a hairline, the years alternating above and below it, each with its drawn icon */
.years-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 26px;
  padding: 10px 0;
}
.years-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--mr-line-2);
}
.yl-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 14px;
}
.yl-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 10%, #A9CBE0 30%, #3E7FA8 70%, #1A4B6C 100%);
}
.yl-item.is-up > * {
  grid-row: 1;
  align-self: end;
  padding-bottom: 34px;
}
.yl-item.is-down > * {
  grid-row: 2;
  align-self: start;
  padding-top: 34px;
}
.yl-badge .mr-ico {
  width: 54px;
  height: 54px;
}
.yl-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.yl-year {
  color: var(--mr-accent-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
}
.yl-copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

/*----- 7.8 Voices -----*/
/* the base's quote: a closing mark, the words in light capitals, the name in tracked caps, thin chevrons either side */
.voices-glyph {
  display: block;
  height: 46px;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 84px;
  font-weight: 400;
  line-height: 1;
}
.voices-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}
.voices-slider {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
}
.voice {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.voice-face {
  width: 80px;
  height: 80px;
  margin: 0 auto 26px;
  border-radius: 50%;
  object-fit: cover;
}
.voice-mark {
  display: none;
}
.voice blockquote {
  margin: 0;
}
.voice-q {
  margin: 0;
  color: var(--mr-text);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.8;
}
.voice figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
}
.voice figcaption b {
  color: var(--mr-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.voice figcaption small {
  color: var(--mr-muted);
  font-size: 14px;
}
.voices-foot {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/*----- 7.9 Cards -----*/
/* house hover physics on every card: a lift, a softer shadow, the photo easing in, the net over it */
.class-card,
.room-card,
.box-card,
.post-card,
.team-card,
.fish-card,
.boat-card {
  height: 100%;
  background: var(--mr-surface);
  transition: transform 0.45s var(--mr-ease), box-shadow 0.45s var(--mr-ease);
}
.mr-bg-mist .class-card,
.mr-bg-mist .room-card,
.mr-bg-mist .team-card,
.mr-bg-sand .class-card,
.mr-bg-sand .box-card,
.mr-bg-sand .team-card {
  background: var(--mr-surface);
}
.class-card:hover,
.room-card:hover,
.box-card:hover,
.post-card:hover,
.team-card:hover,
.fish-card:hover,
.boat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mr-shadow-lg);
}
.dn-media,
.rc-media,
.pcd-img,
.tm-img,
.fc-media,
.bc-media {
  position: relative;
  display: block;
  overflow: hidden;
}
.dn-media img,
.rc-media img,
.pcd-img img,
.tm-img img,
.fc-media img,
.bc-media img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.dn-media img,
.rc-media img,
.fc-media img,
.bc-media img {
  aspect-ratio: 4 / 3;
}
.pcd-img img {
  aspect-ratio: 13 / 9;
}
.tm-img img {
  aspect-ratio: 1;
  object-position: center top;
}
/* the base's white date tab on the photo */
.dn-date {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 10px 8px 9px;
  background: var(--mr-surface);
  color: var(--mr-heading);
  line-height: 1;
}
.dn-date b {
  font-family: var(--mr-ff-display);
  font-size: 28px;
  font-weight: 300;
}
.dn-date span {
  margin-top: 6px;
  color: var(--mr-accent-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dn-body,
.rc-body,
.bx-body,
.pcd-body,
.tm-body,
.fc-body,
.bc-body {
  padding: 28px 30px 32px;
}
.dn-body .mr-eyebrow,
.bc-body .mr-eyebrow {
  margin-bottom: 8px;
}
.dn-body h3,
.rc-body h3,
.bx-body h3,
.fc-body h3,
.bc-body h3 {
  margin-bottom: 10px;
}
.dn-body p,
.rc-body p,
.fc-body p,
.bc-body p {
  font-size: 14.5px;
  color: var(--mr-muted);
}
.dn-meter {
  margin: 18px 0 16px;
}
.dn-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--mr-line);
}
.dn-price {
  color: var(--mr-muted);
  font-size: 13.5px;
}
.dn-price b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 24px;
  font-weight: 300;
}
.fc-body .kv-rows,
.bc-body .bc-facts {
  margin: 18px 0 0;
}
.bc-status {
  display: inline-block;
  margin-top: 18px;
}
.boat-card.is-out .bc-status {
  color: var(--mr-muted);
}
/* a box of oysters drawn from its own sixes */
.bx-media {
  padding: 30px;
  background: var(--mr-mist);
}
.bx-items {
  min-height: 52px;
  color: var(--mr-muted);
  font-size: 14px;
}
.bx-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--mr-line);
}
.bx-price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.bx-price b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 28px;
  font-weight: 300;
}
.bx-price small {
  color: var(--mr-leaf-text);
  font-size: 12px;
  font-weight: 600;
}
.bx-foot .mr-btns {
  gap: 10px;
}
.pcd-meta {
  display: block;
  margin-bottom: 10px;
  color: var(--mr-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pcd-cat {
  color: var(--mr-accent-text);
}
.pcd-body h3 {
  margin-bottom: 16px;
}
.tm-body {
  text-align: center;
}
.tm-role {
  display: block;
  margin-top: 6px;
  color: var(--mr-accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/*----- 7.10 Hours & Info -----*/
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mr-line);
  font-size: 14.5px;
}
.hours-list li span {
  color: var(--mr-muted);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}
.hours-list li b {
  color: var(--mr-heading);
  font-weight: 500;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--mr-accent-text);
}
.info-card {
  height: 100%;
  padding: 40px 34px;
  background: var(--mr-mist);
  text-align: center;
  transition: transform 0.45s var(--mr-ease), box-shadow 0.45s var(--mr-ease);
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mr-shadow-lg);
}
.info-card .mr-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}
.info-card h2,
.info-card h3 {
  margin-bottom: 12px;
}
.info-card p {
  margin-bottom: 14px;
}
.today-status .mr-open {
  color: var(--mr-heading);
  font-weight: 500;
}

/*======================
8. Sea Pieces
========================*/
/*----- 8.1 Catch Board -----*/
/* today's catch in the base's menu hand: two columns of light condensed caps over a fine dotted leader, the boat
   under each fish, Market Price and portions left beside it; sold-out lines go pale and are struck through */
.catch-board .cb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 30px;
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mr-line);
}
.catch-board .cb-title {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.catch-board .cb-count {
  color: var(--mr-muted);
  font-size: 13.5px;
}
.catch-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 60px;
}
.catch-row .cr-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.catch-row .cr-name {
  margin: 0;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.catch-row .cr-lead {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--mr-leader);
  transform: translateY(-4px);
}
.catch-row .cr-price {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 20px;
  font-weight: 300;
  white-space: nowrap;
}
.catch-row .cr-price.is-mp small {
  margin-right: 6px;
  color: var(--mr-accent-text);
  font-family: var(--mr-ff-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.catch-row .cr-sub {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  color: var(--mr-muted);
  font-size: 14px;
}
.catch-row .cr-left {
  flex-shrink: 0;
  color: var(--mr-leaf-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.catch-row .cr-left.is-few {
  color: var(--mr-coral-text);
}
.catch-row .cr-boat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--mr-accent-text);
  font-size: 12.5px;
}
.catch-row .cr-boat i {
  font-size: 11px;
}
.catch-row.is-out .cr-name,
.catch-row.is-out .cr-price {
  color: var(--mr-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.catch-row.is-out .cr-left {
  color: var(--mr-coral-text);
}
.mr-bg-mist .catch-board .cb-head {
  border-color: var(--mr-line-2);
}
/* the week strip: seven days, today marked, a picked day shows its own board */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 40px;
}
.week-strip button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 6px;
  background: var(--mr-mist);
  color: var(--mr-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mr-bg-mist .week-strip button {
  background: var(--mr-surface);
}
.week-strip small {
  font-family: var(--mr-ff-display);
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.week-strip b {
  color: var(--mr-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.week-strip button:hover {
  color: var(--mr-accent-text);
}
.week-strip button.is-today {
  box-shadow: inset 0 -2px 0 var(--mr-tide);
}
.week-strip button.is-picked {
  background: var(--mr-primary);
  color: var(--mr-on-primary);
}
.week-strip button.is-picked b {
  color: inherit;
  opacity: 0.8;
}

/*----- 8.2 Oyster List -----*/
/* six oysters, salt one to five, by the six and by the dozen */
.oyster-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.oyster-row .or-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.oyster-row .or-name {
  margin: 0;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.oyster-row .or-house {
  margin-left: 6px;
  color: var(--mr-accent-text);
  font-family: var(--mr-ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  vertical-align: 2px;
}
.oyster-row .or-price {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 19px;
  font-weight: 300;
  white-space: nowrap;
}
.oyster-row .or-price small {
  color: var(--mr-muted);
  font-family: var(--mr-ff-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.oyster-row .or-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 5px;
  color: var(--mr-muted);
  font-size: 13.5px;
}
.or-salt {
  display: inline-flex;
  gap: 4px;
}
.or-salt i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--mr-leader);
}
.or-salt i.is-on {
  background: var(--mr-tide);
  box-shadow: none;
}
.is-sea .or-salt i.is-on {
  background: #FFFFFF;
}
.oyster-row .or-notes {
  margin: 4px 0 0;
  color: var(--mr-text);
  font-size: 14px;
}
.oyster-row.is-hour .or-name::after {
  content: "Oyster Hour";
  margin-left: 10px;
  padding: 3px 8px;
  background: var(--mr-tide);
  color: #FFFFFF;
  font-family: var(--mr-ff-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  vertical-align: 3px;
}

/*----- 8.3 Boats -----*/
.boat-rows li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mr-line-2);
}
.boat-rows li:last-child {
  border-bottom: 0;
}
.boat-rows .br-time {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.04em;
}
.boat-rows b {
  display: block;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.boat-rows div span {
  color: var(--mr-muted);
  font-size: 13px;
}
.boat-rows .mr-tag {
  text-align: right;
}
.boat-row.is-out .br-time,
.boat-row.is-out b,
.boat-row.is-out .mr-tag {
  color: var(--mr-muted);
}

/*----- 8.4 Platter Ring -----*/
/* Home 2: the platter of crushed ice with twelve shells set round the lemons (the ring placed by the shell's number) */
.ring-stage {
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
  aspect-ratio: 1;
}
.ring-platter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ring-shells {
  position: absolute;
  inset: 0;
}
.ring-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17%;
  height: auto;
  margin: -12% 0 0 -8.5%;
  filter: drop-shadow(0 6px 8px rgba(15, 29, 36, 0.22));
}
.ring-shell.is-1 { left: 50%; top: 18%; rotate: 0deg; }
.ring-shell.is-2 { left: 66%; top: 22.3%; rotate: 30deg; }
.ring-shell.is-3 { left: 77.7%; top: 34%; rotate: 60deg; }
.ring-shell.is-4 { left: 82%; top: 50%; rotate: 90deg; }
.ring-shell.is-5 { left: 77.7%; top: 66%; rotate: 120deg; }
.ring-shell.is-6 { left: 66%; top: 77.7%; rotate: 150deg; }
.ring-shell.is-7 { left: 50%; top: 82%; rotate: 180deg; }
.ring-shell.is-8 { left: 34%; top: 77.7%; rotate: 210deg; }
.ring-shell.is-9 { left: 22.3%; top: 66%; rotate: 240deg; }
.ring-shell.is-10 { left: 18%; top: 50%; rotate: 270deg; }
.ring-shell.is-11 { left: 22.3%; top: 34%; rotate: 300deg; }
.ring-shell.is-12 { left: 34%; top: 22.3%; rotate: 330deg; }
.ring-list {
  margin: 30px 0 36px;
}
.ring-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid var(--mr-line);
  transition: color 0.4s ease, padding 0.4s var(--mr-ease);
  position: relative;
}
.ring-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--mr-leader);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.ring-list b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ring-list span {
  grid-column: 1;
  color: var(--mr-muted);
  font-size: 13px;
}
.ring-list em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--mr-muted);
  font-size: 13.5px;
  font-style: normal;
}
.ring-list li.is-lit::before {
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 10%, #A9CBE0 30%, #3E7FA8 70%, #1A4B6C 100%);
  box-shadow: none;
}
.ring-list li.is-lit em {
  color: var(--mr-accent-text);
}

/*----- 8.5 Horizon Band -----*/
/* Home 3: the sky, the sea and the line between them; a day boat sails from one side to the other with the scroll */
.mr-horizon {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 120px 0 260px;
}
.hz-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hz-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 190px;
  background: linear-gradient(180deg, #F7FAFB 0%, #E3EEF3 70%, #D6E6EE 100%);
}
.hz-sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  background: linear-gradient(180deg, #3F7EA3 0%, #2C6890 30%, #1D587D 100%);
}
.hz-sea::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 13px, rgba(255, 255, 255, 0.05) 13px 14px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 30%);
}
/* a far headland sits on the line, pale with distance */
.hz-land {
  position: absolute;
  right: 0;
  bottom: 189px;
  width: min(58%, 820px);
  height: auto;
}
[data-theme="dark"] .hz-land {
  filter: brightness(0.32) saturate(0.8);
}
.hz-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 190px;
  height: 1px;
  background: rgba(15, 29, 36, 0.25);
}
[data-theme="dark"] .hz-sky {
  background: linear-gradient(180deg, #0B161C 0%, #10222C 70%, #15303E 100%);
}
[data-theme="dark"] .hz-sea {
  background: linear-gradient(180deg, #1B4A66 0%, #12384F 40%, #0C2A3B 100%);
}
/* moored mid-way until the script sails it (reduced motion keeps it here) */
.hz-boat {
  position: absolute;
  left: calc(50% - 130px);
  bottom: 176px;
  width: 260px;
}
.mr-horizon.is-sailing .hz-boat {
  left: 0;
}
.hz-boat img {
  display: block;
  width: 100%;
  height: auto;
}
.hz-boat .logo-light,
[data-theme="dark"] .hz-boat .logo-main {
  display: none;
}
[data-theme="dark"] .hz-boat .logo-light {
  display: block;
}
.hz-wake {
  position: absolute;
  right: 92%;
  bottom: 4px;
  width: 180px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
}
.hz-copy {
  max-width: 560px;
}
.hz-panel {
  position: relative;
  max-width: 560px;
  margin: 44px 0 0;
  padding: 26px 32px;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow);
}
.hz-panel h3 {
  margin-bottom: 6px;
}

/*----- 8.6 Platter Builder -----*/
.platter-form > h3 {
  margin-bottom: 10px;
}
.op-sides-head {
  margin: 30px 0 14px;
}
.op-row {
  display: grid;
  grid-template-columns: 56px 1fr auto 90px;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mr-line);
}
.op-shell {
  width: 46px;
  height: auto;
  justify-self: center;
}
.op-shell.is-mixed .mr-ico {
  width: 46px;
  height: 46px;
}
.op-copy h3 {
  margin: 0 0 2px;
}
.op-copy span {
  color: var(--mr-muted);
  font-size: 13px;
}
.op-sub {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 18px;
  font-weight: 300;
  text-align: right;
}
.op-row.is-in .op-copy h3 {
  color: var(--mr-accent-text);
}
.op-row output,
.mr-qty output {
  min-width: 34px;
  color: var(--mr-heading);
  font-weight: 600;
  text-align: center;
}
.extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.extra-grid .mr-check b {
  margin-left: 6px;
  color: var(--mr-accent-text);
  font-weight: 600;
}
.platter-summary {
  position: sticky;
  top: 110px;
}
.ps-ring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-height: 92px;
  margin: -40px -42px 26px;
  padding: 26px 30px;
  background: var(--mr-mist);
}
.ps-ring img {
  width: 34px;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(15, 29, 36, 0.2));
}

/*----- 8.7 Oyster Tray -----*/
/* a box of oysters seen from above: one place per six, six shells to a place */
.home-tray {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px;
  background: #E9F1F5;
  box-shadow: inset 0 0 0 1px rgba(15, 29, 36, 0.08);
}
.home-tray.is-four-dozen {
  grid-template-columns: repeat(4, 1fr);
}
.tray-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  background: #FFFFFF;
}
.tp-shells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
}
.tp-shells img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(15, 29, 36, 0.18));
}
.tp-shells .shell-gap {
  aspect-ratio: 222 / 330;
  border-radius: 50%;
  background: #EEF3F5;
}
.tray-place small {
  color: #66727A;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.tray-place.is-in small {
  color: #225F86;
}

/*----- 8.8 Fish & Boat Cards -----*/
.fish-card .kv-rows li:first-child,
.boat-card .bc-facts li:first-child {
  border-top: 1px solid var(--mr-line);
}
.hour-card {
  display: flex;
  gap: 20px;
  margin-top: 34px;
  padding: 28px 30px;
}
.hour-card .mr-ico {
  width: 56px;
  height: 56px;
}
.hour-card h3 {
  margin-bottom: 8px;
}
.hour-card p {
  margin-bottom: 10px;
  font-size: 14.5px;
}
.hour-card .mr-hour {
  color: #FFFFFF;
  font-size: 13px;
}

/*----- 8.9 Steps, Figures & Links -----*/
/* four steps in a row: a drawn icon, a name and a line */
.icon-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.icon-row .mr-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
.icon-row h3 {
  margin-bottom: 8px;
}
.icon-row p {
  max-width: 260px;
  margin: 0 auto;
  font-size: 14.5px;
}
/* a strip of figures: light condensed numbers over tracked caps */
.figures {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  text-align: center;
}
.figures b {
  display: block;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: clamp(38px, 3.4vw, 56px);
  font-weight: 300;
  line-height: 1;
}
.figures span {
  display: block;
  margin-top: 10px;
  color: var(--mr-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mr-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mr-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mr-link i {
  color: var(--mr-accent-text);
  transition: transform 0.35s var(--mr-ease);
}
.mr-link:hover i {
  transform: translateX(5px);
}

/*----- 8.10 Product Minis -----*/
/* a small product line: the photograph, its shelf, the name and the price */
.product-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--mr-heading);
}
.product-mini img {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  object-fit: cover;
  background: var(--mr-mist);
}
.product-mini span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.product-mini small {
  color: var(--mr-accent-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.product-mini b {
  font-family: var(--mr-ff-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-mini em {
  color: var(--mr-muted);
  font-size: 14px;
  font-style: normal;
}
.product-mini:hover b {
  color: var(--mr-accent-text);
}

/*======================
9. Home One
========================*/
/*----- 9.1 Hero Slider -----*/
/* the base's fine-dining hero: a boxed photograph with a white gutter either side, a white card laid over its foot
   carrying the title on set lines; thin chevron tabs on the photo's edges */
.hero-one {
  position: relative;
  padding: 0 40px;
}
.hero-one .hero-frame {
  position: relative;
}
.hero-one .hero-slider {
  overflow: hidden;
}
.hero-one .swiper-slide {
  background: var(--mr-bg);
}
.hero-one .hero-media {
  height: clamp(460px, 72vh, 760px);
  overflow: hidden;
}
.hero-one .hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-one .hero-card {
  position: relative;
  z-index: 2;
  width: min(1000px, calc(100% - 80px));
  margin: -190px auto 0;
  padding: 58px 70px 62px;
  background: var(--mr-surface);
  text-align: center;
}
.hero-one .hero-copy .mr-btns {
  justify-content: center;
}
.hero-title {
  margin: 0 0 22px;
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: clamp(40px, 3.7vw, 68px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-one .hero-copy p:not(.hero-title) {
  max-width: 560px;
  margin: 0 auto 30px;
  color: var(--mr-text);
}
/* the base's chevron tabs, white, on the photo's left and right edges */
.hero-arrow {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 92px;
  background: var(--mr-surface);
  color: var(--mr-heading);
  font-size: 18px;
  transition: background-color 0.3s ease, color 0.3s ease, width 0.35s var(--mr-ease);
}
.hero-arrow:hover {
  width: 54px;
  background: var(--mr-tide);
  color: #FFFFFF;
}
.hero-one .hero-arrow {
  top: calc(clamp(460px, 72vh, 760px) / 2 - 46px);
}
.hero-one .hero-prev {
  left: 0;
}
.hero-one .hero-next {
  right: 0;
}
.hero-count {
  color: var(--mr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.hero-count b {
  color: var(--mr-heading);
  font-weight: 600;
}
.hero-one .hero-count {
  position: absolute;
  right: 26px;
  top: calc(clamp(460px, 72vh, 760px) - 52px);
  z-index: 3;
  padding: 8px 14px;
  background: var(--mr-surface);
}

/*----- 9.2 Today's Catch -----*/
.mr-catch-sec .catch-cta {
  margin-top: 60px;
}
.boats-panel {
  height: 100%;
  padding: 40px 36px;
}
.boats-panel h3 {
  margin-bottom: 18px;
}
.boats-panel .mr-more,
.boats-panel .mr-btn {
  margin-top: 26px;
}

/*----- 9.3 Book A Table Bar -----*/
/* the base's reservation strip: Party for Date at Time in Seating, then the black block */
.book-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
}
.book-bar .bb-field {
  width: 190px;
}
.book-bar .mr-input {
  background: var(--mr-surface);
}
.book-bar .bb-word {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.features-row {
  margin-top: 70px;
}
/* the base's three line icons with a name and a line under each */
.feature {
  text-align: center;
}
.feature .mr-ico {
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
}
.feature h3 {
  margin-bottom: 12px;
}
.feature p {
  max-width: 330px;
  margin: 0 auto;
  font-size: 15px;
}

/*----- 9.4 Mosaic & The Tide -----*/
/* the base's gallery: a tall photograph, squares, and one wide one, laid in a four-column grid */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
  gap: 20px;
}
.mosaic .mo-item {
  display: block;
}
.mosaic .mo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mosaic .is-tall {
  grid-row: span 2;
}
.mosaic .is-wide {
  grid-column: span 2;
}
/* the tide washes in over a strip of beach drawn across the section's foot (the sea is the band below) */
.mr-mosaic-sec.is-tide {
  position: relative;
  padding-bottom: 230px;
  --tide-sand: var(--mr-sand);
  --tide-wet: var(--mr-wet);
  --tide-sea: var(--mr-sea);
  --tide-shallow: #6FA9CC;
  --tide-foam: #FFFFFF;
}
[data-theme="dark"] .mr-mosaic-sec.is-tide {
  --tide-wet: #2A2721;
  --tide-shallow: #2B6587;
  --tide-foam: #CFE3EF;
}
.tide-canvas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 190px;
  pointer-events: none;
}

/*----- 9.5 The Sea Band -----*/
.mr-sea-band .mr-lead b {
  color: #FFFFFF;
  font-weight: 600;
}
.hour-live {
  margin: 0 0 30px;
  color: #FFFFFF;
  font-size: 14px;
}
.mr-sea-band .oyster-list {
  padding: 34px 38px;
  background: rgba(255, 255, 255, 0.06);
}

/*----- 9.6 Events Band & Sand Band -----*/
.band-copy {
  max-width: 600px;
}
.band-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 28px 0 34px;
}
.band-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.band-facts span {
  color: var(--mr-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.band-facts b {
  color: #FFFFFF;
  font-family: var(--mr-ff-display);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.06em;
}
.ah-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ah-col {
  padding: 10px 60px;
  text-align: center;
}
.ah-col + .ah-col {
  border-left: 1px solid var(--mr-line-2);
}
.ah-col .mr-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
.ah-col h2 {
  margin-bottom: 12px;
}
.ah-col p {
  max-width: 420px;
  margin: 0 auto 20px;
}
.ah-col .mr-newsletter {
  margin: 0 auto;
}

/*======================
10. Home Two
========================*/
/*----- 10.1 Hero Two -----*/
/* the base's gastronomy hero: a photograph across two thirds, a white panel docked over its right edge */
.hero-two {
  position: relative;
  padding: 0 40px;
}
.hero-two .hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 520px;
  align-items: center;
}
.hero-two .hero-photos {
  position: relative;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 1;
  margin-right: 330px;
}
.hero-two .hero-slider {
  overflow: hidden;
}
.hero-two .hero-img {
  display: block;
  width: 100%;
  height: clamp(480px, 74vh, 780px);
  object-fit: cover;
}
.hero-two .hero-img.is-top {
  object-position: center 30%;
}
.hero-two .hero-nav {
  position: absolute;
  left: 30px;
  bottom: 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 0 18px;
  background: var(--mr-surface);
}
.hero-two .hero-arrow {
  position: static;
  width: 52px;
  height: 52px;
  background: transparent;
}
.hero-two .hero-arrow:hover {
  width: 52px;
  background: var(--mr-tide);
}
.hero-two .hero-panel {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  padding: 70px 64px 74px;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow-lg);
}
.hero-two .hero-panel .hero-title {
  font-size: clamp(34px, 3vw, 54px);
}
.hero-two .hero-panel .mr-rule {
  margin: 0 0 26px;
}
.hero-hour {
  margin: 0 0 30px;
  color: var(--mr-heading);
  font-size: 14px;
}

/*----- 10.2 Split Panels -----*/
/* the base's menu panel laid over a photograph, and its mirror */
.split-wide {
  padding: 0 40px;
}
.split-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
}
.split-panel {
  position: relative;
  z-index: 2;
  margin-right: -110px;
  padding: 64px 70px 68px;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow-lg);
}
.split-panel h2 {
  margin-bottom: 0;
}
.split-panel .mr-rule {
  margin-bottom: 30px;
}
.split-panel .oyster-list {
  margin-bottom: 26px;
}
.split-note {
  color: var(--mr-muted);
  font-size: 14px;
}
.split-media {
  height: 100%;
  min-height: 640px;
}
.split-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mr-split-menu.is-flip .split-grid {
  grid-template-columns: 7fr 5fr;
}
.mr-split-menu.is-flip .split-panel {
  margin-right: 0;
  margin-left: -110px;
}
.mr-split-book {
  padding: 120px 0;
}
.book-panel .mr-rule {
  margin-bottom: 30px;
}
.book-stack .mr-field {
  margin-bottom: 14px;
}
.book-stack .mr-btn {
  margin-top: 8px;
}

/*----- 10.3 Oyster Hour Offer -----*/
.offer-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 34px;
}
.offer-live .mr-hour {
  color: #FFFFFF;
  font-size: 15px;
}

/*----- 10.4 Classes & Shop Rows -----*/
.shop-row-cta {
  margin-top: 50px;
}

/*======================
11. Home Three
========================*/
/*----- 11.1 Hero Three -----*/
/* the base's bistro hero: the reserve panel on the left, the photo slider beside it with chevrons on its edges */
.hero-three {
  padding-top: 20px;
}
.hero-three .hero-wide {
  padding: 0 40px;
}
.hero-three .hero-grid {
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 60px;
  align-items: center;
}
.hero-three .hero-book .hero-title {
  font-size: clamp(32px, 2.6vw, 50px);
}
.hero-three .hero-book .mr-rule {
  margin: 0 0 30px;
}
.hero-three .hero-photos {
  position: relative;
  min-width: 0;
}
.hero-three .hero-slider,
.hero-two .hero-slider {
  width: 100%;
  margin: 0;
}
.hero-three .hero-slider {
  overflow: hidden;
}
.hero-three .hero-img {
  display: block;
  width: 100%;
  height: clamp(520px, 76vh, 820px);
  object-fit: cover;
}
.hero-three .hero-img.is-top {
  object-position: center 20%;
}
.hero-three .hero-arrow {
  top: calc(50% - 46px);
}
.hero-three .hero-prev {
  left: 0;
}
.hero-three .hero-next {
  right: 0;
}
.hero-three .hero-count {
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: 3;
  padding: 8px 14px;
  background: var(--mr-surface);
}

/*----- 11.2 Philosophy & Rooms -----*/
.mr-philosophy .kv-rows {
  margin-bottom: 36px;
}
.rooms-cta {
  margin-top: 54px;
}
.mosaic.is-bistro {
  grid-auto-rows: 280px;
}

/*----- 11.3 Sand Call To Action -----*/
.mr-sand-cta .mr-title {
  margin-bottom: 34px;
}

/*======================
12. Inner Pages
========================*/
/*----- 12.1 Sidebar & Widgets -----*/
/* Salmara's sidebar is quiet: a small heading, a coral stroke, plain lists. Salmara sets each widget on linen */
.mr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.mr-sidebar .widget {
  padding: 34px 32px;
  background: var(--mr-mist);
}
.mr-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.mr-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--mr-tide);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--mr-line);
  background: var(--mr-surface);
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-color: var(--mr-tide);
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--mr-tide-deep);
  color: #FFFFFF;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--mr-deep);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--mr-line-2);
  color: var(--mr-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--mr-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--mr-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--mr-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--mr-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--mr-surface);
  color: var(--mr-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--mr-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--mr-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--mr-deep);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mr-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--mr-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--mr-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts h3 a {
  color: var(--mr-heading);
}
.side-posts h3 a:hover {
  color: var(--mr-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--mr-text);
}
.widget-tags a:hover {
  color: var(--mr-accent-text);
}
.mr-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--mr-sea);
  text-align: center;
}
.widget-cta .mr-script {
  display: block;
  color: var(--mr-foam);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mr-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .mr-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--mr-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--mr-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--mr-accent-text);
}

/*----- 12.2 Rows, Choices & Pages -----*/
.mr-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--mr-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 30px;
  font-weight: 400;
}
.mr-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mr-line);
}
.mr-kv li:first-child {
  border-top: 1px solid var(--mr-line);
}
.mr-kv li b {
  color: var(--mr-heading);
  font-weight: 500;
  text-align: end;
}
.mr-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--mr-mist);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.mr-bg-mist .choice-card,
.mr-bg-sand .choice-card {
  background: var(--mr-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--mr-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--mr-tide-rgb), 0.18);
}
.choice-card.is-checked {
  background: var(--mr-mist-2);
  box-shadow: inset 3px 0 0 var(--mr-tide);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--mr-heading);
  font-size: 17px;
  font-weight: 500;
}
.choice-body span {
  color: var(--mr-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mr-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--mr-tide);
  box-shadow: none;
  color: var(--mr-deep);
}
.mr-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.mr-pagination a,
.mr-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mr-pagination a i {
  color: var(--mr-accent-text);
  font-size: 13px;
}
.mr-pagination .is-current,
.mr-pagination a:hover,
.mr-pagination a:hover i {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.mr-zoom {
  display: block;
  overflow: hidden;
}
.mr-zoom img {
  width: 100%;
  transition: transform 0.9s var(--mr-ease);
}
.mr-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--mr-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.mr-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 2px;
  background: var(--mr-line-2);
  accent-color: var(--mr-tide-deep);
  appearance: none;
  -webkit-appearance: none;
}
.mr-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--mr-surface);
  border-radius: 50%;
  background: var(--mr-tide);
  box-shadow: 0 2px 8px rgba(10, 30, 42, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.mr-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--mr-surface);
  border-radius: 50%;
  background: var(--mr-tide);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--mr-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mr-panel .chip-choice > span {
  background: var(--mr-mist);
}
.chip-choice:hover > span {
  background: var(--mr-mist-2);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--mr-tide-rgb), 0.25);
}
.chip-choice.is-checked > span {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.chip-choice > span small {
  color: var(--mr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*----- 12.3 Quantity Stepper -----*/
.mr-qty {
  display: inline-flex;
  align-items: center;
  background: var(--mr-mist);
}
.mr-bg-mist .mr-qty {
  background: var(--mr-surface);
}
.mr-qty button {
  width: 46px;
  height: 54px;
  color: var(--mr-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mr-qty button:hover {
  background: var(--mr-mist-2);
  color: var(--mr-accent-text);
}
.mr-qty input {
  width: 52px;
  height: 54px;
  border: 0;
  border-inline: 1px solid var(--mr-line);
  background: transparent;
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: 0;
  -moz-appearance: textfield;
}
.mr-qty input::-webkit-outer-spin-button,
.mr-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.mr-qty.is-sm button {
  width: 36px;
  height: 42px;
}
.mr-qty.is-sm input {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/*======================
13. Booking, Box & Class Pages
========================*/
/*----- 13.1 Panels & Wizards -----*/
.mr-panel {
  padding: 40px 42px;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow);
}
.mr-panel.is-sea {
  background: var(--mr-sea);
  box-shadow: none;
}
.mr-panel h2,
.mr-panel h3 {
  margin-bottom: 20px;
}
.wz-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 36px;
}
.wz-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--mr-mist);
  color: var(--mr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: default;
}
.wz-steps li span {
  color: var(--mr-accent-text);
  font-family: var(--mr-ff-display);
  font-size: 20px;
  letter-spacing: 0;
}
.wz-steps li.is-done {
  cursor: pointer;
  color: var(--mr-heading);
}
.wz-steps li.is-active {
  background: var(--mr-deep);
  color: #FFFFFF;
}
.wz-steps li.is-active span {
  color: var(--mr-foam);
}
.wz-step {
  display: none;
}
.wz-step.is-active {
  display: block;
}
.wz-step > h3 {
  margin-bottom: 24px;
}
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--mr-line);
}
.wz-nav .mr-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wz-review li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mr-line);
}
.wz-review li span {
  color: var(--mr-muted);
}
.wz-review li b {
  color: var(--mr-heading);
  font-weight: 600;
  text-align: end;
}
.wz-review + .mr-check {
  margin-top: 22px;
}
.wz-done {
  padding: 20px 0 10px;
  text-align: center;
}
.done-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--mr-tide-deep);
  color: #FFFFFF;
  font-size: 26px;
}
.choice-list.is-row {
  grid-template-columns: repeat(3, 1fr);
}
.choice-list.is-row .choice-card {
  align-items: flex-start;
  padding: 18px 18px 20px;
}
.cc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-body b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.25;
}
.cc-body small {
  color: var(--mr-muted);
  font-size: 14px;
  line-height: 1.45;
}
.cc-price {
  margin-top: 6px;
  color: var(--mr-accent-text);
  font-size: 14px;
  font-weight: 600;
}
.choice-ico .mr-ico {
  width: 40px;
  height: 40px;
}
.choice-ico {
  background: var(--mr-surface);
}
/* date chips */
.date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.date-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 82px;
  padding: 10px 6px 12px;
  background: var(--mr-mist);
  color: var(--mr-heading);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.date-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.date-choice .dc-week,
.date-choice .dc-month {
  color: var(--mr-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.date-choice .dc-num {
  font-family: var(--mr-ff-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}
.date-choice:hover {
  background: var(--mr-mist-2);
}
.date-choice:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--mr-tide-rgb), 0.3);
}
.date-choice.is-checked {
  background: var(--mr-deep);
  color: #FFFFFF;
}
.date-choice.is-checked .dc-week,
.date-choice.is-checked .dc-month {
  color: var(--mr-foam);
}
.slot-group + .slot-group {
  margin-top: 18px;
}
.slot-head {
  display: block;
  margin-bottom: 10px;
  color: var(--mr-accent-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slot-row .chip-choice > span {
  height: 42px;
  padding: 0 16px;
  border-radius: 0;
  font-size: 15px;
}
.party-qty {
  margin-bottom: 6px;
}
.booking-summary h3,
.event-estimate h3 {
  margin-bottom: 18px;
}
.booking-summary .mr-label {
  margin-top: 26px;
  color: var(--mr-foam);
}
.bs-note,
.ee-per {
  margin: 18px 0 0;
  font-size: 14.5px;
}
.bs-note a {
  color: var(--mr-foam);
  text-decoration: underline;
}
.mr-panel.is-sea .sum-total b {
  color: #FFFFFF;
}
.event-estimate .ee-per b {
  color: #FFFFFF;
}

/*----- 13.2 Menu Page -----*/
.menu-courses {
  display: grid;
  gap: 70px;
}
.course-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 34px;
}
.course-title::before,
.course-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mr-tide);
}
.picks-list {
  margin: 30px 0 36px;
}

/*----- 13.3 The Week -----*/
.today-status {
  padding: 12px 18px;
  background: var(--mr-surface);
}
.week-card.is-today {
  box-shadow: 0 0 0 2px var(--mr-tide);
}

/*----- 13.4 Oysters At Home Builder -----*/
.hb-presets {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.hb-preset-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.hb-step + .hb-step {
  margin-top: 46px;
  padding-top: 40px;
  border-top: 1px solid var(--mr-line);
}
.hb-step > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.hb-n {
  color: var(--mr-accent-text);
  font-size: 30px;
}
.base-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.base-card {
  padding: 18px 18px 20px;
}
.hb-hint {
  margin-bottom: 18px;
  color: var(--mr-muted);
}
.pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pick-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px 12px;
  background: var(--mr-mist);
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s var(--mr-ease);
}
.pick-tile img {
  width: auto;
  height: 84px;
  margin-bottom: 10px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(15, 29, 36, 0.18));
}
.pick-tile .pt-name {
  color: var(--mr-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.pick-tile .pt-price {
  color: var(--mr-muted);
  font-size: 14px;
}
.pt-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
.pt-ctrl button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--mr-heading);
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pt-ctrl button:hover:not(:disabled) {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.pt-ctrl button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pt-ctrl b {
  min-width: 22px;
  color: var(--mr-heading);
  font-weight: 600;
}
.pick-tile.is-in {
  box-shadow: inset 0 0 0 2px var(--mr-tide);
}
.box-summary {
  position: sticky;
  top: 110px;
}
.hs-visual {
  margin: -40px -42px 28px;
  padding: 34px 30px;
  overflow: hidden;
  background: var(--mr-mist);
}
.hs-visual .home-tray {
  max-width: 420px;
  margin: 0 auto;
}
.hs-places {
  margin: 10px 0 18px;
  color: var(--mr-muted);
  font-size: 14px;
}
.hs-lines li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 15px;
}
.hs-lines li.is-empty {
  color: var(--mr-muted);
}
.hs-lines + .mr-kv {
  margin-top: 16px;
}

/*----- 13.5 Classes Calendar -----*/
.icon-row.is-steps .mr-ico {
  width: 64px;
  height: 64px;
}
.cal-list {
  display: grid;
  gap: 8px;
}
.cal-row {
  display: grid;
  grid-template-columns: 76px 1fr auto auto auto;
  align-items: center;
  gap: 24px;
  padding: 16px 24px 16px 16px;
  background: var(--mr-surface);
  transition: transform 0.4s var(--mr-ease), box-shadow 0.4s var(--mr-ease);
}
.cal-row:hover {
  transform: translateX(4px);
  box-shadow: var(--mr-shadow);
}
.cr-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: var(--mr-deep);
  color: #FFFFFF;
  line-height: 1;
}
.cr-date b {
  font-family: var(--mr-ff-display);
  font-size: 28px;
  font-weight: 400;
}
.cr-date small {
  margin-top: 5px;
  color: var(--mr-foam);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cr-main h3 {
  margin-bottom: 4px;
}
.cr-main span {
  color: var(--mr-muted);
  font-size: 14.5px;
}
.cr-price {
  color: var(--mr-muted);
  font-size: 14px;
  white-space: nowrap;
}
.cr-price b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 22px;
  font-weight: 400;
}

/*----- 13.6 Class & Seats -----*/
.dd-photo img,
.chef-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.dd-courses-head {
  margin: 30px 0 14px;
}
.dd-courses {
  display: grid;
  gap: 10px;
}
.dd-courses li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--mr-line-2);
}
.dc-n {
  color: var(--mr-accent-text);
  font-family: var(--mr-ff-display);
  font-size: 20px;
}
.dd-courses b {
  color: var(--mr-heading);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* the long table from above: a row of seats on each side of a long plank */
.seat-map {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 40px;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow);
}
.sm-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 0 18px;
}
.sm-table {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin: 12px 0;
  /* the bar's pale green tiles */
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 34px, rgba(255, 255, 255, 0.7) 34px 36px),
    linear-gradient(180deg, #D7ECEA, #BDDCD8);
  color: #0F1D24;
  font-family: var(--mr-ff-display);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 10px 20px -10px rgba(15, 29, 36, 0.5);
}
.seat-map .seat,
.sm-key .seat {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mr-mist);
  box-shadow: inset 0 0 0 2px var(--mr-line-2);
}
.seat-map .seat.is-taken,
.sm-key .seat.is-taken {
  background: var(--mr-tide);
  box-shadow: none;
}
.seat-map .seat.is-mine,
.sm-key .seat.is-mine {
  background: var(--mr-deep);
  box-shadow: 0 0 0 3px rgba(var(--mr-tide-rgb), 0.45);
}
.sm-key {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 20px 0 44px;
  font-size: 14px;
}
.sm-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.seat-form {
  max-width: 1100px;
  margin: 0 auto;
}
.seat-form .mr-field {
  margin-bottom: 0;
}
.sf-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.sf-total span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.sf-total small {
  color: var(--mr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sf-total b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 34px;
  font-weight: 400;
}

/*----- 13.7 Private Events -----*/
.package-rows {
  margin: 30px 0 22px;
}
.package-rows li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
}
.package-rows li > span:first-child {
  display: flex;
  flex-direction: column;
}
.package-rows b {
  color: var(--mr-heading);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.package-rows small {
  color: var(--mr-muted);
  font-size: 14.5px;
}
.package-rows em {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-size: 22px;
  font-style: normal;
  white-space: nowrap;
}
.package-rows em small {
  font-family: var(--mr-ff-body);
  font-size: 13px;
}
.pk-note {
  color: var(--mr-muted);
  font-size: 15px;
}
.extra-list {
  display: grid;
  gap: 12px;
}
.extra-check {
  padding: 14px 18px;
  background: var(--mr-mist);
}
.extra-check b {
  margin-left: 6px;
  color: var(--mr-accent-text);
}
.mr-label b {
  color: var(--mr-accent-text);
  font-size: 15px;
}

/*----- 13.8 History & Chef -----*/
.history-rows {
  display: grid;
  gap: 90px;
}
.history-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 70px;
}
.history-row.is-flip .hr-media {
  order: 2;
}
.hr-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hr-copy h3 {
  margin-bottom: 18px;
}
.chef-shelf .product-mini {
  padding: 12px 0;
  border-bottom: 1px solid var(--mr-line);
}
.chef-shelf .mr-more {
  margin-top: 20px;
}

/*----- 13.9 Gallery -----*/
.gallery-grid .gal-item {
  position: relative;
  display: block;
  overflow: hidden;
}
.gallery-grid .gal-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--mr-ease);
}
.gallery-grid .is-tall .gal-item img {
  aspect-ratio: 4 / 5;
}
.gal-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(0deg, rgba(10, 30, 42, 0.85), rgba(10, 30, 42, 0));
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s var(--mr-ease);
}
.gal-cap i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--mr-deep);
  font-size: 11px;
}
.gal-item:hover img {
  transform: scale(1.06);
}
.gal-item:hover .gal-cap,
.gal-item:focus .gal-cap {
  opacity: 1;
  transform: none;
}

/*----- 13.10 Account Dashboard -----*/
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--mr-muted);
  font-size: 14px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .mr-ico {
  width: 34px;
  height: 34px;
}
.dash-tabs button.is-active {
  background: var(--mr-deep);
  color: #FFFFFF;
}
.dash-tabs button.is-active .ico-day {
  display: none;
}
.dash-tabs button.is-active .ico-night {
  display: block;
}
.dash-panel > h2 {
  margin-bottom: 24px;
}
.table-wrap {
  margin-bottom: 30px;
  overflow-x: auto;
}
.mr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.mr-table th {
  padding: 12px 14px;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
}
.mr-table td {
  padding: 14px;
  border-bottom: 1px solid var(--mr-line);
  vertical-align: top;
}
.mr-table td:first-child {
  color: var(--mr-heading);
  font-weight: 600;
  white-space: nowrap;
}
.my-seats {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.my-seats li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 16px 20px;
  background: var(--mr-mist);
}
.my-seats li b {
  color: var(--mr-heading);
  font-family: var(--mr-ff-display);
  font-weight: 400;
  text-transform: uppercase;
}
.my-seats li.is-empty {
  color: var(--mr-muted);
}
.account-form.is-plain {
  padding: 0;
  box-shadow: none;
}

/*----- 13.11 Contact & Articles -----*/
.contact-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}
.contact-hours {
  margin-top: 24px;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0;
  padding: 22px 26px;
}
.sum-hint {
  margin: 14px 0 0;
  color: var(--mr-muted);
  font-size: 14px;
  text-align: center;
}

/*======================
14. Table Shop
========================*/
/*----- 14.1 Shop Grid -----*/
.side-posts .thumb.is-product {
  background: var(--mr-product);
}
.side-posts .thumb.is-product img {
  object-fit: contain;
}
.tr-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--mr-accent-text);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mr-line-2);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  font-size: 22px;
  font-weight: 500;
  color: var(--mr-heading);
}
.shop-sort {
  width: 230px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
/* the base's shop tile: the photograph on its pale ground, the category, the name in light capitals and the price
   centred under it; on hover the tile lifts, the photo eases forward, the net falls over it and the bag button rises */
.product-card {
  height: 100%;
  text-align: center;
  transition: transform 0.5s var(--mr-ease);
}
.product-card:hover {
  transform: translateY(-6px);
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: var(--mr-product);
  transition: box-shadow 0.5s var(--mr-ease);
}
.product-card:hover .pc-media {
  box-shadow: var(--mr-shadow-lg);
}
.pc-img {
  display: block;
}
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.32);
  transition: transform 1s var(--mr-ease);
}
.product-card:hover .pc-img img {
  transform: scale(1.42);
}
.pc-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  color: var(--mr-accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pc-badge.is-sale {
  color: var(--mr-coral-text);
}
[data-theme="dark"] .pc-badge {
  color: var(--mr-accent-text);
}
[data-theme="dark"] .pc-badge.is-sale {
  color: #B3261E;
}
.pc-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 6px 16px rgba(var(--mr-deep-rgb), 0.12);
  color: var(--mr-deep);
  font-size: 14px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.35s var(--mr-ease), transform 0.35s var(--mr-ease), background-color 0.3s var(--mr-ease), color 0.3s var(--mr-ease);
}
.pc-act:nth-child(2) {
  transition-delay: 0.05s;
}
.product-card:hover .pc-act,
.pc-act:focus,
.pc-act.is-on {
  opacity: 1;
  transform: none;
}
.pc-act:hover,
.pc-act.is-on {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.pc-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  background: var(--mr-deep);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 0.45s var(--mr-ease), background-color 0.3s var(--mr-ease);
}
.product-card:hover .pc-add,
.pc-add:focus {
  transform: none;
}
.pc-add:hover {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.pc-body {
  padding: 22px 10px 6px;
}
.pc-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mr-accent-text);
}
.pc-body h3 {
  margin: 6px 0 6px;
}
.pc-body h3 a {
  color: var(--mr-heading);
}
.pc-body h3 a:hover {
  color: var(--mr-accent-text);
}
.pc-price {
  color: var(--mr-text);
  font-size: 16px;
  font-weight: 600;
}
.pc-price del {
  margin-left: 6px;
  font-size: 14px;
  color: var(--mr-muted);
}

/*----- 14.2 Product Page -----*/
.pd-main {
  position: relative;
  padding: 20px;
  background: var(--mr-product);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pd-thumbs button {
  padding: 4px;
  background: var(--mr-product);
  box-shadow: inset 0 0 0 1px var(--mr-line-2);
  transition: box-shadow 0.3s var(--mr-ease);
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  box-shadow: inset 0 0 0 2px var(--mr-tide);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-info h2 {
  margin: 6px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--mr-accent-text);
}
.pd-price del {
  margin-left: 10px;
  font-size: 26px;
  color: var(--mr-muted);
}
.pd-info .mr-kv {
  margin: 24px 0 30px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pd-buy .mr-btn {
  height: 54px;
}
.pd-wish {
  width: 54px;
  height: 54px;
}
.pd-wish.is-on {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.pd-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14.5px;
}
.pd-note i {
  font-size: 26px;
  color: var(--mr-accent-text);
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--mr-line-2);
}
.pd-tablist button {
  position: relative;
  padding: 0 0 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--mr-muted);
}
.pd-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mr-tide);
  transform: scaleX(0);
  transition: transform 0.4s var(--mr-ease);
}
.pd-tablist button.is-active {
  color: var(--mr-heading);
}
.pd-tablist button.is-active::after {
  transform: scaleX(1);
}
.pd-tabs [role="tabpanel"] {
  max-width: 900px;
}
.review-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--mr-line);
}
.review-list img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  margin-right: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--mr-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 14.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--mr-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--mr-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto 40px;
}
.bl-img {
  padding: 4px;
  background: var(--mr-product);
  box-shadow: inset 0 0 0 1px var(--mr-line);
}
.bl-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.bl-cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mr-accent-text);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--mr-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--mr-muted);
}
.bl-total {
  min-width: 90px;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  color: var(--mr-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--mr-ease), color 0.3s var(--mr-ease);
}
.bl-remove:hover {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--mr-line-2);
  background: var(--mr-surface);
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--mr-tide);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--mr-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mr-tide);
  transition: width 0.8s var(--mr-ease);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--mr-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mr-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--mr-product);
  box-shadow: inset 0 0 0 1px var(--mr-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mr-tide-deep);
  color: #FFFFFF;
  font-size: 11px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--mr-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--mr-heading);
}
.order-summary .mr-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--mr-accent-text);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--mr-accent-text);
}

/*----- 14.4 Toast -----*/
.mr-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--mr-deep);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--mr-mist-fixed);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--mr-ease), transform 0.4s var(--mr-ease), visibility 0.4s;
}
.mr-toast i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mr-tide-deep);
  color: #FFFFFF;
  font-size: 11px;
}
.mr-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/*======================
15. Blog & Account
========================*/
/*----- 15.1 Blog List -----*/
/* Salmara's blog: wide photo posts with a coral date tile, and coloured quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--mr-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--mr-tide-deep);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 42, 0.28);
}
.post-thumb.is-video .mr-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--mr-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .mr-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--mr-accent-text);
}
.bp-body h3 a {
  color: var(--mr-heading);
}
.bp-body h3 a:hover {
  color: var(--mr-accent-text);
}
.bp-body .mr-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a sea-ink card with the title set large in mist and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--mr-deep);
  --mr-heading: #FFFFFF;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: var(--mr-foam);
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #FFFFFF;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #FFFFFF;
}
.blog-post.is-quote h3 a:hover {
  color: var(--mr-foam);
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(255, 255, 255, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(255, 255, 255, 0.1);
  font-size: 120px;
}

/*----- 15.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .mr-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--mr-mist-2);
  border-inline-start: 4px solid var(--mr-tide);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--mr-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--mr-accent-text);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mr-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--mr-line);
}
.article-rows dt {
  color: var(--mr-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--mr-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mr-tide-deep);
  color: #FFFFFF;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--mr-deep);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--mr-mist);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .mr-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--mr-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--mr-accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mr-mist);
  color: var(--mr-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--mr-tide-deep);
  color: #FFFFFF;
}
.post-nav .pn-all {
  color: var(--mr-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--mr-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--mr-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--mr-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 15.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--mr-surface);
  box-shadow: var(--mr-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--mr-deep);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(10, 30, 42, 0.1) 0%, rgba(10, 30, 42, 0.55) 45%, rgba(10, 30, 42, 0.95) 100%);
}
.account-side > .mr-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
/* the monogram on a white disc over the photo's corner */
.account-side .as-mark,
.bare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(10, 30, 42, 0.18);
}
.account-side .as-mark img,
.bare-mark img {
  width: 58%;
  height: auto;
}
.as-copy {
  margin-top: auto;
}
.as-copy .mr-script {
  color: var(--mr-tide);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .mr-avatars .faces img,
.as-copy .mr-avatars .more {
  border-color: var(--mr-deep);
}
.account-form {
  padding: 56px 54px;
}
.account-form .mr-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--mr-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--mr-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--mr-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #C13A2C;
  transition: width 0.4s var(--mr-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--mr-tide);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--mr-leaf);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--mr-muted);
  font-size: 13px;
}

/*----- 15.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other: Salmara's split, with the monogram on the seam */
.mr-bare-page {
  min-height: 100vh;
  background: var(--mr-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-mark {
  position: absolute;
  top: 50%;
  right: -60px;
  z-index: 2;
  width: 120px;
  height: 120px;
  margin-top: -60px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .mr-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .mr-rule {
  margin: 24px 0;
}
.bare-inner .mr-lead {
  max-width: 560px;
}
.bare-inner .mr-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--mr-tide);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .mr-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--mr-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--mr-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--mr-surface);
  color: var(--mr-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-tide {
  background: var(--mr-tide);
  color: #FFFFFF;
}
.launch-count b {
  font-family: var(--mr-ff-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--mr-surface);
  color: var(--mr-heading);
  font-family: var(--mr-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--mr-tide);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: #FFFFFF;
  color: var(--mr-deep);
}

/*======================
16. Subheader
========================*/
/* the base's page title: a light photograph under a soft sea-ink veil, the crumbs, the light capitals and a lead
   set white and centred on it. Shop and account pages take the base's plain band, mist here. */
.mr-subheader {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 440px;
  margin: 0 40px;
  padding: 90px 0;
  overflow: clip;
  background: var(--mr-deep);
  text-align: center;
  --mr-heading: #FFFFFF;
  --mr-text: rgba(255, 255, 255, 0.9);
  --mr-muted: rgba(255, 255, 255, 0.78);
  --mr-accent-text: #FFFFFF;
}
.mr-subheader .sub-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.mr-subheader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 30, 42, 0.42) 0%, rgba(10, 30, 42, 0.58) 100%);
}
.mr-subheader .container {
  position: relative;
  z-index: 1;
}
.sub-copy {
  max-width: 820px;
  margin: 0 auto;
}
.sub-copy h1 {
  font-size: clamp(36px, 3.8vw, 62px);
}
.sub-copy .mr-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.sub-copy .mr-lead {
  max-width: 620px;
  margin: 22px auto 0;
}
.mr-subheader.is-plain {
  min-height: 0;
  margin: 0;
  padding: 70px 0 66px;
  background: var(--mr-mist);
  --mr-heading: #0F1D24;
  --mr-text: #4A555B;
  --mr-muted: #66727A;
  --mr-accent-text: #225F86;
}
[data-theme="dark"] .mr-subheader.is-plain {
  --mr-heading: #EEF2F3;
  --mr-text: #B9C4C9;
  --mr-muted: #93A1A8;
  --mr-accent-text: #7DB7DA;
}
.mr-subheader.is-plain::after {
  display: none;
}
.mr-subheader.is-plain .mr-lead {
  margin-top: 18px;
}
.mr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--mr-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mr-crumbs a {
  color: var(--mr-heading);
}
.mr-crumbs a:hover {
  color: var(--mr-accent-text);
  opacity: 0.8;
}
.mr-crumbs i {
  font-size: 7px;
  opacity: 0.7;
}
.mr-crumbs span {
  color: var(--mr-accent-text);
}

/*======================
17. Footer
========================*/
/* the base's footer: a pale box set inside the page's white margin, the brand in the middle (here the Shell - a
   scallop printed in two tones through an ordered dither, turning - over the wordmark), the quay and the hours either side */
.mr-footer {
  position: relative;
  padding: 0 40px 40px;
  background: var(--mr-bg);
}
.footer-box {
  padding: 90px 50px 0;
  background: var(--mr-mist);
  /* the shell's two tones */
  --gl-1: #225F86;
  --gl-2: #FFFFFF;
  --gl-alpha: 1;
}
[data-theme="dark"] .footer-box {
  --gl-1: #0E2B3C;
  --gl-2: #BFDAEA;
}
.mr-footer .container {
  max-width: none;
  padding: 0;
}
.footer-main {
  padding-bottom: 64px;
}
.mr-footer .widget h2 {
  margin-bottom: 22px;
}
.footer-address {
  margin-bottom: 18px;
}
.footer-contact li + li {
  margin-top: 10px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--mr-text);
}
.footer-contact a i {
  width: 16px;
  color: var(--mr-accent-text);
}
.footer-contact a:hover {
  color: var(--mr-accent-text);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-shell {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: 4px;
}
.footer-shell .mr-gl {
  z-index: 0;
}
.footer-word img {
  display: block;
  height: 34px;
  width: auto;
}
.footer-word .logo-light,
[data-theme="dark"] .footer-word .logo-main {
  display: none;
}
[data-theme="dark"] .footer-word .logo-light {
  display: block;
}
.footer-brand p {
  max-width: 340px;
  margin: 18px 0 22px;
  font-size: 14.5px;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.footer-social a {
  color: var(--mr-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.footer-social a:hover {
  color: var(--mr-accent-text);
}
.footer-hours .hours-list li {
  border-color: var(--mr-line-2);
}
.footer-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--mr-muted);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 26px 0;
  border-top: 1px solid var(--mr-line-2);
  font-size: 13.5px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--mr-accent-text);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}