/* Poco's skin for the menu page.
   Extracted from templates/poco/menu.blade.php on 2026-09-22; it was pushed
   inline into every menu view, and those views are never cached. Linked with a
   content hash (App\Support\StaticAsset), so the browser keeps it for a week
   and fetches it again only when a deploy changes it. Nothing here may depend
   on the page: a value that differs per request stays inline in the template. */

/* ---------- the category rail ---------- */
.ord-rail{gap:.4rem;padding-bottom:.15rem}
.ord-rail a{
  display:flex;align-items:center;gap:.45rem;
  padding:.4rem .8rem .4rem .4rem;
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--ink);
  font-family:var(--font-heading);font-weight:800;font-size:.85rem;
}
.ord-rail a:hover{background:var(--surface-2);color:var(--ink)}
.ord-rail a.is-active{
  background:var(--c-primary);border-color:var(--c-primary);
  color:var(--c-primary-ink);font-weight:800;
}
.ord-rail a.is-active::before{display:none}
.ord-rail-photo{display:block;width:1.75rem;height:1.75rem;border-radius:50%;
  object-fit:cover;flex:none}
.ord-rail-name{min-width:0}
/* No rail on a phone. Every category arrives there closed, as a photograph,
   a name and a count, so the heads below ARE the index; a sideways strip of
   the same names above them only pushed the menu further down the screen. */
@media (max-width:899.98px){ .ord-rail{display:none} }

@media (min-width:900px){
  .ord-rail{
    background:var(--surface-2);border:1px solid var(--border);border-radius:4px;
    padding:1rem;gap:.15rem;
  }
  .ord-rail a{
    border-color:transparent;background:transparent;
    padding:.5rem .55rem .5rem .4rem;font-size:.86rem;
    white-space:normal;line-height:1.2;
  }
  .ord-rail a.is-active{background:var(--c-primary);border-color:var(--c-primary)}
}

/* ---------- category heads ----------
   Two treatments, because the two screens are asking different questions.

   On a phone every section arrives closed, so the nine heads ARE the menu
   and have to read as a list: a 46px medallion, the name at .82rem, and the
   category's own description under it as one quiet Nunito line. That line is
   optional - ДОДАТОЦИ И ПИЈАЛОЦИ has no description and simply gets a
   shorter head, never an empty gap where one would have been.

   On a desktop screen every section arrives open, so the head is a divider
   between courses rather than a row in an index: larger, with the same
   description under the name that a phone shows.

   What this replaces: that eyebrow at phone size. The script face carries
   size-adjust:165%, so a .95rem eyebrow draws at about 26px and wraps to two
   lines above a name that was also wrapping - roughly 200px per closed
   category, four to a screen, and nine of them stopped being an index. */
.ord-cat{display:flex;flex-direction:column}
.ord-cat + .ord-cat{margin-top:1.25rem}

.ord-cat-title{
  display:flex;align-items:center;gap:.7rem;
  margin:0;padding:.75rem 0;border-bottom:0;border-top:1px solid var(--border);
  font-family:var(--font-heading);font-size:.82rem;font-weight:900;
  letter-spacing:-.01em;line-height:1.2;text-transform:uppercase;
}
.ord-cat:first-of-type .ord-cat-title{border-top:0}
.ord-cat-heading{gap:.7rem;flex:1;align-items:center}
.ord-cat-name{min-width:0}
/* The medallion draws at 46px but only contributes 24px to the line box it
   sits in. Without that the flex row is 46px tall, the name is centred in it,
   and the description lands about 15px below the name it belongs to - with
   the two lines further apart than either is from the next category. The
   negative block margins let the photo overhang the row instead; the
   description is indented past it, so the overhang falls on empty space. */
.ord-cat-photo{
  width:2.9rem;height:2.9rem;margin-block:-.7rem;border-radius:50%;
  border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);
}

/* The head closes itself when no description follows, and hands its bottom
   padding to that line when one does. */
.ord-cat-title:has(+ .ord-cat-desc){padding-bottom:0}
.ord-cat-desc{
  margin:.15rem 0 0;padding:0 0 .75rem calc(2.9rem + .7rem);
  font-family:var(--font-body);font-size:.72rem;font-weight:400;line-height:1.35;
  color:var(--ink-muted);
  /* one line, always: a wrapped description is what made the closed head
     tall enough to stop being scannable */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* The item count, printed from the head's data-count so the shared view
   never grew a badge no other template asked for. */
.ord-cat-title::after{
  content:attr(data-count);
  display:grid;place-items:center;min-width:1.35rem;height:1.35rem;
  border-radius:999px;background:var(--c-secondary);color:var(--c-secondary-ink);
  font-size:.68rem;font-weight:900;padding-inline:.3rem;flex:none;order:1;
}
.ord-cat-toggle{order:2;flex:none;width:auto;color:var(--ink-muted)}
.ord-cat-chevron{transition:transform .2s ease}
.ord-cat-chevron.is-open{transform:rotate(180deg);color:var(--poco-green-ink)}
@media (prefers-reduced-motion:reduce){ .ord-cat-chevron{transition:none} }

@media (min-width:900px){
  .ord-cat + .ord-cat{margin-top:2.5rem}
  .ord-cat-title{
    gap:.85rem;padding:1rem 0;
    font-size:clamp(1.15rem,1rem+.7vw,1.6rem);letter-spacing:-.02em;
  }
  .ord-cat-heading{gap:.85rem}
  .ord-cat-photo{width:3.25rem;height:3.25rem;margin-block:-.6rem}
  /* Under the name, exactly as on a phone - the body face, muted, indented
     past the photograph - a size up and free to wrap, since a desktop row
     has the width for the whole line. */
  .ord-cat-desc{padding:0 0 1rem calc(3.25rem + .85rem);font-size:.9rem;white-space:normal;overflow:visible}
  .ord-cat-title::after{min-width:2rem;height:2rem;font-size:.85rem;padding-inline:.4rem}
}

/* ---------- dish rows ---------- */
/* NOTE, because this cost an afternoon: `display` on .ord-cat-items is never
   declared !important, at any width. x-show collapses a section by setting
   an inline display:none, and an inline declaration loses to an !important
   one in a stylesheet - so an !important here silently makes the accordion
   unable to close (PocoMenuTest pins it). */
.ord-item{
  align-items:center;gap:.85rem;padding:.7rem 0;border-radius:0;
  border-top:1px solid var(--poco-hair);
}
.ord-item:first-child{border-top:0}
.ord-item:has(.ord-item-trigger:hover){background:transparent}
.ord-item-trigger{align-items:center;gap:.85rem}
.ord-item-photo,.ord-item-photo-empty{
  width:4rem;height:4rem;border-radius:50%;flex:none;object-fit:cover;
}
.ord-item-name{
  font-family:var(--font-heading);font-weight:800;font-size:.98rem;
  letter-spacing:-.01em;line-height:1.25;color:var(--ink);
}
/* The shared sheet clamps the ingredient line to two lines, which a 245px
   card needs and a full-width row does not: a sandwich whose description is
   its ingredients is a sandwich the customer is being asked to order blind. */
.ord-item-desc{
  color:var(--ink-muted);font-size:.83rem;margin-top:.1rem;
  display:block;-webkit-line-clamp:none;overflow:visible;
}
.ord-item-name{display:block;-webkit-line-clamp:none;overflow:visible}
.ord-item-price{
  font-family:var(--font-heading);font-weight:900;font-size:.95rem;
  color:var(--poco-green-ink);font-variant-numeric:tabular-nums;
}
@media (min-width:720px){
  .ord-item,.ord-item-trigger{gap:1.1rem}
  .ord-item{padding:.85rem 0}
  .ord-item-photo,.ord-item-photo-empty{width:5rem;height:5rem}
  .ord-item-name{font-size:1.08rem}
  .ord-item-desc{font-size:.88rem}
  .ord-item-price{font-size:1.05rem}
}

/* From 900 the shared sheet turns the list into a grid of cards - photo on
   top, price pinned to the bottom of a stretched cell. This template keeps
   rows at every width, so every rule of that mode is put back here. Undone
   in its own min-width block so it wins on source order rather than on
   !important. */
@media (min-width:900px){
  /* Rows, not a grid of cards: a 150-character Macedonian ingredient line
     needs the width. */
  .ord-cat-items,
  .ord-menu.has-cart .ord-cat-items{display:flex;flex-direction:column;gap:0}
  .ord-item{position:static;flex-direction:row;gap:1.1rem;padding:.85rem 0;background:none}
  .ord-item-trigger{flex-direction:row;gap:1.1rem;height:auto;align-items:center}
  .ord-item-foot{margin-top:.35rem;min-height:0;padding-right:0;justify-content:flex-end}
  .ord-item-cta{position:static}
  .ord-item-photo,.ord-item-photo-empty{
    width:5rem;height:5rem;aspect-ratio:1;border-radius:50%;
  }
  .ord-item:has(.ord-item-trigger:hover) .ord-item-photo{transform:none}
}
/* The price belongs beside the control it is paid with. The markup nests it
   two levels inside the row's link, so the text block becomes a two-column
   grid and the price takes the right-hand one, level with the add button,
   instead of hanging under the first word of the description. */
@media (min-width:560px){
  .ord-item-body{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:1rem;align-items:center;
  }
  .ord-item-name,.ord-item-desc{grid-column:1}
  .ord-item-foot{grid-column:2;grid-row:1 / span 2;margin:0;align-self:center}
}
.ord-item-foot{justify-content:flex-end}

.ord-quick-add{background:var(--c-primary);color:#fff}
.ord-quick-add:hover{background:var(--c-primary-hover)}
/* A dish that has to be built opens the panel instead of dropping straight
   into the basket, and the control says so by not being the add button: the
   same circle, outlined in the brand green rather than filled with it. A
   written label was tried and taken out again - "Изберете опции" is a
   180px button, and it took that width off the ingredient line. */
.ord-item-choose{
  background:transparent;border:2px solid var(--c-primary);
  color:var(--poco-green-ink);
}
.ord-item-choose:hover{background:color-mix(in srgb,var(--c-primary) 12%,transparent)}

/* ---------- the basket ---------- */
/* Beside the list from 1200 rather than 1400: the point of this page is that
   the order is placed on it, so the order should be visible on it wherever
   there is room. */
@media (min-width:1200px){
  .ord-menu.has-rail.has-cart{grid-template-columns:14rem minmax(0,1fr) 17rem}
  /* The pane itself from 1200 too. The shared page reveals it - and the
     fixed skip link to it, and hides the checkout bar - only from 1400, so
     between 1200 and 1400 (a 1280 or 1366 laptop) this grid's third track
     sat empty beside a checkout bar, and the skip link showed in the page
     flow. Restated from restaurant/menu.blade.php's >=1400 block. */
  /* Capped against where the pane's top edge really is (--ord-pane-top, set
     by the script after the pane in restaurant/menu.blade.php), not against
     the sticky offset: at the top of the page the pane rests below the
     closed-for-now banner and the card's padding, and a fixed allowance for
     that was right with the shop open and 34px short with it closed. */
  .ord-cart-pane{display:flex;flex-direction:column;position:sticky;top:calc(5.5rem + var(--ord-top-extra, 0px));max-height:calc(100vh - var(--ord-pane-top, 5.5rem) - 1.5rem)}
  .ord-cart-pane:focus{outline:none}
  .ord-cart-pane-lines{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .ord-cart-pane-action{flex:none;display:flex;flex-direction:column;gap:.6rem}
  .ord-cart-pane-action .ord-cta{width:100%}
  .ord-cart-pane-note{margin:0;font-size:.85rem;font-weight:600}
  .ord-skip-cart{display:block;position:fixed;z-index:100;right:1rem;top:-3.5rem;padding:.65rem 1.1rem;border-radius:var(--ord-btn-radius);background:var(--ord-ink);color:var(--ord-canvas);text-decoration:none;font-weight:600;font-size:.875rem;transition:top .15s ease}
  .ord-skip-cart:focus{top:1rem}
  .ord-checkout-bar{display:none}
}
/* 21rem from 1440, where the page frame has the room: at 19rem a basket
   line's price and its three 44px steppers left the quantity label about
   40px, and "Кол. 2" broke over two lines. */
@media (min-width:1440px){
  .ord-menu.has-rail.has-cart{grid-template-columns:16rem minmax(0,1fr) 21rem}
}
/* padding and gap zeroed: the shared pane is a padded column with a 1.5rem
   left inset, which on this boxed pane put the title's rule and every line
   1.5rem in on the left only, and ran the empty sentence into the right
   border. Every child here carries its own inline padding instead. */
.ord-cart-pane{
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:0;gap:0;
}
/* .ord-body in front: the shell's `.ord-body h2` resets text-transform and
   outranks a lone class, which is why this label rendered in mixed case. */
.ord-body .ord-cart-pane-title{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .45rem;
  font-family:var(--font-heading);font-size:.78rem;font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.9rem 1rem;border-bottom:1px solid var(--border);margin:0;
}
/* The count pill and the total are drawn by poco/_ordering.blade.php, which
   checkout's basket panel shares; "Кон нарачка" sits in its own strip right
   under the title. */
.ord-body .ord-cart-pane-action{padding:.75rem 1rem;border-bottom:1px solid var(--border)}

/* The empty basket: two ghost lines in the shape of a real one - the 3rem
   photo tile, a name bar and a price bar - above the sentence, so the pane
   shows where a dish will land before there is one. */
.ord-cart-ghosts{display:block;padding:.15rem 1rem 0}
.ord-cart-ghost{display:flex;align-items:center;gap:.75rem;padding:.85rem 0}
.ord-cart-ghost + .ord-cart-ghost{border-top:1px solid var(--poco-hair)}
.ord-cart-ghost-photo{
  flex:none;width:3rem;height:3rem;border-radius:10px;
  border:1.5px dashed color-mix(in srgb,var(--ink-muted) 35%,var(--surface));
}
.ord-cart-ghost-bars{flex:1;display:flex;flex-direction:column;gap:.45rem}
.ord-cart-ghost-bars i{display:block;height:.55rem;border-radius:999px;background:var(--surface-2)}
.ord-cart-ghost-bars i:first-child{width:78%}
.ord-cart-ghost-bars i:last-child{width:38%}
.ord-cart-ghost + .ord-cart-ghost .ord-cart-ghost-bars i:first-child{width:62%}
.ord-body .ord-cart-pane-empty{
  margin:0 1rem;padding:.9rem 0 1.1rem;border-top:1px solid var(--poco-hair);
  font-size:.88rem;line-height:1.45;color:var(--ink-muted);
}
.ord-cart-pane-lines{padding-inline:1rem}
/* In the 17rem pane (1200-1440) a line's total, "Кол. 2" and three 44px
   buttons need about 275px of a 240px row, so the remove button ran out of
   the pane. The buttons may drop to a row of their own, right-aligned under
   the total; where the row fits, nothing wraps. Scoped to the pane, not to
   .cart-line.is-compact, whose declarations CartTest pins to the phone's. */
.ord-cart-pane .cart-line-side{flex-wrap:wrap;row-gap:.5rem}
.ord-cart-pane .cart-qty{margin-left:auto}

/* The same order on a phone, where there is no room for a column. */
.ord-checkout-bar{background:var(--ink);color:var(--canvas)}
/* The canvas colour on the dark bar. It inherited the shell's ink and
   printed near-black on near-black - the one number the bar exists for. */
.ord-checkout-total{
  font-family:var(--font-heading);font-weight:900;font-size:1.15rem;
  font-variant-numeric:tabular-nums;color:var(--canvas);
}
.ord-checkout-go{
  border-radius:999px;background:var(--c-primary);color:var(--c-primary-ink);
  font-family:var(--font-heading);font-weight:900;font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase;
}
.ord-checkout-go:hover{background:var(--c-primary-hover)}
/* The total that opens the basket, on the dark bar: canvas ink, and the
   basket title's yellow count pill. */
.ord-checkout-peek{color:var(--canvas)}
.ord-checkout-count{background:var(--poco-yellow);color:var(--ink);font-family:var(--font-heading);font-weight:900}
/* The sheet is this boxed pane without the box: every child here carries
   its own inline padding, so the shared sheet's padding would double it. */
.ord-cart-pane.is-sheet{padding:0;gap:0;background:var(--surface);border:0;border-top:1px solid var(--border);border-radius:14px 14px 0 0}