/* =========================================================================
 * Cenník / objednávka page — concept styling pass.
 *
 * Enqueued ONLY on the cennik page (podcestami_enqueue_selector_js). The whole
 * checkout is wrapped in .pc-cennik by woocommerce/checkout/form-checkout.php;
 * every selector below is scoped under .pc-cennik and all design tokens live on
 * .pc-cennik itself, so this file is self-contained and cannot leak onto the
 * rest of the site. It deliberately layers ON TOP of css/style.css (which still
 * styles the billing form/grid/toggle); this file adds the surrounding concept
 * bands and the selector cards, and tunes the summary + buttons.
 *
 * Maps the static concept (dada7a64-concept1.html) onto the live WooCommerce
 * DOM. Brand: blue #07198C, orange #FF9F0D, Domine headings / Barlow body,
 * asymmetric pill buttons (40px 40px 40px 9px), 24px card radius.
 * ====================================================================== */

/* === Strip the underlying page chrome so our bands read as the whole page
 * (body gets .pc-cennik-page via body_class). Mirrors the proven order-pay
 * treatment in status.css: hide the "Cenník" page-title hero + breadcrumb and
 * the site footer (we render our own footer band), keep the header nav. === */
body.pc-cennik-page .breadcrumb-wrap,
body.pc-cennik-page .woocommerce-breadcrumb,
body.pc-cennik-page > footer.ehf-template-gainlove2,
body.pc-cennik-page .ehf-footer,
body.pc-cennik-page footer#colophon.site-footer,
body.pc-cennik-page #colophon{ display:none !important; }

/* The theme header is .header-absolute (white text meant to overlay a dark
 * hero). Our hero band IS dark, so the header can stay transparent over it —
 * but the page-title hero it expected is gone, so anchor the header in flow and
 * give it a solid dark bg so the white nav stays legible. */
body.pc-cennik-page .header-absolute{ position:relative !important; background:#0A0E1A !important; }

/* Active nav item = "Cenník" (we're on this page). Paint it the brand orange so it
 * clearly stands out from the white nav links. Covers the WP current-item classes. */
body.pc-cennik-page .header-absolute .current-menu-item > a,
body.pc-cennik-page .header-absolute .current_page_item > a,
body.pc-cennik-page .header-absolute .current-menu-ancestor > a{ color:#FF9F0D !important; }

/* === Full-bleed escape ===
 * The theme caps page content at .col-full {max-width:1290px} and pads/margins
 * #page .site-content. Our bands must span the viewport. We reuse the theme's
 * own full-bleed trick (width:100vw; shift back by 50%) on the .pc-cennik
 * wrapper, and zero the site-content gutters/margins on this page so the dark
 * bands meet the header and footer with no white seams. */
body.pc-cennik-page #page .site-content{ margin-top:0 !important; margin-bottom:0 !important; padding-left:0 !important; padding-right:0 !important; }
body.pc-cennik-page .col-full{ max-width:none !important; padding-left:0 !important; padding-right:0 !important; }
body.pc-cennik-page #main.site-main,
body.pc-cennik-page #primary{ margin:0 !important; padding:0 !important; }
body.pc-cennik-page article.page,
body.pc-cennik-page .hentry{ margin:0 !important; }
.pc-cennik{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* ============================ tokens + base ============================ */
.pc-cennik{
  --blue:#07198C;
  --orange:#FF9F0D;
  --ink:#000000;
  --body:#707070;
  --muted:#AAAAAA;
  --field:#F5F5F5;
  --border:#E5E5E5;
  --green:#3DA35D;
  --cyan:#1FA7E0;
  --radius:24px;

  font-family:'Barlow',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--body);
  -webkit-font-smoothing:antialiased;
}
.pc-cennik *{ box-sizing:border-box; }
/* Neutralize the theme's global heading chrome (90px h1, 0.8em margins,
 * text-transform + letter-spacing from the Elementor kit) so our concept sizes
 * are authoritative. !important is used narrowly here because the theme sets
 * these on the bare h1/h2 selectors and via CSS vars that otherwise leak in. */
.pc-cennik h1,
.pc-cennik h2,
.pc-cennik h3{
  font-family:'Domine',Georgia,serif;
  font-weight:500;
  color:var(--ink);
  margin:0;
  line-height:1.18;
  letter-spacing:-0.01em !important;
  text-transform:none !important;
  text-decoration:none;
}

.pc-cennik .wrap{ max-width:1080px; margin:0 auto; padding:0 32px; }

/* ---------- signature asymmetric pill button ---------- */
.pc-cennik .pc-pill{
  display:inline-flex; align-items:center; gap:14px;
  font-family:'Barlow',sans-serif; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  font-size:15px; line-height:1;
  border:none; cursor:pointer;
  padding:18px 30px;
  border-radius:40px 40px 40px 9px;
  white-space:nowrap; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.pc-cennik .pc-pill:hover{ transform:translateY(-2px); }
.pc-cennik .pc-pill:active{ transform:translateY(0); }
.pc-cennik .pc-pill .ico{ width:26px; height:26px; flex:none; }
.pc-cennik .pc-pill--orange{ background:var(--orange); color:#1a1300; box-shadow:0 8px 22px rgba(255,159,13,.32); }
.pc-cennik .pc-pill--orange:hover{ box-shadow:0 12px 28px rgba(255,159,13,.42); }
.pc-cennik .pc-pill--blue{ background:var(--blue); color:#fff; box-shadow:0 8px 22px rgba(7,25,140,.28); }
.pc-cennik .pc-pill--blue:hover{ box-shadow:0 12px 28px rgba(7,25,140,.38); }
.pc-cennik .pc-pill--ghost{ background:#fff; color:var(--blue); border:1.5px solid var(--blue); padding:14px 24px; border-radius:34px 34px 34px 8px; }
.pc-cennik .pc-pill--ghost:hover{ background:var(--blue); color:#fff; }
.pc-cennik .pc-pill--sm{ font-size:13px; padding:13px 22px; border-radius:30px 30px 30px 7px; }

/* ---------- eyebrow ---------- */
.pc-cennik .pc-eyebrow{
  font-family:'Barlow',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:13px;
  color:var(--orange); margin:0 0 14px;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.pc-cennik .pc-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }

/* ============================ bands ============================ */
.pc-cennik .pc-band{ position:relative; padding:74px 0; }
.pc-cennik .pc-band > .wrap{ position:relative; z-index:3; }
.pc-cennik .pc-band--white{ background:#fff; }
.pc-cennik .pc-band--dark{ background:#0A0E1A; color:#fff; }
.pc-cennik .pc-band--bluewash{ background:#F3F5FC; }
.pc-cennik .pc-band--hero{ background:#0A0E1A; padding:46px 0 60px; }
.pc-cennik .pc-band--bluewash::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(7,25,140,.10); }

/* dotted texture + decorative dots */
.pc-cennik .pc-tex-dots{ position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(currentColor 1.3px, transparent 1.4px); background-size:26px 26px; }
.pc-cennik .pc-tex-dots--light{ color:rgba(255,255,255,.07); }
.pc-cennik .pc-tex-dots--blue{ color:rgba(7,25,140,.06); }
.pc-cennik .mask-tr{ -webkit-mask-image:radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 55%); mask-image:radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 55%); }
.pc-cennik .mask-bl{ -webkit-mask-image:radial-gradient(120% 120% at 0% 100%, #000 0%, transparent 55%); mask-image:radial-gradient(120% 120% at 0% 100%, #000 0%, transparent 55%); }

/* ---------- section heads inside bands ---------- */
.pc-cennik .pc-section > h2{ font-size:36px !important; line-height:1.18 !important; margin:0 0 8px !important; }
.pc-cennik .pc-lede{ font-size:18px; margin:0 0 30px; max-width:62ch; color:var(--body); }
.pc-cennik p{ margin:0 0 1em; }
.pc-cennik .pc-eyebrow,
.pc-cennik .pc-lede,
.pc-cennik .pc-ph-note,
.pc-cennik .crumb{ margin-bottom:0; }
.pc-cennik .pc-eyebrow{ margin:0 0 14px; }
.pc-cennik .pc-lede{ margin:0 0 30px; }

/* ============================ hero ============================ */
.pc-cennik .pc-hero{
  position:relative; overflow:hidden;
  background:var(--blue); color:#fff;
  border-radius:44px 44px 44px 16px;
  padding:72px 72px 64px;
  box-shadow:0 40px 80px -40px rgba(7,25,140,.6);
}
.pc-cennik .pc-hero .crumb{ font-family:'Barlow',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:13px; color:var(--orange); margin:0 0 22px; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.pc-cennik .pc-hero .crumb::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.pc-cennik .pc-hero h1{ color:#fff !important; font-size:66px !important; line-height:1.06 !important; font-weight:500; max-width:13ch; letter-spacing:-0.02em !important; margin:0 !important; }
.pc-cennik .pc-hero h1 .dot{ color:var(--orange); }
.pc-cennik .pc-hero .sub{ font-family:'Barlow',sans-serif; color:rgba(255,255,255,.78); font-size:18px; margin:14px 0 0; max-width:48ch; }
.pc-cennik .pc-hero .hero-cta{ margin-top:34px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pc-cennik .pc-hero .steps{ display:flex; gap:10px; margin-top:36px; flex-wrap:wrap; }
.pc-cennik .pc-hero .step{ display:flex; align-items:center; gap:11px; font-family:'Barlow',sans-serif; font-weight:600; font-size:14px; color:rgba(255,255,255,.92); background:rgba(255,255,255,.10); padding:10px 18px 10px 10px; border-radius:999px; }
.pc-cennik .pc-hero .step .n{ width:26px; height:26px; border-radius:50%; background:#fff; color:var(--blue); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:13px; }
.pc-cennik .pc-hero .step.is-muted{ color:rgba(255,255,255,.55); }
.pc-cennik .pc-hero .step.is-muted .n{ background:rgba(255,255,255,.22); color:#fff; }
.pc-cennik .pc-hero .deco{ position:absolute; border-radius:50%; z-index:1; }
.pc-cennik .pc-hero .deco.d1{ width:18px; height:18px; background:var(--cyan); top:54px; right:130px; }
.pc-cennik .pc-hero .deco.d2{ width:14px; height:14px; background:var(--orange); bottom:70px; right:74px; }
.pc-cennik .pc-hero .deco.d3{ width:220px; height:220px; border:1px solid rgba(255,255,255,.12); right:-70px; top:-70px; }
.pc-cennik .pc-hero .deco.d4{ width:120px; height:120px; border:1px solid rgba(255,255,255,.09); right:180px; bottom:-50px; }
.pc-cennik .pc-hero .hero-inner{ position:relative; z-index:2; }

/* ============================ feature list (Čo objednávate) ============== */
.pc-cennik .pc-feature-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:15px; }
.pc-cennik .pc-feature-list li{ display:flex; align-items:flex-start; gap:14px; font-size:15.5px; line-height:1.5; color:var(--body); }
.pc-cennik .pc-feature-list li .rico{ width:28px; height:28px; flex:none; border-radius:50%; background:rgba(61,163,93,.12); color:var(--green); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.pc-cennik .pc-feature-list li .rico svg{ width:15px; height:15px; }
.pc-cennik .pc-feature-list li b{ display:block; color:var(--ink); font-weight:700; font-size:15.5px; margin-bottom:1px; }

/* ============================ trust strip (Bez rizika) ============================ */
.pc-cennik .pc-trust-head{ margin-bottom:30px; }
.pc-cennik .pc-trust-head .pc-eyebrow{ color:var(--orange); }
.pc-cennik .pc-trust-head h2{ color:#fff !important; font-size:30px !important; line-height:1.18 !important; margin:0 !important; max-width:20ch; }
.pc-cennik .pc-trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pc-cennik .pc-trust-item{ display:flex; align-items:flex-start; gap:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:20px; padding:22px 24px; }
.pc-cennik .pc-trust-item .ti-ico{ width:42px; height:42px; flex:none; border-radius:50%; background:rgba(255,159,13,.14); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.pc-cennik .pc-trust-item .ti-ico svg{ width:22px; height:22px; }
.pc-cennik .pc-trust-item .ti-tx{ font-family:'Barlow',sans-serif; font-weight:600; font-size:15.5px; line-height:1.4; color:rgba(255,255,255,.92); }

/* Process steps (3-step "ako to prebieha" band): numbered badge + icon + stacked
 * title/description. Reuses the dark .pc-trust-item shell. */
.pc-cennik .pc-process-item{ position:relative; flex-direction:column; gap:14px; padding-top:26px; }
.pc-cennik .pc-process-step{
  position:absolute; top:18px; right:20px;
  font-family:'Barlow',sans-serif; font-weight:700; font-size:14px; line-height:1;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--orange); background:rgba(255,159,13,.12); border:1px solid rgba(255,159,13,.4);
}
.pc-cennik .pc-process-tx{ font-family:'Barlow',sans-serif; }
.pc-cennik .pc-process-tx b{ display:block; color:#fff; font-size:17px; font-weight:700; line-height:1.3; margin-bottom:7px; }
.pc-cennik .pc-process-tx{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.78); font-weight:400; }

/* ============================ package selector ============================
 * Markup from inc/selector.php: .pc-selector > a.pc-card (BASIC = .pc-card--highlight,
 * current = .pc-card--selected) each with .pc-radio-dot + .pc-card-body
 * (.pc-card-name, .pc-card-desc, .pc-card-price). 6376 = .pc-card--quote. */
.pc-cennik .pc-selector{ display:flex; flex-direction:column; gap:16px; }
.pc-cennik .pc-selector a{ text-decoration:none; }

/* BASIC highlighted lead-in card — same horizontal layout as the tier rows
 * (body on the left, price on the right), but in the dominant orange treatment:
 * orange border + glow, orange eyebrow, orange title, optional inline range chip. */
.pc-cennik .pc-card--highlight{
  position:relative; order:-1;
  background:#fff; border:2.5px solid var(--orange); border-radius:var(--radius);
  padding:26px 32px; margin-bottom:10px; cursor:pointer;
  box-shadow:0 14px 40px -20px rgba(255,159,13,.55);
  display:flex; align-items:center; gap:24px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pc-cennik .pc-card--highlight:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -18px rgba(255,159,13,.65); }
.pc-cennik .pc-card--highlight.pc-card--selected{ background:rgba(255,159,13,.05); }
.pc-cennik .pc-card--highlight .pc-radio-dot{ width:28px; height:28px; flex:none; border-radius:50%; border:2.5px solid var(--orange); position:relative; }
.pc-cennik .pc-card--highlight.pc-card--selected .pc-radio-dot::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--orange); }
.pc-cennik .pc-card--highlight .pc-card-body{ flex:1 1 auto; min-width:0; }
/* Orange eyebrow above the title: a small orange dot, then "NEVIETE KDE ZAČAŤ?",
 * matching the concept and the blue .pc-tiers-subhead dot below. The dot is drawn
 * as a 7px radial-gradient bullet at the left of the ::before, with padding making
 * room for it — keeps the dot small and vertically centered with the text. */
.pc-cennik .pc-card--highlight .pc-card-body::before{
  content:"Neviete kde začať?";
  font-family:'Barlow',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:12.5px;
  color:var(--orange); margin:0 0 8px; display:flex; align-items:center;
  padding-left:16px;
  background:radial-gradient(circle at 3.5px 50%, var(--orange) 3.5px, transparent 4px) left center no-repeat;
}
/* Dominant orange title, with the range chip inline beside it. */
.pc-cennik .pc-card--highlight .pc-card-name{ font-family:'Domine',serif; font-weight:600; font-size:26px; color:var(--orange); line-height:1.2; display:block; margin:0 0 6px; }
.pc-cennik .pc-card--highlight .pc-card-desc{ font-size:15px; color:var(--body); line-height:1.5; display:block; margin:0; max-width:62ch; }
/* Price on the RIGHT (not stacked under the text), matching the tier rows. */
.pc-cennik .pc-card--highlight .pc-card-price{ flex:none; align-self:center; text-align:right; font-family:'Barlow',sans-serif; font-weight:700; color:var(--ink); font-size:32px; line-height:1; white-space:nowrap; min-width:170px; }

/* subheading injected before the non-BASIC rows */
.pc-cennik .pc-tiers-subhead{
  font-family:'Barlow',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:13px;
  color:var(--blue); margin:8px 0 4px; display:flex; align-items:center; gap:10px;
}
.pc-cennik .pc-tiers-subhead::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }

/* standard tier rows */
.pc-cennik .pc-card:not(.pc-card--highlight){
  display:flex; align-items:center; gap:24px;
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:26px 30px; cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.pc-cennik .pc-card:not(.pc-card--highlight):hover{ border-color:#c9cee8; box-shadow:0 6px 20px rgba(7,25,140,.06); }
.pc-cennik .pc-card:not(.pc-card--highlight).pc-card--selected{ border-color:var(--blue); background:rgba(7,25,140,.025); box-shadow:0 8px 26px rgba(7,25,140,.10); }
.pc-cennik .pc-card:not(.pc-card--highlight) .pc-radio-dot{ width:26px; height:26px; flex:none; border-radius:50%; border:2px solid var(--border); position:relative; transition:border-color .18s ease; }
.pc-cennik .pc-card:not(.pc-card--highlight).pc-card--selected .pc-radio-dot{ border-color:var(--blue); }
.pc-cennik .pc-card:not(.pc-card--highlight).pc-card--selected .pc-radio-dot::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--blue); }
.pc-cennik .pc-card:not(.pc-card--highlight) .pc-card-body{ flex:1; min-width:0; }
.pc-cennik .pc-card:not(.pc-card--highlight) .pc-card-name{ font-family:'Barlow',sans-serif; font-weight:700; color:var(--ink); font-size:21px; line-height:1.3; display:block; }
.pc-cennik .pc-card:not(.pc-card--highlight) .pc-card-desc{ color:var(--body); font-size:15px; margin-top:4px; display:block; }
/* range (tier rows) = a blue pill, like the concept. No "·" prefix dot. */
.pc-cennik .pc-card-name .pc-card-range{
  display:inline-flex; align-items:center;
  font-weight:700; color:var(--blue);
  background:rgba(7,25,140,.08); border-radius:999px;
  padding:3px 12px; margin-left:6px; font-size:14px; letter-spacing:.01em;
  vertical-align:middle;
}
/* On the BASIC highlight card the range is NOT a pill — it's plain text in our
 * recognizable serif, black, inline after the orange title (per the concept). */
.pc-cennik .pc-card--highlight .pc-card-name .pc-card-range{
  display:inline; padding:0; margin-left:10px; border-radius:0; background:none;
  font-family:'Domine',serif; font-weight:600; font-size:22px; color:var(--ink);
  letter-spacing:0; vertical-align:baseline;
}
.pc-cennik .pc-card:not(.pc-card--highlight) .pc-card-price{ flex:none; display:flex; align-items:center; justify-content:flex-end; align-self:center; text-align:right; font-family:'Barlow',sans-serif; font-weight:700; color:var(--ink); font-size:30px; line-height:1; white-space:nowrap; min-width:170px; }

/* Individuál — price-on-request: just the "Cena na vyžiadanie" label, no button
 * (per concept). The .pc-price-custom span carries the text. */
.pc-cennik .pc-card--quote .pc-card-price{ min-width:170px; }
.pc-cennik .pc-card--quote .pc-card-price,
.pc-cennik .pc-card-price .pc-price-custom{ font-family:'Barlow',sans-serif; font-weight:700; font-size:17px; color:var(--ink); white-space:nowrap; }

/* ceny orientačné note */
.pc-cennik .pc-ph-note{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-top:18px; }
.pc-cennik .pc-ph-note .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }

/* ============================ billing band ============================ */
/* css/style.css already styles the toggle + .woocommerce-billing-fields card +
 * grid; here we just make sure the band intro spacing matches the concept. The
 * mode switch sits directly under the lede. */
.pc-cennik .pc-section--form .pc-mode-switch{ margin-top:4px; }

/* ============================ summary band (Zhrnutie objednávky) =========
 * Custom review-order.php renders a .pc-summary card inside #order_review; the
 * gateway list + #place_order follow (gateways hidden by CSS). */
.pc-cennik #order_review_heading{ display:none !important; }   /* concept uses the band h2 instead */

/* Neutralize WooCommerce's default two-column checkout float — our template
 * puts #customer_details and #order_review in separate full-width bands. */
.pc-cennik #customer_details,
.pc-cennik #order_review,
.pc-cennik #order_review_heading{ width:100% !important; float:none !important; }

/* #order_review is a bare transparent container — no border/box (the .pc-summary
 * div below is the only visible card). Some themes/WC add a border here. */
.pc-cennik #order_review{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; max-width:none; width:100%; }

/* The .pc-summary IS the white card; #payment (consents + button) sits below it
 * on the band, transparent — matching the concept. */
.pc-cennik .pc-summary{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 32px 32px; box-shadow:0 24px 50px -32px rgba(7,25,140,.22);
}
.pc-cennik .pc-summary.is-basic{ border-color:var(--orange); box-shadow:0 24px 50px -32px rgba(255,159,13,.5); }

.pc-cennik .pc-summary-head{ position:relative; padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--border); }
.pc-cennik .pc-summary.is-basic .pc-summary-head{ border-bottom-color:rgba(255,159,13,.25); }
/* Range chip, top-right of the summary head (e.g. "do 15 pozemkov") — blue pill,
 * matching the selector tier-row chip and the concept. Pulled from _pc_rozsah. */
.pc-cennik .pc-summary-range{
  position:absolute; top:0; right:0;
  display:inline-flex; align-items:center;
  font-family:'Barlow',sans-serif; font-weight:700; font-size:14px; color:var(--blue);
  background:rgba(7,25,140,.08); border-radius:999px; padding:6px 16px; white-space:nowrap;
}
.pc-cennik .pc-summary-eyebrow{
  font-family:'Barlow',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:12px;
  color:var(--orange); margin:0 0 10px; display:flex; align-items:center; gap:9px;
}
.pc-cennik .pc-summary-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }
.pc-cennik .pc-summary-title{ font-family:'Domine',serif; font-weight:500; font-size:25px !important; line-height:1.2 !important; color:var(--ink); margin:0 0 6px !important; }
.pc-cennik .pc-summary-desc{ font-family:'Barlow',sans-serif; font-size:14.5px; color:var(--body); margin:0; line-height:1.5; }

/* total (left) + coupon (right) on one wide row, like the concept */
.pc-cennik .pc-summary-foot{ display:flex; align-items:flex-start; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.pc-cennik .pc-total{ min-width:0; flex:1 1 auto; }
.pc-cennik .pc-coupon{ flex:0 0 auto; align-self:flex-start; }
.pc-cennik .pc-total-label{ font-family:'Barlow',sans-serif; font-weight:700; color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.pc-cennik .pc-total-amount{ font-family:'Barlow',sans-serif; font-weight:800; color:var(--blue); font-size:46px; line-height:1; white-space:nowrap; letter-spacing:-.01em; }
.pc-cennik .pc-total-amount .woocommerce-Price-amount{ color:inherit; font-size:inherit; font-weight:inherit; }
.pc-cennik .pc-total-amount--req{ font-size:30px; color:var(--blue); }
.pc-cennik .pc-total-net{ font-family:'Barlow',sans-serif; font-size:14px; color:var(--body); margin-top:8px; white-space:nowrap; }
.pc-cennik .pc-total-net b{ color:var(--ink); font-weight:700; }
.pc-cennik .pc-total-net .sep{ color:var(--muted); margin:0 8px; }
.pc-cennik .pc-total-note{ font-family:'Barlow',sans-serif; font-size:13px; color:var(--body); margin:8px 0 0; max-width:42ch; line-height:1.45; }

.pc-cennik .pc-coupon{ display:flex; flex-direction:column; gap:7px; width:300px; max-width:100%; }
.pc-cennik .pc-coupon-label{ font-family:'Barlow',sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pc-cennik .pc-coupon-line{ display:flex; gap:9px; }
.pc-cennik .pc-coupon-line input.input-text{ flex:1; min-width:0; background:#fff; border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-family:'Barlow',sans-serif; font-size:14px; color:var(--ink); }
.pc-cennik .pc-coupon-line input.input-text:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(7,25,140,.10); }
.pc-cennik .pc-coupon-apply{
  font-family:'Barlow',sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px;
  border:none; cursor:pointer; background:var(--blue); color:#fff;
  padding:10px 16px; border-radius:30px 30px 30px 7px; white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease;
}
.pc-cennik .pc-coupon-apply:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(7,25,140,.28); }
.pc-cennik .pc-coupon-apply:disabled{ opacity:.6; cursor:default; }
.pc-cennik .pc-coupon-applied{ display:inline-flex; align-items:center; gap:7px; font-family:'Barlow',sans-serif; font-size:12.5px; font-weight:700; color:var(--green); margin-top:2px; }
.pc-cennik .pc-coupon-applied .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); }

/* payment block — concept shows NO gateway picker on this page (payment happens
 * on the order-pay page). The gateway list is kept in the DOM but hidden, so
 * WooCommerce still has its silently-selected method to process the order; only
 * the summary + consents + the single button remain visible. The #payment block
 * sits OUTSIDE the white #order_review card, on the band — like the concept's
 * consents + button below the summary card. */
/* Stack the payment block top-to-bottom: consents first, then the order button row
 * below them (never side by side). align-items:stretch so each row is full width. */
.pc-cennik #payment{ background:transparent !important; margin-top:30px; padding:0; border:0; border-radius:0; display:flex; flex-direction:column; align-items:stretch; }
.pc-cennik #payment ul.payment_methods{ display:none !important; }

/* The three siblings (consents, #place_order, .pc-order-note) all live inside the
 * one .place-order container (that's where WC's before/after-submit hooks fire). We
 * make it a WRAPPING flex row: the consents are forced to a full-width first row, so
 * the button + note wrap onto the second row, inline with each other — giving the
 * vertical flow: checkboxes on top, then [button  note] underneath. */
.pc-cennik #payment .place-order{ padding:0 !important; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:22px 26px; }

/* Consents — branded checkbox list (markup: .pc-consents > label.pc-consent >
 * input + .pc-consent-tx). Square white boxes, blue links, orange required star.
 * flex-basis:100% → it occupies the whole first row, pushing the button below it. */
.pc-cennik #payment .pc-consents{ flex:0 0 100%; display:flex; flex-direction:column; gap:14px; margin:0; }
.pc-cennik #payment .pc-consent{ display:flex; align-items:center; gap:14px; margin:0; cursor:pointer; }
.pc-cennik #payment .pc-consent-tx{ font-family:'Barlow',sans-serif; font-size:15px; color:var(--body); line-height:1.45; }
.pc-cennik #payment .pc-consent-tx a,
.pc-cennik #payment .pc-consent-tx strong{ color:var(--blue); font-weight:700; text-decoration:none; }
.pc-cennik #payment .pc-consent-tx a:hover{ text-decoration:underline; }
.pc-cennik #payment .pc-req{ color:var(--orange); font-weight:700; }
.pc-cennik #payment .pc-consent input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:26px; height:26px; flex:none; margin:0;
  border:2px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; position:relative;
  transition:border-color .15s ease, background .15s ease;
}
.pc-cennik #payment .pc-consent input[type="checkbox"]:hover{ border-color:var(--blue); }
.pc-cennik #payment .pc-consent input[type="checkbox"]:checked{ background:var(--blue); border-color:var(--blue); }
.pc-cennik #payment .pc-consent input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:8px; top:3.5px; width:6px; height:12px;
  border:solid #fff; border-width:0 2.6px 2.6px 0; transform:rotate(45deg);
}
/* Unchecked-but-required, after a submit attempt (JS adds .pc-consent-error):
 * the box turns red with a soft red ring + the label text goes red, so it's clear
 * which consent still needs ticking. Cleared the moment the box is checked. */
.pc-cennik #payment .pc-consent-error input[type="checkbox"]{
  border-color:#D6452B; background:#FFF5F3; box-shadow:0 0 0 3px rgba(214,69,43,.14);
}
.pc-cennik #payment .pc-consent-error .pc-consent-tx{ color:#D6452B; }
.pc-cennik #payment .pc-consent-error .pc-consent-tx a,
.pc-cennik #payment .pc-consent-error .pc-consent-tx strong{ color:#D6452B; }

/* The orange "Objednať" pill (with a circular arrow icon) + the helper note sit
 * inline on the row below the consents (see .place-order flex layout above). */
.pc-cennik #payment #place_order,
.pc-cennik #place_order{
  margin:0; order:0;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  font-family:'Barlow',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:15px; line-height:1; border:none; cursor:pointer;
  background:var(--orange); color:#1a1300;
  /* Same asymmetric shape as the hero "Začať objednávku" pill (bottom-left less round). */
  padding:17px 32px 17px 22px; border-radius:40px 40px 40px 9px;
  box-shadow:0 12px 26px -8px rgba(255,159,13,.55);
  transition:transform .15s ease, box-shadow .2s ease;
  float:none; height:auto; width:auto;
}
/* Circular arrow icon inside the button (left of the label), like the concept. */
.pc-cennik #payment #place_order::before,
.pc-cennik #place_order::before{
  content:""; width:30px; height:30px; flex:none; border-radius:50%;
  border:1.6px solid currentColor;
  background:no-repeat center / 15px 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.pc-cennik #payment #place_order:hover,
.pc-cennik #place_order:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -8px rgba(255,159,13,.65); }
/* Helper note beside the button. */
.pc-cennik #payment .pc-order-note{
  order:1; margin:0; flex:1 1 240px; max-width:34ch;
  font-family:'Barlow',sans-serif; font-size:14px; line-height:1.5; color:var(--muted);
}

/* ============================ footer band ============================ */
.pc-cennik .pc-footer{ border-top:1px solid var(--border); background:#fff; padding:60px 0; }
.pc-cennik .pc-foot-grid{ display:grid; grid-template-columns:auto 1.5fr 1fr 0.9fr; gap:44px; align-items:start; }
.pc-cennik .pc-foot-logo img{ width:112px; height:112px; display:block; object-fit:contain; }
.pc-cennik .pc-foot-h{ font-family:'Domine',serif; font-weight:500; color:var(--ink); font-size:24px !important; line-height:1.25 !important; margin:0 0 22px !important; max-width:16ch; }
.pc-cennik .pc-foot-org{ color:var(--body); font-size:15px; margin:0 0 16px; }
.pc-cennik .pc-foot-addr{ color:var(--body); font-size:15px; line-height:1.7; margin:0 0 16px; }
.pc-cennik .pc-foot-mail a{ color:var(--body); text-decoration:none; }
.pc-cennik .pc-foot-mail a:hover{ color:var(--blue); }
.pc-cennik .pc-foot-h4{ font-family:'Domine',serif; font-weight:500; color:var(--ink); font-size:20px !important; line-height:1.25 !important; margin:0 0 20px !important; }
.pc-cennik .pc-foot-laws{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.pc-cennik .pc-foot-laws li a{ color:var(--body); font-size:15px; text-decoration:none; transition:color .15s ease; }
.pc-cennik .pc-foot-laws li a:hover{ color:var(--blue); }
.pc-cennik .pc-socials{ display:flex; gap:18px; align-items:center; }
.pc-cennik .pc-socials a{ color:#1a1a1a; display:inline-flex; transition:color .15s ease, transform .15s ease; }
.pc-cennik .pc-socials a:hover{ color:var(--blue); transform:translateY(-2px); }
.pc-cennik .pc-socials svg{ width:30px; height:30px; }
.pc-cennik .pc-foot-bottom{ margin-top:56px; color:var(--muted); font-size:15px; }
.pc-cennik .pc-foot-bottom b{ color:var(--body); font-weight:400; }

/* ============================ responsive ============================ */
@media (max-width:820px){
  .pc-cennik .wrap{ padding:0 18px; }
  .pc-cennik .pc-band{ padding:52px 0; }
  .pc-cennik .pc-band--hero{ padding:32px 0 44px; }
  .pc-cennik .pc-hero{ padding:38px 24px; border-radius:32px 32px 32px 12px; }
  .pc-cennik .pc-hero h1{ font-size:38px !important; }
  .pc-cennik .pc-hero .sub{ font-size:16px; }
  .pc-cennik .pc-section > h2{ font-size:28px !important; }
  .pc-cennik .pc-lede{ font-size:16px; }
  .pc-cennik .pc-trust-grid{ grid-template-columns:1fr; }

  /* selector cards stack */
  .pc-cennik .pc-card--highlight{ flex-direction:row; gap:16px; padding:22px 20px; }
  .pc-cennik .pc-card--highlight .pc-radio-dot{ margin-top:30px; }
  .pc-cennik .pc-card--highlight .pc-card-name{ font-size:20px; }
  .pc-cennik .pc-card:not(.pc-card--highlight){ flex-wrap:wrap; padding:20px 20px; gap:12px 16px; }
  .pc-cennik .pc-card:not(.pc-card--highlight) .pc-card-body{ flex:1 1 70%; }
  .pc-cennik .pc-card:not(.pc-card--highlight) .pc-card-price{ min-width:0; text-align:left; width:auto; font-size:24px; flex:0 0 auto; margin-left:42px; }

  /* summary card stacks total over coupon */
  .pc-cennik #order_review{ padding:24px 18px; }
  .pc-cennik .pc-summary-foot{ flex-direction:column; gap:24px; }
  .pc-cennik .pc-coupon{ width:100%; }
  .pc-cennik .pc-total-amount{ font-size:38px; }
  .pc-cennik .pc-summary-title{ font-size:22px !important; }

  .pc-cennik #payment #place_order,
  .pc-cennik #place_order{ width:100%; }

  .pc-cennik .pc-foot-grid{ grid-template-columns:1fr; gap:32px; }
}

/* very small phones */
@media (max-width:480px){
  .pc-cennik .pc-hero h1{ font-size:32px !important; }
  .pc-cennik .pc-card--highlight{ flex-direction:column; gap:12px; }
  .pc-cennik .pc-card--highlight .pc-radio-dot{ margin-top:0; }
  .pc-cennik .pc-card:not(.pc-card--highlight) .pc-card-price{ margin-left:0; }
}

/* ===================== "Začať objednávku" scroll target =====================
 * The hero CTA smooth-scrolls to #pc-tiers (JS handler in js/pc-selector.js,
 * which also subtracts the fixed-header height). scroll-margin-top is the CSS
 * fallback offset if the JS path is ever bypassed (e.g. a direct ?#pc-tiers
 * deep-link), so the section never lands hidden under a fixed header. The
 * subtle one-time fade-in is a light touch on arrival, suppressed for users who
 * prefer reduced motion. Presentation only. */
#pc-tiers{ scroll-margin-top:96px; }
@media (prefers-reduced-motion: no-preference){
  #pc-tiers:target{ animation:pc-tiers-in .45s ease-out both; }
  @keyframes pc-tiers-in{
    from{ opacity:.72; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
}