/* Gem Experience — shared styling for the utility pages.
   Type scale, header metrics and link treatments are taken from the home page
   and the High Jewellery collection, so every page reads as one site. */

:root {
  --ink: #17140f;
  --ink-soft: #2b2620;
  --muted: #6b6259;
  --rule: #e3ddd0;
  --cream: #f5f1e8;
  --tile: #f5f1e8;
  /* EB Garamond has real lower-case letterforms, which is what lets
     headlines run in mixed case instead of a permanent shout of capitals. */
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: Jost, -apple-system, "Segoe UI", sans-serif;
  --gutter: 20px;
}

@media (min-width: 700px) { :root { --gutter: 48px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.pg {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Layout rules below set display on labels and sections, which would otherwise
   win over the user-agent rule for [hidden]. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: pointer;
}

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

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

/* Full-bleed: the page is the window, with only the gutter holding content in. */
.pg-wrap {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* ----------------------------------------------------------------- header */

.pg-hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 19.6px;
  height: 72px;
  padding: 24px 20px;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 700px) {
  .pg-hdr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 24px var(--gutter);
  }
  .pg-hdr-icons { justify-self: end; }
}

.pg-hdr-brand {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 5.6px;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.pg-hdr-menu { width: 24px; height: 24px; }

.pg-hdr-icons { display: flex; align-items: center; gap: 16px; }

.pg-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.3s ease;
}
.pg-icon:hover { opacity: 0.55; }

.pg-cart-n {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {}

/* ------------------------------------------------------------- type scale */

/* Every page opens the same way: centred kicker, serif title, lede. */
.pg-hero {
  padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(20px, 2.5vw, 32px);
  text-align: center;
}

.pg-hero .pg-lede { margin-left: auto; margin-right: auto; }

.pg-kicker {
  display: block;
  margin: 0 0 18px;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.72;
}

.pg-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pg-lede {
  margin: 18px 0 0;
  max-width: 46ch;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-soft);
}

.pg-section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.pg-note {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

/* ------------------------------------------------------------------- main */

.pg-main {
  flex: 1;
  padding: clamp(20px, 2.5vw, 36px) var(--gutter) clamp(72px, 9vw, 112px);
}

/* The gemstone chapters open on a full-bleed film, so they drop main's own
   padding and let each section set its own. */
.pg-main--flush { padding: 0; }

/* A single reading column for policy-style pages. */
.pg-main--narrow > * { max-width: 760px; margin-left: auto; margin-right: auto; }

.pg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.pg-panel {
  background: var(--cream);
  padding: clamp(24px, 3vw, 36px);
}

.pg-panel h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 1.8vw, 25px);
  letter-spacing: -0.01em;
}

.pg-panel p {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

.pg-aside-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.pg-aside-list li {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

.pg-aside-list strong {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------------ forms */

.pg-form { display: grid; gap: 26px; max-width: 620px; }

.pg-form label {
  display: grid;
  gap: 10px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.pg-form input,
.pg-form select,
.pg-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(26, 24, 22, 0.28);
  background: transparent;
  padding: 12px 0 14px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: border-color 180ms ease;
}

.pg-form input::placeholder,
.pg-form textarea::placeholder { color: rgba(26, 24, 22, 0.38); }

.pg-form input:focus,
.pg-form select:focus,
.pg-form textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.pg-form textarea { resize: vertical; min-height: 132px; }

.pg-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.pg-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 20px;
  color: var(--muted);
}
.pg-check input { width: auto; }

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.pg-btn:hover { opacity: 0.82; }
.pg-btn:disabled { opacity: 0.45; cursor: wait; }

.pg-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.pg-btn--ghost:hover { background: var(--ink); color: #fff; opacity: 1; }

.pg-btn--sm { min-height: 36px; padding: 0 14px; font-size: 10px; }

.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; align-items: center; }
.pg-actions--col { flex-direction: column; margin-top: 24px; }

.pg-toast {
  margin: 0;
  padding: 14px 16px;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
}
.pg-toast.is-ok { background: #eef6ef; color: #1f5c32; }
.pg-toast.is-err { background: #f8ecec; color: #8a1f1f; }

/* Label over a tight underline — the collection pages' link treatment. */
.pg-link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}
.pg-link:hover { opacity: 0.55; }

/* ---------------------------------------------- contact / quotation shell */

.enq {
  width: min(560px, 100%);
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 6vw, 56px);
}

.enq-form { max-width: none; width: 100%; }

/* Boxed fields read clearer than hairline-only inputs, without looking like
   soft UI cards — square corners, ink border, quiet hover. */
.enq-form input,
.enq-form select,
.enq-form textarea {
  border: 1px solid rgba(26, 24, 22, 0.22);
  border-bottom-width: 1px;
  padding: 14px 16px;
  background: #fff;
}

.enq-form input:hover,
.enq-form select:hover,
.enq-form textarea:hover {
  border-color: rgba(26, 24, 22, 0.45);
}

.enq-form input:focus,
.enq-form select:focus,
.enq-form textarea:focus {
  border-color: var(--ink);
}

.enq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 8px;
}

.enq-opt {
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--muted);
}

.enq-aside {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.enq-aside-kicker {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--ink);
}

.enq-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.enq-lines li {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
}

.enq-lines li span {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.enq-lines a {
  justify-self: start;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.enq-lines a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.enq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 28px;
}

.enq-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.enq-steps li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.enq-steps li:first-child { padding-top: 0; }
.enq-steps li:last-child { border-bottom: 0; padding-bottom: 0; }

.enq-steps strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink);
}

.enq-chip {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  background: #fff;
}

.enq-chip-kicker {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.enq-chip strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.enq-chip span:last-child {
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 620px) {
  .pg-row-2 { grid-template-columns: 1fr; gap: 26px; }
  .enq-lines li { grid-template-columns: 1fr; gap: 6px; }
  .enq-actions { flex-direction: column; align-items: stretch; }
  .enq-actions .pg-btn { width: 100%; }
  .enq-actions .pg-link { align-self: center; }
}

/* ------------------------------------------------------------------- cart */

.pg-cart-list { display: grid; }

.pg-cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

.pg-cart-item img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--tile);
}

.pg-cart-item h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pg-cart-item p {
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

.pg-qty { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; }
.pg-qty button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule);
  background: #fff;
}
.pg-qty button:hover { border-color: var(--ink-soft); }
.pg-qty span { min-width: 1.5ch; text-align: center; font-weight: 300; }

.pg-cart-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  padding: clamp(48px, 9vh, 96px) 0;
  text-align: center;
}
.pg-cart-empty p { margin: 0 0 26px; font-weight: 300; color: var(--muted); }

/* Placeholder swatch standing in for a missing cart-item image, same
   footprint as .pg-cart-item img so the row doesn't reflow once art lands. */
.pg-cart-item-ph { width: 96px; height: 96px; background: var(--tile); }

/* Order rows on the account page have no image column. */
.pg-cart-item--solo { grid-template-columns: 1fr; }

.pg-orders-list { margin-top: 20px; }

.pg-summary { position: sticky; top: 96px; }

.pg-summary dl { margin: 22px 0 0; display: grid; gap: 12px; }
.pg-summary .pg-total {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------- auth */

/* Banner on one side, credentials on the other, each filling the screen
   below the header. */
.auth {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

/* The portrait shot suits the tall column; the stacked band gets the landscape
   rough-stone banner rather than an extreme crop of a portrait. */
.auth-media {
  position: relative;
  overflow: hidden;
  background: var(--tile) url("../img/hero.webp") 50% 28% / cover no-repeat;
}

.auth-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.52) 100%);
}

.auth-media-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 0 32px clamp(40px, 6vh, 72px);
  text-align: center;
  color: #fff;
}

.auth-media-copy .pg-kicker { margin: 0; color: rgba(255, 255, 255, 0.82); }

.auth-media-line {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: clamp(44px, 7vh, 88px) var(--gutter);
}

.auth-card { width: min(400px, 100%); text-align: center; }

.auth-card .pg-lede {
  margin: 18px auto 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 24px;
}

.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin-top: 34px;
  padding: 0 22px;
  border: 1px solid var(--rule);
  background: #fff;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.auth-google:hover { border-color: var(--ink-soft); background: var(--cream); }
.auth-google:disabled { opacity: 0.5; cursor: wait; }
.auth-google svg { flex: none; }

.auth-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.auth-or::before,
.auth-or::after { content: ""; height: 1px; background: var(--rule); }

.auth-form { gap: 18px; max-width: none; text-align: left; }
.auth-form .pg-btn { width: 100%; margin-top: 6px; }

.auth-fine {
  margin: 26px 0 0;
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  color: var(--muted);
}
.auth-fine a { border-bottom: 1px solid var(--rule); }
.auth-fine a:hover { border-bottom-color: var(--ink); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-media {
    order: -1;
    min-height: clamp(200px, 34vh, 320px);
    background-image: url("../img/banner-high-jewellery.webp");
    background-position: 50% 50%;
  }
  .auth-media-copy { padding-bottom: 32px; }
}

/* ------------------------------------------------------------------ tabs */

.pg-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.pg-tabs--center { justify-content: center; }

.pg-tab {
  padding: 11px 18px;
  border: 1px solid var(--rule);
  background: #fff;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pg-tab:hover { border-color: var(--ink-soft); }
.pg-tab.is-on { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; }

/* ------------------------------------------------------------------ legal */

.pg-legal-body {
  max-width: 68ch;
  font-weight: 300;
  font-size: 15px;
  line-height: 27px;
}
.pg-legal-body h2 {
  margin: 36px 0 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 1.8vw, 26px);
  letter-spacing: -0.01em;
}
.pg-legal-body h2:first-child { margin-top: 0; }
.pg-legal-body h3 {
  margin: 28px 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 19px);
  letter-spacing: -0.01em;
}
.pg-legal-body p,
.pg-legal-body li { margin: 0 0 16px; color: var(--muted); }
.pg-legal-body a {
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.pg-legal-body a:hover { border-bottom-color: var(--ink); color: var(--ink); }
.pg-legal-see { margin-bottom: 28px !important; font-size: 14px; }
.pg-legal-body ol {
  margin: 0;
  padding: 0 0 0 1.2em;
  display: grid;
  gap: 14px;
}
.pg-legal-body ol li { margin: 0; padding-left: 0.4em; }

/* ---------------------------------------------------------- appointment */

.appt {
  width: min(720px, 100%);
  margin: 0 auto;
}

.appt-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: clamp(36px, 5vw, 56px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}

.appt-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 8px;
  color: var(--muted);
  transition: color 0.3s ease;
}
.appt-step:not(:disabled) { cursor: pointer; }
.appt-step:not(:disabled):hover { color: var(--ink); }
.appt-step.is-on { color: var(--ink); }
.appt-step.is-done { color: var(--ink-soft); }

.appt-step-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
}
.appt-step.is-on .appt-step-n,
.appt-step.is-done .appt-step-n {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}

.appt-step-l {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.appt-pane { animation: appt-in 0.35s ease; }
.appt-pane[hidden] { display: none; }

@keyframes appt-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .appt-pane { animation: none; }
}

.appt-pane-head { margin-bottom: 28px; text-align: center; }
.appt-pane-head .pg-section-title { margin-bottom: 8px; }
.appt-pane-head .pg-note { margin: 0 auto; max-width: 42ch; }

.appt-form { max-width: none; }

.appt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
}

.appt-cal {
  border: 1px solid var(--rule);
  padding: clamp(18px, 2.4vw, 28px);
}

.appt-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 20px);
  letter-spacing: -0.01em;
}

.appt-cal-nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ink);
  transition: opacity 0.25s ease;
}
.appt-cal-nav:hover:not(:disabled) { opacity: 0.55; }
.appt-cal-nav:disabled { opacity: 0.25; cursor: default; }

.appt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.appt-cal-dow {
  padding: 0 0 10px;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

.appt-cal-empty { aspect-ratio: 1; }

.appt-cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-weight: 300;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.appt-cal-day:not(.is-off):hover {
  border-color: var(--ink-soft);
}
.appt-cal-day.is-on {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}
.appt-cal-day.is-off {
  color: #c9c5bf;
  cursor: default;
}

.appt-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.appt-slot {
  min-height: 48px;
  border: 1px solid var(--rule);
  background: #fff;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.appt-slot:hover { border-color: var(--ink-soft); }
.appt-slot.is-on {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}

.appt-summary {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--cream);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.appt-summary strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.appt-done {
  text-align: center;
  padding: clamp(32px, 6vh, 64px) 0;
}
.appt-done .pg-lede { margin-left: auto; margin-right: auto; }
.appt-done .appt-actions { justify-content: center; }

@media (max-width: 620px) {
  .appt-step-l { display: none; }
  .appt-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appt-actions { justify-content: stretch; }
  .appt-actions .pg-btn { flex: 1; }
}

/* -------------------------------------------------------------------- 404 */

.pg-404 {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding: clamp(80px, 14vh, 160px) var(--gutter);
}
.pg-404 .pg-title { font-size: clamp(28px, 4vw, 44px); }

/* ---------------------------------------------------------------- offices */

.off-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 36px);
}

@media (min-width: 620px) { .off-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .off-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .off-grid--stores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.off-card { display: flex; flex-direction: column; }

.off-shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--tile);
}

.off-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0, 0.1, 1);
}
.off-card:hover .off-shot img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .off-card:hover .off-shot img { transform: none; }
}

.off-region {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.94);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The body stretches so the address can grow while the name sits on one
   baseline and Direction stays pinned to another, card to card. */
.off-body {
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(18px, 1.6vw, 24px) 0 0;
}

.off-body h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Phone and Direction sit together at the foot of the card, so they line up
   across a row however long the address runs. */
.off-foot { display: grid; gap: 13px; justify-items: start; align-content: end; }

.off-addr {
  margin: 12px 0 20px;
  max-width: 36ch;
  font-weight: 300;
  font-size: clamp(13px, 0.95vw, 14px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.off-phone {
  justify-self: start;
  font-weight: 300;
  font-size: clamp(13px, 0.95vw, 14px);
  line-height: 1.5;
  color: var(--ink-soft);
  transition: color 0.3s ease;
}
.off-phone:hover { color: var(--muted); }

.off-dir {
  position: relative;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
}

/* A resting hairline that the ink fills in on hover. */
.off-dir::before,
.off-dir::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
}
.off-dir::before { width: 100%; background: rgba(32, 30, 29, 0.28); }
.off-dir::after {
  width: 0;
  background: var(--ink);
  transition: width 0.45s cubic-bezier(0.2, 0, 0.1, 1);
}

.off-card:hover .off-dir::after,
.off-dir:focus-visible::after { width: 100%; }

.off-dir svg { transition: transform 0.45s cubic-bezier(0.2, 0, 0.1, 1); }
.off-card:hover .off-dir svg { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .off-dir::after,
  .off-card:hover .off-dir svg { transition: none; transform: none; }
}

.off-section { margin-top: clamp(64px, 9vw, 112px); }

.off-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 26px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.off-head .pg-lede { margin: 0; max-width: 46ch; }

.off-count {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- footer */

.pg-ftr {
  margin-top: auto;
  padding: clamp(48px, 6vw, 72px) var(--gutter) 28px;
  border-top: 1px solid var(--rule);
  background: #fff;
}

.pg-ftr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 40px;
}

.pg-ftr-title {
  display: block;
  margin-bottom: 16px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}

.pg-ftr-grid a {
  display: block;
  margin-top: 10px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.pg-ftr-grid a:hover { color: var(--ink); }

.pg-ftr-copy {
  margin: 0;
  max-width: 30ch;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

.pg-ftr-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.pg-ftr-base nav { display: flex; gap: 18px; }

.pg-auth-switch { margin-top: 20px; font-weight: 300; font-size: 14px; color: var(--muted); }
.pg-auth-switch button {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 820px) {
  .pg-grid,
  .pg-ftr-grid { grid-template-columns: 1fr; }

  .pg-cart-item { grid-template-columns: 1fr; }
  .pg-cart-item img { width: 100%; height: 240px; }
  .pg-summary { position: static; }
}

@media (max-width: 619px) {
  .off-shot { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------- page banners */
/* Two shapes, because the photography comes in two shapes.
 *
 *   .pg-banner — a landscape frame running the width of the page with the
 *   title over it. Used where a wide photograph exists already.
 *
 *   .pg-split — a portrait frame beside the title. Every model frame in the
 *   catalogue is 2:3, and forcing one of those into a wide band crops it to a
 *   strip across somebody's throat. Beside the copy it keeps its proportions.
 *
 * Both carry the same markup contract as the old .pg-hero — kicker, title,
 * lede — so nothing downstream had to change. */

.pg-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  /* Sized by proportion so the crop is predictable, and gentle enough that a
     3:2 photograph keeps two thirds of its height. Only landscape sources go
     in here — a portrait one would show under a third of itself, so those use
     .pg-split instead. */
  /* 16:9 keeps 84% of a 3:2 source against 75% at 2:1. Closer to the
     photograph's own shape means less of it thrown away. */
  min-height: clamp(320px, 52vh, 560px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tile);
}
.pg-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* per photograph, for the same reason the gallery crops per photograph:
     one position framed one image and cut the subject out of the next */
  object-position: var(--banner-pos, 50% 45%);
}
/* The scrim is what makes white type legible over a photograph whose
   brightness nobody controls. It is weighted to the bottom, where the copy is. */
.pg-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.62) 100%);
}
.pg-banner-copy {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) clamp(28px, 5vh, 52px);
  color: #fff;
  max-width: 60ch;
}
.pg-banner-copy .pg-kicker { color: rgba(255, 255, 255, 0.82); }
.pg-banner-copy .pg-title { color: #fff; }
.pg-banner-copy .pg-lede { color: rgba(255, 255, 255, 0.88); margin-left: 0; margin-right: 0; }

/* -- split */

.pg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(32px, 5vh, 64px) var(--gutter);
}
/* the copy leads on the left, the photograph answers on the right */
.pg-split--reverse .pg-split-media { order: 2; }
.pg-split-media {
  position: relative;
  overflow: hidden;
  background: var(--tile);
  aspect-ratio: 4 / 5;
  /* capped, or on a wide screen the frame runs past the fold and the two or
     three lines of copy beside it float in the middle of nothing */
  max-height: min(62vh, 560px);
}
.pg-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos, 50% 40%);
}
.pg-split-copy { max-width: 46ch; }
.pg-split-copy .pg-lede { margin-left: 0; margin-right: 0; }

@media (max-width: 860px) {
  /* squarer on a phone: a 2:1 band at 390px wide is a letterbox slit, and the
     copy needs somewhere to sit that is not on top of the subject */
  .pg-banner { min-height: 0; aspect-ratio: 5 / 4; }
  /* The copy takes up much more of a phone-width frame, so it sits over the
     busy middle of the photograph rather than the quiet bottom of it. The
     scrim has to carry more of the contrast here than it does on a desktop. */
  .pg-banner::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.30) 35%, rgba(0, 0, 0, 0.72) 100%);
  }

  /* Stacked, and the frame gets shorter: a 4:5 portrait at full phone width is
     most of a screen before the page has said anything. */
  .pg-split { grid-template-columns: 1fr; gap: 22px; padding-top: 0; }
  .pg-split--reverse .pg-split-media { order: 0; }
  /* Still portrait, because the photograph is. A 16:11 band here was showing
     46% of a 2:3 frame — worse than the wide banner it replaced. At 4:5 it
     keeps 83%, the same as the desktop layout. */
  .pg-split-media {
    aspect-ratio: 4 / 5;
    margin: 0 calc(var(--gutter) * -1);
  }
  .pg-split-copy { max-width: none; }
}

/* The checkout confirmation, shown in place of the form. Spans both columns so
   it reads as the whole page having moved on rather than as one panel of a
   layout that still has a form in it. */
.co-done {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: clamp(28px, 5vh, 56px) 0;
  max-width: 54ch;
}
.co-done .pg-lede { margin: 0; }
.co-done .pg-actions { margin-top: 14px; }

/* The gift note, surfaced in the cart. Written on the Gifts page and kept
   locally, so without this it was invisible between writing it and checking
   out — the one place somebody would look for it is the bag. */
.pg-gift-hint { margin: 14px 0 0; }
.pg-gift-set {
  margin: 14px 0 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--rule, #e6e2dc);
}
.pg-gift-set p { margin: 0 0 4px; font-size: 13px; line-height: 20px; }
.pg-gift-set p:last-child { margin-bottom: 0; }
.pg-gift-set-k {
  display: block; margin-bottom: 8px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.pg-gift-set-x { color: var(--muted); font-size: 12px !important; }

/* ---------------------------------------------------------- checkout summary */
/* A list of names is a receipt. This is still the point where somebody is
   deciding, so the pieces keep their photographs. */

.co-items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; }
.co-item img, .co-item-ph {
  width: 56px; height: 56px; object-fit: cover; background: var(--ground, #f3f1ee);
}
.co-item-body { display: grid; gap: 2px; min-width: 0; }
.co-item-body strong { font-family: var(--serif); font-size: 14px; font-weight: 500; }
.co-item-body span { font-size: 12px; color: var(--muted); }
.co-item-qty { font-variant-numeric: tabular-nums; }

.co-sum-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule, #e6e2dc);
  font-size: 13px;
}

.co-gift {
  margin-top: 16px; padding: 14px;
  background: #fff; border: 1px solid var(--rule, #e6e2dc);
}
.co-gift p { margin: 0 0 4px; font-size: 13px; line-height: 20px; }
.co-gift-k {
  display: block; margin-bottom: 8px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.co-gift a, .co-gift-add { font-size: 12px; text-decoration: underline; }
.co-gift-add { display: inline-block; margin-top: 16px; }
.co-assure {
  margin: 16px 0 0; font-size: 12px; line-height: 19px; color: var(--muted); font-style: italic;
}

/* The dialling code and the number read as one field, because they are one. */
.co-phone { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 8px; }
.co-phone select, .co-phone input { min-width: 0; }