/**
 * Pizza Shop Custom - Global Styles
 *
 * Brand Design System for Epizzenter Pizza Shop
 * All styles scoped with .pizza-shop-* prefix
 * Updated for native Gutenberg blocks (WYSIWYG editing)
 *
 * @package PizzaShopCustom
 */

/* ==========================================================================
   GLOBAL RESETS - Prevent horizontal scrollbar from full-width sections
   ========================================================================== */

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES - Brand Foundation
   ========================================================================== */

:root {
  /* Brand Colors */
  --pizza-red: #ce3e27;
  --pizza-red-dark: #b33620;
  --pizza-red-light: #e85a45;
  --pizza-green: #4d7a42;
  --pizza-green-dark: #3d6335;
  --pizza-green-light: #5d9450;
  --pizza-coal: #282421;
  --pizza-sand: #f2ecdf;
  --pizza-sand-dark: #e8e0cf;

  /* Transparency variants */
  --pizza-coal-80: rgba(40, 36, 33, 0.8);
  --pizza-coal-70: rgba(40, 36, 33, 0.7);
  --pizza-coal-60: rgba(40, 36, 33, 0.6);
  --pizza-coal-50: rgba(40, 36, 33, 0.5);
  --pizza-coal-20: rgba(40, 36, 33, 0.2);
  --pizza-coal-10: rgba(40, 36, 33, 0.1);
  --pizza-coal-05: rgba(40, 36, 33, 0.05);
  --pizza-red-30: rgba(206, 62, 39, 0.3);
  --pizza-red-40: rgba(206, 62, 39, 0.4);
  --pizza-red-15: rgba(206, 62, 39, 0.15);
  --pizza-red-10: rgba(206, 62, 39, 0.1);
  --pizza-green-15: rgba(77, 122, 66, 0.15);
  --pizza-sand-80: rgba(242, 236, 223, 0.8);

  /* Typography */
  --pizza-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, sans-serif;

  /* Spacing */
  --pizza-section-padding: 5rem 2rem;
  --pizza-card-padding: 1.75rem;

  /* Border Radius - Unified System */
  --pizza-radius-sm: 8px;
  --pizza-radius-md: 12px;
  --pizza-radius-lg: 16px;
  --pizza-radius-xl: 20px;
  --pizza-radius-full: 9999px;

  /* Shadows - Refined System */
  --pizza-shadow-xs: 0 1px 3px rgba(40, 36, 33, 0.06);
  --pizza-shadow-sm: 0 2px 8px rgba(40, 36, 33, 0.08);
  --pizza-shadow-md: 0 4px 16px rgba(40, 36, 33, 0.1);
  --pizza-shadow-lg: 0 8px 24px rgba(40, 36, 33, 0.12);
  --pizza-shadow-xl: 0 16px 48px rgba(40, 36, 33, 0.14);
  --pizza-shadow-card: 0 4px 20px rgba(40, 36, 33, 0.08);
  --pizza-shadow-card-hover: 0 12px 32px rgba(40, 36, 33, 0.15);
  --pizza-shadow-btn: 0 4px 12px rgba(206, 62, 39, 0.25);
  --pizza-shadow-btn-hover: 0 6px 20px rgba(206, 62, 39, 0.35);

  /* Transitions */
  --pizza-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --pizza-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --pizza-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   GLOBAL BUTTON STYLES - Unified System
   ========================================================================== */

/* Primary Button (Red - Used for main CTAs) */
.pizza-shop-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.pizza-shop-cta .cta-primary-btn .wp-block-button__link,
.pizza-shop-special-card .special-card-button .wp-block-button__link {
  background: var(--pizza-red) !important;
  color: white !important;
  padding: 0.875rem 1.75rem !important;
  border-radius: var(--pizza-radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  border: none !important;
  box-shadow: var(--pizza-shadow-btn) !important;
  transition: all var(--pizza-transition) !important;
  text-decoration: none !important;
}

.pizza-shop-hero
  .wp-block-button:not(.is-style-outline)
  .wp-block-button__link:hover,
.pizza-shop-cta .cta-primary-btn .wp-block-button__link:hover,
.pizza-shop-special-card .special-card-button .wp-block-button__link:hover {
  background: var(--pizza-red-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--pizza-shadow-btn-hover) !important;
}

/* Secondary Button (Outline - Dark border) */
.pizza-shop-hero .wp-block-button.is-style-outline .wp-block-button__link,
.pizza-shop-cta .cta-secondary-btn .wp-block-button__link {
  border: 2px solid var(--pizza-coal) !important;
  color: var(--pizza-coal) !important;
  background: transparent !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: var(--pizza-radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  transition: all var(--pizza-transition) !important;
  text-decoration: none !important;
}

.pizza-shop-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.pizza-shop-cta .cta-secondary-btn .wp-block-button__link:hover {
  background: var(--pizza-coal) !important;
  color: var(--pizza-sand) !important;
  transform: translateY(-2px) !important;
}

/* Tertiary Button (Green outline - For cards) */
.pizza-shop-menu-card .wp-block-button.is-style-outline .wp-block-button__link,
.pizza-shop-testimonials
  .testimonials-cta
  .wp-block-button.is-style-outline
  .wp-block-button__link {
  border: 2px solid var(--pizza-green) !important;
  color: var(--pizza-green) !important;
  background: transparent !important;
  padding: 0.625rem 1.5rem !important;
  border-radius: var(--pizza-radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: all var(--pizza-transition) !important;
  text-decoration: none !important;
}

.pizza-shop-menu-card
  .wp-block-button.is-style-outline
  .wp-block-button__link:hover,
.pizza-shop-testimonials
  .testimonials-cta
  .wp-block-button.is-style-outline
  .wp-block-button__link:hover {
  background: var(--pizza-green) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(77, 122, 66, 0.3) !important;
}

/* ==========================================================================
   SHARED PATTERN STYLES
   ========================================================================== */

/* Pattern sections - no full-width breakout (use Blocksy page settings instead) */
.pizza-shop-hero,
.pizza-shop-menu-grid,
.pizza-shop-daily-specials,
.pizza-shop-delivery-info,
.pizza-shop-testimonials,
.pizza-shop-cta {
  /* Let Blocksy control the container width */
  /* For full-width: use Blocksy Page Settings → Page Structure → Full Width */
  box-sizing: border-box;
}

/* Subtle noise texture for sand backgrounds */
.pizza-shop-hero,
.pizza-shop-daily-specials,
.pizza-shop-cta {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
  background-size: 200px 200px;
}

.section-subtitle {
  color: var(--pizza-coal-60) !important;
  font-size: 1.125rem !important;
  margin-bottom: 2.5rem !important;
  line-height: 1.6 !important;
}

/* Section headings */
.pizza-shop-menu-grid > h2,
.pizza-shop-daily-specials > h2,
.pizza-shop-testimonials > h2 {
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: var(--pizza-coal) !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.02em !important;
}

/* ==========================================================================
   PATTERN 1: HERO SECTION
   ========================================================================== */

.pizza-shop-hero {
  background: var(--pizza-sand);
  padding: 6rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important; /* Override Gutenberg border-radius for seamless sections */
  margin-bottom: 0 !important;
}

/* Decorative background shapes - subtle and hidden mostly off-screen */
.pizza-shop-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--pizza-red-10) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* Second decorative shape - very subtle */
.pizza-shop-hero::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    var(--pizza-green-15) 0%,
    transparent 60%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* Content wrapper for z-index */
.pizza-shop-hero > * {
  position: relative;
  z-index: 1;
}

.pizza-shop-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--pizza-coal);
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.pizza-shop-hero h1 span,
.pizza-shop-hero h1 em {
  color: var(--pizza-red);
  font-style: normal;
  position: relative;
}

/* Underline accent on emphasized text */
.pizza-shop-hero h1 em::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--pizza-green),
    var(--pizza-green-light)
  );
  border-radius: var(--pizza-radius-full);
  opacity: 0.7;
}

.pizza-shop-hero .tagline,
.pizza-shop-hero > p {
  font-size: 1.25rem;
  color: var(--pizza-coal-60);
  max-width: 600px;
  margin: 1.5rem auto;
  line-height: 1.6;
}

/* Hero buttons container */
.pizza-shop-hero .wp-block-buttons {
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Remove bottom accent - was causing visual issues */

/* ==========================================================================
   PATTERN 2: MENU CATEGORIES GRID (Native Columns)
   ========================================================================== */

.pizza-shop-menu-grid {
  /* Background and padding now set via Gutenberg block attributes for editor editability */
  position: relative;
  border-radius: 0 !important; /* Override Gutenberg border-radius for seamless sections */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden; /* Contain background pattern */
}

/* Background pattern overlay for Menu Grid */
.pizza-shop-menu-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/patterns/menu-pattern.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above pattern */
.pizza-shop-menu-grid > * {
  position: relative;
  z-index: 1;
}

/* Menu columns layout */
.pizza-shop-menu-grid .menu-grid-columns {
  gap: 1.5rem !important;
  max-width: 1200px;
  margin: 2.5rem auto !important;
}

/* Menu card (wp:column) */
.pizza-shop-menu-card {
  background: white;
  border-radius: var(--pizza-radius-xl) !important;
  overflow: hidden;
  box-shadow: var(--pizza-shadow-card);
  border: 1px solid var(--pizza-coal-10);
  transition: all var(--pizza-transition);
  padding: 0 !important;
  text-align: center;
}

.pizza-shop-menu-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--pizza-shadow-card-hover);
  border-color: var(--pizza-coal-20);
}

.pizza-shop-menu-card .menu-card-image {
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--pizza-radius-xl) var(--pizza-radius-xl) 0 0;
  /* Placeholder gradient for missing images */
  background: linear-gradient(
    135deg,
    var(--pizza-sand) 0%,
    var(--pizza-sand-dark) 50%,
    var(--pizza-sand) 100%
  );
  min-height: 180px;
  position: relative;
}

/* Decorative pattern for image placeholder */
.pizza-shop-menu-card .menu-card-image::before {
  content: "🍕";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  opacity: 0.2;
  z-index: 0;
}

.pizza-shop-menu-card .menu-card-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform var(--pizza-transition-slow);
  position: relative;
  z-index: 1;
}

.pizza-shop-menu-card:hover .menu-card-image img {
  transform: scale(1.08);
}

.pizza-shop-menu-card .menu-card-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--pizza-red), var(--pizza-red-dark));
  border-radius: var(--pizza-radius-md) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin: -28px auto 1rem !important;
  position: relative;
  z-index: 1;
  box-shadow: var(--pizza-shadow-md);
  transition: transform var(--pizza-transition);
}

.pizza-shop-menu-card:hover .menu-card-icon {
  transform: scale(1.1) rotate(-3deg);
}

.pizza-shop-menu-card .menu-card-title {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: var(--pizza-coal) !important;
  margin-bottom: 0.375rem !important;
}

.pizza-shop-menu-card .menu-card-count {
  color: var(--pizza-coal-50) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1.25rem !important;
}

.pizza-shop-menu-card .menu-card-button {
  justify-content: center !important;
  padding: 0 1.5rem 1.75rem !important;
}

/* ==========================================================================
   PATTERN 3: DAILY SPECIALS (Native Columns)
   ========================================================================== */

.pizza-shop-daily-specials {
  background: var(--pizza-sand);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden; /* Contain background pattern */
  border-radius: 0 !important; /* Override Gutenberg border-radius for seamless sections */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Background pattern overlay for Daily Specials */
.pizza-shop-daily-specials::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/patterns/specials-pattern.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above pattern */
.pizza-shop-daily-specials > * {
  position: relative;
  z-index: 1;
}

/* Badge styling - wrapper paragraph for centering */
.pizza-shop-daily-specials p.specials-badge {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 1.25rem !important;
}

/* Badge styling - the badge span inside */
.pizza-shop-daily-specials .specials-badge .badge-inner {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background: var(--pizza-red-10);
  border: 1px solid var(--pizza-red-15);
  color: var(--pizza-red) !important;
  padding: 0.625rem 1.5rem;
  border-radius: var(--pizza-radius-full);
  font-size: 0.8125rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Lucide icon in badge */
.pizza-shop-daily-specials .specials-badge .badge-icon-lucide {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
  color: var(--pizza-red);
}

/* Specials grid */
.pizza-shop-daily-specials .specials-grid {
  gap: 1.5rem !important;
  max-width: 1200px;
  margin: 2.5rem auto !important;
}

/* Special card (wp:column) */
.pizza-shop-special-card {
  background: white;
  border-radius: var(--pizza-radius-xl) !important;
  overflow: hidden;
  box-shadow: var(--pizza-shadow-card);
  border: 1px solid var(--pizza-coal-10);
  transition: all var(--pizza-transition);
  padding: 0 !important;
}

.pizza-shop-special-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pizza-shadow-card-hover);
  border-color: var(--pizza-coal-20);
}

/* Image wrapper with discount badge */
.pizza-shop-special-card .special-card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--pizza-radius-xl) var(--pizza-radius-xl) 0 0;
  /* Placeholder gradient for missing images */
  background: linear-gradient(
    135deg,
    var(--pizza-sand) 0%,
    var(--pizza-sand-dark) 40%,
    var(--pizza-sand) 100%
  );
  min-height: 200px;
}

/* Decorative pattern for special card image placeholder */
.pizza-shop-special-card .special-card-image-wrapper::after {
  content: "🍕";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.pizza-shop-special-card .special-card-image-wrapper .wp-block-image {
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

.pizza-shop-special-card .special-card-image-wrapper img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--pizza-transition-slow);
  position: relative;
  z-index: 1;
}

.pizza-shop-special-card:hover .special-card-image-wrapper img {
  transform: scale(1.08);
}

.pizza-shop-special-card .discount-badge {
  position: absolute !important;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, var(--pizza-red), var(--pizza-red-dark));
  color: white !important;
  padding: 0.5rem 0.875rem;
  border-radius: var(--pizza-radius-sm);
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  box-shadow: 0 4px 12px var(--pizza-red-40);
  margin: 0 !important;
  z-index: 1;
}

/* Card content */
.pizza-shop-special-card .special-card-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--pizza-coal) !important;
  margin: 1.5rem 1.5rem 0.5rem !important;
}

.pizza-shop-special-card .special-card-description {
  color: var(--pizza-coal-50) !important;
  font-size: 0.875rem !important;
  margin: 0 1.5rem 1.25rem !important;
  line-height: 1.6;
}

/* Prices */
.pizza-shop-special-card .special-card-prices {
  margin: 0 1.5rem 1.25rem !important;
  gap: 0.75rem !important;
  align-items: baseline !important;
}

.pizza-shop-special-card .sale-price {
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  color: var(--pizza-green) !important;
  margin: 0 !important;
}

.pizza-shop-special-card .original-price {
  font-size: 1rem !important;
  color: var(--pizza-coal-50) !important;
  text-decoration: line-through;
  margin: 0 !important;
}

/* Add to cart button */
.pizza-shop-special-card .special-card-button {
  margin: 0 1.5rem 1.5rem !important;
}

.pizza-shop-special-card .special-card-button .wp-block-button__link {
  width: 100%;
  background: var(--pizza-green) !important;
  box-shadow: 0 4px 12px rgba(77, 122, 66, 0.25) !important;
}

.pizza-shop-special-card .special-card-button .wp-block-button__link:hover {
  background: var(--pizza-green-dark) !important;
  box-shadow: 0 6px 20px rgba(77, 122, 66, 0.35) !important;
}

/* View cart button (WooCommerce-generated after add to cart) */
.pizza-shop-special-card .special-card-button .wp-block-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.pizza-shop-special-card .special-card-button .added_to_cart {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  background: var(--pizza-red);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.pizza-shop-special-card .special-card-button .added_to_cart:hover {
  background: var(--pizza-red-dark);
  color: white;
}

/* ==========================================================================
   PATTERN 4: DELIVERY INFO (Native Columns)
   ========================================================================== */

.pizza-shop-delivery-info {
  background: linear-gradient(135deg, var(--pizza-red), var(--pizza-red-dark));
  padding: var(--pizza-section-padding);
  border-radius: 0 !important; /* Override Gutenberg border-radius for seamless sections */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pizza-shop-delivery-info .delivery-card {
  max-width: 1000px;
  margin: 0 auto;
  background: transparent;
}

.pizza-shop-delivery-info .delivery-title {
  color: white !important;
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.02em !important;
}

.pizza-shop-delivery-info .delivery-subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.125rem !important;
  margin-bottom: 2.5rem !important;
}

/* Delivery columns */
.pizza-shop-delivery-info .delivery-columns {
  gap: 1.5rem !important;
}

/* Delivery item (wp:column) */
.pizza-shop-delivery-info .delivery-item {
  background: white;
  border-radius: var(--pizza-radius-xl) !important;
  padding: 2rem 1.5rem !important;
  text-align: center;
  transition: all var(--pizza-transition);
  box-shadow: var(--pizza-shadow-lg);
}

.pizza-shop-delivery-info .delivery-item:hover {
  transform: translateY(-4px) scale(1.02);
}

.pizza-shop-delivery-info .delivery-icon {
  font-size: 2rem !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--pizza-red), var(--pizza-red-dark));
  border-radius: 50%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 4px 16px var(--pizza-red-30);
  transition: all var(--pizza-transition);
}

.pizza-shop-delivery-info .delivery-item:hover .delivery-icon {
  transform: scale(1.1);
  box-shadow: 0 8px 24px var(--pizza-red-40);
}

.pizza-shop-delivery-info .delivery-item-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--pizza-coal) !important;
  margin-bottom: 0.75rem !important;
}

.pizza-shop-delivery-info .delivery-item-text {
  color: var(--pizza-coal-60) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-size: 0.9375rem !important;
}

.pizza-shop-delivery-info .delivery-item-text strong {
  color: var(--pizza-red);
  font-weight: 600;
}

/* ==========================================================================
   PATTERN 5: TESTIMONIALS (Native Columns)
   ========================================================================== */

.pizza-shop-testimonials {
  background: white;
  padding: var(--pizza-section-padding);
  border-radius: 0 !important; /* Override Gutenberg border-radius for seamless sections */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pizza-shop-testimonials .testimonials-summary {
  color: var(--pizza-coal-60) !important;
  font-size: 1.125rem !important;
  margin-bottom: 2.5rem !important;
}

/* Testimonials grid */
.pizza-shop-testimonials .testimonials-grid {
  gap: 1.5rem !important;
  max-width: 900px;
  margin: 0 auto 1.5rem !important;
}

/* Testimonial card (wp:column) */
.pizza-shop-testimonials .testimonial-card {
  background: white;
  border: 1px solid var(--pizza-coal-10);
  border-radius: var(--pizza-radius-xl) !important;
  padding: 1.75rem !important;
  transition: all var(--pizza-transition);
  box-shadow: var(--pizza-shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Decorative quote mark */
.pizza-shop-testimonials .testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  right: 15px;
  font-size: 6rem;
  font-family: Georgia, serif;
  color: var(--pizza-green-15);
  line-height: 1;
  pointer-events: none;
}

.pizza-shop-testimonials .testimonial-card:hover {
  border-color: var(--pizza-green-15);
  box-shadow: var(--pizza-shadow-lg);
  transform: translateY(-4px);
}

.pizza-shop-testimonials .testimonial-card:hover::before {
  color: var(--pizza-red-15);
}

.pizza-shop-testimonials .testimonial-stars {
  color: #f59e0b !important;
  font-size: 1.125rem !important;
  margin-bottom: 1rem !important;
  letter-spacing: 2px;
}

.pizza-shop-testimonials .testimonial-quote {
  color: var(--pizza-coal-80) !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1.5rem !important;
  font-style: italic;
}

/* Author section */
.pizza-shop-testimonials .testimonial-author {
  padding-top: 1rem;
  border-top: 1px solid var(--pizza-coal-10);
  gap: 0.875rem !important;
  align-items: center !important;
}

.pizza-shop-testimonials .testimonial-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--pizza-radius-md) !important;
  background: linear-gradient(
    135deg,
    var(--pizza-sand),
    var(--pizza-sand-dark)
  ) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  color: var(--pizza-coal) !important;
  margin: 0 !important;
}

.pizza-shop-testimonials .testimonial-author-info {
  padding: 0 !important;
}

.pizza-shop-testimonials .testimonial-name {
  font-weight: 600 !important;
  color: var(--pizza-coal) !important;
  margin: 0 0 0.125rem 0 !important;
  font-size: 0.9375rem !important;
}

.pizza-shop-testimonials .testimonial-verified {
  font-size: 0.75rem !important;
  color: var(--pizza-green) !important;
  margin: 0 !important;
  font-weight: 500;
}

/* CTA button */
.pizza-shop-testimonials .testimonials-cta {
  margin-top: 2.5rem !important;
  justify-content: center !important;
}

/* ==========================================================================
   PATTERN 6: CTA SECTION (Native Blocks)
   ========================================================================== */

.pizza-shop-cta {
  background: var(--pizza-sand);
  padding: var(--pizza-section-padding);
  position: relative;
  overflow: hidden;
  border-radius: 0 !important; /* Override Gutenberg border-radius for seamless sections */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Decorative background shapes for CTA */
.pizza-shop-cta::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    var(--pizza-green-15) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

.pizza-shop-cta::after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, var(--pizza-red-10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.pizza-shop-cta .cta-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Ensure all content is above decorative shapes */
.pizza-shop-cta > * {
  position: relative;
  z-index: 1;
}

.pizza-shop-cta .cta-urgency-badge {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--pizza-coal-20);
  padding: 0.625rem 1.5rem;
  border-radius: var(--pizza-radius-full);
  font-size: 0.875rem !important;
  font-weight: 600;
  color: var(--pizza-coal) !important;
  margin-bottom: 1.75rem !important;
  backdrop-filter: blur(10px);
}

.pizza-shop-cta .cta-title {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--pizza-coal) !important;
  line-height: 1.15 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

.pizza-shop-cta .cta-description {
  font-size: 1.125rem !important;
  color: var(--pizza-coal-60) !important;
  max-width: 600px;
  margin: 0 auto 2rem !important;
  line-height: 1.6;
}

/* CTA Buttons */
.pizza-shop-cta .cta-buttons {
  margin-bottom: 2.5rem !important;
  gap: 1rem !important;
  justify-content: center !important;
}

.pizza-shop-cta .cta-primary-btn .wp-block-button__link {
  padding: 1rem 2rem !important;
  font-size: 1rem !important;
}

.pizza-shop-cta .cta-secondary-btn .wp-block-button__link {
  padding: 0.875rem 2rem !important;
  font-size: 1rem !important;
}

/* Trust indicators */
.pizza-shop-cta .cta-trust-indicators {
  gap: 2rem !important;
  margin-top: 0 !important;
  justify-content: center !important;
  flex-wrap: wrap;
}

.pizza-shop-cta .cta-trust-indicators .trust-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  padding: 0.75rem 1.25rem;
  border-radius: var(--pizza-radius-md);
  border: 1px solid var(--pizza-coal-10);
  backdrop-filter: blur(5px);
  transition: all var(--pizza-transition);
}

.pizza-shop-cta .cta-trust-indicators .trust-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: var(--pizza-shadow-sm);
}

.pizza-shop-cta .cta-trust-indicators .trust-item p {
  color: var(--pizza-coal-70) !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
  font-weight: 600;
}

/* ==========================================================================
   SECTION DIVIDERS - Visual Flow Between Sections
   ========================================================================== */

/* Simple accent bar before testimonials */
.pizza-shop-testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--pizza-green), var(--pizza-red));
  border-radius: var(--pizza-radius-full);
}

.pizza-shop-testimonials {
  position: relative;
  padding-top: 3rem;
}

/* ==========================================================================
   LOGO UTILITIES
   ========================================================================== */

.logo-on-light svg path {
  fill: var(--pizza-red);
}

.logo-on-dark svg path {
  fill: var(--pizza-sand);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1024px) {
  .pizza-shop-menu-grid .menu-grid-columns {
    flex-wrap: wrap !important;
  }

  .pizza-shop-menu-grid .menu-grid-columns > .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
    flex-grow: 0 !important;
  }
}

@media (max-width: 768px) {
  :root {
    --pizza-section-padding: 3.5rem 1.5rem;
  }

  .pizza-shop-hero {
    padding: 4rem 1.5rem;
  }

  .pizza-shop-hero::after {
    margin-top: 2rem;
  }

  /* Stack columns on mobile */
  .pizza-shop-menu-grid .menu-grid-columns,
  .pizza-shop-daily-specials .specials-grid,
  .pizza-shop-testimonials .testimonials-grid,
  .pizza-shop-delivery-info .delivery-columns {
    flex-direction: column !important;
  }

  .pizza-shop-menu-grid .menu-grid-columns > .wp-block-column,
  .pizza-shop-daily-specials .specials-grid > .wp-block-column,
  .pizza-shop-testimonials .testimonials-grid > .wp-block-column,
  .pizza-shop-delivery-info .delivery-columns > .wp-block-column {
    flex-basis: 100% !important;
  }

  /* CTA responsive */
  .pizza-shop-cta .cta-buttons {
    flex-direction: column !important;
    align-items: center;
  }

  .pizza-shop-cta .cta-buttons .wp-block-button {
    width: 100%;
    max-width: 300px;
  }

  .pizza-shop-cta .cta-buttons .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }

  .pizza-shop-cta .cta-trust-indicators {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Adjust card padding on mobile */
  .pizza-shop-menu-card .menu-card-button,
  .pizza-shop-special-card .special-card-button {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .pizza-shop-special-card .special-card-title,
  .pizza-shop-special-card .special-card-description,
  .pizza-shop-special-card .special-card-prices {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .pizza-shop-hero h1 {
    font-size: 2rem;
  }

  .pizza-shop-cta .cta-title {
    font-size: 1.75rem !important;
  }

  .pizza-shop-delivery-info .delivery-title {
    font-size: 1.75rem !important;
  }
}

/* ==========================================================================
   EDITOR STYLES - Match frontend appearance in block editor
   ========================================================================== */

/* Ensure patterns look consistent in editor */
.editor-styles-wrapper .pizza-shop-menu-card,
.editor-styles-wrapper .pizza-shop-special-card,
.editor-styles-wrapper .testimonial-card,
.editor-styles-wrapper .delivery-item {
  overflow: visible;
}

/* Make edit controls accessible */
.editor-styles-wrapper .pizza-shop-menu-card .wp-block-image,
.editor-styles-wrapper .pizza-shop-special-card .wp-block-image {
  cursor: pointer;
}

/* Improve editor visibility for overlapping elements */
.editor-styles-wrapper .pizza-shop-menu-card .menu-card-icon,
.editor-styles-wrapper .pizza-shop-special-card .discount-badge {
  pointer-events: auto;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .pizza-shop-hero,
  .pizza-shop-menu-grid,
  .pizza-shop-daily-specials,
  .pizza-shop-delivery-info,
  .pizza-shop-testimonials,
  .pizza-shop-cta {
    padding: 2rem 1rem;
    box-shadow: none;
  }

  .pizza-shop-menu-card,
  .pizza-shop-special-card,
  .testimonial-card,
  .delivery-item {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ==========================================================================
   WOOCOMMERCE SHOP & CATEGORY PAGES - Brand Styling
   ========================================================================== */

/* -------------------------------------------------------------------------
   Shop Page Header Styling - Compact Layout
   ------------------------------------------------------------------------- */

/* Reduce hero section bottom margin on category pages */
.tax-product_cat .hero-section,
.tax-product_cat [class*="hero-section"],
.woocommerce-page.archive .hero-section,
.woocommerce-page.archive [class*="hero-section"] {
  margin-bottom: 0.5rem !important;
  padding-bottom: 1rem !important;
}

/* Reduce entry header spacing */
.tax-product_cat .entry-header,
.woocommerce-page.archive .entry-header {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0 !important;
}

/* Page title - "Меню" heading - more compact */
.woocommerce-page.archive .entry-title,
.woocommerce-page.post-type-archive-product .entry-title,
.tax-product_cat .entry-title {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: var(--pizza-coal) !important;
  margin-bottom: 0.25rem !important;
  letter-spacing: -0.02em !important;
}

/* Category description text - tighter spacing */
.tax-product_cat .term-description,
.woocommerce-page .term-description {
  font-size: 1rem !important;
  color: var(--pizza-coal-60) !important;
  max-width: 600px !important;
  line-height: 1.5 !important;
  margin-bottom: 0.75rem !important;
}

/* Reduce woo-listing-top gap (between header and products) */
.woo-listing-top,
[class*="woo-listing-top"] {
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
   Category Cards Grid (Shop page showing categories)
   ------------------------------------------------------------------------- */

/* Category grid container */
.woocommerce ul.products.columns-4 {
  gap: 1.5rem !important;
}

/* Individual category card */
.woocommerce ul.products li.product-category {
  background: white !important;
  border-radius: var(--pizza-radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--pizza-shadow-card) !important;
  border: 1px solid var(--pizza-coal-10) !important;
  transition: all var(--pizza-transition) !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce ul.products li.product-category:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--pizza-shadow-card-hover) !important;
  border-color: var(--pizza-red-15) !important;
}

/* Category image container */
.woocommerce ul.products li.product-category a {
  text-decoration: none !important;
  display: block !important;
}

.woocommerce ul.products li.product-category a img,
.woocommerce ul.products li.product-category .ct-image-container img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  transition: transform var(--pizza-transition-slow) !important;
  border-radius: var(--pizza-radius-xl) var(--pizza-radius-xl) 0 0 !important;
}

.woocommerce ul.products li.product-category:hover a img,
.woocommerce ul.products li.product-category:hover .ct-image-container img {
  transform: scale(1.08) !important;
}

/* Category image wrapper - handle Blocksy's structure */
.woocommerce ul.products li.product-category .ct-image-container {
  overflow: hidden !important;
  border-radius: var(--pizza-radius-xl) var(--pizza-radius-xl) 0 0 !important;
  position: relative !important;
  background: linear-gradient(
    135deg,
    var(--pizza-sand) 0%,
    var(--pizza-sand-dark) 50%,
    var(--pizza-sand) 100%
  ) !important;
  min-height: 200px !important;
}

/* Placeholder styling when no image */
.woocommerce ul.products li.product-category .ct-image-container .wp-post-image[src*="woocommerce-placeholder"],
.woocommerce ul.products li.product-category .ct-image-container img[src*="placeholder"] {
  opacity: 0.3 !important;
  filter: grayscale(100%) !important;
}

/* Category name */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category h2 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--pizza-coal) !important;
  padding: 1.25rem 1rem 0.5rem !important;
  margin: 0 !important;
  text-align: center !important;
  transition: color var(--pizza-transition) !important;
}

.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category:hover h2 {
  color: var(--pizza-red) !important;
}

/* Category count (number of products) */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count,
.woocommerce ul.products li.product-category h2 .count {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--pizza-coal-50) !important;
  margin-top: 0.25rem !important;
  padding-bottom: 1.25rem !important;
}

/* -------------------------------------------------------------------------
   Product Cards Grid (Category archive pages) - COMPACT LAYOUT
   ------------------------------------------------------------------------- */

/* Product card - reduced padding */
.woocommerce ul.products li.product {
  background: white !important;
  border-radius: var(--pizza-radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--pizza-shadow-card) !important;
  border: 1px solid var(--pizza-coal-10) !important;
  transition: all var(--pizza-transition) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pizza-shadow-card-hover) !important;
  border-color: var(--pizza-coal-20) !important;
}

/* Product image container - shorter height */
.woocommerce ul.products li.product .ct-image-container {
  overflow: hidden !important;
  border-radius: var(--pizza-radius-xl) var(--pizza-radius-xl) 0 0 !important;
  position: relative !important;
}

.woocommerce ul.products li.product .ct-image-container img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  transition: transform var(--pizza-transition-slow) !important;
}

.woocommerce ul.products li.product:hover .ct-image-container img {
  transform: scale(1.05) !important;
}

/* Product title - tighter padding */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--pizza-coal) !important;
  padding: 0.625rem 0.75rem 0.25rem !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Product price - tighter padding */
.woocommerce ul.products li.product .price {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--pizza-green) !important;
  text-align: center !important;
  padding: 0 0.75rem 0.5rem !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--pizza-coal-50) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--pizza-red) !important;
}

/* Add to cart button - COMPACT */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - 1.5rem) !important;
  margin: 0 0.75rem 0.25rem !important;
  padding: 0.625rem 1rem !important;
  background: var(--pizza-red) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--pizza-radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: var(--pizza-shadow-btn) !important;
  transition: all var(--pizza-transition) !important;
  cursor: pointer !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--pizza-red-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--pizza-shadow-btn-hover) !important;
}

/* Added to cart state (View Cart button) - COMPACT */
.woocommerce ul.products li.product .added_to_cart {
  display: block !important;
  width: calc(100% - 1.5rem) !important;
  margin: 0.125rem 0.75rem 0.375rem !important;
  padding: 0.5rem 1rem !important;
  background: var(--pizza-green) !important;
  color: white !important;
  border-radius: var(--pizza-radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all var(--pizza-transition) !important;
}

.woocommerce ul.products li.product .added_to_cart:hover {
  background: var(--pizza-green-dark) !important;
}

/* -------------------------------------------------------------------------
   Sale Badge
   ------------------------------------------------------------------------- */

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: linear-gradient(135deg, var(--pizza-red), var(--pizza-red-dark)) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 0.5rem 0.875rem !important;
  border-radius: var(--pizza-radius-sm) !important;
  box-shadow: 0 4px 12px var(--pizza-red-40) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* -------------------------------------------------------------------------
   Sorting Dropdown
   ------------------------------------------------------------------------- */

/* Wrapper container */
.woocommerce .woocommerce-ordering {
  margin-bottom: 1.5rem !important;
}

/* Select element - comprehensive styling */
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select.orderby {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: white !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23282421' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px !important;
  border: 1px solid var(--pizza-coal-20) !important;
  border-radius: var(--pizza-radius-md) !important;
  padding: 0.75rem 2.5rem 0.75rem 1rem !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  color: var(--pizza-coal) !important;
  cursor: pointer !important;
  transition: all var(--pizza-transition) !important;
  min-width: 180px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.woocommerce .woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering select.orderby:hover,
.woocommerce .woocommerce-ordering select:focus,
.woocommerce .woocommerce-ordering select.orderby:focus {
  border-color: var(--pizza-red) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--pizza-red-10) !important;
}

/* Hide any custom dropdown overlays from Blocksy */
.woocommerce .woocommerce-ordering .ct-select,
.woocommerce .woocommerce-ordering [class*="select-wrapper"] {
  position: relative !important;
}

/* Ensure native select is visible */
.woocommerce .woocommerce-ordering select[style*="display: none"],
.woocommerce .woocommerce-ordering select[style*="visibility: hidden"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Results Count & Breadcrumbs
   ------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count {
  color: var(--pizza-coal-60) !important;
  font-size: 0.9375rem !important;
}

.woocommerce-breadcrumb {
  color: var(--pizza-coal-50) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem !important;
}

.woocommerce-breadcrumb a {
  color: var(--pizza-red) !important;
  text-decoration: none !important;
  transition: color var(--pizza-transition) !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--pizza-red-dark) !important;
}

/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  gap: 0.5rem !important;
  justify-content: center !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: white !important;
  color: var(--pizza-coal) !important;
  border: 1px solid var(--pizza-coal-20) !important;
  border-radius: var(--pizza-radius-md) !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  transition: all var(--pizza-transition) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--pizza-red) !important;
  color: white !important;
  border-color: var(--pizza-red) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pizza-red) !important;
  color: white !important;
  border-color: var(--pizza-red) !important;
}

/* -------------------------------------------------------------------------
   Empty Category State
   ------------------------------------------------------------------------- */

.woocommerce-info {
  background: var(--pizza-sand) !important;
  border: 1px solid var(--pizza-coal-20) !important;
  border-radius: var(--pizza-radius-lg) !important;
  color: var(--pizza-coal) !important;
  padding: 1.5rem 2rem !important;
}

.woocommerce-info::before {
  color: var(--pizza-red) !important;
}

/* -------------------------------------------------------------------------
   Mobile Responsive Adjustments
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .woocommerce ul.products li.product-category .ct-image-container img,
  .woocommerce ul.products li.product-category a img {
    height: 160px !important;
  }

  .woocommerce ul.products li.product .ct-image-container img {
    height: 180px !important;
  }

  .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
  .woocommerce ul.products li.product-category h2 {
    font-size: 1.125rem !important;
    padding: 1rem 0.75rem 0.25rem !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem !important;
    padding: 0.875rem 0.75rem 0.25rem !important;
  }

  .woocommerce ul.products li.product .price {
    font-size: 1.125rem !important;
    padding: 0 0.75rem 0.75rem !important;
  }

  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button {
    width: calc(100% - 1rem) !important;
    margin: 0 0.5rem 0.25rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  .woocommerce ul.products li.product .added_to_cart {
    width: calc(100% - 1rem) !important;
    margin: 0.125rem 0.5rem 0.25rem !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
  }
}

/* ==========================================================================
   AJAX ADD TO CART - Toast Notifications & Loading States
   ========================================================================== */

/* Toast Container - Fixed position at bottom right */
.pizza-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

/* Individual Toast */
.pizza-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--pizza-radius-md);
  box-shadow: var(--pizza-shadow-xl);
  font-size: 0.9375rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  max-width: 360px;
}

.pizza-toast-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Success Toast */
.pizza-toast-success {
  background: linear-gradient(135deg, var(--pizza-green), var(--pizza-green-dark));
  color: white;
}

.pizza-toast-success .pizza-toast-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Error Toast */
.pizza-toast-error {
  background: linear-gradient(135deg, var(--pizza-red), var(--pizza-red-dark));
  color: white;
}

.pizza-toast-error .pizza-toast-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Loading Spinner for Button */
.pizza-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: pizza-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

@keyframes pizza-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button loading state */
.pizza-shop-special-card .special-card-button .wp-block-button__link.loading {
  pointer-events: none;
  opacity: 0.85;
}

/* Mobile responsive toast */
@media (max-width: 480px) {
  .pizza-toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .pizza-toast {
    max-width: 100%;
  }
}

/* ==========================================================================
   CUSTOM WOOCOMMERCE NOTICE STYLING
   Hide default WooCommerce ::before icon on notices that use emoji icons
   ========================================================================== */

/* Hide ALL WooCommerce default ::before icons (bell, checkmark, etc.) */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  display: none !important;
  content: none !important;
}

/* Remove left padding reserved for the icons */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  padding-left: 1.5rem !important;
}

/* Also hide on WooCommerce notices that contain our emoji-styled messages */
/* Target notices containing spans with align-items (our emoji containers) */
.woocommerce-info:has(span[style*="align-items"])::before,
.woocommerce-error:has(span[style*="align-items"])::before,
.woocommerce-message:has(span[style*="align-items"])::before,
.woocommerce-notice:has(span[style*="align-items"])::before {
  display: none !important;
  content: none !important;
}

/* Ensure our custom notices don't have left padding for the default icon */
.pizza-shop-sofia-notice.woocommerce-info,
.pizza-shop-minimum-notice.woocommerce-info {
  padding-left: 1.5rem !important;
}

/* Remove extra left padding on notices with our emoji icons */
.woocommerce-info:has(span[style*="align-items"]),
.woocommerce-error:has(span[style*="align-items"]),
.woocommerce-message:has(span[style*="align-items"]),
.woocommerce-notice:has(span[style*="align-items"]) {
  padding-left: 1.5rem !important;
}

/* ==========================================================================
   SINGLE PRODUCT PAGE PRICE STYLING
   Consistent large, bold prices for all products (with or without WAPF)

   Structure:
   - .wapf-p wrapper contains either .price or .sale-price
   - WooCommerce uses .price for regular, Blocksy uses .sale-price for sale items
   ========================================================================== */

/* Base styling for WAPF wrapper */
.single-product .summary .wapf-p {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--pizza-coal, #282421) !important;
  line-height: 1.3 !important;
}

/* Base price styling - large and bold for ALL single product prices */
.single-product .summary .price,
.single-product .summary p.price,
.single-product .summary .wapf-p .price,
.single-product .summary .wapf-p .sale-price {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--pizza-coal, #282421) !important;
  line-height: 1.3 !important;
  /* Use flexbox to control order and alignment */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important; /* LEFT align */
  gap: 0.5em !important;
}

/* Current/sale price (inside <ins>) comes FIRST visually */
.single-product .summary .price ins,
.single-product .summary p.price ins,
.single-product .summary .wapf-p .price ins,
.single-product .summary .wapf-p .sale-price ins,
.single-product .summary .wapf-p > ins {
  order: 1 !important; /* FIRST - sale price */
  font-weight: 700 !important;
  text-decoration: none !important;
  color: inherit !important;
  background: none !important;
}

/* Strikethrough (del) comes SECOND visually */
.single-product .summary .price del,
.single-product .summary p.price del,
.single-product .summary .wapf-p .price del,
.single-product .summary .wapf-p .sale-price del,
.single-product .summary .wapf-p > del {
  order: 2 !important; /* SECOND - old price with strikethrough */
  font-weight: 400 !important;
  opacity: 0.6 !important;
  text-decoration: line-through !important;
  font-size: 0.85em !important;
  color: inherit !important;
  margin-right: 0 !important; /* flexbox gap handles spacing */
}

/* Regular price spans (not in del/ins) should come after del */
.single-product .summary .price > .woocommerce-Price-amount,
.single-product .summary p.price > .woocommerce-Price-amount,
.single-product .summary .wapf-p > .woocommerce-Price-amount {
  order: 2 !important;
}

/* Ensure bdi elements inside prices inherit the large font */
.single-product .summary .price bdi,
.single-product .summary p.price bdi,
.single-product .summary .wapf-p bdi {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Hide any WAPF-generated secondary price displays that may appear outside .wapf-p */
.single-product .wapf-pricing-total,
.single-product .wapf-pricing-summary {
  display: none !important;
}

/* ==========================================================================
   WOOCOMMERCE PRODUCT GALLERY (FlexSlider)
   Blocksy no longer ships FlexSlider styles since it uses its own gallery.
   When we force the default WooCommerce gallery for WAPF image switching,
   we need these styles so the gallery renders properly.
   ========================================================================== */

.woocommerce-product-gallery {
  position: relative;
  overflow: hidden;
}

.woocommerce-product-gallery .flex-viewport {
  overflow: hidden;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  overflow: hidden;
}

/* Thumbnail navigation strip */
.woocommerce-product-gallery ol.flex-control-nav {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.woocommerce-product-gallery ol.flex-control-nav li {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  list-style: none;
}

.woocommerce-product-gallery ol.flex-control-nav li img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: opacity 0.2s, border-color 0.2s;
}

.woocommerce-product-gallery ol.flex-control-nav li img:hover,
.woocommerce-product-gallery ol.flex-control-nav li img.flex-active {
  opacity: 1;
  border-color: var(--pizza-red, #ce3e27);
}

/* ==========================================================================
   SITE-WIDE BANNER - Top of page announcement bar
   ========================================================================== */

.pizza-shop-banner {
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: center;
  position: relative;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pizza-shop-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pizza-shop-banner-text {
  margin: 0 !important;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .pizza-shop-banner {
    padding: 0.625rem 0.75rem;
  }

  .pizza-shop-banner-text {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   STORE CLOSED NOTICE - WooCommerce pages
   ========================================================================== */

.pizza-shop-closed-notice {
  background: linear-gradient(135deg, var(--pizza-sand, #f2ecdf) 0%, #fff 100%) !important;
  border-left: 4px solid var(--pizza-red, #ce3e27) !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pizza-coal, #282421);
}

.pizza-shop-closed-notice strong {
  color: var(--pizza-red, #ce3e27);
}

/* ==========================================================================
   COMBO GIFT SWATCHES - Lock pre-selected gift items so customers can't deselect
   Usage: Add class "pizza-gift-locked" to the APF field's Wrapper attributes → Class
   ========================================================================== */

.pizza-gift-locked .wapf-swatch {
  pointer-events: none;
  cursor: default;
}

.pizza-gift-locked .wapf-swatch.wapf-checked {
  border-color: #ce3e27;
  opacity: 1;
}

/* ==========================================================================
   APF SWATCH PRICING - Smaller price hints under swatch labels
   ========================================================================== */

.wapf-swatch-label .wapf-pricing-hint {
  font-size: 11px;
}