/* Casual stable design v20261028 */
body { --main-color-one: #24483f; --main-color-two: #24483f; font-family: Arial, Helvetica, sans-serif; color: rgb(34, 43, 39); }
.cs-navbar { background: rgb(255, 253, 249) !important; border-bottom: 1px solid rgb(229, 229, 219) !important; }
.cs-navbar-inner { min-height: 88px; gap: 22px !important; }
.cs-brand { letter-spacing: -1px; font-family: Georgia, serif !important; font-size: 29px !important; color: rgb(36, 72, 63) !important; font-weight: 600 !important; }
.cs-nav-desktop a { white-space: nowrap; letter-spacing: 0.03em; font-family: Arial, sans-serif !important; font-size: 12px !important; }
.cs-search { max-width: 180px !important; background: rgb(242, 242, 235) !important; border-radius: 30px !important; }
.cs-icon-btn { border: 1px solid rgb(225, 229, 222); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s, background 0.25s; width: 34px !important; height: 34px !important; color: rgb(36, 72, 63) !important; }
.cs-icon-btn:hover { background: rgb(232, 238, 231); transform: translateY(-2px); }
.cs-icon-btn i { font-size: 21px !important; }
.cs-icon-btn[aria-label="Compare"] { display: none !important; }
.cs-hero { border-radius: 20px; overflow: hidden; background: rgb(244, 241, 232) !important; margin: 18px !important; }
.cs-hero-title { max-width: 540px; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(48px, 6.5vw, 90px) !important; font-weight: 400 !important; line-height: 1.02 !important; letter-spacing: -0.055em !important; color: rgb(36, 72, 63) !important; }
.cs-hero-eyebrow { letter-spacing: 0.2em !important; font: 11px Arial, sans-serif !important; color: rgb(72, 96, 82) !important; margin-bottom: 26px !important; }
.cs-hero-left::after { content: "Easy layers. Thoughtful details. Everyday favourites."; display: block; max-width: 300px; font: 15px / 1.7 Arial, sans-serif; color: rgb(89, 98, 91); margin-top: 28px; }
.cs-hero-cta-circle { background: rgb(36, 72, 63) !important; }
.cs-hero-cta-text { font-family: Arial, sans-serif !important; font-size: 13px !important; }
.cs-hero-mini-products { display: none !important; }
.cs-hero-bg-circle { background: rgb(224, 229, 216) !important; }
.cs-hero-deco { display: none !important; }
.cs-hero-social { display: none !important; }
.cs-section-title, .cs-flash-banner-title { font-family: Georgia, serif !important; letter-spacing: -0.035em !important; font-weight: 400 !important; text-transform: none !important; color: rgb(36, 72, 63) !important; }
.cs-section-title { font-size: 36px !important; }
.cs-section-view-all { font: 12px Arial, sans-serif !important; }
.cs-catgrid-section, .cs-popular-section, .cs-store-section { padding-top: 52px !important; padding-bottom: 28px !important; }
.cs-catgrid-card { transition: transform 0.3s, border-color 0.3s; border: 1px solid rgb(225, 228, 220) !important; border-radius: 12px !important; background: rgb(250, 251, 247) !important; box-shadow: none !important; }
.cs-catgrid-card:hover { transform: translateY(-5px); border-color: rgb(36, 72, 63) !important; }
.cs-catgrid-img-wrap { border-radius: 50% !important; }
.cs-catgrid-name { font: 600 13px Arial, sans-serif !important; }
.cs-catgrid-count { font-size: 11px !important; color: rgb(109, 117, 108) !important; }
.cs-store-cat-btn { border-radius: 25px !important; font: 13px Arial, sans-serif !important; }
.cs-store-cat-btn.active { background: rgb(36, 72, 63) !important; color: white !important; }
.cs-flash-banner-card { border-radius: 18px !important; background: rgb(232, 238, 227) !important; }
.cs-flash-banner-title { font-size: clamp(34px, 4vw, 58px) !important; }
.cs-flash-store-icon { background: rgb(36, 72, 63) !important; }
.cs-flash-discount-badge { color: rgb(36, 72, 63) !important; }
.cs-brands-section { display: none !important; }
.xgpb-services-strip { border-top: 1px solid rgb(225, 228, 218); border-bottom: 1px solid rgb(225, 228, 218); margin-top: 40px; background: rgb(243, 244, 237) !important; padding: 35px 0px !important; }
.xgpb-service-icon { display: flex; align-items: center; justify-content: center; background: rgb(225, 232, 220) !important; color: rgb(36, 72, 63) !important; border-radius: 50% !important; width: 56px !important; height: 56px !important; }
.xgpb-service-title { font: 600 14px Arial, sans-serif !important; color: rgb(36, 72, 63) !important; }
.xgpb-service-desc { font: 12px / 1.7 Arial, sans-serif !important; color: rgb(101, 112, 99) !important; }
.footer-casual { background: rgb(249, 248, 242) !important; border-top: 0px !important; }
.footer-casual h6 { letter-spacing: 0.12em; font: 600 12px Arial, sans-serif !important; }
.footer-casual a { transition: color 0.2s; }
.footer-casual a:hover { color: rgb(36, 72, 63) !important; }
@keyframes casualEnter { 
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.cs-hero-left { animation: 0.8s ease-out 0s 1 normal both running casualEnter; }
.cs-hero-right { animation: 1s ease-out 0s 1 normal both running casualEnter; }
@media (max-width: 767px) {
  .cs-hero { border-radius: 14px; margin: 10px !important; }
  .cs-hero-title { font-size: 52px !important; }
  .cs-hero-left::after { font-size: 13px; }
  .cs-section-title { font-size: 29px !important; }
  .cs-search { max-width: 140px !important; }
  .cs-navbar-inner { gap: 12px !important; }
  .cs-icon-btn { width: 30px !important; height: 30px !important; }
  .cs-catgrid-section, .cs-popular-section, .cs-store-section { padding-top: 32px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero-left, .cs-hero-right { animation: auto ease 0s 1 normal none running none !important; }
  .cs-icon-btn, .cs-catgrid-card { transition: none !important; }
}
html[lang^="ar"] .cs-hero-title{font-family:Tahoma,Arial,sans-serif!important;font-weight:700!important;letter-spacing:0!important;font-size:clamp(38px,4.4vw,66px)!important;line-height:1.45!important}html[lang^="ar"] .cs-hero-left:after{content:"قطع سهلة التنسيق، وتفاصيل أنيقة، لإطلالتك كل يوم."!important;font-family:Tahoma,Arial,sans-serif!important}html[lang^="ar"] .cs-section-title,html[lang^="ar"] .cs-flash-banner-title{font-family:Tahoma,Arial,sans-serif!important;letter-spacing:0!important;line-height:1.6!important;font-weight:600!important}html[lang^="ar"] .cs-navbar-inner{gap:14px!important}html[lang^="ar"] .cs-nav-desktop a{font:12px Tahoma,Arial,sans-serif!important}.cs-hero{position:relative!important;isolation:isolate;min-height:590px!important}.cs-hero>video{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.cs-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,30,24,.82),rgba(10,30,24,.28));z-index:-1}.cs-hero .cs-hero-inner{position:relative;min-height:590px!important;display:flex;align-items:center}.cs-hero .cs-hero-right{display:none!important}.cs-hero .cs-hero-left{width:65%!important;max-width:620px;position:relative;z-index:2}.cs-hero .cs-hero-title,.cs-hero .cs-hero-eyebrow,.cs-hero .cs-hero-cta-text,.cs-hero .cs-hero-left:after{color:#fffdf6!important}.cs-hero .cs-hero-cta-circle{background:#fffdf6!important;color:#24483f!important}.casual-video-toggle{position:absolute;bottom:20px;right:24px;z-index:3;border:1px solid #ffffff66;border-radius:24px;padding:9px 16px;background:#173c31cc;color:white;font:12px Tahoma,Arial,sans-serif;cursor:pointer}html[dir="rtl"] .cs-hero:before{background:linear-gradient(270deg,rgba(10,30,24,.82),rgba(10,30,24,.28))}@media(max-width:767px){.cs-hero,.cs-hero .cs-hero-inner{min-height:500px!important}.cs-hero .cs-hero-left{width:100%!important;padding:24px!important}.cs-hero .cs-hero-title{font-size:43px!important}.cs-hero:before{background:rgba(10,30,24,.6)!important}.cs-hero video{object-position:60% center}}
html body{font-family:"Cairo",Arial,sans-serif!important;font-weight:700!important}html body :is(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,label,li,small,strong,b),html[lang] body :is(.cs-hero-title,.cs-hero-eyebrow,.cs-hero-cta-text,.cs-section-title,.cs-flash-banner-title,.cs-catgrid-name,.cs-catgrid-count,.xgpb-service-title,.xgpb-service-desc,.cs-store-cat-btn,.cs-brand){font-family:"Cairo",Arial,sans-serif!important;font-weight:800!important;letter-spacing:0!important}html[lang] body .cs-hero-left:after{font-family:"Cairo",Arial,sans-serif!important;font-weight:700!important}html[lang] body .cs-hero-title{line-height:1.4!important}html[lang] body .cs-section-title{line-height:1.5!important}.cs-catgrid-section .cs-section-head{justify-content:center!important;text-align:center!important;display:flex!important;margin-bottom:34px!important}.cs-catgrid-section .cs-section-title{width:100%!important;text-align:center!important}.cs-catgrid-row{grid-template-columns:repeat(6,minmax(0,1fr))!important;justify-content:center!important;align-items:stretch!important;gap:22px!important;margin-inline:auto!important;perspective:1200px}.cs-catgrid-row .cs-catgrid-card{position:relative!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1;padding:0!important;margin:0!important;border:1px solid #e3e7de!important;border-radius:18px!important;overflow:hidden!important;background:#e6ebe1!important;box-shadow:0 5px 0 #bcc7b8,0 14px 24px rgba(26,55,44,.17)!important;transform:rotateX(3deg) translateY(0);transform-style:preserve-3d;transition:transform .35s ease,box-shadow .35s ease!important;isolation:isolate}.cs-catgrid-row .cs-catgrid-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 #ffffffb3,inset 0 0 0 1px #ffffff40;z-index:3;background:linear-gradient(135deg,#ffffff22,transparent 45%)}.cs-catgrid-row .cs-catgrid-img-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border-radius:0!important;overflow:hidden!important;background:transparent!important}.cs-catgrid-row .cs-catgrid-img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;border-radius:0!important;transform:scale(1.025);transition:transform .5s ease!important}.cs-catgrid-row .cs-catgrid-info{position:absolute!important;inset:auto 0 0!important;width:100%!important;z-index:2;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-direction:column!important;gap:4px!important;padding:32px 9px 15px!important;background:linear-gradient(transparent,rgba(9,31,22,.88))!important;text-align:center!important;min-height:78px!important}.cs-catgrid-row .cs-catgrid-name{font-size:14px!important;font-weight:900!important;line-height:1.6!important;color:#fff!important;text-shadow:0 1px 6px #0008}.cs-catgrid-row .cs-catgrid-count{font-size:10px!important;font-weight:700!important;line-height:1.5!important;color:#ffffffd9!important}.cs-catgrid-row .cs-catgrid-card:hover,.cs-catgrid-row .cs-catgrid-card:focus-visible{transform:translateY(-9px) rotateX(6deg) rotateY(-5deg) scale(1.025)!important;box-shadow:3px 8px 0 #a6b7a2,0 24px 30px rgba(26,55,44,.24)!important;outline:2px solid #24483f;outline-offset:4px}.cs-catgrid-row .cs-catgrid-card:hover .cs-catgrid-img{transform:scale(1.12)}@media(max-width:991px){.cs-catgrid-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important}.cs-catgrid-row .cs-catgrid-name{font-size:16px!important}}@media(max-width:575px){.cs-catgrid-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.cs-catgrid-row .cs-catgrid-name{font-size:14px!important}.cs-catgrid-section .cs-section-title{font-size:26px!important}}@media(prefers-reduced-motion:reduce){.cs-catgrid-row .cs-catgrid-card,.cs-catgrid-row .cs-catgrid-card:hover{transform:none!important;transition:none!important}.cs-catgrid-row .cs-catgrid-img{transition:none!important}}
html[lang] body *:not(i):not([class*="mdi"]):not([class*="las"]):not([class*=" la-"]):not([class*="fa-"]):not([class*="iconfont"]){font-family:"Cairo",Arial,sans-serif!important;font-weight:700!important}
/* Stable layout before JavaScript and video readiness */
html body.casual .cs-hero{background:#15392e!important;min-height:590px!important;position:relative!important;isolation:isolate}html body.casual .cs-hero .cs-hero-right{display:none!important}html body.casual .cs-hero-left{animation:none!important}html body.casual .cs-hero>video{opacity:0;transition:opacity .25s ease}html body.casual .cs-hero.casual-video-ready>video{opacity:1}html body.casual .cs-navbar{min-height:88px}html body.casual .cs-hero-title,html body.casual .cs-hero-eyebrow,html body.casual .cs-hero-cta-text,html body.casual .cs-hero-left:after{color:#fffdf6!important}@media(max-width:767px){html body.casual .cs-hero{min-height:500px!important}}
body.casual:not(:has(#casual-announcement)):before{content:"";display:block;min-height:38px;background:#24483f}