
/* =========================================================
   TEVERE — COLLECTION ORDER PAGE
   Reference-matched collector edition selector.
   Main composition tuned to the supplied reference image.
   ========================================================= */

:root{
    --order-gold:#c78d19;
    --order-gold-dark:#b47c0e;
    --order-red:#c53a35;
    --order-green:#6f9f3c;
    --order-border:#e4e1dc;
    --order-soft:#f7f6f3;
    --order-ink:#141414;
}

body{
    background:#fff !important;
    color:var(--order-ink);
}

.regalia-order-page{
    background:#fff;
    padding:126px 0 0;
    overflow:hidden;
}

.lucky-number-hero{
    width:min(1055px,94%);
    margin:0 auto;
    padding:0 0 66px;
}

.lucky-number-intro{
    text-align:center;
}

.lucky-kicker{
    display:block;
    margin:0 0 13px;
    color:var(--order-gold);
    font:600 11px/1.1 Inter,sans-serif;
    letter-spacing:.25em;
    text-transform:uppercase;
}

.lucky-number-intro h1{
    margin:0;
    color:#121212;
    font:400 clamp(42px,4.1vw,52px)/.98 "Cormorant Garamond",serif;
    letter-spacing:-.035em;
}

.lucky-number-intro p{
    margin:17px auto 39px;
    color:#34322f;
    font:400 14px/1.75 "Cormorant Garamond",serif;
}

.lucky-number-layout{
    display:grid;
    grid-template-columns:1.12fr .82fr;
    gap:28px;
    align-items:stretch;
}

.edition-selector-card,
.selection-card{
    border:1px solid var(--order-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.035);
    min-width:0;
    box-sizing:border-box;
}

.edition-selector-card{
    min-height:765px;
    padding:29px 26px 25px;
}

.edition-search{
    display:grid;
    grid-template-columns:1fr 124px;
    gap:0;
    margin-bottom:26px;
}

.edition-search-field{
    height:44px;
    border:1px solid #ddd9d3;
    border-right:0;
    border-radius:4px 0 0 4px;
    display:flex;
    align-items:center;
    padding:0 13px;
    background:#fff;
}

.edition-search-field i{
    color:#85817a;
    font-size:18px;
    margin-right:11px;
}

.edition-search-field input{
    min-width:0;
    width:100%;
    border:0;
    outline:0;
    color:#262522;
    background:transparent;
    font:400 11px Inter,sans-serif;
}

.edition-search-field input::placeholder{
    color:#817d76;
}

.edition-search button{
    border:0;
    border-radius:0 4px 4px 0;
    background:#111;
    color:#fff;
    font:600 10px/1 Inter,sans-serif;
    letter-spacing:.08em;
}

.edition-legend{
    display:grid;
    grid-template-columns:repeat(4,auto);
    justify-content:space-between;
    gap:14px;
    margin:0 15px 33px;
}

.edition-legend span{
    display:flex;
    align-items:center;
    gap:8px;
    color:#272622;
    white-space:nowrap;
    font:400 10px/1 Inter,sans-serif;
}

.legend{
    width:17px;
    height:17px;
    display:inline-block;
    box-sizing:border-box;
}

.legend.available{
    border:2px solid #d3a348;
    background:#fff;
}

.legend.selected{
    border:1px solid #b78313;
    background:#c38b17;
}

.legend.claimed{
    background:var(--order-red);
}

.legend.unavailable{
    border:1px solid #bbb9b4;
    background:#efeee9;
}

.edition-grid{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:11px 10px;
}

.edition-number{
    height:45px;
    border:1px solid #d6ad66;
    background:#fff;
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#1d1c1a;
    font:400 12px/1 "Cormorant Garamond",serif;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}

.edition-number:hover:not(.claimed):not(.unavailable){
    transform:translateY(-1px);
    border-color:#b78313;
}

.edition-number.selected{
    background:#c18a12;
    border-color:#c18a12;
    color:#fff;
}

.edition-number.claimed{
    background:var(--order-red);
    border-color:var(--order-red);
    color:#fff;
    cursor:not-allowed;
}

.edition-number.unavailable{
    background:#efeee9;
    border-color:#bdbbb5;
    color:#4c4a46;
    cursor:not-allowed;
}

.edition-ellipsis{
    text-align:center;
    color:#222;
    font:400 16px/1 "Cormorant Garamond",serif;
    margin:25px 0 22px;
}

.edition-grid-tail{
    max-width:none;
}

.edition-jump{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:47px;
}

.edition-jump label{
    color:#1a1917;
    font:600 9px/1 Inter,sans-serif;
    letter-spacing:.11em;
}

.edition-jump input{
    width:86px;
    height:40px;
    text-align:center;
    border:1px solid #dedbd5;
    border-radius:4px;
    color:#3f3c37;
    outline:none;
    font:400 12px Inter,sans-serif;
}

.edition-jump button{
    width:55px;
    height:40px;
    border:0;
    border-radius:3px;
    background:#c38b17;
    color:#fff;
    font:600 10px/1 Inter,sans-serif;
}

.selection-card{
    min-height:765px;
    padding:29px 27px 27px;
    position:relative;
}

.selection-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.selection-card-top h2{
    margin:0;
    color:#b78313;
    font:600 11px/1 Inter,sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.availability{
    display:flex;
    align-items:center;
    gap:6px;
    color:#373632;
    font:400 9px/1 Inter,sans-serif;
    letter-spacing:.05em;
}

.availability i{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
    background:#78a843;
}

.edition-number-display{
    display:flex;
    align-items:baseline;
    gap:8px;
    justify-content:center;
    margin-top:30px;
}

.edition-number-display span{
    color:#5b5853;
    font:600 8px/1 Inter,sans-serif;
    letter-spacing:.1em;
}

.edition-number-display strong{
    color:#b27d11;
    font:400 39px/.9 "Cormorant Garamond",serif;
}

.edition-number-display em{
    color:#33312f;
    font:400 10px/1 "Cormorant Garamond",serif;
    font-style:normal;
}

.selection-product-image{
    height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:12px 0 7px;
}

.selection-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    mix-blend-mode:multiply;
}

.selection-card h3{
    margin:0 0 26px;
    color:#24221f;
    font:400 16px/1.35 "Cormorant Garamond",serif;
}

.selection-details{
    display:flex;
    flex-direction:column;
    gap:0;
    border-bottom:1px solid #dfdcd6;
}

.selection-details > div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:34px;
    border-top:0;
}

.selection-details span{
    color:#5e5a54;
    font:600 8px/1 Inter,sans-serif;
    letter-spacing:.08em;
}

.selection-details strong{
    color:#64605a;
    font:400 9px/1 Inter,sans-serif;
}

.selection-details .status-available{
    color:#71964d;
}

.selection-total{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    padding:15px 0 11px;
    border-bottom:1px solid #dfdcd6;
}

.selection-total span{
    display:block;
    color:#25231f;
    font:400 12px/1 "Cormorant Garamond",serif;
    letter-spacing:.04em;
}

.selection-total small{
    display:block;
    margin-top:2px;
    color:#77736c;
    font:400 7px/1.2 Inter,sans-serif;
}

.selection-total > strong{
    color:#bd8516;
    white-space:nowrap;
    font:400 17px/1 "Cormorant Garamond",serif;
}

.reserve-button,
.save-button{
    width:100%;
    height:45px;
    border-radius:3px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 17px;
    box-sizing:border-box;
    letter-spacing:.15em;
    font:600 9px/1 Inter,sans-serif;
}

.reserve-button{
    margin-top:18px;
    border:1px solid #bd8516;
    background:#c28a14;
    color:#fff;
    text-transform:uppercase;
}

.reserve-button i{
    font-style:normal;
    font-size:16px;
    letter-spacing:0;
}

.save-button{
    margin-top:11px;
    justify-content:center;
    gap:8px;
    border:1px solid #cda962;
    background:#fff;
    color:#24221f;
}

.save-button.saved{
    color:#b78313;
}

.order-assurances{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin:37px 0 52px;
    border-bottom:1px solid #ece8e1;
}

.assurance-item{
    min-height:132px;
    padding:4px 34px 29px;
    text-align:center;
    box-sizing:border-box;
    position:relative;
}

.assurance-item + .assurance-item{
    border-left:1px solid #e1ded8;
}

.assurance-icon{
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#bf8918;
    font-size:28px;
    margin-bottom:12px;
}

.assurance-item h3{
    margin:0 0 11px;
    color:#1d1b19;
    font:700 8px/1.25 Inter,sans-serif;
    letter-spacing:.12em;
}

.assurance-item p{
    max-width:205px;
    margin:0 auto;
    color:#55514b;
    font:400 9px/1.55 Inter,sans-serif;
}

.order-closing{
    text-align:center;
}

.order-closing span{
    display:block;
    margin:0 0 8px;
    color:#bd8515;
    font:600 11px/1 Inter,sans-serif;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.order-closing strong{
    color:#25231f;
    font:400 13px/1.2 "Cormorant Garamond",serif;
    letter-spacing:.13em;
    text-transform:uppercase;
}

/* Keep the original site footer visually unchanged, with a little separation
   from the white order content. */
.regalia-order-page + .footer-section{
    margin-top:72px;
}

@media(max-width:1100px){
    .regalia-order-page{
        padding-top:112px;
    }

    .lucky-number-layout{
        grid-template-columns:1fr;
    }

    .edition-selector-card,
    .selection-card{
        min-height:0;
    }

    .selection-card{
        padding-bottom:35px;
    }

    .selection-product-image{
        height:330px;
    }

    .order-assurances{
        margin-top:34px;
    }
}

@media(max-width:767px){
    .regalia-order-page{
        padding-top:100px;
    }

    .lucky-number-hero{
        width:calc(100% - 28px);
        padding-bottom:48px;
    }

    .lucky-number-intro h1{
        font-size:40px;
    }

    .lucky-number-intro p{
        font-size:13px;
        line-height:1.65;
        margin-bottom:31px;
    }

    .edition-selector-card{
        padding:20px 16px 23px;
        border-radius:14px;
    }

    .edition-search{
        grid-template-columns:1fr 110px;
    }

    .edition-legend{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        margin:0 4px 24px;
    }

    .edition-grid{
        gap:8px 6px;
    }

    .edition-number{
        height:39px;
        font-size:11px;
    }

    .edition-jump{
        margin-top:34px;
    }

    .selection-card{
        padding:22px 17px 25px;
        border-radius:14px;
    }

    .selection-product-image{
        height:285px;
        margin-top:8px;
    }

    .selection-card h3{
        font-size:17px;
    }

    .order-assurances{
        grid-template-columns:1fr;
        border-bottom:0;
        margin:32px 0 35px;
    }

    .assurance-item{
        min-height:125px;
        padding:20px 22px 25px;
        border-left:0 !important;
        border-bottom:1px solid #e6e2dc;
    }

    .order-closing span{
        font-size:9px;
        letter-spacing:.18em;
    }

    .order-closing strong{
        font-size:11px;
        line-height:1.45;
    }

    .regalia-order-page + .footer-section{
        margin-top:52px;
    }
}

/* =========================================================
   FONT SIZE ALIGNMENT WITH TEVERE REGALIA PRODUCT DISPLAY
   Uses the same primary type scale:
   44 / 25 / 22 / 14 / 12 / 11 / 10.5
   ========================================================= */

.lucky-kicker{
    font-size:14px;
    font-weight:500;
    letter-spacing:.17em;
}

.lucky-number-intro h1{
    font-size:44px;
    font-weight:500;
    line-height:.98;
    letter-spacing:.005em;
}

.lucky-number-intro p{
    font-family:Inter,sans-serif;
    font-size:14px;
    line-height:1.72;
}

.edition-search-field i{
    font-size:18px;
}

.edition-search-field input{
    font-size:12px;
}

.edition-search button{
    font-size:12px;
    font-weight:500;
}

.edition-legend span{
    font-size:11px;
}

.edition-number{
    font-size:12px;
}

.edition-ellipsis{
    font-size:22px;
}

.edition-jump label{
    font-size:11px;
}

.edition-jump input{
    font-size:12px;
}

.edition-jump button{
    font-size:12px;
}

.selection-card-top h2{
    font-size:11px;
}

.availability{
    font-size:10.5px;
}

.edition-number-display strong{
    font-size:39px;
}

.edition-number-display span{
    font-size:11px;
}

.edition-number-display em{
    font-size:11px;
}

.selection-card h3{
    font-size:22px;
    line-height:1.15;
}

.selection-details span{
    font-size:11px;
}

.selection-details strong{
    font-size:10.5px;
}

.selection-total span{
    font-size:14px;
}

.selection-total small{
    font-size:10.5px;
}

.selection-total > strong{
    font-size:22px;
}

.reserve-button,
.save-button{
    font-size:12px;
}

.reserve-button i{
    font-size:22px;
}

.assurance-item h3{
    font-size:11px;
}

.assurance-item p{
    font-size:10.5px;
    line-height:1.62;
}

.order-closing span{
    font-size:14px;
}

.order-closing strong{
    font-size:12px;
}

/* Keep the same hierarchy on smaller screens, only reducing where necessary. */
@media(max-width:767px){
    .lucky-kicker{font-size:11px;}
    .lucky-number-intro h1{font-size:39px;}
    .lucky-number-intro p{font-size:12px;}
    .edition-legend span{font-size:10.5px;}
    .selection-card h3{font-size:21px;}
    .order-closing span{font-size:11px;}
    .order-closing strong{font-size:11px;}
}

@media(max-width:420px){
    .lucky-number-intro h1{font-size:31px;}
    .selection-card h3{font-size:18px;}
}
