/* ===========================================================================
 * css/gift/style.css — ŠTÝLY DARČEKOVÉHO ESHOPU (téma `gift`)
 * ---------------------------------------------------------------------------
 * Načítava sa AŽ ZA základným /css/yellow/style.css (viď content/yellow/header.php)
 * → obsahuje LEN rozdiely a prepisy, nie celý stylesheet. Rovnaký princíp ako
 *   content/gift/ pri PHP šablónach.
 *
 * PALETA (rozhodnutie usera 2026-10-01): grafit + jemný amber akcent.
 *   - akcent/tlačidlá/nav = grafit #1f2937
 *   - ceny a hodnotenie    = amber #b45309
 * Základná téma má akcent #ffd333 (žltá) na 33 miestach — prebíjame tu len tie,
 * ktoré sa v tomto shope reálne zobrazujú.
 *
 * Zmena palety = prepísať tokeny v :root nižšie (plus .nav-panel blok, ak sa
 * zmení svetlosť akcentu).
 * =========================================================================== */

:root {
  --gfx-accent:     #1f2937;   /* akcent — tlačidlá, nav panel, aktívne stavy */
  --gfx-accent-dk:  #111827;   /* akcent hover / active */
  --gfx-on-accent:  #ffffff;   /* text a ikony NA akcente */
  --gfx-price:      #b45309;   /* ceny, hviezdičky hodnotenia */
  --gfx-ink:        #1f2937;   /* hlavný text, nadpisy */
  --gfx-muted:      #6b7280;   /* sekundárny text */
  --gfx-line:       #e5e7eb;   /* linky, rámiky */
  --gfx-bg-soft:    #f8f9fa;   /* jemné podklady */
  --gfx-radius:     12px;
  --gfx-shadow:     0 1px 3px rgba(0, 0, 0, .08);
  --gfx-shadow-lg:  0 8px 20px rgba(0, 0, 0, .13);
}

/* ═══ 1. TLAČIDLÁ ════════════════════════════════════════════════════════ */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background: var(--gfx-accent);
  border-color: var(--gfx-accent);
  color: var(--gfx-on-accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background: var(--gfx-accent-dk);
  border-color: var(--gfx-accent-dk);
  color: var(--gfx-on-accent);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary.btn-loading:not(:disabled):not(.disabled) {
  background: var(--gfx-accent-dk);
  border-color: var(--gfx-accent-dk);
  color: var(--gfx-on-accent);
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 .2rem rgba(31, 41, 55, .25);
}

/* ═══ 2. NAV PANEL — vo farbe akcentu, teda SVETLÝ text ══════════════════
 * Základ má žltý panel s tmavým textom (#3d464d). Pri grafitovom akcente treba
 * preklopiť text, ikony aj hover podklady, inak je nav nečitateľný. */
.nav-panel,
.mobile-header__panel {
  background: var(--gfx-accent);
  color: var(--gfx-on-accent);
}
.nav-panel__logo svg,
.mobile-header__menu-button { fill: var(--gfx-on-accent); }
.mobile-header__menu-button:focus,
.mobile-header__menu-button:hover {
  background: rgba(255, 255, 255, .14);
  fill: var(--gfx-on-accent);
}
/* hover podsvietenie položiek — na tmavom podklade svetlé, nie biele-polopriehľadné */
.nav-links__item--hover .nav-links__item-body,
.indicator--open .indicator__area,
.indicator--hover .indicator__area { background: rgba(255, 255, 255, .14); }
/* šipky podmenu a ikony v paneli */
.nav-links__item--has-submenu .nav-links__item-arrow,
.nav-links__item--hover .nav-links__item-arrow { fill: rgba(255, 255, 255, .55); }
.departments__button-icon,
.departments__button-arrow { fill: rgba(255, 255, 255, .7); }
/* bublina s počtom v košíku — biela na tmavom paneli už nefunguje, dáme amber */
.indicator__value,
.indicator--open .indicator__value,
.indicator--hover .indicator__value {
  background: var(--gfx-price);
  color: #fff;
}
/* Košík + môj účet vpravo, odrazené od menu.
 * `[dir=ltr] .nav-panel__indicators { margin-left:auto }` zo základu ich tlačí na pravý
 * okraj; tu pridávame vizuálne oddelenie, nech čítajú ako samostatná skupina.
 * (Fungovať to začalo až po zlúčení nav panelu — viď content/gift/topmenu_desktop_main_menu.php:
 *  yellow renderoval DVA panely, takže indikátory boli v druhom pruhu pod menu.) */
.nav-panel__indicators {
  padding-left: 18px;
  margin-left: auto;                       /* istota, keby na <html> chýbal dir="ltr" */
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.nav-panel__indicators .indicator + .indicator { margin-left: 4px; }

/* Rozbaľovací panel kategórií (.departments__body) má v základe #3d464d — pri grafitovom
 * nave je to takmer tá istá farba a vrstvy splynú. Posvetlíme ho o stupeň, nech sa dropdown
 * čita ako samostatná plocha. (.menu/.megamenu si tmavý text na bielej nastavujú samé,
 * takže biely text z nav panelu do nich nepresakuje.) */
.departments__body { background: #374151; }
.departments__item--hover .departments__item-link { background: #4b5563; }

/* vyhľadávanie v paneli */
.search--location--header .search__input { color: var(--gfx-on-accent); }
.search--location--header .search__input::placeholder { color: rgba(255, 255, 255, .6); }
.search--location--header .search__button { fill: rgba(255, 255, 255, .7); }
.search--location--header .search__input:hover ~ .search__button,
.search--location--header .search__input:focus ~ .search__button,
.search--location--header .search__button:hover { fill: var(--gfx-on-accent); }

/* ═══ 3. OSTATNÉ AKCENTOVÉ STAVY ═════════════════════════════════════════ */
.page-item.active .page-link            { background: var(--gfx-accent); border-color: var(--gfx-accent); color: var(--gfx-on-accent); }
.product-card:hover .product-card__quickview { background: var(--gfx-accent); color: var(--gfx-on-accent); }
.totop__button                          { background: var(--gfx-accent); color: var(--gfx-on-accent); }
.block-header__arrow:focus,
.block-header__arrow:hover              { background: var(--gfx-accent); }
.layout-switcher__button--active,
.layout-switcher__button--active:hover  { background: var(--gfx-accent); border-color: var(--gfx-accent); color: var(--gfx-on-accent); }
.account-nav__item--active a            { border-color: var(--gfx-accent); }
.address-card__badge                    { background-color: var(--gfx-accent); color: var(--gfx-on-accent); }
.tags__list a:focus,
.tags__list a:hover                     { background: var(--gfx-accent); border-color: var(--gfx-accent); color: var(--gfx-on-accent); }
.filters-button__counter                { background: var(--gfx-accent); color: var(--gfx-on-accent); }
.noUi-connect                           { background: var(--gfx-accent); }
.noUi-horizontal .noUi-handle:after     { background: var(--gfx-accent); }
.block-header__group--active,
.block-header__group--active:focus      { box-shadow: 0 0 0 2px var(--gfx-accent) inset; }
.product-gallery__carousel-item--active { box-shadow: 0 0 0 2px var(--gfx-accent) inset; }
/* checkboxy a radiá v checkoute */
.input-check__input:checked ~ .input-check__box,
.input-radio__input:checked ~ .input-radio__circle,
.input-radio-label__list input:checked ~ span { background: var(--gfx-accent); border-color: var(--gfx-accent); }

/* hviezdičky hodnotenia zostávajú TEPLÉ — grafitové hviezdy nevyzerajú ako hodnotenie */
.rating__star--active .rating__fill { color: var(--gfx-price); }

/* ═══ 4. CENY — amber ═════════════════════════════════════════════════════ */
.product-card__price,          /* karta v kategórii */
.product-card__prices,         /* karta na úvodnej stránke */
.gfx-price {
  color: var(--gfx-price);
  font-weight: 700;
}
/* detail produktu si cenu berie z premenných --gfx-price / --gfx-accent
   (viď .pduv{--acc:var(--gfx-accent,…);--price:var(--gfx-price,…)}) */

/* ═══ 5. WORDMARK (náhrada loga, kým nie je dodané) ══════════════════════ */
.gfx-wordmark {
  display: inline-block;
  font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15;
  color: var(--gfx-ink); max-width: 260px;
}
.site-header__logo a:hover .gfx-wordmark { color: var(--gfx-accent-dk); }
.gfx-wordmark--mobile {
  display: inline-block;
  font-size: 17px; font-weight: 700; letter-spacing: -.3px; line-height: 1.15;
  color: var(--gfx-on-accent); max-width: 190px;   /* mobilná hlavička je na akcente */
}

/* ═══ 6. HERO ÚVODNEJ STRÁNKY (dlaždice kategórií) ══════════════════════
 * Vykresľuje content/gift/slideshow.php, keď v DB nie sú bannery pre túto tému. */
.gfx-hero        { background: #fff; padding: 26px 0 28px; }

/* Blok 4 odkazov pod hero (home_features) má v základnej téme
 * `.block-features--layout--classic { margin-top: -20px }` — zámerné vytiahnutie
 * nahor, aby prekryl spodný okraj veľkého carousel obrázka. Naše hero končí
 * tlačidlom „Zobraziť všetko", takže ten negatívny okraj tlačidlo PREKRÝVAL.
 * Pri dlaždicovom hero nemá čo vyťahovať → nulujeme. */
.block-features--layout--classic { margin-top: 0; }
.gfx-hero__head  { text-align: center; margin-bottom: 22px; }
.gfx-hero__title { font-size: 30px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 6px; color: var(--gfx-ink); }
.gfx-hero__sub   { font-size: 15px; color: var(--gfx-muted); margin: 0; }
.gfx-hero__grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.gfx-tile {
  position: relative; display: block;
  border-radius: var(--gfx-radius); overflow: hidden;
  background: #f3f4f6; box-shadow: var(--gfx-shadow);
  transition: transform .18s, box-shadow .18s; color: inherit;
}
.gfx-tile:hover { transform: translateY(-3px); box-shadow: var(--gfx-shadow-lg); text-decoration: none; }
.gfx-tile__img  { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #fff; }
.gfx-tile__body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
.gfx-tile__name  { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.25; display: block; }
.gfx-tile__count { color: rgba(255, 255, 255, .82); font-size: 12px; display: block; margin-top: 2px; }
.gfx-hero__more  { text-align: center; margin-top: 20px; }

@media (max-width: 1100px) { .gfx-hero__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  {
  .gfx-hero__grid  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gfx-hero__title { font-size: 23px; }
}

/* ═══ 7. KARTA PRODUKTU — DARČEKOVÁ MRIEŽKA ══════════════════════════════
 * Zadanie: väčší box, 3 v riadku, bez formulára „do košíka" na karte.
 * Celá karta je JEDEN <a> na detail (content/gift/product_card_gift.php).
 *
 * ŽLTÝ RÁMČEK PRI HOVERI: základná téma má
 *   .product-card:hover::before { box-shadow: 0 0 0 2px rgba(255,211,51,.7) inset }
 * — zapísaný v rgba, nie ako #ffd333, takže pri prvom prebíjaní palety ušiel.
 * Darčekové listingy ho už nepoužívajú (vlastná .gfx-card), ale .product-card
 * žije v ďalších šablónach (náramkové listingy, quickview), tak ho zlaďujeme. */
.product-card:hover::before {
  box-shadow: 0 0 0 2px rgba(31, 41, 55, .55) inset;
  -webkit-box-shadow: 0 0 0 2px rgba(31, 41, 55, .55) inset;
}
.product-card__name a:hover { color: var(--gfx-accent); text-decoration: none; }
.product-card__price { font-size: 19px; letter-spacing: -.2px; margin-top: 6px; }

/* ── mriežka: 3 v riadku ──────────────────────────────────────────────── */
.gfx-block        { padding: 26px 0 34px; }
.gfx-block__head  { margin-bottom: 20px; }
.gfx-block__title { font-size: 25px; font-weight: 700; letter-spacing: -.4px; color: var(--gfx-ink); margin: 0; }
.gfx-block__desc  { font-size: 14.5px; color: var(--gfx-muted); margin: 7px 0 0; max-width: 760px; }
.gfx-block__count { display: inline-block; font-size: 12.5px; color: var(--gfx-muted); margin-top: 6px; }

.gfx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── karta ────────────────────────────────────────────────────────────── */
.gfx-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gfx-line);
  border-radius: var(--gfx-radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.gfx-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--gfx-shadow-lg);
  border-color: #d1d5db;
  text-decoration: none;
  color: inherit;
}

.gfx-card__media {
  position: relative;
  display: block;
  background: #fff;
  border-bottom: 1px solid var(--gfx-line);
}
.gfx-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;      /* produktové fotky sú na bielom — necháme ich celé, bez orezu */
  padding: 14px;
  box-sizing: border-box;
  transition: transform .25s;
}
.gfx-card:hover .gfx-card__img { transform: scale(1.035); }

.gfx-card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--gfx-accent); color: var(--gfx-on-accent);
}

.gfx-card__body { display: block; padding: 15px 16px 4px; flex: 1 1 auto; }
.gfx-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15.5px; font-weight: 600; line-height: 1.35;
  color: var(--gfx-ink);
  min-height: 2.7em;            /* dva riadky → karty v riadku držia rovnakú výšku */
}
.gfx-card__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.gfx-card__price { font-size: 21px; font-weight: 700; letter-spacing: -.3px; color: var(--gfx-price); }
.gfx-card__from  { font-size: 12px; font-weight: 500; color: var(--gfx-muted); }

.gfx-card__cta {
  display: block;
  margin: 12px 16px 16px;
  padding: 9px 14px;
  text-align: center;
  font-size: 13.5px; font-weight: 600;
  border-radius: 8px;
  background: var(--gfx-bg-soft);
  color: var(--gfx-ink);
  border: 1px solid var(--gfx-line);
  transition: background .18s, color .18s, border-color .18s;
}
.gfx-card:hover .gfx-card__cta {
  background: var(--gfx-accent);
  color: var(--gfx-on-accent);
  border-color: var(--gfx-accent);
}

/* vypredané — karta zostáva klikateľná (detail povie viac), len je potlačená */
.gfx-card--out .gfx-card__img   { opacity: .55; }
.gfx-card--out .gfx-card__price { color: var(--gfx-muted); }

@media (max-width: 1000px) { .gfx-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px)  {
  .gfx-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gfx-card__body { padding: 12px 12px 2px; }
  .gfx-card__name { font-size: 14px; min-height: 2.6em; }
  .gfx-card__price { font-size: 18px; }
  .gfx-card__cta { margin: 10px 12px 12px; padding: 8px 10px; font-size: 12.5px; }
  .gfx-block__title { font-size: 21px; }
}

/* prázdna kategória */
.gfx-empty {
  text-align: center;
  padding: 44px 20px 52px;
  background: var(--gfx-bg-soft);
  border: 1px solid var(--gfx-line);
  border-radius: var(--gfx-radius);
}
.gfx-empty__text { font-size: 15px; color: var(--gfx-muted); margin: 0 0 18px; }

/* dostupnosť ako ODZNAK namiesto vety „Dostupnosť : Na sklade" */
.gfx-stock {
  display: inline-block;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: #ecfdf5; color: #047857;
  white-space: nowrap;
}
.gfx-stock--out { background: #fef2f2; color: #b91c1c; }

/* ═══ 8. DETAIL PRODUKTU — drobnosti ════════════════════════════════════ */
/* „Do košíka" na detaile je hlavná akcia → nech má plnú šírku a váhu */
.pduv__addbtn { font-weight: 600; }
/* cenníková tabuľka: hlavička jemne sivá namiesto žltej */
.pduv__pricetable thead th { background: var(--gfx-bg-soft); color: var(--gfx-ink); }