.tattoo-experience { width:min(100% - 2rem, 64rem); margin:0 auto; padding:clamp(2rem,6vw,5rem) 0; color:var(--color-text,inherit); }
.tattoo-experience header { max-width:48rem; margin-bottom:2rem; }
.tattoo-experience section { margin-block:2.5rem; }
.tattoo-experience h1 { font-size:clamp(2rem,5vw,3.5rem); line-height:1.15; }
.tattoo-experience label { display:block; margin-block:1rem; }
.tattoo-experience fieldset { border:1px solid var(--color-border,var(--primary-mustard)); padding:1rem; margin-block:1rem; }
.tattoo-experience nav { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-block:1.5rem; }
.tattoo-experience nav [aria-current] { font-weight:bold; text-decoration:underline; }
.tattoo-experience details { padding:1rem 0; border-bottom:1px solid var(--color-border,var(--primary-mustard)); }
.tattoo-experience summary { cursor:pointer; font-weight:600; }
.tattoo-experience img { max-width:100%; height:auto; }
.tattoo-experience figure { margin:1rem 0; }
.tattoo-experience .wizard-element { padding:1rem; margin-block:1rem; border:1px solid var(--color-border,var(--primary-mustard)); }

.tattoo-experience nav a { min-height:44px; display:inline-flex; align-items:center; }
.tattoo-experience summary { min-height:44px; box-sizing:border-box; padding-block:.5rem; }
.tattoo-experience label:has(input[type=radio]), .tattoo-experience label:has(input[type=checkbox]) { min-height:44px; display:flex; align-items:center; gap:.5rem; }

/* Keep the first wizard heading below the fixed website menu on small screens. */
.tattoo-experience.tattoo-wizard { padding-top: max(6rem, var(--spacing-xl, 6rem)); }

.tattoo-wizard-progress { appearance:none; display:block; width:100%; height:.35rem; margin-block:1.5rem; border:0; accent-color:var(--primary-mustard,#d2a373); }
.tattoo-wizard-back { display:inline-block; margin-bottom:1rem; }
.wizard-element-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.tattoo-wizard-modal { width:min(56rem, calc(100% - 2rem)); max-height:calc(100dvh - 2rem); margin:auto; padding:1.5rem; border:1px solid var(--color-border,#d2a373); border-radius:var(--border-radius,12px); background:var(--color-background,#fff); color:var(--color-text,#36454f); overflow-y:auto; }
.tattoo-wizard-modal::backdrop { background:rgba(0,0,0,.55); }
.tattoo-wizard-modal-toolbar { display:flex; justify-content:flex-end; }
.tattoo-wizard-modal .tattoo-experience.tattoo-wizard, .tattoo-wizard-modal .tattoo-experience { width:100%; padding:1rem 0; margin:0; }
.tattoo-wizard-modal .tattoo-wizard h1 { font-size:clamp(1.5rem,4vw,2.25rem); }
.tattoo-wizard-modal .contact-form { max-width:100%; }
body:has(.tattoo-wizard-modal[open]) { overflow:hidden; }
@media (max-width:576px) { .tattoo-wizard-modal { padding:1rem; width:calc(100% - 1rem); max-height:calc(100dvh - 1rem); } }
.tattoo-wizard-progress::-webkit-progress-bar { background:var(--color-border,#e5e1da); border-radius:1rem; }
.tattoo-wizard-progress::-webkit-progress-value { background:var(--primary-mustard,#d2a373); border-radius:1rem; }
.tattoo-wizard-progress::-moz-progress-bar { background:var(--primary-mustard,#d2a373); border-radius:1rem; }

.wizard-choice-grid { display:grid; gap:.75rem; grid-template-columns:1fr; }
.tattoo-experience label.wizard-choice { display:flex; flex-direction:column; align-items:stretch; gap:.75rem; margin:0; padding:.25rem; border:1px solid var(--color-border,#d2a373); border-radius:var(--border-radius,8px); cursor:pointer; min-width:0; }
.wizard-choice-heading { display:flex; align-items:center; gap:.5rem; }
.wizard-choice-heading input { flex:none; }
.wizard-choice-image { position:relative; width:300px; height:300px; flex:none; align-self:center; display:grid; place-items:center; aspect-ratio:1; overflow:hidden; background:var(--color-background,#f8f6f0); }
.wizard-choice-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; }
.wizard-choice-image img[hidden] { display:none; }
.wizard-choice:has(input:checked) { outline:2px solid var(--primary-mustard,#d2a373); outline-offset:1px; }
.wizard-choice:focus-within { box-shadow:0 0 0 3px var(--color-border,#d2a373); }
@media (min-width:1025px) {
    .wizard-choice-grid-detail { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .wizard-choice-grid-colour { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.wizard-reference-upload { margin-bottom:1.5rem; }
.wizard-reference-dropzone { padding:1rem; margin-bottom:1rem; border:2px dashed var(--color-border,#d2a373); border-radius:var(--border-radius,8px); }
.wizard-reference-dropzone.is-dragging, .wizard-reference-dropzone:focus-within { outline:2px solid var(--primary-mustard,#d2a373); outline-offset:2px; }
.wizard-reference-dropzone input { max-width:100%; }
.wizard-reference-dropzone [data-reference-status] { font-weight:600; }

.wizard-reference-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; list-style:none; padding:0; margin-block:1rem; }
.wizard-reference-gallery li { min-width:0; }
.tattoo-experience .wizard-reference-gallery figure { margin:0; }
.tattoo-experience .wizard-reference-gallery img { display:block; width:100%; height:120px; object-fit:contain; border:1px solid var(--color-border,#d2a373); border-radius:var(--border-radius,8px); }
.wizard-reference-gallery figcaption { margin-top:.5rem; font-size:.875rem; }
.wizard-reference-count { font-weight:600; }

.tattoo-experience label.wizard-intake-choice { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:.75rem; text-align:left; }
.tattoo-experience .wizard-intake-choice input[type=checkbox] { flex:0 0 auto; width:1rem; height:1rem; min-width:0; min-height:0; margin:0; padding:0; }

.wizard-review-briefing { margin-bottom:3rem; }
.wizard-review-group { padding-block:1rem; border-bottom:1px solid var(--color-border,#d2a373); }
.wizard-review-group dt { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.wizard-review-group dd { margin:.5rem 0 0; }
.wizard-review-edit { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:1.5rem; }
.wizard-review-terms { margin-block:1.5rem; }

.wizard-checkout-issues { padding:1rem; margin-block:1.5rem; border:2px solid var(--primary-mustard,#d2a373); border-radius:var(--border-radius,8px); }
.tattoo-wizard button:disabled { opacity:.55; cursor:not-allowed; }

/* Three fixed 300px previews must fit alongside one another on desktop. */
.tattoo-wizard-modal:has(.wizard-choice-grid) { width:min(70rem, calc(100% - 1rem)); padding:.5rem; scrollbar-width:thin; }
.tattoo-wizard:has(.wizard-choice-grid) fieldset { padding:.5rem; }
@media (max-width:576px) {
    .tattoo-wizard-modal:has(.wizard-choice-grid) { width:calc(100% - .25rem); max-width:calc(100% - .25rem); padding:0; }
    .tattoo-wizard:has(.wizard-choice-grid) fieldset { padding:0; border:0; }
    .tattoo-experience label.wizard-choice { padding:0; }
    .tattoo-experience.tattoo-wizard:has(.wizard-choice-grid) { width:calc(100% - .5rem); }
    .tattoo-wizard-modal .tattoo-experience.tattoo-wizard:has(.wizard-choice-grid) { width:100%; }
}

.tattoo-experience .wizard-review-group dt > span { font-weight:700; }
.tattoo-experience .wizard-review-group dd { font-weight:400; }
.tattoo-experience .wizard-review-edit { color:var(--color-link,var(--primary-mustard,#d2a373)); text-decoration:none; }
.tattoo-experience .wizard-review-edit:hover, .tattoo-experience .wizard-review-edit:focus-visible { color:var(--color-link-hover,var(--accent-orange,#cd853f)); }
.wizard-review-references { display:flex; flex-wrap:wrap; gap:.75rem; padding:0; margin:1rem 0 0; list-style:none; }
.tattoo-experience .wizard-review-references img { display:block; width:96px; height:96px; object-fit:contain; border:1px solid var(--color-border,#d2a373); border-radius:var(--border-radius,8px); }

.tattoo-experience .wizard-review-price strong { display:block; font-size:1.75rem; font-weight:700; margin-top:.5rem; }

.wizard-audio { margin-block:1.5rem; padding:1rem; border:1px solid var(--primary-mustard); border-radius:var(--border-radius); }
.wizard-audio-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-block:.75rem; }
.wizard-audio audio, .wizard-review-group audio { display:block; width:100%; max-width:32rem; margin-block:1rem; }
.wizard-audio [hidden] { display:none; }