:root .extras-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; align-items: stretch; padding: 0px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 0px;}
:root .extra-check{position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0px; margin: 0px; padding: 8px 8px 10px; min-height: 104px; height: 100%; box-sizing: border-box; color: rgb(255, 255, 255); font-weight: 700; font-size: 0.78rem; line-height: 1.2; text-align: center; cursor: pointer; user-select: none; background: rgba(255, 255, 255, 0.07); border: 1.5px solid rgba(220, 230, 240, 0.35); border-radius: 12px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;}
:root .extra-check:hover{border-color: rgba(200, 150, 60, 0.55); background: rgba(200, 150, 60, 0.1); transform: translateY(-1px);}
:root .extra-check.sel,:root  .extra-check:has(.extra-active-check:checked){background: rgba(200, 150, 60, 0.24); border-color: var(--gold); box-shadow: rgba(200, 150, 60, 0.3) 0px 0px 0px 2px, rgba(200, 150, 60, 0.14) 0px 4px 12px; color: rgb(255, 255, 255);}
:root .extra-check .extra-active-check{position: static !important; opacity: 1 !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0px !important; padding: 0px !important; clip: auto !important; pointer-events: auto !important; flex: 0 0 18px !important; border: 2px solid rgb(213, 177, 95) !important; border-radius: 50% !important; background-color: rgba(255, 255, 255, 0.16) !important; box-shadow: none !important;}
:root .extra-check .extra-active-check:checked{background-color: var(--gold) !important; border-color: rgb(255, 242, 189) !important; box-shadow: rgb(13, 61, 115) 0px 0px 0px 3.5px inset, rgba(200, 150, 60, 0.25) 0px 0px 0px 2px !important;}
:root .extra-check.disab{opacity: 0.42; cursor: not-allowed; transform: none !important; box-shadow: none !important;}
:root .extra-check.disab:hover{border-color: rgba(220, 230, 240, 0.35); background: rgba(255, 255, 255, 0.07); transform: none;}
:root .extra-check.disab input{cursor: not-allowed;}
:root .extra-check .extra-txt{display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; width: 100%; min-height: 100%; height: 100%; box-sizing: border-box;}
:root .extra-check .extra-head{display: flex; align-items: center; gap: 7px; width: 100%; min-height: 36px;}
:root .extra-check .extra-nome{display: block; font-weight: 700; line-height: 1.2; flex: 1 1 auto; min-width: 0px; text-align: left;}
:root .extra-check .extra-nome.extra-nome-lunga{font-size: 0.7rem !important; line-height: 1.12;}
:root .extra-check .extra-nome.extra-nome-molto-lunga{font-size: 0.64rem !important; line-height: 1.1;}
:root .extra-check .extra-bottom{display: flex; align-items: center; justify-content: center; width: 100%; margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(224, 174, 63, 0.28);}
:root .extra-check .extra-prezzo{display: block; flex: 0 0 auto; margin: 0px 0px 0px auto; padding: 0px; font-size: 1.05rem; font-weight: 700; color: rgb(159, 214, 122); letter-spacing: 0.01em; line-height: 1.15; white-space: nowrap;}
:root .extra-mode-controls{display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-width: 0px; flex-wrap: nowrap;}
:root .extra-mode-choice{align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; display: inline-flex !important; margin: 0px !important; color: rgb(241, 246, 250) !important; font-size: 0.82rem !important; font-weight: 700 !important;}
:root .extra-mode-choice .extra-mode-radio{width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; max-width: 17px !important; max-height: 17px !important; margin: 0px !important; flex: 0 0 17px !important;}
:root .extra-mode-choice:has(.extra-mode-radio:disabled){opacity: 0.45; cursor: default;}
:root .extra-qty-input{width: 56px !important; min-width: 56px !important; max-width: 56px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0px !important; padding: 2px 5px !important; box-sizing: border-box !important; border: 1px solid rgba(200, 150, 60, 0.85) !important; border-radius: 6px !important; background: rgb(255, 255, 255) !important; color: rgb(18, 61, 109) !important; font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; box-shadow: none !important;}
:root .extra-check:not(.sel):not(:has(.extra-active-check:checked)){opacity: 0.62; filter: saturate(0.45);}
:root .extra-check .extra-incluso{display: block; font-size: 0.68rem; font-weight: 600; opacity: 0.9; margin-top: 4px;}
@media (max-width: 600px){:root .extras-grid{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px 8px; padding: 0px; align-items: stretch;}
:root .extra-check{font-size: 0.82rem; min-height: 108px; padding: 8px 10px 10px;}
:root .extra-check .extra-nome{font-size: 0.82rem;}
:root .extra-check .extra-prezzo{display: block !important; margin: 0px !important; padding: 0px !important; font-size: 1.05rem !important; font-weight: 700 !important; color: rgb(159, 214, 122) !important; line-height: 1.15 !important;}}
@media (min-width: 601px){:root .extras-grid .extra-check{min-height: 104px; padding: 8px 8px 10px;}
:root .extras-grid .extra-check .extra-prezzo{padding: 0px;}}
:root  .extra-check:not(.sel):not(:has(.extra-active-check:checked)){background: rgba(26, 71, 122, 0.353); border: 1px solid rgba(167, 197, 221, 0.443); box-shadow: none;}
:root  .extra-check.sel,:root  .extra-check:has(.extra-active-check:checked){background: rgba(200, 150, 60, 0.24); border: 1px solid var(--gold); box-shadow: rgba(200, 150, 60, 0.3) 0px 0px 0px 2px, rgba(200, 150, 60, 0.14) 0px 4px 12px; color: rgb(255, 255, 255);}
:root .extras-grid .extra-check:not(.sel):not(:has(.extra-active-check:checked)){background:rgba(255,255,255,.07);border-color:rgba(220,230,240,.35);box-shadow:none}
:root .extras-grid .extra-nome{width:auto;overflow-wrap:anywhere}
:root .extras-grid .extra-bottom{gap:0}
@media(max-width:480px){:root .extras-grid .extra-mode-controls{gap:clamp(4px,2vw,14px)}}