/* ==========================================================
   TAQA PRODUCT SYSTEM — CLEAN ARCHITECTURE v3.18

   CASCADE LAYERS (production order preserved):
   01  TOKENS / ROUTE ROOT
   02  HERO + GALLERY + PRODUCT META
   03  VARIANTS + PRIMARY ACTIONS
   04  INLINE PRODUCT CHECKOUT
   05  DESCRIPTION + REVIEWS
   06  DETAILS NARRATIVE + EARTH
   07  RELATED PRODUCTS
   08  RESPONSIVE / PORTRAIT
   09  FINAL TARGETED OVERRIDES

   Cleanup policy:
   - selectors are NOT removed merely because they are absent from one DOM snapshot
   - media queries and cascade order are preserved
   - only declarations proven dead by a later rule with the exact same
     selector/property are removed
   ========================================================== */

/* ==========================================================
   TAQA PRODUCT SYSTEM  v1.0  —  taqa-product.css
   Scope: body.tpp (added by taqa-product.js on /products/* only)
   ========================================================== */

/* ---------- 1. TOKENS ---------- */
.tpp{--tp-bg:#F4F7F8; --tp-bg2:#E9EFF1; --tp-surface:#FAFCFC;
  --tp-ink:#09111A; --tp-mute:#4D7183;
  --tp-line:rgba(9,17,26,.14); --tp-line2:rgba(9,17,26,.06);
  --tp-o:#C06024; --tp-o2:#EA7D38;
  --tp-display:"Dune Rise","DM Sans",system-ui,sans-serif;
  --tp-ar:"Cairo",system-ui,sans-serif;
  --tp-ease:cubic-bezier(.22,.8,.2,1);}
.tpp.taqa-theme-dark{--tp-bg:#070C14; --tp-bg2:#09111A; --tp-surface:#0B141F;
  --tp-ink:#F4F7F8; --tp-mute:#8FA7B4;
  --tp-line:rgba(220,229,232,.16); --tp-line2:rgba(220,229,232,.06);}
.tpp,.tpp .app_container{background:var(--tp-bg);}

/* ---------- 2. ROOT + TECHNICAL GRID ---------- */
.tpp #product-id{position:relative; overflow-x:clip; padding-bottom:64px;
  color:var(--tp-ink); font-family:var(--tp-ar);}
.tpp #product-id::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    linear-gradient(var(--tp-line2) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,var(--tp-line2) 1px,transparent 1px) 0 0/72px 72px;
  -webkit-mask-image:linear-gradient(#000,transparent 70%);
          mask-image:linear-gradient(#000,transparent 70%);
  transition:opacity .9s var(--tp-ease);}
.tpp #product-id[data-tp="ready"]::before{opacity:1;}
.tpp .product_container{position:relative;z-index:1;}

/* ---------- 3. BREADCRUMB RAIL ---------- */
.tpp .tp-crumbs-wrap{display:block!important;padding-top:20px!important;}
.tpp .tp-crumbs{counter-reset:tpc; display:flex; flex-wrap:nowrap; align-items:center; 
  overflow:hidden; padding:8px 0;
  font:600 10.5px/1 var(--tp-display),var(--tp-ar);
   
  color:var(--tp-mute)!important;}
.tpp .tp-crumbs svg{display:none!important;}
.tpp .tp-crumbs>*{counter-increment:tpc; flex:none; white-space:nowrap; color:inherit!important; gap:8px!important;}
.tpp .tp-crumbs>*::before{color:var(--tp-o2); font-size:9px; margin-inline-end:8px;}
.tpp .tp-crumbs>a{display:flex!important;align-items:center;transition:color .25s;}
.tpp .tp-crumbs>a:hover{color:var(--tp-ink)!important;}
.tpp .tp-crumbs>a::after{content:"";   
  
  transform-origin:var(--tp-origin,left);}
.tpp .tp-crumbs>span{display:block!important;  overflow:hidden; text-overflow:ellipsis;
    letter-spacing:.02em;}

/* ---------- 4. SHARED STAGE ---------- */
.tpp .product_container{padding-top:12px!important;}
.tpp .p_content_container{position:relative;}
.tpp .p_content_container::before{content:""; position:absolute;     z-index:2;}
.tpp .p_content_container::after{content:""; position:absolute; bottom:-1px; inset-inline-end:0;   pointer-events:none;}

/* ---------- 5. GALLERY ---------- */
.tpp .p_gallery_container{position:relative;}
.tpp .p_gallery_container::before{position:absolute; top:16px; inset-inline-start:20px; z-index:2;
  font:600 9px/1 var(--tp-display); letter-spacing:.22em; color:var(--tp-mute);}
.tpp .tp-stage{position:relative;  
  display:grid; place-items:center;}
.tpp .tp-stage::before{content:""; position:absolute;  aspect-ratio:1; border-radius:50%;
  border:1px solid var(--tp-line); pointer-events:none;
  background:conic-gradient(from 210deg,transparent 0 62%,rgba(234,125,56,.5) 62% 66%,transparent 66%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 63.6%,#000 64.4%,transparent 65%);
          mask:radial-gradient(circle,transparent 63%,#000 63.6%,#000 64.4%,transparent 65%);}
.tpp .tp-stage [role="tabpanel"]{width:100%;height:100%;position:relative;}
.tpp .sphinx_product_active_img{height:100%!important;width:100%!important;border-radius:0!important;}
.tpp .sphinx_product_active_img>span{display:none!important;}
.tpp .sphinx_product_active_img img{box-sizing:border-box;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.18));}

.tpp .sphinx_product_images_grid{display:flex!important; gap:10px; counter-reset:tpth;}
.tpp .sphinx_product_images_grid>button{counter-increment:tpth; position:relative; overflow:hidden;  aspect-ratio:1;
  border:1px solid var(--tp-line);  
  transition:border-color .25s,box-shadow .25s;}
.tpp .sphinx_product_images_grid>button::after{position:absolute; inset-inline:0; bottom:0;
  padding:4px 6px; text-align:start; font:600 7px/1 var(--tp-display); letter-spacing:.1em;
  color:var(--tp-mute); background:linear-gradient(transparent,var(--tp-surface) 70%);}

.tpp .sphinx_product_images_img{outline:none!important;border-radius:0!important;height:100%;}
.tpp .sphinx_product_images_img img{object-fit:contain!important;border-radius:0!important;padding:8px 8px 18px;box-sizing:border-box;}

/* mobile native swiper */
.tpp .p_gallery_container .swiper{height:clamp(260px,72vw,400px);background:radial-gradient(circle at 50% 52%,rgba(234,125,56,.16),transparent 55%);}
.tpp .p_gallery_container .sphinx_product_img{object-fit:contain!important;width:100%;height:100%;border-radius:0!important;}

/* ---------- 6. DETAILS ---------- */
.tpp .p_details_container{margin-top:0!important;
  border-inline-start:1px solid var(--tp-line);}
.tpp .tp-kicker{display:flex; align-items:center; gap:12px; 
  font:600 10px/1 var(--tp-display);}
.tpp .tp-kicker i{flex:1; height:1px; background:linear-gradient(90deg,var(--tp-o2),transparent);}
.tpp .p_details_container .relative.flex.flex-col>a{font:600 10px/1 var(--tp-display),var(--tp-ar);}
.tpp .product_name{color:var(--tp-ink)!important; margin-bottom:10px!important;}
.tpp .tp-sub{font:700 clamp(11px,1.1vw,14px)/1 var(--tp-display);}

.tpp svg[class*="FBA30D"]{color:var(--tp-o2)!important;}
.tpp .tp-rating p{color:var(--tp-mute)!important;font-size:12px!important;}
.tpp .tp-rating p:first-of-type{color:var(--tp-ink)!important;font-weight:700;}
.tpp .fake_visitors_container{font:600 10px/1 var(--tp-display),var(--tp-ar);  color:var(--tp-mute)!important;}
.tpp .tp-price{border-block:1px solid var(--tp-line);}
.tpp .product_price{font-weight:700; color:var(--tp-ink)!important; margin:0!important;}
.tpp .product_price span,.tpp .product_price span span{font-family:var(--tp-ar); font-size:.34em!important; color:var(--tp-o2)!important; font-weight:700;}

/* ---------- 7. VARIANTS ---------- */
.tpp .variation_name{font:600 11px/1 var(--tp-display),var(--tp-ar)!important;}
.tpp .variation_name::before{color:var(--tp-o2);}
.tpp .button_variations_container{counter-reset:tpv; gap:10px!important;}
.tpp .button_variation,.tpp .color_variation{counter-increment:tpv;  
   color:var(--tp-ink)!important;
  border:1px solid var(--tp-line)!important; font-family:var(--tp-ar); font-weight:700; font-size:13px;
  transition:border-color .25s,background .25s,color .25s;}
.tpp .button_variation::before,.tpp .color_variation::before{margin-inline-end:10px;
  font:600 9px/1 var(--tp-display); letter-spacing:.1em; color:var(--tp-mute);}
.tpp .button_variation:hover,.tpp .color_variation:hover{border-color:var(--tp-o2)!important;}

.tpp .button_variation_checked::before,.tpp .button_variation[aria-checked="true"]::before,
.tpp .color_variation_checked::before,.tpp .color_variation[aria-checked="true"]::before{color:#fff;}

/* ---------- 8. QUANTITY ---------- */
.tpp div.justify-center.items-center.gap-3.border.rounded-full{padding:6px 10px!important; gap:6px!important;
   border:1px solid var(--tp-line)!important; color:var(--tp-ink);}
.tpp div.justify-center.items-center.gap-3.border.rounded-full::before{font:600 8px/1 var(--tp-display); letter-spacing:.18em; color:var(--tp-mute); margin-inline-end:4px;}
.tpp div.justify-center.items-center.gap-3.border.rounded-full button{margin:0!important; width:34px; height:34px; display:grid; place-items:center;
  border-radius:7px!important; background:var(--tp-bg2)!important; color:var(--tp-ink)!important;
  border:1px solid var(--tp-line); transition:border-color .2s,background .2s;}
.tpp div.justify-center.items-center.gap-3.border.rounded-full button:not(:disabled):hover{border-color:var(--tp-o2);}
.tpp div.justify-center.items-center.gap-3.border.rounded-full button:disabled{opacity:.4;}
.tpp div.justify-center.items-center.gap-3.border.rounded-full p{font:700 14px/1 var(--tp-display); width:32px!important; color:var(--tp-ink);}

/* ---------- 9. TUBE BUTTONS ---------- */
.tpp .tp-actions{margin-top:20px!important;}
.tpp .tp-actions .flex-row-reverse{margin-top:0!important; gap:10px!important; align-items:stretch;}
.tpp .checkout_btn, .tpp .add_to_cart_btn{position:relative; overflow:hidden; isolation:isolate; min-height:54px;
  border-radius:999px!important; font-family:var(--tp-ar); font-weight:800!important; font-size:15px;
  letter-spacing:.02em; transition:box-shadow .3s,border-color .3s,background .3s,color .3s;}
.tpp .checkout_btn{color:#fff!important; border:1px solid rgba(255,196,150,.55)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 46%,rgba(0,0,0,.16) 100%),
    linear-gradient(90deg,#B4531C,#EA7D38 50%,#B4531C)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px -10px rgba(234,125,56,.75);}
.tpp .checkout_btn::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--tp-ease);}
.tpp .checkout_btn:hover::after{transform:translateX(120%);}
.tpp .checkout_btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -8px rgba(234,125,56,.9);}
.tpp .checkout_btn:active{filter:brightness(.94);}
.tpp .add_to_cart_btn{flex:1;  color:var(--tp-ink)!important;
  border:1px solid var(--tp-o2)!important;}
.tpp .add_to_cart_btn:hover{box-shadow:inset 0 0 14px rgba(234,125,56,.25);}

/* ---------- 11. DESCRIPTION / REVIEWS ---------- */
.tpp .product_tabs_elegance_container{padding-inline:0!important;}
.tpp .product_tabs_elegance_container [role="tablist"]{counter-reset:tpt; background:transparent!important; border-radius:0!important; padding:0!important;
  gap:32px!important; border-bottom:1px solid var(--tp-line);}
.tpp .product_tabs_elegance_container [role="tab"]{counter-increment:tpt; background:transparent!important; box-shadow:none!important; border-radius:0!important;
  padding:14px 0!important; border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--tp-mute)!important; font-family:var(--tp-ar); font-weight:700;
  transition:color .25s,border-color .25s;}
.tpp .product_tabs_elegance_container [role="tab"]::before{font:600 10px/1 var(--tp-display); color:var(--tp-o2); letter-spacing:.1em;}
.tpp .product_tabs_elegance_container [role="tab"][aria-selected="true"]{color:var(--tp-ink)!important; border-bottom-color:var(--tp-o2);}
.tpp .product_tabs_elegance_container [role="tabpanel"]{background:transparent!important; color:var(--tp-ink);}
.tpp .product_description::before{display:block;}
.tpp .product_description .ql-editor{max-width:72ch; padding-inline:0; color:var(--tp-ink);}
.tpp .product_description h2{font-size:clamp(24px,3vw,40px); font-weight:800; line-height:1.3; margin-bottom:18px;}
.tpp .product_description h3{font-size:14px; font-weight:800; margin:28px 0 10px; color:var(--tp-mute);
  padding-inline-start:12px; border-inline-start:2px solid var(--tp-o2);}
.tpp .product_description p,.tpp .product_description li{color:var(--tp-ink); opacity:.88; line-height:2;}
.tpp .product_description ul{list-style:none; padding:0;}
.tpp .product_description li{position:relative; padding-inline-start:20px;}
.tpp .product_description li::before{content:""; position:absolute; inset-inline-start:0; top:1em; width:7px; height:7px; background:var(--tp-o2);}

/* FAQ */
.tpp .szh-accordion__item{background:var(--tp-surface)!important; border:1px solid var(--tp-line)!important;
  border-radius:6px!important; margin-bottom:10px; color:var(--tp-ink)!important;}
.tpp .szh-accordion__item-btn{color:var(--tp-ink)!important; background:transparent!important; font-family:var(--tp-ar); font-weight:700;}
.tpp .szh-accordion__item-panel{color:var(--tp-mute)!important;}

/* ---------- 12. RELATED PRODUCTS ---------- */
.tpp .home_section_top_container>span{font:600 10px/1 var(--tp-display);  color:var(--tp-o2)!important;}
.tpp .home_section_top_title{font-family:var(--tp-ar); color:var(--tp-ink)!important;}
.tpp .home_section_top_title svg{display:none;}
.tpp .home_slider_container .group{background:var(--tp-surface)!important; border:1px solid var(--tp-line); border-radius:6px!important;
  padding-bottom:18px; transition:transform .35s var(--tp-ease),border-color .3s;}
.tpp .home_slider_container .group::before{content:""; position:absolute; top:0; inset-inline:0; height:2px; z-index:2;
  background:linear-gradient(90deg,var(--tp-o),var(--tp-o2),transparent);
  transform:scaleX(.22); transform-origin:var(--tp-origin,left); transition:transform .5s var(--tp-ease);}
.tpp .home_slider_container .group:hover{border-color:rgba(234,125,56,.5);}
.tpp .home_slider_container .group:hover::before{transform:scaleX(1);}
.tpp .home_slider_container .group[data-tp-n]::after{content:"N° " attr(data-tp-n); position:absolute; top:10px; inset-inline-start:12px; z-index:3;
  font:600 9px/1 var(--tp-display); letter-spacing:.16em; color:var(--tp-mute);}
.tpp .home_slider_container .group>.flex.relative>div:first-child{background:radial-gradient(circle at 50% 60%,rgba(234,125,56,.14),transparent 62%),var(--tp-bg2);
  border-radius:0!important; width:100%;}
.tpp .home_slider_container .group img{object-fit:contain!important; border-radius:0!important; padding:8%; box-sizing:border-box;}
.tpp .home_slider_container .group .text-xs,.tpp .home_slider_container .group .md\:text-base{font:600 9px/1 var(--tp-display),var(--tp-ar)!important; letter-spacing:.18em; color:var(--tp-mute)!important; text-transform:uppercase;}
.tpp .home_slider_container .group h3{font-family:var(--tp-ar); font-size:clamp(14px,1.2vw,17px)!important; font-weight:700; color:var(--tp-ink)!important;}
.tpp .home_slider_container .group .font-bold span,.tpp .home_slider_container .group .text-heading.font-bold span{color:var(--tp-o2)!important;}
.tpp .home_slider_container .group .rounded-full{background:var(--tp-surface)!important; border:1px solid var(--tp-line);}
.tpp .home_slider_container .group .rounded-full svg{color:var(--tp-ink)!important;}

/* ---------- 13. REVEAL / INTRO ---------- */
.tpp #product-id:not([data-tp="ready"]) .tp-r{opacity:0;}
.tpp .tp-r{--tp-x:var(--tp-nx,24px);}
.tpp .p_gallery_container.tp-r{--tp-x:var(--tp-sx,-24px);}
.tpp #product-id[data-tp="ready"] .tp-r{animation:tpIn .6s var(--tp-ease) backwards;
  animation-delay:calc(var(--tp-i,0)*70ms);}
.tpp #product-id[data-tp="ready"] .tp-title{animation-name:tpTitle;}
.tpp #product-id[data-tp="ready"] .tp-crumbs>a::after{animation:tpDraw .55s var(--tp-ease) backwards; animation-delay:calc(var(--i,0)*140ms);}
.tpp #product-id[data-tp="ready"] .tp-actions .checkout_btn{animation:tpPower .9s ease-out backwards; animation-delay:calc(var(--tp-i,0)*70ms + 350ms);}
.tpp #product-id[data-tp-skip] *,.tpp #product-id[data-tp-skip] *::after{animation:none!important;}

.tpp .tp-s{transition:opacity .6s var(--tp-ease),transform .6s var(--tp-ease);}
.tpp .tp-s:not(.tp-in){opacity:0; transform:translateY(16px);}

@keyframes tpIn{from{opacity:0;transform:translate3d(var(--tp-x,0),10px,0)}}
@keyframes tpTitle{from{opacity:0;transform:translateY(8px);clip-path:inset(0 0 100% 0)}}
@keyframes tpDraw{from{transform:scaleX(0)}}
@keyframes tpPower{0%{filter:brightness(.55) saturate(.3)}60%{filter:brightness(1.25) saturate(1.1)}100%{filter:none}}

@media (prefers-reduced-motion:reduce){
  .tpp #product-id *,.tpp #product-id *::after,.tpp .tp-s{animation:none!important;transition-duration:.01ms!important}
  .tpp .tp-s:not(.tp-in){opacity:1;transform:none}
}

/* ---------- 14. MOBILE / PORTRAIT ---------- */
@media (max-width:1023px){
  .tpp .p_content_container{display:block!important;border-inline:0}
  .tpp .p_content_container::after{display:none}
  .tpp .p_gallery_container{padding:14px 14px 6px; position:relative!important; top:auto!important}
  .tpp .tp-stage{height:clamp(260px,72vw,400px)}
  .tpp .p_details_container{
    padding:20px 16px 26px!important; border-inline-start:0; border-top:1px solid var(--tp-line);
    position:relative!important; top:auto!important;
  }
  .tpp .tp-crumbs{font-size:9.5px}
  .tpp .tp-crumbs>span{max-width:20ch}
  .tpp .product_name{font-size:clamp(24px,7vw,32px)!important}
  .tpp .p_details_container .relative.flex.flex-col>p{max-width:none}
  .tpp .checkout_btn, .tpp .add_to_cart_btn{min-height:56px}
  
  .tpp .sphinx_product_images_grid>button{width:64px}
}

/* ==========================================================
   TAQA PRODUCT SYSTEM v2 — EDITORIAL PRODUCT LAUNCH
   70% editorial / 20% industrial / 10% technical UI.
   ========================================================== */

.tpp{--tp-radius-xl:34px;
  --tp-radius-lg:24px;
  --tp-radius-md:16px;}

/* Cinematic breadcrumb, without dashboard numbering overload */
.tpp .tp-crumbs{gap:10px!important;
  font-family:"DM Sans",var(--tp-ar)!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
  text-transform:none!important;}
.tpp .tp-crumbs>*::before{content:""!important;display:none!important;}
.tpp .tp-crumbs>a{position:relative;
  color:var(--tp-mute)!important;}
.tpp .tp-crumbs>a::before{content:"";
  display:block!important;
  width:4px;height:4px;
  margin-inline-end:7px;
  border-radius:50%;
  background:var(--tp-o2);
  box-shadow:0 0 0 4px rgba(234,125,56,.07);}
.tpp .tp-crumbs>a::after{width:clamp(28px,4vw,54px)!important;
  height:1px!important;
  margin-inline:10px!important;
  background:linear-gradient(90deg,var(--tp-line),var(--tp-o2),var(--tp-line))!important;
  opacity:.72;}
.tpp .tp-crumbs>span{max-width:34ch!important;
  color:var(--tp-ink)!important;
  font-family:var(--tp-ar)!important;
  font-size:11px!important;}

/* Main editorial product composition */
.tpp .product_container{width:min(1540px,calc(100% - clamp(28px,5vw,86px)))!important;
  max-width:1540px!important;
  margin-inline:auto!important;}
.tpp .p_content_container{display:grid!important;
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr)!important;
  align-items:center!important;
  gap:clamp(36px,5vw,84px)!important;
  padding:clamp(26px,3vw,48px)!important;
  border:0!important;
  border-radius:var(--tp-radius-xl)!important;
  background:
    radial-gradient(circle at 14% 18%,rgba(234,125,56,.07),transparent 32%),
    linear-gradient(145deg,var(--tp-surface),var(--tp-bg2))!important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.10),
    inset 0 0 0 1px var(--tp-line);
  overflow:hidden;}
.tpp .p_content_container::before{width:180px!important;height:1px!important;
  top:26px!important;inset-inline-start:30px!important;
  background:linear-gradient(90deg,var(--tp-o2),transparent)!important;}
.tpp .p_content_container::after{width:120px!important;height:120px!important;
  opacity:.24!important;
  border-bottom:1px solid var(--tp-o2)!important;
  border-inline-end:1px solid var(--tp-o2)!important;}

/* Gallery = hero object, not system viewport */
.tpp .p_gallery_container{padding:0!important;}
.tpp .p_gallery_container::before{content:""!important;display:none!important;}
.tpp .tp-stage{height:clamp(430px,54vh,620px)!important;
  min-height:0!important;
  border:0!important;
  border-radius:var(--tp-radius-lg)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(234,125,56,.14),transparent 31%),
    radial-gradient(circle at 50% 58%,rgba(77,113,131,.12),transparent 58%)!important;
  overflow:hidden;}
.tpp .tp-stage::before{width:min(72%,420px)!important;
  border-color:rgba(234,125,56,.18)!important;
  opacity:.6;}
.tpp .sphinx_product_active_img{background:transparent!important;}
.tpp .sphinx_product_active_img img{padding:clamp(18px,3vw,44px)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:
    0 18px 55px rgba(17,30,39,.12),
    inset 0 0 0 1px rgba(77,113,131,.08);
  object-fit:contain!important;}
.tpp.taqa-theme-dark .sphinx_product_active_img img{background:#F6F7F7!important;}

.tpp .tp-rail{margin-top:16px!important;}
.tpp .sphinx_product_images_grid{flex-wrap:nowrap!important;
  overflow-x:auto;
  scrollbar-width:none;}
.tpp .sphinx_product_images_grid::-webkit-scrollbar{display:none;}
.tpp .sphinx_product_images_grid>button{width:70px!important;flex:0 0 70px;
  border-radius:14px!important;
  border-color:var(--tp-line)!important;
  background:transparent!important;}
.tpp .sphinx_product_images_grid>button::after{content:""!important;display:none!important;}
.tpp .sphinx_product_images_grid>button[aria-selected="true"]{border-color:var(--tp-o2)!important;
  box-shadow:inset 0 -2px 0 var(--tp-o2)!important;}

/* Product copy: Dune only as a single editorial accent */
.tpp .p_details_container{min-width:0;
  padding:clamp(10px,1.3vw,20px)!important;
  border:0!important;}
.tpp .tp-kicker{margin-bottom:16px!important;
  font-family:"DM Sans",var(--tp-ar)!important;
  font-size:9px!important;
  letter-spacing:.14em!important;
  color:var(--tp-mute)!important;}
.tpp .tp-kicker span{white-space:nowrap;}
.tpp .tp-kicker i{max-width:88px!important;}

.tpp .p_details_container .relative.flex.flex-col>a{margin-bottom:10px!important;
  font-family:"DM Sans",var(--tp-ar)!important;
  letter-spacing:.05em!important;
  text-transform:none!important;
  color:var(--tp-o2)!important;}

.tpp .product_name{width:min(100%,720px)!important;
  max-width:720px!important;
  margin:0 0 12px!important;
  font-family:var(--tp-ar)!important;
  font-size:clamp(34px,3.2vw,58px)!important;
  line-height:1.18!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-wrap:balance;}

.tpp .tp-sub{position:absolute;
  z-index:0;
  inset-inline-end:-2%;
  top:6%;
  margin:0!important;
  pointer-events:none;
  user-select:none;
  font-family:var(--tp-display)!important;
  font-size:clamp(72px,8.7vw,158px)!important;
  line-height:.75!important;
  letter-spacing:.05em!important;
  color:var(--tp-ink)!important;
  -webkit-text-stroke:0!important;
  opacity:.035;
  white-space:nowrap;}
.tpp .p_details_container .relative.flex.flex-col>p{position:relative;z-index:2;
  max-width:58ch!important;
  margin-bottom:18px!important;
  color:var(--tp-mute)!important;
  font-size:14px!important;
  line-height:1.9!important;}

.tpp .tp-rating,.tpp .fake_visitors_container{position:relative;z-index:2;}
.tpp .fake_visitors_container{border:1px solid var(--tp-line)!important;
  border-radius:999px!important;
  padding-inline:12px!important;
  letter-spacing:0!important;
  font-family:var(--tp-ar)!important;
  background:transparent!important;}

/* Editorial price */
.tpp .tp-price{padding:16px 0 18px!important;
  margin-block:4px 18px!important;
  border-top:1px solid var(--tp-line)!important;
  border-bottom:0!important;}
.tpp .product_price{font-family:"DM Sans",var(--tp-ar)!important;
  font-size:clamp(42px,4vw,72px)!important;
  letter-spacing:-.05em!important;}

/* Variants are clean chips */
.tpp .variation_name{font-family:var(--tp-ar)!important;
  font-size:12px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--tp-ink)!important;}
.tpp .variation_name::before{content:""!important;display:none!important;}
.tpp .button_variation,.tpp .color_variation{border-radius:12px!important;
  padding:10px 12px!important;
  background:transparent!important;}
.tpp .button_variation::before,.tpp .color_variation::before{content:""!important;display:none!important;}
.tpp .button_variation_checked,.tpp .color_variation_checked,
.tpp .button_variation[aria-checked="true"],.tpp .color_variation[aria-checked="true"]{color:var(--tp-ink)!important;
  background:rgba(234,125,56,.08)!important;
  border-color:var(--tp-o2)!important;
  box-shadow:0 0 0 3px rgba(234,125,56,.06);}

/* Restrained quantity */
.tpp div.justify-center.items-center.gap-3.border.rounded-full::before{content:""!important;display:none!important;}
.tpp div.justify-center.items-center.gap-3.border.rounded-full{border-radius:14px!important;
  background:transparent!important;}

/* Tube only for the primary action */

.tpp .add_to_cart_btn{min-height:54px!important;
  border-radius:999px!important;
  border-color:var(--tp-line)!important;
  background:transparent!important;
  box-shadow:none!important;}
.tpp .add_to_cart_btn:hover{border-color:var(--tp-o2)!important;
  background:rgba(234,125,56,.06)!important;}

@keyframes tpOrderVeil{from{opacity:0}}







/* Description/reviews editorial */
.tpp .product_tabs_elegance_container{margin-top:clamp(58px,7vw,110px)!important;}
.tpp .product_tabs_elegance_container [role="tab"]::before{content:""!important;display:none!important;}
.tpp .product_description::before{content:"DETAILS"!important;
  margin-bottom:20px!important;
  font:400 clamp(38px,5vw,82px)/.9 var(--tp-display)!important;
  letter-spacing:.06em!important;
  color:var(--tp-ink)!important;
  opacity:.09;}
.tpp .home_section_top_container>span{font-family:"DM Sans",var(--tp-ar)!important;
  letter-spacing:.08em!important;}

/* Responsive */
@media(max-width:1023px){
  .tpp .product_container{width:100%!important}
  .tpp .p_content_container{
    display:block!important;
    padding:12px!important;
    border-radius:22px!important;
  }
  .tpp .tp-sub{
    top:4%;inset-inline-end:3%;
    font-size:clamp(54px,20vw,96px)!important;
  }
  .tpp .product_name{
    font-size:clamp(28px,8vw,38px)!important;
  }
  
  
  
  
}
@media(max-width:599px){
  .tpp .tp-crumbs{overflow:auto!important;scrollbar-width:none}
  .tpp .tp-crumbs::-webkit-scrollbar{display:none}
  .tpp .tp-crumbs>a::after{width:24px!important;margin-inline:7px!important}
  .tpp .tp-stage{height:clamp(300px,86vw,380px)!important}
}
@media(prefers-reduced-motion:reduce){
  
}

/* ==========================================================
   V3 — RIGHT 1:1 GALLERY + LEFT PRODUCT INFO + INLINE ORDER FORM
   ========================================================== */

@media (min-width:1024px){

  /* Gallery on RIGHT, information on LEFT regardless of DOM order. */
  .tpp .p_content_container{
    grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr)!important;
    grid-template-areas:"details gallery"!important;
    gap:clamp(34px,4.5vw,74px)!important;
    align-items:start!important;
  }

  .tpp .p_details_container{
    grid-area:details!important;
    align-self:start!important;
    padding:clamp(12px,1.3vw,22px)!important;
  }

  .tpp .p_gallery_container{
    grid-area:gallery!important;
    align-self:start!important;
    width:100%!important;
    min-width:0!important;
  }

  /* Exact square visual stage. */
  .tpp .tp-stage{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    min-height:0!important;
    max-height:none!important;
    display:grid!important;
    place-items:center!important;
    border-radius:24px!important;
    overflow:hidden!important;
  }

  .tpp .sphinx_product_active_img{
    width:100%!important;
    height:100%!important;
  }

  .tpp .sphinx_product_active_img img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    padding:clamp(26px,3vw,52px)!important;
  }

  /* Thumbnails stay directly beneath the square. */
  .tpp .tp-rail{
    width:100%;
    margin-top:12px!important;
  }

  /* Product title gets comfortable width and no forced stacking. */
  .tpp .product_name{
    width:100%!important;
    max-width:680px!important;
    font-size:clamp(34px,3vw,54px)!important;
    line-height:1.15!important;
    text-wrap:pretty!important;
  }

  }

@media (max-width:1023px){
  

  

  

  
}

/* ==========================================================
   V3.1 — RTL COLUMN ORDER FIX + LIVE VIEWERS CONTRAST
   ========================================================== */

@media (min-width:1024px){

  /* EasyOrders page is RTL. Force the layout canvas itself to LTR so
     column 1 is physically LEFT and column 2 is physically RIGHT. */
  .tpp .p_content_container{
    direction:ltr!important;
    grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr)!important;
    grid-template-areas:none!important;
  }

  /* LEFT: product information + purchase form */
  .tpp .p_details_container{
    grid-column:1!important;
    grid-row:1!important;
    direction:rtl!important;
  }

  /* RIGHT: 1:1 product gallery */
  .tpp .p_gallery_container{
    grid-column:2!important;
    grid-row:1!important;
    direction:rtl!important;
  }
}

/* Native EasyOrders hard-codes this line as text-[#010101].
   Override it so it follows the current Light/Dark theme. */
.tpp .fake_visitors_container,
.tpp .fake_visitors_container p,
.tpp .fake_visitors_container .text-sm,
.tpp .fake_visitors_container svg{color:var(--tp-ink)!important;}

.tpp .fake_visitors_container svg :is(path,circle,line,polyline){stroke:currentColor!important;}

/* Extra guard for the exact native class currently used by EasyOrders. */
.tpp p.text-sm.text-\[\#010101\]{color:var(--tp-ink)!important;}



/* ==========================================================
   V3.2 — NATIVE EASYORDERS ORDER FORM
   Intentionally NO CSS selectors in this file target the
   purchase/order form. It is left 100% native for the next
   dedicated form CSS + JS module.
   ========================================================== */

/* ==========================================================
   V3.3 — PRIMARY BUY CTA
   LIGHT = editorial architectural button (NO tube)
   DARK  = illuminated TAQA tube only
   ========================================================== */

.tpp .checkout_btn{font-family:var(--tp-ar)!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  transform:none!important;
  transition:
    transform .24s var(--tp-ease),
    border-color .24s ease,
    background-color .24s ease,
    color .24s ease,
    box-shadow .28s ease!important;}

/* Remove the old orange primary treatment first. */
.tpp .checkout_btn::after{content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;}

/* LIGHT — premium architectural plate, not a tube */


.tpp.taqa-theme-light .checkout_btn::before{content:"";
  position:absolute;
  z-index:-1;
  inset:auto 18px 8px 18px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--tp-o2),transparent);
  transform:scaleX(.28);
  opacity:.72;
  transition:transform .38s var(--tp-ease),opacity .25s ease;}

.tpp.taqa-theme-light .checkout_btn::after{background:
    linear-gradient(100deg,transparent 0 42%,rgba(255,255,255,.10) 50%,transparent 58%)!important;
  transform:translateX(-125%)!important;
  transition:transform .70s var(--tp-ease)!important;}

@media(hover:hover) and (pointer:fine){
  .tpp.taqa-theme-light .checkout_btn:hover{
    transform:translateY(-2px)!important;
    border-color:#09111A!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0)),
      #111C27!important;
    box-shadow:
      0 16px 34px rgba(9,17,26,.18),
      inset 0 1px 0 rgba(255,255,255,.08)!important;
  }

  .tpp.taqa-theme-light .checkout_btn:hover::before{
    transform:scaleX(1);
    opacity:1;
  }

  .tpp.taqa-theme-light .checkout_btn:hover::after{
    transform:translateX(125%)!important;
  }
}

.tpp.taqa-theme-light .checkout_btn:active{transform:translateY(0)!important;
  box-shadow:
    0 7px 18px rgba(9,17,26,.13),
    inset 0 1px 0 rgba(255,255,255,.05)!important;}

/* DARK — approved illuminated tube only */
.tpp.taqa-theme-dark .checkout_btn{background-color:#F5E7D5!important;
  background-image:
    url("https://pub-32d6149bfc2f4b49a4958b7336831069.r2.dev/ON%20BUTTON.webp")!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;}

.tpp.taqa-theme-dark .checkout_btn::before{content:"";
  position:absolute;
  z-index:-1;
  inset:5px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.26),transparent 52%);
  opacity:.35;
  pointer-events:none;}

.tpp.taqa-theme-dark .checkout_btn::after{background:
    linear-gradient(100deg,transparent 28%,rgba(255,255,255,.56) 48%,transparent 68%)!important;
  transform:translateX(-130%)!important;
  transition:transform .78s var(--tp-ease)!important;}

@media(hover:hover) and (pointer:fine){
  .tpp.taqa-theme-dark .checkout_btn:hover{
    transform:translateY(-2px)!important;
    border-color:rgba(255,225,193,.72)!important;
    box-shadow:
      0 15px 34px rgba(234,125,56,.22),
      0 0 38px rgba(234,125,56,.12),
      inset 0 1px 0 rgba(255,255,255,.88)!important;
  }

  .tpp.taqa-theme-dark .checkout_btn:hover::after{
    transform:translateX(130%)!important;
  }
}

.tpp.taqa-theme-dark .checkout_btn:active{transform:translateY(0)!important;
  filter:brightness(.97)!important;}

/* LIGHT does not use the tube/power intro */
.tpp.taqa-theme-light #product-id[data-tp="ready"] .tp-actions .checkout_btn{animation:tpIn .6s var(--tp-ease) backwards!important;
  animation-delay:calc(var(--tp-i,0)*70ms)!important;}

/* DARK keeps the power-on intro */
.tpp.taqa-theme-dark #product-id[data-tp="ready"] .tp-actions .checkout_btn{animation:tpPower .9s ease-out backwards!important;
  animation-delay:calc(var(--tp-i,0)*70ms + 350ms)!important;}

/* ==========================================================
   V3.5 — HERO-STYLE BUY CTA
   Exact interaction principle from the approved Hero:
   tube is a CHILD of the button, absolutely positioned across
   the button's upper edge, with overflow visible.
   ========================================================== */

/* Actions stack: BUY first, then native ATC/quantity row. */
.tpp .tp-actions{display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  overflow:visible!important;}

.tpp .tp-actions .checkout_btn{order:1!important;}

.tpp .tp-actions .tp-atc-row{order:2!important;}

/* Base BUY pill */
.tpp .checkout_btn{position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  min-height:58px!important;
  border-radius:999px!important;
  padding-inline:24px!important;}

/* Remove old pseudo tube/shine treatments that conflict with the real image. */
.tpp .checkout_btn::before,
.tpp .checkout_btn::after{content:none!important;
  display:none!important;}

/* LIGHT: no tube at all, premium architectural CTA */
.tpp.taqa-theme-light .checkout_btn{color:#F4F7F8!important;
  border:1px solid rgba(9,17,26,.88)!important;
  background:#09111A!important;
  box-shadow:
    0 10px 26px rgba(9,17,26,.14),
    inset 0 1px 0 rgba(255,255,255,.06)!important;}

.tpp.taqa-theme-light .tp-buy-tube{display:none!important;}

/* DARK: hero-style glass/cream pill with tube overlapping its upper edge. */


/* Same hero logic:
   - image ratio preserved
   - width is relative to button, not viewport
   - image sits ON TOP of the pill edge
*/
.tpp.taqa-theme-dark .tp-buy-tube{position:absolute!important;
  
  
  
  
  
  
  
  
  user-select:none!important;}

.tpp.taqa-theme-dark .tp-buy-tube__img{position:absolute!important;
  inset:0!important;
  
  
  
  
  
  
  pointer-events:none!important;
  user-select:none!important;}

/* Keep button text visually above the tube glow/body. */


@media(hover:hover) and (pointer:fine){
  .tpp.taqa-theme-dark .checkout_btn:hover{
    transform:translateY(-2px)!important;
    border-color:rgba(240,178,125,.54)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -1px 0 rgba(20,40,63,.08),
      0 0 12px 4px rgba(255,214,125,.24),
      0 12px 26px rgba(20,40,63,.14)!important;
  }
}

/* Preserve the product-page intro, but the tube is now part of the button. */
.tpp.taqa-theme-dark #product-id[data-tp="ready"] .tp-actions .checkout_btn,
.tpp.taqa-theme-light #product-id[data-tp="ready"] .tp-actions .checkout_btn{animation:tpIn .6s var(--tp-ease) backwards!important;
  animation-delay:calc(var(--tp-i,0)*70ms)!important;}

/* Phone mirrors the Hero responsive proportion. */
@media(max-width:767px){
  .tpp.taqa-theme-dark .tp-buy-tube{
    top:-11px!important;
    width:80%!important;
    max-width:80%!important;
  }

  .tpp .checkout_btn{
    min-height:54px!important;
    padding-inline:20px!important;
  }
}

/* ==========================================================
   V3.6 — PROPORTIONAL HERO BUY CTA
   Fixes the oversized tube on wide product-page buttons.
   The button keeps full purchase width; the lamp itself is
   independently capped to hero-like physical proportions.
   ========================================================== */

.tpp.taqa-theme-dark .checkout_btn{min-height:60px!important;
  overflow:visible!important;
  border-radius:999px!important;
  color:#14283F!important;

  /* Hero-like warm glass / cream pill */
  border:1px solid rgba(232,174,88,.34)!important;
  background:
    radial-gradient(ellipse at 50% -20%,rgba(255,213,166,.20),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,233,218,.90))!important;

  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(117,76,25,.10),
    0 7px 18px rgba(0,0,0,.18),
    0 0 18px rgba(232,174,88,.16)!important;

  text-shadow:0 1px 0 rgba(255,255,255,.72)!important;}

/* The important fix:
   DO NOT size the tube as 80% of a 500-600px purchase button.
   Cap the physical tube independently. */
.tpp.taqa-theme-dark .tp-buy-tube{left:50%!important;
  top:-23px!important;

  width:clamp(190px,46%,300px)!important;
  max-width:300px!important;
  min-width:190px!important;

  aspect-ratio:1448 / 402!important;
  transform:translateX(-50%)!important;

  z-index:4!important;
  pointer-events:none!important;
  overflow:visible!important;}

/* Preserve the source image ratio exactly. */
.tpp.taqa-theme-dark .tp-buy-tube__img{width:100%!important;
  height:auto!important;
  max-width:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;}

/* Keep the native label visually clean and centered.
   The physical lamp now sits on the upper border, not through the copy. */
.tpp.taqa-theme-dark .checkout_btn{padding-top:0!important;
  padding-bottom:0!important;
  line-height:1!important;}

/* Tube glow can breathe beyond the pill without making the whole
   button look like a huge gray slab. */
@media(hover:hover) and (pointer:fine){
  .tpp.taqa-theme-dark .checkout_btn:hover{
    color:#14283F!important;
    border-color:rgba(240,178,125,.56)!important;
    background:
      radial-gradient(ellipse at 50% -20%,rgba(255,213,166,.26),transparent 50%),
      linear-gradient(180deg,#FFFDF9,#F1E2CF)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(117,76,25,.09),
      0 10px 22px rgba(0,0,0,.20),
      0 0 24px rgba(232,174,88,.23)!important;
  }
}

/* Mobile keeps the same relationship as the approved Hero:
   smaller lamp, same pill, never stretched across the CTA. */
@media(max-width:767px){
  .tpp.taqa-theme-dark .tp-buy-tube{
    top:-17px!important;
    width:clamp(150px,58%,220px)!important;
    min-width:150px!important;
    max-width:220px!important;
  }

  .tpp.taqa-theme-dark .checkout_btn{
    min-height:56px!important;
  }
}

/* ==========================================================
   V3.7 — NARROW HERO CTA + SCROLL-DRIVEN DETAILS PATH
   ========================================================== */

/* BUY CTA should be visually much narrower than ATC.
   The uploaded tube is exactly 1448 × 402. */
@media(min-width:768px){
  .tpp .tp-actions .checkout_btn{
    width:clamp(270px,58%,360px)!important;
    max-width:360px!important;
    align-self:center!important;
    margin-inline:auto!important;
  }

  .tpp.taqa-theme-dark .tp-buy-tube{
    top:-19px!important;
    width:76%!important;
    max-width:250px!important;
    min-width:190px!important;
    aspect-ratio:1448 / 402!important;
  }
}

@media(max-width:767px){
  .tpp .tp-actions .checkout_btn{
    width:min(78%,320px)!important;
    max-width:320px!important;
    align-self:center!important;
    margin-inline:auto!important;
  }

  .tpp.taqa-theme-dark .tp-buy-tube{
    top:-15px!important;
    width:76%!important;
    min-width:150px!important;
    max-width:210px!important;
    aspect-ratio:1448 / 402!important;
  }
}

/* ==========================================================
   DETAILS PATH NARRATIVE
   ========================================================== */

/* Original EasyOrders description stays in DOM for semantics/data,
   but the successful narrative view replaces its visual presentation. */
.tpp .tp-detail-source{position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;}

.tpp .tp-detail-path{width:min(1460px,100%);
  min-height:clamp(940px,110vh,1380px);
  margin:clamp(28px,4vw,58px) auto 0;
  padding:clamp(40px,5vw,76px) clamp(20px,4vw,58px);}

.tpp .tp-detail-path::before{position:absolute;
  
  
  inset-inline-end:2%;
  
  
  pointer-events:none;}

.tpp .tp-detail-path__svg{position:absolute;
  
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;}

.tpp .tp-detail-path__track,
.tpp .tp-detail-path__progress{fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;}

.tpp .tp-detail-path__track{stroke:var(--tp-line);
  stroke-width:1.3;}

.tpp .tp-detail-path__progress{stroke:url(#none);
  stroke:var(--tp-o2);
  stroke-width:2;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  filter:drop-shadow(0 0 5px rgba(234,125,56,.24));}

.tpp .tp-detail-path__cards{position:relative;
  
  min-height:clamp(900px,105vh,1320px);}

.tpp .tp-detail-beat{position:absolute;
  top:var(--tp-beat-y);
  width:min(36%,430px);
  transform:translateY(-50%);}

.tpp .tp-detail-beat[data-side="left"]{text-align:right;
  direction:rtl;}

.tpp .tp-detail-beat[data-side="right"]{text-align:right;
  direction:rtl;}





.tpp .tp-detail-beat__node{position:absolute;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid var(--tp-bg);
  background:var(--tp-muted);
  box-shadow:0 0 0 1px var(--tp-line);}

.tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__node{right:-27%;}

.tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__node{left:-27%;}

.tpp .tp-detail-beat.is-active .tp-detail-beat__node{background:var(--tp-o2);
  
  box-shadow:
    0 0 0 1px rgba(234,125,56,.42),
    0 0 18px rgba(234,125,56,.28);}

.tpp .tp-detail-beat__connector{position:absolute;
  top:calc(50% + 5px);
  height:1px;
  width:24%;
  background:linear-gradient(90deg,var(--tp-line),var(--tp-o2));
  
  
  transition:transform .48s var(--tp-ease),opacity .3s ease;}

.tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__connector{right:-24%;
  transform-origin:right;}

.tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__connector{left:-24%;
  transform-origin:left;
  background:linear-gradient(90deg,var(--tp-o2),var(--tp-line));}



.tpp .tp-detail-beat__body{padding:clamp(18px,2vw,28px);
  border:1px solid var(--tp-line);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 40%),
    color-mix(in srgb,var(--tp-surface) 76%,transparent);
  box-shadow:0 14px 36px rgba(0,0,0,.07);}

.tpp .tp-detail-beat__index{display:block;
  margin-bottom:10px;
  color:var(--tp-o2);
  font:700 9px/1 "DM Sans",sans-serif;
  letter-spacing:.16em;}

.tpp .tp-detail-beat h3{margin:0 0 12px;
  color:var(--tp-ink);
  font-family:var(--tp-ar);
  font-size:clamp(19px,1.6vw,28px);
  line-height:1.45;
  font-weight:800;}

.tpp .tp-detail-beat__content,
.tpp .tp-detail-beat__content *{color:var(--tp-mute)!important;
  font-family:var(--tp-ar)!important;
  line-height:1.95!important;}

.tpp .tp-detail-beat__content p{margin:0 0 8px!important;}

.tpp .tp-detail-beat__content ul,
.tpp .tp-detail-beat__content ol{margin:10px 0 0!important;
  padding-inline-start:20px!important;}

.tpp .tp-detail-beat__content li{margin:7px 0!important;}

.tpp .tp-detail-beat__content li::marker{color:var(--tp-o2);}

/* Mobile becomes a simpler left-side flowing path. */
@media(max-width:767px){
  .tpp .tp-detail-path{
    min-height:auto;
    padding:44px 12px 30px 36px;
    overflow:visible;
  }

  .tpp .tp-detail-path::before{
    top:4px;
    inset-inline-end:0;
    font-size:54px;
  }

  .tpp .tp-detail-path__svg{
    left:10px;
    width:54px;
    height:100%;
  }

  .tpp .tp-detail-path__cards{
    min-height:auto;
    display:flex;
    flex-direction:column;
    gap:22px;
  }

  .tpp .tp-detail-beat{
    position:relative;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%;
    opacity:.48;
    transform:translateX(16px)!important;
  }

  .tpp .tp-detail-beat.is-active{
    opacity:1;
    transform:none!important;
  }

  .tpp .tp-detail-beat__node{
    left:-31px!important;
    right:auto!important;
    top:28px;
  }

  .tpp .tp-detail-beat__connector{
    left:-19px!important;
    right:auto!important;
    top:33px;
    width:20px;
    transform-origin:left!important;
    background:linear-gradient(90deg,var(--tp-o2),var(--tp-line))!important;
  }

  .tpp .tp-detail-beat__body{
    padding:17px 16px;
    border-radius:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .tpp .tp-detail-beat{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  .tpp .tp-detail-beat__connector{
    transform:scaleX(1)!important;
  }
}

/* ==========================================================
   V3.8 — EARTH INSIDE DETAILS + TAB-SAFE NARRATIVE
   Desktop Earth artwork: 1672 × 941
   Mobile Earth artwork: 940 × 1672
   ========================================================== */

.tpp .tp-detail-path{position:relative;
  isolation:isolate;}

/* Earth is physically inside the Details narrative container. */
.tpp .tp-detail-earth{position:absolute;
  z-index:-1;
  right:-4%;
  bottom:-1%;
  width:min(72%,1050px);
  aspect-ratio:1672 / 941;

  background-image:
    url("https://pub-0316472037594f9994b9fb53c959d31a.r2.dev/%D9%83%D9%88%D9%83%D8%A8%20%D8%A7%D9%84%D8%A7%D8%B1%D8%B6.webp");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:right bottom;

  opacity:.28;
  pointer-events:none;
  user-select:none;

  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.10) 8%,rgba(0,0,0,.68) 20%,#000 34%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 7%,rgba(0,0,0,.78) 18%,#000 30%);
  -webkit-mask-composite:source-in;

  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.10) 8%,rgba(0,0,0,.68) 20%,#000 34%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 7%,rgba(0,0,0,.78) 18%,#000 30%);
  mask-composite:intersect;}

.tpp.taqa-theme-light .tp-detail-earth{opacity:.15;
  filter:saturate(.82) contrast(.96);}

.tpp .tp-detail-path__svg{z-index:0!important;}
.tpp .tp-detail-path__cards{z-index:2!important;}

/* Alternating ENTER + EXIT:
   1st from left, 2nd from right, 3rd left, etc.
   When it leaves the active viewport band, it returns out again. */
.tpp .tp-detail-beat{opacity:0!important;
  filter:blur(2px);
  transition:
    opacity .42s ease,
    transform .72s cubic-bezier(.16,1,.3,1),
    filter .42s ease!important;
  will-change:transform,opacity;}

.tpp .tp-detail-beat[data-side="left"]{transform:translate(-88px,-50%)!important;}

.tpp .tp-detail-beat[data-side="right"]{transform:translate(88px,-50%)!important;}

.tpp .tp-detail-beat.is-active{opacity:1!important;
  filter:none!important;}

.tpp .tp-detail-beat[data-side="left"].is-active,
.tpp .tp-detail-beat[data-side="right"].is-active{transform:translate(0,-50%)!important;}

.tpp .tp-detail-beat__node{opacity:.35;
  transform:scale(.72);
  transition:
    opacity .30s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .35s cubic-bezier(.16,1,.3,1)!important;}

.tpp .tp-detail-beat.is-active .tp-detail-beat__node{opacity:1;
  transform:scale(1.18);}

.tpp .tp-detail-beat__connector{opacity:.20!important;
  transform:scaleX(.18)!important;}

.tpp .tp-detail-beat.is-active .tp-detail-beat__connector{opacity:1!important;
  transform:scaleX(1)!important;}

/* Dedicated phone artwork from the About implementation. */
@media(max-width:767px){
  .tpp .tp-detail-earth{
    right:-8%;
    bottom:-2%;
    width:min(112vw,620px);
    aspect-ratio:940 / 1672;

    background-image:
      url("https://pub-0316472037594f9994b9fb53c959d31a.r2.dev/earthquakephone.webp");
    background-size:contain;
    background-position:right bottom;

    opacity:.25;

    -webkit-mask-image:
      linear-gradient(to left,#000 0 62%,rgba(0,0,0,.72) 76%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.10) 8%,#000 22%);
    -webkit-mask-composite:source-in;

    mask-image:
      linear-gradient(to left,#000 0 62%,rgba(0,0,0,.72) 76%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.10) 8%,#000 22%);
    mask-composite:intersect;
  }

  .tpp.taqa-theme-light .tp-detail-earth{
    opacity:.13;
  }

  .tpp .tp-detail-beat{
    transform:translateX(34px)!important;
  }

  .tpp .tp-detail-beat:nth-child(odd){
    transform:translateX(-34px)!important;
  }

  .tpp .tp-detail-beat.is-active,
  .tpp .tp-detail-beat:nth-child(odd).is-active{
    transform:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .tpp .tp-detail-beat{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
}

/* ==========================================================
   V3.9 — STICKY DESKTOP GALLERY + CENTERED ORANGE DETAILS
          + MOBILE DETAILS = DESKTOP COMPOSITION
   ========================================================== */

.tpp .tp-detail-path::before{content:"DETAILS"!important;
  top:clamp(10px,1.8vw,26px)!important;
  left:50%!important;
  right:auto!important;
  inset-inline:auto!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  color:var(--tp-o2)!important;
  opacity:.30!important;
  font:400 clamp(58px,8vw,138px)/.82 var(--tp-display)!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
  z-index:1!important;}

.tpp .tp-detail-path{padding-top:clamp(110px,10vw,168px)!important;}

@media(min-width:1024px){
  .tpp .p_content_container{
    position:relative!important;
    display:grid!important;
    direction:ltr!important;
    grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
      "details gallery"
      "form    gallery"!important;
    gap:clamp(20px,2.5vw,34px) clamp(34px,4.5vw,74px)!important;
    align-items:start!important;
  }

  .tpp .p_details_container{
    grid-area:details!important;
    direction:rtl!important;
    position:relative!important;
    top:auto!important;
    align-self:start!important;
  }

  .tpp .p_content_container > div:has(> .flex.flex-col > .product_form_checkout),
  .tpp .p_content_container > div:has(.product_form_checkout){
    grid-area:form!important;
    direction:rtl!important;
    min-width:0!important;
    align-self:start!important;
  }

  .tpp .p_gallery_container{
    grid-area:gallery!important;
    direction:rtl!important;
    position:sticky!important;
    top:clamp(92px,10vh,126px)!important;
    align-self:start!important;
    height:max-content!important;
    z-index:4!important;
  }

  .tpp .tp-stage{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    min-height:0!important;
    max-height:none!important;
  }
}

.tpp .tp-detail-beat[data-side="left"]{left:3%!important;
  right:auto!important;}

.tpp .tp-detail-beat[data-side="right"]{right:3%!important;
  left:auto!important;}

@media(max-width:767px){
  .tpp .tp-detail-path{
    width:100%!important;
    min-height:clamp(860px,235vw,1180px)!important;
    margin-top:22px!important;
    padding:96px 8px 26px!important;
    overflow:hidden!important;
  }

  .tpp .tp-detail-path::before{
    top:18px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    font-size:clamp(44px,14vw,66px)!important;
    opacity:.32!important;
  }

  .tpp .tp-detail-path__svg{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    overflow:visible!important;
  }

  .tpp .tp-detail-path__cards{
    position:relative!important;
    display:block!important;
    min-height:clamp(790px,220vw,1100px)!important;
  }

  .tpp .tp-detail-beat{
    position:absolute!important;
    top:var(--tp-beat-y)!important;
    width:42%!important;
    max-width:none!important;
    opacity:0!important;
    filter:blur(1px)!important;
  }

  .tpp .tp-detail-beat[data-side="left"]{
    left:1.5%!important;
    right:auto!important;
    transform:translate(-28px,-50%)!important;
    text-align:right!important;
    direction:rtl!important;
  }

  .tpp .tp-detail-beat[data-side="right"]{
    right:1.5%!important;
    left:auto!important;
    transform:translate(28px,-50%)!important;
    text-align:right!important;
    direction:rtl!important;
  }

  .tpp .tp-detail-beat[data-side="left"].is-active,
  .tpp .tp-detail-beat[data-side="right"].is-active{
    opacity:1!important;
    filter:none!important;
    transform:translate(0,-50%)!important;
  }

  .tpp .tp-detail-beat__node{
    top:50%!important;
    left:auto!important;
    right:auto!important;
  }

  .tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__node{
    right:-24%!important;
    left:auto!important;
  }

  .tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__node{
    left:-24%!important;
    right:auto!important;
  }

  .tpp .tp-detail-beat__connector{
    top:calc(50% + 5px)!important;
    width:21%!important;
  }

  .tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__connector{
    right:-21%!important;
    left:auto!important;
    transform-origin:right!important;
    background:linear-gradient(90deg,var(--tp-line),var(--tp-o2))!important;
  }

  .tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__connector{
    left:-21%!important;
    right:auto!important;
    transform-origin:left!important;
    background:linear-gradient(90deg,var(--tp-o2),var(--tp-line))!important;
  }

  .tpp .tp-detail-beat__body{
    padding:12px 11px!important;
    border-radius:14px!important;
  }

  .tpp .tp-detail-beat__index{
    margin-bottom:6px!important;
    font-size:7px!important;
  }

  .tpp .tp-detail-beat h3{
    margin-bottom:7px!important;
    font-size:clamp(12px,3.6vw,16px)!important;
    line-height:1.45!important;
  }

  .tpp .tp-detail-beat__content,
  .tpp .tp-detail-beat__content *{
    font-size:clamp(9px,2.65vw,12px)!important;
    line-height:1.75!important;
  }

  .tpp .tp-detail-beat__content ul,
  .tpp .tp-detail-beat__content ol{
    padding-inline-start:13px!important;
    margin-top:6px!important;
  }

  .tpp .tp-detail-beat__content li{
    margin:4px 0!important;
  }

  .tpp .tp-detail-earth{
    right:-18%!important;
    bottom:-4%!important;
    width:min(122vw,640px)!important;
    aspect-ratio:940 / 1672!important;
    background-position:right bottom!important;
    opacity:.22!important;
  }

  .tpp.taqa-theme-light .tp-detail-earth{
    opacity:.11!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .tpp .tp-detail-beat[data-side="left"],
  .tpp .tp-detail-beat[data-side="right"]{
    opacity:1!important;
    filter:none!important;
    transform:translate(0,-50%)!important;
  }
}

/* ==========================================================
   V3.10 — REAL DESKTOP STICKY GALLERY UNTIL DESCRIPTION
           + COMPACT PHONE DETAILS CARDS
   ========================================================== */

/* ---------- Desktop sticky gallery ---------- */
@media (min-width:1024px){

  /* Sticky needs every ancestor to allow vertical overflow. */
  .tpp #product-id,
  .tpp .product_container,
  .tpp .p_content_container{
    overflow:visible!important;
  }

  /* Keep the gallery on the RIGHT and make it physically sticky.
     It naturally stops when .product_container ends, i.e. directly
     before the Description / Reviews block. */
  .tpp .p_gallery_container{
    grid-area:gallery!important;
    position:sticky!important;
    top:clamp(96px,11vh,132px)!important;
    align-self:start!important;
    height:max-content!important;
    max-height:none!important;
    overflow:visible!important;
    z-index:5!important;
  }

  /* Important: remove native Tailwind lg:top-0 / previous overrides. */
  .tpp .p_gallery_container.lg\:sticky{
    top:clamp(96px,11vh,132px)!important;
  }

  /* Product block itself is the sticky boundary.
     Description begins immediately after this container. */
  .tpp .product_container{
    position:relative!important;
  }

  /* 1:1 stage remains fixed in visual geometry while sticky. */
  .tpp .tp-stage{
    aspect-ratio:1 / 1!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
}

/* ---------- Phone: same desktop narrative language, just much tighter ---------- */
@media (max-width:767px){

  /* Keep alternating left/right cards and center spline,
     but make each card much denser so it doesn't occupy most of the screen. */
  .tpp .tp-detail-beat{
    width:43.5%!important;
  }

  .tpp .tp-detail-beat__body{
    padding:8px 8px!important;
    border-radius:12px!important;
  }

  .tpp .tp-detail-beat__index{
    margin-bottom:4px!important;
    font-size:6px!important;
    letter-spacing:.10em!important;
  }

  .tpp .tp-detail-beat h3{
    margin:0 0 5px!important;
    font-size:clamp(10px,3vw,13px)!important;
    line-height:1.30!important;
  }

  .tpp .tp-detail-beat__content,
  .tpp .tp-detail-beat__content *{
    font-size:clamp(7.8px,2.15vw,10px)!important;
    line-height:1.48!important;
  }

  .tpp .tp-detail-beat__content p{
    margin:0 0 5px!important;
  }

  .tpp .tp-detail-beat__content ul,
  .tpp .tp-detail-beat__content ol{
    margin:4px 0 0!important;
    padding-inline-start:10px!important;
  }

  .tpp .tp-detail-beat__content li{
    margin:2px 0!important;
  }

  /* Quill inserts empty UI spans before list items; they add visual noise on phone. */
  .tpp .tp-detail-beat__content .ql-ui{
    display:none!important;
  }

  /* Slightly smaller nodes/connectors, same desktop composition. */
  .tpp .tp-detail-beat__node{
    width:8px!important;
    height:8px!important;
  }

  .tpp .tp-detail-beat__connector{
    height:1px!important;
  }

  /* Less dead vertical space between beats. */
  .tpp .tp-detail-path{
    min-height:clamp(700px,190vw,930px)!important;
    padding-top:84px!important;
  }

  .tpp .tp-detail-path__cards{
    min-height:clamp(650px,175vw,860px)!important;
  }

  .tpp .tp-detail-path::before{
    font-size:clamp(40px,12vw,56px)!important;
  }
}

/* ==========================================================
   V3.11 — RATINGS UI + DETAILS PATH SPACING / NO CLIPPING
   ========================================================== */

/* ---------- Reviews / Ratings ---------- */
.tpp .tp-reviews-panel{padding:clamp(24px,3vw,44px)!important;
  border:1px solid var(--tp-line)!important;
  border-radius:24px!important;}

.tpp .tp-reviews-panel::before{content:"RATINGS";
  position:absolute;
  top:14px;
  inset-inline-end:18px;
  font:400 clamp(34px,5vw,74px)/1 var(--tp-display);
  letter-spacing:.08em;
  color:var(--tp-ink);
  opacity:.035;
  pointer-events:none;}

.tpp .tp-reviews-panel,
.tpp .tp-reviews-panel *{box-sizing:border-box;}

.tpp .tp-reviews-panel :is(h1,h2,h3,h4,p,span,div,label){color:inherit;}

.tpp .tp-review-stars,
.tpp .tp-reviews-panel [class*="star"]{color:#F4B53F!important;}

.tpp .tp-review-meter,
.tpp .tp-reviews-panel [class*="progress"]{border-radius:999px!important;
  overflow:hidden;}

.tpp .tp-reviews-panel [class*="progress"] > *,
.tpp .tp-review-meter > *{border-radius:999px!important;}

.tpp .tp-review-button,
.tpp .tp-reviews-panel button{border-radius:999px!important;
  border:1px solid var(--tp-line)!important;
  background:transparent!important;
  color:var(--tp-ink)!important;
  min-height:44px;
  padding-inline:22px!important;
  transition:
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;}

@media(hover:hover) and (pointer:fine){
  .tpp .tp-review-button:hover,
  .tpp .tp-reviews-panel button:hover{
    border-color:var(--tp-o2)!important;
    background:rgba(234,125,56,.07)!important;
    transform:translateY(-1px);
  }
}

/* Dark */
.tpp.taqa-theme-dark .tp-reviews-panel{background:
    radial-gradient(circle at 50% 0%,rgba(234,125,56,.08),transparent 34%),
    #0A121B!important;
  border-color:rgba(130,153,168,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 18px 48px rgba(0,0,0,.14)!important;}

.tpp.taqa-theme-dark .tp-reviews-panel,
.tpp.taqa-theme-dark .tp-reviews-panel :is(h1,h2,h3,h4,p,span,div,label){color:#EEF3F5!important;}

.tpp.taqa-theme-dark .tp-reviews-panel [class*="text-gray"],
.tpp.taqa-theme-dark .tp-reviews-panel [class*="text-[#"],
.tpp.taqa-theme-dark .tp-reviews-panel [style*="color"]{color:#A8BAC4!important;}

/* Light */
.tpp.taqa-theme-light .tp-reviews-panel{background:
    radial-gradient(circle at 50% 0%,rgba(192,96,36,.055),transparent 36%),
    #F6F8F9!important;
  border-color:rgba(77,113,131,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 16px 42px rgba(46,67,80,.07)!important;}

.tpp.taqa-theme-light .tp-reviews-panel,
.tpp.taqa-theme-light .tp-reviews-panel :is(h1,h2,h3,h4,p,span,div,label){color:#0B141D!important;}

.tpp.taqa-theme-light .tp-reviews-panel [class*="text-gray"],
.tpp.taqa-theme-light .tp-reviews-panel [class*="text-[#"]{color:#607381!important;}

/* ---------- Details: no clipping ---------- */
.tpp .tp-detail-path{overflow:visible!important;
  padding-bottom:clamp(110px,10vw,170px)!important;}

.tpp .tp-detail-path__cards{overflow:visible!important;
  padding-bottom:clamp(60px,6vw,100px);}

/* Keep first/last cards away from container edges. */
.tpp .tp-detail-beat:first-child{top:max(var(--tp-beat-y),12%)!important;}

.tpp .tp-detail-beat:last-child{top:min(var(--tp-beat-y),84%)!important;}

/* Desktop: move cards farther away from the spline so they don't sit on it. */
@media(min-width:768px){
  .tpp .tp-detail-beat{
    width:min(33%,400px)!important;
  }

  .tpp .tp-detail-beat[data-side="left"]{
    left:1.5%!important;
  }

  .tpp .tp-detail-beat[data-side="right"]{
    right:1.5%!important;
  }

  .tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__node{
    right:-34%!important;
  }

  .tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__node{
    left:-34%!important;
  }

  .tpp .tp-detail-beat__connector{
    width:31%!important;
  }

  .tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__connector{
    right:-31%!important;
  }

  .tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__connector{
    left:-31%!important;
  }

  /* Ensure the final story beat has real room below it. */
  .tpp .tp-detail-path__cards{
    min-height:clamp(980px,118vh,1480px)!important;
  }
}

/* Phone: same desktop language, but better spacing and no overlap with the line. */
@media(max-width:767px){
  .tpp .tp-detail-path{
    min-height:clamp(780px,205vw,1030px)!important;
    padding:
      84px
      10px
      110px!important;
    overflow:visible!important;
  }

  .tpp .tp-detail-path__cards{
    min-height:clamp(720px,188vw,940px)!important;
    padding-bottom:90px!important;
    overflow:visible!important;
  }

  .tpp .tp-detail-beat{
    width:40%!important;
  }

  .tpp .tp-detail-beat[data-side="left"]{
    left:1%!important;
  }

  .tpp .tp-detail-beat[data-side="right"]{
    right:1%!important;
  }

  /* More distance between the card edge and spline/node. */
  .tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__node{
    right:-30%!important;
  }

  .tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__node{
    left:-30%!important;
  }

  .tpp .tp-detail-beat__connector{
    width:27%!important;
  }

  .tpp .tp-detail-beat[data-side="left"] .tp-detail-beat__connector{
    right:-27%!important;
  }

  .tpp .tp-detail-beat[data-side="right"] .tp-detail-beat__connector{
    left:-27%!important;
  }

  /* Explicit phone distribution so the third/last box never gets clipped. */
  .tpp .tp-detail-beat:nth-child(1){ top:18%!important; }
  .tpp .tp-detail-beat:nth-child(2){ top:49%!important; }
  .tpp .tp-detail-beat:nth-child(3){ top:78%!important; }
  .tpp .tp-detail-beat:nth-child(4){ top:88%!important; }

  .tpp .tp-detail-beat:last-child{
    top:min(var(--tp-beat-y),84%)!important;
  }

  .tpp .tp-reviews-panel{
    padding:20px 14px!important;
    border-radius:18px!important;
  }

  .tpp .tp-reviews-panel::before{
    font-size:42px;
    top:10px;
    inset-inline-end:12px;
  }
}

/* ==========================================================
   V3.12 — DESKTOP ONLY: STICKY EARTH FROM FIRST DETAILS SCREEN
   ========================================================== */

@media(min-width:1024px){

  /* The Earth starts with the first Details viewport and remains
     pinned while the user moves through the whole narrative section. */
  .tpp .tp-detail-earth{
    position:sticky!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;

    width:100%!important;
    height:100vh!important;
    aspect-ratio:auto!important;

    margin-top:calc(-1 * clamp(110px,10vw,168px))!important;
    margin-bottom:-100vh!important;

    background-image:
      url("https://pub-0316472037594f9994b9fb53c959d31a.r2.dev/%D9%83%D9%88%D9%83%D8%A8%20%D8%A7%D9%84%D8%A7%D8%B1%D8%B6.webp")!important;
    background-repeat:no-repeat!important;
    background-size:min(78vw,1180px) auto!important;
    background-position:right bottom!important;

    opacity:.30!important;
    z-index:0!important;
    pointer-events:none!important;
    user-select:none!important;

    /* Fade the artwork softly into the section instead of showing
       a hard rectangular image boundary. */
    -webkit-mask-image:
      linear-gradient(to left,#000 0 68%,rgba(0,0,0,.72) 80%,transparent 100%),
      linear-gradient(to bottom,rgba(0,0,0,.92) 0 72%,#000 100%)!important;
    -webkit-mask-composite:source-in!important;

    mask-image:
      linear-gradient(to left,#000 0 68%,rgba(0,0,0,.72) 80%,transparent 100%),
      linear-gradient(to bottom,rgba(0,0,0,.92) 0 72%,#000 100%)!important;
    mask-composite:intersect!important;
  }

  /* Keep path/cards above the sticky artwork. */
  .tpp .tp-detail-path__svg{
    z-index:1!important;
  }

  .tpp .tp-detail-path__cards{
    z-index:2!important;
  }

  .tpp .tp-detail-path::before{
    z-index:3!important;
  }

  /* Light theme needs a quieter Earth so text/line remain dominant. */
  .tpp.taqa-theme-light .tp-detail-earth{
    opacity:.15!important;
    filter:saturate(.82) contrast(.96)!important;
  }
}

/* ==========================================================
   V3.13 — DESKTOP FULL-BLEED EARTH + DETAILS WATERMARK
   Decorative Earth and DETAILS visually leave the narrative box
   and live on the PAGE layer behind the description/cards.
   ========================================================== */

@media(min-width:1024px){

  .tpp .tp-detail-path{
    position:relative!important;
    isolation:isolate!important;
    overflow:visible!important;
    background:transparent!important;
  }

  /* Full-bleed PAGE layer:
     still owned by the Details module, but visually escapes the
     content container and spans the viewport. */
  .tpp .tp-detail-earth{
    position:sticky!important;
    top:0!important;

    left:50%!important;
    right:auto!important;
    bottom:auto!important;

    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    aspect-ratio:auto!important;

    margin-left:-50vw!important;
    margin-right:0!important;
    margin-top:calc(-1 * clamp(110px,10vw,168px))!important;
    margin-bottom:-100vh!important;

    background-image:
      url("https://pub-0316472037594f9994b9fb53c959d31a.r2.dev/%D9%83%D9%88%D9%83%D8%A8%20%D8%A7%D9%84%D8%A7%D8%B1%D8%B6.webp")!important;
    background-repeat:no-repeat!important;
    background-size:min(88vw,1420px) auto!important;
    background-position:right bottom!important;

    opacity:.34!important;
    z-index:-2!important;
    pointer-events:none!important;
    user-select:none!important;

    -webkit-mask-image:
      linear-gradient(to left,#000 0 70%,rgba(0,0,0,.80) 80%,rgba(0,0,0,.22) 94%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 8%,#000 24% 100%)!important;
    -webkit-mask-composite:source-in!important;

    mask-image:
      linear-gradient(to left,#000 0 70%,rgba(0,0,0,.80) 80%,rgba(0,0,0,.22) 94%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 8%,#000 24% 100%)!important;
    mask-composite:intersect!important;
  }

  /* DETAILS also becomes a full-bleed page watermark behind the cards,
     not a heading trapped inside the content box. */
  .tpp .tp-detail-path::before{
    content:"DETAILS"!important;
    position:absolute!important;
    top:clamp(20px,2vw,34px)!important;
    left:50%!important;
    right:auto!important;

    width:100vw!important;
    max-width:none!important;
    margin-left:-50vw!important;

    transform:none!important;
    text-align:center!important;

    color:var(--tp-o2)!important;
    opacity:.18!important;
    font:400 clamp(88px,13vw,220px)/.78 var(--tp-display)!important;
    letter-spacing:.10em!important;
    white-space:nowrap!important;

    z-index:-1!important;
    pointer-events:none!important;
  }

  /* Narrative remains above the page artwork. */
  .tpp .tp-detail-path__svg{
    z-index:1!important;
  }

  .tpp .tp-detail-path__cards{
    z-index:2!important;
  }

  .tpp.taqa-theme-light .tp-detail-earth{
    opacity:.16!important;
    filter:saturate(.80) contrast(.96)!important;
  }

  .tpp.taqa-theme-light .tp-detail-path::before{
    opacity:.13!important;
  }
}

/* ==========================================================
   V3.14 — REAL PAGE-LAYER EARTH (DESKTOP ONLY)
   The Earth is no longer rendered inside .tp-detail-path.
   It is a root-level full-width layer, so no parent can crop
   its right side.
   ========================================================== */

@media(min-width:1024px){

  .tpp .tp-detail-earth--source-hidden{
    display:none!important;
  }

  .tpp .tp-earth-page-layer{
    position:absolute!important;
    z-index:0!important;

    left:0!important;
    right:0!important;
    width:100%!important;

    top:var(--tp-earth-start,0px)!important;
    height:var(--tp-earth-height,1200px)!important;

    pointer-events:none!important;
    user-select:none!important;
    overflow:visible!important;

    background:transparent!important;
  }

  .tpp .tp-earth-page-layer::before{
    content:"";
    position:sticky;
    display:block;

    top:0;
    width:100vw;
    height:100vh;

    margin-left:calc((100% - 100vw)/2);

    background-image:
      url("https://pub-0316472037594f9994b9fb53c959d31a.r2.dev/%D9%83%D9%88%D9%83%D8%A8%20%D8%A7%D9%84%D8%A7%D8%B1%D8%B6.webp");
    background-repeat:no-repeat;
    background-size:min(88vw,1420px) auto;
    background-position:right bottom;

    opacity:.34;

    -webkit-mask-image:
      linear-gradient(to left,#000 0 72%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.24) 95%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.24) 8%,#000 24% 100%);
    -webkit-mask-composite:source-in;

    mask-image:
      linear-gradient(to left,#000 0 72%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.24) 95%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.24) 8%,#000 24% 100%);
    mask-composite:intersect;
  }

  .tpp.taqa-theme-light .tp-earth-page-layer::before{
    opacity:.16;
    filter:saturate(.80) contrast(.96);
  }

  /* Narrative stays above the page-level earth. */
  .tpp .tp-detail-path{
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
  }

  .tpp .tp-detail-path__svg{
    z-index:2!important;
  }

  .tpp .tp-detail-path__cards{
    z-index:3!important;
  }

  .tpp .tp-detail-path::before{
    z-index:1!important;
  }
}

/* ==========================================================
   V3.15 — TRUE BODY-LEVEL EARTH + REAL RATINGS UI
   ========================================================== */

/* ---------- EARTH: DESKTOP PAGE LAYER ---------- */
@media(min-width:1024px){

  /* The old in-section Earth is disabled on desktop. */
  .tpp .tp-detail-earth,
  .tpp .tp-detail-earth--source-hidden{
    display:none!important;
  }

  /* This node lives directly under BODY. */
  body.tpp > .tp-earth-page-layer{
    position:absolute!important;
    left:0!important;
    top:var(--tp-earth-start,0px)!important;

    width:100vw!important;
    height:var(--tp-earth-height,1200px)!important;

    max-width:none!important;
    margin:0!important;
    padding:0!important;

    overflow:visible!important;
    pointer-events:none!important;
    user-select:none!important;
    z-index:1!important;
  }

  body.tpp > .tp-earth-page-layer::before{
    content:"";
    position:sticky!important;
    top:0!important;
    display:block!important;

    width:100vw!important;
    height:100vh!important;

    margin:0!important;

    background-image:
      url("https://pub-0316472037594f9994b9fb53c959d31a.r2.dev/%D9%83%D9%88%D9%83%D8%A8%20%D8%A7%D9%84%D8%A7%D8%B1%D8%B6.webp")!important;
    background-repeat:no-repeat!important;
    background-size:min(96vw,1600px) auto!important;
    background-position:right bottom!important;

    opacity:.34!important;
    pointer-events:none!important;

    -webkit-mask-image:
      linear-gradient(to left,#000 0 76%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.26) 96%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 7%,#000 22% 100%)!important;
    -webkit-mask-composite:source-in!important;

    mask-image:
      linear-gradient(to left,#000 0 76%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.26) 96%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 7%,#000 22% 100%)!important;
    mask-composite:intersect!important;
  }

  body.tpp.taqa-theme-light > .tp-earth-page-layer::before{
    opacity:.14!important;
    filter:saturate(.78) contrast(.94)!important;
  }

  /* Product tabs/narrative render above Earth. */
  body.tpp #product-id{
    position:relative!important;
    z-index:2!important;
  }

  .tpp .tp-detail-path{
    background:transparent!important;
  }
}


/* ---------- RATINGS / REVIEWS UI ---------- */

.tpp .tp-reviews-panel{width:100%!important;
  position:relative!important;
  overflow:visible!important;
  color:var(--tp-ink)!important;
  background:transparent!important;}

/* The custom summary always appears even if EasyOrders' native panel
   is visually minimal. */
.tpp .tp-ratings-ui{width:min(1100px,100%);
  margin:0 auto 28px;
  padding:clamp(22px,3vw,38px);

  border:1px solid var(--tp-line);
  border-radius:26px;

  background:
    radial-gradient(circle at 16% 0%,rgba(234,125,56,.08),transparent 30%),
    var(--tp-surface);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 50px rgba(0,0,0,.07);}

.tpp .tp-ratings-summary{display:grid;
  grid-template-columns:minmax(210px,.72fr) minmax(320px,1.28fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;}

.tpp .tp-ratings-score{display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:0;}

.tpp .tp-ratings-score__value{color:var(--tp-ink);
  font:800 clamp(62px,7vw,108px)/.82 "DM Sans",sans-serif;
  letter-spacing:-.06em;}

.tpp .tp-ratings-score__label{margin-top:8px;
  color:var(--tp-mute);
  font-family:var(--tp-ar);
  font-size:13px;}

.tpp .tp-ratings-score__stars{display:flex;
  gap:6px;
  margin-top:16px;
  color:#FFC34D;}

.tpp .tp-ratings-score__stars svg{width:28px;
  height:28px;}

.tpp .tp-ratings-score__count{margin-top:12px;
  color:var(--tp-mute);
  font-family:var(--tp-ar);
  font-size:12px;}

.tpp .tp-ratings-breakdown{display:flex;
  flex-direction:column;
  gap:13px;}

.tpp .tp-rating-row{direction:ltr;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 48px;
  align-items:center;
  gap:12px;}

.tpp .tp-rating-row__pct{color:var(--tp-mute);
  font:700 11px/1 "DM Sans",sans-serif;
  text-align:right;}

.tpp .tp-rating-row__bar{position:relative;
  display:block;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(127,148,160,.13);}

.tpp .tp-rating-row__bar i{position:absolute;
  inset:0 auto 0 0;
  width:var(--tp-rating-pct,0%);
  border-radius:inherit;
  background:linear-gradient(90deg,#D97832,#FFC34D);}

.tpp .tp-rating-row__star{display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  color:#FFC34D;
  font:700 11px/1 "DM Sans",sans-serif;}

.tpp .tp-rating-row__star svg{width:18px;
  height:18px;}

.tpp .tp-ratings-share{margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--tp-line);
  text-align:center;}

.tpp .tp-ratings-share__eyebrow{display:block;
  margin-bottom:4px;
  color:var(--tp-o2);
  font:700 9px/1 "DM Sans",sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;}

.tpp .tp-ratings-share strong{color:var(--tp-ink);
  font-family:var(--tp-ar);
  font-size:clamp(16px,1.6vw,22px);}

/* Native review actions/forms remain functional under our summary. */
.tpp .tp-reviews-panel .tp-review-button,
.tpp .tp-reviews-panel button{min-height:46px!important;
  padding-inline:24px!important;
  border:1px solid var(--tp-line)!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--tp-ink)!important;}

@media(hover:hover) and (pointer:fine){
  .tpp .tp-reviews-panel .tp-review-button:hover,
  .tpp .tp-reviews-panel button:hover{
    border-color:var(--tp-o2)!important;
    background:rgba(234,125,56,.07)!important;
  }
}

/* Dark ratings */
.tpp.taqa-theme-dark .tp-ratings-ui{background:
    radial-gradient(circle at 16% 0%,rgba(234,125,56,.10),transparent 30%),
    rgba(9,18,27,.90)!important;
  border-color:rgba(140,164,176,.18)!important;}

/* Light ratings */
.tpp.taqa-theme-light .tp-ratings-ui{background:
    radial-gradient(circle at 16% 0%,rgba(192,96,36,.06),transparent 30%),
    rgba(248,250,251,.94)!important;
  border-color:rgba(77,113,131,.16)!important;}

/* phone */
@media(max-width:767px){
  .tpp .tp-ratings-ui{
    padding:20px 14px;
    border-radius:18px;
  }

  .tpp .tp-ratings-summary{
    grid-template-columns:1fr;
    gap:24px;
  }

  .tpp .tp-ratings-score__value{
    font-size:68px;
  }

  .tpp .tp-ratings-score__stars svg{
    width:25px;
    height:25px;
  }

  .tpp .tp-rating-row{
    grid-template-columns:38px minmax(0,1fr) 42px;
    gap:9px;
  }
}

/* ==========================================================
   V3.16 — ONE EARTH ONLY + TRUE STICKY INNER LAYER
   Fixes duplicate Earth layers created by SPA rehydrate.
   ========================================================== */

@media(min-width:1024px){

  /* One tall page wrapper defines the sticky travel range. */
  body.tpp > .tp-earth-page-layer{
    position:absolute!important;
    left:0!important;
    top:var(--tp-earth-start,0px)!important;

    width:100vw!important;
    height:var(--tp-earth-height,1200px)!important;

    margin:0!important;
    padding:0!important;
    max-width:none!important;

    pointer-events:none!important;
    user-select:none!important;
    overflow:visible!important;
    z-index:1!important;
  }

  /* Real DOM child instead of sticky ::before.
     This stays pinned for the entire Details wrapper height. */
  body.tpp > .tp-earth-page-layer > .tp-earth-page-layer__sticky{
    position:sticky!important;
    top:0!important;

    display:block!important;
    width:100vw!important;
    height:100vh!important;

    margin:0!important;
    padding:0!important;

    background-image:
      url("https://pub-0316472037594f9994b9fb53c959d31a.r2.dev/%D9%83%D9%88%D9%83%D8%A8%20%D8%A7%D9%84%D8%A7%D8%B1%D8%B6.webp")!important;
    background-repeat:no-repeat!important;
    background-size:min(96vw,1600px) auto!important;
    background-position:right bottom!important;

    opacity:.34!important;

    -webkit-mask-image:
      linear-gradient(to left,#000 0 76%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.26) 96%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 7%,#000 22% 100%)!important;
    -webkit-mask-composite:source-in!important;

    mask-image:
      linear-gradient(to left,#000 0 76%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.26) 96%,transparent 100%),
      linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 7%,#000 22% 100%)!important;
    mask-composite:intersect!important;
  }

  /* Disable the obsolete pseudo-image from V3.15 so there can never
     be two visual Earths inside the same page layer. */
  body.tpp > .tp-earth-page-layer::before{
    content:none!important;
    display:none!important;
  }

  body.tpp.taqa-theme-light > .tp-earth-page-layer > .tp-earth-page-layer__sticky{
    opacity:.14!important;
    filter:saturate(.78) contrast(.94)!important;
  }

  body.tpp #product-id{
    position:relative!important;
    z-index:2!important;
  }
}

/* ==========================================================
   V3.16.1 — HEADLESSUI HIDDEN PANEL / GHOST RECTANGLE FIX
   ========================================================== */

/* EasyOrders / HeadlessUI renders the inactive tab panel as a fixed
   1px clipped placeholder. Older rating rules used !important width,
   padding and border values on that node and turned it into the
   floating rounded rectangles seen on the right side of the page.

   This guard restores the native hidden geometry no matter what older
   product-page rules exist above it.
*/
.tpp .product_tabs_elegance_container
[role="tabpanel"][style*="position: fixed"][style*="width: 1px"]{position:fixed!important;
  top:1px!important;
  left:1px!important;
  width:1px!important;
  min-width:1px!important;
  max-width:1px!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  opacity:0!important;
  pointer-events:none!important;}

/* Ratings UI is allowed to exist only in the currently selected panel. */
.tpp .product_tabs_elegance_container
[role="tabpanel"]:not([data-headlessui-state~="selected"]) > .tp-ratings-ui{display:none!important;}

/* Extra protection against stale review classes surviving an SPA tab swap. */
.tpp .product_tabs_elegance_container
[role="tabpanel"][style*="position: fixed"].tp-reviews-panel{padding:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;}

/* ==========================================================
   V3.16.2 — RELATED PRODUCTS / MOBILE PARITY FIX
   Keeps the desktop visual language but makes the phone carousel
   geometrically stable, complete and theme-aware.
   ========================================================== */

.tpp .tp-related-section{position:relative;
  width:100%;
  overflow:hidden;}

.tpp .tp-related-track{width:100%;}

.tpp .tp-related-card{box-sizing:border-box!important;
  position:relative!important;
  overflow:hidden!important;
  background:var(--tp-surface)!important;
  border:1px solid var(--tp-line)!important;
  border-radius:6px!important;
  color:var(--tp-ink)!important;}

.tpp .tp-related-media{display:block!important;
  width:100%!important;
  position:relative!important;}

.tpp .tp-related-image{width:100%!important;
  aspect-ratio:1/1!important;
  background:
    radial-gradient(circle at 50% 58%,rgba(234,125,56,.12),transparent 62%),
    var(--tp-bg2)!important;
  overflow:hidden!important;
  border-radius:0!important;}

.tpp .tp-related-image img{display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:8%!important;
  box-sizing:border-box!important;
  border-radius:0!important;}

.tpp .tp-related-info{width:100%!important;
  box-sizing:border-box!important;
  padding:0 14px 18px!important;}

.tpp .tp-related-info h3{color:var(--tp-ink)!important;
  min-height:2.9em;
  line-height:1.45!important;}

.tpp .tp-related-info .font-bold span,
.tpp .tp-related-info .text-heading.font-bold span{color:var(--tp-o2)!important;}

/* action rail remains usable in both themes */
.tpp .tp-related-actions{z-index:4!important;
  background:color-mix(in srgb,var(--tp-surface) 78%,transparent)!important;
  border:1px solid var(--tp-line)!important;
  color:var(--tp-ink)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;}

.tpp .tp-related-actions svg{color:var(--tp-ink)!important;}

/* PHONE / PORTRAIT:
   one complete premium card in focus + a controlled peek of the next.
   No vertically stretched/cropped native card geometry. */
@media(max-width:767px){

  .tpp .tp-related-section{
    margin-top:8px!important;
    padding-bottom:18px!important;
  }

  .tpp .tp-related-section .home_section_top_container{
    margin-bottom:22px!important;
    padding-inline:16px!important;
  }

  .tpp .tp-related-section .home_section_top_title{
    font-size:25px!important;
    line-height:1.2!important;
  }

  .tpp .tp-related-track{
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    gap:12px!important;

    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:16px!important;
    overscroll-behavior-inline:contain!important;

    padding:0 16px 14px!important;
    margin:0!important;

    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }

  .tpp .tp-related-track::-webkit-scrollbar{
    display:none!important;
  }

  .tpp .tp-related-item{
    flex:0 0 min(78vw,286px)!important;
    width:min(78vw,286px)!important;
    min-width:min(78vw,286px)!important;
    max-width:min(78vw,286px)!important;
    height:auto!important;
    opacity:1!important;
    transform:none!important;
    scroll-snap-align:start!important;
  }

  .tpp .tp-related-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    padding-bottom:0!important;
    border-radius:18px!important;
    transform:none!important;
    box-shadow:none!important;
  }

  .tpp .tp-related-card::before{
    height:2px!important;
    transform:scaleX(1)!important;
  }

  .tpp .tp-related-card[data-tp-n]::after{
    top:12px!important;
    inset-inline-start:14px!important;
    font-size:8px!important;
  }

  .tpp .tp-related-image{
    aspect-ratio:1/1!important;
    min-height:0!important;
  }

  .tpp .tp-related-image img{
    padding:10%!important;
  }

  .tpp .tp-related-info{
    min-height:132px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:13px 12px 18px!important;
  }

  .tpp .tp-related-info .mt-3,
  .tpp .tp-related-info .md\:mt-5{
    margin-top:0!important;
  }

  .tpp .tp-related-info h3{
    width:100%!important;
    min-height:44px!important;
    margin:9px 0 8px!important;
    padding:0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    font-size:14px!important;
    line-height:1.55!important;
    text-align:center!important;
  }

  .tpp .tp-related-info .font-bold{
    margin-top:auto!important;
    font-size:21px!important;
    line-height:1!important;
  }

  .tpp .tp-related-actions{
    right:10px!important;
    left:auto!important;
    bottom:10px!important;
    padding:12px 8px!important;
    gap:15px!important;
    border-radius:999px!important;
    opacity:1!important;
  }

  .tpp .tp-related-actions svg{
    width:20px!important;
    height:20px!important;
  }

  /* Remove any inherited animation state that leaves cards at opacity .01 */
  .tpp .tp-related-item,
  .tpp .tp-related-card{
    animation:none!important;
    opacity:1!important;
  }

  /* Native EasyOrders "view all" area remains centered and separated. */
  .tpp .tp-related-section + *,
  .tpp .tp-related-section .home_slider_arrows_container{
    position:relative;
    z-index:2;
  }
}

/* very narrow phones */
@media(max-width:390px){
  .tpp .tp-related-item{
    flex-basis:82vw!important;
    width:82vw!important;
    min-width:82vw!important;
    max-width:82vw!important;
  }
}

/* ==========================================================
   V3.16.3 — RELATED PRODUCTS STABILITY GUARD
   EasyOrders can mount/re-hydrate related cards after the main product.
   These rules guarantee the decorated mobile geometry stays deterministic.
   ========================================================== */

@media(max-width:767px){
  .tpp .tp-related-track > .tp-related-item{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
  }

  .tpp .tp-related-track > .tp-related-item > .tp-related-card{
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    opacity:1!important;
    transform:none!important;
  }

  .tpp .tp-related-track > .tp-related-item .tp-related-media,
  .tpp .tp-related-track > .tp-related-item .tp-related-image{
    width:100%!important;
    flex:none!important;
  }

  .tpp .tp-related-track > .tp-related-item .tp-related-image{
    aspect-ratio:1/1!important;
    height:auto!important;
    min-height:0!important;
  }

  .tpp .tp-related-track > .tp-related-item .tp-related-image img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}

/* ==========================================================
   V3.17 — POWER FLOW CHECKOUT
   Native product-page EasyOrders checkout only.
   ========================================================== */

.tpp .product_form_checkout.tp-order-flow{--tp-order-progress:14%;
  margin-top:30px!important;
  padding:0!important;
  border:1px solid var(--tp-line)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  isolation:isolate;
  background:
    linear-gradient(var(--tp-line2) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,var(--tp-line2) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(145deg,var(--tp-surface),var(--tp-bg2))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 30px 70px -48px rgba(0,0,0,.46)!important;}

.tpp .product_form_checkout.tp-order-flow::before{content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:3px;
  height:var(--tp-order-progress);
  background:linear-gradient(180deg,#FFC780,var(--tp-o2),#B4531C);
  box-shadow:0 0 20px rgba(234,125,56,.55);
  transition:height .55s var(--tp-ease);
  z-index:5;}

.tpp .product_form_checkout.tp-order-flow::after{content:"";
  position:absolute;
  inset:-20% -10%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 14% 5%,rgba(234,125,56,.13),transparent 26%),
    radial-gradient(circle at 90% 42%,rgba(77,113,131,.11),transparent 28%);}

.tpp .product_form_checkout.tp-order-flow>svg{display:none!important;}
.tpp .product_form_checkout.tp-order-flow>.tp-order-native-title{display:none!important;}

.tpp .tp-order-head{position:relative;
  padding:26px 24px 24px;
  border-bottom:1px solid var(--tp-line);
  overflow:hidden;
  background:
    linear-gradient(120deg,rgba(234,125,56,.08),transparent 38%),
    color-mix(in srgb,var(--tp-surface) 88%,transparent);}

.tpp .tp-order-head::after{content:"";
  position:absolute;
  width:132px;
  height:132px;
  inset-inline-end:-55px;
  top:-59px;
  border:1px solid var(--tp-line);
  border-radius:50%;
  box-shadow:
    0 0 0 20px rgba(234,125,56,.025),
    0 0 0 42px rgba(234,125,56,.018);}

.tpp .tp-order-head__eyebrow{position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--tp-mute);
  font:600 8px/1 var(--tp-display)!important;
  letter-spacing:.18em;}
.tpp .tp-order-head__eyebrow>span{color:var(--tp-o2);}
.tpp .tp-order-head__eyebrow>i{flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--tp-o2),var(--tp-line),transparent);}
.tpp .tp-order-head__eyebrow>b{font:inherit;
  color:var(--tp-mute);
  white-space:nowrap;}

.tpp .tp-order-head__title{position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  margin:20px 0 12px!important;
  color:var(--tp-ink)!important;
  font-family:var(--tp-display)!important;
  font-size:clamp(33px,3.7vw,52px)!important;
  font-weight:400!important;
  line-height:.86!important;
  letter-spacing:.015em!important;
  text-align:left!important;}
.tpp .tp-order-head__title span:last-child{color:var(--tp-o2);
  margin-inline-start:clamp(18px,4vw,48px);}

.tpp .tp-order-head__foot{position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;}
.tpp .tp-order-head__foot p{margin:0!important;
  color:var(--tp-mute)!important;
  font:700 12px/1.45 var(--tp-ar)!important;}
.tpp .tp-order-head__status{display:inline-flex;
  align-items:center;
  gap:6px;
  flex:none;
  color:var(--tp-mute);
  font:600 7px/1 var(--tp-display)!important;
  letter-spacing:.12em;}
.tpp .tp-order-head__status i{width:6px;
  height:6px;
  border-radius:50%;
  background:var(--tp-o2);
  box-shadow:0 0 0 4px rgba(234,125,56,.10),0 0 12px rgba(234,125,56,.55);}

.tpp .tp-order-flow__form{position:relative;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  padding:20px 22px 24px!important;}
.tpp .tp-order-flow__form::before{content:"";
  position:absolute;
  top:20px;
  bottom:24px;
  inset-inline-start:31px;
  width:1px;
  z-index:0;
  background:
    linear-gradient(
      180deg,
      var(--tp-o2) 0 var(--tp-order-progress),
      var(--tp-line) var(--tp-order-progress) 100%
    );
  opacity:.75;}
.tpp .tp-order-flow__form>*{position:relative;z-index:1;}

.tpp .tp-order-step{grid-column:1/-1!important;
  min-height:44px;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin:4px 0 1px!important;
  padding-inline-start:1px;}
.tpp .tp-order-step--contact{order:10;}
.tpp .tp-order-step--delivery{order:20;margin-top:12px!important;}
.tpp .tp-order-step--order{order:30;margin-top:12px!important;}
.tpp .tp-order-step--confirm{order:40;margin-top:12px!important;}

.tpp .tp-order-step__node{width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1px solid var(--tp-line);
  border-radius:50%;
  background:var(--tp-surface);
  transition:.28s var(--tp-ease);}
.tpp .tp-order-step__node i{width:5px;
  height:5px;
  border-radius:50%;
  background:var(--tp-mute);
  opacity:.45;
  transition:.28s var(--tp-ease);}
.tpp .tp-order-step.is-active .tp-order-step__node,
.tpp .tp-order-step.is-complete .tp-order-step__node{border-color:rgba(234,125,56,.62);
  box-shadow:0 0 0 5px rgba(234,125,56,.08),0 0 16px rgba(234,125,56,.18);}
.tpp .tp-order-step.is-active .tp-order-step__node i,
.tpp .tp-order-step.is-complete .tp-order-step__node i{background:var(--tp-o2);
  opacity:1;
  box-shadow:0 0 9px rgba(234,125,56,.65);}
.tpp .tp-order-step.is-complete .tp-order-step__node i{width:8px;height:8px;}

.tpp .tp-order-step__copy{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;}
.tpp .tp-order-step__en{color:var(--tp-o2);
  font:600 8px/1 var(--tp-display)!important;
  letter-spacing:.15em;
  white-space:nowrap;}
.tpp .tp-order-step__copy strong{color:var(--tp-ink)!important;
  font:800 13px/1.25 var(--tp-ar)!important;
  white-space:nowrap;}

.tpp .tp-order-field{margin-top:0!important;}
.tpp .tp-order-field--full-name{order:11;grid-column:1/-1!important;}
.tpp .tp-order-field--phone{order:12;}
.tpp .tp-order-field--phone-alt{order:13;}
.tpp .tp-order-field--government{order:21;grid-column:1/-1!important;}
.tpp .tp-order-field--address{order:22;grid-column:1/-1!important;}
.tpp .tp-order-quantity{order:31;grid-column:1/-1!important;margin:0!important;}
.tpp .tp-order-field--note{order:32;grid-column:1/-1!important;}
.tpp .shipping_cost_container.tp-order-summary-item{order:41;}
.tpp .total_price_container.tp-order-summary-item{order:42;}
.tpp .tp-order-submit-wrap{order:43;grid-column:1/-1!important;}

.tpp .tp-order-field{min-width:0;
  padding:11px 11px 12px!important;
  border:1px solid var(--tp-line);
  border-radius:12px;
  background:color-mix(in srgb,var(--tp-surface) 84%,transparent);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s var(--tp-ease);}
.tpp .tp-order-field:focus-within{border-color:rgba(234,125,56,.58);
  background:color-mix(in srgb,var(--tp-surface) 94%,var(--tp-o2) 6%);
  box-shadow:0 0 0 3px rgba(234,125,56,.07),0 12px 28px -24px rgba(234,125,56,.55);
  transform:translateY(-1px);}
.tpp .tp-order-field.is-filled{border-color:color-mix(in srgb,var(--tp-line) 50%,var(--tp-o2) 50%);}

.tpp .tp-order-field__meta{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 1px 8px;}
.tpp .tp-order-field__meta>span{color:var(--tp-ink);
  font:800 11px/1 var(--tp-ar)!important;}
.tpp .tp-order-field__meta>small{color:var(--tp-mute);
  font:600 7px/1 var(--tp-display),var(--tp-ar)!important;
  letter-spacing:.10em;}
.tpp .tp-order-field[data-tp-optional="1"] .tp-order-field__meta>small{opacity:.7;}

.tpp .tp-order-field .global_input,
.tpp .tp-order-field .global_textarea{width:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:7px!important;
  
  background:var(--tp-bg)!important;
  box-shadow:inset 0 0 0 1px var(--tp-line)!important;
  
  transition:box-shadow .25s,background .25s!important;}

.tpp .tp-order-field .global_textarea{resize:vertical;}


.tpp .tp-order-field .global_input:focus,
.tpp .tp-order-field .global_textarea:focus{outline:none!important;
  box-shadow:inset 0 0 0 1px rgba(234,125,56,.55),inset 0 0 24px rgba(234,125,56,.035)!important;}
.tpp .tp-order-field .pointer-events-none{opacity:.82;}

.tpp .tp-order-quantity{padding:13px 14px!important;
  border:1px solid var(--tp-line);
  border-radius:12px;
  background:color-mix(in srgb,var(--tp-surface) 84%,transparent);}
.tpp .tp-order-quantity>label{margin-bottom:10px!important;
  color:var(--tp-ink)!important;
  font:800 11px/1 var(--tp-ar)!important;}
.tpp .tp-order-quantity>label::before{content:"POWER REGULATOR / ";
  color:var(--tp-o2);
  font:600 7px/1 var(--tp-display)!important;
  letter-spacing:.13em;}
.tpp .tp-order-quantity .quantity_container{margin-top:0!important;}
.tpp .tp-order-quantity .quantity_container>div{width:100%;
  justify-content:space-between!important;
  margin:0!important;
  padding:7px!important;
  border:1px solid var(--tp-line)!important;
  border-radius:999px!important;
  background:var(--tp-bg)!important;}
.tpp .tp-order-quantity .quantity_container button{width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:1px solid var(--tp-line)!important;
  border-radius:50%!important;
  color:var(--tp-ink)!important;
  background:var(--tp-surface)!important;}
.tpp .tp-order-quantity .quantity_container p{color:var(--tp-ink)!important;
  font:700 18px/1 var(--tp-display),var(--tp-ar)!important;}

.tpp .tp-order-summary-item{min-height:88px;
  margin:0!important;
  padding:13px 14px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px;
  border:1px solid var(--tp-line)!important;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(234,125,56,.045),transparent 55%),color-mix(in srgb,var(--tp-surface) 88%,transparent);}
.tpp .tp-order-summary-item dt{color:var(--tp-mute)!important;
  font:600 7px/1 var(--tp-display),var(--tp-ar)!important;
  letter-spacing:.12em;}
.tpp .tp-order-summary-item dd{width:100%;color:var(--tp-ink)!important;}

.tpp .shipping_cost_container.tp-order-summary-item::before{content:"SHIPPING";
  color:var(--tp-o2);
  font:600 7px/1 var(--tp-display)!important;
  letter-spacing:.13em;}
.tpp .total_price_container.tp-order-summary-item::before{content:"ORDER TOTAL";
  color:var(--tp-o2);
  font:600 7px/1 var(--tp-display)!important;
  letter-spacing:.13em;}
.tpp .shipping_cost_container .shipping_cost{color:var(--tp-o2)!important;
  font:800 14px/1 var(--tp-ar)!important;}
.tpp .total_price_container .total_price{color:var(--tp-ink)!important;
  font:700 25px/1 var(--tp-display),var(--tp-ar)!important;}
.tpp .total_price_container .total_price span{color:var(--tp-o2)!important;
  font-family:var(--tp-ar)!important;
  font-size:.48em!important;}

.tpp .tp-order-submit-wrap{margin-top:2px!important;padding-top:4px!important;}
.tpp .tp-order-submit-wrap #cf-turnstile{margin-inline:auto;}
.tpp .tp-order-submit-wrap .form_checkout_btn{position:relative!important;
  min-height:66px!important;
  margin-top:14px!important;
  padding:11px 24px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  isolation:isolate;
  color:#fff!important;
  border:1px solid rgba(255,196,150,.48)!important;
  background:radial-gradient(ellipse at 50% -55%,rgba(255,224,186,.32),transparent 56%),linear-gradient(180deg,#D06A2A,#B24D17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 12px 28px -18px rgba(234,125,56,.55)!important;
  transition:transform .25s var(--tp-ease),box-shadow .3s ease,filter .3s ease!important;}
.tpp .tp-order-submit-wrap .form_checkout_btn::before{content:"POWER / CONFIRM";
  color:rgba(255,255,255,.72);
  font:600 7px/1 var(--tp-display)!important;
  letter-spacing:.18em;}
.tpp .tp-order-submit-wrap .form_checkout_btn.is-powered{background:radial-gradient(ellipse at 50% -48%,rgba(255,236,205,.52),transparent 58%),linear-gradient(180deg,#ED8A43,#B95219)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 14px 34px -16px rgba(234,125,56,.85),0 0 28px rgba(234,125,56,.16)!important;}
@media(hover:hover) and (pointer:fine){
  .tpp .tp-order-submit-wrap .form_checkout_btn:hover{transform:translateY(-2px)!important}
}

.tpp.taqa-theme-dark .product_form_checkout.tp-order-flow{background:
    linear-gradient(rgba(220,229,232,.035) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(220,229,232,.035) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(145deg,#0A121C,#08101A)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 74px -46px rgba(0,0,0,.78)!important;}
.tpp.taqa-theme-dark .tp-order-head{background:linear-gradient(120deg,rgba(234,125,56,.09),transparent 42%),rgba(8,16,26,.76);}
.tpp.taqa-theme-dark .tp-order-field,
.tpp.taqa-theme-dark .tp-order-quantity,
.tpp.taqa-theme-dark .tp-order-summary-item{background:rgba(10,19,29,.74);}

@media(max-width:767px){
  .tpp .product_form_checkout.tp-order-flow{margin-top:24px!important;border-radius:16px!important}
  .tpp .tp-order-head{padding:22px 17px 20px}
  .tpp .tp-order-head__eyebrow{font-size:7px;letter-spacing:.13em}
  .tpp .tp-order-head__eyebrow>b{display:none}
  .tpp .tp-order-head__title{margin-top:18px!important;font-size:clamp(30px,10.2vw,42px)!important}
  .tpp .tp-order-head__title span:last-child{margin-inline-start:16px}
  .tpp .tp-order-head__foot{align-items:flex-end}
  .tpp .tp-order-head__foot p{max-width:18ch;font-size:11px}
  .tpp .tp-order-head__status{font-size:6px}

  .tpp .tp-order-flow__form{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:16px 14px 20px!important;
  }
  .tpp .tp-order-flow__form::before{inset-inline-start:23px;top:16px;bottom:20px}
  .tpp .tp-order-step{grid-column:1!important}

  .tpp .tp-order-field,
  .tpp .tp-order-field--full-name,
  .tpp .tp-order-field--phone,
  .tpp .tp-order-field--phone-alt,
  .tpp .tp-order-field--government,
  .tpp .tp-order-field--address,
  .tpp .tp-order-field--note,
  .tpp .tp-order-quantity,
  .tpp .tp-order-summary-item,
  .tpp .tp-order-submit-wrap{
    grid-column:1!important;
  }

  .tpp .tp-order-field{padding:10px!important;border-radius:11px}
  .tpp .tp-order-field .global_input{min-height:48px!important}
  .tpp .tp-order-field .global_textarea{min-height:96px!important}
  .tpp .tp-order-summary-item{min-height:76px}
  .tpp .tp-order-submit-wrap .form_checkout_btn{min-height:64px!important}
}

@media(prefers-reduced-motion:reduce){
  .tpp .product_form_checkout.tp-order-flow::before,
  .tpp .tp-order-step__node,
  .tpp .tp-order-step__node i,
  .tpp .tp-order-field,
  .tpp .tp-order-submit-wrap .form_checkout_btn{
    transition:none!important;
  }
}

/* ==========================================================
   V3.17.1 — CHECKOUT INPUTS + GOVERNORATE SELECT POLISH
   Fixes text alignment, inner spacing, React-Select menu styling
   and menu stacking above phone_alt / following fields.
   ========================================================== */

/* Let the governorate dropdown escape the card stack. */
.tpp .product_form_checkout.tp-order-flow,
.tpp .tp-order-flow__form{overflow:visible!important;}

.tpp .tp-order-field--government{position:relative!important;
  z-index:50!important;
  overflow:visible!important;}

.tpp .tp-order-field--government:focus-within{z-index:500!important;}

.tpp .tp-order-field--phone-alt,
.tpp .tp-order-field--address,
.tpp .tp-order-field--note{position:relative;
  z-index:1;}

/* ---------- Shared input typography / inner alignment ---------- */
.tpp .tp-order-field .global_input,
.tpp .tp-order-field .global_textarea{direction:rtl!important;
  text-align:right!important;
  color:var(--tp-ink)!important;
  font-family:var(--tp-ar)!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.6!important;
  letter-spacing:0!important;
  caret-color:var(--tp-o2)!important;}

.tpp .tp-order-field .global_input{height:52px!important;
  min-height:52px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  padding-inline-start:42px!important;
  padding-inline-end:14px!important;}

.tpp .tp-order-field .global_textarea{padding:14px!important;
  min-height:112px!important;
  line-height:1.75!important;}

.tpp .tp-order-field--note .global_textarea{min-height:92px!important;}

.tpp .tp-order-field .global_input::placeholder,
.tpp .tp-order-field .global_textarea::placeholder{color:var(--tp-mute)!important;
  opacity:.82!important;
  font-weight:600!important;}

.tpp .tp-order-field .pointer-events-none{inset-inline-start:10px!important;
  inset-inline-end:auto!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  color:var(--tp-o2)!important;}

.tpp .tp-order-field .pointer-events-none svg{width:18px!important;
  height:18px!important;
  color:currentColor!important;}

/* ---------- Governorate React Select container ---------- */
.tpp .tp-order-field--government{padding:11px!important;}

.tpp .tp-order-field--government .gov_select{position:relative!important;
  z-index:500!important;
  width:100%!important;
  font-family:var(--tp-ar)!important;
  direction:rtl!important;}

.tpp .tp-order-field--government .select__control{min-height:52px!important;
  height:52px!important;
  display:flex!important;
  align-items:center!important;
  border:1px solid var(--tp-line)!important;
  border-radius:8px!important;
  background:var(--tp-bg)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease!important;}

.tpp .tp-order-field--government .select__control:hover{border-color:color-mix(in srgb,var(--tp-line) 45%,var(--tp-o2) 55%)!important;}

.tpp .tp-order-field--government .select__control--is-focused,
.tpp .tp-order-field--government .select__control:focus-within{border-color:rgba(234,125,56,.65)!important;
  box-shadow:
    0 0 0 3px rgba(234,125,56,.08),
    inset 0 0 20px rgba(234,125,56,.025)!important;}

/* React Select value */
.tpp .tp-order-field--government .select__value-container{min-height:50px!important;
  padding:0 14px 0 8px!important;
  display:flex!important;
  align-items:center!important;
  direction:rtl!important;}

.tpp .tp-order-field--government .select__single-value,
.tpp .tp-order-field--government .select__placeholder,
.tpp .tp-order-field--government [class*="singleValue"],
.tpp .tp-order-field--government [class*="placeholder"]{margin:0!important;
  color:var(--tp-ink)!important;
  font-family:var(--tp-ar)!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.4!important;
  text-align:right!important;}

.tpp .tp-order-field--government .select__placeholder{color:var(--tp-mute)!important;
  opacity:.82!important;}

.tpp .tp-order-field--government .select__indicators{height:50px!important;
  display:flex!important;
  align-items:center!important;
  flex-direction:row!important;
  color:var(--tp-mute)!important;}

.tpp .tp-order-field--government .select__indicator-separator{width:1px!important;
  height:20px!important;
  margin:0!important;
  background:var(--tp-line)!important;}

.tpp .tp-order-field--government .select__dropdown-indicator{padding:0 10px!important;
  color:var(--tp-mute)!important;}

.tpp .tp-order-field--government .select__dropdown-indicator svg{width:17px!important;
  height:17px!important;
  fill:currentColor!important;}

/* ---------- React Select dropdown menu ---------- */
.tpp .tp-order-field--government .select__menu,
.tpp .tp-order-field--government [class*="menu"]{z-index:99999!important;}

.tpp .tp-order-field--government .select__menu{margin-top:8px!important;
  overflow:hidden!important;
  border:1px solid var(--tp-line)!important;
  border-radius:12px!important;
  background:var(--tp-surface)!important;
  box-shadow:
    0 22px 60px -18px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.02)!important;}

.tpp .tp-order-field--government .select__menu-list{max-height:260px!important;
  padding:6px!important;
  background:transparent!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
  scrollbar-color:var(--tp-mute) transparent;}

.tpp .tp-order-field--government .select__menu-list::-webkit-scrollbar{width:7px!important;}

.tpp .tp-order-field--government .select__menu-list::-webkit-scrollbar-track{background:transparent!important;}

.tpp .tp-order-field--government .select__menu-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--tp-mute) 55%,transparent)!important;
  border-radius:999px!important;}

.tpp .tp-order-field--government .select__option{min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:9px 11px!important;
  border-radius:8px!important;
  color:var(--tp-ink)!important;
  background:transparent!important;
  font-family:var(--tp-ar)!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.45!important;
  text-align:right!important;
  direction:rtl!important;
  cursor:pointer!important;}

.tpp .tp-order-field--government .select__option--is-focused{color:var(--tp-ink)!important;
  background:rgba(234,125,56,.09)!important;}

.tpp .tp-order-field--government .select__option--is-selected{color:#fff!important;
  background:linear-gradient(90deg,#B9531D,#D97832)!important;}

/* Fallback for react-select generated css classes when classNamePrefix changes */
.tpp .tp-order-field--government .gov_select > div{overflow:visible!important;}

.tpp .tp-order-field--government .gov_select > div:last-child{z-index:99999!important;}

/* dark menu */
.tpp.taqa-theme-dark .tp-order-field--government .select__menu{background:#0D1722!important;
  border-color:rgba(148,169,181,.18)!important;
  box-shadow:
    0 24px 66px -18px rgba(0,0,0,.72),
    0 0 26px rgba(234,125,56,.055)!important;}

.tpp.taqa-theme-dark .tp-order-field--government .select__control{background:#0B141E!important;}

/* Mobile: prevent the open menu from being clipped by nearby modules. */
@media(max-width:767px){
  .tpp .tp-order-field--government{
    z-index:1000!important;
  }

  .tpp .tp-order-field--government .select__menu{
    position:absolute!important;
    inset-inline:0!important;
    width:100%!important;
    min-width:100%!important;
  }

  .tpp .tp-order-field--government .select__menu-list{
    max-height:230px!important;
  }

  .tpp .tp-order-field .global_input{
    font-size:14px!important;
    height:50px!important;
    min-height:50px!important;
  }

  .tpp .tp-order-field .global_textarea{
    font-size:14px!important;
  }
}

/* V3.17.2 — verified live DOM targets. New styling stays INSIDE checkout. */
.tpp .product_form_checkout.checkout_container,
.tpp .product_form_checkout.checkout_container *{box-sizing:border-box;}
.tpp .product_form_checkout.checkout_container{position:relative;
  overflow:visible!important;
  --tp-checkout-control:var(--tp-bg);}
.tpp .product_form_checkout.checkout_container::after{inset:0!important; border-radius:inherit;}
.tpp .product_form_checkout.checkout_container > form{overflow:visible!important;
  gap:14px!important;}
.tpp .product_form_checkout.checkout_container > form > div:has(:is(input[name="full_name"],input[name="phone"],input[name="phone_alt"],textarea[name="address"],textarea[name="note"],.gov_select)){min-width:0; margin:0!important; padding:12px!important;
  border:1px solid var(--tp-line); border-radius:12px;
  background:var(--tp-surface); transform:none!important;
  transition:border-color .2s,box-shadow .2s;}
.tpp .product_form_checkout.checkout_container > form > div:has(input[name="full_name"]){order:11; grid-column:1/-1!important;}
.tpp .product_form_checkout.checkout_container > form > div:has(input[name="phone"]){order:12;}
.tpp .product_form_checkout.checkout_container > form > div:has(input[name="phone_alt"]){order:13;}
.tpp .product_form_checkout.checkout_container > form > div:has(.gov_select){order:21; grid-column:1/-1!important; position:relative!important; z-index:50!important; overflow:visible!important;}
.tpp .product_form_checkout.checkout_container > form > div:has(textarea[name="address"]){order:22; grid-column:1/-1!important;}
.tpp .product_form_checkout.checkout_container > form > div:has(textarea[name="note"]){order:32; grid-column:1/-1!important;}
.tpp .product_form_checkout.checkout_container > form > div:has(:is(input[name],textarea[name],.gov_select)):focus-within{border-color:var(--tp-o2); box-shadow:0 0 0 3px rgba(234,125,56,.09); transform:none!important;}
.tpp .product_form_checkout.checkout_container > form > div:has(.gov_select):focus-within{z-index:60!important;}
.tpp .product_form_checkout.checkout_container .tp-order-field__meta > span{font:700 12px/1.5 var(--tp-ar)!important;}
.tpp .product_form_checkout.checkout_container .tp-order-field__meta > small{font:500 10px/1.5 var(--tp-ar)!important; letter-spacing:0;}
.tpp .product_form_checkout.checkout_container :is(input[name="full_name"],input[name="phone"],input[name="phone_alt"],textarea[name="address"],textarea[name="note"]){width:100%!important; margin:0!important; border:0!important; border-radius:8px!important;
  background:var(--tp-checkout-control)!important; color:var(--tp-ink)!important;
  font:500 14px/1.6 var(--tp-ar)!important; letter-spacing:0!important;
  direction:rtl!important; text-align:right!important;
  box-shadow:inset 0 0 0 1px var(--tp-line)!important;
  transition:box-shadow .2s,background-color .2s!important;}
.tpp .product_form_checkout.checkout_container :is(input[name="full_name"],input[name="phone"],input[name="phone_alt"]){height:52px!important; min-height:52px!important;
  padding:0 44px 0 14px!important;}
.tpp .product_form_checkout.checkout_container :is(textarea[name="address"],textarea[name="note"]){padding:14px!important; min-height:112px!important; resize:vertical;}
.tpp .product_form_checkout.checkout_container textarea[name="note"]{min-height:96px!important;}
.tpp .product_form_checkout.checkout_container :is(input[name="full_name"],input[name="phone"],input[name="phone_alt"],textarea[name="address"],textarea[name="note"])::placeholder{color:var(--tp-mute)!important; opacity:1!important; font-weight:400!important;}
.tpp .product_form_checkout.checkout_container :is(input[name="full_name"],input[name="phone"],input[name="phone_alt"],textarea[name="address"],textarea[name="note"]):focus{outline:none!important; box-shadow:inset 0 0 0 2px var(--tp-o2)!important;}
.tpp .product_form_checkout.checkout_container > form > div:has(:is(input[name="full_name"],input[name="phone"],input[name="phone_alt"])) > div > div.relative.mt-1{margin-top:0!important;}
.tpp .product_form_checkout.checkout_container :is(input[name="full_name"],input[name="phone"],input[name="phone_alt"]) + .pointer-events-none,
.tpp .product_form_checkout.checkout_container .gov_select + .pointer-events-none{right:12px!important; left:auto!important; inset-inline-start:12px!important; inset-inline-end:auto!important;
  width:20px; padding:0!important; color:var(--tp-o2)!important;}
.tpp .product_form_checkout.checkout_container .pointer-events-none svg{width:18px!important; height:18px!important; color:var(--tp-o2)!important;}
.tpp .product_form_checkout.checkout_container .gov_select{position:relative!important; z-index:2!important; width:100%!important; direction:rtl!important; font-family:var(--tp-ar)!important;}
.tpp .product_form_checkout.checkout_container .gov_select > .select__control{height:52px!important; min-height:52px!important; padding:0!important;
  border:1px solid var(--tp-line)!important; border-radius:8px!important;
  background:var(--tp-checkout-control)!important; box-shadow:none!important;
  cursor:pointer!important;}
.tpp .product_form_checkout.checkout_container .gov_select > .select__control--is-focused{border-color:var(--tp-o2)!important; box-shadow:inset 0 0 0 1px var(--tp-o2)!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__value-container{min-height:50px!important; padding:0 44px 0 12px!important; direction:rtl!important;}
.tpp .product_form_checkout.checkout_container .gov_select :is(.select__single-value,.select__placeholder){margin:0!important; font:500 14px/1.6 var(--tp-ar)!important; color:var(--tp-ink)!important; text-align:right!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__placeholder{color:var(--tp-mute)!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__indicators{height:50px!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__dropdown-indicator{padding:0 12px!important; color:var(--tp-mute)!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__indicator-separator{height:20px!important; margin:0!important; background:var(--tp-line)!important; align-self:center;}
.tpp .product_form_checkout.checkout_container .gov_select > .select__menu{position:absolute!important; z-index:4!important; inset-inline:0!important;
  width:100%!important; margin-top:8px!important; padding:0!important;
  overflow:hidden!important; border:1px solid var(--tp-line)!important; border-radius:12px!important;
  background:var(--tp-surface)!important;
  box-shadow:0 18px 40px -14px rgba(9,17,26,.28)!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__menu-list{max-height:260px!important; padding:6px!important; overflow-y:auto!important; overscroll-behavior:contain!important; scrollbar-width:thin; background:transparent!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__option{min-height:44px!important; padding:10px 12px!important; border-radius:7px!important;
  font:500 14px/1.6 var(--tp-ar)!important; direction:rtl!important; text-align:right!important;
  background:transparent!important; color:var(--tp-ink)!important; cursor:pointer!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__option--is-focused{background:rgba(234,125,56,.1)!important;}
.tpp .product_form_checkout.checkout_container .gov_select .select__option--is-selected{color:#fff!important; background:#A84716!important; font-weight:700!important;}
.tpp .product_form_checkout.checkout_container > form > .tp-order-submit-wrap > .form_checkout_btn{min-height:64px!important;}
@media(max-width:767px) {
  .tpp .product_form_checkout.checkout_container > form { grid-template-columns:minmax(0,1fr)!important; padding:16px!important; gap:12px!important; }
  .tpp .product_form_checkout.checkout_container .tp-order-head__title { font-size:clamp(22px,7vw,30px)!important; }
  .tpp .product_form_checkout.checkout_container .tp-order-head__title span:last-child { margin-inline-start:0!important; }
  .tpp .product_form_checkout.checkout_container .tp-order-head__eyebrow { flex-wrap:wrap; gap:8px; }
  .tpp .product_form_checkout.checkout_container :is(input[name="full_name"],input[name="phone"],input[name="phone_alt"],textarea[name="address"],textarea[name="note"]),
  .tpp .product_form_checkout.checkout_container .gov_select :is(.select__single-value,.select__placeholder,.select__option) { font-size:16px!important; }
  .tpp .product_form_checkout.checkout_container .gov_select .select__menu-list { max-height:230px!important; }
  .tpp .product_form_checkout.checkout_container .tp-order-step__en { font-family:"DM Sans",system-ui,sans-serif!important; letter-spacing:.06em; }
}
@media(prefers-reduced-motion:reduce) {
  .tpp .product_form_checkout.checkout_container *,
  .tpp .product_form_checkout.checkout_container *::before,
  .tpp .product_form_checkout.checkout_container *::after { transition:none!important; }
}

/* V3.17.3 — Dune title + authored Liquid Metal Pill, TAQA spectrum.
   Only the native submit button INSIDE checkout is styled. */
.tpp .product_form_checkout.checkout_container{overflow-x:clip!important; overflow-y:visible!important;}
@font-face {
  font-family:"TAQA Checkout Dune";
  src:url("https://fonts.cdnfonts.com/s/84958/Dune_Rise.woff") format("woff");
  font-style:normal; font-weight:400; font-display:swap;
}
.tpp .product_form_checkout.checkout_container .tp-order-head__title,
.tpp .product_form_checkout.checkout_container .tp-order-head__title > span{font-family:"TAQA Checkout Dune","Dune Rise",sans-serif!important;
  font-weight:400!important; text-transform:uppercase;}
.tpp .product_form_checkout.checkout_container .tp-order-submit-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:visible!important;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn,
.tpp .product_form_checkout.checkout_container .form_checkout_btn.is-powered{position:relative!important; isolation:isolate; z-index:2;
  width:180px!important; max-width:100%!important; height:64px!important; min-height:64px!important;
  display:inline-flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important;
  gap:10px!important; padding:0 22px!important; margin:16px auto 0!important;
  border-radius:999px!important; overflow:visible!important;
  color:#fff!important; font:600 18px/1.2 var(--tp-ar)!important; letter-spacing:0!important;
  direction:ltr!important;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.75);
  border:1px solid rgba(234,125,56,.55)!important;
  background:#0b0c0e!important; background-image:none!important;
  box-shadow:0 6px 12px rgba(0,0,0,.50),0 17px 37px rgba(0,0,0,.30),0 35px 73px rgba(0,0,0,.18)!important;
  transform:none!important; filter:none!important;
  transition:transform .15s ease!important;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn::before{content:"+"!important; display:block!important; position:static!important;
  color:currentColor!important; font:400 24px/1 Arial,sans-serif!important; letter-spacing:0!important;
  width:18px!important; height:24px!important; flex:none; background:none!important; transform:none!important;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn::after{content:none!important; display:none!important;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn.tp-metal-ready{border-color:transparent!important;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn > .tp-metal-canvas{position:absolute!important; inset:-112px!important;
  width:calc(100% + 224px)!important; height:calc(100% + 224px)!important;
  display:block!important; pointer-events:none!important; z-index:-1!important;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn:focus-visible{outline:2px solid #EA7D38!important; outline-offset:5px!important;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn:disabled,
.tpp .product_form_checkout.checkout_container .form_checkout_btn[aria-disabled="true"]{opacity:.65; cursor:wait;}
.tpp .product_form_checkout.checkout_container .form_checkout_btn.tp-metal-press{transform:translateY(1px)!important;}
@media(hover:hover) and (pointer:fine) {
  .tpp .product_form_checkout.checkout_container .form_checkout_btn:hover { transform:none!important; }
}
@media(prefers-reduced-motion:reduce) {
  .tpp .product_form_checkout.checkout_container .form_checkout_btn { transition:none!important; transform:none!important; }
}

/* V3.17.4 — desktop CTA width and theme-aware step points. */
.tpp .product_form_checkout.checkout_container .tp-order-head{container-type:inline-size;}
.tpp .product_form_checkout.checkout_container .tp-order-head__title{align-items:center!important; text-align:center!important; direction:ltr;
  font-size:clamp(18px,4.8vw,44px)!important;
  font-size:clamp(18px,8.2cqw,48px)!important;
  line-height:1!important; gap:5px;}
.tpp .product_form_checkout.checkout_container .tp-order-head__title > span{display:block; max-width:100%; white-space:nowrap; text-align:center!important;
  margin-inline:0!important;}
.tpp .product_form_checkout.checkout_container{--tp-step-point:var(--tp-ink);}
.tpp.taqa-theme-dark .product_form_checkout.checkout_container{--tp-step-point:#F2F5F6;}
.tpp.taqa-theme-light .product_form_checkout.checkout_container{--tp-step-point:#09111A;}
.tpp .product_form_checkout.checkout_container .tp-order-step .tp-order-step__node{border-color:color-mix(in srgb,var(--tp-step-point) 65%,transparent);
  background:var(--tp-surface); box-shadow:none;}
.tpp .product_form_checkout.checkout_container .tp-order-step .tp-order-step__node i{background:var(--tp-step-point); opacity:1; box-shadow:none;}
.tpp .product_form_checkout.checkout_container .tp-order-step.is-active .tp-order-step__node{border-color:rgba(234,125,56,.75);
  box-shadow:0 0 0 5px rgba(234,125,56,.08),0 0 16px rgba(234,125,56,.18);}
.tpp .product_form_checkout.checkout_container .tp-order-step.is-active .tp-order-step__node i{background:#EA7D38; box-shadow:0 0 9px rgba(234,125,56,.65);}
@media(min-width:1024px) {
  .tpp .product_form_checkout.checkout_container .form_checkout_btn,
  .tpp .product_form_checkout.checkout_container .form_checkout_btn.is-powered {
    width:clamp(260px,22vw,320px)!important;
  }
}