/* OBSESSION V22.4 — Discount Cards + Clickable Variants + Special Offers */

/* ===== Discount badge outside product ===== */
.obs-variant-card .product-img{
  overflow:hidden;
}
.obs-card-sale-ribbon{
  position:absolute;
  top:12px;
  right:12px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 9px;
  border-radius:999px;
  background:#6f1f27;
  color:#fff;
  box-shadow:0 7px 18px rgba(55,20,20,.18);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
}
.obs-card-sale-ribbon span{
  font-size:7px;
  letter-spacing:.12em;
}
html[dir="rtl"] .obs-card-sale-ribbon{
  right:auto;
  left:12px;
}
html[dir="rtl"] .obs-card-sale-ribbon span{
  letter-spacing:0;
}

/* ===== Clickable sizes directly on cards ===== */
.obs-card-variants{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 14px 9px;
  background:#fff;
}
.obs-card-variant{
  appearance:none;
  min-width:48px;
  min-height:29px;
  padding:5px 9px;
  border:1px solid #ddd2c4;
  border-radius:999px;
  background:#fff;
  color:#51473e;
  font:600 9px/1.1 "Montserrat","Segoe UI",Arial,sans-serif;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.obs-card-variant:hover{
  border-color:#9b7742;
  transform:translateY(-1px);
}
.obs-card-variant.active{
  background:#201a15;
  border-color:#201a15;
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(213,175,105,.28);
}
.obs-card-variant.out,
.obs-card-variant:disabled{
  opacity:.38;
  text-decoration:line-through;
  cursor:not-allowed;
  transform:none;
}
html[dir="rtl"] .obs-card-variant{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  font-weight:600;
}

/* ===== Dynamic card price ===== */
.obs-card-price{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  line-height:1.2!important;
}
.obs-card-current{
  color:#211a15;
  font-weight:800;
}
.obs-card-compare{
  color:#9a8e82;
  font-size:12px;
  font-weight:500;
}
.obs-card-pct{
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:3px 6px;
  border-radius:999px;
  background:#f4e9df;
  color:#7a2530;
  font-size:9px;
  font-weight:800;
}
.obs-card-add.obs-added{
  background:#405b3b!important;
  border-color:#405b3b!important;
}

/* Let cards grow naturally now that size pills are present. */
.obs-variant-card{
  display:flex;
  flex-direction:column;
}
.obs-variant-card .product-card-link{
  flex:1 1 auto;
}
.obs-variant-card .product-card-bottom{
  margin-top:auto;
}

/* ===== Homepage Special Offers ===== */
.obs-special-offers-section{
  padding:86px 0;
  background:
    radial-gradient(circle at 88% 14%,rgba(176,132,62,.10),transparent 24%),
    linear-gradient(180deg,#f8f3eb 0%,#fff 100%);
  border-top:1px solid #eee4d7;
  border-bottom:1px solid #eee4d7;
}
.obs-special-offers-shell{
  position:relative;
}
.obs-special-offers-shell:before{
  content:"SALE";
  position:absolute;
  right:0;
  top:-50px;
  color:rgba(124,88,41,.045);
  font:700 clamp(90px,16vw,210px)/1 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.02em;
  pointer-events:none;
}
html[dir="rtl"] .obs-special-offers-shell:before{
  right:auto;
  left:0;
}
.obs-special-offers-section .home-section-head{
  position:relative;
  z-index:1;
}
.obs-special-offers-section .kicker{
  color:#875f2d;
}
.obs-special-offers-section .home-section-head h2{
  margin-bottom:10px;
}
.obs-special-count{
  display:block;
  margin-top:9px;
  color:#9a8060;
  font-size:10px;
  font-weight:600;
  letter-spacing:.03em;
}
#home-special-offers{
  position:relative;
  z-index:1;
}

/* Signature/home cards need white variant strip as well */
.signature-oils-products .obs-card-variants{
  background:#fff;
}

/* prevent old sale CSS from forcing nested price layout oddly */
.obs-variant-card .product-card-price .obs-sale-price{
  display:none!important;
}

@media(max-width:760px){
  .obs-special-offers-section{padding:64px 0}
  .obs-card-variants{padding:0 12px 9px;gap:5px}
  .obs-card-variant{min-width:44px;padding:5px 8px}
  .obs-card-sale-ribbon{top:9px;right:9px}
  html[dir="rtl"] .obs-card-sale-ribbon{right:auto;left:9px}
}