@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&display=swap");

/* Velikosti textu: clamp() a cqw podle obsahu/karty. Scoped !important u
   odstavcu prebiji puvodni e-shopove p { font-size: 110% !important; }. */

/* Vlastni styly jsou uzavrene do #essente-christmas. Obal e-shopu resi uvodni inline CSS. */
#essente-christmas {
  --ev-ink: #414141;
  --ev-muted: #414141;
  --ev-paper: #ecedee;
  --ev-card: #fcfcfc;
  --ev-hero-bg: #f5f5f4;
  --ev-hero-fade-rgb: 245, 245, 244;
  --ev-gift-bg: #f5f5f4;
  --ev-gift-fade-rgb: 245, 245, 244;
  --ev-line: #e9e1d7;
  --ev-gold: #966a2b;
  --ev-gold-hover: #805921;
  --ev-outline: #c6805e;
  --ev-cta-text: #2b0444;
  --ev-cta-bg: #ddd3d1;
  --ev-cta-hover: #ccbcb9;
  --ev-benefit-color: #c6805e;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  container-name: essente-christmas;
  width: 100%;
  color: var(--ev-ink);
  background: var(--ev-paper);
  font: 400 16px/1.5 Helvetica, Verdana, Arial, sans-serif;
  text-align: left;
  overflow-wrap: normal;
  -webkit-font-smoothing: antialiased;
}
#essente-christmas *, #essente-christmas *::before, #essente-christmas *::after { box-sizing: border-box; }
#essente-christmas :where(h1,h2,h3,p,blockquote,ul,li) { margin: 0; padding: 0; }
#essente-christmas :where(h1,h2,h3) { color: var(--ev-ink) !important; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: 400; text-transform: none; letter-spacing: -.035em; }
#essente-christmas a { color: inherit; text-decoration: none; }
#essente-christmas img { display: block; border: 0; max-width: 100%; }
#essente-christmas a:focus-visible { outline: 3px solid #805921; outline-offset: 5px; }
#essente-christmas .ev-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; padding: 13px 24px; border: 0; border-radius: 0;
  background: var(--ev-cta-bg); color: var(--ev-cta-text);
  font: 500 13px/1.25 Helvetica, Verdana, Arial, sans-serif; letter-spacing: .055em; text-transform: uppercase;
  transition: background-color .18s ease, box-shadow .18s ease; font-size: 12px; font-size: clamp(12px, .9cqw, 13px); }
#essente-christmas .ev-button img, #essente-christmas .ev-card-action > img { width: 18px; height: 18px; flex: 0 0 auto; filter: none; }
#essente-christmas .ev-button:is(:hover, :active, :focus-visible) { background: var(--ev-cta-hover); color: #fff; }


/* Hero: samostatne fotograficke kompozice pro desktop a uzke zobrazeni. */
#essente-christmas .ev-hero { position: relative; min-height: 500px; background: var(--ev-hero-bg); overflow: hidden; }
#essente-christmas .ev-hero-photo { position: absolute; inset: 0; display: block; }
#essente-christmas .ev-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#essente-christmas .ev-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--ev-hero-fade-rgb),1) 0%, rgba(var(--ev-hero-fade-rgb),.98) 24%, rgba(var(--ev-hero-fade-rgb),.8) 36%, rgba(var(--ev-hero-fade-rgb),.2) 52%, rgba(var(--ev-hero-fade-rgb),0) 64%); }
#essente-christmas .ev-hero-copy { position: relative; z-index: 1; width: 43%; padding: 54px 0 110px 6%; }
#essente-christmas .ev-hero h1 { margin: 0 0 18px; font-size: 42px; font-size: clamp(42px, 4.6cqw, 64px); line-height: 1.02; }
#essente-christmas .ev-hero h1 span { display: block; white-space: nowrap; }
#essente-christmas .ev-hero-copy > p { max-width: 31ch; margin: 0 0 24px; font-size: 14px !important; font-size: clamp(14px, 1.15cqw, 16px) !important; line-height: 1.55; }

/* Vyber darku. */
#essente-christmas .ev-guide { max-width: 1440px; margin: 0 auto; padding: 24px 20px 0; }
#essente-christmas .ev-guide-intro { margin-bottom: 22px; text-align: center; }
#essente-christmas .ev-guide-intro h2 { font-size: 28px; font-size: clamp(28px, 2.7cqw, 38px); line-height: 1.2; margin-bottom: 8px; }
#essente-christmas .ev-guide-intro > p { color: var(--ev-muted); font-size: 14px !important; font-size: clamp(14px, calc(12px + .3cqw), 16px) !important; line-height: 1.5; }
#essente-christmas .ev-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; gap: 12px; }
#essente-christmas .ev-card {
  position: relative; container-type: inline-size; display: grid; grid-template-rows: 36px 1fr auto; gap: 14px;
  min-width: 0; min-height: 410px; padding: 24px; overflow: hidden;
  border: 1px solid var(--ev-line); border-radius: 8px; background: var(--ev-card);
  transition: border-color .18s ease;
}
#essente-christmas .ev-card:is(:hover, :active, :focus-visible) { border-color: var(--ev-outline); }
#essente-christmas .ev-card-photo { position: absolute; inset: 0; pointer-events: none; background-size: cover; background-position: right center; background-repeat: no-repeat; }
#essente-christmas .ev-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--ev-hero-fade-rgb),.96), rgba(var(--ev-hero-fade-rgb),.94) 31%, rgba(var(--ev-hero-fade-rgb),.92) 48%, rgba(var(--ev-hero-fade-rgb),.72) 60%, rgba(var(--ev-hero-fade-rgb),.1) 76%, transparent 88%), linear-gradient(180deg, rgba(var(--ev-hero-fade-rgb),.45) 0, rgba(var(--ev-hero-fade-rgb),.2) 10%, transparent 28%); }
#essente-christmas .ev-card-copy { position: relative; z-index: 1; width: 59%; }
#essente-christmas .ev-card h3 { margin: 0 0 8px; font-size: 22px; font-size: clamp(22px, calc(16px + 2.5cqw), 28px); line-height: 1.1; }
#essente-christmas .ev-card-subtitle { margin: 0 0 14px; font: 400 16px/1.3 "Lora", Georgia, serif; font-size: 14px !important; font-size: clamp(14px, calc(12px + .8cqw), 16px) !important; }
#essente-christmas .ev-card-description { font-size: 14px !important; font-size: clamp(14px, calc(12px + .6cqw), 16px) !important; line-height: 1.55; }
#essente-christmas .ev-badge { position: absolute; z-index: 2; top: 24px; left: auto; right: 24px; padding: 4px 9px; border-radius: 0; background: #9c063e; color: #fff; font: 500 11px/1.1 Helvetica, Verdana, Arial, sans-serif; letter-spacing: .055em; text-transform: uppercase; font-size: 10px; font-size: clamp(10px, calc(8px + .6cqw), 11px); }
#essente-christmas .ev-card-icon { position: relative; z-index: 1; display: block; width: 36px; height: 36px; }
#essente-christmas .ev-card-title-line { display: block; white-space: nowrap; }
#essente-christmas .ev-card-action { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-self: start; gap: 9px; max-width: 100%; min-height: 40px; padding: 10px 14px; border-radius: 0; background: var(--ev-cta-bg); color: var(--ev-cta-text); font: 500 11.5px/1.3 Helvetica, Verdana, Arial, sans-serif; letter-spacing: .025em; text-transform: uppercase; font-size: 11px; font-size: clamp(11px, calc(9px + .6cqw), 12px); }
#essente-christmas .ev-card-action > img { width: 14px; height: 14px; }
#essente-christmas .ev-card:is(:hover, :active, :focus-visible) .ev-card-action { background: var(--ev-cta-hover); color: #fff; }


/* Ctyri vyhody. */
#essente-christmas .ev-benefits { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; max-width: 1440px; margin: 0 auto; padding: 28px 20px; }
#essente-christmas .ev-benefits > li { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 12px; padding: 0 16px; list-style: none; font-size: 11px; font-size: clamp(11px, calc(10px + .2cqw), 13px); line-height: 1.6; }
#essente-christmas .ev-benefits > li::before { content: none; }
#essente-christmas .ev-benefits > li + li { border-left: 0; }
#essente-christmas .ev-benefit-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid var(--ev-benefit-color); border-radius: 50%; }
#essente-christmas .ev-benefit-icon img { width: 29px; height: 29px; }
@media (min-width: 1280px) {
  #essente-christmas .ev-card h3 { font-size: 28px; font-size: clamp(28px, calc(20px + 2.5cqw), 32px); }
  #essente-christmas .ev-card-subtitle { font-size: 17px !important; font-size: clamp(17px, calc(15px + .7cqw), 18px) !important; }
  #essente-christmas .ev-card-description { font-size: 16px !important; font-size: clamp(16px, calc(14px + .8cqw), 18px) !important; }
  #essente-christmas .ev-card-action { font-size: 13px; }
  #essente-christmas .ev-badge { font-size: 12px; }
  #essente-christmas .ev-benefits > li > span:last-child { align-self: center; }
}

/* Vanocni darek k nakupu. */
#essente-christmas .ev-gift { position: relative; min-height: 360px; background: var(--ev-gift-bg); overflow: hidden; }
#essente-christmas .ev-gift-photo { position: absolute; inset: 0; display: block; }
#essente-christmas .ev-gift-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#essente-christmas .ev-gift::after { position: absolute; content: ""; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--ev-gift-fade-rgb),1) 0%, rgba(var(--ev-gift-fade-rgb),1) 28%, rgba(var(--ev-gift-fade-rgb),.96) 36%, rgba(var(--ev-gift-fade-rgb),.5) 48%, rgba(var(--ev-gift-fade-rgb),0) 64%); }
#essente-christmas .ev-gift-copy { position: relative; z-index: 1; width: 48%; padding: 36px 0 36px 5%; }
#essente-christmas .ev-gift-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#essente-christmas .ev-gift-eyebrow > img { flex: 0 0 auto; width: 28px; height: 28px; }
#essente-christmas .ev-gift-eyebrow > span { padding: 5px 8px; background: rgba(var(--ev-gift-fade-rgb),.55); color: var(--ev-ink); font-size: 10px; font-size: clamp(10px, calc(8px + .2cqw), 11px); line-height: 1.3; letter-spacing: .055em; text-transform: uppercase; }
#essente-christmas .ev-gift h2 { margin: 0 0 16px; font-size: 26px; font-size: clamp(26px, 2.7cqw, 38px); line-height: 1.12; }
#essente-christmas .ev-gift-date { margin: 0 0 22px; color: var(--ev-ink); font-size: 12px !important; font-size: clamp(12px, calc(10px + .3cqw), 14px) !important; line-height: 1.6; }

/* C: zachovat cely novy siroky darek bez orezu uzaveru produktu. */
@media (min-width: 1280px) {
  #essente-christmas .ev-gift { aspect-ratio: 3 / 1; }
}

/* iPad: stejne texty, dva sloupce, jemne ramovane karty s ikonami. */
@media (max-width: 1279px) {
  #essente-christmas .ev-hero { min-height: clamp(320px, 39vw, 500px); }
  #essente-christmas .ev-hero-copy { padding-top: clamp(28px, 4.2vw, 54px); padding-bottom: 110px; }
  #essente-christmas .ev-hero h1 { font-size: 26px; font-size: clamp(26px, 4.4cqw, 50px); }
  #essente-christmas .ev-hero-copy > p { font-size: 14px !important; font-size: clamp(14px, 1.15cqw, 16px) !important; }
  #essente-christmas .ev-hero .ev-button { font-size: 12px; font-size: clamp(12px, .9cqw, 13px); padding: 12px 18px; }
  #essente-christmas .ev-guide { padding: 30px 24px 0; }
  #essente-christmas .ev-cards { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 1fr; gap: 16px; }
  #essente-christmas .ev-card { grid-template-rows: 36px 1fr auto; gap: 14px; min-height: 0; padding: 24px; background: var(--ev-card); border-color: var(--ev-line); }
  #essente-christmas .ev-card-icon { position: relative; z-index: 1; display: block; width: 36px; height: 36px; }
  #essente-christmas .ev-card-copy { width: 100%; }
  #essente-christmas .ev-card h3 { font-size: 22px; font-size: clamp(22px, calc(16px + 2.5cqw), 28px); }
  #essente-christmas .ev-card-subtitle { font: 400 15px/1.45 "Lora", Georgia, serif; margin-bottom: 12px; font-size: 14px !important; font-size: clamp(14px, calc(12px + .8cqw), 16px) !important; }
  #essente-christmas .ev-card-description { font-size: 14px !important; font-size: clamp(14px, calc(12px + .6cqw), 16px) !important; line-height: 1.55; }
  #essente-christmas .ev-badge { top: 24px; left: auto; right: 24px; }
  #essente-christmas .ev-benefits { padding: 26px 16px; }
  #essente-christmas .ev-benefits > li { flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 12px; text-align: center; font-size: 11px; font-size: clamp(11px, calc(10px + .2cqw), 13px); }
  #essente-christmas .ev-gift { min-height: 340px; }
  #essente-christmas .ev-gift-photo img { position: absolute; bottom: 0; height: auto; }
  #essente-christmas .ev-gift-photo img { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%); mask-image: linear-gradient(180deg, transparent, #000 14%); }
  #essente-christmas .ev-gift-copy { width: 51%; padding: 30px 0 30px 4%; }
  #essente-christmas .ev-gift h2 { font-size: 24px; font-size: clamp(24px, 3.4cqw, 34px); }
}

/* Mobil: jeden sloupec, vyhody 2x2 a kompaktnější obraz darku pod textem. */
@media (max-width: 639px) {
  #essente-christmas .ev-hero { min-height: 0; height: 620px; }
  #essente-christmas .ev-hero-photo { top: auto; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%); mask-image: linear-gradient(180deg, transparent, #000 14%); }
  #essente-christmas .ev-hero-photo img { height: auto; width: 100%; }
  #essente-christmas .ev-hero::after { background: linear-gradient(180deg, rgba(var(--ev-hero-fade-rgb),.4), transparent 30%); }
  #essente-christmas .ev-hero-copy { width: 100%; padding: 38px 24px 0; }
  #essente-christmas .ev-hero h1 { font-size: 32px; font-size: clamp(32px, 9.5cqw, 46px); margin-bottom: 18px; }
  #essente-christmas .ev-hero-copy > p { width: 76%; max-width: 30ch; font-size: 14px !important; font-size: clamp(14px, 3.8cqw, 16px) !important; line-height: 1.55; }
  #essente-christmas .ev-button { min-height: 46px; font-size: 12px; font-size: clamp(12px, .9cqw, 13px); padding: 12px 20px; }
  #essente-christmas .ev-guide { padding: 27px 16px 0; }
  #essente-christmas .ev-guide-intro { margin-bottom: 20px; }
  #essente-christmas .ev-guide-intro h2 { font-size: 26px; font-size: clamp(26px, 7cqw, 30px); }
  #essente-christmas .ev-guide-intro > p { max-width: 32ch; margin: auto; font-size: 14px !important; font-size: clamp(14px, calc(12px + .3cqw), 16px) !important; }
  #essente-christmas .ev-cards { grid-template-columns: minmax(0,1fr); gap: 12px; }
  #essente-christmas .ev-card { min-height: 0; padding: 24px; gap: 14px; }
  #essente-christmas .ev-card h3 { font-size: 22px; font-size: clamp(22px, calc(16px + 2.5cqw), 28px); max-width: 20ch; }
  #essente-christmas .ev-card-description { max-width: 38ch; font-size: 14px !important; font-size: clamp(14px, calc(12px + .6cqw), 16px) !important; }
  #essente-christmas .ev-card-action { margin-top: 6px; }
  #essente-christmas .ev-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; padding: 28px 16px; }
  #essente-christmas .ev-benefits > li { border: 0; padding: 0 8px; font-size: 11px; font-size: clamp(11px, calc(10px + .2cqw), 13px); }
  #essente-christmas .ev-gift { display: flex; flex-direction: column; min-height: 0; }
  #essente-christmas .ev-gift::after { content: none; }
  #essente-christmas .ev-gift-copy { order: 0; width: 100%; padding: 28px 24px 0; }
  #essente-christmas .ev-gift h2 { max-width: 24ch; font-size: 26px; font-size: clamp(26px, 7.8cqw, 32px); }
  #essente-christmas .ev-gift-date { max-width: 36ch; }
  #essente-christmas .ev-gift-photo { order: 1; position: relative; inset: auto; margin-top: 10px; }
  #essente-christmas .ev-gift-photo img { position: static; width: 100%; height: auto; }
  #essente-christmas .ev-gift-photo img { -webkit-mask-image: none; mask-image: none; }
  #essente-christmas .ev-gift-photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 22%; background: linear-gradient(var(--ev-gift-bg), rgba(var(--ev-gift-fade-rgb),0)); }
}
/* Fotografie karet na vsech zarizenich. */
#essente-christmas .ev-card--novinka .ev-card-photo { background-image: url("images/card-01-novinka-600.webp"); background-image: -webkit-image-set(url("images/card-01-novinka-600.webp") 1x, url("images/card-01-novinka-960.webp") 2x); background-image: image-set(url("images/card-01-novinka-600.webp") 1x, url("images/card-01-novinka-960.webp") 2x); }
#essente-christmas .ev-card--bestseller .ev-card-photo { background-image: url("images/card-02-bestseller-600.webp"); background-image: -webkit-image-set(url("images/card-02-bestseller-600.webp") 1x, url("images/card-02-bestseller-960.webp") 2x); background-image: image-set(url("images/card-02-bestseller-600.webp") 1x, url("images/card-02-bestseller-960.webp") 2x); }
#essente-christmas .ev-card--pece .ev-card-photo { background-image: url("images/card-03-kompletni-pece-600.webp"); background-image: -webkit-image-set(url("images/card-03-kompletni-pece-600.webp") 1x, url("images/card-03-kompletni-pece-960.webp") 2x); background-image: image-set(url("images/card-03-kompletni-pece-600.webp") 1x, url("images/card-03-kompletni-pece-960.webp") 2x); }
#essente-christmas .ev-card--ritual .ev-card-photo { background-image: url("images/card-04-ritual-600.webp"); background-image: -webkit-image-set(url("images/card-04-ritual-600.webp") 1x, url("images/card-04-ritual-960.webp") 2x); background-image: image-set(url("images/card-04-ritual-600.webp") 1x, url("images/card-04-ritual-960.webp") 2x); }
#essente-christmas .ev-card--box .ev-card-photo { background-image: url("images/card-05-darkovy-box-600.webp"); background-image: -webkit-image-set(url("images/card-05-darkovy-box-600.webp") 1x, url("images/card-05-darkovy-box-960.webp") 2x); background-image: image-set(url("images/card-05-darkovy-box-600.webp") 1x, url("images/card-05-darkovy-box-960.webp") 2x); }
#essente-christmas .ev-card--muzi .ev-card-photo { background-image: url("images/card-06-muzi-600.webp"); background-image: -webkit-image-set(url("images/card-06-muzi-600.webp") 1x, url("images/card-06-muzi-960.webp") 2x); background-image: image-set(url("images/card-06-muzi-600.webp") 1x, url("images/card-06-muzi-960.webp") 2x); }

@container essente-christmas (min-width: 972px) {
  #essente-christmas .ev-card-copy { width: 59%; }
}
@container essente-christmas (max-width: 971.98px) {
  #essente-christmas .ev-card-copy { width: 80%; }
  #essente-christmas .ev-card-photo::after { background: linear-gradient(90deg, rgba(var(--ev-hero-fade-rgb),.98) 0%, rgba(var(--ev-hero-fade-rgb),.96) 38%, rgba(var(--ev-hero-fade-rgb),.86) 56%, rgba(var(--ev-hero-fade-rgb),.48) 70%, rgba(var(--ev-hero-fade-rgb),.16) 78%, rgba(var(--ev-hero-fade-rgb),0) 86%); }
}
/* D: mensi iPad zachovava fade76%; iPad747 a mobil maji sirsi fade86%. */
@media (min-width: 640px) and (max-width: 1279px) {
  @container essente-christmas (max-width: 971.98px) {
    #essente-christmas .ev-card-photo::after { background: linear-gradient(90deg, rgba(var(--ev-hero-fade-rgb),.98) 0%, rgba(var(--ev-hero-fade-rgb),.96) 32%, rgba(var(--ev-hero-fade-rgb),.84) 46%, rgba(var(--ev-hero-fade-rgb),.48) 60%, rgba(var(--ev-hero-fade-rgb),.12) 70%, rgba(var(--ev-hero-fade-rgb),0) 76%); }
  }
}

@container essente-christmas (min-width: 747px) and (max-width: 971.98px) {
  #essente-christmas .ev-card-photo::after { background: linear-gradient(90deg, rgba(var(--ev-hero-fade-rgb),.98) 0%, rgba(var(--ev-hero-fade-rgb),.96) 38%, rgba(var(--ev-hero-fade-rgb),.86) 56%, rgba(var(--ev-hero-fade-rgb),.48) 70%, rgba(var(--ev-hero-fade-rgb),.16) 78%, rgba(var(--ev-hero-fade-rgb),0) 86%); }
}

@media (prefers-reduced-motion: reduce) {
  #essente-christmas * { transition: none !important; }
}

/* E: explicitni zaloha pro starsi Chrome/WebView bez container queries/cqw. */
@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    #essente-christmas .ev-card-copy { width: 80%; }
    #essente-christmas .ev-card-photo::after { background: linear-gradient(90deg, rgba(var(--ev-hero-fade-rgb),.98) 0%, rgba(var(--ev-hero-fade-rgb),.96) 38%, rgba(var(--ev-hero-fade-rgb),.86) 56%, rgba(var(--ev-hero-fade-rgb),.48) 70%, rgba(var(--ev-hero-fade-rgb),.16) 78%, rgba(var(--ev-hero-fade-rgb),0) 86%); }
  }
  @media (min-width: 640px) and (max-width: 767px) {
    #essente-christmas .ev-card-photo::after { background: linear-gradient(90deg, rgba(var(--ev-hero-fade-rgb),.98) 0%, rgba(var(--ev-hero-fade-rgb),.96) 32%, rgba(var(--ev-hero-fade-rgb),.84) 46%, rgba(var(--ev-hero-fade-rgb),.48) 60%, rgba(var(--ev-hero-fade-rgb),.12) 70%, rgba(var(--ev-hero-fade-rgb),0) 76%); }
  }
  @media (min-width: 992px) {
    #essente-christmas .ev-card-copy { width: 59%; }
  }
}