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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  font-family:var(--font-body);
  line-height:var(--leading-body);
  color:rgb(var(--color-primary));
  background-color:var(--color-secondary);
}
body:has(* [data-visible=true]), body:has(* [data-hidden=false]), body:has(yc-overlay[data-active]){
  overflow:hidden;
  overscroll-behavior:contain;
}
body .main-container{
  flex:2;
  order:3;
}
body #youcan-section--footer{
  order:4;
}

button,
input,
select,
textarea{
  font:inherit;
  letter-spacing:inherit;
}

img,
svg,
video{
  display:block;
  max-width:100%;
}

img{
  height:auto;
}

::-moz-selection{
  color:var(--vy-ivory);
  background-color:var(--vy-green);
}

::selection{
  color:var(--vy-ivory);
  background-color:var(--vy-green);
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}
html{
  font-size:62.5%;
}

body{
  font-size:1.6rem;
}

h1,
h2,
h3,
.h1,
.h2,
.h3{
  font-family:var(--font-display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:var(--leading-display);
  letter-spacing:-0.01em;
  text-wrap:balance;
}

h4,
h5,
h6,
.h4,
.h5,
.h6{
  font-weight:500;
  line-height:1.35;
}

h1,
.h1{
  font-size:clamp(3.4rem, 2.4rem + 3.2vw, 5.6rem);
}

h2,
.h2{
  font-size:clamp(2.8rem, 2.2rem + 1.8vw, 4rem);
}

h3,
.h3{
  font-size:clamp(2.2rem, 1.9rem + 0.8vw, 2.8rem);
}

h4,
.h4{
  font-size:2rem;
}

h5,
.h5{
  font-size:1.7rem;
}

h6,
.h6{
  font-size:1.5rem;
}

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) .h1,
:lang(ar) .h2,
:lang(ar) .h3{
  letter-spacing:0;
}
:lang(ar) h1,
:lang(ar) .h1{
  font-size:clamp(3.2rem, 2.4rem + 2.8vw, 5rem);
}

p{
  text-wrap:pretty;
}

a,
button{
  -webkit-text-decoration:none;
  text-decoration:none;
  font-size:var(--text-md);
  cursor:pointer;
  border:none;
  outline:none;
  color:rgb(var(--color-primary));
  transition:color var(--transition-duration-normal) var(--ease-out), background-color var(--transition-duration-normal) var(--ease-out), border-color var(--transition-duration-normal) var(--ease-out);
}

select,
textarea,
input:not([type=checkbox]):not([type=radio]){
  border:none;
  outline:none;
}

ul,
ol{
  list-style:none;
}

button,
.yc-btn{
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--gap-md);
  border-radius:0;
  font-weight:500;
  line-height:1.2;
}
button.primary,
.yc-btn.primary{
  min-height:52px;
  padding:14px 28px;
  letter-spacing:0.02em;
  color:var(--vy-ivory);
  background-color:var(--vy-green);
  border:1px solid var(--vy-green);
}
button.primary:focus-visible,
.yc-btn.primary:focus-visible{
  outline-color:var(--vy-green);
}
button.secondary,
.yc-btn.secondary{
  min-height:52px;
  padding:14px 28px;
  color:var(--vy-green);
  background-color:transparent;
  border:1px solid var(--vy-green);
}
button.destructive,
.yc-btn.destructive{
  color:var(--vy-ivory);
  background-color:var(--color-error-500);
}
button.link,
.yc-btn.link{
  padding:0;
  padding:initial;
  position:relative;
  color:currentColor;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.35em;
  text-decoration-color:transparent;
}
button.tertiary,
.yc-btn.tertiary{
  padding:0.75em;
}
button.ghost,
.yc-btn.ghost{
  background-color:transparent;
}
button.icon,
.yc-btn.icon{
  padding:12px;
  color:currentColor;
  background-color:transparent;
  border:none;
}
button.icon[data-size$=sm],
.yc-btn.icon[data-size$=sm]{
  padding:8px;
}
button.icon[data-size$=sm] svg,
.yc-btn.icon[data-size$=sm] svg{
  width:16px;
  height:16px;
}
button.icon[data-size$=lg],
.yc-btn.icon[data-size$=lg]{
  padding:13px;
}
button[data-loading] span,
button[data-loading] svg,
.yc-btn[data-loading] span,
.yc-btn[data-loading] svg{
  color:transparent;
}
button[data-loading]::before,
.yc-btn[data-loading]::before{
  --size:18px;
  content:"";
  width:18px;
  width:var(--size);
  height:18px;
  height:var(--size);
  position:absolute;
  border:1.5px solid currentColor;
  border-bottom-color:transparent;
  border-radius:var(--radius-circle);
  animation:spin 1s linear infinite;
}
button:disabled, button[data-disabled], button[data-loading], button[aria-disabled=true],
.yc-btn:disabled,
.yc-btn[data-disabled],
.yc-btn[data-loading],
.yc-btn[aria-disabled=true]{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}
button.link:hover,
.yc-btn.link:hover{
  text-decoration-color:currentColor;
}
button.ghost:hover, button.icon:hover, .yc-btn.ghost:hover, .yc-btn.icon:hover{
  color:var(--vy-sage);
}
button.secondary:hover:not(:disabled){
  color:var(--vy-ivory);
  background-color:var(--vy-green);
}
.yc-btn.secondary:hover:not(:disabled){
  color:var(--vy-ivory);
  background-color:var(--vy-green);
}
button.primary:hover:not(:disabled){
  background-color:var(--vy-sage);
  border-color:var(--vy-sage);
}
.yc-btn.primary:hover:not(:disabled){
  background-color:var(--vy-sage);
  border-color:var(--vy-sage);
}
button.destructive:hover:not(:disabled){
  opacity:0.85;
}
.yc-btn.destructive:hover:not(:disabled){
  opacity:0.85;
}

a.link:not(.yc-btn){
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.3em;
}

a,
label,
button,
summary,
.yc-btn{
  outline-offset:3px;
  outline:1.5px solid transparent;
}
a:focus-visible, a:has(input:focus-visible),
label:focus-visible,
label:has(input:focus-visible),
button:focus-visible,
button:has(input:focus-visible),
summary:focus-visible,
summary:has(input:focus-visible),
.yc-btn:focus-visible,
.yc-btn:has(input:focus-visible){
  outline-color:currentColor;
}

select,
textarea,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]){
  width:100%;
  min-height:50px;
  padding:12px 14px;
  font-size:1.6rem;
  background-color:rgba(255, 255, 255, 0.45);
  border-radius:0;
  color:rgb(var(--section-text-color, var(--color-primary)));
  border:1px solid rgba(31, 59, 50, 0.28);
}
select::-moz-placeholder, textarea::-moz-placeholder, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search])::-moz-placeholder{
  color:var(--vy-sage);
  opacity:0.8;
}
select::placeholder,
textarea::placeholder,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search])::placeholder{
  color:var(--vy-sage);
  opacity:0.8;
}
select:focus,
textarea:focus,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):focus{
  border-color:var(--vy-green);
  box-shadow:inset 0 0 0 1px var(--vy-green);
}
select:disabled,
textarea:disabled,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):disabled{
  opacity:0.6;
  cursor:not-allowed;
}

textarea{
  resize:vertical;
  min-height:96px;
}

.field{
  display:flex;
  gap:var(--gap-sm);
  flex-direction:column;
}
.field input,
.field textarea{
  max-height:150px;
}
.field .label,
.field label:not(.images){
  font-size:var(--text-sm);
  font-weight:500;
}
.field:has(input:required) > label::after, .field:has(textarea:required) > label::after{
  content:" *";
  color:var(--vy-sage);
}

.vy-container{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--page-gutter);
}

.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

yc-section{
  display:block;
  padding-inline:max(var(--page-gutter), (100% - var(--page-max)) / 2 + var(--page-gutter));
  color:rgb(var(--section-text-color, var(--color-base-black)));
  background-color:var(--section-bg-color, var(--color-base-white));
  padding-block-start:var(--section-space-top);
  padding-block-end:var(--section-space-bottom);
}
yc-section > *:not(:last-child){
  margin-block-end:var(--gap-3xl);
}
yc-section[data-full]{
  padding-inline:0;
}
yc-section:not([data-full]) yc-slider[data-type=full] .slider-area .slider-box .slider-inner yc-slider-item yc-slider-content{
  padding:1.5em;
}
yc-section:not([data-full]) yc-slider[data-type=full] yc-slider-arrows[data-position=left]{
  inset-inline-start:1.5em;
}
yc-section:not([data-full]) yc-slider[data-type=full] yc-slider-arrows[data-position=right]{
  inset-inline-end:1.5em;
}
yc-section yc-section-head{
  display:grid;
  grid-gap:var(--gap-md);
  gap:var(--gap-md);
}
yc-section yc-section-head[data-position$=left]{
  text-align:start;
}
yc-section yc-section-head[data-position$=right]{
  text-align:end;
}
yc-section yc-section-head[data-position$=center]{
  text-align:center;
}
yc-section yc-section-head p{
  text-wrap:balance;
  font-size:var(--text-md);
  color:rgba(var(--section-text-color), 0.7);
}

.yc-badge{
  --badge-color:currentColor;
  padding:0.25em 0.5em;
  color:currentColor;
  color:var(--badge-color);
  background-color:color-mix(in srgb, currentColor 8%, transparent);
  font-size:var(--text-xs);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  gap:4px;
}

@supports (color: color-mix(in lch, red, blue)){
.yc-badge{
  background-color:color-mix(in srgb, var(--badge-color) 8%, transparent);
}
}
.yc-badge[data-status$=success]{
  --badge-color:var(--color-success-500);
}
.yc-badge[data-status$=error]{
  --badge-color:var(--color-error-500);
}
.yc-badge[data-status$=default]{
  --badge-color:var(--color-gray-500);
}

.yc-checkbox{
  --checkbox-size:16px;
  position:relative;
  width:16px;
  width:var(--checkbox-size);
  height:16px;
  height:var(--checkbox-size);
  padding:2px;
  transition:all 0.1s ease-out;
  border:1.5px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius:calc(var(--media-gallery-border-radius) * 0.5);
  background-color:var(--section-bg-color);
  color:var(--section-text-color);
  cursor:pointer;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
}
.yc-checkbox::after{
  content:"";
  position:absolute;
  width:calc(var(--checkbox-size) + 4px);
  height:calc(var(--checkbox-size) + 4px);
  inset-inline-start:-4px;
  inset-block-start:-4px;
}
.yc-checkbox::before{
  content:"";
  position:absolute;
  left:50%;
  width:calc(var(--checkbox-size) / 5);
  height:calc(var(--checkbox-size) / 4);
  transform:translate(-50%, -60%) rotate(45deg);
  border-right:1.5px solid transparent;
  inset-block-start:50%;
  border-block-end:1.5px solid transparent;
}
.yc-checkbox:checked, .yc-checkbox:indeterminate{
  border-color:currentColor;
  background-color:currentColor;
}
.yc-checkbox:checked::before, .yc-checkbox:indeterminate::before{
  height:calc(var(--checkbox-size) / 2);
  border-color:var(--section-bg-color);
}
.yc-checkbox:checked:indeterminate::before, .yc-checkbox:indeterminate:indeterminate::before{
  width:80%;
  height:0;
  transform:translate(-50%, -50%) rotate(0deg);
  border-inline-end:none;
}
.yc-checkbox:disabled{
  border-color:transparent;
  background-color:color-mix(in srgb, var(--section-text-color) 30%, transparent);
  pointer-events:none;
}
.yc-checkbox:disabled:checked::before{
  border-color:var(--section-bg-color);
}

.items-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-columns:repeat(var(--items-columns, 3), 1fr);
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
}
.items-grid .show-more{
  order:1;
  display:flex;
  grid-column:1/-1;
  align-items:center;
  justify-content:center;
}
.items-grid .show-more button,
.items-grid .show-more .yc-btn{
  padding:8px 15px;
}

yc-slider-footer .show-more button,
yc-slider-footer .show-more .yc-btn{
  padding:8px 15px;
}

.overlay,
yc-overlay{
  inset:0;
  z-index:99;
  position:fixed;
  opacity:0;
  visibility:hidden;
  -webkit-backdrop-filter:var(--overlay-blur);
          backdrop-filter:var(--overlay-blur);
  background-color:var(--overlay-background);
  transition:var(--transition-duration-normal);
}
.overlay[data-active],
yc-overlay[data-active]{
  opacity:1;
  visibility:visible;
}

.card-placeholder{
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:currentColor;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.card-placeholder svg{
  color:color-mix(in srgb, currentColor 70%, transparent);
}

.rating{
  display:flex;
  align-items:center;
  gap:var(--gap-sm);
  font-size:var(--text-md);
  color:color-mix(in srgb, currentColor 70%, transparent);
}
.rating .stars{
  display:inline-flex;
  gap:var(--gap-2xs);
  color:var(--color-yellow-500);
}
.rating .average{
  line-height:1.2;
}

.empty-page{
  display:flex;
  flex-direction:column;
  gap:24px;
  justify-content:center;
  align-items:center;
  min-height:360px;
}
.empty-page > .empty{
  height:auto;
}

.empty-section{
  padding-block:5em;
}

.empty{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:var(--gap-lg);
  text-align:center;
}
.empty .icon{
  display:none;
}
.empty .title,
.empty .heading{
  font-family:var(--font-display);
  font-size:2.8rem;
  font-weight:400;
  line-height:1.15;
}
.empty .subheading{
  color:color-mix(in srgb, currentColor 70%, transparent);
}

yc-quantity-control{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--gap-sm);
  width:-moz-fit-content;
  width:fit-content;
}
yc-quantity-control button svg{
  pointer-events:none;
}
yc-quantity-control .current-quantity{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:24px;
  text-align:center;
}
yc-quantity-control[data-loading]{
  pointer-events:none;
}
yc-quantity-control[data-loading] .current-quantity [data-current-quantity]{
  color:transparent;
}
yc-quantity-control[data-loading] .current-quantity::before{
  content:"";
  width:18px;
  height:18px;
  position:absolute;
  border:1.5px solid currentColor;
  border-bottom-color:transparent;
  border-radius:var(--radius-circle);
  animation:spin 1s linear infinite;
}

button[data-delete]{
  position:relative;
  border:none;
  background-color:color-mix(in srgb, currentColor 5%, transparent);
}
button[data-delete]:hover{
  color:var(--color-error-500);
}

yc-product-form button[data-buy-button] span::before{
  content:attr(data-add-to-cart);
}
yc-product-form[not-available] button span::before{
  content:attr(data-out-of-stock);
}

yc-variants{
  display:flex;
  gap:var(--gap-xl);
  flex-direction:column;
  padding-block:1em;
}
yc-variants .variant{
  display:flex;
  gap:var(--gap-sm);
  flex-direction:column;
}
yc-variants .variant .label{
  font-size:var(--text-md);
  color:color-mix(in srgb, currentColor 70%, transparent);
}

yc-skeleton{
  display:grid;
  grid-gap:var(--gap-xl);
  gap:var(--gap-xl);
  padding:1.5em;
}
yc-skeleton yc-skeleton-group{
  display:flex;
  gap:var(--gap-md);
  flex-direction:column;
}
yc-skeleton yc-skeleton-group[data-center]{
  align-items:center;
}
yc-skeleton yc-skeleton-group[data-flex-row]{
  flex-direction:row;
}
yc-skeleton yc-skeleton-group[data-space-between]{
  flex-direction:row;
  justify-content:space-between;
}
yc-skeleton yc-skeleton-item{
  overflow:hidden;
  position:relative;
  background-color:color-mix(in srgb, currentColor 10%, transparent);
}
yc-skeleton yc-skeleton-item::before{
  content:"";
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--section-bg-color, var(--color-base-white)), transparent), transparent);
  animation:skeleton_loading 1s infinite;
}
@keyframes skeleton_loading{
  100%{
    transform:translateX(100%);
  }
}
yc-skeleton yc-skeleton-item[variant=text]{
  width:100%;
  height:8px;
  border-radius:var(--radius-sm);
}
yc-skeleton yc-skeleton-item[variant=text]:nth-child(2){
  width:80%;
}
yc-skeleton yc-skeleton-item[variant=text]:nth-child(3){
  width:60%;
}
yc-skeleton yc-skeleton-item[variant=text]:nth-child(4){
  width:40%;
}
yc-skeleton yc-skeleton-item[variant=rounded]{
  width:50px;
  height:50px;
  border-radius:var(--radius-sm);
}

.breadcrumb ol{
  display:flex;
  gap:var(--gap-md);
  align-items:center;
  flex-wrap:wrap;
}
.breadcrumb ol li{
  --faded-link-color:color-mix(in srgb, currentColor 70%, transparent);
  display:flex;
  align-items:center;
  gap:var(--gap-md);
}
.breadcrumb ol li svg{
  color:var(--faded-link-color);
}
[dir="rtl"] .breadcrumb ol li svg{
  rotate:-180deg;
}
.breadcrumb ol li a{
  color:var(--faded-link-color);
}
.breadcrumb ol li a[aria-current]{
  color:currentColor;
  pointer-events:none;
}

.skip-to-content{
  left:50%;
  opacity:0;
  z-index:1000;
  position:fixed;
  translate:-50% -100%;
  padding:16px 24px;
  font-size:var(--text-md);
  color:var(--color-base-white);
  background-color:var(--color-base-black);
  border-end-end-radius:var(--button-border-radius);
  border-end-start-radius:var(--button-border-radius);
  transition:var(--transition-duration-fast);
}
.skip-to-content:focus-visible{
  opacity:1;
  translate:-50% 0%;
  outline-color:var(--color-base-black);
}

[hidden]{
  display:none !important;
}

@media (max-width: 1280px){
  .items-grid:has(> :nth-child(4)){
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width: 1024px){
  .items-grid{
    grid-template-columns:1fr !important;
  }
}
@media (max-width: 768px){
  .items-grid{
    grid-template-columns:1fr !important;
  }
  yc-variants{
    padding-block-end:0;
  }
  yc-section[data-full] yc-slider[data-type=full] .slider-area .slider-box .slider-inner yc-slider-item yc-slider-content{
    padding:1.5em;
  }
  yc-section[data-full] yc-slider[data-type=full] yc-slider-arrows[data-position=left]{
    inset-inline-start:1.5em;
  }
  yc-section[data-full] yc-slider[data-type=full] yc-slider-arrows[data-position=right]{
    inset-inline-end:1.5em;
  }
  yc-section yc-section-head p{
    font-size:var(--text-sm);
  }
}
@keyframes showUp{
  from{
    translate:0 3em;
  }
  to{
    translate:0;
  }
}
@keyframes spin{
  100%{
    transform:rotate(360deg);
  }
}
.vy-arb{
  display:block;
  margin-block-start:2px;
  text-align:end;
  font-family:"IBM Plex Sans Arabic", var(--font-body);
  font-size:0.9em;
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  text-transform:none;
  color:var(--vy-sage);
}

.vy-prose p,
.vy-prose li,
.vy-prose h2,
.vy-prose h3,
.vy-prose h4{
  unicode-bidi:plaintext;
  text-align:start;
}

.vy-faq__item summary,
.vy-faq__answer{
  unicode-bidi:plaintext;
}

.vy-btn-bi .vy-arb,
yc-section-head[data-position=center] .vy-arb,
yc-section .message .vy-arb{
  text-align:center;
}

.vy-btn-bi{
  flex-direction:column;
  gap:0;
  height:auto;
  min-height:56px;
  padding-block:10px;
  line-height:1.2;
}
.vy-btn-bi .vy-arb{
  margin:2px 0 0;
  font-size:1.4rem;
  color:inherit;
  opacity:0.85;
}

.vy-hero__heading .vy-arb,
.vy-spotlight__title .vy-arb,
.vy-statement__heading .vy-arb,
.vy-categories__head h2 .vy-arb,
.vy-page__title .vy-arb,
.vy-thanks__title .vy-arb{
  margin-block-start:8px;
  font-family:"Amiri", "IBM Plex Sans Arabic", serif;
  font-size:0.55em;
  line-height:1.5;
}

yc-toast-container{
  --toast-width:400px;
  --toast-offset:4.5em;
  --toast-padding:0.5em;
  --toast-theme:var(--color-info-500);
  --toast-padding-multiline:1em 0.5em;
  display:grid;
  grid-gap:var(--gap-md);
  gap:var(--gap-md);
  min-width:400px;
  min-width:var(--toast-width);
  z-index:101;
  position:fixed;
  translate:-50% 0%;
  left:50%;
  inset-block-end:1em;
}
@media (max-width: 640px){
  yc-toast-container{
    --toast-width:calc(100% - 2em);
  }
}
yc-toast-container yc-toast{
  display:flex;
  gap:var(--gap-md);
  align-items:center;
  justify-content:space-between;
  width:100%;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  inset-block-end:0;
  font-size:var(--text-sm);
  -webkit-backdrop-filter:blur(2px);
          backdrop-filter:blur(2px);
  padding:var(--toast-padding);
  border-radius:var(--toast-border-radius);
  background-color:var(--color-base-white);
  transition:var(--transition-duration-normal);
  animation:showUp var(--transition-duration-normal);
  border:1px solid color-mix(in srgb, currentColor 8%, transparent);
  box-shadow:color-mix(in srgb, currentColor 15%, transparent) 0px 48px 80px 0px;
}
@media (max-width: 640px){
  yc-toast-container yc-toast{
    font-size:var(--text-xs);
  }
}
yc-toast-container yc-toast .toast-content{
  display:flex;
  align-items:center;
  gap:var(--gap-md);
}
yc-toast-container yc-toast .toast-content .icon{
  display:inline-flex;
}
yc-toast-container yc-toast .toast-content .icon svg{
  stroke-width:0;
  fill:var(--toast-theme);
  border-radius:var(--toast-border-radius);
}
yc-toast-container yc-toast button[data-close]{
  padding:8px;
  color:currentColor;
}
yc-toast-container yc-toast[data-multiline]{
  padding:var(--toast-padding-multiline);
}
yc-toast-container yc-toast[data-multiline] .toast-content{
  align-items:start;
}
yc-toast-container yc-toast[data-removed]{
  opacity:0;
  translate:0 3em;
}
yc-toast-container yc-toast[data-type=success]{
  --toast-theme:var(--color-success-500);
}
yc-toast-container yc-toast[data-type=warning]{
  --toast-theme:var(--color-warning-500);
}
yc-toast-container yc-toast[data-type=error]{
  --toast-theme:var(--color-error-500);
}
yc-toast-container yc-toast[data-type=info]{
  --toast-theme:var(--color-info-500);
}
yc-toast-container yc-toast:not(:last-child){
  scale:0.95;
  box-shadow:none;
  position:absolute;
}
yc-toast-container yc-toast:nth-last-child(n+4){
  opacity:0;
}
yc-toast-container:has(> yc-toast:nth-child(2))::before{
  content:"";
  width:100%;
  inset-block-end:0;
  height:calc(200% + var(--gap-md));
}
yc-toast-container:has(> yc-toast:nth-child(3))::before{
  height:calc(300% + var(--gap-md) * 2);
}
yc-toast-container:not(:hover) yc-toast:not(:last-child){
  inset-block-end:1em !important;
}
yc-toast-container:not(:hover) yc-toast:not(:last-child):nth-last-child(3){
  scale:0.9;
  inset-block-end:2em !important;
}
yc-toast-container:hover yc-toast:not(:last-child){
  scale:1;
}
yc-toast-container:hover yc-toast:not(:last-child):nth-last-child(2){
  inset-block-end:calc(var(--toast-offset) + 0em);
  inset-block-end:calc(var(--toast-offset) + var(--extra-offset, 0em));
}
yc-toast-container:hover yc-toast:not(:last-child):nth-last-child(2)[data-multiline]{
  --extra-offset:1.5em;
}
yc-toast-container:hover yc-toast:not(:last-child):nth-last-child(3){
  inset-block-end:calc(var(--toast-offset) * 2 + 0em);
  inset-block-end:calc(var(--toast-offset) * 2 + var(--extra-offset, 0em));
}
yc-toast-container:hover yc-toast:not(:last-child):nth-last-child(3)[data-multiline]{
  --extra-offset:3em;
}
yc-toast-container:hover::before{
  position:absolute;
}

yc-modal{
  --modal-mobile-offset:0.5em;
  --modal-mobile-width:calc(100% - (var(--modal-mobile-offset) * 2));
  --modal-desktop-width:var(--modal-width, 500px);
  --modal-max-mobile-height:90%;
  --modal-bg-color:var(--section-bg-color, var(--color-base-white));
  --modal-text-color:var(--section-text-color, var(--color-base-black));
}
@media (min-width: 768px){
  yc-modal:not([as-drawer]) yc-modal-content{
    z-index:100;
    left:50%;
    position:fixed;
    height:-moz-fit-content;
    height:fit-content;
    translate:-50% -40%;
    inset-block-start:50%;
    color:var(--modal-text-color);
    background-color:var(--modal-bg-color);
    border-radius:var(--modal-border-radius);
    width:var(--modal-desktop-width);
    transition:var(--transition-duration-slow) cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  yc-modal:not([as-drawer]) yc-modal-content:not([data-visible]){
    opacity:0;
    visibility:hidden;
  }
}
@media (max-width: 768px){
  yc-modal yc-modal-content{
    z-index:100;
    left:0;
    inset-block-end:0;
    position:fixed;
    height:-moz-fit-content;
    height:fit-content;
    color:var(--modal-text-color);
    background-color:var(--modal-bg-color);
    translate:0% 100%;
    width:var(--modal-mobile-width);
    margin:var(--modal-mobile-offset);
    border-radius:var(--modal-border-radius);
    transition:var(--transition-duration-normal);
  }
  yc-modal yc-modal-content:not([data-visible]){
    opacity:0;
    visibility:hidden;
  }
  yc-modal yc-modal-content::before{
    content:"";
    z-index:3;
    width:48px;
    height:4px;
    display:block;
    position:sticky;
    border-radius:999px;
    translate:-50% -50%;
    inset-inline-start:50%;
    margin-block-start:0.5em;
    background-color:color-mix(in srgb, currentColor 10%, transparent);
  }
  [dir="rtl"] yc-modal yc-modal-content::before{
    translate:50% -50%;
  }
}

:root{
  --drawer-width:440px;
}

yc-drawer .drawer-box{
  position:fixed;
  z-index:100;
  inset-block:0;
  width:440px;
  width:var(--drawer-width);
  max-width:100%;
  inset-inline-start:calc(440px * -1);
  inset-inline-start:calc(var(--drawer-width) * -1);
  border-radius:0;
  overflow:hidden;
  transition:inset-inline-start var(--transition-duration-slow) var(--ease-out);
}
yc-drawer .drawer-overlay{
  opacity:0;
  visibility:hidden;
}
yc-drawer[data-direction$=rtl] .drawer-box{
  inset-inline-start:100%;
}
yc-drawer[data-hidden$=false][data-direction$=rtl] .drawer-box{
  inset-inline-start:calc(100% - 440px);
  inset-inline-start:calc(100% - var(--drawer-width));
}
yc-drawer[data-hidden$=false] .drawer-box{
  inset-inline-start:0%;
}
yc-drawer[data-hidden$=false] .drawer-overlay{
  opacity:1;
  visibility:visible;
}

@media (max-width: 768px){
  :root{
    --drawer-width:100%;
  }
}
yc-header{
  display:block;
  color:rgb(var(--header-text-color));
  background-color:var(--header-bg-color);
}
yc-header[data-sticky]{
  position:sticky;
  inset-block-start:0;
  z-index:50;
}
yc-header[data-bottom-border]{
  border-block-end:1px solid rgba(var(--header-text-color), 0.16);
}
yc-header .header-inner{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--page-gutter);
  min-height:60px;
  display:grid;
  align-items:center;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"menu logo actions";
  grid-column-gap:var(--gap-lg);
  -moz-column-gap:var(--gap-lg);
       column-gap:var(--gap-lg);
}
yc-header .menu-toggle{
  grid-area:menu;
  display:flex;
  justify-content:flex-start;
}
yc-header .logo{
  grid-area:logo;
  display:flex;
  justify-content:center;
}
yc-header .logo a{
  display:inline-flex;
  padding-block:8px;
}
yc-header .logo img,
yc-header .logo .vy-logo-svg{
  width:min(var(--header-logo-width), 104px);
  height:auto;
}
yc-header .logo .vy-logo-svg.is-arabic{
  width:auto;
  height:36px;
}
yc-header .links{
  grid-area:nav;
  display:none;
}
yc-header .actions{
  grid-area:actions;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--gap-xl);
  position:relative;
}
yc-header .search-btn,
yc-header .search-bar{
  display:none;
}
yc-header .text-action,
yc-header .nav-link{
  color:rgb(var(--header-text-color));
}

.text-action{
  display:inline-flex;
  align-items:center;
  gap:0.3em;
  min-height:44px;
  padding:0;
  font-size:1.45rem;
  font-weight:500;
  letter-spacing:0.01em;
  color:currentColor;
  background:none;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.4em;
  text-decoration-color:transparent;
}
.text-action:hover{
  text-decoration-color:currentColor;
}

.cart-btn{
  white-space:nowrap;
}
.cart-btn .total-items{
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}
.cart-btn .total-items::before{
  content:"(";
}
.cart-btn .total-items::after{
  content:")";
}

@media (min-width: 1024px){
  yc-header .header-inner{
    min-height:76px;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo nav actions";
    -moz-column-gap:var(--gap-3xl);
         column-gap:var(--gap-3xl);
  }
  yc-header .menu-toggle{
    display:none;
  }
  yc-header .logo{
    justify-content:flex-start;
  }
  yc-header .logo img,
  yc-header .logo .vy-logo-svg{
    width:var(--header-logo-width);
  }
  yc-header .logo .vy-logo-svg.is-arabic{
    width:auto;
    height:44px;
  }
  yc-header .links{
    display:block;
  }
  yc-header .links > ul{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    -moz-column-gap:var(--gap-2xl);
         column-gap:var(--gap-2xl);
    row-gap:var(--gap-md);
  }
  yc-header .links > ul > li{
    position:relative;
  }
  yc-header .links .nav-link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    font-size:1.5rem;
    text-decoration-line:underline;
    text-decoration-thickness:1px;
    text-underline-offset:0.45em;
    text-decoration-color:transparent;
  }
  yc-header .links .nav-link:hover, yc-header .links .nav-link:focus-visible{
    text-decoration-color:currentColor;
  }
  yc-header .links .sub-links{
    position:absolute;
    z-index:3;
    inset-block-start:100%;
    inset-inline-start:-20px;
    min-width:220px;
    padding:12px 20px;
    background-color:var(--header-bg-color);
    border:1px solid rgba(var(--header-text-color), 0.16);
    opacity:0;
    visibility:hidden;
    translate:0 -4px;
    transition:opacity var(--transition-duration-normal) var(--ease-out), translate var(--transition-duration-normal) var(--ease-out), visibility var(--transition-duration-normal);
  }
  yc-header .links .sub-links a{
    display:block;
    padding-block:8px;
    font-size:1.45rem;
    color:rgb(var(--header-text-color));
  }
  yc-header .links .sub-links a:hover{
    color:var(--vy-sage);
  }
  yc-header .links li:hover > .sub-links,
  yc-header .links li:focus-within > .sub-links{
    opacity:1;
    visibility:visible;
    translate:0 0;
  }
  yc-header .search-btn{
    display:inline-flex;
  }
  yc-header .search-btn .label-close{
    display:none;
  }
  yc-header .search-btn[aria-expanded=true] .label-open{
    display:none;
  }
  yc-header .search-btn[aria-expanded=true] .label-close{
    display:inline;
  }
  yc-header .search-bar[data-expanded=true]{
    display:block;
    position:absolute;
    inset-block-start:calc(100% + 17px);
    inset-inline-end:0;
    width:340px;
    padding:16px;
    background-color:var(--header-bg-color);
    border:1px solid rgba(var(--header-text-color), 0.16);
  }
}
.menu-drawer{
  display:flex;
  flex-direction:column;
  overflow-y:auto !important;
  color:rgb(var(--header-text-color));
  background-color:var(--header-bg-color);
}
.menu-drawer .menu-head{
  position:sticky;
  inset-block-start:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:60px;
  padding-inline:var(--page-gutter);
  background-color:var(--header-bg-color);
  border-block-end:1px solid rgba(var(--header-text-color), 0.16);
}
.menu-drawer .menu-head a{
  display:inline-flex;
}
.menu-drawer .menu-head img,
.menu-drawer .menu-head .vy-logo-svg{
  width:min(var(--header-logo-width), 104px);
  height:auto;
}
.menu-drawer .menu-head .vy-logo-svg.is-arabic{
  width:auto;
  height:36px;
}
.menu-drawer .menu-core{
  flex:1;
  display:grid;
  align-content:start;
  grid-gap:var(--gap-2xl);
  gap:var(--gap-2xl);
  padding:var(--gap-2xl) var(--page-gutter);
}
.menu-drawer .navigation{
  display:grid;
}
.menu-drawer .navigation > li{
  border-block-end:1px solid rgba(var(--header-text-color), 0.16);
}
.menu-drawer .navigation > li > a{
  display:block;
  padding-block:14px;
  font-family:var(--font-display);
  font-size:2.8rem;
  line-height:1.2;
  color:rgb(var(--header-text-color));
}
.menu-drawer .navigation .sub-links{
  display:grid;
  padding-block-end:14px;
}
.menu-drawer .navigation .sub-links a{
  display:block;
  padding-block:8px;
  font-size:1.5rem;
  color:var(--vy-sage);
}
.menu-drawer .search-bar{
  display:flex;
  align-items:stretch;
  gap:var(--gap-lg);
}
.menu-drawer .search-bar input{
  flex:1;
}
.menu-drawer .menu-foot{
  padding:var(--gap-xl) var(--page-gutter);
  font-size:var(--text-sm);
  color:var(--vy-sage);
}

.cart-drawer{
  --drawer-border:1px solid rgba(var(--header-text-color), 0.16);
  height:100%;
  display:flex;
  flex-direction:column;
  background-color:var(--header-bg-color);
}
.cart-drawer[data-is-empty] .empty{
  display:flex;
}
.cart-drawer[data-is-empty] yc-cart-drawer-items,
.cart-drawer[data-is-empty] .footer{
  display:none;
}
.cart-drawer .empty{
  display:none;
}
.cart-drawer .header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:60px;
  padding-inline:var(--page-gutter);
  border-block-end:var(--drawer-border);
}
.cart-drawer .header .title{
  font-size:2.4rem;
}
.cart-drawer yc-cart-drawer-items{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--gap-md);
  padding:1.5em;
  border-block-end:var(--drawer-border);
  overflow-y:scroll;
}
.cart-drawer .footer{
  position:sticky;
  inset-block-end:0;
}
.cart-drawer .footer .totals{
  padding:1em 1.5em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-block-end:var(--drawer-border);
  font-size:var(--text-md);
  font-weight:550;
}
.cart-drawer .footer .actions{
  padding:1em 1.5em;
  display:grid;
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
  border-block-end:var(--drawer-border);
}
.cart-drawer .footer .actions .secondary:hover{
  color:var(--header-bg-color);
}
.cart-drawer .item{
  display:flex;
  border-bottom:var(--drawer-border);
  gap:var(--gap-lg);
  padding-block:var(--gap-lg);
}
.cart-drawer .item:first-of-type{
  padding-block-start:0;
}
.cart-drawer .item:last-of-type{
  padding-block-end:0;
  border-block-end:none;
}
.cart-drawer .item .image{
  width:100px;
  height:100px;
  overflow:hidden;
  border-radius:var(--button-border-radius);
}
.cart-drawer .item .image .card-placeholder{
  width:100%;
  height:100%;
  background-color:rgba(var(--header-text-color), 0.05);
}
.cart-drawer .item .image .card-placeholder svg{
  color:rgba(var(--header-text-color), 0.3);
}
.cart-drawer .item .image img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
}
.cart-drawer .item .info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--gap-md);
}
.cart-drawer .item .info .heading{
  width:-moz-fit-content;
  width:fit-content;
  display:flex;
  flex-direction:column;
  gap:var(--gap-sm);
}
.cart-drawer .item .info .heading > [data-price]{
  font-size:var(--text-md);
  font-weight:550;
}
.cart-drawer .item .info .heading .name{
  display:-webkit-box;
  line-clamp:2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cart-drawer .item .info .heading .variant{
  font-size:var(--text-xs);
  color:color-mix(in srgb, currentColor 80%, transparent);
}
.cart-drawer .item .info .heading .price{
  display:flex;
  align-items:center;
  gap:4px;
}
.cart-drawer .item .info .heading .price .compare-at{
  opacity:0.5;
  -webkit-text-decoration:line-through;
  text-decoration:line-through;
}
.cart-drawer .item .actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-block-start:auto;
}
.cart-drawer .bundle-group{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cart-drawer .bundle-group .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cart-drawer .bundle-group .top .title{
  font-size:var(--text-md);
  color:color-mix(in srgb, currentColor 80%, transparent);
}
.cart-drawer .bundle-group .list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cart-drawer .bundle-group .list .item:has(.free[hidden]){
  order:-1;
}

@media (max-width: 768px){
  .cart-drawer .item .image{
    width:70px;
    height:70px;
  }
}
footer.vy-footer{
  margin-block-start:auto;
  color:rgb(var(--footer-text-color));
  background-color:var(--footer-bg-color);
}
footer.vy-footer a{
  color:rgb(var(--footer-text-color));
  font-size:1.5rem;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.35em;
  text-decoration-color:transparent;
}
footer.vy-footer a:hover, footer.vy-footer a:focus-visible{
  text-decoration-color:currentColor;
}
footer.vy-footer a:focus-visible{
  outline-color:rgb(var(--footer-text-color));
}
footer.vy-footer .footer-inner{
  max-width:var(--page-max);
  margin-inline:auto;
  padding:56px var(--page-gutter) 40px;
  display:grid;
  grid-gap:48px;
  gap:48px;
}
footer.vy-footer .store-brand{
  display:grid;
  justify-items:start;
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
}
footer.vy-footer .store-brand a{
  display:inline-flex;
}
footer.vy-footer .store-brand img,
footer.vy-footer .store-brand .vy-logo-svg{
  width:var(--footer-logo-width);
  height:auto;
}
footer.vy-footer .store-brand .tagline{
  font-size:1.4rem;
  letter-spacing:0.02em;
  color:rgba(var(--footer-text-color), 0.72);
}
footer.vy-footer .links-box{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-gap:40px var(--gap-xl);
  gap:40px var(--gap-xl);
}
footer.vy-footer .navigation .nav-title{
  margin-block-end:var(--gap-lg);
  font-family:var(--font-body);
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1.4;
  color:rgba(var(--footer-text-color), 0.64);
}
footer.vy-footer .navigation ul{
  display:grid;
  grid-gap:10px;
  gap:10px;
}
footer.vy-footer .copyright{
  max-width:var(--page-max);
  margin-inline:auto;
  padding:20px var(--page-gutter) 28px;
  background:linear-gradient(rgba(var(--footer-text-color), 0.18), rgba(var(--footer-text-color), 0.18)) no-repeat center top/calc(100% - 2 * var(--page-gutter)) 1px;
}
footer.vy-footer .copyright p{
  font-size:1.3rem;
  color:rgba(var(--footer-text-color), 0.64);
}

@media (min-width: 1024px){
  footer.vy-footer .footer-inner{
    grid-template-columns:4fr 8fr;
    padding-block:88px 64px;
  }
  footer.vy-footer .links-box{
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  }
}
#youcan-section--announcement-bar{
  order:var(--announcement_bar_order);
  padding-inline:var(--page-gutter);
  background-color:rgb(var(--announcement-bar-background-color));
}
#youcan-section--announcement-bar .announcement{
  text-align:center;
}
#youcan-section--announcement-bar .announcement .message{
  display:block;
  padding-block:9px;
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1.4;
  color:rgb(var(--announcement-bar-foreground-color));
}
#youcan-section--announcement-bar .announcement a.message{
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.3em;
}