body.cart {
  &::before {
    content: "";
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: none;
    opacity: 0;
    background: rgba(25, 25, 30, 0.75) url(/images/loader-transp.png) no-repeat
      50% 50% / 10vw auto;
    transition:
      opacity 0.5s,
      display 0.5s allow-discrete;
  }

  &[aria-busy="true"] {
    &::before {
      display: block;
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }
  .cart__cnt,
  #main-title {
    min-inline-size: 100%;
  }

  [aria-label="breadcrumbs"] {
    margin-block-end: 0;
  }
}

main {
  padding-block-end: 0;
}

#content-area {
  /* overflow: clip; */
  background: linear-gradient(
    to bottom,
    var(--color-bg-menu) 0,
    var(--color-bg-menu) 6rem,
    var(--color-white) 15rem
  );
}

main:has(.cart__cnt) {
  min-inline-size: calc(100dvi - 3rem);

  nav[aria-label="breadcrumbs"] small {
    display: none;
  }

  h1 {
    text-align: center;
  }

  h1,
  h2,
  h3 {
    small {
      font-weight: 400;
      opacity: 0.8;

      * {
        font-style: normal;
        font-weight: inherit;
      }

      em {
        text-decoration: dashed underline 1px;
        text-underline-offset: 0.25rem;
      }
    }
  }

  h1 small {
    display: block;
    font-size: 50%;
    text-transform: uppercase;
  }
  h3 small {
    font-size: 75%;
  }
}

@media (width >= 75rem) {
  .open__dialog__side {
    display: none;
  }
}

@media (width < 75rem) {
  #--dialog__side {
    display: none;
  }

  main:has([aria-controls="dialog__side"][aria-expanded="true"])
    #--dialog__side {
    display: block;
  }
}

.cart__cnt {
  background: var(--color-bg-menu);
  border-radius: 1rem;
  padding: 1rem;
  inline-size: 100%;
  &:has(> :last-child:nth-child(2)) {
    min-block-size: calc(100dvb - 16rem);
    display: grid;

    @media (width >= 72rem) {
      grid-template-columns: 5fr 2fr;
    }
  }

  .cart__nocartselected {
    font-size: 1.6rem;
    ltext-align: center;
    color: var(--color-lightblue);
    text-transform: uppercase;
    font-weight: 400;
    margin: 2.5rem 2.5rem;
    letter-spacing: 1px;
    max-inline-size: 40ch;
    text-wrap: pretty;

    small {
      color: var(--color-border-dark);
      text-transform: none;
      letter-spacing: 0;
      font-size: 75%;
      font-weight: 300;
      line-height: 1.5;
      display: block;
    }

    :any-link {
      color: var(--color-lightblue);
      font-weight: 400;
    }
  }

  .cart__nocartselected--notvalid {
    text-align: center;
    margin-inline: auto;
  }

  .cart__viewtype {
    margin: 1.5rem 0.75rem 1.5rem 1.5rem;
    float: right;
    display: flex;
    gap: 1rem;
    padding: 0.25rem;

    a,
    a:link,
    a:visited {
      background: transparent;
      inline-size: 3rem;
      padding: 0.5rem;
      aspect-ratio: 1;
      border-radius: 0.5rem;
      box-shadow: var(--shadow-small);
      color: var(--color-lightblue);
      border: 1px var(--color-border) solid;

      &[aria-current="location"] {
        box-shadow: none;
        background: var(--color-white);
        transform: translateY(2px);
        box-shadow: none;
        border: 1px var(--color-border) solid;
        border-left-width: 1px;
        border-top-width: 1px;
        box-shadow: inset 1px 1px 2px hsla(220, 5%, 64%, 0.5);
        border-block-start-color: var(--color-border-dark);
        border-inline-start-color: var(--color-border-dark);
      }
    }

    a svg {
      stroke: var(--color-lightblue);
      stroke-width: 4px;
      fill: none;
      display: block;
      inline-size: 100%;
      aspect-ratio: 1;
    }
  }

  .cart__main {
    background: var(--color-white);
    border-radius: 0.5rem;
    padding-inline: 0.25rem;
    color: var(--color-darkblue);
    container: cart / inline-size;
    overflow: clip;
    padding-block-end: 0rem;
    @media (width < 72rem) {
      margin-bottom: 3rem;
    }
  }

  .cart__side {
    border-radius: 0.5rem;

    @media (width >= 72rem) and (width < 84rem) {
      .numart {
        display: none;
      }
    }

    @media (width >= 72rem) {
      padding: 0 0 0 1rem;
    }

    h2 {
      background: var(--color-white);
      margin-block-start: 0;
      &:not(:first-of-type) {
        margin-block-start: 3rem;
      }
    }

    .noavail {
      margin-block: 1.5rem;
      padding: 0;
      font-style: italic;
    }

    table {
      max-inline-size: 100%;
      margin-block: 1.5rem;
      border-collapse: collapse;

      caption {
        margin-block-end: 1.5rem;
      }

      :where(td, th) {
        padding: 0 0.5rem 0 0;
        margin: 0;

        &:last-child {
          min-inline-size: 7rem;
          white-space: nowrap;
        }
      }

      :where(td, th) {
        color: var(--color-darkblue);
        &:nth-child(1) {
          padding-inline-start: 0.5rem;
        }
        &:nth-child(3):not(.actions) {
          text-align: center;

          @media (width >= 72rem) and (width < 84rem) {
            display: none;
          }
        }
      }

      th {
        text-align: left;
        font-weight: 500;
        padding-block-end: 0.5rem;
        border-bottom: 1px solid var(--color-border);

        &:not(.no-sort) {
          button::after {
            content: ""/"not sorted";

            inline-size: 1rem;
            background-image:
              url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"><path d="M2 10L 10 2L18 10" fill="none" stroke="%23526790" stroke-width="3"/></svg>),
              url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"><path d="M2 2L 10 10L18 2" fill="none" stroke="%23526790" stroke-width="3" /></svg>);
            background-size: auto 0.5rem;
            background-repeat: no-repeat;
            background-position:
              50% 15%,
              50% 85%;
            line-height: 1;
            opacity: 0.45;
            margin-inline-start: auto;
          }

          &[aria-sort="ascending"] button::after {
            content: ""/"ascending order";
            background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"><path d="M2 10L 10 2L18 10" fill="none" stroke="%23526790" stroke-width="3"/></svg>);
            background-position: 50% 15%;
            opacity: 1;
          }

          &[aria-sort="descending"] button::after {
            content: ""/"descending order";
            background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"><path d="M2 2L 10 10L18 2" fill="none" stroke="%23526790" stroke-width="3" /></svg>);
            background-position: 50% 85%;
            opacity: 1;
          }
        }
      }

      tbody {
        font-size: 0.92rem;
      }

      button {
        background: none;
        border: 0;
        font: inherit;
        padding: 0;
        line-height: 1.33;
        inline-size: 2.75rem;
        cursor: pointer;
        padding: 0.25rem 0;
      }

      th button {
        inline-size: 100%;
        text-align: left;
        display: flex;
        gap: 0.5rem;
        align-items: stretch;
        color: inherit;
        border-radius: 0.25rem;

        &:focus {
          outline: 2px solid var(--color-lightblue) !important;
        }
      }

      .actions button {
        padding: 0.5rem;
        aspect-ratio: 1;
        color: inherit;
        border-radius: 0.5rem;
        &:focus {
          outline-offset: -0.25rem;
          color: var(--color-lightblue);
        }

        &[aria-disabled="true"] {
          svg {
            opacity: 0.5;
          }
          cursor: default;
        }

        svg {
          pointer-events: none;
        }

        svg:has([href="#icon-clone"]) {
          fill: none;
          stroke-width: 3px;
          stroke: var(--color-lightblue);
        }

        svg:has([href="#icon-pencil"]) {
          fill: var(--color-lightblue);
          stroke-width: 9px;
          stroke: var(--color-lightblue);
        }

        svg:has([href="#icon-restore"]) {
          fill: var(--color-lightblue);
        }

        svg {
          max-inline-size: 100%;
          aspect-ratio: 1;
          display: block;
        }
      }

      tr > *:last-child {
        text-align: right;
      }

      :any-link {
        color: var(--color-lightblue);
        font-weight: 400;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: block;
        word-spacing: 0.25rem;
        inline-size: max(9rem, 9vw);
        text-transform: uppercase;
      }

      [aria-selected] {
        background: var(--color-white);
        font-weight: 600;

        span {
          font-weight: 400;
        }

        :any-link {
          text-decoration: none;
          font-weight: 600;

          &::before {
            content: ""/"selezionato";
            display: inline-block;
            vertical-align: middle;
            margin-inline-end: 0.25rem;
            aspect-ratio: 1;
            block-size: 0.65lh;
            transform: rotateZ(-90deg) translateX(2px);
            background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 12"><path d="M2 2L 10 10L18 2" fill="%23526790" stroke="%23526790" stroke-width="1" /></svg>);
            background-position: 50% 0;
            background-repeat: no-repeat;
          }
        }
      }
    }

    #removeditems {
      :is(th, td):not(:last-child) {
        padding-inline-end: 1.25rem;
      }

      :is(th, td):last-child {
        min-inline-size: 0;
      }
    }
  }

  .cart__funcmodel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;

    li {
      flex: 1 1 100%;
    }

    button {
      inline-size: 100%;

      &[aria-disabled="true"] {
        opacity: 0.6;
      }
    }
  }

  .importcreate {
    p {
      font-size: 1rem;
      font-style: italic;
      margin-block-end: 1.5rem;
    }

    .fld {
      display: flex;
      justify-content: end;
      gap: 1rem;
    }
  }

  table {
    inline-size: 100%;

    caption {
      text-align: left;
      font-size: 1rem;
    }
  }

  dialog#dialog-voucher {
    position: static;
    border: 0;
    margin: 0;
    padding-inline: 0;
    inline-size: 100%;

    &:focus {
      outline: none;
    }

    form {
      inline-size: 100%;
    }

    ul,
    li {
      display: block;
    }

    input {
      inline-size: 19ch;
    }

    fieldset {
      align-items: center;
      justify-content: space-between;
      @container (width > 32rem) {
        justify-content: end;
      }
    }

    label {
      flex: 1 1 100%;
    }
  }

  dialog:not(#dialog-voucher):not(#dialog__side) {
    padding: 0;
    background: var(--color-paleblue);
    inline-size: min(96%, 40rem);
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid var(--color-lightblue);
    animation: fadeOut 0.5s forwards;
    transition:
      display 0.5s allow-discrete,
      overlay 0.5s allow-discrete;

    &[open] {
      animation: fadeIn 0.5s forwards;

      &::backdrop {
        animation: backdropFadeIn 0.5s forwards;
      }
    }

    &::backdrop {
      background: rgba(25, 25, 30, 0.75);
      animation: backdropFadeOut 0.5s forwards;
    }

    h3,
    h4 {
      margin-block-start: 0;
      display: block;
      padding: 1.5rem;
      inline-size: 100%;
      font-size: 1.25rem;
      border-bottom: 1px solid var(--color-border);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.1rem;
      word-spacing: 0.25rem;
      line-height: 1.33;
      color: var(--color-lightblue);
    }

    p:not(.visually-hidden) {
      color: var(--color-text);
      padding-block-end: 0 !important;
      align-self: center;
    }

    .formgen {
      padding: 0.5rem 1.5rem 2rem;

      overflow: auto;

      li:not(.formgen__choice) {
        grid-template: repeat(2, auto) / 10rem minmax(0, 1fr) !important;
      }

      li:is(.formgen__choice) {
        gap: 0 !important;
        --w: 10rem;
        --row: 1 !important;
        grid-template: repeat(1, auto) / var(--w) fit-content(0) fit-content(0) !important;

        /* @media (width >= 48rem) { --w: 150px;} */
        label:not(:last-of-type) {
          margin-inline-end: 2rem;
        }
      }

      .formgen__choice #desc-tipo_cart {
        _grid-area: 1 / 1 / 2 / 3;
        padding: 0.75rem 0 !important;
      }
    }

    button {
      min-inline-size: auto !important;
    }

    .dialog-cancel {
      border: 2px solid var(--color-lightblue);
      &:focus {
        outline: 2px solid var(--color-lightblue);
        outline-offset: 2px;
      }
    }

    .dialog-cancel:is(:hover, :focus) {
      background-color: var(--color-bg-menu);
    }

    legend {
      font-weight: inherit !important;
      border: 1px solid var(--color-border);
      border-radius: 0.5rem !important;
      align-items: center;
      gap: 2rem;
      display: flex !important;
      color: var(--color-darkblue);

      svg {
        fill: none;
        inline-size: 10rem;
        block-size: 6rem;
        stroke: currentColor;
        stroke-width: 3px;
        stroke-linejoin: round;
        stroke-linecap: round;
      }
    }

    .liveregion {
      strong {
        display: inline;
      }
    }

    .table,
    fieldset:has(ul.list) {
      max-block-size: min(37dvb, 40rem);
      --padding: 0.5rem;
      padding: var(--padding) 1rem var(--padding) 0;
      overflow: auto;
      overflow-x: clip;
      container-type: block;

      @supports (animation-timeline: scroll()) {
        &::before,
        &::after {
          content: "";
          inline-size: 100%;
          display: block;
          position: sticky;
          z-index: 10;
          pointer-events: none;
          --height: min(8cqi, 1.5rem);
          height: var(--height);
          opacity: 0;
          animation: auto linear to-opaque both;
          animation-timeline: scroll();
        }

        &::before {
          top: calc(var(--padding) * -1);
          margin-bottom: calc(-1 * var(--height));
          animation-range: contain 0 contain var(--height);
          background: radial-gradient(
              farthest-side at 50% 0,
              rgba(25, 25, 30, 0.1),
              rgba(25, 25, 30, 0)
            )
            0 -5px no-repeat;
        }

        &::after {
          bottom: calc(var(--padding) * -1);
          margin-top: calc(-1 * var(--height));
          animation-range: contain calc(100% - var(--height)) contain 100%;
          animation-direction: reverse;
          background: radial-gradient(
              farthest-side at 50% 100%,
              rgba(25, 25, 30, 0.1),
              rgba(25, 25, 30, 0)
            )
            0 calc(100% + 5px) no-repeat;
        }
      }
    }

    ul.list {
      margin: 4px;
      gap: 1rem;
      inline-size: 100%;
    }

    li:has([type="checkbox"]) {
      display: flex;
      position: relative;
      line-height: 2;
      margin-block: 0;
      padding: 0.25rem;

      &:has(input:hover) label,
      label:hover {
        font-weight: 500;
        &::after {
          border: 2px solid var(--color-lightblue);
        }
      }

      &:focus-within {
        outline: 2px solid var(--color-lightblue);
        outline-offset: 0;
        * {
          outline: none;
        }
      }

      label {
        flex: 1;
        align-items: center;
        display: flex;
        cursor: pointer;
        justify-content: space-between;
        padding-inline-end: 0;
        color: var(--color-lightblue);
        transition: font-weight 0.33s;
      }

      label::after {
        content: "";
        border: 1px solid var(--color-border-dark);
        inline-size: 2rem;
        block-size: 2rem;
        padding: 3px;
        box-sizing: border-box;
      }

      &:has(:checked) {
        label::after {
          background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.701 45.7"><path d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z" fill="%231b335f"/></svg>);
          background-repeat: no-repeat;
          background-size: 80% auto;
          background-position: center;
        }
      }

      input {
        right: 0;
        position: absolute;
        inline-size: 2rem;
        block-size: 2rem;
        inset: 0.25rem 0.25rem auto auto;
        opacity: 0;
        cursor: pointer;
        margin: 0;
      }
    }
  }

  .cartwarning {
    padding: 0 0 2rem;
    margin-inline: 1rem;
    border-bottom: 2px dotted var(--color-border);
    margin-block-end: 2rem;
  }

  :has(+ .cartwarning) {
    margin-block-end: 0;
  }

  .products--cartcnt {
    margin: 3rem 0 1.5rem 0;

    .cart__ctas {
      padding: 1rem 1rem 0 1rem;
      position: sticky;
      z-index: 11;
      top: 0;
      margin-block-end: 1rem;
      background: var(--color-white);
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem 1rem;
      justify-content: space-between;

      &::after {
        content: "";
        block-size: 2px;
        display: block;
        flex: 9999 0 100%;

        border-bottom: 2px dotted var(--color-border);
      }

      @media (width < 64rem) {
        position: static;
      }

      @media (width <= 54rem) {
        display: none;
      }

      button {
        transition: all 0.33s;
      }

      [aria-disabled] {
        cursor: not-allowed;
        filter: grayscale(1);
        opacity: 0.6;
      }
    }

    &:not(:has(details)) {
      .cart__ctas {
        margin-block-end: -2px;
      }
      .cart__ctas::after {
        border-bottom: 0;
        border-bottom: 2px dotted var(--color-border);
      }
    }
  }

  :not(summary) + .products--cart {
    margin-inline: 0.25rem;
    &::before {
      border-top: 2px dotted var(--color-border);
      content: "";
      margin-inline: 0.75rem;
      display: block;
    }
  }

  summary + .products--cart {
    li {
      margin-inline: 0;
    }
  }

  .products--cart {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;

    h3 {
      margin-block-end: 0;
    }

    .products__selection {
      grid-area: sel;
      inline-size: 2rem;
      justify-self: center;
      margin-block-start: 0.5rem;

      label {
        position: relative;
        inline-size: 100%;
        aspect-ratio: 1;
        display: block;
      }

      label::after {
        content: "";
        border: 1px solid var(--color-border-dark);
        inline-size: 100%;
        aspect-ratio: 1;
        padding: 3px;
        display: block;
        border-radius: 3px;
        box-sizing: border-box;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
      }

      &:has(:checked) {
        label::after {
          background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.701 45.7"><path d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z" fill="%231b335f"/></svg>);
          background-repeat: no-repeat;
          background-size: 80% auto;
          background-position: center;
        }
      }
      input {
        opacity: 0.001;
        inline-size: 100%;
        aspect-ratio: 1;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        cursor: pointer;
        margin: 0;
      }
    }

    .products__colop {
      display: flex;
      margin: 1rem 0;
      align-items: center;
      gap: 1.5rem;
      color: var(--color-lightblue);
      font-size: 0.92rem;
      img {
        margin: 0;
        aspect-ratio: initial;
        max-inline-size: 5rem;
        border-radius: 5px;
        border: 0.5rem solid var(--color-white);
        outline: 1px solid var(--color-border);
      }
    }

    .products__avl {
      position: static;
      background: none;
      padding: 0;
    }
    .products__delete {
      grid-area: del;
      button {
        background: none;
        border: 0;
        padding: 0.5rem;
        aspect-ratio: 1;
        inline-size: 2.75rem;
        color: #86899e;
        background: transparent;
        transition: all 0.33s;
        cursor: pointer;
        border-radius: 0.25rem;
        transform: translateX(-0.25rem);

        svg {
          display: block;
          fill: currentColor;
          stroke-width: 0;
          stroke: none;
          inline-size: 100%;
          aspect-ratio: 1;
          transition: all 0.33s;
          stroke-linecap: butt;
          stroke-linejoin: miter;
          stroke-miterlimit: 10;
          transform: translateX(1px);
        }
      }
    }

    .products__col1,
    .products__col2 {
      text-align: center;
      align-self: start;
      margin-block-start: 0.25rem;
      color: var(--color-lightblue);

      small {
        white-space: nowrap;
        display: block;
      }
      b {
        font-weight: 500;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
    }

    .products__warning {
      grid-area: war;
    }
    .products__col1 {
      grid-area: col1;
    }
    .products__col2 {
      grid-area: col2;
    }
    .products__photo {
      grid-area: pho;
    }
    .products__body {
      grid-area: bod;
      @media (width < 60rem) {
        border-bottom: 2px dotted var(--color-border);
      }
    }
    .products__availability {
      grid-area: ava;
      align-self: center;
    }
    .products__actions {
      grid-area: act;
    }
    .products__budget {
      grid-area: bdg;

      [data-action] {
        border: 0;
        padding: 0;
        background-color: transparent;
        text-decoration: underline;
        color: var(--color-lightblue);
        text-transform: uppercase;
        font-size: 0.8rem;
        cursor: pointer;
      }
    }

    .products__photo {
      padding-block-start: 0;
      font-size: 0;
      /*align-self: center;*/
      background-color: transparent;
      padding: 0;
      img {
        margin: 0;
        max-inline-size: 100%;
      }
    }

    article.imgerror {
      img {
        visibility: hidden;
      }

      .products__photo {
        background: var(--color-white) url(/icon-proced-192.png) 50% 50%
          no-repeat;
        background-size: 90% auto;
      }
    }

    article {
      display: grid;
      gap: 1rem 1rem;
      padding-block: 1rem;

      @media (width < 60rem) {
        .products__selection,
        .sortable__handle {
          display: none;
        }

        grid-template-columns: 10rem 3rem 2fr 2fr 3rem;
        grid-template-areas:
          "pho ava ava ava del"
          "pho bod bod bod bod"
          "act col1 col1 col2 col2"
          "bdg . war war .";
      }

      @media (width >= 60rem) {
        @container (width >= 30rem) {
          .products__availability {
            padding-block-end: 0.5rem;
            border-bottom: 2px dotted var(--color-border);
          }

          grid-template-columns: 3rem 6rem 3fr 3rem 2fr 2fr 3rem;
          grid-template-areas:
            "sel pho bod bod bod bod del"
            "sel pho bod bod bod bod  ."
            ".  pho ava ava ava ava ava"
            "act act act col1 col1 col2 col2"
            "bdg bdg bdg . war war .";

          &:has(.sortable__handle) {
            grid-template-areas:
              "sel pho bod bod bod bod del"
              "sel pho bod bod bod bod ."
              ".  pho ava ava ava ava ava"
              "sor . act col1 col1 col2 col2"
              ". . bdg . war war .";
          }

          &.products--readonly {
            grid-template-columns: 6rem 3fr 3rem 2fr 2fr 3rem;
            grid-template-areas:
              "pho bod bod bod bod bod"
              "pho bod bod bod bod bod"
              "pho ava ava ava ava ava"
              ". act col1 col1 col2 col2"
              ". bdg . . . .";

            &:has(.sortable__handle) {
              grid-template-areas:
                "pho bod bod bod bod bod"
                "pho bod bod bod bod bod"
                "pho ava ava ava ava ava"
                ". act col1 col1 col2 col2"
                ". bdg . . . .";
            }
          }
        }
      }

      .products__actions {
        align-self: center;
        margin-block-start: 0;
      }

      @container (width >= 60rem) {
        gap: 0 1rem;

        .products__availability {
          padding-block-end: 0;
          border-bottom: none;
        }

        grid-template-columns: 3rem 6rem 3fr 2fr 1fr 1fr 3rem;
        grid-template-areas:
          "sel pho bod act col1 col2 del"
          "sel pho bod act col1 col2  . "
          "sor pho ava bdg war war  . ";

        &:has(.sortable__handle) {
          grid-template-areas:
            "sel pho bod act col1 col2 del"
            "sel pho bod . col1 col2  . "
            "sor pho ava bdg war war . ";
        }

        &.products--readonly {
          grid-template-columns: 6rem 3fr 2fr 1fr 1fr;
          grid-template-areas:
            "pho bod act col1 col2"
            "pho bod act col1 col2"
            "pho ava bdg war war";

          &:has(.sortable__handle) {
            grid-template-areas:
              "pho bod act col1 col2"
              "pho bod . col1 col2"
              "pho ava bdg col1 col2";
          }
        }

        .products__budget {
          place-self: center;
          transform: translateY(-2px);
        }

        .products__selection,
        .products__delete,
        .products__actions {
          margin-block-start: 0.5rem;
          align-self: start;
          justify-self: center;
        }
      }
    }

    li {
      position: relative;
      will-change: transform;
      background: var(--color-white);
      z-index: 1;
      margin-inline: 0.75rem;

      &:nth-last-child(2n - 1) {
        background: #fbfcff;
      }

      border-bottom: 2px dotted var(--color-border);

      &:is(.drag--active) {
        opacity: 0.25;
        cursor: grab;
      }

      &:is(.keyboard--active) {
        transform: translateX(0.5rem);
        opacity: 1;
        cursor: grab;
        z-index: 1000;
        box-shadow: var(--shadow);
        background: var(--color-bg-menu);
        border: 1px solid var(--color-border);
      }

      &:is(.is-idle) .drag-handle {
        cursor: grab;
      }

      &:is(.is-idle) {
        transition: 0.25s ease transform;
      }

      &:is(.is-draggable),
      &:is(.is-draggable) .drag-handle {
        cursor: grabbing;
      }

      &:is(.is-draggable) {
        z-index: 1000;
      }
    }

    input[aria-hidden="true"] {
      caret-color: transparent;
    }

    form:has(input[readonly]) {
      opacity: 0.6;
      filter: grayscale(1);
      pointer-events: none;
    }

    .products__delete {
      margin-block-start: 0;
      align-self: center;
    }

    .sortable__handle {
      inline-size: 2.5rem;
      aspect-ratio: 1;
      text-align: center;
      font-size: 1.5rem;
      user-select: none;
      grid-area: sor;
      align-self: center;
      place-self: center;

      &.sortable__handle--pointer {
        position: relative;
        z-index: 20;
        cursor: grab;
      }

      &.sortable__handle--keyboard {
        z-index: 1;
        padding: 1px;
      }

      button {
        border: 0;
        inline-size: calc(2.4rem - 2px);
        line-height: 1;
        aspect-ratio: inherit;
        user-select: none;
        font-size: inherit;
        text-align: center;
        background: none;
        color: #86899e;
        border-radius: 0.25rem;
        padding: 0;
      }
    }

    [role="group"] input {
      font-size: 1rem;
    }
  }

  details {
    margin-inline: 1rem;

    &:not(:last-of-type) {
      margin-block-end: 0.75rem;
    }
    summary {
      display: flex;
      cursor: pointer;
      position: relative;
      z-index: 2;
      letter-spacing: 1px;
      background: var(--color-bg-menu);
      border-radius: 0.5rem;
      border: 1px solid var(--color-border);
      padding-inline-end: 0.75rem;

      &:focus {
        z-index: 11;
      }

      h3 {
        margin: 0;
        padding: 0.75rem 2rem 0.75rem 0.75rem;
        flex: 1;
        font-size: 1rem;
        display: flex;

        small {
          align-self: center;
          margin-inline-start: auto;
        }
      }

      svg {
        inline-size: 1.75rem;
        aspect-ratio: 1;
        fill: none;
        stroke: var(--color-lightblue);
        pointer-events: none;
        transform: rotateZ(-90deg);
        transition: all 0.33s 0s;
      }
    }

    &[open] {
      summary svg {
        transform: rotateZ(0deg);
      }
    }
  }

  .dialog__budget {
    table {
      max-inline-size: 100%;
      border-spacing: 0;
      border-collapse: collapse;
    }

    .table {
      margin-block-end: 3rem;
      position: relative;
      padding-block-start: 0 !important;
    }

    th {
      font-weight: 500;
      color: var(--color-lightblue);
      padding-block-end: 1rem !important;
    }

    td {
      border-bottom: 1px dotted var(--color-border);
    }

    th {
      position: sticky;
      top: 0;
      z-index: 3;
      background: var(--color-paleblue);
      -box-shadow: var(--shadow-small);
    }

    :is(td, th) {
      padding: 0.5rem;
      color: var(--color-lightblue);
      &:nth-child(2) {
        inline-size: 8rem;
        text-align: right;
      }
    }
  }
}

@keyframes to-opaque {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    translate: 0 -2rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 0 3rem;
  }
}

@keyframes backdropFadeIn {
  from {
    background: rgba(25, 25, 30, 0);
  }
  to {
    background: rgba(25, 25, 30, 0.75);
  }
}

@keyframes backdropFadeOut {
  from {
    background: rgba(25, 25, 30, 0.75);
  }
  to {
    background: rgba(25, 25, 30, 0);
  }
}

@keyframes slideIn {
  from {
    transform: translate(100%);
  }
  to {
    transform: translate(0%);
  }
}

@keyframes slideOut {
  from {
    transform: translate(0%);
  }
  to {
    transform: translate(100%);
  }
}

.cart__search {
  padding: 1rem;
  background: linear-gradient(
    to left,
    var(--color-bg-menu),
    var(--color-bg-menu)
  );
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-small);
  margin-inline: 1rem;

  .fld:has(> button) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;

    label {
      padding-inline-end: 0;
      flex: 0 1 auto;
    }

    #desc-cerca-carrello {
      padding: 0;
      font-style: italic;
      order: 3;
      color: var(--color-border-dark);

      @container (width > 50rem) {
        order: 10;
        margin: 1rem 0 0 0;
      }
    }

    input {
      flex: 1 0 70%;
      box-shadow: inset 0 0 0 100vw var(--color-white);
      transition: box-shadow 0.5s;
      @container (width > 50rem) {
        flex: 1;
        max-inline-size: 25rem;
      }
    }

    button.cta {
      line-height: 1.38;
      justify-self: flex-end;
      min-inline-size: min(6rem, 100%);

      &:first-of-type {
        margin-inline-start: auto;
      }

      &[type="reset"] {
        border: 1px solid;

        &:focus {
          outline-offset: 2px;
        }
      }
    }

    #desc-cerca-carrello {
      padding: 0;
      font-style: italic;
    }
  }
}

.cart__main:has(mark) {
  .products--cart li:not(:has(mark)),
  details:not(:has(mark)) {
    display: none;
  }

  #cart__search input {
    box-shadow: inset 0 0 0 100vw transparent;
    padding-inline-end: 3rem;
    background: var(--color-palegreen)
      url(data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M3 24L21 42L45 6" stroke-width="8" stroke="%2333754f" fill="none" /></svg>);
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: center right 0.5rem;
  }

  mark {
    transition: transform 0.33s;
    transform: scale(1.1);
    background: var(--color-palegreen);
    padding: 0.1rem;
    border: 1px var(--color-border) solid;
    border-radius: 0.25rem;
    display: inline-block;
    font-weight: 600;
    color: var(--color-darkblue);

    @starting-style {
      transform: scale(1);
    }
  }
}

#btt-multiple-delete {
  display: flex;
  gap: 0.5rem;
  svg {
    fill: currentColor;
    inline-size: 1.25rem;
    aspect-ratio: 1;
  }

  span:empty {
    display: none;
  }
}
#cart__search--output {
  word-spacing: 0.25rem;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--color-lightblue);
  letter-spacing: 1px;
  margin: 1rem;

  span {
    font-weight: 300;
  }
}

#cart__search--output:has(b:empty) {
  visibility: hidden;
}

.cart__infoprice {
  margin-block-end: 1rem;
}

.cart__carttotal {
  margin: 0 1rem 1.5rem !important;
  @container (width > 42rem) {
    background: url(data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 130"><circle cx="50" cy="50" r="35" stroke="%23526790" stroke-width="30" fill="none" /><path d="M0 50 L30 50 L30 130 L0 130z" fill="%23526790" stroke="none" /></svg>)
      1rem center no-repeat;
    background-size: auto calc(100% - 2rem);
  }

  background-color: var(--color-palegreen);
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: 300;
  display: grid;

  grid-template-columns: auto auto;

  &:has(dt:last-of-type:first-of-type) {
    grid-template-columns: auto auto;
  }

  align-items: center;
  gap: 0 1.5rem;
  @container (width > 32rem) {
    justify-content: end;
  }

  dt {
    font-size: 1rem;
    text-align: right;
    &:last-of-type {
      margin-block-start: 0.5rem;
      padding-block-end: 0;
      color: var(--color-lightblue);
      font-size: 1.4rem;
    }

    @container (width > 32rem) {
      text-align: right;
    }
  }

  dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-lightblue);

    strong {
      display: block;
      display: flex;
      font-weight: 400;
    }

    &:last-of-type {
      padding-block-end: 0;
      margin-block-start: 0.5rem;
      font-size: 1.9rem;

      strong {
        font-weight: 500;
      }
    }

    output {
      flex: 1 0 auto;
      padding-inline-start: 1.5rem;
      text-align: right;
      justify-self: end;
    }

    &.removevoucher {
      grid-area: span 1 / span 2;
      align-self: start;
      justify-self: end;
      font-size: 1rem;
      color: var(--color-pass);
      margin-block-end: 1rem;

      button {
        color: inherit;
      }
    }
  }

  border: 2px dotted var(--color-border);

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
  }

  &:has(output:empty) {
    :is(dt, dd):nth-of-type(-n + 2) {
      display: none;
    }
  }
}

#totalecarrello {
  background: transparent;
  transition: color 0.33s;
  &.updating {
    color: transparent;
    background: url(/images/loader-blue.png) center center no-repeat;
    background-size: 3rem auto;
  }
}

.cart__voucher {
  > p {
    text-align: right;
    max-inline-size: 100% !important;

    button {
      padding: 0;
      text-decoration: underline;
      background: none;
      font: inherit;
      border: 0;
      padding: 0.125rem;
      cursor: pointer;
      font-weight: 400;
      color: var(--color-darkblue);
    }
  }
  #desc-voucher {
    color: var(--color-error);
  }

  label {
    grid-area: lab;
    text-align: right;
  }
  input {
    grid-area: inp;
  }
  button {
    grid-area: btt;
  }
  #desc-voucher {
    grid-area: err !important;
    padding: 0;
    text-align: right !important;
    inline-size: min(100%, 36rem);
    justify-self: end;
  }

  ul,
  li {
    display: contents !important;
  }

  .formgen fieldset {
    display: grid;

    grid-template-areas:
      "lab lab"
      "inp btt"
      "err err";

    @container (width > 42rem) {
      grid-template-areas:
        "lab inp btt"
        "err err err";
      grid-template-columns: 1fr auto auto;
    }
  }
}

h2:has(+ .cart__bdgresiduo) {
  margin-block-end: 0;
}

.cart__bdgresiduo {
  margin: 0 1rem 1rem 1rem;

  &:is(dl) {
    border-top: 2px dotted var(--color-border);
    padding-block-start: 1.5rem;
    display: grid;
    grid-template-columns: minmax(15rem, max-content) minmax(10rem, max-content);
    color: var(--color-darkblue);
  }

  dt {
    font-weight: 300;
  }

  dd {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .lower {
    color: var(--color-error);
  }

  &:is(p) {
    margin-block: 1.5rem 3rem;
    padding-inline: 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
    border: 2px dotted var(--color-border);
    /*background: var(--color-paleorange);*/
  }

  * {
    margin: 0;
    padding: 0;
  }
}

.cart__delete {
  .fld {
    display: flex;
    justify-content: end;
  }
}

.cart__actions {
  max-inline-size: calc(100% + 1rem);
  margin: 3rem calc(var(--space-l) * -1) 0;
  padding: 1.5rem 1.5rem;
  border-top: 2px dotted var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 1rem;
  justify-content: space-between;
  position: sticky;
  inset: auto 0 0 0;
  z-index: 90;
  background: linear-gradient(to top, #ffffff, #ffffff99) repeat-x;
  background: var(--color-palegreen);
  border-top: 2px dotted var(--color-border-dark);

  &:not(:has(form)),
  div:not(:has(form)) {
    display: none;
  }
}

.checkout {
  .cart__actions {
    margin: 3rem 0 0;
  }
}

.cart__actions--auth {
  display: flex;
  gap: 0 1rem;
  justify-content: start;
  flex-wrap: nowrap;
}

.cart__actions--confirm {
  flex: 1 0 auto;

  form {
    display: block;
    margin-inline-start: auto;
    inline-size: fit-content;
  }
}

.cart__actions {
  button {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    line-height: 1.75;
  }

  svg {
    fill: none;
    stroke: var(--color-white);
    block-size: 1rem;
    aspect-ratio: 1;
  }
}

dialog#dialog__side {
  border: 0;
  padding: 0;
  inline-size: 100%;

  &:not([open]) {
    position: absolute;
    top: 0;
    right: 0;
  }

  &[open] {
    background: none;
    position: static;

    @media (width < 72rem) {
      background: var(--color-bg-menu);
      position: fixed;
      z-index: 99;
      bottom: 0;
      right: 0;
      top: 0;
      block-size: 100dvb;
      overflow: auto;
      left: auto;
      transform: translateX(90%);
      border-left: 3px solid var(--color-lightblue);

      padding-inline-start: 1.5rem;
      margin: 0;
      inline-size: 30rem;
    }
  }
}

h2:has(+ .cart__additem) {
  margin-inline: 0.75rem;
  padding-inline: 0;
  margin-block-end: 0;
}

h2 + .cart__additem {
  border-block-start: 2px dotted var(--color-border);
}
.cart__additem {
  padding: 1.5rem 0;
  border-block-end: 2px dotted var(--color-border);
  margin-inline: 1rem;
  border-radius: 0;
  margin-block-end: 1.5rem;
  [name="quantita"] {
    padding-inline: var(--space-xs) !important;
    border-radius: 0 !important;
  }

  .products--cart::before {
    display: none !important;
  }

  form,
  .products--cart {
    padding: 0 1rem;
  }

  svg {
    fill: currentColor;
  }

  .cart__additem__step1 fieldset {
    display: grid;
    grid-template-areas:
      "lab inp btt"
      ". des des";
    grid-template-columns: auto minmax(auto, 20ch) auto;

    gap: 1rem 1.5rem;

    @container (width > 48rem) {
      grid-template-areas: "lab inp btt des";
      grid-template-columns: 10rem minmax(auto, 20ch) auto 1fr;

      gap: 0 1.5rem;
    }

    label {
      grid-area: lab;
      align-self: center;
      padding-inline-end: 0;
    }
    input {
      grid-area: inp;
    }
    button {
      grid-area: btt;
    }
    [aria-live] {
      grid-area: des;
      align-self: center;
      p {
        padding: 0;
      }
      &.found {
        color: var(--color-pass);
      }
      &.notfound {
        color: var(--color-error);
      }
    }

    input,
    input:is(:-webkit-autofill, :autofill) {
      -webkit-text-fill-color: var(--color-lightblue);
      appearance: none;
      outline-color: var(--color-lightblue);
    }
  }

  [role="group"] {
    display: inline-flex;
  }

  .cart__additem__step2 {
    margin-block-start: 1.5rem;
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: 10rem 1fr 1fr;
    grid-template-areas:
      "img des des"
      "img form form";

    &[aria-hidden] {
      display: none;
    }

    .products__body small {
      position: static;
      transform: translateY(0);
    }

    form {
      display: flex;
      grid-area: form !important;
      gap: 1.5rem;
      padding: 0;
      align-self: center;

      svg {
        display: initial;
        aspect-ratio: 1;
      }

      [type="submit"] {
        display: initial;
      }
    }
    .products__photo {
      grid-area: img;
    }
    .products__body {
      grid-area: des;
      display: initial;
      border-bottom: 2px dotted var(--color-border);
      padding-block-end: 0.5rem;
    }
    .quantitygroup {
      grid-area: qta;
      justify-self: start;
      align-self: start;
    }

    @container (width > 54rem) {
      grid-template-columns: 10rem 1fr auto;
      grid-template-areas: "img des form";
      gap: 3rem 1.5rem;

      .products__body small {
        position: absolute;
        transform: translateY(-100%);
      }

      form {
        justify-self: end;
      }

      .products__body {
        border-bottom: 0 !important;
        padding-block-end: 0;
      }

      .products__body,
      .quantitygroup {
        align-self: center;
      }
    }
  }
}

body.checkout,
body.cart {
  position: relative;

  button.iubenda-tp-btn,
  button.iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float] {
    position: absolute !important;
  }
}

.cart mark {
  margin-inline: auto;
  display: block;
  inline-size: fit-content;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* margin-block: -1rem 2rem; */
  margin-block: 0;
  padding: 0.25rem 0.5rem;
  padding: 0 !important;
  background: var(--color-lightblue);
  color: var(--color-white);
}

.cart article .products__body a {
  line-height: 1.5;
}

html:has(.checkoutwrapper) {
  scroll-padding-block-end: 8rem;
}

.checkout {
  .checkoutwrapper {
    display: grid;
    grid-template-columns: 1fr min(100%, 96rem) 1fr;

    > .cnt {
      grid-column: 2 / 3;
    }

    > .cart__actions {
      grid-column: 1 / 4;
    }
  }

  .cart__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;

    > * {
      line-height: 1.75;
    }

    [form],
    a {
      text-align: center;
      justify-content: center;
      border: 1px solid var(--color-lightblue);

      @media (width <= 42rem) {
        display: none;
      }
    }

    &:has(> :only-child) {
      justify-content: end;
    }

    --minsize: 18rem;

    .cta {
      flex: 1;
      min-inline-size: max(var(--minsize), 100%);
    }
    @media (width > 42rem) {
      .cta {
        flex: 0;
        min-inline-size: var(--minsize);
      }
    }
  }

  .formgen {
    background: none;
    padding: 0;
    box-shadow: none;
  }

  h1 {
    text-align: center;
    margin-inline: auto;

    small {
      font-size: 1rem;
      display: block;
      font-weight: 300;
      margin-block-start: 0.5rem;
    }
  }

  .checkout__progress {
    /* background: var(--color-palegreen);
        border: 2px dotted var(--color-border);
       */
    padding: 3rem;
    border-radius: 0.5rem;

    @media (width < 42rem) {
      padding: 1.5rem 0.5rem;
    }

    ul {
      display: flex;
      align-items: end;
      justify-content: space-between;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    li {
      color: var(--color-lightblue);
      flex: 1 1 33.33%;
      text-align: center;
      position: relative;
      padding-inline: 0.5rem;
      padding-bottom: 2rem;

      &:not(:has(a)):not(:has(button))::before {
        background-color: var(--color-pass);
      }

      &::before,
      :is(a, button)::before {
        content: "";
        position: absolute;
        z-index: 2;
        display: block;
        bottom: 0;
        left: 50%;
        inline-size: 2rem;
        aspect-ratio: 1;
        border-radius: 50%;
        transform: translate(-50%, calc(50% - 0.25rem));
        background: var(--color-border);
      }

      /* stato inziale colori progress bar */
      &::after {
        content: "";
        position: absolute;
        z-index: 1;
        display: block;
        bottom: 0;
        left: 0;
        right: 0;
        block-size: 0.5rem;
        background: linear-gradient(
          to right,
          var(--color--before) 0,
          var(--color--before) 50%,
          var(--color--after) 0,
          var(--color--after) 100%
        );
        --color--before: var(--color-border);
        --color--after: var(--color-border);
      }

      &:last-child {
        &::after {
          --color--after: transparent;
        }
      }

      &:first-child {
        &::after {
          --color--before: transparent;
        }
      }

      &:has([aria-current]) {
        &:not(:first-child) {
          &::after {
            --color--before: var(--color-pass);
          }
        }
      }

      &:has(~ li [aria-current]) {
        &::after {
          --color--after: var(--color-pass);
        }

        &:not(:first-child) {
          &::after {
            --color--before: var(--color-pass);
          }
        }
      }
    }

    :is(:any-link, button) {
      color: inherit;
      text-decoration: none;
      padding: 0;
      font: inherit;
      background: none;
      cursor: pointer;
      border: 0;

      &::before {
        z-index: 4;
        background: #e5f0e2;
        outline: 0.6rem solid var(--color-pass);
        outline-offset: -0.6rem;
      }
    }

    [aria-current] {
      pointer-events: none;
      font-weight: 600;
    }
  }

  .checkout__progress__cc {
    display: none;
  }

  &:has(#fld-pagamento-2:checked) {
    .checkout__progress__cc {
      display: initial;
    }
  }

  :is(.checkout__shipping, .checkout__payment) label strong {
    color: var(--color-lightblue);
  }

  .checkout__dest {
    gap: 2.5rem;
    display: flex;

    > * {
      flex: 1;
    }

    @media (width < 64rem) {
      flex-direction: column;
    }

    li[role="option"] {
      padding-inline: 0.5rem !important;
      small {
        vertical-align: baseline;
      }
    }

    p {
      flex: initial;
      padding-block: 0;
    }

    dd {
      word-break: break-word;
      margin-inline-start: 1rem;
      font-variant-numeric: tabular-nums;
    }

    dt:not(:first-of-type) {
      margin-block-start: 1rem;
      padding-block-start: 1rem;
      border-top: 2px dotted var(--color-border);
    }

    dl {
      margin: 0;
      b {
        color: var(--color-lightblue);
      }
    }
  }

  .checkout__dest--address,
  .checkout__dest--note {
    justify-content: start;
  }

  .checkout__dest--note {
    dl {
      fdisplay: grid;
      gap: 0.5rem 1.5rem;
      grid-template-columns: 8rem 1fr;

      @media (width < 64rem) {
        br {
          display: none;
        }
      }
    }
  }

  .checkout__items {
    section {
      background: none;
      display: block;

      > div:not(:first-child) {
        margin-block-start: 3rem;
      }
    }

    .omaggi {
      padding: 1.5rem;
      border-radius: 0.5rem;
      background: var(--color-paleblue);
      border: 2px dotted var(--color-border);
    }

    .congrats {
      align-items: center;
      display: flex;
      p {
        flex: 1;
        font-weight: 300;
        color: var(--color-lightblue);
        font-size: clamp(1.25rem, calc(1.25rem + 0.5vw), 1.75rem);
        padding: 0;
      }

      strong {
        display: block;
        color: var(--color-darkblue);
      }

      svg {
        inline-size: 7rem;
        stroke: var(--color-lightblue);
        transform: rotate(12deg);
        fill: none;
      }
    }

    col:not(.item__name) {
      inline-size: 6rem;
    }
  }

  #bttprint {
    float: right;
    transform: translateY(0.5rem);
    display: flex;
    align-items: center;
    gap: 1rem;
    line-height: 1.65;

    span {
      transform: none;
      @media (width < 40rem) {
        display: none;
      }
    }
    svg {
      inline-size: 1.75rem;
      stroke-width: 1;
      stroke: transparent;
      margin: 0;
      fill: var(--color-white);
    }
  }

  .checkout__omaggi {
    list-style: none;
    margin: 1.5rem 0 0 0;
    border-top: 2px dotted var(--color-border);
    padding: 0;
    gap: 1.5rem;
    display: grid;
    padding: 1.25rem 0;
    grid-template-columns: 1fr 1fr;

    &:has(li:only-child) {
      grid-template-columns: 1fr;
    }

    @media (width < 56rem) {
      grid-template-columns: 1fr;
    }

    p {
      padding: 0;
      flex: 0;
      color: var(--color-lightblue);
    }

    li {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: 8rem auto;
      border: 1px solid var(--color-border);
      background: var(--color-white);
    }

    small {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--color-border-dark);
    }

    figure {
      margin: 0;
      background: var(--color-white);
      padding: 1rem;
      border-radius: 0.5rem;
    }

    figcaption {
      display: grid;
      align-items: center;
      grid-template-columns: 1fr 4rem;
      gap: 1.5rem;
      flex-direction: row;
      padding-inline-end: 1rem;
    }

    img {
      display: block;
      max-inline-size: 100%;
      aspect-ratio: 1;
    }

    .checkout__omaggiqta {
      font-size: 2rem;
      line-height: 1.9;
      font-weight: 500;
      aspect-ratio: 1;
      border-radius: 50%;
      color: var(--color-white);
      color: var(--color-lightblue);
      transform: none;
      text-align: center;

      &::before {
        text-indent: 0.25rem;
        display: inline-block;
        font-size: 60%;
        content: "X" / "";
      }
    }
  }

  .checkout__result {
    font-size: 1.125rem;
    min-block-size: 20rem;
    margin-block: 1rem 5rem;
    border: 2px dotted var(--color-border);
    border-radius: 0.5rem;
    padding: 3rem;
    display: flex;
    margin-inline: auto;
    max-inline-size: min(64rem, 100%);
    justify-content: center;
    align-items: center;
    gap: 2.5rem 5rem;
    flex-direction: column;
    background: linear-gradient(
      to top,
      var(--color-white),
      var(--color-paleblue)
    );

    @media (width >= 64rem) {
      background: linear-gradient(
        to left,
        var(--color-white),
        var(--color-paleblue)
      );
      flex-direction: row;
    }

    > div {
      flex: 1;
    }

    h2 {
      margin-block-start: 0;
      padding-inline: 0;
      border-bottom: 2px dotted;
    }

    svg {
      aspect-ratio: 1;
      inline-size: min(10rem, 100%);
      stroke: hsl(145deg 18% 52%);
      stroke-width: 8;
      --t: 8s;
      animation:
        bump var(--t) linear 1s forwards,
        bump4ever var(--t) linear var(--t) infinite;

      circle {
        fill: var(--color-palegreen);
        stroke-dashoffset: 404;
        stroke-dasharray: 404;

        stroke-width: 4;
        animation: stroke 0.5s linear 0s forwards;
      }

      .check {
        stroke-dashoffset: 250;
        stroke-dasharray: 250;
        animation: stroke 0.5s linear 0s forwards;
      }

      .shine {
        stroke-dashoffset: -20;
        stroke-dasharray: 40;
        animation: shine var(--t) linear 1.5s infinite;
      }
    }

    &:is(.checkout__result--fail) {
      svg {
        stroke: var(--color-error);
      }

      circle {
        fill: var(--color-paleorange);
      }
    }

    strong,
    :any-link {
      color: var(--color-lightblue);
    }

    p {
      word-spacing: 0.15rem;
    }
  }

  .cart__carttotal {
    margin: 1.5rem 0 !important;
    dt,
    dd {
      color: var(--color-lightblue);
      text-align: right;
    }

    @media only screen {
      dd:last-of-type {
        border-top: 2px dotted;
      }
    }
  }

  main section {
    h2 {
      margin-block-start: 0;
      padding-inline: 0;
      border-bottom: 2px dotted;
    }

    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    background: linear-gradient(
      to bottom,
      var(--color-white),
      var(--color-paleblue)
    );
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .combina11y {
      block-size: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      p {
        margin-block-end: 1rem;
      }
    }

    ::-webkit-calendar-picker-indicator {
      filter: brightness(0) saturate(100%) invert(45%) sepia(11%)
        saturate(1765%) hue-rotate(179deg) brightness(95%) contrast(89%);
    }

    #tacounter {
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }

    output:has(#tacounter) {
      color: var(--color-border-dark);
    }

    textarea[name="note"] {
      resize: none;
      block-size: 10rem;
    }

    ul {
      list-style: none;
      padding-inline-start: 1rem;
      label {
        gap: 1rem !important;
      }
    }

    label {
      white-space: normal !important;
    }

    label::before {
      align-self: flex-start;
    }

    span {
      transform: translateY(-0.3rem);
      white-space: normal;
    }

    .greenchoice {
      svg,
      b {
        transition: 0.33s 0s color;
      }

      .noeco {
        opacity: 0.75;
      }
      &:has(input:not(:checked)) {
        svg,
        b {
          color: var(--color-border-dark);
        }
      }
      &:has(input:checked) {
        .noeco {
          display: none;
        }
        svg,
        b {
          color: #49a010;
        }
      }
    }

    .paymentchoice {
      svg,
      b {
        color: var(--color-border-dark);
        transition: 0.33s 0s color;
        fill: var(--color-lightblue) !important;
        stroke: none;
      }
      &:has(input:checked) {
        svg,
        b {
          color: var(--color-lightblue);
        }
      }
    }

    :is(label, .cta) svg {
      inline-size: 3rem;
      vertical-align: top;
      margin-inline-start: 1rem;
      aspect-ratio: 1;
      fill: transparent;
      color: currentColor;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linejoin: round;
      stroke-linecap: round;
      container-type: inline-size;

      text {
        font: 700 7rem "Plus Jakarta Sans";
        stroke: inherit;
        stroke: none;
        stroke-width: 4px;
        fill: currentColor;
      }
    }
  }

  .checkout__insurance {
    display: flex;
    gap: 5rem;
    padding: 1.5rem 0;
    inline-size: min(100%, calc(2rem + 75%));
    margin-inline: auto;

    svg {
      fill: var(--color-darkblue);
      inline-size: 100%;
      display: block;

      .visa,
      .mastercard {
        display: block;
        transform: scale(0.1);
      }
    }
    @media (width < 64rem) {
      div:first-child {
        display: none;
      }
    }
    dl {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-gap: 0;
      margin: 0;

      dt,
      dd {
        display: flex;
        flex-wrap: wrap;
        padding-block: 0.5rem;
        margin: 0;
        align-items: center;
        color: var(--color-lightblue);
      }

      :is(dt, dd):last-of-type {
        border-top: 1px solid var(--color-lightblue);
        font-size: 1.5rem;
        font-weight: 500;
        padding-block-start: 1rem;
        margin-block-start: 1.5rem;
      }

      dd {
        display: flex;

        output {
          display: inherit;
        }
        span {
          text-align: right;
          padding-inline-start: 1.5rem;
          flex: 1;
        }
        padding-inline-start: 1.5rem;
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        color: var(--color-lightblue);
      }
      small {
        font-weight: 300;
        font-size: 65%;
        flex: 1 0 100%;
      }
    }

    > * {
      flex: 1 1 auto;
    }
  }

  #lbl-insurance {
    position: relative;
    inline-size: 2rem;
    block-size: 2rem;
    margin-inline-start: 1.5rem;
    display: inline-block;
    border-radius: 3px;

    input {
      opacity: 0.001;
      inline-size: 100%;
      aspect-ratio: 1;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      cursor: pointer;
      margin: 0;
    }

    &::after {
      content: "";
      border: 1px solid var(--color-border-dark);
      inline-size: 2rem;
      aspect-ratio: 1;
      padding: 3px;
      display: block;
      border-radius: 3px;
      box-sizing: border-box;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
    }

    &:has(:focus) {
      outline: 2px solid;
      outline-offset: 2px;
    }

    &:has(:checked)::after {
      background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.701 45.7"><path d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z" fill="%231b335f"/></svg>);
      background-repeat: no-repeat;
      background-size: 80% auto;
      background-position: center;
    }
  }

  .checkout__pay__insurance {
    display: none;
  }
  .checkout__pay__noinsurance {
    display: block;
  }

  .checkout__insurance:has(:checked) {
    .checkout__pay__noinsurance {
      display: none;
    }
    .checkout__pay__insurance {
      display: block;
    }
  }
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes shine {
  0%,
  2.51% {
    stroke-dashoffset: -40;
  }
  2.5% {
    stroke-dashoffset: 40;
  }
}

@keyframes bump {
  2.5% {
    transform: scale(1);
  }
  6.66%,
  10%,
  100% {
    transform: scale(1.33);
  }
  8.333% {
    transform: scale(1.2);
  }
}

@keyframes bump4ever {
  14.75%,
  19% {
    transform: scale(1.33);
  }
  18.25% {
    transform: scale(1.1);
  }
}