/** Shopify CDN: Minification failed

Line 1860:0 Unexpected "}"
Line 2300:0 All "@import" rules must come first

**/
a:not(.a--no-hover-color):not(.btn){
  --color-a: var(--color-text-link-block, var(--color-accent-section, var(--color-text-link-main)));
}
a{
  color: var(--color-a, inherit);
  text-decoration: none;
  outline: 0;
  transition: color var(--duration-medium) var(--animation-bezier);
}
@media (min-width:1025px){
  a:not(.a--no-hover-color):not(.btn):hover{
    --color-a-hover: var(--color-text-link-hover-block, var(--color-accent-section, var(--color-text-link-hover-main)));
  }
  a:hover{
    color: var(--color-a-hover, inherit);
    text-decoration: underline;
  }
}
a.clear-underline{
  text-decoration: none;
}
a[href*="tel:"]{
  text-decoration: none;
}
a[href*="tel:"]:hover{
  color: var(--color-text,  var(--color-base-section, var(--color-base)));
}

h1,h2,h3,.h1,.h2,.h3{
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main)));
  line-height: var(--font-heading-line-height);
  word-break: break-word;
}
h4,h5,h6,.h4,.h5,.h6{
  font-family: var(--font-h4h5h6-family,var(--font-heading-family));
  font-style: var(--font-h4h5h6-style,var(--font-heading-style));
  font-weight: var(--font-h4h5h6-weight,var(--font-heading-weight));
  color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main)));
  line-height: var(--font-heading-line-height);
  word-break: break-word;
}
.section-heading-text{
  color: var(--color-base-section, var(--color-heading-main));
}
.section-heading-desc-text{
  color: var(--color-base-section, var(--color-base));
}
.h1,.h2,.h3,.h4,.h5,.h6{
  margin: 0;
}
h1>a,h2>a,h3>a,h4>a,h5>a,h6>a,
.h1>a,.h2>a,.h3>a,.h4>a,.h5>a,.h6>a{
  color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main)));
}
.subheading{
  color: var(--color-accent-section ,var(--color-subheading-main));
}
@media (min-width: 1025px){
  h1,h2{
  	--h-mt: var(--main-text-top-offset);
    --h-mb: var(--main-text-bottom-offset);
  }
}
@media (max-width: 1024px){
  h1,h2{
  	--h-mt: var(--main-text-top-offset);
    --h-mb: var(--main-text-bottom-offset);
  }
}
h1,.h1{
  font-size: calc(48px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
}
h2,.h2{
  font-size: calc(40px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
}
h1,h2{
  margin-top: var(--h-mt, 0);
  margin-bottom: var(--h-mb, 0);
}
h3,.h3{
  font-size: calc(32px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
}
@media (max-width: 576px){
	h1,.h1{
	  font-size: calc(36px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
	}
	h2,.h2{
	  font-size: calc(32px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
	}
	h3,.h3{
	  font-size: calc(28px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
	}
}
h4,.h4{
  font-size: calc(24px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
}
h5,.h5{
  font-size: calc(19px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
}
h6,.h6{
  font-size: calc(16px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
}
h3,h4,h5,h6{
  --h-mt: var(--main-text-top-offset);
  --h-mb: var(--main-text-bottom-offset);
  margin-top: var(--h-mt);
  margin-bottom: var(--h-mb);
}
.body2{
  font-size: var(--font-body2-size);
  line-height: var(--font-body2-line-height);
  font-weight: var(--font-body-weight);
}
.body3{
  font-size: var(--font-body3-size);
  line-height: var(--font-body3-line-height);
  font-weight: var(--font-body-weight);
}
.body3-no-scale{
  font-size: var(--font-body3-size-no-scale);
  line-height: var(--font-body3-line-height);
  font-weight: var(--font-body-weight);
}
strong,b,.strong{
  --font-body-weight-bold-value: var(--font-body-weight-bold);
  font-weight: var(--font-body-weight-bold);
}
h1.strong,h2.strong,h3.strong,h4.strong,h5.strong,h6.strong,.h1.strong,.h2.strong,.h3.strong,.h4.strong,.h5.strong,.h6.strong,
h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong,.h1 strong,.h2 strong,.h3 strong,.h4 strong,.h5 strong,.h6 strong,
h1 b,h2 b,h3 b,h4 b,h5 b,h6 b,.h1 b,.h2 b,.h3 b,.h4 b,.h5 b,.h6 b{
  font-weight: var(--font-heading-weight);
}
p{
  margin: var(--main-text-top-offset) 0 0;
}
ul, ol{
  margin-top:var(--main-text-top-offset);
  margin-bottom:0;
  padding-left: 28px;
}
.unstyle-ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
a:empty, ul:empty, dl:empty, p:empty {
  display: none;
}

img{
  max-width: 100%;
  vertical-align: middle;
}
meta+img,p+img{
  max-width: 100%;
  vertical-align: middle;
  margin: var(--main-text-top-offset) 0 0;
}
p span img{
  max-width: 100%;
  vertical-align: middle;
}
button, button:active, button:focus {
  outline: none;
}
button {
  border: none;
}

.section-background--small{
  --section-background-spacing: var(--sections-top-spacing--small);
  --section-background-spacing-mobile: var(--sections-top-spacing--small-mobile);
}
.section-background--medium{
  --section-background-spacing: var(--sections-top-spacing--medium);
  --section-background-spacing-mobile: var(--sections-top-spacing--medium-mobile);
}
.section-background--normal{
  --section-background-spacing: var(--sections-top-spacing);
  --section-background-spacing-mobile: var(--sections-top-spacing-mobile);
}
.section-background{
  padding-top: var(--section-background-spacing, 0);
  padding-bottom: var(--section-background-spacing, 0);
  padding-left: 0;
  padding-right: 0;
  background: var(--color-section-background-custom, var(--color-section-background));
}
.background__horizontal-line{
  width:100%;
  height:1px;
  background:var(--color-lines);
}
.section-background--no-color{
  background: unset;
}
@media(min-width: 577px){
  [class*="page-wi"] .section-background{
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media(max-width: 576px){
  .section-background{
    padding-top: var(--section-background-spacing-mobile, 0);
    padding-bottom: var(--section-background-spacing-mobile, 0);
  }
  [class*="page-"].section-background--mobile-width{
    padding-left: 0;
    padding-right: 0;
  }
  [class*="page-wi"] .section-background{
    padding-left: var(--grid-padding);
    padding-right:var(--grid-padding);
    border-radius:0;
  }
  .background__page-padding0{
    --grid-padding: 0;
  }
}

.border__radius,
.image--radius img{
  border-radius: var(--radius);
}

.section-heading-container{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.mt3{margin-top:3px;}
.mt5{margin-top:5px;}
.mt6{margin-top:6px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt13{margin-top:13px;}
.mt15{margin-top:15px;}
.mt16{margin-top:var(--main-text-section-top-offset);}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.page-content__mockup .section-heading-container+*,
.section-heading-container:not(.section-heading-container--no-bt)+*,
.mt40{margin-top:40px;}
.mb8{margin-bottom:8px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb16{margin-bottom:16px;}
.mb20{margin-bottom:20px;}
.mb25{margin-bottom:25px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mt-first-0>*:first-child{margin-top:0;}
.text-center{text-align: center !important;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.nomargin{margin: 0;}
.mt--first-child-0 > *:first-child{margin-top:0;}
.mb--last-child-0 > *:last-child{margin-bottom:0;}
.text-uppercase{text-transform: uppercase !important;}
.justify-content-center{justify-content: center !important;}
.justify-content-end{justify-content: flex-end !important;}
.align-items-start{align-items: flex-start !important;}
.align-items-center{align-items: center !important;}
.align-items-end{align-items: flex-end !important;}
.align-self-center{align-self: center !important;}
.align-self-end{align-self: flex-end !important;}
.display-block{display: block;}
.display-flex{display: flex;}
.display-flex--column{flex-direction:column;}
.display-inline-flex{display: inline-flex;}
.justify-content-between{justify-content: space-between;}
.position-relative{position: relative;}
.hidden, .hide{display: none !important;}
.body-bold-weight{font-weight: var(--font-body-weight-bold);}
.visibility-hidden{
  visibility: hidden;
  display: none !important;
}
.visibility-hidden:first-child+*:not(.visibility-hidden){
  margin-top: 0;
}
@media (max-width:1024px){
  .hide-st{
    display:none;
  }
}
.mt0{margin-top: 0px;}
.mb0{margin-bottom: 0px;}
@media (min-width:577px){
  .mt--first-child-0-desktop > *:first-child{margin-top:0;}
}

blockquote{
  background: rgba(var(--color-base-rgb),.05);
  border-radius: var(--radius);
  padding: 30px;
  margin: var(--main-text-top-offset) 0 0;
}
blockquote>:first-child{
  margin: 0;
}

svg.theme-icon path,
svg.theme-icon rect{
  fill: var(--color-text-icons-block, var(--color-base-section, var(--color-text-icons-main)));
}
svg > *{
  transition: fill var(--duration-medium) var(--animation-bezier);
}
.placeholder__svg--bg{
  position: relative;
  overflow: hidden;
  width: 100%;
}
.placeholder__svg--bg-none{
  background: rgba(0,0,0,0);
}
.icon-as-image img{
  width:var(--icon-image-width, 40px);
  height:auto;
}

.placeholder__svg--bg svg{
  display: flex;
  width: 100%;
  height: auto;
}
tag-image{
  display:flex;
  width:100%;
}
.image-hover-box__container{
  display:block;
  position:relative;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  height: max-content;
  z-index:0;
}
.image-hover-box{
  display:block;
  position:relative;
  border-radius: var(--custom-image-radius, var(--radius));
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  z-index:0;
}
.image-hover-box>*{
  pointer-events:none;
}
.change-to__small-radius .product-card swiper-slider,
.change-to__small-radius .image-hover-box,
.image-hover-box__small-radius{
  border-radius: var(--radius-image);
}
.image-hover-box--circle{
  border-radius: 50%!important;
}
@media (min-width:577px){
  .image-aspratio-round--desktop{
    border-radius: 50%!important;
  }
}
@media (max-width:576px){
  .image-aspratio-round--mobile{
    border-radius: 50%!important;
  }
}

summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
[style*="--aspect-ratio"]{
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index:0;
}
[style*="--aspect-ratio"] img,
[style*="--aspect-ratio"].placeholder__svg--bg svg{
  backface-visibility: hidden;
  transform: translateZ(0);
  object-fit: cover;
  object-position: var(--media-object-position, center);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:0;
}
.image-fit-contain [style*="--aspect-ratio"] img{
  object-fit: contain;
}
[style*="--aspect-ratio"]:before{
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(100%/(0 + var(--aspect-ratio, 1 / 1)));
  transition: background 1s var(--animation-bezier);
}
[style*="--aspect-ratio"].bg-preloader:before{
  background:var(--color-image-preloader-bg);
}
[style*="--aspect-ratio"].bg-preloader:has(.image-loaded):before{
  background:transparent; 
}
@media (max-width: 576px){
  [style*="--aspect-ratio-mobile"]:before{
    --aspect-ratio: var(--aspect-ratio-mobile);
  }
}
@media (min-width: 1025px){
  .image-hover01 .image-hover-box>*,
  .image-hover01-personal .image-hover-personal-element .image-hover-box>*{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover01:not(.image-hover01-rotate-personal):hover .image-hover-box>*,
  .image-hover01-personal:hover .image-hover-personal-element  .image-hover-box>*{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  .image-hover01.image-hover01-rotate:hover .image-hover-box>*,
  .image-hover01.image-hover01-rotate-personal:hover .image-hover-personal-element  .image-hover-box>*{
    -webkit-transform: scale(1.2) rotate(-10deg);
    transform: scale(1.2) rotate(-10deg);
  }
  .image-hover02 .image-hover-box img,
  .image-hover02-personal .image-hover-personal-element .image-hover-box img,
  .image-hover02 .image-hover-box svg{
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover02:hover .image-hover-box img,
  .image-hover02-personal:hover .image-hover-personal-element  .image-hover-box img,
  .image-hover02:hover .image-hover-box svg{
    max-width:116%;
    width:116%;
    height:116%;
  }
  .image-hover03 .image-hover-box>*,
  .image-hover03-personal .image-hover-personal-element .image-hover-box>*{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover03:hover .image-hover-box>*,
  .image-hover03-personal:hover .image-hover-personal-element  .image-hover-box>*{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .image-hover04 .image-hover-box img,
  .image-hover04-personal .image-hover-personal-element .image-hover-box img,
  .image-hover04 .image-hover-box svg{
    max-width:116%;
    width:116%;
    height:116%;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover04:hover .image-hover-box img,
  .image-hover04-personal:hover .image-hover-personal-element  .image-hover-box img,
  .image-hover04:hover .image-hover-box svg{
    max-width:100%;
    width:100%;
    height:100%;
  }
  .image-hover05 .image-hover-box img,
  .image-hover05-personal .image-hover-personal-element .image-hover-box img,
  .image-hover05 .image-hover-box svg{
    left: 0;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover05:hover .image-hover-box img,
  .image-hover05-personal:hover .image-hover-personal-element  .image-hover-box img,
  .image-hover05:hover .image-hover-box svg{
    left: -30px;
  }
  [class*="image-hover05"] img,
  [class*="image-hover05"] .placeholder__svg--bg svg{
    width: calc(100% + 30px);
    max-width:unset;
  }
  .image-hover06 .image-hover-box>*:after,
  .image-hover06-personal .image-hover-personal-element .image-hover-box>*:after{
    position: absolute;
    top: 0;
    left: -150%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
  }
  .image-hover06:hover .image-hover-box>*:after,
  .image-hover06-personal:hover .image-hover-personal-element  .image-hover-box>*:after{
    -webkit-animation: shine .75s;
    animation: shine .75s;
  }
  @-webkit-keyframes shine {
    1% {
      left: -100%;
    }
    100% {
      left: 125%;
    }
  }
  @keyframes shine {
    1% {
      left: -100%;
    }
    100% {
      left: 125%;
    }
  }
}

table{
  overflow:hidden;
  border: 0;
  padding: 0;
  background: none;
  border-collapse: separate;
  border-spacing: 0;
  border-radius:var(--radius-table);
  width: 100%;
  text-align: left;
  border: var(--border);
  --border: 1px solid var(--color-lines);
  word-break: break-word;
}
.scroll-table-mobile:not(:only-child) table,
table:not(:only-child){
  margin-top:var(--main-text-top-offset);
}
dd,dl{
  margin:0;
}
th{
  font-weight:var(--font-body-weight-bold);
}
td{
  font-weight:var(--font-body-weight);
  border:none;
}
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
  border-right: var(--border);
}
table>thead>tr:not(:last-child)>th,
table>thead>tr:not(:last-child)>td,
table>tbody>tr:not(:last-child)>th,
table>tbody>tr:not(:last-child)>td,
table>tfoot>tr:not(:last-child)>th,
table>tfoot>tr:not(:last-child)>td,
table>thead:not(:last-child)>tr>th,
table>thead:not(:last-child)>tr>td,
table>tbody:not(:last-child)>tr>th,
table>tbody:not(:last-child)>tr>td,
table>tfoot:not(:last-child)>tr>th,
table>tfoot:not(:last-child)>tr>td,
table>tr:not(:last-child)>td,
table>tr:not(:last-child)>th,
table>thead:not(:last-child),
table>tbody:not(:last-child),
table>tfoot:not(:last-child) {
  border-bottom: var(--border);
}
table th:not(:last-child),
table td:not(:last-child){
  border-right: var(--border);
}
td, th {
  padding:10px;
}
table h1, table h2, table h3, table h4, table h5, table h6{
  margin-top: 0;
  margin-bottom: 0;
}
table thead{
  text-align: left;
}
@media (max-width:576px){
  .scroll-table-mobile{
    overflow-y: hidden;
    overflow-x: auto;
    width: calc(100% + 15px);
    padding-right:20px;
  }
  .scroll-table-mobile table{
    width: max-content!important;
    min-width: 100%;
    max-width: 767px;
  }
}
.page-content__mockup img{
  border-radius:var(--radius);
}
.page-content__mockup iframe{
  display:block;
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin-top:var(--main-text-top-offset);
}
.page-content__mockup p iframe{
  margin-top:0;
}

.link{
  --color-link-text:var(--color-link-button-block, var(--color-accent-section, var(--color-link-button)));
  --color-link-icon:var(--color-link-button-icon-block, var(--color-accent-section, var(--color-link-button-icon)));
  --color-link-text-hover:var(--color-link-button-block-hover, var(--color-base-section, var(--color-link-button-hover)));
  --color-link-icon-hover:var(--color-link-button-icon-block-hover, var(--color-base-section, var(--color-link-button-icon-hover)));
  cursor: pointer;
  display: inline-flex;
  gap:5px;
  align-items: center;
  border: none;
  box-shadow: none;
  text-decoration: none;
  background-color: transparent;
  position:relative;
  padding: 0;
  margin: 0;
  text-decoration: none;
  color:var(--color-link-text);
  font-family:var(--font-body-family);
  font-style:var(--font-body-style);
  font-size:var(--font-body3-size);
  line-height:var(--font-body3-line-height);
  transition: color var(--duration-medium) var(--animation-bezier);
}
.link.link--medium{
  font-size: var(--font-body2-size);
  line-height: var(--font-body2-line-height);
  gap:8px;
}
.link.link--big{
  font-size: calc(19px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
  font-family: var(--font-h4h5h6-family,var(--font-heading-family));
  font-style: var(--font-h4h5h6-style,var(--font-heading-style));
  font-weight: var(--font-h4h5h6-weight,var(--font-heading-weight));
  line-height: var(--font-heading-line-height);
}
.link--max-content{
  width:max-content;
}
.link svg{
  flex: 0 0 auto;
}
.link svg path{
  fill: var(--color-link-icon);
}
.link.link-hover-span span{
  position:relative;
}
.link:not(.link-hover-span):before,
.link.link-hover-span span:before{
  content: "";
  position: absolute;
  width: 0;
  height:var(--animation-underline-thin);
  left: 0;
  top: 100%;
  background: var(--color-link-text-hover);
  transition: width var(--duration-medium) var(--animation-bezier);
  pointer-events:none;
}
.link.link--no-underline:before{
  content:none;
}
.link.link-hover-span span span:before{
  content: none;
}
.link.link-hover-span--underline span:before{
  width: 100%;
  background: var(--color-link-text);
}
.heading-color-block-main,
.heading-color-block-hover{
  --color-heading-block:var(--color-heading-link-block, var(--color-base-section, var(--color-heading-main)));
  color:var(--color-heading-block);
}
.heading-color-block-main.animation-underline{
  --color-hover:var(--color-heading-block);
}
@media (min-width: 1025px){
  .heading-color-block-hover {
    transition: color var(--duration-medium) var(--animation-bezier);
  }
  .heading-color-block-hover.animation-underline{
    --color-hover:var(--color-heading-hover-block, var(--color-accent-section, var(--color-accent)));
  }
  .hover-area:hover .link:not(.native-hover),
  .link:not(:empty):not(.empty):hover{
    text-decoration:none;
    color:var(--color-link-text-hover);
  }
  .heading-color-block-hover:hover,
  .hover-area:hover .heading-color-block-hover:not(.native-hover){
    text-decoration:none;
    color:var(--color-heading-hover-block, var(--color-accent-section, var(--color-accent)));
  }
  .hover-area:hover .link:not(.native-hover) svg path,
  .link:hover svg path{
    fill:var(--color-link-icon-hover);
  }
  .hover-area:hover .link:not(.native-hover):not(.link-hover-span):hover:before,
  .link:not(.link-hover-span):hover:before,
  .hover-area:hover .link.link-hover-span:not(.native-hover):hover span:before,
  .link.link-hover-span:hover span:before{
    text-decoration: none;
    width: 100%;
  }
  .link.link-hover-span--underline:hover span:before{
    width: 0%;
  }
}
.link.active,
.link.link-active{
  color:var(--color-link-text-hover);
}
.link.active svg path,
.link.link-active svg path{
  fill:var(--color-link-icon-hover);
}
.link.link-hover-span.active span:before,
.link.link-hover-span.link-active span:before{
  text-decoration: none;
  width: 100%;
}
.link__base-to_accent-color{
  --color-link-text: var(--color-link-button-block-inverse, var(--color-base-section, var(--color-base)));
  --color-link-icon: var(--color-link-button-icon-block-inverse, var(--color-base-section, var(--color-base)));
  --color-link-text-hover: var(--color-link-button-block-inverse-hover, var(--color-accent-section, var(--color-accent)));
  --color-link-icon-hover: var(--color-link-button-icon-block-inverse-hover, var(--color-accent-section, var(--color-accent)));
}

.btn{
  --background: var(--color-button-block, var(--color-accent-section, var(--color-button_main, var(--color-accent))));
  --color:var(--color-button-text_main, var(--color-base));
  --border:var(--color-button-border_main);
  --background-hover: var(--color-button-hover-block, var(--color-base-section, var(--color-button-hover_main, var(--color-base))));
  --background-program-hover: var(--background-hover);
  --color-hover:var(--color-button-text-hover_main, var(--color-accent));
  --border-hover:var(--color-button-border-hover_main);
  --border-width:var(--border-button-width_main);
  --border-width-hover:var(--border-button-width-hover_main);
  --icon:var(--color-button-icon_main, var(--color-base));
  --icon-hover:var(--color-button-icon-hover_main, var(--color-accent));
  --button-opacity-hover:var(--color-button-opacity-hover_main);
  --shadow-button-current:var(--shadow-button_main);
  --shadow-button-current-hover:var(--shadow-button-hover_main);
  --self-border-width:var(--border-button-width-value_main);
  --height:var(--button-height);
  --height-mobile:var(--button-height-mob);
  position: relative;
  display: inline-flex;
  vertical-align:top;
  justify-content: center;
  align-items:center;
  text-align:center;
  font-family: var(--font-button-family, var(--font-body-family));
  font-style: var(--font-button-style, var(--font-body-style));
  font-weight: var(--font-button-weight);
  font-size: calc(14px * var(--font-button_scale, var(--font-body-scale)));
  line-height: var(--font-body2-line-height);
  height:var(--height);
  background: transparent;
  color: var(--color);
  border-radius: var(--radius-button);
  padding: 0 25px 0;
  width: auto;
  text-decoration: none;
  cursor: pointer;
  box-shadow:var(--shadow-button-current);
  transition: color var(--duration-medium) var(--animation-bezier),
              box-shadow var(--duration-medium) var(--animation-bezier);
}
.btn>*{
  position:relative;
  z-index:1;
}
.btn-small-width{
  width:max-content;
}
.btn__texts{
  pointer-events:none;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  height:calc(var(--height) - var(--self-border-width) * 2);
  z-index:1;
}
.btn--large{
  --height:var(--button-height-big);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
}
.btn--border{
  --background: var(--color-button-block_secondary, var(--color-button_secondary, var(--color-body-background)));
  --color:var(--color-button-text_secondary, var(--color-accent-section, var(--color-accent)));
  --border:var(--color-button-border_secondary-block, var(--color-accent-section, var(--color-button-border_secondary, var(--color-accent))));
  --background-hover: var(--color-button-hover-block_secondary, var(--color-accent-section, var(--color-button-hover_secondary, var(--color-accent))));
  --color-hover:var(--color-button-text-hover_secondary, var(--color-base));
  --border-hover:var(--color-button-border-hover_secondary);
  --border-width:var(--border-button-width_secondary);
  --border-width-hover:var(--border-button-width-hover_secondary);
  --icon:var(--color-button-icon_secondary, var(--color-accent-section, var(--color-accent)));
  --icon-hover:var(--color-button-icon-hover_secondary, var(--color-base));
  --button-opacity-hover:var(--color-button-opacity-hover_secondary);
  --shadow-button-current:var(--shadow-button_secondary);
  --shadow-button-current-hover:var(--shadow-button-hover_secondary);
  --self-border-width:var(--border-button-width-value_secondary);
}
.btn--tabs{
  --background: var(--color-button-block_tabs, var(--color-button_tabs, var(--color-secondary-background)));
  --color:var(--color-button-text-block_tabs, var(--color-base-section, var(--color-button-text_tabs, var(--color-base))));
  --border:var(--color-button-border_tabs, var(--color-secondary-background));
  --background-hover: var(--color-button-hover-block_tabs, var(--color-base-section, var(--color-button-hover_tabs, var(--color-base))));
  --color-hover:var(--color-button-text-hover_tabs);
  --border-hover:var(--color-button-border-hover_tabs);
  --border-width:var(--border-button-width_tabs);
  --border-width-hover:var(--border-button-width-hover_tabs);
  --icon:var(--color);
  --icon-hover:var(--color-hover);
  --button-opacity-hover:var(--color-button-opacity-hover_tabs);
  --shadow-button-current:unset;
  --shadow-button-current-hover:unset;
  --self-border-width:var(--border-button-width-value_tabs);
}
.btn--tabs.active{
  --background: var(--color-button-hover-block_tabs, var(--color-base-section, var(--color-button-hover_tabs, var(--color-base))));
  --color:var(--color-button-text-hover_tabs);
  --border:var(--color-button-border-hover_tabs);
  --border-width:var(--border-button-width-hover_tabs);
  --button-opacity:var(--color-button-opacity-hover_tabs);
  cursor: default;
  pointer-events: none;
}
/* تعديل متغيرات زر الدفع فقط داخل الحاوية mt20 */
.mt20 .btn--checkout {
  /* 1. الألوان في الوضع الطبيعي (Normal State) */
  --background: #FF9F1C;       /* خلفية برتقالية بدل المتغير القديم */
  --color: #2D3748;            /* لون النص رمادي غامق */
  --border: #FF9F1C;           /* الإطار برتقالي */
  --icon: #2D3748;             /* لون الأيقونة (السهم) رمادي غامق */

  /* 2. الألوان عند تمرير الماوس (Hover State) */
  --background-hover: #2D3748; /* الخلفية تصير رمادي غامق */
  --color-hover: #FF9F1C;      /* النص يصير برتقالي */
  --border-hover: #2D3748;     /* الإطار يصير رمادي غامق */
  --icon-hover: #FF9F1C;       /* الأيقونة تصير برتقالي */

  /* 3. إعدادات نتركها كما هي للحفاظ على شكل الزر وأبعاده */
  --radius-button: var(--radius-button-product-page);
  --border-width: var(--border-button-width_checkout);
  --border-width-hover: var(--border-button-width-hover_checkout);
  --button-opacity-hover: var(--color-button-opacity-hover_checkout);
  --shadow-button-current: var(--shadow-button_checkout);
  --shadow-button-current-hover: var(--shadow-button-hover_checkout);
  --self-border-width: var(--border-button-width-value_checkout);
  --height: var(--button-height-big);
}
.btn--addtocart-page{
  --radius-button:var(--radius-button-product-page);
  --background: var(--color-button-block_addtocart, var(--color-accent-section, var(--color-button_addtocart, var(--color-accent))));
  --color:var(--color-button-text_addtocart, var(--color-accent));
  --border:var(--color-button-border_addtocart, var(--color-accent));
  --background-hover: var(--color-button-hover-block_addtocart, var(--color-base-section, var(--color-button-hover_addtocart, var(--color-base))));
  --color-hover:var(--color-button-text-hover_addtocart, var(--color-base));
  --border-hover:var(--color-button-border-hover_addtocart);
  --border-width:var(--border-button-width_addtocart);
  --border-width-hover:var(--border-button-width-hover_addtocart);
  --icon:var(--color-button-icon_addtocart, var(--color-accent));
  --icon-hover:var(--color-button-icon-hover_addtocart, var(--color-base));
  --button-opacity-hover:var(--color-button-opacity-hover_addtocart);
  --shadow-button-current:var(--shadow-button_addtocart);
  --shadow-button-current-hover:var(--shadow-button-hover_addtocart);
  --self-border-width:var(--border-button-width-value_addtocart);
}
.btn span>svg{
  max-width:20px;
  max-height:20px;
}
.btn svg path{
  fill: var(--icon);
  transition: fill var(--duration-medium) var(--animation-bezier);
}
.btn:hover{
  text-decoration: none;
}
.btn__top-text,
.btn__bottom-text{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.btn__top-text>svg,
.btn__bottom-text>svg{
  flex:0 0 auto;
}
.btn__no-shadow{
  box-shadow:unset;
}
.btn:before,
.btn:after{
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius: var(--radius-button);
  background: var(--background-hover);
  z-index:0;
  opacity:0;
  transition: all var(--duration-medium) var(--animation-bezier);
  border: var(--border-width) solid var(--border);
}
.btn:after{
  border: var(--border-width-hover) solid var(--border-hover);
}
.btn:before{
  background: var(--background);
  opacity:1;
  transition: none;
}
.secondary-btn__container{
  display: flex;
  flex-wrap:wrap;
  gap:15px;
}
@media (min-width:1025px){
  .hover-area:hover .btn:not(.native-hover),
  .btn:hover{
    color: var(--color-hover);
    box-shadow:var(--shadow-button-current-hover);
  }
  .hover-area:hover .btn:not(.native-hover) svg path,
  .btn:hover svg path{
    fill: var(--icon-hover);
  }
  .hover-area:hover .btn:not(.native-hover):before,
  .btn:hover:before{
    opacity:0;
    transition: all var(--duration-medium) 100ms var(--animation-bezier);
  }
  .hover-area:hover .btn:not(.native-hover):after,
  .btn:hover:after{
    opacity:1;
  }
  .btn__transition-text .btn__top-text.is-visible {
    position: relative;
    top: 0;
    padding-bottom: 1px;
  }
  .btn__transition-text .btn__bottom-text.is-hidden {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding-bottom: 1px;
    color: var(--color-hover);
  }
  svg~.btn__bottom-text.is-hidden{
    left: 30px;
  }
  .btn__transition-text .btn__bottom-text,
  .btn__transition-text .btn__top-text {
    transition: top 0.4s, transform 0.4s;
  }
  .hover-area:hover .btn__transition-text:not(.native-hover) .btn__bottom-text.is-hidden,
  .btn__transition-text:hover .btn__bottom-text.is-hidden {
    top: 50%;
    transform: translate(0, -50%);
  }
  .hover-area:hover .btn__transition-text:not(.native-hover) .btn__top-text.is-visible,
  .btn__transition-text:hover .btn__top-text.is-visible {
    top: -20em;
  }
}
@media (min-width:577px){
  .btn-wide{
    width:100%;
    max-width:var(--button-width-wide);
  }
  .btn-wide2{
    min-width:var(--button-width-wide);
    max-width:100%;
  }
}
@media (max-width:1024px){ 
  .btn__bottom-text.is-hidden {
    display:none;
  }
  .w-t-full{
    width:100%;
    max-width:100%;
  }
}
@media (max-width:576px){
  .btn{
    --height:var(--height-mobile);
  }
  .btn--large,.btn--checkout{
    --height:var(--button-height-big-mob);
  }
  .btn-wide-mob,
  .btn-wide,
  .btn-wide2{
    width:100%;
  }
}
.btn[aria-disabled=true]{
  cursor: not-allowed;
  opacity:.3;
}
.link[aria-disabled=true]{
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}
.separate-line{
  height:1px;
  background:var(--color-lines);
  width:100%;
}

.animation-underline{
  --color-hover:var(--color-animation-underline,var(--color-accent-section, var(--color-accent)));
  display: inline-flex;
  position: relative;
  text-decoration: none;
}
.animation-underline:before{
  content: "";
  position: absolute;
  width: 0;
  height: var(--animation-underline-thin);
  left: 0;
  top: 100%;
  background: var(--color-hover);
  transition: width var(--duration-medium) var(--animation-bezier);
  pointer-events:none;
}
.animation-underline--active:before{
  width: 100%;
}
@media (min-width: 1025px){
  .animation-underline:hover{
    text-decoration:none;
  }
  .hover-area:hover .animation-underline:not(.native-hover):before,
  .animation-underline:hover:before{
    text-decoration: none;
    width: 100%;
  }
  .hover-area:hover .animation-underline:not(.native-hover):not(.default-state):hover:before{
    text-decoration: none;
    width: 0;
  }
  .button-transition-up>*,
  a.transition-up>*{
    position:relative;
    transition: all 0.20s ease-out;
  }
  .button-transition-up:hover>*,
  a.transition-up:hover>*{
    transform: translateY(-5px);
  } 
}
.badges__container{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  pointer-events:none;
  font-weight: var(--font-body-weight-bold);
}
.badges__container--gap5{
  gap:5px;
}
.badges__container .badges-item__menu{
  margin-left:0;
}
.badges-item__small{
  border-radius:var(--radius-badge);
  font-size:10px;
  padding: 2px 5px 3px;
}
.badges-item__medium{
  border-radius:var(--radius-badge);
  font-size:12px;
  padding: 7px 12px;
  width:max-content;
}
.badges-item__menu{
  display:inline-flex;
  margin-left:5px;
  vertical-align: middle;
  background:var(--auto-accent-color-bg);
  color:var(--auto-accent-color-text);
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden {
  overflow: hidden;
}
@media (min-width: 1025px){
  .hide-desktop{
    display:none !important;
  }
}
@media (max-width: 1024px){
  .hide-mobile-xl-st{
    display:none !important;
  }
}

terms_and_condition-checkbox{
  display:block;
}
terms_and_condition-checkbox:not(.checked)+*,
terms_and_condition-checkbox:not(.checked)~.cart__dynamic-checkout-buttons {
  pointer-events: none;
  opacity: .3;
}

.accent-color{
  color:var(--color-accent-section, var(--color-accent));
}
.accent-to-base-color{
  color:var(--color-base);
}
.w-full {width:100%;}
.h-full {height:100%;}
@media (min-width:577px){
  .h-full-desktop-tablet {height:100%;}
}
@media (max-width:576px){
  .w-full-mobile {
    width:100%;
  }
}
.shopify-challenge__message{
  margin:0 0 30px;
}
.shopify-challenge__container .shopify-challenge__button{
  margin:40px auto 0;
}
.shopify-challenge__container{
  margin:200px auto;
}

.section__richtext__editor>:first-child{
  margin-top:0;
}
.section__richtext__editor h1,
.section__richtext__editor h2,
.section__richtext__editor h3,
.section__richtext__editor h4,
.section__richtext__editor h5,
.section__richtext__editor h6{
  margin: 0;
}
.section__richtext__editor ul,
.section__richtext__editor ol{
  margin:0;
  padding:0 0 0 40px;
  max-width: max-content;
}
.text-center .section__richtext__editor ul,
.text-center .section__richtext__editor ol,
.text-center.section__richtext__editor ul,
.text-center.section__richtext__editor ol{
  margin-left: auto;
  margin-right: auto;
}
.section__richtext__editor>*:not(:first-child){
  margin-top:16px;
}
.section__richtext__editor.section__richtext__editor--mt10>*:not(:first-child){
  margin-top:10px;
}

.loading-overlay__spinner{
  position:absolute;
  width: 20px;
  height: 20px;
  display: inline-block;
  z-index: 1;
}
.loading > *:not(.loading-overlay__spinner){
  opacity: 0;
  visibility: hidden;
}
.spinner {
  animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: var(--color-loader, var(--color-base-section, var(--color-base)));
  animation: dash 1.4s ease-in-out infinite;
}
.btn .path {
  stroke: var(--icon-hover);
}
@media screen and (forced-colors: active) {
  .path{
    stroke: CanvasText;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}
@media (hover:hover){
  .modal-close-animation svg{
    transition: transform var(--duration-medium) cubic-bezier(0.5, -0.33, 0.26, 1.19);
  }
  .modal-close-animation:hover svg{
    transform: rotate(90deg);
  }
}

.themeloader_container {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition: opacity var(--duration-medium) var(--animation-bezier),
              visibility var(--duration-medium) var(--animation-bezier);
}
.themeloader_container--absolute {
  position:absolute;
}
@media (min-width:1025px){
  .themeloader_container {
    left:var(--left, 0);
    right:var(--right, 0);
  }
}
.themeloader_container.loading_now {
  opacity:1;
  visibility:visible;
}
.themeloader_container__content{
  transform: scale(.7);
}
.themeloader {
  -webkit-animation: rotate 1.2s linear infinite normal;
          animation: rotate 1.2s linear infinite normal;
  position: relative;
  transform-origin: 50% 50%;
  transform: scale(0.7);
}
.themeloader__ball {
  height: 1.75rem;
  left: -0.875rem;
  position: absolute;
  top: -0.875rem;
  transform-origin: 50% 50%;
  width: 1.75rem;
}
.themeloader__ball:nth-of-type(2) {
  transform: rotate(120deg);
}
.themeloader__ball:nth-of-type(3) {
  transform: rotate(240deg);
}
.themeloader__ball::after {
  -webkit-animation: moveAndScale 0.6s ease-in-out infinite alternate;
          animation: moveAndScale 0.6s ease-in-out infinite alternate;
  background-color: var(--color-accent);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes moveAndScale {
  0%, 15% {
    transform: translateY(0) scale(0.65);
  }
  100% {
    transform: translateY(-150%) scale(1);
  }
}
@keyframes moveAndScale {
  0%, 15% {
    transform: translateY(0) scale(0.65);
  }
  100% {
    transform: translateY(-150%) scale(1);
  }
}
.big-svg-icon svg{
  width:40px;
  height:40px;
}
.big-svg-icon__opacity-20{
  opacity:0.2;
}
.color-error{
  color:var(--color-error);
}

*:focus {
  outline: 0;
}
*:focus-visible:not(textarea):not(input):not(select){
  outline: 4px solid #0909FF;
  outline-offset: 3px;
}
.breadcrumb-background{
  background:var(--color-breadcrumb-background, transparent);
}
@media (min-width:1025px){
  .breadcrumb .breadcrumb-background-boxed{
    padding-left:20px;
    padding-right:20px;
    border-radius:var(--radius);
    background:var(--color-breadcrumb-background, transparent);
  }
}
@media (max-width:1024px){
  .breadcrumb:has(.breadcrumb-background-boxed){
    background:var(--color-breadcrumb-background, transparent);
  }
}
.breadcrumb__container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 5px;
  column-gap: 21px;
  padding:18px 0;
  color:var(--color-breadcrumb-text, var(--color-base));
}
.breadcrumb li {
  position:relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb li:not(:last-child):before {
  content:"";
  display:flex;
  position:absolute;
  right:-11px;
  width:1px;
  height:15px;
  background:var(--color-breadcrumb-line, var(--color-lines));
}
.breadcrumb__container__home svg path{
  fill: var(--color-breadcrumb-text, var(--color-base));
}
.breadcrumb__container__home:hover svg path{
  fill: var(--color-breadcrumb-text-hover, var(--color-accent));
}
.breadcrumb .link{
    --color-link-text: var(--color-breadcrumb-text, var(--color-base));
    --color-link-text-hover: var(--color-breadcrumb-text-hover, var(--color-accent));
}
body:has(header .page-wide) .breadcrumb .page-width{
  width: 100%;
  max-width: unset;
  margin-left: unset;
  margin-right: unset;
}
@media (min-width:1025px){
  .content-for-layout .shopify-policy__container{
    max-width: calc(var(--page-width) * 2 / 3);
    width: calc(var(--page-width) * 2 / 3);
  }
}
.index-top-spacing-none+[class*="top-spacing"]{
  margin-top:0;
}
.footer__content{
  margin-top: auto;
}
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--radius-button);
  --shopify-accelerated-checkout-button-block-size:50px;
}
.cart-notification__content shopify-accelerated-checkout,
.cart-notification__content shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size:40px;
}
@media(min-width:577px){
  .product-card-name-size{
    font-size:var(--product-name-size);
  }
}
@media(max-width:576px){
  .product-card-name-size{
    font-size:var(--product-name-size-mobile);
  }
}
/* =========================================
   كود زر الشراء الاحترافي - نسخة الكبسولة (Pill Shape)
   ========================================= */

/* 1. تعريف حركة اللمعة (الوهج المتحرك) */
@keyframes shine-sweep {
  0% { left: -100%; opacity: 0; }
  20% { left: -100%; opacity: 0.5; }
  50% { left: 150%; opacity: 0.5; } 
  100% { left: 150%; opacity: 0; }
}

/* 2. تصميم الزر الأساسي */
.product-form__submit, 
button[name="add"] {
  /* --- التعديل الأساسي هنا (شكل الكبسولة) --- */
  border-radius: 110px !important; /* هذا الرقم بيخليه مدور عالاخر */
  
  position: relative; 
  overflow: hidden; 
  
  /* --- باقي المواصفات --- */
  background-color: #FF9F1C !important; 
  color: #2D3748 !important; 
  font-weight: 800 !important; 
  box-shadow: 0px 6px 0px #C67C15 !important; 
  transition: all 0.2s ease-in-out; 
  border: none !important; 
  padding: 16px 30px; /* كبرت العرض شوي عشان يناسب التدوير */
}

/* 3. إضافة عنصر اللمعة (الوهج) */
.product-form__submit::after, 
button[name="add"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%; 
  width: 80%; 
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg); 
  animation: shine-sweep 4s ease-in-out infinite;
}

/* 4. تأثير الهوفر */
.product-form__submit:hover, 
button[name="add"]:hover {
  background-color: #2D3748 !important; 
  color: #FFFFFF !important; 
  box-shadow: 0px 6px 0px #1A202C !important; 
  transform: translateY(-2px); 
}

/* 5. تأثير الضغط */
.product-form__submit:active, 
button[name="add"]:active {
  box-shadow: 0px 0px 0px #C67C15 !important; 
  transform: translateY(6px) !important; 
  transition: 0.1s; 
}
/* =========================================
   تغيير لون وصف سكشن Lookbook
   ========================================= */

/* محاولة 1: استهداف الاسم الشائع في هذا النوع من الثيمات */
.lookbook__desc, 
.lookbook__description, 
.lookbook__text {
    color: #888888 !important;
}

/* محاولة 2: استهداف أي نص داخل كلاس يحتوي على كلمة lookbook */
div[class*="lookbook"] p,
div[class*="lookbook"] .rte,
.section-lookbook p {
    color: #888888 !important;
}

/* محاولة 3: استهداف النص بناءً على مكانه العام إذا كان الكود معقداً */
.lookbook-content p,
.lookbook-card__desc {
    color: #888888 !important;
}
/* =========================================
   حركة النبض - مخصصة لسكشن Lookbook فقط
   (يمنع تأثير الحركة على باقي الموقع)
   ========================================= */

@keyframes urgent-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); } 
  100% { transform: scale(1); }
}

/* استهداف العنوان فقط إذا كان داخل عنصر يحمل اسم lookbook */
[class*="lookbook"] h5.subheading,
.lookbook h5.subheading,
section[id*="lookbook"] h5.subheading {
    animation: urgent-pulse 2s infinite ease-in-out !important;
    display: inline-block !important;
    font-weight: 800 !important;
    color: #FF4444 !important;
}
/* =========================================
   تعديل بادج Sale الاحترافي - نسخة (اللمعة + النبض)
   The Ultimate Attention Grabber
   ========================================= */

/* 1. تصميم البادج الأساسي + حركة النبض */
.badges-item__sale {
  /* --- التصميم --- */
  background: linear-gradient(90deg, #D32F2F, #FF5252) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  letter-spacing: 1.5px !important;
  
  /* --- تجهيز اللمعة --- */
  position: relative !important;
  overflow: hidden !important; 
  display: inline-block !important;

  /* --- تشغيل حركة النبض (Pulse) --- */
  animation: badge-pulse 2s infinite !important;
}

/* 2. عنصر اللمعة (الشعاع الأبيض) */
.badges-item__sale::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%) !important;
  transform: skewX(-25deg) !important;
  
  /* --- تشغيل حركة اللمعة (Shine) --- */
  animation: shine-badge 3s infinite !important;
}

/* 3. تعريف حركة اللمعة (مرور الضوء) */
@keyframes shine-badge {
  0% { left: -100%; }
  20% { left: 200%; } 
  100% { left: 200%; }
}

/* 4. تعريف حركة النبض (تكبير + هالة ظل) */
@keyframes badge-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); /* بداية الظل */
  }
  70% {
    transform: scale(1.05); /* تكبير بسيط */
    box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); /* الظل يتوسع ويختفي */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(211, 47, 47, 0);
  }
}
/* =========================================
   FIX: RELOVVI MOBILE - FINAL POLISH (GOLD EDITION)
   ========================================= */
@media screen and (max-width: 768px) {

  /* 1. الحاوية الرئيسية */
  .lookbook__product-card,
  .lookbook__product-card > div,
  .lookbook__product-card .product-card__content {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: center !important;
      width: 100% !important;
      height: auto !important;
      position: relative !important;
      padding-bottom: 15px !important;
  }

  /* 2. تعديل ألوان الخطوط (كحلي غامق) */
  .lookbook__product-card__content,
  .lookbook__product-card__content a,
  .product-meta,
  .product-card__title,
  .price-list {
      width: 100% !important;
      text-align: center !important;
      margin-bottom: 15px !important;
      position: static !important;
      color: #2D3748 !important; /* طلبك الأول */
  }

  /* 3. المباعدة بين Sale واسم البراند */
  .product-card__badge, 
  .badge {
      margin-bottom: 12px !important; /* مسافة تحت الـ Sale */
      display: inline-block !important;
  }
  
  .product-card__vendor,
  .product-meta {
      margin-top: 5px !important; /* مسافة إضافية للأمان */
  }

  /* 4. تنظيف منطقة الأزرار */
  .lookbook__product-card__interface,
  .product-card__actions,
  .product-form,
  div[class*="actions"],
  form[action*="/cart/add"] {
      display: block !important;
      width: 100% !important;
      position: static !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      float: none !important;
  }

  /* 5. تنسيق الزر (الأساسي) */
  .lookbook__product-card__button,
  button[name="add"] {
      width: 100% !important;
      height: 50px !important;
      margin-top: 10px !important;
      background-color: #FF9F1C !important; /* اللون الأصلي */
      color: #2D3748 !important;
      border-radius: 50px !important;
      border: 1px solid #FF9F1C !important;
      position: relative !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      transition: all 0.3s ease !important; /* نعومة في الحركة */
  }

  /* 6. تأثير الهوفر (Hover Effect) - الطلب الثالث */
  .lookbook__product-card__button:hover,
  button[name="add"]:hover,
  .lookbook__product-card__button:active {
      background-color: #2D3748 !important; /* الخلفية كحلي */
      color: #FF9F1C !important; /* الكتابة ذهبي */
      border-color: #2D3748 !important;
  }

  /* 7. إعادة أيقونة السلة (الطلب الثاني) */
  .lookbook__product-card__button svg,
  .btn__icon {
      display: inline-block !important; /* إظهار الأيقونة */
      width: 20px !important;
      height: 20px !important;
      margin-right: 8px !important; /* مسافة بين الأيقونة والنص */
      fill: currentColor !important; /* عشان توخذ نفس لون النص (أبيض أو ذهبي) */
      opacity: 1 !important;
  }

  /* 8. تنسيق النص داخل الزر */
  .lookbook__product-card__button span,
  .btn__text {
      display: inline-block !important;
      color: inherit !important; /* يتبع لون الزر */
      font-weight: bold !important;
      font-size: 15px !important;
  }
  
  /* 9. إخفاء التكرار فقط (عشان ما يرجع يخرب) */
  .lookbook__product-card__button span:nth-of-type(n+2) {
      display: none !important;
  }
}
/* ============================================================
   RELOVVI: BIGGER FONT & PERFECT SPACING (FINAL)
   ============================================================ */

@media screen { 

 
      /* 1. الزر في الوضع الطبيعي */
  .lookbook__product-card__button,
  button[name="add"] {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      
      gap: 15px !important;
      padding: 0 20px !important;
      height: 55px !important;
    
 
  /* ألوان الوضع الطبيعي */
      background-color: #FF9F1C !important;
      color: #2D3748 !important;
      border: 2px solid #FF9F1C !important;
      border-radius: 50px !important;
      width: 100% !important;
      box-shadow: none !important; 
      border-bottom: 2px solid #FF9F1C !important;
      transition: all 0.2s ease-in-out !important;
  }

 
/* 3. (الجزء الجديد) إجبار الأيقونة وكل محتوياتها أن تصبح برتقالي */
  .lookbook__product-card__button:hover svg,
  .lookbook__product-card__button:hover svg path,
  .lookbook__product-card__button:hover svg g,
  .lookbook__product-card__button:active svg,
  button[name="add"]:hover svg,
  button[name="add"]:hover svg path,
  button[name="add"]:active svg {
      fill: #FF9F1C !important;  /* صبغ التعبئة */
     
      color: #FF9F1C !important;
      opacity: 1 !important;
  }

      
      /* في الوضع الطبيعي تتبع لون النص الكحلي */
      fill: #2D3748 !important; 
      transition: fill 0.2s ease-in-out !important;
  }
  /* 3. قتل الأيقونات المكررة (الحل الجذري للمشكلة بالصورة) */
  /* إخفاء أي أيقونة بتيجي بعد الأيقونة الأولى */
  .lookbook__product-card__button svg ~ svg,
  button[name="add"] svg ~ svg,
  button[name="add"]::before, 
  button[name="add"]::after { 
      display: none !important; 
      content: none !important;

  }

  /* 3. تكبير الأيقونة لتناسب الخط الجديد */
  .lookbook__product-card__button svg,
  .btn__icon {
      width: 26px !important; /* كبرتها لـ 26 */
      height: 26px !important;
      fill: currentColor !important;
      flex-shrink: 0 !important;
      margin: 0 !important;

  }

  /* 4. تكبير الخط (الطلب الرئيسي) */
  .lookbook__product-card__button span,
  .btn__text {
      font-weight: 800 !important;
      font-size: 22px !important; /* كبرته لـ 20 بكسل */
      line-height: 1 !important;
      white-space: nowrap !important;
      letter-spacing: 0.5px !important;
  }
  
  /* 5. ضمان ثبات العناصر */
  .lookbook__product-card__button > * {
      flex: 0 0 auto !important;
      width: auto !important;
      position: static !important;
  }
}
/* إضافة: إجبار الأيقونة تصير برتقالي عند الهوفر */
.lookbook__product-card__button:hover svg,
.lookbook__product-card__button:active svg,
button[name="add"]:hover svg,
button[name="add"]:active svg {
    fill: #FF9F1C !important;   /* صبغة التعبئة برتقالي */
    transition: fill 0.2s ease-in-out;
}
/* ============================================================
   FIX: SPACING USING EXACT HTML CLASSES (MOBILE)
   ============================================================ */
@media screen and (max-width: 768px) {

  /* 1. استهداف حاوية بادج الـ Sale بالاسم الصحيح */
  .lookbook__product-card .badges__container__mobile,
  .badges__container__mobile {
      display: block !important;      /* حجز سطر كامل */
      width: 100% !important;
      margin-bottom: 20px !important; /* هذه هي المسافة القوية للأسفل */
      padding-bottom: 5px !important;
      position: relative !important;
      clear: both !important;         /* تنظيف أي عناصر عائمة حوله */
  }

  /* 2. استهداف حاوية اسم Relovvi (الكلاس body3 و mt3) */
  .lookbook__product-card .body3,
  .lookbook__product-card .body3.mt3 {
      display: block !important;
      margin-top: 15px !important;    /* إضافة مسافة إجبارية من فوق */
      padding-top: 10px !important;   /* حشوة إضافية لضمان الفصل */
      position: relative !important;
      clear: both !important;         /* منع التداخل مع البادج */
  }
  
  /* 3. التأكد من أن الرابط داخل الاسم لا يطفو */
  .lookbook__product-card .body3 a {
      display: inline-block !important;
  }
}
/* ============================================================
   FIX: REMOVE GOLDEN BORDER ON DESKTOP HOVER
   ============================================================ */
@media screen and (min-width: 769px) { /* يطبق على الكمبيوتر فقط */

  .lookbook__product-card__button:hover,
  button[name="add"]:hover {
      /* جعل لون الحدود كحلي (نفس لون الخلفية) لإخفاء الإطار الذهبي */
      border-color: #2D3748 !important; 
      
      /* إزالة أي توهج أو ظل خارجي قد يسببه القالب */
      outline: none !important;
      box-shadow: none !important;
      
      /* ضمان أن الخلفية تظل كحلي */
      background-color: #2D3748 !important;
  }
}
/* ============================================================
   RELOVVI: TARGETED FIX FOR "QUICK ADD" BUTTON
   ============================================================ */

@media screen { 

  /* 1. تنسيق الزر الأساسي (الحاوية) */
  .quick-add__submit,
  button[name="add"] {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      
      /* إعداداتك: الارتفاع والمسافات */
      height: 55px !important;
      padding: 0 20px !important;
      width: 100% !important;
      border-radius: 50px !important;
      
      /* إعداداتك: الألوان الطبيعية (خلفية برتقالي) */
      background-color: #FF9F1C !important;
      color: #2D3748 !important;
      border: 2px solid #FF9F1C !important;
      border-bottom: 2px solid #FF9F1C !important;
      
      box-shadow: none !important; 
      transition: all 0.2s ease-in-out !important;
  }

  /* 2. تنسيق النصوص داخل الزر (Visible & Hidden Spans) */
  /* هذا الجزء يضمن تطبيق التباعد وحجم الخط على النص والايقونة معاً */
  .quick-add__submit .btn__top-text,
  .quick-add__submit .btn__bottom-text {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 15px !important; /* الـ Gap من إعداداتك */
      
      /* إعداداتك: حجم الخط والنوع */
      font-weight: 800 !important;
      font-size: 22px !important; 
      line-height: 1 !important;
      white-space: nowrap !important;
      letter-spacing: 0.5px !important;
  }

  /* 3. تنسيق الأيقونة (SVG) */
  .quick-add__submit svg,
  button[name="add"] svg {
      width: 26px !important; /* حجم الأيقونة من إعداداتك */
      height: 26px !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
      
      /* جعل لون الأيقونة يتبع لون النص */
      fill: currentColor !important;
      transition: fill 0.2s ease-in-out !important;
  }

  /* 4. إخفاء العناصر الزائدة أو المكررة */
  .quick-add__submit svg ~ svg,
  .quick-add__submit::before, 
  .quick-add__submit::after { 
      display: none !important; 
      content: none !important;
  }
}

/* ============================================================
   HOVER EFFECTS (تأثير الماوس)
   ============================================================ */

/* عند الهوفر: الخلفية كحلي والنص برتقالي */
@media screen and (min-width: 769px) {
  .quick-add__submit:hover,
  button[name="add"]:hover {
      background-color: #2D3748 !important;
      border-color: #2D3748 !important;
      color: #FF9F1C !important;
      
      outline: none !important;
      box-shadow: none !important;
  }
  
  /* إجبار الأيقونة لتصبح برتقالي عند الهوفر */
  .quick-add__submit:hover svg path,
  button[name="add"]:hover svg path {
      fill: #FF9F1C !important;
  }
}

/* ============================================================
   MOBILE SPACING (تعديلات الموبايل من الكود السابق)
   ============================================================ */
@media screen and (max-width: 768px) {
  /* تعديل مسافات البادج واسم المنتج */
  .badges__container,
  .badges__container__mobile {
      display: block !important;
      width: 100% !important;
      margin-bottom: 20px !important;
      padding-bottom: 5px !important;
  }

  .product-card__heading,
  .body3.mt3 {
      display: block !important;
      margin-top: 15px !important;
      padding-top: 10px !important;
  }
}
/* ============================================================
   ADDON: GLOW EFFECT (تأثير الوهج المنفصل)
   ============================================================ */

/* هذا الكود يضيف تأثير وهج (Glow) ناعم حول الزر عند تمرير الماوس (Hover).
   لقد استخدمت لوناً كحلياً للوهج ليتماشى مع لون الزر عند الهوفر.
*/

@media screen and (min-width: 769px) { /* تطبيق التأثير على الكمبيوتر */
  
  .quick-add__submit:hover,
  button[name="add"]:hover {
      /* تأثير الوهج باستخدام طبقتين من الظل:
         1. الطبقة الأولى: مركزة وقريبة (20px).
         2. الطبقة الثانية: منتشرة وناعمة (40px).
         اللون المستخدم هو الكحلي (RGB: 45, 55, 72) بشفافية متفاوتة.
      */
      box-shadow: 0 0 25px rgba(45, 55, 72, 0.7), 
                  0 0 50px rgba(45, 55, 72, 0.4) 
                  !important; 
      
      /* التأكد من أن الحركة ناعمة */
      transition: all 0.3s ease-in-out !important;
      
      /* رفع الزر قليلاً لتعزيز تأثير الطفو */
      transform: translateY(-3px) !important; 
  }
}
/* ============================================================
   FIXED SHINE ANIMATION (تأثير اللمعة - نسخة الإصلاح)
   ============================================================ */

/* 1. تعريف الحركة (تتحرك من اليسار لليمين مع فترة توقف) */
@keyframes shineMove {
    0% {
        left: -100%; 
        opacity: 0;
    }
    10% {
        opacity: 1; /* تظهر */
    }
    40% {
        left: 200%; /* تعبر الزر */
        opacity: 0;
    }
    100% {
        left: 200%; /* انتظار */
        opacity: 0;
    }
}

/* 2. إعداد الزر الأساسي */
.quick-add__submit,
button[name="add"] {
    position: relative !important;
    overflow: hidden !important; /* لقص اللمعة الزائدة */
    z-index: 1 !important; /* تأسيس طبقة */
}

/* 3. مهم جداً: رفع النص والأيقونة فوق اللمعة */
.quick-add__submit .btn__texts,
button[name="add"] .btn__texts {
    position: relative !important;
    z-index: 10 !important; /* النص يكون فوق اللمعة */
}

/* 4. عنصر اللمعة (الشعاع) */
.quick-add__submit::after,
button[name="add"]::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important; /* عرض الشعاع */
    height: 100% !important;
    
    /* لون أبيض متدرج واضح */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.6) 50%, /* زدت الشفافية لـ 0.6 لتوضيح اللمعة */
        rgba(255, 255, 255, 0) 100%
    ) !important;
    
    transform: skewX(-25deg) !important; /* إمالة الشعاع */
    z-index: 2 !important; /* تحت النص (10) وفوق الخلفية (1) */
    
    /* تشغيل الحركة: تتكرر كل 3 ثواني */
    animation: shineMove 3s infinite ease-in-out !important;
    display: block !important;
    pointer-events: none !important;
}

/* 5. إطفاء اللمعة فوراً عند وضع الماوس (Hover) */
.quick-add__submit:hover::after,
button[name="add"]:hover::after {
    opacity: 0 !important;
    animation: none !important;
    display: none !important;
}
/* إخفاء قسم خيارات المنتج (Variants) بالكامل */
card-variant-selects {
    display: none !important;
}
/* إزالة بادج Sale المكرر (الخاص بنسخة الموبايل الظاهر خطأً) */
.lookbook__product-card__content__main .badges__container__mobile {
    display: none !important;
}
/* زيادة المسافة بين بادج Sale وعنوان المنتج في قسم Lookbook */
.lookbook__product-card__heading {
    margin-top: 40px !important; /* تحكم في الرقم لزيادة او تنقيص المسافة */
    display: block !important;   /* ضمان أن العنصر يأخذ حيزاً ويدفع ما فوقه */
}
/* تغيير لون خلفية السكشن كامل للأوف وايت */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D {
  background-color: #F8F9FA !important;
}

/* تغيير لون العناوين للون التيل */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D h5.heading-color-block-main {
  color: #40C4AA !important;
}

/* تغيير لون الأيقونات للون التيل */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D svg path {
  fill: #40C4AA !important;
}

/* تغيير لون النصوص للون الرمادي الغامق */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .body2 p {
  color: #2D3748 !important;
}

/* جعل خلفية المربع الصغير خلف الأيقونة بيضاء لتعطي بروز */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .section-text-with-icons-type-2__icon__bg {
  background-color: #FFFFFF !important;
  border-radius: 10px;
}
/* 1. إخفاء النصوص الوصفية (الديسكربشن) */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .body2 {
  display: none !important;
}

/* 2. ضبط المحاذاة لتكون في المنتصف عمودياً (بين الأيقونة والعنوان) */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .section-text-with-icons-type-2 {
  align-items: center !important;
}

/* 3. إزالة المسافة السفلية للعنوان ليكون التوسط دقيقاً */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D h5.heading-color-block-main {
  margin-bottom: 0 !important;
  color: #40C4AA !important; /* لون التيل */
}

/* 4. تلوين الأيقونات */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D svg path {
  fill: #40C4AA !important; /* لون التيل */
}

/* 5. خلفية السكشن كامل (أوف وايت) */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D {
  background-color: #F8F9FA !important;
}

/* 6. خلفية بيضاء وراء الأيقونة للبروز */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .section-text-with-icons-type-2__icon__bg {
  background-color: #FFFFFF !important;
  border-radius: 10px;
}
/* =========================================
   1. تنسيقات عامة (ألوان + إخفاء الوصف + الترتيب)
   ========================================= */

/* تلوين العناوين والأيقونات بلون التيل */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D h5.heading-color-block-main {
  color: #40C4AA !important;
  margin-bottom: 0 !important;
}
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D svg path,
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D svg {
  fill: #40C4AA !important;
}

/* إخفاء النصوص الوصفية */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .body2 {
  display: none !important;
}

/* لون الخلفية */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D {
  background-color: #F8F9FA !important;
  padding: 20px 0;
}

/* ترتيب العناصر للشاشات الكبيرة (Desktop) */
#theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .section-text-with-icons-type-2__container {
  display: flex;
  flex-wrap: wrap;
}
/* الشحن أولاً، الجودة ثانياً، الدعم ثالثاً */
#theme-block-item_C96RPi { order: 1; }
#theme-block-item_QEy4nM { order: 2; }
#theme-block-item_JreJXf { order: 3; }


/* =========================================
   2. حركة التبديل (Fade) للموبايل فقط
   ========================================= */
@media (max-width: 767px) {
  
  /* تحويل الحاوية إلى Grid لتكديس العناصر فوق بعض */
  #theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .section-text-with-icons-type-2__container {
    display: grid !important;
    grid-template-columns: 1fr; /* عمود واحد */
    height: 80px; /* ارتفاع ثابت */
    align-items: center;
    justify-items: center;
    overflow: hidden;
  }

  /* جعل كل العناصر في نفس الخانة (فوق بعض) */
  #theme-section-template--26620358197619__text_columns_with_icons_type_2_GnJA3D .section-text-with-icons-type-2__item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    opacity: 0; /* مخفي افتراضياً */
    z-index: 1;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* تنسيق المحتوى الداخلي ليكون في الوسط */
  .section-text-with-icons-type-2 {
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- تعريف أنيميشن الظهور والاختفاء --- */
  /* تم تعديل النسب لتتناسب مع مدة 20 ثانية */
  @keyframes relovviFade {
    0% { opacity: 0; z-index: 1; }
    5% { opacity: 1; z-index: 2; }     /* ظهور سريع */
    28% { opacity: 1; z-index: 2; }    /* بقاء */
    33.33% { opacity: 0; z-index: 1; } /* اختفاء قبل بدء التالي (ثلث المدة) */
    100% { opacity: 0; z-index: 1; }
  }

  /* تطبيق الأنيميشن (مدة الدورة كاملة 20 ثانية) */
  
  /* 1. الشحن (يظهر فوراً) */
  #theme-block-item_C96RPi {
    animation: relovviFade 20s infinite;
    animation-delay: 0s;
  }

  /* 2. الجودة (يظهر بعد 6.66 ثانية) */
  #theme-block-item_QEy4nM {
    animation: relovviFade 20s infinite;
    animation-delay: 6.66s;
  }

  /* 3. الدعم (يظهر بعد 13.33 ثانية) */
  #theme-block-item_JreJXf {
    animation: relovviFade 20s infinite;
    animation-delay: 13.33s;
  }
}
/* --- استيراد الخط --- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* استهداف السكشن */
div[data-section-name="contact-form"] {
    background-color: #F7FAFC !important;
    padding: 60px 20px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* تنسيق الحاوية */
div[data-section-name="contact-form"] .page-width-half {
    background: #ffffff !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 40px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

/* العناوين */
div[data-section-name="contact-form"] .section-heading-text {
    color: #4FD1C5 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
}

div[data-section-name="contact-form"] .section-heading-desc-text {
    color: #718096 !important;
    font-size: 16px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* --- تنسيق الحقول (Inputs & Textarea) --- */

/* حاوية الحقل: ضرورية لتحريك العناصر بداخلها */
div[data-section-name="contact-form"] .field {
    position: relative !important;
    margin-bottom: 20px !important;
}

/* الحقل نفسه */
div[data-section-name="contact-form"] .field__input {
    background-color: #EDF2F7 !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    color: #2D3748 !important;
    padding: 15px !important;
    /* مساحة للأيقونة عاليسار (15px أيقونة + مسافة) */
    padding-left: 45px !important; 
    padding-right: 15px !important;
    font-size: 15px !important;
    box-shadow: none !important;
    font-family: 'Cairo', sans-serif !important;
    height: auto !important;
}

/* إخفاء النص الافتراضي (placeholder) عشان يظهر الليبل مكانه */
div[data-section-name="contact-form"] .field__input::placeholder {
    color: transparent !important;
}

/* عند التركيز (Focus) */
div[data-section-name="contact-form"] .field__input:focus {
    background-color: #ffffff !important;
    border-color: #4FD1C5 !important;
    box-shadow: 0 0 0 4px rgba(79, 209, 197, 0.1) !important;
}

/* --- تنسيق الليبل (Label) --- */
div[data-section-name="contact-form"] .field__label {
    display: block !important; /* إظهاره */
    position: absolute !important;
    left: 45px !important; /* يبدأ بعد الأيقونة مباشرة */
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #718096 !important;
    font-size: 15px !important;
    pointer-events: none !important; /* يسمح بالضغط من خلاله */
    transition: 0.2s ease !important;
    font-family: 'Cairo', sans-serif !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* تعديل مكان الليبل لمربع الرسالة الكبير */
div[data-section-name="contact-form"] .field--text-area .field__label {
    top: 20px !important; 
    transform: none !important;
}

/* --- ميكانيكية الاختفاء --- */
/* يختفي الليبل إذا ضغطت عالحقل أو إذا كان فيه نص مكتوب */
div[data-section-name="contact-form"] .field__input:focus ~ .field__label,
div[data-section-name="contact-form"] .field__input:not(:placeholder-shown) ~ .field__label {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-50%) translateX(10px) !important;
}

/* --- الأيقونات (على اليسار) --- */
div[data-section-name="contact-form"] .field__icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 15px !important;  /* مكانها يسار */
    right: auto !important; /* الغاء اليمين */
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}

/* تلوين الأيقونة */
div[data-section-name="contact-form"] .field__icon svg path {
    fill: #4FD1C5 !important;
}

/* --- زر الإرسال --- */
div[data-section-name="contact-form"] .btn {
    background-color: #1A237E !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    width: 100% !important;
    font-family: 'Cairo', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

div[data-section-name="contact-form"] .btn:hover {
    background-color: #151b5e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(26, 35, 126, 0.3) !important;
}
/* إخفاء خانة رقم الهاتف بالكامل */
div[data-section-name="contact-form"] .field:has(#ContactForm-phone) {
    display: none !important;
}
/* --- تنسيق شريط الثقة (Trust Badges) --- */

.custom-product-extras {
  width: 100%;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
}

.trust-badges-strip {
  display: flex !important;
  flex-direction: row !important;    /* إجبار العناصر تكون بصف واحد */
  justify-content: space-between !important; /* توزيع المسافات بالتساوي */
  align-items: center !important;
  flex-wrap: nowrap !important;      /* منع العناصر من النزول لسطر ثاني */
  gap: 15px;                         /* مسافة بين كل عنصر والآخر */
  width: 100%;
}

.trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px;                          /* مسافة بين الأيقونة والنص */
  white-space: nowrap;               /* يمنع النص من الانقسام لسطرين */
}

/* تنسيق الأيقونات (لتظهر بحجم مناسب ولون التركواز) */
.trust-item svg {
  width: 28px;      /* حجم الأيقونة */
  height: 28px;
  fill: #38b2ac;    /* لون التركواز */
  flex-shrink: 0;   /* يمنع انكماش الأيقونة */
}
.trust-item svg path {
  fill: #38b2ac;
}

/* تنسيق النص */
.trust-item span {
  font-size: 14px;  /* حجم الخط */
  font-weight: 600;
  color: #38b2ac;   /* لون النص */
}

/* --- (اختياري) تحسين للموبايل فقط --- */
/* إذا كانت الشاشة صغيرة جداً، اسمح لهم بالنزول لسطرين عشان ما يختفوا */
@media screen and (max-width: 768px) {
  .trust-badges-strip {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .trust-item {
    margin-bottom: 10px;
  }
}
/* --- تنسيقات عامة (Desktop & General) --- */
.custom-product-extras {
  margin-top: 25px;
  padding: 25px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
}

.trust-badges-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* تنسيق النصوص والأيقونات (لون التيل) */
.trust-item span {
  font-size: 22px; 
  font-weight: 700;
  color: #38b2ac;
  text-transform: capitalize;
}

/* تكبير أيقونات الديسكتوب */
.trust-item svg {
  width: 65px;  /* أصبح 65px بدلاً من 55px */
  height: 65px;
  fill: #38b2ac;
}
.trust-item svg path {
  fill: #38b2ac;
}

/* =========================================
   تنسيقات الموبايل (Mobile Animation)
   ========================================= */
@media (max-width: 768px) {
  
  .trust-badges-strip {
    display: grid !important;
    grid-template-columns: 1fr;
    /* زيادة الارتفاع لـ 150px ليناسب الأيقونات الضخمة */
    height: 150px; 
    align-items: center;
    justify-items: center;
    overflow: hidden;
    gap: 0;
  }

  .trust-item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    opacity: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 0;
    gap: 15px;
  }
  
  /* أحجام الموبايل الجديدة (كبيرة جداً) */
  .trust-item span {
      font-size: 24px !important; 
  }
  
  /* تكبير أيقونات الموبايل */
  .trust-item svg {
      width: 75px !important;    /* أصبح 75px بدلاً من 60px */
      height: 75px !important;
  }

  /* تعريف الأنيميشن */
  @keyframes badgeFade {
    0% { opacity: 0; z-index: 1; }
    5% { opacity: 1; z-index: 2; }
    28% { opacity: 1; z-index: 2; }
    33.33% { opacity: 0; z-index: 1; }
    100% { opacity: 0; z-index: 1; }
  }

  /* تطبيق الأنيميشن (مدة الدورة 20 ثانية) */
  
  .trust-item:nth-child(1) {
    animation: badgeFade 20s infinite;
    animation-delay: 0s;
  }

  .trust-item:nth-child(2) {
    animation: badgeFade 20s infinite;
    animation-delay: 6.66s; 
  }

  .trust-item:nth-child(3) {
    animation: badgeFade 20s infinite;
    animation-delay: 13.33s;
  }
}
/* --- تنسيقات عامة (للشاشات الكبيرة - Desktop) --- */
.custom-product-extras {
  margin-top: 25px;
  padding: 25px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
}

.trust-badges-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* تنسيق النصوص والأيقونات (لون التيل) */
.trust-item span {
  font-size: 22px; 
  font-weight: 700;
  color: #38b2ac;
  text-transform: capitalize;
}

/* تكبير أيقونات الديسكتوب */
.trust-item svg {
  width: 65px;  
  height: 65px;
  fill: #38b2ac;
}
.trust-item svg path {
  fill: #38b2ac;
}

/* =========================================
   تنسيقات الموبايل (Mobile Animation)
   ========================================= */
@media (max-width: 768px) {
  
  /* 1. ضغط الحاوية الرئيسية لأقصى حد */
  .custom-product-extras {
    padding: 0 !important;      /* إلغاء الحشوة الداخلية تماماً */
    margin-top: 5px !important; /* مسافة علوية صغيرة جداً */
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }

  .trust-badges-strip {
    display: grid !important;
    grid-template-columns: 1fr;
    /* تقليل الارتفاع ليصبح "على القد" بالضبط (كان 150) */
    height: 125px; 
    align-items: center;
    justify-items: center;
    overflow: hidden;
    gap: 0;
  }

  .trust-item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column; /* ترتيب عمودي: أيقونة فوق، نص تحت */
    justify-content: center;
    align-items: center;
    margin: 0;
    /* 2. إلغاء المسافة بين الأيقونة والنص تقريباً */
    gap: 2px; 
  }
  
  /* أحجام الموبايل */
  .trust-item span {
      font-size: 24px !important; 
      line-height: 1; /* ضغط ارتفاع السطر لإلغاء الفراغات بين الكلمات */
      margin: 0;      /* ضمان عدم وجود هوامش للنص */
      padding: 0;
  }
  
  .trust-item svg {
      width: 75px !important;    
      height: 75px !important;
      margin: 0;      /* ضمان عدم وجود هوامش للأيقونة */
      display: block; /* إزالة المسافات المخفية للعناصر المضمنة */
  }

  /* تعريف الأنيميشن */
  @keyframes badgeFade {
    0% { opacity: 0; z-index: 1; }
    5% { opacity: 1; z-index: 2; }
    28% { opacity: 1; z-index: 2; }
    33.33% { opacity: 0; z-index: 1; }
    100% { opacity: 0; z-index: 1; }
  }

  /* تطبيق الأنيميشن (مدة الدورة 20 ثانية) */
  
  .trust-item:nth-child(1) {
    animation: badgeFade 20s infinite;
    animation-delay: 0s;
  }

  .trust-item:nth-child(2) {
    animation: badgeFade 20s infinite;
    animation-delay: 6.66s; 
  }

  .trust-item:nth-child(3) {
    animation: badgeFade 20s infinite;
    animation-delay: 13.33s;
  }
}
/* =========================================
   تنسيق الحاويات (الترتيب)
   ========================================= */

/* جعل الكمية فوق والأزرار تحت */
.product-form__buttons__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
    align-items: flex-start;
}

/* جعل الأزرار بجانب بعض (السلة + المفضلة) */
.product-form__buttons__content__media {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    gap: 12px; /* مسافة مريحة بين الزرين */
}

/* =========================================
   تنسيق زر الإضافة للسلة (Add to Cart)
   ========================================= */

.product-form__submit.btn--addtocart-page {
    /* الشكل والأبعاد */
    display: flex !important; /* استخدام فليكس */
    align-items: center !important; /* هذا الأمر يجبر النص والأيقونة أن يكونوا في منتصف الارتفاع بالضبط */
    justify-content: center !important; /* توسيط أفقي */
    width: auto !important;
    flex: 1; /* يتمدد ليأخذ المساحة */
    height: 52px; /* ارتفاع مريح */
    padding: 0 !important;   /* إلغاء أي حشوة داخلية قد تزيح المحتوى */
    border-radius: 50px; /* كبسولة */
    border: none;
    
    /* الألوان (تدرج برتقالي جذاب) */
    background: linear-gradient(135deg, #ff9900 0%, #ff8000 100%);
    
    /* الظل الأساسي (لون برتقالي خفيف) */
    box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
    
    /* تنسيق المحتوى */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    height: 100%; /* تأخذ طول الزر كامل */
    
    /* نعومة الحركة */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* =========================================
   تعديلات الهوفر (Hover Effects) الجديدة
   ========================================= */

/* 1. تغيير خلفية الزر عند مرور الماوس */
.product-form__submit.btn--addtocart-page:hover {
    background: #2D3748 !important; /* الخلفية تتحول للكحلي الغامق */
    transform: translateY(-3px);    /* رفع الزر قليلاً للأعلى */
    box-shadow: 0 8px 20px rgba(45, 55, 72, 0.5); /* ظل بلون داكن يناسب الخلفية */
}

/* 2. تغيير لون النص إلى البرتقالي عند الهوفر */
.product-form__submit.btn--addtocart-page:hover .btn__texts__item {
    color: #FF9F1C !important; /* النص يصبح برتقالي */
    transition: color 0.3s ease;
}

/* 3. تغيير لون الأيقونة (السلة) إلى البرتقالي عند الهوفر */
.product-form__submit.btn--addtocart-page:hover .theme-icon path {
    fill: #FF9F1C !important; /* الأيقونة تصبح برتقالي */
    transition: fill 0.3s ease;
}

/* =========================================
   تنسيق زر المفضلة (Wishlist)
   ========================================= */

.btn--wishlist-productpage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; /* نفس ارتفاع زر السلة */
    height: 52px;
    border-radius: 50%; /* دائري */
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* إطار رمادي خفيف */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* هوفر زر المفضلة */
.btn--wishlist-productpage:hover {
    background-color: #fff0f0; /* خلفية حمراء فاتحة جداً */
    border-color: #ffcccc;
    transform: scale(1.05); /* تكبير بسيط */
}

/* تلوين قلب المفضلة عند الهوفر */
.btn--wishlist-productpage:hover svg path {
    fill: #ff4d4d; /* أحمر */
    transition: fill 0.2s ease;
}
/* 1. تغيير لون النص إلى الكحلي (#2D3748) */
.product-form__submit.btn--addtocart-page .btn__texts__item {
    color: #2D3748 !important; 
    /* خصائص الخط والألوان السابقة */
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
    line-height: 1 !important; /* أهم سطر: يزيل الفراغات العلوية والسفلية للنص */
    margin: 0 !important;      /* إزالة الهوامش */
    padding: 0 !important;     /* إزالة الحشوات */
    padding-top: 2px !important; /* (حيلة بصرية) إنزال النص قليلاً جداً ليتوسط بصرياً مع الأيقونة */
}

/* 2. تغيير لون الأيقونة (السلة) إلى الكحلي (#2D3748) */
.product-form__submit.btn--addtocart-page .theme-icon {
    fill: #2D3748 !important; 
    transition: fill 0.3s ease; /* نعومة في التحويل */
    display: block !important; /* يمنع الأيقونة من التصرف كحرف كتابة */
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
}
/* 1. تكبير حجم الخط للنص (ADD TO CART) */
.product-form__submit.btn--addtocart-page .btn__texts__item {
    font-size: 24px !important; /* الحجم الجديد (كان 16px) */
    font-weight: 900 !important; /* زيادة السماكة ليصبح بارزاً أكثر */
    letter-spacing: 1px; /* مسافة بسيطة بين الأحرف للقراءة الأفضل */
}

/* 2. تكبير حجم أيقونة السلة (SVG) */
.product-form__submit.btn--addtocart-page .theme-icon {
    width: 28px !important;  /* تكبير العرض (كان 20px) */
    height: 28px !important; /* تكبير الارتفاع */
}

/* (تذكير) التأكد من بقاء اللون كحلي كما طلبنا سابقاً */
.product-form__submit.btn--addtocart-page .btn__texts__item {
     color: #2D3748 !important; 
}
.product-form__submit.btn--addtocart-page .theme-icon path {
     fill: #2D3748 !important; 
}
/* 1. تعريف حركة الاهتزاز (Keyframes) */
@keyframes buyBtnShake {
    0% { transform: translateX(0); }
    2% { transform: translateX(-4px) rotate(-2deg); }
    4% { transform: translateX(4px) rotate(2deg); }
    6% { transform: translateX(-4px) rotate(-2deg); }
    8% { transform: translateX(4px) rotate(2deg); }
    10% { transform: translateX(0); }
    100% { transform: translateX(0); } /* فترة سكون طويلة */
}

/* 2. تطبيق الحركة على زر الإضافة للسلة */
.product-form__submit.btn--addtocart-page {
    /* الخصائص السابقة (لا تحذفها) */
    /* ... */
    
    /* إضافة سطر الأنيميشن: */
    /* المدة 5 ثواني (تتضمن الاهتزاز ثم الانتظار) وتتكرر للأبد */
    animation: buyBtnShake 5s infinite; 
    
    /* ضمان نعومة الحركة */
    transform-origin: center;
}

/* 3. إيقاف الاهتزاز عند الهوفر (هام جداً) */
/* عشان ما يخرب تأثير الرفع وتغيير اللون اللي عملناه قبل شوي */
.product-form__submit.btn--addtocart-page:hover {
    animation-play-state: paused; /* يوقف الاهتزاز مؤقتاً عند وضع الماوس */
}
/* 1. تصفير هوامش الحاوية الأم */
#header-modal-mainmenu .page-width {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important; /* ضروري لتمطيط المحتوى */
}

/* 2. إعدادات الدرج (Drawer Box) */
#header-modal-mainmenu .popup-modal__content {
    width: 300px !important;
    max-width: 80vw !important; 
    height: 100vh !important; /* طول كامل */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background-color: #F8F9FA !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    transform: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. القائمة الداخلية (توزيع العناصر للأطراف) */
#header-modal-mainmenu .page-grid-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    
    /* هوامش القائمة من فوق */
    padding-top: 60px !important; /* رجعنا شوية مسافة عشان شكل الـ X */
    padding-left: 25px !important;
    padding-bottom: 40px !important; /* مسافة من تحت عشان الفوتر ما يلزق */
    
    gap: 25px !important;
    width: 100% !important;
    height: 100% !important; /* تفعيل الطول الكامل */
    margin: 0 !important;
}

/* 4. تنسيق النصوص وحجم الخط */
#header-modal-mainmenu .menu-item {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #2D3748 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 5. تأثير الهوفر */
#header-modal-mainmenu .menu-item:hover {
    color: #40C4AA !important;
    padding-left: 10px !important;
    border-left: 3px solid #40C4AA !important;
    transition: all 0.2s ease-in-out;
}

/* 6. قسم السوشيال ميديا (مرمي في قاع الصفحة) */
#header-modal-mainmenu .page-grid-4::after {
    content: 'FOLLOW US \A @RELOVVI'; 
    white-space: pre; 
    margin-top: auto !important; /* 🔥 هذا الأمر هو اللي بيرميه بآخر الصفحة */
    font-size: 13px !important;
    color: #A0AEC0 !important; 
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1.6 !important;
    border-top: 1px solid #E2E8F0; 
    width: 85%; 
    padding-top: 20px;
    display: block !important;
}

/* 7. زر الإغلاق (X) */
#header-modal-mainmenu .popup-modal__toggle {
    top: 20px !important;
    right: 20px !important;
    z-index: 999 !important;
}

/* 8. إزالة الخطوط القديمة */
#header-modal-mainmenu .menu-item span,
#header-modal-mainmenu .submenu__item_text {
    border-bottom: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* 9. الخلفية المظللة */
#header-modal-mainmenu .popup-modal__overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
}
/* ====================================================
   RELOVVI BUTTON: ORANGE & DARK SLATE (Auto Icon Color)
   ==================================================== */

/* 1. الوضع الطبيعي (Normal State) */
.product-card__form .quick-add__submit {
    /* الحجم والشكل */
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 1;

    /* 🔥 الألوان الجديدة (طلبك) */
    background-color: #FF9F1C !important; /* برتقالي */
    color: #2D3748 !important; /* نص غامق */
    border: 2px solid #FF9F1C !important; /* إطار برتقالي */
}

/* 2. تلوين الأيقونة في الوضع الطبيعي (تتبع لون النص) */
.product-card__form .quick-add__submit svg path {
    fill: #2D3748 !important; /* أيقونة غامقة */
    transition: fill 0.3s ease !important;
}

/* 3. وضع الهوفر (Hover State) */
.product-card__form .quick-add__submit:hover {
    transform: translateY(-2px); /* رفعة خفيفة */
    box-shadow: 0 5px 15px rgba(255, 159, 28, 0.4) !important; /* ظل برتقالي خفيف */

    /* 🔥 الألوان عند اللمس (طلبك) */
    background-color: #2D3748 !important; /* خلفية غامقة */
    border-color: #2D3748 !important; /* إطار غامق */
    color: #FF9F1C !important; /* نص برتقالي */
}

/* 4. تلوين الأيقونة عند الهوفر (تصير برتقالي) */
.product-card__form .quick-add__submit:hover svg path {
    fill: #FF9F1C !important; /* الأيقونة بتصير برتقالي */
}

/* 5. تأثير اللمعة (Shine Effect) - خليتها عشان تلفت النظر */
.product-card__form .quick-add__submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: relovvi-shine 3s infinite;
    pointer-events: none;
    
}

@keyframes relovvi-shine {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}
/* تغيير لون السعر الأصلي (قبل الخصم) إلى السكني */
.price__regular {
    color: #888888 !important;
}
/* ====================================================
   FIXED 404 BUTTON (CLEAN & BRANDED)
   ==================================================== */

/* 1. خطوة مهمة جداً: حذف الطبقات المشوهة من الثيم */
.mt40 a.btn::before, 
.mt40 a.btn::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* 2. تصميم الزر الأساسي (الوضع الطبيعي) */
.mt40 a.btn {
    /* الألوان: خلفية تيل - نص غامق */
    background-color: #40C4AA !important;
    color: #2D3748 !important;
    border: 2px solid #40C4AA !important;
    
    /* الشكل والحجم */
    border-radius: 50px !important;
    height: 52px !important; /* ارتفاع ثابت */
    min-width: 200px !important;
    padding: 0 30px !important;
    margin-top: 20px !important;
    
    /* ترتيب المحتوى */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* الخط */
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    
    box-shadow: none !important;
    transition: all 0.3s ease-in-out !important;
    opacity: 1 !important;
}

/* 3. وضع الهوفر (عند اللمس) */
.mt40 a.btn:hover {
    /* الألوان: خلفية غامقة - نص أوف وايت */
    background-color: #2D3748 !important;
    border-color: #2D3748 !important;
    color: #F8F9FA !important;
    
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(64, 196, 170, 0.25) !important;
}

/* 4. تلوين الأيقونة (السهم) */
/* الوضع الطبيعي: غامق */
.mt40 a.btn svg path {
    fill: #2D3748 !important;
    transition: fill 0.3s ease !important;
}

/* وضع الهوفر: أوف وايت */
.mt40 a.btn:hover svg path {
    fill: #F8F9FA !important;
}

/* 5. ضمان ظهور النص وتوسطه */
.mt40 .btn__texts {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* إخفاء النص الاحتياطي تبع الثيم عشان ما يعمل خيال */
.mt40 .btn__bottom-text {
    display: none !important;
}
.mt40 .btn__top-text {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}