/* =========================================================
   MB SKINCARE — EasyOrders Phoenix Final Polish
   Version: 1.0
   Brand green: #3F6B4F
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Manrope:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600&display=swap");

:root{
  --mb-green:#3F6B4F;
  --mb-green-dark:#214D32;
  --mb-ink:#1C2922;
  --mb-muted:#6F786F;
  --mb-cream:#F7F3EE;
  --mb-paper:#FFFDF9;
  --mb-border:#E5DED6;
  --mb-sale:#A4473D;
  --mb-radius:12px;
  --mb-shadow:0 8px 24px rgba(28,41,34,.06);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  overflow-x:hidden !important;
  background:var(--mb-cream) !important;
  color:var(--mb-ink) !important;
  font-family:"Manrope","Noto Kufi Arabic",Arial,sans-serif !important;
  line-height:1.55;
}

body,
main,
section,
footer,
header{
  max-width:100%;
}

img{
  max-width:100%;
  height:auto;
}

h1,
h2,
h3{
  color:var(--mb-ink);
  text-wrap:balance;
}

h1,
.hero h1,
[class*="hero"] h1{
  font-family:"Cormorant Garamond","Noto Kufi Arabic",serif !important;
  font-weight:600 !important;
  letter-spacing:-.025em;
}

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

/* ---------- Announcement bar ---------- */

.announcement-bar,
[class*="announcement-bar"],
[class*="announcementBar"],
[class*="AnnouncementBar"]{
  min-height:32px !important;
  padding:7px 20px !important;
  background:var(--mb-green-dark) !important;
  color:var(--mb-paper) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  line-height:1.4 !important;
  text-align:center !important;
  overflow:hidden !important;
}

.announcement-bar > *,
[class*="announcement-bar"] > *,
[class*="announcementBar"] > *{
  margin-inline:10px !important;
}

/* ---------- Header ---------- */

body > header,
header[role="banner"],
.site-header,
.main-header,
.store-header,
[class*="site-header"],
[class*="main-header"],
[class*="store-header"]{
  background:var(--mb-paper) !important;
  color:var(--mb-ink) !important;
  border:0 !important;
  border-bottom:1px solid rgba(33,77,50,.08) !important;
  box-shadow:var(--mb-shadow) !important;
}

body > header img,
header[role="banner"] img,
.site-header img,
.main-header img,
.store-header img{
  max-height:42px !important;
  width:auto !important;
  object-fit:contain !important;
}

body > header nav a,
header[role="banner"] nav a,
.site-header nav a,
.main-header nav a,
.store-header nav a{
  color:var(--mb-ink) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  text-decoration:none !important;
}

/* ---------- Global section spacing ---------- */

main > section,
body > section,
.home-section,
[class*="home-section"],
[class*="HomeSection"]{
  margin-block:0 !important;
}

main > section + section,
.home-section + .home-section,
[class*="home-section"] + [class*="home-section"]{
  margin-top:44px !important;
}

/* ---------- Hero ---------- */

section:has(h1){
  overflow:hidden;
}

section:has(h1) h1{
  max-width:620px;
  font-size:clamp(48px,5.1vw,76px) !important;
  line-height:.96 !important;
  margin-bottom:18px !important;
}

section:has(h1) p{
  max-width:590px;
}

section:has(h1) a[href*="/collections"],
section:has(h1) a[href*="/category"],
section:has(h1) button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  margin-top:10px !important;
  padding:12px 24px !important;
  border:1px solid var(--mb-green) !important;
  border-radius:4px !important;
  background:var(--mb-green) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
  line-height:1 !important;
  text-decoration:none !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
}

/* ---------- Section headings ---------- */

section > h2,
section > div > h2,
.section-title,
[class*="section-title"],
[class*="sectionTitle"]{
  margin-bottom:26px !important;
  color:var(--mb-ink) !important;
  font-size:clamp(30px,3.4vw,48px) !important;
  font-weight:600 !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
}

/* ---------- Shop by category ---------- */

section:not(:has(a[href*="/products/"])):has(a[href*="/collections/"] img),
section:not(:has(a[href*="/products/"])):has(a[href*="/category/"] img){
  padding-inline:0 !important;
}

section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img),
section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img){
  overflow:hidden !important;
  border-radius:16px !important;
  background:#eee9e3 !important;
  box-shadow:none !important;
}

section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img) img,
section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img) img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition:transform .55s ease !important;
}

section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img):hover img,
section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img):hover img{
  transform:scale(1.025);
}

/* ---------- Product sections ---------- */

section:has(a[href*="/products/"]){
  background:transparent !important;
}

/* Hide the oversized category promo card inside product grids */
section:has(a[href*="/products/"]) a[href*="/collections/"]:has(img),
section:has(a[href*="/products/"]) a[href*="/category/"]:has(img){
  display:none !important;
}

/* Product cards */
.product-card,
[class*="product-card"],
[class*="productCard"],
[class*="ProductCard"],
article:has(a[href*="/products/"]){
  overflow:hidden !important;
  border:1px solid rgba(33,77,50,.07) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}

.product-card:hover,
[class*="product-card"]:hover,
[class*="productCard"]:hover,
[class*="ProductCard"]:hover,
article:has(a[href*="/products/"]):hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(28,41,34,.08) !important;
}

.product-card img,
[class*="product-card"] img,
[class*="productCard"] img,
[class*="ProductCard"] img,
article:has(a[href*="/products/"]) img{
  width:100% !important;
  object-fit:contain !important;
  background:#F4F1EC !important;
}

.product-card h3,
[class*="product-card"] h3,
[class*="productCard"] h3,
[class*="ProductCard"] h3,
article:has(a[href*="/products/"]) h3{
  color:var(--mb-ink) !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.45 !important;
}

.product-card button,
[class*="product-card"] button,
[class*="productCard"] button,
[class*="ProductCard"] button,
article:has(a[href*="/products/"]) button{
  min-height:38px !important;
  border:1px solid var(--mb-green) !important;
  border-radius:4px !important;
  background:var(--mb-green) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

[class*="sale"],
[class*="Sale"],
.badge{
  border-radius:999px !important;
}

[class*="sale-badge"],
[class*="saleBadge"],
[class*="SaleBadge"]{
  background:var(--mb-sale) !important;
  color:#fff !important;
}

/* ---------- Promotional image banner ---------- */

section:has(a[href*="/collections/"] > img):not(:has(a[href*="/products/"])),
.banner-section,
[class*="banner-section"],
[class*="BannerSection"]{
  overflow:hidden !important;
  border-radius:12px !important;
}

.banner-section img,
[class*="banner-section"] img,
[class*="BannerSection"] img{
  display:block;
  width:100% !important;
}

/* ---------- Store features ---------- */

section:has(h2):has(img[src*="shield"]),
section:has(h2):has(img[src*="truck"]),
.store-features,
[class*="store-features"],
[class*="storeFeatures"],
[class*="StoreFeatures"]{
  padding:34px 30px !important;
  border-radius:16px !important;
  background:var(--mb-paper) !important;
}

.store-features img,
[class*="store-features"] img,
[class*="storeFeatures"] img,
[class*="StoreFeatures"] img{
  width:38px !important;
  height:38px !important;
  object-fit:contain !important;
}

.store-features h3,
[class*="store-features"] h3,
[class*="storeFeatures"] h3,
[class*="StoreFeatures"] h3{
  color:var(--mb-green-dark) !important;
  font-size:15px !important;
  font-weight:700 !important;
}

.store-features p,
[class*="store-features"] p,
[class*="storeFeatures"] p,
[class*="StoreFeatures"] p{
  color:var(--mb-muted) !important;
  font-size:12px !important;
}

/* ---------- Footer ---------- */

footer,
.site-footer,
.main-footer,
[class*="site-footer"],
[class*="main-footer"]{
  max-width:100% !important;
  overflow:hidden !important;
  background:var(--mb-green-dark) !important;
  color:var(--mb-paper) !important;
}

footer a,
.site-footer a,
.main-footer a,
[class*="site-footer"] a,
[class*="main-footer"] a{
  color:var(--mb-paper) !important;
  text-decoration:none !important;
}

footer h2,
footer h3,
footer h4{
  color:var(--mb-paper) !important;
  font-family:"Manrope","Noto Kufi Arabic",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}

footer input{
  min-height:48px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--mb-ink) !important;
}

footer button{
  border-radius:999px !important;
}

/* ---------- Forms / checkout ---------- */

input,
select,
textarea{
  border-color:var(--mb-border) !important;
  border-radius:8px !important;
}

button[type="submit"],
.checkout button,
[class*="checkout"] button{
  background:var(--mb-green-dark) !important;
  color:#fff !important;
  border-color:var(--mb-green-dark) !important;
}

/* ---------- RTL ---------- */

[dir="rtl"] body{
  font-family:"Noto Kufi Arabic","Manrope",Arial,sans-serif !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px){
  section:has(h1) h1{
    font-size:48px !important;
  }

  main > section + section,
  .home-section + .home-section,
  [class*="home-section"] + [class*="home-section"]{
    margin-top:34px !important;
  }
}

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

@media (max-width: 640px){
  body{
    font-size:13px !important;
  }

  .announcement-bar,
  [class*="announcement-bar"],
  [class*="announcementBar"],
  [class*="AnnouncementBar"]{
    min-height:27px !important;
    padding:6px 10px !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }

  body > header img,
  header[role="banner"] img,
  .site-header img,
  .main-header img,
  .store-header img{
    max-height:30px !important;
  }

  body > header nav a,
  header[role="banner"] nav a,
  .site-header nav a,
  .main-header nav a,
  .store-header nav a{
    font-size:8px !important;
    letter-spacing:.045em !important;
  }

  main > section + section,
  .home-section + .home-section,
  [class*="home-section"] + [class*="home-section"]{
    margin-top:24px !important;
  }

  section:has(h1){
    min-height:520px !important;
  }

  section:has(h1) h1{
    max-width:225px !important;
    font-size:34px !important;
    line-height:.95 !important;
    margin-bottom:12px !important;
  }

  section:has(h1) p{
    max-width:225px !important;
    font-size:10px !important;
    line-height:1.55 !important;
  }

  section:has(h1) a[href*="/collections"],
  section:has(h1) a[href*="/category"],
  section:has(h1) button{
    min-height:36px !important;
    margin-top:6px !important;
    padding:10px 16px !important;
    font-size:9px !important;
  }

  section > h2,
  section > div > h2,
  .section-title,
  [class*="section-title"],
  [class*="sectionTitle"]{
    margin-bottom:16px !important;
    font-size:25px !important;
  }

  /* Keep category cards compact */
  section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img),
  section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img){
    border-radius:10px !important;
  }

  /* Product cards */
  .product-card,
  [class*="product-card"],
  [class*="productCard"],
  [class*="ProductCard"],
  article:has(a[href*="/products/"]){
    border-radius:9px !important;
  }

  .product-card h3,
  [class*="product-card"] h3,
  [class*="productCard"] h3,
  [class*="ProductCard"] h3,
  article:has(a[href*="/products/"]) h3{
    font-size:8px !important;
    line-height:1.35 !important;
  }

  .product-card button,
  [class*="product-card"] button,
  [class*="productCard"] button,
  [class*="ProductCard"] button,
  article:has(a[href*="/products/"]) button{
    min-height:32px !important;
    font-size:8px !important;
  }

  section:has(h2):has(img[src*="shield"]),
  section:has(h2):has(img[src*="truck"]),
  .store-features,
  [class*="store-features"],
  [class*="storeFeatures"],
  [class*="StoreFeatures"]{
    padding:27px 18px !important;
    border-radius:12px !important;
  }

  .store-features img,
  [class*="store-features"] img,
  [class*="storeFeatures"] img,
  [class*="StoreFeatures"] img{
    width:30px !important;
    height:30px !important;
  }

  .store-features h3,
  [class*="store-features"] h3,
  [class*="storeFeatures"] h3,
  [class*="StoreFeatures"] h3{
    font-size:12px !important;
  }

  .store-features p,
  [class*="store-features"] p,
  [class*="storeFeatures"] p,
  [class*="StoreFeatures"] p{
    font-size:9px !important;
  }

  footer{
    font-size:10px !important;
  }

  footer h2,
  footer h3,
  footer h4{
    font-size:9px !important;
  }

  footer input{
    min-height:42px !important;
  }
}