.ugs-sbc{
  --ugs-primary-white:#FFFFFF;
  --ugs-primary-espresso:#2A0C00;
  --ugs-neutral-black:#1A1410;
  --ugs-neutral-sand:#D4C4B4;

  
  --ugs-sbc-bag-bg:transparent;
  --ugs-sbc-bag-fg:#2A0C00;
  --ugs-sbc-bag-border:#2A0C00;
  --ugs-sbc-bag-border-w:1px;
  --ugs-sbc-bag-radius:2px;
  --ugs-sbc-bag-hover-bg:#2A0C00;
  --ugs-sbc-bag-hover-fg:#FFFFFF;
  --ugs-surface-cream:#FCF7F1;

  --ugs-card-gap:24px;
  --ugs-grid-gap:20px;

  width:100%;
  padding:50px;
  background:var(--ugs-surface-cream);
  box-sizing:border-box;
  font-family:var(--ugs-sbc-sans);
  -webkit-font-smoothing:antialiased;

  --ugs-sbc-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ugs-sbc-serif: 'Instrument Serif', Georgia, serif;
}
.ugs-sbc *,.ugs-sbc *::before,.ugs-sbc *::after{box-sizing:border-box;}

.ugs-sbc :where(a){color:inherit;text-decoration:none;}
.ugs-sbc :where(button){font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;}
.ugs-sbc :where(h2,h3,h4,p,ul,li){margin:0;padding:0;list-style:none;}
.ugs-sbc :where(img){display:block;max-width:100%;}

.ugs-sbc__inner{
  max-width:1360px;
  margin:0 auto;
}

.ugs-sbc__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:36px;
}

.ugs-sbc__title{
  font-family: var(--ugs-sbc-ff-title, var(--ugs-sbc-serif));
  font-weight:400;
  font-size:48px;
  line-height:68px;
  letter-spacing:0;
  text-transform:capitalize;
  color:#000000;
}
.ugs-sbc--underline .ugs-sbc__title{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:8px;
}

.ugs-sbc__tabs{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  width:395px;
  max-width:100%;
  border-bottom:1px solid rgba(26,20,16,.2);
}
.ugs-sbc__tab{
  position:relative;
  flex:1 1 auto;
  padding:0 4px 10px;
  font-family: var(--ugs-sbc-ff-tab, var(--ugs-sbc-sans));
  font-weight:400;
  font-size:16px;
  line-height:26px;
  letter-spacing:-0.02em;
  text-align:center;
  color:var(--ugs-primary-espresso);
  background:none;
  border:0;
  white-space:nowrap;
  cursor:pointer;
  transition:color .25s ease;
}
.ugs-sbc__tab::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:var(--ugs-neutral-black);
  opacity:0;
  transition:opacity .25s ease;
}
.ugs-sbc__tab:hover{color:var(--ugs-neutral-black);}
.ugs-sbc__tab:focus-visible{outline:2px solid var(--ugs-neutral-black);outline-offset:3px;}
.ugs-sbc__tab.is-active{
  font-weight:700;
  color:var(--ugs-neutral-black);
}
.ugs-sbc__tab.is-active::after{opacity:1;}

.ugs-sbc--single-tab .ugs-sbc__tabs{display:none;}

.ugs-sbc__panel{
  display:none;
  opacity:0;
  transition:opacity .3s ease;
}
.ugs-sbc__panel.is-active{display:block;}
.ugs-sbc__panel.is-visible{opacity:1;}

.ugs-sbc__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--ugs-grid-gap);
  row-gap:48px;
}

.ugs-sbc__empty{
  grid-column:1/-1;
  padding:40px 0;
  font-size:15px;
  line-height:24px;
  color:var(--ugs-primary-espresso);
  opacity:.75;
  font-family: var(--ugs-sbc-ff-empty, inherit);
}

.ugs-sbc-card{
  display:flex;
  flex-direction:column;
  gap:var(--ugs-card-gap);
}

.ugs-sbc-card__media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--ugs-primary-white);
  overflow:hidden;
}

.ugs-sbc-card__badge{
  position:absolute;
  top:10px;
  left:9px;
  z-index:3;
  min-width:79px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 10px;
  background:var(--ugs-neutral-sand);
  color:var(--ugs-neutral-black);
  font-family: var(--ugs-sbc-ff-badge, var(--ugs-sbc-sans));
  font-weight:400;
  font-size:14px;
  line-height:22px;
  letter-spacing:0;
}

.ugs-sbc-card__link{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
}

.ugs-sbc-card__img{
  position:absolute;
  inset:3.68%;
  width:auto; height:auto;
  max-width:none;
  object-fit:contain;
  transition:opacity .45s ease;
}

.ugs-sbc-card__img--hover{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .45s ease;
}

.ugs-sbc-card:hover .ugs-sbc-card__img--hover,
.ugs-sbc-card:focus-within .ugs-sbc-card__img--hover{opacity:1;}
.ugs-sbc-card:hover .ugs-sbc-card__img,
.ugs-sbc-card:focus-within .ugs-sbc-card__img{opacity:0;}

.ugs-sbc-card--single:hover .ugs-sbc-card__img,
.ugs-sbc-card--single:focus-within .ugs-sbc-card__img{opacity:1;}

.ugs-sbc-card__info{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  min-height:86px;
}
.ugs-sbc-card__text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.ugs-sbc-card__name{
  font-family: var(--ugs-sbc-ff-name, var(--ugs-sbc-serif));
  font-weight:400;
  font-size:24px;
  line-height:32px;
  letter-spacing:0;
  text-transform:capitalize;
  color:var(--ugs-neutral-black);
}
.ugs-sbc-card__collection{
  font-family: var(--ugs-sbc-ff-collection, var(--ugs-sbc-sans));
  font-weight:400;
  font-size:14px;
  line-height:22px;
  color:var(--ugs-neutral-black);
}
.ugs-sbc-card__price{
  font-family: var(--ugs-sbc-ff-price, var(--ugs-sbc-sans));
  font-weight:400;
  font-size:16px;
  line-height:26px;
  letter-spacing:-0.02em;
  color:var(--ugs-neutral-black);
}
.ugs-sbc-card__price del{opacity:.55;margin-right:6px;text-decoration:line-through;}
.ugs-sbc-card__price ins{text-decoration:none;}
.ugs-sbc-card__price .woocommerce-Price-amount{font:inherit;color:inherit;}

.ugs-sbc-card__bag{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background:var(--ugs-sbc-bag-bg);
  border:var(--ugs-sbc-bag-border-w) solid var(--ugs-sbc-bag-border);
  border-radius:var(--ugs-sbc-bag-radius);
  color:var(--ugs-sbc-bag-fg);
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease;
}
.ugs-sbc-card__bag svg{
  width:24px;
  height:24px;
  display:block;
}
.ugs-sbc-card__bag svg path{
  stroke:currentColor;
  stroke-width:1.5;
  fill:none;
  transition:stroke .25s ease;
}
.ugs-sbc-card__bag:hover,
.ugs-sbc-card__bag:focus-visible{
  background:var(--ugs-sbc-bag-hover-bg);
  border-color:var(--ugs-sbc-bag-hover-bg);
  color:var(--ugs-sbc-bag-hover-fg);
}
.ugs-sbc-card__bag:focus-visible{outline:2px solid var(--ugs-neutral-black);outline-offset:2px;}

.ugs-sbc-card__bag.is-loading{opacity:.45;pointer-events:none;}
.ugs-sbc-card__bag .ugs-sbc-card__check{display:none;}
.ugs-sbc-card__bag.is-added .ugs-sbc-card__check{display:block;}
.ugs-sbc-card__bag.is-added .ugs-sbc-card__bagicon{display:none;}

@media (max-width:1180px){
  .ugs-sbc__title{font-size:42px;line-height:58px;}
  .ugs-sbc__grid{row-gap:40px;}
}

@media (max-width:1024px){
  .ugs-sbc{padding:44px 32px;}
  .ugs-sbc__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ugs-sbc__tabs{width:360px;}
}

@media (max-width:767px){
  .ugs-sbc{padding:36px 20px;}
  .ugs-sbc__head{
    flex-direction:column;
    align-items:stretch;
    gap:20px;
    margin-bottom:26px;
  }
  .ugs-sbc__title{
    font-size:32px;
    line-height:44px;
  }
  .ugs-sbc--underline .ugs-sbc__title{text-underline-offset:6px;}
  .ugs-sbc__tabs{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .ugs-sbc__tabs::-webkit-scrollbar{display:none;}
  .ugs-sbc .ugs-sbc__tabs{
    border-bottom-width:0;
    box-shadow:inset 0 -1px 0 var(--ugs-sbc-tab-line, rgba(26,20,16,.2));
  }
  .ugs-sbc__tab{
    flex:1 0 auto;
    padding:0 10px 8px;
    font-size:14px;
    line-height:24px;
  }
  .ugs-sbc .ugs-sbc__tab::after{bottom:0;z-index:1;}
  .ugs-sbc__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:12px;
    row-gap:28px;
  }
  .ugs-sbc-card{gap:14px;}
  .ugs-sbc-card__badge{
    top:6px; left:6px;
    min-width:0;
    height:24px;
    padding:0 8px;
    font-size:11px;
    line-height:18px;
  }
  .ugs-sbc-card__info{
    min-height:0;
    gap:8px;
    align-items:center;
  }
  .ugs-sbc-card__name{font-size:18px;line-height:24px;}
  .ugs-sbc-card__collection{font-size:12px;line-height:18px;}
  .ugs-sbc-card__price{font-size:14px;line-height:22px;}
  .ugs-sbc-card__bag{width:36px;height:36px;padding:8px;}
  .ugs-sbc-card__bag svg{width:20px;height:20px;}
}

@media (max-width:360px){
  .ugs-sbc__title{font-size:28px;line-height:38px;}
  .ugs-sbc-card__name{font-size:16px;line-height:22px;}
}

@media (hover:none){
  .ugs-sbc-card:hover .ugs-sbc-card__img{opacity:1;}
  .ugs-sbc-card:hover .ugs-sbc-card__img--hover{opacity:0;}
  
  .ugs-sbc-card__bag:hover{background:var(--ugs-sbc-bag-bg);border-color:var(--ugs-sbc-bag-border);color:var(--ugs-sbc-bag-fg);}
}

@media (prefers-reduced-motion:reduce){
  .ugs-sbc *{transition-duration:.01ms !important;}
}

.ugs-sbc__notice{
  grid-column:1/-1;
  padding:14px 16px;
  background:#fff;
  border:1px dashed rgba(42,12,0,.3);
  font-size:13px;
  line-height:20px;
  color:var(--ugs-primary-espresso);
  font-family: var(--ugs-sbc-ff-notice, inherit);
}

.ugs-sbc button {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none !important;
  box-shadow: none !important;
  color: inherit !important;
}
.ugs-sbc a { color: inherit !important; text-decoration: none !important; }

.ugs-sbc .ugs-sbc-card__bag {
  background-color: var(--ugs-sbc-bag-bg) !important;
  border: var(--ugs-sbc-bag-border-w) solid var(--ugs-sbc-bag-border) !important;
  color: var(--ugs-sbc-bag-fg) !important;
}
.ugs-sbc .ugs-sbc-card__bag svg path { fill: none !important; stroke: currentColor !important; }

.ugs-sbc .ugs-sbc-card__bag:hover,
.ugs-sbc .ugs-sbc-card__bag:focus-visible {
  background-color: var(--ugs-sbc-bag-hover-bg) !important;
  border-color: var(--ugs-sbc-bag-hover-bg) !important;
  color: var(--ugs-sbc-bag-hover-fg) !important;
}
.ugs-sbc .ugs-sbc-card__bag:hover svg path,
.ugs-sbc .ugs-sbc-card__bag:focus-visible svg path { stroke: currentColor !important; }

.ugs-sbc .ugs-sbc__tab { color: var(--ugs-primary-espresso) !important; }
.ugs-sbc .ugs-sbc__tab.is-active { color: var(--ugs-neutral-black) !important; }

.ugs-sbc__nav{display:none;}

@media (max-width:767px){
  .ugs-sbc--m-carousel .ugs-sbc__grid{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    position:relative;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
    row-gap:0;
    margin-right:calc(-1 * var(--ugs-sbc-m-bleed,0px));
    padding-right:var(--ugs-sbc-m-bleed,0px);
    scroll-padding-left:0;
    touch-action:pan-x pan-y;
  }
  .ugs-sbc--m-carousel .ugs-sbc__grid::-webkit-scrollbar{display:none;}
  .ugs-sbc--m-carousel .ugs-sbc__grid.is-animating{scroll-snap-type:none;}

  .ugs-sbc--m-carousel .ugs-sbc__grid > .ugs-sbc-card{
    flex:0 0 calc((100% - (var(--ugs-sbc-m-pv,1.6) - 1) * var(--ugs-sbc-col-gap,12px)) / var(--ugs-sbc-m-pv,1.6));
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .ugs-sbc--m-carousel .ugs-sbc__grid > .ugs-sbc__notice,
  .ugs-sbc--m-carousel .ugs-sbc__grid > .ugs-sbc__empty{
    flex:0 0 100%;
    scroll-snap-align:start;
  }

  .ugs-sbc--m-carousel .ugs-sbc__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:22px;
  }
  .ugs-sbc--m-carousel .ugs-sbc__nav.is-static{display:none;}
}

.ugs-sbc__dots{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  min-width:0;
}

.ugs-sbc .ugs-sbc__dot{
  position:relative;
  flex:0 0 auto;
  width:var(--ugs-sbc-dot-size,6px);
  height:var(--ugs-sbc-dot-size,6px);
  min-width:0;
  min-height:0;
  padding:0 !important;
  margin:0;
  line-height:0;
  border:0 none !important;
  border-radius:var(--ugs-sbc-dot-radius,6px) !important;
  background-color:var(--ugs-sbc-dot,#D4C4B4) !important;
  cursor:pointer;
  transition:width .3s ease,background-color .3s ease;
}
.ugs-sbc .ugs-sbc__dot::after{
  content:"";
  position:absolute;
  inset:-9px -3px;
}
.ugs-sbc .ugs-sbc__dot.is-active{
  width:var(--ugs-sbc-dot-active-w,22px);
  background-color:var(--ugs-sbc-dot-active,#2A0C00) !important;
}
.ugs-sbc .ugs-sbc__dot:focus-visible{outline:2px solid var(--ugs-neutral-black);outline-offset:3px;}

.ugs-sbc .ugs-sbc__arrow{
  flex:0 0 auto;
  width:var(--ugs-sbc-arrow-size,34px);
  height:var(--ugs-sbc-arrow-size,34px);
  min-width:0;
  min-height:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  margin:0;
  line-height:0;
  background-color:var(--ugs-sbc-arrow-bg,transparent) !important;
  border:1px solid var(--ugs-sbc-arrow-border,#2A0C00) !important;
  border-radius:var(--ugs-sbc-arrow-radius,2px) !important;
  color:var(--ugs-sbc-arrow-fg,#2A0C00) !important;
  cursor:pointer;
  transition:opacity .25s ease;
}
.ugs-sbc .ugs-sbc__arrow svg{
  width:var(--ugs-sbc-arrow-icon,16px);
  height:var(--ugs-sbc-arrow-icon,16px);
  display:block;
}
.ugs-sbc .ugs-sbc__arrow svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.5;
}
.ugs-sbc .ugs-sbc__arrow[disabled]{opacity:.35;cursor:default;}
.ugs-sbc .ugs-sbc__arrow:focus-visible{outline:2px solid var(--ugs-neutral-black);outline-offset:2px;}

.ugs-sbc__bar{
  position:relative;
  flex:0 1 var(--ugs-sbc-bar-w,100%);
  width:var(--ugs-sbc-bar-w,100%);
  max-width:100%;
  min-width:0;
  height:max(var(--ugs-sbc-bar-thumb-h,2px),var(--ugs-sbc-bar-track-h,1px));
  padding:8px 0;
  box-sizing:content-box;
  cursor:pointer;
  touch-action:none;
}
.ugs-sbc__bar::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:var(--ugs-sbc-bar-track-h,1px);
  transform:translateY(-50%);
  background-color:var(--ugs-sbc-bar-track,#D4C4B4);
  border-radius:var(--ugs-sbc-bar-radius,0px);
}
.ugs-sbc__bar-thumb{
  position:absolute;
  left:0;
  top:50%;
  width:var(--ugs-sbc-bar-size,20%);
  height:var(--ugs-sbc-bar-thumb-h,2px);
  margin-top:calc(var(--ugs-sbc-bar-thumb-h,2px) / -2);
  background-color:var(--ugs-sbc-bar-thumb,#2A0C00) !important;
  border-radius:var(--ugs-sbc-bar-radius,0px);
  will-change:transform;
}
@media (max-width:767px){
  .ugs-sbc--m-carousel .ugs-sbc__nav--bar .ugs-sbc__arrow{flex:0 0 auto;}
}

.ugs-sbc-card__text{flex:1 1 auto;}
.ugs-sbc-card__info{text-align:center;}
.ugs-sbc--bag-image .ugs-sbc-card__info{justify-content:center;}

.ugs-sbc--bag-image .ugs-sbc-card__media .ugs-sbc-card__bag{
  position:absolute;
  top:var(--ugs-sbc-bag-top,10px);
  right:var(--ugs-sbc-bag-right,10px);
  left:auto;
  bottom:auto;
  z-index:4;
  margin:0;
}
.ugs-sbc--bag-hover .ugs-sbc-card__media .ugs-sbc-card__bag{
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease,visibility .25s ease,transform .25s ease;
}
.ugs-sbc--bag-hover .ugs-sbc-card:hover .ugs-sbc-card__media .ugs-sbc-card__bag,
.ugs-sbc--bag-hover .ugs-sbc-card:focus-within .ugs-sbc-card__media .ugs-sbc-card__bag,
.ugs-sbc--bag-hover .ugs-sbc-card__media .ugs-sbc-card__bag.is-added{
  opacity:1;
  visibility:visible;
  transform:none;
}
.ugs-sbc--bag-hover .ugs-sbc-card__media .ugs-sbc-card__bag.is-loading{
  opacity:.45;
  visibility:visible;
  transform:none;
}
@media (hover:none){
  .ugs-sbc--bag-hover .ugs-sbc-card__media .ugs-sbc-card__bag{
    opacity:1;
    visibility:visible;
    transform:none;
  }
}

.ugs-sbc {
  --ugs-wish-stack-top: var(--ugs-sbc-bag-top, 10px);
  --ugs-wish-stack-right: var(--ugs-sbc-bag-right, 10px);
}
