/* ============================================
   GarasHome Main Slider – CSS
   Recreates the Revolution Slider layout
   Swiper 5.4.5 (bundled with Prisma theme)
   Grid reference: 1400 × 768 (desktop)
   ============================================ */

/* Google Fonts required by slider */
@import url('https://fonts.googleapis.com/css?family=Poppins:700,800|Open+Sans:600,700|Alegreya+Sans+SC|Limelight|Questrial|Fira+Sans:300,400|Roboto&display=swap');

/* ----------------------------------------------------------------
   1. CORE SLIDER
   ---------------------------------------------------------------- */
#main-slider {
    width: 100%;
    height: 80vh;
    min-height: 500px;
    max-height: 850px;
    overflow: hidden;
    position: relative;
    background: transparent;
    padding:0px;
}

#main-slider .swiper-slide {
    overflow: hidden;
    position: relative;
}

/* ----------------------------------------------------------------
   2. SLIDE GRID  (1400 × 768 centered, scales to fit)
   ---------------------------------------------------------------- */
.slide-grid {
    position: absolute;
    width: 1400px;
    height: 768px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--slider-scale, 1));
    transform-origin: center center;
    z-index: 2;
}

/* ----------------------------------------------------------------
   3. SLIDE BACKGROUNDS
   ---------------------------------------------------------------- */
.slide-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

.slide-bg-pyramis  { background-color: #020202; }
.slide-bg-kitchen  { background-color: #ffffff; }
.slide-bg-intro    { background-image: url('../img/slider/intro-bg.jpg'); }
.slide-bg-colombo  { background-image: url('../img/slider/colombo-bg.jpg'); }
.slide-bg-franke   { background-image: url('../img/slider/franke-bg.jpg'); }

/* ----------------------------------------------------------------
   4. POSITIONED ELEMENTS – base
   Parallax uses --px / --py CSS vars set by JS
   ---------------------------------------------------------------- */
.sl-elem {
    position: absolute;
    opacity: 0;
    --px: 0px;
    --py: 0px;
    transition: opacity 0.8s cubic-bezier(.25,.1,.25,1),
                transform 0.8s cubic-bezier(.25,.1,.25,1);
}

.sl-elem img {
    display: block;
    width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------
   5. ENTRY ANIMATION MODIFIERS
   The translate(var(--px), var(--py)) at the end is for parallax;
   it defaults to 0px 0px and gets updated by JS.
   ---------------------------------------------------------------- */
.sl-from-left   { transform: translateX(-50px) translate(var(--px), var(--py)); }
.sl-from-right  { transform: translateX(50px) translate(var(--px), var(--py)); }
.sl-from-bottom { transform: translateY(50px) translate(var(--px), var(--py)); }
.sl-scale       { transform: scale(0.85) translate(var(--px), var(--py)); }

/* Elements without entry modifiers still get parallax */
.sl-elem:not(.sl-from-left):not(.sl-from-right):not(.sl-from-bottom):not(.sl-scale) {
    transform: translate(var(--px), var(--py));
}

/* ----------------------------------------------------------------
   6. ACTIVE SLIDE  –  reveal elements
   ---------------------------------------------------------------- */
.swiper-slide-active .sl-elem,
.swiper-slide-duplicate-active .sl-elem {
    opacity: 1;
}

.swiper-slide-active .sl-from-left,
.swiper-slide-active .sl-from-right,
.swiper-slide-duplicate-active .sl-from-left,
.swiper-slide-duplicate-active .sl-from-right {
    transform: translateX(0) translate(var(--px), var(--py));
}

.swiper-slide-active .sl-from-bottom,
.swiper-slide-duplicate-active .sl-from-bottom {
    transform: translateY(0) translate(var(--px), var(--py));
}

.swiper-slide-active .sl-scale,
.swiper-slide-duplicate-active .sl-scale {
    transform: scale(1) translate(var(--px), var(--py));
}

/* ----------------------------------------------------------------
   7. TRANSITION DELAYS
   ---------------------------------------------------------------- */
.sl-d1 { transition-delay: 0.1s; }
.sl-d2 { transition-delay: 0.3s; }
.sl-d3 { transition-delay: 0.5s; }
.sl-d4 { transition-delay: 0.7s; }
.sl-d5 { transition-delay: 0.9s; }
.sl-d6 { transition-delay: 1.1s; }
.sl-d7 { transition-delay: 1.3s; }
.sl-d8 { transition-delay: 1.5s; }

/* ----------------------------------------------------------------
   8. NAVIGATION ARROW OVERRIDES
   (Prisma theme rotates arrows 90° and sets width:100% – undo)
   ---------------------------------------------------------------- */
#main-slider .swiper-button-prev,
#main-slider .swiper-button-next {
    width: 50px;
    height: 50px;
    top: 50%;
    margin-top: -25px;
    color: #ed4545;
    background: none;
    border-radius: 0;
    transition: color 0.3s;
}

#main-slider .swiper-button-prev:hover,
#main-slider .swiper-button-next:hover {
    color: #c03030;
}

#main-slider .swiper-button-prev {
    left: 20px;
    right: auto;
}

#main-slider .swiper-button-next {
    right: 20px;
    left: auto;
}

#main-slider .swiper-button-prev:after,
#main-slider .swiper-button-next:after {
    transform: none !important;
    font-size: 28px !important;
}

/* ----------------------------------------------------------------
   9. PAGINATION  (move to bottom)
   ---------------------------------------------------------------- */
#main-slider .swiper-pagination-progressbar {
    background: rgba(0,0,0,0.15);
    height: 3px !important;
    top: auto !important;
    bottom: 0 !important;
}

#main-slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #ed4545;
}


/* ================================================================
   SLIDE 1 – PYRAMIS HOT OFFER
   Background: #020202
   ================================================================ */

/* Instastory – huge product composite that fills most of the slide */
.s1-instastory { left: 266px; top: -14px; width: 1489px; z-index: 9; }

/* Outline decoration – extends past right edge */
.s1-outline { right: -141px; top: 69px; width: 1129px; z-index: 8; }

/* Dots */
.s1-dots { left: 504px; top: 178px; width: 119px; z-index: 10; }

/* Garas logo */
.s1-garas-logo { left: 324px; top: 215px; width: 96px; z-index: 12; }

/* Lines decoration */
.s1-lines { left: 94px; top: 73px; width: 52px; z-index: 13; }

/* Shop-now image */
.s1-shop-now { left: 1018px; top: 481px; width: 286px; z-index: 11; }

/* SALE text image */
.s1-sale { left: 413px; top: 316px; width: 28px; z-index: 16; }

/* Outline text */
.s1-outline-text { left: 68px; top: 582px; width: 211px; z-index: 14; }

/* Offer badge */
.s1-offer { left: 210px; top: 380px; width: 194px; z-index: 15; }

/* HOT text (Poppins 100px 800) — x:c xo:-385 → center at 315, w:217 → left:207 */
.s1-hot-text {
    left: 207px;
    top: 292px;
    width: 217px;
    z-index: 20;
    font-family: 'Poppins', sans-serif;
    font-size: 100px;
    font-weight: 800;
    line-height: 70px;
    color: #ff1f0f;
    text-align: left;
}

/* "Δείτε τους" button — x:l xo:83, y:m yo:246 */
.s1-btn {
    left: 83px;
    top: 598px;
    width: 223px;
    height: 65px;
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff1f0f;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 64px;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.3s, color 0.3s, opacity 0.8s cubic-bezier(.25,.1,.25,1), transform 0.8s cubic-bezier(.25,.1,.25,1);
}

.s1-btn:hover {
    background: #1e1e1e;
    color: #ff1f0f;
}

/* Tag in stores */
.s1-in-stores { left: 116px; top: 675px; width: 148px; z-index: 17; }

/* Pyramis logo */
.s1-pyramis-logo { left: 1021px; top: 648px; width: 236px; z-index: 18; }

/* Pyragranite logo */
.s1-pyragranite-logo { left: 1029px; top: 713px; width: 227px; z-index: 19; }


/* ================================================================
   SLIDE 2 – KITCHEN RULES
   Background: #ffffff
   ================================================================ */

/* Food decoration (floating small) */
.s2-food { left: 199px; top: 11px; width: 107px; z-index: 6; }

/* Fishes */
.s2-fishes { left: 859px; top: 45px; width: 102px; z-index: 5; }

/* Fork */
.s2-fork { left: 356px; top: 553px; width: 83px; z-index: 7; }

/* Spoon */
.s2-spoon { left: 410px; top: 242px; width: 83px; z-index: 11; }

/* Ingredient circle 2 — Wire-22.38.4 */
.s2-ingredient2 { left: 503px; top: 106px; width: 114px; z-index: 8; }

/* Souvlaki */
.s2-souvlaki { left: 1160px; top: 361px; width: 177px; z-index: 9; }

/* Cook character — x:r xo:777, y:m yo:9 h:763 → right:777, top:12 */
.s2-cook { right: 777px; top: 12px; width: 564px; z-index: 10; }

/* Ingredient circle 1 — Wire-22.38.43 */
.s2-ingredient1 { left: 550px; top: 316px; width: 116px; z-index: 12; }

/* Ingredient circle 4 — Wire-22.38 */
.s2-ingredient4 { left: 667px; top: 152px; width: 103px; z-index: 18; }

/* Kitchen title — x:c xo:174 → center 874, estimate width ~210 → left ~769 */
.s2-title {
    left: 769px;
    top: 418px;
    z-index: 13;
    font-family: 'Impact', 'Charcoal', sans-serif;
    font-size: 70px;
    line-height: 70px;
    color: #ff1f0f;
    text-align: left;
    white-space: nowrap;
}

/* Subtitle */
.s2-subtitle {
    left: 748px;
    top: 556px;
    width: 632px;
    z-index: 14;
    font-family: 'Impact', 'Charcoal', sans-serif;
    font-size: 19px;
    line-height: 35px;
    color: #000;
    text-align: center;
}

/* "all brands" button — x:l xo:959, y:m yo:313 */
.s2-btn {
    left: 959px;
    top: 665px;
    width: 223px;
    height: 65px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff1f0f;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, opacity 0.8s cubic-bezier(.25,.1,.25,1), transform 0.8s cubic-bezier(.25,.1,.25,1);
}

.s2-btn:hover {
    background: #323232;
    color: #ff1f0f;
}

/* Cutting board scene — x:l xo:802, y:t yo:-37 */
.s2-board { left: 802px; top: -37px; width: 607px; z-index: 16; }

/* Ingredient circle 3 — Wire-22.38.52 */
.s2-ingredient3 { left: 408px; top: 410px; width: 112px; z-index: 17; }


/* ================================================================
   SLIDE 3 – INTRO  (Για αυτούς που μαγειρεύουν)
   Background: bg_garas.jpg
   ================================================================ */

/* Smoke layers (decorative circular overlays) */
.s3-smoke1 { left: 565px; top: 391px; width: 305px; z-index: 5; }
.s3-smoke2 { left: 689px; top: 389px; width: 251px; z-index: 6; }
.s3-smoke3 { left: 525px; top: 371px; width: 253px; z-index: 7; }

/* Blue bowl (scaling loop) */
.s3-blue { left: 797px; top: 399px; width: 120px; z-index: 8; }

/* Yellow bowl */
.s3-yellow { left: 513px; top: 331px; width: 120px; z-index: 9; }

/* Greek bowl */
.s3-greek { left: 721px; top: 315px; width: 120px; z-index: 10; }

/* Pink bowl */
.s3-pink { left: 612px; top: 381px; width: 120px; z-index: 11; }

/* Pot — x:r xo:483, y:m yo:233 h:281 → right:483, top:477 */
.s3-pot { right: 483px; top: 477px; width: 403px; z-index: 12; }

/* Cooking person — x:l xo:477, y:t yo:-287 (extends above viewport) */
.s3-cooking { left: 477px; top: -287px; width: 487px; z-index: 13; }

/* Title — x:l xo:0, y:m yo:105 h:121 → left:0, top:429 */
.s3-title {
    left: 0;
    top: 429px;
    width: 484px;
    z-index: 15;
    font-family: 'Impact', 'Charcoal', sans-serif;
    font-size: 60px;
    line-height: 60px;
    font-weight: 100;
    color: #323232;
    text-align: center;
}

/* Subtitle — xo:15, y:m yo:208 */
.s3-subtitle {
    left: 15px;
    top: 568px;
    width: 448px;
    z-index: 16;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #323232;
    text-align: center;
}

/* Button "ΟΛΑ ΤΑ ΠΡΟΙΟΝΤΑ" — x:l xo:119, y:m yo:289 */
.s3-btn {
    left: 119px;
    top: 649px;
    z-index: 17;
    display: inline-block;
    padding: 0 40px;
    background: #fff;
    color: #cf1d1d;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, opacity 0.8s cubic-bezier(.25,.1,.25,1), transform 0.8s cubic-bezier(.25,.1,.25,1);
}

.s3-btn:hover {
    background: #323232;
    color: #fff;
}

/* Wire decoration circles stacked on right side — reuse kitchen-ingredient images */
.s3-wire1 { left: 1083px; top: 394px; width: 117px; z-index: 18; }
.s3-wire2 { left: 1081px; top: 457px; width: 116px; z-index: 19; }
.s3-wire3 { left: 1085px; top: 531px; width: 111px; z-index: 20; }
.s3-wire4 { left: 1084px; top: 603px; width: 111px; z-index: 21; }


/* ================================================================
   SLIDE 4 – COLOMBO
   Background: colombo.jpg
   ================================================================ */

/* Semi-transparent white overlay strip on left */
.s4-overlay {
    left: 24px;
    top: -878px;
    width: 371px;
    height: 3001px;
    background: rgba(255,255,255,0.5);
    z-index: 10;
}

/* Rotating square decoration */
.s4-square { left: 899px; top: -51px; width: 763px; z-index: 11; }

/* Colombo handles product — x:l xo:530, y:t yo:276 */
.s4-handles { left: 530px; top: 276px; width: 903px; z-index: 12; }

/* ITALIKO DESIGN title — x:l xo:35, y:m yo:51 h:66 → top:402 */
.s4-title {
    left: 35px;
    top: 402px;
    width: 346px;
    z-index: 14;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 50px;
    line-height: 60px;
    color: #ed4545;
    text-align: center;
}

/* Subtitle — x:l xo:30, y:m yo:117 */
.s4-subtitle {
    left: 30px;
    top: 486px;
    width: 356px;
    z-index: 15;
    font-family: 'Limelight', cursive;
    font-size: 16px;
    line-height: 22px;
    color: #323232;
    text-align: center;
    white-space: normal;
}

/* Discount label — xo:154, y:m yo:-135 */
.s4-discount-label {
    left: 154px;
    top: 239px;
    width: 162px;
    z-index: 18;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    line-height: 20px;
    color: #ed4545;
    text-align: center;
}

/* 30% — xo:87, y:m yo:-68 h:~100 → top:266 */
.s4-discount {
    left: 87px;
    top: 266px;
    width: 257px;
    z-index: 17;
    font-family: 'Limelight', cursive;
    font-size: 112px;
    line-height: 100px;
    color: #323232;
    text-align: center;
}

/* Button "δείτε τα" — xo:124, y:t yo:651 */
.s4-btn {
    left: 124px;
    top: 651px;
    z-index: 16;
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #323232;
    background: transparent;
    color: #ed4545;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 37px;
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s, background 0.3s,
                opacity 0.8s cubic-bezier(.25,.1,.25,1),
                transform 0.8s cubic-bezier(.25,.1,.25,1);
}

.s4-btn:hover {
    border-color: #ed4545;
    color: #323232;
}

/* Colombo brand logo */
.s4-brand { left: 1251px; top: 584px; width: 117px; z-index: 19; }


/* ================================================================
   SLIDE 5 – FRANKE
   Background: happy-couple photo
   ================================================================ */

/* Solid white overlay strip on left */
.s5-overlay {
    left: 22px;
    top: -432px;
    width: 450px;
    height: 1433px;
    background: #ffffff;
    z-index: 5;
}

/* Rotating square (reuse colombo-square) — x:c xo:653, y:m yo:-265 → left:972, top:-263 */
.s5-square { left: 972px; top: -263px; width: 763px; z-index: 6; }

/* Faucet — x:l xo:165, y:t yo:15 */
.s5-faucet { left: 165px; top: 15px; width: 209px; z-index: 7; }

/* Sink — x:l xo:54, y:t yo:477 */
.s5-sink { left: 54px; top: 477px; width: 410px; z-index: 17; }

/* "franke solutions" — xo:48, y:m yo:141 h:29 → top:511 */
.s5-title {
    left: 48px;
    top: 511px;
    width: 174px;
    z-index: 11;
    font-family: 'Questrial', sans-serif;
    font-size: 23px;
    line-height: 28px;
    color: #ed4545;
}

/* Button "περισσότερα" — xo:783, y:t yo:620 */
.s5-btn {
    left: 783px;
    top: 620px;
    width: 253px;
    z-index: 14;
    display: inline-block;
    padding: 12px 35px;
    background: #ed2d2d;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, opacity 0.8s cubic-bezier(.25,.1,.25,1), transform 0.8s cubic-bezier(.25,.1,.25,1);
}

.s5-btn:hover {
    background: rgba(255,255,255,0.6);
    color: #ed4545;
}

/* Floating icons */
.s5-icon  { left: 44px;   top: 77px;  width: 113px; z-index: 10; }
.s5-icon2 { left: 446px;  top: 533px; width: 133px; z-index: 8; }
.s5-icon6 { left: 930px;  top: 302px; width: 175px; z-index: 9; }
.s5-icon7 { left: 1238px; top: 171px; width: 141px; z-index: 16; }

/* Wire ball */
.s5-wire { left: 251px; top: 381px; width: 117px; z-index: 13; }


/* ================================================================
   LOOPING ANIMATIONS  (keyframes)
   ================================================================ */
@keyframes floatY {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}

@keyframes rotateZ {
    0%   { transform: rotate(-12deg); }
    100% { transform: rotate(12deg); }
}

@keyframes rotateSlow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(3deg); }
}

@keyframes slowZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* Trigger looping animations only on active slide */
.swiper-slide-active .anim-float {
    animation: floatY 5s ease-in-out 1.5s infinite alternate;
}

.swiper-slide-active .anim-rotate {
    animation: rotateZ 12s ease-in-out 1.5s infinite alternate;
}

.swiper-slide-active .anim-rotate-slow {
    animation: rotateSlow 3s ease-in-out 0.5s infinite alternate;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet – between phone and desktop (778–1024px only) */
@media (min-width: 779px) and (max-width: 1024px) {
    #main-slider {
        height: 65vh;
        min-height: 400px;
    }

    /* Hide small decorative items that clutter at tablet size */
    .s1-dots, .s1-garas-logo, .s1-lines, .s1-sale, .s1-outline-text,
    .s1-in-stores, .s1-shop-now,
    .s2-food, .s2-fishes, .s2-fork, .s2-spoon, .s2-souvlaki,
    .s2-ingredient3, .s2-ingredient4,
    .s3-smoke1, .s3-smoke2, .s3-smoke3,
    .s3-wire1, .s3-wire2, .s3-wire3, .s3-wire4,
    .s4-brand,
    .s5-icon, .s5-icon2, .s5-icon7, .s5-wire {
        display: none !important;
    }
}

/* ================================================================
   PHONE – 360 × 740 portrait grid
   Matches original Revolution Slider 4th breakpoint (<778px).
   Elements stay position:absolute, repositioned per phone grid.
   JS sets --slider-scale based on 360×740 grid dimensions.
   ================================================================ */
@media (max-width: 778px) {
    #main-slider {
        /* Height proportional to phone grid aspect: 740/360 ≈ 2.056 */
        height: 205.56vw;
        min-height: 500px;
        max-height: 740px;
    }

    .slide-grid {
        width: 360px;
        height: 740px;
    }

    /* Disable parallax on touch devices */
    .sl-elem {
        --px: 0px !important;
        --py: 0px !important;
    }

    /* ---- HIDDEN ELEMENTS ON PHONE ---- */
    .s3-wire1, .s3-wire2, .s3-wire3, .s3-wire4,   /* Intro plate circles  */
    .s5-wire                                        /* Franke wire ball     */
    {
        display: none !important;
    }

    /* ================================================================
       SLIDE 1 – PYRAMIS HOT OFFER  (phone 360×740)
       All positions from original RS phone breakpoint data.
       ================================================================ */

    /* Instastory product composite: x:c xo:63 y:b yo:-1 749×499 */
    .s1-instastory { left: -132px; top: auto; right: auto; bottom: -1px; width: 749px; }

    /* Outline decoration: x:c xo:49 y:m yo:108 739×543 */
    .s1-outline { left: -141px; top: 207px; right: auto; width: 739px; }

    /* HOT text: x:l xo:44 y:t yo:113 146×auto fs:70 lh:53 */
    .s1-hot-text { left: 44px; top: 113px; width: 146px;
        font-size: 70px; line-height: 53px; font-weight: 700; text-align: right; }

    /* Button "Δείτε τους": x:c xo:-1 y:t yo:651 auto */
    .s1-btn { left: calc(50% - 1px); top: 651px; width: auto; height: auto;
        display: inline-block; padding: 0 40px;
        font-size: 16px; font-weight: 700; line-height: 48px; }

    /* Outline text image: x:l xo:74 y:t yo:634 171×46 */
    .s1-outline-text { left: 74px; top: 634px; width: 171px; }

    /* Pyragranite logo: x:c xo:97 y:m yo:239 124×12 */
    .s1-pyragranite-logo { left: 215px; top: 603px; width: 124px; }

    /* In-stores tag: x:l xo:140 y:t yo:711 78×17 */
    .s1-in-stores { left: 140px; top: 711px; width: 78px; }

    /* Shop-now: x:l xo:243 y:t yo:506 92×52 */
    .s1-shop-now { left: 243px; top: 506px; width: 92px; }

    /* Dots: x:l xo:20 y:t yo:77 108×103 */
    .s1-dots { left: 20px; top: 77px; width: 108px; }

    /* SALE text: x:l xo:185 y:t yo:134 25×99 */
    .s1-sale { left: 185px; top: 134px; width: 25px; }

    /* Pyramis logo: x:c xo:96 y:m yo:212 122×29 */
    .s1-pyramis-logo { left: 215px; top: 568px; width: 122px; }

    /* Garas logo: x:l xo:137 y:t yo:73 52×32 */
    .s1-garas-logo { left: 137px; top: 73px; width: 52px; }

    /* Lines decoration: x:l xo:21 y:t yo:25 31×22 */
    .s1-lines { left: 21px; top: 25px; width: 31px; }

    /* Offer badge: x:l xo:43 y:t yo:173 138×113 */
    .s1-offer { left: 43px; top: 173px; width: 138px; }


    /* ================================================================
       SLIDE 2 – KITCHEN RULES  (phone 360×740)
       ================================================================ */

    /* Cook character: x:c xo:-20 y:m yo:153 347×469 */
    .s2-cook { left: -14px; top: 289px; right: auto; width: 347px; }

    /* Title "Kitchen rules": x:l xo:168 y:t yo:163 179×auto fs:53 */
    .s2-title { left: 168px; top: 163px; width: 179px;
        font-size: 53px; line-height: 53px; text-align: right; white-space: normal; }

    /* Button "all brands": x:c xo:-1 y:t yo:651 auto */
    .s2-btn { left: calc(50% - 1px); top: 651px; width: auto; height: auto;
        display: inline-block; padding: 0 40px;
        font-size: 16px; font-weight: 700; line-height: 48px; }

    /* Subtitle: x:l xo:25 y:t yo:279 323×auto fs:16 lh:22 */
    .s2-subtitle { left: 25px; top: 279px; width: 323px;
        font-size: 16px; line-height: 22px; text-align: right; }

    /* Food decoration: x:l xo:79 y:t yo:445 39×63 */
    .s2-food { left: 79px; top: 445px; width: 39px; }

    /* Souvlaki: x:l xo:261 y:t yo:563 67×51 */
    .s2-souvlaki { left: 261px; top: 563px; width: 67px; }

    /* Fishes: x:l xo:191 y:t yo:579 55×39 */
    .s2-fishes { left: 191px; top: 579px; width: 55px; }

    /* Ingredient circle 1: x:c xo:102 y:m yo:17 54×54 */
    .s2-ingredient1 { left: 255px; top: 360px; width: 54px; }

    /* Ingredient circle 2: x:c xo:129 y:m yo:110 49×49 */
    .s2-ingredient2 { left: 285px; top: 456px; width: 49px; }

    /* Board scene: x:c xo:-7 y:b yo:552 389×277 */
    .s2-board { left: -22px; top: auto; bottom: 552px; width: 389px; }

    /* Ingredient circle 3: x:c xo:5 y:b yo:325 69×69 */
    .s2-ingredient3 { left: 151px; top: auto; bottom: 325px; width: 69px; }

    /* Ingredient circle 4: x:c xo:89 y:m yo:66 51×56 */
    .s2-ingredient4 { left: 244px; top: 408px; width: 51px; }

    /* Fork: x:l xo:-33 y:t yo:228 52×22 */
    .s2-fork { left: -33px; top: 228px; width: 52px; }

    /* Spoon: x:l xo:134 y:t yo:215 54×19 */
    .s2-spoon { left: 134px; top: 215px; width: 54px; }


    /* ================================================================
       SLIDE 3 – INTRO  (phone 360×740)
       ================================================================ */

    /* Pot: x:c xo:-10 y:b yo:-6 315×220 */
    .s3-pot { left: 13px; top: auto; right: auto; bottom: -6px; width: 315px; }

    /* Cooking image: x:c xo:-2 y:b yo:538 309×369 */
    .s3-cooking { left: 24px; top: auto; bottom: 538px; width: 309px; }

    /* Yellow dot: x:l xo:279 y:t yo:435 70×60 */
    .s3-yellow { left: 279px; top: 435px; width: 70px; }

    /* Title text: x:l xo:14 y:t yo:227 auto fs:56 lh:60 */
    .s3-title { left: 14px; top: 227px; width: auto;
        font-size: 56px; line-height: 60px; font-weight: 100; text-align: left; }

    /* Button: x:c xo:-6 y:t yo:644 auto */
    .s3-btn { left: calc(50% - 6px); top: 644px; width: auto; margin: 0;
        display: inline-block; padding: 0 40px;
        font-size: 16px; font-weight: 600; line-height: 48px; }

    /* Subtitle: x:l xo:18 y:t yo:358 318×auto fs:14 lh:22 */
    .s3-subtitle { left: 18px; top: 358px; width: 318px;
        font-size: 14px; line-height: 22px; text-align: center; }

    /* Smoke 1: x:l xo:19 y:m yo:158 130×130 */
    .s3-smoke1 { left: 19px; top: 463px; width: 130px; }

    /* Smoke 2: x:l xo:92 y:t yo:479 168×168 */
    .s3-smoke2 { left: 92px; top: 479px; width: 168px; }

    /* Smoke 3: x:l xo:187 y:t yo:479 170×170 */
    .s3-smoke3 { left: 187px; top: 479px; width: 170px; }

    /* Pink dot: x:l xo:113 y:t yo:444 57×49 */
    .s3-pink { left: 113px; top: 444px; width: 57px; }

    /* Greek dot: x:l xo:16 y:t yo:431 80×68 */
    .s3-greek { left: 16px; top: 431px; width: 80px; }

    /* Blue dot: x:l xo:180 y:t yo:429 80×68 */
    .s3-blue { left: 180px; top: 429px; width: 80px; }


    /* ================================================================
       SLIDE 4 – COLOMBO  (phone 360×740)
       ================================================================ */

    /* White overlay stripe: x:l xo:82 y:t yo:-63 250×2000 */
    .s4-overlay { left: 82px; top: -63px; width: 250px; height: 2000px; }

    /* Rotating square: x:c xo:271 y:b yo:238 467×425 */
    .s4-square { left: 218px; top: auto; bottom: 238px; width: 467px; }

    /* Handles/product: x:c xo:3 y:b yo:90 472×263 */
    .s4-handles { left: -53px; top: auto; bottom: 90px; width: 472px; }

    /* Title "ITALIKO DESIGN": x:l xo:15 y:t yo:58 auto fs:50 lh:60 */
    .s4-title { left: 15px; top: 58px; width: auto;
        font-size: 50px; line-height: 60px; text-align: left; }

    /* Subtitle: x:l xo:21 y:t yo:123 318×auto  */
    .s4-subtitle { left: 21px; top: 123px; width: 318px; text-align: center; }

    /* Discount label: x:l xo:170 y:t yo:287 128×22 fs:15 */
    .s4-discount-label { left: 170px; top: 287px; width: 128px;
        font-size: 15px; line-height: 15px; }

    /* 30%: x:l xo:120 y:t yo:315 191×71 fs:91 lh:70 */
    .s4-discount { left: 120px; top: 315px; width: 191px;
        font-size: 91px; line-height: 70px; }

    /* Button "δείτε τα": x:l xo:101 y:t yo:651 145×52 lh:25 */
    .s4-btn { left: 101px; top: 651px; width: 145px; height: 52px;
        display: inline-block; font-size: 16px;
        line-height: 25px; padding: 12px 20px; text-align: center; box-sizing: border-box; }

    /* Brand logo: x:l xo:241 y:t yo:597 64×13 */
    .s4-brand { left: 241px; top: 597px; width: 64px; }


    /* ================================================================
       SLIDE 5 – FRANKE  (phone 360×740)
       ================================================================ */

    /* White overlay stripe: x:l xo:159 y:t yo:-7 189×770 */
    .s5-overlay { left: 159px; top: -7px; width: 189px; height: 770px; }

    /* Rotating square: x:c xo:-227 y:b yo:109 378×344 */
    .s5-square { left: -236px; top: auto; bottom: 109px; width: 378px; }

    /* Faucet: x:c xo:72 y:b yo:164 147×338 */
    .s5-faucet { left: 179px; top: auto; bottom: 164px; width: 147px; }

    /* Sink product: x:c xo:73 y:b yo:564 199×140 */
    .s5-sink { left: 154px; top: auto; bottom: 564px; width: 199px; }

    /* Title "franke solutions": x:l xo:218 y:t yo:205 auto fs:16 lh:19 */
    .s5-title { left: 218px; top: 205px; width: auto;
        font-size: 16px; line-height: 19px; }

    /* Button: x:l xo:90 y:m yo:317 175×45 fs:18 lh:18 */
    .s5-btn { left: 90px; top: 665px; width: 175px; height: 45px;
        display: inline-block; font-size: 18px; font-weight: 400;
        line-height: 45px; padding: 0; text-align: center; box-sizing: border-box; }

    /* Icon (franke-icon): x:c xo:145 y:m yo:-334 56×62 */
    .s5-icon { left: 297px; top: 5px; width: 56px; }

    /* Icon2: x:l xo:39 y:m yo:152 80×58 */
    .s5-icon2 { left: 39px; top: 493px; width: 80px; }

    /* Icon6: x:l xo:50 y:t yo:271 74×69 */
    .s5-icon6 { left: 50px; top: 271px; width: 74px; }

    /* Icon7: x:l xo:285 y:t yo:589 69×55 */
    .s5-icon7 { left: 285px; top: 589px; width: 69px; }


    /* ================================================================
       PHONE: Center-anchored button transforms
       Buttons with x:c need translateX(-50%) for centering.
       Pre-entry includes the slide-in offset; active state is centered.
       ================================================================ */
    @media (max-width: 778px) {
        /* Initial state: off-screen to the left */
        .s1-btn.sl-from-left,
        .s2-btn.sl-from-left,
        .s3-btn.sl-from-left {
            transform: translateX(calc(-50% - 50px)) translate(0px, 0px);
        }

        /* Active state: centered */
        .swiper-slide-active .s1-btn.sl-from-left,
        .swiper-slide-active .s2-btn.sl-from-left,
        .swiper-slide-active .s3-btn.sl-from-left,
        .swiper-slide-duplicate-active .s1-btn.sl-from-left,
        .swiper-slide-duplicate-active .s2-btn.sl-from-left,
        .swiper-slide-duplicate-active .s3-btn.sl-from-left {
            transform: translateX(-50%) translate(0px, 0px) !important;
        }
    }


    /* ================================================================
       PHONE: Navigation arrows
       ================================================================ */
    #main-slider .swiper-button-prev,
    #main-slider .swiper-button-next {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }

    #main-slider .swiper-button-prev:after,
    #main-slider .swiper-button-next:after {
        font-size: 16px !important;
    }

    #main-slider .swiper-button-prev { left: 5px; }
    #main-slider .swiper-button-next { right: 5px; }
}