/* Chicco Quick Order — front-end styles.
   All classes prefixed .cqo- so nothing collides with the Matat theme.
   Brand tokens sampled from the live site: green #0B2900, sale #a8321f, font Alef. */

:root{
  --cqo-green:#0B2900;
  --cqo-green-soft:#1c4010;
  --cqo-sale:#a8321f;
  --cqo-line:#cfd2c8;
  --cqo-ink:#14180f;
  --cqo-muted:#6b7065;
}

/* ---------- shared controls ---------- */
/* 13px ink (was 11px muted): owner 2026-07-29 — the grind/method labels read too small.
   Inset 12px = the select's own text inset, so caption and value line up, 3px above the control
   (owner's desktop pass 2026-09-28: the captions sat on the field's edge, detached from the text).
   Each caption + control is one .cqo-field; the desktop panel's captions are 12px. */
/* text-align:start explicitly: the theme centers text inside product cards, so the desktop panel inherited
   centered captions while the select text is start-aligned (owner, 2026-09-28 evening) */
.cqo-field-label{display:block;font-size:13px;font-weight:700;color:var(--cqo-ink);margin:0 0 3px;padding:0 12px;line-height:1.2;text-align:start}
.cqo-field+.cqo-field{margin-top:8px}
.cqo-overpanel .cqo-field-label{font-size:12px}
.cqo-select{
  width:100%;font-family:inherit;font-size:13px;line-height:1.3;padding:9px 12px 9px 30px;
  border:1px solid var(--cqo-line);border-radius:6px;background:#fff;color:var(--cqo-ink);
  -webkit-appearance:none;appearance:none;direction:rtl;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2314180f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;
}
.cqo-select:focus{outline:2px solid var(--cqo-green);outline-offset:1px;border-color:var(--cqo-green)}
.cqo-select.cqo-invalid{border-color:var(--cqo-sale)}

.cqo-qty{display:inline-flex;align-items:center;border:1px solid var(--cqo-line);border-radius:6px;overflow:hidden;background:#fff}
/* touch-action:manipulation: kills iOS double-tap-to-zoom on fast +/- taps */
.cqo-qty button{width:36px;height:38px;border:0;background:#f3f2ee;font-size:18px;line-height:1;cursor:pointer;color:var(--cqo-ink);font-family:inherit;touch-action:manipulation}
.cqo-qty button:hover{background:#e9e7e0}
.cqo-qty button:active{background:#dedcd4}
.cqo-qty .cqo-n{min-width:40px;text-align:center;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}

.cqo-btn{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:14px;color:#fff;background:var(--cqo-green);
  padding:10px 14px;border-radius:6px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .2s,transform .08s;touch-action:manipulation;
}
.cqo-btn:hover{background:var(--cqo-green-soft)}
.cqo-btn:active{transform:translateY(1px)}
.cqo-btn:disabled{opacity:.5;cursor:not-allowed}
.cqo-btn.cqo-busy{opacity:.8;cursor:progress}
.cqo-btn.cqo-done{background:#2f7d32}
/* a11y: visible keyboard focus on every control we render (selects have their own :focus rule) */
.cqo-btn:focus-visible,.cqo-close:focus-visible,.cqo-qty button:focus-visible,.cqo-hijack:focus-visible{outline:2px solid var(--cqo-green);outline-offset:2px}

/* the grid trigger = the theme's own .btn-add-cart bar, hijacked (uniform with simple
   products). The theme styles it; we only add the ⚡ hint and the tap-zoom guard. */
.cqo-hijack{gap:5px;touch-action:manipulation}
.cqo-hijack::before{content:"\26A1";font-size:13px}

/* ---------- grid: card injection host ---------- */
.cqo-card{position:relative}                 /* added to .product-item we handle */

/* ---------- product head (shared: bottom sheet + desktop panel) ---------- */
.cqo-head{display:flex;gap:11px;align-items:center;text-align:start}
.cqo-head>div{min-width:0}
.cqo-thumb{width:52px;height:52px;border-radius:8px;flex:0 0 auto;object-fit:cover;background:#f3f2ee}
.cqo-name{margin:0;font-size:14px;font-weight:700;color:var(--cqo-ink)}
.cqo-price{margin:2px 0 0;font-size:13px;font-weight:700;color:var(--cqo-sale)}
.cqo-price del{color:#9a9a9a;font-weight:400;font-size:12px;margin-inline-start:6px}
/* no rendered price on the page (source missing/emptied): explicit state instead of an unverified number */
.cqo-unavail{font-size:12px;font-weight:600;color:var(--cqo-muted)}

/* ---------- desktop: panel over the product image ---------- */
.cqo-overpanel{
  position:absolute;inset:0;z-index:6;
  background:rgba(255,255,255,.975);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;justify-content:center;gap:9px;padding:12px;
  overflow:auto;
  transform:translateY(100%);opacity:0;pointer-events:none;
  /* visibility:hidden while closed = controls leave the tab order / a11y tree (Codex review
     2026-09-26); the delayed visibility transition lets the slide-out animation finish first */
  visibility:hidden;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .18s,visibility 0s .26s;
}
.cqo-overpanel.cqo-open{transform:translateY(0);opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
/* Recs cards host the panel on the card <li> itself (no .product-img wrapper).
   Clip the card so the closed, translated-down panel can't add phantom scroll
   area to the widget's mobile scroll row (overflow-x:auto makes the row a
   two-axis scroll container — the invisible panel dragged it down/sideways). */
.cpr-card.cqo-card{overflow:hidden}
/* !important: the panel lives inside .product-img, where the Matat theme's broad
   `img{width:100%}` card rules outrank .cqo-thumb (verified live 0.1.7 — thumb blew up to 330px) */
.cqo-overpanel .cqo-thumb{width:44px !important;height:44px !important;max-width:44px !important}
.cqo-overpanel .cqo-name{font-size:13px}
/* 44×44 target, ink colour: the old 20 px muted glyph was the only visible way out of the panel (owner, 2026-09-28) */
.cqo-overpanel .cqo-close{position:absolute;top:2px;inset-inline-end:4px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--cqo-ink);min-width:44px;min-height:44px;padding:9px 11px}
/* "לעמוד המוצר ›" link in the panel/sheet head */
.cqo-more{display:inline-block;margin-top:3px;font-size:12px;font-weight:600;color:var(--cqo-green);text-decoration:underline;text-underline-offset:2px}
.cqo-more:hover,.cqo-more:focus{color:var(--cqo-ink)}
.cqo-overpanel .cqo-row{display:flex;align-items:center;gap:9px}
.cqo-overpanel .cqo-row .cqo-btn{flex:1}

/* ---------- mobile: bottom sheet ---------- */
.cqo-scrim{
  position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.cqo-scrim.cqo-open{opacity:1;pointer-events:auto}
.cqo-sheet{
  position:fixed;inset-inline:0;bottom:0;z-index:100001;
  background:#fff;border-radius:20px 20px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%);visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s;
  display:flex;flex-direction:column;gap:11px;direction:rtl;max-height:88vh;overflow:auto;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.cqo-sheet.cqo-open{transform:translateY(0);visibility:visible;transition-delay:0s}
/* keyboard-reachable close control for the sheet (scrim tap, swipe-down + Escape also close it);
   44×44 tap target — the old 22 px glyph was too small to find on a phone (owner, 2026-09-28) */
.cqo-sheet .cqo-close{position:absolute;top:4px;inset-inline-end:6px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--cqo-ink);min-width:44px;min-height:44px;padding:9px 11px}
.cqo-sheet .cqo-grab{width:38px;height:4px;border-radius:3px;background:#d8d8d2;margin:2px auto 4px}
/* the sheet takes focus as a whole on touch devices (no select auto-focus) — no ring on the container */
.cqo-sheet:focus{outline:none}
.cqo-overpanel:focus{outline:none}
.cqo-sheet .cqo-row{display:flex;align-items:center;gap:10px}
.cqo-sheet .cqo-row .cqo-btn{flex:1}

/* ---------- product page: sticky purchase bar (bottom, all devices) ---------- */
.cqo-sticky{
  position:fixed;bottom:0;inset-inline:0;z-index:99990;background:#fff;direction:rtl;
  display:flex;align-items:center;gap:12px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid #ececec;box-shadow:0 -2px 14px rgba(0,0,0,.10);
  transform:translateY(110%);visibility:hidden;
  transition:transform .25s ease,visibility 0s .25s;
}
.cqo-sticky.cqo-show{transform:translateY(0);visibility:visible;transition-delay:0s}
.cqo-sticky .cqo-sname{font-weight:800;font-size:14px;color:var(--cqo-ink);flex:1;min-width:120px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cqo-sticky .cqo-sprice{font-weight:800;font-size:15px;color:var(--cqo-sale);white-space:nowrap}
.cqo-sticky .cqo-sprice del{color:#9a9a9a;font-weight:400;font-size:12px;margin-inline-start:6px}
.cqo-sticky .cqo-select{width:auto;min-width:150px;max-width:230px}
/* the bar's captions sit ON the select's top border like a tag (owner's pick, 2026-09-28) — visible
   again since 0.1.29 (0.1.9–0.1.28 dropped them for height); the bar keeps its height */
.cqo-sticky .cqo-field{position:relative}
.cqo-sticky .cqo-field+.cqo-field{margin-top:0}
.cqo-sticky .cqo-field-label{position:absolute;top:-8px;inset-inline-start:10px;z-index:1;margin:0;padding:0 5px;font-size:11px;font-weight:700;line-height:14px;color:var(--cqo-green);background:#fff;border-radius:3px}
@media (min-width:769px){
  .cqo-sticky{padding:10px clamp(12px,4vw,40px) 10px;flex-wrap:wrap}
  .cqo-sticky .cqo-btn{width:auto;padding:9px 22px}
}
@media (max-width:768px){
  .cqo-sticky .cqo-sprice{font-size:14px}
  .cqo-sticky .cqo-btn{width:auto;flex:1;max-width:60%}
  /* iOS zooms the page when a focused form control is under 16 px (owner's iPhone pass 2026-09-28) */
  .cqo-select{font-size:16px}
}
/* the theme's mini-cart drawer (body.mini_cart_active) slides over the page bottom: the bar
   must not sit on top of its buttons (owner's iPhone screenshot 2026-09-28) */
body.mini_cart_active .cqo-sticky{visibility:hidden;transform:translateY(110%)}

/* While the sticky bar is visible it covers the site's floating buttons that share
   the bottom edge — lift them above it (owner screenshots 2026-07-29):
   .header-contact-menu = the theme's WhatsApp/"דברו איתנו" button;
   #pojo-a11y-toolbar   = the accessibility rail (its toggle hangs at the rail's
   bottom, so raising the rail's bottom raises the toggle). --cqo-bar-h is set by
   cqo.js from the bar's real height (covers the iOS safe-area padding). */
body.cqo-bar-open .header-contact-menu{
  bottom:calc(var(--cqo-bar-h,60px) + 12px) !important;
  transition:bottom .25s ease;
}
body.cqo-bar-open #pojo-a11y-toolbar{
  bottom:calc(var(--cqo-bar-h,60px) + 12px) !important;
}

/* ---------- toast ---------- */
.cqo-toast{
  position:fixed;inset-inline:0;bottom:22px;margin:0 auto;width:max-content;max-width:90vw;
  z-index:100002;background:var(--cqo-green);color:#fff;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:999px;box-shadow:0 8px 26px rgba(0,0,0,.2);direction:rtl;
  opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none;
}
.cqo-toast.cqo-show{opacity:1;transform:translateY(0)}
.cqo-toast a{color:#fff;text-decoration:underline;margin-inline-start:8px}

@media (prefers-reduced-motion:reduce){
  .cqo-overpanel,.cqo-sheet,.cqo-scrim,.cqo-sticky,.cqo-toast{transition:none}
}