/*
  ██╗    ██╗ █████╗ ██╗  ████████╗███████╗    ███████╗████████╗ ██████╗ ██████╗ ███████╗
  ██║    ██║██╔══██╗██║  ╚══██╔══╝╚══███╔╝    ██╔════╝╚══██╔══╝██╔═══██╗██╔══██╗██╔════╝
  ██║ █╗ ██║███████║██║     ██║     ███╔╝     ███████╗   ██║   ██║   ██║██████╔╝█████╗
  ██║███╗██║██╔══██║██║     ██║    ███╔╝      ╚════██║   ██║   ██║   ██║██╔══██╗██╔══╝
  ╚███╔███╔╝██║  ██║███████╗██║   ███████╗    ███████║   ██║   ╚██████╔╝██║  ██║███████╗
   ╚══╝╚══╝ ╚═╝  ╚═╝╚══════╝╚═╝   ╚══════╝    ╚══════╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝
                      AIRMIN EXACT COPY - CORRECT PROPORTIONS 57%/43%
  */

  /* ========================================================================
     🎨 SECTION 1: COLORS AND VARIABLES LIKE IN AIRMIN
  ======================================================================== */

  :root {
    --primary-black: #0e0d0d;
    --secondary-gray: #6B7280;
    --light-gray: #F3F4F6;
    --pure-white: #ffffff;
    --accent-black: #1F2937;
    --border-light: #E5E7EB;
    --hover-gray: #F9FAFB;
    --text-light: #9CA3AF;


    --container-width: 1700px;
    --header-height: 70px;
    --border-radius: 0;
    --border-radius-sm: 0;


    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --spacing-xxl: 80px;


    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 10px 25px rgba(0, 0, 0, 0.1);
    --transition: all 0.2s ease;
  }

  /* ========================================================================
     🧹 SECTION 2: STYLE RESET
  ======================================================================== */

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

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    background: var(--pure-white);
    color: var(--primary-black);
    line-height: 1.5;
    min-height: 100vh;
    font-size: 16px;
  }

  .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 25px;
    width: 100%;
  }

  main {
    margin-top: var(--header-height);
  }

  /* ========================================================================
     🔝 SECTION 3: HEADER LIKE IN AIRMIN - CORRECTED
  ======================================================================== */

  header {
    background: var(--pure-white);
    color: var(--primary-black);
    height: var(--header-height);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(10px);
  }

  nav {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 25px;
    padding-right: 25px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  /* LOGO - ENLARGED AND BOLDER */
  .logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-black);
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: -0.02em;
  }

  .logo:hover {
    opacity: 0.7;
  }

  /* MENU - FURTHER LEFT FROM CENTER AND BIGGER FONT */
  .nav-links {
    position: absolute;
    left: 32%;
    transform: translateX(-50%);
    display: flex;
    list-style: none;
    gap: 48px;
  }

  .nav-links a {
    color: var(--secondary-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 0;
    transition: var(--transition);
  }

  .nav-links a:hover {
    color: var(--primary-black);
  }

  /* CART */
  .cart-btn {
    background: var(--primary-black);
    color: var(--pure-white);
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
  }

  .cart-btn:hover {
    background: var(--accent-black);
  }

  .cart-count {
    background: var(--primary-black);
    color: var(--pure-white);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -6px;
  }
  :root {
    --primary-black: #0e0d0d;
    --secondary-gray: #6B7280;
    --light-gray: #F3F4F6;
    --pure-white: #ffffff;
    --accent-black: #1F2937;
    --border-light: #E5E7EB;
    --hover-gray: #F9FAFB;
    --text-light: #9CA3AF;

    /* AIRMIN SIZES */
    --container-width: 1700px;
    --header-height: 70px;
    --border-radius: 0;
    --border-radius-sm: 0;

    /* AIRMIN MARGINS */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --spacing-xxl: 80px;

    /* EFFECTS */
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 10px 25px rgba(0, 0, 0, 0.1);
    --transition: all 0.2s ease;
  }

  /* ========================================================================
     🧹 SECTION 2: STYLE RESET
  ======================================================================== */

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

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    background: var(--pure-white);
    color: var(--primary-black);
    line-height: 1.5;
    min-height: 100vh;
    font-size: 16px;
  }

  .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 25px;
    width: 100%;
  }

  main {
    margin-top: var(--header-height);
  }

  /* ========================================================================
     🔝 SECTION 3: HEADER LIKE IN AIRMIN - CORRECTED
  ======================================================================== */

  header {
    background: var(--pure-white);
    color: var(--primary-black);
    height: var(--header-height);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(10px);
  }

  nav {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 25px;
    padding-right: 25px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  /* LOGO - ENLARGED AND BOLDER */
  .logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-black);
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: -0.02em;
  }

  .logo:hover {
    opacity: 0.7;
  }

  /* MENU - FURTHER LEFT FROM CENTER AND BIGGER FONT */
  .nav-links {
    position: absolute;
    left: 32%;
    transform: translateX(-50%);
    display: flex;
    list-style: none;
    gap: 48px;
  }

  .nav-links a {
    color: var(--secondary-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 0;
    transition: var(--transition);
  }

  .nav-links a:hover {
    color: var(--primary-black);
  }

  /* CART */
  .cart-btn {
    background: var(--primary-black);
    color: var(--pure-white);
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
  }

  .cart-btn:hover {
    background: var(--accent-black);
  }

  .cart-count {
    background: var(--primary-black);
    color: var(--pure-white);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -6px;
  }

  /* ========================================================================
     🎯 SECTION 4: HERO LIKE IN AIRMIN - CORRECT PROPORTIONS 57%/43%
  ======================================================================== */

  .hero {
    padding: 0;
    background: var(--pure-white);
  }

  .hero-showcase {
    padding: 0;
  }

  /* STANDARD VERSION (WITHOUT FULLSIZE) */
  .showcase-content {
    display: grid;
    grid-template-columns: 57% 43%;
    gap: 0;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 0;
    min-height: 70vh;
  }

  /* FULLSCREEN VERSION */
  .hero-showcase.with-fullsize {
    position: relative;
    overflow: hidden;
    min-height: 85vh;
    padding: 0;
  }

  .hero-showcase.with-fullsize .showcase-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 57% 43%;
    gap: 40px;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 110px;
    min-height: 70vh;
  }

  /* TEXT ON THE LEFT */
  .showcase-info {
    padding: 0;
    padding-right: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    order: 1;
  }

  .hero-showcase.with-fullsize .showcase-info {
    padding: 0;
    padding-right: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    order: 1;
    align-self: center;
  }

  .info-header {
    margin-bottom: 0;
  }

  /* "PREMIUM" BADGE */
  .category-badge {
    background: var(--light-gray);
    color: var(--secondary-gray);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 20px;
    width: fit-content;
  }

  /* TITLE */
  .showcase-info h1 {
    font-size: 5rem;
    font-weight: 750;
    color: var(--primary-black);
    line-height: 1.02;
    margin-bottom: 24px;
    letter-spacing: -0.04em;
    max-width: 95%;
  }

  /* DESCRIPTION */
  .main-description {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 90%;
    font-weight: 400;
  }

  /* "CHOOSE TEAPOT" BUTTON */
  .main-cta {
    background: var(--primary-black);
    color: var(--pure-white);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 40px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    transition: var(--transition);
    align-self: flex-start;
    width: fit-content;
    margin-top: 12px;
  }

  .main-cta:hover {
    background: var(--accent-black);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .cta-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
  }

  .main-cta:hover .cta-icon {
    transform: translateX(3px);
  }

  /* REMOVE UNNECESSARY ELEMENTS */
  .features-grid,
  .cta-note {
    display: none;
  }

  /* STANDARD IMAGE (WITHOUT FULLSIZE) */
  .showcase-image-bg {
    position: relative;
    height: 500px;
    width: 100%;
    order: 2;
    background-image: url('/img/hero-teapots.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
  }

  /* FULLSCREEN IMAGE */
  .showcase-image-bg.fullsize {
    position: absolute !important;
    right: 0;
    top: 0;
    bottom: 0;
    height: 85vh;
    width: 43vw;
    order: 2;
    z-index: 1;
    background-image: url('/img/hero-teapots.png');
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* ========================================================================
     ⭐ SECTION 5: AIRMIN CARDS - EXACT COPY
  ======================================================================== */
  .featured {
    padding: 100px 0 40px 0; /* Smaller bottom margin, was 120px */
    background: #F8F9FA;
  }

  .section-title {
    text-align: center;
    font-size: 4.5rem;
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 40px;
    letter-spacing: -0.03em;
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; /* INCREASED: larger spacing between cards */
    max-width: 1800px; /* INCREASED: wider container */
    margin: 0 auto;
  }

  .products-catalog .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns only in catalog */
    gap: 30px;
    max-width: 1800px;
    margin: 0 auto;
  }





  /* AIRMIN CARDS - ENLARGED */
  .product-card {
    background: var(--pure-white);
    border-radius: 20px; /* INCREASED: more rounding */
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    transition: none;
    box-shadow: none;
    border: none;
    min-height: 700px; /* INCREASED: bigger height */
    position: relative;
  }


  .products-catalog .products-grid .product-card {
    background: var(--pure-white);
    border-radius: 20px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-height: 280px; /* Reduced height */
  }


  .products-catalog .products-grid .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  /* IMAGE */
  .products-catalog .products-grid .product-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
  }


  .products-catalog .products-grid .product-image img {
    width: 85%;
    height: 85%;
    object-fit: contain;
  }

  /* TEXT UNDER CARD */
  .products-catalog .product-text {
    text-align: center;
    margin-top: 15px;
  }

  .products-catalog .product-text h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 8px;
    line-height: 1.3;
    cursor: pointer; /* Show that it's clickable */
  }

  .products-catalog .product-text h3:hover {
    color: var(--secondary-gray); /* Color change on hover */
    text-decoration: underline; /* Underline on hover */
  }

  .products-catalog .product-text .product-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-black);
  }

  /* INFORMATION */
  .products-catalog .products-grid .product-info {
    padding: 20px;
  }

  .products-catalog .products-grid .product-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .products-catalog .products-grid .product-price {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 15px;
  }

  .products-catalog .products-grid .add-to-cart {
    width: 100%;
    background: var(--primary-black);
    color: var(--pure-white);
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
  }

  .products-catalog .products-grid .add-to-cart:hover {
    background: var(--accent-black);
    transform: translateY(-1px);
  }


  .product-card:hover {
    transform: none;
    box-shadow: none;
  }

  .homepage-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* IMAGE TAKES UP MOST OF THE CARD */
  .product-image {
    width: 100%;
    height: 85%;
    background: var(--pure-white);
    border-radius: 32px 32px 0 0; /* INCREASED: matches card */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 0;
    border: none;
  }

  .product-image img {
    width: 90%; /* INCREASED: larger image */
    height: 90%; /* INCREASED: larger image */
    object-fit: contain;
    transition: opacity 0.3s ease;
  }

  /* SMOOTH IMAGE TRANSITIONS */
  .homepage-product-img {
    width: 110%;
    height: 110%;
    object-fit: cover; /* Fills entire container */
    object-position: center;
    border-radius: 20px;
    transition: opacity 0.3s ease;
    transform: scale(1.2); /* Enlargement via transform */
  }

  .product-image.emoji {
    font-size: 7rem; /* INCREASED: larger emoji */
    color: var(--secondary-gray);
  }

  /* INFORMATION AT BOTTOM OF CARD */
  .product-info {
    padding: 25px 35px 35px 35px; /* INCREASED: larger margins */
    text-align: left;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    height: 25%;
    background: var(--pure-white);
  }

  .homepage-card .product-title {
    font-size: 1.4rem; /* INCREASED: larger font */
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 10px; /* INCREASED: larger margin */
    line-height: 1.3;
    display: block !important;
  }

  .homepage-card .product-price {
    font-size: 1.2rem; /* INCREASED: larger font */
    font-weight: 500;
    color: var(--secondary-gray);
    display: block !important;
  }

  .homepage-card .product-image {
    height: 100%; /* Full height of card */
    border-radius: 20px 20px 0 0; /* Like the card */
  }


  .homepage-card .product-info {
    height: 20%; /* Less space for text */
    padding: 15px 25px 25px 25px;
  }

  /* HIDE UNNECESSARY ON HOMEPAGE */
  .homepage-card .product-category,
  .homepage-card .product-description,
  .homepage-card .product-rating,
  .homepage-card .add-to-cart {
    display: none !important;
  }



  .view-all-section {

      padding: 0 0 150px 0; /* Less from top */

      background: #F8F9FA;
      text-align: center;
  }

  .view-all-btn {
      background: var(--primary-black);
      color: var(--pure-white);
      border: none;
      padding: 24px 60px;
      border-radius: 60px;
      font-size: 1.3rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .view-all-btn:hover {
      background: var(--accent-black);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }







  /* ========================================================================
     📄 SECTION 6: CATALOG AND PRODUCT PAGES
  ======================================================================== */

  .breadcrumbs {
    background: var(--light-gray);
    border-radius: 6px;
    color: var(--secondary-gray);
    font-size: 0.9rem;
    border: 1px solid var(--border-light);
    padding: 12px 16px;
    margin-bottom: 24px;
  }

  .breadcrumbs a {
    color: var(--primary-black);
    text-decoration: none;
    transition: var(--transition);
  }

  .breadcrumbs a:hover {
    opacity: 0.7;
  }

  .product-section {
    background: var(--pure-white);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    padding: 40px;
    margin: 20px 0;
  }

  .product-content {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 60px;
    align-items: start;
    max-width: var(--container-width);
    margin: 0 auto;
  }

  .main-image {
    height: 500px;
    background: var(--light-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: var(--secondary-gray);
    border: 1px solid var(--border-light);
  }

  .main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .image-thumbnails {
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }

  .thumbnail {
    width: 80px;
    height: 80px;
    background: var(--light-gray);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
  }

  .thumbnail:hover,
  .thumbnail.active {
    border-color: var(--primary-black);
  }

  .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .product-options {
    margin-bottom: 24px;
  }

  .option-group {
    margin-bottom: 16px;
  }

  .option-label {
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 8px;
    display: block;
  }

  .option-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .option-btn {
    padding: 8px 16px;
    border: 2px solid var(--border-light);
    background: var(--pure-white);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
  }

  .option-btn:hover {
    border-color: var(--primary-black);
    background: var(--light-gray);
  }

  .option-btn.active {
    border-color: #007bff !important;
    background: #007bff !important;
    color: var(--pure-white) !important;
  }

  .quantity-selector {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
  }

  .quantity-controls {
    display: flex;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
  }

  .quantity-btn {
    background: var(--light-gray);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    width: 40px;
  }

  .quantity-btn:hover {
    background: var(--hover-gray);
  }

  .quantity-input {
    border: none;
    padding: 8px;
    text-align: center;
    width: 60px;
    font-size: 1rem;
    background: var(--pure-white);
  }

  .action-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
  }

  .add-to-cart-btn {
    flex: 2;
    background: var(--primary-black);
    color: var(--pure-white);
    border: none;
    padding: 16px 32px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
  }

  .add-to-cart-btn:hover {
    background: var(--accent-black);
    transform: translateY(-2px);
  }

  .buy-now-btn {
    flex: 1;
    background: var(--pure-white);
    color: var(--primary-black);
    border: 2px solid var(--primary-black);
    padding: 16px 32px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
  }

  .buy-now-btn:hover {
    background: var(--primary-black);
    color: var(--pure-white);
  }

  .product-details {
    background: var(--pure-white);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    margin-top: 32px;
    margin-bottom: 80px !important;
  }

  .details-tabs {
    display: flex;
    background: var(--light-gray);
    border-radius: 8px 8px 0 0;
  }

  .tab-btn {
    flex: 1;
    padding: 16px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    color: var(--secondary-gray);
  }

  .tab-btn.active {
    background: var(--pure-white);
    color: var(--primary-black);
  }

  .tab-content {
    padding: 32px;
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  .specs-table {
    width: 100%;
    border-collapse: collapse;
  }

  .specs-table th,
  .specs-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
  }

  .specs-table th {
    background: var(--light-gray);
    font-weight: 600;
  }

  .review {
    padding: 24px;
    border-bottom: 1px solid var(--border-light);
  }

  .review:last-child {
    border-bottom: none;
  }

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

  .reviewer-name {
    font-weight: 600;
    color: var(--primary-black);
  }

  .review-date {
    color: var(--secondary-gray);
    font-size: 0.9rem;
  }

  .review-rating {
    color: #FCD34D;
    margin-bottom: 8px;
  }

  .review-text {
    color: var(--secondary-gray);
    line-height: 1.6;
  }

  /* ========================================================================
     📄 SECTION 7: CATALOG
  ======================================================================== */

  .catalog-header {
    text-align: center;
    padding: 80px 0;
    background: var(--pure-white);
  }

  .catalog-header h1 {
    font-size: 2.5rem;
    color: var(--primary-black);
    margin-bottom: 16px;
    font-weight: 700;
  }

  .catalog-header p {
    font-size: 1.1rem;
    color: var(--secondary-gray);
  }

  .filters {
    background: var(--pure-white);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    padding: 24px;
    margin-bottom: 32px;
  }

  .filter-group {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
  }

  .filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .filter-item label {
    font-weight: 600;
    color: var(--primary-black);
    font-size: 0.9rem;
  }

  .filter-item select,
  .filter-item input {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--pure-white);
  }

  .search-input {
    flex: 1;
    min-width: 200px;
  }

  .price-display {
    background: var(--primary-black);
    color: var(--pure-white);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 8px;
    display: inline-block;
  }

  .catalog-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 16px;
    background: var(--pure-white);
    border-radius: 6px;
    border: 1px solid var(--border-light);
  }

  .results-info {
    color: var(--primary-black);
    font-size: 0.95rem;
  }

  .view-toggle {
    display: flex;
    gap: 8px;
  }

  .view-btn {
    background: var(--pure-white);
    border: 2px solid var(--border-light);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .view-btn:hover {
    border-color: var(--primary-black);
  }

  .view-btn.active {
    background: var(--primary-black);
    border-color: var(--primary-black);
    color: var(--pure-white);
  }



  .products-grid:not(.homepage-grid) .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    border-color: var(--secondary-gray);
  }





  .products-grid:not(.homepage-grid) .product-category {
    color: var(--secondary-gray);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
    display: block;
  }

  .products-grid:not(.homepage-grid) .product-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 12px;
    line-height: 1.3;
  }

  .products-grid:not(.homepage-grid) .product-description {
    color: var(--secondary-gray);
    margin-bottom: 20px;
    line-height: 1.5;
    font-size: 0.9rem;
    display: block;
  }

  .products-grid:not(.homepage-grid) .product-rating {
    display: none;
  }

  .products-grid:not(.homepage-grid) .product-price {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 20px;
  }

  .products-grid:not(.homepage-grid) .add-to-cart {
    width: 100%;
    background: var(--primary-black);
    color: var(--pure-white);
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
    font-size: 0.9rem;
    display: block;
  }

  .products-grid:not(.homepage-grid) .add-to-cart:hover {
    background: var(--accent-black);
    transform: translateY(-1px);
  }

  .products-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .products-grid.list-view .product-card {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 24px;
    padding: 24px;
    align-items: center;
    aspect-ratio: auto;
  }

  .products-grid.list-view .product-image {
    height: 150px;
    margin-bottom: 0;
  }

  .products-grid.list-view .product-info {
    padding: 0;
  }

  .products-grid.list-view .product-price {
    margin-bottom: 0;
    text-align: right;
    font-size: 1.6rem;
  }

  .products-grid.list-view .add-to-cart {
    width: auto;
    padding: 8px 20px;
  }

  .loading,
  .no-results {
    text-align: center;
    padding: 60px;
    color: var(--secondary-gray);
    font-size: 1.1rem;
  }

  /* ========================================================================
     🛒 SECTION 8: CART
  ======================================================================== */

  .cart-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    backdrop-filter: blur(4px);
  }

  .cart-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--pure-white);
    padding: 32px;
    border-radius: 8px;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-heavy);
  }

  .close-cart {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--secondary-gray);
  }

  .cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
  }

  .cart-total {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: right;
    margin-top: 20px;
    color: var(--primary-black);
  }

  .checkout-btn {
    width: 100%;
    background: var(--primary-black);
    color: var(--pure-white);
    border: none;
    padding: 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 20px;
    font-size: 1rem;
    transition: var(--transition);
  }

  .checkout-btn:hover {
    background: var(--accent-black);
  }

  /* ========================================================================
     🦶 SECTION 9: FOOTER
  ======================================================================== */

  footer {
    background: var(--pure-white);
    color: var(--secondary-gray);
    padding: 120px 0 40px;
    margin-top: 100px;
    border-top: 1px solid var(--border-light);
  }

  /* Extra margin for product page */
  .product-page-wrapper {
    margin-bottom: 20px !important; /* - margin-bottom - отступ снаружи элемента (между элементом и футером) */
    padding-bottom: 5px !important;/*  - padding-bottom - отступ внутри элемента (пустое место внутри страницы) */
  }

  .product-page-wrapper + footer {
    margin-top: 10px;
  }

  .footer-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
    align-items: start;
  }

  .footer-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .footer-section h3 {
    color: var(--primary-black);
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 600;
    height: auto;
    line-height: 1.3;
  }

  .footer-section p {
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 0.9rem;
  }

  .footer-section a {
    color: var(--secondary-gray);
    text-decoration: none;
    transition: var(--transition);
  }

  .footer-section a:hover {
    color: var(--primary-black);
  }

  .footer-bottom {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px 25px 0;
    border-top: 1px solid var(--border-light);
    text-align: center;
    color: var(--secondary-gray);
    font-size: 0.85rem;
  }

  /* ========================================================================
     🎊 SECTION 10: PREMIUM BANNER LIKE IN AIRMIN - EXACT COPY
  ======================================================================== */



  .featured-banner {
    padding: 0;
    background: #19191b;
    color: var(--primary-black);

    overflow: hidden; /* ADDED: so image can overflow boundaries */
    margin-top: 0; /* Remove top banner margin */

  }

  .banner-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    max-width: none; /* CHANGED: remove width limitation */
    margin: 0;
    min-height: 100vh;
    position: relative;
    width: 100vw; /* ADDED: full screen width */

  }

  /* LEFT PART - IMAGE WITHOUT MARGINS */
  .banner-image {
    position: relative;
    height: 80vh;
    width: 50vw; /* CHANGED: exactly half screen */
    order: 1;
    margin: 0; /* REMOVE all margins */
    padding: 0; /* REMOVE all paddings */
    border-radius: 12px;
    overflow: hidden; /* Add to clip content */
  }


  /* ADD MARGIN THROUGH ::before */
  .banner-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((100vw - 1700px) / 2 + 15px);
    right: 0;
    bottom: 0;
    background-image: url('/img/teapots/banner2.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 12px; /* Add radius directly to image */
  }

  /* RIGHT PART - TEXT WITH CORRECT MARGINS */
  .banner-text {
    padding: 100px 0 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2;
    height: 100%;
    max-width: 600px;
    margin: 0 auto; /* Center in its column */
    width: 50vw; /* ADDED: exactly half screen */
    box-sizing: border-box;

  }

  .banner-text h2 {
    font-size: 3.5rem; /* CHANGED: larger like in Airmin */
    font-weight: 550;
    color: var(--pure-white); /* CHANGED: white text */
    margin-bottom: 24px;
    line-height: 1.1; /* CHANGED: tighter */
    letter-spacing: -0.02em;
    text-align: center;
  }

  .banner-text p {
    font-size: 1.25rem; /* CHANGED: larger */
    color: #CCCCCC; /* CHANGED: light gray for readability on dark background */
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 100%;
  }

  .banner-features {
    display: flex;
    flex-direction: column;
    gap: 16px; /* CHANGED: smaller gap */
    margin-bottom: 50px;
  }

  .feature-item {
    display: flex;
    align-items: center;
    gap: 12px; /* CHANGED: smaller gap */
    font-weight: 500;
    color: var(--pure-white);
    font-size: 1rem;
  }

  .feature-icon {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
  }

  .banner-cta {
    background: #ffffff; /* CHANGED: blue like in Airmin */
    color: var(--pure-white);
    border: none;
    padding: 16px 32px; /* CHANGED: like in Airmin */
    border-radius: 36px; /* CHANGED: less rounding */
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    width: fit-content;
    align-self: center; /* Button centering */
  }

  .banner-text .banner-cta {
    color: #19191b; /* White text only for button in banner-text */
  }


  .banner-cta:hover {
    background: #ffffff; /* CHANGED: darker blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(195, 171, 171, 0.2);
  }

  /* MINI PRODUCTS AT BOTTOM */
  .banner-products {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #E5E7EB; /* CHANGED: light border */
  }

  .mini-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Preserves proportions */
    border-radius: 8px; /* Small rounding */
  }


  .mini-product {
    margin: 10px;
    padding: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 12px;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
  }

  .mini-product:hover {
    transform: translateY(-2px); /* Reduced lift */
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    /* Remove box-shadow or make smaller */
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
  }

  .mini-product-image {
    width: 120px; /* CHANGED: smaller */
    height: 120px;
    background: #F3F4F6; /* CHANGED: light background */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  .mini-product-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 4px;
  }

  .mini-product-desc {
    font-size: 0.8rem;
    color: #666666; /* CHANGED: gray */
  }

  .promo-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
  }

  .promo-circle {
    width: 150px;
    height: 150px;
    background: var(--primary-black);
    color: var(--pure-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
  }

  .floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .floating-icon {
    position: absolute;
    font-size: 2rem;
    animation: float 3s ease-in-out infinite;
    animation-delay: var(--delay);
  }

  .floating-icon:nth-child(1) {
    top: 20%;
    left: 10%;
  }

  .floating-icon:nth-child(2) {
    top: 60%;
    right: 20%;
  }

  .floating-icon:nth-child(3) {
    bottom: 20%;
    left: 20%;
  }

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

  .product-container {

      width: 100%;
  }

  .product-text {
      text-align: center;
      margin-top: 20px;
      padding: 0 20px;
        width: 100%;
  }

  .product-text h3 {
      font-size: 1.5rem;
      font-weight: 500;
      color: var(--primary-black);
      line-height: 1.4;
        margin-bottom: 8px; /* Margin between title and price */
  }

  .product-text .product-price {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--secondary-gray);
  }
  /* ========================================================================
     📱 SECTION 11: MOBILE VERSION
  ======================================================================== */

  /* ========================================================================
     📞 SECTION 11.5: CONTACT HIGHLIGHT ANIMATION
  ======================================================================== */

  .contact-highlight {
    animation: contactHighlightPulse 3s ease-in-out;
    transform-origin: center;
  }

  @keyframes contactHighlightPulse {
    0% {
      background: transparent;
      transform: scale(1);
      box-shadow: none;
    }
    10% {
      background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
    }
    20% {
      background: linear-gradient(135deg, rgba(0, 123, 255, 0.15) 0%, rgba(0, 123, 255, 0.08) 100%);
      transform: scale(1.08);
      box-shadow: 0 0 30px rgba(0, 123, 255, 0.4);
    }
    40% {
      background: linear-gradient(135deg, rgba(0, 123, 255, 0.12) 0%, rgba(0, 123, 255, 0.06) 100%);
      transform: scale(1.05);
      box-shadow: 0 0 25px rgba(0, 123, 255, 0.35);
    }
    60% {
      background: linear-gradient(135deg, rgba(0, 123, 255, 0.08) 0%, rgba(0, 123, 255, 0.04) 100%);
      transform: scale(1.03);
      box-shadow: 0 0 15px rgba(0, 123, 255, 0.25);
    }
    80% {
      background: linear-gradient(135deg, rgba(0, 123, 255, 0.04) 0%, rgba(0, 123, 255, 0.02) 100%);
      transform: scale(1.01);
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.15);
    }
    100% {
      background: transparent;
      transform: scale(1);
      box-shadow: none;
    }
  }

  /* Enhanced styling for contact section */
  #contact-section {
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 0;
    margin: 0;
  }

  #contact-section h3 {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
  }

  /* Smooth scrolling for all anchor links */
  html {
    scroll-behavior: smooth;
  }

  /* ========================================================================
     🚨 SECTION 12: 404 AND ADDITIONAL ELEMENTS
  ======================================================================== */

  .error-404 {
    display: table-cell;
    vertical-align: middle;
    margin: 2em auto;
    text-align: center;
    color: var(--secondary-gray);
  }

  .error-404 h1 {
    color: var(--primary-black);
    font-size: 2em;
    font-weight: 600;
  }

  .error-404 p {
    margin: 0 auto;
    width: 280px;
  }

  /* Additional styles for different image variants */
  .showcase-image.background-style {
    background-image: url('img/hero-teapots.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .showcase-image.large-style {
    height: 600px;
  }

  .showcase-image.full-height {
    height: auto;
    min-height: 580px;
    align-self: stretch;
  }


  /* ========================================================================
     🎊 FINAL VERSION WITH AIRMIN CARDS!
  ======================================================================== */

  /*
  ✅ AIRMIN CARDS - EXACT COPY:
  ✅ aspect-ratio: 1 (square cards)
  ✅ 75% image on top / 25% info at bottom
  ✅ border-radius: 24px
  ✅ gap: 60px between cards
  ✅ max-width: 1000px for container
  ✅ White cards on gray background (#F8F9FA)
  ✅ Info at bottom: title + price
  ✅ Smooth image transitions on hover
  ✅ Full mobile adaptation

  RESULT: Now cards are exactly like in Airmin! 🚀
  */


  /* ========================================================================
     🛍️ ENHANCED STYLES FOR PRODUCT.HTML - ADD TO END OF STYLE.CSS
  ======================================================================== */
  /* ========================================================================
     🛍️ ADDITIONAL STYLES FOR ENHANCED PRODUCT CARD
  ======================================================================== */

  /* If styles for .product-page-wrapper already exist in your CSS, this section can be skipped */
  /* Add only if product card styles are insufficient */

  .product-page-wrapper {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      min-height: 100vh;
      padding-top: 0;
  }

  .product-page-wrapper .breadcrumbs {
      background: var(--pure-white);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-light);
      padding: 16px 24px;
      margin-bottom: 24px;
      font-size: 0.95rem;
  }

  .product-page-wrapper .product-section {
      background: var(--pure-white);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      border: 1px solid var(--border-light);
      padding: 0;
      margin: 0 0 32px 0;
      overflow: hidden;
  }

  .product-page-wrapper .product-content {
      display: grid;
      grid-template-columns: 55% 45%;
      gap: 0;
      align-items: stretch;
      min-height: 600px;
  }

  .product-page-wrapper .product-image-section {
      padding: 48px;
      background: #fafbfc;
      border-right: 1px solid var(--border-light);
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .product-page-wrapper .main-image {
      height: 480px;
      background: var(--pure-white);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6rem;
      color: var(--secondary-gray);
      border: 2px solid var(--border-light);
      margin-bottom: 24px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      transition: var(--transition);
  }

  .product-page-wrapper .main-image:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .product-page-wrapper .main-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 14px;
  }

  .product-page-wrapper .image-thumbnails {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
  }

  .product-page-wrapper .thumbnail {
      width: 80px;
      height: 80px;
      background: var(--pure-white);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 2px solid var(--border-light);
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .product-page-wrapper .thumbnail:hover,
  .product-page-wrapper .thumbnail.active {
      border-color: #007bff;
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 123, 255, 0.2);
  }

  .product-page-wrapper .thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 10px;
  }

  .product-page-wrapper .product-info {
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }

  .product-page-wrapper .product-category {
      color: #007bff;
      font-size: 0.95rem;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 12px;
      letter-spacing: 0.8px;
  }

  .product-page-wrapper .product-title {
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--primary-black);
      margin-bottom: 20px;
      line-height: 1.2;
      letter-spacing: -0.02em;
  }

  .product-page-wrapper .product-rating {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-light);
  }

  .product-page-wrapper .product-rating .stars {
      color: #ffc107;
      font-size: 1.2rem;
      margin-right: 8px;
  }

  .product-page-wrapper .product-rating .rating-text {
      color: var(--secondary-gray);
      font-size: 0.95rem;
      font-weight: 500;
  }

  .product-page-wrapper .product-price {
      font-size: 2.8rem;
      font-weight: 800;
      color: #28a745;
      margin-bottom: 8px;
  }

  .product-page-wrapper .old-price {
      font-size: 1.4rem;
      color: var(--secondary-gray);
      text-decoration: line-through;
      margin-right: 12px;
  }

  .product-page-wrapper .discount-badge {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
      color: var(--pure-white);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
      display: inline-block;
      margin-bottom: 24px;
  }

  .product-page-wrapper .product-description {
      color: var(--secondary-gray);
      line-height: 1.7;
      margin-bottom: 32px;
      font-size: 1.05rem;
  }

  .product-benefits {
      background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 32px;
      border: 1px solid #d4edda;
  }

  .benefit-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 1rem;
      font-weight: 500;
  }

  .benefit-item:last-child {
      margin-bottom: 0;
  }

  .benefit-icon {
      color: #28a745;
      font-weight: 700;
      width: 20px;
      text-align: center;
      font-size: 1.1rem;
  }

  .product-page-wrapper .product-options {
      margin-bottom: 32px;
  }

  .product-page-wrapper .option-group {
      margin-bottom: 24px;
  }

  .product-page-wrapper .option-label {
      font-weight: 700;
      color: var(--primary-black);
      margin-bottom: 12px;
      display: block;
      font-size: 1.1rem;
  }

  .product-page-wrapper .option-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
  }

  .product-page-wrapper .option-btn {
      padding: 12px 20px;
      border: 2px solid var(--border-light);
      background: var(--pure-white);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.95rem;
      font-weight: 500;
      min-width: 100px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .product-page-wrapper .option-btn:hover {
      border-color: #007bff;
      background: #f0f8ff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
  }

  .product-page-wrapper .option-btn.active {
      border-color: #007bff;
      background: #007bff;
      color: var(--pure-white);
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  }

  .product-page-wrapper .quantity-selector {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 32px;
      padding: 24px 0;
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
  }

  .product-page-wrapper .quantity-selector .option-label {
      margin-bottom: 0;
      font-size: 1.1rem;
  }

  .product-page-wrapper .quantity-controls {
      display: flex;
      border: 2px solid var(--border-light);
      border-radius: 12px;
      overflow: hidden;
      background: var(--pure-white);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .product-page-wrapper .quantity-btn {
      background: var(--light-gray);
      border: none;
      padding: 12px 16px;
      cursor: pointer;
      font-size: 1.3rem;
      font-weight: 700;
      transition: var(--transition);
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .product-page-wrapper .quantity-btn:hover {
      background: #007bff;
      color: var(--pure-white);
  }

  .product-page-wrapper .quantity-input {
      border: none;
      padding: 12px;
      text-align: center;
      width: 70px;
      font-size: 1.1rem;
      font-weight: 600;
      background: var(--pure-white);
  }

  .product-page-wrapper .action-buttons {
      display: flex;
      gap: 16px;
      margin-top: 24px;
  }

  .product-page-wrapper .add-to-cart-btn {
      flex: 2;
      background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
      color: var(--pure-white);
      border: none;
      padding: 20px 32px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      font-size: 1.15rem;
      transition: all 0.3s ease;
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .product-page-wrapper .add-to-cart-btn:hover {
      background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(0, 123, 255, 0.4);
  }

  .product-page-wrapper .buy-now-btn {
      flex: 1;
      background: var(--pure-white);
      color: #007bff;
      border: 2px solid #007bff;
      padding: 20px 32px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      font-size: 1.15rem;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .product-page-wrapper .buy-now-btn:hover {
      background: #007bff;
      color: var(--pure-white);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.25);
  }

  .product-page-wrapper .product-details {
      background: var(--pure-white);
      border-radius: 16px;
      border: 1px solid var(--border-light);
      margin-top: 32px;
      margin-bottom: 80px !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }

  .product-page-wrapper .details-tabs {
      display: flex;
      background: var(--light-gray);
      border-radius: 16px 16px 0 0;
  }

  .product-page-wrapper .tab-btn {
      flex: 1;
      padding: 20px 24px;
      background: none;
      border: none;
      cursor: pointer;
      font-weight: 600;
      transition: var(--transition);
      color: var(--secondary-gray);
      font-size: 1.05rem;
      position: relative;
  }

  .product-page-wrapper .tab-btn.active {
      background: var(--pure-white);
      color: #007bff;
  }

  .product-page-wrapper .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background: #007bff;
      border-radius: 2px;
  }

  .product-page-wrapper .tab-content {
      padding: 40px;
      display: none;
  }

  .product-page-wrapper .tab-content.active {
      display: block;
  }

  .product-page-wrapper .tab-content h3 {
      color: var(--primary-black);
      margin-bottom: 24px;
      font-size: 1.6rem;
      font-weight: 700;
  }

  .product-page-wrapper .specs-table {
      width: 100%;
      border-collapse: collapse;
  }

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

  .product-page-wrapper .specs-table td {
      padding: 12px 0;
      vertical-align: top;
  }

  .product-page-wrapper .specs-table td:first-child {
      font-weight: 600;
      color: var(--primary-black);
      width: 40%;
  }

  .product-page-wrapper .specs-table td:last-child {
      color: var(--secondary-gray);
  }

  .product-page-wrapper .review {
      padding: 24px 0;
      border-bottom: 1px solid var(--border-light);
  }

  .product-page-wrapper .review:last-child {
      border-bottom: none;
  }

  .product-page-wrapper .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
  }

  .product-page-wrapper .reviewer-name {
      font-weight: 600;
      color: var(--primary-black);
  }

  .product-page-wrapper .review-date {
      color: var(--secondary-gray);
      font-size: 0.9rem;
  }

  .product-page-wrapper .review-rating {
      color: #ffc107;
      margin-bottom: 12px;
      font-size: 1.1rem;
  }

  .product-page-wrapper .review-text {
      color: var(--secondary-gray);
      line-height: 1.6;
  }

  /* ========================================================================
     🛒 CART PAGE STYLES
  ======================================================================== */

  .cart-page {
      background: #f8f9fa;
      min-height: 100vh;
      padding: 0 0 80px 0;
  }

  .cart-header {
      text-align: center;
      padding: 80px 0 40px 0;
      background: var(--pure-white);
      margin-bottom: 40px;
  }

  .cart-header h1 {
      font-size: 2.5rem;
      color: var(--primary-black);
      margin-bottom: 16px;
      font-weight: 700;
  }

  .cart-subtitle {
      font-size: 1.1rem;
      color: var(--secondary-gray);
  }

  .cart-content-wrapper {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 40px;
      align-items: start;
  }

  /* Cart Items Section */
  .cart-items-section {
      background: var(--pure-white);
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-light);
  }

  .cart-items-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      padding-bottom: 20px;
      border-bottom: 2px solid var(--border-light);
  }

  .cart-items-header h2 {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--primary-black);
  }

  .clear-cart-btn {
      background: #dc3545;
      color: var(--pure-white);
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      font-size: 0.9rem;
      transition: var(--transition);
  }

  .clear-cart-btn:hover {
      background: #c82333;
      transform: translateY(-1px);
  }

  /* Cart Item */
  .cart-item {
      display: grid;
      grid-template-columns: 100px 1fr auto auto auto;
      gap: 20px;
      align-items: center;
      padding: 24px 0;
      border-bottom: 1px solid var(--border-light);
      transition: var(--transition);
  }

  .cart-item:hover {
      background: #fafbfc;
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 8px;
  }

  .cart-item:last-child {
      border-bottom: none;
  }

  .cart-item-image {
      width: 100px;
      height: 100px;
      background: var(--light-gray);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid var(--border-light);
  }

  .cart-item-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }

  .cart-item-details {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .cart-item-name {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--primary-black);
      line-height: 1.3;
  }

  .cart-item-variant {
      font-size: 0.9rem;
      color: var(--secondary-gray);
  }

  .cart-item-price {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--primary-black);
      text-align: center;
  }

  .cart-quantity-controls {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--light-gray);
      border-radius: 8px;
      padding: 4px;
  }

  .cart-quantity-btn {
      background: var(--pure-white);
      border: 1px solid var(--border-light);
      width: 36px;
      height: 36px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.2rem;
      font-weight: 700;
      transition: var(--transition);
  }

  .cart-quantity-btn:hover {
      background: #007bff;
      color: var(--pure-white);
      border-color: #007bff;
  }

  .cart-quantity-btn:disabled {
      background: var(--light-gray);
      color: var(--text-light);
      cursor: not-allowed;
  }

  .cart-quantity-input {
      width: 60px;
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      background: transparent;
      color: var(--primary-black);
  }

  .cart-item-total {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--primary-black);
      text-align: center;
  }

  .remove-item-btn {
      background: #dc3545;
      color: var(--pure-white);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.2rem;
      transition: var(--transition);
  }

  .remove-item-btn:hover {
      background: #c82333;
      transform: scale(1.1);
  }

  /* Empty Cart */
  .empty-cart {
      text-align: center;
      padding: 80px 40px;
      color: var(--secondary-gray);
  }

  .empty-cart-icon {
      font-size: 4rem;
      margin-bottom: 24px;
      opacity: 0.5;
  }

  .empty-cart h3 {
      font-size: 1.8rem;
      color: var(--primary-black);
      margin-bottom: 16px;
  }

  .empty-cart p {
      font-size: 1.1rem;
      margin-bottom: 32px;
  }

  .continue-shopping-btn {
      background: var(--primary-black);
      color: var(--pure-white);
      text-decoration: none;
      padding: 16px 32px;
      border-radius: 8px;
      font-weight: 600;
      transition: var(--transition);
      display: inline-block;
  }

  .continue-shopping-btn:hover {
      background: var(--accent-black);
      transform: translateY(-2px);
  }

  /* Cart Summary Section */
  .cart-summary-section {
      display: flex;
      flex-direction: column;
      gap: 32px;
  }

  .cart-summary {
      background: var(--pure-white);
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-light);
      position: sticky;
      top: 120px;
  }

  .cart-summary h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary-black);
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--border-light);
  }

  .summary-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      font-size: 1rem;
      color: var(--secondary-gray);
  }

  .summary-line.total-line {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--primary-black);
      border-top: 2px solid var(--border-light);
      margin-top: 16px;
      padding-top: 20px;
  }

  .checkout-actions {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .checkout-btn {
      background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
      color: var(--pure-white);
      border: none;
      padding: 20px 32px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .checkout-btn:hover {
      background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(0, 123, 255, 0.4);
  }

  .continue-shopping {
      text-align: center;
      color: var(--secondary-gray);
      text-decoration: none;
      font-weight: 500;
      padding: 12px;
      transition: var(--transition);
  }

  .continue-shopping:hover {
      color: var(--primary-black);
      text-decoration: underline;
  }

  /* Promo Code Section */
  .promo-section {
      background: var(--pure-white);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-light);
  }

  .promo-section h4 {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--primary-black);
      margin-bottom: 16px;
  }

  .promo-input-group {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
  }

  .promo-input {
      flex: 1;
      padding: 12px 16px;
      border: 2px solid var(--border-light);
      border-radius: 8px;
      font-size: 0.95rem;
      transition: var(--transition);
  }

  .promo-input:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  }

  .apply-promo-btn {
      background: var(--primary-black);
      color: var(--pure-white);
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition);
  }

  .apply-promo-btn:hover {
      background: var(--accent-black);
  }

  .promo-message {
      font-size: 0.9rem;
      padding: 8px 0;
  }

  .promo-message.success {
      color: #28a745;
  }

  .promo-message.error {
      color: #dc3545;
  }

  /* Related Products - Catalog Style Grid */
  .related-products {
      background: var(--pure-white);
      border-radius: 8px;
      padding: 12px;
      margin-top: 16px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
      border: 1px solid var(--border-light);
      position: relative;
  }

  .related-products-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
  }

  .related-products h3 {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--primary-black);
      margin: 0;
      display: flex;
      align-items: center;
      gap: 4px;
  }

  .related-products h3::before {
      content: '✨';
      font-size: 0.8rem;
  }

  .related-nav-buttons {
      display: none;
  }

  .related-products-container {
      position: relative;
      overflow: visible;
  }

  .related-products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 0;
  }

  .related-products .product-container {
      transition: all 0.2s ease;
      position: relative;
  }

  .related-products .product-container:hover {
      transform: translateY(-2px);
  }

  .related-products .product-card {
      background: var(--pure-white);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-light);
      transition: all 0.2s ease;
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      position: relative;
  }

  .related-products .product-card:hover {
      border-color: var(--primary-black);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .related-products .product-image {
      position: relative;
      overflow: hidden;
      flex: 1;
  }

  .related-products .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.2s ease;
  }

  .related-products .product-card:hover .product-image img {
      transform: scale(1.03);
  }

  .related-products .product-text {
      padding: 6px 4px;
      text-align: center;
      background: var(--pure-white);
      border-top: 1px solid var(--border-light);
  }

  .related-products .product-text h3 {
      font-size: 0.65rem;
      font-weight: 500;
      color: var(--primary-black);
      margin-bottom: 2px;
      line-height: 1.2;
      background: none;
      -webkit-text-fill-color: var(--primary-black);
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .related-products .product-text h3::before {
      display: none;
  }

  .related-products .product-price {
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--primary-black);
      margin: 0;
      line-height: 1;
  }


  /* ========================================================================
     📄 PAGINATION STYLES
  ======================================================================== */

  .pagination-container {
      margin-top: 3rem;
      padding: 2rem 0;
      border-top: 1px solid #e0e0e0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
  }

  .pagination {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
  }

  .pagination-btn, .page-btn {
      background: white;
      border: 2px solid #e0e0e0;
      color: #333;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: 500;
      transition: all 0.3s ease;
      min-width: 44px;
      text-align: center;
  }

  .pagination-btn:hover:not(:disabled),
  .page-btn:hover:not(.active) {
      background: #f8f9fa;
      border-color: var(--primary-black);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .pagination-btn:disabled {
      background: #f5f5f5;
      color: #999;
      cursor: not-allowed;
      border-color: #e0e0e0;
  }

  .page-btn.active {
      background: var(--primary-black);
      color: white;
      border-color: var(--primary-black);
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }

  .pagination-numbers {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: wrap;
  }

  .pagination-dots {
      padding: 0.75rem 0.5rem;
      color: #999;
      font-weight: 500;
  }

  .pagination-info {
      color: #666;
      font-size: 0.95rem;
      font-weight: 500;
  }


  /* ========================================================================
     🧭 BREADCRUMBS STYLES
  ======================================================================== */

  .breadcrumbs {
      background: var(--pure-white);
      padding: 12px 20px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      margin-bottom: 24px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  .breadcrumbs nav {
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      color: var(--secondary-gray);
  }

  .breadcrumbs a {
      color: var(--secondary-gray);
      text-decoration: none;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.2s ease;
      position: relative;
  }

  .breadcrumbs a:hover {
      color: var(--primary-black);
      background: var(--hover-gray);
  }

  .breadcrumb-separator {
      margin: 0 8px;
      color: var(--text-light);
      font-size: 0.8rem;
      display: flex;
      align-items: center;
  }

  .breadcrumb-separator::after {
      content: '→';
      font-weight: 600;
  }

  .breadcrumb-current {
      color: var(--primary-black);
      font-weight: 600;
      padding: 4px 8px;
      background: var(--light-gray);
      border-radius: 4px;
  }

  /* Enhanced breadcrumbs with icons */
  .breadcrumbs-enhanced {
      background: linear-gradient(135deg, var(--pure-white) 0%, var(--hover-gray) 100%);
      padding: 16px 24px;
      border-radius: 12px;
      border: 1px solid var(--border-light);
      margin-bottom: 32px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .breadcrumbs-enhanced nav {
      display: flex;
      align-items: center;
      font-size: 1rem;
      color: var(--secondary-gray);
  }

  .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .breadcrumb-item a {
      color: var(--secondary-gray);
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 8px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
  }

  .breadcrumb-item a:hover {
      color: var(--primary-black);
      background: var(--pure-white);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .breadcrumb-item .icon {
      font-size: 1.1rem;
  }

  .breadcrumb-separator-enhanced {
      margin: 0 12px;
      color: var(--text-light);
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      opacity: 0.7;
  }

  .breadcrumb-current-enhanced {
      color: var(--primary-black);
      font-weight: 700;
      padding: 8px 16px;
      background: var(--primary-black);
      color: var(--pure-white);
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* ========================================================================
     🛒 CHECKOUT PAGE STYLES
  ======================================================================== */

  .checkout-page {
      min-height: 100vh;
      padding: 100px 0 60px 0;
      background: var(--light-gray);
  }

  .checkout-header {
      text-align: center;
      padding: 40px 0 48px 0;
  }

  .checkout-header h1 {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--primary-black);
      margin-bottom: 12px;
  }

  .checkout-subtitle {
      font-size: 1.1rem;
      color: var(--secondary-gray);
      margin: 0;
  }

  .checkout-content {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 40px;
      align-items: start;
  }




  .checkout-form-section {
      background: var(--pure-white);
      border-radius: 12px;
      padding: 32px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-light);
  }

  .checkout-form-section h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--primary-black);
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--border-light);
  }

  .checkout-form-section h3 {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--primary-black);
      margin: 32px 0 16px 0;
  }

  .checkout-form-section h3:first-of-type {
      margin-top: 24px;
  }

  .form-group {
      margin-bottom: 20px;
  }

  .form-group-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 16px;
      margin-bottom: 20px;
  }

  .form-group label {
      display: block;
      font-weight: 500;
      color: var(--primary-black);
      margin-bottom: 6px;
      font-size: 0.9rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--border-light);
      border-radius: 8px;
      font-size: 0.9rem;
      transition: border-color 0.2s ease;
      background: var(--pure-white);
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
      outline: none;
      border-color: var(--primary-black);
  }

  .form-group textarea {
      resize: vertical;
      min-height: 80px;
  }

  .payment-methods {
      margin: 20px 0;
  }

  .payment-method {
      margin-bottom: 12px;
  }

  .payment-method input[type="radio"] {
      display: none;
  }

  .payment-method label {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border: 2px solid var(--border-light);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      background: var(--pure-white);
  }

  .payment-method label:hover {
      border-color: var(--secondary-gray);
  }

  .payment-method input[type="radio"]:checked + label {
      border-color: var(--primary-black);
      background: var(--hover-gray);
  }

  .payment-icon {
      font-size: 1.2rem;
      margin-right: 8px;
  }

  .credit-card-details {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border-light);
  }

  .order-summary-section {
      position: sticky;
      top: 20px;
      align-self: start;
  }

  .order-summary {
      background: var(--pure-white);
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--border-light);
  }

  .order-summary h3 {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--primary-black);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--border-light);
  }

  .order-items {
      margin-bottom: 20px;
  }

  .order-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
  }

  .order-item:last-child {
      border-bottom: none;
  }

  .order-item-info h4 {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--primary-black);
      margin: 0 0 4px 0;
  }

  .order-item-info p {
      font-size: 0.8rem;
      color: var(--secondary-gray);
      margin: 0;
  }

  .order-item-price {
      font-weight: 600;
      color: var(--primary-black);
  }

  .order-totals {
      padding-top: 16px;
      border-top: 2px solid var(--border-light);
  }

  .total-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      font-size: 0.9rem;
  }

  .total-line.total {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--primary-black);
      padding-top: 12px;
      border-top: 1px solid var(--border-light);
      margin-top: 8px;
  }

  .place-order-btn {
      width: 100%;
      padding: 16px;
      background: var(--primary-black);
      color: var(--pure-white);
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease;
      margin-top: 20px;
  }

  .place-order-btn:hover {
      background: var(--accent-black);
  }

  .back-to-cart {
      display: block;
      text-align: center;
      color: var(--secondary-gray);
      text-decoration: none;
      font-size: 0.9rem;
      margin-top: 16px;
      transition: color 0.2s ease;
  }

  .back-to-cart:hover {
      color: var(--primary-black);
  }

  /* Стили вне @media (проверить наличие анимации) */
  .checkout-form {
      transition: opacity 0.3s ease-in-out;
  }

  .form-input.error {
      border: 2px solid #dc3545;
      animation: shake 0.5s;
      background-color: #ffebee;
  }

  .error-message {
      color: #dc3545;
      font-size: 0.85rem;
      margin-top: 6px;
      display: block;
      font-weight: 500;
  }

  @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-5px); }
      100% { transform: translateX(0); }
  }
  /* PAYPAL СТИЛИ - ЗАКОММЕНТИРОВАНО 2025-10-04 */
  /* #paypal-button-container {
      margin-top: 20px;
      transition: opacity 0.3s ease-in-out;
  }
  #paypal-button-container.show {
      display: block;
  } */
  .place-order-btn {
      background-color: #0070ba;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
  }
  .place-order-btn:hover {
      background-color: #005ea6;
  }



  /* Твой оригинальный код до @media */

  /* Optimized Media Queries */
@media screen and (max-width: 1024px) {
  :root {
    --container-width: 960px;
    --header-height: 100px; /* Увеличена высота хедера */
  }

  /* ХЕДЕР */
  header {
    height: var(--header-height); /* 100px */
    max-width: 1024px; /* Полная ширина экрана */
    margin: 0 auto;
    box-sizing: border-box;
    position: relative; /* Контейнер для контроля */
  }

  nav {
    padding: 0 var(--spacing-sm); /* 8px */
    justify-content: flex-start;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    height: 100%; /* Занимает всю высоту хедера */
    align-items: center; /* Центрируем содержимое вертикально */
    gap: 40px; /* Пространство между элементами */
    min-width: 0; /* Предотвращаем сжатие */
    border: 1px solid red; /* Временная граница для отладки */
  }

  .logo {
    font-size: 1.4rem; /* Уменьшено для компактности */
    font-weight: 700; /* Из основного стиля */
    color: var(--primary-black); /* Из основного стиля */
    text-decoration: none; /* Из основного стиля */
    transition: var(--transition); /* Из основного стиля */
    letter-spacing: -0.02em; /* Из основного стиля */
    margin-right: 100px; /* Увеличено для большего пробела */
    flex-shrink: 0; /* Предотвращает сжатие */
    white-space: nowrap; /* Предотвращает перенос */
    max-width: 200px; /* Ограничиваем ширину */
    overflow: hidden; /* Обрезаем, если выходит */
    order: 1; /* Устанавливаем порядок первым */
    border: 1px solid green; /* Временная граница для отладки */
  }

  .logo:hover {
    opacity: 0.7; /* Ховер-эффект */
  }

  .nav-links {
    display: flex; /* Убираем position: absolute */
    gap: 48px; /* Из основного стиля */
    flex-grow: 0; /* Убираем растяжение */
    list-style: none; /* Убираем точки */
    padding: 0; /* Убираем дефолтный padding */
    margin: 0; /* Убираем дефолтный margin */
    justify-content: flex-start; /* Выравниваем ссылки по левому краю */
    padding-left: 20px; /* Дополнительный отступ слева */
    order: 2; /* Устанавливаем порядок вторым */
    border: 1px solid blue; /* Временная граница для отладки */
  }

  .nav-links a {
    color: var(--secondary-gray); /* Из основного стиля */
    text-decoration: none; /* Из основного стиля */
    font-weight: 500; /* Из основного стиля */
    font-size: 1rem; /* Из основного стиля */
    padding: 8px 0; /* Из основного стиля */
    transition: var(--transition); /* Из основного стиля */
    min-height: 50px; /* Для соответствия высоте */
    display: flex;
    align-items: center;
    min-width: 120px; /* Увеличено для пространства */
    white-space: nowrap; /* Предотвращает перенос */
  }

  .nav-links a:hover {
    color: var(--primary-black); /* Из основного стиля */
  }

  .nav-links li {
    margin: 0; /* Убираем отступы */
  }

  .cart-btn {
    padding: var(--spacing-sm) var(--spacing-md); /* 8px 16px */
    font-size: 0.9rem; /* Из основного стиля */
    min-height: 50px; /* Для соответствия высоте */
    margin-left: auto; /* Выравнивание справа */
    white-space: nowrap; /* Предотвращает перенос */
    background: var(--primary-black); /* Из основного стиля */
    color: var(--pure-white); /* Из основного стиля */
    border: none; /* Из основного стиля */
    border-radius: 6px; /* Из основного стиля */
    cursor: pointer; /* Из основного стиля */
    font-weight: 500; /* Из основного стиля */
    transition: var(--transition); /* Из основного стиля */
    order: 3; /* Устанавливаем порядок третьим */
    border: 1px solid yellow; /* Временная граница для отладки */
  }

  .cart-btn:hover {
    background: var(--accent-black); /* Из основного стиля */
  }

  .cart-count {
    width: 18px; /* Чуть больше */
    height: 18px;
    font-size: 0.7rem;
  }

  /* ПЕРВЫЙ БАННЕР (.hero) */
  .hero {
    max-width: var(--container-width); /* 960px */
    margin: 0 auto;
    height: 500px; /* Установлена для общей высоты ~600px с хедером */
    box-sizing: border-box;
    overflow: hidden; /* Скрываем лишнее */
  }

  .hero-image {
    height: 100%; /* Занимает всю высоту .hero (500px) */
    background-size: cover;
    background-position: center;
  }

  .hero-text {
    padding: var(--spacing-sm); /* 8px */
    box-sizing: border-box;
  }

  .hero-cta {
    padding: var(--spacing-sm) var(--spacing-md); /* 8px 16px */
    font-size: 1rem; /* Чуть больше для соответствия */
  }
}

  /* Для средних мобильных (max-width: 768px) */
@media (max-width: 768px) {
    .showcase-image-bg.fullsize {
      height: 40vh;
    }

    nav {
      justify-content: space-between;
    }

    header {
      height: 60px;
    }

    main {
      margin-top: 60px;
    }

    header .logo {
      font-size: 1.6rem;
    }

    .showcase-content {
      grid-template-columns: 1fr;
      gap: 30px;
      padding: 0 25px;
      min-height: auto;
    }

    .showcase-info {
      order: 2;
      text-align: center;
      padding-right: 0;
    }

    .showcase-info h1 {
      font-size: 3.5rem;
      line-height: 1.05;
    }

    .main-description {
      font-size: 1.05rem;
      max-width: 100%;
    }

    .container {
      padding: 0 20px;
    }

    .product-content {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 24px;
    }

    .main-image {
      height: 300px;
    }

    .action-buttons {
      flex-direction: column;
    }

    .details-tabs {
      flex-direction: column;
      overflow: auto;
    }

    .catalog-stats {
      flex-direction: column;
      gap: 16px;
      text-align: center;
    }

    .filter-group {
      flex-direction: column;
      align-items: stretch;
    }

    .filter-item {
      width: 100%;
    }

    .products-grid.list-view .product-card {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .products-grid.list-view .product-image {
      margin-bottom: 16px;
    }

    .view-toggle {
      display: none;
    }

    .catalog-header h1 {
      font-size: 2rem;
    }

    .hero-showcase {
      padding: 60px 0;
    }

    .featured {
      padding: 60px 0;
    }

    footer {
      padding: 60px 0 40px;
      margin-top: 80px;
    }

    .footer-content {
      gap: 40px;
      margin-bottom: 30px;
    }

    #contact-section {
      padding: 25px 20px;
    }

    .product-card {
      min-height: 420px;
    }

    .product-info {
      padding: 18px 25px 25px 25px;
    }

    .homepage-card .product-title {
      font-size: 1.1rem;
    }

    .homepage-card .product-price {
      font-size: 1rem;
    }

    .main-image {
          height: auto;
      }

      .product-title {
          font-size: 1.8rem;
      }

      .product-price {
          font-size: 2.2rem;
      }

      .action-buttons {
          flex-direction: column;
      }

      .details-tabs {
          flex-direction: column;
          overflow-x: auto;
      }

      .tab-btn {
          white-space: nowrap;
          min-width: 120px;
      }

    .related-products {
          padding: 8px;
          margin-top: 12px;
      }

      .related-products h3 {
          font-size: 1rem;
      }

      .related-products-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 6px;
      }

      .related-products .product-text {
          padding: 8px 4px;
      }

      .related-products .product-text h3 {
          font-size: 0.8rem;
      }

      .related-products .product-price {
          font-size: 0.8rem;
      }

      .cart-header {
          padding: 60px 0 32px 0;
      }

      .cart-header h1 {
          font-size: 2rem;
      }

      .cart-items-section,
      .cart-summary,
      .promo-section {
          padding: 24px;
      }

      .cart-item {
          grid-template-columns: 80px 1fr;
          gap: 16px;
          grid-template-rows: auto auto;
      }

      .cart-item-image {
          width: 80px;
          height: 80px;
      }

      .cart-item-price,
      .cart-quantity-controls,
      .cart-item-total,
      .remove-item-btn {
          grid-column: 1 / -1;
          justify-self: start;
          margin-top: 12px;
      }

      .cart-quantity-controls {
          justify-self: center;
      }

      .cart-item-total,
      .remove-item-btn {
          justify-self: end;
      }

      .cart-items-header {
          flex-direction: column;
          gap: 16px;
          align-items: stretch;
      }

      .promo-input-group {
          flex-direction: column;
      }

    .checkout-header {
          padding: 60px 0 32px 0;
      }

      .checkout-header h1 {
          font-size: 2rem;
      }

      .checkout-form-section,
      .order-summary {
          padding: 20px;
      }

      .form-group-row {
          grid-template-columns: 1fr;
          gap: 12px;
      }

    .pagination-btn, .page-btn {
          padding: 0.6rem 0.8rem;
          font-size: 0.9rem;
          min-width: 36px;
      }

      .pagination-dots {
          padding: 0.5rem 0.25rem;
      }

    .breadcrumbs,
      .breadcrumbs-enhanced {
          padding: 12px 16px;
          margin-bottom: 20px;
      }

      .breadcrumbs nav,
      .breadcrumbs-enhanced nav {
          font-size: 0.85rem;
      }

      .breadcrumb-item a {
          padding: 6px 8px;
          gap: 4px;
      }

      .breadcrumb-separator-enhanced {
          margin: 0 8px;
      }
  }

  /* Для маленьких мобильных (max-width: 480px) */
  @media (max-width: 480px) {
    .container {
      padding: 0 15px;
    }

    .logo {
      font-size: 1.4rem;
    }

    .showcase-info h1 {
      font-size: 2rem;
    }

    .main-description {
      font-size: 1rem;
    }

    .showcase-content {
      padding: 0 15px;
    }

    .product-content {
      padding: 20px;
    }

    .main-image {
      height: auto;
    }

    .catalog-stats {
      padding: 12px;
    }

    .catalog-header h1 {
      font-size: 1.8rem;
    }

    .section-title {
      font-size: 1.8rem;
    }

    .cart-content {
      padding: 24px;
    }

    .footer-content {
      gap: 30px;
      grid-template-columns: 1fr;
      text-align: center;
    }

    #contact-section {
      padding: 20px 15px;
    }

    .product-image-section,
      .product-info {
          padding: 30px 20px;
      }

      .main-image {
          height: auto;
      }

      .product-title {
          font-size: 1.5rem;
      }

      .product-price {
          font-size: 2rem;
      }

      .tab-content {
          padding: 30px 20px;
      }

      .breadcrumbs {
          padding: 12px 16px;
          font-size: 0.9rem;
      }

      .option-buttons {
          justify-content: center;
      }

      .quantity-selector {
          flex-direction: column;
          align-items: center;
          gap: 16px;
      }

      .thumbnail {
          width: 60px;
          height: 60px;
      }

      .image-thumbnails {
          gap: 12px;
      }

      .add-to-cart-btn,
      .buy-now-btn {
          font-size: 1rem;
          padding: 16px 24px;
      }

    .cart-header h1 {
          font-size: 1.8rem;
      }

      .cart-items-section,
      .cart-summary,
      .promo-section {
          padding: 20px;
          border-radius: 12px;
      }

      .empty-cart {
          padding: 60px 20px;
      }

      .empty-cart-icon {
          font-size: 3rem;
      }

      .checkout-btn {
          font-size: 1rem;
          padding: 16px 24px;
      }

    .pagination-btn, .page-btn {
          padding: 0.5rem 0.7rem;
          font-size: 0.9rem;
          min-width: 36px;
      }

      .pagination-dots {
          padding: 0.5rem 0.25rem;
      }

    .error-404,
    .error-404 p {
      width: 95%;
      max-width: 100%;
    }

    .error-404 h1 {
      font-size: 1.5em;
      margin: 0 0 0.5em;
    }
  }

  /* Для очень маленьких экранов (max-width: 320px) */
  @media (max-width: 320px) {
    .container {
      padding: 0 10px; /* Уменьшил с 15px */
    }

    .logo {
      font-size: 1.2rem; /* Уменьшил с 1.4rem */
    }

    .showcase-info h1 {
      font-size: 1.8rem; /* Уменьшил с 2rem */
    }

    .main-description {
      font-size: 0.9rem; /* Уменьшил с 1rem */
    }

    .showcase-content {
      padding: 0 10px; /* Унифицировал */
    }

    .product-content {
      padding: 15px; /* Уменьшил с 20px */
    }

    .main-image {
      height: auto;
    }

    .catalog-stats {
      padding: 10px; /* Уменьшил с 12px */
    }

    .catalog-header h1 {
      font-size: 1.6rem; /* Уменьшил с 1.8rem */
    }

    .section-title {
      font-size: 1.6rem; /* Уменьшил с 1.8rem */
    }

    .cart-content {
      padding: 20px; /* Уменьшил с 24px */
    }

    .footer-content {
      gap: 20px; /* Уменьшил с 30px */
      grid-template-columns: 1fr;
      text-align: center;
    }

    #contact-section {
      padding: 15px 10px; /* Уменьшил с 20px 15px */
    }
  }