/* Upright main screenshot with selectable alternative prints behind it. */
.cde-design-customisation { padding-block: clamp(48px, 5vw, 80px); overflow: clip; color: var(--ad-brown, #463921); }
.cde-design-customisation > .container { width: 100%; max-width: none; padding-inline: 0; }
.cde-design-customisation .ad-fan__intro { max-width: 960px; margin: 0 auto; padding-inline: 24px; text-align: center; color: var(--ad-brown, #463921); }
.cde-design-customisation .ad-fan__intro h2 { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.15; margin: 0 0 24px; color: inherit; }
.cde-design-customisation .ad-fan__intro p { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; margin: 0; }
.ad-fan__stage { position: relative; max-width: 1440px; margin: 24px auto 0; aspect-ratio: 1440 / 790; }
.ad-fan__print { display: block; position: absolute; width: 53%; aspect-ratio: 1440 / 1128; top: 15%; left: 23.5%; background: #f5f1ed; border: 1px solid #46392126; border-radius: 4px; box-shadow: 0 5px 10px #46392118, 0 18px 32px #4639211a; overflow: hidden; }
.ad-fan__print img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ad-fan__back { transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-angle)); transform-origin: 50% 85%; }
.ad-fan__back[data-slot="0"] { --fan-x: -25%; --fan-y: -2%; --fan-angle: -9deg; }
.ad-fan__back[data-slot="1"] { --fan-x: 25%; --fan-y: -2%; --fan-angle: 9deg; }
.ad-fan__back[data-slot="2"] { --fan-x: -15%; --fan-y: -7%; --fan-angle: -4deg; }
.ad-fan__back[data-slot="3"] { --fan-x: 15%; --fan-y: -7%; --fan-angle: 4deg; }
.ad-fan__front { z-index: 2; color: inherit; }
.ad-fan__front:focus-visible { outline: 3px solid #463921; outline-offset: 6px; }
.ad-fan__outgoing { position: absolute; inset: 0; pointer-events: none; }
.cde-design-customisation.is-enhanced:not(.is-in-view) .ad-fan__back { transform: translate(0, 0) rotate(0); opacity: 0; }
.cde-design-customisation.is-enhanced .ad-fan__back { transition: transform 650ms cubic-bezier(.2,.7,.2,1), opacity 650ms ease; transition-delay: calc(var(--slot, 0) * 60ms); }
.ad-fan__back[data-slot="1"] { --slot: 1; }
.ad-fan__back[data-slot="2"] { --slot: 2; }
.ad-fan__back[data-slot="3"] { --slot: 3; }
.ad-fan__controls { padding-inline: 24px; text-align: center; color: var(--ad-brown, #463921); }
.cde-design-customisation .ad-fan__caption { margin: 0; font-size: 22px; font-weight: 600; }
.cde-design-customisation .ad-fan__details { margin: 8px auto 16px; max-width: 700px; font-size: 17px; line-height: 1.5; }
.ad-fan__details:empty { display: none; }
.cde-design-customisation .ad-fan__instruction { margin: 18px 0; font-size: 18px; }
.ad-fan__choices { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 16px; max-width: 900px; margin: 0 auto; }
.ad-fan__choice { flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; color: inherit; border-radius: 6px; }
.ad-fan__thumbnail { width: 104px; height: 78px; display: block; border: 1px solid #46392140; border-radius: 5px; overflow: hidden; background: #f5f1ed; }
.ad-fan__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ad-fan__choice:hover { color: inherit; text-decoration: none; }
.ad-fan__choice:hover .ad-fan__thumbnail { outline: 1px solid #463921; }
.ad-fan__choice.is-selected .ad-fan__thumbnail { outline: 2px solid #463921; outline-offset: 1px; }
.ad-fan__choice:focus-visible { outline: 3px solid #463921; outline-offset: 6px; }
.ad-fan__choice-label { font-size: 16px; line-height: 1.45; }
.ad-fan__choice.is-selected .ad-fan__choice-label { font-weight: 600; }
.ad-fan__tick { display: none; margin-right: 4px; }
.is-selected .ad-fan__tick { display: inline; }
.cde-design-customisation .ad-fan__helper { margin: 28px auto 0; max-width: 720px; font-size: 18px; line-height: 1.55; }
.cde-design-customisation .ad-fan__error { margin: 18px auto 0; font-size: 17px; }
@media (max-width: 600px) {
 .cde-design-customisation { padding-block: 44px; }
 .cde-design-customisation .ad-fan__intro { text-align: left; }
 .ad-fan__stage { aspect-ratio: 390 / 340; margin-top: 16px; }
 .ad-fan__print { width: 80%; left: 10%; top: 20%; }
 .ad-fan__back[data-slot="0"] { --fan-x: -5%; --fan-y: -8%; --fan-angle: -5deg; }
 .ad-fan__back[data-slot="1"] { --fan-x: 5%; --fan-y: -8%; --fan-angle: 5deg; }
 .ad-fan__back[data-slot="2"] { --fan-x: -3%; --fan-y: -12%; --fan-angle: -2deg; }
 .ad-fan__back[data-slot="3"] { --fan-x: 3%; --fan-y: -12%; --fan-angle: 2deg; }
 .ad-fan__choices { gap: 22px 12px; max-width: 352px; }
 .ad-fan__choice { flex-basis: 96px; }
 .ad-fan__thumbnail { width: 96px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
 .cde-design-customisation a, .cde-design-customisation a * { transition: none; }
 .cde-design-customisation.is-enhanced .ad-fan__back { transition: none; }
 .cde-design-customisation.is-enhanced:not(.is-in-view) .ad-fan__back { transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-angle)); opacity: 1; }
}

.ad-fan__back { cursor: pointer; }
.ad-fan__back:focus-visible { outline: 3px solid var(--ad-brown, #463921); outline-offset: 4px; }
.ad-fan__back:hover { border-color: var(--ad-brown, #463921); }