/* ==========================================================================
   Verde Fresh — visual theme overrides
   Restyles the existing Bootstrap 5 / DataTables / bootstrap-treeview markup
   to match the customer's design sample (tellimiskeskkond-verde.html).
   Loaded AFTER styles.css so it wins the cascade; it only re-skins existing
   classes/IDs and does not rely on any markup that isn't already there.
   ========================================================================== */

:root{
  --ink:#0F3D2E; --green:#2BA05D; --leaf:#8BC46A; --mist:#E6EAE6;
  --page:#FBFCFA; --line:#E6EAE6; --muted:#5C6B63; --faint:#8C9992;
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --ctrl-h:40px;
}

/* ---------- base typography ---------- */
body{
  font-family:"Public Sans","Helvetica Neue",Arial,sans-serif;
  background:var(--page);
  color:#1D1D1D;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.kaup-card-title,.grupp-card-title{
  font-family:"Bricolage Grotesque","Public Sans",Arial,sans-serif;
  color:var(--ink);
  letter-spacing:-.01em;
}
a{color:var(--ink)}
a:hover{color:var(--green)}

/* ---------- header / nav ---------- */
/* Legacy styles.css has a long-standing `header{visibility:hidden}` rule
   (its very first rule) with nothing anywhere overriding it back to
   visible. On the login page (base_logimata.html) the logo and language
   toggle are placed directly inside <header>, so that legacy rule was
   silently hiding both -- <header> there carries the "site-header-guest"
   class specifically so this un-hide rule can target just that page.
   Un-hide it here (equal specificity, loads after styles.css, so this
   wins without !important -- added anyway for safety since the legacy
   rule could be reordered).
   IMPORTANT: keep this scoped to header.site-header-guest, not the bare
   `header` selector -- on base.html <header> only wraps the empty
   {% block head %} placeholder (the real nav lives in #preContent) and
   is never given that class, so it stays hidden/collapsed there. A bare
   `header` selector here was found (2026-09-14) to force that empty
   element visible with this padding+border on every logged-in page,
   producing a ~20px blank white slit above the real header -- exactly
   the kind of regression this comment is warning future edits away from. */
header.site-header-guest{
  visibility:visible !important;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 40px !important;
}
@media only screen and (max-width:600px){
  header.site-header-guest{padding:10px 16px !important;}
}
/* On base.html <header> is always empty (see comment above) -- scoping
   the un-hide rule to .site-header-guest already stops it being forced
   visible+padded there, but the legacy `header{visibility:hidden}` rule
   alone still reserves a blank ~6px (its own padding: 3px 90px) above
   #preContent since visibility:hidden keeps the box's layout space. Drop
   that to zero outright rather than leave any residual gap. */
header:not(.site-header-guest){
  display:none;
}
/* The actual visible header bar is #preContent (the <header> tag itself
   ends up empty -- it only wraps the invisible {% block head %}). Old
   styles.css still paints #preContent with a legacy light-blue accent
   (#E3EFFC) left over from a previous design, which shows as a blue strip
   on either side of the centered nav at wide viewports. Repaint it white
   and give it the sample's 1px bottom divider, since this is the element
   that actually spans the full header row. */
#preContent{
  background:#fff !important;
  border-bottom:1px solid var(--line);
}
nav.navbar{
  background:#fff !important;
  padding:0;
}
.navbar-brand img{height:52px;width:auto;}
.navbar-nav .nav-link{
  font-size:15px;
  font-weight:500;
  color:#1D1D1D;
  padding:10px 14px !important;
  border-bottom:2px solid transparent;
}
.navbar-nav .nav-link:hover{color:var(--green);}
.navbar-nav .nav-link.active{
  color:var(--ink);
  border-bottom-color:var(--green);
  font-weight:600;
}
#kasutajaNimi, #kasutajaOsakond{color:var(--muted);}
/* Vertically center every item in the right-hand nav cluster instead of
   letting them stretch to the row's full height (the flex row's default
   align-items:stretch was forcing the user-info pill and the plain
   "Logi välja" link to both render ~63px tall). */
.navbar-nav.ms-auto{
  align-items:center;
}
/* Only the user-info block (it alone carries .align-middle in the markup)
   gets the pill/border treatment, matching the design sample where the
   account chip is the only bordered pill and "Logi välja" is a plain link. */
.navbar-nav.ms-auto .nav-item.nav-link.align-middle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:var(--ctrl-h);
  box-sizing:border-box;
  font-size:14px;
  line-height:1.2;
  color:var(--muted);
  background:var(--page);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:8px 14px !important;
}
/* The account chip's own link (<a class="nav-link">) still carries the
   generic .navbar-nav .nav-link padding, stacking a second 10px/14px box
   inside the chip's own 8px/14px one and roughly doubling its height.
   Only the outer element should carry padding -- zero the inner link out. */
.navbar-nav.ms-auto .nav-item.nav-link.align-middle > a.nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 !important;
  color:inherit;
}
/* Plain text link, no button chrome -- matches .logout in the sample */
.navbar-nav.ms-auto a.nav-item.nav-link{
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  background:none;
  border:0;
  padding:8px 6px !important;
}
.navbar-nav.ms-auto a.nav-item.nav-link:hover{color:var(--green);}

/* language toggle (EE / ENG)
   Legacy styles.css already has a `.lang{display:inline-block !important;
   padding:0 !important}` rule left over from an old design that reused this
   class name -- it was winning over our padding, so the box hugged the
   active pill with no breathing room and the dark "on" pill visibly poked
   out past the box's edge. Match its !important + give it a fixed height
   (shared with the account chip via --ctrl-h) so both boxes line up. */
.lang{
  display:inline-flex !important;
  align-items:center;
  gap:2px;
  width:fit-content;
  height:var(--ctrl-h);
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:0 4px !important;
}
.lang span{
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  padding:6px 13px;
  border-radius:var(--radius-pill);
  color:var(--faint);
  cursor:pointer;
}
.lang span.on{
  background:var(--ink);
  color:#fff;
}
.lang span:hover:not(.on){
  color:var(--green);
}
/* On narrow phones the 3-way EE/ENG/RUS toggle (added when Russian was
   reinstated) no longer fits its column and RUS was clipped off-screen.
   Tighten the padding/font/gap just at this breakpoint rather than
   touching the toggle's desktop appearance. */
@media (max-width:400px){
  .lang{ gap:0; padding:0 2px !important; }
  .lang span{ padding:6px 8px; font-size:12px; letter-spacing:.02em; }
}

/* cart icon buttons */
.cartContainer .cart,
.cartContainerMenu .cart{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}
.cartContainer .cart:hover,
.cartContainerMenu .cart:hover{
  border-color:var(--leaf);
  color:var(--green);
}
/* .cartContainer doubles as the mobile navbar-toggler for layout purposes,
   which means it also inherits Bootstrap's default toggler chrome (a
   border + border-radius box) -- that drew a square frame around the
   circular cart button on narrow screens. Strip it so only the circular
   .cart button itself is visible, matching the desktop rendering. */
.cartContainer.navbar-toggler{
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.fa-shopping-cart{color:inherit;}
div a.cart .cart-basket{
  background-color:var(--green) !important;
  top:-4px !important;
  right:-4px !important;
  width:20px;height:20px;
  font-size:11px !important;
  font-weight:600;
}

/* ---------- sidebar search + category tree ---------- */
/* The search button still lives in Bootstrap 4's .input-group-append
   wrapper, which no longer merges flush with the input in Bootstrap 5 --
   it was rendering as a separate box next to the pill, leaving a visible
   seam. Instead of a two-piece "connected" control, float the button on
   top of the input's own padding, the same way the design sample overlays
   its search icon -- one continuous pill with no seam. */
.search-box{
  position:relative;
}
#inputOtsi{
  border-radius:var(--radius-pill) !important;
  border:1px solid var(--line) !important;
  padding:12px 46px 12px 20px !important;
  background:#fff;
  width:100%;
}
#inputOtsi:focus{
  border-color:var(--leaf) !important;
  box-shadow:0 0 0 3px rgba(139,196,106,.22) !important;
}
.search-box .input-group-append{
  position:absolute;
  top:50%;
  right:4px;
  transform:translateY(-50%);
  z-index:5;
}
#buttonOtsi{
  border:none !important;
  background:transparent !important;
  color:var(--faint);
  padding:8px 10px;
}
#buttonOtsi:hover{color:var(--green);}

#kaubagrupidPuu{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:6px 0;
}
#kaubagrupidPuu .list-group-item,
#kaubagrupidPuu .node-kaubagrupidPuu{
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  font-size:15px;
  font-weight:500;
  padding:13px 18px !important;
  color:#1D1D1D;
  background:transparent !important;
}
#kaubagrupidPuu .list-group-item:last-child{border-bottom:0 !important;}
#kaubagrupidPuu .list-group-item:hover{background:var(--page) !important;}
#kaubagrupidPuu .list-group-item.node-selected,
#kaubagrupidPuu .list-group-item.active{
  background:var(--mist) !important;
  color:var(--ink) !important;
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--green);
}
#kaubagrupidPuu .badge{
  background:transparent !important;
  color:var(--faint) !important;
  font-weight:500;
}

/* ---------- toolbar: filter checkboxes + view switch ---------- */
/* One shared box for the checkboxes AND the Kuvamise viis switch, matching
   the sample's .toolbar -- both now sit inside the same #divSeaded element
   (see tellimine.html) instead of two separate Bootstrap columns. */
#divSeaded{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:14px 20px;
}
.kuvamise-viis{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  color:var(--faint);
  font-size:14px;
  margin-left:auto;
}
#divSeaded .form-check-label{
  font-size:15px;
  color:var(--muted);
}
#divSeaded .form-check-input{
  width:20px;height:20px;
  margin-top:0;
  border-radius:6px;
  border:1.5px solid #C5CFC8;
}
#divSeaded .form-check-input:checked{
  background-color:var(--green);
  border-color:var(--green);
}
#divSeaded .form-check-input:focus{
  box-shadow:0 0 0 3px rgba(139,196,106,.22);
}
#divSeaded .form-check-input:checked ~ .form-check-label{
  color:var(--ink);
  font-weight:600;
}

.btn-group{
  background:var(--page);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:3px;
}
.btn-group .btn{
  border:0 !important;
  border-radius:var(--radius-pill) !important;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  background:transparent;
  padding:8px 18px;
}
.btn-group .btn.btn-primary{
  background:var(--ink) !important;
  color:#fff !important;
}
.btn-group .btn.btn-secondary{
  background:transparent !important;
  color:var(--muted) !important;
}

/* accordion group header ("Kaubagrupid") */
.accordion-flush .accordion-button{
  font-family:"Bricolage Grotesque","Public Sans",Arial,sans-serif;
  font-size:24px;
  font-weight:700;
  color:var(--ink);
  background:transparent;
  padding:4px 4px 18px;
  box-shadow:none !important;
}
.accordion-flush .accordion-button:not(.collapsed){
  background:transparent;
  color:var(--ink);
}
.accordion-flush .accordion-item{border:0;background:transparent;}

/* ---------- product grid cards ---------- */

.item.col-xs-4,.item.col-lg-4{
  padding:6px !important;
}
.thumbnail.card,.thumbnailGrupp.card,.card.card-kaup{
  background:#fff;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:none !important;
  transition:border-color .15s ease;
  /* Clip children to the card's own rounded corners -- without this the
     square thumbnail image sits flush against the border's curve, so on
     hover the border turns green everywhere except the rounded corners,
     which stay gray (the image's square corner shows through). */
  overflow:hidden;
}
.thumbnail.card:hover,.card.card-kaup:hover{border-color:var(--leaf) !important;}
.caption.card-body{padding:12px !important;}
.imgKaubaPilt{

  border-radius:var(--radius-md);
  min-height:140px;
  color:#B4C2B7;
}
/* Product image is the only clickable/linking part of the card (2026-09-14)
   -- fill the thumbnail box and center the image exactly as the plain
   non-link markup did before, with no underline/link styling showing. */
.kaup-img-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-decoration:none;
}
.kaup-img-link:hover{opacity:.88;}
/* "Lisa"/"Muuda" sits next to the quantity stepper, not inside the same
   pill -- matches the sample's .row (stepper + .add as flex siblings). */
.kaup-add-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.kaup-add-row .input-group.keeptogether{
  flex:1 1 auto;
  min-width:0;
}
.kaup-add-row .btnLisaKaup{
  flex:none;
}
.kaup-card-title{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}
.grupp-card-title{font-size:17px;font-weight:700;}
.price{
  /* styles.css (the pre-existing legacy stylesheet) still sets
     float:left on the bare .price class -- that pulled it out of normal
     flow so it rendered on the same line as the qty stepper/add button
     instead of on its own row above them. Kill the float here so it wins
     the cascade. */
  float:none;
  display:block;
  font-size:19px;
  font-weight:700;
  color:var(--ink);
}
.discount{
  /* same legacy float:left as .price above -- clear it so a discount
     badge (when present) also gets its own row instead of crowding the
     price/qty line. */
  float:none;
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--leaf);
  border-radius:var(--radius-pill);
  padding:4px 10px;
}

/* quantity stepper + add-to-cart */
.input-group.keeptogether{
  border:1px solid var(--line) !important;
  border-radius:var(--radius-pill) !important;
  background:var(--page);
  padding:2px;
}
.quantity.buttons_added .minus,
.quantity.buttons_added .plus{
  color:var(--ink);
  font-size:18px;
  border-radius:var(--radius-pill) !important;
}
.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover{background:var(--mist) !important;}
.inputKogus{
  background:transparent;
  font-weight:700;
  color:var(--ink);
}
.btnLisaKaup,
.btn-success,
.btn-success:hover,
.btn-success:active,
.btn-success:visited{
  background-color:var(--green) !important;
  border-color:var(--green) !important;
  color:#fff !important;
  border-radius:var(--radius-pill) !important;
  font-weight:600;
  padding:10px 20px;
}
.btnLisaKaup:hover,
.btn-success:hover{
  background-color:var(--ink) !important;
  border-color:var(--ink) !important;
}

/* ---------- global buttons (checkout, modals, forms) ---------- */
/* styles.css carries older hardcoded !important button colors (white/black
   primary, purple success) from a previous design pass -- these overrides
   need matching specificity + !important to actually replace them */
.btn-primary,
.btn-primary:visited{
  background-color:var(--green) !important;
  border-color:var(--green) !important;
  color:#fff !important;
  border-radius:var(--radius-pill) !important;
  font-weight:600;
}
.btn-primary:hover,
.btn-primary:active{
  background-color:var(--ink) !important;
  border-color:var(--ink) !important;
  color:#fff !important;
}
.btn-secondary,
.btn-secondary:visited{
  background-color:#fff !important;
  color:var(--muted) !important;
  border-color:var(--line) !important;
  border-radius:var(--radius-pill) !important;
  font-weight:600;
}
.btn-secondary:hover,
.btn-secondary:active{
  background-color:var(--page) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
.form-control,.form-select{
  border-radius:var(--radius-sm);
  border-color:var(--line);
}
.form-control:focus,.form-select:focus{
  border-color:var(--leaf);
  box-shadow:0 0 0 3px rgba(139,196,106,.22);
}

/* ---------- account page (konto) & other angular-schema-form pages ---------- */
/* templates/default.html (used for "konto" and a few other pages since
   there's no konto.html -- see index.php's page-render fallback) builds
   its whole form client-side from a DB-driven JSON schema via
   angular-schema-form, so .btn-primary/.form-control here already picked
   up the generic site-wide rules above. The one piece that still looked
   like stock Bootstrap was the section heading, which the library always
   renders as a plain .alert.alert-primary -- re-skin just that, scoped to
   this controller so a real alert elsewhere on the site (if any) is
   unaffected. */
#DocHeaderCtrl .alert-primary{
  background:var(--page);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:"Bricolage Grotesque","Public Sans",Arial,sans-serif;
  font-weight:700;
  font-size:19px;
  border-radius:var(--radius-lg);
  padding:16px 22px;
  margin-bottom:22px;
}
#DocHeaderCtrl .control-label{
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}
#DocHeaderCtrl .form-group{
  margin-bottom:16px;
}

/* ---------- table view (DataTables) ---------- */
#divtableDT{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px;
  overflow-x:auto;
}
#tableDT{border-collapse:separate !important;border-spacing:0;}
#tableDT thead th{
  background:var(--page);
  color:var(--muted);
  font-weight:600;
  border-bottom:1px solid var(--line) !important;
  white-space:nowrap;
}
#tableDT tbody td{vertical-align:middle;}
#tableDT tbody tr:hover{background:var(--page);}
#tableDT a{font-weight:500;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--ink) !important;
  border-color:var(--ink) !important;
  color:#fff !important;
  border-radius:var(--radius-pill);
}
.dataTables_wrapper .dataTables_filter input{
  border-radius:var(--radius-pill);
  border:1px solid var(--line);
  padding:6px 14px;
}

/* quantity stepper inside the cart/table view isn't wrapped in
   .input-group.keeptogether (see ostukorv.html's fnDrawCallback), so give
   .quantity.buttons_added its own pill container to match the catalog cards */
.quantity.buttons_added{
  display:inline-flex;
  align-items:center;
  border-radius:var(--radius-pill);
  background:var(--page);
  padding:2px;
}
.quantity.buttons_added .qty{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  width:44px;
  text-align:center;
}

/* row-action icons in the cart table (edit note / remove line) -- these are
   plain <a class="kommentaar">/<a class="kustutaKaup"> with no other markup
   hooks, so target them by class and just recolor to match the theme */
#tableDT a.kommentaar,
#tableDT a.kustutaKaup{
  color:var(--faint);
  text-decoration:none;
  font-size:16px;
}
#tableDT a.kommentaar:hover{color:var(--green);}
#tableDT a.kustutaKaup:hover{color:#C0392B;}

/* ---------- cart totals / checkout steps ---------- */
.cart-sum{font-size:20px;font-weight:700;color:var(--ink);}
.step_conatiner{
  background:#fff;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  padding:20px;
}

/* ---------- modals ---------- */
.modal-content{border-radius:var(--radius-lg);border:0;}
.modal-header{border-bottom:1px solid var(--line);}
.modal-footer{border-top:1px solid var(--line);}

/* ---------- message / notice banner ---------- */
#card-message{
  background:var(--mist) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
}
.card-text-hoiatus{color:var(--ink);font-weight:600;}

/* ---------- footer ---------- */
footer{
  background:#fff;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  header.site-header-guest{padding:12px 16px !important;}
  .navbar-brand img{height:40px;}
}

/* ---------- discount badge ---------- */
/* Defensive fallback: tellimine_kaup.html now only renders this div when
   there's an actual discount, but hide it if it ever ends up empty
   (whitespace-only) so an unstyled/empty green pill can never show up. */
.discount:empty{display:none;}

/* ---------- product search page: full-width shell ---------- */
/* The product search/browse view (tellimine.html) sits inside base.html's
   <section class="container">, which caps width like every other page.
   The design sample's shell has no such cap -- it just pads the viewport
   edges. Scoping the breakout to this one wrapper class (added only in
   tellimine.html) means every other page, and this page's own DataTable-
   based table view, keep their current width untouched. */
.tellimine-fullwidth{
  width:100vw;
  position:relative;
  left:50%;
  margin-left:-50vw;
  padding-left:40px;
  padding-right:40px;
  box-sizing:border-box;
}
@media (max-width:600px){
  .tellimine-fullwidth{padding-left:16px;padding-right:16px;}
}

/* ---------- notify.js toast (add-to-cart / save confirmations) ---------- */
/* notify.js (js/notify.js) injects its own <style id="notify-bootstrap">
   at runtime -- after this stylesheet's own <link> has already been
   parsed -- so its rules would otherwise win the cascade purely by
   injection order. Match its specificity and add !important so this
   reskin (plain white/ink card, no 2011-era embossed icon backgrounds)
   wins regardless of load order. */
.notifyjs-bootstrap-base{
  font-weight:500 !important;
  font-family:"Public Sans","Helvetica Neue",Arial,sans-serif !important;
  padding:14px 20px !important;
  text-shadow:none !important;
  background-color:#fff !important;
  background-image:none !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:0 8px 24px rgba(15,61,46,.14) !important;
  white-space:normal !important;
  color:var(--ink) !important;
}
.notifyjs-bootstrap-success{
  background-image:none !important;
  border-color:var(--line) !important;
  border-left:4px solid var(--green) !important;
}
.notifyjs-bootstrap-error{
  background-image:none !important;
  border-color:var(--line) !important;
  border-left:4px solid #C0392B !important;
}
.notifyjs-bootstrap-info{
  background-image:none !important;
  border-color:var(--line) !important;
  border-left:4px solid var(--leaf) !important;
}
.notifyjs-bootstrap-warn{
  background-image:none !important;
  border-color:var(--line) !important;
  border-left:4px solid #C08A00 !important;
}

/* ---------- site footer (rehauled to match verdefresh.ee's dark footer band) ---------- */
/* Sticky footer: pin it to the bottom of the viewport on short pages
   (login, an empty cart, ...) instead of it floating up right under the
   content with page background showing below; on pages taller than the
   viewport it still lands after the content, at the true bottom of the
   document, same as before. Scoped to html/body/footer generally (not
   just footer.site-footer) so it applies across both page shells
   (base.html and base_logimata.html, which extend from the same footer
   markup) without duplicating this in each template's own <style> block. */
html, body{
  height:100%;
}
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
footer.site-footer{
  background:var(--ink);
  margin-top:auto;
  /* full page width, edge-to-edge -- overrides the <footer class="container">
     wrapper's own Bootstrap max-width/centering/gutters */
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  padding:10px 24px;
  box-sizing:border-box;
}
.site-footer__in{
  max-width:1300px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  text-align:center;
}
.site-footer__logo{
  /* smaller, single-line-height logo for a snugger, shorter bar */
  height:20px;
  width:auto;
  /* our logo asset is full-colour (green leaf + dark wordmark); production's
     footer uses a plain white version -- brightness(0) invert(1) turns any
     opaque artwork into a flat white silhouette, matching that look without
     needing a second logo file. */
  filter:brightness(0) invert(1);
  opacity:.95;
}
.site-footer__meta{
  /* one line: address / phone / email / hours, each a direct child span
     separated by a thin divider rather than stacked on their own lines */
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  row-gap:2px;
  font-size:12px;
  line-height:1.4;
  color:rgba(255,255,255,.7);
}
.site-footer__meta>*{
  white-space:nowrap;
}
.site-footer__meta>*:not(:first-child){
  margin-left:10px;
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.25);
}
.site-footer__meta a{
  color:#fff;
  text-decoration:none;
}
.site-footer__meta a:hover{
  color:var(--leaf);
}
.site-footer__weekend{
  /* Verde Fresh doesn't deliver weekends yet -- hidden rather than removed
     so this can go live again with a single CSS flip once Saturday/Sunday
     hours are actually in service, no markup or translation work needed. */
  display:none;
}
@media (min-width:768px){
  .site-footer__in{justify-content:flex-start;text-align:left;}
}

/* ---------- product LIST view ("Nimekiri" / .item.list-group-item) ---------- */
/* The legacy .item.list-group-item rules in styles.css stretch the item to
   full width and float the thumbnail left, but the card itself
   (.thumbnail.card.card-kaup) is a Bootstrap .card, which forces
   flex-direction:column -- so the image stayed stacked above the caption
   instead of sitting beside it, and the caption's own title/price/qty/button
   stayed stacked under each other too (same "row" markup as the grid card,
   just widened). The net effect the design sample and the "Tabel" (grid)
   view do not have: a full-width row containing a tall, still-vertical
   mini-card -- squeezed to the left of all that new width, oversized boxes,
   and nothing lined up between one row and the next.

   Rebuilt below as an actual table-like row: thumbnail | name | price |
   qty+unit+button, each a fixed-width column (name flexes to fill the
   remaining space) so the same field lines up at the same x position on
   every row. Uses `display:contents` on the leftover Bootstrap .row/.col-*
   wrapper from the grid-card markup so its children (price/discount/add-row)
   become direct flex children of the row alongside the image and title,
   without needing to touch the Twig template. Scoped under #kaubad and
   layered after the grid-card rules above so it only ever applies once
   SetDisplayMode() has added .list-group-item -- the grid card is untouched. */
#kaubad .item.list-group-item{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  padding:0 !important;
  margin-bottom:0 !important;
}
#kaubad .item.list-group-item .thumbnail.card-kaup{
  /* display:flex !important is required here, not just flex-direction:row:
     legacy styles.css has `.item.list-group-item .thumbnail{display:
     inline-block}` (found 2026-09-14) which -- despite this selector's
     higher specificity -- still wins the cascade for the `display`
     property specifically, since none of the rules below it ever
     redeclared `display`. With the container stuck at inline-block,
     `gap:16px` silently did nothing (gap only applies to flex/grid
     containers), so the image and title sat flush against each other
     with no space between them at all. */
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:flex-start !important;
  gap:16px;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  padding:10px 4px;
  overflow:visible;
}
#kaubad .item.list-group-item:last-child .thumbnail.card-kaup{
  border-bottom:0 !important;
}
#kaubad .item.list-group-item .img-event.imgKaubaPilt{
  flex:0 0 60px !important;
  width:60px !important;
  height:60px !important;
  min-height:0 !important;
  max-width:60px !important;
  max-height:60px !important;
  padding:0 !important;
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
#kaubad .item.list-group-item .img-event.imgKaubaPilt img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto;
  height:auto;
  padding:0 !important;
  margin:0 !important;
}
#kaubad .item.list-group-item .caption.card-body{
  display:flex !important;
  align-items:center !important;
  gap:16px;
  flex:1 1 auto;
  min-width:0;
  padding:0 !important;
}
/* leftover grid-card wrapper divs around price/discount/add-row -- see
   comment above */
#kaubad .item.list-group-item .caption.card-body>.row,
#kaubad .item.list-group-item .caption.card-body>.row>.col-xs-12{
  display:contents;
}
#kaubad .item.list-group-item .list-group-item-text{
  /* extra product blurb (Lisainfo) -- dropped in list view to keep every
     row the same compact height; still shown in the grid/card view. */
  display:none;
}
#kaubad .item.list-group-item .kaup-card-title{
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#kaubad .item.list-group-item .price{
  flex:0 0 90px;
  text-align:right;
  font-size:16px;
  margin:0;
}
#kaubad .item.list-group-item .discount{
  flex:0 0 auto;
}
#kaubad .item.list-group-item .kaup-add-row{
  /* Fixed-width grid rather than flex: some products have only one unit
     and render Ühik as plain text instead of a <select>, which made the
     stepper cell narrower and let the qty-grow flex track drag the Lisa
     button along with it -- so the button landed at a different x on
     almost every other row. Grid columns don't resize with their content,
     so the stepper and the button now sit at the same x on every row
     regardless of whether that row has a unit dropdown. */
  display:grid;
  grid-template-columns:170px 90px;
  align-items:center;
  gap:10px;
  flex:0 0 290px;
  width:290px;
}
#kaubad .item.list-group-item .kaup-add-row .input-group.keeptogether{
  width:100%;
}
#kaubad .item.list-group-item .kaup-add-row .btnLisaKaup{
  width:100%;
  text-align:center;
}
@media (max-width:700px){
  /* not enough width for a lined-up table row -- fall back to a compact
     stacked row instead of squeezing every column down. */
  #kaubad .item.list-group-item .caption.card-body{
    flex-wrap:wrap;
  }
  #kaubad .item.list-group-item .kaup-card-title{
    flex:1 1 100%;
    white-space:normal;
  }
  #kaubad .item.list-group-item .price{
    flex:1 1 auto;
    text-align:left;
  }
  #kaubad .item.list-group-item .kaup-add-row{
    flex:1 1 100%;
    width:auto;
  }
}