 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 :root {
   --shadow-distance: 15px;
   --shadow-blur: 10px;
   --shadow-spread: 5px;
   --shadow-alpha: 0.35;
   --shadow-x: 0px;
   --shadow-y: 0px;
 }

 body,
 html {
   width: 100%;
   height: 100%;
 }

 body {
   font-family: 'Helvetica', Arial, sans-serif;
   font-size: 26px;
   line-height: 32px;
   letter-spacing: 1px;
   word-spacing: -2px;
   background: #DDD;
 }

 main {
   padding: 25px;

 }

 section {
   margin-top: 20px;
 }

 ul {
   margin-left: 20px;
 }

 details:first-of-type {
   margin-top: 20px;
 }

 details:last-of-type {
   margin-bottom: 20px;
 }

 summary {
   cursor: pointer;
 }

 .products {
   display: block;
 }

 .product,
 .product-sold {
   width: 100%;
   margin-bottom: 50px;
 }

 .cart-btn,
 .cart-btn-sold {
   display: inline-block;
   user-select: none;
   cursor: pointer;
 }

 .cart-btn {
   color: #07F;
 }

 .cart-btn-sold {
   color: orangered;
   cursor: default;
 }

 .cart-btn--disabled {
   color: #888;
   cursor: default;
   pointer-events: none;
 }

 .cart-btn span {
   display: inline-block;
   cursor: pointer;
   margin: 0 5px;
   position: relative;
 }

 .cart-btn span.minus {
   top: -0.5px;
 }

 .cart-btn span.plus {
   top: -2px;
 }

 .text {
   position: relative;
 }

 h1,
 h2,
 h3,
 h4 {
   font-size: inherit;
   font-weight: normal;
 }

 h1 {
   margin-bottom: 50px;
 }

 h3 {
   margin-top: 40px;
   margin-bottom: 20px;
 }

 h4 {
   position: absolute;
   top: 0;
   right: 0;
 }

 .scans img {
   display: block;
   margin: 0 auto;
   max-width: 100%;
   max-height: 100vh;
 }

 a {
   color: orangered;
   text-decoration: none;
   cursor: pointer;
 }

 a:hover {
   color: black;
 }

 p+p {
   margin-top: 20px;
 }

 #checkout-container {
   position: fixed;
   bottom: 25px;
   right: 25px;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   z-index: 100;
 }

 #cart-widget {
   width: 150px;
   height: 60px;
   background: #FFF;
   border-radius: 100px;
   text-align: center;
   line-height: 60px;
   cursor: pointer;
   overflow: hidden;
   transition: width 0.5s ease;
   position: relative;
 }

 #cart-widget.expanded {
   width: calc(100vw - 50px);
   cursor: default;
 }

 #cart-widget .cart-summary {
   display: block;
 }

 #cart-widget .shipping-options {
   display: none;
   white-space: nowrap;
   position: absolute;
   left: 20px;
   right: 20px;
   text-align: left;
   top: 0;
   height: 100%;
   line-height: 60px;
 }

 #cart-widget.expanded .cart-summary {
   display: none;
 }

 #cart-widget.expanded .shipping-options {
   display: inline-block;
 }

 #cart-widget .shipping-options label {
   margin-left: 20px;
   font-size: inherit;
   cursor: pointer;
 }

 #cart-widget .shipping-options input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   border: 2.5px solid #000;
   border-radius: 50%;
   margin-top: 17px;
   margin-right: 10px;
   cursor: pointer;
   vertical-align: top;
 }

 #cart-widget .shipping-options input[type="checkbox"]:checked {
   background-color: #000;
 }

 #cart-widget .shipping-options button {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   font-size: inherit;
   font-family: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
   background: none;
   border: none;
 }

 h2 {
   position: absolute;
   left: 400px;
   top: 10px;
   text-align: center;
   background: orangered;
   color: #FFF;
   border-radius: 1px;
   width: 80px;
   height: 45px;
   line-height: 45px;
   transform: rotate(-6deg);
 }

 .product .visual {
   display: flex;
   justify-content: center;
 }

 .product .flip-card {
   display: inline-block;
   perspective: 1200px;
 }

 .product .flip-inner {
   position: relative;
   transform-style: preserve-3d;
   transition: transform 0.6s ease;
   transform: translateZ(0);
 }

 .product .flip-card:hover .flip-inner {
   transform: rotateY(180deg);
 }

 .product .flip-face {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   display: block;
   transform: translateZ(0) scale(1.001);
 }

 .product .flip-front {
   transform: translateZ(0.1px) scale(1.001);
 }

 .product .flip-back {
   transform: rotateY(180deg) translateZ(0.1px) scale(1.001);
 }


 .product .flip-back {
   position: absolute;
   inset: 0;
   transform: rotateY(180deg);
 }

 .product .flip-face img {
   display: block;
   max-width: 100%;
   max-height: 80vh;
   margin: 0;
   border-radius: 2px;
   box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) rgba(0, 0, 0, var(--shadow-alpha));
 }

 @media (hover: hover) and (pointer: fine) {
   .product .flip-card:hover .flip-inner {
     transform: rotateY(180deg);
   }
 }


 @media (hover: none) {
   .product .flip-card:hover .flip-inner {
     transform: none !important;
   }
 }


 @media only screen and (max-width: 992px) {


   body {
     font-size: 22px;
     line-height: 26px;
   }

   .product .flip-face img {
     max-width: 100%;
     max-height: 100%;
     width: 70vw;
   }

   h2 {
     display: none;
   }

   .scans img {
     max-width: 100%;
     max-height: auto;
   }

   .shipping-rate {
     display: none;
   }

   #checkout-container {
     right: calc(50% - 60px);
   }

   #cart-widget {
     width: 120px;
     height: 60px;
     border-radius: 100px;
     cursor: pointer;
     overflow: hidden;
     transition: width 0.5s ease;
     position: relative;
   }

   #cart-widget.expanded {
     width: calc(100vw - 50px);
     cursor: default;
   }

   #checkout-container:has(#cart-widget.expanded) {
     right: 25px;
   }

   .shipping-options label:last-of-type {
     display: none;
   }

   #cart-widget .shipping-options label {
     margin-left: 5px;
   }

   #cart-widget .shipping-options input[type="checkbox"] {
     border: 1.5px solid #000;
     margin-top: 17px;
     margin-right: 10px;
   }

 }
