*{
  margin:0;
  padding:0;
  line-height:150%;
  box-sizing:border-box;
  font-family:var(--font-family);
}

html{
  scroll-behavior:smooth;
}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  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;
}

html{
  font-size:calc(var(--font-body-scale) * 62.5%);
}

body{
  font-size:1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6{
  font-weight:normal;
}

h1,
.h1{
  font-size:calc(var(--font-heading-scale) * 4rem);
}

h2,
.h2{
  font-size:calc(var(--font-heading-scale) * 3rem);
}

h3,
.h3{
  font-size:calc(var(--font-heading-scale) * 2.4rem);
}

h4,
.h4{
  font-size:calc(var(--font-heading-scale) * 1.8rem);
}

h5,
.h5{
  font-size:calc(var(--font-heading-scale) * 1.6rem);
}

h6,
.h6{
  font-size:calc(var(--font-heading-scale) * 1.4rem);
}

@media (max-width: 768px){
  h1,
  .h1{
    font-size:calc(var(--font-heading-scale) * 3rem);
  }
  h2,
  .h2{
    font-size:calc(var(--font-heading-scale) * 2rem);
  }
  h3,
  .h3{
    font-size:calc(var(--font-heading-scale) * 1.7rem);
  }
  h4,
  .h4{
    font-size:calc(var(--font-heading-scale) * 1.5rem);
  }
  h5,
  .h5{
    font-size:calc(var(--font-heading-scale) * 1.2rem);
  }
  h6,
  .h6{
    font-size:calc(var(--font-heading-scale) * 1.1rem);
  }
}
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:var(--transition-duration-slow);
}

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

ul,
ol{
  list-style:none;
}

button,
.yc-btn{
  padding:12px 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--gap-md);
  border-radius:var(--button-border-radius);
}
button.primary,
.yc-btn.primary{
  background-color:rgb(var(--color-button));
  color:rgb(var(--color-button-text));
  border:1px solid rgb(var(--color-button));
}
button.primary:focus-visible,
.yc-btn.primary:focus-visible{
  outline-color:rgb(var(--color-button));
}
button.secondary,
.yc-btn.secondary{
  color:rgb(var(--color-secondary-button));
  background-color:transparent;
  border:1px solid color-mix(in srgb, rgb(var(--color-secondary-button)) 20%, transparent);
}
button.destructive,
.yc-btn.destructive{
  color:var(--color-base-white);
  background-color:var(--color-error-500);
}
button.link,
.yc-btn.link{
  padding:0;
  padding:initial;
  position:relative;
  color:rgb(var(--color-button-text));
}
button.link::before,
.yc-btn.link::before{
  content:"";
  opacity:0;
  height:100%;
  width:0%;
  top:50%;
  left:-12px;
  padding:5px 0;
  translate:0 -50%;
  position:absolute;
  border-radius:calc(var(--button-border-radius) * 0.66);
  transition:var(--transition-duration-normal);
  background-color:color-mix(in srgb, currentColor 5%, 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:1px solid color-mix(in srgb, currentColor 20%, transparent);
}
button.icon[data-size$=sm],
.yc-btn.icon[data-size$=sm]{
  padding:8px;
  border-radius:calc(var(--button-border-radius) * 0.66);
}
button.icon[data-size$=sm] svg,
.yc-btn.icon[data-size$=sm] svg{
  width:15px;
  height:15px;
}
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],
.yc-btn:disabled,
.yc-btn[data-disabled],
.yc-btn[data-loading]{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}
button.link:hover::before{
  opacity:1;
  width:100%;
  padding:5px 12px;
}
.yc-btn.link:hover::before{
  opacity:1;
  width:100%;
  padding:5px 12px;
}
button.ghost:hover, button.icon:hover, .yc-btn.ghost:hover, .yc-btn.icon:hover{
  background-color:color-mix(in srgb, currentColor 5%, transparent);
}
button.secondary:hover:not(:disabled){
  color:currentColor;
  border-color:rgb(var(--color-secondary-button));
  background-color:rgb(var(--color-secondary-button));
}
.yc-btn.secondary:hover:not(:disabled){
  color:currentColor;
  border-color:rgb(var(--color-secondary-button));
  background-color:rgb(var(--color-secondary-button));
}
button.primary:hover:not(:disabled){
  opacity:0.8;
}
button.destructive:hover:not(:disabled){
  opacity:0.8;
}
button.loading:hover:not(:disabled){
  opacity:0.8;
}
button.with-icon:hover:not(:disabled){
  opacity:0.8;
}
.yc-btn.primary:hover:not(:disabled){
  opacity:0.8;
}
.yc-btn.destructive:hover:not(:disabled){
  opacity:0.8;
}
.yc-btn.loading:hover:not(:disabled){
  opacity:0.8;
}
.yc-btn.with-icon:hover:not(:disabled){
  opacity:0.8;
}

a.link:not(.yc-btn):hover{
  -webkit-text-decoration:underline;
  text-decoration:underline;
}

a,
label,
button,
summary,
.yc-btn{
  outline-offset:1px;
  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:rgb(currentColor);
  outline-color:rgb(var(--section-text-color, currentColor));
}

select,
textarea,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]){
  width:100%;
  padding:12px 15px;
  background-color:transparent;
  border-radius:var(--input-border-radius);
  color:rgb(var(--section-text-color, var(--color-primary)));
  border:1px solid color-mix(in srgb, currentColor 20%, transparent);
}
@media (max-width: 768px){
  select,
  textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]){
    font-size:16px;
  }
}
select::-moz-placeholder, textarea::-moz-placeholder, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search])::-moz-placeholder{
  color:color-mix(in srgb, currentColor 60%, transparent);
}
select::placeholder,
textarea::placeholder,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search])::placeholder{
  color:color-mix(in srgb, currentColor 60%, transparent);
}
select:focus,
textarea:focus,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):focus{
  border:1px solid currentColor;
}
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:46px;
}

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

yc-section{
  display:block;
  padding-inline:10%;
  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);
}

.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;
  justify-content:center;
  align-items:center;
  min-height:400px;
}

.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{
  color:color-mix(in srgb, currentColor 15%, transparent);
}
.empty .title{
  font-weight:550;
}
.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{
    padding-inline:1em;
  }
  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);
  }
}