/* ==========================================================================
   URSUS — komponensek: tipográfia-szerepek, gombok, kártyák, jelölők
   ========================================================================== */

/* --- Tipográfia-szerepek ------------------------------------------------ */

/* Mono „eyebrow" — csak szekció-azonosításra, nem dekorációnak */
.u-eyebrow{
  font-family:var(--u-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
@media (min-width:600px){ .u-eyebrow{font-size:11px} }
.u-band--dark .u-eyebrow,.u-band--dark2 .u-eyebrow{color:var(--u-bronze)}
.u-band--paper .u-eyebrow,.u-band--paper2 .u-eyebrow{color:var(--u-bronze-ink)}

/* Playfair CSAK a sötét szalagokon, nagy méretben.
   A világos szekciók fejlécei groteszkek — ez töri meg a „serif mindenhol" mintát. */
.u-display{
  font-family:var(--u-disp);font-weight:600;letter-spacing:-.01em;color:#fff;
  font-size:clamp(2.05rem,7.4vw,4rem);line-height:1.06;
}
.u-h2--dark{
  font-family:var(--u-disp);font-weight:600;color:#fff;
  font-size:clamp(1.6rem,5vw,2.9rem);line-height:1.14;
}
.u-h2--light{
  font-family:var(--u-sans);font-weight:700;color:var(--u-tx-l);
  font-size:clamp(1.35rem,4.2vw,2.25rem);letter-spacing:-.015em;line-height:1.2;
}
.u-h3{font-size:1.02rem;letter-spacing:-.01em;line-height:1.3}

.u-lede{font-size:.97rem;max-width:62ch}
@media (min-width:900px){ .u-lede{font-size:1.06rem;max-width:60ch} }
.u-band--dark .u-lede,.u-band--dark2 .u-lede{color:#C6C2BB}
.u-band--paper .u-lede,.u-band--paper2 .u-lede{color:var(--u-tx-l2)}

/* Számok mindig táblázatos alakkal — árak, méretek, szemcseméret */
.u-price,.u-num{font-variant-numeric:tabular-nums}
.u-price{font-weight:700}
.u-spec{font-family:var(--u-mono);font-variant-numeric:tabular-nums}

/* --- Gombok ------------------------------------------------------------- */

.u-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--u-tap);padding-inline:22px;
  border:1px solid transparent;border-radius:var(--u-r);
  font-weight:700;font-size:.9rem;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s,border-color .18s,color .18s;
}
.u-btn--bronze{background:var(--u-bronze);color:#1a1206;border-color:var(--u-bronze)}
.u-btn--bronze:hover{background:var(--u-bronze-hi);border-color:var(--u-bronze-hi)}
.u-btn--ink{background:var(--u-ink);color:#fff;border-color:var(--u-ink)}
.u-btn--ink:hover{background:var(--u-bronze-ink);border-color:var(--u-bronze-ink)}
.u-btn--ghost-d{background:transparent;color:#fff;border-color:var(--u-line-d)}
.u-btn--ghost-d:hover{border-color:var(--u-bronze);color:var(--u-bronze)}
.u-btn--ghost-l{background:transparent;color:var(--u-tx-l);border-color:var(--u-line-l)}
.u-btn--ghost-l:hover{border-color:var(--u-bronze-ink);color:var(--u-bronze-ink)}
.u-btn--block{width:100%}
.u-btn[disabled],.u-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* Gombsor: mobilon teljes szélességű gombok egymás alatt */
.u-btnrow{display:flex;flex-direction:column;gap:10px}
.u-btnrow .u-btn{width:100%}
@media (min-width:600px){
  .u-btnrow{flex-direction:row;flex-wrap:wrap;gap:12px}
  .u-btnrow .u-btn{width:auto}
}

/* Ikongomb — mindig 44px érintési célpont */
.u-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--u-tap);height:var(--u-tap);
  background:none;border:none;color:inherit;cursor:pointer;padding:0;
}

/* --- Jelölők ------------------------------------------------------------ */

/* A badge a kártyatörzsben ül, nem a képen — így nem takar termékrészletet */
.u-badge{
  display:inline-flex;align-items:center;align-self:flex-start;
  background:var(--u-ink);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 7px;border-radius:var(--u-r);
}
@media (min-width:600px){ .u-badge{font-size:.63rem;padding:4px 9px} }
.u-badge--sage{background:var(--u-sage-ink)}
.u-badge--bronze{background:var(--u-bronze-ink)}

.u-chip{
  font-family:var(--u-mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--u-tx-l2);
}

/* Csillagok — unicode alapon, nulla extra kérés */
.u-stars{color:var(--u-gold);letter-spacing:1px;font-size:.88rem;white-space:nowrap}
.u-band--dark .u-stars{color:var(--u-bronze)}

/* --- Kártyák ------------------------------------------------------------ */

.u-card{
  background:#fff;border:1px solid var(--u-line-l);border-radius:var(--u-r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
@media (hover:hover){
  .u-card:hover{border-color:#BDB6A3;box-shadow:0 8px 26px rgba(20,20,20,.07)}
}

/* Képdoboz: 4:5 álló arány — az álló termékfotók így töltik ki a helyet.
   A kép abszolút pozicionált, mert az aspect-ratio enged a tartalomnak:
   height:100% körkörös hivatkozást csinálna és a kép kifeszítené a dobozt. */
.u-media{position:relative;background:var(--u-paper-2)}
.u-media--45{aspect-ratio:4/5}
.u-media--11{aspect-ratio:1/1}
.u-media--43{aspect-ratio:4/3}
.u-media > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:8px;box-sizing:border-box;
  mix-blend-mode:multiply;
}
@media (min-width:600px){ .u-media > img{padding:12px} }
.u-media--cover > img{object-fit:cover;padding:0;mix-blend-mode:normal}

.u-card__body{
  padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1;
  border-top:1px solid var(--u-line-l);
}
@media (min-width:600px){ .u-card__body{padding:16px 18px 18px;gap:9px} }

.u-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.u-card__foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding-top:6px}
@media (min-width:600px){
  .u-card__foot{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
}
/* A „-tól" az összeg UTÁN, ugyanabban a sorban — nem külön blokként fölötte. */
.u-card__from{font-family:var(--u-mono);font-size:.72rem;font-weight:400;color:var(--u-tx-l2)}

/* A kártyacím link, de nem aláhúzva: a kártya egésze kattintható felület,
   az aláhúzás itt csak zajt vinne a rácsba. */
.u-card__body h3 a{color:inherit;text-decoration:none}
.u-card__body h3 a:hover{color:var(--u-bronze-ink)}

/* Kis gomb a kártyán — mobilon teljes szélességű, nagyobb célpont */
.u-minibtn{
  border:none;border-radius:var(--u-r);background:var(--u-ink);color:#fff;
  min-height:var(--u-tap);padding-inline:15px;width:100%;
  font-size:.8rem;font-weight:700;cursor:pointer;
  transition:background-color .18s;
}
.u-minibtn:hover{background:var(--u-bronze-ink)}
@media (min-width:600px){ .u-minibtn{width:auto;min-height:38px} }

/* --- Értékelés-sor ------------------------------------------------------ */
.u-rate{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--u-tx-l2);flex-wrap:wrap}
@media (min-width:600px){ .u-rate{font-size:.76rem;gap:7px} }

/* --- Accordion (GYIK, termékfülek) — nulla JS, natív <details> ---------- */
.u-acc{border-top:1px solid var(--u-line-l)}
.u-acc details{border-bottom:1px solid var(--u-line-l)}
.u-acc summary{
  display:flex;align-items:center;min-height:var(--u-tap);
  padding:15px 38px 15px 0;position:relative;
  font-weight:700;font-size:.93rem;color:var(--u-tx-l);
  cursor:pointer;list-style:none;
}
.u-acc summary::-webkit-details-marker{display:none}
.u-acc summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--u-mono);font-size:1.3rem;font-weight:400;line-height:1;
  color:var(--u-bronze-ink);
}
.u-acc details[open] summary::after{content:"–"}
.u-acc details[open] summary{color:var(--u-bronze-ink)}
.u-acc__body{padding:0 8px 18px 0;font-size:.88rem;line-height:1.65;color:var(--u-tx-l2)}
@media (min-width:600px){
  .u-acc summary{font-size:1rem;padding:19px 40px 19px 0}
  .u-acc__body{font-size:.93rem;padding:0 40px 20px 0}
}

/* --- Vélemény-kártya ------------------------------------------------------
   Közös réteg: a főoldalon ÉS a termékoldalon is használjuk, ezért nem
   maradhat az oldal-specifikus home.css-ben — ott a termékoldalon nem
   töltődne be, és a vélemények stílus nélkül jelennének meg. */
.u-rev{
  display:flex;flex-direction:column;gap:11px;
  background:#fff;border:1px solid var(--u-line-l);
  border-radius:var(--u-r-lg);padding:18px;
}
@media (min-width:600px){ .u-rev{padding:22px;gap:12px} }
.u-rev p{font-size:.88rem;line-height:1.6;color:#2E2A24}
@media (min-width:600px){ .u-rev p{font-size:.93rem} }
.u-rev__who{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--u-line-l);
}
.u-rev__avatar{
  flex:0 0 34px;width:34px;height:34px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  background:var(--u-ink);color:var(--u-bronze);
  font-size:.78rem;font-weight:700;
}
.u-rev__who b{display:block;font-size:.83rem}
.u-rev__who span{
  display:flex;align-items:center;gap:4px;
  font-size:.7rem;font-weight:700;color:var(--u-sage-ink);
}



/* ==========================================================================
   Oldalfejléc és morzsa
   --------------------------------------------------------------------------
   Mindkettő TÖBB oldaltípuson szerepel: a sötét fejlécsávot a kosár, a
   pénztár, a köszönőoldal és a terméklista is használja, a morzsát a
   termékoldal és a kategórialapok. Ezért van itt, a mindig betöltődő
   lapon, és nem az egyik oldal saját lapján. Amikor korábban a
   checkout.css-ben ült, az /uzlet oldalon stílus nélkül maradt.
   ========================================================================== */

.u-shophead{background:var(--u-ink);color:var(--u-tx-d)}
.u-shophead__in{padding-block:26px 28px}
@media (min-width:900px){ .u-shophead__in{padding-block:40px 42px} }
.u-shophead h1{
  font-family:var(--u-disp);font-weight:600;color:#fff;
  font-size:clamp(1.6rem,4.6vw,2.5rem);line-height:1.12;margin-top:10px;
}

.u-crumb{background:var(--u-ink);border-bottom:1px solid var(--u-line-d)}
.u-crumb__in{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-block:12px;font-size:.74rem;color:var(--u-tx-d2);
}
.u-crumb a{color:var(--u-tx-d2);text-decoration:none}
.u-crumb a:hover{color:var(--u-bronze)}
.u-crumb__sep{opacity:.5}