/* =========================================================================
   configurator.css — 3D bottle configurator (customise page only).
   Loaded by engine/types/catalogue/pages/customise.php. Reads the brand tokens;
   the studio colours below match the packshot backdrop so photo and 3D swap seamlessly.
   ========================================================================= */
.cfg, .cfg-notes {
  --cfg-studio: linear-gradient(180deg, #F6F1E8 0%, #F0E8DB 56%, #E9DFCF 84%, #E3D7C4 100%);
  --cfg-glow: radial-gradient(ellipse 78% 52% at 34% 33%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 100%);
  --cfg-num: var(--shead-num-color, var(--c-accent-2));
  --cfg-card: var(--c-surface);
  --cfg-card-on: color-mix(in srgb, var(--c-surface) 55%, #ffffff);
  --cfg-stage-h: clamp(330px, 48svh, 460px);
}
.cfg { padding-bottom: calc(var(--section-y) * 0.6); }
.cfg-top { padding-top: var(--sp-5); }

/* ---------------------------------------------------------------- layout: head, stage, panel */
.cfg__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "panel"; row-gap: var(--sp-5); }
.cfg__head { grid-area: head; display: grid; gap: var(--sp-3); padding-top: var(--sp-4); }
.cfg__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cfg__eyebrow .icon { width: 16px; height: 16px; }
.cfg__title { font-size: var(--fs-3xl); line-height: 1.02; letter-spacing: -0.025em; font-weight: 300; }
.cfg__title em { font-style: italic; font-weight: 400; }
.cfg__intro { color: var(--c-ink-2); max-width: 46ch; font-size: var(--fs-md); }
.cfg__stage-wrap { grid-area: stage; position: sticky; top: var(--header-h); z-index: 5; margin-inline: calc(-1 * var(--gutter)); align-self: start; }
.cfg__panel { grid-area: panel; min-width: 0; }
@media (max-height: 560px) and (max-width: 999px) { .cfg__stage-wrap { position: relative; top: auto; } }

@media (min-width: 1000px) {
  /* the whole stage fits under the ribbon, header and breadcrumbs on first view, then sticks under the header */
  .cfg { --cfg-stage-h: clamp(520px, calc(100svh - 12.5rem), 860px); }
  .cfg__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
    grid-template-areas: "stage head" "stage panel"; column-gap: clamp(2.5rem, 4.5vw, 5rem); row-gap: var(--sp-6);
  }
  .cfg__stage-wrap { grid-row: 1 / span 2; top: calc(var(--header-h) + 1.25rem); margin-inline: 0; }
  .cfg__head { padding-top: var(--sp-6); }
}

/* ---------------------------------------------------------------- stage */
.cfg-stage { position: relative; height: var(--cfg-stage-h); margin: 0; overflow: hidden; background: var(--cfg-glow), var(--cfg-studio); -webkit-user-select: none; user-select: none; box-shadow: inset 0 0 0 1px rgb(34 32 28 / 0.04); }
.cfg-stage__view { position: absolute; inset: 0; }
.cfg-photo { position: relative; height: 100%; aspect-ratio: 4 / 5; max-width: 100%; margin-inline: auto; container-type: size; }
.cfg-photo__img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.cfg-photo__engrave {
  position: absolute; left: 50%; top: var(--ey, 73%); width: var(--ew, 20%); transform: translate(-50%, -50%);
  overflow: hidden; white-space: nowrap; text-align: center; line-height: 1.2; pointer-events: none;
  font-size: 3cqw; color: #E4E0D8;
  background: linear-gradient(90deg, #8F8B84 0%, #F3F0EA 42%, #C9C5BD 58%, #9A968F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.5px 0 rgb(0 0 0 / 0.35));
}
.cfg-stage__canvas { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cfg-stage__canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline: none; }
.cfg-stage__canvas canvas:active { cursor: grabbing; }
.cfg-stage.is-3d .cfg-stage__canvas { opacity: 1; pointer-events: auto; }
.cfg-stage.is-3d .cfg-photo { opacity: 0; }

.cfg-stage__load {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); background: rgb(247 242 234 / 0.86); color: var(--c-ink-2);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.cfg-stage__bar { display: block; width: 150px; height: 2px; background: rgb(34 32 28 / 0.12); overflow: hidden; }
.cfg-stage__bar > span { display: block; height: 100%; background: var(--c-ink); transform-origin: left center; transform: scaleX(var(--p, 0.05)); }

.cfg-stage__top { position: absolute; top: var(--sp-3); left: var(--sp-4); right: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); pointer-events: none; }
.cfg-stage__top > * { pointer-events: auto; }
.cfg-stage__price { font-family: var(--f-display); font-size: 1.375rem; line-height: 1; font-variant-numeric: lining-nums; }
.cfg-stage__modes { display: inline-flex; border: 1px solid rgb(34 32 28 / 0.28); background: rgb(247 242 234 / 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cfg-stage__modes[hidden] { display: none; }
.cfg-mode { min-width: 58px; min-height: 44px; padding: 0 0.9rem; border: 0; background: none; color: var(--c-ink-2); font: inherit; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.cfg-mode[aria-pressed="true"] { background: var(--c-ink); color: var(--c-surface); }

.cfg-stage__tools { position: absolute; right: var(--sp-3); bottom: var(--sp-3); display: flex; gap: var(--sp-2); }
.cfg-stage__tools[hidden] { display: none; }
.cfg-tool {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(34 32 28 / 0.2); background: rgb(247 242 234 / 0.86); color: var(--c-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cfg-tool .icon { width: 20px; height: 20px; }
.cfg-tool:hover { background: #fff; }
.cfg-stage__view3d { position: absolute; right: var(--sp-3); bottom: var(--sp-3); min-height: 44px; }
.cfg-stage__view3d[hidden] { display: none; }
.cfg-stage__hint {
  position: absolute; left: 50%; bottom: calc(var(--sp-3) + 56px); transform: translateX(-50%); max-width: calc(100% - 2rem);
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill); background: rgb(34 32 28 / 0.8); color: #F7F2EA;
  font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.cfg-stage__hint[hidden] { display: none; }
.cfg-stage__hint.is-gone { opacity: 0; }
.cfg-stage__caption { position: absolute; left: var(--sp-4); bottom: var(--sp-3); max-width: calc(100% - 13rem); display: grid; gap: 2px; font-size: 0.75rem; line-height: 1.45; color: var(--c-ink-2); }
.cfg-stage__desc { color: var(--c-ink); }
.cfg-stage__note[hidden] { display: none; }
@media (max-width: 599px) {
  /* phones: the build is spelled out in the panel right below, so the stage keeps only the notes (the description stays
     available to screen readers, it is what the canvas is described by) */
  .cfg-stage__caption { left: var(--gutter); right: var(--gutter); max-width: none; font-size: 0.6875rem; }
  /* turn/reset buttons bottom-left, clear of the floating WhatsApp button that sits bottom-right on every page */
  .cfg-stage__tools { right: auto; left: var(--gutter); }
  .cfg-stage.is-3d .cfg-stage__caption { left: calc(var(--gutter) + 9.75rem); }
  .cfg-stage__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cfg-stage__note { padding: 0.45rem 0.65rem; background: rgb(247 242 234 / 0.92); box-shadow: inset 0 0 0 1px var(--c-line); }
  .cfg-stage__top { left: var(--gutter); }
  .cfg-stage__price { font-size: 1.1875rem; }
}

/* ---------------------------------------------------------------- steps */
.cfg-noscript { margin-bottom: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--c-line); background: var(--cfg-card); font-size: var(--fs-sm); }
.cfg-form { display: grid; }
.cfg-step { min-width: 0; margin: 0; padding: var(--sp-5) 0; border: 0; border-top: 1px solid var(--c-line); }
.cfg-step__legend { float: left; width: 100%; display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: 0; }
.cfg-step__legend + * { clear: both; }
.cfg-step__num { font-family: var(--f-display); font-style: italic; font-size: 0.9375rem; color: var(--cfg-num); }
.cfg-step__name { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cfg-step__value { margin-left: auto; text-align: right; font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.2; }
.cfg-step__value--muted { font-family: var(--f-body); font-size: 0.75rem; color: var(--c-ink-2); }
.cfg-step__hint { margin-top: var(--sp-2); font-size: 0.75rem; color: var(--c-ink-2); }

/* option cards share one pattern: a visually hidden native radio over a card */
.cfg-model, .cfg-cap, .cfg-font, .cfg-swatch { position: relative; cursor: pointer; }
.cfg-model input, .cfg-cap input, .cfg-font input, .cfg-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cfg-model__body, .cfg-cap__body, .cfg-font__body { height: 100%; background: var(--cfg-card); border: 1px solid var(--c-line); }
.cfg-model:hover .cfg-model__body, .cfg-cap:hover .cfg-cap__body, .cfg-font:hover .cfg-font__body { border-color: color-mix(in srgb, var(--c-ink) 45%, transparent); }
.cfg-model input:checked + .cfg-model__body, .cfg-cap input:checked + .cfg-cap__body, .cfg-font input:checked + .cfg-font__body { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); background: var(--cfg-card-on); }
.cfg-model input:focus-visible + .cfg-model__body, .cfg-cap input:focus-visible + .cfg-cap__body, .cfg-font input:focus-visible + .cfg-font__body { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.cfg-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 520px) { .cfg-models { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cfg-model__body { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 2px; padding: var(--sp-3) var(--sp-2); text-align: center; }
.cfg-model__fig { display: grid; align-items: end; height: 88px; margin-bottom: var(--sp-2); color: var(--c-ink); }
.cfg-model__svg { width: auto; height: 88px; }
.cfg-model__name { font-family: var(--f-display); font-size: 1rem; line-height: 1.2; }
.cfg-model__meta { font-size: 0.6875rem; line-height: 1.35; color: var(--c-ink-2); }
.cfg-model__price { margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; }
.cfg-model__was { font-weight: 400; color: var(--c-ink-2); }

.cfg-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cfg-swatch { display: inline-grid; place-items: center; width: 44px; height: 44px; }
.cfg-swatch[hidden] { display: none; }
.cfg-swatch__chip {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), inset 0 -6px 9px rgb(0 0 0 / 0.14), inset 0 5px 8px rgb(255 255 255 / 0.16);
}
.cfg-swatch--steel .cfg-swatch__chip { background: linear-gradient(135deg, #8E8A84 0%, #ECE9E3 44%, #A9A59E 62%, #DAD7D1 100%); }
.cfg-swatch input:checked + .cfg-swatch__chip { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 3px var(--c-bg), 0 0 0 4.5px var(--c-ink); }
.cfg-swatch input:focus-visible + .cfg-swatch__chip { outline: 2px solid var(--c-focus); outline-offset: 5px; }
.cfg-swatch input:disabled { cursor: not-allowed; }
.cfg-swatch input:disabled + .cfg-swatch__chip { opacity: 0.3; }

.cfg-caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
@media (min-width: 520px) { .cfg-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cfg-cap__body { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 68px; padding: var(--sp-2) var(--sp-3); }
.cfg-cap__fig { color: var(--c-ink); }
.cfg-cap__svg { display: block; }
.cfg-cap__text { display: grid; gap: 1px; min-width: 0; }
.cfg-cap__name { font-size: var(--fs-sm); font-weight: 600; }
.cfg-cap__note { font-size: 0.75rem; line-height: 1.35; color: var(--c-ink-2); }
.cfg-cap__price { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.cfg-cap input:disabled { cursor: not-allowed; }
.cfg-cap input:disabled + .cfg-cap__body { background: transparent; border-style: dashed; }
.cfg-cap input:disabled + .cfg-cap__body .cfg-cap__fig, .cfg-cap input:disabled + .cfg-cap__body .cfg-cap__name, .cfg-cap input:disabled + .cfg-cap__body .cfg-cap__price { opacity: 0.45; }

.cfg-engrave { display: grid; gap: var(--sp-3); }
.cfg-engrave__label { font-size: var(--fs-sm); font-weight: 600; }
.cfg-engrave__field { position: relative; }
.cfg-engrave__input {
  width: 100%; min-height: 56px; padding: 0 6.5rem 0 1rem; border: 1px solid color-mix(in srgb, var(--c-ink) 38%, transparent); border-radius: 0;
  background: var(--cfg-card); color: var(--c-ink); font: inherit; font-size: 1.375rem;
  font-family: var(--cfg-ff, var(--f-display)); font-weight: var(--cfg-fw, 500); font-style: var(--cfg-fst, normal);
  letter-spacing: var(--cfg-ls, 0.01em); text-transform: var(--cfg-tt, none);
}
.cfg-engrave__input:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-ink); }
.cfg-engrave__input::placeholder { color: color-mix(in srgb, var(--c-ink-2) 75%, transparent); font-family: var(--f-body); font-style: normal; font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.cfg-engrave__count { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); font-size: 0.75rem; color: var(--c-ink-2); font-variant-numeric: tabular-nums; pointer-events: none; }
.cfg-engrave__hint { font-size: 0.75rem; line-height: 1.5; color: var(--c-ink-2); }
.cfg-engrave__hint.is-warn { color: var(--c-warn); font-weight: 600; }
.cfg-fonts { min-width: 0; margin: 0; padding: 0; border: 0; }
.cfg-fonts__legend { margin-bottom: var(--sp-2); padding: 0; font-size: var(--fs-sm); font-weight: 600; }
.cfg-fonts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.cfg-font__body { display: grid; justify-items: center; gap: 2px; min-height: 76px; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.cfg-font__sample { font-family: var(--ff), var(--f-display); font-weight: var(--fw); font-style: var(--fst); font-size: 1.75rem; line-height: 1.25; }
.cfg-font__name { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-2); }

/* ---------------------------------------------------------------- summary */
.cfg-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-3); padding: var(--sp-5); background: var(--cfg-card); border: 1px solid var(--c-line); }
.cfg-summary__title { font-family: var(--f-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cfg-lines { display: grid; margin: 0; }
.cfg-line { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.cfg-line dt { color: var(--c-ink-2); }
.cfg-line dd { display: flex; justify-content: space-between; gap: var(--sp-3); margin: 0; min-width: 0; }
.cfg-line__what { min-width: 0; overflow-wrap: anywhere; }
.cfg-line__price { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.cfg-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--sp-3); border-top: 1px solid var(--c-ink); }
.cfg-total span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cfg-total strong { font-family: var(--f-display); font-size: 2.125rem; font-weight: 400; line-height: 1; }
.cfg-buy { display: flex; align-items: stretch; gap: var(--sp-2); }
.cfg-buy .qty { flex: none; background: var(--c-bg); }
.cfg-buy .buy__add { flex: 1; min-width: 0; }
.cfg-summary .btn { white-space: normal; text-align: center; line-height: 1.25; }
.cfg-summary__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.cfg-copy { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.cfg-copy span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cfg-copy .icon { width: 18px; height: 18px; }
.cfg-summary__product { min-height: 44px; font-size: var(--fs-sm); }
.cfg-summary__lead { display: flex; gap: var(--sp-2); font-size: 0.75rem; line-height: 1.5; color: var(--c-ink-2); }
.cfg-summary__lead .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* ---------------------------------------------------------------- good to know */
.cfg-notes { border-top: 1px solid var(--c-line); }
.cfg-notes__list { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 700px) { .cfg-notes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cfg-notes__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cfg-note { display: grid; align-content: start; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--c-ink); }
.cfg-note__num { font-family: var(--f-display); font-style: italic; color: var(--cfg-num); }
.cfg-note__title { font-size: 1.25rem; font-weight: 400; line-height: 1.25; }
.cfg-note__text { font-size: var(--fs-sm); color: var(--c-ink-2); }

/* ---------------------------------------------------------------- motion (interactions stay at or under 300ms) */
@media (prefers-reduced-motion: no-preference) {
  .cfg-stage__canvas, .cfg-photo { transition: opacity var(--dur-3) var(--ease); }
  .cfg-stage__bar > span { transition: transform var(--dur-3) var(--ease); }
  .cfg-stage__hint { transition: opacity var(--dur-3) var(--ease); }
  .cfg-tool { transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
  .cfg-tool:active { transform: scale(0.94); }
  .cfg-model__body, .cfg-cap__body, .cfg-font__body { transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
  .cfg-swatch__chip { transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
  .cfg-swatch:hover .cfg-swatch__chip { transform: scale(1.06); }
}