/* Wide screens: the site was designed on a 1536px-wide window (1920px screen at 125% zoom).
   Above that, grow the root size with the window so the whole layout scales as one piece —
   the headline (sized in vw) and everything sized in rem (nav, text, spacing, grid) stay in
   proportion, exactly as at 1536px. Laptops, tablets and phones are unchanged. */
@media (min-width: 1537px) {
  html { font-size: calc(100vw / 96); } /* 16px at 1536px, 20px at 1920px */
}

/* Cintamani cart: receipt-paper popups (js/cart.js) + nav cart button */

/* ---------- nav cart button ---------- */
.cm-cart-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0.25rem;
  padding: 0;
  border: 1px solid rgba(239, 238, 236, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  color: #efeeec;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s, border-color 0.45s, box-shadow 0.45s;
}

/* hover: a warm gold glow (also wins over the floating buttons' dark glass) */
.cm-cart-trigger:hover,
.cm-cart-trigger:focus-visible,
.cm-cart-trigger.is-floating:hover,
.cm-cart-trigger.is-floating:focus-visible {
  background: rgba(201, 180, 109, 0.16);
  border-color: rgba(227, 196, 141, 0.85);
  color: #f3e3bd;
  box-shadow: 0 0 0 4px rgba(201, 180, 109, 0.08), 0 0 18px rgba(201, 180, 109, 0.22);
}

.cm-cart-trigger:focus-visible {
  outline: 1px solid #c9b46d;
  outline-offset: 3px;
}

.cm-cart-trigger svg {
  width: 1rem;
  height: 1rem;
}

.cm-cart-trigger_count {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 1rem;
  background: #c9b46d;
  color: #1e1e1e;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.05rem;
  text-align: center;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-cart-trigger.has-items .cm-cart-trigger_count {
  transform: scale(1);
}

.cm-cart-trigger.is-bumped .cm-cart-trigger_count {
  animation: cm-bump 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cm-bump {
  40% { transform: scale(1.45); }
}

/* pages without the homepage's CONTACT pill: float it top-right */
.cm-cart-trigger.is-floating {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1001;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  background: rgba(10, 10, 10, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- overlay ---------- */
.cm-cart {
  --ink: #24160a;
  --ink-soft: rgba(36, 22, 10, 0.8);
  --ink-rule: rgba(36, 22, 10, 0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --receipt-font: "Courier Prime", "Courier New", monospace;
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.cm-cart.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cm-cart_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 4, 0.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.cm-cart.is-open .cm-cart_backdrop {
  opacity: 1;
}

/* close: thin circle like the site's buttons; × turns and fills cream on hover */
.cm-cart_close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 5;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(239, 238, 236, 0.4);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.35);
  color: #efeeec;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background-color 0.5s var(--ease), color 0.5s, border-color 0.5s;
}

.cm-cart.is-open .cm-cart_close {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.25s, 0.25s, 0s, 0s, 0s;
}

.cm-cart_close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.6s var(--ease);
}

.cm-cart_close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.cm-cart_close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.cm-cart_close:hover,
.cm-cart_close:focus-visible {
  background: #f2ede4;
  border-color: #f2ede4;
  color: #0b0b0b;
}

.cm-cart_close:hover span:first-child,
.cm-cart_close:focus-visible span:first-child { transform: translate(-50%, -50%) rotate(135deg); }
.cm-cart_close:hover span:last-child,
.cm-cart_close:focus-visible span:last-child { transform: translate(-50%, -50%) rotate(45deg); }

.cm-cart_close:focus-visible {
  outline: 1px solid #c9b46d;
  outline-offset: 4px;
}

/* ---------- receipt paper ---------- */
.cm-cart_stage {
  position: relative;
  flex: none; /* don't let the flex overlay shrink it back to the screen width */
  /* landscape vintage card (1415×953): as large as fits, never wider than 1180px */
  width: min(92vw, 1180px, calc(84svh * 1415 / 953));
  aspect-ratio: 1415 / 953;
}

.cm-receipt {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  color: var(--ink);
  font-family: var(--receipt-font);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14%) rotate(3deg);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease), visibility 0s 0.9s;
}

.cm-receipt.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(var(--tilt, -1deg));
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease), visibility 0s;
}

.cm-receipt.is-leaving {
  transform: translateY(-12%) rotate(-4deg);
}

/* writable area inside the paper (measured from the paper images) */
.cm-receipt_body {
  /* one size unit for everything printed on the card (≈ the old receipt column's 1cqw) */
  --u: 0.66cqw;
  position: absolute;
  z-index: 3;
  top: 8%;
  bottom: 8.5%;
  left: 6.5%;
  right: 6%;
  display: flex;
  flex-direction: column;
  font-size: calc(2.41 * var(--u));
  line-height: 1.45;
}

/* the site styles p/label/etc. globally — keep the receipt's typewriter face
   (class rules below, e.g. .cm-r_name, still switch to the serif) */
.cm-receipt_body :where(p, span, li, dt, dd, label, input, textarea, button, a, output, legend) {
  font-family: var(--receipt-font);
  letter-spacing: inherit;
}

/* receipt text is print, not page text: no selection and no text cursor; only the
   fields (and buttons) respond */
.cm-receipt_body {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.cm-receipt_body input,
.cm-receipt_body textarea {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.cm-receipt_body label:not(.cm-r_slip) {
  cursor: default;
  pointer-events: none;
}

.cm-r_field label,
.cm-r_bank dt,
.cm-r_totals dt {
  font-weight: 700;
}

.cm-receipt_scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: calc(1.6 * var(--u));
  margin-right: calc(-1.6 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 40, 23, 0.45) transparent;
}

.cm-receipt_scroll::-webkit-scrollbar { width: 4px; }
.cm-receipt_scroll::-webkit-scrollbar-thumb { background: rgba(58, 40, 23, 0.45); border-radius: 4px; }
.cm-receipt_scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- receipt typography ---------- */
.cm-r_head {
  text-align: center;
  padding-bottom: calc(2.2 * var(--u));
}

.cm-r_logo {
  display: block;
  width: calc(7.5 * var(--u));
  height: auto;
  margin: 0 auto calc(1.4 * var(--u));
  filter: invert(1) sepia(1) saturate(2) hue-rotate(345deg) brightness(0.45);
  opacity: 0.85;
}

.cm-r_brand {
  font-family: var(--font--primary-family, serif);
  font-size: calc(5.6 * var(--u));
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
}

.cm-r_brand em {
  font-style: italic;
}

.cm-r_eyebrow {
  margin: calc(1.4 * var(--u)) 0 0;
  font-size: calc(1.96 * var(--u));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cm-r_meta {
  display: flex;
  justify-content: space-between;
  margin-top: calc(2 * var(--u));
  font-size: calc(2.02 * var(--u));
  color: var(--ink-soft);
}

.cm-r_rule {
  border: 0;
  border-top: 1px dashed var(--ink-rule);
  margin: calc(2 * var(--u)) 0;
}

.cm-r_label {
  display: block;
  font-weight: 700;
  margin: 0 0 calc(1 * var(--u));
  font-size: calc(1.9 * var(--u));
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* line items */
.cm-r_items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-r_item {
  display: grid;
  grid-template-columns: calc(11 * var(--u)) 1fr;
  gap: 0 calc(2.2 * var(--u));
  padding: calc(2 * var(--u)) 0;
  border-bottom: 1px dotted var(--ink-rule);
  transition: background-color 1.2s var(--ease);
}

.cm-r_item:last-child { border-bottom: 0; }

.cm-r_item.is-new {
  background-color: rgba(201, 180, 109, 0.22);
}

.cm-r_thumb {
  width: calc(11 * var(--u));
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 25%;
  mix-blend-mode: multiply;
  filter: sepia(0.35) contrast(1.05);
}

.cm-r_name {
  font-family: var(--font--primary-family, serif);
  font-size: calc(3.47 * var(--u));
  line-height: 1.1;
  margin: 0 0 calc(0.4 * var(--u));
}

.cm-r_sub {
  font-size: calc(1.85 * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* chosen colour under the piece name */
.cm-r_colour {
  display: inline-flex;
  align-items: center;
  gap: calc(1 * var(--u));
  font-size: calc(1.85 * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cm-r_colour i {
  width: calc(2.1 * var(--u));
  height: calc(2.1 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(43, 29, 20, 0.35);
  flex: none;
}

.cm-r_controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1.2 * var(--u)) calc(2.4 * var(--u));
  margin-top: calc(1.4 * var(--u));
}

.cm-r_sizes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.7 * var(--u));
  border: 0;
  margin: 0;
  padding: 0;
}

.cm-r_sizes legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cm-r_size {
  min-width: calc(4.4 * var(--u));
  padding: calc(0.5 * var(--u)) calc(0.7 * var(--u));
  border: 1px solid var(--ink-rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(1.96 * var(--u));
  cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s, border-color 0.4s;
}

.cm-r_size:hover { border-color: var(--ink); }

.cm-r_size[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #f3e6cf;
}

.cm-r_item.needs-size .cm-r_size {
  border-color: rgba(140, 41, 56, 0.7);
  animation: cm-nudge 1.6s var(--ease) 2;
}

@keyframes cm-nudge {
  50% { border-color: rgba(140, 41, 56, 0.25); }
}

.cm-r_qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-rule);
}

.cm-r_qty button {
  width: calc(4.2 * var(--u));
  height: calc(4.2 * var(--u));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(2.69 * var(--u));
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cm-r_qty button:hover:not(:disabled) { background: rgba(58, 40, 23, 0.1); }
.cm-r_qty button:disabled { opacity: 0.35; cursor: default; }

.cm-r_qty output {
  min-width: calc(3.6 * var(--u));
  text-align: center;
  font-size: calc(2.24 * var(--u));
}

.cm-r_item_top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(2 * var(--u));
}

.cm-r_price {
  flex: none;
  text-align: right;
  white-space: nowrap;
  font-size: calc(2.35 * var(--u));
}

.cm-r_remove {
  display: grid;
  place-items: center;
  width: calc(4.4 * var(--u));
  height: calc(4.4 * var(--u));
  margin: calc(1 * var(--u)) 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: #0e0905;
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s, color 0.4s;
}

.cm-r_remove svg {
  width: calc(2.7 * var(--u));
  height: calc(2.7 * var(--u));
}

.cm-r_remove:hover {
  border-color: rgba(140, 41, 56, 0.55);
  background: rgba(140, 41, 56, 0.08);
  color: #8c2938;
}

/* totals */
.cm-r_totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(0.6 * var(--u)) calc(2 * var(--u));
  margin: 0;
  font-size: calc(2.24 * var(--u));
}

.cm-r_totals dt { color: var(--ink-soft); letter-spacing: 0.14em; text-transform: uppercase; font-size: calc(1.9 * var(--u)); align-self: center; }
.cm-r_totals dd { margin: 0; text-align: right; }

.cm-r_totals .is-total {
  margin-top: calc(1.2 * var(--u));
  padding-top: calc(1.4 * var(--u));
  border-top: 1px solid var(--ink-rule);
}

.cm-r_totals dd.is-total {
  font-family: var(--font--primary-family, serif);
  font-size: calc(3.6 * var(--u));
  line-height: 1;
}

/* form fields written on the paper */
.cm-r_fields {
  display: grid;
  gap: calc(1.6 * var(--u));
}

.cm-r_field label {
  display: block;
  font-size: calc(1.79 * var(--u));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cm-r_field input,
.cm-r_field textarea {
  width: 100%;
  padding: calc(0.6 * var(--u)) 0;
  border: 0;
  border-bottom: 1px dashed var(--ink-rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(2.46 * var(--u));
  resize: none;
  transition: border-color 0.4s;
}

.cm-r_field input::placeholder,
.cm-r_field textarea::placeholder { color: rgba(58, 40, 23, 0.35); }

.cm-r_field input:focus,
.cm-r_field textarea:focus {
  outline: none;
  border-bottom: 1px solid var(--ink);
}

.cm-r_field.is-invalid input,
.cm-r_field.is-invalid textarea { border-bottom-color: #8c2938; }

.cm-r_hint {
  margin: calc(1.4 * var(--u)) 0 0;
  font-size: calc(1.9 * var(--u));
  color: var(--ink-soft);
}

.cm-r_error {
  min-height: 1.45em;
  margin: calc(1.2 * var(--u)) 0 0;
  color: #8c2938;
  font-size: calc(2.02 * var(--u));
}

/* buttons: ink outline that fills on hover, like the site's cream fill */
.cm-r_actions {
  display: grid;
  gap: calc(1.4 * var(--u));
  padding-top: calc(2 * var(--u));
}

.cm-r_btn {
  position: relative;
  display: block;
  width: 100%;
  padding: calc(2 * var(--u)) calc(1.5 * var(--u));
  border: 1px solid var(--ink);
  background: var(--ink); /* dark by default */
  color: #f3e6cf;
  font: inherit;
  font-size: calc(2.02 * var(--u));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 6px rgba(36, 22, 10, 0.25);
  transition: color 0.55s var(--ease), letter-spacing 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.55s var(--ease);
}

/* hover: a warmer, slightly lighter brown rises from the bottom */
.cm-r_btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, #5a3a1c, #46291a);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease);
}

.cm-r_btn:hover:not(:disabled),
.cm-r_btn:focus-visible {
  color: #fff6e6;
  letter-spacing: 0.34em;
  border-color: #5a3a1c;
  box-shadow: 0 6px 14px rgba(36, 22, 10, 0.35);
}
.cm-r_btn:hover:not(:disabled)::before,
.cm-r_btn:focus-visible::before { transform: scaleY(1); }
.cm-r_btn:disabled { opacity: 0.55; cursor: progress; }

.cm-r_link {
  justify-self: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: calc(1.9 * var(--u));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: color 0.3s, text-decoration-color 0.4s;
}

.cm-r_link:hover { color: var(--ink); text-decoration-color: currentColor; }

.cm-r_btn:focus-visible,
.cm-r_link:focus-visible,
.cm-r_size:focus-visible,
.cm-r_qty button:focus-visible,
.cm-r_remove:focus-visible,
.cm-r_slip:focus-within {
  outline: 1px dashed #8c6a1f;
  outline-offset: 2px;
}

/* empty selection */
.cm-r_empty {
  padding: calc(6 * var(--u)) 0;
  text-align: center;
}

.cm-r_empty p {
  font-family: var(--font--primary-family, serif);
  font-size: calc(4 * var(--u));
  font-style: italic;
  line-height: 1.2;
  margin: 0 0 calc(4 * var(--u));
}

/* ---------- payment receipt ---------- */
.cm-r_due {
  text-align: center;
  margin: 0;
}

.cm-r_due strong {
  display: block;
  font-family: var(--font--primary-family, serif);
  font-weight: 400;
  font-size: calc(7 * var(--u));
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.cm-r_bank {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(0.4 * var(--u)) calc(2 * var(--u));
  margin: 0;
  font-size: calc(2.24 * var(--u));
}

.cm-r_bank dt { color: var(--ink-soft); font-size: calc(1.85 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; align-self: center; }
.cm-r_bank dd { margin: 0; text-align: right; }

.cm-r_slip {
  position: relative;
  display: grid;
  place-items: center;
  gap: calc(0.8 * var(--u));
  min-height: calc(15 * var(--u));
  padding: calc(2.4 * var(--u));
  border: 1px dashed var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}

.cm-r_slip:hover,
.cm-r_slip.is-dragging { background: rgba(58, 40, 23, 0.07); }

.cm-r_slip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cm-r_slip_title {
  font-size: calc(2.13 * var(--u));
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.cm-r_slip_note {
  font-size: calc(1.79 * var(--u));
  color: var(--ink-soft);
}

.cm-r_slip_preview {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  max-width: 100%;
  text-align: left;
}

.cm-r_slip_preview img {
  width: calc(9 * var(--u));
  height: calc(11 * var(--u));
  object-fit: cover;
  mix-blend-mode: multiply;
  border: 1px solid var(--ink-rule);
}

.cm-r_slip_preview span {
  font-size: calc(2.02 * var(--u));
  word-break: break-all;
}

.cm-r_done {
  text-align: center;
  padding-top: calc(4 * var(--u));
}

.cm-r_done h2 {
  font-family: var(--font--primary-family, serif);
  font-weight: 400;
  font-size: calc(7.5 * var(--u));
  line-height: 1;
  margin: 0 0 calc(3 * var(--u));
}

.cm-r_done h2 em { font-style: italic; }

.cm-r_stamp {
  display: inline-block;
  margin: calc(2 * var(--u)) 0 calc(3 * var(--u));
  padding: calc(1.2 * var(--u)) calc(2.4 * var(--u));
  border: 2px solid rgba(140, 41, 56, 0.7);
  color: rgba(140, 41, 56, 0.85);
  font-size: calc(2.13 * var(--u));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

/* ---------- legibility: titles in black ---------- */
.cm-cart {
  --ink-title: #0e0905;
  --warn: #8c2938;
}

.cm-r_label,
.cm-r_eyebrow,
.cm-r_meta,
.cm-r_field label,
.cm-r_totals dt,
.cm-r_bank dt,
.cm-r_link,
.cm-r_hint,
.cm-r_sub {
  color: var(--ink-title);
}

/* ---------- fields: paper-toned focus / filled / autofill ---------- */
.cm-r_field input,
.cm-r_field textarea {
  padding-left: calc(1 * var(--u));
  padding-right: calc(1 * var(--u));
  transition: border-color 0.4s, background-color 0.4s var(--ease, ease);
}

.cm-r_field input:focus,
.cm-r_field textarea:focus {
  background: rgba(36, 22, 10, 0.07);
  border-bottom: 1px solid var(--ink-title);
}

.cm-r_field.is-filled input,
.cm-r_field.is-filled textarea {
  background: rgba(36, 22, 10, 0.035);
  border-bottom-style: solid;
  border-bottom-color: rgba(36, 22, 10, 0.6);
}

/* Chrome/Safari paint autofilled fields pale blue/white; keep them on the paper */
.cm-r_field input:-webkit-autofill,
.cm-r_field input:-webkit-autofill:hover,
.cm-r_field input:-webkit-autofill:focus,
.cm-r_field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px #ecdcbc inset;
  box-shadow: 0 0 0 100px #ecdcbc inset;
  transition: background-color 9999s ease-out 0s;
}

/* ---------- warnings ---------- */
.cm-r_field.is-invalid label { color: var(--warn); }

.cm-r_field.is-invalid input,
.cm-r_field.is-invalid textarea {
  border-bottom: 1px solid var(--warn);
  background: rgba(140, 41, 56, 0.06);
}

.cm-r_fielderr {
  margin: calc(0.6 * var(--u)) 0 0;
  color: var(--warn);
  font-size: calc(1.95 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}

.cm-r_fielderr:empty { display: none; }

.cm-r_fielderr::before {
  content: "✕ ";
  font-weight: 400;
}

.cm-r_error {
  font-weight: 700;
  color: var(--warn);
}

.cm-r_sizehint {
  flex-basis: 100%;
  font-size: calc(1.9 * var(--u));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-title);
}

.cm-r_item.needs-size {
  background: rgba(140, 41, 56, 0.07);
  box-shadow: inset 2px 0 0 var(--warn);
  padding-left: calc(1.2 * var(--u));
}

.cm-r_item.needs-size .cm-r_sizehint {
  color: var(--warn);
  font-weight: 700;
}

.cm-r_item.needs-size .cm-r_sizehint::before { content: "✕ "; font-weight: 400; }

.cm-r_slip.is-invalid {
  border-color: var(--warn);
  background: rgba(140, 41, 56, 0.06);
}

/* ---------- slip: layers stacked in one spot so the swap cross-fades ---------- */
.cm-r_slip {
  display: grid;
  height: calc(17 * var(--u));
  min-height: 0;
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
}

.cm-r_slip_layer {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(0.8 * var(--u));
  opacity: 0;
  transition: opacity 0.6s var(--ease, ease);
}

.cm-r_slip_layer.is-shown { opacity: 1; }

.cm-r_slip_preview img,
.cm-r_slip_pdf {
  width: calc(10 * var(--u));
  height: calc(12.5 * var(--u));
}

.cm-r_slip_pdf {
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-rule);
  font-size: calc(2 * var(--u));
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* ---------- account ---------- */
.cm-account-trigger_dot {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #c9b46d;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-account-trigger.is-signed-in .cm-account-trigger_dot { transform: scale(1); }

/* floating pair on pages without the homepage nav pill: account sits left of the cart */
.cm-account-trigger.is-floating { right: 4.75rem; }

.cm-receipt[data-step="4"] { --tilt: -0.6deg; }

.cm-r_note {
  margin: 0 0 calc(1.6 * var(--u));
  font-size: calc(1.95 * var(--u));
  line-height: 1.45;
  color: var(--ink-title, #0e0905);
}

.cm-r_note--center { text-align: center; }

.cm-r_inline {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.cm-r_inline:hover { color: #8c2938; }

.cm-r_orderlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-r_orderlist li {
  padding: calc(1.6 * var(--u)) 0;
  border-bottom: 1px dotted var(--ink-rule);
}

.cm-r_orderlist li:last-child { border-bottom: 0; }

.cm-r_order_top,
.cm-r_order_meta {
  display: flex;
  justify-content: space-between;
  gap: calc(2 * var(--u));
}

.cm-r_order_top { font-size: calc(2.3 * var(--u)); font-weight: 700; }
.cm-r_order_meta { margin: calc(0.4 * var(--u)) 0 calc(0.8 * var(--u)); font-size: calc(1.85 * var(--u)); }

.cm-r_order_status {
  padding: calc(0.2 * var(--u)) calc(1 * var(--u));
  border: 1px solid rgba(140, 41, 56, 0.6);
  color: #8c2938;
  font-size: calc(1.7 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- profile-filled fields: locked with a pencil, restorable once edited ---------- */
.cm-r_field.has-tool { position: relative; }

.cm-r_field.has-tool input,
.cm-r_field.has-tool textarea { padding-right: calc(10.5 * var(--u)); }

/* editing a delivery field for this order: clearly open, with a ✓ to confirm */
.cm-r_field.is-editing input,
.cm-r_field.is-editing textarea {
  background: rgba(36, 22, 10, 0.08);
  border-bottom: 1px solid #0e0905;
}

.cm-r_pen.is-done {
  border-color: rgba(36, 22, 10, 0.55);
  background: rgba(36, 22, 10, 0.08);
}

.cm-r_pen.is-done:hover {
  background: #24160a;
  border-color: #24160a;
  color: #f3e6cf;
  transform: none;
}

/* name + email come from the account: printed, not editable */
.cm-r_field.is-fixed input,
.cm-r_field.is-fixed textarea,
.cm-r_field.is-fixed input:focus {
  cursor: default;
  background: transparent;
  border-bottom: 1px solid rgba(36, 22, 10, 0.25);
  pointer-events: none;
}

.cm-r_field.is-locked input,
.cm-r_field.is-locked textarea {
  cursor: default;
  background: transparent;
  border-bottom: 1px solid rgba(36, 22, 10, 0.35);
}

.cm-r_field.is-locked input:focus,
.cm-r_field.is-locked textarea:focus { background: transparent; }

.cm-r_tools {
  position: absolute;
  right: 0;
  top: calc(2.3 * var(--u));
  display: flex;
  gap: calc(0.4 * var(--u));
}

.cm-r_pen {
  display: grid;
  place-items: center;
  width: calc(4.6 * var(--u));
  height: calc(4.6 * var(--u));
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: #0e0905;
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s, color 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-r_pen svg { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); }

.cm-r_pen:hover {
  border-color: rgba(36, 22, 10, 0.4);
  background: rgba(36, 22, 10, 0.07);
  transform: rotate(-8deg);
}

.cm-r_pen.is-restore:hover { transform: rotate(-40deg); }

.cm-r_pen:focus-visible { outline: 1px dashed #8c6a1f; outline-offset: 2px; }

/* ---------- small screens ---------- */
@media screen and (max-width: 767px) {
  .cm-cart_close {
    top: 0.9rem;
    right: 0.9rem;
    width: 2.6rem;
    height: 2.6rem;
  }

  /* floating pair: same size and row as the menu button (cart.js measures it) */
  .cm-cart-trigger.is-floating {
    top: var(--cm-float-top, 1rem);
    right: var(--cm-float-edge, 1rem);
    width: 2.5rem;
    height: 2.5rem;
  }

  .cm-account-trigger.is-floating { right: calc(var(--cm-float-edge, 1rem) + 3rem); }

  /* phones: CONTACT lives in the menu */
  .nav_wrapper .btn-group > .btn-bubble-arrow { display: none; }
  .nav_wrapper .btn-group .cm-cart-trigger { width: 2.5rem; height: 2.5rem; margin-right: 0; }
  .nav_wrapper .btn-group { gap: 0.5rem; }

  .cm-receipt_body { font-size: calc(2.69 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-receipt,
  .cm-receipt.is-active,
  .cm-cart_backdrop,
  .cm-cart_close {
    transition-duration: 0.01s !important;
  }
  .cm-r_item.needs-size .cm-r_size { animation: none; }
}

/* ---------- "added to your selection" note ---------- */
.cm-toast {
  position: fixed;
  top: 6.5rem;
  right: 1.5rem;
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 3rem);
  padding: 0.7rem 0.7rem 0.7rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(20, 13, 8, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #f4ece1;
  font-size: 0.85rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-0.6rem);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-toast.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.cm-toast_text em { font-style: italic; color: #e3c48d; }
.cm-toast_btn {
  flex: none;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.cm-toast_btn:hover { background: #f4ece1; color: #140d08; }
@media (max-width: 767px) {
  .cm-toast { top: auto; bottom: 1.25rem; right: 1rem; left: 1rem; justify-content: space-between; }
}


/* ---------- home nav: logo truly centred at every width ---------- */
.nav_wrapper .nav_container:has(.btn-group) {
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}
.nav_wrapper .nav_container:has(.btn-group) > :last-child { justify-self: end; }

/* laptops/tablets: the nav links already include Contact, so drop the extra pill to make room */
@media (max-width: 1199px) {
  .nav_wrapper .btn-group > .btn-bubble-arrow { display: none; }
}


/* =====================================================================
   Postcard checkout: plain cream card, no paper texture.
   Palette from the client reference: dark brown, olive, sage, cream.
   ===================================================================== */
.cm-cart {
  --ink: #2b1d14;
  --ink-title: #2b1d14;
  --ink-soft: rgba(43, 29, 20, 0.72);
  --ink-rule: rgba(43, 29, 20, 0.26);
  --olive: #5f6332;
  --sage: #b9bd9f;
  --cream: #ece4d0;
}

.cm-cart_stage {
  /* postcard proportions (3 : 2) */
  width: min(92vw, 1120px, calc(84svh * 1.5));
  aspect-ratio: 3 / 2;
}

.cm-receipt {
  background: var(--cream);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* sits perfectly straight once shown: any tilt makes the browser resample the text,
   and the masked (fading) summary column turned visibly soft */
.cm-receipt.is-active { transform: none; }

/* the thin printed frame a postcard has just inside its edge */
.cm-receipt::before {
  content: "";
  position: absolute;
  inset: 1.4cqw;
  border: 1px solid rgba(43, 29, 20, 0.3);
  border-radius: 2px;
  pointer-events: none;
}

.cm-receipt_body {
  top: 4.6cqw;
  bottom: 4.6cqw;
  left: 4.4cqw;
  right: 4.4cqw;
}

/* ---------- two columns: form (left) | order summary (right), like a checkout ---------- */
.cm-receipt_scroll:has(> .cm-r_col) {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 0;
  overflow: hidden;
  padding-right: 0;
  margin-right: 0;
}

.cm-r_col {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 29, 20, 0.22) transparent;
}
.cm-r_col::-webkit-scrollbar { width: 3px; }
.cm-r_col::-webkit-scrollbar-thumb { background: rgba(43, 29, 20, 0.22); border-radius: 3px; }

.cm-r_col--form { order: 1; padding: calc(1 * var(--u)) calc(5 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u)); }

/* summary: the address side of the postcard, on a soft sage panel */
.cm-r_col:not(.cm-r_col--form) {
  order: 2;
  padding: calc(3 * var(--u)) calc(3.4 * var(--u));
  background: rgba(185, 189, 159, 0.38);
  border-left: 1px solid rgba(43, 29, 20, 0.22);
}

/* single-column states (empty selection, thank-you) sit centred on the card */
.cm-receipt_scroll:not(:has(> .cm-r_col)) {
  width: min(100%, calc(60 * var(--u)));
  margin-left: auto;
  margin-right: auto;
  padding-right: 0;
}

@media (min-width: 768px) {
  .cm-receipt_scroll:not(:has(> .cm-r_col)) {
    --u: 0.82cqw;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    font-size: calc(2.41 * var(--u));
  }
}

/* ---------- header: brand on the left, stamp + postmark in the corner ---------- */
.cm-r_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  text-align: left;
  padding-bottom: calc(1 * var(--u));
}

.cm-r_eyebrow {
  margin: 0 0 calc(1 * var(--u));
  color: var(--olive);
  font-weight: 700;
}

.cm-r_brand { font-size: calc(5.4 * var(--u)); color: var(--ink); }

.cm-r_meta {
  display: block;
  margin: calc(1.4 * var(--u)) 0 0;
  font-size: calc(1.9 * var(--u));
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cm-r_post {
  position: relative;
  flex: none;
  width: calc(14 * var(--u));
  height: calc(13 * var(--u));
}

/* stamp: olive square with a perforated (dotted) edge */
.cm-r_postage {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(9.5 * var(--u));
  height: calc(11 * var(--u));
  background: var(--olive);
  outline: calc(0.5 * var(--u)) dotted var(--cream);
  outline-offset: calc(-0.25 * var(--u));
  box-shadow: 0 0 0 calc(0.5 * var(--u)) var(--olive);
  transform: rotate(3deg);
}
.cm-r_postage img {
  width: 72%;
  height: auto;
  opacity: 0.92;
}

/* round postmark overlapping the stamp */
.cm-r_postmark {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-content: center;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border: 1px solid rgba(43, 29, 20, 0.55);
  border-radius: 50%;
  font-size: calc(1.25 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(43, 29, 20, 0.7);
  transform: rotate(-12deg);
  background: rgba(236, 228, 208, 0.55);
}

/* ---------- section titles in the form column ---------- */
.cm-r_title {
  margin: 0 0 calc(2.6 * var(--u));
  font-family: var(--font--primary-family, serif);
  font-size: calc(4.6 * var(--u));
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}
.cm-r_title em { font-style: italic; color: var(--olive); }

/* ---------- details ---------- */
.cm-r_rule { border-top: 1px solid var(--ink-rule); }

.cm-r_label,
.cm-r_field label { color: var(--olive); }

.cm-r_item { border-bottom: 1px solid var(--ink-rule); }
.cm-r_item.is-new { background-color: rgba(95, 99, 50, 0.12); }

.cm-r_thumb {
  mix-blend-mode: normal;
  filter: none;
  border: 1px solid rgba(43, 29, 20, 0.2);
  border-radius: 2px;
}

/* fields: clean underline, faint sage tint while editing */
.cm-r_field input,
.cm-r_field textarea { border-bottom: 1px solid rgba(43, 29, 20, 0.4); }
.cm-r_field.is-filled input,
.cm-r_field.is-filled textarea { background: transparent; border-bottom-color: rgba(43, 29, 20, 0.45); }
.cm-r_field input:focus,
.cm-r_field textarea:focus,
.cm-r_field.is-editing input,
.cm-r_field.is-editing textarea { background: rgba(185, 189, 159, 0.28); border-bottom-color: var(--olive); }
.cm-r_field input:-webkit-autofill,
.cm-r_field input:-webkit-autofill:hover,
.cm-r_field input:-webkit-autofill:focus,
.cm-r_field textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--cream) inset;
  box-shadow: 0 0 0 100px var(--cream) inset;
}

/* main button: dark brown, olive rises on hover */
.cm-r_btn {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  border-radius: 2px;
}
.cm-r_btn::before { background: var(--olive); }
.cm-r_btn:hover:not(:disabled),
.cm-r_btn:focus-visible { color: #f6f0e1; border-color: var(--olive); }

.cm-r_slip { border-color: rgba(43, 29, 20, 0.4); }

/* landscape card: a column's text fades out where it scrolls */
.cm-r_col {
  --fade-top: 0px;
  --fade-bottom: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
}
.cm-r_col.has-more-above { --fade-top: calc(6 * var(--u)); }
.cm-r_col.has-more-below { --fade-bottom: calc(8 * var(--u)); }

/* ---------- phones: one column, the card grows and the page scrolls it ---------- */
@media (max-width: 767px) {
  .cm-cart {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cm-cart_close { position: fixed; }

  .cm-cart_stage {
    width: min(94vw, 30rem);
    aspect-ratio: auto;
    margin: 4.75rem auto 2.5rem;
  }

  .cm-receipt { inset: 0 0 auto 0; }
  .cm-receipt.is-active { position: relative; }
  .cm-receipt::before { inset: 2.4cqw; }

  .cm-receipt_body {
    --u: 1.6cqw;
    position: relative;
    inset: auto;
    padding: 8cqw 7.5cqw 9cqw;
  }

  .cm-receipt_scroll,
  .cm-receipt_scroll:has(> .cm-r_col) {
    display: block;
    flex: none;
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
  }

  .cm-r_col { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .cm-r_col:not(.cm-r_col--form) {
    margin: 0 calc(-2.8 * var(--u));
    padding: calc(3 * var(--u)) calc(2.8 * var(--u));
    border-left: 0;
  }
  .cm-r_col--form { padding: calc(5 * var(--u)) 0 0; }
  .cm-receipt_scroll:not(:has(> .cm-r_col)) { width: auto; }
}

/* =====================================================================
   Product pages: colour swatches (js/colours.js)
   desktop — a vertical rail beside the photo, five at a time, hover preview to the side
   phones  — a swipeable row under the photo
   ===================================================================== */
.art_main_wrap:has(> .cm-colours) {
  position: relative;
  container-type: inline-size;
}

.cm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cm-colours {
  --gap: 0.7rem;
  position: absolute;
  top: 0;
  left: calc(100% + 1.5rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* as tall as the (square) photo: exactly five swatches between the arrows
     (photo height − two arrows and their gaps − four swatch gaps − list padding) / 5, plus padding */
  width: calc((100cqw - 8rem - 8px) / 5 + 8px);
  height: 100cqw;
}

.cm-colours_viewport {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.cm-colours_viewport::-webkit-scrollbar { display: none; }

.cm-colours_list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0;
  padding: 4px;
  list-style: none;
}

.cm-colours_list li { scroll-snap-align: start; scroll-margin: 4px; }

/* a swatch: the colour with a faint woven texture so it reads as linen */
.cm-colour {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background-color: var(--swatch, #ccc);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.16));
  background-size: auto, auto, 100% 100%;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
.cm-colour[style*="background-image"] { background-size: cover; background-position: center; }

.cm-colour:hover,
.cm-colour:focus-visible {
  transform: scale(1.05);
  border-color: rgba(226, 211, 168, 0.8);
  outline: none;
}

.cm-colour.is-selected {
  border-color: #c9b46d;
  box-shadow: 0 0 0 2px #0a0907, 0 0 0 3px #c9b46d;
}

.cm-colours_arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(10, 9, 7, 0.4);
  color: #efeeec;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, opacity 0.3s;
}
.cm-colours_arrow svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cm-colours_arrow:hover:not(:disabled) { border-color: #c9b46d; color: #e2d3a8; }
.cm-colours_arrow:disabled { opacity: 0.25; cursor: default; }

/* hover preview: a bigger swatch + name, beside the hovered one */
.cm-colours_preview {
  position: absolute;
  left: calc(100% + 1rem);
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.6rem 0.6rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(14, 12, 9, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transform: translate(-0.4rem, -50%) scale(0.94);
  transform-origin: left center;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-colours_preview.is-shown { opacity: 1; transform: translate(0, -50%) scale(1); }
.cm-colours_preview.is-left { left: auto; right: calc(100% + 1rem); transform-origin: right center; transform: translate(0.4rem, -50%) scale(0.94); }
.cm-colours_preview.is-left.is-shown { transform: translate(0, -50%) scale(1); }

.cm-colours_preview_swatch {
  display: block;
  width: clamp(6.5rem, 10vw, 9.5rem);
  aspect-ratio: 1;
  border-radius: 2px;
  background-color: var(--swatch, #ccc);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.18));
  background-size: auto, auto, 100% 100%;
}
.cm-colours_preview_swatch[style*="background-image"] { background-size: cover; background-position: center; }

.cm-colours_preview_name {
  font-family: var(--font--primary-family, serif);
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
}

.cm-colours_preview_meta {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9b46d;
}

/* "Colour: Olive · 24 colours available" under the name and price */
.cm-colour_label {
  width: 100%;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.cm-colour_label strong { margin: 0 0.35rem; font-weight: 500; color: #e2d3a8; }
.cm-colour_label em { margin-right: 0.35rem; font-style: normal; color: rgba(242, 237, 228, 0.6); }

/* phones: a row of swatches under the photo, swipe sideways */
@media (max-width: 767px) {
  .art_main_wrap:has(> .cm-colours) { container-type: normal; }

  .cm-colours {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
  }

  .cm-colours { gap: 0.4rem; align-items: center; }
  .cm-colours_preview { display: none; }

  /* the same arrows, turned sideways: ◀ before the row, ▶ after it */
  .cm-colours_arrow { width: 1.9rem; height: 1.9rem; }
  .cm-colours_arrow svg { transform: rotate(-90deg); }

  .cm-colours_viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .cm-colours_list { flex-direction: row; gap: 0.6rem; }
  .cm-colours_list li { flex: none; width: 2.9rem; scroll-snap-align: center; }
}

/* ---------- cart: confirm before removing a piece / clearing the selection ---------- */
.cm-r_item.is-confirming { background: rgba(140, 41, 56, 0.07); }

.cm-r_confirm {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1.2 * var(--u)) calc(1.6 * var(--u));
  margin-top: calc(1.6 * var(--u));
  padding: calc(1.4 * var(--u)) calc(1.6 * var(--u));
  border: 1px solid rgba(140, 41, 56, 0.35);
  border-radius: 2px;
  font-size: calc(1.95 * var(--u));
  color: var(--ink);
}

.cm-r_confirm span { flex: 1; min-width: max-content; }

.cm-r_confirm button {
  padding: calc(0.8 * var(--u)) calc(1.8 * var(--u));
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(1.8 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.cm-r_confirm .cm-r_confirm_yes { background: #8c2938; border-color: #8c2938; color: #fbf3ea; }
.cm-r_confirm .cm-r_confirm_yes:hover,
.cm-r_confirm .cm-r_confirm_yes:focus-visible { background: #6f1f2c; border-color: #6f1f2c; }
.cm-r_confirm .cm-r_confirm_no:hover,
.cm-r_confirm .cm-r_confirm_no:focus-visible { background: var(--ink); color: var(--cream, #ece4d0); }

.cm-r_confirm.is-clear { margin: calc(2 * var(--u)) 0 0; }

.cm-r_clear {
  display: block;
  margin: calc(1.6 * var(--u)) 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: calc(1.75 * var(--u));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  cursor: pointer;
  transition: color 0.3s, text-decoration-color 0.3s;
}

.cm-r_clear:hover,
.cm-r_clear:focus-visible { color: #8c2938; text-decoration-color: currentColor; }

/* =====================================================================
   Product pages: "Close-up Details" hotspots + zoom lightbox (js/closeups.js)
   ===================================================================== */
.section_art_details .plotter-items_wrapper { display: none; } /* the template's decorative dots */

.cm-spots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.cm-spot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-0.85rem, -50%);
  pointer-events: auto;
  cursor: zoom-in;
}

.cm-spot_dot {
  position: relative;
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(10, 9, 7, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s, border-color 0.3s;
}

.cm-spot_dot::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: 50%;
  background: #c9b46d;
}

.cm-spot_dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid #c9b46d;
  animation: cm-spot-pulse 2.4s ease-out infinite;
}

@keyframes cm-spot-pulse {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(2.1); opacity: 0; }
}

.cm-spot_label {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 9, 7, 0.72);
  color: #f2ede4;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-spot:hover .cm-spot_dot,
.cm-spot:focus-visible .cm-spot_dot { transform: scale(1.15); border-color: #c9b46d; }
.cm-spot:hover .cm-spot_label,
.cm-spot:focus-visible .cm-spot_label { opacity: 1; transform: none; }
.cm-spot:focus-visible { outline: none; }

.cm-spots_hint {
  width: 100%;
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* lightbox */
.cm-zoom {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 1rem;
  padding: 4.5rem 1.5rem 1.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s 0.45s;
}

.cm-zoom.is-open { visibility: visible; opacity: 1; transition: opacity 0.45s ease, visibility 0s; }

.cm-zoom_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cm-zoom_close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(239, 238, 236, 0.4);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.4);
  color: #efeeec;
  cursor: pointer;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.cm-zoom_close span { position: absolute; top: 50%; left: 50%; width: 1.05rem; height: 1px; background: currentColor; }
.cm-zoom_close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.cm-zoom_close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.cm-zoom_close:hover, .cm-zoom_close:focus-visible { background: #f2ede4; border-color: #f2ede4; color: #0b0b0b; outline: none; }

.cm-zoom_stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: min(100%, calc(100svh - 15rem), 40rem);
  margin: 0;
}

.cm-zoom_view {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #111;
}

.cm-zoom_img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
  transform-origin: 0 0;
  transition: opacity 0.35s ease;
}

.cm-zoom.is-changing .cm-zoom_img { opacity: 0; transition: none; }

.cm-zoom_caption {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  color: #f2ede4;
}
.cm-zoom_name { font-family: var(--font--primary-family, serif); font-size: 1.35rem; }
.cm-zoom_label { flex: 1; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #c9b46d; }
.cm-zoom_count { font-size: 0.72rem; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); }

.cm-zoom_arrow {
  position: absolute;
  top: calc(50% - 1.5rem);
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(10, 9, 7, 0.55);
  color: #efeeec;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.cm-zoom_arrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cm-zoom_arrow:hover, .cm-zoom_arrow:focus-visible { border-color: #c9b46d; color: #e2d3a8; outline: none; }
.cm-zoom_arrow.is-prev { left: -3.6rem; }
.cm-zoom_arrow.is-next { right: -3.6rem; }

.cm-zoom_thumbs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.7rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.cm-zoom_thumbs::-webkit-scrollbar { display: none; }

.cm-zoom_thumb {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.cm-zoom_thumb_img {
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.cm-zoom_thumb.is-active { color: #e2d3a8; }
.cm-zoom_thumb.is-active .cm-zoom_thumb_img { border-color: #c9b46d; box-shadow: 0 0 0 2px #0a0907, 0 0 0 3px #c9b46d; }

@media (max-width: 767px) {
  .cm-zoom { padding: 4.5rem 1rem 1.25rem; }
  .cm-zoom_stage { width: min(100%, calc(100svh - 16rem)); }
  .cm-zoom_arrow { top: auto; bottom: -3.4rem; }
  .cm-zoom_arrow.is-prev { left: 0; }
  .cm-zoom_arrow.is-next { right: 0; }
  .cm-zoom_caption { flex-wrap: wrap; padding: 0 3.4rem; justify-content: center; text-align: center; }
  .cm-zoom_label { flex: none; }
  .cm-zoom_thumbs { margin-top: 2.2rem; }
  .cm-spot_label { display: none; }
}

/* ---------- product pages: "Scroll to explore" cue (js/colours.js) ---------- */
.cm-scrollhint {
  position: fixed; right: 2rem; bottom: 1.6rem; z-index: 40;
  display: flex; align-items: center; gap: .8rem;
  transform: translateY(.6rem); opacity: 0; pointer-events: none;
  color: rgba(242, 237, 228, .78);
  font-family: var(--font--secondary-family, 'LA Neue Montreal', Arial, sans-serif);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  transition: opacity .6s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}
.cm-scrollhint.is-shown { opacity: 1; transform: none; }
.cm-scrollhint.is-gone { opacity: 0; transform: translateY(.6rem); }
.cm-scrollhint_line { position: relative; width: 3.2rem; height: 1px; background: rgba(201, 180, 109, .45); overflow: visible; }
.cm-scrollhint_dot {
  position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: #c9b46d; box-shadow: 0 0 8px rgba(201, 180, 109, .8);
  animation: cm-scrollhint-x 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cm-scrollhint-x { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
/* phones scroll downwards as usual, so no cue there */
@media (max-width: 767px) { .cm-scrollhint { display: none; } }
@media (prefers-reduced-motion: reduce) { .cm-scrollhint_dot { animation: none; left: calc(50% - 2.5px); } }

/* About hero: real worn-wall photo, so the overlay multiplies it down (darker centre, near-black edges) to keep the headline readable */
.about_hero .home_hero_bg_overlay { mix-blend-mode: multiply !important; opacity: 1 !important; }

/* "Curated in Colours": the paper background is lighter than the template's, so fade it out on every
   edge instead of ending in a hard line (masks the whole layer: WebGL canvas, fallback image and overlay) */
.marquee_bg_wrap {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}

/* Product pages (desktop sideways scroll): each section has its own background photo, and the
   "next piece" section has no darkening overlay, so the joins showed as hard vertical lines.
   Soft dark bands on both sides of every join blend one section into the next. */
@media (min-width: 768px) {
  .section_art_hero::after,
  .section_art_details::after,
  .section_art_details::before,
  .section_art_next::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22vw;
    z-index: 2;
    pointer-events: none;
  }
  .section_art_hero::after,
  .section_art_details::after { right: 0; background: linear-gradient(to left, rgba(5, 5, 4, 0.85), rgba(5, 5, 4, 0)); }
  .section_art_details::before,
  .section_art_next::before { left: 0; background: linear-gradient(to right, rgba(5, 5, 4, 0.85), rgba(5, 5, 4, 0)); }
}

/* ---------- size chart: tab beside the product photo + dialog ---------- */
.cm-sizetab {
  position: absolute;
  top: 0;
  right: calc(100% + 1.5rem); /* mirrors the colour rail on the other side of the photo */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 2.6rem;
  height: 100cqw;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(242, 237, 228, 0.7);
  font-family: var(--font--secondary-family, "LA Neue Montreal", Arial, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.35s;
}
.cm-sizetab::before,
.cm-sizetab::after { /* thin gold rule above and below the label */
  content: "";
  flex: 0 1 4.5rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(201, 180, 109, 0), rgba(201, 180, 109, 0.55));
  transition: flex-basis 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-sizetab::after { background: linear-gradient(to top, rgba(201, 180, 109, 0), rgba(201, 180, 109, 0.55)); }
.cm-sizetab span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.cm-sizetab svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: #c9b46d; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); }
.cm-sizetab:hover,
.cm-sizetab:focus-visible { color: #e2d3a8; outline: none; }
.cm-sizetab:hover::before,
.cm-sizetab:hover::after,
.cm-sizetab:focus-visible::before,
.cm-sizetab:focus-visible::after { flex-basis: 6.5rem; }
.cm-sizetab:focus-visible span { text-decoration: underline; text-underline-offset: 4px; }

.cm-size {
  position: fixed;
  inset: 0;
  z-index: 3300;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  visibility: hidden;
}
.cm-size.is-open { visibility: visible; }
.cm-size_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 3, 0.62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.cm-size_panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2.2rem 2.2rem 1.8rem;
  border: 1px solid rgba(201, 180, 109, 0.35);
  border-radius: 6px;
  background: rgba(18, 15, 11, 0.94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  color: #f2ede4;
  font-family: var(--font--secondary-family, "LA Neue Montreal", Arial, sans-serif);
  opacity: 0;
  transform: translateY(1.2rem) scale(0.98);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 180, 109, 0.45) transparent;
}
.cm-size.is-open .cm-size_backdrop { opacity: 1; }
.cm-size.is-open .cm-size_panel { opacity: 1; transform: none; }
.cm-size_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: transparent;
  color: #f2ede4;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.cm-size_close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.cm-size_close:hover,
.cm-size_close:focus-visible { border-color: #c9b46d; color: #e2d3a8; outline: none; }
.cm-size_eyebrow {
  margin: 0 0 0.6rem;
  color: #c9b46d;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.cm-size_title {
  margin: 0 0 0.7rem;
  font-family: var(--font--primary-family, "La Ivyprestodisplay", "Times New Roman", serif);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 300;
  line-height: 1;
}
.cm-size_title em { color: #e2d3a8; }
.cm-size_lead { margin: 0 0 1.2rem; max-width: 26rem; font-size: 0.86rem; line-height: 1.55; color: rgba(255, 255, 255, 0.68); }
.cm-size_units {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 1.1rem;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.cm-size_units button {
  padding: 0.4rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 237, 228, 0.7);
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.cm-size_units button[aria-pressed="true"] { background: #c9b46d; color: #120d08; }
.cm-size_units button:focus-visible { outline: 1px solid #c9b46d; outline-offset: 2px; }
.cm-size_tablewrap { border: 1px solid rgba(201, 180, 109, 0.28); border-radius: 4px; overflow: hidden; }
.cm-size_table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cm-size_table th,
.cm-size_table td { padding: 0.62rem 0.8rem; text-align: center; font-size: 0.92rem; }
.cm-size_table thead th {
  background: rgba(201, 180, 109, 0.12);
  color: #e2d3a8;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.cm-size_table tbody th {
  font-family: var(--font--primary-family, "La Ivyprestodisplay", "Times New Roman", serif);
  font-size: 1.15rem;
  font-weight: 300;
  color: #f2ede4;
}
.cm-size_table tbody td { color: rgba(242, 237, 228, 0.82); }
.cm-size_table tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.07); transition: background-color 0.25s; }
.cm-size_table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.cm-size_table tbody tr.is-current { background: rgba(201, 180, 109, 0.14); }
.cm-size_table tbody tr.is-current th { color: #e2d3a8; }
.cm-size_how { display: grid; gap: 0.45rem; margin: 1.3rem 0 0; font-size: 0.78rem; line-height: 1.5; }
.cm-size_how div { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.8rem; }
.cm-size_how dt { color: #c9b46d; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; padding-top: 0.12rem; }
.cm-size_how dd { margin: 0; color: rgba(255, 255, 255, 0.62); }
.cm-size_note {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 767px) {
  /* phones: a plain link under the photo and swatches */
  .cm-sizetab {
    position: static;
    flex-direction: row;
    width: auto;
    height: auto;
    margin: 0.9rem 0 0;
    gap: 0.6rem;
  }
  .cm-sizetab::before,
  .cm-sizetab::after { display: none; }
  .cm-sizetab span { writing-mode: horizontal-tb; transform: none; text-decoration: underline; text-decoration-color: rgba(201, 180, 109, 0.5); text-underline-offset: 4px; }
  .cm-sizetab svg { transform: none; }
  .cm-size { padding: 0.75rem; align-items: end; }
  .cm-size_panel { padding: 1.8rem 1.25rem 1.4rem; }
  .cm-size_table th,
  .cm-size_table td { padding: 0.55rem 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-size_backdrop,
  .cm-size_panel,
  .cm-sizetab::before,
  .cm-sizetab::after { transition: none; }
}

/* "Size chart" link beside the size buttons in the cart (opens the size chart dialog) */
.cm-r_sizeguide {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-title);
  font: inherit;
  font-size: calc(1.9 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cm-r_sizeguide:hover,
.cm-r_sizeguide:focus-visible { color: var(--ink); outline: none; }

/* size chart tab, "alive": a glint of light runs down the gold rules (top line, then bottom line)
   and the tape-measure icon breathes a soft glow — quiet enough not to compete with the photo */
.cm-sizetab::before,
.cm-sizetab::after {
  background-repeat: no-repeat;
  background-size: 100% 1.8rem, 100% 100%;
  animation: cm-sizetab-glint 4.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.cm-sizetab::before {
  background-image: linear-gradient(to bottom, rgba(242, 228, 186, 0), #f4e7bf 50%, rgba(242, 228, 186, 0)),
                    linear-gradient(to bottom, rgba(201, 180, 109, 0), rgba(201, 180, 109, 0.55));
}
.cm-sizetab::after {
  background-image: linear-gradient(to bottom, rgba(242, 228, 186, 0), #f4e7bf 50%, rgba(242, 228, 186, 0)),
                    linear-gradient(to top, rgba(201, 180, 109, 0), rgba(201, 180, 109, 0.55));
  animation-delay: 0.9s; /* picks up after the light has passed the label */
}
@keyframes cm-sizetab-glint {
  0%       { background-position: 0 -1.8rem, 0 0; }
  45%, 100% { background-position: 0 8rem, 0 0; }
}
.cm-sizetab svg { animation: cm-sizetab-breathe 4.2s ease-in-out infinite; animation-delay: 0.55s; }
@keyframes cm-sizetab-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(226, 211, 168, 0)); }
  40%      { filter: drop-shadow(0 0 5px rgba(226, 211, 168, 0.95)); }
}
.cm-sizetab:hover svg,
.cm-sizetab:focus-visible svg { animation: none; filter: drop-shadow(0 0 5px rgba(226, 211, 168, 0.95)); }
@media (prefers-reduced-motion: reduce) {
  .cm-sizetab::before,
  .cm-sizetab::after,
  .cm-sizetab svg { animation: none; }
}