/* Matjar Rimal — YouCan theme styles (light blue + white, RTL-first, mobile-first) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.has-sticky{padding-bottom:6rem}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;line-height:1.2;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
.container{width:100%;max-width:var(--page-width);margin-inline:auto;padding-inline:1rem}
.container--narrow{max-width:800px}
.section{padding-block:3.5rem}
.section--tint{background:var(--brand-50)}
.lead{margin-top:1rem;color:var(--muted);font-size:1.05rem}
.rte{margin-top:1rem;color:var(--muted);font-size:1rem}
.rte p{margin:0 0 .75rem}
.rte img{border-radius:var(--radius)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-pill);font-weight:700;padding:.75rem 1.5rem;font-size:.95rem;transition:background-color .2s,color .2s,transform .1s;white-space:nowrap}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 14px 34px -12px rgba(2,132,199,.55)}
.btn--primary:hover{background:var(--brand-dark)}
.btn--light{background:#fff;color:var(--brand)}
.btn--light:hover{background:var(--brand-50)}
.btn--ghost{border:1px solid var(--brand-200);color:var(--brand)}
.btn--block{width:100%}
.btn--lg{padding:1rem 2rem;font-size:1.05rem}
.btn--sm{padding:.5rem 1.15rem;font-size:.85rem}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn__spinner{width:1rem;height:1rem;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--brand-100);background:#fff}
.icon{flex:none}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--radius-pill);background:var(--brand-50);color:var(--brand-dark);font-size:.75rem;font-weight:700;padding:.35rem .75rem}
.chip--solid{background:var(--brand);color:#fff}
.chip--lg{font-size:.9rem;padding:.7rem 1.2rem;background:#fff;border:1px solid var(--brand-200)}
.chips{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:box-shadow .2s,border-color .2s}
.header.is-scrolled,.header.is-open{border-color:var(--brand-100);box-shadow:0 2px 16px -10px rgba(2,132,199,.35)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:3.5rem;gap:.75rem}
.header__nav{display:none;gap:2rem}
.header__nav a{font-weight:500;color:var(--muted);font-size:.95rem}
.header__nav a:hover{color:var(--brand-dark)}
.header__actions{display:flex;align-items:center;gap:.5rem}
.header__cta{display:none}
.header__mobile{border-top:1px solid var(--brand-50);padding:.25rem 1rem 1.25rem;background:#fff}
.header__mobile a:not(.btn){display:block;padding:.75rem 0;border-bottom:1px solid var(--brand-50);font-family:var(--font-heading);font-weight:700}
.header__mobile .btn{margin-top:1rem}
.logo{display:flex;align-items:center;gap:.5rem}
.logo__img{height:2.25rem;width:auto}
.logo__mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;background:var(--brand);color:#fff;font-family:var(--font-heading);font-weight:800;font-size:.8rem}
.logo__text{line-height:1.05}
.logo__name{display:block;font-family:var(--font-heading);font-weight:800;font-size:1.1rem}
.logo__sub{display:block;font-size:.6rem;font-weight:600;color:var(--brand);letter-spacing:.04em}

/* Hero (product first) */
.hero{padding:1rem 0 3rem}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.hero__grid>*,.split>*,.cards>*,.feature-grid>*,.why-grid>*,.steps>*,.reviews>*{min-width:0}
.hero__title{font-size:1.9rem;font-weight:800}
.hero__benefit{margin-top:.6rem;color:var(--brand-dark);font-weight:600;font-size:1.05rem}
.hero__desc{margin-top:.5rem;color:var(--muted);font-size:.95rem}
.benefits{display:grid;gap:.6rem;margin-top:1.25rem}
.benefits__item{display:flex;align-items:flex-start;gap:.6rem;background:var(--brand-50);border-radius:.75rem;padding:.6rem .8rem;font-size:.9rem;font-weight:500;color:#334155}
.benefits__icon{display:grid;place-items:center;flex:none;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--brand);color:#fff;margin-top:.1rem}
.hero__price{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--brand-100)}
.hero__offer{margin-top:.5rem;color:var(--brand-dark);font-weight:600;font-size:.9rem}
.price{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.price__current{font-family:var(--font-heading);font-weight:800;font-size:2rem;color:var(--brand-dark)}
.price__old{color:var(--faint);font-size:1.1rem}
.hero__variants{margin-top:1rem}
.stock{margin-top:.75rem;font-size:.85rem;font-weight:700;color:#15803d}
.stock--out{color:#b91c1c}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.25rem}
.hero__qty{display:flex;align-items:center;gap:.75rem}
.hero__qty-label{font-size:.9rem;font-weight:700;color:#334155}
.hero__cta{flex:1}
.trust{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.25rem}
.trust li{display:flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.trust .icon{color:var(--brand)}
.hero__order{margin-top:2rem;scroll-margin-top:5rem}
.hero--empty .empty{margin-top:4rem}
.empty{display:grid;place-items:center;gap:1rem;text-align:center;padding:3rem 1rem;border:2px dashed var(--brand-200);border-radius:var(--radius);color:var(--muted);background:var(--brand-50)}

/* Gallery */
.gallery__main{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--brand-100);background:var(--brand-50);aspect-ratio:4/5}
.gallery__main img{display:block;width:100%;height:100%;min-height:clamp(300px,65vw,520px);object-fit:cover;background:transparent}
.gallery__fallback{display:grid;place-items:center;aspect-ratio:1;color:var(--brand-200)}
.badge{position:absolute;top:.75rem;inset-inline-start:.75rem;background:var(--brand);color:#fff;font-size:.75rem;font-weight:700;padding:.3rem .75rem;border-radius:var(--radius-pill)}
.gallery__thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.75rem;align-items:start}
.gallery__thumb{border:2px solid transparent;border-radius:.75rem;overflow:hidden;padding:0;transition:border-color .2s}
.gallery__thumb img{display:block;aspect-ratio:1;object-fit:contain;width:100%;height:auto;background:#fff}
.gallery__thumb.is-active{border-color:var(--brand)}

/* Quantity */
.qty{display:inline-flex;align-items:center;border:1px solid var(--brand-200);border-radius:var(--radius-pill);background:#fff}
.qty__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;color:#334155}
.qty__btn:hover{background:var(--brand-50)}
.qty__btn:disabled{opacity:.4;cursor:not-allowed}
.qty__value{min-width:2.5rem;text-align:center;font-family:var(--font-heading);font-weight:800;font-size:1.1rem}
.qty--sm .qty__btn{width:2.25rem;height:2.25rem}

/* Order card */
.order-card{border:2px solid var(--brand-100);border-radius:var(--radius);background:#fff;padding:1rem;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -16px rgba(2,132,199,.14)}
.order-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.order-card__title{font-size:1.25rem;font-weight:800}
.order-card__subtitle{font-size:.85rem;color:var(--muted);margin-top:.15rem}
.order-summary{display:flex;align-items:center;gap:.75rem;background:var(--brand-50);border-radius:.75rem;padding:.75rem;margin-top:1rem}
.order-summary img{width:3.5rem;height:3.5rem;border-radius:.5rem;object-fit:cover;flex:none}
.order-summary__info{flex:1;min-width:0}
.order-summary__name{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-summary__meta{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.order-summary__meta b{color:var(--brand-dark)}
.order-form{display:grid;gap:.9rem;margin-top:1rem}
.field__label{display:block;font-size:.85rem;font-weight:700;color:#334155;margin-bottom:.35rem}
.field__input{width:100%;border:1px solid var(--brand-200);border-radius:.75rem;background:#fff;padding:.8rem 1rem;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field__input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-100)}
.field__input.is-invalid{border-color:#ef4444}
.field__input::placeholder{color:var(--faint)}
.field__error{font-size:.8rem;font-weight:500;color:#ef4444;margin-top:.3rem;min-height:0}
.field__error:empty{display:none}
.note{display:flex;align-items:flex-start;gap:.5rem;border:1px solid var(--brand-100);background:var(--brand-50);border-radius:.75rem;padding:.65rem .9rem;font-size:.8rem;font-weight:500;color:var(--muted)}
.note .icon{color:var(--brand);flex:none;margin-top:.1rem}
.order-form__wa{text-align:center;font-size:.85rem;font-weight:600;color:var(--brand-dark);text-decoration:underline;text-underline-offset:4px}

/* Sticky CTA + WhatsApp */
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:40;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--brand-100);transition:transform .3s}
.sticky-cta.is-hidden{transform:translateY(110%)}
.sticky-cta__info{min-width:0}
.sticky-cta__name{font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta__price{font-family:var(--font-heading);font-weight:800;color:var(--brand-dark);font-size:1.1rem;line-height:1.1}
.sticky-cta__btn{flex:1;padding:.9rem 1rem;font-size:1rem}
.wa-float{position:fixed;inset-inline-end:1rem;bottom:5.75rem;z-index:40;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--whatsapp);color:#fff;box-shadow:0 10px 24px -8px rgba(37,211,102,.7);transition:opacity .3s,transform .3s}
.wa-float:hover{transform:scale(1.05)}
.wa-float.is-hidden-mobile{opacity:0;pointer-events:none;transform:translateY(1rem)}

/* Headings */
.heading{max-width:42rem}
.heading--center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-block;border-radius:var(--radius-pill);background:var(--brand-50);color:var(--brand-dark);font-size:.75rem;font-weight:700;padding:.25rem .75rem}
.section--tint .eyebrow{background:#fff}
.heading__title{margin-top:.75rem;font-size:1.6rem;font-weight:800}
.heading__subtitle{margin-top:.75rem;color:var(--muted)}

/* Split layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
.split__image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--brand-100)}
.split__image--tall{aspect-ratio:4/5}
.points{display:grid;gap:.6rem;margin-top:1.25rem}
.points li{display:flex;align-items:flex-start;gap:.6rem;font-weight:500;color:#334155}
.points .icon{color:var(--brand);flex:none;margin-top:.2rem}

/* Features / Why */
.feature-grid,.why-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:2rem}
.feature,.why{border-radius:var(--radius);padding:1.25rem;height:100%}
.feature{border:1px solid var(--brand-100);background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -16px rgba(2,132,199,.14)}
.why{background:var(--brand-50)}
.feature__icon,.why__icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;color:var(--brand)}
.feature__icon{background:var(--brand-50)}
.why__icon{background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.feature h3,.why h3{margin-top:1rem;font-size:1.1rem;font-weight:700}
.feature p,.why p{margin-top:.4rem;color:var(--muted);font-size:.9rem}

/* Specs */
.details__desc{background:#fff;border:1px solid var(--brand-100);border-radius:var(--radius);padding:1.25rem;margin-top:1.5rem}
.specs{margin:1.5rem 0 0;border:1px solid var(--brand-100);border-radius:var(--radius);background:#fff;overflow:hidden}
.specs__row{display:grid;grid-template-columns:1fr 1.4fr;gap:1rem;padding:.9rem 1rem;border-top:1px solid var(--brand-50)}
.specs__row:first-child{border-top:0}
.specs dt{font-weight:700;color:#334155;font-size:.9rem}
.specs dd{margin:0;color:var(--muted);font-size:.9rem}

/* Steps */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:2rem}
.step{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--brand-100);border-radius:var(--radius);padding:1.25rem}
.step__num{font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--brand-200);line-height:1}
.step__icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;background:var(--brand-50);color:var(--brand)}
.step h3{margin-top:.75rem;font-size:1.1rem}
.step p{margin-top:.25rem;color:var(--muted);font-size:.9rem}

/* Reviews */
.reviews{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:2rem}
.review{margin:0;border:1px solid var(--brand-100);border-radius:var(--radius);padding:1.25rem;background:#fff}
.review__head{display:flex;align-items:center;gap:.75rem}
.review__avatar{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--brand-50);color:var(--brand)}
.review__name{font-weight:700;font-size:.9rem}
.review__date{font-size:.75rem;color:var(--faint)}
.review__stars{margin-inline-start:auto;color:#f59e0b;letter-spacing:.05em}
.review__content{margin:1rem 0 0;color:var(--muted);font-size:.95rem}
[data-reviews] .btn--ghost{margin:1.5rem auto 0;display:flex;width:max-content}

/* Delivery */
.cities{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.cities li{border:1px solid var(--brand-100);background:#fff;border-radius:var(--radius-pill);padding:.35rem .9rem;font-size:.8rem;font-weight:500;color:var(--muted)}
.cities__more{border-color:transparent!important;background:transparent!important;color:var(--brand-dark)!important;font-weight:700!important}
.map-card{background:#fff;border:1px solid var(--brand-100);border-radius:var(--radius);padding:1.5rem}
.map-card svg{display:block;width:100%;max-width:300px;margin-inline:auto}

/* Cards */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:2rem}
.card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--brand-100);border-radius:var(--radius);background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -16px rgba(2,132,199,.14)}
.card__media img,.card--collection img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__body{display:flex;flex-direction:column;flex:1;padding:1rem}
.card__title{font-size:1.05rem;font-weight:700}
.card__footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:1rem}
.card__price .price__current{font-size:1.25rem}
.card--select{position:relative;cursor:pointer}
.card--select input{position:absolute;top:.75rem;inset-inline-start:.75rem;width:1.25rem;height:1.25rem;accent-color:var(--brand)}
.card--select:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}

/* Final CTA */
.final{padding-top:1rem}
.final__card{background:var(--brand);color:#fff;border-radius:1.5rem;padding:3rem 1.5rem;text-align:center}
.final__card h2{color:#fff;font-size:1.9rem;font-weight:800}
.final__card p{margin-top:.75rem;color:#e0f2fe}
.final__card .btn{margin-top:1.75rem}
.final__note{font-size:.85rem;font-weight:600;margin-top:1rem!important}

/* Footer */
.footer{border-top:1px solid var(--brand-100);padding:3rem 0 2rem;background:#fff}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.footer__tagline{margin-top:1rem;color:var(--muted);font-size:.9rem;max-width:24rem}
.footer__social{display:flex;gap:.75rem;margin-top:1.25rem}
.footer__social a{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--brand-100);color:var(--muted);font-size:.7rem;font-weight:800}
.footer__social a:hover{color:var(--brand);border-color:var(--brand-200)}
.footer h4{font-size:.75rem;font-weight:700;color:var(--faint);letter-spacing:.02em}
.footer ul{display:grid;gap:.6rem;margin-top:1rem}
.footer li{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.9rem}
.footer li .icon{color:var(--brand)}
.footer__bottom{display:flex;flex-direction:column;gap:.5rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--brand-50);font-size:.8rem;color:var(--faint)}
.footer__note{color:var(--brand-dark);font-weight:600}

/* Misc pages */
.page-title{font-size:1.75rem;font-weight:800;margin-bottom:1rem}
.pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}
.pagination__btn{border:1px solid var(--brand-200);border-radius:var(--radius-pill);padding:.5rem 1.25rem;font-weight:600;color:var(--brand-dark)}
.cart{display:grid;gap:1rem}
.cart__item{display:flex;align-items:center;gap:.75rem;border:1px solid var(--brand-100);border-radius:var(--radius);padding:.75rem;background:#fff}
.cart__item img{width:4rem;height:4rem;border-radius:.5rem;object-fit:cover}
.cart__name{font-weight:700}
.cart__meta{font-size:.85rem;color:var(--muted)}
.cart__total{display:flex;justify-content:space-between;font-size:1.1rem;padding:.5rem .25rem}
.thanks{text-align:center;display:grid;gap:1rem;justify-items:center}
.thanks__icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:var(--brand-100);color:var(--brand)}
.thanks h1{font-size:1.75rem}
.thanks p{color:var(--muted)}
.thanks__ref b{color:var(--brand-dark)}
.thanks__items{width:100%;display:grid;gap:.5rem;text-align:start}
.thanks__cod{font-weight:700;color:var(--brand-dark)}
.upsell__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem}
.toast{position:fixed;top:1rem;inset-inline:1rem;z-index:100;margin-inline:auto;max-width:28rem;background:var(--ink);color:#fff;border-radius:.75rem;padding:.9rem 1.1rem;font-size:.9rem;font-weight:600;box-shadow:0 10px 30px -10px rgba(15,23,42,.5)}
.toast[data-type="error"]{background:#b91c1c}
.toast[data-type="success"]{background:#15803d}

/* Tablet */
@media (min-width:640px){
  .container{padding-inline:1.5rem}
  .header__inner{height:4rem}
  .header__cta{display:inline-flex}
  .hero{padding-top:2rem}
  .hero__title{font-size:2.25rem}
  .benefits{grid-template-columns:1fr 1fr}
  .hero__cta{flex:none}
  .gallery__thumbs{grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem}
  .order-card{padding:1.5rem}
  .feature-grid,.why-grid,.cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr)}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
  .heading__title{font-size:2rem}
  .final__card{padding:4rem 3rem}
  .final__card h2{font-size:2.25rem}
}

/* Desktop */
@media (min-width:1024px){
  body.has-sticky{padding-bottom:0}
  .sticky-cta{display:none}
  .wa-float{bottom:1.5rem;inset-inline-end:1.5rem}
  .wa-float.is-hidden-mobile{opacity:1;pointer-events:auto;transform:none}
  .header__nav{display:flex}
  .header__toggle,.header__mobile{display:none!important}
  .section{padding-block:5rem}
  .hero{padding:2.5rem 0 5rem}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
  .hero__gallery{position:sticky;top:6rem}
  .hero__title{font-size:2.6rem}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
  .split--reverse>:first-child{order:1}
  .split--reverse>:last-child{order:0}
  .why-grid{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1.3fr 1fr 1fr}
  .heading__title{font-size:2.25rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}