.elementor-kit-4{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#E6BC3A;--e-global-color-text:#FFFFFF;--e-global-color-accent:#50C878;--e-global-color-df13b84:#12100D;--e-global-color-96b5a6b:#CCA818;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-df13b84 );}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}body.e-wc-message-notice .woocommerce-message .button, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .button{background-color:var( --e-global-color-secondary );background-image:var( --e-global-color-secondary );border-width:0px 0px 0px 0px;}body.e-wc-message-notice .woocommerce-message .button:hover, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .button:hover{background-color:var( --e-global-color-df13b84 );background-image:var( --e-global-color-df13b84 );}body.e-wc-info-notice .woocommerce-info .button, body.e-wc-info-notice .wc-block-components-notice-banner.is-info .button{background-color:var( --e-global-color-secondary );background-image:var( --e-global-color-secondary );}body.e-wc-info-notice .woocommerce-info .button:hover, body.e-wc-info-notice .wc-block-components-notice-banner.is-info .button:hover, body.e-wc-info-notice .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-info .woocommerce-Button:hover, body.e-wc-info-notice .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .wc-block-components-notice-banner.is-info .woocommerce-Button:hover{background-color:var( --e-global-color-df13b84 );background-image:var( --e-global-color-df13b84 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}body.e-wc-error-notice .woocommerce-error a.wc-backward, body.e-wc-error-notice .wc-block-components-notice-banner.is-error a.wc-backward{font-weight:600;}.e-wc-error-notice .woocommerce-error, .e-wc-error-notice .wc-block-components-notice-banner.is-error{--error-message-normal-links-color:var( --e-global-color-secondary );--error-message-hover-links-color:var( --e-global-color-accent );}.e-wc-message-notice .woocommerce-message, .e-wc-message-notice .wc-block-components-notice-banner.is-success{--message-message-text-color:#000000;--message-message-icon-color:var( --e-global-color-accent );--message-buttons-normal-text-color:var( --e-global-color-primary );--message-buttons-hover-text-color:var( --e-global-color-secondary );--message-border-type:solid;}body.e-wc-message-notice .woocommerce-message .restore-item, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item, body.e-wc-message-notice .woocommerce-message a:not([class]), body.e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]){font-weight:600;}.e-wc-message-notice .woocommerce-message .restore-item, .e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item, .e-wc-message-notice .woocommerce-message a:not([class]), .e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]){--notice-message-normal-links-color:var( --e-global-color-secondary );}.e-wc-message-notice .woocommerce-message .restore-item:hover, .e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item:hover, .e-wc-message-notice .woocommerce-message a:not([class]):hover, .e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]):hover{--notice-message-hover-links-color:var( --e-global-color-accent );}.e-wc-info-notice .woocommerce-info, .e-wc-info-notice .wc-block-components-notice-banner.is-info{--info-message-icon-color:var( --e-global-color-accent );--info-buttons-normal-text-color:var( --e-global-color-primary );--info-buttons-hover-text-color:var( --e-global-color-secondary );}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Popup DPD: čitateľné polia a popisky na tmavej téme */
.dpd-parcelshop-popup .dpd-parcelshop-popup__input,
.dpd-parcelshop-popup input[type="text"],
.dpd-parcelshop-popup select {
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 1px solid #ccc !important;
}

.dpd-parcelshop-popup .dpd-parcelshop-popup__input::placeholder {
  color: #777 !important;
  -webkit-text-fill-color: #777 !important;
}

/* Popisky (Mesto*, PSČ, Krajina) */
.dpd-parcelshop-popup .dpd-parcelshop-popup__label {
  color: #111 !important;
}

/* Prehliadač automaticky vyplnil údaje (svetlomodré pozadie) */
.dpd-parcelshop-popup input:-webkit-autofill,
.dpd-parcelshop-popup input:-webkit-autofill:hover,
.dpd-parcelshop-popup input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
}

/* Zoznam nájdených výdajných miest a hlášky */
.dpd-parcelshop-popup .dpd-parcelshop-popup__results,
.dpd-parcelshop-popup .dpd-parcelshop-popup__results *,
.dpd-parcelshop-popup .dpd-parcelshop-popup__response {
  color: #111 !important;
}



























/* =====================================================================
   FAFNIRIA – Diamond "under-light" glow + SVG icon check  (v8 · subtle · #d9a520)

   WHERE TO PASTE
   Same place as the buttons CSS (Elementor → Site Settings → Custom CSS,
   or Appearance → Customize → Additional CSS). Add it BELOW the buttons
   file – it does not touch any button.

   WHAT IT DOES
   1) Hero diamond (Elementor Icon widget, id b37c096)
      · soft golden aura behind the gem
      · warm pool of light on the "surface" under the gem
      · golden glow that follows the outline of the icon, stronger below it
      · very slow, very gentle "breathing" (5 s) – subtle, not shiny
      Works on any other icon too: add the class  fx-gem  to the widget
      (Advanced → CSS Classes).

   2) SVG check (all icon-box / icon / star icons)
      · same gold #d9a520 everywhere (they were #e6bc3a)
      · tiny glow on the "Ručná výroba / Prémiová kvalita / Doprava zdarma"
        check-circles so they belong to the same family as the diamond
      · SVGs can no longer be clipped, shrunk by flex layouts or blurred by
        sub-pixel positioning

   Every .elementor-kit-4 ends with :not(#fx) = extra weight, so these rules win
   over the colours set in the Elementor widget settings.
   ===================================================================== */


/* ---------- 0) Tweakables ---------- */
:root {
  --fx-gold: #d9a520;                 /* base gold (same as buttons)        */
  --fx-gold-hi: 240, 190, 60;         /* RGB of the bright glow core        */
  --fx-gold-rgb: 217, 165, 32;        /* RGB of #d9a520                     */
}


/* =====================================================================
   1) HERO DIAMOND – "under-light"
   ===================================================================== */

/* Anchor: the icon box. Layers sit behind the SVG (isolation keeps them
   inside this icon and never behind the hero background). */
html body :is(.elementor-element-b37c096, .fx-gem) .elementor-icon:not(#fx) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: var(--fx-gold);
  fill: var(--fx-gold);
}

/* Aura: wide, soft halo, centred slightly below the middle of the gem */
html body :is(.elementor-element-b37c096, .fx-gem) .elementor-icon:not(#fx)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle closest-side,
    rgba(var(--fx-gold-rgb), .15) 0%,
    rgba(var(--fx-gold-rgb), .06) 40%,
    rgba(var(--fx-gold-rgb), 0) 100%);
  animation: fxGemAura 5s ease-in-out infinite;
}

/* Under-light: a bright, flat pool of light on the surface below the gem */
html body :is(.elementor-element-b37c096, .fx-gem) .elementor-icon:not(#fx)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 7px);
  width: 160%;
  height: 22px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(255, 220, 120, .34) 0%,
    rgba(var(--fx-gold-rgb), .17) 42%,
    rgba(var(--fx-gold-rgb), 0) 100%);
  filter: blur(6px);
  animation: fxGemPool 5s ease-in-out infinite;
}

/* Glow that follows the SVG outline; the second shadow falls DOWN
   so the gem looks lit from below. */
html body :is(.elementor-element-b37c096, .fx-gem) .elementor-icon svg:not(#fx) {
  overflow: visible;
  fill: var(--fx-gold);
  filter:
    drop-shadow(0 0 3px rgba(var(--fx-gold-hi), .20))
    drop-shadow(0 5px 10px rgba(var(--fx-gold-rgb), .20));
  animation: fxGemGlow 5s ease-in-out infinite;
}

@keyframes fxGemGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px rgba(var(--fx-gold-hi), .16))
      drop-shadow(0 5px 10px rgba(var(--fx-gold-rgb), .16));
  }
  50% {
    filter:
      drop-shadow(0 0 4px rgba(var(--fx-gold-hi), .30))
      drop-shadow(0 6px 12px rgba(var(--fx-gold-rgb), .28));
  }
}

@keyframes fxGemAura {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

@keyframes fxGemPool {
  0%, 100% { opacity: .75; transform: translateX(-50%) scaleX(.96); }
  50%      { opacity: 1;   transform: translateX(-50%) scaleX(1.03); }
}


/* =====================================================================
   2) SVG CHECK – one gold for every icon
   ===================================================================== */

/* Icon boxes (the ✔ circles) and plain icon widgets */
html body :is(.elementor-widget-icon-box, .elementor-widget-icon) .elementor-icon:not(#fx) {
  color: var(--fx-gold);
  fill: var(--fx-gold);
  overflow: visible;                 /* otherwise a theme can clip the glow into a visible square */
}

html body :is(.elementor-widget-icon-box, .elementor-widget-icon) .elementor-icon svg:not(#fx) {
  fill: var(--fx-gold);
  flex: none;                        /* flex layouts can no longer squash the icon */
  overflow: visible;                 /* glow and thin strokes are never clipped    */
  shape-rendering: geometricPrecision;
}

/* Tiny glow on the check-circles only (the diamond has its own, stronger glow) */
html body .elementor-widget-icon-box .elementor-icon svg:not(#fx) {
  filter: drop-shadow(0 0 5px rgba(var(--fx-gold-rgb), .45));
}

/* Star ratings (reviews) – full stars in the same gold, empty stars untouched */
html body .elementor-widget-star-rating .elementor-star-full:not(#fx) {
  color: var(--fx-gold);
}
html body .elementor-widget-star-rating .elementor-star-full:not(#fx)::before {
  color: var(--fx-gold);
}
html body .elementor-widget-star-rating .elementor-star-full:not(#fx) svg {
  fill: var(--fx-gold);
}


/* =====================================================================
   3) Reduced motion (system setting): keep the glow, stop the breathing
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html body :is(.elementor-element-b37c096, .fx-gem) .elementor-icon:not(#fx)::before,
  html body :is(.elementor-element-b37c096, .fx-gem) .elementor-icon:not(#fx)::after,
  html body :is(.elementor-element-b37c096, .fx-gem) .elementor-icon svg:not(#fx) {
    animation: none;
  }
}





























/* =====================================================================
   FAFNIRIA – Premium Gold Buttons, site-wide  (v15 · + Kontakt and O nás page buttons)

   WHAT'S NEW IN v15
   · The buttons on the pages  /kontakt/  and  /o-nas/  now get exactly the
     same gold button as the rest of the site:
         Napísať e-mail · Zavolať · Naše produkty · Machové obrazy · Kontakt · O nás
     Those pages are built with a Custom HTML widget (<div class="fx">) and
     their buttons are plain links:  <a class="btn">  (filled)  and
     <a class="btn o">  (outline).  The .elementor-kit-4  .fx a.btn  was added to
     every button list below (base, frame, glint, hover, pressed, focus,
     disabled, mobile, reduced motion). Both variants – filled and outline –
     now share the same gold look, same hover, same press effect.
   · The line icons inside the e-mail / phone buttons keep their outline
     drawing and simply follow the button's text colour (light gold at rest,
     black on hover) – see the small rule at the end of section 1.
   · Size of these page buttons: section 8 → "Page buttons". They start at
     the medium size. To make them hero-size, delete that block and add
     .fx a.btn to the "Large" list in section 8.
   · Nothing else was changed. The old page styles (pill shape, 2 px border,
     system font) are overridden by this file, so the inline <style> of the
     two pages does not need to be edited.

   v14 (kept)  – "Nájdi svoj poklad" on ONE line on phones
   · The hero button (fx-btn-lg, Elementor size L / XL) stays on ONE line on
     every phone, like on the PC version. It is never wrapped to two lines
     and never clipped.
   · Font size and letter-spacing are NOT changed – the letters are exactly
     as big as before (12.8 px on a 320 px phone → 15 px from ~375 px up).
   · How it works: the label is locked to one line (white-space: nowrap) and
     the button is allowed to be as wide as its text needs. The side padding
     is the flexible part: it is fluid and a little slimmer, set by
     --fx-hero-px-m (see section 9c). Bigger numbers = more air left/right.
   · Optional: add the CSS class  fx-one-line  to any OTHER Elementor button
     widget (Advanced → CSS Classes) to give it the same one-line behaviour.

   v13 (kept)  – The label can no longer be cut off. Before, phone buttons
     were forced onto ONE line (white-space: nowrap); when the button was
     narrower than the text, both ends were clipped ("ÁJDI SVOJ POKLA").
     Now ordinary buttons stay on one line whenever the text fits and drop to
     two centred lines only when it really doesn't. The big hero button
     (fx-btn-lg, Elementor size L / XL) has a fluid font, letter-spacing and
     padding that scale with the screen.

   v12 (kept)  – Buttons have more space on the left and right of the text
     on phones and small phones. One number controls it:
     :root → --fx-mobile-px  (bigger = more air). If a long label ever gets
     clipped on a tiny screen, lower the numbers.

   v11 (kept)  – Mini cart (slide-out cart): "Zobraziť košík" and the
   checkout button are exactly the same width AND height, however many
   lines the labels need. Checkout label: "Pokladňa" → "Prejsť do pokladne"
   (change it in :root → --fx-checkout-label; for a permanent text change
   use Loco Translate: string "Checkout").

   v10 (kept)  – Poppins, bigger text – the gold look is the same
   · Font     : Poppins (clean, modern, very readable,
                supports all Slovak letters: Š Č Ž Ť Ď Ľ Ň Ĺ Ŕ Ô Ä)
   · Size     : about +2 px on every button (13 → 15 px medium,
                15 → 17 px hero) and about +1 to +1.5 px on mobile
   · Colour   : label is a slightly lighter gold (--fx-text) than the edge
                (--fx-gold) – more contrast on the dark skin
   · Glow     : tighter glow + a thin dark shadow under the letters, so the
                text stays crisp instead of blurry
   · Spacing  : letter-spacing trimmed a little, because bigger letters
                need less air (.16em → .12em on medium buttons)
   · Height   : buttons are 2–4 px taller to match the bigger text

   LOADING THE FONT
   If Poppins already loads on your site (Elementor global fonts, theme),
   delete the @import line below. If you're not sure, leave it – it's
   harmless. Note: inside Elementor → Site Settings → Custom CSS an @import
   can be ignored; then load Poppins once in the site <head>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
   Until the font loads, the fallback (Segoe UI / system font) is shown.

   ONE file for every main button on the site:
   · Elementor buttons   – Nájdi svoj poklad, VIDIEŤ VIAC, Obrazy, Náramky …
   · Elementor forms     – submit buttons
   · Elementor mini cart – "view cart" / "checkout" buttons
   · WooCommerce         – Pridať do košíka (home, shop, related),
                           single product, cart (Použiť kupón, Potvrdiť
                           zmeny, Pokračovať v objednávke), checkout,
                           notices, my-account
   · WPForms             – newsletter / contact submit
   · Kontakt + O nás     – custom-HTML buttons  .fx a.btn  (new in v15)

   WHERE TO PASTE
   Same place as your current button CSS – replace the old CSS with this file.
   It has to be the SITE-WIDE place (Elementor → Site Settings → Custom CSS,
   or Appearance → Customize → Additional CSS) so it loads on every page,
   including /kontakt/ and /o-nas/.

   NAKUPOVAŤ (hero)
   Widget → Advanced → CSS Classes → type:  fx-btn-lg
   (big hero size; Elementor's own Size = L / XL does the same)

   SIZES (tokens used below)
   · medium  (default)  – VIDIEŤ VIAC, Obrazy, Použiť kupón, forms,
                          Kontakt / O nás page buttons …
   · compact            – product-card buttons, notices
   · large              – hero button (.fx-btn-lg), single-product Add to cart
   · wide               – checkout / place-order (full width)

   HOW IT BEATS ELEMENTOR / WOOCOMMERCE / WPFORMS / PAGE STYLES
   Every .elementor-kit-4 ends with :not(#fx). That adds ID-level specificity, so
   these rules win over widget settings, the theme, plugins and the inline
   <style> of the Kontakt / O nás pages. !important is only used to lock the
   text colour in each state.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap");


/* ---------- 0) Global tweakables ---------- */

/* Lets the browser fade smoothly between the dark skin and the gold metal.
   (If a very old browser ignores this, the colours simply flip instantly.) */
@property --fx-a {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

:root {
  --fx-font: "Poppins", "Segoe UI", system-ui, sans-serif;  /* delete this line to inherit the theme font */
  --fx-weight: 600;                                         /* 500 = lighter, 700 = bolder */
  --fx-checkout-label: "Prejsť do pokladne";                /* text of the mini-cart checkout button */
  --fx-mobile-px: clamp(22px, 8vw, 36px);                   /* left/right padding of Elementor + page buttons on phones (min, scales with screen, max) */
  --fx-radius: 4px;                                         /* corner radius */
  --fx-gold: #d9a520;                                       /* brand gold: edges, frames, glow */
  --fx-text: #ecc044;                                       /* label colour on the dark button (lighter gold = easier to read) */
  --fx-ink: #000000;                                        /* text colour on the gold hover state */
  --fx-dark-top: 84, 64, 18;                                /* skin – top, golden bronze (R, G, B) */
  --fx-dark-mid: 44, 34, 14;                                /* skin – middle             (R, G, B) */
  --fx-dark-bot: 22, 17, 9;                                 /* skin – bottom, near black (R, G, B) */
}


/* ---------- 1) Base: dark skin over gold metal ---------- */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .fx a.btn
):not(#fx) {
  position: relative;
  isolation: isolate;            /* shine layers sit behind the text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--fx-h, 50px);
  /* left padding is larger by the letter-spacing → text is optically centred */
  padding: 10px var(--fx-px, 32px) 10px calc(var(--fx-px, 32px) + var(--fx-track, .12em));
  max-width: 100%;
  border: 1px solid #d9a520;   /* solid gold edge */
  border-radius: var(--fx-radius, 4px);
  overflow: hidden;              /* clips the glint to the rounded corners */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: none;               /* cancels Elementor "grow" animation that sticks after a click */

  /* Typography */
  font-family: var(--fx-font, "Poppins", "Segoe UI", system-ui, sans-serif);
  font-size: var(--fx-fs, 15px);
  font-weight: var(--fx-weight, 600);
  font-style: normal;
  line-height: 1.3;
  letter-spacing: var(--fx-track, .12em);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-wrap: balance;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* thin dark edge under the letters (crispness) + soft gold glow */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 10px rgba(217, 165, 32, .35);

  /* Light gold text at rest (turns black on hover / press – see sections 4 and 5) */
  color: var(--fx-text, #ecc044) !important;

  /* Skin: --fx-a = 1 → dark skin covers the metal; 0 → gold metal shows through */
  --fx-a: 1;
  background-color: rgb(22, 17, 9);
  background-image:
    /* 1. dark skin (fades out on hover) */
    linear-gradient(180deg,
      rgba(var(--fx-dark-top, 84, 64, 18), var(--fx-a)) 0%,
      rgba(var(--fx-dark-mid, 44, 34, 14), var(--fx-a)) 52%,
      rgba(var(--fx-dark-bot, 22, 17, 9), var(--fx-a)) 100%),
    /* 2. soft top gloss */
    linear-gradient(180deg,
      rgba(255, 255, 255, .42) 0%,
      rgba(255, 255, 255, .10) 46%,
      rgba(0, 0, 0, 0) 54%,
      rgba(80, 50, 0, .20) 100%),
    /* 3. wide gold gradient built around #d9a520 (shimmers on hover) */
    linear-gradient(105deg,
      #b9891a 0%,
      #d9a520 12%,
      #eecb5e 28%,
      #d9a520 42%,
      #b88714 56%,
      #e6bb3e 72%,
      #f8e29a 86%,
      #d9a520 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 250% 100%;
  background-position: 0 0, 0 0, 0% 0;

  /* Bright gold top edge, dark bottom bevel, gold halo ring, cast shadow, gold glow */
  box-shadow:
    inset 0 1px 0 rgba(246, 220, 133, .6),
    inset 0 -2px 0 rgba(0, 0, 0, .55),
    0 0 0 3px rgba(217, 165, 32, .16),
    0 10px 24px -8px rgba(0, 0, 0, .85),
    0 0 28px 2px rgba(217, 165, 32, .32);

  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1),
    box-shadow .35s ease,
    filter .35s ease,
    border-color .35s ease,
    color .35s ease,
    text-shadow .35s ease,
    --fx-a .35s ease,
    background-position .8s cubic-bezier(.2, .7, .2, 1);
}

/* Text / icons inside the button follow the button's colour
   (light gold at rest → black on hover / press).
   The Kontakt / O nás buttons (.fx a.btn) are deliberately NOT in this list:
   "fill: currentColor" would turn their outline icons into solid blobs.
   They have their own small rule right below. */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button
):not(#fx) * {
  color: inherit !important;
  fill: currentColor !important;
}

/* Kontakt / O nás: outline icons (envelope, phone) keep their drawing and
   just follow the button's text colour – light gold at rest, black on hover.
   (The pages colour the outline-button icon separately; this makes it
   match the label in every state.) */
html body .fx a.btn:not(#fx) svg {
  color: inherit !important;
  stroke: currentColor !important;
  flex: 0 0 auto;
}

/* Elementor wraps the label in a span – make sure the theme can't give it another font.
   (Only the label span, so icon fonts such as Font Awesome keep working.) */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button
):not(#fx) .elementor-button-text {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}


/* ---------- 2) Engraved inner frame (coin / ornament feel) ----------
   A clear gold line inside the gold edge (double frame) on the dark button;
   turns into the dark engraved line on gold. Skipped while WooCommerce shows its own loading / "added"
   icon on ::after. */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .fx a.btn
):not(#fx):not(.loading):not(.added)::after {
  content: "";
  position: absolute;
  inset: var(--fx-inset, 4px);
  z-index: -2;
  pointer-events: none;
  border: 1px solid rgba(217, 165, 32, .6);
  border-radius: calc(var(--fx-radius, 4px) - 2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  transition: inset .35s ease, border-color .35s ease, box-shadow .35s ease;
}


/* ---------- 3) Light glint (rests off-screen, plays once on hover) ---------- */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .fx a.btn
):not(#fx)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .15) 30%,
    rgba(255, 255, 255, .85) 50%,
    rgba(255, 255, 255, .15) 70%,
    transparent 100%);
  transform: translateX(-160%) skewX(-22deg);
  transition: none;  /* after the mouse leaves, the glint snaps back silently */
}


/* ---------- 4) HOVER – colours flip: gold metal + black text ----------
   The dark skin fades away, the text turns black, light travels across
   the metal, the button lifts and a golden aura ring and glow appear.
   Mouse devices only, so touch screens never get a "stuck" hover. */
@media (hover: hover) and (pointer: fine) {
  html body :is(
    .elementor-widget-button a.elementor-button,
    .elementor-widget-form button.elementor-button,
    .elementor-menu-cart__footer-buttons a.elementor-button,
    :is(.woocommerce, .woocommerce-page) :is(a, button).button,
    .single_add_to_cart_button,
    .wpforms-form button.wpforms-submit,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .fx a.btn
  ):not(#fx):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    --fx-a: 0;
    transform: translateY(-3px);
    border-color: #f6dc85;
    color: var(--fx-ink, #000000) !important;
    text-shadow: 0 1px 0 rgba(255, 236, 160, .55);
    filter: brightness(1.08) saturate(1.06);
    background-position: 0 0, 0 0, 100% 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -2px 0 rgba(95, 62, 0, .32),
      0 0 0 4px rgba(217, 165, 32, .24),
      0 18px 34px -10px rgba(0, 0, 0, .9),
      0 0 46px 6px rgba(240, 180, 40, .55);
  }

  html body :is(
    .elementor-widget-button a.elementor-button,
    .elementor-widget-form button.elementor-button,
    .elementor-menu-cart__footer-buttons a.elementor-button,
    :is(.woocommerce, .woocommerce-page) :is(a, button).button,
    .single_add_to_cart_button,
    .wpforms-form button.wpforms-submit,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .fx a.btn
  ):not(#fx):hover:not(:disabled):not(.disabled):not([aria-disabled="true"])::before {
    transform: translateX(380%) skewX(-22deg);
    transition: transform .85s cubic-bezier(.3, .6, .2, 1);
  }

  html body :is(
    .elementor-widget-button a.elementor-button,
    .elementor-widget-form button.elementor-button,
    .elementor-menu-cart__footer-buttons a.elementor-button,
    :is(.woocommerce, .woocommerce-page) :is(a, button).button,
    .single_add_to_cart_button,
    .wpforms-form button.wpforms-submit,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .fx a.btn
  ):not(#fx):not(.loading):not(.added):hover:not(:disabled):not(.disabled):not([aria-disabled="true"])::after {
    inset: calc(var(--fx-inset, 4px) - 1px);
    border-color: rgba(70, 44, 0, .5);
    box-shadow: 0 1px 0 rgba(255, 240, 170, .4);
  }
}


/* ---------- 5) Pressed – gold, pushed into the surface ----------
   Also the "tap" look on phones (no hover there). */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .fx a.btn
):not(#fx):active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  --fx-a: 0;
  transform: translateY(1px) scale(.985);
  border-color: #a8790e;
  color: var(--fx-ink, #000000) !important;
  text-shadow: 0 1px 0 rgba(255, 236, 160, .55);
  filter: brightness(.97);
  box-shadow:
    inset 0 3px 8px rgba(70, 42, 0, .6),
    inset 0 0 14px rgba(110, 70, 0, .35),
    0 0 0 2px rgba(217, 165, 32, .3),
    0 2px 8px rgba(0, 0, 0, .7),
    0 0 16px rgba(217, 165, 32, .3);
}

html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .fx a.btn
):not(#fx):not(.loading):not(.added):active:not(:disabled):not(.disabled):not([aria-disabled="true"])::after {
  border-color: rgba(70, 44, 0, .5);
  box-shadow: 0 1px 0 rgba(255, 240, 170, .4);
}


/* ---------- 6) Keyboard focus ---------- */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .fx a.btn
):not(#fx):focus-visible {
  outline: 2px solid #f3d57a;
  outline-offset: 4px;
}


/* ---------- 7) Disabled (e.g. "Potvrdiť zmeny" before the cart changes) ----------
   Dark skin, dimmed – clearly not clickable, no hover effects. */
html body :is(
  .elementor-widget-button a.elementor-button,
  .elementor-widget-form button.elementor-button,
  .elementor-menu-cart__footer-buttons a.elementor-button,
  :is(.woocommerce, .woocommerce-page) :is(a, button).button,
  .single_add_to_cart_button,
  .wpforms-form button.wpforms-submit,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .fx a.btn
):not(#fx):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.6);
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(246, 220, 133, .3),
    inset 0 -2px 0 rgba(0, 0, 0, .45);
}


/* ---------- 8) Size tokens ----------
   Only variables here (no layout rules), so they never fight the base rule.
   --fx-h = min height, --fx-fs = font size, --fx-track = letter spacing,
   --fx-px = side padding, --fx-inset = inner-frame offset.
   The "-m" values are used on mobile (≤ 767 px).
   Medium (default) values live in the base rule:
   50 px high · 15 px text · .12em spacing · mobile 46 px · 13.5 px · .08em */

/* Compact: product cards, WooCommerce notices */
html body :is(
  ul.products li.product :is(a, button).button,
  .woocommerce-notices-wrapper .button,
  .woocommerce-message .button,
  .woocommerce-info .button
):not(#fx) {
  --fx-h: 46px;   --fx-fs: 14px;    --fx-track: .1em;    --fx-px: 24px;  --fx-inset: 3px;
  --fx-h-m: 44px; --fx-fs-m: 12.5px; --fx-track-m: .05em; --fx-px-m: 12px;
}

/* Large: hero button (class fx-btn-lg), Elementor size L/XL, single-product Add to cart */
html body :is(
  .elementor-widget-button.fx-btn-lg a.elementor-button,
  .elementor-widget-button a.elementor-size-lg,
  .elementor-widget-button a.elementor-size-xl,
  .single_add_to_cart_button
):not(#fx) {
  --fx-h: 58px;   --fx-fs: 17px;    --fx-track: .16em;   --fx-px: 48px;  --fx-inset: 4px;
  --fx-h-m: 54px; --fx-fs-m: 15px;  --fx-track-m: .12em; --fx-px-m: 34px;
}

/* Wide: full-width cart / checkout buttons with longer labels */
html body :is(
  a.checkout-button,
  [id="place_order"],
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button
):not(#fx) {
  --fx-h: 58px;   --fx-fs: 15.5px;  --fx-track: .1em;    --fx-px: 20px;  --fx-inset: 4px;
  --fx-h-m: 54px; --fx-fs-m: 14px;  --fx-track-m: .06em; --fx-px-m: 14px;
}

/* Page buttons: Kontakt (/kontakt/) and O nás (/o-nas/) – <a class="btn"> and <a class="btn o">.
   Same as the medium default; change the numbers here to resize only these buttons.
   (On phones the font size and side padding come from section 9 / 9c; only the height is set here.) */
html body .fx a.btn:not(#fx) {
  --fx-h: 50px;   --fx-fs: 15px;    --fx-track: .12em;   --fx-px: 32px;  --fx-inset: 4px;
  --fx-h-m: 46px;
}




/* ---------- 9) Mobile (≤ 767 px) ---------- */
@media (max-width: 767px) {
  html body :is(
    .elementor-widget-button a.elementor-button,
    .elementor-widget-form button.elementor-button,
    .elementor-menu-cart__footer-buttons a.elementor-button,
    :is(.woocommerce, .woocommerce-page) :is(a, button).button,
    .single_add_to_cart_button,
    .wpforms-form button.wpforms-submit,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .fx a.btn
  ):not(#fx) {
    /* Set the variables here so they override any other definition */
    --fx-fs-m: clamp(11px, 3.4vw, 13.5px);   /* scales with screen width */
    --fx-px-m: 12px;
    --fx-track-m: .04em;

    box-sizing: border-box !important;
    width: auto;
    max-width: 100% !important;
    min-height: var(--fx-h-m, 46px);
    padding: 10px var(--fx-px-m) 10px calc(var(--fx-px-m) + var(--fx-track-m)) !important;
    font-size: var(--fx-fs-m) !important;
    letter-spacing: var(--fx-track-m) !important;
    white-space: normal !important;           /* one line if it fits, two centred lines if not – never cut off */
    overflow-wrap: break-word;
    text-align: center;
  }

  /* Inner Elementor wrappers: inherit the size, may wrap instead of being clipped */
  html body .elementor-widget-button a.elementor-button :is(.elementor-button-content-wrapper, .elementor-button-text):not(#fx) {
    font-size: inherit !important;
    letter-spacing: inherit !important;
    white-space: normal !important;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
  }
}

/* Very small phones (≤ 360 px): a bit tighter still */
@media (max-width: 360px) {
  html body :is(
    .elementor-widget-button a.elementor-button,
    .fx a.btn
  ):not(#fx) {
    --fx-px-m: 8px;
    --fx-track-m: .02em;
  }
}


/* ---------- 9c) Phone padding + hero button on ONE line (v14) ----------
   This block comes after the two blocks above, so it replaces their
   12 px / 8 px side padding.

   1) All Elementor buttons and the Kontakt / O nás page buttons (.fx a.btn):
      roomy side padding on phones, set once in :root → --fx-mobile-px.

   2) HERO button "Nájdi svoj poklad" (class fx-btn-lg, Elementor size L / XL;
      also any Elementor button widget that has the class  fx-one-line):
      · the label is locked to ONE line (white-space: nowrap)
      · the button may grow as wide as the text needs (max-width: none), so
        the label is never wrapped and never clipped
      · font size and letter-spacing are the same as before (not smaller)
      · the side padding is the flexible part: --fx-hero-px-m
        (16 px on a 320 px phone → 21.6 px on 360 px → 30 px on 500 px).
        Want more air left/right? raise the numbers. If the button ever
        looks too wide on a very small phone, lower the first number. */
@media (max-width: 767px) {
  html body :is(
    .elementor-widget-button a.elementor-button,
    .fx a.btn
  ):not(#fx) {
    --fx-px-m: var(--fx-mobile-px, 28px);
  }

  html body :is(
    .elementor-widget-button.fx-btn-lg a.elementor-button,
    .elementor-widget-button a.elementor-size-lg,
    .elementor-widget-button a.elementor-size-xl,
    .elementor-widget-button.fx-one-line a.elementor-button
  ):not(#fx) {
    --fx-hero-px-m: clamp(16px, 6vw, 30px);  /* side padding of the hero button on phones */

    --fx-fs-m: clamp(12px, 4vw, 15px);       /* unchanged: 12.8 px at 320 px, 14.4 px at 360 px, 15 px from 375 px */
    --fx-track-m: .08em;                     /* unchanged */
    --fx-px-m: var(--fx-hero-px-m);

    white-space: nowrap !important;          /* one line, always */
    width: auto !important;
    max-width: none !important;              /* grow with the text instead of wrapping or clipping it */
    flex-shrink: 0;
  }

  /* Inner Elementor wrappers of the same buttons: no wrapping either */
  html body :is(
    .elementor-widget-button.fx-btn-lg a.elementor-button,
    .elementor-widget-button a.elementor-size-lg,
    .elementor-widget-button a.elementor-size-xl,
    .elementor-widget-button.fx-one-line a.elementor-button
  ):not(#fx) :is(.elementor-button-content-wrapper, .elementor-button-text) {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
}




/* ---------- 9b) Mini cart (slide-out cart): two EVEN buttons ----------
   "Zobraziť košík" + checkout sit side by side.
   · two columns of exactly the same width (minmax(0, 1fr) – a long label
     can no longer push one column wider than the other)
   · both buttons stretch to the same height, so a one-line label next to a
     two-line label can't make them uneven
   · smaller side padding → the labels get more room and wrap cleanly
     (e.g.  PREJSŤ DO / POKLADNE  and  ZOBRAZIŤ / KOŠÍK) */
html body .elementor-menu-cart__footer-buttons:not(#fx) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

html body .elementor-menu-cart__footer-buttons a.elementor-button:not(#fx) {
  align-self: stretch;
  height: auto;
  margin: 0;
  --fx-h: 62px;   --fx-fs: 15px;     --fx-track: .08em;   --fx-px: 10px;  --fx-inset: 3px;
  --fx-h-m: 58px; --fx-fs-m: 13.5px; --fx-track-m: .06em; --fx-px-m: 8px;
}

/* New label for the checkout button: the old word is shrunk to nothing and
   the new text is drawn in its place (same font, size, colour and hover
   behaviour as every other button). */
html body .elementor-menu-cart__footer-buttons a.elementor-button--checkout:not(#fx) .elementor-button-text {
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
}

html body .elementor-menu-cart__footer-buttons a.elementor-button--checkout:not(#fx) .elementor-button-text::after {
  content: var(--fx-checkout-label, "Prejsť do pokladne");
  font-size: var(--fx-fs, 15px);
  letter-spacing: var(--fx-track, .08em);
  line-height: 1.3;
}

@media (max-width: 767px) {
  html body .elementor-menu-cart__footer-buttons a.elementor-button--checkout:not(#fx) .elementor-button-text::after {
    font-size: var(--fx-fs-m, 13.5px);
    letter-spacing: var(--fx-track-m, .06em);
  }
}


/* ---------- 10) "View cart" link that appears after adding a product ---------- */
html body a.added_to_cart {
  color: #ecc044;
  font-family: var(--fx-font, "Poppins", "Segoe UI", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 165, 32, .4);
  transition: color .2s ease, border-color .2s ease;
}
html body a.added_to_cart:hover {
  color: #f6dc85;
  border-bottom-color: rgba(246, 220, 133, .75);
}


/* ---------- 11) Reduced motion (system setting) ----------
   Colours still flip on hover, but instantly: no lift, no glint. */
@media (prefers-reduced-motion: reduce) {
  html body :is(
    .elementor-widget-button a.elementor-button,
    .elementor-widget-form button.elementor-button,
    .elementor-menu-cart__footer-buttons a.elementor-button,
    :is(.woocommerce, .woocommerce-page) :is(a, button).button,
    .single_add_to_cart_button,
    .wpforms-form button.wpforms-submit,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .fx a.btn
  ):not(#fx) {
    transition:
      box-shadow .01s, filter .01s, border-color .01s,
      color .01s, text-shadow .01s, --fx-a .01s;
  }

  html body :is(
    .elementor-widget-button a.elementor-button,
    .elementor-widget-form button.elementor-button,
    .elementor-menu-cart__footer-buttons a.elementor-button,
    :is(.woocommerce, .woocommerce-page) :is(a, button).button,
    .single_add_to_cart_button,
    .wpforms-form button.wpforms-submit,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .fx a.btn
  ):not(#fx):is(:hover, :active):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    transform: none;
  }

  html body :is(
    .elementor-widget-button a.elementor-button,
    .elementor-widget-form button.elementor-button,
    .elementor-menu-cart__footer-buttons a.elementor-button,
    :is(.woocommerce, .woocommerce-page) :is(a, button).button,
    .single_add_to_cart_button,
    .wpforms-form button.wpforms-submit,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .fx a.btn
  ):not(#fx)::before {
    display: none;
  }
}/* End custom CSS */