/* =============================================================================
   LAYR55 — Unified glass button system (matches social-button crisp glass)
============================================================================= */

:root {
  --glass-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(20, 30, 40, 0.06) 100%
  );
  --glass-border: 1px solid rgba(255, 255, 255, 0.05);
  --glass-blur: blur(14px) saturate(130%);
  --glass-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --glass-lift: translateY(-4px) scale(1.08);
  --glass-press: translateY(1px) scale(0.96);
  --glass-ease: cubic-bezier(0.34, 1.15, 0.64, 1);
  --glass-transition: transform 0.22s var(--glass-ease), box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;

  --nav-outline: 0.04em rgba(0, 0, 0, 0.92);
  --nav-text-shadow:
    -1px 0 0 rgba(0, 0, 0, 0.88),
    1px 0 0 rgba(0, 0, 0, 0.88),
    0 -1px 0 rgba(0, 0, 0, 0.88),
    0 1px 0 rgba(0, 0, 0, 0.88),
    -1px -1px 0 rgba(0, 0, 0, 0.82),
    1px -1px 0 rgba(0, 0, 0, 0.82),
    -1px 1px 0 rgba(0, 0, 0, 0.82),
    1px 1px 0 rgba(0, 0, 0, 0.82),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

/* All interactive glass controls */
.glass-btn,
.social-button,
.Menu-Button,
.Cart-Button,
.Island-Menu .menu-link,
.Footer-Buttons .menu-link,
.product-card .buy-button,
.Contact-Button,
.Island-Cart button,
.process-button,
.remove-button,
.glass-back,
.qty-btn,
.buy-btn,
#close-popup,
.info-button:not(.expanded) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow) !important;
  transition: var(--glass-transition);
}

/* Shine layer (always visible — same as social buttons) */
.glass-btn::before,
.social-button::before,
.Menu-Button::before,
.Cart-Button::before,
.Island-Menu .menu-link::before,
.Footer-Buttons .menu-link::before,
.product-card .buy-button::before,
.Contact-Button::before,
.Island-Cart button::before,
.process-button::before,
.glass-back::before,
.qty-btn::before,
.buy-btn::before,
#close-popup::before,
.info-button:not(.expanded)::before {
  content: "";
  position: absolute;
  top: -28%;
  left: -28%;
  width: 155%;
  height: 68%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0) 60%
  );
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Depth layer */
.glass-btn::after,
.social-button::after,
.Menu-Button::after,
.Cart-Button::after,
.Island-Menu .menu-link::after,
.Footer-Buttons .menu-link::after,
.product-card .buy-button::after,
.Contact-Button::after,
.Island-Cart button::after,
.process-button::after,
.glass-back::after,
.qty-btn::after,
.buy-btn::after,
#close-popup::after,
.info-button:not(.expanded)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 70% 80%,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    transparent 70%
  );
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Hover — unified lift */
.glass-btn:hover:not(:disabled),
.social-button:hover,
.Menu-Button:hover,
.Cart-Button:hover,
.Island-Menu .menu-link:hover,
.Footer-Buttons .menu-link:hover,
.product-card .buy-button:hover,
.Contact-Button:hover,
.Island-Cart button:hover,
.process-button:hover,
.remove-button:hover,
.glass-back:hover,
.qty-btn:hover,
.buy-btn:hover:not(:disabled),
#close-popup:hover,
.info-button:not(.expanded):hover {
  transform: var(--glass-lift);
  box-shadow: var(--glass-shadow-hover) !important;
}

/* Press — unified press animation */
.glass-btn:active:not(:disabled),
.social-button:active,
.Menu-Button:active,
.Cart-Button:active,
.Island-Menu .menu-link:active,
.Footer-Buttons .menu-link:active,
.product-card .buy-button:active,
.Contact-Button:active,
.Island-Cart button:active,
.process-button:active,
.remove-button:active,
.glass-back:active,
.qty-btn:active,
.buy-btn:active:not(:disabled),
#close-popup:active,
.info-button:not(.expanded):active {
  transform: var(--glass-press);
  box-shadow: var(--glass-shadow) !important;
  transition-duration: 0.08s;
}

/* Nav / footer text — readable on light backgrounds behind island */
.Island-Menu .menu-link,
.Footer-Buttons .menu-link {
  color: #f2f2f2;
  -webkit-text-stroke: var(--nav-outline);
  paint-order: stroke fill;
  text-shadow: var(--nav-text-shadow);
}

/* Icon controls sit above glass layers */
.Menu-Button span,
.Cart-Button svg,
.social-button svg,
.glass-back,
.buy-btn,
.Contact-Button,
.Island-Menu .menu-link,
.Footer-Buttons .menu-link {
  position: relative;
  z-index: 1;
}

/* Circular icon buttons */
.Menu-Button,
.Cart-Button,
.social-button,
.glass-back,
.info-button:not(.expanded) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Product card CTA keeps horizontal centering */
.product-card .buy-button {
  transform: translateX(-50%);
  padding: 20px 32px;
  border-radius: 22px;
  box-sizing: border-box;
}

.product-card:hover .buy-button {
  opacity: 1;
  pointer-events: auto;
}

.product-card .buy-button:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.08);
}

.product-card .buy-button:active {
  transform: translateX(-50%) translateY(1px) scale(0.96);
}

/* Buy button on product pages — glass + light text */
.buy-btn {
  color: #fff !important;
  font-family: "Anton", sans-serif;
  letter-spacing: 2px;
  border-radius: 16px;
}

.buy-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
}

/* Override legacy solid hover fills — keep crisp glass */
.Contact-Button:hover,
.product-card .buy-button:hover,
.process-button:hover {
  background: var(--glass-bg) !important;
}

/* Cart checkout variants */
.Island-Cart .checkout-button:hover {
  background: #fff !important;
  color: #000 !important;
}

.Island-Cart .continue-button:hover {
  background: rgba(0, 0, 0, 0.85) !important;
  color: #fff !important;
}

/* Social brand hovers (keep colour, same motion) */
.social-button.instagram:hover {
  background: #e1306c !important;
}

.social-button.whatsapp:hover {
  background: #25d366 !important;
}

.social-button.twitter:hover {
  background: #000 !important;
}

/* Info panel expanded — no glass press on full panel */
.info-button.expanded {
  background: #000 !important;
  transform: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.info-button.expanded::before,
.info-button.expanded::after {
  display: none;
}

/* Popup OK */
#close-popup {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Mobile — tighter shine/shadows (fixes oversized glow on small buttons)      */
/* -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --nav-outline: 0.032em rgba(0, 0, 0, 0.94);
    --nav-text-shadow:
      -1px 0 0 rgba(0, 0, 0, 0.9),
      1px 0 0 rgba(0, 0, 0, 0.9),
      0 -1px 0 rgba(0, 0, 0, 0.9),
      0 1px 0 rgba(0, 0, 0, 0.9),
      0 1px 5px rgba(0, 0, 0, 0.55);
    --glass-lift: translateY(-2px) scale(1.05);
    --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --glass-shadow-hover: 0 7px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .glass-btn::before,
  .social-button::before,
  .Menu-Button::before,
  .Cart-Button::before,
  .Island-Menu .menu-link::before,
  .Footer-Buttons .menu-link::before,
  .product-card .buy-button::before,
  .Contact-Button::before,
  .Island-Cart button::before,
  .process-button::before,
  .glass-back::before,
  .qty-btn::before,
  .buy-btn::before,
  #close-popup::before,
  .info-button:not(.expanded)::before {
    top: -18%;
    left: -18%;
    width: 135%;
    height: 58%;
    filter: blur(5px);
  }

  .glass-btn::after,
  .social-button::after,
  .Menu-Button::after,
  .Cart-Button::after,
  .Island-Menu .menu-link::after,
  .Footer-Buttons .menu-link::after,
  .product-card .buy-button::after,
  .Contact-Button::after,
  .Island-Cart button::after,
  .process-button::after,
  .glass-back::after,
  .qty-btn::after,
  .buy-btn::after,
  #close-popup::after,
  .info-button:not(.expanded)::after {
    opacity: 0.28;
  }

  .product-card .buy-button {
    padding: 13px 18px;
    border-radius: 16px;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --nav-outline: 0.036em rgba(0, 0, 0, 0.92);
  }

  .product-card .buy-button {
    padding: 18px 28px;
    border-radius: 20px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glass-btn,
  .social-button,
  .Menu-Button,
  .Cart-Button,
  .Island-Menu .menu-link,
  .Footer-Buttons .menu-link,
  .product-card .buy-button,
  .Contact-Button,
  .Island-Cart button,
  .process-button,
  .glass-back,
  .qty-btn,
  .buy-btn,
  #close-popup,
  .info-button:not(.expanded) {
    transition: none;
  }
}