@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

/* Leylum brand tokens (sampled from Figma) */
:root{
  --ly-sand:#EDE5DC; --ly-card:#F7F3EF; --ly-panel:#DED2CB; --ly-ink:#7F7B74;
  --ly-line:#DCD3C8; --ly-teal:#279989; --ly-blush:#EAA794; --ly-strip:#999590;
}

/* global canvas */
body{background:var(--ly-sand) !important;color:var(--ly-ink)}
.container{max-width:1356px !important}

/* announcement bar */
.main-nav-container::before{
  content:"شحن مجاني للطلبات فوق 200 ريال";
  display:block;background:var(--ly-ink);color:var(--ly-card);
  text-align:center;font-size:12px;font-weight:500;letter-spacing:.04em;padding:10px 16px;
}

/* header */
.main-nav-container .inner{background:var(--ly-sand) !important;color:var(--ly-ink) !important;box-shadow:none !important}
.main-nav-container .inner a,
.main-nav-container .inner button,
.main-nav-container .inner span{color:var(--ly-ink) !important}
.main-nav-container .inner svg{color:var(--ly-ink) !important}

/* hero: inset card, text bottom-start, frosted pill CTA, no chrome */
.custom-shopify-style-slider{border-radius:26px;overflow:hidden}
.custom-shopify-style-slider .custom-slide-item{border-radius:26px;overflow:hidden}
.custom-shopify-style-slider .slide-content-wrapper{
  align-items:flex-end !important;justify-content:flex-start !important;padding:48px !important;
}
.custom-shopify-style-slider .inner-content{
  align-items:flex-start !important;text-align:start !important;margin:0 !important;max-width:640px;
}
.slide-title{font-size:clamp(30px,3.4vw,46px) !important;font-weight:500 !important;
  text-shadow:0 1px 16px rgba(0,0,0,.35);line-height:1.25 !important}
.slide-subtext{font-size:15px !important;font-weight:700 !important;max-width:52ch;
  text-shadow:0 1px 12px rgba(0,0,0,.45);line-height:1.8 !important}
a.slide-btn{
  background:rgba(255,255,255,.18) !important;border:1px solid rgba(255,255,255,.75) !important;
  color:#fff !important;border-radius:999px !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:15px 46px !important;font-weight:700 !important;font-size:14.5px !important;
}
a.slide-btn:hover{background:rgba(255,255,255,.32) !important}
section[class*="shopify-hero"] .w-fit.gap-4.mx-auto{display:none !important}
[class*="hero-prev"],[class*="hero-next"]{display:none !important}

/* marquee strip */
.sleek-marquee-wrapper{background:var(--ly-strip) !important;border:0 !important}
.sleek-marquee-wrapper *{color:var(--ly-sand) !important;font-weight:700}

/* native FAQ accordion -> outlined pills */
.SK-faq-section details,
.SK-faq-section .accordion-item{
  border:1px solid var(--ly-ink) !important;border-radius:999px !important;
  background:transparent !important;margin-bottom:11px !important;
}
.SK-faq-section details[open],
.SK-faq-section .accordion-item.active{border-radius:20px !important}

/* footer */
footer.store-footer{
  background:var(--ly-sand) !important;color:var(--ly-ink) !important;
  border-top:1px solid rgba(127,123,116,.4) !important;
  margin-top:clamp(2rem,4vw,4rem) !important;
}
footer.store-footer *{color:var(--ly-ink) !important}
footer.store-footer .store-footer__inner{border:0 !important}
footer.store-footer input{background:#FBF9F7 !important;border-radius:999px !important}
footer.store-footer button{border-radius:999px !important}

/* product page polish */
.container--product-details{background:var(--ly-sand)}
salla-add-product-button button{border-radius:999px !important;font-weight:700 !important}

/* pill all primary CTAs */
.s-button-btn,.btn,button[type="submit"]{border-radius:999px !important}

/* launch fix: cart icon svg was display:none, leaving an orphan count badge */
salla-cart-summary > .s-cart-summary-wrapper #s-cart-icon svg{display:inline-block!important;width:22px;height:22px;vertical-align:middle}
.s-cart-summary-wrapper{display:flex!important;align-items:center;min-width:26px}
/* hide broken barcode icon glyph in SKU row */
.sicon-barcode{display:none!important}


/* .lyp styles for info pages (Salla now escapes <style> tags inside page content, so these live here) */
.lyp{--sand:#EDE5DC;--card:#F7F3EF;--panel:#DED2CB;--ink:#7F7B74;--teal:#279989;--blush:#EAA794;font-family:'Handicrafts','Tajawal',system-ui,sans-serif;color:var(--ink);direction:rtl;text-align:right;line-height:1.9}
.lyp *{box-sizing:border-box}
.lyp .ac{font-family:'Amiri',serif}
.lyp .hd{border-bottom:1px solid rgba(127,123,116,.35);padding-bottom:26px;margin-bottom:38px}
.lyp h1{margin:0 0 12px;font-size:42px;font-weight:500;letter-spacing:-.015em;line-height:1.22}
.lyp .lede{margin:0;font-size:18px;font-weight:300;max-width:70ch;line-height:1.75}
.lyp h2{margin:44px 0 14px;font-size:24px;font-weight:500;letter-spacing:-.01em}
.lyp h3{margin:26px 0 8px;font-size:17px;font-weight:700}
.lyp p{margin:0 0 14px;font-size:15.5px;font-weight:300;max-width:78ch}
.lyp ul{margin:0 0 16px;padding-inline-start:22px;font-size:15.5px;font-weight:300}
.lyp li{margin-bottom:8px}
.lyp .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;margin-bottom:10px}
.lyp .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin:26px 0 8px}
.lyp .tile{background:var(--card);border-radius:16px;padding:24px 22px}
.lyp .tile h3{margin:0 0 8px;font-size:16px}
.lyp .tile p{margin:0;font-size:14px}
.lyp .panel{background:var(--panel);border-radius:20px;padding:30px 30px 24px;margin:30px 0}
.lyp .cta{display:inline-block;background:var(--ink);color:#F7F3EF;border-radius:999px;padding:14px 34px;font-size:14.5px;font-weight:700;text-decoration:none;margin-top:8px}
@media(max-width:760px){.lyp h1{font-size:29px}.lyp .grid{grid-template-columns:1fr}}


/* ============================================================
   vP layer · 1 Sep 2026 · brand Arabic font + interaction polish
   ============================================================ */

/* The Year of Handicrafts — Arabic brand font (vN team review: "use these fonts for arabic").
   Served from the public theme repo via jsDelivr; Arabic + digits only, Latin falls back to Tajawal. */
@font-face{font-family:'Handicrafts';font-weight:400;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/nawafrz/theme-leylum@master/public/fonts/hc-regular.woff2') format('woff2')}
@font-face{font-family:'Handicrafts';font-weight:500;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/nawafrz/theme-leylum@master/public/fonts/hc-medium.woff2') format('woff2')}
@font-face{font-family:'Handicrafts';font-weight:600;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/nawafrz/theme-leylum@master/public/fonts/hc-semibold.woff2') format('woff2')}
@font-face{font-family:'Handicrafts';font-weight:700;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/nawafrz/theme-leylum@master/public/fonts/hc-bold.woff2') format('woff2')}

/* apply the brand font store-wide (Latin glyphs fall through to Tajawal automatically) */
body,button,input,select,textarea,
h1,h2,h3,h4,h5,h6,
.slide-title,.slide-subtext,a.slide-btn,
.s-button-btn,salla-add-product-button button{
  font-family:'Handicrafts','Tajawal',system-ui,-apple-system,sans-serif !important;
}

/* vP interaction polish: CTAs breathe on hover (site parity: add-to-cart grows) */
a.slide-btn,.s-button-btn,salla-add-product-button button,footer.store-footer button{
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease !important;
}
salla-add-product-button button:hover,a.slide-btn:hover{
  transform:scale(1.03);
}
salla-add-product-button button:active,a.slide-btn:active{transform:scale(.98)}

/* vP mobile pass: comfortable thumb targets */
@media(max-width:768px){
  .s-button-btn,salla-add-product-button button,a.slide-btn{min-height:48px !important}
  .custom-shopify-style-slider .slide-content-wrapper{padding:22px !important}
  .slide-title{font-size:26px !important}
}

/* sticky mobile add-to-cart bar (styles; behavior in custom JS) */
.lyv-sticky{position:fixed;inset-inline:0;bottom:0;z-index:90;background:var(--ly-card);
  border-top:1px solid var(--ly-line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:12px;box-shadow:0 -8px 24px rgba(84,80,75,.10)}
.lyv-sticky.on{display:flex}
.lyv-sticky .lyv-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ly-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyv-sticky .lyv-btn{flex:0 0 auto;background:var(--ly-ink);color:#fff;border:0;border-radius:999px;
  padding:13px 26px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;min-height:48px}
@media(min-width:769px){.lyv-sticky{display:none !important}}