/*
Theme Name: FLUFF Sleepwear
Theme URI: https://vitaldc.com
Author: FLUFF Sleepwear
Author URI: https://vitaldc.com
Description: Premium slow-luxury sleepwear WooCommerce theme crafted for FLUFF Sleepwear (vitaldc.com).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fluff
Tags: e-commerce, woocommerce, luxury, sleepwear, tailwind, responsive-layout
*/

:root {
  --color-header-bg: #1F2F4F;
  --color-header-text: #D4B586;
  --color-heading-text: #1F2F4F;
  --color-normal-text: rgba(31, 47, 79, 0.82);
  --color-primary: #1F2F4F;
  --color-primary-container: #2D4671;
  --color-terracotta-rich: #1F2F4F;
  --color-sale-yellow: #D4B586;
  --color-blush-tint: #F8F6EF;
  --color-surface: #F8F6EF;
  --color-surface-container: #F0EDE4;
  --color-surface-low: #F5F3EB;
  --color-charcoal-muted: #53627A;
  --color-border-card: #B7C7D9;
  --color-border-alt: #AA9B8C;
  --color-ready-stock-bg: #647A96;
  --color-ready-stock-text: #ffffff;
  --color-preorder-bg: #D8B4C1;
  --color-preorder-text: #1F2F4F;
  --color-winter-blue: #1F2F4F;
  --color-summer-mauve: #D8B4C1;
  --color-luxury-gold: #D4B586;
}

/* Sharp Corners Override */
.rounded-xl,
.rounded-2xl,
.rounded-lg,
[class*='rounded-xl'],
[class*='rounded-2xl'],
[class*='rounded-lg'],
.aspect-\[3\/4\],
.aspect-\[4\/3\],
img {
  border-radius: 0px !important;
}

/* 100% Opaque Solid Mobile Menu Drawer */
#fluffMobileMenu {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: #F8F6EF !important;
  background: #F8F6EF !important;
  opacity: 1 !important;
  z-index: 999999 !important;
}

#fluffMobileMenu a {
  background-color: #ffffff !important;
  border-color: #B7C7D9 !important;
  color: #1F2F4F !important;
  opacity: 1 !important;
}

/* Top Bar Headings & Header Controls (Brand Guide Styling: #16233B bg + White text/icons) */
header.fixed {
  background-color: #16233B !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  max-height: 110px !important;
}

.admin-bar header.fixed {
  top: 32px !important;
}

@media (max-width: 782px) {
  .admin-bar header.fixed {
    top: 46px !important;
  }

  .admin-bar main {
    padding-top: 158px !important;
  }
}

/* Seamless zero whitespace on homepage between fixed header & hero slider */
body.home main,
body.front-page main {
  padding-top: 68px !important;
  background-color: #16233B !important;
}

@media (min-width: 640px) {
  body.home main,
  body.front-page main {
    padding-top: 72px !important;
  }
}

@media (min-width: 1024px) {
  body.home main,
  body.front-page main {
    padding-top: 80px !important;
  }
}

/* ==========================================================================
   Hero Slick Slider Throttling / FOUC Guard
   Prevents uninitialized slides from stacking or floating on slow connection
   ========================================================================== */
.fluff-hero-slider-container {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #16233B !important;
}

.fluff-hero-slick:not(.slick-initialized) {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.fluff-hero-slick:not(.slick-initialized) .fluff-hero-slide:not(:first-child) {
  display: none !important;
}

.fluff-hero-slick:not(.slick-initialized) .fluff-hero-slide:first-child {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
}

.fluff-hero-slick:not(.slick-initialized) .fluff-slick-prev,
.fluff-hero-slick:not(.slick-initialized) .fluff-slick-next {
  opacity: 0 !important;
  pointer-events: none !important;
}

header.fixed aside {
  background-color: #16233B !important;
  border-bottom: 1px solid rgba(212, 181, 134, 0.2) !important;
  height: 28px !important;
  max-height: 28px !important;
}

header.fixed aside span {
  color: #D4B586 !important;
}

/* Guard against oversized logo blowing up header height */
header.fixed img {
  max-height: 38px !important;
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Header Action Controls & Navigation Colors: Crisp Pure White (#FFFFFF) */
header.fixed nav a,
header.fixed button,
header.fixed a,
header.fixed svg {
  color: #FFFFFF !important;
}

header.fixed svg {
  stroke: #FFFFFF !important;
}

header.fixed svg path {
  stroke: #FFFFFF !important;
}

header.fixed nav a {
  color: #FFFFFF !important;
  transition: color 0.2s ease !important;
}

header.fixed nav a:hover,
header.fixed button:hover svg,
header.fixed a:hover svg {
  color: #D4B586 !important;
  stroke: #D4B586 !important;
}

header.fixed nav a:hover svg path,
header.fixed button:hover svg path,
header.fixed a:hover svg path {
  stroke: #D4B586 !important;
}

header.fixed .fluff-cart-count-badge {
  background-color: #D4B586 !important;
  color: #16233B !important;
  min-width: 20px !important;
  height: 20px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

/* Responsive Desktop / Mobile Breakpoint Rules (1024px / lg) */
@media (max-width: 1023.98px) {
  .desktop-only-nav {
    display: none !important;
  }

  .mobile-only-control {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  .mobile-only-control {
    display: none !important;
  }

  .desktop-only-nav {
    display: flex !important;
  }

  header.fixed nav {
    display: flex !important;
  }
}

@layer base {
  html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    background-color: #F8F6EF;
  }

  body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
    background-color: #F8F6EF;
    color: rgba(31, 47, 79, 0.85);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #1F2F4F !important;
    font-weight: 700;
  }

  p {
    color: rgba(31, 47, 79, 0.82);
  }

  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
  }

  main> :first-child {
    margin-top: 0 !important;
  }

  main> :last-child {
    margin-bottom: 0 !important;
  }
}

/* Logo Sizing Limits across all pages */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  max-height: 3.75rem;
}

.custom-logo,
.custom-logo-link img,
header .custom-logo {
  max-height: 3.75rem !important;
  height: 3.75rem !important;
  width: auto !important;
  object-fit: contain !important;
}

/* High Contrast Title Vision & Typography */
.text-high-contrast {
  color: #1F2F4F !important;
  font-weight: 700 !important;
}

.hero-text-shadow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.header-title-badge {
  background-color: rgba(255, 255, 255, 0.95);
  color: #1F2F4F;
  border: 1px solid #B7C7D9;
  padding: 0.25rem 0.85rem;
  border-radius: 9999px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(31, 47, 79, 0.06);
}

/* Modern, Elegant Desktop Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F0EDE4;
}

::-webkit-scrollbar-thumb {
  background: #B7C7D9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1F2F4F;
}

/* Utility to explicitly hide scrollbars for horizontal carousel touch strips */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Brand Utility Classes for Slow Luxury Palette */
.badge-ready-stock {
  background-color: #647A96 !important;
  color: #ffffff !important;
}

.badge-preorder {
  background-color: #D8B4C1 !important;
  color: #1F2F4F !important;
}

.border-theme-card {
  border-color: #B7C7D9 !important;
}

.text-luxury-gold {
  color: #D4B586 !important;
}

.bg-luxury-gold {
  background-color: #D4B586 !important;
}

.text-normal-muted {
  color: rgba(31, 47, 79, 0.82) !important;
}

.heading-midnight {
  color: #1F2F4F !important;
}

/* Moving News Bar / Ticker Marquee Effect */
@keyframes fluffMarquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

.fluff-ticker-track {
  display: flex;
  width: max-content;
  animation: fluffMarquee 24s linear infinite;
  will-change: transform;
}

.fluff-ticker-track:hover {
  animation-play-state: paused;
}

/* 1-Row Horizontal Product Cards (Border-free, Off-white Background) */
.product-card-offwhite {
  background-color: #F0EDE4 !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 10px rgba(31, 47, 79, 0.04) !important;
}

.product-card-offwhite:hover {
  box-shadow: 0 8px 24px rgba(31, 47, 79, 0.08) !important;
}

/* Related Products Height Normalization & Responsive Grid (PC & Mobile) */
.related.products,
.upsells.products {
  width: 100% !important;
  margin-top: 2rem !important;
}

.related.products>h2,
.upsells.products>h2 {
  font-family: 'Bodoni Moda', Didot, 'Bodoni MT', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #1F2F4F !important;
  margin-bottom: 1.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.related.products ul.products,
.upsells.products ul.products,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 768px) {

  .related.products ul.products,
  .upsells.products ul.products,
  ul.products.columns-3,
  ul.products.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
}

ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 100% !important;
  background-color: #F0EDE4 !important;
  padding: 0.875rem !important;
  margin: 0 !important;
  border: none !important;
}

ul.products li.product .aspect-\[4\/5\],
ul.products li.product .aspect-\[3\/4\],
ul.products li.product a img {
  aspect-ratio: 3/4 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

ul.products li.product h2,
ul.products li.product h3,
ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9375rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #1F2F4F !important;
  min-height: 2.55rem !important;
  max-height: 2.55rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.25rem !important;
}

ul.products li.product .price {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #1F2F4F !important;
  min-height: 1.5rem !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product button {
  margin-top: auto !important;
  width: 100% !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background-color: #1F2F4F !important;
  color: #ffffff !important;
  text-align: center !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product button:hover {
  background-color: #D4B586 !important;
  color: #1F2F4F !important;
}

/* FLUFF Engraved Specifications Table */
.fluff-specs-engraved-table {
  border: 1px solid #B7C7D9;
  background-color: #FFFFFF;
}

.fluff-specs-engraved-table .divide-y>div:nth-child(even) {
  background-color: rgba(240, 237, 228, 0.45);
}

.woocommerce-Tabs-panel--fluff_specs {
  margin-top: 1.5rem;
}

.swatch-size-pill:disabled {
  opacity: 0.65;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ==========================================================================
   FLUFF Hero Artisanal Slick Carousel & Navigation Styles
   ========================================================================== */
.fluff-hero-slider-container {
  position: relative;
  width: 100%;
}

.fluff-hero-slick .slick-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Artisanal Slick Dots */
.fluff-hero-slick .slick-dots {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 25;
}

.fluff-hero-slick .slick-dots li {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.fluff-hero-slick .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 24px;
  height: 4px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.fluff-hero-slick .slick-dots li button:hover {
  background: rgba(212, 181, 134, 0.7);
}

.fluff-hero-slick .slick-dots li.slick-active button {
  width: 44px;
  background: #D4B586;
  box-shadow: 0 0 10px rgba(212, 181, 134, 0.6);
}

.fluff-hero-slick .slick-dots li button:before {
  display: none !important;
}

/* Chic Glassmorphic Arrows */
.fluff-slick-prev,
.fluff-slick-next {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.fluff-slick-prev:active,
.fluff-slick-next:active {
  transform: translateY(-50%) scale(0.95);
}

/* ==========================================================================
   FLUFF Luxury Variation Swatches (Sliced-Off Unavailable Sizes)
   ========================================================================== */
.fluff-swatch-pill {
  position: relative;
  border-radius: 0;
  min-height: 54px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* In-Stock Available Swatch */
.fluff-swatch-pill.is-instock {
  background-color: #FFFFFF !important;
  border: 1.5px solid #1F2F4F !important;
  color: #1F2F4F !important;
}

.fluff-swatch-pill.is-instock:hover {
  border-color: #D4B586 !important;
  background-color: #F8F6EF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 47, 79, 0.12);
}

.fluff-swatch-pill.is-instock.is-selected {
  background-color: #1F2F4F !important;
  border-color: #1F2F4F !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(31, 47, 79, 0.25);
}

.fluff-swatch-pill.is-instock.is-selected .fluff-avail-label {
  color: #D4B586 !important;
}

/* Sliced-Off Out-of-Stock Swatch */
.fluff-swatch-pill.is-outofstock {
  background-color: #ECE8E0 !important;
  border: 1px dashed #C5BEB3 !important;
  color: #8C827A !important;
  opacity: 0.65;
  cursor: not-allowed !important;
  pointer-events: none !important;
  overflow: hidden;
}

/* Prominent Artisanal Diagonal Slicing Slash */
.fluff-swatch-pill.is-outofstock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -25%;
  width: 150%;
  height: 2px;
  background-color: #93897E;
  transform: translateY(-50%) rotate(-35deg);
  pointer-events: none;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.fluff-swatch-pill.is-outofstock .fluff-soldout-label {
  color: #93897E !important;
  font-weight: 700;
}

/* When custom swatches are present, hide native unstyled table.variations */
.fluff-sizing-block ~ .fluff-add-to-cart-wrapper form.variations_form table.variations,
.fluff-sizing-block + .fluff-add-to-cart-wrapper form.variations_form table.variations {
  display: none !important;
}

/* Fallback styling for variations table if custom swatches are not present */
form.variations_form table.variations {
  width: 100% !important;
  margin-bottom: 1.25rem !important;
  border-collapse: separate !important;
  border-spacing: 0 0.5rem !important;
}

form.variations_form table.variations td.label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #1F2F4F !important;
  padding-right: 1rem !important;
}

form.variations_form table.variations td.value select {
  width: 100% !important;
  height: 48px !important;
  border: 1.5px solid #1F2F4F !important;
  background-color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #1F2F4F !important;
  padding: 0 1rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

form.variations_form .single_variation_wrap {
  margin-top: 0.5rem;
}

form.variations_form .woocommerce-variation-add-to-cart {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

form.variations_form .quantity,
.fluff-add-to-cart-wrapper .quantity {
  display: flex !important;
  align-items: center !important;
  height: 52px !important;
  border: 1px solid #B7C7D9 !important;
  background: #FFFFFF !important;
}

form.variations_form .quantity input.qty,
.fluff-add-to-cart-wrapper .quantity input.qty {
  width: 55px !important;
  height: 100% !important;
  text-align: center !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #1F2F4F !important;
  background: transparent !important;
}

form.variations_form button.single_add_to_cart_button,
.fluff-add-to-cart-wrapper button.single_add_to_cart_button {
  flex: 1 !important;
  height: 52px !important;
  background-color: #1F2F4F !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  border-radius: 0 !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(31, 47, 79, 0.18) !important;
  cursor: pointer !important;
}

form.variations_form button.single_add_to_cart_button:hover,
.fluff-add-to-cart-wrapper button.single_add_to_cart_button:hover {
  background-color: #D4B586 !important;
  color: #1F2F4F !important;
}

/* ==========================================================================
   Related Products Visibility & Grid Styling
   ========================================================================== */
.related-products-section {
  width: 100% !important;
  display: block !important;
  clear: both !important;
}

.related-products-section .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

@media (min-width: 640px) {
  .related-products-section .grid {
    gap: 16px !important;
  }
}

@media (min-width: 1024px) {
  .related-products-section .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

.related-products-section .product-card-offwhite,
.grid .product-card-offwhite {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  flex-shrink: 1 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #F0EDE4 !important;
  border: 1px solid rgba(183, 199, 217, 0.45) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.related-products-section .product-card-offwhite:hover,
.grid .product-card-offwhite:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(22, 35, 59, 0.08) !important;
  border-color: #1F2F4F !important;
}

/* Bulletproof 3:4 responsive image container for related products */
.related-products-section .product-card-offwhite .relative.aspect-\[3\/4\],
.grid .product-card-offwhite .relative.aspect-\[3\/4\] {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 133.33% !important; /* Strict 3:4 aspect ratio */
  height: 0 !important;
  overflow: hidden !important;
  background-color: #EAE6DB !important;
}

.related-products-section .product-card-offwhite img,
.grid .product-card-offwhite img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Native WooCommerce related & upsell products fallback guarantee */
.related.products,
.upsells.products {
  margin-top: 4rem !important;
  padding-top: 3rem !important;
  border-top: 1px solid rgba(183, 199, 217, 0.5) !important;
}

.related.products h2,
.upsells.products h2 {
  font-family: 'Bodoni Moda', 'Playfair Display', serif !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #1F2F4F !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 2rem !important;
}

.related.products ul.products,
.upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.25rem !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (min-width: 768px) {

  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }
}

.related.products ul.products li.product,
.upsells.products ul.products li.product {
  background-color: #F0EDE4 !important;
  border: none !important;
  padding: 0.75rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.3s ease !important;
}

.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
  transform: translateY(-4px) !important;
}