/*
Theme Name: Wawa Bakery
Theme URI: https://wawafoods.com
Author: Adiffic Media
Author URI: https://adifficmedia.com
Description: Custom WooCommerce e-commerce theme for wawa Bakery - premium vegetarian bakery products (cookies, khari, toasts, cakes, savory). Converted from static HTML design to full WordPress + WooCommerce with user accounts, cart, checkout and product database.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Requires Plugins: woocommerce
Text Domain: wawa-bakery
*/

    /* ==========================================================================
       wawa BAKERY - DAKINGO INSPIRED RED & WHITE PREMIUM STYLE SYSTEM
       ========================================================================== */

    :root {
      /* Palette Tokens */
      --color-primary: #c61320;
      /* Deep D2C Crimson Red */
      --color-primary-dark: #8d0b13;
      /* Dark Maroon */
      --color-primary-light: #fceaea;
      /* Soft Rose Accent Cream */
      --color-pink-soft: #fdfaf6;
      /* Luxurious Organic Warm Cream Page Background */
      --color-white: #ffffff;
      /* Pure Ceramic White */
      --color-gray-light: #f6efe6;
      /* Soft Stone border line */
      --text-dark: #2c1a11;
      /* Dark Chocolate Roasted Coffee Header */
      --text-muted: #6e5c54;
      /* Muted Cocoa Paragraph */
      --shadow-sm: 0 4px 20px rgba(44, 26, 17, 0.03);
      --shadow-md: 0 10px 30px rgba(198, 19, 32, 0.05);
      --shadow-lg: 0 24px 60px rgba(198, 19, 32, 0.08);

      /* Typography */
      --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-serif: 'Playfair Display', Georgia, serif;

      /* Transitions */
      --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Lenis Smooth Scroll Configuration */
    html.lenis,
    html.lenis body {
      height: auto;
    }

    .lenis-smooth {
      scroll-behavior: auto !important;
    }

    .lenis-smooth [data-lenis-prevent] {
      overscroll-behavior: contain;
    }

    .lenis-stopped {
      overflow: hidden;
    }

    /* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      background-color: var(--color-pink-soft);
      color: var(--text-dark);
      font-family: var(--font-sans);
      overflow-x: hidden;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
      background-color: var(--color-pink-soft);
      -webkit-font-smoothing: antialiased;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--color-pink-soft);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--color-primary-light);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--color-primary);
    }

    h1,
    h2,
    h3,
    h4 {
      font-weight: 700;
      line-height: 1.2;
      color: var(--text-dark);
    }

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

    a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition-fast);
    }

    /* Floating Background Ingredients */
    .floating-ingredient {
      position: absolute;
      color: var(--color-primary);
      opacity: 0.15;
      pointer-events: none;
      z-index: 2;
      will-change: transform;
      transition: transform 0.1s linear;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 30px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: var(--transition-smooth);
      font-family: var(--font-sans);
    }

    .btn-primary {
      background-color: var(--color-primary);
      color: var(--color-white);
      box-shadow: 0 4px 15px rgba(204, 27, 41, 0.2);
    }

    .btn-primary:hover {
      background-color: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(204, 27, 41, 0.3);
    }

    .btn-secondary {
      background-color: var(--color-white);
      color: var(--color-primary);
      border: 2px solid var(--color-primary-light);
    }

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

    /* Base Reveal Framework */
    .reveal-frame {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal-frame.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* True Inner-Window Parallax */
    .parallax-frame {
      overflow: hidden;
      position: relative;
    }

    .parallax-img-scroll {
      position: absolute !important;
      top: -15% !important;
      left: 0;
      width: 100% !important;
      height: 130% !important;
      object-fit: cover;
      will-change: transform;
      transition: transform 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
    }

    /* ==========================================================================
       HEADER & NAVIGATION
       ========================================================================== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      z-index: 2000;
      border-bottom: 1px solid rgba(204, 27, 41, 0.08);
      transition: var(--transition-smooth);
    }

    .main-content {
      padding-top: 96px;
    }

    .header-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 8px 24px;
    }

    .logo-area {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* !important here is intentional and necessary: WooCommerce core
       ships ".woocommerce-page img { height:auto; max-width:100%; }"
       which has higher specificity than a single class and was
       overriding this on shop/product/cart pages (any page where
       <body> gets the woocommerce-page class), making the logo render
       at its full natural size. */
    .logo-img {
      height: 72px !important;
      width: auto !important;
      max-width: none !important;
      display: block;
    }

    .logo-text-red {
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 1.8rem;
      color: var(--color-primary);
      letter-spacing: -0.5px;
    }

    .logo-tag {
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--text-muted);
      border: 1px solid var(--color-primary-light);
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .navbar {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-dark);
      position: relative;
      padding: 6px 0;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--color-primary);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--color-primary);
      transition: var(--transition-fast);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 100%;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .search-trigger {
      font-size: 1.15rem;
      cursor: pointer;
      color: var(--text-dark);
      transition: var(--transition-fast);
    }

    .search-trigger:hover {
      color: var(--color-primary);
    }

    .cart-btn {
      background: none;
      border: none;
      cursor: pointer;
      position: relative;
    }

    .cart-icon-wrapper {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--color-primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary);
      font-size: 1.1rem;
      transition: var(--transition-smooth);
    }

    .cart-btn:hover .cart-icon-wrapper {
      background-color: var(--color-primary);
      color: var(--color-white);
      transform: scale(1.05);
    }

    .cart-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 0.7rem;
      font-weight: 800;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--color-white);
    }

    .menu-mobile-btn {
      display: none;
      background: none;
      border: none;
      font-size: 1.4rem;
      color: var(--text-dark);
      cursor: pointer;
    }

    /* ==========================================================================
       HERO BANNER SECTION (CURVED RED SHAPE)
       ========================================================================== */
    .hero-section {
      background-color: var(--color-white);
      padding: 0 0 60px 0;
      position: relative;
    }

    .hero-banner-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .hero-banner {
      background: linear-gradient(135deg, var(--color-primary) 0%, #a1111d 100%);
      border-radius: 0 0 80px 80px;
      padding: 80px 60px 140px 60px;
      color: var(--color-white);
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      align-items: center;
      gap: 40px;
      position: relative;
      overflow: hidden;
    }

    .hero-banner::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -10%;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      pointer-events: none;
    }

    .hero-text-content {
      position: relative;
      z-index: 5;
    }

    .hero-subtitle {
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary-light);
      margin-bottom: 16px;
      display: block;
    }

    .hero-title {
      font-size: 3.2rem;
      line-height: 1.15;
      margin-bottom: 20px;
      color: var(--color-white);
      font-family: var(--font-sans);
      font-weight: 800;
    }

    .hero-description {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 35px;
      max-width: 520px;
      line-height: 1.6;
    }

    .hero-actions-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .btn-hero-shop {
      background-color: var(--color-white);
      color: var(--color-primary);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      padding: 14px 36px;
      border-radius: 30px;
      font-weight: 700;
    }

    .btn-hero-shop:hover {
      background-color: var(--color-primary-light);
      transform: translateY(-2px);
    }

    .btn-hero-story {
      color: var(--color-white);
      border: 2px solid rgba(255, 255, 255, 0.3);
      padding: 12px 30px;
      background: transparent;
    }

    .btn-hero-story:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: var(--color-white);
    }

    /* Parallax Plate Layout */
    .hero-visual-content {
      position: relative;
      width: 100%;
      max-width: 440px;
      margin: 0 auto;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 5;
    }

    .plate-item {
      position: absolute;
      border-radius: 50%;
      background-color: var(--color-white);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden; /* Clean circular crop */
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .plate-item img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Fill the circular plate perfectly */
      pointer-events: none;
      transition: transform 0.5s ease;
    }

    .plate-item:hover img {
      transform: scale(1.08) rotate(5deg);
    }

    /* Absolute offsets for plates in the hero section.
       The 4 side plates are positioned relative to the CENTER point of
       the container (top:50%/left:50% + transform) instead of the old
       edge-relative offsets (top/left/right/bottom in px). Edge-relative
       offsets meant the overlap with the center plate depended on how
       wide the container happened to be — on wider screens the plates
       drifted apart with visible gaps. Center-relative positioning keeps
       the exact same tucked-petal overlap regardless of container width. */
    .plate-center {
      width: 260px;
      height: 260px;
      z-index: 10;
      border: 8px solid var(--color-primary-light);
    }

    .plate-top-left {
      width: 120px;
      height: 120px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translate(-100px, -100px);
      z-index: 8;
      border: 4px solid var(--color-white);
    }

    .plate-top-right {
      width: 140px;
      height: 140px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translate(108px, -108px);
      z-index: 7;
      border: 4px solid var(--color-white);
    }

    .plate-bottom-left {
      width: 130px;
      height: 130px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translate(-105px, 105px);
      z-index: 9;
      border: 4px solid var(--color-white);
    }

    .plate-bottom-right {
      width: 110px;
      height: 110px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translate(98px, 98px);
      z-index: 6;
      border: 4px solid var(--color-white);
    }

    /* Drips */
    .splash-decor {
      position: absolute;
      opacity: 0.12;
      pointer-events: none;
    }

    .decor-1 {
      top: 20%;
      left: 40%;
      transform: rotate(15deg);
    }

    .decor-2 {
      bottom: 15%;
      right: 45%;
      transform: rotate(-30deg);
    }

    /* ==========================================================================
       MENU CATEGORIES (OVERLAPPING CARDS)
       ========================================================================== */
    .menu-categories-section {
      background-color: var(--color-white);
      padding: 0 16px 10px 16px;
      position: relative;
      z-index: 15;
    }

    .categories-box {
      max-width: 1200px;
      margin: -30px auto 0 auto;
      /* Negative margin to pull up and overlap */
      background: var(--color-white);
      border-radius: 40px 40px 0 0;
      padding: 50px 30px 10px 30px;
      box-shadow: 0 -20px 40px rgba(204, 27, 41, 0.04);
      text-align: center;
    }

    .menu-title {
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 40px;
    }

    .menu-title span {
      color: var(--color-primary);
    }

    .categories-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
    }

    /* Red and Pink alternating category cards */
    .category-card {
      border-radius: 24px;
      padding: 24px 16px 20px 16px;
      text-align: center;
      cursor: pointer;
      transition: var(--transition-smooth);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: var(--shadow-sm);
    }

    .category-card.bg-red {
      background-color: var(--color-primary);
      color: var(--color-white);
    }

    .category-card.bg-pink {
      background-color: var(--color-primary-light);
      color: var(--color-primary);
    }

    .category-card h3 {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 20px;
      letter-spacing: 0.5px;
      font-family: var(--font-sans);
    }

    .category-card.bg-red h3 {
      color: var(--color-white);
    }

    .category-card.bg-pink h3 {
      color: var(--color-primary);
    }

    .category-card-plate {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: var(--color-white);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px auto;
      overflow: hidden; /* Clean circular crop */
      transition: var(--transition-smooth);
    }

    .category-card-plate img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Fill the circular plate perfectly */
    }

    .category-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }

    .category-card:hover .category-card-plate {
      transform: scale(1.1) rotate(6deg);
    }

    /* ==========================================================================
       BEST SELLERS GRID
       ========================================================================== */
    .bestsellers-section {
      background-color: var(--color-white);
      padding: 0 24px 80px 24px;
    }

    .bestsellers-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 40px;
    }

    .section-title {
      font-size: 2.2rem;
      font-weight: 800;
    }

    .section-title span {
      color: var(--color-primary);
      display: block;
      font-size: 0.85rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .bestsellers-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    @media (min-width: 1024px) {
      #home-bestsellers-container {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    /* Product Card: Premium Dakingo design */
    .product-card {
      background-color: var(--color-pink-soft);
      border-radius: 24px;
      padding: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      transition: var(--transition-smooth);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      border: 1px solid rgba(204, 27, 41, 0.03);
      cursor: pointer;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
      background-color: var(--color-white);
      border-color: var(--color-primary-light);
    }

    .product-card-heart {
      position: absolute;
      top: 20px;
      right: 20px;
      color: var(--color-primary);
      cursor: pointer;
      font-size: 1.15rem;
      transition: var(--transition-fast);
      z-index: 5;
    }

    .product-card-heart:hover {
      transform: scale(1.2);
    }

    .product-card-badge {
      position: absolute;
      top: 20px;
      left: 20px;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 0.7rem;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 12px;
      z-index: 5;
    }

    .product-card-img-container img.woocommerce-placeholder,
    .single-product-main-image img.woocommerce-placeholder {
      opacity: 0.45;
    }

    .product-card-img-container {
      height: 160px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      position: relative;
    }

    .product-card-img-container img {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }

    .product-card:hover .product-card-img-container img {
      transform: scale(1.08) translateY(-5px) !important;
    }

    .product-card-info {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .product-card-category {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 6px;
    }

    .product-card-name {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 8px;
      line-height: 1.3;
      height: 2.6rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .product-card-rating {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 12px;
    }

    .product-card-rating i {
      color: #ffb300;
      font-size: 0.8rem;
    }

    .product-card-rating span {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-left: 4px;
    }

    .product-card-description {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-bottom: 16px;
      height: 2.5rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .product-card-variant {
      margin-bottom: 16px;
    }

    .product-card-variant select {
      width: 100%;
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px solid var(--color-primary-light);
      background-color: var(--color-white);
      font-family: var(--font-sans);
      font-size: 0.8rem;
      color: var(--text-dark);
      outline: none;
      cursor: pointer;
    }

    .product-card-variant-label {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-muted);
      background-color: rgba(204, 27, 41, 0.05);
      border-radius: 12px;
      padding: 8px 12px;
      text-align: center;
    }

    .product-card-price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: auto;
      width: 100%;
    }

    .product-card-prices {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .product-card-rsp {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--color-primary);
    }

    .product-card-mrp {
      font-size: 0.9rem;
      color: var(--text-muted);
      text-decoration: line-through;
    }

    .product-card-savings {
      font-size: 0.75rem;
      color: var(--color-primary-dark);
      background-color: var(--color-primary-light);
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 700;
    }

    /* Cart Action Corner Button */
    .product-card-action-btn {
      width: 40px;
      height: 40px;
      background-color: var(--color-primary);
      color: var(--color-white);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: var(--transition-smooth);
      flex-shrink: 0;
    }

    .product-card-action-btn:hover {
      background-color: var(--color-primary-dark);
      transform: scale(1.1);
    }

    /* ==========================================================================
       INTERACTIVE INGREDIENT SHOWCASE
       ========================================================================== */
    .showcase-section {
      background-color: var(--color-pink-soft);
      position: relative;
      overflow: hidden;
      padding: 60px 0;
      border-top: 1px solid rgba(204, 27, 41, 0.05);
      border-bottom: 1px solid rgba(204, 27, 41, 0.05);
    }

    .showcase-container {
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      align-items: center;
      gap: 40px;
      margin-top: 40px;
    }

    .showcase-info-panel {
      display: flex;
      flex-direction: column;
      gap: 40px;
      z-index: 5;
    }

    .ingredient-info-card {
      background-color: var(--color-white);
      padding: 32px;
      border-radius: 20px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-primary-light);
      transition: var(--transition-smooth);
      position: relative;
    }

    .ingredient-info-card:hover,
    .ingredient-info-card.active {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--color-primary);
    }

    .info-badge {
      position: absolute;
      top: -16px;
      left: 24px;
      width: 32px;
      height: 32px;
      background-color: var(--color-primary);
      color: var(--color-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 700;
    }

    .ingredient-info-card h4 {
      font-size: 1.15rem;
      color: var(--text-dark);
      margin-bottom: 10px;
      margin-top: 4px;
    }

    .ingredient-info-card p {
      font-size: 0.85rem;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .showcase-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .showcase-image-frame {
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background-color: var(--color-white);
      box-shadow: var(--shadow-md);
      border: 6px solid var(--color-primary-light);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pointer-line {
      position: absolute;
      z-index: 6;
      display: flex;
      align-items: center;
      opacity: 0;
      transition: var(--transition-smooth);
    }

    .pointer-line.active {
      opacity: 1;
    }

    .pointer-line .dot {
      width: 8px;
      height: 8px;
      background-color: var(--color-primary);
      border-radius: 50%;
      display: inline-block;
      box-shadow: 0 0 0 4px rgba(204, 27, 41, 0.25);
      transition: transform 0.3s ease;
    }

    .pointer-line .label {
      background-color: var(--text-dark);
      color: var(--color-white);
      font-size: 0.7rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
      margin-left: 8px;
      box-shadow: var(--shadow-sm);
      letter-spacing: 0.5px;
    }

    .line-cashew {
      top: 25%;
      left: 10%;
    }

    .line-butter {
      bottom: 30%;
      left: 15%;
    }

    .line-cardamom {
      top: 22%;
      right: 10%;
      flex-direction: row-reverse;
    }

    .line-cardamom .label {
      margin-left: 0;
      margin-right: 8px;
    }

    .line-flour {
      bottom: 25%;
      right: 12%;
      flex-direction: row-reverse;
    }

    .line-flour .label {
      margin-left: 0;
      margin-right: 8px;
    }

    /* ==========================================================================
       D2C FLAVOR MATCHER SECTION
       ========================================================================== */
    .flavor-matcher-section {
      background-color: var(--color-white);
      padding: 20px 24px 60px 24px;
      border-bottom: 1px solid var(--color-gray-light);
    }

    .matcher-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .flavor-selector {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 30px;
      margin-bottom: 50px;
      flex-wrap: wrap;
    }

    .flavor-tab {
      background-color: var(--color-pink-soft);
      border: 1px solid var(--color-primary-light);
      color: var(--text-dark);
      padding: 14px 32px;
      border-radius: 30px;
      cursor: pointer;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: var(--transition-smooth);
    }

    .flavor-tab i {
      color: var(--color-primary);
      font-size: 1rem;
    }

    .flavor-tab.active,
    .flavor-tab:hover {
      background-color: var(--color-primary);
      color: var(--color-white);
      border-color: var(--color-primary);
      box-shadow: var(--shadow-md);
    }

    .flavor-tab.active i,
    .flavor-tab:hover i {
      color: var(--color-white);
    }

    .matcher-results-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      min-height: 250px;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    /* ==========================================================================
       D2C TESTIMONIAL MARQUEE SECTION
       ========================================================================== */
    .testimonials-section {
      background-color: var(--color-white);
      padding: 80px 0 100px 0;
      border-top: 1px solid var(--color-gray-light);
      border-bottom: 1px solid var(--color-gray-light);
      overflow: hidden;
    }

    .marquee-wrapper {
      margin-top: 50px;
      width: 100%;
      overflow: hidden;
      display: flex;
    }

    .marquee-track {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: scrollMarquee 25s linear infinite;
    }

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

    .testimonial-card {
      background-color: var(--color-pink-soft);
      border: 1px solid var(--color-primary-light);
      border-radius: 24px;
      padding: 30px;
      width: 320px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: var(--transition-smooth);
    }

    .testimonial-card:hover {
      transform: translateY(-4px);
      border-color: var(--color-primary);
      box-shadow: var(--shadow-md);
    }

    .testimonial-card .stars {
      color: #ffb300;
      font-size: 0.85rem;
    }

    .testimonial-card p {
      font-size: 0.85rem;
      line-height: 1.6;
      font-style: italic;
      color: var(--text-dark);
    }

    .testimonial-card h5 {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--color-primary);
      margin-top: auto;
    }

    @keyframes scrollMarquee {
      0% {
        transform: translate3d(0, 0, 0);
      }

      100% {
        transform: translate3d(calc(-50% - 12px), 0, 0);
      }
    }

    /* Parallax Banner Section */
    .parallax-banner-section {
      height: 400px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 60px 0;
      border-radius: 40px;
      overflow: hidden;
      max-width: 1200px;
      margin: 60px auto;
    }

    .parallax-banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(204, 27, 41, 0.15);
      /* Light red tint */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 5;
    }

    .parallax-banner-card {
      background-color: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      padding: 40px;
      border-radius: 30px;
      max-width: 600px;
      text-align: center;
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .parallax-banner-card h3 {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--color-primary);
      margin-bottom: 16px;
    }

    .parallax-banner-card p {
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--text-dark);
      margin-bottom: 24px;
    }

    /* Quick View Modal Styles */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(34, 34, 34, 0.4);
      backdrop-filter: blur(4px);
      z-index: 2000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-container {
      background-color: var(--color-white);
      border-radius: 32px;
      width: 100%;
      max-width: 800px;
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
      transform: scale(0.9);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid var(--color-primary-light);
    }

    .modal-overlay.active .modal-container {
      transform: scale(1);
    }

    .modal-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.3rem;
      color: var(--text-dark);
      transition: var(--transition-fast);
      z-index: 10;
    }

    .modal-close-btn:hover {
      color: var(--color-primary);
      transform: rotate(90deg);
    }

    .modal-content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }

    .modal-image-area {
      background-color: var(--color-pink-soft);
      padding: 40px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid var(--color-primary-light);
    }

    .modal-image-area img {
      max-width: 100%;
      max-height: 280px;
      object-fit: contain;
    }

    .modal-info-area {
      padding: 40px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .modal-category {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .modal-title {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--text-dark);
    }

    .modal-description {
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .modal-variant-area {
      margin-bottom: 8px;
    }

    .modal-variant-area label {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 6px;
      display: block;
    }

    .modal-variant-area select {
      width: 100%;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--color-primary-light);
      background-color: var(--color-white);
      font-family: var(--font-sans);
      font-size: 0.85rem;
      color: var(--text-dark);
      outline: none;
      cursor: pointer;
    }

    .modal-price-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 10px;
    }

    .modal-price-rsp {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--color-primary);
    }

    .modal-price-mrp {
      font-size: 1.1rem;
      color: var(--text-muted);
      text-decoration: line-through;
    }

    .modal-price-savings {
      font-size: 0.85rem;
      color: var(--color-primary-dark);
      background-color: var(--color-primary-light);
      padding: 4px 10px;
      border-radius: 8px;
      font-weight: 700;
    }

    /* Toast Notification */
    .toast-notify {
      background-color: var(--color-white);
      color: var(--text-dark);
      border-left: 5px solid var(--color-primary);
      box-shadow: var(--shadow-lg);
      padding: 16px 24px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      transform: translateX(120%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid var(--color-primary-light);
      max-width: 320px;
    }

    .toast-notify.active {
      transform: translateX(0);
    }

    .toast-notify i {
      color: #25d366;
      /* green checkmark */
      font-size: 1.25rem;
    }

    .toast-content h5 {
      font-size: 0.85rem;
      font-weight: 800;
      margin-bottom: 2px;
    }

    .toast-content p {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* ==========================================================================
       OUR PROMISE SECTION
       ========================================================================== */
    .promise-section {
      background-color: var(--color-white);
      padding: 0 24px 60px 24px;
    }

    .promise-container {
      max-width: 1000px;
      margin: 0 auto;
      background-color: var(--color-primary-light);
      border-radius: 50px;
      padding: 24px 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-shadow: var(--shadow-sm);
    }

    .promise-item {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--color-primary);
      text-align: left;
    }

    .promise-icon-wrapper {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background-color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      box-shadow: 0 4px 10px rgba(204, 27, 41, 0.05);
    }

    .promise-item span {
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.5px;
    }



    /* ==========================================================================
       INSTAGRAM PHOTO WALL (WHAT'S IN YOUR HEART)
       ========================================================================== */
    .instagram-section {
      background-color: var(--color-white);
      padding: 0 24px 80px 24px;
    }

    .instagram-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .insta-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .insta-title {
      font-size: 2.2rem;
      font-weight: 800;
    }

    .insta-social-handle {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--color-primary);
    }

    .insta-social-handle i {
      font-size: 1.3rem;
    }

    .insta-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .insta-card {
      aspect-ratio: 1;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
    }

    .insta-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }

    .insta-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(204, 27, 41, 0.6);
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      font-size: 1.6rem;
      transition: var(--transition-fast);
      z-index: 5;
    }

    .insta-card:hover img {
      transform: scale(1.15) rotate(2deg) !important;
    }

    .insta-card:hover .insta-overlay {
      opacity: 1;
    }

    /* ==========================================================================
       ABOUT STORY SECTION (RETAINED)
       ========================================================================== */
    .about-section {
      background-color: var(--color-white);
      padding: 0 24px 80px 24px;
    }

    .about-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      align-items: center;
      gap: 60px;
    }

    .about-image-column {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .about-image-frame {
      width: 100%;
      max-width: 440px;
      height: 400px;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      border: 8px solid var(--color-primary-light);
      position: relative;
    }

    .about-image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-badge {
      position: absolute;
      bottom: -20px;
      right: -20px;
      background-color: var(--color-primary);
      color: var(--color-white);
      padding: 20px 30px;
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(204, 27, 41, 0.2);
      text-align: center;
      z-index: 10;
    }

    .about-badge .number {
      font-size: 1.8rem;
      font-weight: 800;
      display: block;
      line-height: 1;
    }

    .about-badge .label {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .about-text-column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .about-title {
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 20px;
    }

    .about-title span {
      color: var(--color-primary);
      display: block;
      font-size: 0.85rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .about-text-column p {
      margin-bottom: 20px;
      font-size: 1rem;
      line-height: 1.7;
    }

    .about-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      width: 100%;
      margin-top: 20px;
    }

    .about-stat-item {
      background-color: var(--color-pink-soft);
      border-radius: 20px;
      padding: 16px;
      text-align: center;
      border: 1px solid rgba(204, 27, 41, 0.05);
    }

    .about-stat-item h4 {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--color-primary);
      margin-bottom: 4px;
    }

    .about-stat-item p {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    /* ==========================================================================
       SHOP CATALOG VIEW (DYNAMIC)
       ========================================================================== */
    .shop-view {
      display: none;
      /* Controlled by routing JS */
      background-color: var(--color-white);
      padding: 40px 24px 80px 24px;
    }

    .shop-view.active {
      display: block;
    }

    .shop-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Cart page: fill the full screen width instead of being centered
       in a max-width box (which left large empty margins on wide
       monitors) — just a comfortable side padding, no width cap. */
    body.woocommerce-cart .shop-container {
      max-width: none;
      width: 100%;
      padding: 0 40px;
    }

    /* Single product page: same full-width treatment. */
    body.single-product .shop-container {
      max-width: none;
      width: 100%;
      padding: 0 40px;
    }

    @media (max-width: 768px) {
      body.woocommerce-cart .shop-container,
      body.single-product .shop-container {
        padding: 0 12px;
      }
      body.woocommerce-cart main.main-content > section,
      body.single-product main.main-content > section {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
    /* Reduce the excess top/bottom whitespace around the "Cart"
       heading — the page.php section wrapper has generous inline
       padding (40px 24px 80px 24px) meant for regular content pages,
       which felt like wasted empty space on the cart page. */
    body.woocommerce-cart main.main-content > section {
      padding-top: 20px !important;
      padding-bottom: 30px !important;
    }
    body.woocommerce-cart .shop-header-bar {
      margin-bottom: 16px !important;
    }
    body.woocommerce-cart .wawa-cart-subtitle {
      margin-top: -10px;
      margin-bottom: 16px;
    }

    .shop-header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      gap: 20px;
    }

    .shop-title-area h2 {
      font-size: 2.2rem;
      font-weight: 800;
    }

    .shop-title-area p {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .search-bar {
      display: flex;
      align-items: center;
      background-color: var(--color-pink-soft);
      border: 1px solid var(--color-primary-light);
      border-radius: 30px;
      padding: 6px 16px;
      width: 320px;
      position: relative;
    }

    .search-bar i {
      color: var(--color-primary);
      margin-right: 10px;
    }

    .search-bar input {
      border: none;
      background: none;
      outline: none;
      width: 100%;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: var(--text-dark);
    }

    .clear-search-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      font-size: 0.9rem;
      display: none;
    }

    .shop-controls-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid var(--color-pink-soft);
      padding-bottom: 16px;
      margin-bottom: 40px;
      gap: 20px;
    }

    .shop-filter-tabs {
      display: flex;
      align-items: center;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .shop-filter-tab {
      background-color: var(--color-pink-soft);
      color: var(--text-dark);
      border: none;
      padding: 10px 20px;
      border-radius: 20px;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 700;
      transition: var(--transition-fast);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .shop-filter-tab i {
      font-size: 0.95rem;
    }

    .shop-filter-tab:hover,
    .shop-filter-tab.active {
      background-color: var(--color-primary);
      color: var(--color-white);
    }

    .shop-sort-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .shop-sort-wrapper label {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-muted);
    }

    .shop-sort-wrapper select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding: 10px 40px 10px 16px;
      border-radius: 20px;
      border: 1px solid var(--color-primary-light);
      background-color: var(--color-white);
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c61320' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 14px;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-dark);
      outline: none;
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .shop-sort-wrapper select:hover {
      border-color: var(--color-primary);
    }

    .shop-sort-wrapper select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-light);
    }

    /* Once main.js builds the custom dropdown, the real <select> is kept
       in the DOM (so form-submit/sorting logic still works exactly as
       WooCommerce generates it) but visually hidden — the custom UI
       below takes over the visible presentation. If JS fails to run,
       this class is never added and the native select above (already
       themed) stays fully visible and usable. */
    .shop-sort-wrapper select.wawa-native-select-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .wawa-custom-select {
      position: relative;
      min-width: 200px;
    }

    .wawa-select-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 20px;
      border: 1px solid var(--color-primary-light);
      background-color: var(--color-white);
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-dark);
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .wawa-select-trigger:hover {
      border-color: var(--color-primary);
    }

    .wawa-select-trigger i {
      font-size: 0.75rem;
      color: var(--color-primary);
      transition: transform 0.25s ease;
    }

    .wawa-custom-select.open .wawa-select-trigger {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-light);
    }

    .wawa-custom-select.open .wawa-select-trigger i {
      transform: rotate(180deg);
    }

    .wawa-select-options {
      list-style: none;
      margin: 0;
      padding: 8px;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 100%;
      width: max-content;
      max-width: 260px;
      background: var(--color-white);
      border: 1px solid var(--color-primary-light);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      z-index: 50;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .wawa-custom-select.open .wawa-select-options {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .wawa-select-option {
      padding: 10px 14px;
      border-radius: 10px;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-dark);
      cursor: pointer;
      transition: var(--transition-fast);
      white-space: nowrap;
    }

    .wawa-select-option:hover {
      background-color: var(--color-primary-light);
      color: var(--color-primary);
    }

    .wawa-select-option.selected {
      background-color: var(--color-primary);
      color: var(--color-white);
      font-weight: 700;
    }



    /* Catalog Empty State */
    .shop-empty-state {
      text-align: center;
      padding: 60px 20px;
    }

    .shop-empty-state i {
      font-size: 3.5rem;
      color: var(--color-primary-light);
      margin-bottom: 20px;
    }

    .shop-empty-state h3 {
      font-size: 1.5rem;
      margin-bottom: 8px;
    }

    .shop-empty-state p {
      margin-bottom: 24px;
    }

    /* Loading Spinner */
    .loading-spinner {
      text-align: center;
      padding: 80px 20px;
      width: 100%;
      grid-column: 1 / -1;
    }

    .loading-spinner i {
      font-size: 2.5rem;
      color: var(--color-primary);
      margin-bottom: 16px;
    }

    /* ==========================================================================
       SLIDE-OUT CART DRAWER
       ========================================================================== */
    .cart-drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(34, 34, 34, 0.4);
      backdrop-filter: blur(4px);
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

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

    .cart-drawer {
      position: fixed;
      top: 0;
      right: -420px;
      width: 420px;
      height: 100%;
      background-color: var(--color-white);
      z-index: 1001;
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cart-drawer.active {
      right: 0;
    }

    .cart-drawer-header {
      padding: 24px;
      border-bottom: 1px solid var(--color-pink-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cart-drawer-header h3 {
      font-size: 1.25rem;
      font-weight: 800;
    }

    .close-cart-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.25rem;
      color: var(--text-dark);
      transition: var(--transition-fast);
    }

    .close-cart-btn:hover {
      color: var(--color-primary);
      transform: rotate(90deg);
    }

    .cart-items-container {
      flex-grow: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .cart-empty-state {
      text-align: center;
      padding: 60px 20px;
    }

    .empty-cart-icon {
      font-size: 3rem;
      color: var(--color-primary-light);
      margin-bottom: 16px;
    }

    .cart-empty-state p {
      margin-bottom: 20px;
      font-weight: 700;
    }

    /* Cart Item Layout */
    .cart-item {
      display: grid;
      grid-template-columns: 70px 1fr auto;
      gap: 16px;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--color-pink-soft);
      margin-bottom: 16px;
    }

    .cart-item-graphic {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      background-color: var(--color-pink-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(204, 27, 41, 0.05);
    }

    .cart-item-graphic img {
      max-width: 80%;
      max-height: 80%;
      object-fit: contain;
    }

    .cart-item-details h4 {
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .cart-item-variant-label {
      font-size: 0.75rem;
      color: var(--color-primary);
      font-weight: 700;
      background-color: var(--color-primary-light);
      padding: 2px 6px;
      border-radius: 6px;
      display: inline-block;
      margin-bottom: 8px;
    }

    .cart-item-price-area {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cart-item-price-rsp {
      font-size: 1rem;
      font-weight: 800;
      color: var(--color-primary);
    }

    .cart-item-price-mrp {
      font-size: 0.8rem;
      color: var(--text-muted);
      text-decoration: line-through;
    }

    .cart-item-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }

    .qty-control {
      display: flex;
      align-items: center;
      background-color: var(--color-pink-soft);
      border-radius: 12px;
      padding: 2px;
      border: 1px solid var(--color-primary-light);
    }

    .qty-btn {
      width: 26px;
      height: 26px;
      border: none;
      background: none;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition-fast);
    }

    .qty-btn:hover {
      background-color: var(--color-white);
      border-radius: 10px;
    }

    .qty-val {
      padding: 0 10px;
      font-size: 0.85rem;
      font-weight: 700;
    }

    .btn-remove {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: underline;
    }

    .btn-remove:hover {
      color: var(--color-primary);
    }

    /* Checkout summary footer */
    .cart-drawer-footer {
      padding: 24px;
      border-top: 1px solid var(--color-pink-soft);
      background-color: var(--color-pink-soft);
    }

    .price-summary-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 0.95rem;
      font-weight: 700;
    }

    .saving-row {
      color: var(--color-primary-dark);
    }

    .subtotal-val {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--color-primary);
    }

    .checkout-form-container {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .btn-checkout {
      width: 100%;
      padding: 14px;
      font-weight: 700;
      border-radius: 30px;
    }

    /* Delivery Details Form inside Drawer */
    .checkout-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      background-color: var(--color-white);
      padding: 16px;
      border-radius: 20px;
      border: 1px solid var(--color-primary-light);
      margin-top: 10px;
    }

    .checkout-form h4 {
      font-size: 0.95rem;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--color-pink-soft);
      padding-bottom: 6px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: left;
    }

    .form-group label {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-muted);
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid var(--color-primary-light);
      font-family: var(--font-sans);
      font-size: 0.8rem;
      outline: none;
    }

    .form-group textarea {
      resize: none;
      height: 60px;
    }

    .btn-submit-order {
      width: 100%;
      background-color: #25d366;
      /* WhatsApp Green */
      color: var(--color-white);
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
    }

    .btn-submit-order:hover {
      background-color: #1ebd59;
      transform: translateY(-1px);
    }

    /* ==========================================================================
       FOOTER (CURVED RED BOTTOM BANNER)
       ========================================================================== */
    .footer {
      background-color: var(--color-primary);
      color: var(--color-white);
      border-radius: 80px 80px 0 0;
      padding: 80px 24px 40px 24px;
      margin-top: 60px;
      position: relative;
    }

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 60px;
    }

    .footer-brand .logo-text-red {
      color: var(--color-white);
    }

    .footer-brand .logo-tag {
      border-color: rgba(255, 255, 255, 0.4);
      color: var(--color-white);
    }

    .footer-logo-img {
      height: 22px !important;
      width: auto !important;
      max-width: none !important;
      display: block;
    }

    .footer-brand p {
      color: rgba(255, 255, 255, 0.8);
      margin: 20px 0;
      font-size: 0.9rem;
      max-width: 300px;
    }

    .newsletter-form {
      display: flex;
      background-color: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 30px;
      padding: 4px;
      width: 100%;
      max-width: 280px;
    }

    .newsletter-form input {
      border: none;
      background: none;
      outline: none;
      padding: 8px 16px;
      color: var(--color-white);
      font-family: var(--font-sans);
      font-size: 0.8rem;
      width: 100%;
    }

    .newsletter-form input::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }

    .newsletter-form button {
      background-color: var(--color-white);
      color: var(--color-primary);
      border: none;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .newsletter-form button:hover {
      background-color: var(--color-primary-light);
    }

    .footer-column h4 {
      font-size: 1.15rem;
      margin-bottom: 24px;
      color: var(--color-white);
      font-weight: 700;
      position: relative;
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 12px;
    }

    .footer-links a {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.9rem;
    }

    .footer-links a:hover {
      color: var(--color-white);
      padding-left: 4px;
    }

    .footer-regions {
      list-style: none;
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.9rem;
    }

    .footer-regions li {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-regions i {
      color: var(--color-primary-light);
    }

    .footer-contact {
      list-style: none;
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.85rem;
    }

    .footer-contact li {
      margin-bottom: 16px;
      display: flex;
      gap: 10px;
    }

    .footer-contact i {
      color: var(--color-primary-light);
      margin-top: 4px;
    }

    .footer-contact a {
      color: rgba(255, 255, 255, 0.8);
    }

    .footer-contact a:hover {
      color: var(--color-white);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      /* Forced to plain solid white (no opacity at all) — was rgba()
         at partial opacity before, which kept rendering too close to
         the red background to read comfortably. */
      color: #ffffff;
    }
    .footer-bottom p {
      color: #ffffff;
    }

    .footer-socials {
      display: flex;
      gap: 16px;
    }

    .footer-socials a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      font-size: 1rem;
      transition: var(--transition-fast);
    }

    .footer-socials a:hover {
      background-color: var(--color-white);
      color: var(--color-primary);
      transform: translateY(-2px);
    }

    /* ==========================================================================
       RESPONSIVE MEDIA QUERIES
       ========================================================================== */
    @media (max-width: 1024px) {
      .hero-banner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 60px 40px 100px 40px;
      }

      .hero-description {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-actions-row {
        justify-content: center;
      }

      .hero-visual-content {
        height: 320px;
      }

      .categories-row {
        grid-template-columns: repeat(3, 1fr);
      }

      .bestsellers-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .navbar {
        display: none;
        /* Mobile menu toggled */
      }

      .menu-mobile-btn {
        display: block;
      }

      .categories-row {
        grid-template-columns: repeat(2, 1fr);
      }

      .bestsellers-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      /* Distributor/Franchise form rows + About page's 2-column content
         block use inline grid-template-columns with no responsive
         fallback of their own — this stacks them on mobile. !important
         is required here since inline styles otherwise beat a normal
         stylesheet rule. */
      .two-col-grid {
        grid-template-columns: 1fr !important;
      }

      .matcher-results-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .promise-container {
        flex-direction: column;
        gap: 20px;
        border-radius: 30px;
        padding: 30px 20px;
      }

      .ticket-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
      }

      .ticket-visual {
        width: 100%;
        justify-content: center;
      }

      .insta-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .about-image-frame {
        height: 300px;
      }

      .shop-header-bar {
        flex-direction: column;
        align-items: flex-start;
      }

      .search-bar {
        width: 100%;
      }

      .shop-controls-bar {
        flex-direction: column;
        align-items: flex-start;
      }

      .shop-filter-tabs {
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }

      .shop-sort-wrapper {
        width: 100%;
        justify-content: space-between;
      }

      .cart-drawer {
        width: 100%;
        right: -100%;
      }

      .showcase-container {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .showcase-visual {
        display: none;
      }
    }

    @media (max-width: 480px) {
      .hero-title {
        font-size: 2.2rem;
      }

      .categories-row {
        grid-template-columns: 1fr;
      }

      .bestsellers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .bestsellers-grid .product-card {
        padding: 12px;
      }

      .bestsellers-grid .product-card-name {
        font-size: 0.9rem;
      }

      .matcher-results-grid {
        grid-template-columns: 1fr;
      }

      .insta-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }

      .hero-actions-row {
        flex-direction: column;
        width: 100%;
      }

      .btn {
        width: 100%;
      }
    }

    /* User Profile Dashboard Styles */
    .user-btn {
      background: none;
      border: none;
      cursor: pointer;
      position: relative;
    }

    .user-icon-wrapper {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--color-primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary);
      font-size: 1.1rem;
      transition: var(--transition-smooth);
    }

    .user-btn:hover .user-icon-wrapper {
      background-color: var(--color-primary);
      color: var(--color-white);
      transform: scale(1.05);
    }

    .user-drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(34, 34, 34, 0.4);
      backdrop-filter: blur(4px);
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

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

    .user-drawer {
      position: fixed;
      top: 0;
      right: -420px;
      width: 420px;
      height: 100%;
      background-color: var(--color-white);
      z-index: 1001;
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .user-drawer.active {
      right: 0;
    }

    .user-drawer-header {
      padding: 24px;
      border-bottom: 1px solid var(--color-pink-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .user-drawer-header h3 {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--text-dark);
    }

    .close-user-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.25rem;
      color: var(--text-dark);
      transition: var(--transition-fast);
    }

    .close-user-btn:hover {
      color: var(--color-primary);
      transform: scale(1.1);
    }

    .user-drawer-content {
      padding: 24px;
      flex-grow: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .user-profile-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background-color: var(--color-pink-soft);
      border-radius: 16px;
    }

    .user-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: var(--color-primary);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      box-shadow: var(--shadow-sm);
    }

    .user-details h4 {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-dark);
      margin: 0 0 4px 0;
    }

    .user-details p {
      font-size: 0.8rem;
      color: var(--color-primary);
      font-weight: 600;
      margin: 0;
    }

    .dashboard-menu {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      border-bottom: 1px solid var(--color-pink-soft);
      padding-bottom: 16px;
    }

    .dashboard-menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 4px;
      border-radius: 12px;
      cursor: pointer;
      transition: var(--transition-smooth);
      color: var(--text-muted);
      gap: 6px;
    }

    .dashboard-menu-item i {
      font-size: 1.2rem;
    }

    .dashboard-menu-item span {
      font-size: 0.7rem;
      font-weight: 700;
      text-align: center;
    }

    .dashboard-menu-item:hover,
    .dashboard-menu-item.active {
      color: var(--color-primary);
      background-color: var(--color-primary-light);
    }

    .dashboard-tab-content {
      flex-grow: 1;
    }

    .dashboard-tab-panel h5 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text-dark);
      margin: 0 0 16px 0;
    }

    .dashboard-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      text-align: center;
      color: var(--text-muted);
      gap: 12px;
    }

    .dashboard-empty-state i {
      font-size: 3rem;
      color: var(--color-primary-light);
    }

    .dashboard-empty-state p {
      font-size: 0.9rem;
      font-weight: 600;
      margin: 0;
    }

    .dashboard-profile-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dashboard-profile-form .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .dashboard-profile-form label {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-dark);
    }

    .dashboard-profile-form input {
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid var(--color-pink-soft);
      font-size: 0.9rem;
      outline: none;
      transition: var(--transition-fast);
    }

    .dashboard-profile-form input:focus {
      border-color: var(--color-primary);
    }

    .settings-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .switch-container {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .switch-label {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-dark);
    }

    @media (max-width: 480px) {
      .user-drawer {
        width: 100%;
        right: -100%;
      }
    }

/* ==========================================================================
   WOOCOMMERCE INTEGRATION STYLES (maps default WooCommerce markup to
   the wawa Bakery red & white design system)
   ========================================================================== */

.woocommerce, .woocommerce-page {
  font-family: var(--font-sans);
  color: var(--text-dark);
}

.site-main-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 24px 80px 24px;
}

.woocommerce-breadcrumb {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 30px;
}
.woocommerce-breadcrumb a { color: var(--color-primary); }

/* Product grid (shop / archive) */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0 0 40px 0;
  padding: 0;
}

/* When our custom .product-card is used inside the default WooCommerce
   [products] shortcode markup (<ul class="products"><li class="product">),
   strip the default li styling so we don't get a double card effect. */
.woocommerce ul.products li.product {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  margin: 0;
}
.woocommerce ul.products li.product:hover {
  transform: none;
  box-shadow: none;
}
.woocommerce ul.products li.product img {
  border-radius: 0;
  margin-bottom: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 6px 0;
}
.woocommerce ul.products li.product .price {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1.05rem;
}
.woocommerce ul.products li.product .price del {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.7;
  margin-right: 6px;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  background-color: var(--color-primary);
  color: #fff !important;
  border: none;
  border-radius: 30px;
  padding: 12px 24px;
  font-weight: 700;
  font-family: var(--font-sans);
  transition: var(--transition-fast);
  cursor: pointer;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--color-primary-dark);
}
.woocommerce span.onsale {
  background: var(--color-primary);
  color: #fff;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.75rem;
  min-height: auto;
  min-width: auto;
  padding: 6px 12px;
  top: 10px;
  left: 10px;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--text-dark);
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: 800;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-muted);
  line-height: 1.7;
}
.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  padding: 10px;
  width: 70px;
}
.woocommerce-tabs ul.tabs li a { color: var(--text-dark); font-weight: 700; }
.woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--color-primary); }

/* Cart / Checkout tables */
.woocommerce table.shop_table {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--color-gray-light);
  width: 100%;
  table-layout: fixed;
}
.woocommerce table.shop_table th {
  background: var(--color-pink-soft);
  color: var(--text-dark);
  font-weight: 700;
}
.woocommerce table.shop_table th.product-thumbnail,
.woocommerce table.shop_table td.product-thumbnail {
  width: 8%;
}
.woocommerce table.shop_table th.product-name,
.woocommerce table.shop_table td.product-name {
  width: 46%;
}
.woocommerce table.shop_table th.product-price,
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table th.product-quantity,
.woocommerce table.shop_table td.product-quantity,
.woocommerce table.shop_table th.product-subtotal,
.woocommerce table.shop_table td.product-subtotal {
  width: 14%;
}
.woocommerce table.shop_table th.product-remove,
.woocommerce table.shop_table td.product-remove {
  width: 4%;
}
/* 8 + 46 + 14*3 + 4 = 100% — every column explicitly accounted for so
   the table always fills its container width exactly, with no
   unassigned leftover space (which is what was showing up as a large
   blank area next to the table before). */

/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */
.single-product-section {
  background-color: var(--color-white);
  padding: 30px 24px 80px 24px;
}

.single-product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}
.single-product-breadcrumb a {
  color: var(--text-muted);
}
.single-product-breadcrumb a:hover {
  color: var(--color-primary);
}
.single-product-breadcrumb i {
  font-size: 0.7rem;
}
.single-product-breadcrumb span {
  color: var(--color-primary);
  font-weight: 700;
}

.single-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 30px;
}
@media (max-width: 900px) {
  .single-product-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Gallery */
.single-product-main-image {
  position: relative;
  background: var(--color-pink-soft);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 460px;
  overflow: hidden;
}
.single-product-main-image .wawa-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.single-product-sale-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
}
.single-product-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.single-product-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 2px solid var(--color-gray-light);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--color-pink-soft);
}
.single-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.single-product-thumb.active,
.single-product-thumb:hover {
  border-color: var(--color-primary);
}

/* Summary */
.single-product-category {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.single-product-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--text-dark);
  margin-bottom: 12px;
  line-height: 1.2;
}
.single-product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f5a623;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.single-product-rating span {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 4px;
}
.single-product-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.single-product-price del {
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 500;
  margin-right: 10px;
}
.single-product-price ins {
  text-decoration: none;
}
.single-product-short-desc {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}
.single-product-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 20px;
}
.single-product-stock i { font-size: 0.9rem; }

/* Variation pills (built by main.js on top of WooCommerce's own
   variation <select> elements — the selects stay in the DOM, just
   visually hidden, so WC's price/stock JS keeps working normally). */
.wawa-variation-group {
  margin-bottom: 20px;
}
.wawa-variation-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
  text-transform: capitalize;
}
.wawa-variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wawa-variation-pill {
  padding: 10px 20px;
  border-radius: 30px;
  border: 2px solid var(--color-primary-light);
  background: var(--color-white);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}
.wawa-variation-pill:hover {
  border-color: var(--color-primary);
}
.wawa-variation-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.wawa-variation-pill.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.variations_form table.variations {
  display: none !important; /* replaced entirely by the pill UI */
}
.woocommerce-variation-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0;
}
.woocommerce-variation-availability {
  margin-bottom: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2e7d32;
}
.woocommerce-variation-unavailable p {
  color: var(--color-primary);
  font-weight: 700;
}

/* The pill-group(s) and the price+qty+button block should each take
   their own full-width row inside the flex form.cart wrapper — without
   this they were sizing to their content instead, which could let a
   narrow pill group sit awkwardly beside other rows. */
.wawa-variation-group,
table.variations {
  flex: 1 1 100%;
}

/* WooCommerce renders the selected variation's price/availability
   (.woocommerce-variation) and the quantity+Add to Cart controls
   (.woocommerce-variation-add-to-cart) as two separate blocks inside
   .single_variation_wrap. Letting them sit side-by-side on one row
   (an earlier attempt) only worked when the sidebar was wide enough —
   on anything narrower, the row broke at an unpredictable point and
   looked broken instead of just wrapping cleanly. Forcing this into a
   deliberate 2-row column stack instead — price on its own row, then
   quantity+button together on the row below — makes the layout the
   same and fully aligned at every screen width, instead of depending
   on how much space happens to be available. */
.single_variation_wrap {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.woocommerce-variation.single_variation {
  margin: 0;
}
.woocommerce-variation-add-to-cart.variations_button {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}

.single-product-quantity-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.quantity.wawa-qty-control.single-product-qty {
  display: inline-flex;
  border-radius: 12px;
}
.quantity.wawa-qty-control.single-product-qty input.qty {
  width: 50px;
  height: 46px;
}
.single_add_to_cart_button.button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none;
  border-radius: 14px;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 4px 15px rgba(198, 19, 32, 0.25);
}
.single_add_to_cart_button.button:hover {
  background-color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
}
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.wawa-buy-now-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--text-dark);
  color: var(--color-white);
  border: none;
  border-radius: 14px;
  padding: 15px 36px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 20px;
}
.wawa-buy-now-btn:hover {
  background: #000;
  transform: translateY(-2px);
}
.wawa-buy-now-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

.single-product-trust-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
  margin-bottom: 16px;
}
.single-product-sku {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Shared big section heading (eyebrow + serif title) used above the
   Description, Ingredients/Shelf-Life/Storage and Reviews blocks — same
   "eyebrow + large title" pattern as .section-title elsewhere on the
   site, so these blocks read as proper sections instead of small,
   lost-looking text on a wide page. */
.single-product-section-heading {
  margin-bottom: 24px;
}
.single-product-eyebrow {
  display: block;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.single-product-section-heading h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.2;
}

/* Description */
.single-product-description {
  max-width: 1100px;
  margin: 0 auto 70px auto;
  padding-top: 50px;
  border-top: 1px solid var(--color-gray-light);
}
.single-product-description-body {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.85;
}

/* Ingredients / Shelf Life / Storage info section */
.single-product-info-section {
  max-width: 1100px;
  margin: 0 auto 70px auto;
  padding-top: 50px;
  border-top: 1px solid var(--color-gray-light);
}
.single-product-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.wawa-info-card {
  background: var(--color-pink-soft);
  border: 1px solid var(--color-gray-light);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  transition: var(--transition-fast);
}
.wawa-info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.wawa-info-card-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  box-shadow: 0 6px 16px rgba(198, 19, 32, 0.1);
}
.wawa-info-card-icon i {
  font-size: 1.7rem;
  color: var(--color-primary);
}
.wawa-info-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.wawa-info-card p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 700px) {
  .single-product-info-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Quick trust strip (reuses .promise-container/.promise-item/.promise-icon-wrapper
   from the homepage "Our Promise" section) — sized up a step from the
   homepage version since it sits alone here, not among other big blocks. */
.single-product-promise {
  max-width: 1100px;
  margin: 0 auto 50px auto;
  padding: 26px 40px;
}
.single-product-promise .promise-icon-wrapper {
  width: 56px;
  height: 56px;
  font-size: 1.35rem;
}
.single-product-promise .promise-item span {
  font-size: 1rem;
}

/* Ratings & Reviews — restyles WooCommerce's default single-product-reviews.php
   markup (#reviews, .commentlist, .comment-form-rating, etc.) to match the
   rest of the page instead of looking like an unstyled WC default. */
.single-product-reviews {
  max-width: 1100px;
  margin: 0 auto 70px auto;
  padding-top: 50px;
  border-top: 1px solid var(--color-gray-light);
}
.single-product-reviews #reviews {
  display: block;
}
/* WooCommerce prints its own "Reviews (N)" <h2> — add the same
   eyebrow label used above Description/Ingredients so this section
   matches instead of looking like a smaller, separate afterthought. */
.single-product-reviews .woocommerce-Reviews-title::before {
  content: "Customer Love";
  display: block;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.single-product-reviews .woocommerce-Reviews-title,
.single-product-reviews #reply-title {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 20px;
}
.single-product-reviews .commentlist {
  list-style: none;
  margin: 0 0 30px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.single-product-reviews .comment_container {
  display: flex;
  gap: 14px;
  background: var(--color-pink-soft);
  border: 1px solid var(--color-gray-light);
  border-radius: 18px;
  padding: 20px;
}
.single-product-reviews .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.single-product-reviews .comment-text {
  flex: 1;
}
.single-product-reviews .star-rating {
  color: #f5a623;
  font-size: 0.9rem;
  margin-bottom: 6px;
  overflow: hidden;
  position: relative;
  height: 1.2em;
  line-height: 1.2em;
  width: 5.4em;
  font-family: 'Font Awesome 6 Free';
}
.single-product-reviews .star-rating::before {
  content: '\f005 \f005 \f005 \f005 \f005';
  font-weight: 400;
  color: var(--color-gray-light);
  letter-spacing: 3px;
  display: block;
}
.single-product-reviews .star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.single-product-reviews .star-rating span::before {
  content: '\f005 \f005 \f005 \f005 \f005';
  font-weight: 900;
  color: #f5a623;
  letter-spacing: 3px;
  display: block;
}
.single-product-reviews .woocommerce-review__author {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 0.9rem;
}
.single-product-reviews .woocommerce-review__dash {
  display: none;
}
.single-product-reviews .woocommerce-review__published-date {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: 6px;
}
.single-product-reviews .description p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 8px;
}
.single-product-reviews .comment-reply-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-dark);
  font-weight: 600;
}
.single-product-reviews .comment-form-rating select,
.single-product-reviews .comment-form p input[type="text"],
.single-product-reviews .comment-form p input[type="email"],
.single-product-reviews .comment-form p textarea {
  width: 100%;
  border: 1px solid var(--color-gray-light);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--color-white);
  margin-top: 6px;
}
.single-product-reviews .comment-form p textarea {
  min-height: 110px;
  resize: vertical;
}
.single-product-reviews .comment-form label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}
.single-product-reviews .comment-form-rating p.stars a {
  color: var(--color-primary);
}
.single-product-reviews .form-submit input#submit {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 14px;
  padding: 14px 36px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-top: 10px;
}
.single-product-reviews .form-submit input#submit:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
}
.single-product-reviews .woocommerce-noreviews {
  color: var(--text-muted);
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  .single-product-reviews .comment_container {
    flex-direction: column;
  }
}

/* Related products */
.single-product-related {
  margin-top: 0;
  padding-top: 50px;
  border-top: 1px solid var(--color-gray-light);
}
.single-product-related h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  font-weight: 600;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 24px;
}
/* No longer inherits .wawa-cart-related's cramped carousel styling
   (fixed 180px cards meant for a narrow sidebar — see the comment in
   single-product.php), but the full shop-grid card size (160px image,
   1.1rem name, 20px padding) reads too large stacked 4-up here on a
   real screen. This is its own, in-between size: a proper grid, just
   dialed back a notch from the shop page. */
.single-product-related .product-card {
  padding: 14px;
  border-radius: 18px;
}
.single-product-related .product-card-img-container {
  height: 120px;
  margin-bottom: 10px;
}
.single-product-related .product-card-category {
  font-size: 0.68rem;
  margin-bottom: 4px;
}
.single-product-related .product-card-name {
  font-size: 0.95rem;
  height: 2.2rem;
  margin-bottom: 6px;
}
.single-product-related .product-card-variant {
  margin-bottom: 10px;
}
.single-product-related .product-card-variant-label {
  font-size: 0.7rem;
  padding: 6px 10px;
}
.single-product-related .product-card-rsp {
  font-size: 1.05rem;
}
.single-product-related .product-card-mrp {
  font-size: 0.8rem;
}
.single-product-related .product-card-action-btn {
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
}
.single-product-related .product-card-heart {
  top: 14px;
  right: 14px;
  font-size: 1rem;
}
.single-product-related .bestsellers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .single-product-related .bestsellers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   SINGLE PRODUCT PAGE — responsive (tablet, phone, small phone)
   ========================================================================== */
@media (max-width: 1024px) {
  .single-product-section {
    padding: 24px 20px 60px 20px;
  }
  .single-product-main-image {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .single-product-section {
    padding: 16px 16px 50px 16px;
  }
  .single-product-breadcrumb {
    font-size: 0.75rem;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .single-product-main-image {
    height: 300px;
    padding: 16px;
    border-radius: 18px;
  }
  .single-product-thumb {
    width: 56px;
    height: 56px;
  }
  .single-product-title {
    font-size: 1.4rem;
  }
  .single-product-price {
    font-size: 1.4rem;
  }
  .single-product-short-desc {
    font-size: 0.9rem;
  }
  form.cart {
    flex-direction: column;
    align-items: stretch;
  }
  .single_variation_wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .woocommerce-variation-add-to-cart.variations_button {
    width: 100%;
  }
  .quantity.wawa-qty-control.single-product-qty {
    align-self: flex-start;
  }
  .single_add_to_cart_button.button {
    width: 100%;
    text-align: center;
  }
  .wawa-buy-now-btn {
    padding: 13px 24px;
  }
  .single-product-trust-badges {
    gap: 10px;
  }
  .wawa-trust-item span {
    font-size: 0.65rem;
  }
  .single-product-description,
  .single-product-info-section,
  .single-product-reviews {
    padding-top: 30px;
    margin-bottom: 40px;
  }
  .single-product-section-heading h2,
  .single-product-reviews .woocommerce-Reviews-title,
  .single-product-reviews #reply-title {
    font-size: 1.4rem;
  }
  .single-product-description-body {
    font-size: 1rem;
  }
  .single-product-promise {
    padding: 20px 24px;
    gap: 16px;
  }
  .single-product-promise .promise-item span {
    font-size: 0.8rem;
  }
  .single-product-related {
    padding-top: 30px;
  }
}

@media (max-width: 480px) {
  .single-product-section {
    padding: 12px 12px 40px 12px;
  }
  .single-product-main-image {
    height: 240px;
  }
  .single-product-title {
    font-size: 1.2rem;
  }
  .single-product-price {
    font-size: 1.25rem;
  }
  .wawa-variation-pill {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  .single-product-trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .single-product-related .bestsellers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ==========================================================================
   CART PAGE — full theme redesign (card-style rows, branded sidebar)
   No custom cart.php template is used — WooCommerce's default markup/
   hooks (coupons, cross-sells, shipping calc, checkout button) all stay
   fully intact and functional; this is a pure CSS skin on top of it.
   ========================================================================== */
/* Cart page: items (left) + Order Summary (right) side-by-side from the
   top. main.js builds a dedicated .wawa-cart-layout wrapper containing
   EXACTLY the item form + cart-collaterals (nothing else), so this
   grid never has to guess how many/which children it has. */
.wawa-cart-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}
.cart-collaterals {
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) {
  .wawa-cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-collaterals {
    position: static;
  }
}


.woocommerce-cart-form {
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.woocommerce table.shop_table th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 18px 20px;
  border-bottom: 2px solid var(--color-primary-light);
}
.woocommerce table.shop_table td {
  padding: 12px 16px;
  font-size: 0.92rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-gray-light);
}
.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: none;
}
.woocommerce table.shop_table tbody tr {
  transition: background-color 0.25s ease;
}
@media (hover: hover) {
  .woocommerce table.shop_table tbody tr:hover {
    background-color: var(--color-pink-soft);
  }
}

/* Product thumbnail */
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail a img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--color-gray-light);
}

/* Product name + variation meta (e.g. weight) */
.woocommerce table.shop_table td.product-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
}
.woocommerce table.shop_table td.product-name a {
  color: var(--text-dark);
  font-weight: 700;
}
.woocommerce table.shop_table td.product-name a:hover {
  color: var(--color-primary);
}
.woocommerce table.shop_table td.product-name dl.variation,
.woocommerce table.shop_table td.product-name .wc-item-meta {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Price / subtotal columns */
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Quantity stepper */
.woocommerce table.shop_table td.product-quantity .quantity input.qty {
  width: 50px;
  height: 36px;
  font-size: 0.9rem;
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  text-align: center;
}
.woocommerce table.shop_table td.product-quantity .quantity input.qty:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Custom +/- buttons wrapping the quantity input (added by main.js).
   Hide the browser's native number-input spinner arrows since our own
   buttons replace them. */
.wawa-qty-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background-color: var(--color-pink-soft);
  border-radius: 12px;
  border: 1px solid var(--color-primary-light);
  overflow: hidden;
}
.quantity.wawa-qty-control input.qty {
  border: none;
  border-radius: 0;
  background: transparent;
  width: 32px;
  height: 34px;
  -moz-appearance: textfield;
  cursor: default;
  caret-color: transparent;
  color: var(--text-dark) !important;
}
.quantity.wawa-qty-control input.qty::-webkit-outer-spin-button,
.quantity.wawa-qty-control input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wawa-qty-btn {
  width: 28px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}
.wawa-qty-btn:hover {
  background-color: var(--color-primary-light);
}
/* Prevent the browser's default focus outline (a plain black/dark
   rectangle in most browsers) from showing after a click — that's what
   was drawing a stray box around whichever +/- button was last tapped.
   Still shown for keyboard/tab navigation via :focus-visible, just
   styled to match the pill instead of the browser default. */
.wawa-qty-btn:focus {
  outline: none;
}
.wawa-qty-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* "N items in your cart" subtitle under the Cart heading */
.wawa-cart-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: -30px;
  margin-bottom: 30px;
}

.wawa-cart-count {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Continue Shopping link below the items list */
.wawa-continue-shopping {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 24px 28px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
}
.wawa-continue-shopping:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Empty cart state */
.woocommerce-cart .cart-empty {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-muted);
  background: var(--color-pink-soft);
  border-radius: 24px;
  padding: 60px 30px;
}
.woocommerce-cart .wc-empty-cart-message::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f07a";
  display: block;
  font-size: 3rem;
  color: var(--color-primary-light);
  margin-bottom: 20px;
}
.woocommerce-cart .return-to-shop {
  text-align: center;
  margin-top: 20px;
}
.woocommerce-cart .return-to-shop .button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  padding: 14px 32px !important;
  border-radius: 16px !important;
}

/* Remove (trash) icon */
.woocommerce table.shop_table td.product-remove a.remove {
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  color: var(--text-muted) !important;
  background: var(--color-pink-soft);
  transition: var(--transition-fast);
}
.woocommerce table.shop_table td.product-remove a.remove:hover {
  color: var(--color-white) !important;
  background: var(--color-primary) !important;
}

/* "Update cart" / actions row — coupons are disabled site-wide and
   the "Update cart" button is hidden (auto-updates via AJAX instead),
   so this row is always empty now. Hide it entirely rather than
   leaving a blank padded box in the cart. */
.woocommerce table.shop_table tr:has(td.actions) {
  display: none !important;
}
/* "Update cart" button hidden — quantity changes now auto-update the
   totals via AJAX (see wawaEnhanceQtyInputs in main.js), making a
   manual update button redundant. The "Apply coupon" button/field
   stay untouched. */
.woocommerce table.shop_table td.actions button[name="update_cart"] {
  display: none;
}
.woocommerce table.shop_table td.actions .button {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary-light) !important;
  box-shadow: none !important;
}
.woocommerce table.shop_table td.actions .button:hover {
  background-color: var(--color-primary-light) !important;
}
.woocommerce table.shop_table td.actions .coupon .input-text {
  padding: 12px 16px;
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  font-family: var(--font-sans);
  margin-right: 10px;
}

/* Cart totals sidebar — a proper branded card instead of a bare table */
.cart-collaterals .cart_totals {
  background: var(--color-pink-soft);
  border: 1px solid var(--color-primary-light);
  border-radius: 24px;
  padding: 32px;
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.cart-collaterals {
  width: 100%;
}
.cart_totals h2 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-primary-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart_totals h2::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f290"; /* fa-cart-shopping / basket icon */
  color: var(--color-primary);
  font-size: 1.1rem;
}
.cart_totals table.shop_table {
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  width: 100%;
}
.cart_totals table.shop_table tbody {
  display: block;
  width: 100%;
}
.cart_totals table.shop_table tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(204, 27, 41, 0.15);
  background: transparent;
}
.cart_totals table.shop_table th {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.cart_totals table.shop_table td {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: right;
}
.cart_totals table.shop_table tr:last-child th,
.cart_totals table.shop_table tr:last-child td {
  border-bottom: none;
}
.cart_totals .order-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  width: 100% !important;
}
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-top: 2px solid var(--color-primary-light);
  border-bottom: none;
  padding-top: 18px;
}
.cart_totals .order-total th {
  font-size: 0.95rem;
  color: var(--text-dark);
}
.cart_totals .order-total .woocommerce-Price-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
}
.wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 18px 24px;
  border-radius: 16px;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 15px rgba(204, 27, 41, 0.25);
  transition: var(--transition-fast);
  margin-top: 8px;
}
.wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(204, 27, 41, 0.35);
}
.wc-proceed-to-checkout a.checkout-button::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054"; /* chevron-right */
  margin-left: 8px;
  font-size: 0.9rem;
}

/* "You may also like" related products below the cart items */
.wawa-cart-related {
  margin-top: 50px;
  padding: 40px 24px 8px 24px;
  border-top: 1px solid var(--color-gray-light);
}
.wawa-cart-related h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.wawa-cart-related .bestsellers-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 14px;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.wawa-cart-related .bestsellers-grid .product-card {
  flex: 0 0 180px;
  scroll-snap-align: start;
}
@media (max-width: 480px) {
  .wawa-cart-related .bestsellers-grid .product-card {
    flex: 0 0 150px;
  }
}
/* Compact card sizing for the related-products row */
.wawa-cart-related .product-card {
  padding: 16px;
  border-radius: 14px;
}
.wawa-cart-related .product-card-img-container {
  height: 76px;
  margin-bottom: 12px;
}
.wawa-cart-related .product-card-name {
  font-size: 0.75rem;
  margin-bottom: 6px;
  -webkit-line-clamp: 2;
}
.wawa-cart-related .product-card-category {
  font-size: 0.55rem;
  margin-bottom: 5px;
}
.wawa-cart-related .product-card-variant {
  margin-bottom: 10px;
}
.wawa-cart-related .product-card-variant-label {
  font-size: 0.6rem;
  padding: 4px 10px;
}
.wawa-cart-related .product-card-rsp {
  font-size: 0.8rem;
}
.wawa-cart-related .product-card-action-btn {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}
.wawa-cart-related .product-card-heart {
  top: 14px;
  right: 14px;
  font-size: 0.85rem;
}


.wawa-trust-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-primary-light);
}
.wawa-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.wawa-trust-item i {
  font-size: 1.1rem;
  color: var(--color-primary);
}
.wawa-trust-item span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}
@media (max-width: 400px) {
  .wawa-trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Coupon toggle link ("Add coupons" style accordion trigger) */
.cart_totals .shipping-calculator-button,
.woocommerce-shipping-calculator a {
  color: var(--color-primary);
  font-weight: 700;
}

@media (max-width: 700px) {
  .woocommerce table.shop_table td.product-thumbnail img {
    width: 80px;
    height: 80px;
  }
  .woocommerce table.shop_table td.product-name {
    font-size: 1rem;
  }
  .woocommerce table.shop_table td {
    font-size: 0.95rem;
    padding: 14px 10px;
  }
  .cart-collaterals .cart_totals {
    padding: 22px;
    border-radius: 20px;
  }
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-sans);
}
.woocommerce-checkout #payment {
  background: var(--color-pink-soft);
  border-radius: 20px;
}

/* My Account (login / signup / dashboard) */

/* Dashboard: nav + content side-by-side on desktop, 1 column on
   mobile. This is now structure-agnostic on purpose: earlier attempts
   assumed WooCommerce always wraps nav+content in an extra
   `.woocommerce` div (true on the cart page) — but on My Account that
   wrapper apparently isn't there, so the grid was never being applied
   to anything. Instead: put the grid directly on .page-content-body
   (the one element from page.php we know for certain wraps this
   content either way), and if a `.woocommerce` wrapper div *does* turn
   out to exist in between, `display: contents` "unwraps" it from
   layout — its children (nav, content) become effective direct grid
   children regardless. Works whether that wrapper exists or not. */
body.woocommerce-account.logged-in .page-content-body {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr — a bare 1fr's minimum track size
     defaults to the content's intrinsic (max-content) width, so a wide
     table (Orders) or a long unbroken string could force the column
     wider than the viewport instead of wrapping/scrolling inside it.
     minmax(0, ...) lets the track actually shrink to the available
     space, which is what makes the overflow fixes below take effect. */
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
body.woocommerce-account.logged-in .page-content-body > .woocommerce {
  display: contents;
}
/* Explicit placement, not auto-flow: WooCommerce sometimes prints an
   invisible element before the nav (e.g. an empty notices wrapper).
   Auto-placement would then drop that empty item into cell (1,1),
   bump the nav into the wide 1fr column, and push the content card
   into a whole new row — exactly the "huge gap + swapped sizes" bug.
   Pinning nav/content to explicit grid cells sidesteps that no matter
   what invisible siblings WooCommerce injects. Descendant (not direct
   child) selector on purpose, since the `.woocommerce` wrapper above
   (when present) sits between .page-content-body and these elements
   in the DOM even though display:contents removes it visually. */
body.woocommerce-account.logged-in .page-content-body .woocommerce-MyAccount-navigation {
  grid-column: 1;
  grid-row: 1;
}
body.woocommerce-account.logged-in .page-content-body .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 1;
}
@media (max-width: 768px) {
  body.woocommerce-account.logged-in .page-content-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  /* Single-column layout on mobile — reset the explicit desktop
     placement above, or the nav/content would try to sit in a column
     2 that no longer exists. */
  body.woocommerce-account.logged-in .page-content-body .woocommerce-MyAccount-navigation,
  body.woocommerce-account.logged-in .page-content-body .woocommerce-MyAccount-content {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---------------------------------------------------------------------
   Logged-in account content (Dashboard, Orders, Downloads, Address,
   Edit Account) — WooCommerce ships this as bare unstyled text/tables,
   so it looked plain and inconsistent with the rest of the site. Wrap
   it in the same white-card language used everywhere else (product
   page, cart, login card) for a cohesive, professional look.
   --------------------------------------------------------------------- */
.woocommerce-MyAccount-content {
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--shadow-md);
  color: var(--text-muted);
  line-height: 1.7;
}
.woocommerce-MyAccount-content p {
  margin: 0 0 14px 0;
  overflow-wrap: break-word;
}
.woocommerce-MyAccount-content p:last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content strong { color: var(--text-dark); }
.woocommerce-MyAccount-content a:not(.button) {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content input[type="submit"] {
  background: var(--color-primary);
  color: #fff !important;
  border: none;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 700;
  cursor: pointer;
}
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--color-primary-dark);
}
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
}
.woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--color-gray-light);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
}
.woocommerce-MyAccount-content fieldset legend {
  padding: 0 10px;
  font-weight: 700;
  color: var(--text-dark);
}
.woocommerce-MyAccount-content .form-row label {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 6px;
}
.woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-MyAccount-content .form-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 1rem;
  margin-bottom: 16px;
}

/* Nav pill row: on mobile it scrolls horizontally rather than wrap —
   fade the trailing edge so a cut-off pill (e.g. "Addresses") reads as
   "scroll for more" instead of looking like a rendering glitch. */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    padding-right: 28px;
  }
  .woocommerce-MyAccount-content {
    padding: 22px 18px;
    border-radius: 18px;
  }
}
@media (max-width: 480px) {
  .woocommerce-MyAccount-content {
    padding: 18px 14px;
  }
  .woocommerce-MyAccount-content a.button,
  .woocommerce-MyAccount-content input[type="submit"] {
    width: 100%;
    text-align: center;
  }
}

/* Reduce the account page's own top spacing without touching the
   shared page.php template used by other pages (About, Contact,
   etc.) — those keep their existing 40px/40px spacing. */
body.woocommerce-account section[style*="padding: 40px"] {
  padding-top: 16px !important;
}
body.woocommerce-account .shop-header-bar {
  margin-bottom: 16px !important;
}

/* Whatever block the page content starts with (heading, paragraph,
   group, etc.) — kill its own default top margin so it doesn't stack
   on top of the spacing above. Safe/global: only affects the very
   first element's TOP margin, nothing else. */
.wawa-page-content > *:first-child {
  margin-top: 0 !important;
}

/* WooCommerce's own default stylesheet (still loaded — this theme
   only adds 'woocommerce' theme support, it doesn't disable core WC
   styles) ships legacy float-based layout for these two elements:
     .woocommerce-MyAccount-navigation { float:left; width:30%; }
     .woocommerce-MyAccount-content { float:left; width:68%; margin-left:2%; }
   Nothing above overrides those specific properties, so they leak
   through and fight the grid layout defined above — shrinking the
   nav, dropping the content out of its column, and killing the card
   styling. Hard-reset them here so the grid (or the mobile stacked
   layout) is the only thing controlling size/position. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--color-pink-soft);
  border-radius: 20px;
  padding: 10px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--text-dark);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--color-primary);
  color: #fff !important;
}

/* On mobile, the nav becomes a horizontal scrollable pill-row instead
   of a tall stacked list, so it doesn't eat the whole screen before
   the actual account content even appears. */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 0.9rem;
  }
}

.woocommerce-form-login, .woocommerce-form-register {
  background: var(--color-pink-soft);
  padding: 40px;
  border-radius: 32px;
  border: 1px solid var(--color-primary-light);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-form-login label, .woocommerce-form-register label {
  font-weight: 600;
  color: var(--text-dark);
}
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
  margin-bottom: 16px;
}
.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 1rem; /* 16px+ prevents iOS Safari auto-zoom on focus */
}
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"] {
  width: 100%;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none;
  border-radius: 14px;
  padding: 14px 24px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}
.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; }
.woocommerce a.woocommerce-LostPassword { color: var(--color-primary); }

/* Login/Register side-by-side columns collapse to stacked on mobile */
.u-columns.woocommerce-EditAccountForm, .u-columns.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 700px) {
  .u-columns.woocommerce-EditAccountForm, .u-columns.col2-set { grid-template-columns: 1fr; gap: 30px; }
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 480px) {
  .woocommerce-form-login, .woocommerce-form-register {
    padding: 18px 14px !important;
    border-radius: 18px;
  }
  /* If the account page content was built with nested Gutenberg
     Group/Container blocks (common when adding a custom "Welcome
     back" heading above the login form), those blocks' own default
     padding stacks with the form's padding and squeezes everything
     into a narrow column — this loosens that up on small screens. */
  body.woocommerce-account .wawa-page-content .wp-block-group,
  body.woocommerce-account .wawa-page-content [class*="elementor-widget-container"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* Star ratings / misc */
.woocommerce .star-rating span::before, .star-rating::before { color: #f0c419; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--color-primary);
  border-radius: 12px;
  background-color: var(--color-pink-soft) !important;
  color: var(--text-dark) !important;
  padding: 16px 20px 16px 50px !important;
  margin: 20px auto !important;
  max-width: 1200px;
  list-style: none;
  font-size: 0.95rem;
}
.woocommerce-message a.button, .woocommerce-info a.button {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 30px !important;
  padding: 8px 20px !important;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--color-primary); }
.woocommerce-error {
  border-top-color: var(--color-primary);
  border-radius: 12px;
}

/* Hide success/info confirmation banners ("Cart updated.", "X removed.
   Undo?", "X added to your cart.") — these only ever appear inside
   WooCommerce's notices wrapper. Actual errors (checkout validation,
   out-of-stock, payment failures) are NOT touched — those stay visible
   everywhere since hiding them would hide important, actionable
   information. The separate "Have a coupon?" / "Returning customer?"
   toggle boxes use .woocommerce-info too, but outside this wrapper,
   so they're unaffected. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
  display: none !important;
}

/* Static form pages (contact / franchise / distributor) */
.wawa-form-success {
  background: #e9f9ee;
  border: 1px solid #4caf50;
  color: #256029;
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 25px;
  font-weight: 600;
}
.wawa-outlet-tag {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wawa-outlet-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  padding: 30px;
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Shop page: pagination + WooCommerce ordering dropdown polish */
.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.page-numbers li { display: inline-block; }
.page-numbers a, .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 50%;
  background: var(--color-pink-soft);
  color: var(--text-dark);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-fast);
}
.page-numbers a:hover, .page-numbers .current {
  background: var(--color-primary);
  color: #fff;
}
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select.orderby {
  padding: 10px 16px;
  border-radius: 20px;
  border: 1px solid var(--color-primary-light);
  background-color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
}
.product-card-action-btn.loading { opacity: 0.6; pointer-events: none; }
.product-card-action-btn.added::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00c";
}

/* WooCommerce's own add-to-cart script auto-inserts a "View cart" link
   right after the button. Without this, it crams into the same flex
   row as the price + button and wraps awkwardly (as seen when the
   card is narrow, e.g. in a 2-column mobile grid). Making the price
   row wrap, and giving this link flex-basis:100%, pushes it onto its
   own full-width line below instead, styled as a clean pill. */
.product-card-price-row {
  flex-wrap: wrap;
}
.product-card-price-row .added_to_cart.wc-forward {
  flex-basis: 100%;
  order: 3;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  padding: 8px 14px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.35s ease, var(--transition-fast);
  opacity: 1;
}
.product-card-price-row .added_to_cart.wc-forward.wawa-view-cart-hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.product-card-price-row .added_to_cart.wc-forward:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.product-card-price-row .added_to_cart.wc-forward::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f07a"; /* fa-cart-shopping */
  font-size: 0.85rem;
}

/* Homepage bestsellers: force exact 4-column grid */
.bestsellers-section .woocommerce ul.products,
.bestsellers-section ul.products.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  float: none !important;
  width: 100% !important;
}
.bestsellers-section .woocommerce ul.products::before,
.bestsellers-section .woocommerce ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}
.bestsellers-section .woocommerce ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .bestsellers-section .woocommerce ul.products,
  .bestsellers-section ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 550px) {
  .bestsellers-section .woocommerce ul.products,
  .bestsellers-section ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .bestsellers-section .product-card {
    padding: 12px;
  }
  .bestsellers-section .product-card-name {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   CUSTOM LOGIN / REGISTER PAGE (My Account)
   ========================================================================== */
.woocommerce-account .entry-content,
.woocommerce-page.woocommerce-account main.main-content {
  padding-top: 76px;
}
.wawa-auth-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 24px 100px 24px;
}
.wawa-auth-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 50px auto;
}
.wawa-auth-eyebrow {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 2px;
}
.wawa-auth-intro h2 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 12px 0 14px 0;
}
.wawa-auth-intro p {
  color: var(--text-muted);
  line-height: 1.6;
}
.wawa-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.wawa-auth-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: 28px;
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.wawa-auth-card--accent {
  background: var(--color-pink-soft);
  border: 1px solid var(--color-primary-light);
}
.wawa-auth-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.wawa-auth-card-header i {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.wawa-auth-card-header h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}
.wawa-auth-card .form-row { margin-bottom: 18px; }
.wawa-auth-card label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.wawa-auth-card .required { color: var(--color-primary); }
.wawa-auth-card input.input-text {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-primary-light);
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: var(--color-white);
  box-sizing: border-box;
}
.wawa-auth-card input.input-text:focus {
  outline: none;
  border-color: var(--color-primary);
}
.wawa-auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
}
.wawa-auth-card button.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 13px 32px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition-fast);
}
.wawa-auth-card button.btn-primary:hover {
  background: var(--color-primary-dark);
}
.wawa-auth-forgot {
  margin-top: 18px;
  text-align: center;
}
.wawa-auth-forgot a {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 600;
}
.wawa-auth-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  border: 1px dashed var(--color-primary-light);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}
@media (max-width: 800px) {
  .wawa-auth-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   FIX: two older, more generic rulesets — one for default WooCommerce
   `.woocommerce-form-login`/`.woocommerce-form-register` styling, and
   one written specifically for the Checkout "returning customer" toggle
   box (which uses !important and was never scoped to the checkout
   page) — both still target the <form class="woocommerce-form-login">
   element itself. Since that form now lives *inside* our own
   `.wawa-auth-card`, their padding/background/border/border-radius
   stacked on top of the card's, producing a squeezed double-box look
   (smaller nested rounded rectangle inset inside the outer card) that
   got worse the narrower the screen. Neutralized here, scoped only to
   the auth-card context, so Checkout's own login-toggle box is
   untouched.
   --------------------------------------------------------------------- */
.wawa-auth-card .woocommerce-form-login,
.wawa-auth-card .woocommerce-form-register {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   Mobile tuning for the login/register page. Base desktop padding
   (70px top on .wawa-auth-wrap, 40px on .wawa-auth-card) is far too
   generous once the fixed header's own 76px offset and the section
   wrapper are added on top — on a phone that stack was eating half
   the first screen before the "Login" card even started, and the
   80px combined side padding (24px section + wide card padding) was
   squeezing the inputs into a narrow column. Tightened progressively
   at the same breakpoint tiers used elsewhere in the site.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Scoped to :not(.logged-in) — WordPress core already adds this body
     class automatically for signed-in users. Without this scope, the
     rule below (meant only for the logged-out login/register card,
     which supplies its own side padding via .wawa-auth-wrap) was also
     stripping the *logged-in* Dashboard/Orders/Downloads/Address view's
     only source of side padding, causing that content to run edge-to-
     edge and overflow the screen. */
  body.woocommerce-account:not(.logged-in) main.main-content > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wawa-auth-wrap {
    padding: 28px 16px 60px 16px;
  }
  .wawa-auth-intro {
    margin-bottom: 28px;
  }
  .wawa-auth-card {
    padding: 26px 20px;
    border-radius: 22px;
  }
  .wawa-auth-card-header {
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .wawa-auth-wrap {
    padding: 20px 12px 48px 12px;
  }
  .wawa-auth-card {
    padding: 22px 16px;
    border-radius: 18px;
  }
  .wawa-auth-card-header i {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 1rem;
  }
  .wawa-auth-card-header h3 {
    font-size: 1.25rem;
  }
  .wawa-auth-card .form-row {
    margin-bottom: 14px;
  }
  .wawa-auth-card input.input-text {
    padding: 12px 14px;
    font-size: 1rem; /* keep >=16px so iOS Safari doesn't auto-zoom on focus */
  }
  /* Remember-me + submit stack cleanly and the button goes full-width,
     matching how every other primary CTA on the site behaves on mobile
     (bakery product page's Add to Cart / Buy Now do the same). */
  .wawa-auth-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .wawa-auth-card button.btn-primary {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .wawa-auth-wrap {
    padding: 16px 10px 40px 10px;
  }
  .wawa-auth-card {
    padding: 18px 14px;
  }
}

/* Checkout: "Returning customer? Click here to login" + create account box */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce form.checkout_coupon,
.woocommerce-form-login-toggle .woocommerce-info {
  background: var(--color-pink-soft) !important;
  border-top-color: var(--color-primary) !important;
  border-radius: 14px !important;
  color: var(--text-dark) !important;
  padding: 16px 20px 16px 50px !important;
}
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--color-primary) !important;
  font-weight: 700;
  text-decoration: underline;
}
.woocommerce-form-login {
  background: var(--color-white) !important;
  border: 1px solid var(--color-primary-light) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  margin: 0 0 30px 0 !important;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order {
  background: var(--color-pink-soft);
  border-radius: 20px;
  padding: 24px;
}
.woocommerce-checkout .create-account {
  background: var(--color-pink-soft);
  border: 1px solid var(--color-primary-light);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 16px;
}
.woocommerce-checkout .create-account label {
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ==========================================================================
   MOBILE + LAPTOP RESPONSIVE OVERHAUL (Added)
   Fills gaps in the existing breakpoints above: fluid type, a polished
   slide-in mobile nav (overlay + icon swap + scroll lock, driven by
   main.js), a proper "small phone" tier below 480px, a laptop/tablet
   tuning tier around 992px, and mobile-friendly WooCommerce cart/table
   stacking. Loads after everything else so it safely overrides values
   set earlier in this file at the same breakpoints.
   ========================================================================== */

/* ---- Universal safety net: nothing should ever force horizontal scroll ---- */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

table { max-width: 100%; }

/* Any WooCommerce/plugin table we haven't explicitly restyled still gets a
   horizontal-scroll fallback instead of breaking the whole page layout. */
.woocommerce table:not(.shop_table_responsive-stacked) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Fluid typography (scales smoothly between phone and desktop instead
   of only jumping at fixed breakpoints) ---- */
.hero-title { font-size: clamp(1.9rem, 6vw + 0.5rem, 3.2rem); }
.menu-title,
.section-title { font-size: clamp(1.5rem, 4vw + 0.5rem, 2.2rem); }
.wawa-auth-intro h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }

/* Shared pattern used on Outlets / Franchise / Distributor / Contact page
   headers (inline style="font-size:2.8rem" in the PHP templates) */
.shop-title-area h2 {
  font-size: clamp(1.7rem, 6vw + 0.4rem, 2.8rem) !important;
}

/* ==========================================================================
   LAPTOP / TABLET TUNING TIER (~1440px down to 992px)
   Keeps things comfortable on smaller laptop screens before the existing
   1024px breakpoint kicks in.
   ========================================================================== */
@media (max-width: 1200px) {
  .header-container { padding: 14px 20px; }
  .hero-banner { padding: 70px 40px 120px 40px; }
}

@media (max-width: 992px) {
  .navbar { gap: 22px; }
  .nav-link { font-size: 0.9rem; }
}

/* ==========================================================================
   MOBILE NAV — overlay + icon swap + scroll lock
   Works with the updated assets/js/main.js (adds/removes `.nav-open` on
   <body> and toggles the hamburger icon between bars/xmark). Falls back
   gracefully to the old inline-style toggle if main.js isn't updated.
   ========================================================================== */
@media (max-width: 768px) {
  .header-container { position: relative; }

  .navbar {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    right: -85%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--color-white);
    padding: 90px 28px 28px 28px;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
    z-index: 1001;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
  }

  .navbar.active {
    display: flex;
    right: 0;
  }

  .navbar .nav-link {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-primary-light);
    font-size: 1.05rem;
    width: 100%;
  }

  /* Dark backdrop injected by main.js (id="nav-overlay") */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(44, 26, 17, 0.45);
    z-index: 1000;
  }

  .nav-overlay.active { display: block; }

  body.nav-open { overflow: hidden; }

  /* Hamburger -> X icon swap: main.js swaps the icon's own class between
     fa-bars and fa-xmark, this just adds a small rotate-in transition */
  .menu-mobile-btn {
    display: block;
    position: relative;
    z-index: 1002;
    width: 32px;
    height: 32px;
  }

  .menu-mobile-btn i { transition: transform 0.25s ease; }
  .menu-mobile-btn.is-active i { transform: rotate(90deg); }
}

/* ==========================================================================
   HERO PLATE CLUSTER — narrow-phone fit without breaking the design
   The 5 plate images keep their EXACT original sizes/positions (same as
   desktop/tablet — nothing about their layout changed here). On phones
   narrower than ~500px, the whole cluster is scaled down as ONE unit
   with transform: scale(), so every plate shrinks together and stays
   perfectly aligned relative to each other — just like a photo being
   resized, instead of each circle being resized independently (which
   is what broke the alignment before).

   The box's own reserved height (320px) shrinks by the SAME factor via
   the --hero-scale variable, and scaling is anchored at the top
   (transform-origin: top center) — otherwise the box keeps its full
   320px of layout space while the content inside visually shrinks,
   leaving dead red space above/below the plates. That leftover space
   is exactly what the categories section's fixed -70px pull-up was
   then cutting into, clipping the bottom plates.
   ========================================================================== */
@media (max-width: 500px) {
  .hero-visual-content {
    --hero-scale: clamp(0.62, calc(100vw / 480px), 1);
    height: calc(320px * var(--hero-scale));
    transform: scale(var(--hero-scale));
    transform-origin: top center;
  }
}

/* ==========================================================================
   SMALL PHONE TIER (< 380px — iPhone SE / small Android widths)
   ========================================================================== */
@media (max-width: 380px) {
  .header-container { padding: 12px 16px; }
  .logo-text-red { font-size: 1.5rem; }
  .logo-img { height: 56px !important; }
  .logo-tag { font-size: 0.55rem; padding: 2px 5px; }

  .hero-banner { padding: 50px 20px 90px 20px; border-radius: 0 0 50px 50px; }
  .hero-title { font-size: 1.7rem; }
  .hero-description { font-size: 0.9rem; }

  .menu-title { font-size: 1.35rem; }
  .categories-box { padding: 40px 16px 10px 16px; border-radius: 28px; }
  .category-card { padding: 18px 10px 16px 10px; }
  .category-card-plate { width: 84px; height: 84px; }
  .category-card h3 { font-size: 1.05rem; margin-bottom: 14px; }

  .section-title { font-size: 1.5rem; }
  .shop-title-area h2 { font-size: 1.6rem !important; }

  .btn { padding: 12px 20px; font-size: 0.85rem; }
}

/* ==========================================================================
   WOOCOMMERCE CART / TABLES — stack into cards on narrow phones instead
   of squeezing every column horizontally. WooCommerce core already
   outputs a `data-title` attribute on every <td>, so no PHP template
   changes are needed for the labels below.
   ========================================================================== */
@media (max-width: 600px) {
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody {
    display: block;
    width: 100%;
  }

  .woocommerce table.shop_table thead { display: none; }

  /* Kill WooCommerce core's own built-in responsive-table labels
     ("Product:", "Quantity:", "Subtotal:") — those come from WC's
     own bundled stylesheet (triggered by the .shop_table_responsive
     class), independent of our theme CSS, and were showing up
     alongside our custom card layout. */
  .woocommerce table.shop_table td::before {
    content: none !important;
  }

  /* Item rows (thumbnail/name/qty/subtotal) — NOT the coupon/actions
     row, which gets its own layout further below. */
  .woocommerce table.shop_table tr:not(:has(td.actions)) {
    display: grid !important;
    grid-template-columns: 68px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb qty"
      "thumb subtotal";
    column-gap: 12px;
    row-gap: 8px;
    width: 100%;
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    position: relative;
  }

  .woocommerce table.shop_table tr:not(:has(td.actions)) td {
    display: block;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    text-align: left !important;
  }

  .woocommerce table.shop_table td.product-thumbnail {
    grid-area: thumb;
    align-self: start;
  }
  .woocommerce table.shop_table td.product-thumbnail img {
    width: 62px !important;
    height: 62px !important;
    max-width: none !important;
    display: block !important;
    border-radius: 10px;
  }

  .woocommerce table.shop_table td.product-name {
    grid-area: name;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.4;
    padding-right: 34px !important;
    align-self: start;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .woocommerce table.shop_table td.product-price {
    display: none !important; /* shown as part of the subtotal line instead, to save space */
  }

  .woocommerce table.shop_table td.product-quantity {
    grid-area: qty;
  }
  .woocommerce table.shop_table td.product-quantity .quantity {
    display: inline-flex;
  }

  .woocommerce table.shop_table td.product-subtotal {
    grid-area: subtotal;
    font-weight: 800;
    color: var(--color-primary);
    font-size: 1rem;
  }

  .woocommerce table.shop_table td.product-remove {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .woocommerce table.shop_table td.product-remove a.remove {
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    font-size: 0.85rem !important;
  }

  /* Coupon / actions row — left in normal block flow (not the item
     grid), stacked and full-width for easy mobile tapping. */
  .woocommerce table.shop_table tr:has(td.actions) {
    display: block !important;
    border: none;
    padding: 0;
    margin-bottom: 0;
  }
  .woocommerce table.shop_table td.actions {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px;
  }
  .woocommerce table.shop_table td.actions .coupon {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .woocommerce table.shop_table td.actions .coupon .input-text {
    width: 100%;
    box-sizing: border-box;
    margin-right: 0 !important;
  }
  .woocommerce table.shop_table td.actions .button {
    width: 100%;
  }

  .wc-proceed-to-checkout a.checkout-button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .woocommerce table.shop_table tr:not(:has(td.actions)) {
    grid-template-columns: 64px 1fr;
    padding: 12px;
  }
  .woocommerce table.shop_table td.product-thumbnail img {
    width: 60px !important;
    height: 60px !important;
  }
  .woocommerce table.shop_table td.product-name {
    font-size: 0.85rem;
    padding-right: 30px !important;
  }
  .woocommerce table.shop_table td.product-subtotal {
    font-size: 0.95rem;
  }
}

/* =======================================================================
   QUICK "CHOOSE OPTIONS" MODAL
   Used when a variable product's cart-icon button is clicked on the
   shop grid (or related-products, etc). Reuses the .wawa-variation-*
   and .wawa-qty-* classes already defined for the single product page.
   ======================================================================= */
body.wawa-modal-open {
  overflow: hidden;
}

.wawa-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wawa-modal[hidden] {
  display: none;
}
.wawa-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 26, 17, 0.55);
  backdrop-filter: blur(2px);
}
.wawa-modal-panel {
  position: relative;
  background: var(--color-white);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px;
}
.wawa-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-gray-light);
  color: var(--text-dark);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}
.wawa-modal-close:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.wawa-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  font-size: 2rem;
  color: var(--color-primary);
}
.wawa-modal-content[hidden] {
  display: none;
}
.wawa-modal-product-img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  margin: 0 auto 20px auto;
  background: var(--color-gray-light);
}
.wawa-modal-product-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 20px 0;
  text-align: center;
}

/* The injected form is WooCommerce's own variable.php template output —
   strip its default table/box chrome so it sits cleanly inside the
   modal instead of looking like a nested widget. */
.wawa-modal-form-wrap table.variations,
.wawa-modal-form-wrap .woocommerce-variation-price,
.wawa-modal-form-wrap .reset_variations {
  display: none;
}
.wawa-modal-form-wrap .woocommerce-variation {
  margin: 8px 0 20px 0;
  min-height: 24px;
  font-weight: 700;
  color: var(--color-primary);
}
.wawa-modal-form-wrap .quantity {
  margin-bottom: 20px;
}
.wawa-modal-form-wrap .single_add_to_cart_button {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.wawa-modal-form-wrap .single_add_to_cart_button:hover {
  background: var(--color-primary-dark);
}
.wawa-modal-form-wrap .single_add_to_cart_button.disabled,
.wawa-modal-form-wrap .single_add_to_cart_button.wc-variation-selection-needed {
  background: var(--color-gray-light);
  color: var(--text-muted);
  cursor: not-allowed;
}
.wawa-modal-form-wrap .single_add_to_cart_button.loading {
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 600px) {
  .wawa-modal {
    padding: 16px;
    align-items: flex-end;
  }
  .wawa-modal-panel {
    max-width: none;
    width: 100%;
    max-height: 82vh;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px;
  }
  .wawa-modal-product-img {
    max-width: 160px;
  }
}