:root {
         --ink: #00313C;
         --mid: #80989E;
         --far: #BFCBCE;
         --band: #F6F6F6;
         --teal-a: #008A93;
         --teal-b: #1A6068;

         --slot: clamp(38px, 3.7vw, 46px);
         --comp: clamp(7px, 1.05vw, 14px);
         --band-h: clamp(46px, 4.6vw, 58px);
		  /*
         --f0: clamp(14px, 1.55vw, 20px);
         --f1: clamp(10.5px, 1.08vw, 14px);
         --f2: clamp(9.5px, .92vw, 12px);
        
         --f0: 18px;
         --f1: 14px;
         --f2: 12px;
*/
		--f0: clamp(18px, 1.55vw, 20px);
		--f1: 16px;
        --f2: 14px;
		 
		 --card-r: clamp(16px, 1.9vw, 24px);
         --gap: clamp(12px, 1.9vw, 24px);
      }

      .grid {
         width: 100%;
         max-width: 1180px;
         display: flex;
         gap: var(--gap)
      }

      .group {
         flex: 1 1 0;
         min-width: 0;
         display: flex;
         flex-direction: column;
         gap: clamp(8px, 1vw, 12px)
      }

      .head {
         background: linear-gradient(100deg, var(--teal-a) 0%, var(--teal-b) 100%);
         border-radius: 999px;
         color: #fff;
         text-align: center;
         /*padding: clamp(11px, 1.3vw, 17px) 14px;*/
		 
		 height: clamp(43px, 2.81vw, 54px);
         font-size: clamp(16px, 1.04vw, 20px);
		 display: flex; align-items: center; justify-content: center;
		 
         font-weight: 700;
         letter-spacing: .02em;
         text-transform: uppercase;
         white-space: nowrap;
         /*box-shadow: 0 6px 18px rgba(0, 49, 60, .10);*/
		 margin-bottom: 1rem;
      }

      .card {
         position: relative;
         background: #fff;
         border-radius: var(--card-r);
         padding: 0.8rem;
         box-shadow: 0 0.2rem 2rem 0 rgba(0, 140, 149, .08);
      }

      .band {
         position: absolute;
         left: clamp(10px, 1.2vw, 16px);
         right: clamp(10px, 1.2vw, 16px);
         top: 50%;
         height: var(--band-h);
         transform: translateY(-50%);
         background: var(--band);
         border-radius: clamp(11px, 1.3vw, 16px);
         pointer-events: none;
      }

      .col {
         position: relative;
         height: calc(var(--slot)*5);
         overflow-y: scroll;
         overscroll-behavior: contain;
         scroll-snap-type: y mandatory;
         -webkit-overflow-scrolling: touch;
         touch-action: pan-y;
         -webkit-tap-highlight-color: transparent;
         scrollbar-width: none;
         -ms-overflow-style: none;
         outline: none;
         -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 13%, rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);
         mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 13%, rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);
      }

      .col::-webkit-scrollbar {
         display: none;
         width: 0;
         height: 0
      }

      .col .pad {
         height: calc(var(--slot)*2);
         flex: none
      }

      .item {
         height: var(--slot);
         flex: none;
         scroll-snap-align: center;
         scroll-snap-stop: always;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 0 clamp(4px, .7vw, 12px);
         line-height: 1.14;
         cursor: pointer;
         will-change: transform, opacity;
         -webkit-user-select: none;
         user-select: none;
      }

      .card:has(.disabled) {
         opacity: .5;
         pointer-events: none;
      }

      .swiper-navigation { 
			display: none !important;
				position: relative; width: 100%; display: flex; gap: 1rem; justify-content: center; height: 3rem; margin-top: 0; }

      .picker-prev,
      .picker-next {
         padding: 10px;
		 background: #F2F2F3;
         border-radius: 50%;
		 top: 0 !important;
		 margin-top: 0 !important;
		 width: 3rem !important;
		 height: 3rem !important;
         z-index: 11;
		 position: relative;
      }

      #pickerSwiper  svg {
         fill: #000 !important;
         width: 70%;
         height: 70%;

         path {             color: #000;         }
      }

      .swiper-pagination-bullet-active {
         background: linear-gradient(100deg, var(--teal-a) 0%, var(--teal-b) 100%);
      }

      @media (width > 767px) {
         #pickerSwiper .swiper-wrapper {
            display: flex;
            width: 100%;
            gap: var(--gap);
         }

		.swiper-navigation, 
         .picker-prev,
         .picker-next,
         .swiper-pagination {
            display: none;
         }
      }

      @media (width <=767px) {
         & {
            .group {
               flex: 0 0 auto;
            }

            /*#pickerSwiper {
               width: 100vw;
               margin-left: -16px;
            }*/

         }
      }

@media (max-width:640px) {
         .head {
            white-space: normal;
            letter-spacing: 0
         }
/*
         :root {
            --slot: 34px;
            --band-h: 42px;
            --f0: 13px;
            --f1: 9.5px;
            --f2: 8.5px;
            --comp: 6px
         }*/
		 
	.swiper { flex-direction: column; }
}