/**
Theme Name: Last Minute 1.0
Author: Zologic
Author URI: https://zologic.nl/
Description: Child theme for LastMinute.BA marketplace. Extends Astra with marketplace page shells, mobile navigation, and visual overrides for the lastminute-auctions plugin.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: last-minute-1-0
Template: astra
*/

/*
 * LastMinute page composition. Marketplace data and interaction remain in the
 * plugin; this child theme owns only the page shell and presentation.
 */

/* Neutralize Astra's content container on marketplace pages.
   Horizontal rhythm is owned entirely by .lm-marketplace (20px padding-inline).
   Without this, Astra's .ast-container padding stacks on top of our own,
   creating the double-container / too-narrow effect on mobile. */
body.lm-app-page .ast-container {
  padding-inline: 0; /* always: prevent double horizontal indent */
}

/* Remove the max-width cap on archive / account pages where the plugin
   owns the full layout. Excluded: single offer pages (Astra Container Width
   controls them) and the homepage (we use the full-bleed hero technique there,
   restoring Astra's Container Width so Customizer can control the homepage column). */
body.lm-app-page:not(.single-lma_offer):not(.home) .ast-container {
  max-width: none;
}

body.lm-app-page #primary.content-area,
body.lm-app-page #primary.primary {
  width: 100%;
  padding: 0;
  flex: 1;
}

body.lm-app-page #main.site-main,
body.lm-app-page .ast-article-inner-wrap,
body.lm-app-page .entry-content {
  padding: 0;
  margin: 0;
}
/*
 * Child-theme design token system
 * ─────────────────────────────────────────────────────────────────────────────
 * Tokens flow in from two sources:
 *   1. Astra Customizer → Container Width (controls single-offer desktop width
 *      via .ast-container; no CSS var needed — Astra handles it natively).
 *   2. Child-theme Customizer panel (wp_head priority 99, after all <link> tags)
 *      → injects --lm-accent/promo/category and the four size tokens below.
 *
 * Defaults here are the fallback when Customizer has never been saved.
 * The inline <style> at priority 99 always wins in the cascade, so whatever
 * the user set in Customizer overrides these automatically.
 *
 * Plugin token bridge: body.lm-app-page re-declares plugin-specific token
 * names (--lm-primary, --lm-card-accent, etc.) as aliases of the child-theme
 * tokens, making auctions.css respond to Customizer without touching plugin code.
 */
:root {
  /* ── Colour tokens (Customizer: "LastMinute marketplace" panel) ── */
  --lm-accent:   #596cf2;
  --lm-promo:    #ffbf29;
  --lm-category: #596cf2;

  /* ── Size tokens (Customizer: "LastMinute marketplace" panel) ────── */
  --lm-radius-card:     12px;  /* card border-radius              */
  --lm-radius-button:   9px;   /* button / CTA border-radius      */
  --lm-grid-gap:        16px;  /* gap between auction cards       */
  --lm-spacing-section: 24px;  /* offer-page section padding-block */

  /* ── Semantic surface tokens (not in Customizer — change in CSS) ── */
  --lm-ink:     #14284b;
  --lm-muted:   #61728d;
  --lm-surface: #ffffff;
  --lm-canvas:  #f3f6fb;
  --lm-line:    #dfe6f1;
  --lm-shadow:  0 18px 42px rgba(30, 52, 86, .09);
}

body.lm-app-page {
  background: var(--lm-canvas);
  color: var(--lm-ink);
}

/*
 * Plugin token bridge
 * auctions.css declares its own names on :root. Because body.lm-app-page
 * has higher specificity than :root, these re-declarations win for all
 * descendants — making plugin UI respond to Customizer without touching
 * plugin files. The var() references resolve to the Customizer-injected
 * values (inline <style> at priority 99 wins in document order over <link>).
 */
body.lm-app-page {
  --lm-primary:       var(--lm-accent);
  --lm-card-accent:   var(--lm-accent);
  --lm-primary-hover: var(--lm-accent); /* plugin hover shade — accept same hue */
  --lm-text:          var(--lm-ink);
  --lm-text-soft:     var(--lm-muted);
}

body.lm-app-page .lm-app {
  min-height: calc(100vh - 220px);
  width: 100%;
  padding: clamp(28px, 4vw, 64px) 0 clamp(42px, 6vw, 84px);
}

body.lm-app-page .lm-template .lm-marketplace {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding-right: 20px;
  padding-left: 20px;
}

/* ── Homepage layout ──────────────────────────────────────────────────────────
 *
 * Strategy: let Astra's Container Width control the homepage column (just like
 * single offer pages). The hero section bleeds to viewport width via the
 * calc(50% - 50vw) technique — a no-op when the container is already full-width,
 * and safe on any container width. Offer / category sections sit inside the
 * Astra container naturally.
 *
 * Two Customizer tokens add extra control:
 *   --lm-home-content-width  → max-width of the hero's inner content column
 *   --lm-carousel-card-width → override plugin's fixed 238px carousel card width
 */

/* Strip wrapper padding; prevent any horizontal scroll from the hero bleed. */
body.lm-app-page .lm-template--home {
  padding: 0;
}
body.home.lm-app-page {
  overflow-x: hidden;
}

/* Hero: bleed to full viewport width regardless of Astra container width.
   The gradient background fills edge-to-edge; the inner .lm-marketplace column
   is capped by --lm-home-content-width (default 1240px, set via Customizer). */
body.lm-app-page .lm-template--home .lm-home-hero {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

/* Hero inner content column — controlled by Customizer "Širina sadržaja naslovnice". */
body.lm-app-page .lm-template--home .lm-home-hero .lm-marketplace {
  max-width: var(--lm-home-content-width, 1240px);
  margin-inline: auto;
  padding-inline: 0;
}

/* Non-hero marketplace sections (offer grid, categories, how-it-works).
   No max-width override here — Astra Container Width from Customizer controls the
   column; padding-inline: 0 prevents double-indent with our ast-container rule above. */
body.lm-app-page .lm-template--home .lm-marketplace {
  width: 100%;
  padding-inline: 0;
}

/* Section spacing: tighten the gap after the hero.
   Plugin gives .lm-home-section a 54px margin-top; this brings
   it down to a rhythm that matches a marketplace scan-page feel. */
body.lm-app-page .lm-template--home .lm-home-section,
body.lm-app-page .lm-template--home .lm-home-categories,
body.lm-app-page .lm-template--home .lm-how-it-works {
  margin-top: clamp(28px, 3.5vw, 48px);
}

/* Carousel card width — overrides plugin's hardcoded 238px value.
   Responds to Customizer "Širina kartice (karusel)" token.
   Mobile breakpoints restore plugin's viewport-relative sizes. */
body.lm-app-page .lm-auction-carousel__track {
  grid-auto-columns: var(--lm-carousel-card-width, 238px);
  gap: var(--lm-grid-gap, 12px);
}
@media (max-width: 767px) {
  body.lm-app-page .lm-auction-carousel__track {
    grid-auto-columns: 72vw;
  }
}
@media (max-width: 479px) {
  body.lm-app-page .lm-auction-carousel__track {
    grid-auto-columns: 78vw;
  }
}

/* Archive has its own editorial header, filter rail and compact offer grid. */
body.lm-app-page .lm-template--archive .lm-offer-archive {
  display: block;
}

body.lm-app-page .lm-template--archive .lm-archive-header {
  max-width: none;
  margin: 0 0 24px;
}

body.lm-app-page .lm-template--archive .lm-archive-header h1 {
  font-size: clamp(30px, 3.2vw, 42px);
  letter-spacing: -.035em;
}

body.lm-app-page .lm-template--archive .lm-archive-layout {
  display: grid; /* explicit; not inherited from plugin CSS */
  grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

body.lm-app-page .lm-template--archive .lm-archive-filters {
  border-color: var(--lm-line);
  box-shadow: 0 10px 26px rgba(32, 52, 86, .05);
}

/* Sticky only on desktop — below 768px auctions.css takes over with position:fixed */
@media (min-width: 768px) {
  body.lm-app-page .lm-template--archive .lm-archive-filters {
    position: sticky;
    top: 28px;
  }
}

body.lm-app-page .lm-template--archive .lm-archive-controls {
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px;
  padding: 10px 12px;
  border: 1px solid var(--lm-line);
  border-radius: 14px;
  background: var(--lm-surface);
}

body.lm-app-page .lm-template--archive .lm-offer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lm-grid-gap);
}

/* .lm-offer-card component rules live in System B (lines 626+) which overrides these.
   Kept: layout-level rules above; removed: per-component duplicates. */

body.lm-app-page .lm-template--archive .lm-archive-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.lm-app-page .lm-template--archive .lm-archive-count {
  margin: 0;
  color: var(--lm-muted);
  font-size: 14px;
  font-weight: 700;
}

/* Offer detail uses a calm reading column with a clearly separated bid rail. */
body.lm-app-page .lm-template--offer .lm-single-offer {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: clamp(24px, 4vw, 48px);
}

body.lm-app-page .lm-template--offer .lm-offer-sidebar {
  top: 24px;
}

body.lm-app-page .lm-template--offer .lm-offer-hero__media img,
body.lm-app-page .lm-template--offer .lm-offer-hero__placeholder {
  border-radius: 24px;
}

body.lm-app-page .lm-template--offer .lm-offer-details {
  max-width: 820px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section {
  margin: 0;
  padding: var(--lm-spacing-section) 0;
  border-top: 1px solid var(--lm-line);
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section:first-child {
  padding-top: 0;
  border-top: 0;
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section h2 {
  margin: 0 0 12px;
  color: var(--lm-ink);
  font-size: 22px;
  line-height: 1.2;
}

body.lm-app-page .lm-template--offer .lm-editorial-content,
body.lm-app-page .lm-template--offer .lm-offer-detail-section li,
body.lm-app-page .lm-template--offer .lm-offer-accordion p {
  max-width: 760px;
  color: #32445f;
  font-size: 16px;
  line-height: 1.65;
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section ul,
body.lm-app-page .lm-template--offer .lm-offer-accordion ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section:not(.lm-offer-costs):not(.lm-offer-itinerary) li {
  position: relative;
  padding-left: 26px;
}

/* Itinerary <li> elements wrap <details> accordions — no bullet indent needed */
body.lm-app-page .lm-template--offer .lm-offer-itinerary__days li {
  position: static;
  padding-left: 0;
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section--included li::before {
  position: absolute;
  left: 0;
  color: #168554;
  content: '✓';
  font-weight: 800;
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section--expectations li::before,
body.lm-app-page .lm-template--offer .lm-offer-detail-section--good_to_know li::before {
  position: absolute;
  left: 4px;
  color: var(--lm-accent, #596cf2);
  content: '•';
  font-size: 20px;
  line-height: 1;
}

body.lm-app-page .lm-template--offer .lm-offer-costs {
  padding: 22px;
  border: 1px solid #dce5f0;
  border-radius: 16px;
  background: #fff;
}

body.lm-app-page .lm-template--offer .lm-offer-costs li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid #edf0f4;
}

body.lm-app-page .lm-template--offer .lm-offer-costs li:first-child { border-top: 0; }
body.lm-app-page .lm-template--offer .lm-offer-costs strong { color: var(--lm-ink); white-space: nowrap; }
body.lm-app-page .lm-template--offer .lm-offer-auction-fee { display: grid; gap: 4px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #dfe6f1; }
body.lm-app-page .lm-template--offer .lm-offer-auction-fee small { color: var(--lm-muted); font-size: 13px; }

body.lm-app-page .lm-template--offer .lm-offer-accordion {
  border-top: 1px solid var(--lm-line);
}

body.lm-app-page .lm-template--offer .lm-offer-accordion h2 { margin: 0; }
body.lm-app-page .lm-template--offer .lm-offer-accordion button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 62px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lm-ink);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 750;
}

body.lm-app-page .lm-template--offer .lm-offer-accordion button::after { color: var(--lm-accent, #596cf2); content: '⌄'; font-size: 22px; }
body.lm-app-page .lm-template--offer .lm-offer-accordion button[aria-expanded="true"]::after { transform: rotate(180deg); }
body.lm-app-page .lm-template--offer .lm-offer-accordion button:focus-visible { outline: 3px solid rgba(89, 108, 242, .5); outline-offset: -3px; }
body.lm-app-page .lm-template--offer .lm-offer-accordion > div { margin: 0 0 22px; }

/* Offer detail sections — rhythm driven by Customizer section_spacing token */
body.lm-app-page .lm-template--offer .lm-offer-detail-section {
  padding-block: var(--lm-spacing-section);
}

body.lm-app-page .lm-template--offer .lm-offer-detail-section h2 {
  margin-bottom: 10px;
  font-size: 20px;
}

/* Itinerary: compact inline summary row.
   Plugin pushes title to far right via margin-left:auto on span — override with
   a 3-column grid so day | title | date stays readable at any width. */
body.lm-app-page .lm-template--offer .lm-offer-itinerary__days summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}

body.lm-app-page .lm-template--offer .lm-offer-itinerary__days summary strong {
  color: var(--lm-accent, #596cf2);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

body.lm-app-page .lm-template--offer .lm-offer-itinerary__days summary span {
  margin-left: 0;      /* cancel plugin's margin-left:auto */
  overflow: hidden;
  color: #17233c;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.lm-app-page .lm-template--offer .lm-offer-itinerary__days summary time {
  color: #64718a;
  font-size: 12px;
  white-space: nowrap;
}

body.lm-app-page .lm-template--offer .lm-offer-itinerary__days {
  gap: 5px;
}

body.lm-app-page .lm-template--offer .lm-offer-itinerary__period {
  margin-bottom: 10px;
  font-size: 14px;
}

body.lm-app-page .lm-template--offer .lm-offer-itinerary__days details > div {
  padding: 8px 14px 12px;
  font-size: 14px;
  line-height: 1.55;
}

/* The three application pages use intentional, distinct surface treatments. */
body.lm-app-page .lm-template--account .lm-marketplace {
  padding: clamp(22px, 4vw, 42px);
  border-radius: 24px;
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow);
}

body.lm-app-page .lm-template--checkout .lm-checkout {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
}

body.lm-app-page .lm-template--checkout .lm-checkout-card {
  border: 0;
  border-radius: 24px;
  box-shadow: var(--lm-shadow);
}

body.lm-app-page .lm-template--support .lm-support {
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto;
}

body.lm-app-page .lm-template--support .lm-archive-header {
  max-width: 650px;
  margin-bottom: 28px;
}

body.lm-app-page .lm-template--support .lm-support-card,
body.lm-app-page .lm-template--support .lm-support-thread {
  border: 0;
  box-shadow: var(--lm-shadow);
}

body.lm-app-page .lm-template--profile .lm-app__page {
  width: min(680px, calc(100% - 40px));
  margin: 0 auto;
}

body.lm-app-page .lm-app__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
  color: var(--lm-muted);
  font-size: 13px;
}

body.lm-app-page .lm-app__breadcrumb a {
  color: var(--lm-accent, #596cf2);
  font-weight: 700;
  text-decoration: none;
}

body.lm-app-page .lm-app__header {
  margin-bottom: 24px;
}

body.lm-app-page .lm-app__header h1 {
  margin: 0;
  color: var(--lm-ink);
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -.04em;
}

body.lm-app-page .lm-app__header > p:last-child {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--lm-muted);
}

body.lm-app-page .lm-app__content--profile .lma-profile-card {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--lm-shadow);
}
body.lm-app-page .lm-template--voucher .lm-app__route { width:min(680px,calc(100% - 40px));margin:0 auto; }
body.lm-app-page .lm-voucher__card { max-width:none; }
body.lm-app-page .lm-voucher__code { display:block;margin:8px 0 18px;padding:16px;border-radius:12px;background:#f3f6fb;color:var(--lm-ink);font-size:clamp(22px,4vw,32px);letter-spacing:.08em;overflow-wrap:anywhere; }

body.lm-app-page .lma-primary,
body.lm-app-page .lm-offer-card__footer .lma-primary {
  border-radius: var(--lm-radius-button);
  box-shadow: none;
}

body.lm-app-page .lma-primary:focus-visible,
body.lm-app-page .lm-offer-card a:focus-visible,
body.lm-app-page .lm-archive-controls a:focus-visible {
  outline: 3px solid rgba(89, 108, 242, .45);
  outline-offset: 3px;
}

/* Offer single view collapses bid rail at 900px (wide enough for filter sheet not to apply). */
@media (max-width: 900px) {
  body.lm-app-page .lm-template--offer .lm-single-offer {
    grid-template-columns: 1fr;
  }

  body.lm-app-page .lm-template--offer .lm-offer-details {
    padding: 28px;
  }
}

/* Single offer page: full-bleed on mobile.
   .lm-marketplace's 20px padding-inline is correct on desktop but on mobile the offer
   hero image should bleed to the viewport edges. Internal components own their own spacing. */
@media (max-width: 767px) {
  body.lm-app-page .lm-template--offer .lm-marketplace {
    padding-inline: 0;
  }

  body.lm-app-page .lm-template--offer .lm-offer-hero__summary,
  body.lm-app-page .lm-template--offer .lm-offer-breadcrumb,
  body.lm-app-page .lm-template--offer .lm-offer-sidebar,
  body.lm-app-page .lm-template--offer .lm-offer-details,
  body.lm-app-page .lm-template--offer .lm-offer-gallery,
  body.lm-app-page .lm-template--offer .lm-offer-costs {
    padding-inline: 16px;
  }
}

/* Archive layout collapses at 767px to align with the mobile filter sheet breakpoint.
   Below this point auctions.css takes over with display:block and the bottom sheet. */
@media (max-width: 767px) {
  body.lm-app-page .lm-template--archive .lm-archive-layout {
    display: block;
  }

  body.lm-app-page .lm-template--archive .lm-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Full-width sections: all .lm-marketplace containers go edge-to-edge.
     16px safe inset replaces the plugin's 20px-per-side calc() shrink.
     Offer page is exempt — it handles its own per-section inset (see below).
     Home template is exempt — its own max-width calc() already provides the
     16px safe-inset via min(1280px, 100% - 32px). */
  body.lm-app-page .lm-template:not(.lm-template--offer):not(.lm-template--home) .lm-marketplace {
    width: 100%;
    padding-inline: 16px;
  }

  /* Narrow-column pages: remove the horizontal margin so the card surface
     fills the viewport; internal padding keeps content off the edge. */
  body.lm-app-page .lm-template--checkout .lm-checkout,
  body.lm-app-page .lm-template--support .lm-support,
  body.lm-app-page .lm-template--profile .lm-app__page {
    width: 100%;
    padding-inline: 0;
  }

  /* Account page card: reduce internal padding on small screens */
  body.lm-app-page .lm-template--account .lm-marketplace {
    padding: 20px 16px;
    border-radius: 0;
  }
}

@media (max-width: 620px) {
  body.lm-app-page .lm-template {
    padding: 24px 0 46px;
  }

  /* At 620px and below, marketplaces already have width:100% from the 767px rule.
     The 28px margin pattern from earlier versions is intentionally removed here. */

  body.lm-app-page .lm-template--archive .lm-offer-grid {
    grid-template-columns: 1fr;
  }

  body.lm-app-page .lm-template--archive .lm-archive-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }

  body.lm-app-page .lm-template--archive .lm-archive-toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  body.lm-app-page .lm-template--archive .lm-archive-controls label {
    width: 100%;
    justify-content: space-between;
  }

  body.lm-app-page .lm-template--offer .lm-offer-details,
  body.lm-app-page .lm-template--account .lm-marketplace,
  body.lm-app-page .lm-template--checkout .lm-checkout-card {
    padding: 20px;
    border-radius: 16px;
  }

  /* Keep the offer gallery within the mobile page frame: 100vw caused a
   * horizontal scrollbar whenever the browser reserved a vertical scrollbar. */
  body.lm-app-page .lm-template--offer .lm-offer-hero__media {
    width: 100%;
    margin-inline: 0;
    border-radius: 16px;
  }

  body.lm-app-page .lm-template--offer .lm-offer-hero__media img,
  body.lm-app-page .lm-template--offer .lm-offer-hero__placeholder {
    border-radius: 16px;
  }
}

@media (min-width: 1200px) {
  body.lm-app-page .lm-template--archive .lm-archive-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
  }

  /* Stay at 3 columns through the 1200-1440px range.
     Vakantieveilingen reference uses 3 cols; at this width 4 would be cramped
     with a 200px sidebar already reducing the grid area. */
  body.lm-app-page .lm-template--archive .lm-offer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lm-grid-gap);
  }
}

/* Very wide screens: switch to 4 columns once there's enough room */
@media (min-width: 1440px) {
  body.lm-app-page .lm-template--archive .lm-offer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Fixed mobile navigation is deliberately separate from Astra's desktop menu. */
.lm-mobile-nav {
	display: none;
}

@media (max-width: 768px) {
	body.lm-app-page.lm-mobile-nav-active {
		padding-bottom: 78px;
	}

	.lm-mobile-nav {
		position: fixed;
		z-index: 9998;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		min-height: 68px;
		padding: 7px max(12px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		border-top: 1px solid var(--lm-line);
		background: rgba(255, 255, 255, .98);
		box-shadow: 0 -8px 24px rgba(24, 40, 75, .10);
	}

	.lm-mobile-nav a {
		display: grid;
		min-width: 0;
		place-items: center;
		gap: 3px;
		padding: 3px 1px;
		color: #75839a;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
	}

	.lm-mobile-nav i {
		font-size: 16px;
	}

	.lm-mobile-nav a.is-active {
		color: var(--lm-accent, #596cf2);
	}

	.lm-mobile-nav a:focus-visible {
		outline: 3px solid rgba(89, 108, 242, .45);
		outline-offset: -2px;
	}
}

@media (prefers-reduced-motion: reduce) {
  body.lm-app-page .lm-template--archive .lm-offer-card {
    transition: none;
  }
}

/* Marketplace reference system: scoped to LastMinute application screens. */
body.lm-app-page .lm-app {
  --lm-reference-text: #263643;
  --lm-reference-primary: var(--lm-accent, #556cf1);
  --lm-reference-border: #ebeae7;
  --lm-reference-muted: #71808a;
  font-family: Nunito, "Work Sans", sans-serif;
  color: var(--lm-reference-text);
}

body.lm-app-page .lm-app h1,
body.lm-app-page .lm-app h2,
body.lm-app-page .lm-app h3,
body.lm-app-page .lm-app .lm-offer-card h2 {
  font-family: inherit;
  font-weight: 800;
}

body.lm-app-page .lm-app .lm-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

body.lm-app-page .lm-template--archive .lm-archive-header h1 {
  font-size: clamp(30px, 3vw, 38px);
  letter-spacing: -.03em;
}

body.lm-app-page .lm-template--archive .lm-offer-grid {
  gap: var(--lm-grid-gap);
}

body.lm-app-page .lm-template--archive .lm-offer-card {
  border: 1px solid var(--lm-reference-border);
  border-radius: var(--lm-radius-card);
  box-shadow: 0 3px 10px rgba(38, 54, 67, .08);
}

body.lm-app-page .lm-template--archive .lm-offer-card__image,
body.lm-app-page .lm-template--archive .lm-offer-card__image img,
body.lm-app-page .lm-template--archive .lm-offer-card__placeholder {
  aspect-ratio: 16 / 9;
}

body.lm-app-page .lm-template--archive .lm-offer-card__placeholder {
  min-height: 0;
  font-size: 13px;
}

body.lm-app-page .lm-template--archive .lm-offer-card__body {
  gap: 10px;
  padding: 14px 16px 16px;
}

body.lm-app-page .lm-template--archive .lm-offer-card h2 {
  min-height: 43px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.012em;
}

body.lm-app-page .lm-template--archive .lm-offer-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: end;
}

body.lm-app-page .lm-template--archive .lm-offer-card__price strong {
  font-size: 22px;
  line-height: 1.05;
}

body.lm-app-page .lm-template--archive .lm-offer-card__timer {
  grid-column: 2;
  grid-row: 1;
  color: var(--lm-reference-text);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.lm-app-page .lm-template--archive .lm-offer-card__timer.is-active,
body.lm-app-page .lm-template--archive .lm-offer-card__timer.is-scheduled {
  color: var(--lm-reference-primary);
}

body.lm-app-page .lm-template--archive .lm-offer-card__footer .lma-primary {
  grid-column: 1 / -1;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--lm-radius-button);
  background: var(--lm-reference-primary);
  font-size: 13px;
}

body.lm-app-page .lm-template--archive .lm-offer-card__details-link {
  background: #f1f3f6;
  color: var(--lm-reference-text);
}

body.lm-app-page .lm-template--offer .lm-offer-hero h1 {
  max-width: 760px;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -.035em;
}

body.lm-app-page .lm-template--offer .lm-bid-panel {
  max-width: 360px;
}

body.lm-app-page .lm-template--offer .lm-bid-panel .lma-auction-card {
  border: 1px solid var(--lm-reference-border);
  border-radius: calc(var(--lm-radius-card) + 4px);
  box-shadow: 0 5px 18px rgba(38, 54, 67, .10);
}

body.lm-app-page .lm-template--offer .lm-bid-panel .lma-close {
  margin-bottom: 12px;
}

body.lm-app-page .lm-template--offer .lm-bid-panel .lma-timer-ring:not(.is-urgent) strong {
  font-size: 30px;
}

body.lm-app-page .lm-template--offer .lm-bid-panel .lma-stats strong,
body.lm-app-page .lm-template--offer .lm-bid-panel .lma-provider-price {
  font-size: 17px;
}

body.lm-app-page .lm-template--offer .lm-offer-details h2 {
  font-size: 21px;
}

body.lm-app-page .lm-template--offer .lm-offer-accordion button {
  min-height: 56px;
  font-size: 16px;
}

@media (max-width: 900px) {
  body.lm-app-page .lm-template--offer .lm-bid-panel {
    max-width: none;
  }
  body.lm-app-page .lm-template--archive .lm-archive-filters {
    position: static;
  }
}

@media (max-width: 620px) {
  body.lm-app-page .lm-template--archive .lm-offer-card h2 {
    min-height: 0;
  }

  body.lm-app-page .lm-template--archive .lm-offer-card__footer .lma-primary {
    min-height: 42px;
  }
}

/* ==========================================================
   lm-auction-card — vakantieveilingen-inspired design
   Reference: vakantieveilingen.nl visual system

   Two scopes:
     • Global (.lm-app-page) — shared overrides that apply to
       ALL auction cards: price colour, label hiding, hover lift.
       Carousel cards stay compact from plugin CSS defaults.
     • Archive-grid scope (.lm-offer-archive) — deeper restyle
       for the desktop 3-col grid: taller image, no features or
       CTA button, bigger type. Carousel is NOT caught here.

   No PHP changes required — pure CSS overrides.
   ========================================================== */

/* ── Global: carousel + archive cards ───────────────────── */

/* Category badge: lift it out of the card body and pin it over
   the image. The card has position:relative in plugin CSS, so
   top/left position relative to the card, landing in the image. */
body.lm-app-page .lm-auction-card__category {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  margin: 0;
  padding: 3px 8px 4px;
  border-radius: 5px;
  background: var(--lm-accent, #556cf1);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Icon adds visual noise at badge scale */
body.lm-app-page .lm-auction-card__category i {
  display: none;
}

/* Price: accent-colored — primary bid signal */
body.lm-app-page .lm-auction-card__price {
  font-size: 18px;
  line-height: 1.1;
  color: var(--lm-accent, #556cf1);
}

body.lm-app-page .lm-auction-card__price .currency {
  font-size: 12px;
}

/* "Trenutna ponuda / Završava" labels: redundant at card scale */
body.lm-app-page .lm-auction-card__fact-label {
  display: none;
}

/* Timer: muted — the countdown is context, not the hero value */
body.lm-app-page .lm-auction-card__timer {
  color: #64718a;
  font-size: 12px;
  font-weight: 700;
}

/* Tighten facts row now that labels are gone */
body.lm-app-page .lm-auction-card__facts {
  gap: 4px;
  margin-bottom: 6px;
}

/* CTA: keep for carousel but reduce visual weight */
body.lm-app-page .lm-auction-card__cta {
  min-height: 36px;
  border-radius: var(--lm-radius-button);
  font-size: 11.5px;
}

/* Hover lift: slightly deeper than plugin default */
@media (hover: hover) {
  body.lm-app-page .lm-auction-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(38, 54, 67, .06),
                0 14px 28px rgba(38, 54, 67, .13);
  }
}

/* ── Archive grid: full VV restyle ──────────────────────── */

/* Taller image: 4:3 fills the wider grid card well. Carousel
   keeps the plugin's 1.55:1 ratio. */
body.lm-app-page .lm-offer-archive .lm-auction-card__media {
  aspect-ratio: 4 / 3;
}

/* Category badge: archive sidebar already handles filtering;
   badge on card adds clutter in 3-col grid. */
body.lm-app-page .lm-offer-archive .lm-auction-card__category {
  display: none;
}

/* Feature icons: too small to read at grid scale; strip for
   the clean card face VV uses. */
body.lm-app-page .lm-offer-archive .lm-auction-card .lm-offer-features {
  display: none;
}

/* CTA button: the image anchor already links to the offer page.
   Removing the button keeps cards scan-friendly like VV. */
body.lm-app-page .lm-offer-archive .lm-auction-card__actions {
  display: none;
}

/* Title: slightly larger — 3-col cards are ~2× wider than
   carousel cards so 13px reads too small in context. */
body.lm-app-page .lm-offer-archive .lm-auction-card__title {
  font-size: 14.5px;
  min-height: 42px;
  max-height: 42px;
}

/* Body padding: more room for 3-col grid proportions */
body.lm-app-page .lm-offer-archive .lm-auction-card__body {
  padding: 13px 14px 14px;
}

/* Price in archive grid: larger — more breathing room than carousel */
body.lm-app-page .lm-offer-archive .lm-auction-card__price {
  font-size: 20px;
}

/* Timer: scaled up to balance the larger price */
body.lm-app-page .lm-offer-archive .lm-auction-card__timer {
  font-size: 14px;
}

/* Auction section: features gone, so no need for margin-top:auto push */
body.lm-app-page .lm-offer-archive .lm-auction-card__auction {
  margin-top: 0;
  padding-top: 10px;
}