<link href="https://fonts.googleapis.com/css2?family=GESSTextMedium&display=swap" rel="stylesheet">

body {
    font-family: 'GESSTextMedium', sans-serif;
}

/*     ======      TOP      ======      */

.s-user-menu-trigger {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    align-items: center;
    border-top-right-radius: 0.375rem;
    border-top-left-radius: 0.375rem;
        --tw-bg-opacity: 0;
    
    background-color: rgb(0 0 0/var(--tw-bg-opacity));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: .875rem;
    line-height: 1.25rem;
}

.s-cart-summary-total {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: #e59f2d;
    color: rgb(229 159 45/var(--tw-text-opacity));
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
    font-color: #e59f2d;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
a {
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: color .2s;
}
a {
    color: #e59f2d;
    text-decoration: inherit;
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: #fff;
    color: rgb(255 255 255/var(--tw-text-opacity));
}

/* main menu header */
.mm-spn.mm-spn--navbar.mm-spn--main:after {
    padding-left: 20px;
    padding-left: var(--mm-spn-item-indent);
    background-color: #000;
}

/* main menu sections */
.mm-spn.mm-spn--navbar ul {
    top: calc(50px + 1px);
    top: calc(var(--mm-spn-item-height) + 1px);
    background-color: #000;
}

/* plus and minus quantity icons */
.s-quantity-input-button svg {
    margin-left: auto;
    margin-right: auto;
    height: 1.25rem;
    width: 1.25rem;
    fill: #e59f2d;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
  font-color: #e59f2d;
}

/* product quantity number */
.s-quantity-input-input {
    width: 3rem;
    border-width: 1px;
    border-top-width: 0;
    border-bottom-width: 0;
    --tw-border-opacity: 1;
    border-color: #1a1a1a;
    border-color: rgb(26 26 26/var(--tw-border-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    font-weight: 700;
    --tw-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow-colored: 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    background-color: #000;
}

.s-product-card-content { 
   background-color: #2c2c2c;
   }

.form-label {
    margin-bottom: .625rem;
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: #e59f2d;
    color: rgba(229, 159, 45, var(--tw-text-opacity));
}

.s-product-options-multiple-options-wrapper div label {
    margin-left: .5rem;
    cursor: pointer;
    padding-right: .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: #eea800;
    color: rgba(238, 168, 0, var(--tw-text-opacity));
}

/* product 5anat el3ameel */   
.s-product-options-wrapper {
    margin-bottom: 1.25rem;
    display: block;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: #000;
    background-color: rgb(0 0 0/var(--tw-bg-opacity));
    padding: 1.25rem;
}

/* inside 5anat for answers color */
.s-form-control {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: #eea800;
    border-color: rgb(238 168 0/var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: #1a1a1a;
    background-color: rgb(26 26 26/var(--tw-bg-opacity));
    padding: 0.5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: #e59f2d;
    color: rgb(229 159 45/var(--tw-text-opacity));
}

/* inside 5anat for answers color */
.p-5 {
    padding: 1.25rem;
     background: linear-gradient(to top, #2c2c2c 50%, #171818 100%);
}
.s-button-primary-outline {
    fill: #000;
    fill: var(--color-primary);
    color: #000;
    color: var(--color-primary);
}
div#mainnav.bg-white {
    background: linear-gradient(to top, #000 50%, #171818 100%);
}

body {
    background-image: linear-gradient(to bottom, #000 40%, #171818 80%, #000 100%);
    background-color: #181818;
    background-repeat: repeat;
    background-position: center center;
    background-size: 1000%;
}

*,::before,::after {
     color: #e59f2d;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e59f2d;
    
    .s-search-icon svg {
    height: 1rem;
    width: 1rem;
    fill: #e59f2d;
}

}

/* comments section */

.text-dark {
    --tw-text-opacity: 1;
    color: #e59f2d;
    color: rgb(229 159 45/var(--tw-text-opacity));
}

.s-comments-product {
    margin-bottom: 1rem;
    --tw-bg-opacity: 1;
    background-color: #000;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.s-comment-form-input {
    height: 6rem;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: #e5e7eb;
    border-color: rgb(229 231 235/var(--tw-border-opacity));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow-colored: 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 300ms;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #1a1a1a;
    border-color: #e59f2d;
    border-width: 1px;
    border-radius: 30px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 rgba(0,0,0,0);
}


 :root {
    --color-primary: #000;
    --color-primary-dark: #000;
    --color-primary-light: #000;
    --color-primary-reverse: #000;
}
.main-menu li.root-level>a {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
}

.store-footer__inner {
    border-bottom-width: 1px;
    border-style: dashed;
    border-bottom-color: rgba(0, 0, 0,.1);
    --tw-bg-opacity: 1;
    background-color: #000;
    background-color: rgb(0 0 0/var(--tw-bg-opacity));
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.top-navbar .s-search-input {
    border-style: none;
    background-color: rgba(46, 48, 48,.5);
}

.btn--rounded-gray {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 9999px;
    background-color: rgba(46, 48, 48,.5);
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 150ms;
    flex-grow: 0;
}

.top-navbar {
    display: flex;
    background-color: #171818;
    min-height: 48px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #171818;
}

.banner--fixed img {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: #000;
    background-color: rgb(0 0 0/var(--tw-bg-opacity));
    -o-object-fit: cover;
    object-fit: cover;
}

/*     ======      flex      ======      */
.s-block {
    margin-top: 1rem;
}

.gap-3 {
    gap: 8px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
@media (min-width: 768px){
.gap-3 {
    gap: 8px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    }
}

/*
@media (min-width: 768px){
.md\:grid-cols-2 {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
}
}*/


.banner-entry{
    height: 100px;
    background-color: #2c2c2c;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: #232323;
}

.banner-entry h3 {
    line-height: 1.5rem;
    position: relative;
    z-index: 1;
    color: #000;
    height: 100%;
    font-size: 9px;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 500ms;
}

.has-overlay:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0);
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 300ms;
    --tw-content: "";
    content: "";
    content: var(--tw-content);
}

.has-overlay:hover:after {
    background-color: rgba(0,0,0,0);
}

.s-block--features+.s-block--features, .s-block--fixed-banner+.s-block--fixed-banner, .s-block--banners+.s-block--banners {
    margin-top: 8px;
}

.carousel-slider .swiper {
    display: flex;
    padding-left: 10px;
}
        
        body {
    h3 { 
   color: #e59f2d; 
  } 
  h1 { 
   color: #e59f2d; 
  }     
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    color: #e59f2d;
    color: #e59f2d;
    position: relative
}

.s-button-primary-outline {
    fill: #000;
    color: #e59f2d;
}

.s-button-primary {
    border-width: 1px;
    border-color: #e59f2d;
    border-color: rgb(227 171 0/var);
    background-color: #2a2a2a;
    color: #2a2a2a;
    color: var(--color-primary-reverse);
}
   
.s-button-primary {
  transition-duration: 0.4s;
}

.s-button-primary:hover {
  background-color: #000; 
  color: black;
}
...

.text-xl md:text-2xl leading-10 font-bold mb-6 text-gray-800 { color: #fff:
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: #fff;
    color: rgb(31 41 55/var(--tw-text-opacity));
}

        
.form-input, .form-textarea, .form-select, .form-multiselect {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #000;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0;
    padding-top: .5rem;
    padding-right: .75rem;
    padding-bottom: .5rem;
    padding-left: .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 rgba(0,0,0,0);
}
---------------------------
button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
    background-color: 000;
    background-image: none;
}
----------------

-----------------

.s-product-card-content {
    padding: 1.25rem;
}
.s-product-card-content {
     background-image: linear-gradient(to bottom, #000, #1c1d1e);
}
.s-product-card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: .75rem;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: stretch;
}
.s-product-card-content-title a {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: #e59f2d ;
}
.s-product-card-content-title a:hover {
color:#e59f2d
}
.text-primary {
    color: #e59f2d;
}

----------------
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #000;
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: #fff;
    color: rgb(229 159 45/var(--tw-text-opacity));
}

----------------------
الزرار
button {
 appearance: none;
 background-color: transparent;
 border: 0.125em solid #1A1A1A;
 border-radius: 0.9375em;
 box-sizing: border-box;
 color: #3B3B3B;
 cursor: pointer;
 display: inline-block;
 font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 font-size: 16px;
 font-weight: 600;
 line-height: normal;
 margin: 0;
 min-height: 3.75em;
 min-width: 0;
 outline: none;
 padding: 1em 2.3em;
 text-align: center;
 text-decoration: none;
 transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 will-change: transform;
}

button:disabled {
 pointer-events: none;
}

button:hover {
 color: #fff;
 background-color: #1A1A1A;
 box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
 transform: translateY(-2px);
}

button:active {
 box-shadow: none;
 transform: translateY(0);
}
------------
زرار هوفر
button {
  width: 10em;
  position: relative;
  height: 3.5em;
  border: 3px ridge #e59f2d;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

button:hover::before, button:hover::after {
  transform: scale(0)
}

button:hover {
  box-shadow: inset 0px 0px 25px #e59f2d;
}
------------
بوكس تحتي شادو
.s-product-card-content {
 width: 190px;
 height: 254px;
 background-color: #fff;
 border-radius:;
 transition: all .2s;
}

.s-product-card-content:hover {
 box-shadow: 0px 0px 5px 1px; color:#e59f2d;
}[
-----------------
button {
  width: 10em;
  position: relative;
  height: 3.5em;
  border: 3px ridge #e59f2d;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

button:hover::before, button:hover::after {
  transform: scale(0)
}

button:hover {
  box-shadow: inset 0px 0px 25px #e59f2d;
}

------------
.bg-white {
    --tw-bg-opacity: 1;
    background-color: #000; important!

    important!
    /* background-color:rgb(255 255 255/var(--tw-bg-opacity)); */
}

---------------