/* ==========================================================================
   HEAVEN TCG - shared UX layer   (assets/hv-ux.css)
   Rewritten 2026-07-29 (second pass).

   Two jobs, one file, loaded last on every page so it can correct without
   anybody having to touch the generated stylesheets:

     1. One validation language for the whole shop. Instead of a wide red bar
        at the top of a form - which slides off screen the moment the customer
        scrolls, so pressing "Send order" looks like nothing happened - every
        problem is reported next to the field that caused it, the field is
        outlined, and the first one is scrolled into view.

     2. The responsive and accessibility rules the whole shop shares:
        comfortable touch targets, 16px form text so iOS stops zooming on
        focus, a layout that keeps working from a 320px phone up to a 32:9
        desktop, visible focus rings, safe-area padding and a reduced-motion
        escape hatch.

   Loaded by: index.html (storefront + cart drawer), account.php, zelje.php,
   confirm.php and every generated page under /p/.
   It only ever adds or corrects; it never rebuilds an existing component.
   ========================================================================== */

:root{
  --hv-bad:#cf5a4a;
  --hv-bad-text:#f2ab9e;
  --hv-bad-soft:rgba(207,90,74,.15);
  --hv-bad-line:rgba(207,90,74,.55);
  --hv-good:#8fa85a;
  --hv-tap:44px;
  --hv-tap-sm:38px;
  --hv-safe-b:env(safe-area-inset-bottom,0px);
}

/* ==========================================================================
   1 - THE INVALID FIELD
   A border and a soft ring. Never a fill, so the value stays readable.
   ========================================================================== */

input.hv-invalid,
select.hv-invalid,
textarea.hv-invalid,
.hv-invalid{
  border-color:var(--hv-bad-line)!important;
  box-shadow:0 0 0 3px var(--hv-bad-soft)!important;
}
input.hv-invalid:focus,
select.hv-invalid:focus,
textarea.hv-invalid:focus{
  border-color:var(--hv-bad)!important;
  box-shadow:0 0 0 3px rgba(207,90,74,.28)!important;
  outline:none;
}

/* A field that was wrong and has just been fixed says so, briefly and
   quietly, so the customer knows the message went away on purpose. */
input.hv-fixed,
select.hv-fixed,
textarea.hv-fixed{
  border-color:rgba(143,168,90,.55)!important;
  box-shadow:0 0 0 3px rgba(143,168,90,.14)!important;
}

/* Whatever the field is wrapped in, the message must be reachable and the
   field must be scrollable to with room to breathe above it. */
input,select,textarea{scroll-margin-top:96px;scroll-margin-bottom:120px}

/* ==========================================================================
   2 - THE MESSAGE, NEXT TO ITS OWN FIELD
   ========================================================================== */

.hv-fe{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:7px 0 0;
  padding:0;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
  color:var(--hv-bad-text);
  max-width:100%;
  overflow-wrap:break-word;
  word-break:break-word;
  animation:hv-fe-in .18s ease-out both;
}
.hv-fe::before{
  content:"!";
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-top:1px;
  border-radius:50%;
  background:var(--hv-bad);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:17px;
  text-align:center;
}
@keyframes hv-fe-in{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   3 - WHICH STEP / TAB HAS THE PROBLEM
   ========================================================================== */

.hv-steps{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
  flex-wrap:wrap;
}
.hv-steps .hv-step{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:5px 13px;
  border:1px solid var(--border,rgba(232,163,77,.2));
  border-radius:999px;
  background:var(--surface-1,#2a1f19);
  color:var(--muted,#a08a78);
  font-family:inherit;
  font-size:11.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:.7px;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:default;
}
.hv-steps .hv-step .hv-si{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface-3,#3e2e24);
  color:inherit;
  font-size:11px;
}
.hv-steps .hv-step.done{color:var(--text-secondary,#d8c4b0);border-color:rgba(143,168,90,.4)}
.hv-steps .hv-step.done .hv-si{background:rgba(143,168,90,.85);color:#12180c}
.hv-steps .hv-step.on{
  color:var(--text-primary,#f6ece0);
  border-color:var(--accent,#e8a34d);
  background:var(--surface-2,#33251d);
}
.hv-steps .hv-step.on .hv-si{background:var(--accent,#e8a34d);color:#231703}
.hv-steps .hv-step.err{
  color:var(--hv-bad-text);
  border-color:var(--hv-bad-line);
  background:rgba(207,90,74,.12);
}
.hv-steps .hv-step.err .hv-si{background:var(--hv-bad);color:#fff}
.hv-steps .hv-sep{flex:0 0 auto;width:14px;height:1px;background:var(--border,rgba(232,163,77,.25))}

/* A tab or step button that hides a problem gets a dot, so the customer is
   not left hunting through collapsed sections. */
.hv-haserr{position:relative}
.hv-haserr::after{
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--hv-bad);
  box-shadow:0 0 0 2px var(--surface-1,#2a1f19);
}

/* A one-line count beside the submit button. Deliberately small and inside
   the flow of the form - never a full-width banner. */
.hv-count{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:10px 0 0;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  line-height:1.4;
  text-align:left;
  color:var(--hv-bad-text);
}
.hv-count::before{
  content:"!";
  flex:0 0 auto;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--hv-bad);
  color:#fff;
  font-size:11px;font-weight:800;line-height:16px;text-align:center;
}
.hv-count:empty{display:none;margin:0}

/* ==========================================================================
   4 - ACCESSIBILITY HELPERS
   ========================================================================== */

.hv-sr{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Keyboard users get a ring; mouse users do not get a stray outline. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent,#e8a34d);
  outline-offset:2px;
  border-radius:6px;
}

/* ==========================================================================
   5 - NOTHING MAY PUSH THE PAGE SIDEWAYS
   ========================================================================== */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg,video,canvas{max-width:100%}
pre,code,kbd{white-space:pre-wrap;overflow-wrap:break-word}

/* Order numbers, e-mail addresses, product names and pasted links are the
   four things that reliably break a narrow column. */
.hv-wrapword,
.hv-fe,.hv-count,
.bub,.bub .w,
.ord .num,.ord ul li,
.wish .wn,
.hc-line .nm,
.name,.lb-info h2,
.items td:first-child{overflow-wrap:break-word;word-break:break-word;min-width:0}

/* ==========================================================================
   6 - FORM ERGONOMICS ON SMALL AND TOUCH SCREENS

   iOS zooms the whole page in when a focused control has text under 16px,
   which on a checkout form means the customer suddenly cannot see the field
   they are typing into. Below the tablet break every control is bumped.
   ========================================================================== */

@media (max-width:900px){
  input,select,textarea,
  .fld input,.fld select,.fld textarea,
  .hc-f input,.hc-f textarea{
    font-size:16px!important;
    line-height:1.35;
  }
}

/* Comfortable targets: either the window is narrow, or we are on a finger.
   Primary controls get the full 44px; dense chips and pills get 38px, which
   together with the wider gaps below still clears the spacing guidance. */
@media (max-width:900px),(pointer:coarse){

  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  select,
  button,
  .btn,a.btn,
  .hc-cta,.hc-add,
  #themeSwitchBtn,
  #hcAcc .hc-accbtn,
  .hv-trust .cta .all,
  .curseg button{
    min-height:var(--hv-tap);
  }
  .hv-trust .cta .all{display:inline-flex;align-items:center;justify-content:center}

  /* Dense chips and status pills stay compact but reachable. Higher
     specificity than the block above, so these win. */
  .tally button,
  .pill,a.pill,
  .tabs button,
  .btn.sm,
  .hc-bell,
  .hc-link{min-height:var(--hv-tap-sm)}

  .tally{gap:9px}
  .tally button{padding-left:14px;padding-right:14px}

  /* Icon buttons become real squares instead of 26px slivers. */
  .hc-x,.lb-close,.htcg-c-x,.hc-askx{
    width:var(--hv-tap)!important;
    height:var(--hv-tap)!important;
    min-height:var(--hv-tap);
    display:grid!important;
    place-items:center;
    padding:0!important;
  }
  .hc-q{gap:10px}
  .hc-q button{width:40px;height:40px;min-height:40px;font-size:19px}

  /* A bare text link in a list, a breadcrumb or a footer is not a tap target
     until it has room around it. */
  footer a,
  .alt button,
  .empty a,
  .hc-asknote a,
  .hc-acctip a,
  main > p.crumb a,
  main > p.lead a,
  main .back{
    display:inline-block;
    padding:10px 2px;
    min-height:var(--hv-tap);
    line-height:1.55;
  }

  /* The catalogue index is 78 rows of plain text links. Each row becomes a
     full-width, finger-sized line with its price on its own line when the
     name runs long. */
  main > ul > li{
    padding:0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0 9px;
    border-bottom:1px solid var(--line,rgba(255,255,255,.08));
  }
  main > ul > li:last-child{border-bottom:0}
  main > ul > li > a{
    flex:1 1 240px;
    display:flex;
    align-items:center;
    min-height:var(--hv-tap);
    padding:9px 0;
    line-height:1.4;
  }
  main > ul > li > span{padding:0 0 9px;flex:0 0 auto}

  /* The reviews button on a product page keeps its own padding and just
     grows to a comfortable height. */
  .trust .go{
    min-height:var(--hv-tap);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Checkboxes are easier to hit through their label. */
  .chk,label.chk{padding:11px 13px}
  .chk input{width:20px;height:20px}
}

/* Buttons should never be shorter than their own text on any screen. */
button,.btn,a.btn{line-height:1.25}

/* ==========================================================================
   7 - THE STOREFRONT SHELL ON BIG SCREENS
   1280px was the only cap in the shop, which left a 4K or 32:9 desktop
   showing a narrow ribbon of products down the middle. The column now grows
   in steps, and stops growing before a row of cards becomes unreadable.
   ========================================================================== */

@media (min-width:1500px){ .wrap{max-width:1440px} }
@media (min-width:1800px){ .wrap{max-width:1640px} .grid{gap:20px} }
@media (min-width:2200px){ .wrap{max-width:1980px} }
@media (min-width:2800px){
  .wrap{max-width:2320px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
  body{font-size:16px}
}
@media (min-width:3400px){
  .wrap{max-width:2720px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* The lightbox was capped for a laptop; give it room when there is room. */
@media (min-width:1800px){
  .lb-inner{max-width:1080px}
  .lb-img img{max-height:560px}
}

/* Ultrawide and super-ultrawide: plenty of width, very little height. Claw
   back the vertical space the header was spending, so products are visible
   without scrolling.

   The width caps are left to the steps above on purpose. Testing an earlier
   version showed a plain 1920 window with a short browser height matching a
   2:1 rule and going full width, so the trigger starts at a width no normal
   desktop reaches, and these rules only change vertical rhythm. */
@media (min-width:2300px) and (min-aspect-ratio:2/1){
  header{padding:22px 0 18px}
  .logo{font-size:36px}
  .hv-trust{margin-bottom:14px}
}
@media (min-width:3000px) and (min-aspect-ratio:26/10){
  header{padding:16px 0 12px}
  .tagline{margin-top:6px}
}

/* Short laptop screens (13"-14" at 1280x800, or a scaled 1440x900) were
   spending most of the first view on the header. */
@media (max-height:820px) and (min-width:1000px){
  header{padding:26px 0 20px}
  .logo{font-size:34px}
}

/* ==========================================================================
   8 - THE STOREFRONT ON PHONES AND TABLETS
   ========================================================================== */

/* The type scales instead of jumping at a single breakpoint. */
.logo{font-size:clamp(26px,7.6vw,40px)}
@media (max-width:760px){ .logo{font-size:clamp(26px,8vw,32px)} }

@media (max-width:520px){
  .wrap{padding-left:14px;padding-right:14px}
  header{padding:22px 0 18px}
  .tagline{letter-spacing:1.4px;font-size:11px;padding:0 4px}
  footer{padding-top:32px}
}

/* At 320px the old minmax(150px) could not fit two columns inside the page
   padding, so every card went full width and the customer had to scroll
   through 78 of them one at a time. */
@media (max-width:430px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .thumb img{padding:7px}
  .body{padding:11px 11px 13px;gap:6px}
  .name{font-size:13px;min-height:35px}
  .price{font-size:16.5px}
  .badge{font-size:9.5px;padding:4px 8px;top:8px;left:8px}
}
@media (max-width:359px){
  .wrap{padding-left:11px;padding-right:11px}
  .grid{gap:8px}
}

/* The filter bar was sticky, and once it wrapped onto four rows on a phone it
   covered nearly half the screen for the whole visit. On a phone it now sits
   in the flow, laid out as a tidy grid; from tablet up it stays sticky, where
   there is room for it. */
@media (max-width:700px){
  .toolbar{
    position:static;
    padding:11px;
    gap:9px;
    margin-bottom:18px;
    justify-content:flex-start;
  }
  /* Flex rather than a fixed grid: the exchange-rate note is injected between
     the two switches and is empty while prices are in dinars, so a rigid
     two-column grid left a hole and pushed the language switch onto a row of
     its own. */
  .toolbar input[type=text]{flex:1 1 100%;min-width:0;max-width:none}
  .toolbar select{flex:1 1 calc(50% - 5px);min-width:0;width:auto}
  .chk{flex:1 1 100%;justify-content:center}
  .curseg{flex:1 1 calc(50% - 5px)}
  .curseg button{flex:1 1 0;padding-left:0;padding-right:0;text-align:center}
  .count{flex:1 1 100%;text-align:center}
  .rate-note{flex:1 1 100%;text-align:center}
  .rate-note:empty{display:none;flex:0 0 0}
}
@media (min-width:701px){
  .grid{scroll-margin-top:90px}
}

/* The section heading and its chip row need to stack, not squeeze. */
@media (max-width:640px){
  .sec{flex-wrap:wrap;gap:9px;margin-bottom:14px}
  .sec .line{display:none}
  .tally{width:100%}
}

/* The header strip and the reviews band arrive from JavaScript. Their space
   is booked in the page so the catalogue does not jump down once they land. */
/* Only the pill that lives in the utility bar needs its height booked. The
   same #hcAcc div also sits inside <header> in the static HTML until hv-ux.js
   moves it down here, and a 46px reservation up there inflates the header on
   the first paint and then collapses when the div leaves - which drags the
   whole page up. While it is still empty it takes no room at all. */
#hvUtilBar #hcAcc{min-height:46px}
header>#hcAcc:empty{display:none}
/* The tally chips land next to the section title and grow the row from 19px
   to 25px, dragging the whole catalogue down with them. */
#tally{min-height:25px}
/* The catalogue is drawn by JavaScript, so on the first paint the grid is
   empty and the footer sits in the middle of the screen - then 98 cards land
   and throw it thousands of pixels down. Booking one screenful while the grid
   is still empty keeps the footer below the fold from the very first frame,
   and the rule releases itself the moment the first card is inserted. */
#grid:empty{min-height:100vh}
.hv-slot{display:block}
/* The placeholder is REPLACED by <section id="hvTrust" class="hv-trust">, so
   the reservation has to live on both of them: booking it only on the empty
   slot is undone the moment the real band takes its place, and the band is
   still 0px tall until the review data arrives. Same number on both keeps the
   band exactly one height from the first frame to the last. */
/* The spacing under the band must come from the SAME rules as the band
   itself: if the placeholder books 20px and the real band keeps 12px, the
   page still slides up by the difference. shop-tpl.js gives the placeholder
   the .hv-trust class as well, so the two share every margin. */
.hv-slot-trust,.hv-trust{min-height:178px}
@media (max-width:860px){ .hv-slot-trust,.hv-trust{min-height:224px} }
@media (max-width:640px){ #hvUtilBar #hcAcc{min-height:96px} }

/* The lightbox on a small screen: less chrome, more picture. */
@media (max-width:560px){
  .lb{padding:12px}
  .lb-inner{border-radius:16px;max-height:92vh}
  .lb-img{min-height:0;padding:14px}
  .lb-img img{max-height:44vh}
  .lb-info{padding:18px;gap:11px}
  .lb-close{top:12px;bottom:auto;right:12px;z-index:3}
}

/* ==========================================================================
   9 - THE CART DRAWER AND CHECKOUT ON A PHONE
   The drawer is where the money is, so it gets the most care: full height
   including the iOS home-bar strip, a body that scrolls on its own, and the
   send button parked at the bottom of the screen inside thumb reach.
   ========================================================================== */

.hc-drawer{height:100%}
@supports (height:100dvh){ .hc-drawer{height:100dvh} }

.hc-body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scroll-padding-bottom:24px;
}
.hc-foot{padding-bottom:calc(19px + var(--hv-safe-b))}
.hc-fab{bottom:calc(18px + var(--hv-safe-b))}

@media (max-width:640px){
  .hc-drawer{width:100%;border-left:0}
  .hc-head{padding:13px 16px}
  .hc-head h2{font-size:17px}
  .hc-body{padding:12px 16px}
  .hc-foot{padding:13px 16px calc(15px + var(--hv-safe-b))}
  .hc-cta{min-height:52px;font-size:16px;margin-top:10px}
  .hc-row.big{font-size:18px}
  .hc-f{margin-bottom:13px}
  .hc-line img{width:46px;height:46px}
  .hc-fine{font-size:12px}
  /* One thumb: the summary and the button, nothing that needs a stretch. */
  .hc-link{margin-top:12px;padding:6px 2px}
}

/* Very short screens (a phone in landscape) - the form must still scroll and
   the button must still be visible. */
@media (max-height:520px){
  .hc-head{padding:9px 16px}
  .hc-foot{padding:9px 16px calc(11px + var(--hv-safe-b))}
  .hc-cta{min-height:44px;padding:10px}
  .hc-fine,.hc-acctip{display:none}
  /* A phone held sideways has about 390px of height. The footer was taking
     more than half of it, so the count line - which repeats the total right
     underneath it - steps aside and the total carries the summary alone. */
  .hc-foot .hc-row:not(.big){display:none}
  .hc-foot .hc-row.big{margin-top:0;padding-top:6px;border-top:0;font-size:17px}
  .hc-link{margin-top:6px}
}

/* The stock-change / server notice inside the drawer sits directly above the
   button in the footer, where it cannot scroll away. */
.hc-foot .hc-err.on,
.hc-foot .hv-count{margin:0 0 9px}
.hc-err{overflow-wrap:break-word}

/* ==========================================================================
   10 - ACCOUNT, WISH AND CONFIRM PAGES
   ========================================================================== */

/* Room to breathe on a large monitor, without turning the reading column
   into a full-width wall of text. */
@media (min-width:1500px){
  .hv-page .wrap{max-width:1040px}
}
body > .wrap{width:100%}

/* Success and status notes stay in view while the customer reads the form
   under them. Errors no longer live here - they are on the fields. */
#flash{position:sticky;top:8px;z-index:40}
#flash .msg{backdrop-filter:blur(6px)}

/* Tab strips scroll sideways instead of stacking into four rows. */
.tabs{
  flex-wrap:nowrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto}

@media (max-width:560px){
  .wrap{padding-left:14px;padding-right:14px}
  .card{padding:16px}
  header.top{gap:10px}
  .ord{padding:13px}
  .ord .h{gap:7px}
  .codes{grid-template-columns:1fr 1fr}
  .codes code{font-size:13px;overflow-wrap:break-word}
  .secret{overflow-wrap:break-word;word-break:break-all;font-size:13px}
  .qr{max-width:100%;height:auto}
  .bub{max-width:88%}
}

/* The wish form. The send button is deliberately NOT sticky here: it is a
   long form of optional fields, and a bar pinned to the bottom of the screen
   sat on top of whichever field the customer was filling in. The sticky
   action belongs in the checkout drawer, which has a footer of its own.
   Instead the button is full width and comfortable at the end of the form,
   and the count of problems appears directly above it. */
@media (max-width:620px){
  form .row.two{grid-template-columns:1fr}
}
@media (max-width:700px){
  #wf .btn#wsend{width:100%;min-height:50px;margin-top:4px}
  #wf{padding-bottom:calc(6px + var(--hv-safe-b))}
  .steps{gap:8px}
  .step{width:100%}
}

/* Confirm page: long product names wrap, the two actions stay full width and
   clear of the home bar. */
.items td{overflow-wrap:break-word}
@media (max-width:520px){
  .hv-page .card{border-radius:12px}
  .items{font-size:13.5px}
  .items .q{width:38px}
  .items .m{width:88px}
  .acts{gap:10px}
  .acts .btn{min-height:48px}
  .foot{padding-bottom:var(--hv-safe-b)}
}

/* ==========================================================================
   11 - THE GENERATED PRODUCT PAGES UNDER /p/
   ========================================================================== */

@media (min-width:1500px){
  main{max-width:1000px}
}
main h1{font-size:clamp(22px,5.4vw,28px)}
main .shot{width:100%;height:auto}

@media (max-width:520px){
  main{padding:22px 15px 56px}
  main .crumb{margin-bottom:18px;overflow-wrap:break-word}
  main dl{grid-template-columns:1fr;gap:0}
  main dl dt{margin-top:12px;font-size:13px}
  main dl dd{font-weight:600}
  main .price{font-size:23px}
  .trust{gap:12px;padding:12px 13px}
  .trust .pct{width:48px;height:48px;font-size:13px}
  .revs{grid-template-columns:1fr}
}

/* ==========================================================================
   11b - THE TWO FLOATING BUTTONS

   The cart button sits bottom right, the chat launcher bottom left, so they
   never meet. What they both did was sit on top of whatever was at the end of
   the page: on the account page the chat bubble covered the "change password"
   button completely. Every page now ends with enough room for them, and on a
   phone the launcher is smaller so it takes less of a small screen.
   ========================================================================== */

.htcg-c-btn{bottom:calc(18px + var(--hv-safe-b))}

@media (max-width:640px){
  .htcg-c-btn{
    width:56px;height:56px;
    left:14px;
    bottom:calc(14px + var(--hv-safe-b));
  }
  .htcg-c-btn svg{width:26px;height:26px}
  .htcg-n-tip{left:80px;bottom:26px}
  .htcg-c-panel{left:8px;right:8px;width:auto}
}

/* Room at the end of the page, so nothing that can be tapped is stranded
   underneath a floating button. */
footer{padding-bottom:calc(88px + var(--hv-safe-b))}
.hv-page .wrap{padding-bottom:calc(96px + var(--hv-safe-b))}
.hv-page footer.bot{padding-bottom:0}

/* ==========================================================================
   12 - TABLES AND SCROLL RAILS
   ========================================================================== */

/* Tables are unreadable in a phone-width column, so each row becomes its own
   little block with the heading repeated in front of the value. */
@media (max-width:560px){
  table.hv-stack,
  table.hv-stack tbody,
  table.hv-stack tfoot,
  table.hv-stack tr,
  table.hv-stack td{display:block;width:100%}
  table.hv-stack thead{display:none}
  table.hv-stack tr{
    padding:9px 0;
    border-bottom:1px solid var(--line,rgba(255,255,255,.08));
  }
  table.hv-stack tr:last-child{border-bottom:0}
  table.hv-stack td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    width:auto!important;
    border:0!important;
    padding:2px 0!important;
    text-align:right!important;
  }
  table.hv-stack td[data-hv]::before{
    content:attr(data-hv);
    flex:0 0 auto;
    color:var(--mut,#9aa0ab);
    font-weight:700;
    text-align:left;
  }
  /* The total line keeps its label and its figure on one row - it is the
     number the customer is looking for. */
  table.hv-stack tfoot tr{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-top:12px;
    border-bottom:0;
  }
  table.hv-stack tfoot td{display:block;text-align:right!important}
  table.hv-stack tfoot td:first-child{text-align:left!important}
}

/* Any table the shop did not tag still gets a scroll rail instead of pushing
   the page sideways. */
.hv-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Anything the shop drops into a scroll rail keeps a comfortable, snapping
   feel on a touch screen instead of a half-visible card. */
.hv-rail,
.hv-trust .rail{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
.hv-rail > *{scroll-snap-align:start}

/* ==========================================================================
   13 - FEEDBACK AND LOADING STATES
   ========================================================================== */

.hv-busy{position:relative;pointer-events:none;opacity:.72;cursor:progress}
.hv-spin{
  display:inline-block;
  width:13px;height:13px;
  margin-right:8px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color:currentColor;
  border-radius:50%;
  vertical-align:-2px;
  animation:hv-sp .7s linear infinite;
}
@keyframes hv-sp{to{transform:rotate(360deg)}}

/* Skeleton shimmer for anything still on its way from the server. */
.hv-skel{
  border-radius:10px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 37%,
    rgba(255,255,255,.04) 63%);
  background-size:400% 100%;
  animation:hv-sk 1.3s ease-in-out infinite;
}
@keyframes hv-sk{from{background-position:100% 0}to{background-position:0 0}}

/* A tap should answer immediately, even before the network does. */
button,.btn,a.btn,.card,.pill,.hc-accbtn,.tally button{
  -webkit-tap-highlight-color:rgba(232,163,77,.18);
  touch-action:manipulation;
}
button:active,.btn:active,a.btn:active{transform:translateY(1px)}
.card:active{transform:translateY(-1px)}

/* ==========================================================================
   14 - RESPECT THE SYSTEM PREFERENCE
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .card:hover{transform:none}
}


/* ---------------------------------------------------------------
   10 - THE WORDMARK IS A LINK HOME
   The header wordmark goes back to the shop front page. Added 2026-08-03.
   --------------------------------------------------------------- */
.logo a{color:inherit;text-decoration:none;display:inline-block}
.logo a:hover,.logo a:focus-visible{color:var(--accent,#e8a34d)}

/* ---- CLS fix 4 (2026-08-10) ----
   #cat is empty in the served HTML and is filled by JS, growing ~47px -> ~223px.
   With .toolbar{flex-wrap:wrap} that reflowed the toolbar and pushed #grid down
   (Lighthouse desktop: layout shift 0.282 attributed to div#grid).
   Reserve stable control widths so populating them cannot change the layout. */
@media (min-width:901px){
  .toolbar select#cat{width:223px;max-width:100%;flex:0 0 auto}
  .toolbar select#sort{width:148px;max-width:100%;flex:0 0 auto}
  .toolbar #count{min-width:65px}
}


/* ================= SHOP TIDY — start =================
   Added 27 Aug 2026. The shop put 30 controls and 677px of chrome above the
   first product; customers called it chaotic. This block trims that back.
   Everything here is additive and scoped by id. To undo the whole thing,
   delete from the SHOP TIDY start marker to the end marker. Nothing else
   in this file depends on it.
   -------------------------------------------------------------------
   1) Reviews strip: was a 185px panel with a sideways-scrolling quote rail.
      Social proof should not outrank the products. Collapsed to one row -
      score, count, and the links - which keeps the proof and returns 114px.
      The quotes still exist in the markup for anyone who wants to expose
      them again; only the rail is hidden. */
#hvTrust{min-height:0}
#hvTrust .hv-trust-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
#hvTrust .rail{display:none}
#hvTrust .score{flex:0 0 auto}
#hvTrust .score .ring{width:44px;height:44px}
#hvTrust .score .ring b{font-size:14px}
#hvTrust .cta{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0}


/* 2) Duplicate controls. The catalogue could be filtered four ways stacked on
      top of each other: these chips, a category dropdown doing the same job,
      a 'Samo dostupno' checkbox, and a '65 DOSTUPNO' pill doing the same job
      as the checkbox. The pill wins - it carries the count. Checkbox goes. */
.toolbar label.chk{display:none}

/* 3) Four of the six shelf chips (One Piece, Lorcana, Riftbound, Gundam) say
      USKORO and lead nowhere - dead ends dressed as primary navigation, in the
      most valuable space on the page. Demoted to quiet text so the two real
      categories read as the real ones. Still clickable, still say 'reci nam'. */
.hvbr .hvbr-t.soon{border-color:transparent;background:transparent;opacity:.55;padding-top:4px;padding-bottom:4px}
.hvbr .hvbr-t.soon:hover{opacity:.85}

/* 4) The status pills are FILTERS, not badges, but every one was painted a
      solid saturated colour - six competing fills, in no meaningful order.
      Only the active filter is filled now; the rest are outlines carrying a
      hint of their own hue. Scoped to #tally because favorites.css targets
      these by id, and b-fav needs background set on the same selector or it
      loses the specificity tie. */
#tally button{background:transparent;color:var(--text-secondary,#b9b0a2);border:1px solid rgba(255,255,255,.16)}
#tally button.b-in{border-color:rgba(143,168,90,.5)}
#tally button.b-low{border-color:rgba(224,166,60,.5)}
#tally button.b-inc{border-color:rgba(111,163,184,.5)}
#tally button.b-out{border-color:rgba(207,90,74,.5)}
#tally button.b-fav{background:transparent;color:var(--text-secondary,#b9b0a2);border-color:rgba(255,107,129,.5)}
#tally button:hover{border-color:rgba(255,255,255,.38);color:var(--text-primary,#f2ede4)}
#tally button.on{background:rgba(255,255,255,.14);color:var(--text-primary,#f2ede4);border-color:rgba(255,255,255,.45)}


/* 5) MOBILE COMPACTION (27 Aug). Measured in a real 390px window: a phone
      visitor scrolled through 1.363px - 1.7 full screens - of stacked bars
      before the first product. These rules cut that to ~850px (1.0 screen)
      without removing any function: chip rows become single sideways-swipe
      rows (the standard phone pattern), the three social buttons and fine
      print leave the reviews strip (kept on desktop, and the links remain
      on the KupujemProdajem page), the support bar drops its lead sentence,
      dropdowns pair up two per row, and the header packs its two small
      controls onto one line. Desktop is untouched - everything is scoped
      to max-width:700px, matching the toolbar's existing breakpoint. */
@media (max-width:700px){
  #hvTrust .cta .kpwrap,#hvTrust .cta .fine{display:none}
  #hvTrust .cta{justify-content:flex-start}
  #hvTrust .cta .all{width:auto}
  .hva-bar .hva-lead{display:none}
  .hva-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .hva-chips .hva-chip{flex:0 0 auto;white-space:nowrap}
  .hvbr-row{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .hvbr-row .hvbr-t{flex:0 0 auto;white-space:nowrap}
  #tally{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  #tally button{flex:0 0 auto;white-space:nowrap}
  .toolbar #count{display:none}
  .toolbar #cat,.toolbar #sort,.toolbar #curSeg,.toolbar #langSeg{flex:1 1 40%;min-width:130px}
  .toolbar #q,.toolbar #hcAcc{flex:1 1 100%}
  .wrap>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:16px;row-gap:6px}
  .wrap>header .logo,.wrap>header .tagline{flex:1 1 100%;text-align:center}
}

/* ================= SHOP TIDY — end ================= */

/* ================= SHOP RESTYLE — start =================
   27 Aug 2026. A visual pass, not a functional one. The page read as a stack
   of same-weight boxed bars sprawled across 1.640px, and the white-background
   product photos sat ragged on dark tiles. Principles applied: one box only
   (the toolbar - it is the machine you operate), everything else separated by
   hairlines and type weight; page contained and centered; product photos on a
   warm cream tile so they read as deliberate product tiles; cards lift on
   hover. Delete this block to restore the previous look exactly. */

/* Contain and center - kills the dead space on wide screens */
.wrap{max-width:1280px;margin:0 auto}

/* De-box the info rows; hairline separation instead of frames */
#hvTrust .hv-trust-in{border:0;background:transparent;box-shadow:none;border-radius:0;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
.hva,.hva-bar{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0}
.hva-bar{padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.07)!important}
.hvbr{border:0;background:transparent;box-shadow:none;border-radius:0;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
.toolbar{margin-top:18px}

/* Trust row: proof as one elegant line, not a button bar */
#hvTrust .fine{display:none}
#hvTrust .cta .all{background:transparent;border:0;box-shadow:none;padding:0;width:auto;color:var(--accent,#e0b060);font-weight:700;letter-spacing:.04em}
#hvTrust .cta .all:hover{text-decoration:underline;text-underline-offset:4px}
#hvTrust .kpbtn{width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;overflow:hidden}
#hvTrust .kpbtn .kptxt,#hvTrust .kpbtn .kparr{display:none}

/* Product cards: cream photo tile + a real hover */
.thumb{background:#f7f3ea}
.card .hv-fav-btn{background:rgba(22,19,14,.55);color:#fff;backdrop-filter:blur(2px)}
.card .hv-fav-btn:hover{background:rgba(22,19,14,.8)}
@media (prefers-reduced-motion:no-preference){
  .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .card:hover{transform:translateY(-4px);border-color:rgba(224,176,96,.45);box-shadow:0 12px 28px -14px rgba(0,0,0,.7)}
}
.card .name{font-size:15px}


/* The item count wrapped onto its own line inside the sticky toolbar and
   followed the visitor down the whole page half-empty. The '85 SVE' pill
   already carries the number. */
.toolbar #count,#count{display:none!important}

/* Corners for utilities, center for brand. The live-status dot and the theme
   picker floated centered under the logo like lost buttons; on desktop they
   now sit in the masthead corners. The currency and language switches stay
   with the filters - they change prices and product text, so they belong
   near the catalogue - but drop to a quieter size so the search field owns
   the toolbar. Phones keep their own compact header from the mobile block. */
@media (min-width:701px){
  .wrap>header{position:relative}
  .wrap>header .updated{position:absolute;top:6px;left:0;margin:0}
  .wrap>header>div[data-sh="mt12"]{position:absolute;top:2px;right:0;margin:0}
  #curSeg button,#langSeg button{min-height:34px;padding:5px 13px;font-size:12.5px}
}

/* Cart drawer. With one or two items the body was mostly black void between
   the suggestions and the total. The body becomes a flexible column: items
   at the top, the suggestions box anchored down by the total where an upsell
   belongs, and the stretch in between holds a faint gold mark instead of
   nothing. A small star line sits above the total - digits and stars only,
   so it reads the same in Serbian and English. On a full cart the flexible
   zone collapses to nothing and the drawer behaves exactly as before. */
#hcDrawer .hc-body{display:flex!important;flex-direction:column!important}
#hcDrawer .hc-body::after{content:"\2726";order:1;flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;font-size:72px;color:#e0b060;opacity:.07;overflow:hidden;pointer-events:none}
#hcDrawer .hc-body .hc-reco{order:2}
/* Cart items must never be crushed by the suggestion sections: flex children shrink by default, so pin them and let the body scroll instead */
#hcDrawer .hc-body>.hc-line{flex:0 0 auto}
#hcDrawer .hc-body .hc-reco{flex:0 0 auto}
/* Mid-scroll, the next suggestion box’s top edge peeked above the total bar and read as a stray line — fade the last pixels of the scroll area so partial boxes dissolve */
#hcDrawer .hc-body{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent calc(100% - 8px));mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent calc(100% - 8px))}
/* (stars line above Ukupno removed 27 Aug at the owner's request; the two
   extra suggestion sections from hv-cart-more.js fill the drawer instead) */
/* ================= SHOP RESTYLE — end ================= */

/* Owner asked for the suggestion-box title rows to go - products only */
#hcDrawer .hc-reco .hc-reco-h{display:none}

/* THE line above Ukupno, finally: it was the gold border-top on the total row inside the footer (plus the footer’s own top border) — not scrolling content. Kill both; the fade already separates body from footer. */
#hcDrawer .hc-foot .hc-row{border-top:0!important}
#hcDrawer .hc-foot{border-top:0!important}

/* Gallery under the product popup picture */
#lb .lb-img{display:flex;flex-direction:column;align-items:center;justify-content:center}
#lb .lb-thumbs{display:flex;gap:8px;margin-top:10px;justify-content:center;flex-wrap:wrap}
#lb .lb-thumbs .lb-th{width:54px;height:54px;object-fit:contain;background:#f7f3ea;border-radius:6px;border:2px solid transparent;cursor:pointer;opacity:.75}
#lb .lb-thumbs .lb-th.on{border-color:rgba(224,176,96,.8);opacity:1}

/* The big popup picture is clickable when there is more than one - it steps to the next */
#lb .lb-img:has(.lb-thumbs) #lbPic{cursor:pointer}

/* ---- shipping-time notice in cart/checkout (2 Sep 2026) ---- */
.hc-eta{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:10px 0;padding:10px 12px;border:1px solid rgba(212,175,55,.45);border-radius:10px;background:rgba(212,175,55,.08);font-size:13.5px;line-height:1.45;color:var(--text-secondary,#d8c4b0)}
.hc-eta b{color:var(--text-primary,#f6ece0)}
.hc-eta .i{font-size:20px;line-height:1}
.hc-eta.big{margin:14px 0;padding:14px;font-size:14.5px}

/* ---- Compact cart upsell, 2 Sep 2026: ONE block, TWO picks, side by side.
   Replaces the three stacked 3-row lists (native + hv-cart-more.js). ---- */
#hcDrawer .hc-reco.hc-reco2{margin:14px 0 0;padding:12px;border:1px solid var(--border,rgba(232,163,77,.2));border-radius:14px;background:var(--surface-1,#1a1512);border-top:1px solid var(--border,rgba(232,163,77,.2))}
#hcDrawer .hc-reco2 .hc-r2h{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
#hcDrawer .hc-reco2 .hc-r2h h3{margin:0;font-family:inherit;font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;font-weight:700;color:var(--muted,#8a8578)}
#hcDrawer .hc-reco2 .hc-r2h button{font:inherit;font-size:11px;font-weight:700;color:var(--accent,#e0b060);background:none;border:0;padding:4px 0;cursor:pointer;min-height:0;letter-spacing:.2px}
#hcDrawer .hc-reco2 .hc-rg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#hcDrawer .hc-reco2 .hc-rc{display:flex;flex-direction:column;position:relative;padding:0;margin:0;border:1px solid var(--border,rgba(232,163,77,.2));border-radius:12px;overflow:hidden;background:var(--surface-2,#161616);width:auto;min-width:0;flex:none;align-items:stretch;grid-template-columns:none}
#hcDrawer .hc-reco2 .hc-rc-th{position:relative;flex:0 0 auto;width:auto;height:auto;aspect-ratio:1/1;background:#f4f1ec;border-radius:0;display:block;margin:0;width:100%;height:auto;padding:0;border:0;box-sizing:border-box}
#hcDrawer .hc-reco2 .hc-rc-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;display:block;box-sizing:border-box;border-radius:0;filter:none}
#hcDrawer .hc-reco2 .hc-rc-tag{position:absolute;left:6px;top:6px;right:auto;font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 7px;border-radius:99px;background:rgba(20,14,10,.78);color:#e0b060;line-height:1.2}
#hcDrawer .hc-reco2 .hc-rc-x{position:absolute;right:6px;top:6px;left:auto;width:22px;height:22px;border-radius:50%;background:rgba(20,14,10,.7);color:#fff;border:0;font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:.85}
#hcDrawer .hc-reco2 .hc-rc-b{display:flex;flex-direction:column;gap:3px;padding:9px 10px 10px;grid-template-columns:none;width:100%;box-sizing:border-box;text-align:left;align-items:flex-start}
#hcDrawer .hc-reco2 .hc-rc-nm{white-space:normal;font-size:12px;font-weight:700;line-height:1.3;color:var(--text-primary,#f2ede4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
#hcDrawer .hc-reco2 .hc-rc-st{font-size:10px;font-weight:600;color:var(--muted,#8a8578);display:flex;align-items:center;gap:5px}
#hcDrawer .hc-reco2 .hc-rc-st i{width:6px;height:6px;border-radius:50%;background:#6fcf6f;display:inline-block}
#hcDrawer .hc-reco2 .hc-rc-st.soon i{background:#e0b060}
#hcDrawer .hc-reco2 .hc-rc-pr{font-size:13.5px;font-weight:800;color:var(--accent,#e0b060);margin-top:1px}
#hcDrawer .hc-reco2 .hc-rc-add{margin-top:6px;width:100%;min-height:34px;border-radius:9px;border:1px solid var(--accent,#e0b060);background:transparent;color:var(--accent,#e0b060);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;transition:background .15s,color .15s}
#hcDrawer .hc-reco2 .hc-rc-add:hover{background:var(--accent,#e0b060);color:#1a1210}
#hcDrawer .hc-reco2 .hc-rc.hc-rc-soon .hc-rc-th{display:grid;place-items:center;background:rgba(232,163,77,.1);border-bottom:1px dashed var(--border,rgba(232,163,77,.3))}
#hcDrawer .hc-reco2 .hc-rc-soonic{font-size:28px;color:#e0b060}
/* the old stacked lists never render again, whatever cached JS does */
#hcDrawer .hc-reco.hv-more2{display:none!important}

/* ---- Header tidy, 2 Sep 2026: KP ratings band retired (own reviews planned),
   "Stock updated" + theme picker moved into the toolbar, shop links parked at
   the right end of the NA POLICI row, Lorcana chip parked. ---- */
#hvUtilBar .hv-rowtools{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
#hvUtilBar .tb-updated{margin:0;min-height:34px;padding:0 12px;border-radius:100px;font-size:12.5px;white-space:nowrap;border:1px solid var(--border-strong,rgba(160,160,160,.25))}
#hvUtilBar .tb-theme{display:inline-flex;align-items:center}
#hvUtilBar .tb-theme #themeSwitchBtn{min-height:34px;padding:5px 13px;font-size:12.5px;white-space:nowrap}
#hvUtilBar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#hvUtilBar .hvbr{flex:1 1 0;min-width:0;width:auto}
#hvUtilBar .kpwrap,#hvUtilBar .kpwrap.hvhd-links{flex:0 0 auto;margin:0 0 0 14px;display:flex;gap:8px;flex-wrap:nowrap;align-items:center}
#hvUtilBar .kpwrap .kpbtn{padding:3px;border-radius:50%;gap:0;width:40px;height:40px;min-height:40px;justify-content:center;box-sizing:border-box}
#hvUtilBar .kpwrap .kptxt,#hvUtilBar .kpwrap .kparr{display:none}
#hvUtilBar .kpwrap .kpmark,#hvUtilBar .kpwrap .igmark,#hvUtilBar .kpwrap .fbmark{width:32px;height:32px;min-width:32px;border-radius:50%}
@media (max-width:700px){
  #hvUtilBar .hvbr{flex:1 1 100%}
  #hvUtilBar{justify-content:space-between}
  #hvUtilBar .kpwrap,#hvUtilBar .kpwrap.hvhd-links{width:auto!important;flex:0 0 auto;margin:0 0 0 auto;padding:0 0 6px;gap:6px;justify-content:flex-end}
  #hvUtilBar .kpwrap .kpbtn{width:36px;height:36px;min-height:36px}
  #hvUtilBar .kpwrap .kpmark,#hvUtilBar .kpwrap .igmark,#hvUtilBar .kpwrap .fbmark{width:28px;height:28px;min-width:28px}
  /* phones: one line under the shelf chips - pills left, social icons right */
  #hvUtilBar .hv-rowtools{flex:0 1 auto;margin:0;padding:0 0 6px;gap:6px;min-width:0}
  #hvUtilBar .tb-updated{min-height:var(--hv-tap-sm,38px);padding:0 10px;font-size:11.5px}
  #hvUtilBar .tb-theme #themeSwitchBtn{min-height:var(--hv-tap-sm,38px);padding:4px 10px;font-size:11.5px}
}

/* ---- PRODUCT DESC LINE BREAKS (3 Sep 2026) ----
   The lightbox description block gets its white-space via a style ATTRIBUTE in
   shop-1, which the storefront CSP drops (no unsafe-inline). Card lists in
   p.desc use newlines, so honour them here. ---- */
#lb .lb-desc{white-space:pre-line}


/* ==== NATURAL PICTURES + QUIET CARDS + LIGHTER HEADER (5 Sep 2026) ====
   Owner: "pictures have a white background but the box around them is
   yellowish - doesn't look legit"; wants the shop polished but a little retro.
   Product renders arrive on pure white; every picture box is warm cream, so
   each render sat in a white rectangle. Multiply-blending melts the white into
   the cream and leaves the product itself untouched (photos keep their look).
   Same treatment in the popup, the cart line and the two cart suggestions, so
   the whole site reads as one warm sheet of paper. */
#grid .card .thumb img{mix-blend-mode:multiply}
#lb .lb-img{background:#f7f3ea}
#lb #lbPic{mix-blend-mode:multiply}
#lb .lb-thumbs .lb-th{background:#f7f3ea;mix-blend-mode:multiply}
#hcDrawer .hc-line>img{background:#f4f1ec;mix-blend-mode:multiply}
#hcDrawer .hc-reco2 .hc-rc-th img{mix-blend-mode:multiply}

/* Quiet cards: 62 of 96 cards wore the same green "Na stanju" pill. A badge
   now appears only when it says something (low stock, arriving, sold out). */
#grid .card .badge.b-in{display:none}

/* Cart drawer: the faint star was a flex spacer that pushed the suggestions
   to the bottom and left a dead gap after one item. Gone; the two suggestion
   cards share one height with the Add button pinned to the bottom. */
#hcDrawer .hc-body::after{display:none}
#hcDrawer .hc-reco2 .hc-rg{align-items:stretch}
#hcDrawer .hc-reco2 .hc-rc-add{margin-top:auto}

/* Desktop only: products start ~75px higher. Phones keep the 27 Aug compaction. */
@media (min-width:701px){
  header{padding:26px 0 16px}
  .hva-bar{padding:7px 2px}
  .hvbr{padding:8px 2px;margin-top:8px}
  .toolbar{padding:10px 14px;margin:12px 0 14px}
  .sec{margin:6px 0 12px}
}


/* ==== PHONE: reachable add-to-cart + slimmer toolbar (5 Sep 2026) ====
   Owner (iPhone 13): "open a product, I have to scroll down to add to cart";
   "the top bar with language / EUR-RSD looks too big". Measured in a real
   390 px window: the popup scrolls and the Add button sat 170 px below its
   visible edge; the toolbar was 231 px tall (four rows). Now the Add button
   is pinned to the popup's bottom edge, the picture area is capped, and the
   toolbar is three rows (~150 px): search + hours / category + sort /
   account + RSD-EUR + SRB-ENG. The name inside the account button is hidden
   on phones (span.hc-accname, added in shop-cart.js the same day). */
@media (max-width:700px){
  #lb .lb-info .hc-add{position:sticky;bottom:0;z-index:3;box-shadow:0 8px 0 8px #101010,0 -16px 18px -4px rgba(0,0,0,.6)}
  #lb .lb-img{max-height:300px}
  #lb #lbPic{max-height:230px}
  .toolbar{padding:8px;gap:6px}
  .toolbar #q{flex:1 1 60%;width:auto;min-width:0}
  .toolbar #hcAcc.hvhd-acc{display:contents!important}
  .toolbar #hcAcc .hc-hrs{order:-1;flex:0 0 auto;height:44px;min-height:44px;display:inline-flex;align-items:center;font-size:12.5px;padding:0 8px}
  .toolbar #cat,.toolbar #sort{flex:1 1 45%;min-height:40px;height:40px}
  .toolbar #hcAcc .hc-accbtn{flex:1 1 90px;min-width:0;height:36px;min-height:36px;padding:0 8px;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toolbar .hc-accname{display:none}
  .toolbar #curSeg,.toolbar #langSeg{flex:0 0 auto;width:max-content;min-width:0;max-width:none;height:36px;min-height:36px}
  .toolbar #curSeg button,.toolbar #langSeg button{flex:0 0 auto;width:auto;min-width:0;padding:0 8px;font-size:12px;height:36px;min-height:36px}
}


/* ============================================================
   UTIL BAR ON PHONES + NO OPENING HOURS (owner, 5 Sep 2026)
   "Stanje uživo / Teme" and the KP · Instagram · Facebook icons sit on ONE line at
   every phone width (the tools row shrinks instead of wrapping; sizes step down under
   430 px). The "radno vreme" pill (.hc-hrs) is gone from the shop - orders come 24/7.
   ============================================================ */
@media (max-width:700px){
  #hvUtilBar .hv-rowtools{flex:1 1 0;min-width:0;overflow:hidden}
  #hvUtilBar .kpwrap,#hvUtilBar .kpwrap.hvhd-links{flex:0 0 auto}
}
@media (max-width:430px){
  #hvUtilBar{gap:8px}
  #hvUtilBar .hv-rowtools{gap:5px}
  #hvUtilBar .tb-updated{padding:0 9px;font-size:11px;min-height:36px}
  #hvUtilBar .tb-theme #themeSwitchBtn{padding:4px 9px;font-size:11px;min-height:36px}
  #hvUtilBar .kpwrap,#hvUtilBar .kpwrap.hvhd-links{gap:4px;margin-left:6px}
  #hvUtilBar .kpwrap .kpbtn{width:34px;height:34px;min-height:34px}
  #hvUtilBar .kpwrap .kpmark,#hvUtilBar .kpwrap .igmark,#hvUtilBar .kpwrap .fbmark{width:26px;height:26px;min-width:26px}
}
#hcAcc .hc-hrs{display:none!important}