﻿.wndw                                           {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: 5em min(1rem, 5%) 4.5em; box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 100000;}

.wndw:before                                    {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .4s ease-in-out;}

.wndw > .outer                                  {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}

.wndw > div                                     {width: 100%; max-width: 46rem; max-height: calc(100vh - 4rem); background: white; position: relative; border-radius: var(--border-radius); overflow: hidden; top: 5em; z-index: 2; overflow-y: auto; overflow-x: hidden; transition: .4s ease-in-out;}

.wndw > div .overflow                           {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}

.wndw.show                                      {left: 0;}

.wndw.show:before                               {opacity: 1;}

.wndw.show > div                                {top: 0;}

.wndw.show.hide                                 {left: -99999px; transition: left 0s ease-in-out; transition-delay: 0.3s;}

.wndw.show.hide:before                          {opacity: 0;}

.wndw.show.hide > div                           {top: -5em; opacity: 0;}

.wndw .cross                                    {display: block; width: 1.2em; height: 1.2em; font-size: 1em; cursor: pointer; position: absolute; right: 1rem; top: 1rem; z-index: 10002;}

.wndw .cross span                               {display: block; width: 100%; height: 3px; background: #cccccc; border-radius: 2px; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1; transition: .2s ease-in-out;}

.wndw .cross:hover span                         {background: #252525;}

.wndw .cross span:nth-child(1)                  {transform: rotate(45deg);}

.wndw .cross span:nth-child(2)                  {transform: rotate(-45deg);}

.wndw .wndw-content                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1em; font-size: 1rem; padding: 2.6rem max(1.2rem, 9%) max(1rem, 7%); box-sizing: border-box;}

.wndw .wndw-content strong                      {font-weight: 700;}

.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: min(1.7em, calc(1.1em + 2vw)); font-weight: 700; font-family: var(--font2);}

.wndw .wndw-content .title span                 {display: block; font-weight: 400;}

.wndw .wndw-content .text                       {display: block; width: 100%; text-align: center; font-size: 1em; line-height: 1.4em;}

.wndw .wndw-content .flex                       {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.7em; font-size: 0.85rem;}

.wndw .wndw-content .button                     {font-size: 1.1em;}

.wndw .wndw-content .link:after                 {display: none;}



.wndw.send-email > div                          {background: rgb(245,245,245);}

.wndw.send-email .form-item                     {width: 100%;}



.wndw-form-items                                {display: flex; width: 100%; flex-wrap: wrap;}



.wndw-write-review .form-items                  {max-width: 26rem;}

  @media screen and (min-width: 769px)          {

  .wndw-write-review .form-items textarea       {height: 7rem;}

  }


  .review-stars                                                 {display: block; width: 5.5em; aspect-ratio: 5; position: relative; z-index: 2; background: var(--color3); cursor: pointer;

                                                                      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;

                                                                      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 90'%3E%3Cpath d='M72.5,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7-.3.2-.7.3-1,.3s-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM45,1C20.7,1,1,20.7,1,45s19.7,44,44,44,44-19.7,44-44S69.3,1,45,1ZM175,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7s-.7.3-1,.3-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM147.5,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S171.8,1,147.5,1ZM277.5,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7s-.7.3-1,.3-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM250,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S274.3,1,250,1ZM380,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7s-.7.3-1,.3-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM352.5,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S376.8,1,352.5,1ZM482.5,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7-.3.2-.7.3-1,.3s-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM455,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S479.3,1,455,1Z' width='1' height='1' fill='white' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E");                                           

                                                                      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 90'%3E%3Cpath d='M72.5,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7-.3.2-.7.3-1,.3s-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM45,1C20.7,1,1,20.7,1,45s19.7,44,44,44,44-19.7,44-44S69.3,1,45,1ZM175,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7s-.7.3-1,.3-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM147.5,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S171.8,1,147.5,1ZM277.5,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7s-.7.3-1,.3-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM250,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S274.3,1,250,1ZM380,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7s-.7.3-1,.3-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM352.5,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S376.8,1,352.5,1ZM482.5,38.6l-12.5,12.8,2.9,18.1c0,.6-.2,1.3-.7,1.7-.3.2-.7.3-1,.3s-.6,0-.9-.2l-15.4-8.5-15.4,8.5c-.3.1-.5.2-.9.2s-.7-.1-1-.3c-.6-.4-.9-1-.7-1.7l2.9-18.1-12.5-12.8c-.5-.5-.6-1.1-.4-1.8.2-.6.8-1.1,1.4-1.2l17.2-2.6,7.7-16.4c.3-.6.9-1,1.6-1s1.3.4,1.6,1l7.7,16.4,17.2,2.6c.6.1,1.2.6,1.4,1.2h0c.2.6,0,1.3-.4,1.8ZM455,1c-24.3,0-44,19.7-44,44s19.7,44,44,44,44-19.7,44-44S479.3,1,455,1Z' width='1' height='1' fill='white' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E");

                                                                    }

      .review-stars span                                            {display: block; height: 100%; background: var(--color1); position: absolute; left: 0; top: 0; z-index: -1;}



      .stars-select                                                 {display: flex; width: 100%; justify-content: space-between; flex-direction: row-reverse;}

      .stars-select span                                            {display: block; width: 13%; aspect-ratio: 1; background: url("images/2024/star-color1.svg") no-repeat center center; background-size: contain; opacity: 0.13; transition: .15s ease-in-out;}

      .stars-select.editable span                                   {cursor: pointer;}

      .stars-select span.sel,

      .stars-select.editable span:hover,

      .stars-select.editable span:hover ~ span,                 

      .stars-select span.selected ~ span,
      .stars-select span.selected                    {background: url("images/2024/star-color2.svg"); opacity: 1;}



      .reviews                                                      {display: flex; width: 100%; flex-direction: column;}



      .review                                                       {display: flex; width: 100%; flex-direction: column; gap: 0.4em; position: relative;}

      .review:not(:first-child)                                     {padding-top: 1.4em; margin-top: 1.4em; border-top: var(--border);}

      .review .head                                                 {display: flex; width: calc(100% - 5.5em); align-items: center; gap: 0.4em;}

      .review .head > div                                           {display: block;}

      .review .head > div span                                      {display: block; color: var(--color1d);}

      .review .head > div .name                                     {font-size: 0.9em; color: var(--color0); font-weight: 700; margin-bottom: 0.3em;}

      .review .head > div .date                                     {font-size: 0.7em; opacity: 0.5;}

      .review p                                                     {display: block; width: 100%; text-align: left !important; line-height: 1.5;}

      .review .stars-select                                         {width: 5.5em; pointer-events: none; margin-top: 0.2em;}

      .review .stars-select span                                    {width: 16%;}

      .product-detail .reviews-panel                                {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.7em 0.65em;}

      .product-detail .reviews-panel .num                           {display: block; font-size: 1em; color: var(--color0); font-weight: 700;}

      .product-detail .reviews-panel .button-link                   {display: flex; align-items: center; gap: 0.4em; font-size: 0.75em; color: rgb(148, 148, 148); font-weight: 500; text-decoration: underline; cursor: pointer; position: relative; top: -0.03em; transition: .15s ease-in-out;}

      .product-detail .reviews-panel .button-link:hover             {color: rgb(122, 122, 122); text-decoration-color: transparent;}

      .product-detail .reviews-panel .stars                         {font-size: 1em;}

      @media screen and (max-width: 540px)                        {

        .product-detail .reviews-panel                              {font-size: 0.85em;}

      }