/* MAROCSTOR visual identity — scoped customizations */
:root{--maroc-red:#c91832;--maroc-green:#08784b;--maroc-ink:#172b29;--maroc-gold:#d9aa55}
body{background:#fbfcfa;color:var(--maroc-ink)}
yc-header{box-shadow:0 8px 30px rgba(18,49,38,.06)}
.yc-btn,button,a{transition:background-color .2s,color .2s,transform .2s}
.maroc-wrap{max-width:1240px;margin:auto;padding:0 22px}
.maroc-hero{direction:rtl;position:relative;overflow:hidden;background:linear-gradient(115deg,#073e31,#0a7851 60%,#128a60);color:white;margin:20px auto 0;border-radius:24px;min-height:390px;display:flex;align-items:center;isolation:isolate}
.maroc-hero:before{content:'';position:absolute;width:520px;height:520px;left:-120px;top:-150px;border-radius:50%;border:75px solid rgba(255,255,255,.07);z-index:-1}
.maroc-hero:after{content:'✦';position:absolute;left:12%;bottom:4%;font-size:160px;color:rgba(255,255,255,.07);z-index:-1}
.maroc-hero-inner{padding:65px 7%;max-width:750px}
.maroc-eyebrow{display:inline-flex;padding:9px 16px;border:1px solid #ffffff70;border-radius:50px;font-weight:700;font-size:14px;background:#ffffff16}
.maroc-hero h1{font-size:clamp(36px,5vw,66px);line-height:1.18;margin:22px 0 14px;color:#fff;font-weight:900}
.maroc-hero p{font-size:clamp(16px,2vw,21px);line-height:1.9;color:#f1f8f4;max-width:650px}
.maroc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.maroc-actions a{padding:15px 27px;border-radius:12px;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.maroc-primary{background:#fff;color:#07543b!important}.maroc-secondary{border:1px solid #ffffffa0;color:#fff!important}
.maroc-benefits{direction:rtl;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px auto 45px}
.maroc-benefit{background:#fff;border:1px solid #e5ebe7;border-radius:16px;padding:20px;display:flex;gap:12px;align-items:center;box-shadow:0 8px 22px #143c2410}
.maroc-benefit-icon{font-size:27px}.maroc-benefit strong{display:block;font-size:16px}.maroc-benefit span{font-size:13px;color:#65746e}
.maroc-strip{direction:rtl;margin:10px auto 35px;padding:25px;border-radius:18px;background:#f5f0e6;border:1px solid #e9dec7;display:flex;align-items:center;justify-content:space-between;gap:15px}
.maroc-strip h2{font-size:25px;margin:0 0 7px}.maroc-strip p{margin:0;color:#5b685f}.maroc-strip a{white-space:nowrap;padding:13px 22px;background:#b91c35;color:#fff;text-decoration:none;border-radius:10px;font-weight:800}
@media(max-width:720px){.maroc-wrap{padding:0 12px}.maroc-hero{margin-top:10px;min-height:400px;border-radius:16px}.maroc-hero-inner{padding:44px 24px}.maroc-benefits{grid-template-columns:1fr;gap:10px;margin-bottom:26px}.maroc-benefit{padding:14px}.maroc-strip{display:block}.maroc-strip a{display:inline-block;margin-top:17px}.maroc-hero h1{font-size:40px}}

/* Scoped storefront refinements */
.maroc-hero{max-width:1240px}.maroc-hero-inner{position:relative;z-index:1}
.maroc-hero h1,.maroc-hero p{overflow-wrap:anywhere}
/* Keep recognizable WhatsApp floating widgets small, without changing unrelated SVG icons.
   Third-party injected widgets may require a separate app-side fix. */
:is([class*="whatsapp" i],[id*="whatsapp" i],[class*="wa-widget" i],[id*="wa-widget" i]) :is(svg,img){max-width:56px!important;max-height:56px!important;width:56px!important;height:56px!important;object-fit:contain}
:is(img[src*="whatsapp" i],img[src*="wa.me" i]){max-width:56px!important;max-height:56px!important;object-fit:contain}
@media(max-width:720px){.maroc-hero{min-height:340px}.maroc-hero h1{font-size:clamp(29px,9vw,42px)}.maroc-hero-inner{padding:36px 22px}}


/* MAROCSTOR V10 - responsive express checkout */
@media (max-width: 767px) {
  .express-checkout { width: 100%; max-width: 100%; }
  .express-checkout .fields { display: flex; flex-direction: column; gap: 12px; }
  .express-checkout .field, .express-checkout input, .express-checkout textarea, .express-checkout yc-combobox { width: 100%; max-width: 100%; box-sizing: border-box; }
  .announcement .message { text-align: center; font-size: 12px; line-height: 1.6; }
}

/* MAROCSTOR V11 — bilingual, green-only promotional marquee */
#youcan-section--announcement-bar {padding-inline:0!important;overflow:hidden;background:#08734f!important;color:#fff!important}
#youcan-section--announcement-bar .ms-announcement {overflow:hidden;white-space:nowrap;width:100%;direction:ltr}
#youcan-section--announcement-bar .ms-announcement-track {display:flex;width:max-content;animation:ms-marquee 42s linear infinite;will-change:transform}
#youcan-section--announcement-bar .ms-announcement-set {display:flex;flex:none;align-items:center;gap:36px;padding-inline:18px}
#youcan-section--announcement-bar .ms-announcement-set span {display:inline-block;color:#fff;font-size:13px;font-weight:700;line-height:1.5;padding-block:9px}
#youcan-section--announcement-bar .ms-announcement-set span::after {content:"✦";margin-inline-start:36px;color:#b9e3c9}
@keyframes ms-marquee {to {transform:translateX(-33.333333%)}}
#youcan-section--announcement-bar .ms-announcement:hover .ms-announcement-track {animation-play-state:paused}
@media (prefers-reduced-motion:reduce){#youcan-section--announcement-bar .ms-announcement-track{animation:none}}
/* Show full hero artwork, never crop important content on mobile */
.ms-v3-visual>img {object-fit:contain!important;height:auto!important;max-height:none!important}
@media(max-width:780px){
 .ms-v3-visual>img {aspect-ratio:auto!important;object-fit:contain!important;width:100%!important}
 .ms-v3-hero {overflow:hidden}
 #youcan-section--announcement-bar .ms-announcement-set {gap:22px}
 #youcan-section--announcement-bar .ms-announcement-set span {font-size:12px;padding-block:8px}
 #youcan-section--announcement-bar .ms-announcement-track {animation-duration:32s}
}

/* MAROCSTOR V13 — coherent green storefront / responsive checkout */
:root {--ms-green:#08734f;--ms-dark:#065b3e;--ms-pale:#eaf5ed;}
/* Preserve original logo, only slightly increase its rendered size. */
header img[alt*="logo" i],header a[aria-label="home"] img {max-height:74px;object-fit:contain}
/* Native YouCan express checkout, keep its actual submission logic intact. */
.single-product yc-product-info .buy-button .buy-area .express-checkout{display:grid!important;width:100%!important;max-width:100%!important;border:1px solid #d5e8db!important;border-radius:16px!important;overflow:visible!important;background:#fbfefb!important;color:#164831!important}
.single-product yc-product-info .buy-button .buy-area .express-checkout .header{background:linear-gradient(110deg,#08734f,#0b8b5d)!important;color:#fff!important;padding:15px 18px!important;border-radius:14px 14px 0 0}
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields{background:#fbfefb!important;border-color:#dcebe1!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;padding:52px 18px 20px!important;min-width:0!important}
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields::before{background:#e0f2e6!important;color:#075b3d!important;font-weight:700!important}
.single-product yc-product-info .buy-button .buy-area .express-checkout .field{min-width:0!important}
.single-product yc-product-info .buy-button .buy-area .express-checkout :is(input,select,textarea){max-width:100%!important;min-width:0!important;box-sizing:border-box!important;border:1px solid #cbded2!important;border-radius:10px!important;background:#fff!important;color:#153e2b!important}
.single-product yc-product-info .buy-button .buy-area :is(button.primary,.place-order button,.yc-btn.primary),.single-product .buy-button button.primary{background:#08734f!important;color:#fff!important;border-color:#08734f!important;border-radius:12px!important;font-weight:700!important}
.single-product yc-product-info .buy-button .buy-area :is(button.primary,.place-order button,.yc-btn.primary):hover{background:#065b3e!important}
/* Footer matches the hero / announcement green, on every device. */
footer{background:#eaf5ed!important;color:#174b37!important;border-top:3px solid #08734f!important}
footer .content{border-color:#d0e6d7!important}
footer .links-box .navigation p{color:#075b3d!important;font-weight:700!important}
footer .links-box .navigation a{color:#365d49!important}
footer .copyright{border-top:1px solid #cde1d3;color:#315e48!important}
footer .social-links a.yc-btn{background:#08734f!important;color:white!important;border-radius:50%!important}
/* Ratings and reviews are hidden as requested, no impact on order fields. */
.single-product .rating, .single-product yc-rating, #youcan-section--product-reviews{display:none!important}
@media(max-width:767px){
 .single-product{min-width:0!important;overflow:visible!important}
 .single-product yc-product-info{min-width:0!important;overflow:visible!important}
 .single-product yc-product-info .buy-button{display:block!important;width:100%!important;min-width:0!important;position:relative!important;overflow:visible!important}
 .single-product yc-product-info .buy-button .buy-area{display:grid!important;position:static!important;width:100%!important;min-width:0!important}
 .single-product yc-product-info .buy-button .buy-area .express-checkout{display:grid!important;position:relative!important;visibility:visible!important;opacity:1!important}
 .single-product yc-product-info .buy-button .buy-area .express-checkout .fields{grid-template-columns:minmax(0,1fr)!important;display:grid!important;padding:48px 12px 15px!important;gap:12px!important}
 .single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field{display:grid!important;width:100%!important;grid-column:1/-1!important}
 .single-product yc-product-info .buy-button .buy-area .place-order{position:static!important;padding:12px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
 .single-product yc-product-info .buy-button .buy-area .place-order button{min-height:50px!important;width:100%!important}
 footer .content{padding:28px 18px!important;gap:16px!important}
 footer .content .links-box{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
 footer .content .links-box .navigation{gap:8px!important}
 footer .content .links-box .navigation p{font-size:14px!important}
 footer .content .links-box .navigation .links a{font-size:13px!important}
}

/* MAROCSTOR V14: always-visible native order form, no mobile drawer */
.single-product .buy-button yc-product-form,
.single-product .buy-button .buy-area,
.single-product .buy-button .express-checkout,
.single-product .buy-button .express-checkout .fields {
  visibility:visible!important;opacity:1!important;max-height:none!important;
}
.single-product .buy-button .express-checkout .fields:empty::after{
  content:"يرجى تفعيل حقول الطلب من إعدادات الدفع في YouCan (الاسم، الهاتف، المدينة).";
  display:block;padding:15px;color:#075b3d;background:#eaf5ed;border-radius:10px;
}
.single-product .buy-button .place-order button.primary,
.single-product .buy-button button.primary {background:#08734f!important;border-color:#08734f!important;color:#fff!important;}
@media(max-width:767px){
 .single-product .buy-button .express-checkout .fields {display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
 .single-product .buy-button .express-checkout .fields .field{display:block!important;width:100%!important;}
 .single-product .buy-button .express-checkout .fields input{min-height:46px!important;font-size:16px!important;}
}

/* MAROCSTOR V15: unified service cards, mobile-first */
.ms-v3 .ms-v3-perks {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;max-width:1200px;margin:24px auto 0!important;padding:0 18px 20px!important;box-sizing:border-box}
.ms-v3 .ms-v3-perks .ms-perk-card {min-width:0;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:9px!important;text-align:center!important;background:#f1f8f3!important;border:1px solid #cce7d5!important;border-radius:18px!important;box-shadow:0 4px 16px rgba(7,91,61,.07)!important;padding:22px 12px!important;color:#075b3d!important;transition:transform .2s ease,box-shadow .2s ease}
.ms-v3 .ms-v3-perks .ms-perk-card:hover {transform:translateY(-3px);box-shadow:0 8px 24px rgba(7,91,61,.12)!important}
.ms-v3 .ms-v3-perks .ms-perk-icon {display:grid!important;place-items:center!important;width:48px!important;height:48px!important;flex:none!important;background:#e0f0e6!important;border-radius:14px!important;font-size:25px!important;line-height:1!important}
.ms-v3 .ms-v3-perks .ms-perk-card strong {font-size:16px!important;line-height:1.5!important;color:#075b3d!important;font-weight:800!important}
.ms-v3 .ms-v3-perks .ms-perk-card small {font-size:12px!important;line-height:1.6!important;color:#567765!important;font-weight:500!important}
@media(max-width:767px){
 .ms-v3 .ms-v3-perks {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;padding:0 9px 16px!important;margin-top:16px!important}
 .ms-v3 .ms-v3-perks .ms-perk-card {padding:14px 5px!important;border-radius:12px!important;gap:6px!important}
 .ms-v3 .ms-v3-perks .ms-perk-icon {width:34px!important;height:34px!important;border-radius:10px!important;font-size:19px!important}
 .ms-v3 .ms-v3-perks .ms-perk-card strong {font-size:11px!important;line-height:1.4!important}
 .ms-v3 .ms-v3-perks .ms-perk-card small {font-size:10px!important;line-height:1.4!important}
}
@media(max-width:340px){.ms-v3 .ms-v3-perks{gap:5px!important;padding-inline:5px!important}.ms-v3 .ms-v3-perks .ms-perk-card strong{font-size:10px!important}}

/* V16: mobile only, integrate the existing hero text into the existing hero image.
   Desktop remains unchanged. Logo and source hero image are not replaced. */
@media (max-width:780px) {
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero {
   display:flex!important;flex-direction:column!important;align-items:stretch!important;
   justify-content:flex-start!important;position:relative!important;isolation:isolate!important;
   padding:24px 16px 0!important;min-height:570px!important;gap:0!important;
   border-radius:18px!important;overflow:hidden!important;
   background:linear-gradient(180deg,rgba(250,255,252,.99) 0%,rgba(250,255,252,.96) 27%,rgba(250,255,252,.83) 41%,rgba(250,255,252,.0) 66%),var(--ms-v16-hero-image) center bottom / 100% auto no-repeat,#edf7f1!important;
 }
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-copy {
   position:relative!important;z-index:2!important;text-align:center!important;max-width:100%!important;width:100%!important;
 }
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-kicker{font-size:12px!important;padding:6px 12px!important;justify-content:center!important}
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero h1 {font-size:clamp(26px,7.2vw,38px)!important;line-height:1.35!important;margin:12px auto 8px!important;color:#075b3d!important;max-width:330px!important}
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero p {font-size:13px!important;line-height:1.65!important;max-width:330px!important;margin:auto!important;color:#365c4c!important}
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-actions{display:flex!important;justify-content:center!important;gap:8px!important;margin:15px auto 0!important;flex-wrap:wrap!important}
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-actions a{font-size:12px!important;padding:11px 12px!important;min-height:42px!important}
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-trust{display:none!important}
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-visual {position:absolute!important;inset:0!important;z-index:-1!important;opacity:0!important;pointer-events:none!important}
}
@media (max-width:380px){.ms-v3 .ms-v3-hero.ms-v16-photo-hero{min-height:530px!important;padding:19px 11px 0!important}}
@media (min-width:600px) and (max-width:780px){.ms-v3 .ms-v3-hero.ms-v16-photo-hero{min-height:690px!important;background-size:auto,100% auto!important}}

/* Only displayed after a successful YouCan express-checkout API response. */
#marocstor-order-confirmation{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(9,43,30,.76);box-sizing:border-box}
#marocstor-order-confirmation[hidden]{display:none!important}
.ms-order-success-card{background:#fff;color:#183e2d;text-align:center;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.18);width:min(100%,480px);padding:36px 25px;box-sizing:border-box}
.ms-order-success-icon{display:grid;place-items:center;margin:0 auto 18px;width:76px;height:76px;border-radius:50%;background:#e2f4e9;color:#08734f;font-size:48px;font-weight:700}
.ms-order-success-card h2{font-size:clamp(22px,5vw,29px);line-height:1.5;margin:0 0 14px;color:#08734f}
.ms-order-success-card p{font-size:16px;line-height:1.8;margin:8px 0}
.ms-order-success-back{display:block;margin-top:24px;padding:14px 20px;border-radius:12px;background:#08734f;color:#fff!important;text-decoration:none;font-weight:700}
@media(max-width:480px){.ms-order-success-card{padding:30px 18px}}

/* V19: single hero on phones: original image fully above the text, no blank background. */
@media (max-width:780px) {
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero {
   display:flex!important;flex-direction:column!important;min-height:0!important;
   padding:0!important;gap:0!important;overflow:hidden!important;
   background:#f4faf6!important;border-radius:18px!important;
 }
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-visual {
   position:relative!important;inset:auto!important;z-index:1!important;
   opacity:1!important;pointer-events:auto!important;order:0!important;
   width:100%!important;height:auto!important;display:block!important;
   padding:0!important;margin:0!important;
 }
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-visual img {
   display:block!important;width:100%!important;height:auto!important;
   max-height:none!important;object-fit:contain!important;aspect-ratio:auto!important;
   border-radius:16px 16px 0 0!important;
 }
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero .ms-v3-copy {
   order:1!important;position:relative!important;z-index:2!important;
   width:100%!important;box-sizing:border-box!important;
   padding:16px 14px 24px!important;background:#f4faf6!important;
   text-align:center!important;
 }
 .ms-v3 .ms-v3-hero.ms-v16-photo-hero h1 {
   margin:12px auto!important;font-size:clamp(26px,7.2vw,38px)!important;
 }
}
/* V19: checkout confirmation dialog is responsive on wide screens as well. */
@media(min-width:781px){
 #marocstor-order-confirmation .ms-order-success-card{max-width:560px;padding:46px 42px}
}

/* V22: hero-only change. All other storefront sections are unchanged. */
.ms-v3 .ms-v22-hero{position:relative;overflow:hidden;border-radius:26px;isolation:isolate;background:#eaf5ed;min-height:550px;display:flex;align-items:flex-start;justify-content:center;padding:28px 24px 36px;text-align:center;direction:rtl}
.ms-v3 .ms-v22-image{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 58%!important;max-height:none!important;border-radius:0!important;z-index:0}
.ms-v3 .ms-v22-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.95) 0%,rgba(255,255,255,.90) 23%,rgba(255,255,255,.20) 51%,rgba(255,255,255,0) 70%);z-index:1;pointer-events:none}
.ms-v3 .ms-v22-copy{position:relative;z-index:2;max-width:850px;width:100%;margin:0 auto;color:#07533a}
.ms-v3 .ms-v22-label{display:inline-block;border-radius:99px;background:rgba(255,255,255,.94);color:#086c46;font-size:14px;font-weight:700;padding:7px 17px}
.ms-v3 .ms-v22-copy h1{font-size:clamp(34px,4vw,62px)!important;line-height:1.22!important;color:#07533a!important;margin:14px auto 9px!important;max-width:760px;font-weight:850}
.ms-v3 .ms-v22-copy p{font-size:clamp(15px,1.4vw,19px)!important;line-height:1.65!important;color:#254b3e!important;margin:0 auto 16px!important;max-width:680px}
.ms-v3 .ms-v22-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:#08734f;color:#fff!important;border-radius:12px;padding:13px 24px;font-weight:750;text-decoration:none;box-shadow:0 8px 20px rgba(5,85,52,.14)}
@media(max-width:780px){.ms-v3 .ms-v22-hero{min-height:550px;padding:22px 13px 20px;border-radius:18px}.ms-v3 .ms-v22-image{object-position:center bottom!important}.ms-v3 .ms-v22-hero:before{background:linear-gradient(to bottom,rgba(255,255,255,.97) 0%,rgba(255,255,255,.89) 31%,rgba(255,255,255,.05) 65%,transparent 80%)}.ms-v3 .ms-v22-copy h1{font-size:clamp(27px,7.2vw,38px)!important;line-height:1.3!important;margin:13px auto 8px!important}.ms-v3 .ms-v22-copy p{font-size:13px!important;line-height:1.55!important;margin-bottom:12px!important}.ms-v3 .ms-v22-label{font-size:12px}.ms-v3 .ms-v22-button{padding:11px 17px;font-size:13px}}


/* MAROCSTOR V25 — mobile hero full-image view and refined purchase CTAs */
@keyframes ms-cta-glow{0%,100%{box-shadow:0 7px 17px rgba(8,115,79,.20);transform:translateY(0)}50%{box-shadow:0 11px 27px rgba(8,115,79,.33);transform:translateY(-2px)}}
.ms-v3 .ms-v22-button,
.single-product yc-product-info .buy-button .buy-area .place-order button,
.single-product yc-product-info .buy-button .buy-area button.primary{
 animation:ms-cta-glow 3.2s ease-in-out infinite;
 transition:filter .2s ease,transform .2s ease;
}
.ms-v3 .ms-v22-button:hover,
.single-product yc-product-info .buy-button .buy-area .place-order button:hover{filter:brightness(1.09)}
@media(max-width:780px){
 /* Keep image in its natural aspect ratio instead of zooming into one product. */
 .ms-v3 .ms-v22-hero{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-height:0!important;height:auto!important;padding:0!important;overflow:hidden!important;background:#f4f8f4!important}
 .ms-v3 .ms-v22-hero:before{display:none!important}
 .ms-v3 .ms-v22-copy{order:0!important;position:relative!important;max-width:100%!important;padding:22px 16px 18px!important;box-sizing:border-box!important;background:#f4f8f4!important}
 .ms-v3 .ms-v22-image{order:1!important;position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center center!important;border-radius:0!important}
 .ms-v3 .ms-v22-copy h1{font-size:clamp(26px,7vw,37px)!important}
 .ms-v3 .ms-v22-copy p{font-size:13px!important}
 .ms-v3 .ms-v22-button{min-height:46px!important;padding:12px 18px!important}
}
@media(prefers-reduced-motion:reduce){.ms-v3 .ms-v22-button,.single-product yc-product-info .buy-button .buy-area .place-order button,.single-product yc-product-info .buy-button .buy-area button.primary{animation:none!important;transition:none!important}}

/* MAROCSTOR V28 — compact hero, mobile image with integrated overlay, bespoke vector perks */
.ms-v3 .ms-v22-hero{min-height:390px!important;max-height:460px!important;padding:22px 22px 24px!important}
.ms-v3 .ms-v22-copy{max-width:700px!important}
.ms-v3 .ms-v22-copy h1{font-size:clamp(28px,3.2vw,46px)!important;margin:8px auto 5px!important}
.ms-v3 .ms-v22-copy p{font-size:clamp(13px,1.15vw,16px)!important;line-height:1.5!important;margin-bottom:11px!important}
.ms-v3 .ms-v22-button{padding:11px 20px!important}
.ms-v3 .ms-v3-perks{margin-top:14px!important;margin-bottom:10px!important}
.ms-v3 .ms-v3-perks .ms-perk-card{display:flex!important;flex-direction:row!important;text-align:right!important;justify-content:center!important;gap:13px!important;min-height:98px!important;padding:14px 16px!important;background:linear-gradient(115deg,#fffdf9,#f7faf6)!important;border:1px solid #e6d9c4!important;border-radius:18px!important;box-shadow:0 7px 20px rgba(49,61,42,.06)!important}
.ms-v3 .ms-v3-perks .ms-perk-icon{width:64px!important;height:64px!important;border-radius:18px!important;background:linear-gradient(145deg,#e9f6ec,#fff2d9)!important;box-shadow:inset 0 0 0 1px rgba(9,100,66,.08)!important;display:grid!important;place-items:center!important}
.ms-v3 .ms-v3-perks .ms-perk-icon svg{width:46px!important;height:46px!important;display:block!important}
.ms-v3 .ms-v3-perks .ms-perk-card strong{font-size:16px!important}
.ms-v3 .ms-v3-perks .ms-perk-card small{font-size:12px!important}
@media(max-width:780px){
 .ms-v3 .ms-v22-hero{position:relative!important;display:block!important;min-height:0!important;max-height:none!important;height:auto!important;padding:0!important;overflow:hidden!important;border-radius:16px!important;background:#f4f8f4!important}
 .ms-v3 .ms-v22-image{position:relative!important;inset:auto!important;display:block!important;order:unset!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;aspect-ratio:auto!important}
 .ms-v3 .ms-v22-hero:before{display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 32%,rgba(255,255,255,0) 72%)!important;pointer-events:none!important}
 .ms-v3 .ms-v22-copy{position:absolute!important;inset:0 0 auto!important;z-index:2!important;order:unset!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important;padding:9px 12px 0!important;background:transparent!important;text-align:center!important}
 .ms-v3 .ms-v22-label{font-size:9px!important;padding:3px 9px!important}
 .ms-v3 .ms-v22-copy h1{font-size:clamp(17px,5.3vw,26px)!important;line-height:1.2!important;margin:5px auto 3px!important}
 .ms-v3 .ms-v22-copy p{font-size:clamp(9px,2.6vw,12px)!important;line-height:1.3!important;margin:0 auto 6px!important;max-width:340px!important}
 .ms-v3 .ms-v22-button{font-size:11px!important;min-height:32px!important;padding:6px 11px!important;border-radius:9px!important}
 .ms-v3 .ms-v3-perks{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin-top:12px!important;padding:0 8px 10px!important}
 .ms-v3 .ms-v3-perks .ms-perk-card{min-height:105px!important;flex-direction:column!important;gap:4px!important;text-align:center!important;padding:10px 4px!important;border-radius:12px!important}
 .ms-v3 .ms-v3-perks .ms-perk-icon{width:40px!important;height:40px!important;border-radius:12px!important}
 .ms-v3 .ms-v3-perks .ms-perk-icon svg{width:32px!important;height:32px!important}
 .ms-v3 .ms-v3-perks .ms-perk-card strong{font-size:11px!important;line-height:1.3!important}
 .ms-v3 .ms-v3-perks .ms-perk-card small{font-size:9px!important;line-height:1.3!important}
}
@media(max-width:360px){.ms-v3 .ms-v22-copy p{display:none!important}.ms-v3 .ms-v22-copy h1{font-size:17px!important}.ms-v3 .ms-v22-button{margin-top:3px!important}}
@media(prefers-reduced-motion:reduce){.ms-v3 .ms-v22-button{animation:none!important}}

/* MAROCSTOR V29 — readable genuine product prices and restrained responsive hero */
.product-card .info .price .current,
.product-card .price .current,
.product-card .price .sale,
.product-price .current,
.product-price .price-current,
.price .current:not(.compare-at){color:#087447!important;font-weight:800!important}
.product-card .info .price .compare-at,
.product-card .price .compare-at,
.product-price .compare-at,
.price .compare-at{color:#ce2734!important;text-decoration:line-through!important;text-decoration-thickness:1.5px!important;font-weight:650!important}
.ms-v3 .ms-v22-hero{max-height:480px!important;overflow:hidden!important;border-radius:22px!important}
.ms-v3 .ms-v22-image{width:100%!important;height:100%!important;max-height:480px!important;object-fit:cover!important;object-position:center 52%!important}
.ms-v3 .ms-v22-copy{z-index:3!important}
.ms-v3 .ms-v22-copy h1{font-weight:900!important;text-shadow:0 1px 9px rgba(255,255,255,.75)}
.ms-v3 .ms-v22-button{transition:transform .2s ease,box-shadow .2s ease!important}
.ms-v3 .ms-v22-button:hover{transform:translateY(-2px)!important;box-shadow:0 9px 22px rgba(0,91,56,.2)!important}
@media(max-width:700px){
 .ms-v3 .ms-v22-hero{height:auto!important;max-height:none!important;min-height:0!important;aspect-ratio:auto!important;position:relative!important;overflow:hidden!important;border-radius:16px!important}
 .ms-v3 .ms-v22-image{position:relative!important;display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
 .ms-v3 .ms-v22-hero:before{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.60) 39%,transparent 75%)!important}
 .ms-v3 .ms-v22-copy{position:absolute!important;top:0!important;right:0!important;left:0!important;bottom:auto!important;padding:10px 12px!important;background:transparent!important}
 .ms-v3 .ms-v22-copy h1{font-size:clamp(17px,5vw,25px)!important;margin:4px auto!important}
 .ms-v3 .ms-v22-copy p{font-size:clamp(10px,2.6vw,13px)!important;margin:2px auto 6px!important}
 .ms-v3 .ms-v22-button{min-height:32px!important;font-size:11px!important;padding:7px 13px!important}
}

/* V31: keep product media visible next to checkout, even with wide order fields. */
.single-product{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;max-width:100%!important;min-width:0!important}
.single-product > yc-product-media,.single-product > yc-product-info{min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.single-product > yc-product-media{position:relative!important;top:auto!important;align-self:start!important;overflow:visible!important}
.single-product > yc-product-media .main-image{width:100%!important;min-width:0!important;max-width:100%!important;display:block!important;background:#f7faf8!important}
.single-product > yc-product-media .main-image img[data-main-image]{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}
.single-product > yc-product-info .buy-button,.single-product > yc-product-info .buy-area,.single-product > yc-product-info .express-checkout{min-width:0!important;max-width:100%!important}
@media(max-width:767px){.single-product{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}.single-product > yc-product-media{position:relative!important;inset:auto!important;order:0!important}.single-product > yc-product-info{order:1!important}.single-product > yc-product-media .main-image{height:auto!important;aspect-ratio:1/1!important;max-height:440px!important}.single-product > yc-product-media .main-image img[data-main-image]{object-fit:contain!important}}

/* V32: celebratory confetti for confirmed orders, non-blocking on mobile */
#marocstor-order-confirmation .ms-confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
#marocstor-order-confirmation .ms-confetti-layer span{position:absolute;left:var(--x);top:-24px;width:9px;height:15px;border-radius:2px;opacity:0;animation:ms-confetti-fall var(--dur) ease-in var(--delay) 1 forwards}
@keyframes ms-confetti-fall{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate3d(var(--drift),105vh,0) rotate(690deg);opacity:0}}
@media(prefers-reduced-motion:reduce){#marocstor-order-confirmation .ms-confetti-layer{display:none!important}}

/* MAROCSTOR V36: desktop edge-to-edge hero, without changing mobile layout or checkout. */
@media (min-width: 781px) {
  .ms-v3 { width: 100% !important; max-width: none !important; }
  .ms-v3 > .ms-v22-hero {
    width: 100vw !important; max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important; box-sizing: border-box !important;
    height: clamp(470px, 42vw, 660px) !important;
    min-height: 470px !important; max-height: 660px !important;
    padding: 0 !important; position: relative !important; overflow: hidden !important;
  }
  .ms-v3 > .ms-v22-hero > .ms-v22-image {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; max-height: none !important;
    object-fit: cover !important; object-position: center center !important;
  }
  .ms-v3 > .ms-v22-hero > .ms-v22-copy {
    position: relative !important; z-index: 3 !important;
    margin: 0 auto !important; padding: 32px 24px !important;
    width: min(100%, 900px) !important; box-sizing: border-box !important;
  }
}