/* MEILS Shop (W206): product cards, the home strip, the Shop page and the request window.
   Colours are the site's own tokens only (teal #005B63 / #007D88, mint #5FD4C6, orange #FF8A00, ink #222, muted #566666, background #F5F7F8).
   Text on the orange button is DARK (#222 on #FF8A00 = 6.73:1); white on orange fails (2.36:1) and is never used.
   Motion: transform and opacity only, 150-300 ms, off under prefers-reduced-motion. Logical properties, so Arabic (RTL) mirrors by itself. */
.shop-strip, .shop-page-section { --s-teal:#005B63; --s-mid:#007D88; --s-mint:#5FD4C6; --s-org:#FF8A00; --s-ink:#222222; --s-mut:#566666; --s-bg:#F5F7F8; --s-line:#e2e8e8; --s-edge:#7a8c8c; color:var(--s-ink); }
.shop-strip { padding-block: 56px 40px; background:#fff; }
.shop-strip .container, .shop-page-section .container { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.shop-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-block-end:18px; }
.shop-head h2 { margin:0; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--s-teal); }
.shop-head p { margin:4px 0 0; color:var(--s-mut); font-size:.95rem; }
.shop-all { color:var(--s-teal); font-weight:600; text-decoration:none; border-block-end:2px solid var(--s-mint); padding-block-end:2px; }
.shop-all:hover { border-block-end-color: var(--s-teal); }
.shop-all:focus-visible, .shop-btn:focus-visible, .shop-modal input:focus-visible, .shop-modal textarea:focus-visible, .shop-nav-btn:focus-visible, .shop-filter button:focus-visible { outline:3px solid var(--s-teal); outline-offset:3px; }

.shop-group-title { margin:22px 0 10px; font-size:1rem; font-weight:700; color:var(--s-teal); letter-spacing:.2px; }
.shop-rail-wrap { position:relative; }
.shop-rail { display:grid; grid-auto-flow:column; grid-auto-columns:min(300px, 80%); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-block:6px 14px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.shop-rail > * { scroll-snap-align:start; }
.shop-rail { overscroll-behavior-x:contain; scroll-padding-inline:2px; }
.shop-nav-btn { position:absolute; inset-block-start:72px; z-index:6; width:44px; height:44px; border-radius:50%; border:1px solid var(--s-line); background:#fff; color:var(--s-teal); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 6px 16px rgba(0,91,99,.22); transition:transform .2s ease, opacity .2s ease; display:flex; align-items:center; justify-content:center; padding:0; }
.shop-nav-btn:hover { transform:scale(1.06); }
.shop-nav-btn[disabled] { opacity:.35; cursor:default; box-shadow:none; transform:none; }
.shop-nav-btn.prev { inset-inline-start:-10px; } .shop-nav-btn.next { inset-inline-end:-10px; }
.shop-nav-btn { display:flex; }
@media (max-width: 639px) { .shop-nav-btn { width:38px; height:38px; font-size:21px; inset-block-start:68px; } .shop-nav-btn.prev { inset-inline-start:4px; } .shop-nav-btn.next { inset-inline-end:4px; } }
@media (min-width: 1280px) { .shop-nav-btn.prev { inset-inline-start:-18px; } .shop-nav-btn.next { inset-inline-end:-18px; } }
[dir="rtl"] .shop-nav-btn { transform:scaleX(-1); } [dir="rtl"] .shop-nav-btn:hover { transform:scaleX(-1) scale(1.06); }

.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }

.shop-card { background:#fff; border:1px solid var(--s-line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 6px rgba(0,91,99,.06); transition:transform .25s ease, box-shadow .25s ease; animation:shopIn .5s ease both; }
.shop-rail > .shop-card:nth-child(2), .shop-grid > .shop-card:nth-child(2) { animation-delay:.06s; }
.shop-rail > .shop-card:nth-child(3), .shop-grid > .shop-card:nth-child(3) { animation-delay:.12s; }
.shop-rail > .shop-card:nth-child(n+4), .shop-grid > .shop-card:nth-child(n+4) { animation-delay:.18s; }
@keyframes shopIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.shop-card:hover { transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,91,99,.16); }
.shop-card__img { position:relative; aspect-ratio:8/5; background:linear-gradient(135deg,#eaf3f4,#F5F7F8); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.shop-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.shop-card__img svg { height:58%; width:auto; max-width:70%; }
.shop-card__rep { position:absolute; inset-inline-start:10px; inset-block-end:10px; background:rgba(255,255,255,.92); color:var(--s-mut); font-size:.75rem; padding:3px 9px; border-radius:999px; border:1px solid var(--s-line); }
.shop-card__body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.shop-card__name { margin:0; font-size:1.1rem; font-weight:700; line-height:1.3; }
.shop-card__chips { display:flex; gap:6px; flex-wrap:wrap; }
.shop-chip { font-size:.78rem; background:var(--s-bg); color:var(--s-teal); border:1px solid var(--s-line); padding:3px 10px; border-radius:999px; }
.shop-card__sub, .shop-card__extra, .shop-card__line { margin:0; color:var(--s-mut); font-size:.82rem; line-height:1.45; }
.shop-card__price { font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.3px; color:var(--s-ink); }
.shop-card__price small { font-size:.8rem; font-weight:600; color:var(--s-mut); }
.shop-card__buy { margin-block-start:auto; display:flex; flex-direction:column; gap:8px; }
.shop-btn { display:block; width:100%; text-align:center; background:var(--s-org); color:#222222; font-weight:700; font-size:1rem; padding:12px 14px; border:0; border-radius:12px; cursor:pointer; transition:filter .2s ease, transform .2s ease; }
.shop-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.shop-btn[disabled] { opacity:.7; cursor:wait; }

.shop-page-section { padding-block: 40px 56px; background:#fff; }
.shop-page-section h1 { margin:0; font-size:clamp(1.8rem,3.2vw,2.5rem); color:var(--s-teal); }
.shop-trust { display:flex; gap:10px 22px; flex-wrap:wrap; margin-block:6px 18px; color:var(--s-mut); font-size:.9rem; }
.shop-trust span::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--s-mint); margin-inline-end:8px; }
.shop-filters { display:flex; gap:10px 28px; flex-wrap:wrap; align-items:center; }
.shop-filters .shop-filter { align-items:center; } .shop-filters strong { font-size:.85rem; color:var(--s-teal); }
.shop-status { color:var(--s-mut); font-size:1rem; margin-block:18px; }
.shop-page-section .shop-group-title { font-size:1.35rem; margin:30px 0 14px; }
.shop-filter { display:flex; gap:8px; flex-wrap:wrap; margin-block:6px 18px; }
.shop-filter button { border:1px solid var(--s-edge); background:#fff; color:var(--s-ink); padding:8px 14px; border-radius:999px; font-size:.9rem; cursor:pointer; transition:background .2s ease, color .2s ease; }
.shop-filter button[aria-pressed="true"] { background:var(--s-teal); color:#fff; border-color:var(--s-teal); }

/* the request window */
body.shop-modal-open { overflow:hidden; }
.shop-modal { position:fixed; inset:0; z-index:9999; background:rgba(0,40,44,.55); display:flex; align-items:flex-end; justify-content:center; animation:shopFade .2s ease both; }
@media (min-width:700px) { .shop-modal { align-items:center; } }
.shop-modal__panel { position:relative; width:min(560px,100%); max-height:92vh; overflow:auto; background:#fff; color:#222222; border-radius:20px 20px 0 0; padding:22px 20px 24px; animation:shopSheet .28s ease both; }
@media (min-width:700px) { .shop-modal__panel { border-radius:20px; } }
@keyframes shopFade { from { opacity:0; } to { opacity:1; } }
@keyframes shopSheet { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.shop-modal__x { position:absolute; inset-block-start:10px; inset-inline-end:12px; width:36px; height:36px; border:0; background:transparent; font-size:26px; color:#566666; cursor:pointer; border-radius:50%; }
.shop-modal__x:focus-visible { outline:3px solid #005B63; outline-offset:2px; }
.shop-modal h2 { margin:0 0 10px; font-size:1.3rem; color:#005B63; }
.shop-modal__sel { background:#F5F7F8; border:1px solid #e2e8e8; border-radius:12px; padding:12px; display:grid; gap:2px; margin-block-end:14px; }
.shop-modal__sel span { font-weight:800; font-variant-numeric:tabular-nums; } .shop-modal__sel em { font-style:normal; color:#566666; font-size:.8rem; }
.shop-modal form { display:grid; gap:12px; }
.shop-modal label { display:grid; gap:4px; font-size:.88rem; color:#222222; font-weight:600; }
.shop-modal input:not([type=checkbox]), .shop-modal textarea { border:1.5px solid #7a8c8c; border-radius:10px; padding:11px 12px; font:inherit; font-weight:400; color:#222222; background:#fff; width:100%; }
.shop-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shop-modal fieldset { border:1px solid #e2e8e8; border-radius:12px; padding:10px 12px; margin:0; display:grid; gap:8px; }
.shop-modal legend { font-size:.85rem; font-weight:700; color:#005B63; padding-inline:6px; }
.shop-extra { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.shop-extra label { display:flex; gap:8px; align-items:center; font-weight:500; } .shop-extra label span { color:#566666; font-size:.82rem; }
.shop-extra input[type=text] { width:76px; text-align:center; }
.shop-modal__next { margin:0; color:#566666; font-size:.84rem; line-height:1.5; }
.shop-modal__err { margin:0; color:#B3261E; font-weight:600; font-size:.9rem; }
.shop-modal__ok { text-align:center; padding-block:18px; display:grid; gap:12px; }

@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-modal, .shop-modal__panel { animation:none; }
  .shop-card, .shop-btn, .shop-nav-btn, .shop-filter button { transition:none; }
  .shop-card:hover, .shop-btn:hover, .shop-nav-btn:hover { transform:none; }
  .shop-rail { scroll-behavior:auto; }
}