/* Haroon Al Oud - final draft-only hero and wooden controls (2026-10-20) */
:root{
  --haroon-wood:repeating-linear-gradient(98deg,transparent 0px,rgba(238,188,113,.075) 1px,transparent 3px,transparent 13px,rgba(20,10,5,.16) 15px,transparent 18px),linear-gradient(108deg,#3b2115 0%,#6f4429 30%,#4a2c1c 55%,#895736 75%,#382016 100%);
  --haroon-wood-border:#8a613d;
}
/* The whole hero image occupies the slide; the existing words are OVER the photo. */
body.haroon-site.home .haroon-hero--responsive,
body.haroon-site.home .haroon-hero--responsive .haroon-story-slide{background:#2b1b12!important}
body.haroon-site.home .haroon-hero--responsive .haroon-slides{
  height:clamp(530px,56.28vw,900px)!important;
  aspect-ratio:1672/941!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-slide{
  position:absolute!important;inset:0!important;
  display:block!important;overflow:hidden!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-visual{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  background:transparent!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-visual picture{
  position:absolute!important;inset:0!important;
  display:block!important;width:100%!important;height:100%!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-visual img.haroon-story-image{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
  filter:none!important;transform:none!important;opacity:1!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-visual:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(18,10,5,.30)!important;
  box-shadow:none!important;filter:none!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-copy{
  position:absolute!important;z-index:3!important;
  top:0!important;bottom:0!important;left:0!important;right:auto!important;
  box-sizing:border-box;width:min(640px,53%)!important;height:100%!important;
  margin:0!important;padding:115px 4.5vw 70px!important;
  display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:flex-start!important;
  background:transparent!important;background-image:none!important;
  box-shadow:none!important;text-shadow:none!important;
  text-align:right!important;color:#fffaf2!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-copy h1,
body.haroon-site.home .haroon-hero--responsive .haroon-story-copy h2,
body.haroon-site.home .haroon-hero--responsive .haroon-story-copy p,
body.haroon-site.home .haroon-hero--responsive .haroon-story-eyebrow{
  text-shadow:none!important;filter:none!important;
}
body.haroon-site.home .haroon-hero--responsive .haroon-story-copy h1{color:#fff7e8!important}
body.haroon-site.home .haroon-hero--responsive .haroon-story-copy h2{color:#f9e4c2!important}
body.haroon-site.home .haroon-hero--responsive .haroon-story-copy p{color:#fff3df!important}
body.haroon-site.home .haroon-hero--responsive .haroon-story-eyebrow{color:#f1d4a7!important}
@media(max-width:780px){
  body.haroon-site.home .haroon-hero--responsive .haroon-slides{
    height:clamp(630px,177.7vw,830px)!important;
    aspect-ratio:941/1672!important;
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-visual{
    top:0!important;bottom:0!important;left:0!important;right:0!important;
    width:100%!important;height:100%!important;
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-visual img.haroon-story-image{
    object-position:center center!important;object-fit:cover!important;
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-visual:after{
    background:rgba(18,10,5,.33)!important;
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-copy{
    top:auto!important;bottom:0!important;right:0!important;left:0!important;
    width:100%!important;height:auto!important;min-height:0!important;
    max-width:none!important;padding:22px 22px 58px!important;
    justify-content:flex-end!important;align-items:flex-start!important;
    background:none!important;background-image:none!important;
    text-shadow:none!important;
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-copy h1{
    font-size:clamp(27px,7.5vw,37px)!important;line-height:1.36!important
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-copy h2{
    font-size:clamp(17px,4.7vw,22px)!important;line-height:1.48!important
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-copy p{
    font-size:12px!important;line-height:1.85!important;margin-bottom:14px!important
  }
  body.haroon-site.home .haroon-hero--responsive .haroon-story-eyebrow{
    font-size:11px!important;margin-bottom:8px!important
  }
}
/* Branded dark-oud wood grain for shopper-action buttons, never header icons or dots. */
body.haroon-site :is(.haroon-story-cta,.haroon-add,.haroon-whatsapp-footer,
 .woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
 .woocommerce #payment #place_order,
 .haroon-woo-main ul.products li.product .button,
 .wc-block-cart__submit-button,.wc-block-components-button:not(.is-link),
 .wp-block-button__link,.haroon-search-panel button[type="submit"],
 .haroon-page-main button[type="submit"]:not(.haroon-icon-button),
 .haroon-woo-main button[type="submit"]:not(.haroon-icon-button)){
  background:var(--haroon-wood)!important;
  background-color:#4a2b1d!important;
  color:#fff7e8!important;
  border:1px solid var(--haroon-wood-border)!important;
  border-radius:6px!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-family:inherit!important;
  font-weight:800!important;
}
body.haroon-site :is(.haroon-story-cta,.haroon-add,.haroon-whatsapp-footer,
 .woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
 .wc-block-cart__submit-button,.wc-block-components-button:not(.is-link),
 .wp-block-button__link):hover{
  filter:brightness(1.12)!important;color:#fff!important;
}
body.haroon-site .haroon-hero--responsive .haroon-story-cta{
  background:var(--haroon-wood)!important;
  border-color:#ac8358!important;
  color:#fff8eb!important
}
/* Product and cart price belong to the same cream / wood brand, not green. */
body.haroon-site .haroon-woo-main .woocommerce div.product :is(.price,.price span,.price ins,.woocommerce-Price-amount){
  color:#6f4829!important
}
body.haroon-site .haroon-woo-main .woocommerce div.product .price del,
body.haroon-site .haroon-woo-main .woocommerce div.product .price del .woocommerce-Price-amount{
  color:#9a8874!important;opacity:.9
}
/* Simple, variable and grouped WooCommerce product quantity steppers. */
/* Correct selectors: body itself carries the WooCommerce class, not a nested .woocommerce wrapper. */
body.haroon-site.single-product form.cart .quantity.haroon-qty-ready{
  display:inline-flex!important;align-items:stretch!important;direction:ltr!important;
  border:1px solid #b79c7d!important;border-radius:7px!important;
  background:#fffaf2!important;overflow:hidden!important;
  vertical-align:middle!important;min-height:48px!important;margin-inline:6px 10px!important;
}
body.haroon-site.single-product form.cart .quantity.haroon-qty-ready input.qty{
  width:62px!important;min-width:52px!important;max-width:68px!important;
  text-align:center!important;margin:0!important;padding:6px!important;
  border:0!important;border-radius:0!important;background:#fffaf2!important;
  color:#34251a!important;min-height:46px!important;box-shadow:none!important;
  -moz-appearance:textfield!important;
}
body.haroon-site.single-product form.cart .quantity.haroon-qty-ready input.qty::-webkit-outer-spin-button,
body.haroon-site.single-product form.cart .quantity.haroon-qty-ready input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none!important;margin:0!important;
}
body.haroon-site.single-product form.cart .quantity.haroon-qty-ready .haroon-qty-control{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  position:relative!important;z-index:2!important;pointer-events:auto!important;
  width:40px!important;min-width:40px!important;min-height:46px!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:var(--haroon-wood)!important;color:#fff8e9!important;
  font-size:23px!important;line-height:1!important;font-weight:800!important;
  opacity:1!important;visibility:visible!important;cursor:pointer!important;
  touch-action:manipulation!important;box-shadow:none!important;
}
body.haroon-site.single-product form.cart .quantity.haroon-qty-ready .haroon-qty-control:disabled{
  opacity:.5!important;cursor:not-allowed!important;
}

body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready{
  display:inline-flex!important;align-items:stretch!important;direction:ltr;
  vertical-align:middle;min-height:48px;margin-inline:6px 10px;
  border:1px solid #b79c7d;border-radius:7px;overflow:hidden;
  background:#fffaf2!important;
}
body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready input.qty{
  width:62px!important;min-width:52px;max-width:68px;padding:6px!important;
  margin:0!important;min-height:46px;border:0!important;border-radius:0!important;
  text-align:center!important;background:#fffaf2!important;color:#34251a!important;
  box-shadow:none!important;-moz-appearance:textfield;
}
body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready input.qty::-webkit-inner-spin-button,
body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready input.qty::-webkit-outer-spin-button{
  -webkit-appearance:none;margin:0;
}
body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready .haroon-qty-control{
  flex:0 0 38px!important;width:38px;min-height:46px;border:0!important;
  border-radius:0!important;margin:0!important;padding:0!important;
  color:#fff8e9!important;font-size:22px;line-height:1!important;
  font-family:inherit;font-weight:700;cursor:pointer;
  background:var(--haroon-wood)!important;box-shadow:none!important
}
body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready .haroon-qty-control:disabled{
  opacity:.45;cursor:not-allowed
}
/* Existing React WooCommerce cart quantity has real +/- buttons: recolor without overriding its behavior. */
body.haroon-site.woocommerce-cart .wc-block-components-quantity-selector{
  border:1px solid #bd9e78!important;border-radius:7px!important;
  background:#fffaf3!important;overflow:hidden;
}
body.haroon-site.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
  color:#fff7eb!important;background:var(--haroon-wood)!important;
  border:0!important;opacity:1!important;box-shadow:none!important;
}
body.haroon-site.woocommerce-cart .wc-block-components-quantity-selector input{
  background:#fffaf3!important;color:#382518!important
}
body.haroon-site.woocommerce-cart .wc-block-cart__submit-button{
  width:100%;text-align:center;min-height:48px;
}
@media(max-width:480px){
 body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready .haroon-qty-control{width:35px;flex-basis:35px!important}
 body.haroon-site.single-product .woocommerce .quantity.haroon-qty-ready input.qty{width:55px!important}
 body.haroon-site.single-product .woocommerce form.cart .single_add_to_cart_button{min-height:47px}
}