:root{
  --blanco:#ffffff;
  --off-white:#f8f7f5;
  --paper:#f2f0ec;
  --line:#e8e5e0;
  --line-soft:#f0ede8;

  --ink:#111110;
  --ink-mid:#6b6760;
  --ink-faint:#b0ada8;

  --gold:#c9a42d;
  --gold-bg:#fdf8ee;
  --gold-line:#e8d89a;

  --wa:#25d366;
  --red:#c0392b;

  --fs-10:0.625rem;
  --fs-11:0.6875rem;
  --fs-12:0.75rem;
  --fs-13:0.8125rem;
  --fs-14:0.875rem;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --fs-22:1.375rem;
  --fs-28:1.75rem;
  --fs-36:2.25rem;
  --fs-48:3rem;
  --fs-56:3.5rem;

  --gap-2:2px;
  --gap-4:4px;
  --gap-6:6px;
  --gap-8:8px;
  --gap-12:12px;
  --gap-16:16px;
  --gap-20:20px;
  --gap-24:24px;
  --gap-32:32px;
  --gap-40:40px;
  --gap-48:48px;
  --gap-64:64px;
  --gap-80:80px;
  --gap-96:96px;

  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  --shadow:0 18px 45px rgba(0,0,0,.06);
  --shadow-strong:0 24px 60px rgba(0,0,0,.10);
}

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


img{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:cover !important;
}

a{
  color:inherit !important;
  text-decoration:none !important;
}

button{
  font-family:inherit !important;
  cursor:pointer !important;
}

::-webkit-scrollbar{
  width:3px !important;
  height:3px !important;
}

::-webkit-scrollbar-track{
  background:transparent !important;
}

::-webkit-scrollbar-thumb{
  background:var(--line) !important;
}

:focus-visible{
  outline:1.5px solid var(--gold) !important;
  outline-offset:3px !important;
}

/* PAGE WRAPPER */

.product-page{
  max-width:1200px !important;
  margin:0 auto !important;
  margin-top:60px !important;
  padding:25px 10px 50px !important;
}

/* TOPBAR */

.product-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:var(--gap-12) !important;
  margin-bottom:30px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid var(--line) !important;
  font-size:var(--fs-11) !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  animation:rise .35s ease both !important;
}

.back-link{
  transition:opacity .2s var(--ease), color .2s var(--ease) !important;
}

.back-link:hover{
  opacity:.72 !important;
  color:var(--gold) !important;
}

.brand-logo{
  font-weight:500 !important;
  letter-spacing:.18em !important;
}

/* LAYOUT */

.product-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 550px !important;
  gap:50px !important;
  align-items:start !important;
  animation:rise .45s .05s ease both !important;
}

/* GALLERY */

.product-gallery{
  display:grid !important;
  grid-template-columns:80px minmax(0,1fr) !important;
  position:sticky !important;
  top:120px !important;
  gap:8px !important;
}

/* THUMBS */

.gallery-thumbs{
  display:flex !important;
  flex-direction:column !important;
  max-height:800px !important;
  overflow-y:auto !important;
  gap:5px !important;
  scrollbar-width:none !important;
}

.gallery-thumbs::-webkit-scrollbar{
  display:none !important;
}

.gallery-thumbs img,
.thumb{
  width:70px !important;
  height:80px !important;
  object-fit:cover !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
  background:var(--paper) !important;
  border:1px solid var(--line-soft) !important;
  opacity:.55 !important;
  transition:
    opacity .25s var(--ease) !important,
    border-color .25s var(--ease) !important,
    transform .25s var(--ease) !important,
    box-shadow .25s var(--ease) !important;
}

.gallery-thumbs img:hover,
.thumb:hover{
  opacity:.85 !important;
  transform:translateY(-1px) !important;
}

.gallery-thumbs img.is-active,
.thumb.is-active{
  opacity:1 !important;
  border-color:var(--gold) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.08) !important;
}

/* MAIN IMAGE */

.gallery-main{
  background:var(--off-white) !important;
  overflow:hidden !important;
  position:relative !important;
  border:1px solid var(--line-soft) !important;
  box-shadow:var(--shadow) !important;
  aspect-ratio:1 !important;
}

.gallery-main-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .7s var(--ease) !important;
}

.gallery-main:hover .gallery-main-image{
  transform:scale(1.035) !important;
}

/* SIDEBAR */

.product-sidebar{
  display:flex !important;
  flex-direction:column !important;
  gap:24px !important;
  padding:2px 0 0 !important;
  animation:rise .4s .1s ease both !important;
}

.product-sidebar > *{
  animation:rise .4s ease both !important;
}

.product-sidebar > *:nth-child(1){ animation-delay:.05s; }
.product-sidebar > *:nth-child(2){ animation-delay:.08s; }
.product-sidebar > *:nth-child(3){ animation-delay:.11s; }
.product-sidebar > *:nth-child(4){ animation-delay:.14s; }
.product-sidebar > *:nth-child(5){ animation-delay:.17s; }
.product-sidebar > *:nth-child(6){ animation-delay:.20s; }
.product-sidebar > *:nth-child(7){ animation-delay:.23s; }
.product-sidebar > *:nth-child(8){ animation-delay:.26s; }

/* HEAD */

.product-head{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:var(--gap-12) !important;
  padding-bottom:8px !important;
  border-bottom:1px solid var(--line) !important;
}

.product-category{
  font-size:var(--fs-11) !important;
  font-weight:500 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
}

.product-sku{
  font-size:11px !important;
  font-weight:300 !important;
  letter-spacing:.1em !important;
  color:var(--ink-faint) !important;
}

.product-sku strong {
  font-weight:300 !important;
  color:var(--ink-mid) !important;
}

/* TITLE */

.product-title{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:clamp(36px, 3.5vw, 56px) !important;
  font-weight:400 !important;
  line-height:1.05 !important;
  letter-spacing:-.02em !important;
  color:var(--ink) !important;
}

/* PRICE */

.product-price-wrap{
  display:flex !important;
  align-items:baseline !important;
  gap:var(--gap-12) !important;
  flex-wrap:wrap !important;
}

.product-old-price{
  font-size:var(--fs-16) !important;
  font-weight:300 !important;
  color:var(--ink-faint) !important;
  text-decoration:line-through !important;
}

.product-price{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:var(--fs-36) !important;
  font-weight:400 !important;
  line-height:1 !important;
  color:var(--ink) !important;
  letter-spacing:-.02em !important;
}

.product-save{
  display:inline-flex !important;
  align-items:center !important;
  height:24px !important;
  font-size:var(--fs-11) !important;
  font-weight:500 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--red) !important;
  padding:3px 8px !important;
  border:1px solid currentColor !important;
}

/* DESCRIPTION */

.product-description p {
  font-size:14px !important;
  font-weight:300 !important;
  color:var(--ink-mid) !important;
  line-height:1.6 !important;
  max-width: 100% !important;
}

/* BENEFITS */

.product-benefits{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:16px 0 4px !important;
  border-top:1px solid var(--line-soft) !important;
  border-bottom:1px solid var(--line-soft) !important;
}

.benefit-item{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
}

.benefit-item span{
  display:inline-flex !important;
  width:18px !important;
  height:18px !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 18px !important;
  font-size:12px !important;
  color:var(--gold) !important;
}

.benefit-item p{
  font-size:var(--fs-13) !important;
  font-weight:300 !important;
  color:var(--ink-mid) !important;
  line-height:1.55 !important;
}

/* DETAILS */

.product-details-grid{
  display:grid  !important;
  grid-template-columns:1fr !important;
  gap:14px  !important;
}

.info-card{
  background:var(--blanco) !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  padding:20px !important;
}

.info-card span{
  display:block !important;
  font-size:var(--fs-10) !important;
  font-weight:500 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  color:var(--ink-faint) !important;
  margin-bottom:8px !important;
}

.info-card strong{
  font-size:var(--fs-16) !important;
  font-weight:400 !important;
  line-height:1.6 !important;
}

/* OPTIONS */

.product-options{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.option-box{
  display:flex  !important;
  flex-direction:column !important;
  gap:var(--gap-12) !important;
}

.option-top{
  display:flex  !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.option-top h3{
  font-size:var(--fs-11)  !important;
  font-weight:500 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--ink) !important;
}

#selectedColor{
  font-size:var(--fs-12)  !important;
  font-weight:300 !important;
  color:var(--ink-mid) !important;
  letter-spacing:.04em !important;
}

/* COLORS */

.color-options{
  display:flex  !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

.color-dot{
  width:28px  !important;
  height:28px  !important;
  border:none  !important;
  outline:none  !important;
  cursor:pointer  !important;
  padding:0  !important;
  flex-shrink:0  !important;
  position:relative  !important;
  transition:transform .2s var(--ease) !important;
}

.color-dot::after{
  content:''  !important;
  position:absolute  !important;
  inset:-4px  !important;
  border:1px solid transparent  !important;
  transition:border-color .2s  !important;
}

.color-dot:hover{
  transform:scale(1.1)  !important;
}

.color-dot.is-active::after{
  border-color:var(--ink)  !important;
}

/* SIZES */

.size-options{
  display:flex  !important;
  gap:var(--gap-6) !important;
  flex-wrap:wrap  !important;
}

.size-pill{
  min-width:48px  !important;
  height:35px  !important;
  padding:0 10px  !important;
  background:var(--blanco)  !important;
  border:1px solid var(--line)  !important;
  font-size:var(--fs-12)  !important;
  font-weight:400  !important;
  font-family:'Jost',sans-serif  !important;
  letter-spacing:.1em  !important;
  text-transform:uppercase  !important;
  color:var(--ink-mid)  !important;
  transition:
    background .2s,
    border-color .2s,
    color .2s,
    transform .2s;
}

.size-pill:hover:not(:disabled){
  border-color:var(--ink)  !important;
  color:var(--ink)  !important;
  background:var(--off-white)  !important;
  transform:translateY(-1px)  !important;
}

.size-pill.is-active{
  background:var(--ink)  !important;
  border-color:var(--ink)  !important;
  color:var(--blanco)  !important;
  font-weight:500  !important;
}

.size-pill:disabled{
  opacity:.28  !important;
  cursor:not-allowed  !important;
  text-decoration:line-through  !important;
}

/* QUANTITY */

.qty-selector{
  display:flex  !important; 
  align-items:center  !important;
  gap:0  !important;
  border:1px solid var(--line)  !important;
  width:fit-content  !important;
  background:var(--blanco)  !important;
}

.qty-btn{
  width:35px  !important;
  height:35px  !important;
  background:var(--blanco)  !important;
  border:none  !important;
  color:var(--ink)  !important;
  font-size:16px  !important;
  font-weight:200  !important;
  display:grid  !important;
  place-items:center  !important;
  transition:
    background .15s,
    color .15s;
}

.qty-btn:hover{
  background:var(--off-white)  !important;
}

.qty-number{
  font-family:'Jost',sans-serif  !important;
  font-size:13px  !important;
  font-weight:400  !important;
  min-width:48px  !important;
  text-align:center  !important;
  border-left:1px solid var(--line)  !important;
  border-right:1px solid var(--line)  !important;
  line-height:35px  !important;
  height:35px  !important;
  color:var(--ink)  !important;
}

/* CTA */

.product-actions{
  display:flex  !important;
  flex-direction:column  !important;
  gap:var(--gap-8)  !important;
  padding-top:6px  !important;
}

.btn-primary{
  width:100%  !important;
  padding:18px var(--gap-24)  !important;
  background:var(--ink)  !important;
  color:var(--blanco)  !important;
  border:1px solid var(--ink)  !important;
  font-size:var(--fs-12)  !important;
  font-weight:500  !important;
  letter-spacing:.18em  !important;
  text-transform:uppercase  !important;
  transition:
    background .25s,
    color .25s,
    transform .25s,
    box-shadow .25s;
}

.btn-primary:hover{
  background:var(--blanco)  !important;
  color:var(--ink)  !important;
  transform:translateY(-2px)  !important;
  box-shadow:0 12px 24px rgba(0,0,0,.08)  !important;
}

.btn-primary.added{
  background:var(--wa)  !important;
  border-color:var(--wa)  !important;
  color:var(--blanco)  !important;
}

.btn-whatsapp{
  width:100%  !important;
  padding:17px var(--gap-24)  !important;
  background:transparent  !important;
  color:var(--wa)  !important;
  border:1px solid var(--wa)  !important;
  font-size:var(--fs-12)  !important;
  font-weight:500  !important;
  letter-spacing:.18em  !important;
  text-transform:uppercase  !important;
  transition:
    background .25s,
    color .25s,
    transform .25s,
    box-shadow .25s;
}

.btn-whatsapp:hover{
  background:var(--wa)  !important;
  color:var(--blanco)  !important;
  transform:translateY(-2px)  !important;
  box-shadow:0 12px 24px rgba(37,211,102,.14)  !important;
}

/* RELATED */

.related-products{
  margin-top:var(--gap-96)  !important;
  padding-top:var(--gap-48)  !important;
  border-top:1px solid var(--line)  !important;
  animation:rise .45s .1s ease both  !important;
}

.related-top{
  margin-bottom:var(--gap-40)  !important;
}

.related-top h2{
  font-family:'Playfair Display',Georgia,serif  !important;
  font-size:clamp(var(--fs-22), 2.5vw, var(--fs-36))  !important;
  font-weight:400  !important;
  font-style:italic  !important;
  letter-spacing:-.01em  !important;
  color:var(--ink)  !important;
}

.related-grid{
  display:grid  !important;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr))  !important;
  gap:var(--gap-2)  !important;
}

.related-card{
  background:var(--off-white)  !important;
  border: 1px solid var(--line-soft);
  cursor:pointer  !important;
  display:block  !important;
  color:inherit  !important;
  overflow:hidden  !important;
  transition:opacity .25s, transform .25s, box-shadow .25s  !important;
}

.related-card:hover{
  opacity:.92  !important;
  transform:translateY(-2px)  !important;
  box-shadow:var(--shadow)  !important;
}

.related-card img,
.related-card .card-image{
  width:100%  !important;
  aspect-ratio:3 / 4  !important;
  object-fit:cover  !important;
  display:block  !important;
  background:var(--paper)  !important;
  transition:transform .6s var(--ease)  !important;
}
.related-card__info {
  padding: 10px 15px;
}
.related-card__info h3 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.related-card__info span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  font-size: 16px;
  color: var(--gold);
  font-weight: 500;
}

.related-card:hover img,
.related-card:hover .card-image {
  transform:scale(1.04)  !important;
}

.related-card .card-body,
.related-card-body{
  padding: 16px 16px 20px !important;
  background:var(--blanco)  !important;
  border-top:1px solid var(--line-soft)  !important;
}

.related-card .card-category,
.related-card-category{
  font-size:var(--fs-10)  !important;
  font-weight:500  !important;
  letter-spacing:.15em  !important;
  text-transform:uppercase  !important;
  color:var(--ink-faint)  !important;
  margin-bottom:var(--gap-4)  !important;
}

.related-card .card-title,
.related-card-title{
  font-family:'Playfair Display',Georgia,serif  !important;
  font-size:var(--fs-16)  !important;
  font-weight:400  !important;
  line-height:1.3  !important;
  margin-bottom:var(--gap-8)  !important;
  color:var(--ink)  !important;
}

.related-card .card-price,
.related-card-price{
  font-size:var(--fs-13)  !important;
  font-weight:400  !important;
  color:var(--ink-mid)  !important;
}

/* SKELETON */

@keyframes shimmer {
  0%{ background-position:200% 0  !important; }
  100%{ background-position:-200% 0  !important; }
}

.skeleton{
  background:linear-gradient(90deg, var(--off-white) 25%, var(--paper) 50%, var(--off-white) 75%)  !important;
  background-size:200% 100%  !important;
  animation:shimmer 1.6s infinite  !important;
}

.product-skeleton,
.related-skeleton,
.thumb-skeleton,
.image-skeleton{
  background:#fff  !important;
  border:1px solid var(--line-soft)  !important;
}

.product-skeleton{
  border-radius:26px  !important;
  overflow:hidden  !important;
  box-shadow:var(--shadow)  !important;
}

.skeleton-image{
  aspect-ratio:3 / 4  !important;
}

.skeleton-content{
  padding:18px  !important;
}

.skeleton-line{
  height:14px  !important;
  border-radius:999px  !important;
  margin-bottom:12px  !important;
}


/* DRAWER (use when you add the markup) */

.cart-drawer{
  position:fixed  !important;
  top:0  !important;
  right:0  !important;
  width:min(420px, 100vw)  !important;
  height:100vh  !important;
  background:var(--blanco)  !important;
  border-left:1px solid var(--line)  !important;
  transform:translateX(100%)  !important;
  transition:transform .35s var(--ease)  !important;
  z-index:100  !important;
  box-shadow:-20px 0 40px rgba(0,0,0,.12)  !important;
}

.cart-drawer.is-open{
  transform:translateX(0)  !important;
}

.cart-drawer__header{
  padding:20px  !important;
  border-bottom:1px solid var(--line)  !important;
}

.cart-drawer__body{
  padding:20px  !important;
  overflow:auto  !important;
  height:calc(100vh - 140px)  !important;
}

.cart-drawer__footer{
  padding:20px  !important;
  border-top:1px solid var(--line)  !important;
}

/* WISHLIST / QUICK CHECKOUT (use when you add the markup) */

.wishlist-btn,
.quick-checkout{
  height:44px  !important;
  border:1px solid var(--line)  !important;
  background:var(--blanco)  !important;
  color:var(--ink)  !important;
  font-size:var(--fs-11)  !important;
  letter-spacing:.14em  !important;
  text-transform:uppercase  !important;
  transition:.25s ease  !important;
}

.wishlist-btn:hover{
  border-color:var(--gold)  !important;
  color:var(--gold)  !important;
}

.quick-checkout{
  background:var(--ink)  !important;
  color:var(--blanco)  !important;
}

.quick-checkout:hover{
  background:#222  !important;
}

/* ANIMATIONS */

@keyframes rise{
  from{
    opacity:0;
    transform:translateY(12px)  !important;
  }
  to{
    opacity:1;
    transform:translateY(0)  !important;
  }
}

/* RESPONSIVE — TABLET */

@media (max-width:1024px){
  .product-page{
    margin-top:10px;
    padding:32px 32px 64px  !important;
  }

  .product-layout{
    grid-template-columns:1fr  !important;
    gap:48px  !important;
  }

  .product-gallery{
    position:static  !important;
    grid-template-columns:60px 1fr  !important;
    gap:8px  !important;
  }

  .gallery-main,
  .gallery-thumbs{
    position:static  !important;
    top:auto  !important;
  }

  .product-sidebar{
    gap:24px  !important;
  }

  .related-grid{
    grid-template-columns:repeat(2,1fr)  !important;
  }
}

/* RESPONSIVE — MOBILE */

@media (max-width:640px){
  .product-page {
    margin-top:20px !important;
    padding:20px 20px 64px  !important;
  }

  .product-topbar{
    margin-bottom:32px  !important;
  }

  .product-layout{
    gap:40px  !important;
  }

  .product-gallery{
    grid-template-columns:1fr  !important;
    grid-template-rows:auto auto  !important;
    gap:8px  !important;
  }

  .gallery-thumbs{
    order:2  !important;
    flex-direction:row  !important;
    max-height:none  !important;
    overflow-x:auto  !important;
    overflow-y:hidden  !important;
    scrollbar-width:none  !important;
    gap:10px  !important;
  }

  .gallery-thumbs::-webkit-scrollbar{
    display:none  !important;
  }

  .gallery-thumbs img,
  .thumb{
    width:54px  !important;
    height:68px  !important;
    flex-shrink:0  !important;
  }

  .gallery-main{
    order:1  !important;
    aspect-ratio:1 / 1.15  !important;
  }

  .product-title{
    font-size:clamp(2rem, 9vw, 2.75rem)  !important;
  }

  .product-details-grid{
    grid-template-columns:1fr  !important;
  }

  .related-grid{
    grid-template-columns:repeat(2,1fr)  !important;
    gap:2px  !important;
  }

  .related-products{
    margin-top:64px  !important;
    padding-top:40px  !important;
  }

  .btn-primary,
  .btn-whatsapp{
    padding:16px 20px  !important;
  }

  .product-page{
    padding-bottom:96px  !important;
  }
}

/* RESPONSIVE — SMALL */

@media (max-width:375px){
  .product-page{
    padding:16px 16px 48px  !important;
  }

  .gallery-thumbs img ,
  .thumb{
    width:46px  !important;
    height:58px  !important;
  }

  .size-pill{
    min-width:42px  !important;
    height:40px  !important;
    font-size:var(--fs-11)  !important;
  }
}