/* ════════════════════════════════════════════════════════════════
   ALQQAMAR — Boutique PDP (Product Detail Page) styles.
   Figma file: ALQ Anissa - Claude Redesign 06/26
   Desktop frame: 465:21436 (1440px) | Mobile frame: 465:21520 (390px)
   All spatial values from absoluteRenderBounds via Desktop Bridge MCP.
   Typography standard updated 2026-07-08: 320px → 1920px, divisor 1600.
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   BREADCRUMB BAR — hidden in Figma on both frames
   ────────────────────────────────────────────────────────────── */
.pd-breadcrumb-bar { display: none !important; }


/* ──────────────────────────────────────────────────────────────
   PD-WRAP — outer section wrapper
   ────────────────────────────────────────────────────────────── */
.pd-wrap {
  margin-top:     clamp(44px, calc(44px + 193 * ((100vw - 390px) / 1050)), 237px) !important;
  padding-bottom: 80px !important;
  height:         auto !important;
}

@media (min-width: 768px) {
  .pd-wrap {
    display:               grid !important;
    padding-left:          clamp(0px, calc(0px + 88 * ((100vw - 768px) / 672)), 88px) !important;
    padding-right:         clamp(0px, calc(0px + 88 * ((100vw - 768px) / 672)), 88px) !important;
    column-gap:            clamp(24px, calc(24px + 32 * ((100vw - 768px) / 672)), 56px) !important;
    grid-template-columns: clamp(360px, calc(360px + 280 * ((100vw - 768px) / 672)), 640px) 1fr !important;
    align-items:           start !important;
  }
}

@media (max-width: 767.98px) {
  .pd-wrap {
    display:        flex !important;
    flex-direction: column !important;
    height:         auto !important;
    padding-left:   0 !important;
    padding-right:  0 !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   PD-GALLERY — left image column
   ────────────────────────────────────────────────────────────── */
.pd-gallery {
  background:     #F5F5F5 !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       visible !important;
  height:         auto !important;
}

.pd-gallery-main {
  flex:       none !important;
  height:     clamp(390px, calc(390px + 170 * ((100vw - 390px) / 1050)), 560px) !important;
  overflow:   hidden !important;
  min-height: 0 !important;
}

@media (min-width: 768px) {
  .pd-gallery-main {
    height:       auto !important;
    aspect-ratio: 640 / 560 !important;
  }
}

.pd-gallery-main img,
#pd-main-img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
  background: #F5F5F5 !important;
}


/* ──────────────────────────────────────────────────────────────
   THUMBNAILS
   ────────────────────────────────────────────────────────────── */
.pd-thumbs {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      nowrap !important;
  gap:            clamp(8px, calc(8px + 8 * ((100vw - 390px) / 1050)), 16px) !important;
  padding-top:    clamp(12px, calc(12px + 4 * ((100vw - 390px) / 1050)), 16px) !important;
  padding-bottom: clamp(0px, calc(12px - 12 * ((100vw - 390px) / 1050)), 12px) !important;
  padding-left:   0 !important;
  padding-right:  0 !important;
}

.pd-thumb {
  width:       clamp(64px, calc(64px + 16 * ((100vw - 390px) / 1050)), 80px) !important;
  height:      clamp(64px, calc(64px + 16 * ((100vw - 390px) / 1050)), 80px) !important;
  flex-shrink: 0 !important;
  cursor:      pointer !important;
  overflow:    hidden !important;
  background:  #F5F5F5 !important;
}

.pd-thumb img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
  opacity:    0.55 !important;
  transition: opacity 0.2s ease !important;
}

.pd-thumb.active img,
.pd-thumb:hover img {
  opacity: 1 !important;
}


/* ──────────────────────────────────────────────────────────────
   PD-INFO — right column
   ────────────────────────────────────────────────────────────── */
.pd-info {
  display:        flex !important;
  flex-direction: column !important;
  position:       relative !important;
  height:         auto !important;
  overflow-y:     visible !important;
}

@media (min-width: 768px) {
  .pd-info {
    padding: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .pd-info {
    padding:    28px 24px 0 !important;
    overflow-y: visible !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   PRODUCT NAME — H2 scale: 24px → 36px
   ────────────────────────────────────────────────────────────── */
.pd-name {
  order:           1 !important;
  margin-top:      0 !important;
  margin-bottom:   clamp(10px, calc(10px + 14 * ((100vw - 390px) / 1050)), 24px) !important;
  color:           #111111 !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       clamp(24px, calc(24px + 12 * ((100vw - 320px) / 1600)), 36px) !important;
  font-weight:     400 !important;
  line-height:     clamp(29px, calc(29px + 14 * ((100vw - 320px) / 1600)), 43px) !important;
  letter-spacing:  0 !important;
  text-transform:  none !important;
  text-decoration: none !important;
}


/* ──────────────────────────────────────────────────────────────
   PRICE — 13px fixed
   ────────────────────────────────────────────────────────────── */
.pd-price {
  order:           2 !important;
  margin-bottom:   clamp(16px, calc(16px + 10 * ((100vw - 390px) / 1050)), 26px) !important;
  color:           #808080 !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       13px !important;
  font-weight:     400 !important;
  line-height:     15px !important;
  letter-spacing:  0 !important;
  text-decoration: none !important;
}

.pd-price .woocommerce-Price-amount,
.pd-price .woocommerce-Price-currencySymbol {
  font-size:      inherit !important;
  line-height:    inherit !important;
  color:          inherit !important;
  letter-spacing: inherit !important;
}


/* ──────────────────────────────────────────────────────────────
   SHORT DESCRIPTION — Body: 16px → 20px
   ────────────────────────────────────────────────────────────── */
.pd-desc {
  order:          3 !important;
  margin-bottom:  clamp(12px, calc(12px + 8 * ((100vw - 390px) / 1050)), 20px) !important;
  color:          #4d4d4d !important;
  font-family:    'Montserrat', sans-serif !important;
  font-size:      clamp(16px, calc(16px + 4 * ((100vw - 320px) / 1600)), 20px) !important;
  font-weight:    400 !important;
  line-height:    clamp(24px, calc(24px + 6 * ((100vw - 320px) / 1600)), 30px) !important;
  letter-spacing: 0 !important;
}


/* ──────────────────────────────────────────────────────────────
   EXPLORE LINK — 13px fixed
   ────────────────────────────────────────────────────────────── */
.pd-explore-cards {
  order:           4 !important;
  margin-bottom:   clamp(34px, calc(42px - 8 * ((100vw - 390px) / 1050)), 42px) !important;
  font-family:     'Montserrat', sans-serif !important;
  font-weight:     500 !important;
  font-size:       13px !important;
  line-height:     15px !important;
  letter-spacing:  0 !important;
  color:           #0b40b4 !important;
  text-decoration: none !important;
  display:         inline-block !important;
}

.pd-explore-cards:hover {
  text-decoration: underline !important;
  color:           #0b40b4 !important;
}


/* ──────────────────────────────────────────────────────────────
   ADD TO BAG BUTTON — 13px fixed
   ────────────────────────────────────────────────────────────── */
#pd-confirm {
  order:          5 !important;
  position:       absolute !important;
  pointer-events: none !important;
  opacity:        0 !important;
  transition:     opacity 0.3s ease !important;
  font-family:    'Montserrat', sans-serif !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  color:          #111 !important;
  letter-spacing: 0.04em !important;
  top:            -20px !important;
}

.pd-cart-form {
  order: 5 !important;
}

.pd-add-btn {
  width:           clamp(148px, calc(148px + 32 * ((100vw - 390px) / 1050)), 180px) !important;
  height:          clamp(40px, calc(44px - 4 * ((100vw - 390px) / 1050)), 44px) !important;
  padding:         0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       13px !important;
  line-height:     15px !important;
  letter-spacing:  0.04em !important;
  text-transform:  uppercase !important;
  background:      #000000 !important;
  color:           #ffffff !important;
  border:          none !important;
  cursor:          pointer !important;
  text-decoration: none !important;
  transition:      background 0.2s ease, color 0.2s ease !important;
}

@media (min-width: 768px) {
  .pd-add-btn {
    font-weight: 600 !important;
    align-self:  flex-start !important;
  }
}

@media (max-width: 767.98px) {
  .pd-add-btn {
    font-weight:  500 !important;
    align-self:   center !important;
    margin-left:  auto !important;
    margin-right: auto !important;
  }
}

.pd-add-btn:hover {
  background: #1a1a1a !important;
}

.pd-add-btn[disabled] {
  opacity: 0.45 !important;
  cursor:  default !important;
}


/* ──────────────────────────────────────────────────────────────
   ACCORDION
   ────────────────────────────────────────────────────────────── */
.pd-accordion {
  order:      6 !important;
  margin-top: 30px !important;
  width:      100% !important;
}

.pd-acc-item {
  border-top:    1px solid rgba(0, 0, 0, 0.10) !important;
  border-bottom: none !important;
  width:         100% !important;
}

.pd-acc-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}

@media (max-width: 767.98px) {
  .pd-acc-item {
    border-top-color: #DCDCDC !important;
  }
  .pd-acc-item:last-child {
    border-bottom-color: #DCDCDC !important;
  }
}

.pd-acc-head {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  cursor:          pointer !important;
  padding:         14px 0 !important;
  width:           100% !important;
  user-select:     none !important;
}

.pd-acc-head,
.pd-acc-head span {
  font-family:     'Montserrat', sans-serif !important;
  font-weight:     500 !important;
  font-size:       13px !important;
  line-height:     15px !important;
  letter-spacing:  0 !important;
  color:           #111111 !important;
  text-transform:  none !important;
  text-decoration: none !important;
}

.pd-acc-icon {
  font-family:    'Montserrat', sans-serif !important;
  font-weight:    400 !important;
  font-size:      16px !important;
  line-height:    13px !important;
  color:          #111111 !important;
  text-transform: none !important;
  transition:     transform 0.2s ease !important;
  flex-shrink:    0 !important;
}

.pd-acc-head .pd-acc-icon {
  font-size:   16px !important;
  font-weight: 400 !important;
}

.pd-acc-item.open .pd-acc-icon {
  transform: rotate(45deg) !important;
}

/* Accordion body — Secondary Body: 14px → 16px */
.pd-acc-body {
  max-height:     0 !important;
  overflow:       hidden !important;
  transition:     max-height 0.3s ease !important;
  font-family:    'Montserrat', sans-serif !important;
  font-size:      clamp(14px, calc(14px + 2 * ((100vw - 320px) / 1600)), 16px) !important;
  font-weight:    400 !important;
  line-height:    clamp(21px, calc(21px + 3 * ((100vw - 320px) / 1600)), 24px) !important;
  color:          #4d4d4d !important;
  padding-bottom: 0 !important;
}

.pd-acc-item.open .pd-acc-body {
  max-height:     400px !important;
  padding-bottom: 16px !important;
}


/* ──────────────────────────────────────────────────────────────
   BTN_FILLED — 13px fixed
   ────────────────────────────────────────────────────────────── */
.btn_filled {
  background:      #000000 !important;
  color:           #ffffff !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       13px !important;
  line-height:     15px !important;
  font-weight:     600 !important;
  letter-spacing:  0.04em !important;
  text-transform:  uppercase !important;
  border-radius:   0 !important;
  border:          none !important;
  cursor:          pointer !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.btn_filled:hover {
  background: #1a1a1a !important;
  color:      #ffffff !important;
}