/* style.css */

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Barlow Condensed', sans-serif; /* Or similar clean font */
    background-color: #f8f9fa;
}

/* Sticky wrapper holds header + promo bar together */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* 2. THE HEADER BAR (The black container) */
.site-header {
    height: 70px;
    background-color: #172124;
    display: flex;
    align-items: center;
    padding-left: 20px;
    overflow: visible;
}

/* Promo bar */
.promo-bar {
    background-color: #bd8c00;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px 0 16px;
    position: relative;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    opacity: 1;
}

.promo-bar span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.07em;
    text-align: center;
}

.promo-bar u {
    text-underline-offset: 3px;
}

.promo-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.promo-close:hover {
    opacity: 1;
}

.promo-bar.hidden {
    height: 0;
    opacity: 0;
    pointer-events: none;
}
/* Row of brand logos. Flex + nowrap so a narrow phone scales the logos
   down instead of wrapping the second one onto its own line. */
.header-logo {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(10px, 3vw, 20px);
    min-width: 0;
}

.header-logo img,

.liberty-logo-class {
    /* Scales with the viewport so both logos always share one row; holds
       the original 60px once there is room for it (~460px wide and up). */
    height: clamp(34px, 13vw, 60px) !important;
    width: auto !important;
    max-width: 100% !important;
    /* Center it perfectly in the black bar */
    display: block;

    /* Spacing comes from the flex gap above, not per-image margins */
    margin: 0 !important;
    padding: 0 !important;

    /* Fix the clipping issue */
    object-fit: contain !important;
}
/* Intro Section */
.intro-section {
    height: 440px;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.intro-img {
    width: 100%;
    max-width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
}

.intro-img img{
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
/* The Expanding Row */
.expanding-wrapper {
    display: flex;
    height: 430px; /* Adjust based on your needs */
    width: 100%;
    overflow: hidden;
    background: none !important; 
    background-color: transparent !important;
    border: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    flex-direction: row;
}

/* Each Column Base */
.exp-col {
     
    position: relative;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    overflow: hidden;
    filter: grayscale(14%); /* Turns everything to B&W by default */
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease; /* Adds filter to the transition */
/* 1. All columns start at flex: 1 */
    flex: 1.2;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* This tells the browser: blend the gradient with the image below it */
    background-blend-mode: normal !important;
}

/* Individual Column Colors from your Image */
.col-novinky { background-color: #ffffff; color: white; }
.col-elektro { background-color: #dbfaf2; color: white; }
.col-mayo { background-color: #e8e0c9; color: white; } 
.col-liberty { background-color: #e8e0c9; color: white; }
.col-trojkolky { background-color: #f0f0f0; color: white; }
.col-komponenty { background-color: #172124; color: white; }

body {
    font-family: 'Barlow Condensed', sans-serif;
    background-color: #ffffff;
    color: white;
}

.barlow-condensed-semibold {
  font-weight: 600;
  font-style: normal;
}
.label-vertical {
    opacity: 1;
    visibility: visible;
    position: absolute;
    /* 1. Use Writing Mode to flip the text flow naturally */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    
    bottom:0px;
    right:0px;

    /* 3. Styling */
    color: white;
    font-size: clamp(1.1rem, 4vh, 2.0rem); /* Responsive font size based on height */
    font-weight: 550;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 20; 
    pointer-events: none;
    transition: opacity 0.3s ease;
        
    margin: 0;
    padding: 14px 3px ; 
}

/* Label rectangle colours match each column's link buttons.

   col-mayo reuses col-liberty's gold rather than clashing with it: the two
   never appear on the same page. BICYKLE MAYO runs on the MAYO homepage,
   where there is no col-liberty at all, and Liberty's own col-mayo block is
   commented out in its index.html.

   col-novinky is absent on purpose — it is the column that starts expanded
   and its label is hidden at rest (see the Novinky special rule further
   down), so a background would never be seen. col-komponenty has none yet:
   its label still sits straight on the photograph. */
.col-elektro   .label-vertical { background: #172124; }
.col-liberty   .label-vertical { background: #bd8c00; }
.col-mayo      .label-vertical { background: #bd8c00; }
.col-trojkolky .label-vertical { background: #080808; }


/* 1. THE CONTAINER: right strip only, so images on the left stay visible */
.content-horizontal {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.4s ease;
}

.col-komponenty .content-horizontal { width: 35%; }

/* 3. THE LINKS: fill the container width, equal height, wrapping text */
.content-horizontal a {
    color: white !important;
    text-decoration: none !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 530;
    line-height: 1.2;
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    padding: 1px 14px;
    background: rgba(23, 33, 36, 0.72);
    transition: background 0.2s ease, color 0.2s ease;
}

/* Per-column button colours */
.col-elektro    .content-horizontal a { background: #172124; }
.col-liberty    .content-horizontal a { background: #bd8c00; }
.col-trojkolky  .content-horizontal a { background: #000000; }
.col-mayo .content-horizontal a { background: #bd8c00; }

/* 4. THE HOVER EFFECT */
.content-horizontal a:hover {
    background: #ffffff;
    color: #172124 !important;
}


/* Show when expanded */
.exp-col:hover .content-horizontal,
.col-novinky:not(.expanding-wrapper:hover) .content-horizontal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;


}


/* 1. Default: Show vertical labels for all columns */
.label-vertical {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease;
}

/* 2. When a specific column is hovered (expanded), hide its vertical label */
.exp-col:hover .label-vertical {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. The "Novinky" Special Rule: 
   When NO ONE is hovering the menu, Novinky is expanded, so hide its label. */
.expanding-wrapper:not(:hover) .col-novinky .label-vertical {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide labels when column is expanded */
.exp-col:hover .label-vertical,
.col-novinky:not(.expanding-wrapper:hover) .label-vertical {
    opacity: 0;
}
/* --- THE EXPANDING LOGIC --- */



/* 2. FORCE NOVINKY TO BE EXPANDED ON LOAD */
.col-novinky {
    /* Resting width, as a share of the wrapper: this column takes
       F / (F + siblings), and every sibling is an .exp-col at flex:1.2.

       THE TWO HOMEPAGES HAVE DIFFERENT COLUMN COUNTS, so no single value
       gives the same percentage on both:

           liberty index.html   6 columns  ->  5 siblings = 6.0
           mayo    index.html   4 columns  ->  3 siblings = 3.6

       At the current flex:3.6 that works out as 37.5% of the wrapper on
       LIBERTY and 50.0% on MAYO. Tuning this by eye on one page will not
       give you the same look on the other — check both.

       Desktop-at-rest only. Hovering the wrapper drops this column to
       flex:1 (rule 3 below), hovering any column sets flex:4, and under
       768px .exp-col switches to flex:none with a fixed height, so none
       of those paths depend on this number. */
    flex: 3.8;
    background-color: #ffffff;
}

/* 3. The Promo Content (Hidden by default) */
.col-novinky .content-novinky {
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* 4. Show Promo Content ONLY when HOVERED (Expanded) */
.col-novinky:hover .content-novinky {
    opacity: 1;
    visibility: visible;
}

/* 5. Special Case: When the whole section is NOT hovered, 
   Novinky is expanded by default. We want PROMO visible and LABEL hidden here. */
.expanding-wrapper:not(:hover) .col-novinky .content-novinky {
    opacity: 1;
    visibility: visible;
}
/*.expanding-wrapper:not(:hover) .col-novinky .label-vertical {
    opacity: 1 !important;
    visibility: visible !important;
}*/

.promo-text {
     position: absolute;
    /* Pin to the bottom left corner */
    left: 14px;        
    bottom: 20px; /* Adjust this so it doesn't overlap your vertical labels */
    width: auto;
    max-width: 400px;;
    color: white !important;
    text-decoration: none !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3.5rem; 
    font-weight: 530;
    line-height: 1.55;
    display: block;
    white-space: nowrap;
    filter: drop-shadow(-3px 6px 3px rgba(0,0,0,0.3));

    /* Responsive font size: Min 1.5rem, Scales with width, Max 3rem */
    font-size: clamp(1.5rem, 8vw, 3rem) !important; 
    line-height: 1.2;
    white-space: normal; /* Allows text to wrap into 2 lines if needed */

  
}


/*.promo-display {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5 !important;

    /* ADD THIS TO BRING IT FORWARD */


/*.promo-display img {
filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.777)) !important;
}
/* 3. THE "SWITCH" LOGIC
   When the wrapper is hovered, shrink the default (Novinky) 
   UNLESS Novinky itself is being hovered. */
.expanding-wrapper:hover .col-novinky {
    flex: 1.2;
}

/* 4. EXPAND WHATEVER IS CURRENTLY HOVERED */
.exp-col:hover {
    flex: 4.6 !important;
    filter: grayscale(0%) !important;

}

/* 1. THE BIKE CONTAINER */
.bike-display {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  /* We allow the container to be the full height, but it will be narrow */
}

/* 2. THE BIKE IMAGES - "DO NOT SHRINK" MODE (From Mayo CSS) */
.exp-col img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  height: 100% !important; 
  width: auto !important;
  
  /* Prevents "Squish" when column is narrow */
  min-width: 150% !important; 
  object-fit: contain !important;
  flex-shrink: 0 !important; 
  max-width: none !important;
  
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 3. SHOW DEFAULT BIKE (First Image) */
.exp-col img:nth-of-type(1) {
  opacity: 1 !important;
}

/* 3. SHOW DEFAULT BIKE ALWAYS (Even when shrunk) */
.bike-display img:nth-of-type(1) {
  opacity: 1 !important;
}

/* 4. HOVER SWAP LOGIC (Generalized for all columns) */
/* Hide the first bike when any other link is hovered */
.exp-col:has(.content-horizontal a:not(.hover-1):hover) img:nth-of-type(1) {
  opacity: 0 !important;
}

/* Specific Image Triggers */
.exp-col:has(.hover-1.is-tapped) img:nth-of-type(1),
.exp-col:has(.hover-1:hover) img:nth-of-type(1) { opacity: 1 !important; }
.exp-col:has(.hover-2.is-tapped) img:nth-of-type(2),
.exp-col:has(.hover-2:hover) img:nth-of-type(2) { opacity: 1 !important; }
.exp-col:has(.hover-3.is-tapped) img:nth-of-type(3),
.exp-col:has(.hover-3:hover) img:nth-of-type(3) { opacity: 1 !important; }
.exp-col:has(.hover-4.is-tapped) img:nth-of-type(4),
.exp-col:has(.hover-4:hover) img:nth-of-type(4) { opacity: 1 !important; }
.exp-col:has(.hover-5.is-tapped) img:nth-of-type(5),
.exp-col:has(.hover-5:hover) img:nth-of-type(5) { opacity: 1 !important; }
.exp-col:has(.hover-6.is-tapped) img:nth-of-type(6),
.exp-col:has(.hover-6:hover) img:nth-of-type(6) { opacity: 1 !important; }
.exp-col:has(.hover-7.is-tapped) img:nth-of-type(7),
.exp-col:has(.hover-7:hover) img:nth-of-type(7) { opacity: 1 !important; }
.exp-col:has(.hover-8.is-tapped) img:nth-of-type(8),
.exp-col:has(.hover-8:hover) img:nth-of-type(8) { opacity: 1 !important; }

/* 5. DEFAULT "NOVINKA" PICTURE (opt-in, per column) */
/* A column can show a picture of its own while it is at rest instead of
   falling back to its first category slide: add
       <img class="bike-novinka" src="...">
   as the LAST image in that column's .bike-display. Last, because section 4
   above pairs each slide with its link by :nth-of-type(N) counted from the
   top - drop this one in earlier and every slide after it is renumbered, so
   each link lights up the wrong bike. Columns with no .bike-novinka are not
   touched by any of this and keep showing their first slide as before. */

/* Stand the first slide down; the novinka takes its place at rest. This sits
   deliberately below the hover triggers in section 4 on specificity, so
   hovering .hover-1 still brings its own slide back. */
.exp-col:has(.bike-novinka) img:nth-of-type(1) {
  opacity: 0 !important;
}

/* THE NOVINKA IS NOT A SLIDE - WIN BY ORDER, NOT BY SPECIFICITY
   ------------------------------------------------------------------
   In a column that HAS slides the novinka is the last image, so the
   rule above only ever hits slide 1 and the two never meet. KOMPONENTY
   has no slides: its resting picture is the ONLY image, so it is both
   .bike-novinka and img:nth-of-type(1), and the rule above stands it
   down. This rule puts it back.

   IT MUST TIE, NOT OUT-RANK. Both selectors count (0,3,1), and this one
   is second, so it wins here - while the hover triggers in section 4
   stay at (0,4,1) and still beat BOTH of us. That is the whole point:

     .exp-col:has(.hover-1:hover) img:nth-of-type(1)   (0,4,1)  hover
     .exp-col:has(.bike-novinka) img.bike-novinka      (0,3,1)  this
     .exp-col:has(.bike-novinka) img:nth-of-type(1)    (0,3,1)  above

   An earlier attempt wrote the rule above as :nth-of-type(1):not(.bike
   -novinka) instead. That reads fine but the :not() pushed it to
   (0,4,1) - level with the hover trigger and later in the file - so
   hovering the first link stopped bringing its slide back in EVERY
   column that has a novinka. Do not add anything to either selector
   without recounting all three. */
.exp-col:has(.bike-novinka) img.bike-novinka {
  opacity: 1 !important;
}

/* A column whose only picture IS the novinka has no slide to swap to,
   so it must keep it on hover - otherwise the hover rule further down
   fades it out and the column goes blank. :not(:has(img:nth-of-type(2)))
   means "only one image in here". */
.exp-col:not(:has(img:nth-of-type(2))):has(.content-horizontal a:hover) .bike-novinka,
.exp-col:not(:has(img:nth-of-type(2))):has(.content-horizontal a.is-tapped) .bike-novinka {
  opacity: 1 !important;
}

.exp-col .bike-novinka {
  opacity: 1 !important;

  /* IT FILLS THE COLUMN. IT DOES NOT STAND IN IT.
     ------------------------------------------------------------------
     The slides above are cut-out bikes on white with wide empty margins,
     so section 2 deliberately OVERSIZES them: height 100%, width auto,
     min-width 150%, contain. In a narrow column the bike then stays big
     enough to read and the white margin is what gets thrown away. That
     only works because every slide is the same 1600x900 (1.78).

     A novinka is not that picture. It is a whole scene, edge to edge -
     rock walls, podium, background - and the ratios are all over the
     place: 2480x1552 (1.60) on MAYO e-MTB, 2300x900 (2.56) on the MTB
     column, 1600x900 on LIBERTY. Put a 1.60 image through the rule
     above and min-width:150% fights width:auto, the box stops matching
     the picture, and contain letterboxes it inside the wreckage - which
     is exactly the "not fitting" on both desktop and mobile.

     So it is treated like a background photo instead: fill the column,
     crop what does not fit, keep the middle - which is where the bike
     is in all three. cover does not care about the ratio, so a novinka
     can be any shape from now on.

     No mobile copy of this is needed: .exp-col .bike-novinka is two
     classes (0,2,0) and .bike-display img in the 768px block is one
     class and one element (0,1,1), so this wins there on specificity no
     matter which comes later. */
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* The moment any link is taken - hovered on desktop, tapped on mobile - the
   novinka steps aside and section 4 shows that link's slide. */
.exp-col:has(.content-horizontal a:hover) .bike-novinka,
.exp-col:has(.content-horizontal a.is-tapped) .bike-novinka {
  opacity: 0 !important;
}


/* Create the dark overlay */
.exp-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.19); 
    transition: opacity 0.5s ease;
    z-index: 2; /* Sits above the background but below labels/links */
    pointer-events: none; /* Allows mouse to click through to links */
}
/* Hide overlay when column is expanded/hovered */
.exp-col:hover::after {
    opacity: 0;
}

/* Ensure Novinky is clear when no columns are being hovered */
.expanding-wrapper:not(:hover) .col-novinky::after {
    opacity: 0;
    visibility: hidden;
}

/* Hide promo-text when novinky is shrunk (something else is hovered) */
.expanding-wrapper:hover .col-novinky:not(:hover) .novinky-slide .promo-text {
    opacity: 0;
    visibility: hidden;
}

.col-novinky {
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 0.5s ease, 
                background-image 0.8s ease-in-out !important;

            }

.novinky-arrows {
position: absolute;
    right: 10px;
    bottom: 12px;
    display: flex;
    gap: 6px;
    z-index: 40; /* above slides + timer bar */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.novinky-arrow {
    width: 21px;
    height: 21px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.novinky-arrow:hover {
    background: rgba(0, 0, 0, 0.65);
}

.expanding-wrapper:not(:hover) .col-novinky .novinky-arrows,
.col-novinky:hover .novinky-arrows {
    opacity: 1;
    visibility: visible;
}

/* MAYO COLUMN */
/*.col-mayo {
    /* 1. The Gradient (Top Layer) */
    /* 2. The Image (Bottom Layer) */
/*    background-image: 
        linear-gradient(77deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 38%),
        url('') !important;
    background-blend-mode: darken !important;

    /* 3. The tint color (Required for 'multiply' to look rich) */
/*}

/* LIBERTY COLUMN */
.col-liberty {
    background-image: 
/*        linear-gradient(77deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 38%),*/
        url('') !important;
    background-blend-mode: darken !important;
    background-color: #e8e0c9 !important;
}

/* ELEKTRO COLUMN */
.col-elektro {
    background-image: 
/*        linear-gradient(77deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 38%),*/
        url('') !important;
    background-blend-mode: darken !important;
    background-color: #dbfaf2 !important;
}

/* TROJKOLKY */
.col-trojkolky {
    background-image: 
/*        linear-gradient(77deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 38%),*/
        url('') !important;
    background-blend-mode: darken !important;
    background-color: #ffffff !important;
}

/* KOMPONENTY */
.col-komponenty {
    background-image: 
/*        linear-gradient(85deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 27%),*/
        url('') !important;
    background-blend-mode: darken !important;
    background-color: #172124 !important;
}

/* ============================================================
   VÝPREDAJ SLIDER
   ============================================================ */

.vypredaj-section {
    background: linear-gradient(180deg, #ffffff 85%, #ebebeb 100%);
    padding: 40px 0 50px;
    overflow: hidden;
    font-family: 'Barlow Condensed', sans-serif;
}

.vypredaj-heading {
    text-align: center;
    font-size: 4.2rem;
    font-weight: 700;
    color: #172124;
    letter-spacing: 0.04em;
    margin-bottom: 30px;
}

/* --- Track wrapper: holds arrows + overflow crop --- */
.vypredaj-track-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 85%;
    margin: 0 auto;
    /* overflow: hidden removed — section clips at screen edge instead */
}

/* --- Arrow buttons --- */
.vy-arrow {
    flex-shrink: 0;
    position: relative;
    width: 52px;
    height: 52px;
    background: #172124;
    color: #dbfaf2;
    border: none;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%); /* sharp edges */
}
.vy-arrow:hover { transform: scale(1.1); }
.vy-arrow--prev { margin-left: 16px; }
.vy-arrow--next { margin-right: 16px; }

/* --- The scrolling track --- */
.vypredaj-track {
    flex: 1;
    min-width: 0;        /* <-- add this */
    position: relative;
    overflow: visible;

    /* Height budget: 575px of bike (the cap in .vy-bike-img) + the tallest
       name/options block the feed produces. Measured over all 11 slides at
       1280/1440/1920/2560, that block runs 147–229px — it varies with how
       the name wraps — so 575 + 229 = 804 and 810 clears it everywhere.

       That 229 assumes .vy-price-row is empty, which it is on every slide
       today (the feed is not filling prices in). If prices come back the
       block grows by roughly 48px — raise this by the same amount.

       229 + the 381px band = 610. 630 leaves ~19px of slack on the tightest
       slide, which is worth having: the name/options block is measured after
       the scraper has finished, and it runs taller for a moment while the
       model buttons are still being laid out. */
    height: 630px;
}

/* --- Single slide card --- */
.vypredaj-item {
    position: absolute;
    top: 0;
    left: 50%;
    width: 69%;
    height: 100%;
    /* off-screen right by default */
    transform: translateX(calc(-50% + 100%));
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 0;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25,1,0.5,1), opacity 0.3s;
}

.vypredaj-item.active {
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    align-items: center;
    justify-content: center;
}

/* peek items: beside active, peeking from the screen edge */
.vypredaj-item.vy-peek-prev .vy-options,
.vypredaj-item.vy-peek-next .vy-options,
.vypredaj-item.vy-peek-prev .vy-info,
.vypredaj-item.vy-peek-next .vy-info { visibility: hidden; }

.vypredaj-item.vy-peek-prev {
    transform: translateX(calc(-55% - 100%));
    opacity: 0.42;
    z-index: 1;
}

.vypredaj-item.vy-peek-next {
    transform: translateX(calc(-45% + 100%));
    opacity: 0.42;
    z-index: 1;
}

/* --- Info block (top) --- */
.vy-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 700px;
    z-index: 5;
    padding-top: 16px;
}

.vy-name {
    font-size: 1.9rem;
    font-weight: 700;
    color: #172124;
    line-height: 1.1;
    margin-bottom: 6px;
}

.vy-subtitle {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 14px;
    font-weight: 400;
    line-height: 1.3;
}

.vy-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}

.vy-old-price {
    font-size: 1.15rem;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}

.vy-cur-price {
    font-size: 2.1rem;
    color: #172124;
    font-weight: 700;
}

/* Model buttons (POWER / LITE / TOUR) */
.vy-models {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.vy-model-btn {
    padding: 8px 18px;
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: #172124;
}

.vy-model-btn.active {
   /* border-color: #172124;*/
    background: #dbfaf2;
    color: #172124;
}

/* --- Bike stage (center, large) --- */
.vy-bike-stage {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;

    /* Stretch to the grid row, so the row's height is a definite number
       that .vy-bike-img can cap itself against. This has to be spelled out
       rather than left to the default: .vypredaj-item.active sets
       align-items: center, and an "auto" align-self would inherit that and
       let the stage shrink-wrap the picture again — which is how the active
       slide ended up rendering the bike half again as big as the peeks.

       The bike still sits at the bottom, above .vy-options — that is what
       align-items: flex-end does — but now by resting on the foot of a
       full-height stage. */
    align-self: stretch;
}

.vy-bike-img {
    /* Cap the bike by the stage's HEIGHT and let the width follow.

       Every width in this carousel is a percentage while the row height is
       fixed, so a width-driven box gets wider with the screen but never
       taller. aspect-ratio: 16/9 made that box grow as itemWidth * 0.5625,
       and object-fit: cover scales by max(boxW/imgW, boxH/imgH) — so past
       16:9 the width term won and the bike zoomed with the viewport,
       cropping top and bottom instead of letterboxing. The photos are 800x700
       (8:7), nowhere near 16:9, so the crop was severe: ~205px at 1280,
       ~323px at 1920, with the peeks rendering ~57% larger than at 1280.

       The bike is drawn 657x575 — the same footprint it filled before — but
       only a 352px band of that is laid out. The photos are 800x700 with the
       bike sitting in rows 162-565, so every frame is mostly empty: at least
       162px of plain white above it (measured over six: 162, 190, 205, 206,
       225, 234) and at least 134px below (134-136). At this scale that is
       133px and 110px on screen, so up to 243px can go without touching a
       single pixel of bicycle.

       We take 131px off the top and 63px off the bottom — 575 - 194 = 381 —
       both inside the safe margins, and the bottom cut deliberately the
       smaller of the two, since the top is where the dead space is.

       How it works: the box is shorter than the picture's own ratio, so
       object-fit: cover scales by max(657/800, 381/700) = 0.821 — the width
       term, unchanged — and object-position splits the 194px of overflow
       between top and bottom. 67.5% puts 131px above and 63px below.

       Why crop the bottom at all: it is what makes the gradient work. The
       wheels used to stop 110px short of the box, so the fade below spent
       itself on white and only caught the last ~19px of tyre. Taking 63px
       back leaves ~48px of clearance under the tyres, close enough that the
       gradient dissolves them properly — see its stops below, which are set
       to reach solid white exactly where the tyres end.

       A FIXED height, not a percentage, on purpose: the row is whatever is
       left after the name and the options, and that varies by slide, which
       is what used to make every bike a different size. max-height is left
       as a backstop so an unusually tall name still cannot push the bike out
       of its row — and the mobile rule below, on a much shorter track, is
       governed by that backstop throughout. */
    width: 657px;
    max-width: 100%;
    height: 381px;
    max-height: 100%;
    object-fit: cover;
    object-position: center 67.5%;
    transition: opacity 0.35s ease;
}

/* The section's background, lifted over the foot of the bike so the wheels
   dissolve into it instead of stopping at a hard edge. It rides on the stage
   rather than on .vypredaj-section because .vypredaj-item is a stacking
   context (z-index 1 on the peeks, 2 on the active one): an overlay painted
   at section level would land on top of the whole slide, options included.
   From here it covers the picture and nothing else — .vy-options is a later
   sibling at z-index 5, and .vy-dots sits outside the track altogether, so
   both keep painting over the top of it. Every slide gets one, so the peeks
   fade the same way the centre does. */
.vy-bike-stage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;

    /* Shrink the overlay by ~20px so it fades closer to the tyre line instead
       of sitting too far down over the image. */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 68%, #ffffff 100%);
    pointer-events: none;   /* the whole stage is a link to the product */
    z-index: 1;
}

.vy-bike-img.fade-out { opacity: 0; }
.vy-bike-img.fade-in  { opacity: 1; }

/* --- Options block (bottom) --- */
.vy-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 700px;
    z-index: 5;
    padding-top: 0px;
   }

/* Size buttons */
.vy-sizes {
    display: flex;
    gap: 6px;
}

.vy-size-btn {
    padding: 6px 12px;
    border: 2px solid #f5f5f5;
    background: #f5f5f5;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s;
    color: #172124;
}

.vy-size-btn.active {
    background: #dbfaf2;
}

/* Color swatches */
.vy-colors {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vy-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    outline: 2px solid transparent;
}

.vy-color-btn.active {
    border-color: #fff;
    outline-color: #172124;
    transform: scale(1.12);
}

/* --- Dot pagination --- */
.vy-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;

    /* Above .vy-bike-stage::after. It sits outside .vypredaj-track and so
       already paints later, but the carousel leans on z-index heavily enough
       that leaving this to document order would be asking for trouble. */
    position: relative;
    z-index: 6;
}

.vy-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.vy-dot.active {
    background: #172124;
    transform: scale(1.3);
}

/* --- MOBILE --- */
@media screen and (max-width: 768px) {
    .vypredaj-section {
        padding: 20px 0 20px;
    }

    .vypredaj-heading {
        margin-bottom: 10px;
    }

    .vypredaj-track-wrap {
        max-width: 100%;
        padding: 0;
    }

    .vypredaj-track {
        /* Sized by the slide itself — see .vypredaj-item.active below, which
           is in the flow here so that it can do this.

           Nothing else works. A phone gives the text more room to grow than
           it gives the bike: at 360px the XR TREK's subtitle takes two lines
           and its seven model buttons take three rows, which is 242px of
           name block over a 190px band, and the size/colour/cart row wraps
           to 100px under it. Any fixed budget is wrong for some slide, and
           being wrong here means overflow: hidden eats the options row whole
           — the buttons are simply gone, with the dots tucked up under the
           bike as if the slide ended there. */
        height: auto;
        overflow: hidden;
    }

    .vypredaj-item.vy-peek-prev,
    .vypredaj-item.vy-peek-next {
        opacity: 0;
        pointer-events: none;
    }

    .vypredaj-item {
        width: 100%;
        height: auto;      /* not 100% of a track that is sized from us */

        /* Content-sized rows instead of the desktop's auto/1fr/auto. The
           bike's row is now exactly as tall as the bike, so the slack in the
           track (there is some, by design — see the floor above) collects
           under the options rather than opening a ~44px hole between the
           bike and them, which is where the 1fr row used to put it. */
        grid-template-rows: auto auto auto;
        align-content: start;

        /* Full-width rows, so the bike's box really is (100vw - 32px) wide —
           the number its height is calculated from below. Desktop centres
           both the column and the blocks inside it, which left the slide only
           as wide as its longest line of text: on a short product name the
           stage came out ~110px narrower than the phone and the crop, which
           is derived from that width, went with it. The blocks are centred by
           their own flexbox, so stretching them moves nothing. */
        justify-items: stretch;
    }

    .vypredaj-item.active {
        align-items: center;
        padding: 0 16px 20px;

        /* In the flow, so the track takes its height from this slide. The
           other slides stay absolute and keep overlapping it, and the slide
           animation is untouched: left: 50% moves this right by half the
           track and translateX(-50%) takes back half its own width, which is
           the same 100% here, so the two still cancel and only the transform
           animates. */
        position: relative;

        /* Undo the desktop's justify-content: center. On a grid container
           that pins the column to its max-content width and centres it, so
           the slide was only ever as wide as its longest line of text —
           see the note on justify-items above. */
        justify-content: stretch;
    }

    .vy-info {
        align-items: center;
        text-align: center;
        max-width: 100%;
        order: 1;
        padding-top: 0;
    }

    .vy-models { justify-content: center; }

    .vy-bike-stage {
        order: 2;
        width: 100%;

        /* The band, stated outright rather than left to the image's ratio.
           An auto grid row would have let this shrink: on a slide whose name
           wraps to two lines the row gave up exactly the pixels the name
           took, the crop below tightened with it, and 26px of handlebar went
           with it. A definite height cannot be squeezed, so a tall name
           overflows the item instead — which is what fitTrackHeight() reads
           off scrollHeight to grow the track. */
        height: calc((100vw - 32px) * 381 / 657);
        overflow: hidden;
        align-items: flex-end;

        /* The crop puts the bike's front wheel ~1px below the top of its box,
           so without this the handlebars would touch the model buttons.
           Desktop gets the same clearance for free — its band is bottom-
           aligned inside a taller 1fr row — but here the row is the band. */
        margin-top: 14px;
    }

    .vy-bike-img {
        /* Fill the band. The crop itself is the stage's doing now — this is
           the half of it that could not come over from desktop unchanged.

           Desktop cuts a 381px band out of the 575px the photo would draw at
           657px wide. Those pixels cannot be reused on a phone: max-width
           clamps the box back to the screen (~343px at 375) while the 381px
           height stays put, so the box ends up TALLER than the photo's own
           8:7 and there is nothing left to crop. That is what went wrong —
           with object-fit: contain the whole 800x700 frame got drawn, dead
           space and all, and the bike came out 161px tall inside a 280px
           stage: ~65px of white above it, ~54px below, and the ::after
           gradient — sized for a band, not a frame — reaching 21px up into
           the tyres and slicing their bottoms off flat.

           So the box is given as the same RATIO instead, on the stage above:
           657/381 of whatever width the phone has. The box then stays
           shorter than the photo's 8:7 at every size, so object-fit: cover
           goes on scaling by the width term and object-position: center
           67.5% goes on splitting the overflow 2:1 between top and bottom.
           At 500px that puts the bike's top 1.5px below the box's and its
           tyres 12.6% of the box above the bottom; desktop's numbers are
           2.2px and 12.6%. Filling the stage is all this rule has left to do
           — and max-height has to go, since that backstop is what clamped
           the box in the first place. */
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        object-position: center 67.5%;
    }

    /* The fade has to scale with the band it sits on: 110px is 29% of
       desktop's 381px, and at that share it lands on the tyres here the same
       way it does there instead of swallowing them. */
    .vy-bike-stage::after {
        height: 29%;
    }

    .vy-options {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        order: 3;
        gap: 16px;
        width: 100%;
        max-width: 100%;   /* the desktop 700px cap would break the stretch */
        padding-top: 12px;
    }

    .vy-arrow {
        display: none;
    }
}

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section {
    position: relative;
    width: 92vw;
    aspect-ratio: 16 / 9;
    margin: 20px auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #111;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 50px;
}

.video-section__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-section__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.video-section__content {
    position: relative;
    z-index: 2;
    padding: 7%;
    width: 100%;
    text-align: center;
}

.video-section__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.05;
    margin-bottom: 30px;
        text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
 
}

.video-section__text-group {
    display: inline-block;
}

.video-section__sub {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 300;
    color: rgb(255, 255, 255);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: justify;
    text-align-last: justify;
    width: 100%;

}

.video-section__video-wrap {
    position: absolute;
    inset: 0;
}

.video-section__logo {
    position: absolute;
    z-index: 2;
    bottom: 32px;
    right: 36px;
    height: 72px;
    width: auto;
    opacity: 0.85;
}

@media screen and (max-width: 768px) {
    .video-section {
        width: 100%;
        margin: 0 0 30px;
        aspect-ratio: unset;
        height: auto;
        flex-direction: column;
        background: transparent;
        overflow: visible;
    }

    .video-section__content {
        position: static;
        background: #172124;
        aspect-ratio: 16 / 9;
        width: 100%;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .video-section__video-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .video-section__logo {
        height: 36px;
        bottom: 16px;
        right: 16px;
    }

    .video-section__sub {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        text-align-last: auto;
        gap: 4px;
    }

    .vs-sep {
        font-size: 0.6em;
        opacity: 0.5;
    }
}

.promo-banner {
    width: 100%;
    height: 480px;
    overflow: hidden;
    display: block;
    line-height: 0;
    position: relative;
}

.promo-banner img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-banner-logo {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 100%;
    max-height: 480px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.7)) drop-shadow(0 0 6px rgba(255,255,255,0.5));

    }

.promo-banner-btn {
    position: absolute;
    right: 40px;
    bottom: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background: #bd8c00;
    color: #e8e0c9;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-banner-btn:hover {
    width: 260px;
}

.promo-banner-btn__text {
    flex: 1;
    min-width: 0;
    padding-left: 16px;
    opacity: 0;
    transition: opacity 0.2s ease 0.15s;
}

.promo-banner-btn:hover .promo-banner-btn__text {
    opacity: 1;
}

.promo-banner-btn__icon {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
    .promo-banner-logo {
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        max-height: 480px;
    }

    .promo-banner-btn {
        right: 16px;
        top: auto;
        bottom: 20px;
        transform: none;
    }
}

.map-section {
    height: 630px;
    background: #ffffff;
    display: flex;
    flex-direction: row;
}

.map-text {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: top;
    padding: 80px 60px 60px 170px;
    background: #ffffff;
}

.map-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #172124;
    margin-bottom: 20px;
}

.map-body {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.55;
    color: #445;
    max-width: 380px;
    margin-bottom: 32px;
}

.map-cta {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #172124;
    background: #dbfaf2;
    padding: 12px 28px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s, color 0.2s;
}

.map-cta:hover {
    background: #172124;
    color: #dbfaf2;
}

.map-embed {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
}

.map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 85px;
    background: #ffffff;
    z-index: 10;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .map-section {
        flex-direction: column;
        height: auto;
    }
    .map-text {
        flex: none;
        padding: 40px 24px;
    }
    .map-embed {
        flex: none;
        height: 300px;
    }
}
/* --- MOBILE --- */

/* --- MOBILE RESPONSIVENESS --- */


@media screen and (max-width: 768px) {

    .exp-col.mobile-expanded .promo-text {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important; /* Keeps it inside the layout flow */
        top: 20%; /* Adjust this to center it vertically in the mobile row */
    }
/* 1. Ensure the vertical label for NOVINKY disappears on mobile when expanded */
    .exp-col.mobile-expanded .label-vertical {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .intro-section {
    height: auto; /* Smaller height for mobile devices */
    min-height: 200px;
    padding: 40px 0;
    overflow: hidden;
    }

    .intro-img {
    width: 100%; 
    display: flex;
    justify-content: center;
}

/* Ensure the SVG itself behaves */
.intro-img img {
    max-width: 90% !important; /* Allow some breathing room on mobile */
    height: auto !important;
}

    
    .expanding-wrapper {
        display: block !important;
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
    }


    .exp-col {
        width: 100% !important;
        height: 120px ;
        flex: none !important;
        transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
        position: relative !important;
        z-index: 1; 
        overflow: hidden !important;
    }

    /* 1. FIX: Ensure overlay returns when NOT expanded */
    .exp-col::after {
        opacity: 1 !important; /* Forces dark state on mobile by default */
        background-color: rgba(0, 0, 0, 0.4) !important;
        transition: opacity 0.5s ease !important;
    }

    /* Active row comes to front and expands */
    .exp-col.mobile-expanded {
        height: 440px !important;
        z-index: 10 !important;
        filter: grayscale(0%) !important; 
    }

    /* Hide overlay only when expanded */
    .exp-col.mobile-expanded::after {
        opacity: 0 !important;
    }

    .bike-display img, .promo-display img {
        height: 280px !important;
        width: auto !important;
        min-width: 0 !important;
        top: 55% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        object-fit: contain !important;
    }

    .col-novinky .promo-text {
    opacity: 0 !important;
    visibility: hidden !important;
}   
.col-novinky.mobile-expanded .promo-text {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide it only when novinky is actually expanded */
.col-novinky.mobile-expanded .label-vertical {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

.col-novinky.mobile-expanded .novinky-arrows {
        opacity: 1;
        visibility: visible;
    }


    .exp-col.mobile-expanded .promo-text {
        position: absolute !important; /* keep it absolute, not relative */
        bottom: 20px !important;
        top: auto !important;         /* cancel the top: 20% */
    }

    .label-vertical {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        left: 20px !important;
        top: 20px !important;
        height: auto !important;
        background: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: opacity 0.3s ease !important;
        z-index: 20 !important;
    }

    .exp-col.mobile-expanded .label-vertical {
        opacity: 0 !important;
        visibility: hidden !important;
    }


    .content-horizontal {
        opacity: 0;
        visibility: hidden !important;
        transform: translateY(12px);
        pointer-events: none;
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    .content-horizontal a {
        font-size: 4.2vw;
        padding: 6px 6px;
    }

    .exp-col.mobile-expanded .content-horizontal {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
        pointer-events: auto !important;
        width:30%;
    }


.content-horizontal a.is-tapped {
        background: #ffffff !important;
        color: #172124 !important;
    }

}
    
@keyframes arrowPop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.product-configurator {
        padding: 20px !important; /* Tighter padding for mobile screens */
    }

    
/* End of Media Query */

/* ============================================================
   NOVINKY CAROUSEL — synchronized cross-fade slides + timer
   ============================================================ */

/* The wrapper fills the entire column */
.novinky-slides-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Each slide is stacked on top of each other, full bleed */
.novinky-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Both image (via bg) and text cross-fade together */
    opacity: 0;
    transition: opacity 0.7s ease-in-out;

    /* Center the promo-text at bottom-left (inherited positioning) */
    display: flex;
    align-items: flex-end;
}

/* Active slide is fully visible */
.novinky-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Outgoing slide sits below active during the crossfade */
.novinky-slide.prev {
    opacity: 0;
    z-index: 1;
}

/* promo-text inside a slide: position relative to the slide */
.novinky-slide .promo-text {
    position: absolute;
    left: 14px;
    bottom: 28px; /* a touch above the timer bar */
    /* Inherit all other .promo-text styles from original CSS */
}

/* Override the old col-novinky background logic —
   the background now lives on each .novinky-slide */
.col-novinky {
    background-image: none !important;
    background-color: #111 !important; /* fallback while images load */
    overflow: hidden;
}

/* Ensure label and timer sit above the slide layers */
.col-novinky .label-vertical {
    z-index: 20;
}

/* ---- Timer Bar ---- */
.novinky-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2); /* subtle track */
    z-index: 30;
}

.novinky-timer-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.85);
    /* No transition here — JS drives it every 30ms for smoothness */
}

/* ---- Mobile: keep slides visible when column is expanded ---- */
@media screen and (max-width: 768px) {
    .novinky-slide .promo-text {
        bottom: 28px;
    }
    .col-novinky:not(.mobile-expanded) .novinky-slide .promo-text {
        opacity: 0;
        visibility: hidden;
    }
    .col-novinky.mobile-expanded .novinky-slide.active .promo-text {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
    background-color: #172124;
    color: #b0bec5;
    font-family: 'Barlow Condensed', sans-serif;
    padding: 50px 40px 0;
}

.footer-inner {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-col {
    flex: 1;
    min-width: 180px;
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 14px;
}

.footer-heading--gap {
    margin-top: 28px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a,
.footer-social-link {
    color: #cfd8dc;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-col ul li a:hover,
.footer-social-link:hover {
    color: #ffffff;
}

.footer-col--social {
    flex: 0 0 auto;
    min-width: 160px;
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
    .site-footer {
        padding: 36px 24px 0;
    }
    .footer-inner {
        flex-direction: column;
        gap: 32px;
    }
}

/* ============================================================
   DEALER STICKY BUTTON
   ============================================================ */
.dealer-btn {
    position: fixed;
    right: 0;
    top: 270px;
    z-index: 900;
    display: flex;
    align-items: center;
    height: 48px;
    background: #172124;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 4px 0 0 4px;
    padding: 0 14px 0 18px;
    gap: 6px;
    width: 220px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /*box-shadow: -2px 2px 8px rgba(0,0,0,0.25);*/
}

.dealer-btn__text {
    flex: 1;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.2s ease 0.05s;
}

.dealer-btn__icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dealer-btn.scrolled {
    width: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

.dealer-btn.scrolled .dealer-btn__text {
    opacity: 0;
    flex: 0;
    overflow: hidden;
}

.dealer-btn:hover {
    background: #dbfaf2;
    color: #172124;
}

/* Inline dealer button — mobile only, inside map section */
.dealer-btn--inline {
    display: none;
}

@media screen and (max-width: 768px) {
    .dealer-btn {
        display: none;
    }

    .dealer-btn--inline {
        display: inline-block;
        margin-top: 16px;
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #ffffff;
        background: #172124;
        padding: 12px 24px;
        text-decoration: none;
        transition: background 0.2s;
    }

    .dealer-btn--inline:hover {
        background: #dbfaf2;
        color: #172124;
    }
}

/* ============================================================
   NAJPREDÁVANEJŠIE — BESTSELLER CAROUSEL
   ============================================================ */
.bestseller-section {
    background: #fff;
    padding: 60px 40px;
}

.bestseller-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #172124;
    letter-spacing: 0.04em;
    margin-bottom: 40px;
    text-align: center;
}

.bestseller-wrap {
    overflow: hidden;
}

.bestseller-viewport {
    overflow: hidden;
}

.bestseller-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.bs-card {
    flex: 0 0 calc(100% / 3);
    padding: 0 10px;
    text-decoration: none;
    color: inherit;
}

.bs-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 20px;
    background-color: #f4f4f0;
    background-image: url('/images/bestseller-stojan.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.bs-card:hover .bs-card-img {
    background-color: #dbfaf2;
}

.bs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

/*9.bs-card:hover .bs-card-img img {
    transform: scale(1.06);
}*/

.bs-card-info {
    padding: 14px 6px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.bs-card-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #172124;
    margin-bottom: 4px;
    order: 1;
}

.bs-card-desc {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #667788;
    line-height: 1.45;
    order: 3;
    flex: 0 0 100%;
}

.bs-card-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #172124;
    letter-spacing: 0.06em;
    order: 2;
    margin-left: auto;
    padding-left: 12px;
}

.bs-segbar {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}

.bs-seg {
    height: 4px;
    width: 52px;
    background: #d4d8da;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s;
}

.bs-seg.active {
    background: #172124;
}

.bs-seg:hover {
    background: #2a3f44;
}

@media screen and (max-width: 768px) {
    .bestseller-section {
        padding: 40px 16px;
    }
    .bs-card {
        flex: 0 0 100%;
    }
}