/* Locale-independent selectors: translated hrefs must not change the layout. */
@media(max-width:1079px){
 .reference-layout header #nav{display:none;position:absolute;inset:100% 0 auto;flex:none;padding:20px 24px;margin:0;background:#17130ffa;border-bottom:1px solid #77603e;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 74px);overflow-y:auto}
 .reference-layout header #nav.open{display:flex;position:absolute;flex-direction:column;gap:0}
 .reference-layout header #nav>a{font-size:17px;line-height:1.5;padding:10px 0;white-space:normal}
 .reference-layout header .menu-toggle{display:block;flex-shrink:0;padding:10px}
 .reference-layout header>.header-actions{margin-inline-start:auto;gap:10px}
}
@media(max-width:800px){
 .reference-layout header{padding-inline:16px;gap:12px}
 .reference-layout header>.header-actions>a.button{display:none}
 .reference-layout header>a:first-child{flex:0 1 143px;max-width:143px;min-width:0}
 .reference-layout header>.header-actions{flex-shrink:0;gap:7px}
 .reference-layout .account-menu>summary{white-space:nowrap;padding-inline:10px}
 .reference-layout header .menu-toggle{padding-inline:8px}
}
@media(max-width:360px){.reference-layout header>a:first-child{max-width:120px}.reference-layout header{gap:8px;padding-inline:12px}.reference-layout .account-menu>summary{font-size:11px}}

.locale-payment-note{font-size:12px;line-height:1.7;color:#c9b99e;padding-block:18px 30px}
/* The whole navigation row is a target, rather than the letter outlines. */
.reference-layout header #nav>a{display:inline-flex;align-items:center;min-height:46px;padding-block:12px;touch-action:manipulation}
.reference-layout header #nav>a:focus-visible{outline:2px solid #dfbf86;outline-offset:3px}
/* Voucher headings must grow with their translation without clipping the trust row. */
.reference-layout .sub-hero.voucher-hero{height:auto;min-height:420px}
.reference-layout .voucher-hero .sub-hero-content{width:630px;max-width:47%;padding-bottom:36px}
.reference-layout .voucher-hero h1{font-size:clamp(44px,4.5vw,61px);overflow-wrap:normal}
.reference-layout .voucher-hero h2{font-size:clamp(25px,2.5vw,32px);line-height:1.2}
.reference-layout .voucher-hero .sub-trust{flex-wrap:wrap;row-gap:16px}
@media(max-width:800px){
 .reference-layout .sub-hero.voucher-hero{min-height:0}
 .reference-layout .voucher-hero .sub-hero-content{width:auto;max-width:100%;padding-bottom:32px}
 .reference-layout .voucher-hero h1{font-size:44px}
}
.reference-layout .voucher-hero .sub-hero-art{mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 92%)}
