/* Chicona V15 — original fonts + soft weights + product-page cards
   Goal: keep the original/old font families, reduce heavy weights, and make
   product.html related/same-vendor cards match the shared ProductCard style. */

html body,
body.chicona-unified{
  font-weight:400!important;
  letter-spacing:0!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* Remove heavy/bold look across all pages while keeping hierarchy readable. */
body.chicona-unified :is(
  b,strong,
  .font-bold,.font-semibold,.font-extrabold,.font-black,
  .fw-bold,.fw-semibold,
  h1,h2,h3,h4,h5,h6,
  th,label,
  .logo,.brand,.title,.section-title,
  .unified-hero-title,.unified-section-title,.unified-kicker,
  .p-title,.product-title,.card-title,
  .acc-head,.modal-title
){
  font-weight:500!important;
  letter-spacing:0!important;
}

body.chicona-unified :is(
  h1,.unified-hero-title,.page-title
){
  font-weight:560!important;
  line-height:1.35!important;
}
body.chicona-unified :is(
  h2,h3,.unified-section-title,.section-title
){
  font-weight:520!important;
  line-height:1.4!important;
}
body.chicona-unified :is(
  p,li,a,button,input,select,textarea,span,div
){
  letter-spacing:0!important;
}

/* Buttons should look soft, not heavy. */
body.chicona-unified :is(
  button,.btn,.add-btn,.view-btn,.toggle-btn,.size-chip,
  input[type="submit"],a[role="button"]
){
  font-weight:450!important;
}

/* Prices stay clear but not extra-bold. */
body.chicona-unified :is(
  .price,.price-main,.cart-choice-price,.product-price,.price-row,.p-meta .price
){
  font-weight:560!important;
  letter-spacing:0!important;
}
body.chicona-unified :is(.old,.price-old){font-weight:400!important;}

/* Badges and small labels: calm weight. */
body.chicona-unified :is(
  .tag-left,.tag-right,.tag-right-bxgy,.tag-bxgy,
  .offer-badge,.promo-badge,.badge,.swatch-name
){
  font-weight:450!important;
  letter-spacing:0!important;
}

/* Product cards globally: same calm typography everywhere. */
html body.chicona-unified .product-card :is(.p-title,.product-title,h3,.title){
  font-weight:500!important;
  letter-spacing:0!important;
}
html body.chicona-unified .product-card :is(.price,.p-price){font-weight:560!important;}
html body.chicona-unified .product-card :is(.add-btn,.view-btn,.btn-add,button[data-id]){font-weight:450!important;}

/* ===== product.html related / same-vendor rows =====
   Override V10/V11/V12 fixed heights so bottom cards are exactly the shared
   ProductCard structure: square image + flexible body + horizontal slider. */
body[data-page-name="product"] #likeRow,
body[data-page-name="product"] #vendorRow{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:14px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-behavior:smooth!important;
  scroll-snap-type:x proximity!important;
  padding:8px 44px 16px!important;
  scrollbar-width:thin!important;
}

body[data-page-name="product"] .hbtn[data-target="#likeRow"],
body[data-page-name="product"] .hbtn[data-target="#vendorRow"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:5!important;
}

body[data-page-name="product"] #likeRow .product-card,
body[data-page-name="product"] #vendorRow .product-card{
  flex:0 0 230px!important;
  width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  border-radius:15px!important;
  overflow:hidden!important;
  scroll-snap-align:start!important;
  border-color:#eee3d2!important;
  background:#fff!important;
}

body[data-page-name="product"] #likeRow .product-card > .relative,
body[data-page-name="product"] #vendorRow .product-card > .relative,
body[data-page-name="product"] #likeRow .product-card > a:first-of-type,
body[data-page-name="product"] #vendorRow .product-card > a:first-of-type,
body[data-page-name="product"] #likeRow .product-card .product-media,
body[data-page-name="product"] #vendorRow .product-card .product-media,
body[data-page-name="product"] #likeRow .product-card .p-media,
body[data-page-name="product"] #vendorRow .product-card .p-media,
body[data-page-name="product"] #likeRow .product-card .img-wrap,
body[data-page-name="product"] #vendorRow .product-card .img-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  flex:0 0 auto!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  background:#f8fafc!important;
  border-radius:0!important;
}

body[data-page-name="product"] #likeRow .product-card > .relative > a,
body[data-page-name="product"] #vendorRow .product-card > .relative > a,
body[data-page-name="product"] #likeRow .product-card > a:first-of-type,
body[data-page-name="product"] #vendorRow .product-card > a:first-of-type{
  display:block!important;
  width:100%!important;
  height:100%!important;
}

body[data-page-name="product"] #likeRow .product-card img.p-img,
body[data-page-name="product"] #vendorRow .product-card img.p-img,
body[data-page-name="product"] #likeRow .product-card .p-img,
body[data-page-name="product"] #vendorRow .product-card .p-img,
body[data-page-name="product"] #likeRow .product-card .product-img,
body[data-page-name="product"] #vendorRow .product-card .product-img,
body[data-page-name="product"] #likeRow .product-card .product-image,
body[data-page-name="product"] #vendorRow .product-card .product-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#f8fafc!important;
}

body[data-page-name="product"] #likeRow .product-card .p-body,
body[data-page-name="product"] #vendorRow .product-card .p-body,
body[data-page-name="product"] #likeRow .product-card .product-body,
body[data-page-name="product"] #vendorRow .product-card .product-body,
body[data-page-name="product"] #likeRow .product-card [class*="p-body"],
body[data-page-name="product"] #vendorRow .product-card [class*="p-body"]{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  height:auto!important;
  min-height:132px!important;
  max-height:none!important;
  padding:10px!important;
  gap:6px!important;
  overflow:visible!important;
}

body[data-page-name="product"] #likeRow .product-card :is(.p-title,.product-title,h3,.title),
body[data-page-name="product"] #vendorRow .product-card :is(.p-title,.product-title,h3,.title){
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  min-height:2.55em!important;
  max-height:2.55em!important;
  margin:0!important;
  text-align:center!important;
  font-size:clamp(13.5px,3.45vw,15.5px)!important;
  line-height:1.28!important;
  font-weight:500!important;
}



body[data-page-name="product"] #likeRow .product-card :is(.p-meta,.product-price,.price-row),
body[data-page-name="product"] #vendorRow .product-card :is(.p-meta,.product-price,.price-row){
  min-height:35px!important;
  height:35px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  text-align:center!important;
}

body[data-page-name="product"] #likeRow .product-card :is(.add-btn,.btn-add,button[data-id],.view-btn),
body[data-page-name="product"] #vendorRow .product-card :is(.add-btn,.btn-add,button[data-id],.view-btn){
  min-height:35px!important;
  height:auto!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:auto!important;
  border-radius:11px!important;
  font-size:clamp(12.8px,3.3vw,14.5px)!important;
  font-weight:450!important;
}

body[data-page-name="product"] main.container > section.section:has(#likeRow),
body[data-page-name="product"] main.container > section.section:has(#vendorRow){
  overflow:hidden!important;
  padding:20px 18px 18px!important;
}

@media (max-width:767px){
  body[data-page-name="product"] #likeRow,
  body[data-page-name="product"] #vendorRow{
    gap:12px!important;
    padding:8px 38px 14px 6px!important;
    scroll-snap-type:x mandatory!important;
  }
  body[data-page-name="product"] #likeRow .product-card,
  body[data-page-name="product"] #vendorRow .product-card{
    flex-basis:188px!important;
    width:188px!important;
    min-width:188px!important;
    max-width:188px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:13px!important;
  }
  body[data-page-name="product"] #likeRow .product-card .p-body,
  body[data-page-name="product"] #vendorRow .product-card .p-body,
  body[data-page-name="product"] #likeRow .product-card .product-body,
  body[data-page-name="product"] #vendorRow .product-card .product-body,
  body[data-page-name="product"] #likeRow .product-card [class*="p-body"],
  body[data-page-name="product"] #vendorRow .product-card [class*="p-body"]{
    min-height:126px!important;
    padding:9px!important;
    gap:5px!important;
  }
  body[data-page-name="product"] #likeRow .product-card :is(.p-title,.product-title,h3,.title),
  body[data-page-name="product"] #vendorRow .product-card :is(.p-title,.product-title,h3,.title){
    font-size:12.8px!important;
    line-height:1.28!important;
  }
  body[data-page-name="product"] #likeRow .product-card :is(.price,.p-price),
  body[data-page-name="product"] #vendorRow .product-card :is(.price,.p-price){font-size:14.8px!important;}
  body[data-page-name="product"] #likeRow .product-card :is(.add-btn,.btn-add,button[data-id],.view-btn),
  body[data-page-name="product"] #vendorRow .product-card :is(.add-btn,.btn-add,button[data-id],.view-btn){
    min-height:32px!important;
    font-size:12px!important;
  }
}


/* V15: do not change the old/original font family at all.
   Only reduce boldness. Keep logo/headline/body fonts coming from the existing page CSS. */
body.chicona-unified :is(.font-extrabold,.font-black,.font-bold){font-weight:500!important;}
body.chicona-unified :is(.font-semibold,strong,b){font-weight:500!important;}
body.chicona-unified :is(.font-medium){font-weight:450!important;}

/* V15: remove the color/image selector dots from the related product cards on product.html only. */
body[data-page-name="product"] #likeRow .product-card :is(.swatches,.pc-swatches,.product-swatches,.colors-row),
body[data-page-name="product"] #vendorRow .product-card :is(.swatches,.pc-swatches,.product-swatches,.colors-row){
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

body[data-page-name="product"] #likeRow .product-card .p-body,
body[data-page-name="product"] #vendorRow .product-card .p-body,
body[data-page-name="product"] #likeRow .product-card .product-body,
body[data-page-name="product"] #vendorRow .product-card .product-body,
body[data-page-name="product"] #likeRow .product-card [class*="p-body"],
body[data-page-name="product"] #vendorRow .product-card [class*="p-body"]{
  min-height:112px!important;
}