/* ==============================
   WAREQA x SALLA ANGEL / MALAK
   Final Custom CSS - Mobile First
================================= */

:root{
  --w-ivory:#F3F0E7;
  --w-gold:#C5A15A;
  --w-maroon:#5A1E2C;
  --w-maroon-dark:#42101c;
  --w-olive:#6B6F3A;
  --w-taupe:#D8D0C4;
  --w-gray:#8A8176;
  --w-dark:#2B221E;
  --w-radius:20px;
  --w-shadow:0 10px 28px rgba(43,34,30,.08);
  --w-max:1180px;
}

/* ==============================
   SAFE RESET
================================= */

html,
body{
  overflow-x:hidden!important;
  max-width:100%!important;
  scroll-behavior:smooth;
}

body{
  background:var(--w-ivory)!important;
  color:var(--w-dark)!important;
  font-family:var(--font-main), "Tajawal", "Cairo", sans-serif!important;
}

img,
video,
iframe{
  max-width:100%!important;
}

a,
button{
  -webkit-tap-highlight-color:transparent;
}

/* ==============================
   HEADER
================================= */

.store-header,
.store-header .header-inner,
.store-header .main-nav-container,
.store-header .bottom-header{
  background:var(--w-maroon)!important;
}

.store-header .header-inner{
  min-height:76px!important;
  border-bottom:1px solid rgba(243,240,231,.12)!important;
}

.store-header .header-container{
  max-width:var(--w-max)!important;
  margin:auto!important;
}

.store-header a,
.store-header span,
.store-header p,
.store-header button,
.store-header i,
.store-header .sicon,
.store-header .header-btn,
.store-header .mburger{
  color:#fff !important;
}
.angel-ad .angel-ad__item a,
.angel-ad .angel-ad__item i{
  color:#5b1f2c !important;
}

.store-header svg,
.store-header svg path,
.store-header .s-cart-summary-wrapper svg,
.store-header .s-cart-summary-wrapper path{
  fill:#fff!important;
  stroke:#fff!important;
}

.navbar-brand{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}

.navbar-brand img{
  max-height:56px!important;
  width:auto!important;
  object-fit:contain!important;
}

.store-header .s-cart-summary-count{
  background:var(--w-gold)!important;
  color:var(--w-maroon)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  font-weight:800!important;
}

/* ==============================
   MOBILE BOTTOM NAV
================================= */

.bottom-header{
  height:68px!important;
  box-shadow:0 -10px 24px rgba(0,0,0,.12)!important;
  border-top:1px solid rgba(243,240,231,.14)!important;
}

.bottom-header-buttons{
  max-width:520px!important;
  margin:auto!important;
  height:100%!important;
}

.bottom-header-button,
.bottom-header-icon{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  color:#fff!important;
}

.bottom-header i,
.bottom-header svg,
.bottom-header svg path{
  color:#fff!important;
  fill:#fff!important;
}

.bottom-header span{
  color:#fff!important;
  font-size:11px!important;
  font-weight:600!important;
}

.bottom-header-button:hover i,
.bottom-header-button:hover span{
  color:var(--w-gold)!important;
}

/* ==============================
   MOBILE MENU
================================= */

.mobile-menu{
  background:var(--w-ivory)!important;
}

.mobile-menu .sidemenu-link,
.mobile-menu .menu_title,
.mobile-menu p,
.mobile-menu h5{
  color:var(--w-maroon)!important;
  font-weight:700!important;
}

.mobile-menu .sidemenu-link{
  border-bottom:1px solid rgba(90,30,44,.08)!important;
}

/* ==============================
   PAGE LAYOUT
================================= */

.container,
.md\:container{
  max-width:var(--w-max)!important;
  margin-inline:auto!important;
}

.s-block{
  width:100%!important;
  margin:0 auto!important;
  padding-inline:clamp(14px,4vw,32px)!important;
  box-sizing:border-box!important;
}

.s-block > *,
salla-custom-component{
  max-width:var(--w-max)!important;
  margin-inline:auto!important;
}

/* ==============================
   HOMEPAGE CUSTOM SECTIONS
================================= */

.s-block--bundle-hero-slider,
.s-block--bundle-cta-banner,
.s-block--bundle-brand-story{
  background:var(--w-olive)!important;
  color:var(--w-ivory)!important;
}

.s-block--bundle-hero-slider :is(h1,h2,h3,p,span,a),
.s-block--bundle-cta-banner :is(h1,h2,h3,p,span,a),
.s-block--bundle-brand-story :is(h1,h2,h3,p,span,a){
  color:var(--w-ivory)!important;
}

.s-block--bundle-hero-slider :is(.badge,small),
.s-block--bundle-cta-banner :is(.badge,small),
.s-block--bundle-brand-story :is(.badge,small){
  color:var(--w-gold)!important;
}

.s-block--bundle-wareqa-products,
.s-block--bundle-wholesale-cta,
.s-block--bundle-subscription-cta,
.s-block--bundle-testimonials-section{
  background:var(--w-ivory)!important;
  color:var(--w-dark)!important;
}

/* ==============================
   HERO - NO GLASS EFFECT
================================= */

.s-block--bundle-hero-slider,
.s-block--bundle-hero-slider *::before,
.s-block--bundle-hero-slider *::after{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.s-block--bundle-hero-slider{
  background:
    radial-gradient(circle at 16% 18%, rgba(197,161,90,.12), transparent 26%),
    linear-gradient(145deg,#6B6F3A 0%,#606536 52%,#50542c 100%)!important;
}

.s-block--bundle-hero-slider .overlay,
.s-block--bundle-hero-slider [class*="overlay"],
.s-block--bundle-hero-slider [class*="glass"],
.s-block--bundle-hero-slider [class*="blur"]{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.s-block--bundle-hero-slider .hero-content,
.s-block--bundle-hero-slider .slide-content{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
}

/* Hero buttons */
.s-block--bundle-hero-slider .actions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:20px auto 0!important;
  text-align:center!important;
}

.s-block--bundle-hero-slider .actions .btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  min-height:42px!important;
  min-width:145px!important;
  padding:10px 18px!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}

.s-block--bundle-hero-slider .actions .btn-primary{
  background:var(--w-gold)!important;
  color:var(--w-maroon)!important;
  border:1px solid var(--w-gold)!important;
}

.s-block--bundle-hero-slider .actions .btn-secondary{
  background:transparent!important;
  color:var(--w-ivory)!important;
  border:1px solid rgba(243,240,231,.9)!important;
}

/* ==============================
   GENERAL BUTTONS
================================= */

.s-button-element,
.s-button-btn,
button[type="submit"],
a[class*="btn"]{
  border-radius:999px!important;
  transition:.25s ease!important;
}

.s-button-primary,
.s-button-primary-outline:hover,
button[type="submit"]{
  background:var(--w-maroon)!important;
  border-color:var(--w-maroon)!important;
  color:#fff!important;
}

.s-button-primary *,
button[type="submit"] *{
  color:#fff!important;
}

.s-button-primary:hover,
button[type="submit"]:hover{
  background:var(--w-gold)!important;
  border-color:var(--w-gold)!important;
  color:var(--w-maroon)!important;
}

.s-button-primary:hover *,
button[type="submit"]:hover *{
  color:var(--w-maroon)!important;
}

/* ==============================
   PRODUCT CARDS
================================= */

.s-product-card-entry{
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(197,161,90,.35)!important;
  background:#fffaf0!important;
  box-shadow:var(--w-shadow)!important;
  margin-inline:auto!important;
}

.s-product-card-image{
  background:linear-gradient(145deg,#f6f0e4,#efe5d4)!important;
}

.s-product-card-image img{
  object-fit:contain!important;
  padding:8px!important;
}

.s-product-card-content{
  padding:14px!important;
  text-align:center!important;
}

.s-product-card-content-title,
.s-product-card-content-title a{
  color:var(--w-maroon)!important;
  font-weight:800!important;
  line-height:1.45!important;
  text-align:center!important;
}

.s-product-card-content-subtitle{
  color:var(--w-gray)!important;
  font-size:13px!important;
  line-height:1.7!important;
  text-align:center!important;
}

.s-product-card-price{
  color:var(--w-maroon)!important;
  font-size:18px!important;
  font-weight:900!important;
}

.s-product-card-price-before{
  color:rgba(43,34,30,.42)!important;
}

.s-product-card-content-footer{
  margin-top:10px!important;
}

.s-product-card-content-footer .s-button-element{
  min-height:42px!important;
  font-weight:800!important;
  background:var(--w-maroon)!important;
  border-color:var(--w-maroon)!important;
  color:#fff!important;
}

.s-product-card-content-footer .s-button-element *{
  color:#fff!important;
}

.s-product-card-actions .s-button-element{
  background:rgba(243,240,231,.94)!important;
  border-color:rgba(197,161,90,.45)!important;
  color:var(--w-maroon)!important;
}

.s-product-card-actions .s-button-element i,
.s-product-card-actions .s-button-element svg,
.s-product-card-actions .s-button-element path{
  color:var(--w-maroon)!important;
  fill:var(--w-maroon)!important;
}

/* ==============================
   PRODUCT PAGE
================================= */

.breadcrumbs,
.breadcrumbs *{
  color:var(--w-maroon)!important;
}

.md\:container > .flex,
#product-tabs,
.product-form{
  max-width:var(--w-max)!important;
  margin-inline:auto!important;
}

.details-slider,
.details-slider .swiper,
.details-slider .swiper-wrapper,
.details-slider .swiper-slide{
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fffaf0!important;
}

.details-slider img{
  object-fit:contain!important;
  background:#fffaf0!important;
}

.main-content{
  color:var(--w-dark)!important;
}

.main-content h1{
  color:var(--w-maroon)!important;
  font-weight:900!important;
  line-height:1.45!important;
}

.product-entry__sub-title{
  color:var(--w-gray)!important;
  line-height:1.8!important;
}

.short__description,
.short__description p{
  color:var(--w-dark)!important;
  line-height:1.9!important;
}

.more-details,
.link--primary,
.main-categoty a{
  color:var(--w-maroon)!important;
  font-weight:800!important;
}

.price .total-price{
  color:var(--w-maroon)!important;
  font-size:24px!important;
  font-weight:900!important;
}

.price .before-price{
  color:rgba(43,34,30,.45)!important;
}

.product-availablity strong{
  color:var(--w-olive)!important;
}

.product-available-dot{
  background:var(--w-olive)!important;
}

.wish-share .s-button-element,
.s-social-share-btn{
  background:rgba(243,240,231,.96)!important;
  border:1px solid rgba(197,161,90,.45)!important;
  color:var(--w-maroon)!important;
}

.wish-share i,
.wish-share svg,
.wish-share path{
  color:var(--w-maroon)!important;
  fill:var(--w-maroon)!important;
}

.product-form,
.product-form *{
  max-width:100%;
}

.product-form .s-button-element{
  min-height:48px!important;
  font-weight:900!important;
}

/* ==============================
   FOOTER
================================= */

.store-footer,
.store-footer__inner{
  background:var(--w-maroon)!important;
}

.store-footer .container{
  max-width:var(--w-max)!important;
}

.store-footer :is(p,span,a,li,strong,h4),
.store-footer .footer-description,
.store-footer .footer-description *,
.store-footer .copyrights,
.store-footer .copyrights *{
  color:#fff!important;
}

.store-footer h3,
.store-footer .menu-list h3{
  color:var(--w-gold)!important;
  font-weight:900!important;
}

.store-footer a:hover{
  color:var(--w-gold)!important;
}

.store-footer .footer-description,
.store-footer .footer-description *{
  line-height:1.9!important;
  font-weight:700!important;
}

.store-footer .footer-middle,
.store-footer .footer-bottom{
  border-color:rgba(243,240,231,.18)!important;
}

.store-footer .footer-social a,
.store-footer .social-links a,
.store-footer [class*="contact"] a{
  background:rgba(243,240,231,.96)!important;
  color:var(--w-maroon)!important;
  border-radius:14px!important;
  border:1px solid rgba(197,161,90,.45)!important;
}

.store-footer .footer-social i,
.store-footer .social-links i,
.store-footer [class*="contact"] i{
  color:var(--w-maroon)!important;
}

.store-footer .footer-bottom li[class*="pay-"]{
  background:#fff!important;
  border-radius:7px!important;
  padding:4px!important;
}

/* ==============================
   WHATSAPP FLOAT
================================= */

#wa-angel,
.wa-angel{
  z-index:50!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}

#wa-angel a,
.wa-angel a{
  width:52px!important;
  height:52px!important;
}

/* ==============================
   MOBILE OPTIMIZATION
================================= */

@media(max-width:768px){

  body{
    padding-bottom:78px!important;
  }

  .container,
  .md\:container,
  .mob\:container{
    width:100%!important;
    padding-inline:14px!important;
  }

  .store-header .header-inner{
    min-height:70px!important;
  }

  .store-header .header-container{
    padding-inline:10px!important;
  }

  .navbar-brand img{
    max-height:46px!important;
  }

  .header-btn{
    width:38px!important;
    height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .store-header .flex.items-stretch{
    align-items:center!important;
  }

  .bottom-header{
    height:70px!important;
  }

  .bottom-header i{
    font-size:20px!important;
  }

  .bottom-header span{
    font-size:10.5px!important;
  }

  .s-block{
    padding-inline:14px!important;
    padding-block:22px!important;
  }

  .s-block :is(h1){
    font-size:clamp(28px,8vw,40px)!important;
    text-align:center!important;
  }

  .s-block :is(h2){
    font-size:clamp(22px,6vw,30px)!important;
    text-align:center!important;
  }

  .s-block :is(p,span){
    font-size:clamp(13px,3.9vw,16px)!important;
    line-height:1.85!important;
  }

  .s-block--bundle-hero-slider,
  .s-block--bundle-cta-banner,
  .s-block--bundle-brand-story,
  .s-block--bundle-wholesale-cta,
  .s-block--bundle-subscription-cta,
  .s-block--bundle-testimonials-section{
    text-align:center!important;
  }

  .s-block--bundle-hero-slider{
    padding-inline:16px!important;
    padding-block:30px!important;
  }

  .s-block--bundle-hero-slider :is(h1,h2,h3,p,span){
    text-align:center!important;
    margin-inline:auto!important;
  }

  .s-block--bundle-hero-slider .actions{
    justify-content:center!important;
    align-items:center!important;
    gap:9px!important;
    margin-top:18px!important;
  }

  .s-block--bundle-hero-slider .actions .btn{
    min-width:128px!important;
    max-width:150px!important;
    min-height:39px!important;
    font-size:12px!important;
    padding:9px 12px!important;
  }

  .md\:container > .flex{
    align-items:center!important;
  }

  .sidebar{
    width:100%!important;
    padding-inline:0!important;
    margin-inline:auto!important;
  }

  .details-slider{
    max-width:430px!important;
    margin-inline:auto!important;
    border-radius:22px!important;
  }

  .main-content{
    width:100%!important;
    padding:18px 14px 24px!important;
    text-align:center!important;
  }

  .main-content h1,
  .product-entry__sub-title,
  .short__description,
  .short__description p,
  .main-categoty{
    text-align:center!important;
    justify-content:center!important;
  }

  .price-wrapper{
    justify-content:center!important;
    flex-wrap:wrap!important;
  }

  .product-availablity{
    justify-content:center!important;
  }

  .main-categoty{
    flex-wrap:wrap!important;
  }

  .product-form .s-button-element,
  .product-form button[type="submit"]{
    width:100%!important;
    min-height:50px!important;
    font-size:15px!important;
  }

  .s-product-card-entry{
    border-radius:20px!important;
  }

  .s-product-card-content{
    padding:12px!important;
  }

  .s-product-card-content-title a{
    font-size:14px!important;
  }

  .s-product-card-content-subtitle{
    font-size:12px!important;
  }

  .s-product-card-price{
    font-size:16px!important;
  }

  .store-footer,
  .store-footer *{
    text-align:center!important;
  }

  .store-footer .footer-middle{
    align-items:center!important;
    justify-content:center!important;
    gap:24px!important;
  }

  .store-footer .footer-profile,
  .store-footer .menu-list,
  .store-footer .footer-list{
    align-items:center!important;
    justify-content:center!important;
    margin-inline:auto!important;
  }

  .store-footer .logo-footer{
    justify-content:center!important;
  }

  .store-footer .footer-description{
    max-width:360px!important;
    margin-inline:auto!important;
  }

  .store-footer .footer-bottom{
    padding-bottom:88px!important;
  }

  .store-footer ul{
    justify-content:center!important;
  }

  #wa-angel,
  .wa-angel{
    bottom:86px!important;
    left:14px!important;
  }
}

/* Very small phones */
@media(max-width:390px){

  .container,
  .md\:container,
  .mob\:container{
    padding-inline:12px!important;
  }

  .navbar-brand img{
    max-height:42px!important;
  }

  .s-block{
    padding-inline:12px!important;
  }

  .s-block--bundle-hero-slider .actions{
    gap:8px!important;
  }

  .s-block--bundle-hero-slider .actions .btn{
    min-width:122px!important;
    max-width:142px!important;
    font-size:12px!important;
    padding-inline:10px!important;
  }

  .bottom-header span{
    font-size:10px!important;
  }

  .bottom-header i{
    font-size:19px!important;
  }

  .price .total-price{
    font-size:22px!important;
  }
}

/* Desktop polish */
@media(min-width:769px){

  .store-footer .footer-middle{
    justify-content:space-between!important;
    align-items:flex-start!important;
  }

  .main-content{
    padding-inline:24px!important;
  }

  .details-slider{
    box-shadow:var(--w-shadow)!important;
  }
}
/* ==============================
   Footer Social Icons - Visible Fix
================================= */

.store-footer .footer-social,
.store-footer .footer-social *,
.store-footer .social-links,
.store-footer .social-links *,
.store-footer salla-social,
.store-footer salla-social *{
  opacity:1 !important;
  filter:none !important;
}

/* ترتيب أيقونات السوشيال */
.store-footer .social-links,
.store-footer .s-social-list{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:12px auto 0 !important;
  padding:0 !important;
}

/* زر الأيقونة */
.store-footer .s-social-link a,
.store-footer .footer-social a,
.store-footer .social-links a{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#C5A15A !important;
  border:1px solid rgba(243,240,231,.35) !important;
  border-radius:50% !important;
  color:#5A1E2C !important;
  opacity:1 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
}

/* SVG داخل الأيقونة */
.store-footer .s-social-link svg,
.store-footer .s-social-link svg path,
.store-footer .s-social-icon svg,
.store-footer .s-social-icon svg path{
  width:22px !important;
  height:22px !important;
  fill:#5A1E2C !important;
  stroke:#5A1E2C !important;
  color:#5A1E2C !important;
  opacity:1 !important;
}

/* Hover */
.store-footer .s-social-link a:hover,
.store-footer .footer-social a:hover{
  background:#F3F0E7 !important;
  border-color:#C5A15A !important;
  transform:translateY(-2px);
}

/* موبايل */
@media(max-width:768px){
  .store-footer .s-social-link a,
  .store-footer .footer-social a{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  .store-footer .s-social-link svg,
  .store-footer .s-social-link svg path{
    width:21px !important;
    height:21px !important;
  }
}
/* ==============================
   Footer Contact Icons - Visible Fix
================================= */

.store-footer .s-contacts-list,
.store-footer .s-contacts-list *{
  opacity:1 !important;
  filter:none !important;
}

/* ترتيب بيانات التواصل */
.store-footer .s-contacts-list,
.store-footer .s-contacts-list-horizontal{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:12px auto 0 !important;
  padding:0 !important;
}

/* عنصر التواصل بالكامل */
.store-footer .s-contacts-item{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  color:#F3F0E7 !important;
  text-decoration:none !important;
  opacity:1 !important;
  font-weight:700 !important;
}

/* دائرة الأيقونة */
.store-footer .s-contacts-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#C5A15A !important;
  border:1px solid rgba(243,240,231,.35) !important;
  border-radius:50% !important;
  color:#5A1E2C !important;
  opacity:1 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
}

/* SVG داخل أيقونات الواتساب والجوال */
.store-footer .s-contacts-icon svg,
.store-footer .s-contacts-icon svg path{
  width:22px !important;
  height:22px !important;
  fill:#5A1E2C !important;
  stroke:#5A1E2C !important;
  color:#5A1E2C !important;
  opacity:1 !important;
}

/* رقم الجوال */
.store-footer .s-contacts-item .unicode{
  color:#0a0a0a !important;
  opacity:1 !important;
  font-size:14px !important;
  direction:ltr !important;
  unicode-bidi:embed !important;
}

/* Hover */
.store-footer .s-contacts-item:hover .s-contacts-icon{
  background:#F3F0E7 !important;
  border-color:#C5A15A !important;
  transform:translateY(-2px);
}

/* موبايل */
@media(max-width:768px){
  .store-footer .s-contacts-list,
  .store-footer .s-contacts-list-horizontal{
    align-items:center !important;
    text-align:center !important;
  }

  .store-footer .s-contacts-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  .store-footer .s-contacts-icon svg,
  .store-footer .s-contacts-icon svg path{
    width:21px !important;
    height:21px !important;
  }

  .store-footer .s-contacts-item .unicode{
    font-size:13px !important;
  }
}

/* ========================================================
   WAREQA - GUJI STORY DESIGN / TRIAL ONLY
   Replace ONLY the previous "Full Width Product Details" CSS.
   Requires existing WAREQA CSS variables and product-tab mover.
   ======================================================== */
#wareqa-product-details-fullwidth {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: var(--w-max, 1180px);
  margin: 30px auto 70px;
  direction: rtl;
  scroll-margin-top: 100px;
}
#wareqa-product-details-fullwidth #product-tabs {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
}
#wareqa-product-details-fullwidth .tabs-wrapper__product {
  padding: 28px;
  border-radius: 18px;
  background: #fff;
  box-sizing: border-box;
}
#wareqa-product-details-fullwidth .wq-story {
  direction: rtl;
  font-family: inherit;
  color: var(--w-dark, #2b221e);
  text-align: right;
}
#wareqa-product-details-fullwidth .wq-story * { box-sizing: border-box; }
#wareqa-product-details-fullwidth .wq-story-heading {
  padding: 20px 14px 34px;
  text-align: center;
}
#wareqa-product-details-fullwidth .wq-story-eyebrow,
#wareqa-product-details-fullwidth .wq-story-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--w-olive, #6b6f3a);
}
#wareqa-product-details-fullwidth .wq-story-heading h2 {
  color: var(--w-maroon, #5a1e2c);
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.4;
  font-weight: 900;
  margin: 6px 0 10px;
}
#wareqa-product-details-fullwidth .wq-story-heading p {
  color: #605a51;
  font-size: 15px;
  line-height: 1.9;
}
#wareqa-product-details-fullwidth .wq-story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  direction: rtl;
  overflow: hidden;
  border-radius: 20px;
  background: #f7f3e9;
  margin-bottom: 22px;
  min-height: 345px;
}
#wareqa-product-details-fullwidth .wq-story-media {
  position: relative;
  isolation: isolate;
  min-height: 345px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #fff9eb;
  overflow: hidden;
}
#wareqa-product-details-fullwidth .wq-story-media--coffee {
  background:
    radial-gradient(circle at 20% 20%, rgba(199,169,113,.40), transparent 42%),
    linear-gradient(135deg, #81845a 0%, #485134 70%, #303d29 100%);
}
#wareqa-product-details-fullwidth .wq-story-media--origin {
  background:
    radial-gradient(circle at 75% 30%, rgba(234,207,143,.23), transparent 38%),
    repeating-linear-gradient(145deg, rgba(255,255,255,.025) 0 2px, transparent 2px 28px),
    linear-gradient(135deg, #72674d 0%, #4f5d41 55%, #263c34 100%);
}
#wareqa-product-details-fullwidth .wq-story-product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 40%;
  opacity: .7;
  z-index: -1;
}
#wareqa-product-details-fullwidth .wq-story-media::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgba(21,33,21,.65), transparent 67%);
}
#wareqa-product-details-fullwidth .wq-story-media-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
#wareqa-product-details-fullwidth .wq-story-media-caption span {
  font: 700 12px/1.4 sans-serif;
  letter-spacing: .14em;
}
#wareqa-product-details-fullwidth .wq-story-media-caption strong {
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.4;
  font-weight: 900;
}
#wareqa-product-details-fullwidth .wq-story-media-caption small {
  font-size: 13px;
  line-height: 1.7;
}
#wareqa-product-details-fullwidth .wq-story-copy {
  padding: clamp(25px, 4.2vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
#wareqa-product-details-fullwidth .wq-story-copy h3 {
  color: var(--w-maroon, #5a1e2c);
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.5;
  margin: 8px 0 15px;
  font-weight: 900;
}
#wareqa-product-details-fullwidth .wq-story-copy p {
  font-size: 15px;
  line-height: 2;
  color: #48433d;
  margin: 0;
}
#wareqa-product-details-fullwidth .wq-story-facts {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
#wareqa-product-details-fullwidth .wq-story-facts span {
  background: #e7e8db;
  color: #525d3e;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}
@media (min-width: 769px) {
  #wareqa-product-details-fullwidth .wq-story-row--reverse .wq-story-media { order: 2; }
  #wareqa-product-details-fullwidth .wq-story-row--reverse .wq-story-copy { order: 1; }
}
#wareqa-product-details-fullwidth .wq-story-test-note {
  border: 1px dashed #b5b4a3;
  border-radius: 10px;
  color: #71695d;
  font-size: 12px;
  line-height: 1.8;
  padding: 12px 16px;
  margin: 0 0 28px;
}
@media (max-width: 768px) {
  #wareqa-product-details-fullwidth {
    width: calc(100% - 24px);
    margin: 22px auto 48px;
    padding-bottom: 110px;
  }
  #wareqa-product-details-fullwidth .wq-story-row { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  #wareqa-product-details-fullwidth .wq-story-media { min-height: 250px; padding: 24px; }
  #wareqa-product-details-fullwidth .wq-story-copy { padding: 24px 20px 30px; }
  #wareqa-product-details-fullwidth .wq-story-copy h3 { font-size: 23px; }
  #wareqa-product-details-fullwidth .wq-story-copy p { font-size: 14px; line-height: 1.9; }
  #wareqa-product-details-fullwidth .wq-story-heading { padding: 10px 7px 24px; }
  #wareqa-product-details-fullwidth .wq-story-heading h2 { font-size: 28px; }
  #wareqa-product-details-fullwidth .tabs-wrapper__product { padding: 18px 14px; }
}
/* WAREQA - Mobile Story Refinement */

@media (max-width: 768px) {

  #wareqa-product-details-fullwidth {
    padding-bottom: 190px !important;
  }

  #wareqa-product-details-fullwidth
  .wq-story-media {
    min-height: 220px;
  }

  #wareqa-product-details-fullwidth
  .wq-story-heading h2 {
    font-size: 25px;
    line-height: 1.45;
  }

  #wareqa-product-details-fullwidth
  .wq-story-copy {
    padding: 24px 20px;
  }

}

/* =========================================================
   WAREQA | FLOATING CRYSTAL GLASS PURCHASE BAR | ALL PRODUCT PAGES
   All product detail pages in the unpublished Malak trial.
   Fixes V3 horizontal offset + opaque beige appearance.
   Native Salla purchase and quantity controls remain intact.
   ========================================================= */

/* Center with BOTH viewport edges and automatic margins.
   Avoid left:50% + translateX(-50%), and especially avoid
   the contradictory inset-inline:auto override in V3. */
body:has(form.product-form section.sticky-product-bar) section.sticky-product-bar {
  position: fixed !important;
  inset-inline: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
  translate: none !important;
  margin: 0 auto !important;
  width: calc(100vw - 44px) !important;
  max-width: 1040px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 24px !important;
  /* Cooler, lighter translucent white, rather than 90% beige. */
  background: linear-gradient(135deg,
    rgba(255,255,255,.70) 0%,
    rgba(250,251,249,.44) 46%,
    rgba(233,236,230,.48) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
  backdrop-filter: blur(20px) saturate(155%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 18px 42px rgba(43,34,30,.17),
    0 3px 10px rgba(43,34,30,.07) !important;
  color: var(--w-dark, #2B221E) !important;
  z-index: 90 !important;
  overflow: visible !important;
}

body:has(form.product-form section.sticky-product-bar)
section.sticky-product-bar > .container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Fallback for browsers without background blur. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:has(form.product-form section.sticky-product-bar) section.sticky-product-bar {
    background: rgba(255,255,255,.94) !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body:has(form.product-form section.sticky-product-bar) section.sticky-product-bar {
    background: #faf9f6 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (min-width: 769px) {
  body:has(form.product-form section.sticky-product-bar) section.sticky-product-bar {
    bottom: 20px !important;
    padding: 12px 18px !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar > .container {
    justify-content: space-between !important;
  }

  body:has(form.product-form section.sticky-product-bar) {
    padding-bottom: 124px !important;
  }

  body:has(form.product-form section.sticky-product-bar) #wa-angel,
  body:has(form.product-form section.sticky-product-bar) .wa-angel {
    bottom: 125px !important;
  }
}

@media (max-width: 768px) {
  /* This page already has navigation in the header. */
  body:has(form.product-form section.sticky-product-bar) .bottom-header {
    display: none !important;
  }

  body:has(form.product-form section.sticky-product-bar) {
    padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:has(form.product-form section.sticky-product-bar) section.sticky-product-bar {
    /* 12px clear gap on either side of the PHONE viewport. */
    width: calc(100vw - 24px) !important;
    max-width: 480px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 9px 10px !important;
    border-radius: 22px !important;
  }

  /* RTL: quantity at right, native Salla add-to-cart at left. */
  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar > .container {
    display: grid !important;
    direction: rtl !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar > .container > .mob\:hidden {
    display: none !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar .sticky-product-bar__quantity {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar .sticky-product-bar__quantity salla-quantity-input,
  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar .s-quantity-input-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar .s-quantity-input-container {
    min-height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(90,30,44,.12) !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar > .container > salla-add-product-button,
  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar .sticky-product-bar__btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar .s-button-element {
    min-height: 44px !important;
  }

  body:has(form.product-form section.sticky-product-bar) #wa-angel,
  body:has(form.product-form section.sticky-product-bar) .wa-angel {
    bottom: calc(115px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
  }

  body:has(form.product-form section.sticky-product-bar)
  #wareqa-product-details-fullwidth {
    padding-bottom: 22px !important;
  }
}

@media (max-width: 375px) {
  body:has(form.product-form section.sticky-product-bar)
  section.sticky-product-bar > .container {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}

/* WAREQA - Seamless Product Images */

#wareqa-product-details-fullwidth .wq-extra-images {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 !important;
  margin: 0 0 22px !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#wareqa-product-details-fullwidth
.wq-extra-images > * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#wareqa-product-details-fullwidth
.wq-extra-images img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#wareqa-product-details-fullwidth:
has(> .wq-extra-images)
.wq-story--from-description
.wq-story-row:last-of-type {
  margin-bottom: 0 !important;
}