@charset "utf-8";

/*
Theme Name: Maisona - Designer Fashion House HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
   1.1 Typography
   1.2 Utilities
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Fields
   1.6 Panels, Tags & Status
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
   3.6 Side Header
4. Offcanvas Menu
5. Custom Select
6. Language & Currency Pickers
7. Components
   7.1 Look Cards & The Look Number
   7.2 Piece Cards
   7.3 Label & Value Rows
   7.4 Services, Faces & Social
   7.5 Sliders & Quotes
   7.6 Tabs & Pagination
   7.7 Accordion
   7.8 Choices & Steppers
   7.9 Wizard
   7.10 Sidebar
   7.11 Play Button & Notes
8. Home 01 The House
   8.1 Hero
   8.2 Mosaic
   8.3 The House
   8.4 Season Shuffle
   8.5 Made To Order Rail
   8.6 Runway Band
   8.7 Appointments
   8.8 Stockists Band
9. Home 02 The Runway
   9.1 Three-Card Hero
   9.2 The Runway Film
   9.3 The Collection List
   9.4 Next Show
   9.5 Looks Rail
10. Home 03 The Archive
   10.1 Split Hero
   10.2 The Line-Up
   10.3 Masonry
   10.4 Archive Band
   10.5 Sizes
11. Inner Pages
   11.1 About & The Studio
   11.2 FAQ & Contact
   11.3 Account & Sign In
   11.4 The Article
   11.5 Coming Soon & 404
12. Collections
   12.1 Collections & Grid Tools
   12.2 A Collection
   12.3 The Lookbook
   12.4 The Runway Film Page
   12.5 The Archive
13. Atelier & Made To Order
   13.1 The Atelier
   13.2 The Appointment Page
   13.3 Size Guide
   13.4 Made To Order
   13.5 The Piece Page
14. Stockists
   14.1 Stockist Cards
   14.2 Stockists Page
15. Bag, Checkout & Wishlist
   15.1 Bag Lines
   15.2 Totals
16. Journal
   16.1 Post Cards
   16.2 The Journal
17. Page Title
18. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --mi-black: #000000;
  --mi-ink: #0B0B0B;
  --mi-white: #FFFFFF;
  --mi-bone: #E6DCCB;
  --mi-bone-rgb: 230, 220, 203;
  --mi-umber: #6E5B43;
  --mi-paper: #F3F0EA;
  --mi-green: #6FBF8F;
  --mi-red: #E07A6E;
  /* semantic: black is the default (the base's runway); [data-theme="light"] is the paper theme */
  --mi-bg: #000000;
  --mi-bg-rgb: 0, 0, 0;
  --mi-surface: #0C0C0C;
  --mi-surface-rgb: 12, 12, 12;
  --mi-panel: #111111;
  --mi-panel-rgb: 17, 17, 17;
  --mi-panel-2: #1A1A1A;
  --mi-heading: #FFFFFF;
  --mi-heading-rgb: 255, 255, 255;
  --mi-text: #D2D2D2;
  --mi-muted: #9A9A9A;
  --mi-line: #262626;
  --mi-line-2: #3A3A3A;
  --mi-dash: #8C8C8C;
  --mi-field: #141414;
  --mi-primary: #FFFFFF;
  --mi-on-primary: #000000;
  --mi-accent: #E6DCCB;
  --mi-accent-rgb: 230, 220, 203;
  --mi-on-accent: #000000;
  --mi-accent-text: #E6DCCB;
  --mi-tonal: #1A1A1A;
  --mi-ok: #6FBF8F;
  --mi-err: #E07A6E;
  --mi-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --mi-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
  --mi-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type: the base's Montserrat (capitals for titles, the menu and labels; the copy), Gloock for the house's
     editorial voice (collection names, display lines, look numbers, quotes, figures) */
  --mi-ff-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --mi-ff-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --mi-ff-display: 'Gloock', Georgia, 'Times New Roman', serif;
  --mi-fs-h1: clamp(30px, 3vw, 46px);
  --mi-fs-h2: clamp(26px, 2.3vw, 36px);
  --mi-fs-h3: clamp(19px, 1.45vw, 23px);
  --mi-fs-h4: 18px;
  --mi-fs-h5: 15.5px;
  --mi-fs-h6: 13px;
  --mi-fs-display: clamp(52px, 7.4vw, 124px);
  /* WebGL colours (the light slits) */
  --gl-1: #E6DCCB;
  --gl-alpha: 0.4;
  /* the loom's threads (the footer monogram) */
  --loom-warp: #E6DCCB;
  --loom-weft: #4A4744;
  --loom-ground: #1F1F1F;
}
[data-theme="light"] {
  --mi-bg: #F3F0EA;
  --mi-bg-rgb: 243, 240, 234;
  --mi-surface: #FAF8F4;
  --mi-surface-rgb: 250, 248, 244;
  --mi-panel: #EAE5DC;
  --mi-panel-rgb: 234, 229, 220;
  --mi-panel-2: #E1DBD0;
  --mi-heading: #0B0B0B;
  --mi-heading-rgb: 11, 11, 11;
  --mi-text: #3A3A3A;
  --mi-muted: #66625C;
  --mi-line: #DCD5C9;
  --mi-line-2: #C9C1B3;
  --mi-dash: #8A8276;
  --mi-field: #FAF8F4;
  --mi-primary: #0B0B0B;
  --mi-on-primary: #FFFFFF;
  --mi-accent: #6E5B43;
  --mi-accent-rgb: 110, 91, 67;
  --mi-on-accent: #FFFFFF;
  --mi-accent-text: #6E5B43;
  --mi-tonal: #E6E0D5;
  --mi-ok: #2F7350;
  --mi-err: #B0473B;
  --mi-shadow: 0 18px 40px rgba(11, 11, 11, 0.07);
  --mi-shadow-lg: 0 30px 70px rgba(11, 11, 11, 0.14);
  --gl-1: #6E5B43;
  --gl-alpha: 0.22;
  --loom-warp: #0B0B0B;
  --loom-weft: #A79F92;
  --loom-ground: #D6CFC3;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--mi-bg);
  color: var(--mi-text);
  font-family: var(--mi-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  -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(--mi-ease), background-color 0.3s var(--mi-ease);
}
a:hover {
  color: var(--mi-accent-text);
}
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
::selection {
  background: var(--mi-bone);
  color: #000000;
}
:focus-visible {
  outline: 2px solid var(--mi-accent);
  outline-offset: 3px;
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}
/* the phone gutter Bootstrap's g-5 would otherwise push past the screen */

/*----- 1.1 Typography -----*/
/* the base's titles: Montserrat 600 in capitals at no tracking; Gloock carries the house's display voice */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--mi-heading);
  font-family: var(--mi-ff-head);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1 {
  font-size: var(--mi-fs-h1);
}
h2 {
  font-size: var(--mi-fs-h2);
}
h3 {
  font-size: var(--mi-fs-h3);
}
h4 {
  font-size: var(--mi-fs-h4);
}
h5 {
  font-size: var(--mi-fs-h5);
}
h6 {
  font-size: var(--mi-fs-h6);
}
/* size by class, level by outline */
.mi-h2,
.mi-h3,
.mi-h4,
.mi-h5,
.mi-h6 {
  color: var(--mi-heading);
  font-family: var(--mi-ff-head);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}
.mi-h2 {
  font-size: var(--mi-fs-h2);
}
.mi-h3 {
  font-size: var(--mi-fs-h3);
}
.mi-h4 {
  font-size: var(--mi-fs-h4);
}
.mi-h5 {
  font-size: var(--mi-fs-h5);
}
.mi-h6 {
  font-size: var(--mi-fs-h6);
}
/* the house's editorial voice: Gloock in mixed case */
.mi-display {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: var(--mi-fs-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: none;
}
.mi-serif {
  font-family: var(--mi-ff-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.mi-lead {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--mi-text);
}
.mi-eyebrow,
.mi-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--mi-accent-text);
  font-family: var(--mi-ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}
/* the eyebrow's lead-in: a short dashed rule, the base's device */
.mi-eyebrow::before {
  content: "";
  width: 30px;
  border-top: 1px dashed currentColor;
}
.mi-eyebrow {
  margin-bottom: 16px;
}
.mi-label {
  margin: 0 0 18px;
  color: var(--mi-heading);
}
.mi-num {
  font-family: var(--mi-ff-display);
  font-weight: 400;
  font-variant-numeric: lining-nums;
}
/* a word mask for the R3 rise: padded on every side so no ascender, descender or accent is cut */
.w-mask {
  display: inline-block;
  margin: -0.18em -0.08em -0.22em;
  padding: 0.18em 0.08em 0.22em;
  overflow: hidden;
  vertical-align: top;
}
.w-in {
  display: inline-block;
}
/* the base's dashed rule under a title */
.mi-dash {
  display: block;
  width: 56px;
  margin-top: 22px;
  border-top: 1px dashed var(--mi-dash);
  transform-origin: left center;
}
.is-center .mi-dash {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}

/*----- 1.2 Utilities -----*/
.mi-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sec-pt {
  padding-top: 130px;
}
.sec-pb {
  padding-bottom: 130px;
}
.sec-pt-sm {
  padding-top: 80px;
}
.sec-pb-sm {
  padding-bottom: 80px;
}
.mi-bg-panel {
  position: relative;
  isolation: isolate;
  background-color: var(--mi-panel);
}
.mi-bg-panel > .container {
  position: relative;
  z-index: 1;
}
.mi-rel {
  position: relative;
}
.mi-center-btn {
  margin-top: 56px;
  text-align: center;
}
.is-hidden,
.is-unmatched,
[hidden] {
  display: none !important;
}
.mi-gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.mi-gl.is-on {
  opacity: 1;
}
/* a dark band that carries the light slits: its content sits above the canvas */
.mi-slit-band {
  position: relative;
  isolation: isolate;
}
.mi-slit-band > .container,
.mi-slit-band > .container-fluid {
  position: relative;
  z-index: 1;
}
/* photo bands: the photograph covers the band under a black wash, the copy sits above in white */
.mi-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #000000;
  color: rgba(255, 255, 255, 0.86);
  --mi-heading: #FFFFFF;
  --mi-text: rgba(255, 255, 255, 0.86);
  --mi-accent-text: #E6DCCB;
  --mi-dash: rgba(255, 255, 255, 0.6);
}
.mi-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mi-photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 60%, rgba(0, 0, 0, 0.3) 100%);
}
.mi-photo-band > .container {
  position: relative;
  z-index: 1;
}
/* square photo holders: the image covers its box and zooms a little on hover */
.mi-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mi-panel);
}
.mi-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1s var(--mi-ease);
}
.mi-frame.r34 {
  aspect-ratio: 3 / 4;
}
.mi-frame.r11 {
  aspect-ratio: 1 / 1;
}
.mi-frame.r32 {
  aspect-ratio: 3 / 2;
}
.mi-frame.r169 {
  aspect-ratio: 16 / 9;
}
/* the reveal's blocks sit on the photo while it resolves */
.mi-blocks {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*----- 1.3 Section Titles -----*/
.mi-title {
  margin-bottom: 60px;
}
.mi-title.is-center {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.mi-title h2 {
  margin: 0;
}
.mi-title .mi-lead,
.mi-title > p {
  margin: 18px 0 0;
}
.mi-title.is-center .mi-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 620px;
}
.mi-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 56px;
}
.mi-title-row .mi-title {
  margin-bottom: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* square faces; house physics: a lift, and the arrow slides out while its twin slides in */
.mi-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: var(--mi-primary);
  color: var(--mi-on-primary);
  font-family: var(--mi-ff-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--mi-ease), color 0.35s var(--mi-ease), box-shadow 0.35s var(--mi-ease), transform 0.35s var(--mi-ease);
}
.mi-btn i {
  position: relative;
  font-size: 12px;
  transition: transform 0.4s var(--mi-ease), opacity 0.3s ease;
}
.mi-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -24px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mi-btn:hover {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
  box-shadow: 0 14px 30px rgba(var(--mi-accent-rgb), 0.18);
  transform: translateY(-2px);
}
.mi-btn:hover i.fa-arrow-right {
  transform: translateX(24px);
}
.mi-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
/* white face over photographs, whatever the theme */
.mi-btn.is-light {
  background: #FFFFFF;
  color: #000000;
}
.mi-btn.is-light:hover {
  background: var(--mi-bone);
  color: #000000;
}
/* the tonal face: secondary actions */
.mi-btn.is-tonal {
  background: var(--mi-tonal);
  color: var(--mi-heading);
}
.mi-btn.is-tonal i {
  color: var(--mi-accent-text);
}
.mi-btn.is-tonal:hover {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}
.mi-btn.is-tonal:hover i {
  color: var(--mi-on-accent);
}
.mi-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 11.5px;
}
.mi-btn.is-block {
  width: 100%;
}
.mi-btn[disabled],
.mi-btn.is-off {
  opacity: 0.45;
  pointer-events: none;
}
.mi-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
}
/* the base's text link: capitals with a short dashed rule under them that runs out on hover */
.mi-more {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: var(--mi-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mi-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  border-top: 1px dashed var(--mi-dash);
  transition: width 0.45s var(--mi-ease), border-color 0.3s ease;
}
.mi-more:hover {
  color: var(--mi-accent-text);
}
.mi-more:hover::after {
  width: 100%;
  border-color: var(--mi-accent-text);
}

/*----- 1.5 Fields -----*/
.mi-field {
  position: relative;
}
.mi-field > label,
.mi-label-text {
  display: block;
  margin-bottom: 8px;
  color: var(--mi-heading);
  font-family: var(--mi-ff-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mi-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 46px 0 18px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--mi-field);
  color: var(--mi-heading);
  font-family: var(--mi-ff-body);
  font-size: 15px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.mi-input::placeholder {
  color: var(--mi-muted);
  opacity: 1;
}
.mi-input:focus {
  border-color: var(--mi-accent);
  outline: 0;
}
textarea.mi-input {
  height: 150px;
  padding-top: 16px;
  resize: vertical;
}
.mi-field > i {
  position: absolute;
  right: 18px;
  bottom: 21px;
  color: var(--mi-accent-text);
  font-size: 13px;
  pointer-events: none;
}
.mi-field.is-area > i {
  bottom: auto;
  top: 48px;
}
.mi-bg-panel .mi-input,
.mi-panel .mi-input {
  background: var(--mi-bg);
}
.mi-field.is-invalid .mi-input,
.mi-input.is-invalid {
  border-color: var(--mi-err);
}
/* the base's line form: capitals over a single fine rule */
.mi-field.is-line {
  margin-bottom: 26px;
}
.mi-field.is-line .mi-input {
  height: 48px;
  padding: 0 30px 0 0;
  border: 0;
  border-bottom: 1px solid var(--mi-line-2);
  background: transparent;
}
.mi-field.is-line > i {
  right: 0;
  bottom: 17px;
}
.mi-field.is-line textarea.mi-input {
  height: 110px;
  padding-top: 12px;
}
.mi-field.is-line .mi-input:focus {
  border-bottom-color: var(--mi-accent);
}
.mi-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mi-text);
  font-size: 14.5px;
  cursor: pointer;
}
.mi-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--mi-bone);
}
[data-theme="light"] .mi-check input {
  accent-color: var(--mi-umber);
}
input[type="range"] {
  width: 100%;
  accent-color: var(--mi-bone);
}
[data-theme="light"] input[type="range"] {
  accent-color: var(--mi-umber);
}
.form-status {
  margin: 14px 0 0;
  font-size: 14.5px;
}
.form-status:empty {
  display: none;
}
.form-status.is-ok {
  color: var(--mi-ok);
}
.form-status.is-error {
  color: var(--mi-err);
}

/*----- 1.6 Panels, Tags & Status -----*/
.mi-panel {
  padding: 44px;
  background: var(--mi-panel);
}
.mi-bg-panel .mi-panel {
  background: var(--mi-bg);
}
/* the base's dashed frame: a fine dashed square round a panel or an icon */
.mi-dashed {
  border: 1px dashed var(--mi-dash);
}
.mi-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: var(--mi-tonal);
  color: var(--mi-heading);
  font-family: var(--mi-ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.mi-tag.is-bone {
  background: var(--mi-bone);
  color: #000000;
}
/* open now: a round signal before the words */
.mi-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mi-open::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mi-err);
}
.mi-open.is-open::before {
  background: var(--mi-ok);
  box-shadow: 0 0 0 4px rgba(111, 191, 143, 0.2);
}
.mi-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--mi-bone);
  color: #000000;
  font-size: 14.5px;
  box-shadow: var(--mi-shadow-lg);
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s var(--mi-ease);
}
.mi-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* the base's scroll-to-top: an arrow in a dashed square */
.mi-back-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px dashed var(--mi-dash);
  background: var(--mi-bg);
  color: var(--mi-heading);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s var(--mi-ease), visibility 0.35s, background-color 0.3s ease, color 0.3s ease;
}
.mi-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mi-back-top:hover {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}

/*======================
2. Preloader
========================*/
/* Spotlight Step: a black runway in perspective with the base's dashed centre line, one follow spot at its far end,
   a figure stepping into it who becomes the slit M; the panel is always black (it is the runway at night) */
.mi-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: #000000;
}
.pre-stage {
  position: absolute;
  inset: 0;
}
/* the runway floor: a long strip narrowing to the pool of light, its dashed centre line running away from us */
.pre-runway {
  position: absolute;
  left: 0;
  right: 0;
  top: 62vh;
  bottom: 0;
  background:
    repeating-linear-gradient(180deg, rgba(230, 220, 203, 0.5) 0 12px, transparent 12px 30px) center top / 2px 100% no-repeat,
    linear-gradient(180deg, #0B0B0B 0%, #1A1A1A 100%);
  clip-path: polygon(45% 0, 55% 0, 80% 100%, 20% 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000000 35%);
  mask-image: linear-gradient(180deg, transparent 0%, #000000 35%);
}
/* the beam from above and the pool it throws on the floor */
.pre-beam {
  position: absolute;
  left: 50%;
  top: -10vh;
  width: 34vh;
  height: 74vh;
  margin-left: -17vh;
  background: linear-gradient(180deg, rgba(230, 220, 203, 0) 0%, rgba(230, 220, 203, 0.16) 60%, rgba(230, 220, 203, 0.24) 100%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(6px);
}
.pre-pool {
  position: absolute;
  left: 50%;
  top: 59vh;
  width: 44vh;
  height: 11vh;
  margin-left: -22vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(230, 220, 203, 0.55), rgba(230, 220, 203, 0.18) 60%, rgba(230, 220, 203, 0) 100%);
}
.pre-figure {
  position: absolute;
  left: 50%;
  top: 27vh;
  height: 36vh;
  width: auto;
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000000 70%, transparent 100%);
}
/* the mark and the word are centred by their margins, so the tweens own their transforms */
.pre-mark,
.pre-word {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  margin: 0 auto;
}
.pre-mark {
  top: 36vh;
  height: 15vh;
}
.pre-word {
  top: 54vh;
  height: 6.2vh;
}

/*======================
3. Header
========================*/
/* The base's header: the stacked wordmark left, the menu in mixed case to the right, the actions after it. "is-over"
   lies on the hero in white and turns into the solid bar when it sticks; "is-side" is the base's side-menu home: a
   fixed column on the left with the menu stacked down it. */
.mi-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--mi-bg);
  --hd-ink: var(--mi-heading);
  --hd-hover: var(--mi-accent-text);
  --hd-line: var(--mi-line);
  --hd-top: var(--mi-bg);
  --hd-top-ink: var(--mi-muted);
}
.mi-header .wide {
  display: flex;
  align-items: center;
  padding: 0 48px;
}
.mi-header.is-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: transparent;
  --hd-ink: #FFFFFF;
  --hd-hover: #E6DCCB;
  --hd-line: rgba(255, 255, 255, 0.16);
  --hd-top: transparent;
  --hd-top-ink: rgba(255, 255, 255, 0.72);
}
.mi-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.mi-logo img {
  height: 50px;
  width: auto;
}
/* the white lockup on black (the default) and on photographs, the ink one on paper */
.mi-logo .logo-main {
  display: none;
}
[data-theme="light"] .mi-logo .logo-main {
  display: block;
}
[data-theme="light"] .mi-logo .logo-light {
  display: none;
}
[data-theme="light"] .is-over:not(.is-sticky) .mi-logo .logo-main {
  display: none;
}
[data-theme="light"] .is-over:not(.is-sticky) .mi-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 40px;
  background: var(--hd-top);
  color: var(--hd-top-ink);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px dashed var(--hd-line);
  transition: height 0.4s var(--mi-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 .top-show b {
  color: var(--hd-ink);
  font-weight: 600;
}
.header-top a:hover {
  color: var(--hd-hover);
}
.header-top .top-right > a {
  position: relative;
  letter-spacing: 0.04em;
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 1px;
  height: 11px;
  background: currentColor;
  opacity: 0.3;
  transform: translateY(-50%);
}
.is-over:not(.is-sticky) .header-top .lang-btn,
.is-over:not(.is-sticky) .header-top .cur-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/*----- 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: 96px;
  gap: 40px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* the base's icon squares: a fine dashed frame that fills on hover */
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px dashed transparent;
  background: transparent;
  color: var(--hd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.header-icon:hover {
  border-color: var(--hd-ink);
  color: var(--hd-ink);
}
.header-icon .count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--mi-bone);
  color: #000000;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.mi-theme-toggle .ti-sun,
[data-theme="light"] .mi-theme-toggle .ti-moon {
  display: none;
}
[data-theme="light"] .mi-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 12px;
}
.is-over:not(.is-sticky) .header-btn {
  background: #FFFFFF;
  color: #000000;
}
.is-over:not(.is-sticky) .header-btn:hover {
  background: var(--mi-bone);
  color: #000000;
}
/* the base's menu mark: three fine bars of different length */
.mi-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 44px;
  height: 42px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mi-menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--hd-ink);
  transition: width 0.3s var(--mi-ease), background-color 0.3s ease;
}
.mi-menu-toggle span:nth-child(2) {
  width: 17px;
}
.mi-menu-toggle span:nth-child(3) {
  width: 22px;
}
.mi-menu-toggle:hover span {
  width: 26px;
}

/*----- 3.3 Main Menu -----*/
.mi-nav {
  margin: 0 0 0 auto;
}
.mi-nav > ul {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-nav li {
  position: relative;
}
.mi-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 36px 0;
  white-space: nowrap;
  color: var(--hd-ink);
  font-size: 13.5px;
  font-weight: 500;
}
.mi-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.3s var(--mi-ease);
}
.mi-nav > ul > li:hover > a,
.mi-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.mi-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.mi-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -26px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--mi-surface);
  border: 1px solid var(--mi-line);
  box-shadow: var(--mi-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--mi-ease), transform 0.35s var(--mi-ease), visibility 0.3s;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.mi-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.mi-nav li:hover > .sub-menu,
.mi-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mi-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 26px;
  color: var(--mi-text);
  font-size: 14px;
  transition: color 0.3s var(--mi-ease), padding 0.35s var(--mi-ease);
}
.mi-nav .sub-menu a i {
  font-size: 8px;
  color: var(--mi-muted);
}
.mi-nav .sub-menu li:hover > a,
.mi-nav .sub-menu li.active > a {
  padding-left: 32px;
  color: var(--mi-heading);
}
.mi-nav .sub-menu .sub-menu {
  top: -17px;
  left: 100%;
}
.mi-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.mi-nav .has-mega {
  position: static;
}
.mi-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 28px;
  background: var(--mi-surface);
  border: 1px solid var(--mi-line);
  box-shadow: var(--mi-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--mi-ease), transform 0.35s var(--mi-ease), visibility 0.3s;
}
.mi-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.mi-nav .has-mega:hover > .mega-menu,
.mi-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: 22px;
}
.mega-card {
  display: block;
  color: var(--mi-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--mi-panel);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--mi-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--mi-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--mi-ff-display);
  font-size: 22px;
  font-weight: 400;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--mi-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.mi-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: rgba(var(--mi-bg-rgb), 0.96);
  --hd-ink: var(--mi-heading);
  --hd-hover: var(--mi-accent-text);
  --hd-line: var(--mi-line);
  animation: mi-header-in 0.6s var(--mi-ease) both;
}
.mi-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.mi-header.is-sticky .header-main .wide {
  height: 76px;
}
.mi-header.is-sticky .mi-nav > ul > li > a {
  padding: 26px 0;
}
.mi-header.is-sticky .mi-logo img {
  height: 42px;
}
.mi-header-spacer {
  display: none;
}
.mi-header-spacer.is-on {
  display: block;
}
@keyframes mi-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*----- 3.6 Side Header -----*/
/* Home 3: the base's side-menu home - the logo at the top of a fixed column, the menu stacked down it with its
   sub-menus flying out to the right, the actions and the social squares at the foot */
.side-foot {
  display: none;
}

/*======================
4. Offcanvas Menu
========================*/
.mi-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--mi-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--mi-ease), box-shadow 0.6s var(--mi-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.mi-offcanvas.open {
  box-shadow: var(--mi-shadow-lg);
  transform: none;
}
.mi-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(17, 17, 17, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mi-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(--mi-line);
}
.offcanvas-head .mi-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(--mi-panel);
  color: var(--mi-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--mi-ease);
}
.offcanvas-close:hover {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--mi-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--mi-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--mi-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: 1px solid var(--mi-line);
  color: var(--mi-text);
  font-size: 15px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--mi-accent);
  color: var(--mi-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
  background: var(--mi-panel);
}
.offcanvas-foot .label {
  color: var(--mi-accent-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.oc-phone {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 28px;
}
.oc-mail {
  color: var(--mi-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: var(--mi-surface);
  --hd-ink: var(--mi-heading);
}

/*======================
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. */
.mi-select {
  position: relative;
}
.mi-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;
}
.mi-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--mi-line-2);
  background: var(--mi-surface);
  font-size: 15px;
  text-align: left;
  color: var(--mi-heading);
  transition: border-color 0.3s var(--mi-ease);
}
.mi-select.is-open .select-button,
.mi-select .select-button:hover {
  border-color: var(--mi-accent);
}
.mi-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mi-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--mi-accent-text);
  transition: transform 0.35s var(--mi-ease);
}
.mi-select.is-open .select-button i {
  transform: rotate(180deg);
}
.mi-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(--mi-surface);
  border-top: 2px solid var(--mi-accent);
  box-shadow: var(--mi-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--mi-ease), transform 0.3s var(--mi-ease), visibility 0.3s;
}
.mi-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--mi-accent);
  transform: translateY(-10px);
}
.mi-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mi-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--mi-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--mi-ease), color 0.2s var(--mi-ease);
}
.mi-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mi-accent-text);
}
.mi-select .select-option .option-meta.is-none {
  color: var(--mi-muted);
}
.mi-select .select-option.is-focused,
.mi-select .select-option:hover {
  background-color: var(--mi-panel);
}
.mi-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.mi-select .select-option.is-selected {
  color: var(--mi-accent-text);
}
.mi-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--mi-accent-text);
}
.mi-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--mi-panel);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language & Currency Pickers
========================*/
/* 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. Tonal faces, framed menus. */
.mi-lang,
.mi-cur {
  position: relative;
  flex-shrink: 0;
}
.mi-lang .lang-btn,
.mi-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 0;
  background: rgba(var(--mi-heading-rgb), 0.08);
  color: var(--mi-heading);
  font-family: var(--mi-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mi-lang .lang-btn:hover,
.mi-lang .lang-btn[aria-expanded="true"],
.mi-cur .cur-btn:hover,
.mi-cur .cur-btn[aria-expanded="true"] {
  background: var(--mi-primary);
  color: var(--mi-on-primary);
}
.mi-lang .lang-btn > i,
.mi-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.mi-lang .lang-btn[aria-expanded="true"] > i,
.mi-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.mi-cur .cur-btn b {
  font-weight: 500;
  color: var(--mi-accent);
}
.mi-cur .cur-btn:hover b,
.mi-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.mi-lang .flag {
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
}
.mi-lang.is-up .lang-btn,
.mi-cur.is-up .cur-btn {
  height: 44px;
  padding: 0 15px;
}
.mi-lang .lang-menu,
.mi-cur .cur-menu {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border: 1px solid var(--mi-line);
  background: var(--mi-bg);
  box-shadow: 6px 6px 0 0 rgba(var(--mi-heading-rgb), 0.12);
  font-family: var(--mi-ff-body);
  text-align: start;
  white-space: normal;
}
.mi-cur .cur-menu {
  width: 232px;
}
.mi-lang.is-up .lang-menu,
.mi-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.mi-lang .lang-menu[hidden],
.mi-cur .cur-menu[hidden] {
  display: none;
}
.mi-lang .lang-group,
.mi-cur .lang-group {
  margin: 6px 10px;
  color: var(--mi-muted);
  font-family: var(--mi-ff-body);
  font-size: 12px;
}
.mi-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mi-line-2);
}
.mi-lang .lang-item,
.mi-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--mi-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.mi-lang .lang-item small {
  margin-inline-start: auto;
  color: var(--mi-muted);
  font-family: var(--mi-ff-body);
  font-size: 11.5px;
}
.mi-lang .lang-item i,
.mi-cur .cur-item i {
  width: 12px;
  font-size: 11px;
  color: var(--mi-accent);
  opacity: 0;
}
.mi-cur .cur-item i {
  margin-inline-start: auto;
}
.mi-cur .cur-item b {
  width: 18px;
  color: var(--mi-accent);
  font-family: var(--mi-ff-body);
  font-weight: 500;
}
.mi-lang .lang-item:hover,
.mi-lang .lang-item[aria-pressed="true"],
.mi-cur .cur-item:hover,
.mi-cur .cur-item[aria-pressed="true"] {
  background: rgba(var(--mi-heading-rgb), 0.08);
}
.mi-lang .lang-item[aria-pressed="true"] i,
.mi-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}
.mi-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--mi-line-2);
  color: var(--mi-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/*======================
7. Components
========================*/
/*----- 7.1 Look Cards & The Look Number -----*/
/* every photograph card: a 3:4 frame that zooms a touch on hover while "Look 07" slides in from its left edge (the
   hover accent), the season and the pieces under it */
.look-no {
  position: absolute;
  left: 0;
  bottom: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px 10px 20px;
  background: #000000;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-102%);
  transition: transform 0.55s var(--mi-ease);
  pointer-events: none;
}
.look-no b {
  font-family: var(--mi-ff-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mi-bone);
}
.mi-frame:hover .look-no,
.look-card:hover .look-no,
.piece-card:hover .look-no,
.season-card:hover .look-no,
.arc-card:hover .look-no,
.mz-tile:hover .look-no,
.mi-frame:focus-within .look-no {
  transform: translateX(0);
}
.mi-frame:hover img,
.look-card:hover .mi-frame img,
.piece-card:hover .mi-frame img,
.season-card:hover .mi-frame img {
  transform: scale(1.04);
}
.look-card .lc-body,
.season-card .sc-body,
.team-card .tc-body {
  padding-top: 18px;
}
.lc-meta {
  display: block;
  margin-bottom: 6px;
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lc-meta a:hover {
  color: var(--mi-accent-text);
}
.look-card h3 a:hover,
.piece-card h3 a:hover,
.team-card h3 a:hover {
  color: var(--mi-accent-text);
}
.season-card .sc-name {
  margin: 2px 0 12px;
  font-size: 30px;
  line-height: 1.1;
}
.season-card .sc-name a:hover {
  color: var(--mi-accent-text);
}

/*----- 7.2 Piece Cards -----*/
.piece-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pc-media .pc-wish {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-media .pc-wish:hover,
.pc-media .pc-wish.is-on {
  background: var(--mi-bone);
  color: #000000;
}
.piece-card .pc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 18px;
}
.piece-card .mi-rows {
  margin: 12px 0 18px;
}
.piece-card .mi-btn {
  margin-top: auto;
}

/*----- 7.3 Label & Value Rows -----*/
/* facts as rows: the label in small capitals, the value on the right, a dashed rule between rows */
.mi-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--mi-line-2);
}
.mi-rows li:first-child {
  border-top: 1px dashed var(--mi-line-2);
}
.mi-rows span {
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mi-rows b {
  color: var(--mi-heading);
  font-size: 14.5px;
  font-weight: 500;
  text-align: right;
}
.mi-rows.is-tight li {
  padding: 7px 0;
}
.mi-rows.is-tight b {
  font-size: 14px;
}
.mi-rows .mi-price {
  font-family: var(--mi-ff-display);
  font-size: 18px;
  font-weight: 400;
}

/*----- 7.4 Services, Faces & Social -----*/
/* the base's service item: a line icon in a dashed square beside its title and two lines */
.svc {
  display: flex;
  gap: 22px;
}
.svc-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px dashed var(--mi-dash);
  color: var(--mi-accent-text);
  font-size: 18px;
  transition: background-color 0.35s var(--mi-ease), color 0.35s var(--mi-ease), border-color 0.35s ease;
}
.svc:hover .svc-ico {
  background: var(--mi-accent);
  border-color: var(--mi-accent);
  color: var(--mi-on-accent);
}
.svc h3 {
  margin: 4px 0 10px;
}
.svc h3 a:hover {
  color: var(--mi-accent-text);
}
.svc p {
  margin: 0;
  font-size: 15px;
}
/* faces, overlapping, with a count bubble */
.mi-avatars {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
.mi-avatars .faces {
  display: flex;
}
.mi-avatars .faces img,
.mi-avatars .more {
  width: 46px;
  height: 46px;
  margin-inline-start: -12px;
  border: 2px solid var(--mi-panel);
  border-radius: 50%;
  object-fit: cover;
}
.mi-avatars .faces img:first-child {
  margin-inline-start: 0;
}
.mi-avatars .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-bone);
  color: #000000;
  font-size: 12px;
  font-weight: 600;
}
.mi-avatars .txt {
  display: flex;
  flex-direction: column;
  color: var(--mi-muted);
  font-size: 13px;
  line-height: 1.45;
}
.mi-avatars .txt b {
  color: var(--mi-heading);
  font-size: 14px;
  font-weight: 600;
}
.mi-face {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
/* the base's social squares: initials-size icons in dashed frames */
.mi-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mi-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px dashed var(--mi-dash);
  color: var(--mi-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.mi-social a:hover {
  background: var(--mi-accent);
  border-color: var(--mi-accent);
  color: var(--mi-on-accent);
}
/* newsletter: one line, an arrow button */
.mi-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 460px;
}
.mi-newsletter input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid var(--mi-line-2);
  background: transparent;
  color: var(--mi-heading);
  font-size: 15px;
}
.mi-newsletter input::placeholder {
  color: var(--mi-muted);
}
.mi-newsletter input:focus {
  outline: 0;
  border-color: var(--mi-accent);
}
.mi-newsletter button {
  width: 54px;
  height: 54px;
  background: var(--mi-primary);
  color: var(--mi-on-primary);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mi-newsletter button:hover {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}
.mi-newsletter .form-status {
  flex-basis: 100%;
}

/*----- 7.5 Sliders & Quotes -----*/
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px dashed var(--mi-dash);
  color: var(--mi-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.slider-arrow:hover {
  background: var(--mi-accent);
  border-color: var(--mi-accent);
  color: var(--mi-on-accent);
}
.slider-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.swiper-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.swiper-dots .swiper-pagination-bullet {
  width: 22px;
  height: 2px;
  margin: 0 !important;
  border-radius: 0;
  background: var(--mi-line-2);
  opacity: 1;
  transition: background-color 0.3s ease, width 0.3s var(--mi-ease);
}
.swiper-dots .swiper-pagination-bullet-active {
  width: 40px;
  background: var(--mi-accent);
}
/* the press: the base's large quote mark, a centred line in capitals, the face and the masthead */
.press-wrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.press-mark {
  display: block;
  height: 80px;
  color: var(--mi-accent-text);
  font-size: 150px;
  line-height: 1;
}
.press-quote blockquote {
  margin: 0;
}
.press-quote blockquote p {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.32;
}
.press-quote figcaption {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  text-align: left;
}
.press-quote figcaption img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
.press-quote cite {
  display: block;
  color: var(--mi-heading);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.press-quote small {
  color: var(--mi-muted);
  font-size: 13.5px;
}
.press-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 46px;
}

/*----- 7.6 Tabs & Pagination -----*/
/* filter tabs: words in capitals; the chosen one takes the dashed rule */
.mi-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
}
.mi-tabs button {
  position: relative;
  padding: 8px 0;
  color: var(--mi-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.mi-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px dashed currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--mi-ease);
}
.mi-tabs button:hover,
.mi-tabs button.is-active {
  color: var(--mi-heading);
}
.mi-tabs button.is-active::after {
  transform: scaleX(1);
}
.mi-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 34px;
  margin-bottom: 30px;
  border-bottom: 1px dashed var(--mi-line-2);
}
.mi-tablist button {
  position: relative;
  padding: 14px 0;
  color: var(--mi-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mi-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--mi-accent);
  transform: scaleX(0);
  transition: transform 0.35s var(--mi-ease);
}
.mi-tablist button.is-active {
  color: var(--mi-heading);
}
.mi-tablist button.is-active::after {
  transform: scaleX(1);
}
.mi-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
.mi-pagination a,
.mi-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px dashed var(--mi-line-2);
  color: var(--mi-heading);
  font-size: 14px;
  font-weight: 500;
}
.mi-pagination a:hover,
.mi-pagination .is-current {
  background: var(--mi-primary);
  border-color: var(--mi-primary);
  color: var(--mi-on-primary);
}
/* a search box in a toolbar */
.mi-search {
  position: relative;
}
.mi-search input {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 18px;
  border: 0;
  background: var(--mi-field);
  color: var(--mi-heading);
  font-size: 14.5px;
}
.mi-search input:focus {
  outline: 1px solid var(--mi-accent);
}
.mi-search button,
.mi-search i {
  position: absolute;
  right: 16px;
  top: 50%;
  color: var(--mi-accent-text);
  font-size: 13px;
  transform: translateY(-50%);
}

/*----- 7.7 Accordion -----*/
.mi-accordion .acc-item {
  border-bottom: 1px dashed var(--mi-line-2);
}
.mi-accordion .acc-item:first-child {
  border-top: 1px dashed var(--mi-line-2);
}
.mi-accordion .acc-title {
  margin: 0;
  font-size: inherit;
  text-transform: none;
}
.mi-accordion .acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--mi-heading);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}
.mi-accordion .acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px dashed var(--mi-dash);
  color: var(--mi-accent-text);
  font-size: 11px;
  transition: transform 0.35s var(--mi-ease), background-color 0.3s ease, color 0.3s ease;
}
.mi-accordion .acc-item.is-open .acc-head {
  color: var(--mi-accent-text);
}
.mi-accordion .acc-item.is-open .acc-head i {
  background: var(--mi-accent);
  border-color: var(--mi-accent);
  color: var(--mi-on-accent);
  transform: rotate(45deg);
}
.mi-accordion .acc-body {
  padding: 0 60px 24px 0;
}

/*----- 7.8 Choices & Steppers -----*/
/* a choice is a dark tile with its own input; the chosen one takes the bone hairline */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.choice-card,
.chip-choice,
.date-choice,
.cloth-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.choice-card input,
.chip-choice input,
.date-choice input,
.cloth-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card .cc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 22px 20px;
  background: var(--mi-panel);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.choice-card b {
  color: var(--mi-heading);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.choice-card small {
  color: var(--mi-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.choice-card .cc-price {
  margin-top: auto;
  padding-top: 10px;
  color: var(--mi-accent-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.choice-card:hover .cc-body {
  box-shadow: inset 0 0 0 1px var(--mi-line-2);
}
.choice-card input:checked + .cc-body,
.choice-card.is-checked .cc-body {
  background: var(--mi-tonal);
  box-shadow: inset 0 0 0 1px var(--mi-accent);
}
.choice-card input:focus-visible + .cc-body,
.chip-choice input:focus-visible + span,
.date-choice input:focus-visible ~ b,
.cloth-choice input:focus-visible ~ .cl-sw {
  outline: 2px solid var(--mi-accent);
  outline-offset: 2px;
}
.choice-card.is-off .cc-body {
  opacity: 0.38;
  cursor: not-allowed;
}
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-choice span {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 18px;
  background: var(--mi-panel);
  color: var(--mi-heading);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.chip-choice:hover span {
  background: var(--mi-panel-2);
}
.chip-choice.is-checked span,
.chip-choice input:checked + span {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}
.chip-choice.is-taken span {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
/* days: a column of weekday, date and month, its free count below */
.date-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.date-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px 10px;
  background: var(--mi-panel);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.date-choice .dc-w,
.date-choice .dc-m {
  color: var(--mi-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.date-choice b {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}
.date-choice small {
  margin-top: 4px;
  color: var(--mi-accent-text);
  font-size: 11px;
}
.date-choice:hover {
  background: var(--mi-panel-2);
}
.date-choice.is-checked {
  background: var(--mi-accent);
}
.date-choice.is-checked b,
.date-choice.is-checked span,
.date-choice.is-checked small {
  color: var(--mi-on-accent);
}
.date-choice.is-full {
  opacity: 0.4;
  cursor: not-allowed;
}
/* size chips: 46px squares, the French size large, the other scales under it */
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.size-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 64px;
  padding: 0 10px;
  background: var(--mi-panel);
  color: var(--mi-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.size-chip b {
  font-family: var(--mi-ff-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.size-chip small {
  margin-top: 5px;
  color: var(--mi-muted);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.size-chip:hover {
  background: var(--mi-panel-2);
}
.size-chip.is-on {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}
.size-chip.is-on small {
  color: var(--mi-on-accent);
  opacity: 0.75;
}
.mi-qty {
  display: inline-flex;
  align-items: center;
  height: 54px;
  background: var(--mi-panel);
}
.mi-qty button {
  width: 46px;
  height: 100%;
  color: var(--mi-accent-text);
  font-size: 11px;
}
.mi-qty button:hover {
  color: var(--mi-heading);
}
.mi-qty b {
  width: 40px;
  color: var(--mi-heading);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.mi-qty.is-sm {
  height: 42px;
}
.mi-qty.is-sm button {
  width: 34px;
}

/*----- 7.9 Wizard -----*/
.mi-wizard .wz-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  counter-reset: wz;
}
.mi-wizard .wz-steps li {
  position: relative;
  flex: 1;
  min-width: 120px;
  padding: 0 14px 14px 0;
  border-bottom: 1px dashed var(--mi-line-2);
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  counter-increment: wz;
  cursor: default;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.mi-wizard .wz-steps li::before {
  content: "0" counter(wz);
  display: block;
  margin-bottom: 4px;
  font-family: var(--mi-ff-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.mi-wizard .wz-steps li.is-done {
  color: var(--mi-text);
  cursor: pointer;
}
.mi-wizard .wz-steps li.is-active {
  border-bottom: 1px solid var(--mi-accent);
  color: var(--mi-heading);
}
.mi-wizard .wz-step {
  display: none;
}
.mi-wizard .wz-step.is-active {
  display: block;
}
.mi-wizard .wz-step > h3 {
  margin-bottom: 8px;
}
.mi-wizard .wz-step > p {
  margin-bottom: 26px;
  color: var(--mi-muted);
}
.wz-hint {
  margin: 0;
  color: var(--mi-muted);
  font-size: 14px;
}
.wz-sub {
  margin: 30px 0 14px;
  color: var(--mi-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wz-yours {
  min-height: 1.6em;
  margin: 16px 0 0;
  color: var(--mi-accent-text);
  font-size: 14px;
}
.mi-wizard .wz-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px dashed var(--mi-line-2);
}
.mi-wizard [data-wz-error] {
  flex-basis: 100%;
  margin: 0;
  color: var(--mi-err);
  font-size: 14.5px;
}
.mi-wizard [data-wz-error]:empty {
  display: none;
}
.wz-done {
  padding: 40px;
  background: var(--mi-panel);
  text-align: center;
}
.wz-done .done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border: 1px dashed var(--mi-dash);
  color: var(--mi-accent-text);
  font-size: 20px;
}
.wz-done .done-ref {
  display: block;
  margin: 16px 0 8px;
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 34px;
}

/*----- 7.10 Sidebar -----*/
.mi-sidebar .widget {
  margin-bottom: 44px;
}
.mi-sidebar .widget > h2 {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--mi-line-2);
}
.widget-search {
  position: relative;
}
.widget-search input {
  width: 100%;
  height: 52px;
  padding: 0 50px 0 16px;
  border: 0;
  background: var(--mi-field);
  color: var(--mi-heading);
  font-size: 14.5px;
}
.widget-search input:focus {
  outline: 1px solid var(--mi-accent);
}
.widget-search button {
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  height: 52px;
  color: var(--mi-accent-text);
}
.side-list li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed var(--mi-line);
  font-size: 14.5px;
}
.side-list span {
  color: var(--mi-muted);
}
.side-list a:hover {
  color: var(--mi-accent-text);
}
.side-posts li {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}
.side-posts .thumb {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-posts small {
  color: var(--mi-muted);
  font-size: 12px;
}
.side-posts h3 {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
}
.side-posts h3 a:hover {
  color: var(--mi-accent-text);
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-cloud a {
  padding: 7px 14px;
  background: var(--mi-panel);
  color: var(--mi-text);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tag-cloud a:hover {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}
.widget-cta {
  padding: 32px 28px;
  border: 1px dashed var(--mi-dash);
}
.widget-cta h2 {
  margin-bottom: 10px;
}
.widget-cta p {
  font-size: 14.5px;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--mi-line);
  font-size: 14px;
}
.hours-list li b {
  color: var(--mi-heading);
  font-weight: 500;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--mi-accent-text);
}

/*----- 7.11 Play Button & Notes -----*/
.mi-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border: 1px dashed rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  font-size: 18px;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease, color 0.3s ease;
}
a:hover .mi-play {
  background: var(--mi-bone);
  color: #000000;
}
.mi-note {
  padding: 18px 22px;
  border-left: 1px dashed var(--mi-dash);
  color: var(--mi-text);
  font-size: 14.5px;
}

/*======================
8. Home 01 The House
========================*/
/*----- 8.1 Hero -----*/
/* the base's main home: one photograph filling the screen, the caption low on the left in capitals, the words
   "Previous" and "Next" low on the right; the collection's name in Gloock on its own lines */
.mi-hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  max-height: 1100px;
  overflow: hidden;
  background: #000000;
  color: #FFFFFF;
  --mi-heading: #FFFFFF;
  --mi-accent-text: #E6DCCB;
  --mi-dash: rgba(255, 255, 255, 0.7);
}
.mi-hero .swiper,
.mi-hero .swiper-wrapper,
.mi-hero .swiper-slide {
  height: 100%;
}
.mi-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.mi-hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mi-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.28) 46%, rgba(0, 0, 0, 0.42) 100%);
}
.mi-hero .container {
  position: relative;
  z-index: 2;
  padding-bottom: 130px;
}
.hero-copy {
  max-width: 760px;
}
.hero-title {
  margin: 4px 0 18px;
  color: #FFFFFF;
  font-family: var(--mi-ff-display);
  font-size: var(--mi-fs-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: none;
}
.hero-title .ln,
.hero-sub .ln {
  display: inline-block;
  white-space: nowrap;
}
.hero-title .ln {
  display: block;
}
.hero-sub {
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-transform: uppercase;
}
.hero-nav {
  position: absolute;
  right: 48px;
  bottom: 56px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 26px;
  color: #FFFFFF;
}
.hero-nav button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.hero-nav button i {
  font-size: 8px;
}
.hero-nav button:hover {
  color: var(--mi-bone);
}
.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
}
.hero-count b {
  font-family: var(--mi-ff-display);
  font-size: 20px;
  font-weight: 400;
}
.hero-bar {
  position: relative;
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.hero-bar span {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 33%;
  background: #FFFFFF;
  transition: width 0.6s var(--mi-ease);
}

/*----- 8.2 Mosaic -----*/
/* the base's mosaic: two rows of four columns, a wide frame on the right of the first and the left of the second */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 30px;
}
.mz-tile .mi-frame {
  aspect-ratio: 1 / 1;
}
.mz-tile.is-wide {
  grid-column: span 2;
}
.mz-tile.is-wide .mi-frame {
  aspect-ratio: auto;
  height: calc(100% - 66px);
  min-height: 300px;
}
.mz-tile {
  display: flex;
  flex-direction: column;
}
.mz-cap {
  padding-top: 16px;
}
.mz-tile h3 a:hover {
  color: var(--mi-accent-text);
}

/*----- 8.3 The House -----*/
.house-title h2 {
  margin-bottom: 4px;
}
.house-grid {
  --bs-gutter-y: 3rem;
}

/*----- 8.4 Season Shuffle -----*/
.mi-shuffle {
  overflow: clip;
}
.shuffle-read {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: -16px 0 30px;
}
.shuffle-read .sr-code {
  color: var(--mi-heading);
  font-size: clamp(64px, 7vw, 112px);
  line-height: 0.9;
}
.shuffle-read .sr-name {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
  color: var(--mi-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shuffle-read .sr-name b {
  color: var(--mi-accent-text);
  font-family: var(--mi-ff-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.shuffle-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
  margin-bottom: 34px;
}
.shuffle-list li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--mi-line-2);
  color: var(--mi-muted);
  font-size: 14px;
  transition: color 0.3s ease;
}
.shuffle-list li span {
  width: 44px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.shuffle-list li b {
  font-weight: 500;
}
.shuffle-list li.is-on {
  color: var(--mi-heading);
}
.shuffle-list li.is-on span {
  color: var(--mi-accent-text);
}
/* the deck: every card stacked on the same spot, laid back by the script */
.shuffle-deck {
  position: relative;
  width: min(420px, 78%);
  aspect-ratio: 3 / 4;
  margin: 40px auto;
}
.sh-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--mi-panel);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 100%;
  will-change: transform;
}
.sh-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.sh-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px;
  background: #000000;
  color: #FFFFFF;
  font-size: 13px;
}
.sh-tag b {
  color: var(--mi-bone);
  font-family: var(--mi-ff-display);
  font-size: 22px;
  font-weight: 400;
}

/*----- 8.5 Made To Order Rail -----*/
.mi-mto .mi-title > p {
  max-width: 520px;
}

/*----- 8.6 Runway Band -----*/
/* C5: the band sits in near darkness under one soft follow spot (--sx / --sy from the pointer or its rest point) */
.mi-runway-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  background: #000000;
  color: rgba(255, 255, 255, 0.86);
  --mi-heading: #FFFFFF;
  --mi-text: rgba(255, 255, 255, 0.86);
  --mi-accent-text: #E6DCCB;
  --mi-dash: rgba(255, 255, 255, 0.6);
  --sx: 68%;
  --sy: 44%;
}
.mi-runway-band .rb-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) contrast(1.05);
}
.mi-runway-band .rb-dark {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle 300px at var(--sx) var(--sy), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
  transition: background 0.2s linear;
}
.mi-runway-band .container {
  position: relative;
  z-index: 1;
}
.rb-copy {
  max-width: 520px;
}
.rb-copy h2 {
  margin-bottom: 18px;
}
.rb-copy p {
  margin-bottom: 30px;
}

/*----- 8.7 Appointments -----*/
/* the base's price columns: dashed rules between them, the figure in Gloock */
.appt-row {
  border-top: 1px dashed var(--mi-line-2);
  border-bottom: 1px dashed var(--mi-line-2);
}
.appt-col {
  height: 100%;
  padding: 44px 34px 40px;
  border-left: 1px dashed var(--mi-line-2);
}
.appt-row > div:first-child .appt-col {
  border-left: 0;
}
.appt-col .ac-figure {
  display: block;
  margin-top: 18px;
  color: var(--mi-heading);
  font-size: 46px;
  line-height: 1;
}
.appt-col .mi-dash {
  margin: 20px 0 22px;
}
.appt-col .mi-rows {
  margin-bottom: 20px;
}
.appt-col p {
  font-size: 14.5px;
}

/*----- 8.8 Stockists Band -----*/
.mi-stock-band {
  padding: 170px 0;
}
.mi-stock-band::before {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.25) 100%);
}
.sb-copy {
  max-width: 470px;
  margin-left: auto;
}
.sb-count {
  margin: 18px 0 26px;
  font-size: 17px;
}
.sb-count b {
  color: var(--mi-bone);
  font-size: 34px;
}
.sb-cities {
  margin-bottom: 34px;
}
.sb-cities li {
  border-color: rgba(255, 255, 255, 0.22);
}

/*======================
9. Home 02 The Runway
========================*/
/*----- 9.1 Three-Card Hero -----*/
/* the base's three-card slider: the collection's name in Gloock above, the centre look large and lit, its neighbours
   smaller and dimmed at the sides, the look's number and pieces under it */
.mi-hero2 {
  position: relative;
  padding: 70px 0 60px;
  overflow: hidden;
}
.h2-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 40px;
  margin-bottom: 40px;
}
.h2-head .mi-eyebrow {
  order: 2;
  margin: 0 0 14px;
}
.h2-title {
  margin: 0;
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: var(--mi-fs-display);
  font-weight: 400;
  line-height: 0.9;
  text-transform: none;
}
.h2-title .ln {
  display: block;
  white-space: nowrap;
}
.h2-slider {
  width: 100%;
  overflow: visible;
}
.h2-slider .swiper-slide {
  transition: opacity 0.6s var(--mi-ease);
  opacity: 0.38;
}
.h2-slider .swiper-slide-active {
  opacity: 1;
}
.h2-card {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: max(420px, calc(100vh - 420px));
  width: 100%;
  background: var(--mi-panel);
}
.h2-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(0.94);
  transition: transform 0.9s var(--mi-ease);
}
.h2-slider .swiper-slide-active .h2-card img {
  transform: scale(1);
}
.h2-slider .hero-copy {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 18px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.h2-slider .swiper-slide-active .hero-copy {
  opacity: 1;
}
.h2-slider .hero-copy .lc-meta {
  margin: 0;
  color: var(--mi-accent-text);
}
.h2-pieces {
  color: var(--mi-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-nav.is-static {
  position: relative;
  right: auto;
  left: auto;
  bottom: auto;
  justify-content: flex-end;
  margin-top: 36px;
  color: var(--mi-heading);
}
.hero-nav.is-static button {
  color: var(--mi-heading);
}
.hero-nav.is-static button:hover {
  color: var(--mi-accent-text);
}
.hero-nav.is-static .hero-bar {
  background: var(--mi-line-2);
}
.hero-nav.is-static .hero-bar span {
  background: var(--mi-heading);
}

/*----- 9.2 The Runway Film -----*/
.film-screen {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 86vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--mi-panel);
}
.film-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  visibility: hidden;
}
.film-frame.is-on {
  visibility: visible;
}
.film-read {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 6px;
}
.film-read .fr-label,
.film-read .fr-of {
  color: var(--mi-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.film-read .fr-no {
  color: var(--mi-heading);
  font-size: clamp(72px, 7vw, 116px);
  line-height: 0.9;
}
.film-pieces {
  min-height: 1.8em;
  margin: 10px 0 22px;
  color: var(--mi-accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.film-track {
  position: relative;
  height: 1px;
  margin-bottom: 18px;
  background: var(--mi-line-2);
}
.film-track span {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 0;
  background: var(--mi-accent);
}
.film-rail {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 34px;
}
.film-thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mi-panel);
  opacity: 0.38;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.film-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.film-thumb.is-on {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--mi-accent);
}
button.film-thumb:hover {
  opacity: 0.8;
}

/*----- 9.3 The Collection List -----*/
/* the base's list home: the names centred down the screen; the hovered one lit, the others dim, its look behind */
.mi-colist {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 150px 0;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
  --mi-heading: #FFFFFF;
  --mi-accent-text: #E6DCCB;
  --mi-dash: rgba(255, 255, 255, 0.6);
}
.colist-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.colist-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.88) 75%);
}
.colist-stage img {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(620px, 72%);
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 22%, #000000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 22%, #000000 78%, transparent 100%);
  opacity: 0;
  transform: translateX(-50%) scale(1.04);
  transition: opacity 0.9s ease, transform 1.4s var(--mi-ease);
}
.colist-stage img.is-on {
  opacity: 0.85;
  transform: translateX(-50%) scale(1);
}
.colist-copy {
  position: relative;
}
.colist-names {
  margin: 10px 0 40px;
}
.colist-names a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--mi-ff-display);
  font-size: clamp(40px, 5.2vw, 86px);
  line-height: 1.12;
  transition: color 0.4s ease, opacity 0.4s ease;
}
.colist-names .cl-code {
  font-family: var(--mi-ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mi-bone);
}
.mi-colist.is-hovering .colist-names a {
  opacity: 0.32;
}
.mi-colist.is-hovering .colist-names a.is-lit,
.colist-names a:focus-visible {
  opacity: 1;
  color: #FFFFFF;
}

/*----- 9.4 Next Show -----*/
.show-count {
  display: flex;
  gap: 34px;
  margin: 6px 0 34px;
}
.show-count span {
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.show-count b {
  color: #FFFFFF;
  font-size: 56px;
  line-height: 1;
}

/*----- 9.5 Looks Rail -----*/
.rail-nav {
  display: flex;
  gap: 10px;
}
.rail-swiper {
  overflow: visible;
}
.mi-looks-rail {
  overflow: hidden;
}

/*======================
10. Home 03 The Archive
========================*/
/*----- 10.1 Split Hero -----*/
/* the base's split home beside its side menu: two photographs meeting at the middle, one word in Gloock set across
   the seam, previous / next low on the right */
.mi-hero3 {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 1080px;
  overflow: hidden;
  background: #000000;
  color: #FFFFFF;
  --mi-heading: #FFFFFF;
  --mi-accent-text: #E6DCCB;
  --mi-dash: rgba(255, 255, 255, 0.7);
}
.mi-hero3 .swiper,
.mi-hero3 .swiper-wrapper,
.mi-hero3 .swiper-slide {
  height: 100%;
}
.mi-hero3 .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.h3-pair {
  position: absolute;
  inset: 40px 40px 40px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.h3-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.62);
}
.mi-hero3 .hero-copy {
  position: relative;
  z-index: 2;
  text-align: center;
}
.mi-hero3 .hero-copy .mi-eyebrow {
  justify-content: center;
}
.h3-word {
  margin: 4px 0 26px;
  color: #FFFFFF;
  font-family: var(--mi-ff-display);
  font-size: clamp(64px, 10vw, 168px);
  font-weight: 400;
  line-height: 0.92;
  text-transform: none;
}
.h3-word .ln {
  display: block;
  white-space: nowrap;
}
.mi-hero3 .hero-nav {
  right: 72px;
  bottom: 64px;
}

/*----- 10.2 The Line-Up -----*/
/* one column per year; spring / summer on top, autumn / winter under it, the year below; the script piles them first */
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.lu-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lu-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mi-panel);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.lu-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s var(--mi-ease);
}
.lu-card:hover img {
  transform: scale(1.06);
}
.lu-card .lu-code {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 4px 7px;
  background: #000000;
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.lu-card.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--mi-line-2);
  background: transparent;
  box-shadow: none;
}
.lu-card.is-empty .lu-code {
  position: static;
  background: none;
  color: var(--mi-muted);
}
.lu-year {
  margin-top: 6px;
  color: var(--mi-heading);
  font-size: 22px;
  text-align: center;
}

/*----- 10.3 Masonry -----*/
.masonry-cols {
  columns: 4;
  column-gap: 30px;
}
.ms-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 34px;
  break-inside: avoid;
}
.mi-frame.r23 {
  aspect-ratio: 2 / 3;
}
.mi-frame.r45 {
  aspect-ratio: 4 / 5;
}
.ms-cap {
  padding-top: 14px;
}
.ms-item h3 a:hover {
  color: var(--mi-accent-text);
}

/*----- 10.4 Archive Band -----*/
.mi-archive-band {
  padding: 160px 0;
}
.mi-archive-band h2 {
  margin-bottom: 18px;
}
.mi-archive-band p {
  max-width: 460px;
  margin-bottom: 30px;
}
.ab-rows li {
  border-color: rgba(255, 255, 255, 0.24);
}
.ab-rows b {
  font-family: var(--mi-ff-display);
  font-size: 22px;
  font-weight: 400;
}

/*----- 10.5 Sizes -----*/
.size-table-wrap {
  overflow: hidden;
}
.size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.size-table th,
.size-table td {
  padding: 13px 10px;
  border-bottom: 1px dashed var(--mi-line-2);
  text-align: center;
}
.size-table thead th {
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.size-table tbody th {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 20px;
  font-weight: 400;
}
.size-table tbody td {
  color: var(--mi-text);
}
.size-table tr.is-lit th,
.size-table tr.is-lit td {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}
.size-finder .mi-btn {
  margin-top: 20px;
}
.sf-out {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 26px;
  padding: 24px 26px;
  border: 1px dashed var(--mi-dash);
}
.sf-label {
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sf-size {
  color: var(--mi-heading);
  font-size: 48px;
  line-height: 1.05;
}
.sf-scales {
  color: var(--mi-accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sf-out small {
  color: var(--mi-muted);
  font-size: 13px;
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 About & The Studio -----*/
.mi-about h2 {
  margin-bottom: 20px;
}
.about-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px dashed var(--mi-line-2);
}
.about-sign img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.about-sign span {
  display: flex;
  flex-direction: column;
  color: var(--mi-muted);
  font-size: 13px;
}
.about-sign b {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 22px;
  font-weight: 400;
}
.about-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.about-pair .mi-frame:first-child {
  margin-top: 70px;
}
/* the facts strip: four figures in Gloock with dashed rules between */
.mi-facts {
  padding: 60px 0;
}
.facts-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.facts-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-left: 1px dashed var(--mi-line-2);
  text-align: center;
}
.facts-row li:first-child {
  border-left: 0;
}
.facts-row b {
  color: var(--mi-heading);
  font-size: clamp(44px, 4.4vw, 66px);
  line-height: 1;
}
.facts-row span {
  color: var(--mi-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.join-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 60px;
  padding: 50px 0;
  border-top: 1px dashed var(--mi-line-2);
  border-bottom: 1px dashed var(--mi-line-2);
}
.join-row h2 {
  margin-bottom: 10px;
}
.join-row p {
  max-width: 560px;
  margin: 0;
}
.mi-profile h2 {
  margin-bottom: 18px;
}
.mi-profile .mi-rows {
  margin: 28px 0 32px;
}
.mi-profile .mi-btns {
  gap: 20px 26px;
}

/*----- 11.2 FAQ & Contact -----*/
.faq-side {
  position: sticky;
  top: 110px;
}
.faq-side h2 {
  margin-bottom: 24px;
}
.faq-search {
  margin-bottom: 30px;
}
.faq-group {
  margin-bottom: 50px;
}
.faq-head {
  margin-bottom: 8px;
  color: var(--mi-accent-text);
}
.mi-contact-form h2 {
  margin-bottom: 6px;
}
.cf-sub {
  margin-bottom: 34px;
  color: var(--mi-muted);
}
.mi-contact-form .mi-field:not(.is-line) {
  margin-bottom: 10px;
}
.mi-contact-form .mi-btn {
  margin-top: 26px;
}
.contact-map {
  position: relative;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
  background: var(--mi-panel);
}
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.9);
}
[data-theme="light"] .contact-map iframe {
  filter: grayscale(1);
}
.info-card {
  height: 100%;
  padding: 34px 30px;
  border: 1px dashed var(--mi-line-2);
}
.info-card .svc-ico {
  margin-bottom: 20px;
}
.info-card h2 {
  margin-bottom: 12px;
}
.info-card p {
  margin-bottom: 6px;
  font-size: 15px;
}

/*----- 11.3 Account & Sign In -----*/
.acc-card {
  padding: 36px 30px;
  background: var(--mi-panel);
  text-align: center;
}
.acc-card img {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  border-radius: 50%;
  object-fit: cover;
}
.acc-card p {
  color: var(--mi-muted);
  font-size: 14px;
}
.acc-card .mi-rows {
  margin: 20px 0 26px;
  text-align: left;
}
.acc-list {
  margin-bottom: 24px;
}
.acc-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--mi-line-2);
}
.acc-list li b {
  color: var(--mi-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13.5px;
}
.acc-list li span:not(.mi-tag) {
  grid-column: 1;
  color: var(--mi-muted);
  font-size: 14px;
}
.acc-list .mi-tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1040px;
  margin: 0 auto;
  background: var(--mi-panel);
}
.auth-wrap.is-single {
  grid-template-columns: 1fr;
  max-width: 540px;
}
.auth-photo {
  min-height: 560px;
}
.auth-form {
  padding: 56px 50px;
}
.auth-form h2 {
  margin-bottom: 8px;
}
.auth-form > p {
  margin-bottom: 30px;
  color: var(--mi-muted);
}
.pass-eye {
  position: absolute;
  right: 0;
  bottom: 12px;
  color: var(--mi-accent-text);
  font-size: 13px;
}
.pass-meter {
  display: block;
  height: 2px;
  margin-top: 10px;
  background: var(--mi-line-2);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mi-accent);
  transition: width 0.3s ease;
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--mi-muted);
  font-size: 12.5px;
}
.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.auth-terms {
  margin-bottom: 26px;
}
.auth-alt {
  margin: 22px 0 0;
  color: var(--mi-muted);
  font-size: 14px;
  text-align: center;
}
.auth-alt a {
  color: var(--mi-heading);
  font-weight: 600;
}

/*----- 11.4 The Article -----*/
.mi-article .post-meta {
  margin-bottom: 26px;
}
.art-cover {
  margin-bottom: 36px;
}
.mi-article > p {
  margin-bottom: 1.4em;
}
.mi-article h2 {
  margin: 44px 0 16px;
}
.art-quote {
  margin: 40px 0;
  padding: 34px 40px;
  border-left: 1px dashed var(--mi-dash);
}
.art-quote p {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.3;
}
.art-quote cite {
  display: block;
  margin-top: 14px;
  color: var(--mi-muted);
  font-size: 13px;
  font-style: normal;
}
.art-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 36px 0;
}
.art-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px dashed var(--mi-line-2);
  border-bottom: 1px dashed var(--mi-line-2);
}
.author-box {
  display: flex;
  gap: 24px;
  margin-top: 40px;
  padding: 30px;
  background: var(--mi-panel);
}
.author-box img {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.author-box h3 {
  margin: 2px 0 8px;
}
.author-box p {
  margin: 0;
  font-size: 15px;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.post-nav a {
  display: flex;
  flex-direction: column;
  padding: 22px 0;
  border-top: 1px dashed var(--mi-line-2);
}
.post-nav .is-next {
  align-items: flex-end;
  text-align: right;
}
.post-nav b {
  color: var(--mi-heading);
  font-size: 14.5px;
  text-transform: uppercase;
}
.post-nav a:hover b {
  color: var(--mi-accent-text);
}
.mi-comments {
  margin-top: 60px;
}
.mi-comments > h2 {
  margin-bottom: 20px;
}
.comment-list li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--mi-line);
}
.comment-list img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list b {
  display: block;
  color: var(--mi-heading);
  font-size: 14px;
  text-transform: uppercase;
}
.comment-list small {
  color: var(--mi-muted);
  font-size: 12.5px;
}
.comment-list p {
  margin: 8px 0 0;
  font-size: 15px;
}
.comment-form {
  margin-top: 46px;
}
.comment-form h2 {
  margin-bottom: 20px;
}
.comment-form .mi-btn {
  margin-top: 10px;
}

/*----- 11.5 Coming Soon & 404 -----*/
.mi-bare-page {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
  text-align: center;
}
.bare-copy {
  max-width: 720px;
  margin: 0 auto;
}
.bare-logo {
  display: inline-flex;
  margin-bottom: 50px;
}
.bare-logo img {
  height: 64px;
}
.bare-copy .mi-eyebrow {
  justify-content: center;
}
.bare-title {
  margin: 0 0 18px;
  font-size: clamp(46px, 5.4vw, 86px);
  line-height: 1;
}
.show-count.is-launch {
  justify-content: center;
  margin: 34px 0 40px;
}
.show-count.is-launch span {
  color: var(--mi-muted);
}
.show-count.is-launch b {
  color: var(--mi-heading);
}
.bare-copy .mi-newsletter {
  margin: 0 auto;
}
.bare-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 30px;
  margin-top: 46px;
}
.bare-404 {
  display: block;
  color: var(--mi-heading);
  font-size: clamp(120px, 18vw, 260px);
  line-height: 0.9;
}
.is-404 h1 {
  margin: 20px 0 12px;
}
.mi-btns.is-center {
  justify-content: center;
  margin-top: 30px;
}

/*======================
12. Collections
========================*/
/*----- 12.1 Collections & Grid Tools -----*/
.live-card .live-body {
  padding-top: 26px;
}
.live-name {
  margin: 4px 0 16px;
  font-size: clamp(40px, 4vw, 62px);
  line-height: 1;
}
.live-name a:hover {
  color: var(--mi-accent-text);
}
.live-card .mi-rows {
  margin-bottom: 26px;
}
.grid-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
}
.grid-tools .mi-search {
  width: 280px;
}
.grid-empty {
  margin: 40px 0 0;
  color: var(--mi-muted);
  text-align: center;
}
.season-card .mi-rows {
  margin: 0;
}

/*----- 12.2 A Collection -----*/
.col-name {
  margin: 0 0 22px;
  font-size: clamp(64px, 7vw, 120px);
  line-height: 0.92;
}
.mi-col-intro .mi-rows {
  margin: 30px 0 34px;
}
.col-hero-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.col-hero-pair .mi-frame:last-child {
  margin-top: 70px;
}
.mi-col-nav {
  border-top: 1px dashed var(--mi-line-2);
}
.col-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 44px 0;
}
.col-nav a {
  display: flex;
  flex-direction: column;
}
.col-nav .cn-next {
  align-items: flex-end;
  text-align: right;
}
.col-nav b {
  color: var(--mi-heading);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  transition: color 0.3s ease;
}
.col-nav a:hover b {
  color: var(--mi-accent-text);
}
.col-nav .cn-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px dashed var(--mi-dash);
  color: var(--mi-heading);
}
.col-nav .cn-all:hover {
  background: var(--mi-accent);
  color: var(--mi-on-accent);
}

/*----- 12.3 The Lookbook -----*/
.lb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 30px;
}
.lb-head .mi-title {
  max-width: 560px;
  margin-bottom: 0;
}
.lb-head .mi-tablist {
  margin-bottom: 0;
}
.lb-look {
  display: grid;
  grid-template-columns: 5fr 4fr;
  align-items: center;
  gap: 70px;
  padding: 50px 0;
  border-bottom: 1px dashed var(--mi-line);
}
.lb-look.is-flip {
  grid-template-columns: 4fr 5fr;
}
.lb-look.is-flip .lb-media {
  order: 2;
}
.lb-media {
  max-height: 760px;
}
.lb-copy {
  position: relative;
}
.lb-no {
  display: block;
  margin-bottom: 10px;
  color: var(--mi-accent-text);
  font-size: clamp(80px, 9vw, 150px);
  line-height: 0.85;
}
.lb-copy h3 {
  margin: 6px 0 22px;
}
.lb-pieces {
  margin-bottom: 26px;
}
.lb-pieces li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--mi-line-2);
}
.lb-pieces li:first-child {
  border-top: 1px dashed var(--mi-line-2);
}
.lb-pieces a {
  color: var(--mi-heading);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: uppercase;
}
.lb-pieces a:hover {
  color: var(--mi-accent-text);
}
.lb-pieces span {
  color: var(--mi-muted);
  font-size: 13.5px;
}
.lb-pieces b {
  color: var(--mi-text);
  font-weight: 500;
}

/*----- 12.4 The Runway Film Page -----*/
.film-screen.is-wide {
  max-height: none;
}
.film-steps {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}
.film-steps .film-track {
  flex: 1;
  margin: 0;
}
.film-rail.is-buttons {
  margin-top: 26px;
}
.mi-film.is-page .mi-rows {
  margin-top: 10px;
}
.rb-copy.is-right {
  margin-left: auto;
}
.show-table-wrap {
  overflow: hidden;
}
.show-table {
  width: 100%;
  border-collapse: collapse;
}
.show-table th,
.show-table td {
  padding: 16px 12px;
  border-bottom: 1px dashed var(--mi-line-2);
  text-align: left;
  vertical-align: middle;
}
.show-table thead th {
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.show-table tbody th {
  color: var(--mi-accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.show-table td.mi-serif {
  color: var(--mi-heading);
  font-size: 22px;
}
.show-table td:last-child {
  text-align: right;
}

/*----- 12.5 The Archive -----*/
.arc-card .arc-body {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}
.arc-code {
  color: var(--mi-accent-text);
  font-size: 28px;
  line-height: 1;
}
.arc-card h3 {
  margin: 8px 0 4px;
}

/*======================
13. Atelier & Made To Order
========================*/
/*----- 13.1 The Atelier -----*/
.mi-atelier-intro .mi-rows {
  margin: 28px 0 34px;
}
.appt-row.is-five .appt-col {
  padding: 40px 26px 36px;
}
.step-item {
  position: relative;
  padding-top: 26px;
  border-top: 1px dashed var(--mi-line-2);
}
.step-no {
  display: block;
  margin-bottom: 16px;
  color: var(--mi-accent-text);
  font-size: 46px;
  line-height: 1;
}
.step-item h3 {
  margin-bottom: 10px;
}
.step-item p {
  margin: 0;
  font-size: 15px;
}
.step-list {
  margin-bottom: 34px;
}
.step-item.is-row {
  display: flex;
  gap: 26px;
  padding: 22px 0;
}
.step-item.is-row .step-no {
  flex-shrink: 0;
  width: 64px;
  margin: 0;
  font-size: 40px;
}
/* the cloth library: a swatch, the cloth and its mill, what it adds and its weeks */
.cloth-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.cloth-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--mi-line-2);
}
.cl-sw {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.cl-sw.is-wool-df { background: #2B2A28; }
.cl-sw.is-cashmere { background: #5B5148; }
.cl-sw.is-shearling { background: radial-gradient(circle at 30% 30%, #4A3B2C 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #4A3B2C 0 16%, transparent 17%), #A08A70; }
.cl-sw.is-gabardine { background: #9A9183; }
.cl-sw.is-check { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 3px, transparent 3px 9px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 3px, transparent 3px 9px), #7B6A58; }
.cl-sw.is-linen { background: #C9BFAE; }
.cl-sw.is-silk-crepe { background: #E4DCCD; }
.cl-sw.is-silk-satin { background: linear-gradient(135deg, #1E1C1B, #4A4542 50%, #1E1C1B); }
.cl-sw.is-poplin { background: #F1EEE7; }
.cl-sw.is-lace { background: radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 2px, transparent 2.5px) 0 0 / 7px 7px, #EDE7DA; }
.cl-sw.is-rib { background: repeating-linear-gradient(90deg, #151515 0 3px, #2A2A2A 3px 5px); }
.cl-sw.is-cash-rib { background: repeating-linear-gradient(90deg, #3D3833 0 3px, #514A44 3px 5px); }
.cl-txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.4;
}
.cl-txt b {
  color: var(--mi-heading);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.cl-txt small {
  color: var(--mi-muted);
  font-size: 13px;
}
.cl-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--mi-heading);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.cl-meta small {
  color: var(--mi-muted);
  font-size: 12px;
}

/*----- 13.2 The Appointment Page -----*/
.mi-wizard fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mi-wizard legend {
  float: none;
  width: auto;
  margin-bottom: 8px;
  padding: 0;
}
.wz-consent {
  margin-top: 24px;
}
.appt-aside {
  position: sticky;
  top: 110px;
  padding: 34px 30px;
  border: 1px dashed var(--mi-dash);
}
.appt-aside h2 {
  margin-bottom: 18px;
}
.aside-yours {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: var(--mi-accent-text);
  font-size: 13.5px;
}
.aside-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--mi-line-2);
}
.aside-note p {
  margin-bottom: 8px;
  font-size: 14px;
}

/*----- 13.3 Size Guide -----*/
.size-panel {
  padding: 34px 30px;
  background: var(--mi-panel);
}
.size-panel h2 {
  margin-bottom: 8px;
}
.size-panel > p {
  margin-bottom: 22px;
  font-size: 14.5px;
}

/*----- 13.4 Made To Order -----*/
.mto-filters {
  position: sticky;
  top: 110px;
}
.mto-filters > h2 {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--mi-line-2);
}
.mf-group {
  margin-top: 26px;
}
.mf-group .mi-label-text b {
  color: var(--mi-accent-text);
  font-weight: 600;
}
.mi-tabs.is-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.mf-note {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px dashed var(--mi-line-2);
}
.mf-note p {
  font-size: 14px;
}
.mto-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--mi-line-2);
}
.mto-bar p {
  margin: 0;
  color: var(--mi-muted);
  font-size: 14px;
}
.mto-bar b {
  color: var(--mi-heading);
}

/*----- 13.5 The Piece Page -----*/
.piece-gallery {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
}
.pg-thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pg-thumb {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.pg-thumb:hover {
  opacity: 1;
}
.pg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.pg-main {
  aspect-ratio: 3 / 4;
}
.piece-info {
  position: sticky;
  top: 110px;
}
.piece-name {
  margin: 6px 0 10px;
  font-size: clamp(26px, 2.4vw, 36px);
}
.piece-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.piece-price .mi-price {
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 40px;
  line-height: 1;
}
.piece-price small {
  color: var(--mi-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.piece-group {
  margin-top: 26px;
}
.piece-group .mi-label-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mi-more.is-inline {
  padding-bottom: 4px;
  font-size: 11px;
}
.cloth-list-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cloth-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--mi-panel);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.cloth-choice .cl-sw {
  width: 34px;
  height: 34px;
}
.cloth-choice .cl-add {
  color: var(--mi-accent-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.cloth-choice:hover {
  background: var(--mi-panel-2);
}
.cloth-choice input:checked ~ .cl-sw {
  box-shadow: 0 0 0 2px var(--mi-bg), 0 0 0 3px var(--mi-accent);
}
.cloth-choice input:checked ~ .cl-txt b {
  color: var(--mi-accent-text);
}
.piece-rows {
  margin: 28px 0 24px;
}
.piece-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.piece-actions .mi-btn:first-child {
  flex: 1;
}
.piece-wish {
  width: 54px;
  padding: 0;
}
.piece-wish.is-on i {
  color: var(--mi-on-accent);
}
.piece-wish.is-on {
  background: var(--mi-accent);
}
.piece-tabs {
  margin-top: 80px;
}
.piece-tabs [role="tabpanel"] {
  max-width: 820px;
}

/*======================
14. Stockists
========================*/
/*----- 14.1 Stockist Cards -----*/
/* a stockist: its city, its name, the address, open now in its own time and its local clock; the open ones take a
   bone rule on their left */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stock-grid.is-mini {
  grid-template-columns: repeat(4, 1fr);
}
.stock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 24px;
  background: var(--mi-panel);
  box-shadow: inset 2px 0 0 0 transparent;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.stock-card.is-open {
  box-shadow: inset 2px 0 0 0 var(--mi-accent);
}
.stock-card.is-active {
  background: var(--mi-panel-2);
  box-shadow: inset 0 0 0 1px var(--mi-accent);
}
.st-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.st-city {
  margin-right: auto;
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stock-card h3 {
  margin: 4px 0 0;
}
.st-addr {
  margin: 0;
  color: var(--mi-text);
  font-size: 14px;
}
.st-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px dashed var(--mi-line-2);
  font-size: 13px;
}
.st-local {
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.st-local b {
  color: var(--mi-heading);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.stock-card .mi-more {
  align-self: flex-start;
  margin-top: 6px;
}
.is-mini .stock-card {
  padding: 22px;
}
.is-mini .st-head .mi-tag {
  display: none;
}

/*----- 14.2 Stockists Page -----*/
.stock-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--mi-line-2);
}
.stock-tools .mi-search {
  flex: 1;
  max-width: 340px;
  min-width: 220px;
}
.stock-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.stock-summary {
  margin: 0 0 24px;
  color: var(--mi-muted);
  font-size: 14px;
}
.stock-summary b {
  color: var(--mi-heading);
}
.stock-map {
  position: sticky;
  top: 110px;
}
.stock-map .map-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mi-panel);
}
.stock-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.9);
}
[data-theme="light"] .stock-map iframe {
  filter: grayscale(1);
}
.map-cap {
  display: flex;
  flex-direction: column;
  padding: 18px 0 0;
}
.map-cap b {
  color: var(--mi-heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.map-cap span {
  color: var(--mi-muted);
  font-size: 14px;
}

/*======================
15. Bag, Checkout & Wishlist
========================*/
/*----- 15.1 Bag Lines -----*/
.cart-head {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--mi-line-2);
}
.cart-head.is-gap {
  margin-top: 46px;
}
.bag-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto 36px;
  align-items: center;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--mi-line);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 96px 1fr auto 36px;
}
.bl-img {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mi-panel);
}
.bl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.bl-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bl-cat {
  color: var(--mi-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bl-body h3 {
  margin: 0;
}
.bl-body h3 a:hover {
  color: var(--mi-accent-text);
}
.bl-price {
  color: var(--mi-text);
  font-size: 13.5px;
}
.bl-total {
  min-width: 90px;
  color: var(--mi-heading);
  font-family: var(--mi-ff-display);
  font-size: 22px;
  font-weight: 400;
  text-align: right;
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px dashed var(--mi-line-2);
  color: var(--mi-muted);
  font-size: 12px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.bl-remove:hover {
  border-color: var(--mi-err);
  color: var(--mi-err);
}
.coupon-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 30px;
}
.coupon-form .mi-field {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
.coupon-form .form-status {
  flex-basis: 100%;
}
.cart-empty {
  padding: 60px 0;
  text-align: center;
}
.cart-empty h2,
.cart-empty h3 {
  margin-bottom: 10px;
}
.cart-empty p {
  margin-bottom: 26px;
}

/*----- 15.2 Totals -----*/
.mi-totals {
  position: sticky;
  top: 110px;
  padding: 34px 30px;
  background: var(--mi-panel);
}
.mi-totals h2 {
  margin-bottom: 20px;
}
.mi-totals .mi-field {
  margin-bottom: 20px;
}
.totals-rows {
  margin-bottom: 20px;
}
.totals-rows .t-total {
  font-family: var(--mi-ff-display);
  font-size: 26px;
  font-weight: 400;
}
.due-box {
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px dashed var(--mi-dash);
}
.due-box p {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 4px 0;
  font-size: 13.5px;
}
.due-box span {
  color: var(--mi-muted);
}
.due-box b {
  color: var(--mi-heading);
  font-weight: 600;
}
.due-box p:first-child b {
  color: var(--mi-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--mi-line);
  font-size: 14px;
}
.ol-img {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  aspect-ratio: 3 / 4;
}
.ol-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ol-img b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--mi-bone);
  color: #000000;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.ol-name {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--mi-heading);
}
.ol-name small {
  color: var(--mi-muted);
  font-size: 12px;
}
.order-lines li > b {
  color: var(--mi-heading);
  font-weight: 500;
}
.order-lines {
  margin-bottom: 18px;
}
.choice-grid.is-ship {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.ck-terms {
  margin-top: 30px;
}
.order-done {
  max-width: 640px;
  margin: 0 auto;
}

/*======================
16. Journal
========================*/
/*----- 16.1 Post Cards -----*/
/* the base's two posts: a wide photograph, the date and author in small type, the title in capitals, two lines */
.post-card .pc-copy {
  padding-top: 24px;
}
.post-card h3 {
  margin-bottom: 12px;
}
.post-card h3 a:hover {
  color: var(--mi-accent-text);
}
.post-card p {
  margin-bottom: 20px;
  font-size: 15px;
}

/*----- 16.2 The Journal -----*/
.blog-post {
  margin-bottom: 70px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--mi-panel);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--mi-ease);
}
.post-thumb:hover img {
  transform: scale(1.03);
}
.post-gallery .swiper,
.post-gallery .swiper-wrapper,
.post-gallery .swiper-slide {
  height: 100%;
}
.post-gallery .swiper {
  width: 100%;
  margin: 0;
}
.post-gallery .mini-nav {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.post-gallery .slider-arrow {
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.7);
}
.bp-body {
  padding-top: 26px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-bottom: 12px;
  color: var(--mi-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta a:hover {
  color: var(--mi-accent-text);
}
.blog-post h3 {
  margin-bottom: 14px;
}
.blog-post h3 a:hover {
  color: var(--mi-accent-text);
}
.blog-post p {
  margin-bottom: 22px;
}
.blog-post.is-quote {
  position: relative;
  padding: 54px 50px;
  border: 1px dashed var(--mi-dash);
}
.blog-post.is-quote .bp-glyph {
  position: absolute;
  right: 40px;
  top: 0;
  color: var(--mi-accent-text);
  font-size: 140px;
  line-height: 1;
  opacity: 0.6;
}
.blog-post.is-quote h3 {
  max-width: 560px;
  margin: 10px 0 16px;
}
.blog-post.is-quote .bp-by {
  color: var(--mi-muted);
  font-size: 13px;
}

/*======================
17. Page Title
========================*/
/* the base's page title: a photograph under a black wash, the title low on the left in capitals; pages without a
   photograph get the black band with the light slits. The breadcrumb and a lead line sit with the title. */
.mi-subheader {
  position: relative;
  padding: 250px 0 100px;
}
.mi-subheader .sub-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.mi-subheader h1 {
  font-size: clamp(34px, 3.6vw, 56px);
}
.mi-subheader .sub-lead {
  max-width: 560px;
  margin: 18px 0 0;
  font-size: 16.5px;
}
.mi-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 18px;
  color: var(--mi-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mi-crumbs i {
  font-size: 7px;
  opacity: 0.6;
}
.mi-crumbs a:hover {
  color: var(--mi-accent-text);
}
.mi-crumbs span {
  color: var(--mi-accent-text);
}
.mi-photo-band.mi-subheader .mi-crumbs {
  color: rgba(255, 255, 255, 0.78);
}
.mi-subheader.is-plain {
  padding: 110px 0 90px;
  border-bottom: 1px dashed var(--mi-line-2);
  background: var(--mi-bg);
}

/*======================
18. Footer
========================*/
/* the base's footer: a dashed rule over it, the wordmark, the address and telephone in small type, the social links
   in dashed squares, the copyright row under a second dashed rule; the light slits pass behind it and the loom weaves
   the monogram in its last column */
.mi-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 110px;
  border-top: 1px dashed var(--mi-line-2);
  background: var(--mi-bg);
  font-size: 14.5px;
}
.mi-footer > .container,
.footer-bottom {
  position: relative;
  z-index: 1;
}
.footer-logo {
  display: inline-block;
  margin-bottom: 24px;
}
.footer-logo img {
  height: 64px;
  width: auto;
}
.footer-logo .logo-main,
[data-theme="light"] .footer-logo .logo-light {
  display: none;
}
[data-theme="light"] .footer-logo .logo-main {
  display: block;
}
.footer-brand p {
  max-width: 280px;
  margin-bottom: 24px;
}
.mi-footer .mi-label {
  font-size: 12px;
}
.footer-contact li {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px dashed var(--mi-line);
}
.footer-contact span {
  color: var(--mi-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-contact b,
.footer-contact a {
  color: var(--mi-heading);
  font-weight: 500;
}
.footer-contact a:hover {
  color: var(--mi-accent-text);
}
.footer-open {
  margin-top: 18px;
  font-size: 13.5px;
}
.footer-loom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.loom-canvas {
  display: block;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 46 / 52;
}
.loom-cap {
  margin-top: 14px;
  color: var(--mi-muted);
  font-size: 12.5px;
}
.footer-letter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 60px;
  margin-top: 80px;
  padding: 44px 0;
  border-top: 1px dashed var(--mi-line-2);
}
.footer-letter .letter-copy h2 {
  margin-bottom: 6px;
}
.footer-letter .letter-copy p {
  margin: 0;
  color: var(--mi-muted);
}
.footer-bottom {
  padding: 26px 0;
  border-top: 1px dashed var(--mi-line-2);
  color: var(--mi-muted);
  font-size: 13px;
}
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--mi-accent-text);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}