אם/* -------------------------------------------------

   PEDRO Home — Clean FINAL

   Logo dominant • Swiper 5-up • 3D Depth • Compact Player

   Desktop: single glass BEHIND player

   Mobile: no page overlay; keep only player's local glass

-------------------------------------------------- */



/* ===== ROOT / RESET ===== */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Nunito:wght@300;400;500;600;700&family=Sora:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap");



:root{

  --primary:#e4e4e5;

  --accent:#ff6b6b;
  --player-font:'Manrope','Sora','Nunito',sans-serif;

}



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

html,body{max-width:100%;overflow-x:hidden;scroll-behavior:smooth;}

body{font-family:'Nunito',sans-serif;color:#fff;position:relative;background:none!important;}



#site-header{display:none!important;}



/* ===== HERO / HEADER ===== */

.container{max-width:1200px;margin:0 auto;padding:20px;}



.header{

  position:relative;z-index:5;

  display:flex;flex-direction:column;align-items:center;justify-content:center;

  text-align:center;padding:60px 20px 18px;

}

.header h1,.header .buy-album-btn{opacity:1!important;visibility:visible!important;transform:none!important;}



.logo{max-width:340px;height:auto;margin-bottom:20px;}

h1{

  font-family:'Anton',sans-serif;font-size:3rem;line-height:1.05;

  text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;color:#fff;

}

h1 strong{display:block;font-size:1.9rem;margin-top:8px;letter-spacing:3px;color:#fff;}



/* Logo hover */

.header .logo{transition:transform .30s ease,filter .30s ease;will-change:transform,filter;cursor:pointer;}

.header .logo:hover{transform:scale(1.06) rotate(.3deg);filter:brightness(1.1) drop-shadow(0 4px 10px rgba(0,0,0,.35));}

.header .logo:active{transform:scale(.97);filter:brightness(.95);}



/* ===== BUY BUTTON ===== */

.buy-album-btn{

  display:inline-block;background:#fff;color:#b60000!important;border:2px solid rgba(184,0,0,.65)!important;

  border-radius:999px;padding:8px 26px;font-weight:800;font-size:.95rem;letter-spacing:.4px;text-transform:uppercase;

  text-decoration:none;box-shadow:0 5px 12px rgba(0,0,0,.25);margin-top:24px;

  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;

}

.buy-album-btn i{margin-inline-end:6px;transition:transform .18s ease;}

.buy-album-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(184,0,0,.28);filter:brightness(1.03);}

.buy-album-btn:hover i{transform:translateX(2px);}

.buy-album-btn:active{transform:translateY(0);box-shadow:0 6px 14px rgba(184,0,0,.20);filter:brightness(.99);}

.buy-album-btn:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 10px 24px rgba(184,0,0,.28);}



/* ===== TRACKS / SWIPER ===== */

.tracks-section{

  max-width:1120px;margin:10px auto 0;padding-block:8px;position:relative;z-index:5;

}

.mySwiper{

  display:block!important;visibility:visible!important;width:100%;min-height:260px;

  opacity:0;transition:opacity .25s ease;padding:4px 0 10px;

  perspective:1600px!important;transform-style:preserve-3d;overflow:visible!important;

}

.mySwiper.swiper-initialized{opacity:1;}

.mySwiper .swiper-wrapper{overflow:visible!important;}



.mySwiper .swiper-slide{

  width:clamp(140px,16vw,186px);aspect-ratio:1 / 1.05;display:flex;flex-direction:column;align-items:center;

  background:transparent;border:none;border-radius:12px;position:relative;z-index:1;transform-style:preserve-3d;

}

.track-card{

  position:relative;width:100%;transform-style:preserve-3d;transform-origin:center;

  transition:transform .45s ease,box-shadow .45s ease,filter .40s ease;will-change:transform,filter,box-shadow;

  pointer-events:auto;

}

.track-cover{

  width:100%;height:auto;border-radius:12px;object-fit:cover;

  -webkit-box-reflect:below -6px linear-gradient(transparent,transparent,rgba(0,0,0,.35));

}

.track-title{font-weight:700;font-size:13px;text-align:center;color:#fff;margin-top:6px;letter-spacing:.3px;}

.track-artist{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.75;color:#ff6b6b;}

.track-cart{

  position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;

  border-radius:999px;color:#fff;text-decoration:none;background:rgba(0,0,0,.45);

  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 6px 14px rgba(0,0,0,.25);z-index:10;

}



/* ===== STRONGER 3D DEPTH (Desktop / pointer: fine) ===== */

@media (pointer:fine){

  .mySwiper .swiper-slide-active .track-card{

    transform:translateZ(110px) scale(1.10);z-index:8;box-shadow:0 26px 50px rgba(0,0,0,.45);

    filter:brightness(1.12) saturate(1.05);

  }

  .mySwiper .swiper-slide-prev .track-card{

    transform:rotateY(22deg) translateX(-22px) translateZ(40px);

    filter:brightness(1.04) saturate(1.03);

  }

  .mySwiper .swiper-slide-next .track-card{

    transform:rotateY(-22deg) translateX(22px) translateZ(40px);

    filter:brightness(1.04) saturate(1.03);

  }

  .mySwiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) .track-card{

    transform:translateZ(-40px) scale(.96);filter:brightness(.9) saturate(.95);

  }

}



/* ===== PLAYER ===== */

.music-player{

  max-width:540px;margin:18px auto 8px;padding:16px;text-align:center;color:var(--primary);

  background:transparent;border:none;border-radius:24px;box-shadow:none;position:relative;z-index:5;
  font-family:var(--player-font) !important;

}

.player-header{margin-bottom:10px;}

.current-track-title{font-size:1.1rem;font-weight:800;color:#fff;}

.current-track-artist{color:#fff;opacity:.95;font-weight:700;}

#currentTrack,
.player-header .current-track,
.time-display,
#currentTime,
#duration{
  font-family:var(--player-font) !important;
  letter-spacing:.1px;
}



.progress-container{margin:10px 0 4px;}

.progress-bar{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:999px;cursor:pointer;}

.progress{height:100%;background:#fff;border-radius:inherit;width:0%;transition:width .1s linear;}



.player-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:8px;}

.control-btn{
  display:inline-flex;justify-content:center;align-items:center;cursor:pointer;
  width:44px;height:44px;border-radius:50%;
  background:rgba(15,30,45,.45);
  border:1px solid rgba(160,205,235,.35);
  color:#eaf6ff;
  font-size:20px;
  opacity:1;
  transition:none!important;
  transform:none!important;
}

.control-btn:hover,
.control-btn:focus,
.control-btn:active{
  background:rgba(15,30,45,.45)!important;
  border:1px solid rgba(160,205,235,.35)!important;
  color:#eaf6ff!important;
  opacity:1!important;
  transform:none!important;
}

.play-pause{width:50px;height:50px;font-size:24px;}

.play-pause.is-disabled{opacity:.6;}



/* Volume */

.volume-wrap{

  order:2;flex-basis:100%;display:flex;justify-content:center;align-items:center;gap:10px;width:fit-content;max-width:90vw;

  margin:8px auto 0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);

  border-radius:999px;padding:6px 10px;box-shadow:0 4px 14px rgba(0,0,0,.25);

}

.volume-wrap .mute{

  width:36px;height:36px;font-size:16px;background:transparent;border:none;color:#fff;cursor:pointer;

  display:flex;align-items:center;justify-content:center;border-radius:50%;

}

.volume-slider{-webkit-appearance:none;appearance:none;width:140px;max-width:60vw;height:4px;border-radius:999px;background:rgba(255,255,255,.25);outline:none;cursor:pointer;}

.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35);}

.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 0 2px rgba(255,255,255,.35);}

.volume-value{font-size:.85rem;font-weight:700;opacity:.9;}



/* ===== SOCIAL ===== */

.social-footer{
  display:flex;justify-content:center;align-items:center;gap:20px;margin:14px auto 28px;
  position:relative;z-index:6;
}

.social-icon{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,0.08);
  color:rgba(234,246,251,0.98);font-size:18px;line-height:1;text-decoration:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .22s cubic-bezier(.2,.9,.2,1),filter .22s ease,box-shadow .22s ease,opacity .22s ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.45) inset, 0 2px 0 rgba(255,255,255,0.02);
}

.social-icon svg,
.social-icon i{width:20px;height:20px;display:block;color:inherit;fill:currentColor}

.social-icon:hover,
.social-icon:focus{
  transform:scale(1.08);
  filter:drop-shadow(0 8px 24px rgba(40,160,255,0.08));
  box-shadow:0 10px 28px rgba(0,0,0,0.5);
  opacity:1;
}

.social-icon:focus{outline:2px solid rgba(234,246,251,0.14);outline-offset:4px}

.social-icon[aria-label]{cursor:pointer}



/* ===== CLEAN SWIPER NAV ===== */

.mySwiper .swiper-button-next,.mySwiper .swiper-button-prev{display:none!important;visibility:hidden!important;}

.mySwiper .swiper-pagination{display:none!important;}

.mySwiper .swiper-slide,.mySwiper .swiper-slide *{outline:none!important;box-shadow:none!important;}

.mySwiper .swiper-slide:focus,.mySwiper .swiper-slide:focus-visible{outline:none!important;box-shadow:none!important;}

.track-title:focus,.track-title:focus-visible{outline:none!important;color:inherit!important;}



/* ===== BACKGROUND (GENTLE INWARD MOTION) ===== */

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
    url('https://pedro-music.com/wp-content/uploads/2025/03/a.k7335_album_cover_3000x3000_clean__simple_High_resolution_tec_3e154572-c424-4ea9-8659-a5d9f34f7faf-1.webp');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  filter:saturate(1.05) contrast(1.05);
  image-rendering:-webkit-optimize-contrast;

  /* subtle inward-only motion (no rotation / no lateral movement) */
  animation:pedroBgInwardGentle 120s ease-in-out infinite alternate !important;
  animation-play-state:running !important;
  transition:none !important;
  transform:scale(1.01) !important;
  will-change:auto !important;
}

@media (max-width:768px){
  body::before{
    background-image:
      linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
      url('https://pedro-music.com/wp-content/uploads/2025/10/k7335_album_cover_mobile-1.webp-1.webp');
    animation:none !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  body.is-playing::before{
    animation:none !important;
    transform:none !important;
  }
}

body.is-playing::before{
  animation:pedroBgInwardGentle 120s ease-in-out infinite alternate !important;
  animation-play-state:running !important;
  transition:none !important;
  transform:scale(1.01) !important;
}

@keyframes pedroBgInwardGentle{
  0%{ transform:scale(1.01); }
  100%{ transform:scale(1.045); }
}





/* Accessibility: reduce motion */

@media (prefers-reduced-motion:reduce){

  body::before{animation:none!important;transform:none!important;}

  body.is-playing .header .logo{animation:none!important;}

}



/* =========================================================

   GLASS OVERLAY — DESKTOP ONLY (Home)

   • מבטל כל after ישן ומגדיר אחד נקי מאחורי התוכן

========================================================= */



/* נטרול מוחלט של כל חוקים ישנים */

body::after{content:none!important;display:none!important;}



/* זכוכית חדשה בדסקטופ */

@media (min-width:1025px){

  body.home::after{

    content:"";

    position:fixed;left:0;right:0;bottom:0;width:100vw;

    height:clamp(380px,52vh,620px);

    background:linear-gradient(180deg,

      rgba(16,16,18,0) 0%,

      rgba(16,16,18,.30) 26%,

      rgba(16,16,18,.55) 68%,

      rgba(16,16,18,.62) 100%);

    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);

    pointer-events:none;z-index:1;border:0;box-shadow:none;

  }

}



/* תוכן מעל הזכוכית */

.header,.tracks-section,.music-player,.social-footer{position:relative;z-index:5;}



/* =========================================================

   DESKTOP: player full-width (glass behind)

========================================================= */

@media (min-width:1025px){

  .tracks-section{margin-bottom:12px;}

  .music-player{

    width:100vw;max-width:none;left:50%;transform:translateX(-50%);

    margin:18px 0 14px;padding:22px 28px;border-radius:18px;

    background:transparent;border:0;box-shadow:none;

  }

  .music-player .player-header{max-width:980px;margin:0 auto;}

  .music-player .progress-container{max-width:980px;margin:10px auto 4px;}

  .music-player .volume-wrap{max-width:720px;margin:10px auto 0;}

}

@media (min-width:1600px){

  .music-player .player-header,

  .music-player .progress-container{max-width:1120px;}

}



/* =========================================================

   MOBILE (<=768): no page overlay + kill bottom gaps

========================================================= */

@media (max-width:768px){

  /* אין זכוכית כלל-עמודית במובייל */

  body.home::after{content:none!important;display:none!important;}



  /* ריווחי תחתית — רק safe-area אם קיים */

  html, body{margin-bottom:0!important;padding-bottom:0!important;}

  body.home{margin-bottom:0!important;padding-bottom:0!important;}



  .music-player,

  .social-footer{margin-bottom:0!important;padding-bottom:0!important;}

  .social-footer{margin-bottom:env(safe-area-inset-bottom,0px)!important;}



  /* מעטפות Elementor – לא לאפשר גובה/מרווח מיותר */

  body.home .elementor,

  body.home .elementor-section,

  body.home .elementor-container,

  body.home .elementor-row,

  body.home .elementor-column,

  body.home .elementor-widget-wrap{

    min-height:auto!important;margin-bottom:0!important;padding-bottom:0!important;

  }



  body.home .elementor-section:last-of-type,

  body.home .elementor-container:last-of-type,

  body.home .elementor-widget-wrap:last-of-type,

  body.home .social-footer:last-of-type{

    margin-bottom:0!important;padding-bottom:0!important;

  }



  /* לכבות פוטר תבנית/אלמנטור אם נטען */

  body.home .site-footer,

  body.home #colophon,

  body.home .elementor-location-footer{

    display:none!important;height:0!important;margin:0!important;padding:0!important;

  }



  /* שלא יופיע רווח מאלמנט שאחרי האייקונים */

  body.home .social-footer + *{

    margin:0!important;padding:0!important;min-height:0!important;

  }

}



/* =========================================================

   MOBILE polish (≤480): קיצור רווח בין הסליידר לנגן

========================================================= */

@media (max-width:480px){

  .tracks-section{margin-bottom:6px;padding-bottom:0;}

  .mySwiper{padding-bottom:0;}

  .music-player{

    margin-top:6px;

    width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));

    max-width:none;left:50%;transform:translateX(-50%);

    padding-left:max(12px, env(safe-area-inset-left,0px));

    padding-right:max(12px, env(safe-area-inset-right,0px));

  }

}



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

@media (min-width:1025px){.header h1,.header .elementor-heading-title{font-size:3rem!important;}}

@media (max-width:1024px){.logo{max-width:260px;} .header h1,.header .elementor-heading-title{font-size:2.5rem!important;}}

@media (max-width:768px){.header{padding:40px 20px 14px;} .logo{max-width:200px;} .header h1,.header .elementor-heading-title{font-size:2.2rem!important;}}

@media (max-width:480px){.header{padding:16px 10px 6px;} .logo{max-width:170px;margin-bottom:8px;} .header h1,.header .elementor-heading-title{font-size:1.7rem!important;}}

/* ==== FINAL: kill bottom gap everywhere (public visitors too) ==== */

@media (max-width: 768px){

  /* אין overlay עמוד מלא במובייל */

  body.home::after{ content:none !important; display:none !important; }



  /* ריסטרט מלא לתחתית העמוד */

  html, body{ margin-bottom:0 !important; padding-bottom:0 !important; }



  /* הנגן והאייקונים צמודים לקצה; נשאר רק safe-area */

  body.home .music-player,

  body.home .social-footer{

    margin-bottom:0 !important;

    padding-bottom:0 !important;

  }

  body.home .social-footer{

    /* תמיכה גם ב-iOS ישנים */

    margin-bottom: env(safe-area-inset-bottom,0px) !important;

    margin-bottom: constant(safe-area-inset-bottom,0px) !important;

  }



  /* כל המעטפות האחרונות – לא נותנות אפילו פיקסל אחד */

  body.home :is(.elementor-section,

                 .elementor-container,

                 .elementor-widget-wrap,

                 .site,

                 #page,

                 .site-content,

                 .content-area,

                 main,

                 .entry-content):last-of-type{

    margin-bottom:0 !important;

    padding-bottom:0 !important;

    min-height:0 !important;

  }



  /* אם איכשהו יש אלמנט אחרי האייקונים – נטרול גורף */

  body.home .social-footer + *{

    margin:0 !important;

    padding:0 !important;

    min-height:0 !important;

  }

}



/* נעילת פוטר תבנית/אלמנטור בעמוד הבית במובייל (אם נטען בטעות) */

@media (max-width: 768px){

  body.home .site-footer,

  body.home #colophon,

  body.home .elementor-location-footer{

    display:none !important; height:0 !important; margin:0 !important; padding:0 !important;

  }

}


.pedro-float-cart {

  position: fixed;

  bottom: 24px;

  right: 24px;

  width: 56px;

  height: 56px;

  background: #111;

  color: #fff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  z-index: 9999;

  box-shadow: 0 8px 24px rgba(0,0,0,.35);

}



.pedro-float-cart__icon {

  font-size: 22px;

}

.pedro-float-cart {

  position: fixed;

  top: 20px;

  right: 20px;

  bottom: auto;

  left: auto;

  z-index: 9999;



  background: #111;

  color: #fff;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;



  box-shadow: 0 8px 24px rgba(0,0,0,.35);

  text-decoration: none;

}



.pedro-float-cart__icon {

  font-size: 22px;

}



.pedro-float-cart__count {

  position: absolute;

  top: -6px;

  right: -6px;

  background: #e10600;

  color: #fff;

  font-size: 12px;

  font-weight: bold;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.continue-shopping {

  display: inline-block;

  margin-bottom: 20px;

  font-weight: 600;

  color: #fff;

  text-decoration: none;

  background: rgba(255,255,255,0.1);

  padding: 10px 16px;

  border-radius: 999px;

  transition: background 0.2s ease;

}



.continue-shopping:hover {

  background: rgba(255,255,255,0.25);

}

.continue-shopping {

  display: inline-flex;

  align-items: center;

  gap: 8px;



  position: relative;

  z-index: 10;



  margin: 24px 0;

}

.page-content > .continue-shopping {

  margin-top: 40px;

}

/* Continue Shopping button – Cart page */

.page-content > .continue-shopping {

  display: inline-flex;

  align-items: center;

  gap: 8px;



  margin: 24px 0 32px;

  padding: 12px 20px;



  font-weight: 600;

  font-size: 14px;

  color: #fff !important;

  text-decoration: none;



  background: rgba(255,255,255,0.12);

  border-radius: 999px;



  z-index: 5;

  position: relative;

}



.page-content > .continue-shopping:hover {

  background: rgba(255,255,255,0.25);

}

/* Hide Woo "View cart" link that WooCommerce injects after AJAX add-to-cart */

.tracks-section a.added_to_cart,

.tracks-section a.added_to_cart.wc-forward{

  display: none !important;

}

/* Make each track card a positioning context */

.tracks-section .track-card{

  position: relative;

}



/* Keep the cart icon fixed at top-right inside the cover */

.tracks-section a.track-cart{

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 5;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

}