/* Habiba's Roots frontend product isolation - v1.3.56
   Product detail/layout styles live here so admin/modal/auth changes do not break product pages. */

.product-detail-section.compact-shop-page {
  background: #fff !important;
  padding: 42px 20px 72px !important;
}

.product-detail-grid {
  width: min(1180px, calc(100vw - 40px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr) !important;
  gap: 32px !important;
  align-items: start !important;
}

.product-gallery-panel {
  min-width: 0 !important;
}

.product-gallery-panel > .product-main-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 650px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  background: #f7f4f1 !important;
  box-shadow: none !important;
}

.product-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.product-thumb {
  width: 62px !important;
  height: 62px !important;
  padding: 3px !important;
  border: 1px solid #d8c9c8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.product-thumb.active {
  border-color: #9a8584 !important;
  box-shadow: 0 0 0 2px rgba(154, 133, 132, .18) !important;
}

.product-thumb img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 7px !important;
  object-fit: cover !important;
}

.product-purchase-card {
  position: sticky !important;
  top: 22px !important;
  background: #fffdfb !important;
  border: 1px solid #e2d5cb !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(66, 51, 45, .08) !important;
  padding: 28px !important;
}

.product-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.product-title-row h1 {
  margin: 0 !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  line-height: 1.12 !important;
  color: #191d22 !important;
}

.sale-pill-main {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #ffe7e2 !important;
  border: 1px solid #f4b9ae !important;
  color: #b44637 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

.product-price {
  margin: 0 0 18px !important;
  color: #5b6470 !important;
  font-size: 15px !important;
}

.product-price strong {
  color: #56606d !important;
  font-weight: 900 !important;
}

.price-was {
  margin-right: 8px !important;
  color: #9f938c !important;
  text-decoration: line-through !important;
}

.product-short {
  margin: 0 0 22px !important;
  color: #687079 !important;
  line-height: 1.65 !important;
  font-size: 15px !important;
}

.product-options-wrap {
  display: grid !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.product-option-field {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

.product-option-field span {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #23282f !important;
}

.product-option-field input,
.product-option-field textarea,
.product-option-field select {
  width: 100% !important;
  min-height: 46px !important;
  border: 1px solid #d9cec5 !important;
  border-radius: 12px !important;
  background: #f4f4f4 !important;
  color: #4b403b !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  padding: 12px 14px !important;
  box-shadow: 0 14px 34px rgba(66, 51, 45, .055) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.product-option-field input:focus,
.product-option-field textarea:focus,
.product-option-field select:focus {
  outline: none !important;
  border-color: #b99b8c !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(246, 217, 200, .45), 0 18px 38px rgba(66, 51, 45, .08) !important;
}

.product-option-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  padding-right: 48px !important;
  color: #5f5049 !important;
  background-color: #f4f4f4 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #8b746b 50%),
    linear-gradient(135deg, #8b746b 50%, transparent 50%),
    linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%) !important;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0 !important;
  background-size: 7px 7px, 7px 7px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

.product-option-field select:hover {
  border-color: #c9b1a4 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #6f5b50 50%),
    linear-gradient(135deg, #6f5b50 50%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #eeeeee 100%) !important;
}

.product-option-field select option {
  color: #4b403b !important;
  background: #f4f4f4 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 10px 12px !important;
}

.product-option-field select option:checked {
  color: #3f342f !important;
  background: #e4e4e4 !important;
}

.product-option-field textarea {
  min-height: 96px !important;
  resize: vertical !important;
}

.greyed-options-note {
  width: 100% !important;
  border: 1px dashed #e5ddd5 !important;
  border-radius: 12px !important;
  background: #faf7f4 !important;
  color: #aaa09a !important;
  padding: 15px !important;
  font-weight: 700 !important;
}

.order-total-row {
  margin: 18px 0 14px !important;
  color: #687079 !important;
  font-size: 15px !important;
}

.order-total-row strong {
  color: #56606d !important;
  font-weight: 900 !important;
}

.product-add-row.full-width-add {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.product-add-row.full-width-add input[type="number"] {
  width: 68px !important;
  min-height: 44px !important;
  border: 1px solid #d9cec5 !important;
  border-radius: 10px !important;
  padding: 8px !important;
  background: #fff !important;
}

.product-add-row.full-width-add .btn {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: #e4e4e4 !important;
  color: #5f4638 !important;
  border: 1px solid #e9c3ae !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

.product-add-row.full-width-add .btn.disabled,
.product-add-row.full-width-add .btn:disabled {
  cursor: not-allowed !important;
  opacity: .85 !important;
}

.installments-note {
  margin: 16px 0 0 !important;
  color: #7d858e !important;
  font-size: 14px !important;
}

.product-description-panel {
  width: min(1180px, calc(100vw - 40px)) !important;
  margin: 40px auto 0 !important;
  padding: 28px !important;
  background: #fffdfb !important;
  border: 1px solid #e2d5cb !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(66, 51, 45, .06) !important;
}

.product-description-panel h2 {
  margin: 0 0 14px !important;
  font-size: 24px !important;
  color: #191d22 !important;
}

.product-description-copy {
  color: #687079 !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
}

.featured-product-carousel {
  width: min(1180px, calc(100vw - 40px)) !important;
  margin: 36px auto 0 !important;
  overflow: hidden !important;
}

.featured-carousel-heading {
  margin-bottom: 18px !important;
}

.featured-carousel-heading p {
  margin: 0 0 4px !important;
  color: #9a8b80 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.featured-carousel-heading h2 {
  margin: 0 !important;
  color: #191d22 !important;
  font-size: 28px !important;
}

.featured-carousel-track {
  display: flex !important;
  gap: 0 !important;
  width: max-content !important;
  will-change: transform !important;
  animation: habibasFeaturedScroll 38s linear infinite !important;
}

.featured-carousel-track:hover {
  animation-play-state: paused !important;
}

.featured-carousel-set {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 18px !important;
  padding-right: 18px !important;
}

.featured-carousel-card {
  width: 220px !important;
  flex: 0 0 220px !important;
  display: grid !important;
  gap: 8px !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #e5ddd5 !important;
  border-radius: 18px !important;
  padding: 12px !important;
  color: #191d22 !important;
  box-shadow: 0 14px 38px rgba(66, 51, 45, .07) !important;
}

.featured-carousel-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #f7f4f1 !important;
}

.featured-carousel-card span {
  color: #9a8b80 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.featured-carousel-card strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.featured-carousel-card em {
  font-style: normal !important;
  color: #6f5b50 !important;
  font-weight: 900 !important;
}

@keyframes habibasFeaturedScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 920px) {
  .product-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .product-purchase-card {
    position: static !important;
  }
}

@media (max-width: 620px) {
  .product-detail-section.compact-shop-page {
    padding: 28px 16px 52px !important;
  }

  .product-detail-grid,
  .product-description-panel,
  .featured-product-carousel {
    width: 100% !important;
  }

  .product-purchase-card,
  .product-description-panel {
    padding: 22px !important;
  }

  .product-add-row.full-width-add {
    grid-template-columns: 1fr !important;
  }

  .product-add-row.full-width-add input[type="number"] {
    width: 100% !important;
  }
}

/* v1.3.57 - custom light-grey product dropdown + social share panel */
.product-custom-select {
  position: relative !important;
  width: 100% !important;
  z-index: 5 !important;
}

.product-custom-select.is-open {
  z-index: 30 !important;
}

.product-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: 0 !important;
  bottom: 0 !important;
}

.product-select-trigger {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%) !important;
  color: #4b403b !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
  padding: 13px 15px !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 12px 28px rgba(66, 51, 45, .055) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.product-select-trigger:hover,
.product-custom-select.is-open .product-select-trigger {
  border-color: #c8c8c8 !important;
  background: linear-gradient(180deg, #ffffff 0%, #eeeeee 100%) !important;
  box-shadow: 0 0 0 4px rgba(230, 230, 230, .58), 0 16px 34px rgba(66, 51, 45, .075) !important;
}

.product-select-trigger span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #5a504b !important;
}

.product-custom-select.has-value .product-select-trigger span {
  color: #332c28 !important;
}

.product-select-trigger i {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
  border-right: 2px solid #776d68 !important;
  border-bottom: 2px solid #776d68 !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform .18s ease !important;
}

.product-custom-select.is-open .product-select-trigger i {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

.product-select-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  display: none !important;
  max-height: 245px !important;
  overflow-y: auto !important;
  padding: 8px !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 16px !important;
  background: #f1f1f1 !important;
  box-shadow: 0 18px 44px rgba(66, 51, 45, .16) !important;
}

.product-custom-select.is-open .product-select-menu {
  display: grid !important;
  gap: 5px !important;
}

.product-select-option {
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #4b403b !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.product-select-option:hover,
.product-select-option.is-selected {
  background: #e3e3e3 !important;
  color: #2f2926 !important;
}

.product-select-option.is-placeholder {
  color: #8b8581 !important;
}

 .product-share-panel {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #ece2dc !important;
}

.product-share-panel > span {
  display: block !important;
  margin-bottom: 10px !important;
  color: #4b403b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.product-share-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.product-share-buttons .share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 9px 10px !important;
  border: 1px solid #d9d3cf !important;
  border-radius: 999px !important;
  background: #f1f1f1 !important;
  color: #4f4540 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(70, 55, 45, .06) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}

.product-share-buttons .share-btn svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  fill: currentColor !important;
  flex: 0 0 auto !important;
}

.product-share-buttons .share-btn:hover {
  transform: translateY(-1px) !important;
  background: #e8e8e8 !important;
  border-color: #cdc6c0 !important;
  box-shadow: 0 11px 22px rgba(70, 55, 45, .1) !important;
}

.product-share-buttons .share-facebook { color: #315b91 !important; }
.product-share-buttons .share-x { color: #2f2926 !important; }
.product-share-buttons .share-pinterest { color: #9b4545 !important; }
.product-share-buttons .share-whatsapp { color: #3b7b59 !important; }

@media (max-width: 620px) {
  .product-share-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v1.3.63 - restore compact featured carousel cards and fit the carousel area */
.featured-product-carousel {
  width: min(1180px, calc(100vw - 40px)) !important;
  margin: 38px auto 0 !important;
  padding: 0 0 12px !important;
  overflow: hidden !important;
}

.featured-carousel-track {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: max-content !important;
  min-height: 318px !important;
  padding: 2px 0 16px !important;
  will-change: transform !important;
  animation: habibasFeaturedScroll 40s linear infinite !important;
}

.featured-carousel-track:hover {
  animation-play-state: paused !important;
}

.featured-carousel-set {
  display: flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  gap: 18px !important;
  padding-right: 18px !important;
}

.featured-carousel-card,
.featured-carousel-card.shop-product-card {
  position: relative !important;
  width: 220px !important;
  flex: 0 0 220px !important;
  min-height: 292px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  gap: 8px !important;
  align-content: start !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #e5ddd5 !important;
  border-radius: 18px !important;
  padding: 12px !important;
  color: #191d22 !important;
  box-shadow: 0 14px 38px rgba(66, 51, 45, .07) !important;
  overflow: hidden !important;
}

.featured-carousel-image-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.featured-carousel-card img,
.featured-carousel-card .featured-image-placeholder {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #f7f4f1 !important;
}

.featured-mini-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.featured-mini-badge.sale {
  background: #fff0dd !important;
  color: #b86418 !important;
}

.featured-mini-badge.stock {
  background: #efecea !important;
  color: #75675f !important;
}

.featured-mini-category,
.featured-carousel-card > span:not(.featured-carousel-image-wrap) {
  color: #9a8b80 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.featured-carousel-card strong {
  display: block !important;
  min-height: 38px !important;
  color: #3b2b22 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.featured-carousel-card em {
  align-self: end !important;
  font-style: normal !important;
  color: #6f5b50 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

@media (max-width: 620px) {
  .featured-product-carousel {
    width: 100% !important;
  }

  .featured-carousel-track {
    min-height: 294px !important;
  }

  .featured-carousel-set {
    gap: 14px !important;
    padding-right: 14px !important;
  }

  .featured-carousel-card,
  .featured-carousel-card.shop-product-card {
    width: 198px !important;
    flex-basis: 198px !important;
    min-height: 270px !important;
  }
}


/* v1.3.109 hard restore for product page layout */
.product-detail-section.compact-shop-page{background:#fff!important;padding:42px 20px 72px!important;}
.product-detail-grid{width:min(1180px,calc(100vw - 40px))!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)!important;gap:32px!important;align-items:start!important;}
.product-gallery-panel>.product-main-image{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:650px!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:18px!important;background:#f7f4f1!important;box-shadow:none!important;margin:0!important;}
.product-purchase-card{position:sticky!important;top:22px!important;background:#fffdfb!important;border:1px solid #e2d5cb!important;border-radius:18px!important;box-shadow:0 24px 60px rgba(66,51,45,.08)!important;padding:28px!important;}
@media(max-width:900px){.product-detail-grid{grid-template-columns:1fr!important}.product-purchase-card{position:static!important}}


/* v1.0.15 mobile product page optimisation */
@media (max-width: 860px){
  .product-detail-section.compact-shop-page{
    padding:18px 12px 110px !important;
    background:#fffaf7 !important;
  }

  .product-detail-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .product-gallery-panel{
    background:#fff !important;
    border:1px solid #eadfd6 !important;
    border-radius:22px !important;
    padding:10px !important;
    box-shadow:0 12px 34px rgba(76,55,42,.07) !important;
  }

  .product-gallery-panel > .product-main-image{
    border-radius:18px !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
  }

  .product-thumbs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:8px !important;
    margin-top:10px !important;
    padding:0 2px 4px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .product-thumb{
    flex:0 0 54px !important;
    width:54px !important;
    height:54px !important;
    border-radius:12px !important;
  }

  .product-purchase-card{
    position:static !important;
    top:auto !important;
    padding:18px !important;
    border-radius:22px !important;
    box-shadow:0 12px 34px rgba(76,55,42,.07) !important;
  }

  .product-title-row{
    gap:8px !important;
    margin-bottom:10px !important;
  }

  .product-title-row h1{
    font-size:24px !important;
    line-height:1.16 !important;
  }

  .sale-pill-main{
    min-height:26px !important;
    padding:5px 10px !important;
    font-size:10px !important;
  }

  .product-price{
    margin-bottom:12px !important;
    font-size:14px !important;
  }

  .product-short{
    margin-bottom:16px !important;
    font-size:14px !important;
    line-height:1.6 !important;
  }

  .product-options-wrap{
    gap:12px !important;
    margin-bottom:14px !important;
  }

  .product-option-field span{
    font-size:12px !important;
  }

  .product-option-field input,
  .product-option-field textarea,
  .product-option-field select,
  .product-native-select,
  .product-select-trigger{
    min-height:48px !important;
    font-size:16px !important;
    border-radius:14px !important;
  }

  .product-add-row,
  .product-add-row.full-width-add{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  .product-add-row .btn,
  .product-add-row button,
  .product-purchase-card .btn{
    width:100% !important;
    min-height:50px !important;
    border-radius:999px !important;
    font-size:14px !important;
  }

  .installments-note,
  .greyed-options-note{
    font-size:12px !important;
    line-height:1.5 !important;
  }

  .product-share-panel,
  .product-description-panel,
  .featured-product-carousel{
    width:100% !important;
    margin-top:18px !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .product-description-copy{
    font-size:14px !important;
    line-height:1.7 !important;
  }

  .product-share-buttons{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  .share-btn{
    min-height:44px !important;
    justify-content:center !important;
  }

  .featured-carousel-track{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(155px, 62vw) !important;
    overflow-x:auto !important;
    gap:12px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .featured-carousel-card{
    scroll-snap-align:start !important;
  }
}

@media (max-width: 380px){
  .product-title-row h1{
    font-size:22px !important;
  }

  .product-purchase-card,
  .product-description-panel,
  .product-share-panel,
  .featured-product-carousel{
    padding:15px !important;
  }
}