/* =========================================================
   THE MAHOHA — PRODUCT TOP UI v1
   Scope ONLY:
   - Breadcrumb
   - Product gallery
   - Product name
   - Description
   - Price
   - Add to cart
   - Checkout button
   - Quantity control

   IMPORTANT:
   - NO checkout form styling
   - NO DOM reorder
   - NO display logic changes
   - NO new HTML
========================================================= */

:root{
  --mh-burgundy:#74162c;
  --mh-burgundy-hi:#9a2348;
  --mh-burgundy-deep:#541024;
  --mh-plum:#2b1028;
  --mh-wasabi:#d8f24a;
  --mh-blue:#d7efff;
  --mh-blush:#f7e9ec;
  --mh-ink:#22161e;
  --mh-muted:#746870;
  --mh-line:rgba(43,16,40,.10);
  --mh-ease:cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   BREADCRUMB
========================================================= */

#product-id > .hidden.md\:block.pt-6 > div{
  border:1px solid rgba(43,16,40,.07);
  border-radius:15px;
  padding:6px 8px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(247,233,236,.54));
  box-shadow:
    0 10px 28px rgba(43,16,40,.04),
    inset 0 1px rgba(255,255,255,.96);
  backdrop-filter:blur(15px) saturate(1.15);
  -webkit-backdrop-filter:blur(15px) saturate(1.15);
}

#product-id > .hidden.md\:block.pt-6 a,
#product-id > .hidden.md\:block.pt-6 span{
  border-radius:10px;
  padding:7px 9px;
  transition:
    background .22s ease,
    color .22s ease,
    transform .28s var(--mh-ease);
}

#product-id > .hidden.md\:block.pt-6 a{
  color:#877882!important;
}

#product-id > .hidden.md\:block.pt-6 a:hover{
  background:rgba(116,22,44,.065);
  color:var(--mh-burgundy)!important;
  transform:translateY(-1px);
}

#product-id > .hidden.md\:block.pt-6 span:last-child{
  color:var(--mh-plum)!important;
  font-weight:800!important;
  background:rgba(216,242,74,.14);
}

/* =========================================================
   PRODUCT GALLERY
========================================================= */

#product-id .p_gallery_container{
  --mh-gallery-x:50%;
  --mh-gallery-y:35%;
  position:relative;
}

#product-id .p_gallery_container .w-full.min-h-\[min\(85vw\,58vh\)\]{
  overflow:hidden;
  border:1px solid rgba(43,16,40,.075);
  border-radius:26px!important;

  background:
    radial-gradient(
      circle at var(--mh-gallery-x) var(--mh-gallery-y),
      rgba(255,255,255,.94),
      transparent 27%
    ),
    radial-gradient(
      circle at 77% 11%,
      rgba(215,239,255,.62),
      transparent 29%
    ),
    radial-gradient(
      circle at 15% 86%,
      rgba(247,233,236,.82),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #fff 0%,
      #fdf8fa 61%,
      #f3f9fb 100%
    )!important;

  box-shadow:
    0 28px 78px rgba(43,16,40,.09),
    inset 0 1px rgba(255,255,255,.98);

  transition:
    transform .40s var(--mh-ease),
    box-shadow .40s var(--mh-ease),
    border-color .25s ease;
}

@media(hover:hover){
  #product-id .p_gallery_container
  .w-full.min-h-\[min\(85vw\,58vh\)\]:hover{
    transform:translateY(-3px);
    border-color:rgba(116,22,44,.13);
    box-shadow:
      0 38px 96px rgba(43,16,40,.13),
      inset 0 1px rgba(255,255,255,.98);
  }
}

#product-id img.sphinx_product_active_img{
  object-fit:contain!important;
  border-radius:26px!important;
  transform:scale(1);
  transition:
    transform .80s var(--mh-ease),
    filter .35s ease!important;
}

@media(hover:hover){
  #product-id .p_gallery_container:hover img.sphinx_product_active_img{
    transform:scale(1.016);
    filter:saturate(1.04) contrast(1.008);
  }
}


/* -------------------------
   THUMBNAILS
------------------------- */

#product-id .sphinx_product_images_grid{
  gap:10px!important;
}

#product-id .sphinx_product_images_grid > button{
  position:relative;
  overflow:hidden;

  border:1px solid rgba(43,16,40,.075)!important;
  border-radius:15px!important;

  background:rgba(255,255,255,.92)!important;

  box-shadow:
    0 7px 20px rgba(43,16,40,.035);

  transition:
    transform .32s var(--mh-ease),
    box-shadow .32s var(--mh-ease),
    border-color .22s ease!important;
}

#product-id .sphinx_product_images_grid > button::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:5px;

  width:20px;
  height:3px;

  border-radius:999px;

  background:var(--mh-wasabi);

  opacity:0;

  transform:
    translateX(-50%)
    scaleX(.25);

  transition:
    opacity .22s ease,
    transform .30s var(--mh-ease);

  pointer-events:none;
}

#product-id .sphinx_product_images_grid > button[aria-selected="true"]{
  border-color:rgba(116,22,44,.36)!important;

  box-shadow:
    0 11px 26px rgba(116,22,44,.085)!important;
}

#product-id .sphinx_product_images_grid > button[aria-selected="true"]::after{
  opacity:1;

  transform:
    translateX(-50%)
    scaleX(1);
}

#product-id .sphinx_product_images_img{
  border-radius:13px!important;
  outline:0!important;

  transition:
    transform .42s var(--mh-ease),
    filter .30s ease!important;
}

@media(hover:hover){
  #product-id .sphinx_product_images_grid > button:hover{
    transform:
      translateY(-5px)
      rotate(-.45deg);

    border-color:
      rgba(116,22,44,.25)!important;

    box-shadow:
      0 16px 30px
      rgba(43,16,40,.08)!important;
  }

  #product-id .sphinx_product_images_grid > button:hover
  .sphinx_product_images_img{
    transform:scale(1.045);
    filter:saturate(1.04);
  }
}


/* =========================================================
   PRODUCT CATEGORY
========================================================= */

#product-id .p_details_container
.relative.flex.flex-col
> a[href*="/collections/"]{

  display:inline-flex!important;
  align-items:center;

  width:max-content!important;
  min-height:28px;

  margin-bottom:10px!important;

  padding:0 10px!important;

  border:1px solid rgba(116,22,44,.10);

  border-radius:999px;

  background:
    rgba(247,233,236,.58);

  color:var(--mh-burgundy)!important;

  font-size:9px!important;
  font-weight:800!important;

  transition:
    transform .26s var(--mh-ease),
    background .22s ease,
    border-color .22s ease;
}

@media(hover:hover){
  #product-id .p_details_container
  .relative.flex.flex-col
  > a[href*="/collections/"]:hover{

    transform:translateY(-2px);

    background:
      rgba(216,242,74,.22);

    border-color:
      rgba(116,22,44,.16);
  }
}


/* =========================================================
   PRODUCT NAME
========================================================= */

#product-id .product_name{
  position:relative;

  margin-bottom:14px!important;

  color:var(--mh-plum)!important;

  font-family:
    Georgia,
    "Times New Roman",
    serif!important;

  font-size:
    clamp(38px,3.25vw,56px)!important;

  font-weight:400!important;

  line-height:.95!important;

  letter-spacing:-.05em!important;

  text-wrap:balance;
}

#product-id .product_name::after{
  content:"";

  display:block;

  width:48px;
  height:3px;

  margin-top:13px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--mh-burgundy),
      var(--mh-wasabi)
    );
}


/* =========================================================
   DESCRIPTION
========================================================= */

#product-id .p_details_container
.relative.flex.flex-col
> p.text-sm{

  max-width:540px;

  margin-bottom:18px!important;

  color:var(--mh-muted)!important;

  font-size:12px!important;

  line-height:1.9!important;
}


/* =========================================================
   PRICE
========================================================= */

#product-id .relative.flex.flex-col
> .flex.items-center.gap-7{

  width:max-content;
  max-width:100%;

  padding:10px 14px;

  border:
    1px solid
    rgba(43,16,40,.075);

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.85),
      rgba(247,233,236,.48)
    );

  box-shadow:
    0 8px 24px
    rgba(43,16,40,.035);

  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);

  transition:
    transform .30s var(--mh-ease),
    box-shadow .30s var(--mh-ease);
}

@media(hover:hover){
  #product-id .relative.flex.flex-col
  > .flex.items-center.gap-7:hover{

    transform:translateY(-2px);

    box-shadow:
      0 14px 30px
      rgba(43,16,40,.065);
  }
}

#product-id #sale-price{
  margin:0!important;

  color:
    var(--mh-burgundy)!important;

  font:
    900 37px/.95
    Arial,
    sans-serif!important;

  letter-spacing:-.055em;
}

#product-id #sale-price::before{
  content:"NOW ";

  color:var(--mh-plum);

  font:
    900 6px/1
    Arial,
    sans-serif;

  letter-spacing:.15em;

  vertical-align:middle;
}

#product-id #sale-price + span{
  color:
    var(--mh-burgundy)!important;

  font-size:12px!important;

  font-weight:800!important;
}

#product-id .relative.flex.flex-col
> .flex.items-center.gap-7
.flex.items-center.gap-x-3
> p.line-through{

  color:#a3979f!important;

  font-size:12px!important;

  opacity:.82;
}


/* =========================================================
   BUY BUTTONS
========================================================= */

#product-id .checkout_btn,
#product-id .add_to_cart_btn{

  position:relative!important;

  isolation:isolate;

  overflow:hidden!important;

  min-height:54px!important;

  border-radius:14px!important;

  font-family:
    "Tajawal",
    "Cairo",
    Arial,
    sans-serif!important;

  font-weight:800!important;

  transition:
    transform .34s var(--mh-ease),
    box-shadow .34s var(--mh-ease),
    border-color .24s ease,
    filter .24s ease!important;
}


/* -------------------------
   CHECKOUT BUTTON
------------------------- */

#product-id .checkout_btn{

  border-color:
    transparent!important;

  background:
    radial-gradient(
      circle at
      var(--mh-buy-x,24%)
      var(--mh-buy-y,50%),

      rgba(255,255,255,.24),

      transparent 27%
    ),

    linear-gradient(
      115deg,
      var(--mh-burgundy-hi),
      var(--mh-burgundy) 48%,
      var(--mh-plum)
    )!important;

  color:#fff!important;

  box-shadow:
    0 15px 34px
    rgba(116,22,44,.18)!important;
}


/* moving light streak */

#product-id .checkout_btn::before{

  content:"";

  position:absolute;

  top:-90%;
  bottom:-90%;

  left:-32%;

  width:24%;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.38),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .72s var(--mh-ease);
}


/* wasabi action indicator */

#product-id .checkout_btn::after{

  content:"↗";

  position:absolute;

  inset-inline-end:7px;

  top:50%;

  width:39px;
  height:39px;

  display:grid;

  place-items:center;

  border-radius:11px;

  background:
    var(--mh-wasabi);

  color:
    var(--mh-plum);

  font:
    900 15px/1
    Arial,
    sans-serif;

  transform:
    translateY(-50%);

  transition:
    transform .36s var(--mh-ease),
    border-radius .36s var(--mh-ease);
}


@media(hover:hover){

  #product-id .checkout_btn:hover{

    transform:
      translateY(-4px)
      scale(1.006);

    filter:saturate(1.12);

    box-shadow:
      0 24px 48px
      rgba(116,22,44,.28)!important;
  }


  #product-id .checkout_btn:hover::before{

    left:112%;
  }


  #product-id .checkout_btn:hover::after{

    transform:
      translateY(-50%)
      rotate(9deg)
      scale(1.05);

    border-radius:50%;
  }

}


/* -------------------------
   ADD TO CART
------------------------- */

#product-id .add_to_cart_btn{

  --mh-cart-x:50%;
  --mh-cart-y:50%;

  border:
    1px solid
    rgba(116,22,44,.20)!important;

  background:
    radial-gradient(
      circle at
      var(--mh-cart-x)
      var(--mh-cart-y),

      rgba(216,242,74,0),

      transparent 34%
    ),

    rgba(255,255,255,.86)!important;

  color:
    var(--mh-burgundy)!important;

  box-shadow:
    0 8px 22px
    rgba(43,16,40,.03)!important;
}

@media(hover:hover){

  #product-id .add_to_cart_btn:hover{

    transform:
      translateY(-3px);

    border-color:
      rgba(116,22,44,.40)!important;

    background:
      radial-gradient(
        circle at
        var(--mh-cart-x)
        var(--mh-cart-y),

        rgba(216,242,74,.33),

        transparent 36%
      ),

      rgba(255,255,255,.96)!important;

    box-shadow:
      0 16px 34px
      rgba(43,16,40,.075)!important;
  }

}


#product-id .checkout_btn:active,
#product-id .add_to_cart_btn:active{

  transform:
    translateY(0)
    scale(.985)!important;
}


/* =========================================================
   QUANTITY
========================================================= */

#product-id .p_details_container
.flex.flex-row-reverse.gap-2.mt-5
> div:last-child{

  border-color:
    rgba(43,16,40,.10)!important;

  border-radius:
    14px!important;

  background:
    rgba(255,255,255,.77);

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.94);
}

#product-id .p_details_container
.flex.flex-row-reverse.gap-2.mt-5
> div:last-child button{

  border-radius:
    9px!important;

  transition:
    transform .24s var(--mh-ease),
    background .22s ease,
    color .22s ease!important;
}

@media(hover:hover){

  #product-id .p_details_container
  .flex.flex-row-reverse.gap-2.mt-5
  > div:last-child button:hover{

    transform:
      scale(1.05);

    background:
      var(--mh-plum)!important;

    color:
      #fff!important;
  }

}


/* =========================================================
   MOBILE VISUAL TUNING ONLY
   NO DOM/LAYOUT LOGIC CHANGES
========================================================= */

@media(max-width:900px){

  #product-id .product_name{

    font-size:
      34px!important;
  }


  #product-id #sale-price{

    font-size:
      32px!important;
  }


  #product-id .checkout_btn,
  #product-id .add_to_cart_btn{

    min-height:
      52px!important;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

#product-id .checkout_btn:focus-visible,
#product-id .add_to_cart_btn:focus-visible,
#product-id .sphinx_product_images_grid > button:focus-visible{

  outline:
    2px solid
    var(--mh-wasabi)!important;

  outline-offset:
    3px!important;
}


@media(prefers-reduced-motion:reduce){

  #product-id .checkout_btn,
  #product-id .add_to_cart_btn,
  #product-id .sphinx_product_images_grid > button,
  #product-id img.sphinx_product_active_img{

    transition:none!important;
  }

}