/* =====================================================================
   Monjeez theme layer — layout of proposal A, palette of proposal C.
   Loaded after Journal3 styles (see common/header.twig).
   ===================================================================== */
:root{
  --mj-bg:#F7F1EA; --mj-bg-2:#EFE5D8; --mj-card:#FFFDFB; --mj-line:#E4D7C6;
  --mj-brand:#D8C5AD; --mj-brown:#43321D; --mj-brown-2:#6B5537; --mj-muted:#937F66;
  --mj-pink:#E6007E; --mj-pink-700:#B80065; --mj-pink-soft:#FBE3EF;
  --mj-green:#1FA54A; --mj-green-soft:#DDF3E4;
  --mj-radius:20px; --mj-shadow:0 10px 30px rgba(67,50,29,.08);
  --mj-font:'Tajawal','Cairo',system-ui,sans-serif;
}

/* ---------- global ---------- */
html body{background:var(--mj-bg) !important;color:var(--mj-brown)}
.site-wrapper{background:transparent !important}
.boxed-layout .site-wrapper{box-shadow:none !important}
.mj-ic{flex-shrink:0;vertical-align:middle}

/* ---------- header ---------- */
.desktop-header-active header.header-classic .header,
.desktop-header-active header.header-classic .mid-bar{background:var(--mj-brand) !important}
.desktop-header-active .mid-bar{border:0 !important}
/* search pill */
.desktop-search-wrapper .header-search{background:var(--mj-card) !important;border:1.5px solid var(--mj-line) !important;border-radius:999px !important;overflow:hidden;box-shadow:none !important;transition:border-color .2s, box-shadow .2s}
.desktop-search-wrapper .header-search:focus-within{border-color:var(--mj-pink) !important;box-shadow:0 0 0 4px var(--mj-pink-soft) !important}
.desktop-search-wrapper .header-search .search-input{background:transparent !important;border:0 !important;color:var(--mj-brown) !important;font-family:var(--mj-font) !important;font-size:15px !important}
.desktop-search-wrapper .header-search .search-input::placeholder{color:var(--mj-muted) !important}
.desktop-search-wrapper .header-search .search-button{background:var(--mj-pink) !important;border-radius:50% !important;width:38px !important;height:38px !important;min-width:38px !important;margin:5px !important;transition:background .15s}
.desktop-search-wrapper .header-search .search-button:hover{background:var(--mj-pink-700) !important}
/* header actions (account, login, dark mode, language) */
.mid-bar .top-menu > ul > li > a,
.mid-bar .top-menu .j-menu > li > a,
.mid-bar .language .dropdown-toggle{border-radius:12px !important;transition:background .15s,color .15s}
.mid-bar .top-menu > ul > li > a:hover,
.mid-bar .top-menu .j-menu > li > a:hover{background:rgba(255,253,251,.55) !important;color:var(--mj-pink) !important}
.mid-bar .top-menu .j-menu > li > a,
.mid-bar .top-menu .j-menu > li > a .links-text,
.mid-bar .top-menu .j-menu > li > a::before{color:var(--mj-brown) !important}
/* cart button: pink rounded square, white icon centred, small badge on the corner */
.desktop-cart-wrapper #cart{flex:0 0 auto !important;display:flex;align-items:center;margin-inline-start:6px}
.desktop-cart-wrapper #cart > a.cart-heading{
  position:relative;width:46px !important;height:46px !important;min-width:46px;padding:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:var(--mj-pink) !important;border:0 !important;border-radius:14px !important;
  box-shadow:0 6px 16px rgba(230,0,126,.25);transition:background .15s, transform .15s}
.desktop-cart-wrapper #cart > a.cart-heading:hover{background:var(--mj-pink-700) !important;transform:translateY(-1px)}
.desktop-cart-wrapper #cart > a.cart-heading #cart-total{display:none !important}
.desktop-cart-wrapper #cart > a.cart-heading > i{
  width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;
  background:none !important;border:0 !important;box-shadow:none !important;font-size:22px !important;line-height:1}
.desktop-cart-wrapper #cart > a.cart-heading > i::before{color:#fff !important;font-size:22px !important;margin:0 !important}
.desktop-cart-wrapper #cart > a.cart-heading #cart-items{
  position:absolute !important;top:-6px !important;inset-inline-end:-6px;inset-inline-start:auto;right:auto;left:auto;margin:0 !important;
  min-width:20px;height:20px;padding:0 5px !important;border-radius:10px !important;
  display:flex !important;align-items:center;justify-content:center;
  background:var(--mj-brown) !important;color:#fff !important;border:2px solid var(--mj-brand) !important;
  font-size:11px !important;font-weight:800;line-height:1;transform:none !important;opacity:1 !important;filter:none !important}
html[dir="rtl"] .desktop-cart-wrapper #cart > a.cart-heading #cart-items{left:-6px !important;right:auto !important}
html[dir="ltr"] .desktop-cart-wrapper #cart > a.cart-heading #cart-items{right:-6px !important;left:auto !important}
.desktop-cart-wrapper #cart > a.cart-heading #cart-items.count-zero{display:none !important}
/* Journal3 paints a grey inset shadow over every badge, which washes out its colour */
header .count-badge, .mobile-header .count-badge, #cart-items{box-shadow:none !important}

/* ---------- main menu = chips ---------- */
.desktop-main-menu-wrapper{background:var(--mj-bg-2) !important;border-top:1px solid var(--mj-line) !important;border-bottom:1px solid var(--mj-line) !important}
.desktop-main-menu-wrapper::before{display:none !important}
.desktop-main-menu-wrapper .main-menu > .j-menu{gap:4px;padding:7px 0}
.desktop-main-menu-wrapper .main-menu > .j-menu > li{border:0 !important;background:transparent !important}
.desktop-main-menu-wrapper .main-menu > .j-menu > li > a{border:0 !important;border-radius:12px !important;background:transparent !important;padding:0 16px !important;min-height:40px;font-family:var(--mj-font) !important;font-weight:700 !important;font-size:15px !important;transition:background .15s,color .15s}
.desktop-main-menu-wrapper .main-menu > .j-menu > li > a,
.desktop-main-menu-wrapper .main-menu > .j-menu > li > a .links-text{color:var(--mj-brown) !important}
.desktop-main-menu-wrapper .main-menu > .j-menu > li:hover > a,
.desktop-main-menu-wrapper .main-menu > .j-menu > li > a:hover{background:var(--mj-card) !important}
.desktop-main-menu-wrapper .main-menu > .j-menu > li:hover > a .links-text{color:var(--mj-pink) !important}
.desktop-main-menu-wrapper .main-menu > .j-menu > li:last-child > a{background:#FFE14D !important;border-radius:12px !important}
.desktop-main-menu-wrapper .main-menu > .j-menu > li:last-child > a .links-text{color:var(--mj-brown) !important;font-weight:800 !important}
.desktop-main-menu-wrapper .main-menu .j-dropdown > .j-menu{background:var(--mj-card) !important;border:1px solid var(--mj-line) !important;border-radius:14px !important;box-shadow:var(--mj-shadow) !important;padding:6px !important;overflow:hidden}
.desktop-main-menu-wrapper .main-menu .j-dropdown > .j-menu > li > a{border-radius:10px !important;color:var(--mj-brown) !important}
.desktop-main-menu-wrapper .main-menu .j-dropdown > .j-menu > li > a:hover{background:var(--mj-pink-soft) !important;color:var(--mj-pink) !important}
.desktop-main-menu-wrapper .main-menu .j-dropdown::before{display:none !important}

/* ---------- mobile header ---------- */
.mobile-header-active .mobile-header .mobile-bar,
.mobile-header-active .mobile-header{background:var(--mj-brand) !important}
.mobile-header-active .mobile-search-wrapper .header-search{background:var(--mj-card) !important;border-radius:14px !important;border:1.5px solid var(--mj-line) !important;overflow:hidden}
.mobile-header-active .mobile-search-wrapper .search-button{background:var(--mj-pink) !important;border-radius:12px !important}

/* ---------- page titles / generic buttons ---------- */
.page-title, h1.title.page-title{color:var(--mj-brown) !important}
.btn-primary, .btn-cart, .button-group .btn-cart, #button-cart{background:var(--mj-pink) !important;border-color:var(--mj-pink) !important;color:#fff !important;border-radius:12px !important}
.btn-primary:hover, .btn-cart:hover, #button-cart:hover{background:var(--mj-pink-700) !important;border-color:var(--mj-pink-700) !important}

/* ---------- product & category cards in listings ---------- */
.product-thumb{background:var(--mj-card) !important;border:1px solid var(--mj-line) !important;border-radius:var(--mj-radius) !important;overflow:hidden;transition:transform .25s, box-shadow .25s}
.product-thumb:hover{transform:translateY(-4px);box-shadow:var(--mj-shadow) !important}
.product-thumb .image, .product-thumb .image a{border-radius:14px 14px 0 0 !important}
.refine-categories .refine-item, .refine-categories .refine-item a{border-radius:16px !important}

/* ---------- footer ---------- */
footer, footer .grid-rows, footer .grid-row{background:var(--mj-brown) !important;background-image:none !important}
footer, footer p, footer .links-text, footer .newsletter-text, footer .block-content, footer .block-content *{color:#EFE5D8 !important}
footer .title.module-title{color:#fff !important;font-family:var(--mj-font) !important}
footer .title.module-title::after{background:var(--mj-pink) !important}
footer a:hover .links-text, footer a:hover{color:#FFB3D6 !important}
/* logical corners: input rounded on the reading-start side, button on the end side (works in RTL and LTR) */
footer .newsletter-email{background:var(--mj-card) !important;border:0 !important;border-radius:0 !important;
  border-start-start-radius:12px !important;border-end-start-radius:12px !important}
footer .module-newsletter .btn-primary{background:var(--mj-pink) !important;border-radius:0 !important;
  border-start-end-radius:12px !important;border-end-end-radius:12px !important}
footer .icons-menu a{background:rgba(255,255,255,.12) !important;border-radius:50% !important;transition:background .15s}
footer .icons-menu a:hover{background:var(--mj-pink) !important}
/* social icons: all white (Facebook, Instagram, YouTube, WhatsApp) */
footer .icons-menu .icon-menu-icon > a::before,
footer .icons-menu a::before{color:#fff !important}
footer .grid-row:last-child{background:#2E2214 !important}

/* ---------- one-click language switch ---------- */
.mj-lang form{margin:0}
/* Journal3 sets pointer-events:none on .language-currency and re-enables it only for .dropdown — re-enable for our button */
.mj-lang, .mj-lang form, .mj-lang .mj-lang-btn, .mj-lang .mj-lang-btn *{pointer-events:auto !important}
.mj-lang{position:relative;z-index:5}
.mj-lang .mj-lang-btn{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;
  background:var(--mj-card);border:1.5px solid var(--mj-line);color:var(--mj-brown);cursor:pointer;
  font-weight:700;font-size:14px;line-height:1;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.mj-lang .mj-lang-btn[lang="ar"]{font-family:'Tajawal','Cairo',sans-serif;font-size:15px}
.mj-lang .mj-lang-btn[lang="en"]{font-family:'Tajawal',system-ui,sans-serif;letter-spacing:.2px}
.mj-lang .mj-lang-btn:hover,.mj-lang .mj-lang-btn:focus-visible{border-color:var(--mj-pink);color:var(--mj-pink);outline:0}
.mj-lang .mj-lang-btn .mj-ic{color:var(--mj-pink)}
.mobile-header .mj-lang .mj-lang-btn,.mobile-top-bar .mj-lang .mj-lang-btn,.mobile-main-menu-container .mj-lang .mj-lang-btn{height:34px;padding:0 12px;font-size:13px}

/* ---------- language helpers ---------- */
html[dir="rtl"] .mj-en{display:none !important}
html[dir="ltr"] .mj-ar{display:none !important}

/* =====================================================================
   Product page: price + action buttons panel
   [ السعر الإجمالي / 72.00 OMR                    ]
   [ 🛒 إضافة للسلة (wide)        ] [ طلب ]
   [ 🟢 اطلب عبر واتساب (wide)    ] [ ♡ ]
   ===================================================================== */
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .button-group-page{margin-top:18px}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper{
  display:grid !important;grid-template-columns:1fr auto;gap:12px;align-items:stretch;
  background:var(--mj-card);border:1px solid var(--mj-line);border-radius:var(--mj-radius);
  padding:20px;box-shadow:var(--mj-shadow);max-width:560px;margin:0 !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper > style{display:none}

/* price row */
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price-group{
  grid-column:1 / -1;grid-row:1;display:flex !important;flex-direction:column;align-items:flex-start;gap:2px;
  padding:0 0 14px;margin:0 !important;border-bottom:1px dashed var(--mj-line);background:none !important}
#product .mj-price-label{font-family:var(--mj-font);font-size:14px;font-weight:700;color:var(--mj-muted)}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .price-wrapper,
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .price-group{background:none !important;padding:0 !important;margin:0 !important;box-shadow:none !important;border:0 !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price,
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price-new{
  font-family:var(--mj-font) !important;font-size:34px !important;font-weight:800 !important;line-height:1.2 !important;
  color:var(--mj-pink) !important;background:none !important;padding:0 !important;direction:ltr;unicode-bidi:isolate}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price-old{font-size:16px !important;color:var(--mj-muted) !important}

/* cart + quick-buy row */
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .stepper-group{
  grid-column:1 / -1;grid-row:2;display:flex !important;flex-wrap:nowrap !important;gap:10px;margin:0 !important;width:auto !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .stepper{height:52px !important;border-radius:14px !important;overflow:hidden}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product #button-cart{
  flex:1 1 auto;height:52px !important;min-height:52px;margin:0 !important;border-radius:14px !important;
  display:flex !important;align-items:center;justify-content:center;gap:8px;font-size:17px !important;font-weight:800 !important;
  box-shadow:0 8px 20px rgba(230,0,126,.22) !important;transition:transform .15s, box-shadow .15s, background .15s}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product #button-cart:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(230,0,126,.3) !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group{flex:0 0 auto;margin:0 !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group .btn{
  height:52px !important;min-width:110px;margin:0 !important;border-radius:14px !important;padding:0 22px !important;
  background:var(--mj-brown) !important;border-color:var(--mj-brown) !important;color:#fff !important;
  font-size:16px !important;font-weight:800 !important;display:flex !important;align-items:center;justify-content:center;transition:background .15s}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group .btn .btn-text{color:#fff !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group .btn:hover{background:#2E2214 !important}

/* whatsapp + wishlist row */
html.route-product-product:not(.popup-options):not(.popup-quickview) #product #whatsapp-link{
  grid-column:1;grid-row:3;width:auto !important;max-height:none !important;height:52px;margin:0 !important;padding:0 18px !important;
  border-radius:14px !important;background:#25D366 !important;border:0 !important;color:#fff !important;
  display:flex !important;align-items:center;justify-content:center;gap:10px;font-family:var(--mj-font);font-size:16px !important;font-weight:800;
  transition:background .15s, transform .15s}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product #whatsapp-link:hover{background:#1DA851 !important;transform:translateY(-1px)}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product #whatsapp-link i{margin:0 !important;font-size:22px !important;color:#fff !important}
#product .mj-wa-text{color:#fff}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .wishlist-compare{
  grid-column:2;grid-row:3;display:flex !important;margin:0 !important;gap:8px;justify-content:stretch}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist{
  height:52px;min-width:52px;margin:0 !important;padding:0 16px !important;border-radius:14px !important;
  background:var(--mj-card) !important;border:1.5px solid var(--mj-line) !important;color:var(--mj-brown) !important;
  display:flex !important;align-items:center;justify-content:center;gap:8px;font-weight:700 !important;font-size:14px !important;transition:border-color .15s, color .15s}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist:hover{border-color:var(--mj-pink) !important;color:var(--mj-pink) !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist::before{color:var(--mj-pink) !important;margin:0 !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist .btn-text{color:inherit !important}
html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-compare{display:none !important}

@media (max-width:560px){
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper{padding:14px;max-width:none}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price{font-size:28px !important}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist .btn-text{display:none}
}

/* ---------- phones: one compact row  [ price | 🛒 | ⚡ | 🟢 | ♡ ] ---------- */
@media (max-width:767px){
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .button-group-page{margin-top:10px}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper{
    grid-template-columns:minmax(0,1fr) repeat(4,46px);gap:8px;align-items:center;
    padding:10px 12px;border-radius:16px;box-shadow:0 -4px 18px rgba(67,50,29,.10);max-width:none}
  /* flatten the cart group so its buttons sit in the same row */
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .stepper-group,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .wishlist-compare{display:contents !important}

  /* price (right side in RTL) */
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price-group{
    grid-column:1;grid-row:1;padding:0;border:0;gap:0;min-width:0}
  #product .mj-price-label{font-size:11px;line-height:1.2}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price-new{font-size:19px !important;white-space:nowrap}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .product-price-old{font-size:12px !important}

  /* square icon buttons */
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product #button-cart,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group .btn,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product #whatsapp-link,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist{
    grid-row:1;width:46px !important;min-width:46px !important;height:46px !important;min-height:46px !important;
    padding:0 !important;margin:0 !important;border-radius:12px !important;box-shadow:none !important;gap:0 !important}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product #button-cart{grid-column:2}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group .btn{grid-column:3}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product #whatsapp-link{grid-column:4}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist{grid-column:5}

  /* text -> icons */
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product #button-cart .btn-text,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group .btn .btn-text,
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist .btn-text,
  #product .mj-wa-text{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;display:block !important}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product #button-cart::before{margin:0 !important;font-size:22px !important}
  /* quick-buy: lightning icon */
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .extra-group .btn::before{
    content:'' !important;display:block !important;width:22px;height:22px;margin:0 !important;
    background:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product #whatsapp-link i{font-size:24px !important}
  html.route-product-product:not(.popup-options):not(.popup-quickview) #product .buttons-wrapper .btn-wishlist::before{font-size:22px !important}
}

/* =====================================================================
   Home page sections (extension/module/mj_home)
   ===================================================================== */
.mj-home{font-family:var(--mj-font);color:var(--mj-brown);line-height:1.6}
.mj-home *{box-sizing:border-box}
.mj-home a{text-decoration:none;color:inherit}
.mj-home h1,.mj-home h2,.mj-home h3{font-family:var(--mj-font);color:var(--mj-brown);margin:0}
.mj-home p{margin:0}
.mj-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.mj-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;font-weight:700;font-size:16px;transition:transform .2s, box-shadow .2s, background .2s, border-color .2s, color .2s;white-space:nowrap}
.mj-btn-primary{background:var(--mj-pink);color:#fff !important;box-shadow:0 8px 20px rgba(230,0,126,.25)}
.mj-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(230,0,126,.32);background:var(--mj-pink-700)}
.mj-btn-ghost{background:var(--mj-card);border:1.5px solid var(--mj-line)}
.mj-btn-ghost:hover{border-color:var(--mj-green);color:var(--mj-green) !important}
.mj-btn-light{background:#fff;color:#0F7A35 !important}
/* "forward" chevrons point left in Arabic and right in English */
[dir="ltr"] .mj-btn-primary .mj-ic:last-child,
[dir="ltr"] .mj-cap-link .mj-ic{transform:scaleX(-1)}

/* hero */
.mj-hero{padding:40px 0 20px;position:relative;overflow:hidden}
.mj-hero::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:var(--mj-pink-soft);filter:blur(70px);opacity:.6;top:-160px;inset-inline-start:-120px;z-index:0}
.mj-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;position:relative;z-index:1}
.mj-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--mj-pink-soft);color:var(--mj-pink);font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px}
.mj-hero h1{font-size:52px;line-height:1.15;font-weight:800;margin:18px 0 14px}
.mj-hero h1 em{font-style:normal;color:var(--mj-pink);position:relative;z-index:0}
.mj-hero h1 em::after{content:'';position:absolute;inset-inline:0;bottom:6px;height:11px;background:#F9C9E1;z-index:-1;border-radius:4px}
.mj-lead{font-size:18px;color:var(--mj-brown-2);max-width:540px}
.mj-cta-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.mj-trust{display:flex;gap:24px;margin-top:28px;color:var(--mj-brown-2);font-size:14px;flex-wrap:wrap}
.mj-trust span{display:flex;align-items:center;gap:8px}
.mj-trust .mj-ic{color:var(--mj-green)}
.mj-slider{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:5/4;background:var(--mj-bg-2);box-shadow:var(--mj-shadow)}
.mj-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease, visibility .6s;display:flex;align-items:flex-end}
.mj-slide.on{opacity:1;visibility:visible}
.mj-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mj-cap{position:relative;margin:18px;width:calc(100% - 36px);background:rgba(255,253,251,.95);backdrop-filter:blur(6px);border-radius:18px;padding:16px 20px;display:flex;align-items:center;gap:16px}
.mj-cap h3{font-size:21px;font-weight:800}
.mj-cap-link{color:var(--mj-pink);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.mj-cap-price{margin-inline-start:auto;text-align:center;background:var(--mj-pink);color:#fff;border-radius:14px;padding:8px 14px;line-height:1.2}
.mj-cap-price small{display:block;font-size:12px;opacity:.9}
.mj-cap-price b{font-size:20px;white-space:nowrap}
.mj-dots{position:absolute;top:18px;inset-inline-end:18px;display:flex;gap:6px;z-index:2}
.mj-dots button{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.7);border:0;padding:0;cursor:pointer;transition:width .3s, background .3s}
.mj-dots button.on{width:26px;background:#fff}

/* section heads */
.mj-block{padding:44px 0}
.mj-block.mj-tight{padding-top:0}
.mj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.mj-head h2{font-size:30px;font-weight:800;display:flex;align-items:center;gap:12px}
.mj-head h2::before{content:'';width:12px;height:12px;border-radius:4px;background:var(--mj-pink);transform:rotate(45deg);flex-shrink:0}
.mj-head p{color:var(--mj-muted);margin-top:2px}
.mj-tabs{display:flex;gap:6px;flex-wrap:wrap}
.mj-tabs button{padding:8px 16px;border-radius:999px;border:1.5px solid var(--mj-line);background:var(--mj-card);color:var(--mj-brown);font-family:var(--mj-font);font-weight:500;font-size:14px;cursor:pointer;transition:.15s}
.mj-tabs button:hover,.mj-tabs button.on{border-color:var(--mj-pink);color:var(--mj-pink);background:var(--mj-pink-soft)}

/* category cards — style from proposal C (framed image + icon tile) */
.mj-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mj-cat{background:var(--mj-card);border:1px solid var(--mj-line);border-radius:var(--mj-radius);padding:10px;display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s}
.mj-cat:hover{transform:translateY(-4px);box-shadow:var(--mj-shadow)}
.mj-cat.mj-hide{display:none}
.mj-cat-ph{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--mj-bg-2)}
.mj-cat-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.mj-cat:hover .mj-cat-ph img{transform:scale(1.06)}
.mj-cat-b{padding:12px 6px 4px;display:flex;align-items:center;gap:10px}
.mj-cat-ic{width:40px;height:40px;border-radius:12px;background:var(--mj-pink-soft);color:var(--mj-pink);display:grid;place-items:center;flex-shrink:0}
.mj-cat h3{font-size:16px;font-weight:800;line-height:1.3}
.mj-cat small{color:var(--mj-muted);font-size:13px}
.mj-cat small b{color:var(--mj-green)}

/* products */
.mj-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mj-prod{background:var(--mj-card);border:1px solid var(--mj-line);border-radius:var(--mj-radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s}
.mj-prod:hover{box-shadow:var(--mj-shadow)}
.mj-prod-ph{display:block;aspect-ratio:1;background:var(--mj-bg-2);overflow:hidden}
.mj-prod-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.mj-prod:hover .mj-prod-ph img{transform:scale(1.05)}
.mj-prod-b{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.mj-prod small{color:var(--mj-muted);font-size:12px}
.mj-prod h3{font-size:15px;font-weight:700;line-height:1.4}
.mj-prod h3 a:hover{color:var(--mj-pink)}
.mj-prod-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;gap:8px}
.mj-prod-pr{font-size:13px;color:var(--mj-brown-2)}
.mj-prod-pr b{font-size:17px;color:var(--mj-brown)}
.mj-add{width:42px;height:42px;border-radius:12px;background:var(--mj-pink-soft);color:var(--mj-pink);display:grid;place-items:center;border:0;cursor:pointer;transition:.15s;flex-shrink:0}
.mj-add:hover{background:var(--mj-pink);color:#fff}

/* steps */
.mj-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:mjs}
.mj-step{background:var(--mj-card);border:1px solid var(--mj-line);border-radius:var(--mj-radius);padding:24px;position:relative}
.mj-step::before{counter-increment:mjs;content:counter(mjs);position:absolute;top:16px;inset-inline-end:20px;font-size:46px;font-weight:800;color:var(--mj-bg-2);line-height:1}
.mj-step-ic{width:50px;height:50px;border-radius:14px;background:var(--mj-pink);color:#fff;display:grid;place-items:center;margin-bottom:16px}
.mj-step h3{font-size:18px;font-weight:700;margin-bottom:4px}
.mj-step p{color:var(--mj-brown-2);font-size:14px}

/* whatsapp band */
.mj-wa{background:linear-gradient(120deg,#0F7A35,var(--mj-green));color:#fff;border-radius:24px;padding:32px 38px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.mj-wa h2{color:#fff;font-size:26px;font-weight:800}
.mj-wa p{opacity:.92;color:#fff}
.mj-wa-ic .mj-ic{width:54px;height:54px}
.mj-wa .mj-btn{margin-inline-start:auto}
.mj-fab{position:fixed;bottom:24px;inset-inline-end:24px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff !important;display:grid;place-items:center;box-shadow:0 10px 24px rgba(37,211,102,.4);z-index:60;transition:transform .2s}
.mj-fab .mj-ic{width:28px;height:28px}
.mj-fab:hover{transform:scale(1.08)}

/* dark mode (site toggle adds body.dark-mode) */
body.dark-mode{
  --mj-bg:#17130E; --mj-bg-2:#211A13; --mj-card:#241D16; --mj-line:#3A2F23;
  --mj-brown:#F3E8DA; --mj-brown-2:#D9C8B2; --mj-muted:#A8957C;
  --mj-pink-soft:#3A1428; --mj-green-soft:#12301D; --mj-shadow:0 10px 30px rgba(0,0,0,.35);
}
body.dark-mode .mj-home a{color:inherit !important}
body.dark-mode .mj-btn-primary{color:#fff !important}
body.dark-mode .mj-cap{background:rgba(36,29,22,.95)}
body.dark-mode .mj-hero h1 em::after{background:#5A1D3D}

/* responsive */
@media (min-width:1200px){
  .mj-cat-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1100px){
  .mj-hero h1{font-size:42px}
  .mj-prod-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .mj-hero{padding-top:20px}
  .mj-hero-grid{grid-template-columns:1fr;gap:24px}
  .mj-hero h1{font-size:34px}
  .mj-lead{font-size:16px}
  .mj-cat-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .mj-prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .mj-steps{grid-template-columns:repeat(2,1fr)}
  .mj-fab{bottom:84px}
}
@media (max-width:560px){
  .mj-cat-grid{grid-template-columns:repeat(2,1fr)}
  .mj-cat{padding:7px}
  .mj-cat-b{padding:10px 2px 2px;gap:8px}
  .mj-cat-ic{width:34px;height:34px;border-radius:10px}
  .mj-cat h3{font-size:14px}
  .mj-head h2{font-size:23px}
  .mj-tabs{overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:4px}
  .mj-tabs button{white-space:nowrap}
  .mj-steps{grid-template-columns:1fr}
  .mj-wa{padding:24px}
  .mj-wa .mj-btn{margin:0;width:100%;justify-content:center}
  .mj-cta-row .mj-btn{flex:1;justify-content:center;padding:0 16px}
  .mj-cap{padding:12px 14px}
  .mj-cap h3{font-size:17px}
}
