/* product.html — page styles */
.termeh-bg {
  background: #221611 url(../img/termeh.webp) center/auto 100% repeat-x
}

.fr-star {
  position: absolute;
  top: -34px;
  right: -34px;
  width: 150px;
  height: 150px;
  opacity: .7;
  z-index: 0;
  animation: spin 40s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231A3F86' stroke-width='1.4'%3E%3Crect x='15' y='15' width='70' height='70'/%3E%3Crect x='15' y='15' width='70' height='70' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat
}

@media(max-width:575px) {
  .fr-star {
    width: 100px;
    height: 100px;
    top: -24px;
    right: -12px
  }
}

.pd-top {
  padding: 108px 0 clamp(36px, 6vw, 70px);
  background: var(--paper)
}

.pd-top .crumbs {
  margin-bottom: 1.2rem;
  flex-wrap: wrap
}

.g-wrap {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  padding: 0 0 22px 22px
}

.g-shadow {
  position: absolute;
  left: 0;
  right: 22px;
  top: 22px;
  bottom: 0;
  background: var(--pink);
  clip-path: var(--arch);
  z-index: 0
}

.g-outer {
  position: relative;
  z-index: 1;
  background: var(--turq);
  padding: 10px;
  clip-path: var(--arch)
}

.g-gap {
  background: var(--paper);
  padding: 7px;
  clip-path: var(--arch)
}

.g-stage {
  position: relative;
  aspect-ratio: 4/4.7;
  background: var(--bg);
  clip-path: var(--arch);
  overflow: hidden;
  isolation: isolate
}

.g-stage::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  opacity: .22;
  animation: spin 80s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231A3F86' stroke-width='1.2'%3E%3Crect x='15' y='15' width='70' height='70'/%3E%3Crect x='15' y='15' width='70' height='70' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E") center/60% no-repeat
}

.g-pan,
.g-float {
  position: absolute;
  inset: 0
}

.g-b {
  position: absolute;
  left: 50%;
  bottom: 5%;
  height: 76%;
  transform-origin: 50% 72%;
  transition: transform .9s cubic-bezier(.3, 1.15, .4, 1), opacity .6s
}

.g-b img,
.g-b svg {
  display: block;
  height: 100%;
  width: auto
}

.g-b.c {
  transform: translateX(-50%);
  z-index: 2
}

.g-b.l,
.g-b.r {
  opacity: 0;
  transform: translateX(-50%) scale(.6);
  transform-origin: 50% 100%;
  z-index: 1
}

[data-scene="1"] .g-b.c {
  transform: translateX(-50%) translateY(-26%) scale(2.3)
}

[data-scene="2"] .g-b.c {
  transform: translateX(-50%) scale(1.04)
}

[data-scene="2"] .g-b.l {
  opacity: 1;
  transform: translateX(-128%) rotate(-11deg) scale(.82)
}

[data-scene="2"] .g-b.r {
  opacity: 1;
  transform: translateX(28%) rotate(11deg) scale(.82)
}

.g-badge {
  top: 36px;
  inset-inline-start: 36px
}

.g-wrap .badge-t {
  top: 36px;
  inset-inline-start: 36px
}

.g-fav {
  top: 36px;
  inset-inline-end: 14px;
  z-index: 3
}

.g-thumbs {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.2rem;
  flex-wrap: wrap
}

.g-th {
  border: 0;
  background: #fff;
  border-radius: 30px;
  padding: .5rem 1.2rem;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: .25s;
  box-shadow: 0 4px 12px rgba(59, 36, 23, .08)
}

.g-th.active,
.g-th:hover {
  background: var(--ink);
  color: var(--lime)
}

.pd-cat {
  display: inline-block;
  margin-bottom: .4rem
}

.pd-title {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  color: var(--lapis);
  margin: 0 0 .4rem
}

.pd-rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  font-size: .92rem;
  color: var(--muted)
}

.pd-rate b {
  color: var(--ink)
}

.pd-rate a:hover {
  color: var(--pink)
}

.stock {
  margin-inline-start: auto;
  background: var(--lime);
  color: var(--ink);
  border-radius: 20px;
  padding: 0 .8rem;
  font-size: .82rem;
  font-weight: 500
}

.stock.no {
  background: #e9dfcd;
  color: #7a5b48
}

.pd-short {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 1rem 0
}

.pd-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  padding: 1rem 0;
  border-block: 2px dashed var(--clay);
  margin-bottom: 1.2rem
}

.pd-price .now {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  color: var(--ink)
}

.pd-price small {
  font-size: .9rem;
  font-weight: 400
}

.pd-price del {
  color: #b09a88;
  font-size: 1.05rem
}

.pd-lab {
  display: block;
  font-weight: 500;
  margin-bottom: .5rem
}

.pd-opt {
  margin-bottom: 1.3rem
}

.pd-buy {
  display: flex;
  gap: .8rem;
  align-items: stretch;
  flex-wrap: wrap
}

.pd-add {
  flex: 1 1 220px;
  padding: .9rem 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem
}

.pd-add:disabled {
  background: #e9dfcd;
  color: #9a8878
}

.pd-trust {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem
}

.pd-trust li {
  display: flex;
  gap: .6rem;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  padding: .7rem .8rem;
  font-size: .82rem
}

.pd-trust i {
  font-size: 1.4rem;
  color: var(--pink)
}

.pd-trust b {
  display: block;
  font-size: .88rem
}

.pd-trust span {
  color: var(--muted)
}

.pd-tabs-sec {
  background: var(--sand);
  padding: clamp(40px, 6vw, 70px) 0
}

.pd-pills {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.pd-pills::-webkit-scrollbar {
  display: none
}

.pd-pills .nav-link {
  white-space: nowrap;
  background: #fff;
  border-radius: 30px;
  padding: .5rem 1.4rem;
  border: 0
}

.pd-pills .nav-link::after {
  display: none
}

.pd-pills .nav-link.active,
.pd-pills .nav-link:hover {
  background: var(--ink);
  color: var(--lime) !important
}

.pd-panel {
  background: #fff;
  border-radius: 28px;
  padding: clamp(1.2rem, 3vw, 2.2rem)
}

.pd-panel p {
  color: var(--muted);
  line-height: 2
}

.specs {
  margin: 0;
  background: var(--paper);
  border-radius: 20px;
  padding: 1rem 1.2rem
}

.specs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--clay)
}

.specs div:last-child {
  border: 0
}

.specs dt {
  font-weight: 500
}

.specs dd {
  margin: 0;
  color: var(--muted)
}

.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem
}

.ticks li {
  display: flex;
  gap: .6rem;
  align-items: center;
  background: var(--paper);
  border-radius: 16px;
  padding: .7rem 1rem
}

.ticks i {
  color: var(--pink)
}

.rev-sum {
  background: var(--paper);
  border-radius: 22px;
  padding: 1.2rem;
  text-align: center
}

.rev-sum>b {
  font-family: 'Aref Ruqaa';
  font-size: 3rem;
  color: var(--lapis);
  display: block;
  line-height: 1.2
}

.rev {
  border-bottom: 1px dashed var(--clay);
  padding: .9rem 0
}

.rev:last-child {
  border: 0
}

.rev header {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: center
}

.rev small {
  color: var(--muted)
}

.rev header .stars {
  margin-inline-start: auto
}

.rev p {
  margin: .3rem 0 0
}

.pd-facts {
  padding: clamp(44px, 7vw, 80px) 0
}

.fact {
  background: rgba(255, 247, 230, .96);
  border-radius: 22px;
  padding: 1.4rem .8rem;
  height: 100%
}

.fact i {
  font-size: 1.9rem;
  color: var(--turq)
}

.fact b {
  display: block;
  font-family: 'Aref Ruqaa';
  font-size: 1.25rem;
  color: var(--lapis)
}

.fact span {
  font-size: .85rem;
  color: var(--muted)
}

.pd-related {
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--paper)
}

@media(max-width:991px) {
  .pd-top {
    padding-top: 92px
  }

  .pd-page .footer {
    padding-bottom: 90px
  }

  .stock {
    margin-inline-start: 0
  }
}

@media(max-width:575px) {
  .g-wrap {
    padding: 0 0 16px 16px
  }

  .g-shadow {
    right: 16px;
    top: 16px
  }

  .g-wrap .badge-t,
  .g-badge {
    top: 28px;
    inset-inline-start: 26px
  }

  .g-fav {
    top: 28px;
    inset-inline-end: 10px
  }

  .pd-trust {
    grid-template-columns: 1fr
  }

  .ticks {
    grid-template-columns: 1fr
  }

  .g-th {
    padding: .45rem .9rem;
    font-size: .85rem
  }

  .pd-add {
    flex: 1 1 100%
  }
}

.pd-pills {
  flex-wrap: nowrap
}