/* /2020/data/landing/ambasador_deke/ambasador_deke_landing.css */

/* da hero ne izgleda “prazno” bez slike */
.lp-amb__hero {
  margin-top: 10px;
}

/* naslov malo “landing” jači, ali u okviru theme */
.lp-amb__title {
  letter-spacing: -0.02em;
}

/* Vuteksica highlight */
.lp-amb__mark {
  white-space: nowrap;
}

/* badgeovi */
.lp-amb__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
}

.lp-amb__badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .03em;
  background: #fff;
}

.lp-amb__badge--solid {
  background: #111;
  color: #fff;
  border-color: #111;
  font-weight: 800;
}

/* brzi popis u hero */
.lp-amb__quick {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  opacity: .92;
}

/* desni card micro spacing */
.lp-amb__card .pdp__label { margin-bottom: 6px; }
.lp-amb__sub { margin: 0 0 10px; opacity: .92; }
.lp-amb__spec { display: grid; gap: 6px; font-size: 14px; opacity: .92; margin-bottom: 12px; }

/* checkout microcopy (tvoja verzija) */
.lp-amb__microcopy {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  opacity: .92;
}

/* sekcije */
.lp-amb__section {
  margin-top: 18px;
}

.lp-amb__block {
  padding-top: 6px;
}

/* spec grid */
.lp-amb__specGrid {
  margin: 12px 0 14px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  opacity: .92;
}

/* mobile malo zraka */
@media (max-width: 900px) {
  .lp-amb__hero { margin-top: 0; }
}
/* === FIX: prikaz landinga ispod velikog headera / loga === */

/* 1) spriječi da sadržaj ode pod sticky header */
.lp-amb {
  padding-top: 18px;
}

/* ako je header stvarno ogroman na desktopu, digni malo više */
@media (min-width: 1100px) {
  .lp-amb { padding-top: 28px; }
}

/* 2) hero grid neka bude stabilan i centriran */
.lp-amb .pdp__container {
  max-width: 1180px;   /* malo šire od defaulta */
  margin: 0 auto;
}

/* 3) hero grid: lijevo tekst, desno buy kartica (da ne bude “usko”) */
.lp-amb__hero {
  margin-top: 0;
}

.lp-amb__hero.pdp__grid {
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items: start;
}

/* 4) badgeovi u hero neka budu normalne “pilule”, ne visoki oblici */
.lp-amb__badges {
  margin: 14px 0 10px;
}

.lp-amb__badge {
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 5) “quick” lista da bude u 2 kolone na desktopu */
@media (min-width: 900px) {
  .lp-amb__quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
  }
}

/* 6) na manjim ekranima: složi sve u jednu kolonu, buy box ispod */
@media (max-width: 980px) {
  .lp-amb__hero.pdp__grid {
    grid-template-columns: 1fr;
  }
}

/* 7) poravnanje i malo prostora u buy kartici */
.lp-amb__card {
  padding: 16px;
}

/* 8) da CTA gumb ne bude “preširok” ako tema radi čudno */
.lp-amb .pdp__cta {
  width: auto;
  display: inline-flex;
}
/* ===== HARD FIX: stabilan hero + ne-divlji header (samo za landing) ===== */

/* 0) ograniči header logo ako se ručni header slučajno još rendera */
.lp-amb .nav-logos img,
.lp-amb .site-header img {
  max-height: 46px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}

/* 1) da sadržaj ne ide “pod” sticky header */
.lp-amb {
  padding-top: 16px;
}

/* 2) FORSIRAJ layout hero-a (radi i kad tema nije grid) */
.lp-amb__hero.pdp__grid {
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

/* lijevo = tekst, desno = buy box */
.lp-amb__hero .pdp__media {
  flex: 1 1 62% !important;
  min-width: 0;
}
.lp-amb__hero .pdp__buy {
  flex: 0 0 38% !important;
  min-width: 320px;
}

/* 3) badgeovi neka budu normalne “pilule”, ne visoki stupci */
.lp-amb__badge {
  padding: 8px 12px !important;
  white-space: nowrap;
}

/* 4) quick lista u 2 kolone na desktopu */
@media (min-width: 900px) {
  .lp-amb__quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
  }
}

/* 5) mobile: sve u 1 kolonu */
@media (max-width: 980px) {
  .lp-amb__hero.pdp__grid {
    flex-direction: column !important;
  }
  .lp-amb__hero .pdp__buy {
    min-width: 0;
    width: 100%;
  }
}
/* === FIX: quick list da se ne raspadne === */
.lp-amb__quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.lp-amb__quickItem { line-height: 1.25; }

@media (min-width: 900px) {
  .lp-amb__quick { grid-template-columns: 1fr 1fr; }
}

/* === Kartice s fotkama (Ambient look) === */
.lp-amb__cards {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  .lp-amb__cards { grid-template-columns: 1fr; }
}

.lp-amb__cardItem {
  padding: 16px;
}

.lp-amb__cardBadge {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 4px;
}

.lp-amb__cardTitle {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  margin-bottom: 10px;
}

.lp-amb__imgLink {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.03);
  margin-bottom: 10px;
}

.lp-amb__img {
  width: 100%;
  height: 220px;
  object-fit: contain; /* da deka ne bude odrezana */
  display: block;
}

.lp-amb__cardText {
  font-size: 14px;
  margin: 6px 0 8px;
  opacity: .92;
}

.lp-amb__cardSpec {
  font-size: 13px;
  opacity: .85;
  margin-bottom: 12px;
}

/* ===== FIX 1: HERO badgeovi (da ne budu visoke kapsule) ===== */
.lp-amb .lp-amb__badges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:14px 0 10px !important;
}

.lp-amb .lp-amb__badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* ===== FIX 2: QUICK blok (da se ne raspadne i ne izgleda zbijeno) ===== */
.lp-amb .lp-amb__quick{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:10px 16px !important;
  margin-top:14px !important;
}

.lp-amb .lp-amb__quickItem{
  margin:0 !important;
  padding:0 !important;
  line-height:1.25 !important;
  white-space:normal !important;
  word-break:normal !important;
}

/* Mobile: quick u jednu kolonu */
@media (max-width: 700px){
  .lp-amb .lp-amb__quick{
    grid-template-columns: 1fr !important;
  }
}

/* ===== FIX 3: slike u karticama (ujednači visinu i centriraj) ===== */
.lp-amb .lp-amb__imgLink{
  display:block !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background: rgba(0,0,0,.03) !important;
  padding:12px !important;
}

.lp-amb .lp-amb__img{
  width:100% !important;
  height:240px !important;
  object-fit:contain !important;
  display:block !important;
}

/* ===== FIX 4: kartice – malo više “shop” razmaka ===== */
.lp-amb .lp-amb__cardTitle{
  margin-bottom:10px !important;
}

.lp-amb .lp-amb__cardSpec{
  margin-bottom:14px !important;
}
/* ===== ULTIMATE OVERRIDE (badge + quick) — zalijepiti na KRAJ ===== */

/* 1) BADGE: resetiraj SVE unutar wrappera (tema očito nameće fiksne dimenzije) */
.lp-amb .lp-amb__badges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
}

/* hvataj sve child elemente, ne samo .lp-amb__badge */
.lp-amb .lp-amb__badges > *{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  /* ubij sve fiksne dimenzije koje tema možda postavlja */
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;

  padding:8px 12px !important;
  border-radius:999px !important;

  line-height:1 !important;
  white-space:nowrap !important;

  /* ako tema radi “blokove” */
  float:none !important;
}

/* dodatno: ako tema postavlja border/pozadine čudno */
.lp-amb .lp-amb__badges > *{
  border:1px solid rgba(0,0,0,.18) !important;
  background:#fff !important;
}
.lp-amb .lp-amb__badge--solid{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
  font-weight:800 !important;
}


/* 2) QUICK: auto-fit grid da se nikad ne raspadne u premale stupce */
.lp-amb .lp-amb__quick{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:10px 16px !important;
  margin-top:14px !important;
}

.lp-amb .lp-amb__quickItem{
  margin:0 !important;
  padding:0 !important;
  line-height:1.25 !important;
  white-space:normal !important;
  word-break:normal !important;
}

/* ===== HERO LEFT: uredi lijevi panel ===== */

/* 1) napravi lijevi dio (mediaInner) kao grid: tekst + info */
.lp-amb .lp-amb__mediaInner{
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  grid-template-areas:
    "kicker title"
    "lead   lead"
    "badges badges"
    "quick  quick";
  column-gap: 18px !important;
  row-gap: 10px !important;
}

/* mapiranje postojećih elemenata u grid */
.lp-amb .lp-amb__mediaInner .pdp__kicker{ grid-area: kicker; }
.lp-amb .lp-amb__mediaInner .lp-amb__title{ grid-area: title; }
.lp-amb .lp-amb__mediaInner .lp-amb__lead{ grid-area: lead; }
.lp-amb .lp-amb__mediaInner .lp-amb__badges{ grid-area: badges; }
.lp-amb .lp-amb__mediaInner .lp-amb__quick{ grid-area: quick; }

/* 2) “Ako tražite...” blok neka bude normalne širine i bez nepotrebnih prijeloma */
.lp-amb .lp-amb__lead{
  max-width: 62ch !important;
  margin-top: 2px !important;
}

/* 3) naslov malo zbijeniji da ne “gura” sve dolje */
.lp-amb .lp-amb__title{
  margin: 0 !important;
  line-height: 1.12 !important;
}

/* 4) badgeovi neka budu bliže naslovu */
.lp-amb .lp-amb__badges{
  margin-top: 6px !important;
}

/* 5) quick kao uredni redovi (ne kao “sitni blokovi”) */
.lp-amb .lp-amb__quick{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 18px !important;
  margin-top: 8px !important;
  font-size: 14px !important;
}

.lp-amb .lp-amb__quickItem strong{
  font-weight: 800 !important;
}

/* 6) na manjim ekranima vrati u 1 kolonu */
@media (max-width: 900px){
  .lp-amb .lp-amb__mediaInner{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "kicker"
      "title"
      "lead"
      "badges"
      "quick";
  }
  .lp-amb .lp-amb__quick{
    grid-template-columns: 1fr !important;
  }
}
/* manje vertikalne praznine u hero sekciji */
.lp-amb .lp-amb__hero{
  margin-top: 8px !important;
}
.lp-amb .pdp__media{
  padding-bottom: 8px !important;
}