/* Our fixes on top of the client's concept (the concept's own files stay untouched). */

/* Range logos (from the BabyJoy site): the band shows the logo of the open tab, tape or pants. */
.bj-range { display: flex; justify-content: center; align-items: center; height: 190px; margin: 0 auto 1rem; }
.bj-range img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.bj-range .bj-range-1 { display: none; }
.wp-band:has(.wp-panel[data-p$="-1"]:not([hidden])) .bj-range .bj-range-0 { display: none; }
.wp-band:has(.wp-panel[data-p$="-1"]:not([hidden])) .bj-range .bj-range-1 { display: block; }
@media (max-width: 767px) { .bj-range { height: 150px; } }

/* An odd last feature (Olive pants has five) sits centred on its own row. */
.s8-grid > .s8-f:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* A lead item (Olive pants: the perfect fit artwork) spans its own row; the items after it sit two by two. */
.s8-grid > .s8-f.s8-lead { grid-column: 1 / -1; }
.s8-grid > .s8-lead ~ .s8-f:last-child:nth-child(odd) { grid-column: auto; }
/* An item marked s8-full always has a row of its own, centred (the wide pocket artwork; the Compressed tape navel). */
.s8-grid > .s8-f.s8-full { grid-column: 1 / -1 !important; }

/* Navel icons: the "مولود جديد" / "NEW BORN!" star sits on the circle's edge, as in the BabyJoy artwork.
   The image carries its own frame and the star on a canvas 1.7x the frame, scaled up to match its neighbours. */
.wp-band .s8-f img.s8-navel { border: 0; border-radius: 0; background: none; box-shadow: none; scale: 1.7; filter: drop-shadow(0 8px 18px rgba(0,0,0,.22)); position: relative; z-index: 1; }

/* Third tab (wipes): its logo shows when the third panel is open. */
.bj-range .bj-range-2 { display: none; }
.wp-band:has(.wp-panel[data-p$="-2"]:not([hidden])) .bj-range .bj-range-0 { display: none; }
.wp-band:has(.wp-panel[data-p$="-2"]:not([hidden])) .bj-range .bj-range-2 { display: block; }

/* ===== Client round (Babyjoyv6.5), following the client's updated concept (its v54, v59, v60, v62, v64 blocks).
   Logos are not part of this round: our range logos and wordmarks stay. ===== */

/* Header: the client's branded bar on every page (their concept's v60, v62 and v63 rules, our own wordmark in it).
   Japan Technology badge, BabyJoy wordmark and Saudi Made badge on top; menu row below on desktop, menu button on phones. */
.mt-header{height:auto!important;min-height:0!important}
/* v60 — header as its own bar; slogan heads the 45° video section */
.mt-header{position:sticky!important;top:0;background:#fff!important;border-bottom:1px solid #e6ebe1;box-shadow:0 4px 16px rgba(23,42,123,.06);padding:0!important;z-index:1000}
.mt-header .container-xl>.bjx-hrow{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:20px;margin:0!important;min-height:76px;justify-content:space-between}
.bjx-hrow>*{width:auto!important;max-width:none!important;flex:0 0 auto!important;padding:0!important;margin:0!important}
.bjx-hrow .bjx-nav{flex:1 1 auto!important;display:flex;flex-wrap:nowrap;justify-content:center;gap:1.8rem;padding:0!important}
.bjx-hrow .bjx-nav a{font-size:1.35rem;white-space:nowrap}
.bjx-hrow .mt-section{padding:0!important;margin:0!important}
.bjx-hrow .mt-social{margin:0!important;padding:0!important;gap:6px}
.bjx-hrow .mt-social li{padding:0!important}
.bjx-hrow .mt-social img{width:28px!important;height:28px!important}
.bjx-hrow>.col-2{display:flex;align-items:center;gap:10px}
.bjx-hrow .mt-lang{margin:0!important;padding:0!important;width:auto!important}
.bjx-hrow .mt-lang li{padding:0!important;width:auto!important}
.bjx-hrow .mt-lang li a{display:inline-flex!important;align-items:center;height:36px!important;line-height:36px!important;padding:0 1.6rem!important;width:auto!important;border-radius:999px!important;font-size:1.4rem}
.bjx-hlogo img{display:block;height:46px!important;width:auto!important;max-width:none!important;margin:0!important}
@media(max-width:1199px){.bjx-hrow .mt-social{display:none!important}.bjx-hrow .bjx-nav{gap:1.3rem}.bjx-hrow .bjx-nav a{font-size:1.25rem}}
@media(max-width:991px){.mt-header .container-xl>.bjx-hrow{min-height:62px;gap:10px}.bjx-hlogo img{height:36px!important}
 .bjx-hrow .mt-social{display:flex!important;justify-content:center!important}.bjx-hrow>.col-10{flex:1 1 auto!important;min-width:0}.bjx-hrow .mt-social img{width:24px!important;height:24px!important}.bjx-hrow .mt-social{gap:4px}}
@media(max-width:360px){.bjx-hrow .mt-social{display:none!important}}
@media(max-width:991px){.bjx-hrow .bjx-nav{display:none!important}}
.mt-header .container-xl{padding-left:20px!important;padding-right:20px!important;max-width:1320px}
@media(min-width:992px){.bjx-hrow{gap:14px!important}.bjx-hrow .bjx-nav{gap:1.4rem!important}.bjx-hrow .bjx-nav a{font-size:1.25rem!important}.bjx-hrow .mt-social img{width:24px!important;height:24px!important}.bjx-hrow .mt-social{gap:2px!important}.bjx-hrow .mt-social li a{padding:0 2px!important;margin:0!important}.bjx-hrow>.col-10{min-width:0}}
@media(min-width:992px) and (max-width:1279px){.bjx-hrow .mt-social{display:none!important}}
@media(max-width:991px){.bjx-hrow>.col-10{display:none!important}}
.bjx-mm-social{margin-top:18px}.bjx-mm-soc{display:flex!important;flex-wrap:wrap;gap:10px;justify-content:flex-start;padding:0;margin:0;list-style:none}.bjx-mm-soc li{padding:0!important}.bjx-mm-soc img{width:34px;height:34px}
/* v62 — stronger branded header (BabyJoy green #94C83D from the official heart logo, navy #282E78 from the wordmark) */
.mt-header{background:linear-gradient(180deg,#9DCF45 0%,#8CC23A 100%)!important;border-bottom:0!important;box-shadow:0 6px 22px rgba(40,46,120,.18)!important}
.mt-header .container-xl>.bjx-hrow{min-height:96px!important;gap:22px!important}
.bjx-hlogo img{height:68px!important;filter:drop-shadow(0 3px 6px rgba(40,46,120,.25))}
.bjx-hlogo{transition:transform .25s}.bjx-hlogo:hover{transform:scale(1.04) rotate(-2deg)}
.bjx-hrow .bjx-nav{gap:.6rem!important}
.bjx-hrow .bjx-nav a{color:#282E78!important;font-weight:800!important;font-size:1.5rem!important;letter-spacing:.02em;padding:.8rem 1.2rem;border-radius:999px;transition:background .2s,color .2s}
.bjx-hrow .bjx-nav a::after{display:none!important}
.bjx-hrow .bjx-nav a:hover,.bjx-hrow .bjx-nav a:focus-visible{background:rgba(255,255,255,.85);color:#282E78!important;outline:none}
.bjx-hrow .bjx-nav a.is-active{background:#282E78;color:#fff!important}
.bjx-hrow .bjx-nav a:focus-visible{box-shadow:0 0 0 3px #fff}
.bjx-hrow .mt-social img{filter:brightness(0) invert(1);opacity:.95;transition:opacity .2s,transform .2s}
.bjx-hrow .mt-social a:hover img{opacity:1;transform:scale(1.12)}
.bjx-hrow .mt-lang li a{background:#282E78!important;color:#fff!important;height:40px!important;line-height:40px!important;font-weight:800;padding:0 1.8rem!important;border:2px solid #fff}
.bjx-hrow .mt-lang li a:hover{background:#fff!important;color:#282E78!important}
.bjx-burger{background:#282E78!important;width:48px!important;height:48px!important;border:2px solid #fff!important}
@media(min-width:992px) and (max-width:1279px){.bjx-hrow .bjx-nav a{font-size:1.3rem!important;padding:.7rem .8rem}.bjx-hlogo img{height:58px!important}}
@media(max-width:991px){.mt-header .container-xl>.bjx-hrow{min-height:76px!important}.bjx-hlogo img{height:52px!important}}
@media(min-width:992px){.bjx-hrow .bjx-nav a{font-size:1.4rem!important;padding:.7rem .9rem!important}.bjx-hrow .mt-social{gap:0!important}.bjx-hrow .mt-social img{width:26px!important;height:26px!important}.bjx-hrow .mt-social li a{padding:0 3px!important}}
.bjx-hrow .mt-social li{margin:0 2px!important}
@media(min-width:992px){.bjx-hrow .bjx-nav{flex:0 1 auto!important;min-width:0}.mt-header .container-xl{max-width:1400px!important}}
@media(min-width:992px) and (max-width:1365px){.bjx-hrow .bjx-nav a{font-size:1.3rem!important;padding:.6rem .7rem!important}.bjx-hlogo img{height:60px!important}}
/* v63 — badges row: Japan Technology (left) · BabyJoy logo (centre) · Saudi Made (right); physical sides in AR and EN. Menu row below on desktop, burger on mobile */
.mt-header .container-xl>.bjx-hrow{display:grid!important;direction:ltr;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"top top top" "soc nav lang";align-items:center;column-gap:16px!important;row-gap:0!important;min-height:0!important;padding:0!important}
.bjx-hrow>.bjx-hbadges{grid-area:top;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding:14px 0 12px!important;width:100%!important}
.bjx-hb{display:flex;align-items:center}
.bjx-hb-jp{justify-content:flex-start}.bjx-hb-sa{justify-content:flex-end}
.bjx-hb img{display:block;width:auto!important;max-width:100%!important;border-radius:12px;box-shadow:0 3px 10px rgba(40,46,120,.18)}
.bjx-hb-jp img{height:58px!important}
.bjx-hb-sa img{height:58px!important;background:#fff;padding:8px 14px;box-sizing:border-box}
.bjx-hbadges .bjx-hlogo-col{display:flex;justify-content:center}
.bjx-hbadges .bjx-hlogo img{height:84px!important}
.bjx-hrow>.bjx-nav{grid-area:nav;direction:ltr;border-top:2px solid rgba(255,255,255,.55);padding:8px 0 10px!important}
html[dir=rtl] .bjx-hrow>.bjx-nav{direction:rtl}
.bjx-hrow>.col-10{grid-area:soc;justify-self:start;align-self:stretch;display:flex;align-items:center;border-top:2px solid rgba(255,255,255,.55)}
.bjx-hrow>.col-2{grid-area:lang;justify-self:end;align-self:stretch;display:flex!important;align-items:center;border-top:2px solid rgba(255,255,255,.55)}
.bjx-hrow>.col-10,.bjx-hrow>.col-2{justify-self:stretch}.bjx-hrow>.col-2{justify-content:flex-end}
.bjx-hrow .bjx-nav a{font-size:1.55rem!important;padding:.7rem 1.2rem!important}
@media(min-width:992px) and (max-width:1365px){.bjx-hrow .bjx-nav a{font-size:1.4rem!important;padding:.6rem .85rem!important}.bjx-hbadges .bjx-hlogo img{height:76px!important}.bjx-hb-jp img,.bjx-hb-sa img{height:52px!important}}
@media(min-width:992px) and (max-width:1279px){.bjx-hrow>.col-10{visibility:hidden}}
@media(max-width:991px){
 .mt-header .container-xl{padding-left:12px!important;padding-right:12px!important}
 .mt-header .container-xl>.bjx-hrow{grid-template-columns:40px minmax(0,1fr) 40px;grid-template-areas:"sp top menu";column-gap:6px!important}
 .bjx-hrow>.bjx-hbadges{grid-area:top;gap:8px;padding:10px 0!important}
 .bjx-hbadges .bjx-hlogo img{height:46px!important}
 .bjx-hb-jp img{height:32px!important;border-radius:6px}
 .bjx-hb-sa img{height:32px!important;padding:4px 7px;border-radius:6px}
 .bjx-hrow>.bjx-nav,.bjx-hrow>.col-10{display:none!important}
 .bjx-hrow>.col-2{grid-area:menu;border-top:0;justify-content:flex-end}
 .bjx-hrow>.col-2 .mt-lang{display:none!important}
 .bjx-burger{width:40px!important;height:40px!important;padding:0 10px!important}
}
@media(max-width:374px){.bjx-hbadges .bjx-hlogo img{height:40px!important}.bjx-hb-jp img,.bjx-hb-sa img{height:27px!important}}
.bjx-hrow .mt-social img[alt="X (Twitter)"]{content:url("https://babyjoy-arabia.com/wp-content/uploads/babyjoy/img/brand/x-header.svg");filter:none!important}
.bjx-hrow>.bjx-hbadges{border-bottom:2px solid rgba(255,255,255,.55)}
.bjx-hrow>.bjx-nav,.bjx-hrow>.col-10,.bjx-hrow>.col-2{border-top:0!important}
.bjx-hrow .bjx-nav a{font-size:1.75rem!important;padding:.7rem 1.3rem!important}
@media(min-width:992px) and (max-width:1365px){.bjx-hrow .bjx-nav a{font-size:1.55rem!important;padding:.6rem .9rem!important}}
@media(min-width:992px) and (max-width:1099px){.bjx-hrow .bjx-nav a{font-size:1.4rem!important;padding:.6rem .7rem!important}}
@media(max-width:991px){.bjx-hrow>.bjx-hbadges{border-bottom:0}}
.mt-header .container-xl{margin-left:auto!important;margin-right:auto!important;width:auto!important;box-sizing:border-box}
@media(min-width:992px) and (max-width:1599px){.bjx-hrow>.col-10{visibility:hidden}}
@media(min-width:1440px){.mt-header .container-xl{max-width:1640px!important}.bjx-hrow>.col-10{visibility:visible}.bjx-hrow .mt-social img{width:22px!important;height:22px!important}.bjx-hrow .mt-social li{margin:0 1px!important}}
@media(min-width:992px) and (max-width:1439px){.bjx-hrow>.col-10{visibility:hidden}}

/* The slogan heads the video section, above the video instead of on it; the section starts right under the header. */
header.mt-header + section.mt-main_banner { margin-top: 0 !important; background: linear-gradient(180deg, #F2F6EC, #E9EFE1); border-radius: 0; padding: 34px 0 0 !important; overflow: hidden; }
.bjx-slogan-h { text-align: center; padding: 0 16px 26px; line-height: 1.1; }
.bjx-slogan-h img { display: inline-block; width: auto !important; max-width: min(820px, 92vw) !important; height: auto; max-height: 104px; margin: 0 !important; }
.bjx-slogan-h .en-slogan { display: inline-block !important; width: auto !important; position: static !important; margin: 0 !important; text-align: center !important; font-size: clamp(3.4rem, 5.4vw, 6.6rem) !important; font-weight: 900 !important; letter-spacing: -.01em; }
.mt-main_banner video { display: block; border-radius: 0; }
@media (max-width: 767px) {
  header.mt-header + section.mt-main_banner { margin-top: 0 !important; border-radius: 0; padding-top: 22px !important; }
  .bjx-slogan-h { padding-bottom: 16px; }
  .bjx-slogan-h img { max-height: 58px; }
  .bjx-slogan-h .en-slogan { font-size: 2.9rem !important; }
}

/* Sound: a clear "Sound on / Sound off" button on the video (the video now has a sound track). */
.mt-sound { top: auto !important; bottom: 16px !important; width: auto !important; height: auto !important; display: inline-flex; align-items: center; gap: .6rem; background: #172A7B !important; color: #fff !important; border: 0; border-radius: 999px !important; padding: .6rem 1.2rem .6rem .7rem !important; box-shadow: 0 4px 14px rgba(0,0,0,.18); font: inherit; font-weight: 700; font-size: 1.4rem; cursor: pointer; }
.mt-sound img { width: 26px; height: 26px; }

/* 45° comparison: both stills the same size; the other diaper gets a red X and a red box where it leaked. */
.bjx-cmp { margin: 3.6rem auto 0; max-width: none; text-align: center; }
.bjx-cmp-h { font-size: clamp(2.8rem, 4.6vw, 5rem); line-height: 1.1; font-weight: 800; color: var(--navy, #172A7B); margin: 0 0 2.4rem; letter-spacing: -.01em; }
.bjx-cmp-h em { font-style: normal; color: #04A630; display: inline-block; font-weight: 800 !important; font-family: inherit; }
.bjx-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: stretch; max-width: 640px; margin: 0 auto; }
.bjx-cmp figure { margin: 0; position: relative; border-radius: 2.4rem; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.bjx-cmp-bj { border: 4px solid #04A630; box-shadow: 0 18px 40px rgba(4,166,48,.28); }
.bjx-cmp-ot { border: 4px solid #E0262E; box-shadow: 0 14px 30px rgba(224,38,46,.2); }
.bjx-cmp-pw { position: relative; }
.bjx-cmp-ph { display: block; width: 100%; height: auto; aspect-ratio: 320/380; object-fit: cover; object-position: 50% 100%; }
.bjx-cmp-ot .bjx-cmp-ph { filter: grayscale(.3); }
.bjx-cmp figcaption { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: .6rem; padding: 1rem .8rem 1.2rem; }
.bjx-cmp-bj figcaption { background: #04A630; }
.bjx-cmp-ot figcaption { background: #C81F27; }
.bjx-cmp-tag { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-weight: 800; font-size: 2.4rem; line-height: 1; }
.bjx-cmp-tag svg { width: 42px; height: 42px; flex: none; }
.bjx-cmp-bj .bjx-cmp-tag svg circle { fill: #fff; } .bjx-cmp-bj .bjx-cmp-tag svg path { stroke: #04A630; }
.bjx-cmp-logo { height: 34px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.bjx-cmp-name { color: #fff; font-weight: 700; font-size: 1.8rem; opacity: .95; }
.bjx-cmp-rib { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; background: #F5C400; color: #172A7B; font-weight: 800; font-size: 1.6rem; padding: .7rem 1.4rem; border-radius: 5rem; box-shadow: 0 6px 14px rgba(0,0,0,.18); text-transform: uppercase; letter-spacing: .02em; }
.bjx-cmp-box { position: absolute; left: 22%; right: 12%; top: 84%; height: 14%; border: 3px solid #E0262E; border-radius: 10px; box-shadow: 0 0 0 3px rgba(255,255,255,.75); }
.bjx-cmp-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 56px; height: 56px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.bjx-cmp-x svg { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) {
  .bjx-cmp { margin-top: 2.4rem; } .bjx-cmp-h { margin-bottom: 1.6rem; } .bjx-cmp-grid { gap: 1rem; }
  .bjx-cmp figure { border-radius: 1.8rem; } .bjx-cmp figcaption { padding: .8rem .6rem 1rem; gap: .4rem; }
  .bjx-cmp-tag { font-size: 1.7rem; } .bjx-cmp-tag svg { width: 28px; height: 28px; }
  .bjx-cmp-logo { height: 26px; } .bjx-cmp-name { font-size: 1.4rem; }
  .bjx-cmp-rib { font-size: 1.15rem; padding: .45rem .8rem; top: 8px; inset-inline-start: 8px; }
  .bjx-cmp-x { width: 40px; height: 40px; top: 8px; inset-inline-end: 8px; }
}
/* entrance (the page script adds .go when the block scrolls into view) */
.bjx-cmp .bjx-cmp-h, .bjx-cmp figure, .bjx-cmp-rib { transition: transform .6s cubic-bezier(.2,1.4,.4,1), opacity .5s; }
.bjx-cmp:not(.go) .bjx-cmp-h { opacity: 0; transform: translateY(16px); }
.bjx-cmp:not(.go) .bjx-cmp-bj { opacity: 0; transform: scale(.85); }
.bjx-cmp:not(.go) .bjx-cmp-ot { opacity: 0; transform: translateY(20px); }
.bjx-cmp:not(.go) .bjx-cmp-rib { opacity: 0; transform: scale(.3) rotate(-12deg); }
.bjx-cmp:not(.go) .bjx-cmp-x { opacity: 0; transform: scale(.3); }
.bjx-cmp-x { transition: transform .5s cubic-bezier(.2,1.4,.4,1) .8s, opacity .4s .8s; }
.bjx-cmp.go .bjx-cmp-bj { transition-delay: .15s; } .bjx-cmp.go .bjx-cmp-ot { transition-delay: .3s; } .bjx-cmp.go .bjx-cmp-rib { transition-delay: .65s; }
.bjx-cmp.now * { transition: none !important; }

/* "Shop now": bigger. */
#shop .bjx-eyebrow { display: inline-block; background: #5b7f5f; color: #fff !important; font-size: 2.2rem; font-weight: 800; letter-spacing: .06em; padding: .8rem 2.6rem; border-radius: 999px; margin-bottom: 1.2rem; box-shadow: 0 6px 16px rgba(91,127,95,.3); }
@media (max-width: 767px) { #shop .bjx-eyebrow { font-size: 1.8rem; padding: .6rem 2rem; } }

/* Product sections: each band is its own wave shape with a thin white gap between bands. */
:root { --wh: 72px; --bgap: 44px;
  --wA: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V52C260 4 520 0 760 30S1220 96 1440 44V100Z'/%3E%3C/svg%3E");
  --wAb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0V48C260 96 520 100 760 70S1220 4 1440 56V0Z'/%3E%3C/svg%3E");
  --wB: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M1440 100V52C1180 4 920 0 680 30S220 96 0 44V100Z'/%3E%3C/svg%3E");
  --wBb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M1440 0V48C1180 96 920 100 680 70S220 4 0 56V0Z'/%3E%3C/svg%3E"); }
@media (max-width: 767px) { :root { --wh: 36px; --bgap: 26px; } }
#shop, #size-guide, #olive, #compressed, #size8, #wipes, #reviews { margin: var(--bgap) 0 0 !important;
  -webkit-mask: var(--wA) top/100% var(--wh) no-repeat, var(--wAb) bottom/100% var(--wh) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% calc(100% - 2*var(--wh) + 2px) no-repeat;
  mask: var(--wA) top/100% var(--wh) no-repeat, var(--wAb) bottom/100% var(--wh) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% calc(100% - 2*var(--wh) + 2px) no-repeat;
  padding: calc(var(--wh) + 1.2rem) 0 calc(var(--wh) + 1.2rem) !important; }
#size-guide, #compressed, #wipes { -webkit-mask-image: var(--wB), var(--wBb), linear-gradient(#000 0 0); mask-image: var(--wB), var(--wBb), linear-gradient(#000 0 0); }
#reviews { background: radial-gradient(ellipse at 50% 55%, #F6F8F1, #ECEFE4) !important; margin-bottom: var(--bgap) !important; }
@media (max-width: 767px) { #shop, #size-guide, #olive, #compressed, #size8, #wipes, #reviews { padding: calc(var(--wh) + .8rem) 0 calc(var(--wh) + 1rem) !important; } }

/* Test intro: the "leak protection" line under the heading is removed; the heading keeps the concept's spacing to the paragraph (its v61 rule). */
.bjx-solo .bjx-hl { margin-bottom: 1.6rem !important; }
.bjx-solo .bjx-hl3 { margin-left: auto; margin-right: auto; }

/* Phone and tablet header, balanced: language button | Japan Technology | BabyJoy logo (page centre) | Saudi Made | menu button.
   The two round buttons mirror each other at the edges and each badge sits centred in its half. */
@media (max-width: 991px) {
  .mt-header .container-xl > .bjx-hrow { grid-template-columns: 40px minmax(0,1fr) auto minmax(0,1fr) 40px !important; grid-template-areas: none !important; }
  .mt-header .container-xl > .bjx-hrow > .bjx-hbadges { display: contents !important; }
  .mt-header .bjx-hrow .bjx-hb-jp { grid-column: 2; grid-row: 1; justify-self: center; padding: 10px 0; }
  .mt-header .bjx-hrow .bjx-hlogo-col { grid-column: 3; grid-row: 1; padding: 10px 0; }
  .mt-header .bjx-hrow .bjx-hb-sa { grid-column: 4; grid-row: 1; justify-self: center; padding: 10px 0; }
  .mt-header .container-xl > .bjx-hrow > .col-2 { display: contents !important; }
  .mt-header .container-xl > .bjx-hrow > .col-2 .bjx-burger { grid-column: 1; grid-row: 1; justify-self: start; }
  .mt-header .container-xl > .bjx-hrow > .col-2 .mt-lang { display: flex !important; grid-column: 5; grid-row: 1; justify-self: end; align-self: center; margin: 0 !important; padding: 0 !important; width: 40px !important; }
  .mt-header .container-xl > .bjx-hrow > .col-2 .mt-lang li { list-style: none; padding: 0 !important; width: 40px !important; }
  .mt-header .container-xl > .bjx-hrow > .col-2 .mt-lang li a { display: flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; line-height: 1 !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; background: #282E78 !important; color: #fff !important; border: 2px solid #fff !important; box-sizing: border-box; }
  html[lang^="ar"] .mt-header .bjx-hrow .mt-lang li a::before { content: "EN"; font-size: 13px; font-weight: 800; }
  html[lang^="en"] .mt-header .bjx-hrow .mt-lang li a::before { content: "عربي"; font-size: 12px; font-weight: 800; }
}

/* Phone and tablet header, v9.3:
   1. The Japan Technology and Saudi Made badges shrink in proportion to the space beside the logo (never squeezed,
      never under the buttons): each badge cell spans its column and the image fits inside it.
   2. Menu button on the left and language button on the right, on Arabic and English pages alike. */
@media (max-width: 991px) {
  .mt-header .bjx-hrow .bjx-hb-jp, .mt-header .bjx-hrow .bjx-hb-sa { justify-self: stretch; min-width: 0; display: flex; justify-content: center; align-items: center; }
  .mt-header .bjx-hrow .bjx-hb img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 32px; object-fit: contain; }
}
@media (max-width: 374px) { .mt-header .bjx-hrow .bjx-hb img { max-height: 27px; } }

/* Logo under the video: BabyJoy's official heart logo as one image (Arabic heart on Arabic pages, English on English). */
.hero-badge { aspect-ratio: auto !important; }
.hero-badge .bj-badge-o { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.14)); }

/* Test heading: the key message "Zero leakage" / «لا تسريب» in heavy navy type with a green swoosh (concept v66). */
.bjx .bjx-hl.bjx-hl-zl{color:#1F2A7C;font-weight:900!important;font-size:clamp(4.6rem,7vw,8.4rem);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:2.2rem!important}
html[dir=rtl] .bjx .bjx-hl.bjx-hl-zl{letter-spacing:0;font-size:clamp(4.8rem,7.4vw,8.8rem)}
.bjx-zl{position:relative;display:inline-block;padding-bottom:.18em;white-space:nowrap}
.bjx-zl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.04em;height:.26em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M4 30C90 8 220 2 396 14C250 12 120 20 18 38Z' fill='%2394C83D'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(max-width:767px){.bjx .bjx-hl.bjx-hl-zl{font-size:4.6rem}html[dir=rtl] .bjx .bjx-hl.bjx-hl-zl{font-size:5rem}}
@media(max-width:767px){.bjx .bjx-hl.bjx-hl-zl{font-size:3.9rem}}
@media(min-width:768px){.bjx .bjx-hl.bjx-hl-zl{text-align:center!important;margin-left:auto;margin-right:auto}}
/* Leakage stopper pocket: BabyJoy's artwork laid out wide (picture with the words beside it, Kareem's mockup), free of the
   round frame, across its own row. */
.wp-band .s8-f img.s8-wide { width: 480px; max-width: 100%; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; }
@media (max-width: 767px) { .wp-band .s8-f img.s8-wide { width: min(330px, 86vw); height: auto; border: 0; } }
/* English menu bar with "Super Big Pants - Size 8": between 992 and 1199px tighter letters, padding and gaps keep the eight items on one line. */
@media(min-width:992px) and (max-width:1199px){html[lang^="en"] .bjx-hrow .bjx-nav{gap:.2rem!important}html[lang^="en"] .bjx-hrow .bjx-nav a{letter-spacing:0!important;padding-left:.5rem!important;padding-right:.5rem!important}}
/* Size finder: the "Where to buy" button keeps its 220px where it fits and narrows to its column on 320px phones. */
#size-guide .bjx-res .bjx-cta{min-width:min(220px,100%)}
/* "Zero leakage" stays on one line on 320px phones: below about 368px it shrinks with the screen. */
@media(max-width:767px){html[lang^="en"] .bjx .bjx-hl.bjx-hl-zl{font-size:min(3.9rem,10.6vw)}}

/* How the test works: the concept's tiles (45° mother-and-baby drawing, counting 45°, staggered tiles, phone descriptions). */
@keyframes bjglow{0%,100%{filter:drop-shadow(0 4px 8px rgba(4,166,48,.25))}50%{filter:drop-shadow(0 0 16px rgba(4,166,48,.6))}}
/* v49 tile animations: 45° + check, staggered (JS adds .go per tile 0/0.7/1.4s) */
.bjx-fact:first-child{position:relative;overflow:hidden;isolation:isolate}
.bjx-fact:first-child::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e6f2df,#f6f8f1 70%);opacity:0;transition:opacity 1.2s ease .4s;z-index:-1}
.bjx-fact.go:first-child::before{opacity:1}
.bjx-ang{display:flex;justify-content:center}
.bjx-ang svg{width:62px;height:auto;overflow:visible}
@media(min-width:768px){.bjx-ang svg{width:84px}}
.bjx-ang .bar{transform-box:view-box;transform-origin:10px 56px;transition:transform 1.2s cubic-bezier(.3,1.3,.5,1)}
.bjx-fact:not(.go) .bjx-ang .bar{transform:rotate(0)}
.bjx-fact.go .bjx-ang .bar{transform:rotate(-45deg)}
.bjx-ang .arc{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease .1s}
.bjx-fact.go .bjx-ang .arc{stroke-dashoffset:0}
.bjx-f45 .n{font-variant-numeric:tabular-nums}
.bjx-fact.go .bjx-chk svg{transform:scale(1);opacity:1}
.bjx-fact.go .bjx-chk .tick{stroke-dashoffset:0}
.bjx-fact.go .bjx-chk svg{animation:bjglow 2.4s ease-in-out 1.2s infinite}
.bjx-fact.now *,.bjx-fact.now::before{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.bjx-fact *{transition:none!important;animation:none!important}}
/* v50 explainer lines visible on mobile */
@media(max-width:767px){.bjx-fact p{display:block!important;font-size:1.1rem;line-height:1.3;color:#5b6475;margin:.3rem 0 0;font-weight:500}}
@media(max-width:767px){.bjx-fact p{order:5}.bjx-fact .bjx-fshort{order:4}}
.bjx-fshort:empty{display:none!important}
.bjx-fact p:empty{display:none!important}
/* v56 45° tile: line-art mother cradling baby; baby rotates from flat to 45° around the hip pivot */
.bjx-mom svg{width:78px;height:auto}
@media(min-width:768px){.bjx-mom svg{width:104px}}
.bjx-mom .bar{transform-origin:42px 60px}
.bjx-mom{padding-top:8px}
.bjx-mom svg{width:70px;overflow:visible}
@media(min-width:768px){.bjx-mom svg{width:96px}}
@media(max-width:767px){.bjx-mom{padding-top:2px}.bjx-mom svg{width:62px}.bjx-fact:first-child .bjx-f45{font-size:3.8rem!important}}
@media(max-width:767px){.bjx-fact:first-child .bjx-ficon{height:auto!important;min-height:78px;gap:0!important}.bjx-mom svg{width:58px}}

/* Comparison captions: white captions with a navy No leakage / «لا تسريب» pill and a red Leaks pill (concept v66). */
.bjx-cmp-bj figcaption,.bjx-cmp-ot figcaption{background:#fff!important}
.bjx-cmp-bj{border-color:#94C83D!important;box-shadow:0 14px 30px rgba(31,42,124,.18)!important}
.bjx-cmp-tag{border-radius:999px;padding:.55rem 1.4rem .55rem .7rem;font-weight:900!important;letter-spacing:.02em}
html[dir=rtl] .bjx-cmp-tag{padding:.55rem .7rem .55rem 1.4rem;letter-spacing:0}
.bjx-cmp-bj .bjx-cmp-tag{background:#1F2A7C;color:#fff}
.bjx-cmp-bj .bjx-cmp-tag svg circle{fill:#04A630!important;stroke:#fff;stroke-width:5}.bjx-cmp-bj .bjx-cmp-tag svg path{stroke:#fff!important}
.bjx-cmp-ot .bjx-cmp-tag{background:#C81F27;color:#fff}
.bjx-cmp-ot .bjx-cmp-name{color:#1F2A7C!important;font-weight:800;opacity:1}
.bjx-cmp-bj .bjx-cmp-logo{filter:none}
.bjx-cmp-tag,.bjx-cmp-ot .bjx-cmp-tag{font-size:2rem!important}
.bjx-cmp-tag svg,.bjx-cmp-ot .bjx-cmp-tag svg{width:34px!important;height:34px!important}
@media(max-width:767px){.bjx-cmp-tag,.bjx-cmp-ot .bjx-cmp-tag{font-size:1.45rem!important;padding:.4rem 1rem .4rem .45rem}html[dir=rtl] .bjx-cmp-tag{padding:.4rem .45rem .4rem 1rem}.bjx-cmp-tag svg,.bjx-cmp-ot .bjx-cmp-tag svg{width:24px!important;height:24px!important}}
.bjx-cmp-tag{white-space:nowrap}
@media(max-width:767px){.bjx .bjx-hl.bjx-hl-zl{font-size:3.9rem}.bjx-cmp-tag,.bjx-cmp-ot .bjx-cmp-tag{font-size:1.3rem!important;gap:.45rem}}

/* Menu button lines: painted as the button's own background, so they show on every browser
   (iPhone Safari showed an empty blue circle when the lines came from the inner spans). */
.bjx-burger { -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) !important;
  background-size: 16px 2px, 16px 2px, 16px 2px !important; background-repeat: no-repeat !important;
  background-position: center calc(50% - 6px), center center, center calc(50% + 6px) !important; }
.bjx-burger span { visibility: hidden !important; }

/* Desktop header with eight menu items: social icons, the badge and logo group and the language button share the top row;
   the menu has the full second row (it collided with the social icons and the language button when it shared their row). */
@media(min-width:992px){
.mt-header .container-xl>.bjx-hrow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;grid-template-areas:"soc top lang" "nav nav nav"!important}
.bjx-hrow>.bjx-hbadges{width:auto!important;border-bottom:0!important}
.bjx-hrow>.col-10,.bjx-hrow>.col-2{border-top:0!important}
.bjx-hrow>.bjx-nav{border-top:2px solid rgba(255,255,255,.55)!important}
}

/* Reviews section: hidden for now. Delete this rule to show it again (the section is still in the home pages). */
#reviews { display: none !important; }
/* Closing section (#buy, after the wipes, in place of the reviews), as in Kareem's screenshot: a pale green wave band with
   the BabyJoy heart between two doodle hearts, the gold "#1 in the GCC" emblem (brand icon 01/02, gold gradient, no white
   disc: gcc_badge.py), the #1 headline between spark doodles, two short lines and a Shop Now button (arrow on the left) to
   the retailers (#shop). Doodles: Higgsfield, see buy_assets.py. Lettering: the site's own fonts (Montserrat / Tajawal). */
#buy { position: relative; border-radius: 0 !important; background: radial-gradient(ellipse at 50% 38%, #FAFCF5, #E8F0DA) !important;
  margin: var(--bgap) 0 0 !important;   /* the white space under it is the social icons row (.buy-social) */
  -webkit-mask: var(--wA) top/100% var(--wh) no-repeat, var(--wAb) bottom/100% var(--wh) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% calc(100% - 2*var(--wh) + 2px) no-repeat;
  mask: var(--wA) top/100% var(--wh) no-repeat, var(--wAb) bottom/100% var(--wh) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% calc(100% - 2*var(--wh) + 2px) no-repeat;
  padding: calc(var(--wh) + .8rem) 0 calc(var(--wh) + 1.6rem) !important; }
#buy .buy-logo { display: flex; justify-content: center; align-items: center; gap: 1.6rem; margin-bottom: .6rem; }   /* logo and the gold #1 circle side by side, hearts on the outer ends */
#buy .buy-brand { width: min(280px, 38vw); height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.12)); }   /* the file has a soft glow margin: the visible heart is about 42% of a phone's width */
#buy .buy-doodle { width: 44px; max-width: 8vw; height: auto; transform: translateY(32%); }
#buy .buy-doodle-r { transform: translateY(32%) scaleX(-1); }
#buy .buy-gcc { display: block; width: min(170px, 25vw); height: auto; margin: 0; }   /* about two thirds of the heart's height */
#buy .buy-h { position: relative; display: inline-block; color: #1F2A7C; font-weight: 900; font-size: clamp(3.2rem, 4vw, 5rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 auto 2rem; padding: 0; text-transform: none;
  text-shadow: 0 0 2px #fff, 0 2px 0 #fff; }
#buy .buy-h .buy-no1 { font-size: 1.22em; line-height: 0; }
html[dir=rtl] #buy .buy-h { font-size: clamp(3.4rem, 4.2vw, 5rem); line-height: 1.2; letter-spacing: 0; }   /* the long second line («الخيار الأول لعائلات الخليج») about as wide as the English one */
#buy .buy-spark { position: absolute; top: -.3em; width: .85em; height: auto; }   /* top corners of the headline box, beside the shorter first line */
#buy .buy-spark-l { left: 0; }
#buy .buy-spark-r { right: 0; transform: scaleX(-1); }
#buy .buy-cta { display: flex; align-items: center; justify-content: center; gap: 1.4rem; width: 280px; max-width: 52vw; margin: 0 auto; background: #2F6B3A; color: #fff !important; font-weight: 800; font-size: 1.9rem; padding: 1.1rem 2rem; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 18px rgba(47,107,58,.3); transition: background .2s, transform .2s; }
#buy .buy-cta span { font-size: 1.2em; line-height: 1; }
#buy .buy-cta:hover, #buy .buy-cta:focus-visible { background: #24552D; transform: translateY(-2px); outline: none; }
#buy .buy-cta:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2F6B3A; }
@media (max-width: 767px) {
  #buy { padding: calc(var(--wh) + .4rem) 0 calc(var(--wh) + 1.2rem) !important; }
  #buy .buy-logo { gap: min(1rem, 2.4vw); }
  #buy .buy-h { font-size: min(3.2rem, 6vw); margin-bottom: 1.6rem; }   /* two lines; the second («for Parents Across the GCC») about 85% of the width */
  html[dir=rtl] #buy .buy-h { font-size: min(4.4rem, 7vw); }   /* the second Arabic line («الخيار الأول لعائلات الخليج») is long: sized to stay on one line */
  #buy .buy-cta { font-size: min(1.6rem, 4vw); padding: .9rem 1.4rem; gap: 1rem; }
}

/* Footer as in Kareem's screenshot: two centred rows of links divided by thin bars (pages, then terms and privacy), then the
   copyright line. Overrides the links rule inlined in each page. */
.mt-footer .mt-footer-links { gap: 6px 0 !important; margin: 0 0 4px !important; }
.mt-footer .mt-footer-links li { display: flex; align-items: center; }
.mt-footer .mt-footer-links li + li::before { content: ""; display: inline-block; width: 1px; height: 1.15em; background: rgba(255,255,255,.7); margin: 0 1.6rem; }
.mt-footer .mt-footer-legal { margin-bottom: 1rem !important; }
@media (max-width: 767px) { .mt-footer .mt-footer-links li + li::before { margin: 0 min(.9rem, 2.2vw); } .mt-footer .mt-footer-links a { font-size: min(1.4rem, 3.6vw); white-space: nowrap; } }   /* each row on one line, as in the screenshot */

/* Floating contact button (fixed bottom corner, mt-style.css). Phones, as in Kareem's screenshot: the footer ends just under
   the copyright line and the button sits 3.9rem up, so at the end of the page it rests at the left beside the second row of
   links, above the copyright line and clear of the text; the copyright stays on one line down to 320px. Tablets: the
   footer ends with room for the button under the text. */
@media (max-width: 767px) { .mt-footer { padding-bottom: 1rem !important; } .mt-footer .mt-footer-legal { margin-bottom: 2.2rem !important; } .mt-footer p { font-size: min(1.6rem, 4.2vw); } .mt-contact_btn { bottom: 3.9rem; } }
@media (min-width: 768px) and (max-width: 1023px) { .mt-footer { padding-bottom: calc(5rem + 5rem + 1.2rem) !important; } }

/* Social icons in the white space between the closing section and the footer (Kareem: "add SM icons at the bottom, in the
   white area"): the live site's six icons and links, the same list as the header, in their own lime green. */
.buy-social { padding: var(--bgap) 0 calc(var(--bgap) * 1.2); }
.buy-social .mt-social { justify-content: center; gap: 1.4rem; }
.buy-social .mt-social li { margin: 0; }
.buy-social .mt-social img { display: block; width: 40px; height: 40px; transition: transform .2s; }
.buy-social .mt-social a:hover img, .buy-social .mt-social a:focus-visible img { transform: scale(1.1); }
@media (max-width: 767px) { .buy-social .mt-social { gap: min(1.2rem, 3vw); } .buy-social .mt-social img { width: min(36px, 9vw); height: auto; } }