:root { color-scheme: light; font-family: Arial, sans-serif; color: #262020; background: #f7f4f1; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header, main { width: min(100% - 2rem, 760px); margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
header img { display: block; object-fit: contain; }
a { color: #841820; }
main { padding-block: 1rem 3rem; }
h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); margin: 0 0 1rem; }
h2 { margin-top: 0; }
form, aside { background: #fff; border: 1px solid #e5dcd8; border-radius: 1rem; padding: clamp(1rem, 4vw, 2rem); }
label, aside span { display: block; margin-block: .45rem; }
input, select { display: block; width: 100%; margin: .35rem 0 .8rem; padding: .65rem; border: 1px solid #a99f9c; border-radius: .4rem; font: inherit; }
button { background: #c81f2b; color: #fff; border: 0; border-radius: .45rem; padding: .7rem 1rem; min-height: 44px; font: inherit; cursor: pointer; }
button.secondary { color: #6d2027; background: #f6ecea; }
button:disabled { opacity: .55; cursor: default; }
.products, .slot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.products label { border: 1px solid #e5dcd8; border-radius: .65rem; padding: .8rem; }
.products span { display: block; margin-top: .35rem; }
fieldset { margin: .8rem 0; border: 1px solid #e5dcd8; border-radius: .65rem; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
aside { margin-top: 1rem; }
#first-order-message:empty { display: none; }
@media (max-width: 480px) { .slot { grid-template-columns: 1fr; gap: 0; } .actions button { flex: 1 1 auto; } }

:root { --yubs-orange: #ff410d; --yubs-red: #ba1c28; font-family: 'avenir-lt-w01_35-light1475496', Arial, sans-serif; background: #faf8f5; }
header, main { width: min(100% - 2rem, 890px); }
header a:last-child { font-weight: 700; }
.order-intro { padding: clamp(1.25rem, 5vw, 3rem); margin-bottom: 1rem; border-radius: 1.15rem; background: #2a2423; color: white; }
.order-intro p { max-width: 40ch; margin-bottom: 0; }
.order-intro .eyebrow { margin: 0 0 .65rem; color: #ffd0bb; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, .products strong { font-family: 'oswald', 'din-next-w01-light', Arial, sans-serif; }
h1 { font-size: clamp(2.35rem, 7vw, 4.5rem); line-height: 1.1; }
.products label { display: flex; flex-direction: column; padding: 1rem; }
.products img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: .45rem; margin-bottom: .75rem; }
.products strong { font-size: 1.45rem; }
.products [data-price] { color: #9f1b22; font-weight: 700; }
.products small { color: #615855; }
.products .quantity-label { margin-top: auto; padding-top: .75rem; }
.products input { max-width: 7rem; margin-bottom: 0; }
button { background: var(--yubs-red); border-radius: 2rem; }
aside { border-left: .3rem solid var(--yubs-orange); }
@media (max-width: 380px) { .products { grid-template-columns: 1fr; } }