/* #graphic-page css */

#reso .container-center, #reso .container-sx div, #reso .container-dx div {
    height: 491px;
    padding-top: 210px;
}

#reso .container-center {
    background-image: url('../../../images/frontend/graphic-pages/shipping/reso/center.png');
    background-size: 1110px 491px;
}

#reso .container-sx div {
    background-image: url('../../../images/frontend/graphic-pages/shipping/reso/sx.png');
    background-size: 1px 491px;
}

#reso .container-dx div {
    background-image: url('../../../images/frontend/graphic-pages/shipping/reso/dx.png');
    background-size: 1px 491px;
}

#reso .container-center div {
    width: 400px;
}

#reso .container-center h2 {
    text-align: left;
}

#reso-detail {
    display: none;
}

#gift-message .container-center {
    height: 368px;
}

#gift-message .container-center {
    background-image: url('../../../images/frontend/graphic-pages/common/gift-message/gift-message-desktop.png');
    background-size: 1110px 368px;
}

#gift-message .container-center div {
    width: 400px;
    margin-left: 660px;
    text-align: left;
}

#gift-message .container-center h2, #gift-message .container-center p {
    text-align: left;
}

#wine-list .container-center {
    height: 368px;
}

#wine-list .container-center {
    background-image: url('../../../images/frontend/graphic-pages/common/wine-list/wine-list-desktop.png');
    background-size: 1110px 368px;
}

#wine-list .container-center div {
    width: 400px;
    margin-left: 660px;
    text-align: left;
}

#wine-list .container-center h2, #wine-list .container-center p {
    text-align: left;
}

#best-wineshop .description h2, #best-wineshop .description p {
    text-align: left;
}

#best-customer-care .description h2, #best-customer-care .description p {
    text-align: left;
}

/* LA TABELLA NON STA PIU' QUI: `.styled-table` era la copia verde della stessa famiglia che
   graphic-pages/contatti.css scriveva in blu, entrambe senza scope. Le due tabelle - i numeri di
   telefono di contatti e i tempi di consegna di spedizioni - sono ora la `.table` canonica
   documentata in /design-system/tables. Il dettaglio di cosa si perde sta nel commento gemello
   in contatti.css. */

/* La terza tabella convertita insieme alle due qui sopra: i costi di spedizione, che il frammento
   graphic-pages/shipping-country/shipping-costs mostra su /shipping quando l'operatore e' in
   modalita' riservata (`th:if="${reserved}"`). E' costruita in Java (ShippingCostsTable) e ora
   chiede la `.table` canonica come le altre due; il commento che spiega quali classi ha perso sta
   li', accanto a setClassCss.

   UNA PAGINA SOLA, e va scritto perche' il nome della cartella inganna. shipping-costs sta in
   graphic-pages/shipping-country/ accanto a shipping-time, ma i due frammenti non hanno la stessa
   diffusione: shipping-time e' incluso da due pagine (shipping.html:88 e shipping-country.html:81),
   shipping-costs da una sola, shipping.html:91. Su /content/shipping-country la tabella non
   compare affatto - la' `shippingCostsTable` non e' nemmeno nel model, perche' l'unico punto che
   lo popola e' PromoListController.viewShipping(), cioe' la rotta /shipping.

   Qui resta solo il contesto, che e' cio' che il design system lascia alla pagina: le due colonne
   di importi allineate a destra. Prima era uno `style=` inline per cella, e siccome
   setStyleOnColumn non tocca la riga di intestazione, i due titoli restavano a sinistra sopra
   numeri a destra: adesso sono allineati anche loro. Le larghezze fisse (200/80/100px) non
   tornano - come le colonne al 33% delle altre due tabelle, se ne va anche questa.

   PERCHE' QUESTO FOGLIO, con una pagina sola: non per copertura. /shipping carica anche
   shipping.css, via additionalCss, e li' la regola arriverebbe esattamente sulla stessa unica
   pagina, invece che su ogni pagina grafica con commonElements=true come adesso. Sta qui per
   stare accanto al commento che racconta le altre due tabelle, di cui questa e' la terza voce:
   e' una collocazione per leggibilita', non un vincolo tecnico, e chi la sposta in shipping.css
   non rompe niente purche' porti con se' questa nota.
   Il vincolo che invece resta e' il flag: shipping.html passa commonElements=true, che e' cio' che
   carica questo foglio. Una seconda pagina che includesse il frammento senza quel flag perderebbe
   l'allineamento in silenzio - ed e' lo stesso `commonElements` che qui sopra spiega perche' le due
   copie di `.styled-table` non si siano mai incontrate.
   Selettore ancorato all'id della tabella, non alla famiglia `.table`: la lezione di
   `.styled-table` qui sopra. */

#shipping-costs-table th:nth-child(n+2),
#shipping-costs-table td:nth-child(n+2) {
    text-align: right;
}

#commercial-video iframe {
    margin-top: 45px;
    width: 560px;
    height: 315px;
}


body.mobile-view #gift-message .banner-mobile img {
    content: url('../../../images/frontend/graphic-pages/common/gift-message/gift-message-mobile.png');
}

body.mobile-view #wine-list .banner-mobile img {
    content: url('../../../images/frontend/graphic-pages/common/wine-list/wine-list-mobile.png');
}

body.mobile-view #best-wineshop .description h2, body.mobile-view #best-wineshop .description p {
    text-align: center;
}

body.mobile-view #best-customer-care .description h2, body.mobile-view #best-customer-care .description p {
    text-align: center;
}

body.mobile-view #best-wineshop .image {
    text-align: center;
}

body.mobile-view #best-customer-care .image {
    text-align: center;
}


body.mobile-view #commercial-video iframe {
    margin-top: 45px;
    width: unset;
    height: unset;
}