/* FullComerc storefront — hand-written, mobile-first, no framework.
   Logical properties only (margin-inline, padding-block, inset-inline-*, text-align:start…) so RTL/LTR is automatic. */
:root{
  --c-primary:#0f766e;--c-accent:#b45309;--c-ink:#14201f;--c-bg:#ffffff;--radius:12px;
  --c-muted:color-mix(in srgb,var(--c-ink) 62%,var(--c-bg));
  --c-line:color-mix(in srgb,var(--c-ink) 14%,var(--c-bg));
  --c-soft:color-mix(in srgb,var(--c-primary) 7%,var(--c-bg));
  --c-danger:#b42318;--c-ok:#067647;
  --gutter:16px;--col:720px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font:400 1rem/1.6 var(--font);color:var(--c-ink);background:var(--c-bg);overflow-wrap:anywhere;min-block-size:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg,iframe{max-inline-size:100%}
img{display:block;block-size:auto}
h1,h2,h3{line-height:1.25;margin-block:0 .5em;text-wrap:balance}
h1{font-size:1.75rem;font-weight:800}
h2{font-size:1.35rem;font-weight:700}
p{margin-block:0 1em}
a{color:var(--c-primary)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--c-primary) 55%,#fff);outline-offset:2px}
.fc-wrap{max-inline-size:var(--col);margin-inline:auto;padding-inline:var(--gutter)}
.fc-skip{position:absolute;inset-inline-start:-999px;inset-block-start:0;background:#000;color:#fff;padding:.5rem 1rem;z-index:100}
.fc-skip:focus{inset-inline-start:0}

/* top bar + footer */
.fc-top{border-block-end:1px solid var(--c-line);background:var(--c-bg)}
.fc-top__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:52px}
.fc-brand{font-weight:800;font-size:1.05rem}
.fc-logo{max-block-size:36px;inline-size:auto}
.fc-top__tel{font-weight:600;text-decoration:none;white-space:nowrap}
.fc-foot{margin-block-start:48px;padding-block:28px 96px;background:var(--c-soft);font-size:.9rem;color:var(--c-muted)}
.fc-foot__name{font-weight:700;color:var(--c-ink)}
.fc-foot__nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.fc-previewbar{background:#1f2937;color:#fff;text-align:center;font-size:.85rem;padding:6px var(--gutter);position:sticky;inset-block-start:0;z-index:60}
.is-preview.is-mobile .fc-page,.is-preview.is-mobile .fc-top,.is-preview.is-mobile .fc-foot{max-inline-size:390px;margin-inline:auto;border-inline:1px solid var(--c-line)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:48px;padding:.65rem 1.25rem;border:2px solid transparent;border-radius:var(--radius);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:center;line-height:1.2}
.btn--primary{background:var(--c-primary);color:#fff}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:var(--c-bg);border-color:var(--c-line);color:var(--c-ink)}
.btn--lg{min-block-size:54px;font-size:1.1rem}
.btn--block{display:flex;inline-size:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* blocks */
.blk{padding-block:28px}
.blk+.blk{border-block-start:1px solid transparent}
.note{color:var(--c-muted);font-size:.85rem}
.ratio{position:relative;inline-size:100%;overflow:hidden;border-radius:var(--radius);background:var(--c-soft)}
.ratio>img,.ratio>iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;border:0}
.ratio--hero{aspect-ratio:4/3;margin-block:16px}
.ratio--sq{aspect-ratio:1/1}
.ratio--video{aspect-ratio:16/9}

.hero{padding-block:24px 32px}
.hero--accent{background:var(--c-primary);color:#fff}
.hero--accent a.btn--primary{background:#fff;color:var(--c-primary)}
.hero--dark{background:#111827;color:#fff}
.hero--center .fc-wrap{text-align:center}
.hero__badge{display:inline-block;background:var(--c-accent);color:#fff;border-radius:999px;font-size:.8rem;font-weight:700;padding:.15rem .75rem;margin-block-end:.75rem}
.hero__lead{font-size:1.1rem;color:inherit;opacity:.9}
.hero__price{font-size:1.4rem;margin-block:.5rem 1rem}
.hero__price s{color:var(--c-muted);font-size:1rem;margin-inline-start:.5rem}
.hero--accent .hero__price s,.hero--dark .hero__price s{color:inherit;opacity:.7}

.benefits__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.benefits--grid{grid-template-columns:1fr}
.benefits__list li{display:flex;gap:12px;align-items:flex-start}
.benefits__list p{margin:.15em 0 0;color:var(--c-muted)}
.benefits__ico{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:50%;background:var(--c-soft);color:var(--c-primary)}

.gallery__track{list-style:none;margin:0;padding:0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-block-end:6px}
.gallery__track li{flex:0 0 78%;scroll-snap-align:start}
.gallery--grid{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible}
.gallery--grid li{flex:initial}

.video__cap{color:var(--c-muted);font-size:.9rem;margin-block-start:.5rem}

.testimonials__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.testimonials__list li{border:1px solid var(--c-line);border-radius:var(--radius);padding:14px}
.testimonials__list blockquote{margin:0 0 .5rem}
.testimonials__list .who{margin:0;color:var(--c-muted);font-size:.9rem}
.stars{color:var(--c-accent);margin-inline-start:.5rem;letter-spacing:1px}

.faq__item{border-block-end:1px solid var(--c-line);padding-block:4px}
.faq__item summary{cursor:pointer;font-weight:600;min-block-size:44px;display:flex;align-items:center}
.faq__item p{color:var(--c-muted)}

.countdown{background:color-mix(in srgb,var(--c-accent) 10%,var(--c-bg));text-align:center;padding-block:14px}
.countdown__label{font-weight:700;margin:0}
.countdown__time{font-size:1.3rem;font-variant-numeric:tabular-nums;margin:0}

.delivery__list,.trust__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.delivery__list li,.trust__list li{display:flex;gap:10px;align-items:center}
.trust__list{grid-template-columns:repeat(2,1fr)}
.trust__list li{border:1px solid var(--c-line);border-radius:var(--radius);padding:10px;font-size:.9rem;font-weight:600}
.ico{flex:none;color:var(--c-primary)}
.prose{line-height:1.8}
.prose ul,.prose ol{padding-inline-start:1.25rem}

/* offers */
.offers__list{display:grid;gap:10px}
.offer{display:block;cursor:pointer;position:relative}
.offer>input{position:absolute;opacity:0;inset:0;inline-size:100%;block-size:100%;margin:0;cursor:pointer}
.offer__body{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;border:2px solid var(--c-line);border-radius:var(--radius);padding:12px 14px 12px 14px;background:var(--c-bg)}
.offer>input:checked+.offer__body{border-color:var(--c-primary);background:var(--c-soft)}
.offer>input:focus-visible+.offer__body{outline:3px solid color-mix(in srgb,var(--c-primary) 55%,#fff);outline-offset:2px}
.offer__name{grid-column:1}
.offer__sub{grid-column:1;color:var(--c-muted);font-size:.85rem}
.offer__price{grid-column:2;grid-row:1/3;font-weight:800;text-align:end;font-variant-numeric:tabular-nums}
.offer__price s{display:block;font-weight:400;color:var(--c-muted);font-size:.85rem}
.offer__price small{font-weight:400;color:var(--c-muted)}
.offer__save,.offer__tag{grid-column:1;justify-self:start;font-size:.75rem;font-weight:700;border-radius:999px;padding:.1rem .6rem;background:var(--c-accent);color:#fff}
.offer__tag{background:var(--c-ok)}

/* form */
.fc-form{display:grid;gap:14px}
.fc-field{display:grid;gap:6px}
.fc-field>label,.fc-field>legend,fieldset legend{font-weight:600;font-size:.95rem;padding:0}
fieldset{border:0;margin:0;padding:0;min-inline-size:0}
input[type=text],input[type=tel],input[type=number],select,textarea{inline-size:100%;min-block-size:48px;padding:.6rem .8rem;border:2px solid var(--c-line);border-radius:var(--radius);font:inherit;font-size:16px;background:var(--c-bg);color:inherit}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--c-primary);outline:0}
.fc-field.is-invalid input,.fc-field.is-invalid select,.fc-field.is-invalid textarea{border-color:var(--c-danger)}
.fc-err{color:var(--c-danger);font-size:.85rem}
.fc-row{display:grid;gap:14px;grid-template-columns:1fr}
.fc-modes{display:flex;flex-wrap:wrap;gap:10px}
.fc-modes legend{inline-size:100%;margin-block-end:6px}
.fc-choice{flex:1 1 140px;position:relative;cursor:pointer}
.fc-choice input{position:absolute;opacity:0;inset:0;margin:0;inline-size:100%;block-size:100%;cursor:pointer}
.fc-choice span{display:flex;align-items:center;justify-content:center;min-block-size:48px;border:2px solid var(--c-line);border-radius:var(--radius);padding:.5rem .75rem;text-align:center;font-weight:600}
.fc-choice input:checked+span{border-color:var(--c-primary);background:var(--c-soft)}
.fc-choice input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--c-primary) 55%,#fff);outline-offset:2px}
.fc-stepper{display:flex;gap:8px;align-items:stretch}
.fc-stepper input{text-align:center;max-inline-size:90px}
.fc-stepper .btn{min-inline-size:48px;padding-inline:0}
.fc-hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.fc-stock{margin:0;font-size:.9rem;color:var(--c-ok);font-weight:600}
.fc-stock.is-out{color:var(--c-danger)}
.fc-bump{display:flex;gap:12px;align-items:flex-start;border:2px dashed var(--c-accent);border-radius:var(--radius);padding:12px;cursor:pointer;background:color-mix(in srgb,var(--c-accent) 6%,var(--c-bg))}
.fc-bump input{inline-size:24px;block-size:24px;flex:none;margin:2px 0 0;accent-color:var(--c-primary)}
.fc-bump__body{display:grid;gap:2px}
.fc-bump__price{font-weight:800}
.fc-bump__price s{font-weight:400;color:var(--c-muted)}
.fc-sum{margin:0;border:1px solid var(--c-line);border-radius:var(--radius);padding:12px 14px;display:grid;gap:6px;background:var(--c-soft)}
.fc-sum>div{display:flex;justify-content:space-between;gap:12px}
.fc-sum dt{color:var(--c-muted)}
.fc-sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:end}
.fc-sum__total{border-block-start:1px solid var(--c-line);padding-block-start:8px;font-size:1.15rem}
.fc-sum__total dt,.fc-sum__total dd{color:var(--c-ink);font-weight:800}
.fc-cod{margin:0;color:var(--c-muted);font-size:.9rem;text-align:center}
.fc-privacy{font-size:.8rem;color:var(--c-muted);margin:0}
.fc-error{background:color-mix(in srgb,var(--c-danger) 8%,var(--c-bg));border:1px solid var(--c-danger);color:var(--c-danger);border-radius:var(--radius);padding:10px 12px;margin:0;font-weight:600}
.is-busy .btn--primary{opacity:.7;pointer-events:none}

/* sticky CTA (mobile) */
.sticky-cta{position:fixed;inset-inline:0;inset-block-end:0;z-index:50;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--c-bg) 94%,transparent);backdrop-filter:blur(8px);border-block-start:1px solid var(--c-line);box-shadow:0 -4px 16px rgb(0 0 0/.08)}
.sticky-cta .btn{max-inline-size:var(--col);margin-inline:auto;justify-content:space-between}
.sticky-cta__price{background:rgb(255 255 255/.2);border-radius:999px;padding:.1rem .7rem;font-variant-numeric:tabular-nums}
.sticky-cta[hidden]{display:none}

/* thank-you, tracking */
.thanks__ok{display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:50%;background:var(--c-ok);color:#fff;margin-block-end:12px}
.thanks__ok .ico{color:#fff;inline-size:34px;block-size:34px}
.lead{font-size:1.1rem}
.thanks__lines{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px}
.thanks__lines li{display:flex;justify-content:space-between;gap:12px;border-block-end:1px dashed var(--c-line);padding-block-end:8px}
.track__res{margin-block-start:24px;border:1px solid var(--c-line);border-radius:var(--radius);padding:16px}
.track__tl{padding-inline-start:1.1rem;color:var(--c-muted)}
.pill{display:inline-block;border-radius:999px;padding:.15rem .8rem;font-weight:700;background:var(--c-soft);color:var(--c-primary)}
.pill--delivered{background:var(--c-ok);color:#fff}
.pill--cancelled,.pill--returned{background:var(--c-danger);color:#fff}

@media (min-width:640px){
  :root{--gutter:24px}
  h1{font-size:2.25rem}
  .fc-row{grid-template-columns:1fr 1fr}
  .benefits--grid{grid-template-columns:1fr 1fr}
  .trust__list{grid-template-columns:repeat(3,1fr)}
  .gallery__track li{flex-basis:46%}
  .offers--cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .sticky-cta{display:none!important}
}
@media (max-width:359px){
  :root{--gutter:12px}
  h1{font-size:1.5rem}
  .trust__list{grid-template-columns:1fr}
}