/*************************************************************
KDS — LIGHT PINK SITE THEME + VALENTINE SCROLLING BANNER
+ PRETTY MUSIC BUTTON (NO WHITE WRAPPER PILL)
ONE-PASTE FILE: delete all old CSS and paste this only
*************************************************************/

/* =========================================================
   0) THEME VARIABLES
========================================================= */
:root{
  --kds-pink-verylight:#fdeaf2;
  --kds-pink-light:    #f8cfe0;
  --kds-pink-mid:      #f3b2cf;
  --kds-pink-dark:     #e78bb4;
  --kds-pink-deep:     #d96aa0;
  --kds-text:          #4a2a3a;
}

/* =========================================================
   1) LIGHT PINK SITE THEME (LINKS/TITLES/BUTTONS/PRICES)
========================================================= */

/* Links */
a{ color: var(--kds-pink-dark) !important; }
a:hover, a:focus{ color: var(--kds-pink-deep) !important; }

/* Product titles (shop grid) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product a .woocommerce-loop-product__title{
  color: var(--kds-pink-dark) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3em !important;
}
.woocommerce ul.products li.product:hover h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title{
  color: var(--kds-pink-deep) !important;
}

/* Single product title */
.woocommerce div.product .product_title{
  font-size: 26px !important;
  line-height: 1.2em !important;
  font-weight: 600 !important;
  color: var(--kds-pink-dark) !important;
  letter-spacing: .3px;
  margin-bottom: 10px !important;
}

/* Buttons */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-element-button{
  background: linear-gradient(145deg,
    var(--kds-pink-verylight) 0%,
    var(--kds-pink-light) 50%,
    var(--kds-pink-mid) 100%
  ) !important;
  color: var(--kds-text) !important;
  border: 1px solid var(--kds-pink-dark) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transition: all .25s ease-in-out !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-element-button:hover{
  box-shadow: 0 0 10px rgba(231,139,180,.45) !important;
  transform: scale(1.02) !important;
}

/* Variation swatches */
.woo-variation-swatches .variable-item,
.woo-variation-swatches .variable-item.button-variable-item{
  background: linear-gradient(145deg,
    var(--kds-pink-verylight) 0%,
    var(--kds-pink-light) 50%,
    var(--kds-pink-mid) 100%
  ) !important;
  border: 1px solid var(--kds-pink-dark) !important;
  border-radius: 6px !important;
  color: var(--kds-text) !important;
  font-weight: 600 !important;
  transition: all .25s ease-in-out !important;
}
.woo-variation-swatches .variable-item.selected,
.woo-variation-swatches .variable-item:hover{
  box-shadow: 0 0 10px rgba(231,139,180,.55) !important;
  transform: scale(1.02) !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--kds-pink-deep) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a{
  color: var(--kds-pink-dark) !important;
}

/* Hide store notice */
.woocommerce-store-notice,
.woocommerce-store-notice__notice,
p.demo_store{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* Hide tags on single product */
.single-product .product_meta,
.single-product .product_meta .tagged_as,
.single-product .product_meta .woocommerce-product-meta__item--tags,
.single-product .wc-block-components-product-metadata,
.single-product .wc-block-components-product-metadata__tags,
.single-product .wp-block-woocommerce-product-meta,
.single-product .wp-block-woocommerce-product-meta .wp-block-woocommerce-product-meta__item--tags{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   2) VALENTINE BOTTOM SCROLLING BANNER (MATCHES TOP)
========================================================= */
.kds-marquee,
.kds-vday-marquee{
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 12px 0 !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: #fff !important;

  /* MATCH TOP BANNER */
  background: linear-gradient(90deg,#7a4ae3,#d934a6,#ff3b86) !important;

  border-top: 2px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 -4px 12px rgba(0,0,0,.25) !important;

  /* auto-hide */
  animation: kdsHideBanner 20s forwards !important;
}

/* Scrolling text */
.kds-marquee-content,
.kds-vday-track{
  display: inline-block !important;
  padding-left: 100% !important;
  animation: kdsScrollText 16s linear infinite !important;

  font-weight: 800 !important;
  letter-spacing: .2px !important;
  text-shadow: 0 0 8px rgba(255,255,255,.6) !important;

  position: relative !important;
  z-index: 2 !important;
}

/* Remove overlay hearts */
.kds-marquee::before,
.kds-marquee::after,
.kds-vday-marquee::before,
.kds-vday-marquee::after{
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

@keyframes kdsScrollText{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}
@keyframes kdsHideBanner{
  0%,85%{ opacity:1; }
  100%{ opacity:0; visibility:hidden; }
}

/* Force banner wording (no HTML needed) */
.kds-marquee-content,
.kds-vday-track{
  font-size: 0 !important; /* hides whatever text is currently in your banner */
}
.kds-marquee-content::before,
.kds-vday-track::before{
  content: "💖 Gift cards welcome! 💖 Shop Karnas Design Studio on Etsy & Amazon too — use the links at the bottom of the page to explore all our storefronts. 💗";
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

/* Mobile banner */
@media (max-width:600px){
  .kds-marquee,
  .kds-vday-marquee{ padding: 10px 0 !important; }
  .kds-marquee-content::before,
  .kds-vday-track::before{ font-size: 14px; }
}

/* =========================================================
   3) PRETTY FLOATING MUSIC BUTTON (AND REMOVE WHITE PILL)
   (This styles the button you already added in the Site Editor)
========================================================= */

/* Keep the widget on top of banners/sliders */
#kds-music-widget{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 9999999 !important;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;

  /* kill any theme backdrop on the wrapper */
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Kill pseudo-elements that can create the white capsule */
#kds-music-widget::before,
#kds-music-widget::after,
#kds-music-widget *::before,
#kds-music-widget *::after{
  content: none !important;
  display: none !important;
}

/* IMPORTANT: do NOT clear backgrounds for everything inside,
   because the icon circle is supposed to be white. */

/* Button styling (matches your KDS pink variables) */
#kds-music-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;

  background: linear-gradient(135deg,
    var(--kds-pink-verylight),
    var(--kds-pink-light)
  ) !important;

  border: 2px solid var(--kds-pink-deep) !important;
  box-shadow: 0 12px 32px rgba(217,106,160,.22) !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
#kds-music-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 38px rgba(217,106,160,.28) !important;
}

/* Icon circle */
#kds-music-icon{
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--kds-pink-deep) !important;
  font-weight: 800 !important;
}

/* Label */
#kds-music-text{
  color: var(--kds-text) !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  font-size: 14px !important;
}

/* Slightly smaller on mobile */
@media (max-width: 480px){
  #kds-music-btn{ padding: 9px 12px !important; }
  #kds-music-text{ font-size: 13px !important; }
}
/*************************************************************
KDS MUSIC BUTTON — LIGHT CORAL PINK + NO WHITE WRAPPER
*************************************************************/

/* Widget placement + remove any wrapper “pill” */
#kds-music-widget{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 9999999 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

/* Kill pseudo elements that can create a white capsule */
#kds-music-widget::before,
#kds-music-widget::after,
#kds-music-widget *::before,
#kds-music-widget *::after{
  content: none !important;
  display: none !important;
}

/* Light coral button */
#kds-music-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;

  /* light coral pink */
  background: linear-gradient(135deg,#ffe3e6,#ffc0c9) !important;
  border: 2px solid #ff6f7f !important;

  box-shadow: 0 12px 32px rgba(255,111,127,.22) !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

#kds-music-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 38px rgba(255,111,127,.28) !important;
}

/* Play icon circle */
#kds-music-icon{
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.96) !important;
  color: #ff4f63 !important;
  font-weight: 900 !important;
}

/* Label */
#kds-music-text{
  color: #4a2a3a !important;
  font-weight: 750 !important;
  letter-spacing: .2px !important;
  font-size: 14px !important;
}
/*************************************************************
KDS FIX — MUSIC BUTTON ABOVE BANNER + CLICKABLE + LESS WHITE
*************************************************************/

/* Put the music button ABOVE the bottom marquee and make it clickable */
#kds-music-widget{
  z-index: 99999999 !important;  /* higher than banner */
  pointer-events: auto !important;
  right: 18px !important;
  bottom: 78px !important;       /* lifts it ABOVE your bottom banner */
}

/* Your banner can still show, but it should not steal clicks near the music button */
.kds-marquee,
.kds-vday-marquee{
  z-index: 999999 !important;
}

/* HARD kill any wrapper “pill” background */
#k
/* KDS — Floating music player (pretty coral) */
#kds-music-widget{
  position: fixed !important;
  right: 18px !important;
  bottom: 78px !important; /* above your bottom scrolling banner */
  z-index: 99999999 !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg,#ffe3e6,#ffc0c9) !important;
  border: 2px solid #ff6f7f !important;
  box-shadow: 0 12px 32px rgba(255,111,127,.22) !important;
}

#kds-music-audio{
  height: 34px !important;
  width: 240px !important;
  display: block !important;
}