/* Yanai Calendar - Modern Vibrant Common Layout & Elements CSS */

/* ==========================================
   CONTAINERS & SECTION ARCHITECTURE
   ========================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.container-wide {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

section {
  padding: 4.5rem 0;
  position: relative;
}

.section-sm {
  padding: 2.5rem 0;
}

.section-lg {
  padding: 6rem 0;
}

.section-alt {
  background-color: var(--color-bg-alt);
}

.section-warm {
  background-color: var(--color-bg-warm);
}

.section-pure {
  background-color: var(--color-bg-pure);
}

.section-dark {
  background: var(--gradient-primary);
  color: #ffffff;
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #ffffff;
}

.section-dark p {
  color: #f1f5f9;
}

/* ==========================================
   TYPOGRAPHY & SECTION HEADERS
   ========================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
}

h3 {
  font-size: 1.35rem;
  font-weight: 700;
}

h4 {
  font-size: 1.1rem;
  font-weight: 600;
}

p {
  color: var(--color-text-main);
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
}

p.lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.text-gradient-vibrant {
  background: var(--gradient-vibrant);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Section Header Structure */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem auto;
}

.section-header.text-left {
  text-align: left;
  margin-left: 0;
}

.section-header h2 {
  margin-bottom: 0.85rem;
}

.section-header p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: 0;
}

/* Pill / Eyebrow Badge */
.label-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
  background: var(--color-secondary-light);
  border: 1px solid var(--color-border-accent);
  padding: 0.35rem 0.95rem;
  border-radius: var(--border-radius-full);
  margin-bottom: 1rem;
}

.label-eyebrow.gold {
  color: var(--color-accent-hover);
  background: var(--color-accent-light);
  border-color: var(--color-border-gold);
}

.label-eyebrow.blue {
  color: var(--color-royal-blue);
  background: var(--color-royal-light);
  border-color: #bfdbfe;
}

/* CMYK Printer Precision Accent (Vibrant & Sleek) */
.cmyk-bar {
  display: inline-flex;
  gap: 6px;
  padding: 4px 8px;
  background: #ffffff;
  border-radius: var(--border-radius-full);
  box-shadow: var(--shadow-xs);
  margin-bottom: 0.75rem;
}

.cmyk-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.cmyk-cyan { background-color: var(--color-cmyk-cyan); }
.cmyk-magenta { background-color: var(--color-cmyk-magenta); }
.cmyk-yellow { background-color: var(--color-cmyk-yellow); }
.cmyk-key { background-color: var(--color-cmyk-key); }

/* ==========================================
   BUTTONS SYSTEM
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  padding: 0.8rem 1.8rem;
  transition: all var(--transition-normal);
  cursor: pointer;
  border: 1.5px solid transparent;
  line-height: 1.25;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn-sm {
  padding: 0.55rem 1.25rem;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.btn-rounded {
  border-radius: var(--border-radius-full);
}

/* Primary Button (Vivid Sunset Orange / Saffron Gradient) */
.btn-primary {
  background: var(--gradient-vibrant);
  color: #ffffff;
  box-shadow: var(--shadow-vibrant);
}

.btn-primary:hover {
  background: var(--gradient-vibrant-reverse);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -4px rgba(6, 182, 212, 0.4);
}

/* Secondary Button (Deep Navy Trust) */
.btn-secondary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--color-primary-light);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Outline Button */
.btn-outline {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text-heading);
}

.btn-outline:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background-color: var(--color-secondary-light);
  transform: translateY(-2px);
}

/* Outline White for Dark Sections */
.btn-outline-white {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.btn-outline-white:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* Gold Button */
.btn-gold {
  background: var(--gradient-gold);
  color: #ffffff;
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -4px rgba(6, 182, 212, 0.4);
}

.btn-outline-gold {
  background-color: #ffffff;
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.btn-outline-gold:hover {
  background: var(--gradient-gold);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* Text Link CTA */
.btn-text {
  background: transparent;
  color: var(--color-secondary);
  padding: 0.25rem 0;
  border: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.btn-text:hover {
  color: var(--color-secondary-hover);
}

.btn-text svg {
  transition: transform var(--transition-fast);
}

.btn-text:hover svg {
  transform: translateX(4px);
}

/* ==========================================
   PRODUCT CARDS & CATALOG GRIDS
   (Strict Non-Cropping, Equal Dimensions)
   ========================================== */
.sizes-grid,
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.sizes-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* Universal Modern Product Card */
.premium-card,
.size-card,
.product-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.premium-card:hover,
.size-card:hover,
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-accent);
}

/* Padded Display Box for Non-Cropped Product Images */
.card-img-wrapper {
  position: relative;
  width: 100%;
  height: 360px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Image must fit completely without cropping */
.card-img-wrapper img,
.card-img-wrapper .contain {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform var(--transition-normal);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.07));
}

.premium-card:hover .card-img-wrapper img,
.size-card:hover .card-img-wrapper img,
.product-card:hover .card-img-wrapper img {
  transform: scale(1.03);
}

/* Card Badge */
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ffffff;
  color: var(--color-secondary);
  border: 1px solid var(--color-border-accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--border-radius-full);
  box-shadow: var(--shadow-xs);
  z-index: 2;
  letter-spacing: 0.05em;
}

.card-badge.gold {
  background: var(--gradient-gold);
  color: #ffffff;
  border: none;
}

/* Card Content Area */
.card-content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.premium-card h3,
.size-card h3,
.product-card h3 {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
  transition: color var(--transition-fast);
}

.premium-card:hover h3,
.size-card:hover h3,
.product-card:hover h3 {
  color: var(--color-secondary);
}

.premium-card p,
.size-card p,
.product-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  flex: 1 0 auto;
  line-height: 1.55;
}

/* Card Footer CTA */
.card-footer-action {
  margin-top: auto;
  width: 100%;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.card-footer-action .btn {
  flex: 1 1 calc(50% - 0.3rem);
  min-width: 105px;
  text-align: center;
  justify-content: center;
  padding: 0.55rem 0.75rem;
}

/* ==========================================
   CATEGORY CARDS (HOMEPAGE SHOWCASE)
   ========================================== */
.about-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.about-cat-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.about-cat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-vibrant);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.about-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-accent);
}

.about-cat-card:hover::before {
  opacity: 1;
}

.about-cat-card .card-img-wrapper {
  height: 220px;
  margin-bottom: 1rem;
}

.about-cat-card h3 {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}

.about-cat-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  flex: 1 0 auto;
}

/* ==========================================
   BREADCRUMBS
   ========================================== */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  font-size: 0.88rem;
  padding: 0;
  margin: 0 0 1.25rem 0;
}

.breadcrumb-item a {
  color: var(--color-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-secondary-hover);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-light);
}

.breadcrumb-item.active,
.breadcrumb-item:last-child {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ==========================================
   PRODUCT & SERVICE HERO BANNER (FOOTER PALETTE & ULTRA-CLEAR CONTRAST)
   ========================================== */
.product-hero-banner {
  background: var(--bg-hero, #a12999);
  color: #ffffff;
  min-height: var(--banner-height, 420px);
  padding-top: calc(var(--header-height) + 1.5rem);
  padding-bottom: 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: none;
  display: flex;
  align-items: center;
}

/* Radiant Cyan-to-Fuchsia Brand Accent Top Line (Exact Footer Accent) */
.product-hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #38bdf8;
  z-index: 10;
}

/* Ambient Sea Blue & Magenta Radial Blooms */
.product-hero-banner::after {
  display: none;
}

/* Architectural Delicate Micro-Grid */
.banner-matrix-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.product-hero-banner .container {
  position: relative;
  z-index: 2;
}

.banner-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 3.5rem;
  align-items: center;
}

/* Breadcrumb & Live Status Capsule Nav (Crystal Clear Text) */
.banner-pill-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.banner-breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 1.15rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  font-size: 0.84rem;
  color: #ffffff;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.banner-breadcrumb-pill a {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.banner-breadcrumb-pill a:hover {
  color: #38bdf8;
}

.banner-breadcrumb-pill .sep {
  color: #f0abfc;
  font-size: 0.85rem;
  font-weight: 700;
  user-select: none;
}

.banner-breadcrumb-pill .current {
  color: #ffffff;
  font-weight: 800;
}

/* Embossed Luxury Status Pill (High Visibility) */
.banner-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1.05rem;
  background: rgba(240, 171, 252, 0.24);
  border: 1.5px solid rgba(240, 171, 252, 0.6);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.banner-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 10px #22d3ee;
  animation: bannerDotPulse 2s infinite ease-in-out;
}

/* Banner Content Typography - 100% High Contrast Clarity */
.banner-content h1 {
  font-size: clamp(2.15rem, 3.8vw, 3.15rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.95rem;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.02em;
}

.banner-content p {
  color: #fdf4ff;
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 1.35rem;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Quick Benefit Chips (Crisp White Text on Glass) */
.banner-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  isolation: isolate;
}

.banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  /* Forces its own stable GPU compositing layer so Chrome-for-Android doesn't
     leave a stale/duplicated blur layer behind when this chip wraps to a new
     flex line (seen as doubled text on mobile, e.g. 12x18 detail page). */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.banner-chip svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.banner-chip:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
}

/* Sculpted Porcelain Display Showcase Pedestal Card */
.banner-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.banner-stage-card,
.banner-visual-wrapper {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 330px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  animation: bannerFloat3D 6s ease-in-out infinite;
  transition: transform 0.4s ease;
  overflow: visible;
}

.banner-stage-card:hover,
.banner-visual-wrapper:hover {
  transform: translateY(-8px) scale(1.02);
}

.banner-stage-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.95rem;
  background: linear-gradient(135deg, #0284c7 0%, #0096c7 100%);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 3;
}

.banner-stage-glow {
  position: absolute;
  inset: 15%;
  background: radial-gradient(circle, rgba(232, 121, 249, 0.15) 0%, rgba(6, 182, 212, 0.12) 60%, transparent 80%);
  border-radius: 50%;
  filter: blur(25px);
  pointer-events: none;
  z-index: 1;
}

.banner-stage-card img,
.banner-visual-wrapper img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.16));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-stage-card:hover img,
.banner-visual-wrapper:hover img {
  transform: scale(1.04);
}

/* Keyframe Animations */
@keyframes bannerAuraFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(35px, 25px) scale(1.1); }
}

@keyframes bannerFloat3D {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

@keyframes bannerDotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px #d97706;
  }
  50% {
    opacity: 0.4;
    transform: scale(0.75);
    box-shadow: 0 0 4px #d97706;
  }
}

/* Responsive queries for Banner */
@media (max-width: 991px) {
  .banner-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .banner-content {
    text-align: center;
  }
  
  .banner-pill-nav,
  .banner-chips-group {
    justify-content: center;
  }
  
  .banner-content p {
    margin-left: auto;
    margin-right: auto;
  }
  
  .banner-stage-card,
  .banner-visual-wrapper {
    height: 270px;
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ==========================================
   DAILY CALENDAR DETAIL LAYOUT & SIDEBAR
   ========================================== */
.daily-layout-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.sidebar-nav {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.sidebar-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-secondary-light);
}

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-link {
  display: block;
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-main);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.sidebar-link:hover {
  background-color: var(--color-secondary-light);
  color: var(--color-secondary);
  padding-left: 1.25rem;
}

.sidebar-link.active {
  background: var(--gradient-vibrant);
  color: #ffffff;
  box-shadow: var(--shadow-xs);
}

/* ==========================================
   DAILY CALENDARS FULL-WIDTH CATALOG & MODERN PILLS NAV
   ========================================== */
.daily-cat-filter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  background: #ffffff;
  border: 1.5px solid var(--color-border-lavender);
  border-radius: var(--border-radius-md);
  padding: 1rem 1.5rem;
  margin-bottom: 2.75rem;
  box-shadow: 0 4px 16px rgba(4, 39, 56, 0.04);
}

.filter-pills-cluster {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-main);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.filter-nav-pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.filter-nav-pill:hover,
.filter-nav-pill.active {
  background: var(--color-secondary);
  color: #ffffff;
  border-color: var(--color-secondary);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}

.direct-size-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.direct-links-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.25rem;
}

.size-quick-link {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.size-quick-link:hover {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  border-color: var(--color-border-accent);
}

/* Deluxe Real Art 2-Card Grid (Full Width, Centered, Spacious & Bold) */
.sizes-grid-dlx {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 960px;
  margin: 0 auto;
  gap: 2.25rem;
}

/* Fancy Die-Cut 4-Card Grid (Full Width, 4 Equal Cards) */
.sizes-grid-fancy {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}

@media (max-width: 1200px) {
  .sizes-grid-fancy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sizes-grid-dlx {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .sizes-grid-fancy {
    grid-template-columns: 1fr;
  }
  .daily-cat-filter-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .direct-size-links {
    justify-content: center;
  }
}

/* Detail Pages: Sleek Horizontal Size Selector Bar */
.daily-detail-size-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  background: #ffffff;
  border: 1.5px solid var(--color-border-lavender);
  border-radius: var(--border-radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 2.25rem;
  box-shadow: 0 4px 16px rgba(4, 39, 56, 0.04);
}

.daily-size-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text-main);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.daily-size-pill:hover {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  border-color: var(--color-border-accent);
}

.daily-size-pill.active {
  background: var(--gradient-vibrant);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
  font-weight: 700;
}

.daily-size-pills-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.daily-size-pills-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.25rem;
}

/* Mobile Sidebar Details / Summary */
.mobile-sidebar-summary {
  display: none;
}

/* Calendar Product Detail Board Frame */
.calendar-board-frame {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2.5rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.gallery-main {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  aspect-ratio: 2 / 3;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: zoom-in;
  transition: transform var(--transition-normal);
}

.product-info-panel {
  display: flex;
  flex-direction: column;
}

.product-meta-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  background: var(--color-secondary-light);
  border: 1px solid var(--color-border-accent);
  padding: 0.25rem 0.75rem;
  border-radius: var(--border-radius-full);
  margin-bottom: 0.75rem;
  width: max-content;
}

.product-info-panel h2 {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.product-info-desc {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.product-specs-title {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.specs-table tr {
  border-bottom: 1px solid var(--color-border-light);
}

.specs-table td {
  padding: 0.75rem 0;
  font-size: 0.95rem;
}

.spec-label {
  font-weight: 600;
  color: var(--color-text-heading);
  width: 35%;
}

.spec-val {
  color: var(--color-text-main);
}

/* Designs Gallery Section (Thumbnail Strip) */
.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.gallery-thumbs .gallery-thumb-btn {
  flex: 1 1 130px;
  max-width: 160px;
}

@media (min-width: 1200px) {
  .gallery-thumbs .gallery-thumb-btn {
    flex: 0 1 calc((100% - 5 * 1rem) / 6);
  }
}

.gallery-thumb-btn {
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: 0;
  padding: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.gallery-thumb-btn img {
  width: 100%;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  object-fit: contain;
  background: #ffffff;
  object-position: center;
  display: block;
  padding: 3px 3px 0;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-thumb-num {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-primary);
  background: #f8fafc;
  border-top: 1px solid var(--color-border);
  padding: 0.4rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gallery-thumb-btn:hover {
  border-color: #38bdf8;
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 22px -4px rgba(2, 132, 199, 0.24);
}

.gallery-thumb-btn:hover img {
  transform: scale(1.04);
}

.gallery-thumb-btn:hover .gallery-thumb-num {
  background: #e0f2fe;
  color: #0284c7;
}

.gallery-thumb-btn.active {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px var(--color-secondary-light), var(--shadow-md);
}

.gallery-thumb-btn.active .gallery-thumb-num {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-weight: 800;
}

/* ==========================================
   LIGHTBOX OVERLAY
/* ==========================================
   ADVANCED INTERACTIVE GALLERY LIGHTBOX
   ========================================== */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  visibility: hidden;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.94) 0%, rgba(2, 6, 23, 0.98) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1;
}

/* Top Floating Bar: Counter & Tool Controls */
.lightbox-topbar {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  pointer-events: none;
}

.lightbox-counter {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.95rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--border-radius-full);
  color: #38bdf8;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.lightbox-toolbar {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-full);
  padding: 0.3rem 0.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.lightbox-tool-btn {
  background: transparent;
  border: none;
  color: #f1f5f9;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lightbox-tool-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  transform: scale(1.08);
}

.lightbox-tool-btn.lightbox-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

/* Floating Navigation Arrows (< & >) */
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.lightbox-nav-btn:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.5);
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-next {
  right: 1.5rem;
}

/* Center Stage & Zoom Layer */
.lightbox-stage-container {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  padding: 4.5rem 5.5rem 5rem 5.5rem;
  user-select: none;
}

.lightbox-zoom-layer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(72vw, 68vh);
  height: min(72vw, 68vh);
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.65);
  padding: 1.75rem;
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  transition: opacity 0.2s ease;
}

/* Bottom Caption Bar: Strictly Image Name */
.lightbox-caption-dock {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 90vw;
  pointer-events: none;
}

.lightbox-caption-box {
  pointer-events: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1.5rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 85vw;
}

.lightbox-caption-text {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.lightbox-caption-specs {
  color: #93c5fd;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .lightbox-stage-container {
    padding: 4rem 1rem 4.5rem 1rem;
  }
  .lightbox-zoom-layer {
    width: min(88vw, 62vh);
    height: min(88vw, 62vh);
    padding: 1rem;
  }
  .lightbox-nav-btn {
    width: 44px;
    height: 44px;
  }
  .lightbox-prev {
    left: 0.75rem;
  }
  .lightbox-next {
    right: 0.75rem;
  }
  .lightbox-topbar {
    top: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
  }
  .lightbox-caption-dock {
    bottom: 1rem;
  }
  .lightbox-caption-text {
    font-size: 0.88rem;
    padding: 0.45rem 1rem;
  }
}

/* ==========================================================================
   LIGHTBOX "LOOK" BY IMAGE TYPE — for lightboxes opened from a page (e.g.
   the homepage showcase) that has no theme-daily/theme-monthly body class.
   Mirrors the per-page overrides in daily-calendars.css / monthly-calendars.css
   so a card opens exactly like it does on its own product page.
   Other Services images intentionally get no override here and keep the
   default white lightbox box. Gold Daily has its own no-box rule below.
   ========================================================================== */
.lightbox.lb-theme-daily .lightbox-zoom-layer,
.lightbox.lb-theme-daily-deluxe .lightbox-zoom-layer {
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.lightbox.lb-theme-daily-deluxe .lightbox-img {
  border: 1px solid #000;
}

.lightbox.lb-theme-monthly .lightbox-zoom-layer {
  width: auto;
  height: auto;
  background: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.lightbox.lb-theme-monthly .lightbox-img {
  display: block;
  width: auto;
  height: min(74vh, 1260px);
  max-width: 88vw;
  max-height: none;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 768px) {
  .lightbox.lb-theme-monthly .lightbox-zoom-layer {
    width: auto;
    height: auto;
    padding: 0;
  }
  .lightbox.lb-theme-monthly .lightbox-img {
    height: min(66vh, 1260px);
    max-width: 92vw;
  }
}

/* Gold 12x18 daily: show the supplied image exactly as-is (its own white
   border stays part of the image) — no extra white box/padding around it. */
.lightbox.lb-theme-daily-gold .lightbox-zoom-layer {
  width: auto;
  height: auto;
  background: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.lightbox.lb-theme-daily-gold .lightbox-img {
  display: block;
  width: auto;
  height: min(78vh, 1400px);
  max-width: 88vw;
  max-height: none;
  object-fit: contain;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 768px) {
  .lightbox.lb-theme-daily-gold .lightbox-zoom-layer {
    width: auto;
    height: auto;
    padding: 0;
  }
  .lightbox.lb-theme-daily-gold .lightbox-img {
    height: min(68vh, 1400px);
    max-width: 92vw;
  }
}

/* ==========================================
   ENQUIRY DRAWER & MODAL
   ========================================== */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 37, 64, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 1600;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.drawer.active {
  transform: translateX(0);
}

.drawer-header {
  padding: 1.75rem 2rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-base);
}

.drawer-header h3 {
  font-size: 1.35rem;
  color: var(--color-primary);
  margin-bottom: 0;
}

.drawer-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color var(--transition-fast);
}

.drawer-close:hover {
  color: var(--color-secondary);
}

.drawer-body {
  padding: 2rem;
  flex: 1;
}

/* Form Styles */
.form-group {
  margin-bottom: 1.35rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-main);
  background-color: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px var(--color-secondary-subtle);
}

.form-control.is-invalid {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

textarea.form-control {
  resize: vertical;
  min-height: 110px;
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast {
  background: #ffffff;
  color: var(--color-text-heading);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  transform: translateY(20px);
  opacity: 0;
  transition: all var(--transition-normal);
}

.toast.active {
  transform: translateY(0);
  opacity: 1;
}

.toast svg {
  color: var(--color-success);
  flex-shrink: 0;
}

.toast-error {
  border-left-color: var(--color-error);
}

.toast-error svg {
  color: var(--color-error);
}

/* ==========================================
   FLOATING ACTION BUTTONS
   ========================================== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 990;
  transition: all var(--transition-normal);
  animation: pulseSubtle 3s infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55);
  color: #ffffff;
}

/* Floating Call Us Button (Deep Violet-Purple Vibrant) */
.call-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  height: 56px;
  padding: 0 1.35rem 0 1.15rem;
  background: var(--gradient-vibrant);
  color: #ffffff;
  border-radius: var(--border-radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.45);
  z-index: 990;
  text-decoration: none;
  transition: all var(--transition-normal);
  animation: callFloatPulse 3s infinite;
}

.call-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 32px rgba(6, 182, 212, 0.55);
  color: #ffffff;
}

.call-float svg {
  flex-shrink: 0;
  stroke: #ffffff;
  transition: transform var(--transition-fast);
}

.call-float:hover svg {
  transform: rotate(15deg);
}

.call-float-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
  animation: goldPulse 2s infinite;
  flex-shrink: 0;
}

@keyframes callFloatPulse {
  0% {
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4);
  }
  50% {
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.6);
  }
  100% {
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4);
  }
}

@keyframes goldPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(56, 189, 248, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
}

.back-to-top {
  position: fixed;
  bottom: 92px;
  right: 28px;
  width: 46px;
  height: 46px;
  background: #ffffff;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 980;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-normal);
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Decorative Divider */
.print-divider-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-border) 25%, var(--color-border-accent) 50%, var(--color-border) 75%, transparent 100%);
  margin: 0;
  border: none;
}

/* Body Overflow Lock */
body.overflow-hidden {
  overflow: hidden;
}

/* ==========================================
   VIEWPORT SCROLL PROGRESS & MICRO ANIMATIONS
   ========================================== */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #06b6d4 0%, #38bdf8 50%, #c4b5fd 100%);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.08s ease-out;
}

/* 3D Tilt Card Container */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

/* ==========================================
   ADVANCED SCROLL REVEAL DIRECTIONAL ENGINE
   ========================================== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal],
[data-reveal="fade-up"] {
  transform: translateY(38px);
}

[data-reveal="fade-down"] {
  transform: translateY(-38px);
}

[data-reveal="fade-left"] {
  transform: translateX(38px);
}

[data-reveal="fade-right"] {
  transform: translateX(-38px);
}

[data-reveal="zoom-in"] {
  transform: scale(0.92) translateY(24px);
}

[data-reveal="flip-up"] {
  transform: perspective(1000px) rotateX(16deg) translateY(32px);
  transform-origin: center bottom;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotateX(0);
}

/* Stagger Delay Utility Map */
[data-delay="50"]  { transition-delay: 50ms; }
[data-delay="80"]  { transition-delay: 80ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="160"] { transition-delay: 160ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="240"] { transition-delay: 240ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="320"] { transition-delay: 320ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }

/* ==========================================
   DYNAMIC CARD SHEEN & HOVER GLOW
   ========================================== */
.premium-card,
.size-card,
.product-card,
.cat-showcase-card,
.channel-card,
.process-step-card,
.machine-card,
.pillar-card,
.card-shine-fx {
  position: relative;
  overflow: hidden;
}

.premium-card::before,
.size-card::before,
.product-card::before,
.cat-showcase-card::before,
.channel-card::before,
.process-step-card::before,
.machine-card::before,
.pillar-card::before,
.card-shine-fx::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 6;
  transition: none;
}

.premium-card:hover::before,
.size-card:hover::before,
.product-card:hover::before,
.cat-showcase-card:hover::before,
.channel-card:hover::before,
.process-step-card:hover::before,
.machine-card:hover::before,
.pillar-card:hover::before,
.card-shine-fx:hover::before {
  left: 160%;
  transition: left 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Button & Link Micro-Interactions */
.btn svg,
.channel-link svg,
.mega-item-link svg,
.btn-whatsapp-fast svg,
.cta-banner-btn svg {
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}

.btn:hover svg:not(.brand-svg):not([fill]),
.channel-link:hover svg,
.mega-item-link:hover svg,
.cta-banner-btn:hover svg {
  transform: translateX(4px);
}

.btn-primary,
.cta-banner-btn {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.cta-banner-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(30deg);
  pointer-events: none;
  animation: shimmerLine 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   PROMOTIONAL CTA BANNER CARD (PINK-PURPLE THEME)
   ========================================== */
.cta-banner {
  background: #801476;
  border-radius: var(--border-radius-xl);
  padding: 3.5rem 3rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(43, 8, 58, 0.65), 0 0 35px -10px rgba(217, 70, 239, 0.25);
  border: 2px solid rgba(240, 171, 252, 0.38);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.cta-banner::before {
  display: none;
}

.cta-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #38bdf8;
  z-index: 3;
}

.cta-banner-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.cta-banner-content h2 {
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.cta-banner-content p {
  font-size: 1.05rem;
  color: #f5d0fe;
  line-height: 1.65;
  margin: 0;
}

.cta-banner-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}