/* Almutamakina V18 — responsive premium homepage */
:root{--am-blue:#184f83;--am-ink:#15334a;--am-pale:#eff6fb}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{overflow-x:hidden}
.hero-v12 .hero-copy p:last-child{color:#67849a;font-size:clamp(14px,1.22vw,18px)!important;line-height:1.9!important}
.hero-v12 .panorama-hint{color:#859eae;font-size:13px!important}
.hero-v12 .premium-stage .premium-item picture{display:block;width:100%}
.hero-v12 .premium-stage .premium-item picture img{display:block;width:100%}
.hero-v12 .premium-item{transition:opacity .54s ease,transform 1.08s cubic-bezier(.18,.83,.22,1)!important}

/* Shared section visuals & product ribbons */
.story .scene-layout{min-height:410px!important}
.story .section-mini{direction:rtl;position:relative;border-top:1px solid #eff3f6;padding:16px 26px 18px;background:#fff}
html[lang=en] .story .section-mini{direction:ltr}
.section-mini .mini-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.mini-eyebrow{display:block;letter-spacing:1.4px;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;color:#7e9db3}
.section-mini h3{font-size:19px!important;font-weight:700!important;line-height:1.3;margin:4px 0 0!important;color:#18364a}
.mini-controls,.banner-controls{display:flex;gap:7px;direction:ltr}
.mini-controls button,.banner-controls button,.flip-controls button{display:grid;place-items:center;border:1px solid #d8e7f1;background:#fff;color:#164b78;border-radius:50%;font-size:25px;line-height:1;width:38px;height:38px;cursor:pointer;transition:.2s ease}
.mini-controls button:hover,.banner-controls button:hover,.flip-controls button:hover{background:#164b78;color:white}
.mini-track{display:flex;gap:12px;scroll-snap-type:x mandatory;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:3px 2px 8px;direction:ltr}
.mini-track::-webkit-scrollbar,.banner-track::-webkit-scrollbar{display:none}
.mini-product{display:flex;flex:0 0 clamp(180px,24%,245px);flex-direction:column;align-items:center;justify-content:center;gap:8px;scroll-snap-align:center;padding:12px 10px 10px;border:1px solid #e8eef4;border-radius:13px;background:linear-gradient(180deg,#fbfdff,#f6f9fc);min-width:0;text-decoration:none;color:#1b4568;position:relative;transition:transform .2s ease,border-color .2s ease}
.mini-product:hover{transform:translateY(-3px);border-color:#bfd3e1}
.mini-product img{height:125px;width:100%;object-fit:contain;mix-blend-mode:multiply}
.mini-product>span:not(.mini-arrow){font-size:13px;font-weight:700;text-align:center}
.mini-product .mini-arrow{position:absolute;top:10px;right:10px;color:#9cb3c3;font-size:16px}
.mini-all{display:inline-flex;align-items:center;gap:9px;color:#1c598f;font-size:13px;font-weight:700;padding:6px 0 0;text-decoration:none}
.story .scene-copy h2{overflow-wrap:normal;word-break:normal;line-height:1.31!important}
.story .scene-copy h2 em{line-height:1.29!important}
.story .scene-copy p{line-height:1.92!important}
.story .scene-film--dishwasher{overflow:hidden;border-radius:2px}
.story .scene-film--dishwasher video{filter:contrast(1.03) brightness(1.04);background:#fff!important;object-fit:contain!important}

/* Catalogue preview */
.offer-feature{background:linear-gradient(155deg,#f4f9fd 0%,#fff 72%);padding:36px max(20px,calc((100vw - 1180px)/2)) 46px;margin:10px 0 10px;border-block:1px solid #eaf0f6;text-align:center}
.offer-intro{margin:0 auto 22px;max-width:680px}
.offer-intro h2{font-size:clamp(25px,3vw,39px);font-weight:700;line-height:1.34;color:#19384f;margin:7px 0 6px}
.offer-intro p{color:#728da1;font-size:14px;line-height:1.8}
.offer-showcase{max-width:780px;margin:auto}
.flip-viewport{position:relative;perspective:1500px;max-width:700px;margin:0 auto;user-select:none;touch-action:pan-y;cursor:grab}
.flip-viewport:active{cursor:grabbing}
.flip-pages{display:flex;justify-content:center;gap:5px;padding:14px;background:#fff;border:1px solid #e0ebf3;border-radius:18px;box-shadow:0 14px 35px rgba(31,68,99,.09);height:min(58vw,470px);overflow:hidden;transform-origin:center;transition:transform .22s ease,opacity .18s ease}
.flip-pages.is-turning-next{transform:rotateY(-8deg) scale(.985);opacity:.72}
.flip-pages.is-turning-back{transform:rotateY(8deg) scale(.985);opacity:.72}
.flip-image{display:block;min-width:0;width:calc(50% - 3px);height:100%;object-fit:contain;object-position:center;background:#f9fbfc;border-radius:4px;pointer-events:none}
.flip-controls{display:flex;justify-content:center;align-items:center;gap:20px;padding:13px 0 7px}
.flip-counter{font-family:'DM Sans',sans-serif;color:#5d7b93;letter-spacing:1px;font-size:13px;min-width:96px;text-align:center;direction:ltr}
.offer-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:8px auto 0}
.offer-open,.offer-download{display:inline-flex;align-items:center;justify-content:center;gap:13px;text-decoration:none;border-radius:12px;font-weight:700;font-size:14px;min-height:46px;padding:12px 20px}
.offer-open{color:#fff;background:var(--am-blue)}
.offer-download{color:var(--am-blue);background:#fff;border:1px solid #cbdde9}

/* Category banner swipe gallery */
.banner-gallery{max-width:1220px;margin:0 auto;padding:32px 22px 34px}
.banner-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.banner-head h2{margin:7px 0 0;color:#19384f;font-size:clamp(23px,2.6vw,34px);line-height:1.35;font-weight:700}
.banner-track{display:flex;gap:14px;direction:ltr;scroll-snap-type:x mandatory;overflow-x:auto;scrollbar-width:none;padding:4px 0 12px;overscroll-behavior-x:contain}
.banner-slide{display:flex;direction:rtl;scroll-snap-align:center;flex:0 0 clamp(265px,32%,380px);align-items:center;justify-content:space-between;gap:8px;min-height:204px;padding:20px 16px 16px 24px;background:linear-gradient(120deg,#f0f8fd,#fff);border:1px solid #e4eff7;border-radius:18px;text-decoration:none;color:#173f61;overflow:hidden;position:relative}
html[lang=en] .banner-slide{direction:ltr}
.banner-slide>div{flex:1;z-index:1}
.banner-slide small{color:#7fa0b8;font-size:10px;letter-spacing:.9px}
.banner-slide h3{color:#173d5a;font-size:25px;font-weight:700;margin:7px 0 20px}
.banner-slide div>span{color:#1a5385;font-size:12px;font-weight:700}
.banner-slide img{object-fit:contain;object-position:bottom center;width:45%;height:174px;min-width:0;mix-blend-mode:multiply;transition:transform .3s ease}
.banner-slide:hover img{transform:translateY(-4px)}

/* Floating return to top */
.back-top{position:fixed;bottom:24px;left:20px;z-index:105;display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#164c7d;color:#fff!important;box-shadow:0 7px 22px rgba(14,49,89,.2);font:22px Arial,sans-serif;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s}
.back-top.is-visible{opacity:1;pointer-events:auto;transform:none}

@media(max-width:780px){
  /* Separate phone hero only; desktop hero rules remain unchanged */
  .hero.hero-v12 .hero-sticky{padding:19px 12px 12px!important}
  .hero-v12 .hero-copy h1{font-size:clamp(29px,8vw,40px)!important;line-height:1.32!important}
  .hero-v12 .hero-copy p:last-child{font-size:14px!important;line-height:1.8!important;max-width:36ch!important;margin:0 auto}
  .hero-v12 .premium-stage-wrap{width:100%!important;margin:0 auto!important;padding:0!important}
  .hero-v12 .premium-stage{
    display:block!important;position:relative!important;direction:ltr!important;
    width:100%!important;max-width:650px!important;
    height:clamp(230px,70vw,325px)!important;min-height:0!important;
    padding:0!important;margin:0 auto!important;
    overflow:visible!important;isolation:isolate;
  }
  .hero-v12 .premium-stage .premium-item{
    display:block!important;position:absolute!important;float:none!important;grid-row:auto!important;grid-column:auto!important;
    width:auto!important;max-width:none!important;flex:none!important;align-self:auto!important;
    min-width:0!important;bottom:4px!important;margin:0!important;padding:0!important;
    transform-origin:center bottom;
  }
  .hero-v12 .premium-stage .premium-item img{
    display:block!important;width:100%!important;height:auto!important;max-height:none!important;max-width:100%!important;
    margin:0!important;object-fit:contain!important;filter:drop-shadow(0 7px 12px rgba(22,53,80,.1));
  }
  .hero-v12 .premium-stage .stage-dishwasher{left:0%!important;width:20%!important;z-index:2}
  .hero-v12 .premium-stage .stage-washer{left:19%!important;width:22%!important;z-index:3}
  .hero-v12 .premium-stage .stage-fridge{left:39%!important;width:27%!important;z-index:4}
  .hero-v12 .premium-stage .stage-oven{left:65%!important;width:27%!important;z-index:2}
  .hero-v12 .premium-stage .stage-vacuum{left:87%!important;width:14%!important;z-index:6}
  .hero-v12 .premium-stage .stage-microwave{left:31%!important;width:23%!important;z-index:7}
  .hero-v12 .premium-stage::after{content:"";position:absolute;left:1%!important;right:1%!important;bottom:0!important;height:1px!important;background:#d5e3ec!important}
  .hero-v12 .premium-stage::before{bottom:1px!important}
  .hero-v12 .premium-stage .premium-item .stage-shadow{display:none!important}
  .hero-v12 .panorama-hint{display:none!important}
  .hero-v12 .hero-bottom{margin:9px 0 0!important;display:flex!important;justify-content:space-between!important;flex-direction:row!important;align-items:center!important;gap:7px!important}
  .hero-v12 .replay,.hero-v12 .scroll-down{width:auto!important;min-width:0!important;padding:9px 12px!important;font-size:11px!important;line-height:1.5!important}
  .hero-v12 .hero-caption{display:none!important}
  .chapter-divider{margin:12px auto!important;padding:0 10px!important}
  .offer-feature{padding:28px 14px 34px;margin-top:5px}
  .offer-intro{margin-bottom:14px}
  .offer-intro h2{font-size:27px}
  .flip-viewport{max-width:370px}
  .flip-pages{height:min(112vw,500px);padding:9px;gap:0;border-radius:15px}
  .flip-image{width:100%!important}
  .flip-image.secondary{display:none!important}
  .offer-actions{gap:8px}
  .offer-open,.offer-download{font-size:12px;padding:10px 14px}
  .banner-gallery{padding:25px 14px 24px}
  .banner-head h2{font-size:23px}
  .banner-slide{flex-basis:84%;min-height:170px;padding:12px 18px}
  .banner-slide img{height:150px}
  .story .scene-layout{display:flex!important;flex-direction:column!important;gap:0!important}
  .story .scene-layout>.scene-art{order:-2!important;width:100%!important;max-width:100%!important;min-height:0!important;padding:20px 14px 4px!important}
  .story .scene-layout>.scene-copy{order:0!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:9px 16px 18px!important}
  .story .scene-copy h2{font-size:clamp(27px,7.4vw,35px)!important;line-height:1.28!important}
  .story .scene-copy h2 em{line-height:1.3!important}
  .story .scene-copy p{line-height:1.82!important;font-size:14px!important}
  .story .scene-film,.story .fridge-film{background:#fff!important}
  .story .section-mini{padding:13px 14px 14px}
  .section-mini h3{font-size:17px!important}
  .mini-product{flex-basis:57%;padding:10px 8px}
  .mini-product img{height:110px}
  .categories{padding-top:32px!important}
  .back-top{left:12px;bottom:74px;width:38px;height:38px;font-size:20px}
}
@media(max-width:380px){
 .hero-v12 .premium-stage{height:clamp(210px,73vw,270px)!important}
 .hero-v12 .hero-copy h1{font-size:28px!important}
 .hero-v12 .replay,.hero-v12 .scroll-down{font-size:10px!important;padding:8px!important}
 .mini-product{flex-basis:68%}
}
@media(prefers-reduced-motion:reduce){
 .hero-v12 .premium-stage .premium-item{transition:none!important;transform:none!important;opacity:1!important}
 .flip-pages,.banner-slide img{transition:none!important}
}

/* Keep interactive product ribbons below, never alongside, the main scene */
.story .story-pin{display:block!important;width:100%!important;max-width:1220px!important}
.story .story-pin>.scene-layout{width:100%!important}
.story .story-pin>.section-mini{width:100%!important;max-width:100%!important;clear:both!important}

.flip-controls button:disabled{opacity:.32;cursor:not-allowed;background:#fff;color:#6b8090}