/* ============================================================
   AKASHA COMMERCE - CARRELLO E CHECKOUT
   ============================================================ */

.commerce-shell {
 max-width: 1050px;
 margin: 0 auto;
}

.commerce-card {
 position: relative;
 overflow: hidden;
 padding: 34px;
 border: 1px solid rgba(255, 241, 173, 0.34);
 border-radius: 24px;
 background: linear-gradient(145deg, rgba(105, 18, 19, 0.76), rgba(74, 11, 17, 0.58));
 box-shadow: 0 22px 55px rgba(55, 5, 9, 0.28);
 backdrop-filter: blur(5px);
}

 .commerce-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fff1ad, transparent);
  opacity: .85;
 }

.commerce-heading {
 display: flex;
 align-items: center;
 gap: 14px;
 margin: 0 0 24px;
 color: #fff1ad;
 font-family: "Playfair Display", serif;
 font-size: clamp(1.65rem, 3vw, 2.25rem);
}

 .commerce-heading .commerce-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  flex: 0 0 44px;
  border: 1px solid rgba(255, 241, 173, .42);
  border-radius: 50%;
  background: rgba(255, 241, 173, .1);
  font-size: 1rem;
  box-shadow: 0 0 22px rgba(255, 241, 173, .12);
 }

.commerce-intro {
 max-width: 760px;
 margin: -8px 0 28px;
 color: rgba(255,255,255,.86);
 line-height: 1.75;
}

/* Carrello */
.commerce-table-wrap {
 overflow-x: auto;
 border: 1px solid rgba(255, 241, 173, .24);
 border-radius: 17px;
 background: rgba(255, 255, 255, .97);
 box-shadow: 0 14px 35px rgba(48, 5, 9, .18);
}

.tabella-commerce {
 width: 100%;
 min-width: 680px;
 border-collapse: collapse;
 color: #492024;
 background: transparent;
}

 .tabella-commerce th {
  padding: 16px 18px;
  border: 0;
  background: #6f1720;
  color: #fff1ad;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-align: left;
  text-transform: uppercase;
 }

  .tabella-commerce th:first-child {
   border-radius: 16px 0 0 0;
  }

  .tabella-commerce th:last-child {
   border-radius: 0 16px 0 0;
  }

 .tabella-commerce td {
  padding: 18px;
  border: 0;
  border-bottom: 1px solid #eadcce;
  vertical-align: middle;
 }

 .tabella-commerce tr:last-child td {
  border-bottom: 0;
 }

 .tabella-commerce tr:hover td {
  background: #fff9ed;
 }

 .tabella-commerce td:first-child {
  font-weight: 700;
  color: #6f1720;
 }

.campo-qta {
 width: 78px;
 padding: 10px 8px;
 border: 1px solid #ccb8a8;
 border-radius: 9px;
 background: #fff;
 color: #492024;
 font: inherit;
 text-align: center;
 transition: border-color .2s ease, box-shadow .2s ease;
}

 .campo-qta:focus {
  outline: none;
  border-color: #a66e2b;
  box-shadow: 0 0 0 3px rgba(166, 110, 43, .15);
 }

.commerce-table-wrap .tabella-commerce a,
.commerce-table-wrap .tabella-commerce a:link,
.commerce-table-wrap .tabella-commerce a:visited {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 8px 12px;
 border: 1px solid #b64141;
 border-radius: 999px;
 background: #ffffff;
 color: #9c2424 !important;
 font-size: .83rem;
 font-weight: 700;
 text-decoration: none;
 text-shadow: none;
 transition: color .2s ease, background .2s ease, border-color .2s ease;
}

 .commerce-table-wrap .tabella-commerce a:hover,
 .commerce-table-wrap .tabella-commerce a:focus,
 .commerce-table-wrap .tabella-commerce a:active {
  border-color: #9c2424;
  background: #9c2424;
  color: #ffffff !important;
  text-decoration: none;
 }

.riepilogo-carrello {
 width: min(100%, 410px);
 margin: 28px 0 0 auto;
 padding: 23px 25px;
 border: 1px solid rgba(255, 241, 173, .28);
 border-radius: 17px;
 background: rgba(255, 255, 255, .1);
}

 .riepilogo-carrello p {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
 }

  .riepilogo-carrello p:last-child {
   margin-top: 5px;
   padding-top: 16px;
   border-bottom: 0;
   color: #fff1ad;
   font-size: 1.28rem;
  }

 .riepilogo-carrello strong {
  color: inherit;
 }

.commerce-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 gap: 13px;
 margin-top: 24px;
}

.commerce-btn-secondary,
.commerce-btn-primary {
 min-height: 50px;
 padding: 13px 24px !important;
 border-radius: 999px !important;
 font-family: "Montserrat", sans-serif;
 font-size: .93rem;
 font-weight: 700;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.commerce-btn-secondary {
 border: 1px solid rgba(255, 241, 173, .7) !important;
 background: transparent !important;
 color: #fff1ad !important;
}

.commerce-btn-primary {
 border: 1px solid #fff1ad !important;
 background: linear-gradient(135deg, #fff1ad, #e9bd62) !important;
 color: #5d1319 !important;
 box-shadow: 0 10px 24px rgba(34, 4, 7, .22);
}

 .commerce-btn-secondary:hover,
 .commerce-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 29px rgba(34, 4, 7, .28);
 }

/* Checkout */
.checkout-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 330px;
 gap: 26px;
 align-items: start;
}

.checkout-main,
.checkout-summary {
 border: 1px solid rgba(255, 241, 173, .25);
 border-radius: 20px;
 background: rgba(255,255,255,.09);
}

.checkout-main {
 padding: 29px;
}

.checkout-summary {
 position: sticky;
 top: 24px;
 padding: 25px;
}

.checkout-section + .checkout-section {
 margin-top: 30px;
 padding-top: 29px;
 border-top: 1px solid rgba(255,255,255,.14);
}

.checkout-section-title {
 display: flex;
 align-items: center;
 gap: 11px;
 margin: 0 0 20px;
 color: #fff1ad;
 font-family: "Playfair Display", serif;
 font-size: 1.65rem;
}

 .checkout-section-title i {
  font-size: .85rem;
 }

.checkout-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 18px;
 align-items: start;
}

.checkout-grid > .checkout-field {
 min-width: 0;
}

.checkout-field-full {
 grid-column: 1 / -1;
}

.checkout-field label {
 display: block;
 margin: 0 0 7px;
 color: rgba(255,255,255,.9);
 font-size: .86rem;
 font-weight: 700;
}

.checkout-input-wrap {
 position: relative;
 width: 100%;
}

.checkout-field input[type="text"],
.checkout-field input[type="email"],
.checkout-field input[type="tel"] {
 display: block;
 width: 100%;
 min-width: 0;
 min-height: 48px;
 box-sizing: border-box;
 margin: 0;
 padding: 11px 36px 11px 13px;
 border: 1px solid rgba(255, 241, 173, .32);
 border-radius: 11px;
 background: rgba(255,255,255,.96);
 color: #482024;
 font: inherit;
 transition: border-color .2s ease, box-shadow .2s ease;
}

.checkout-field input[type="text"]:focus,
.checkout-field input[type="email"]:focus,
.checkout-field input[type="tel"]:focus {
 outline: none;
 border-color: #e1b85d;
 box-shadow: 0 0 0 4px rgba(255, 241, 173, .14);
}

.checkout-input-wrap .field-validator {
 position: absolute;
 top: 50%;
 right: 13px;
 margin: 0;
 color: #8f2419;
 font-size: 1rem;
 font-weight: 800;
 line-height: 1;
 transform: translateY(-50%);
 pointer-events: none;
}

.checkout-payment-list table {
 width: 100%;
}

.checkout-payment-list td {
 padding: 0 0 11px;
}

.checkout-payment-list input {
 margin-right: 9px;
 transform: scale(1.12);
 accent-color: #e7b957;
}

.checkout-payment-list label {
 color: #fff;
 font-weight: 600;
}

.checkout-consents {
 display: grid;
 gap: 12px;
 margin-top: 20px;
}

.checkout-consent {
 display: block;
 padding: 14px 15px;
 border: 1px solid rgba(255, 241, 173, .18);
 border-radius: 12px;
 background: rgba(255,255,255,.055);
 color: rgba(255,255,255,.9);
 line-height: 1.5;
}

 .checkout-consent input {
  margin: 4px 9px 0 0;
  vertical-align: top;
  accent-color: #e7b957;
 }

.checkout-summary h3 {
 margin: 0 0 18px;
 color: #fff1ad;
 font-family: "Playfair Display", serif;
 font-size: 1.5rem;
}

.checkout-summary-note {
 margin: 0 0 23px;
 color: rgba(255,255,255,.76);
 font-size: .88rem;
 line-height: 1.65;
}

.totale-checkout {
 display: flex;
 justify-content: space-between;
 gap: 18px;
 margin: 0 0 22px;
 padding: 18px 0;
 border-top: 1px solid rgba(255,255,255,.14);
 border-bottom: 1px solid rgba(255,255,255,.14);
 color: #fff;
 font-size: 1rem;
}

 .totale-checkout strong {
  color: #fff1ad;
  font-size: 1.35rem;
  white-space: nowrap;
 }

.checkout-summary .commerce-btn-primary {
 display: flex;
 width: 100%;
 box-sizing: border-box;
 margin: 0;
}

.checkout-security {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin: 24px 0 0;
 padding: 18px 0 0;
 border-top: 1px solid rgba(255,255,255,.14);
 color: rgba(255,255,255,.76);
 font-size: .82rem;
 line-height: 1.65;
 text-align: left;
}

.checkout-security i {
 flex: 0 0 auto;
 margin-top: 4px;
}

.checkout-security span {
 display: block;
 margin: 0;
}

.errore-commerce,
.messaggio-commerce {
 display: block;
 margin: 0 0 18px;
 padding: 13px 15px;
 border-radius: 11px;
}

.errore-commerce {
 border: 1px solid rgba(255, 190, 190, .45);
 background: rgba(111, 12, 22, .55);
 color: #fff;
}

.messaggio-commerce {
 border: 1px solid rgba(255, 241, 173, .34);
 background: rgba(255, 241, 173, .09);
 color: #fff1ad;
}

 .errore-commerce:empty,
 .messaggio-commerce:empty {
  display: none;
 }

.field-validator {
 color: #fff1ad;
 margin-left: 4px;
}

@media (max-width: 900px) {
 .checkout-layout {
  grid-template-columns: 1fr;
 }

 .checkout-summary {
  position: static;
 }
}

@media (max-width: 700px) {
 .commerce-card {
  padding: 22px 15px;
  border-radius: 18px;
 }

 .checkout-main, .checkout-summary {
  padding: 21px 16px;
  border-radius: 15px;
 }

 .checkout-grid {
  grid-template-columns: 1fr;
  gap: 14px;
 }

 .checkout-field-full {
  grid-column: auto;
 }

 .commerce-actions {
  flex-direction: column-reverse;
 }

  .commerce-actions input {
   width: 100%;
  }

 .riepilogo-carrello {
  width: auto;
 }

 .commerce-table-wrap {
  margin: 0 -5px;
 }
}

/* Scheda commerciale dinamica */
.offerta-commerce {
 margin: 32px 0;
 padding: 0;
 border: 1px solid rgba(212,175,55,.42);
 border-radius: 22px;
 overflow: hidden;
 background: rgba(255,255,255,.96);
 color: #4b2420;
 box-shadow: 0 18px 45px rgba(75,25,18,.16)
}

.offerta-commerce__head {
 padding: 28px 30px 20px;
 background: linear-gradient(135deg,#fff9e8,#fff)
}

 .offerta-commerce__head h2 {
  margin: 8px 0 10px;
  color: #7b241c
 }

 .offerta-commerce__head p {
  margin: 0;
  line-height: 1.65
 }

.offerta-commerce__tipo {
 display: inline-block;
 color: #fff4c2 !important;
 background: #8f2419;
 border: 1px solid rgba(255, 225, 145, 0.45);
 padding: 6px 12px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 1px;
 text-transform: uppercase;
 text-shadow: none;
}

.offerta-commerce__body {
 padding: 25px 30px 30px
}

.offerta-commerce__field {
 margin-bottom: 18px
}

 .offerta-commerce__field label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700
 }

 .offerta-commerce__field select, .offerta-commerce__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #d8c8b9;
  border-radius: 10px;
  background: #fff;
  font: inherit
 }

.offerta-commerce__price {
 display: flex;
 align-items: baseline;
 gap: 14px;
 flex-wrap: wrap;
 margin: 20px 0
}

 .offerta-commerce__price strong {
  font-size: 1.8rem;
  color: #8c281f
 }

 .offerta-commerce__price small {
  color: #6e5b52
 }

.offerta-commerce__actions {
 display: flex;
 align-items: center;
 gap: 18px;
 flex-wrap: wrap
}

.vetrina-commerce {
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
 gap: 22px
}

.vetrina-card {
 padding: 24px;
 border-radius: 18px;
 background: rgba(255,255,255,.96);
 box-shadow: 0 12px 32px rgba(75,25,18,.12);
 color: #4b2420
}

 .vetrina-card h2 {
  color: #7b241c
 }

.vetrina-price {
 font-size: 1.35rem;
 font-weight: 700;
 color: #8c281f
}


/* Offerte collegate automaticamente alle pagine editoriali */
.offerte-pagina-auto {
 margin-top: 2.5rem;
}

.offerte-pagina-auto__section {
 padding-top: 0;
}

.offerte-pagina-auto__heading {
 max-width: 760px;
 margin: 0 auto 1.5rem;
 text-align: center;
}

.offerte-pagina-auto__eyebrow {
 display: inline-block;
 margin-bottom: .5rem;
 font-size: .78rem;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
}

.catalogo-categoria .vetrina-commerce {
 margin-top: 1.5rem;
}


/* ============================================================
   VETRINA / CATALOGO PUBBLICO
   ============================================================ */

.catalogo-categoria {
 max-width: 1080px;
 margin: 0 auto;
}

 .catalogo-categoria .catalogo-filtri,
 .catalogo-categoria > select,
 .catalogo-categoria [id$="ddlCategoria"] {
  width: min(100%, 360px);
 }

 .catalogo-categoria [id$="ddlCategoria"],
 .catalogo-categoria select {
  min-height: 52px;
  padding: 0 48px 0 18px;
  border: 1px solid rgba(255, 241, 173, .62);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,248,231,.97));
  color: #6f1720;
  font-family: "Montserrat", sans-serif;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(70, 8, 13, .18), inset 0 1px 0 rgba(255,255,255,.9);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8c281f 50%), linear-gradient(135deg, #8c281f 50%, transparent 50%), linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,248,231,.97));
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
 }

  .catalogo-categoria [id$="ddlCategoria"]:hover,
  .catalogo-categoria select:hover {
   border-color: #e2bd63;
   transform: translateY(-1px);
  }

  .catalogo-categoria [id$="ddlCategoria"]:focus,
  .catalogo-categoria select:focus {
   border-color: #e2bd63;
   box-shadow: 0 0 0 4px rgba(255, 241, 173, .18), 0 14px 32px rgba(70, 8, 13, .22);
  }

  .catalogo-categoria [id$="ddlCategoria"] option,
  .catalogo-categoria select option {
   background: #fffaf0;
   color: #5f171c;
   font-weight: 600;
  }

 .catalogo-categoria .vetrina-commerce {
  margin-top: 28px;
 }

.vetrina-card {
 position: relative;
 overflow: hidden;
 display: flex;
 min-height: 280px;
 box-sizing: border-box;
 flex-direction: column;
 justify-content: flex-start;
 padding: 30px;
 border: 1px solid rgba(130, 45, 35, .12);
 border-radius: 22px;
 background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,248,238,.96));
 box-shadow: 0 18px 42px rgba(77, 18, 18, .14);
 transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

 .vetrina-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #7b241c, #e3ba59, #7b241c);
 }

 .vetrina-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 24px 52px rgba(77, 18, 18, .2);
 }

 .vetrina-card h2 {
  margin: 12px 0 12px;
  color: #7b241c;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.2;
 }

 .vetrina-card p {
  margin: 0 0 18px;
  color: #72534c;
  line-height: 1.7;
 }

 .vetrina-card .vetrina-price {
  margin-top: auto;
  padding-top: 8px;
  color: #8c281f;
  font-size: 1.55rem;
  font-weight: 800;
 }

 .vetrina-card .btn-pagina,
 .vetrina-card .commerce-btn-primary,
 .vetrina-card a[class*="btn"] {
  align-self: flex-start;
  margin-top: 18px;
 }


/* ============================================================
   PAGINA RICHIESTA DI RECESSO
   ============================================================ */

.recesso-commerce,
.pagina-contenuto:has([id$="txtOrdine"]) {
 max-width: 920px;
 margin: 0 auto;
}

 .recesso-commerce__card,
 .pagina-contenuto:has([id$="txtOrdine"]) form,
 .pagina-contenuto:has([id$="txtOrdine"]) .commerce-card {
  position: relative;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255, 241, 173, .36);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(105,18,19,.76), rgba(74,11,17,.6));
  box-shadow: 0 24px 58px rgba(55,5,9,.28);
 }

 .recesso-grid,
 .pagina-contenuto:has([id$="txtOrdine"]) .recesso-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
 }

 .recesso-field,
 .pagina-contenuto:has([id$="txtOrdine"]) label {
  color: rgba(255,255,255,.93);
  font-family: "Montserrat", sans-serif;
  font-size: .9rem;
  font-weight: 700;
 }

.pagina-contenuto [id$="txtOrdine"],
.pagina-contenuto [id$="txtEmail"],
.pagina-contenuto [id$="txtMotivo"] {
 width: 100%;
 box-sizing: border-box;
 margin-top: 7px;
 padding: 13px 15px;
 border: 1px solid rgba(255, 241, 173, .36);
 border-radius: 12px;
 background: rgba(255,255,255,.98);
 color: #482024;
 font: inherit;
 box-shadow: inset 0 1px 2px rgba(71,19,19,.08);
 transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pagina-contenuto [id$="txtOrdine"],
.pagina-contenuto [id$="txtEmail"] {
 min-height: 50px;
}

.pagina-contenuto [id$="txtMotivo"] {
 min-height: 145px;
 resize: vertical;
 line-height: 1.55;
}

 .pagina-contenuto [id$="txtOrdine"]:focus,
 .pagina-contenuto [id$="txtEmail"]:focus,
 .pagina-contenuto [id$="txtMotivo"]:focus {
  outline: none;
  border-color: #e1b85d;
  box-shadow: 0 0 0 4px rgba(255,241,173,.17), 0 8px 22px rgba(45,6,9,.12);
 }

.pagina-contenuto [id$="btnInvia"],
.pagina-contenuto [id$="btnRichiedi"],
.pagina-contenuto [id$="btnRecesso"] {
 min-height: 52px;
 margin-top: 22px;
 padding: 14px 28px !important;
 border: 1px solid #fff1ad !important;
 border-radius: 999px !important;
 background: linear-gradient(135deg, #fff1ad, #e9bd62) !important;
 color: #5d1319 !important;
 font-family: "Montserrat", sans-serif;
 font-size: .93rem;
 font-weight: 800;
 cursor: pointer;
 box-shadow: 0 12px 26px rgba(34,4,7,.22);
 transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

 .pagina-contenuto [id$="btnInvia"]:hover,
 .pagina-contenuto [id$="btnRichiedi"]:hover,
 .pagina-contenuto [id$="btnRecesso"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 16px 32px rgba(34,4,7,.3);
 }

.pagina-contenuto [id$="lblMessaggio"],
.pagina-contenuto [id$="lblEsito"],
.pagina-contenuto [id$="lblErrore"] {
 display: block;
 margin: 0 0 20px;
 padding: 14px 16px;
 border: 1px solid rgba(255,241,173,.32);
 border-radius: 12px;
 background: rgba(255,241,173,.09);
 color: #fff1ad;
 line-height: 1.55;
}

 .pagina-contenuto [id$="lblMessaggio"]:empty,
 .pagina-contenuto [id$="lblEsito"]:empty,
 .pagina-contenuto [id$="lblErrore"]:empty {
  display: none;
 }


/* Compatibilità per browser che non supportano :has().
   È consigliato aggiungere class="recesso-commerce" al contenitore
   principale della pagina recesso.aspx. */

.recesso-commerce .recesso-form {
 position: relative;
 padding: clamp(24px, 4vw, 42px);
 border: 1px solid rgba(255, 241, 173, .36);
 border-radius: 24px;
 background: linear-gradient(145deg, rgba(105,18,19,.76), rgba(74,11,17,.6));
 box-shadow: 0 24px 58px rgba(55,5,9,.28);
}

.recesso-commerce .recesso-form-row {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 20px;
}

.recesso-commerce .recesso-form-field {
 display: flex;
 flex-direction: column;
}

.recesso-commerce .recesso-form-field--full {
 grid-column: 1 / -1;
}

@media (max-width: 700px) {
 .catalogo-categoria [id$="ddlCategoria"],
 .catalogo-categoria select {
  width: 100%;
 }

 .vetrina-card {
  min-height: auto;
  padding: 24px 20px;
 }

 .recesso-grid,
 .recesso-commerce .recesso-form-row {
  grid-template-columns: 1fr;
 }

 .recesso-commerce__card,
 .recesso-commerce .recesso-form {
  padding: 22px 16px;
  border-radius: 18px;
 }

 .pagina-contenuto [id$="btnInvia"],
 .pagina-contenuto [id$="btnRichiedi"],
 .pagina-contenuto [id$="btnRecesso"] {
  width: 100%;
 }
}

.recesso-intro {
 margin-bottom: 28px;
}

 .recesso-intro h2 {
  margin: 0 0 14px;
  color: #fff1ad;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
 }

 .recesso-intro p {
  max-width: 760px;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .86);
  line-height: 1.75;
 }

.recesso-form label {
 display: block;
 margin-bottom: 8px;
 color: rgba(255, 255, 255, .94);
 font-size: .9rem;
 font-weight: 700;
}

.campo-facoltativo {
 margin-left: 5px;
 color: rgba(255, 255, 255, .65);
 font-size: .78rem;
 font-weight: 500;
}

.campo-commerce {
 width: 100%;
 min-height: 50px;
 box-sizing: border-box;
 margin-top: 7px;
 padding: 13px 15px;
 border: 1px solid rgba(255, 241, 173, .36);
 border-radius: 12px;
 background: rgba(255, 255, 255, .98);
 color: #482024;
 font: inherit;
 box-shadow: inset 0 1px 2px rgba(71, 19, 19, .08);
 transition: border-color .2s ease, box-shadow .2s ease;
}

 .campo-commerce:focus {
  outline: none;
  border-color: #e1b85d;
  box-shadow: 0 0 0 4px rgba(255, 241, 173, .17), 0 8px 22px rgba(45, 6, 9, .12);
 }

.campo-commerce--textarea {
 min-height: 150px;
 resize: vertical;
 line-height: 1.55;
}

.recesso-note {
 margin-top: 22px;
 padding: 15px 17px;
 border: 1px solid rgba(255, 241, 173, .18);
 border-radius: 12px;
 background: rgba(255, 255, 255, .06);
}

 .recesso-note p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
  line-height: 1.65;
 }

/* ============================================================
   VETRINA PUBBLICA
   ============================================================ */

.catalogo-intro {
 position: relative;
}

.catalogo-eyebrow {
 display: inline-block;
 margin-bottom: 10px;
 color: #fff1ad;
 font-size: .78rem;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
}

.catalogo-toolbar {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 24px;
 margin: 28px 0;
 padding: 20px 22px;
 border: 1px solid rgba(255, 241, 173, .22);
 border-radius: 18px;
 background: rgba(255, 255, 255, .07);
 box-shadow: 0 14px 34px rgba(55, 5, 9, .14);
}

.catalogo-filtro {
 width: min(100%, 380px);
}

 .catalogo-filtro label {
  display: block;
  margin-bottom: 8px;
  color: #fff1ad;
  font-size: .84rem;
  font-weight: 800;
 }

.catalogo-toolbar-note {
 max-width: 470px;
 color: rgba(255, 255, 255, .76);
 font-size: .84rem;
 line-height: 1.6;
}

.catalogo-vuoto {
 display: block;
 margin: 24px 0;
 padding: 20px;
 border: 1px solid rgba(255, 241, 173, .26);
 border-radius: 14px;
 background: rgba(255, 255, 255, .08);
 color: #fff1ad;
 text-align: center;
}

.vetrina-card__header {
 margin-bottom: 14px;
}

.vetrina-card__categoria {
 display: inline-block;
 padding: 6px 10px;
 border-radius: 999px;
 background: rgba(123, 36, 28, .09);
 color: #7b241c;
 font-size: .72rem;
 font-weight: 800;
 letter-spacing: .08em;
 text-transform: uppercase;
}

.vetrina-card__body {
 display: flex;
 flex: 1;
 flex-direction: column;
}

.vetrina-card__descrizione {
 flex: 1;
}

.vetrina-card__actions {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 16px;
 margin-top: 20px;
}

 .vetrina-card__actions .btn-pagina {
  margin-top: 0;
 }

 .vetrina-card__actions .link-approfondisci {
  font-weight: 700;
 }

@media (max-width: 700px) {

 .catalogo-toolbar {
  align-items: stretch;
  flex-direction: column;
  padding: 18px 16px;
 }

 .catalogo-filtro {
  width: 100%;
 }

 .catalogo-toolbar-note {
  max-width: none;
 }

 .vetrina-card__actions {
  align-items: stretch;
  flex-direction: column;
 }

  .vetrina-card__actions .btn-pagina,
  .vetrina-card__actions .link-approfondisci {
   width: 100%;
   box-sizing: border-box;
   text-align: center;
  }
}

/* ============================================================
   MILESTONE 6 - UX, RESPONSIVE E ACCESSIBILITA COMMERCIO
   ============================================================ */
.commerce-card {
 width: 100%;
}

.commerce-card :where(a, button, input, select, textarea):focus-visible {
 outline: 3px solid #fff1ad;
 outline-offset: 3px;
}

.commerce-btn-primary,
.commerce-btn-secondary,
.btn-pagina {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 line-height: 1.25;
}

.checkout-field select,
.checkout-field textarea,
.catalogo-filtro select,
.campo-commerce {
 font-size: 16px;
}

.checkout-payment-list label,
.checkout-consent label {
 cursor: pointer;
}

.checkout-security {
 display: flex;
 align-items: flex-start;
 gap: 10px;
}

.errore-commerce:empty,
.messaggio-commerce:empty {
 display: none;
}

@media (max-width: 980px) {
 .checkout-layout {
  grid-template-columns: 1fr;
 }

 .checkout-summary {
  position: static;
 }
}

@media (max-width: 760px) {
 .commerce-shell {
  width: 100%;
 }

 .commerce-card {
  padding: 22px 16px;
  border-radius: 18px;
 }

 .commerce-heading {
  align-items: flex-start;
  font-size: clamp(1.45rem, 7vw, 1.9rem);
 }

 .checkout-main,
 .checkout-summary {
  padding: 20px 16px;
  border-radius: 16px;
 }

 .checkout-grid {
  grid-template-columns: 1fr;
 }

 .checkout-field-full {
  grid-column: auto;
 }

 .commerce-actions {
  align-items: stretch;
  flex-direction: column;
 }

 .commerce-actions .commerce-btn-primary,
 .commerce-actions .commerce-btn-secondary,
 .checkout-summary .commerce-btn-primary {
  width: 100%;
 }

 .commerce-table-wrap {
  margin-inline: -4px;
  scrollbar-width: thin;
  scrollbar-color: #a66e2b #fff9ed;
 }

 .tabella-commerce th,
 .tabella-commerce td {
  padding: 14px 12px;
 }

 .riepilogo-carrello {
  width: 100%;
  padding: 19px 17px;
 }
}

@media (max-width: 480px) {
 .commerce-heading .commerce-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
 }

 .checkout-section-title {
  font-size: 1.35rem;
 }

 .riepilogo-carrello p,
 .totale-checkout {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
 }
}