/* --------- Spoločné premenné (farby + sezónne pozadie) --------- */ :root{ --gift-bg: #AAD8D9; /* základné vnútorné pozadie poradcu */ --gift-bg-img: none; /* voliteľná tapeta (url(...)) */ --gift-pane: rgba(255,255,255,.0); /* vnútorné podklady, ak chceš zjemniť čitateľnosť */ } /* Príklady sezón: stačí pridať class na (viď JS) */ body.theme-winter{ --gift-bg: #E9F5F6; /* jemná inline SVG tapeta (môžeš nahradiť vlastnou URL) */ --gift-bg-img: url("data:image/svg+xml;utf8,\ "); } body.theme-autumn{ --gift-bg: #F6EFE8; --gift-bg-img: none; --gift-pane: rgba(255,255,255,.0); } /* --------- Widget poradcu (HP aj CMS) --------- */ /* Ak je widget vložený na HP priamo: target .rh-gift-guide Ak na CMS stránke: vkladá sa do #rh-poradca-root (inject JS) */ .rh-gift-guide, #rh-poradca-root .rh-gift-guide{ background: var(--gift-bg); background-image: var(--gift-bg-img); background-repeat: repeat; background-size: auto; background-position: top left; border-radius: 16px; padding: 20px; box-shadow: 0 6px 20px rgba(2,12,27,.06); margin: 24px 0; } .rh-gift-guide h2, #rh-poradca-root .rh-gift-guide h2{ margin:0 0 6px; font-size:1.6rem; color:#0F1838; } .rh-gift-sub{ margin:0 0 18px; color:#334155 } /* Form/grid cez celú šírku kontajnera témy */ .rh-gift-form{ display:grid; gap:12px; align-items:end; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* láme sa plynulo */ } .rh-field{ display:flex; align-items:center; gap:10px; min-width:0; } .rh-gift-form select{ width:100%; height:44px; padding:0 12px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; } /* CTA sa môže zaradiť na koniec riadku a na úzkom layoute ísť na 100% šírku */ .rh-gift-cta{ justify-self:end; } @media (max-width: 900px){ .rh-gift-cta{ width:100%; justify-self:stretch; justify-content:center; } } @media (min-width: 900px){ /* na väčších layou-toch môžeme CTA posunúť doprava ak chceš: */ .rh-gift-cta{ justify-self:end; } } /* Mobil – jednokolónové rozloženie a 100% CTA */ @media (max-width: 900px){ .rh-gift-cta{ width:100%; justify-content:center } } /* CTA vzhľad */ .rh-gift-cta{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 16px; border:0; border-radius:12px; cursor:pointer; background:#FF5C5C; color:#fff; font-weight:700; transition:filter .15s ease; font-size:18px; line-height:1; /* požadovaná veľkosť textu */ } .rh-gift-cta:hover{ filter:brightness(.95) } /* Ikona lupy*/ .rh-gift-cta .rh-cta-ico{ width:22px; height:22 px; fill:currentColor; display:block; background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; } /* Chipsy + label */ .rh-chips-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px } .rh-chips-label{ font-weight:700; color:#0F1838; white-space:nowrap } .rh-age-chips{ display:flex; flex-wrap:wrap; gap:10px } .rh-age-chips button{ padding:10px 14px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-weight:700; color:#0F1838; transition:transform .12s ease, border-color .12s ease } .rh-age-chips button:hover{ transform:translateY(-1px); border-color:#AAD8D9 } /* Voliteľný „paper“ pod-formát (ak je tapeta výraznejšia) */ .rh-gift-guide .rh-gift-form, .rh-gift-guide .rh-chips-row{ background: var(--gift-pane); border-radius: 12px; padding: 8px; } /* Responzívne */ @media (max-width: 900px){ .rh-gift-form{ grid-template-columns:1fr; } .rh-gift-cta{ width:100%; justify-content:center } .rh-chips-label{ margin-bottom:6px; } } /* --------- TOP bannery: celoriadkový poradca (voliteľné) --------- */ .next-to-carousel-banners { display:flex; flex-wrap:wrap; } .next-to-carousel-banners .banner-wrapper.is-gift-wide{ flex:0 0 100%; max-width:100%; order:3; margin-top:12px; } .next-to-carousel-banners .banner-wrapper.is-gift-wide .rh-gift-banner{ width:100%; } .next-to-carousel-banners .banner-wrapper.is-gift-wide .extended-banner-texts, .next-to-carousel-banners .banner-wrapper.is-gift-wide a{ display:block; margin:0; padding:0; } @media (max-width: 991px){ .next-to-carousel-banners .banner-wrapper.is-gift-wide{ order:3; } } /* ===== HUB /darceky/ ===== */ .rh-gifts-hub{ margin: 12px 0 24px; } .rh-gifts-header h1{ margin:0 0 6px; color:#0F1838; } .rh-gifts-header p{ margin:0 0 18px; color:#334155; } /* GRID kariet */ .rh-gifts-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; } @media (max-width: 1100px){ .rh-gifts-grid{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px){ .rh-gifts-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .rh-gifts-grid{ grid-template-columns: 1fr; } } .rh-card{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px; box-shadow:0 4px 14px rgba(2,12,27,.06); display:flex; flex-direction:column; gap:10px; } .rh-card-head{ display:flex; align-items:center; gap:10px; } .rh-ico-wrap{ width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#EAF5F5; border:1px solid #d7e7e7; } .rh-ico-wrap svg{ width:20px; height:20px; fill:#04999b; } .rh-card-head h2{ font-size:1.05rem; margin:0; color:#0F1838 } .rh-card-links{ display:flex; flex-wrap:wrap; gap:8px; } .rh-pill{ display:inline-flex; align-items:center; height:34px; padding:0 12px; background:#fff; border:1px solid #e2e8f0; border-radius:999px; font-weight:700; color:#0F1838; } .rh-pill:hover{ border-color:#AAD8D9; } /* CTA dvojica (poradca + poukazy) */ .rh-cta-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:20px; } @media (max-width: 800px){ .rh-cta-row{ grid-template-columns:1fr; } } .rh-cta-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; text-decoration:none; border:1px solid #e2e8f0; background:#fff; box-shadow:0 4px 14px rgba(2,12,27,.06); } .rh-cta-card:hover{ border-color:#AAD8D9; } .rh-cta-ico{ width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:#EAF5F5; border:1px solid #d7e7e7; } .rh-cta-ico svg{ width:22px; height:22px; fill:#04999b; } .rh-cta-text{ display:flex; flex-direction:column; line-height:1.1; color:#0F1838 } .rh-cta-text strong{ font-size:1.05rem; } .rh-cta-text span{ color:#334155; font-size:.95rem; } .rh-cta-guide{ } .rh-cta-voucher .rh-cta-ico svg{ fill:#FF5C5C; } .nav-ico{ width:16px; height:16px; fill:currentColor; vertical-align:-2px; margin-right:6px; } .nav-ico-gift{ } /* skry obsah HUB kategórie Darčeky id 2472 */ /* skry prázdny stav kategórie */ body.id-2472 .category-perex.empty-content-category, body.id-2472 .category-perex.empty-content, body.id-2472 [data-testid="buttonBackToShop"] { display: none !important; } /* ak chceš skryť aj prípadné subkategórie s obrázkami nad týmto blokom */ /*body.id-2472 .subcategories-with-image { display: none !important; } */ /* skry klasické listing časti – nech nezavadzajú, ak by sa tam niečo objavilo */ body.id-2472 #filters-wrapper, body.id-2472 #productsListHeading, body.id-2472 .listingControls, body.id-2472 #products, body.id-2472 .instagram-block { display: none !important; } /* nechaj priestor pre HUB (vložený do popisu kategórie) */ body.id-2472 .category-content-wrapper { padding-top: 8px; } body.id-2472 .category-perex { margin-bottom: 16px; } /* ak HUB vkladáš do dolného popisu, uisti sa, že je viditeľný body.id-2472 .category__secondDescription { display: block !important; }*/ /* skry obsah HUB kategórie Darčekový poradca id 2595 */ /* skry prázdny stav kategórie */ body.id-2595 .category-perex.empty-content-category, body.id-2595 .category-perex.empty-content, body.id-2595 [data-testid="buttonBackToShop"] { display: none !important; } /* ak chceš skryť aj prípadné subkategórie s obrázkami nad týmto blokom */ /*body.id-2595 .subcategories-with-image { display: none !important; } */ /* skry klasické listing časti – nech nezavadzajú, ak by sa tam niečo objavilo */ body.id-2595 #filters-wrapper, body.id-2595 #productsListHeading, body.id-2595 .listingControls, body.id-2595 #products, body.id-2595 .instagram-block { display: none !important; } /* nechaj priestor pre HUB (vložený do popisu kategórie) */ body.id-2595 .category-content-wrapper { padding-top: 8px; } body.id-2595 .category-perex { margin-bottom: 16px; } /* ak HUB vkladáš do dolného popisu, uisti sa, že je viditeľný body.id-2595 .category__secondDescription { display: block !important; }*/ /* ===== Hub: grid „Vybrané kategórie“ ===== */ .rh-hub-banners{ display:grid; gap:14px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1300px){ .rh-hub-banners{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .rh-hub-banners{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .rh-hub-banners{ grid-template-columns: 1fr; } } .rh-hub-banner{ position:relative; display:block; overflow:hidden; border-radius:18px; background:#fff; /* rámik bez zubatých hrán */ } .rh-hub-banner::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 1px #e2e8f0 inset; pointer-events:none; } /* drž pomer strán (750×380 ≈ 50.67%) */ .rh-hub-banner::before{ content:""; display:block; aspect-ratio: 750 / 380; /* modern */ /* fallback ak by aspect-ratio neplatil: padding-top:50.6667%; */ } .rh-hub-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .35s ease, filter .35s ease; display:block; border-radius:inherit; } .rh-hub-banner:hover img{ transform:scale(1.04); filter:saturate(1.05); } .rh-hub-banner__label{ position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.9); border:1px solid #e2e8f0; border-radius:999px; padding:6px 12px; font-weight:700; color:#0F1838; } /* ===== Darčekový poukaz medzi chipsy ===== */ .rh-chips-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px } .rh-chips-spacer{ flex:1 1 auto; min-width:12px } /* odtlačí poukaz doprava na desktope */ .rh-voucher-zone{ display:flex; align-items:center; gap:8px } /* label */ .rh-voucher-label{ font-weight:700; color:#0F1838; white-space:nowrap } /* button – sekundárny CTA (brand navy) */ .rh-voucher-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; height:40px; border-radius:999px; background:#0F1838; color:#fff; text-decoration:none; font-weight:800; box-shadow:0 2px 10px rgba(15,24,56,.15); transition:transform .15s ease, filter .15s ease, box-shadow .15s ease; } .rh-voucher-btn:hover{ filter:brightness(1.06); box-shadow:0 4px 14px rgba(15,24,56,.18); transform:translateY(-1px) } .rh-voucher-btn:focus-visible{ outline:3px solid #AAD8D9; outline-offset:2px; border-radius:999px } .rh-voucher-ico{ width:18px; height:18px; fill:currentColor } /* mobil – poukaz pod chipsami, vycentrovaný */ @media (max-width: 720px){ .rh-chips-spacer{ display:none } .rh-voucher-zone{ width:100%; justify-content:flex-start; gap:10px; margin-top:6px } } /* Voliteľná svetlejšia varianta*/ .rh-voucher-btn.is-outline{ background:#fff; color:#0F1838; border:1px solid #e2e8f0; box-shadow:none; } .rh-voucher-btn.is-outline:hover{ border-color:#AAD8D9; transform:none; filter:none }