/* ============================================================================
   pdp.css — SINGLE SOURCE OF TRUTH for the Drah product-page (PDP) DESIGN.

   Loaded LAST on product pages (enqueued after redesign.css in functions-core.php),
   with high-specificity selectors (the `div.product` prefix) so it authoritatively
   OWNS the PDP look and overrides the older, duplicated rules that were scattered
   across single-product.css / product-customization.css / redesign.css.

   >>> EDIT THE PRODUCT PAGE HERE. <<<  Nothing loads after this, so changes are
   predictable — no more fighting the cascade ("rigid" theme).

   Scope: desktop only (>=981px) on purpose — mobile is governed by mobile-fixes.css,
   which must keep winning on small screens. CSS-only: no markup/JS changes, so the
   cart + customization logic is untouched.
   ============================================================================ */
@media(min-width:981px){
  /* ---- layout rhythm: balanced 2-col [thumbs+main gallery] | [details] ----
     align-items:start lets the gallery cell stay its own height so it can be
     position:sticky and ride alongside the tall customization panel. */
  .single-product div.product.product{
    max-width:1440px!important;
    gap:34px 44px!important;
    grid-template-columns:minmax(0,1.32fr) minmax(430px,.82fr)!important;
    align-items:start!important;
  }

  /* ===========================================================================
     GALLERY (desktop redesign) — premium cream/gold stage that MATCHES the
     customization panel (same gold-tinted border + soft shadow language), a
     refined vertical thumbnail rail, and a STICKY wrapper so the gallery stays
     aligned with the long details column as you scroll. CSS-only; the gallery
     JS (swap on thumb click + lightbox on main click) is untouched.
     =========================================================================== */
  /* Wrapper: sticky 2-col grid [thumbs | main]. Specificity matches
     single-product.css's `div.images.drah-product-gallery` so pdp.css (loaded
     last) authoritatively wins. */
  /* NOT sticky: WooCommerce renders related/up-sell products INSIDE the same
     div.product, so a sticky gallery's containing block runs through them and it
     never releases (overlaps the related section + footer). Keep it static and
     top-aligned in its column. */
  .single-product div.product div.images.drah-product-gallery{
    direction:ltr!important;
    position:static!important;align-self:start!important;
    display:grid!important;grid-template-columns:80px minmax(0,1fr)!important;
    grid-template-areas:"thumbs main"!important;gap:14px!important;align-items:start!important;
    max-width:none!important;width:100%!important;
  }

  /* Main stage: cream gradient + gold-tinted border + soft shadow = panel match */
  .single-product div.product div.images.drah-product-gallery .drah-product-gallery__main{
    grid-area:main!important;margin:0!important;width:100%!important;
    aspect-ratio:1/1!important;max-height:none!important;
    border-radius:22px!important;overflow:hidden!important;
    background:linear-gradient(180deg,#ffffff,#fdf8f1)!important;
    border:1px solid rgba(188,188,188,.30)!important;
    box-shadow:0 26px 60px rgba(17,17,17,.10)!important;
  }
  .single-product div.product .drah-product-gallery__zoom{
    display:block!important;width:100%!important;height:100%!important;cursor:zoom-in!important;
  }
  /* product fills the square frame; gentle hover zoom + crossfade on switch */
  .single-product div.product .drah-product-gallery__image{
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center!important;border-radius:0!important;
    transform:none!important;
    transition:opacity .30s ease, transform .55s cubic-bezier(.22,1,.36,1)!important;
  }
  .single-product div.product .drah-product-gallery__main:hover .drah-product-gallery__image{
    transform:scale(1.045)!important;
  }
  /* crossfade state set by product-gallery.js while swapping the source */
  .single-product div.product .drah-product-gallery__main.is-swapping .drah-product-gallery__image{
    opacity:0!important;transform:scale(1.025)!important;
  }

  /* Counter pill: warm frosted with a gold edge to match the theme */
  .single-product div.product .drah-product-gallery__counter{
    top:16px!important;left:16px!important;right:auto!important;
    border:1px solid rgba(188,188,188,.45)!important;
    background:rgba(255,253,250,.80)!important;color:#171717!important;
    box-shadow:0 6px 16px rgba(17,17,17,.10)!important;
  }

  /* Vertical thumbnail rail — gold-themed, gold active ring (matches the panel) */
  .single-product div.product div.images.drah-product-gallery .drah-product-gallery__thumbs{
    grid-area:thumbs!important;display:flex!important;flex-direction:column!important;
    gap:12px!important;margin:0!important;align-self:start!important;overflow:visible!important;
  }
  .single-product div.product div.images.drah-product-gallery .drah-product-gallery__thumb{
    flex:0 0 auto!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;
    min-height:0!important;padding:0!important;margin:0!important;
    border:1px solid rgba(188,188,188,.30)!important;border-radius:14px!important;overflow:hidden!important;
    background:#fff!important;cursor:pointer!important;opacity:.7!important;
    transition:opacity .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
  }
  .single-product div.product .drah-product-gallery__thumb img{ width:100%!important;height:100%!important;object-fit:cover!important;display:block!important; }
  .single-product div.product .drah-product-gallery__thumb:hover{ opacity:1!important;border-color:#c8c8c8!important;transform:translateY(-1px)!important; }
  .single-product div.product .drah-product-gallery__thumb.is-active{
    opacity:1!important;border-color:#c8c8c8!important;
    box-shadow:0 0 0 2px rgba(188,188,188,.45),0 8px 18px rgba(17,17,17,.10)!important;
  }
  /* clickable thumbnails replace the dots on desktop */
  .single-product div.product .drah-product-gallery__dots{ display:none!important; }

  /* PREV/NEXT arrows on the stage (injected by product-gallery.js). Hover-revealed
     round gold buttons — the main desktop way to move between images now. RTL:
     the right arrow goes back, the left arrow goes forward. */
  .single-product div.product .drah-product-gallery__nav{
    position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:6!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:50px!important;height:50px!important;padding:0!important;margin:0!important;
    border:1px solid rgba(188,188,188,.50)!important;border-radius:50%!important;
    background:rgba(255,253,250,.88)!important;-webkit-backdrop-filter:blur(7px)!important;backdrop-filter:blur(7px)!important;
    color:#171717!important;cursor:pointer!important;opacity:0!important;
    box-shadow:0 10px 24px rgba(17,17,17,.16)!important;
    transition:opacity .22s ease,background .2s ease,border-color .2s ease,transform .2s ease!important;
  }
  .single-product div.product .drah-product-gallery__nav svg{
    width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;
    stroke-width:2.2!important;stroke-linecap:round!important;stroke-linejoin:round!important;display:block!important;
  }
  .single-product div.product .drah-product-gallery__nav--prev{right:16px!important;left:auto!important;}
  .single-product div.product .drah-product-gallery__nav--next{left:16px!important;right:auto!important;}
  .single-product div.product .drah-product-gallery__main:hover .drah-product-gallery__nav{opacity:1!important;}
  .single-product div.product .drah-product-gallery__nav:hover{
    background:#fff!important;border-color:#c8c8c8!important;transform:translateY(-50%) scale(1.07)!important;
  }
  .single-product div.product .drah-product-gallery__nav:active{transform:translateY(-50%) scale(.96)!important;}

  /* ---- INFO: editorial hierarchy ---- */
  .single-product div.product .dr-pdp-eyebrow{
    color:var(--dr-gold)!important;font-weight:700!important;font-size:.7rem!important;letter-spacing:.3em!important;margin:0 0 12px!important;
  }
  .single-product div.product div.summary .product_title{
    font-size:2.4rem!important;font-weight:500!important;line-height:1.2!important;letter-spacing:.01em!important;color:var(--dr-ink-strong)!important;margin:0 0 14px!important;
  }
  .single-product div.product .dr-price-wrap{ margin:0 0 18px!important;gap:8px!important; }
  .single-product div.product .dr-price-wrap p.price.dr-price-main{
    font-size:2.1rem!important;font-weight:700!important;
    transition:opacity .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1), filter .2s ease!important;
    will-change:opacity, transform, filter!important;
    min-height:1.35em!important;
  }
  .single-product div.product .dr-price-wrap p.price.dr-price-main.drah-price-changing{
    opacity:0!important;
    transform:translateY(-4px) scale(.985)!important;
    filter:blur(1.5px)!important;
  }
  .single-product div.product .dr-price-wrap p.price.dr-price-main.drah-price-entering{
    opacity:0!important;
    transform:translateY(5px) scale(.985)!important;
    filter:blur(1.5px)!important;
  }
  .single-product div.product .dr-price-sub del,
  .single-product div.product .dr-price-sub del .amount{ font-size:1rem!important; }
  .single-product div.product .dr-price-sub .dr-price-off{
    background:var(--dr-rose-deep)!important;color:#fff!important;font-weight:700!important;font-size:.76rem!important;padding:6px 12px!important;border-radius:8px!important;
  }
  .single-product div.product .woocommerce-product-details__short-description{
    font-size:.95rem!important;line-height:1.75!important;max-width:48ch!important;
  }

  /* ---- TRUST strip: premium cream card, gold line icons + gold labels ---- */
  .single-product div.product .dr-pdp-features{
    display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;
    margin:30px 0 10px!important;padding:24px 12px!important;
    background:#fbf7f0!important;border:1px solid rgba(203,163,90,.32)!important;
    border-radius:18px!important;box-shadow:0 16px 40px rgba(17,17,17,.05)!important;
  }
  .single-product div.product .dr-pdp-feature{ display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;padding:2px 10px!important;text-align:center!important; }
  .single-product div.product .dr-pdp-feature + .dr-pdp-feature{ border-inline-start:1px solid rgba(203,163,90,.30)!important; }
  .single-product div.product .dr-pdp-feature-ico{
    width:auto!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:0!important;background:none!important;color:#c8c8c8!important;
  }
  .single-product div.product .dr-pdp-feature-ico svg{ width:30px!important;height:30px!important;stroke:#c8c8c8!important;fill:none!important;stroke-width:1.4!important;stroke-linecap:round!important;stroke-linejoin:round!important; }
  .single-product div.product .dr-pdp-feature-txt b{ display:block!important;color:#9a6a2c!important;font-weight:800!important;font-size:.9rem!important;line-height:1.35!important; }
  .single-product div.product .dr-pdp-feature-txt span{ display:block!important;color:rgba(17,17,17,.55)!important;font-size:.74rem!important;margin-top:4px!important; }
  @media(max-width:640px){
    .single-product div.product .dr-pdp-features{grid-template-columns:repeat(4,1fr)!important;padding:18px 4px!important;border-radius:16px!important;}
    .single-product div.product .dr-pdp-feature{padding:0 5px!important;gap:8px!important;}
    .single-product div.product .dr-pdp-feature-ico svg{width:24px!important;height:24px!important;}
    .single-product div.product .dr-pdp-feature-txt b{font-size:.66rem!important;}
    .single-product div.product .dr-pdp-feature-txt span{font-size:.56rem!important;}
  }

  /* ---- CUSTOMIZATION: premium panel, gold accents to match the site theme ---- */
  .single-product div.product .drah-product-custom-fields{
    background:linear-gradient(180deg,#ffffff,#fdfaf4)!important;border:1px solid rgba(188,188,188,.30)!important;border-radius:20px!important;
    box-shadow:0 26px 60px rgba(17,17,17,.08)!important;padding:26px!important;
  }
  .single-product div.product .drah-product-custom-head strong{
    font-weight:800!important;font-size:1.14rem!important;color:var(--dr-ink-strong)!important;padding-right:12px!important;border-right:3px solid #c8c8c8!important;
  }
  .single-product div.product .drah-product-option-pill span{
    border:1.5px solid rgba(188,188,188,.40)!important;border-radius:13px!important;padding:11px 16px!important;font-weight:600!important;background:#fff!important;color:var(--dr-ink)!important;
    transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease!important;
  }
  .single-product div.product .drah-product-option-pill:hover span{ border-color:#c8c8c8!important; }
  .single-product div.product .drah-product-option-pill input:checked + span{
    background:var(--dr-rose-deep)!important;border-color:var(--dr-rose-deep)!important;color:#fff!important;box-shadow:0 10px 22px rgba(17,17,17,.28)!important;transform:translateY(-1px)!important;
  }
  .single-product div.product .drah-product-custom-field input[type="text"],
  .single-product div.product .drah-product-custom-field input[type="number"],
  .single-product div.product .drah-product-custom-field select,
  .single-product div.product .drah-product-custom-field textarea{
    background:#fff!important;border:1.5px solid rgba(188,188,188,.34)!important;border-radius:12px!important;min-height:50px!important;padding:11px 15px!important;color:var(--dr-ink-strong)!important;font-size:.98rem!important;
  }
  /* Short text fields (name / back engraving) are <textarea rows="3"> by config,
     but should READ like the single-line "chain length" input: same height, no
     resize handle, no giant box. */
  .single-product div.product .drah-product-custom-field textarea{
    height:50px!important;min-height:50px!important;line-height:1.5!important;
    resize:none!important;overflow-y:auto!important;
  }
  /* Genuine multi-line message boxes (order notes + gift-card message) stay
     taller and remain resizable. */
  .single-product div.product .drah-product-custom-field-order_note textarea,
  .single-product div.product .drah-product-custom-field-gift_card_details textarea{
    height:84px!important;min-height:84px!important;resize:vertical!important;
  }
  .single-product div.product .drah-product-custom-field input:focus,
  .single-product div.product .drah-product-custom-field select:focus,
  .single-product div.product .drah-product-custom-field textarea:focus{
    border-color:#c8c8c8!important;box-shadow:0 0 0 3px rgba(188,188,188,.22)!important;outline:0!important;
  }

  /* ---- BUY actions: full-width, evenly spaced ---- */
  .single-product div.product form.cart .single_add_to_cart_button{
    background:var(--dr-rose-deep)!important;color:#fff!important;border-radius:14px!important;min-height:56px!important;font-size:1.05rem!important;font-weight:700!important;box-shadow:0 16px 34px rgba(17,17,17,.26)!important;width:100%!important;
  }
  .single-product div.product .drah-buy-now{
    background:#fff!important;color:var(--dr-rose-deep)!important;border:1.5px solid var(--dr-rose-deep)!important;border-radius:14px!important;min-height:54px!important;font-weight:700!important;font-size:1rem!important;width:100%!important;margin-top:12px!important;
  }
  .single-product div.product .drah-buy-now:hover{ background:var(--dr-rose-deep)!important;color:#fff!important; }
  .single-product div.product .drah-product-inquiry{ display:block!important;width:100%!important;text-align:center!important;margin-top:12px!important; }
}

/* Mobile is intentionally untouched — keep the original single-image gallery
   (no thumbnail rail) below the desktop breakpoint. */
@media(max-width:980px){
  .single-product .drah-product-gallery__thumbs{ display:none!important; }
  /* mobile keeps swipe; the injected desktop arrows stay hidden */
  .single-product .drah-product-gallery__nav{ display:none!important; }
}

/* ============================================================================
   WhatsApp inquiry button (مساعدة عبر واتساب) — authoritative, ALL widths.
   Clean outline pill, icon on the left, centered, matches the add-to-cart size.
   ============================================================================ */
.single-product div.product .drah-product-inquiry{
  display:flex!important;direction:ltr!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  width:100%!important;min-height:54px!important;margin-top:12px!important;padding:10px 18px!important;box-sizing:border-box!important;
  background:#fff!important;color:#171717!important;-webkit-text-fill-color:#171717!important;
  border:1.5px solid #171717!important;border-radius:14px!important;
  font:700 1rem/1 var(--drah-font),sans-serif!important;text-align:center!important;text-decoration:none!important;
  box-shadow:none!important;transition:background .2s ease,color .2s ease,box-shadow .2s ease!important;
}
.single-product div.product .drah-product-inquiry:hover{
  background:#171717!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  box-shadow:0 12px 26px rgba(17,17,17,.22)!important;
}
.single-product div.product .drah-product-inquiry svg{
  width:20px!important;height:20px!important;flex:0 0 auto!important;fill:currentColor!important;stroke:none!important;
}
.single-product div.product .drah-product-inquiry span{line-height:1!important;direction:rtl!important}

/* ============================================================================
   Mobile: gallery flush under the header — remove the top gap above the image.
   The PDP is double-wrapped (.site-main > .drah-container twice) and the WC
   breadcrumb is hooked into woocommerce_before_main_content (pri 20), so the
   remaining gap is the breadcrumb's height + margin sitting above the gallery.
   Zero the wrapper top padding AND drop the breadcrumb on mobile.
   ============================================================================ */
@media(max-width:980px){
  .single-product .site-main{padding-top:0!important}
  .single-product .drah-container{padding-top:0!important}
  .single-product .woocommerce-breadcrumb{display:none!important;margin:0!important}
  .single-product .woocommerce-notices-wrapper:empty{margin:0!important;padding:0!important}
  .single-product div.product.product,
  .single-product div.product div.images.drah-product-gallery,
  .single-product .drah-product-gallery__main{margin-top:0!important;padding-top:0!important}
}

/* ============================================================================
   Add-to-cart button: no drop shadow (all widths + states). Single authoritative
   rule, last-loaded — neutralizes the shadows set in single-product.css / redesign.css.
   ============================================================================ */
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart button.single_add_to_cart_button,
.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product form.cart button.single_add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:focus{
  box-shadow:none!important;
}

/* Discount PILL next to the price removed (per request: no discount pills). The
   sale price + struck old price remain; only the «خصم %» pill is dropped. */
.single-product .dr-price-off,
.single-product div.product .dr-price-sub .dr-price-off{
  display:none!important;
}

/* ============================================================================
   Gallery image CROSSFADE — ALL widths (desktop + phone). product-gallery.js
   toggles .is-swapping around the source swap; this is what makes both the
   desktop arrows/thumbnails AND the phone swipe fade smoothly.
   ============================================================================ */
.single-product .drah-product-gallery__image{
  transition:opacity .30s ease, transform .55s cubic-bezier(.22,1,.36,1)!important;
}
.single-product .drah-product-gallery__main.is-swapping .drah-product-gallery__image{
  opacity:0!important;transform:scale(1.02)!important;
}
@media (prefers-reduced-motion:reduce){
  .single-product .drah-product-gallery__main.is-swapping .drah-product-gallery__image{
    opacity:1!important;transform:none!important;
  }
}

/* ============================================================================
   CUSTOMIZATION PANEL — desktop HIGH-END alignment (authoritative, last-loaded).
   One clean column so every label + control lines up to the same width with a
   consistent vertical rhythm; uniform 50px control height + radius; option pills
   in a neat inline row. Markup + field ORDER untouched (CSS only).
   ============================================================================ */
@media(min-width:981px){
  .single-product div.product .drah-product-custom-fields{ padding:30px 30px 26px!important; }
  .single-product div.product .drah-product-custom-head{ margin:0 0 4px!important;padding-bottom:18px!important; }

  /* single column = perfectly aligned stack */
  .single-product div.product .drah-product-custom-grid{ grid-template-columns:1fr!important;gap:20px!important; }
  .single-product div.product .drah-product-custom-field{ margin:0!important;gap:10px!important; }

  /* labels: one consistent weight/size/alignment everywhere */
  .single-product div.product .drah-product-custom-field > span{
    min-height:auto!important;display:flex!important;align-items:center!important;gap:7px!important;
    color:#3f1018!important;font:800 .96rem/1.3 var(--drah-font),sans-serif!important;
  }
  .single-product div.product .drah-product-custom-field small{
    font:500 .8rem/1.5 var(--drah-font),sans-serif!important;color:rgba(17,17,17,.5)!important;
  }

  /* controls: uniform 50px height + radius across the whole panel */
  .single-product div.product .drah-product-custom-field input[type="text"],
  .single-product div.product .drah-product-custom-field input[type="number"],
  .single-product div.product .drah-product-custom-field select{
    min-height:50px!important;height:50px!important;border-radius:13px!important;
  }
  .single-product div.product .drah-product-custom-field textarea{ border-radius:13px!important; }

  /* option pills: neat inline row, equal comfortable size, aligned to the grid */
  .single-product div.product .drah-product-option-pills{
    display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:0!important;
  }
  .single-product div.product .drah-product-option-pill{ width:auto!important;flex:0 0 auto!important; }
  .single-product div.product .drah-product-option-pill span{
    min-height:50px!important;padding:0 22px!important;border-radius:13px!important;
    font:700 .95rem/1 var(--drah-font),sans-serif!important;
  }

  /* extras (gift card + notes): clear divider + matching rhythm */
  .single-product div.product .drah-product-custom-extras{ margin-top:22px!important;padding-top:22px!important; }
  .single-product div.product .drah-product-custom-gift-card{ border-radius:14px!important; }
  .single-product div.product .drah-ring-size-apps{ border-radius:14px!important; }

  /* summary box rhythm */
  .single-product div.product .drah-product-custom-summary{ margin-top:6px!important;border-radius:14px!important; }
}