/* RAMEN68 x Westamart — Amul Pure Ghee theme
   Gold / deep red / cream dairy aesthetic + glow & gradient motion */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Manrope:wght@500;700;800&display=swap');

:root {
  --amul-gold: #f5c518;
  --amul-gold-deep: #c9920a;
  --amul-red: #a50d12;
  --amul-red-deep: #6e0609;
  --amul-cream: #fff4d6;
  --amul-sky: #6ec8ff;
  --amul-meadow: #2f8f3a;
  --amul-ink: #1a0a08;
  --amul-glow: 0 0 18px rgba(245, 197, 24, 0.55), 0 0 42px rgba(165, 13, 18, 0.35);
}

@keyframes amulGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes amulGlowPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.45), 0 0 28px rgba(165, 13, 18, 0.35), inset 0 0 18px rgba(245, 197, 24, 0.12);
  }
  50% {
    box-shadow: 0 0 28px rgba(245, 197, 24, 0.9), 0 0 60px rgba(165, 13, 18, 0.55), inset 0 0 28px rgba(255, 244, 214, 0.18);
  }
}

@keyframes amulShimmer {
  0% { transform: translateX(-140%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}

@keyframes amulFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes amulBorderSpin {
  to { --amul-angle: 360deg; }
}

html, body#teepublic, body {
  font-family: 'Manrope', 'Segoe UI', sans-serif !important;
  color: var(--amul-cream) !important;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(245, 197, 24, 0.28), transparent 45%),
    radial-gradient(ellipse at 80% 0%, rgba(110, 200, 255, 0.22), transparent 40%),
    linear-gradient(145deg, #2a0b0c 0%, #4a1608 28%, #1d3a12 58%, #0f2740 100%) !important;
  background-size: 200% 200% !important;
  animation: amulGradientShift 16s ease infinite !important;
  overflow-x: auto !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03) 0 12px,
      transparent 12px 24px
    );
  mix-blend-mode: soft-light;
  opacity: 0.45;
}

body::after {
  content: "";
  position: fixed;
  width: 420px;
  height: 420px;
  right: -80px;
  top: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.35), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: amulFloat 7s ease-in-out infinite;
}

.m-top-banner,
.vc-header,
.main-wrapper,
.m-design,
.m-footer,
.m-design__additional-info-container {
  position: relative;
  z-index: 1;
}

.m-top-banner {
  background: linear-gradient(90deg, var(--amul-red-deep), var(--amul-red), var(--amul-gold-deep), var(--amul-red)) !important;
  background-size: 300% 100% !important;
  animation: amulGradientShift 8s linear infinite, amulGlowPulse 3.2s ease-in-out infinite !important;
  border-bottom: 3px solid var(--amul-gold) !important;
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}

.m-top-banner .free-shipping,
.m-top-banner strong {
  color: var(--amul-cream) !important;
  text-shadow: 0 0 12px rgba(245, 197, 24, 0.8), 0 2px 0 #5a0508 !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.04em !important;
}

.vc-header,
.vc-header.jsHead {
  background: linear-gradient(180deg, rgba(110, 6, 9, 0.94), rgba(26, 10, 8, 0.88)) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(245, 197, 24, 0.45) !important;
  box-shadow: 0 10px 40px rgba(165, 13, 18, 0.35) !important;
}

.vc-header__container {
  max-width: 1240px !important;
  gap: 18px !important;
}

.vc-header-logo__image {
  filter: drop-shadow(0 0 14px rgba(245, 197, 24, 0.75)) !important;
  animation: amulFloat 4.5s ease-in-out infinite !important;
}

.vc-header__cta-button,
.vc-header__account-button,
.vc-header__cart-button,
.vc-header__shop-button {
  border-radius: 999px !important;
}

.m-header__search-field,
.form__control.m-header__search-field {
  background: rgba(255, 244, 214, 0.12) !important;
  border: 1px solid rgba(245, 197, 24, 0.55) !important;
  border-radius: 999px !important;
  color: var(--amul-cream) !important;
  box-shadow: inset 0 0 18px rgba(245, 197, 24, 0.12) !important;
}

.main-wrapper,
.main-wrapper.overflow-hidden {
  background:
    linear-gradient(160deg, rgba(26, 10, 8, 0.55), rgba(165, 13, 18, 0.25)),
    url('../img/westamart-amul-300.webp') center top / cover no-repeat fixed !important;
  padding: 28px 12px 80px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.contain.contain--wide-3,
.m-design,
.m-design__content {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.m-design__content {
  display: block !important;
}

@media (min-width: 769px) {
  .m-design__product {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr) !important;
    grid-template-areas: "preview title" "preview options" !important;
    grid-column-gap: 28px !important;
    align-items: start !important;
  }
}

.m-design__preview,
.m-product-preview,
.m-product-preview__main,
.m-product-preview__gallery {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.m-product-preview__glider-img img,
.preview .jsProductMainImage,
.glide__slide img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.m-design__options,
.m-design-details__title {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.m-design__product {
  background:
    linear-gradient(145deg, rgba(165, 13, 18, 0.55), rgba(26, 10, 8, 0.72)),
    radial-gradient(circle at 20% 0%, rgba(245, 197, 24, 0.25), transparent 55%) !important;
  border: 2px solid transparent !important;
  border-radius: 28px !important;
  padding: 22px !important;
  box-shadow: var(--amul-glow) !important;
  backdrop-filter: blur(18px) !important;
  position: relative !important;
  overflow: visible !important;
  animation: amulGlowPulse 4s ease-in-out infinite !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.m-design__product::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  padding: 2px;
  background: linear-gradient(120deg, var(--amul-gold), var(--amul-red), var(--amul-sky), var(--amul-gold));
  background-size: 300% 300%;
  animation: amulGradientShift 7s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.m-design__product::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 214, 0.28), transparent);
  animation: amulShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

.h__h1--sm,
.m-design-details__title h1,
.m-design__h2 {
  font-family: 'Cinzel', serif !important;
  background: linear-gradient(90deg, #fff4d6, #f5c518, #ffef9a, #f5c518) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  animation: amulGradientShift 5s linear infinite !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(245, 197, 24, 0.45));
  letter-spacing: 0.02em !important;
}

.m-design__price,
.m-design__price--sale,
.m-design__price--regular {
  color: var(--amul-gold) !important;
  text-shadow: 0 0 12px rgba(245, 197, 24, 0.65) !important;
  font-weight: 800 !important;
}

.preview,
.m-product-preview__glider,
.glide,
.glide__track {
  border-radius: 24px !important;
  background:
    linear-gradient(160deg, rgba(110, 6, 9, 0.85), rgba(26, 10, 8, 0.9)) !important;
  box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.55), 0 0 35px rgba(245, 197, 24, 0.35) !important;
  overflow: hidden !important;
}

.glide__slide img,
.m-product-preview__glider-img img,
.preview .jsProductMainImage {
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(245, 197, 24, 0.25) !important;
  transition: transform 0.4s ease, filter 0.4s ease !important;
}

.glide__slide img:hover {
  transform: scale(1.04) rotate(-0.4deg) !important;
  filter: saturate(1.15) brightness(1.05) !important;
}

.btn-x,
a.btn-x {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  padding: 16px 30px !important;
  margin: 8px !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
  background: linear-gradient(120deg, #6e0609, #a50d12, #f5c518, #a50d12, #6e0609) !important;
  background-size: 280% 280% !important;
  animation: amulGradientShift 4s ease infinite, amulGlowPulse 2.8s ease-in-out infinite !important;
  color: #fff8e7 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.btn-x::before,
a.btn-x::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) !important;
  transform: translateX(-120%) skewX(-20deg) !important;
  animation: amulShimmer 2.8s linear infinite !important;
  pointer-events: none !important;
}

.btn-x:hover,
a.btn-x:hover {
  filter: brightness(1.12) saturate(1.15) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.radio-selector__select {
  background: linear-gradient(145deg, rgba(165, 13, 18, 0.85), rgba(26, 10, 8, 0.9)) !important;
  border: 1px solid rgba(245, 197, 24, 0.55) !important;
  border-radius: 14px !important;
  color: var(--amul-cream) !important;
  box-shadow: 0 0 14px rgba(245, 197, 24, 0.2) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.radio-selector__select:hover,
.radio-selector__radio:checked + .radio-selector__select {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 22px rgba(245, 197, 24, 0.55) !important;
  border-color: var(--amul-gold) !important;
}

.vc-pill,
.link.vc-pill {
  background: linear-gradient(135deg, rgba(165, 13, 18, 0.9), rgba(201, 146, 10, 0.85)) !important;
  border: 1px solid rgba(245, 197, 24, 0.7) !important;
  border-radius: 999px !important;
  color: #fff8e7 !important;
  box-shadow: 0 0 16px rgba(245, 197, 24, 0.35) !important;
}

.RAMEN68-container {
  background:
    radial-gradient(circle at 15% 10%, rgba(245, 197, 24, 0.2), transparent 40%),
    linear-gradient(160deg, rgba(110, 6, 9, 0.95), rgba(26, 10, 8, 0.96)) !important;
  border: 2px solid rgba(245, 197, 24, 0.65) !important;
  box-shadow: var(--amul-glow) !important;
  border-radius: 28px !important;
  position: relative !important;
  overflow: hidden !important;
}

.RAMEN68-container h2 {
  color: var(--amul-gold) !important;
  text-shadow: 0 0 18px rgba(245, 197, 24, 0.7) !important;
  font-family: 'Cinzel', serif !important;
}

.RAMEN68-container details {
  background: linear-gradient(135deg, rgba(165, 13, 18, 0.75), rgba(26, 10, 8, 0.9)) !important;
  border: 1px solid rgba(245, 197, 24, 0.45) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 16px rgba(245, 197, 24, 0.18) !important;
}

.RAMEN68-container summary {
  color: var(--amul-cream) !important;
}

.RAMEN68-container details p {
  color: #ffe9b8 !important;
}

.RAMEN68-container blockquote {
  background: rgba(26, 10, 8, 0.85) !important;
  border-left: 5px solid var(--amul-gold) !important;
  box-shadow: 0 0 20px rgba(165, 13, 18, 0.35) !important;
}

.RAMEN68-container cite {
  color: var(--amul-gold) !important;
}

.m-design__additional-info-container p,
.m-design__additional-info-container a {
  color: #ffe9b8 !important;
}

.m-design__additional-info-container a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m-footer {
  background: linear-gradient(180deg, rgba(26, 10, 8, 0.2), rgba(110, 6, 9, 0.95)) !important;
  border-top: 2px solid rgba(245, 197, 24, 0.45) !important;
  box-shadow: 0 -10px 40px rgba(165, 13, 18, 0.35) !important;
}

.m-footer__guarantee-headline,
.m-footer__guarantee-subtext,
.m-footer a,
.link-collection__header,
.m-footer__legal-bar {
  color: var(--amul-cream) !important;
}

.m-footer__guarantee-image img {
  filter: drop-shadow(0 0 18px rgba(245, 197, 24, 0.65)) !important;
}

/* Fixed bottom bar if present */
.fixed-footer,
.bottom-nav,
.nav-bottom,
div[style*="position: fixed"][style*="bottom"] {
  backdrop-filter: blur(14px);
}

.fixed-footer a,
.bottom-nav a {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.fixed-footer a:hover,
.bottom-nav a:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(245, 197, 24, 0.8));
}