@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,300;1,400&family=Staatliches&display=swap');
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";

*, *::before, *::after { box-sizing: border-box; } 
* { margin: 0; } html, body { height: 100%; } 
body { line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } 
img, picture, video, canvas, svg { display: block; max-width: 100%; } 
input, button, textarea, select { font: inherit; } 
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } 
#root, #__next { isolation: isolate; }

#app { background-color: aliceblue;}

body::-webkit-scrollbar {width: 7px;background-color: #d7d7d7;border-radius: 20px;}
body::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(41, 85, 137, 0.627);background-color: #555;padding: 20px;}

:root {
    --font-01: 'Roboto';
    --font-02: 'Bebas Neue';
    --color-pale-yellow: #FBFABA;
    --color-yellow: #f8a530;
    --color-baby-blue: #65BACD;
    --color-blue: #00468d;  
    --color-gold: #DBCAB2;
    --color-golden: rgb(122, 104, 78);
    --color-magenta: rgb(136, 25, 90);
    --color-silver: rgb(153, 153, 153);
    --color-orange: rgb(172, 56, 11);
    --color-grey: rgb(99, 99, 99);
    --color-darkgrey: rgb(48, 48, 48);
    --color-system: #e4ebf5;   

  }

/* Common */
  .font-01 { font-family: var(--font-01);}
  .font-02 { font-family: var(--font-02);}

  .font-title { font-size: 1.4em;}
  .font-small { font-size: 0.9em;}
  .font-note { font-size: 0.8em;}

  .color-blue      { color: var(--color-blue)}
  .color-baby-blue { color: var(--color-baby-blue)}

  .transition-fast { transition: 0.2s all;}

  .icon-truck { animation-name: example;   animation-duration: 0.3s; animation-iteration-count: infinite; filter: invert(1); animation-direction:alternate-reverse; }

  .d-flex-centered { display: flex; align-items: center; justify-content: center;}

/* Color Backgrounds */
  .bck-babyBlue { background-color: var(--color-baby-blue); color:white; }
  .bck-Yellow { background-color: var(--color-yellow); color:white; }
  .bck-System { background-color: var(--color-system); color:white; }

  @keyframes example {
  0%   {transform: translateY(1px), translateX(0px)}
  20%  {transform: translateY(0px)}
  40%  {transform: translateY(1px), translateX(20px)}
  60%  {transform: translateY(2px)}
  80%  {transform: translateY(-1px)}
  100% {transform: translateY(0px), translateX(0px)}
}

/* Buttons */
  .btn-white { background-color: white; color:black; text-align: center; cursor: pointer; white-space: nowrap; 
               padding: 10px 20px; border-radius: 50px; color: var(--color-blue);
               border:2px solid var(--color-baby-blue); font-family: var(--font-01); font-size: 1.5em; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.469); 
               transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); flex-wrap: wrap; justify-content: center; align-items: center;  }

  .btn-white:hover { background-color: rgb(38, 38, 38); color:rgb(255, 255, 255); box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.713); transform: scale(1.1);    }
  .disabled { opacity: 0.3; cursor: not-allowed !important   }

  .btn-round-light { border-radius: 50px; padding: 0px 30px; border:1px solid var(--color-blue); background-color: white;}
  .btn-round-light:hover { box-shadow: 0px 0px 10px rgb(135, 179, 240);}
  .btn-round-group .active {  background-color: var(--color-blue); color:white;}

 /* Loading Stuff */ 
    .loading-bar-01-wrapp {position: fixed;top: 0px;width: 100%;height: 48px;z-index: 1000;display: flex;align-items: center;justify-content: center;}
    .loading-bar-01      {background-color: #0f385c;width: 300px;height: 28px;overflow: hidden;box-shadow: 0px 0px 10px #88c2dd;z-index: 20;border-radius: 50px;position: relative;}
    .loading-bar-anim-01 {width: 25px;height: 10px;background: #72b0e9;border-radius: 20px;margin: 2px;animation-name: loading-01;animation-duration: 4s;animation-iteration-count: infinite;animation-delay: 0.01s;top: 8px;}
    .loading-bar-anim-02 {width: 10px;height: 10px;background: #12dbd155;border-radius: 20px;margin: 2px;animation-name: loading-01;animation-duration: 4s;animation-iteration-count: infinite;animation-delay: 0.50s;top: 8px;}
    .loading-bar-anim-03 {width: 10px;height: 10px;background: #c4ddf45e;border-radius: 20px;margin: 2px;animation-name: loading-01;animation-duration: 4s;animation-iteration-count: infinite;animation-delay: 0.20s;top: 8px;}
    .loading-bar-anim-04 {width: 7px;height: 10px;background: #2fb2c7e6;border-radius: 20px;margin: 2px;animation-name: loading-01;animation-duration: 4s;animation-iteration-count: infinite;animation-delay: 0.70s;top: 8px;box-shadow: 1px 0px 7px #1fcfb0;}

    @keyframes loading-01 {
        0%   { position:absolute; left: 0%;   width: 1px;}      
        50%  { position:absolute; left: 100%; width: 50px;}
        80%  { position:absolute; left: 100%; width: 90px;}
        100% { position:absolute; left: 0%;}
    }
 
    .loading-bar-02 { position: absolute; top:-20px; margin: auto calc(50% - 45px); }
    .loading-bar-03 { position: absolute; top:-20px; margin: auto calc(50% - 70px); }
    .loading-bar-container-02 { width: 60px; height: 60px; border-radius: 10px;  position: relative;  }
    .s-w-02-elem01 {color:white; position: absolute; left: 0px;             animation-name: slidingIn;  animation-duration: 1s;  animation-iteration-count: infinite; animation-delay: 0.1s;}
    .s-w-02-elem02 {color:#ffffff; position: absolute; left: 30px; top:10px;  animation-name: slidingIn;  animation-duration: 1s;  animation-iteration-count: infinite; animation-delay: 0.2s;}
    .s-w-02-elem03 {color:white; position: absolute; left: 50px; top:30px;  animation-name: slidingIn;  animation-duration: 1s;  animation-iteration-count: infinite; animation-delay: 0.5s;}
    .s-w-02-elem04 { position: absolute; top:92px; left: 22px;  border-radius: 20px; color: rgb(250, 250, 250) !important; padding:  2px;}

    @keyframes slidingIn {
      0%   { top: 0%; opacity: 0;}      
      50%  { top: 70%; opacity: 1;}
      50%  { top: 90%; opacity: 1;}
      100% { top: 0%; opacity: 0;}
  }

.isLoading-Zone                {background-color: #2d6daf59;position: absolute;width: 100%;left: 0px;height: 100%;z-index: 11;border-radius: 12px;backdrop-filter: blur(3px);display: flex;align-items: center;justify-content: center;color:white;}

.loader-wrapper          {background-color: #ffffff;width: 200px;border-radius: 10px;box-shadow: 0px 0px 20px #ffffff5c;border: 1px solid #ffffff73;} 
.loader                  {display: flex;flex-direction: column;align-items: center;padding: 20px;color: white;font-family: var(--font-01);}
.loader p                 {font-weight: 400;margin: 0px;margin-top: 20px;font-size: 1.2em;color: #00468d;}
.loader .spinner                {width: 64px;height: 64px;display: block;position: relative;border-radius: 50%;border: 3px solid #248fdd;border-top: solid transparent;border-bottom: solid transparent;-webkit-animation: loaderRotate 0.75s ease;animation: loaderRotate 0.75s ease;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;/* box-shadow: 0px 0px 9px white; */}
@-webkit-keyframes loaderRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes loaderRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* UI Detailing */
  .ui-curveSubtract {  width: 100%; height: 50px; position: absolute; top:0px; 
                      background-image: url(media/ui_curveSubtract.svg);  
                      background-position: center top; background-repeat: no-repeat;  }



/* Header */
  .header-container      { width: 100%; display: flex; justify-content: space-between; align-items: center; }
        .branding        { height: 130px; margin: 20px; z-index: 2; cursor: pointer; transition: 0.2s;}
        .branding:hover  { transform: scale(1.05);}
        .branding-dark   { width: 180px; height: 130px;  background-image: url(media/LOGOPF_2018-924x592_w.png); background-size: contain; background-repeat: no-repeat;}
        .branding-light  { width: 180px; height: 130px;  background-image: url(media/LOGOPF_2018-924x592.png); background-size: contain; background-repeat: no-repeat;}

  .header-banner-01 { height: 60vh; width: 100%; min-height:500px; background-image: url(media/crystal-kwok-mhUsz2ezlXQ-unsplash-colored-b.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; }
  .header-banner-02 {  height: 45vh;min-height: 400px;width: 100%;background-color: white}

/* TOP TOOLS */

  .header-options-wrapp { display: flex;  align-items: center; justify-content: flex-end; }  

  .lang-selector              { margin: 10px;padding: 0px;display: flex;flex-direction: row;justify-items: flex-end;font-family: var(--font-01);font-weight: bold;font-size: 1.4em;}
    .lang-selector li         { list-style-type: none;margin-left: 10px;}
    .lang-selector li a       { text-decoration: none; color:rgba(255, 255, 255, 0.464); }
    .lang-selector .active a  { color:white; }

  .icon-user-area             { color:white;font-size: 1.6em;border: 2px solid white;display: inline-block;width: 50px;text-align: center;
                                border-radius: 50px;height: 50px;line-height: 43px; position:relative; cursor: pointer;  }
    .icon-animate                        { width: 50px; height: 50px; border:2px solid rgb(255, 255, 255); position: absolute; top:-2px; left: -2px; border-radius:50px;}

    .icon-user-area:hover                { background-color: rgb(255, 255, 255); color:white;}
    .icon-user-area:hover i              { color:#7bb5d5}
    .icon-user-area:hover .icon-animate  { border:2px solid rgb(0, 229, 255);  transform: scale(2); transition: 0.5s; opacity: 0;}

    .icon-user-dark { color: black; background-color: rgb(234, 234, 234); border: 2px solid rgb(255, 255, 255); }

/* Product Cards */
  #CategoryList { margin-top: -400px;display: flex;flex-direction: column;justify-content: center;flex-wrap: wrap;align-content: center;}
  #ProductList  { display: flex;flex-direction: column;justify-content: center;flex-wrap: wrap;align-content: center; position: relative; background-color: white;}

/* Welcome Username */
  .welcome-username                      { text-align: center; color:white; font-family: var(--font-01); margin-bottom: 100px;}
      .welcome-username div:nth-child(1) { color:rgb(255, 255, 255); font-size: 2em; line-height: 20px;}
      .welcome-username div:nth-child(2) { color:rgb(255, 255, 255); font-size: 4em;}

/* Category Subcategory Nav */                        
  .prod-nav-wrapp                   { display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--font-01); text-transform: uppercase;}    
  .prod-nav-mainCat           { display: flex;width: 500px;justify-content: space-evenly;cursor: pointer;font-weight: 300;font-size: 1.2em;color: #b2c7dd;/* line-height: 50px; */}                  
  .prod-nav-mainCat div       { padding: 0px 15px;border:1px solid rgb(255, 255, 255);border-radius: 20px;transition: 0.2s;}                  
  .prod-nav-mainCat div:hover { border:1px solid rgb(212, 212, 212); }                  
  
  .prod-nav-mainCat .active   { font-weight: bold;color: var(--color-blue);}    

  .prod-nav-subCat            {/* width: 70%; */height: 60px;}
  .prod-nav-subCat-holder     { display: flex;  flex-wrap: nowrap; width: 500px; height: 50px; justify-content: space-evenly;cursor: pointer;font-weight: 300;font-size: 1.2em;color: #b2c7dd; background-color: red; overflow: hidden;}       

/* Card Items*/
  .category-wrapp       { gap: 10px 50px;display: flex;justify-content: center;flex-wrap: wrap;flex-direction: row;font-family: var(--font-01);text-align: center;width: 90%; z-index: 2; margin-bottom: 138px;}
  .prod-wrapp           { gap: 10px 50px;display: flex;justify-content: center;flex-wrap: wrap;flex-direction: row;font-family: var(--font-01);text-align: center;width: 100%; z-index: 2; margin-top: -15%; margin-bottom: 138px;}      
  .category-card        {background-color: #ffffff;border-radius: 20px;display: flex;flex-direction: column;padding: 10px 10px;box-shadow: 0px 0px 20px #0000004d;cursor: pointer;transition: 0.2s ease-in-out;min-width: 250px;}
  .category-card:hover  { transform:scale(1.1,1.1)}
      .card-compact     { width: 10%; }
      .card-compact:hover   { }
      .category-title { color: var(--color-blue); font-weight: bold; font-size: 1.4em; text-transform: uppercase }                                             
      .category-descr { color: #acacac;font-size: 1em;text-transform: uppercase;line-height: 16px;font-weight: 300;}
      .background-clip { background-image: url(media/crystal-kwok-mhUsz2ezlXQ-unsplash-colored.jpg); height: 200px; width: 100%; background-position: center center; background-attachment: fixed; background-size: cover; }
      .category-card-img {height: 250px;object-fit: scale-down;}

/* Prod List items */

    .prod-list-container-wrapp { margin-bottom: 150px;}
    .prod-list-container-wrapp-2-col                      { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: flex-start; }               
    .prod-list-container-wrapp-2-col .prod-list-container { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 32%; background-color: #215e93; border-radius: 22px; margin-bottom: 20px; border: 1px solid #e8e8e8; position: relative; align-content: space-between; }                           
    .prod-list-container-wrapp-2-col .prod-list-overlay   { position: absolute; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 20px; backdrop-filter: blur(3px); opacity: 0; background-color: rgba(11, 42, 93, 0.76); align-content: stretch; flex-wrap: wrap; flex-direction: column; }
    .prod-list-container-wrapp-2-col .prod-list-card      { background-color: #ffffff; border-radius: 20px; width: 95%; display: flex; flex-direction: column; padding: 30px; box-shadow: 0px 0px 20px #0000004d; cursor: pointer; margin-top: 6px; }
    .prod-list-container-wrapp-2-col .prod-list-details   { display: flex; align-items: start; border-top-right-radius: 15px; border-bottom-right-radius: 15px; position: relative; flex-direction: column; justify-content: flex-start; margin-top: 25px; width: 100%; }
    .prod-list-container-wrapp-2-col .prod-list-overlay   { position: absolute; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 19px; backdrop-filter: blur(3px); opacity: 0; background-color: rgb(203 203 203 / 76%); align-content: stretch; flex-wrap: wrap; flex-direction: row; top: 0px; left: 0px; }
    .prod-list-container-wrapp-2-col .prod-list-Title     { color: #ffffff; }
    .prod-list-container-wrapp-2-col .table-custom        { color: #bababa; }
   
    .prod-list-container {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: stretch;width: 100%;background-color: #0f385c;border-radius: 22px;margin-bottom: 20px;border: 0px solid #bbbbbb46;position: relative;align-content: space-between;box-shadow: 0px 7px 10px #16161626;}
    .prod-list-card      {background-color: #ffffff;width: 25%;display: flex;flex-direction: column;justify-content: center;padding: 30px;cursor: pointer;position: relative;z-index: 1;border-top-left-radius: 20px;border-bottom-left-radius: 20px;}
    .prod-list-details   { display: flex;border-top-right-radius: 15px;border-bottom-right-radius: 15px;position: relative;flex-direction: column;justify-content: flex-start;margin-top: 25px;width: 100%; align-items: center;}
   
    .prod-list-action             {position: absolute;top: 40px;right: -60px;display: flex;font-size: 1.7em;}   
    .prod-list-action div         {border: 1px solid rgb(187 187 187 / 28%);background-color: white;border-radius: 50px;width: 60px;height: 60px;text-align: center;margin-right: 28px;line-height: 60px;transition: 0.2s;cursor: pointer;}    
    .prod-list-action div:hover   { background-color: rgb(253, 207, 169); color: white; transform: scale(1.2);}   
    .prod-list-action div:hover i { color: white; }   

    
    /* .prod-list-overlay  { position: absolute;width: 100%;height: 100%;z-index: 2;display: flex;align-items: center;
                          justify-content: center;border-radius: 20px;backdrop-filter: blur(3px);background-color: rgba(11, 42, 93, 0.76);
                          align-content: stretch;flex-wrap: wrap;flex-direction: row; left:0px; top:0px;} */

    .prod-list-info  {margin-bottom: 20px;border-radius: 5px;margin-left: 22px;padding: 20px 40px;width: 100%;}
    .prod-list-Title {font-family: var(--font-01);color: #ffffff;font-weight: bold;font-size: 1.7em;line-height: 30px;text-shadow: 0px 0px 16px #00bcd4;}
    .prod-list-ref   {font-family: var(--font-01);color: #90cae3;font-weight: 300;font-size: 1.3em;line-height: 20px;}
    
    .table-custom th                { background-color: #3774a4;color: white;}
    .table-custom                   { color: #282828;width: 95%;overflow: hidden;text-align: center;line-height: 20px;font-family: var(--font-01);font-size: 1.1em;background-color: white;border-radius: 10px;box-shadow: 0px 5px 10px #00000026;}
    .table-custom>:not(caption)>*>* { padding: .5rem .5rem; border-bottom-width: 0px; box-shadow: inset 0 0 0 9999px #9b191900; border-color: #00000022; width: 10%; vertical-align: middle; }
    .table-custom .table-custom-footer { background-color: rgb(228, 237, 239); min-height: 75px; }  
    .table-custom .table-custom-footer-dark { background-color: #3774a4 }
    .table-custom-labels   { font-weight: bold; color:var(--color-blue)}
    .table-custom-border * { border-bottom-width:1px !important}

    .table-custom-titles   { height: 65px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--color-blue); font-weight: 600; }
    .table-custom-content   { height: 120px; display: flex; justify-content: center; align-items: stretch; flex-direction: column; text-align: center; }


    .subcat-vertical-list           { text-align: right; padding-right: 50px; font-family: var(--font-01); font-size: 1.4em; margin-top: 20px; top:70px; color: #205b90; font-weight: 300;  }
    .subcat-vertical-list .active   { font-weight: bold; border-right:5px solid #1bbcd5; }
    .subcat-vertical-list div       { border-right:5px solid rgb(245, 245, 245); padding-right: 20px; cursor: pointer;  }
    .subcat-vertical-list div:hover { border-right:5px dotted #1bbcd5; transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1); }

    /* Popup */
    .cart-message-wrapper   { position: fixed; bottom:20px; right: 20px; z-index: 10000; color:white;}
    .cart-message-container { background-color: #32894f; width: 300px; height: 200px; border-radius: 20px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.3em; line-height: 20px; box-shadow: 0px 0px 50px 20px #b1ffbb; border: 2px solid white; }   
    .cart-message-container img { width: 100px; padding: 10px; margin: auto; color: wheat;  }

    /* Popup */
    .error-message-wrapper   { position: fixed; top:20px; left: 20px; z-index: 10000; color:white;}
    .error-message-container { background-color: #6a0000ba;border-radius: 20px;align-items: center;justify-content: center;text-align: center;box-shadow: 0px 0px 20px 7px #d77272c9;backdrop-filter: blur(5px);padding: 20px;display: flex;align-content: center;flex-wrap: wrap;width: 300px;font-size: 0.9em;line-height: 16px;color: #ebe0cd;font-family: monospace;-webkit-user-drag: initial;}    
    .error-message-close   { background-color: transparent;border: 0px;color: white;position: absolute;top: -8px;right: -8px;font-size: 1.9em;}
    .error-message-content { overflow: auto; max-height: 300px; padding: 0px; font-size: 0.8em; overflow-x: hidden; word-break: break-word; min-height: 50px; font-size: 1.2em; }
        .error-message-content::-webkit-scrollbar { width: 10px; border-radius:10px }
        .error-message-content::-webkit-scrollbar-track { background: #0000007b; }
        .error-message-content::-webkit-scrollbar-thumb  { background: #f7f7f6; }
        .error-message-content::-webkit-scrollbar-track { background: #373535; }    
    
    .error-message-user { font-size: 1.7em; font-family: var(--font-01); text-shadow: 0px 0px 9px #ffffffa8; }

    .button-information   { width: 100%; padding: 10px 10px; border-radius: 50px; background-color: white; font-size: 0.8em;  }
    .button-information i {  font-size: 1.5em;  }
    .button-select      { width: 100%; padding: 10px 0px; border-radius: 50px; transition: 0.2s; box-shadow: 0.3rem 0.3rem 0.6rem #c2cae2, -0.2rem -0.2rem 0.5rem #ffffff; border:2px solid #ffffffba; position: relative; overflow: hidden; cursor: pointer;  }
    .button-select:hover  {  transform: scale(1.05,1.05);  }
    .button-select:hover .button-shade { top:0px; transition: 0.2s; transform: scale(1.1,1.1);  }
    
    .button-shade         { background-color: rgba(0, 0, 0, 0.1); width: 100%; height: 150px; position: absolute; top:40px; transition: 0.2s; z-index: 1; }
    .button-select .label { z-index: 5; position: relative; display: flex; justify-content: center; align-content: center; flex-wrap: nowrap; align-items: center; }
    .button-select .label i { color:white; margin-left: 20px; }

    .button-add-cart {background-color: white;border-radius: 100%;padding: 20px;z-index: 2;margin-top: -20px;width: 85px;height: auto;display: flex;align-items: center;justify-content: center; transition: 0.2s cubic-bezier(0.215, 0.610, 0.355, 1);}
    .button-add-cart img {width: 100%;padding: 0px;}
    .button-add-cart i   { position: absolute; top:37px; color: rgb(85, 127, 21);  }
    .button-add-cart:hover   { background-color: #24bb4c; border: 2px dotted white; box-shadow: 0px 0px 20px rgb(132, 229, 190); }
    .button-add-cart:hover img  { filter: invert(2) saturate(0) brightness(2); }

    .add-cart-disabled { opacity: 0.2;  pointer-events: none;}


/* Cart Styling */
  .table-wrap          { display: table; width: 100%; color:rgb(56, 55, 55); background-color: #ffffff; font-family:  var(--font-01);}
    .table-header      { font-size: 1.4em; font-weight: bold; color: var(--color-blue);  height:65px; background-color: white;; }
    .table-header div  { border-bottom: 2px solid rgba(91, 122, 165, 0.976); line-height: 26px; vertical-align: middle;}
    .table-header span { display: block; font-size: 0.8em; font-weight: 300;}
    .table-row         { display: table-row; }
    .table-row > div   { border-bottom: 1px solid rgba(152, 152, 152, 0.584); }

    .cart-item-wrapp { background-color: red; }

    .next-is-a-table-cell div {display: table-cell;text-align: center;vertical-align: top;padding: 10px;width: 14%; line-height: 30px;}

    .table-prodRef { display: flex; justify-content: space-between; align-items: center; padding: 20px 0px; border-bottom: 1px solid rgb(179, 179, 179); }

    .table-prodRef span:nth-child(1) {color: #242424;font-weight: 100;font-size: 2.1em;display: block;line-height: 25px;}
    .table-prodRef span:nth-child(2) {color: rgb(48 156 202);font-weight: 400;font-size: 0.9em;}

    .table-img img { border-radius: 10px; }
    .table-items-columns { display: flex !important; flex-direction: column; align-content: space-between; flex-wrap: wrap; justify-content: flex-start; }

    .cart-item-wrapper { background-color: white; border: 2px solid rgba(10, 55, 151, 0.103); border-radius: 15px; margin-bottom: 20px; position: relative; }
    .cart-item-details { background-color: black;}

    .cart-item-information     {background-color: #ffffff;border-radius: 50px;margin-bottom: 20px;border: 1px solid #00000008;color: #727272;padding: 10px 10px;}
    .cart-item-information img { width: 36px; margin: 0px 25px; }

    .cart-item-count  { background-color: #043f62; color: #2cdbff; font-family: var(--font-01); width: 35px; height: 35px; line-height: 35px; border-radius: 30px; 
                        position: absolute; top:-10px; right: 10px; border: 2px solid white; font-weight: 700; }

    .linktype-email       { border: 1px solid #ffffff3d; padding: 5px 20px; background-color: #b4d8e3; border-radius: 20px; color: #6a6a6a; transition: 0.2s all; text-decoration: none !important;     white-space: nowrap;}
    .linktype-email:hover { background-color: var(--color-blue); color: black; }

    .infobox-color { display: flex; text-align: center; padding: 5px 5px; border-radius: 29px; align-items: center; justify-content: center; font-family: var(--font-01); font-size: 0.7em; margin-top: -24px; background-color: #eaf0f6; line-height: 13px; width: 100%; }
    .infobox-color i { font-size: 1.4em;  }

/* Form badged Items, Colors, Prices, Info */

    .item-badge { border-radius: 50px; font-size: 1em; font-weight: 400; display: block; white-space: nowrap;}
      .item-shadow        {box-shadow: 0px 1px 0.6rem #c9d0e4, -0.2rem -0.2rem 0.5rem #ffffff;}
      .item-shadow-filter {  filter: drop-shadow(0.2rem 0.2rem 0.2rem #c9d0e4) drop-shadow(-0.1rem -0.1rem 0.2rem #efefef);}
      .item-shadow-filter-inv {  filter: drop-shadow(0.2rem 0.2rem 0.2rem #efefef) drop-shadow(-0.1rem -0.1rem 0.2rem #c9d0e4);}


      .item-light { border-radius: 50px; border: 2px solid white; padding: 5px 10px; color: var(--color-blue); background-color: white; min-width: 80px;}
      .item-dark  { border-radius: 50px; border: 2px solid white; padding: 0px 10px; background-color: var(--color-blue); color:white;min-width: 80px;}
      .item-number  { font-size: 1.1em; color:var(--color-blue); font-weight: bold; }
      .item-align { display: flex; align-items: center; justify-content: space-around;  }
      .item-align-center { display: flex; align-items: center; justify-content: center; }
      .item-align-evenly { display: flex; align-items: center; justify-content: space-evenly; }
      .item-click { cursor: pointer;}

      .item-increment       {background-color: #ffffff;border-radius: 50px;padding: 2px 0px;transition: 0.2s;color: #00468d;width: 100%;font-size: 1.3em;box-shadow: 0px -5px 8px #ffffff63, 0px 5px 8px #dbd6d6;border: 1px solid #00000030;}
      .item-increment:hover { background-color: var(--color-baby-blue); color: white; transform: scale(1.25,1.25);}

      .item-incrPos-Wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 0px 33px; margin-top: 4px; position: absolute; width: 100%; left: 0px; bottom: 0px; gap: 20px; }
      .item-incrPos-up      {/* position: absolute; left:  40px;z-index: 10;bottom: 0px; */}
      .item-incrPos-down    {/* position: absolute; right: 40px;z-index: 10;bottom: 0px; */}

      .item-separator        { position: relative;}
      .item-separator::after { content: ''; height: 45px; width: 1px; position: absolute; top: -22px; background-color: #ffffff; }

      .icon-prod-remove {border:1px solid silver;width: 70px !important;height: 32px;border-radius: 50px;text-align: center !important;align-items: center !important;display: flex !important;justify-content: center;transition:0.2s cubic-bezier(0.075, 0.82, 0.165, 1);color:tomato; cursor: pointer}
      .icon-prod-remove:hover { background-color: tomato; color: white; border: 1px solid rgba(0, 0, 0, 0); transform: scale(1.2);}

      .bg-cart            {
                            background-color: #00468d;
                            border-radius: 15px;
                            background-image: url(/Assets/icons/cart-svgrepo-com-a.svg);
                            background-blend-mode: soft-light;
                            background-repeat: no-repeat;
                            /* background-position: center center; */
                            background-size: 60%;
                            background-position-y: 315px;
                            background-position-x: 142px;
                            }

    .checkout-container { background-color: #00468d;border-radius: 10px;margin: 12px 0px;padding: 10px;color:white;top:20px;transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .checkout-subtotal  { display: flex; justify-content: space-between; font-size: 2em; flex-wrap: wrap; }
    .checkout-subtotal div:nth-child(2) {  font-size: 1em; color: rgb(174, 215, 231); font-weight: bold;}
    .checkout-note      { font-size: 0.85em;  border-bottom: 1px solid rgba(255, 255, 255, 0.36); margin-bottom: 20px; padding-bottom: 20px;}
    .checkout-icon-cart { background-color: rgb(59, 59, 59); position: absolute; top:0px; height: 50px; width: 50px; border-radius: 50px; padding: 10px; z-index: 20; top:-20px;   }
    
    .chk-container-light {background-color: #ffffff38;color: white;border: 1px solid #0000001f;backdrop-filter: blur(6px);}
    .chk-container-light .checkout-note      { border-bottom: 1px solid rgba(60, 60, 60, 0.36); }
    .chk-container-light .btn-white          { box-shadow: 0px 0px 10px rgba(123, 161, 212, 0.761); }
    .chk-container-light .btn-white:hover    { background-color: var(--color-blue);}

    .empty-item-notify     { background-color: white; border-radius: 10px; padding: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.245); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; padding: 50px; text-align: center; font-family: var(--font-01); line-height: 20px; color: var(--color-blue); font-size: 1.2em;  }
    .empty-item-notify img { margin: 30px 0px;}

    .popUp-wrapper     { position: fixed;width: 100%;height: 100vh;background-color: rgba(9, 36, 74, 0.634);z-index: 10000;top:0px;left: 0px;display:flex;align-items: center;justify-content: center;}
    .popUp-container   { min-width: 500px;background-color: var(--color-system);height: unset;border-radius: 20px;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.493);position: relative;padding: 20px 0px;display: flex;align-items: center;justify-content: center;height: 80vh;}
    .popUp-close       { background-color: white; border-radius: 50px; height: 50px; width: 50px; position: absolute; right:-10px; top:-10px; border:2px solid rgb(148, 148, 148); display: flex; align-items: center; justify-content: center; font-size: 2em; transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1); cursor: pointer;}
    .popUp-close:hover { background-color: rgb(40, 134, 153); color:white; border: 2px solid rgb(255, 255, 255); box-shadow: 0px 0px 30px rgb(93, 199, 195); }

    .popUP-frame {height: calc(100% - 50px);width: 95%;overflow: auto;padding: 0px 15px;}

     body .popUP-frame::-webkit-scrollbar {width: 7px;background-color: #d7d7d7;border-radius: 20px;}
     body .popUP-frame::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;padding: 20px;}

    .form-check              { cursor: pointer;}
    .form-options-format     { display: flex;flex-direction: column;justify-content: space-evenly; }
    .form-options-format div { border-radius: 20px; padding: 8px 0px; }
    .form-options-format .form-check-input { margin-left: 20px;}

    .form-check-label        {padding: 0px 10px;display: flex;align-items: center;justify-content: space-around;cursor: pointer;margin-bottom: 20px;color: #1d1d1d;transition: 0.1s cubic-bezier(0.47, 0, 0.745, 0.715);}
    .form-check-label:hover  { background-color: white; }
    .form-check-label span   { min-width: 100px;display: inline-block;text-align: center;}

    .form-input-label        { font-family: var(--font-01); font-size: 1.1em; margin-bottom: 10px; font-weight: 400; color: var(--color-blue); }    
    .form-input-style        { background-color: var(--color-blue); border-radius: 50px; font-family: var(--font-01); text-align: center; color: white; border:0px; padding: 10px 0px; font-size: 1.4em; margin-bottom: 20px; }

    .form-input-search    {}

    .form-quantity-labels { display: flex;align-items: center;justify-content: space-around;position: relative;}
    .form-Qt-container    { width: 33%;}
    .form-Qt-label        { position: absolute;top: -48px;color: #545454;width: 32%;font-weight: bold;font-size: 0.7em;background: #f0f0f0;border-radius: 50px;padding: 3px 1px;}
    .form-Qt-output       { position: relative;  }

    /* .form-Qt-output::after { content: ''; height: 100%; width: 1px; position: absolute; right: 0; top: 0; background-color: white;   }
    .form-Qt-container:last-of-type .form-Qt-output::after { width: 0px;  } */


/* User Area */
  
  #container-UserArea { margin-top: -120px; margin-bottom: 400px;}
  #container-UserOptions { min-height: 65vh;}
  .side-options-wrap {font-family: var(--font-01);font-size: 1.3em;font-weight: 300; margin-top: 20px;color: var(--color-blue);text-transform: uppercase;}                                              
  .side-options-wrap div {margin-bottom: 20px;cursor: pointer;transition: 0.3s all;border: 1px solid rgb(0 0 0 / 6%);border-radius: 50px;background: white;}                                              
  .side-options-wrap div:hover { background-color: rgb(235, 235, 235); border:1px solid rgb(223, 223, 223); border-radius: 50px;}                                              
  .side-options-wrap .active {  font-weight: bold; }                                              
  .side-options-wrap i {margin: 20px;}    

  .order-filter-wrapp     { width: 80%; background-color: #ffffff; padding: 20px; margin: auto; border-radius: 10px; }
  .order-filter-container { font-weight: var(--font-01); color:var(--color-blue); font-size: 1.2em; font-weight:100; }
  
  .info-UserArea { padding: 20px; font-family: var(--font-01); border-bottom: 1px solid grey;}

  .icon-user-logOut-x2       { font-size: 1em; text-align: center; border: 1px solid rgb(220, 220, 220); padding: 10px; border-radius: 5px; cursor: pointer; transition: 0.1s all;}
  .icon-user-logOut-x2:hover { background-color: rgb(236, 236, 236); transition: 0.1s all; }
  .icon-user-logOut-x2:hover i { transform: translate(8px,0px);  transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);}
  .icon-user-logOut-x2 i { font-size: 2em; text-align: center; color:var(--color-blue)}

  .icon-user-area-x2 { font-size: 2.6em; border: 2px solid rgb(122, 193, 228); color:rgb(132, 132, 132); width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50px;}
  .info-userNR { background-color: #7bb5d5; padding: 5px 20px; border-radius: 10px; color:white; text-align: center; font-size: 1.3em;} 

  .form-store { padding: 50px; }
    .form-store-group { display: flex; flex-wrap: wrap; gap: 50px;  font-family: var(--font-01); font-size: 1.4em; color: var(--color-blue); margin-bottom: 30px;}
      .form-store-container { display: flex; flex-direction: column; width:46%}
      .form-store-container label { margin-bottom: 10px; color: var(--color-blue)}
      .form-store-container input { background-color: #e5ecf3; border: 0px; border-radius: 10px; padding: 10px 30px; outline-style: none; font-weight: bold;}
      .form-store-container button { background-color: #e5ecf3; border: 0px; border-radius: 10px; padding: 10px 30px; outline-style: none; font-weight: bold;}

      .container-search         { width: 100%;margin: 10px 0px;}
      .form-input-search        { width: 100%; border-radius: 30px; border: 0px; background-color: #526e85; color: white; padding: 0px 15px; outline: none; }
      .form-input-search::placeholder { color:rgba(255, 255, 255, 0.534)}
      .form-search-button       { display: block; white-space: nowrap; background-color: #7bb5d5; color: white; border-radius: 20px; border: 0px; padding: 5px 15px; margin-left: -50px; font-weight: 600; transition: 0.2s; }
      .form-search-button:hover { background-color: rgb(221, 221, 221); color:black;   }

      .form-references-ordered-button       { display: block; white-space: nowrap; background-color: #7bb5d5; color: white; border-radius: 20px; border: 0px; padding: 5px 15px;  font-weight: 600; transition: 0.2s; font-size: 0.7em; }
      .form-references-ordered-button:hover { background-color: white; color:black  }

      .store-favorites { display: flex; flex-wrap: wrap; gap:20px;  position: relative; margin: 20px 20px; }

      .favorite-wrapper { position: relative;}

      .favorite-container { width: 200px; height: 250px; background-position:  center center; background-size: contain; background-repeat: no-repeat; 
                            background-color: white; box-shadow: 0px 0px 10px rgb(207, 207, 207); border-radius: 20px; transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
                            position: relative; }

      .favorite-container:hover  { border:1px solid rgb(255, 255, 255); box-shadow: 0px 0px 20px #6ea4ca; }

      .favorite-remove { position: absolute; top: -15px; right: -14px; background: #ffffff; width: 40px; height: 40px; 
                         display: flex; justify-content: center; align-items: center; border-radius: 50px; box-shadow: 0px 0px 20px #34ae8252; color: #24b4fe;
                         cursor: pointer; }
      .favorite-remove:hover { background-color: #043f62; color: white;}
      .favorite-remove:hover i {  color: white;}

      .animate__hide { display: none;}

      .orders-wrapper {width: 100%;display: flex;flex-direction: column;align-items: self-start;}
      .order-container {display: flex;gap: 20px;justify-content: flex-start;font-family: var(--font-01);color: var(--color-blue);margin-bottom: 26px;border-bottom: 2px dotted #d8e1f1;padding-bottom: 20px;width: 100%;}
      .order-container i { font-size: 0.8em;}
      .order-info-container {display: flex;align-items: center;justify-content: space-evenly;width: 85%;}
      .order-image  {border-radius: 7px;overflow: hidden;width: 10%;}
      .order-container img {/* height: 150px; */border: 1px solid rgb(255, 255, 255);border-radius: 12px;overflow: hidden;}
      .order-date  {/* background-color: #7bb5d5; */color: #737373;border-radius: 20px;font-weight: 100;padding: 6px 20px;border: 1px solid #dbdbdb;}
      .order-price { background-color: var(--color-blue); color: #ffffff;border-radius: 20px;padding: 6px 20px;border: 1px solid #dbdbdb;}

     

/* Footer */
  .footer-wrapp {width: 100%;height: 100px;border-top: 1px solid rgb(161 161 161);margin-top: 50px;display: flex;justify-content: space-between;align-items: center;font-family: var(--font-01);background-color: white;position:fixed;z-index: 50;bottom:0px;}
      .footer-back  { width: 100px; text-align: center; font-size: 2em;  color: var(--color-blue); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.6em;}  
      .footer-title { color: var(--color-blue); font-weight: 300; }                                            
      .footer-email { color: var(--color-blue); font-weight: bold; }                                            
      .footer-cart  { width: 100px; text-align: center;  color: var(--color-blue); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }  
      .footer-cart img  { width: 50px; }

      .footer-margin-height { margin-bottom: 133px;}



      
/* Carousel custom */
  .carousel-item-list {display: flex;text-align: center;justify-content: center;align-items: center;}
        .subcategory-item       { font-family: var(--font-1);color: #b2c7dd;font-size: 2em;padding: 0px 15px; cursor: pointer; font-weight: 300; transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
        .subcategory-item:hover { background-color: #205b90; border-radius: 5px; color:white; box-shadow: 0px 0px 20px cadetblue; }
        .carousel-item-list .active:hover { color:white;}
        .carousel-item-list .active { color: var(--color-blue); font-weight: bold;}


@media only screen and (min-width: 1025px) and (max-width: 1600px)  
{
  .prod-list-container-wrapp-2-col .prod-list-container { width: 45%;}
  



}

@media only screen and (min-width: 768px) and (max-width: 1024px)  
{


  .branding { width: unset;}
  .header-banner-02 { height: unset; min-height: 400px;  }
  .card-compact     { width: 24%; } 
  .category-card    { width: unset; }
  .prod-wrapp       { margin-top: -28%; }

  .prod-list-container { flex-direction: column; }
  .prod-list-card { width: 100%; }
  .prod-list-card-image {    height: 300px; object-fit: contain; }

  .prod-list-container-wrapp-2-col .prod-list-container { width: 100%; }

  .prod-list-info { width: 100%; padding: 0px 0px; }
  .prod-list-action { position: absolute; top: 24px; right: -42px; font-size: 1.9em; }
  .prod-list-action div { width: 50px; height: 50px; line-height: 49px; }

  .table-custom { font-size: 0.9em; }

  .button-information { font-size: 0.6em; line-height: 12px; }
  .button-select .label i { color: white; margin-left: 0px; }

  .table-custom-titles { }
  .table-custom-content { height: 84px; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column;}
  .form-Qt-label { position: absolute; top: -30px; color: #00468d; width: 32%; font-weight: bold; font-size: 0.8em; background: #f0f0f0; border-radius: 5px; padding: 0px 1px; }
  .item-incrPos-Wrapper { position: relative;}

  #container-UserArea { margin-bottom: 600px; }

  .order-filter-wrapp { width: 100%; }   
  .container-search   { width: 100%; margin: 10px 0px; flex-direction: column; }
  .form-search-button { margin-left: unset; width: 100%;  font-size: 0.9em;}


} 

@media only screen and (min-width: 425px) and (max-width: 799px)  
{
  .header-banner-02 { height: unset; min-height: 300px; }
  .category-card    { width: 17%; }
  .welcome-username { margin-bottom: 38px; }

  #container-UserArea    { margin: 0px; }
  #container-UserOptions { min-height: unset;}

  .prod-list-container { flex-direction: column; }
  .prod-list-card { width: 100%; }

  

  .table-custom-content { height: unset; }
  .table-custom-titles { height: unset; padding: 10px 0px; }
  
  .item-dark { border-radius: 17px; border: 2px solid white; padding: 0px 10px; background-color: var(--color-blue); color: white; min-width: 80px; }
  .form-quantity-labels { gap: 0px 10px; }
  .form-Qt-label { position: relative; top: unset; color: #545454; width: unset; font-size: 0.8em; padding: 3px 0px; margin-bottom: 10px; }

  .prod-list-card-image { }

  .footer-wrapp   { justify-content: space-between; position: unset; }
} 

@media only screen and (max-width: 425px)  
{ 
  
    /* Common Layout */
  .header-options-wrapp { flex-direction: row; gap: 20px; }
  .icon-user-area { position: relative; top: unset !important; right: -30px; }

  .sticky-top-mobile { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; }

  .header-banner-01 { height: 335px !important; min-height: unset; } 
  .header-banner-02 { height: unset; min-height: unset; width: 100%; background-color: white; } 
  
  #CategoryList   { margin-top: -155px; } 
  .category-wrapp { width: 100%; } 
  .category-card  { min-width: 110px; } 
  
  .welcome-username { margin-bottom: 20px; } 
  .welcome-username div:nth-child(1) { color: rgb(255, 255, 255); font-size: 1.5em; /* line-height: 20px; */ } 
  .welcome-username div:nth-child(2) { color: rgb(255, 255, 255); font-size: 2.7em; font-weight: 100; } 

  .card-compact { width: 29%; } 
  .prod-wrapp { gap: 8px 10px; margin: 20px 0px; } 
  .prod-nav-mainCat { width: 100%; background-color: #115088; padding: 25px 15px; gap: 24px; overflow-x: overlay; display: flex; place-content: flex-start; scroll-snap-type: x proximity; flex-direction: row; } 
  .prod-nav-subCat { height: unset; width: 100%; } 
  .prod-nav-mainCat div { padding: 6px 15px; border: 1px solid rgb(255, 255, 255); border-radius: 20px; transition: 0.2s; background-color: white; scroll-snap-align: center; } 
 
  .carousel-item-list { display: block; text-align: center; justify-content: center; align-items: center; flex-direction: column; } 
  .subcategory-item { font-family: var(--font-1); color: #b2c7dd; font-size: 2em; padding: 10px 40px; cursor: pointer; font-weight: 300; transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); border-bottom: 1px solid #d5d5d5; /* display: block; */ } 
  #ProductList { background-image: url(media/crystal-kwok-mhUsz2ezlXQ-unsplash-colored-b.jpg); background-position: center center; background-attachment: fixed;} 
  .background-clip { background-image: none; display: none; }

  /* Prod list */

  #ProductList         { padding-bottom: 95px; }
  .prod-list-info      { margin: unset; border-left: 0px solid #a7a7a7; background: #03233b; border-radius: 0px; width: 100%; padding: 20px 0px; text-align: center; }
  .prod-list-container { display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-between;align-items: center;width: 100%; background-color: white;}
  .prod-list-card      { width: 60%;z-index: 1;padding: 20px;margin: unset;display: flex;flex-direction: row;box-shadow: none;justify-content: center;flex-wrap: unset;align-content: center;}
  .prod-list-details   { width: 100%;  display: flex; align-items: center;  margin-top: 0px; border-radius: 10px; position: relative; }
  
  .table-custom { font-size: 0.9em; width: 100%; border-radius: 0px; overflow: auto; border-radius: 0px 0px 20px 20px; margin: 0px; }
  .table-custom>:not(caption)>*>* {white-space: nowrap; }

  .prod-list-overlay { position: relative; opacity: 1; background-color: unset; left: 19px; }
  .prod-list-action  { display: flex; flex-direction: column; gap: 20px; justify-content: center; align-content: center; }
  .prod-list-action div { background-color: #f5f5f5; margin-right: unset; }

  .prod-list-container-wrapp-2-col { gap: 0px; }
  .prod-list-container-wrapp-2-col .prod-list-container { width: 100%; }
  .subcat-vertical-list { display: flex; gap: 20px; }

  .button-information   { line-height: 12px; font-size: 0.6em;}
  .button-select .label { padding: 0px 10px; }

  /* UserArea */

  #container-UserArea    { margin: 0px; }
  #container-UserOptions { min-height: unset;}

  .subcat-vertical-list { overflow: auto; background-color: white; width: 100%; margin: 0px; padding: 15px 29px; border: 1px solid silver; border-radius: 50px; }

  .table-row { display: block; padding: 20px; border: 1px solid #cdcdcd; margin: 20px; border-radius: 20px; box-shadow: 0 0px 14px #00000057; }
  .table-header { display: none;}
  .table-img img { border-radius: 10px; width: 150px; }
  .table-prodRef { background-color: #e3e9ef; padding: 10px 8px; }
  .table-custom-wrapp { background: #f3f4f9; border-radius: 5px; margin: 5px 0px; padding-bottom: 15px; }
  .table-custom-content { height: unset;}
  .table-custom-titles  { height: unset; font-size: 1.3em; line-height: 20px; padding: 15px 0px; }
  
  .infobox-color { width: 73%; margin: auto; }

  .next-is-a-table-cell div { display: flex; text-align: center; padding: 0px; width: unset; align-items: center; justify-content: space-evenly; flex-wrap: wrap; flex-direction: row; padding: 5px 0px; margin: 0px; }
  /* .item-badge { width: 50%;} */
  .item-light { margin-bottom: 0px }

  .item-dark { border-radius: 17px; border: 2px solid white; padding: 0px 10px; background-color: var(--color-blue); color: white; min-width: 80px; }
  .form-quantity-labels { gap: 0px 10px; }
  .form-Qt-label { position: relative; top: unset; color: #545454; width: unset; font-size: 0.8em; padding: 3px 0px; margin-bottom: 10px; }
 
  #container-UserArea { margin-top: unset; margin-bottom: 100px; }
  .side-options-wrap  { margin-left: unset; margin-top: 10px; }
  .order-filter-wrapp { display: flex; justify-content: center; margin-right: unset; margin-bottom: 20px; width: unset; }

  .order-container      { flex-direction: row; }
  .order-image          { width: 50%; }
  .order-info-container { display: flex; align-items: center; justify-content: space-around; width: 85%; flex-direction: row; flex-wrap: wrap; }
  .store-favorites      { display: flex; flex-wrap: wrap; gap: 20px; position: relative; margin: 20px 20px; }
  .favorite-wrapper     { position: relative; width: 46%; }
  .favorite-container   { width: 100%; }

  .form-store-container  { width:100%}

  .form-store-group { display: flex; margin-bottom: 30px; flex-direction: column; gap: 20px; }
  .form-store { padding: 10px;}

  .header-options-wrapp-mobile { position: absolute; top: -82px; right: -4px; }

  .popUp-container { width: 90%; min-width: unset; margin-left: -10px; height: 80vh; padding: 0px; }
  .popUP-frame     { height: calc(100% - 30px); width: 100%; overflow: auto; padding: 0px 10px; overflow-x: clip; }

  /* Cart Items */
  .bg-cart { border: unset; background-size: unset;}
  .cart-prodImage img { height: 30vh;}
  .cart-item-wrapper {  border-radius: 0px; }
  .checkout-container { margin: none; }

  /* Form badged Items */

  .item-incrPos-Wrapper { position: relative;  }

  /* .item-increment         { border-radius: 50px; padding: 4px; transition: 0.2s; font-size: 1.8em; color: #ababab; background-color: unset; }
  .item-increment-control { display: flex; justify-content: space-evenly; align-items: center; } */

  .footer-wrapp         {  margin-top: 0px; justify-content: start;}
  .footer-margin-height { margin-bottom: 0px;}
  .footer-back          { font-size: 2.3em;}
  .footer-title         { font-size: 0.8em; }
  .footer-email         { font-size: 0.8em; }


}