/* Keep prototype rendering consistent after loading framework CSS */
            html,
            body {
                  font-size: 13px;
            }

            /* view.css sets .container as flex; restore intended layout baseline */
            .container {
                  display: block;
            }

            /* CSS Variables & Theme */
            :root {
                  /* African Earth Tones */
                  --color-gold: #D4AF37;
                  --color-gold-dark: #B5952F;
                  --color-gold-light: #F9F3E3;
                  --color-leaf-green: #4CAF50;
                  --color-dirty-green: #4A5D23;
                  --color-dirty-green-dark: #37461A;

                  /* Neutrals */
                  --color-white: #FFFFFF;
                  --color-off-white: #FDFBF7;
                  --color-text-main: #2A2A2A;
                  --color-text-light: #666666;
                  --color-border: #E8E4D9;

                  /* Typography */
                  --font-sans: 'Inter', sans-serif;
                  --font-serif: 'Playfair Display', serif;

                  /* UI Elements */
                  --transition: all 0.3s ease;
                  --radius-sm: 8px;
                  --radius-md: 16px;
                  --radius-lg: 24px;
                  --radius-pill: 50px;
                  --shadow-soft: 0 4px 12px rgba(74, 93, 35, 0.08);
                  --shadow-hover: 0 12px 24px rgba(74, 93, 35, 0.12);
            }

            /* African Mudcloth/Geometric SVG Pattern for backgrounds */
            .pattern-african {
                  background-color: var(--color-dirty-green);
                  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20L20 0ZM20 10L10 20L20 30L30 20L20 10Z' fill='%23D4AF37' fill-opacity='0.15' fill-rule='evenodd'/%3E%3Cpath d='M0 0h5v5H0V0zm35 35h5v5h-5v-5zM0 35h5v5H0v-5zm35-35h5v5h-5V0z' fill='%23D4AF37' fill-opacity='0.2'/%3E%3C/svg%3E");
            }

            .pattern-border-top {
                  height: 8px;
                  width: 100%;
                  background-color: var(--color-gold);
                  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0l10 10-10 10L0 10z' fill='%234A5D23' fill-opacity='0.8'/%3E%3C/svg%3E");
                  background-size: 20px 20px;
            }

            /* Resets & Base Styles */
            * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
            }

            body {
                  font-family: var(--font-sans);
                  color: var(--color-text-main);
                  background-color: var(--color-white);
                  line-height: 1.6;
                  overflow-x: hidden;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            .serif {
                  font-family: var(--font-serif);
                  font-weight: 600;
            }

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

            button {
                  cursor: pointer;
                  font-family: var(--font-sans);
                  border: none;
                  background: none;
                  transition: var(--transition);
            }

            ul {
                  list-style: none;
            }

            img {
                  max-width: 100%;
                  height: auto;
                  display: block;
                  border-radius: inherit;
            }

            /* Utility Classes */
            .container {
                  width: 100%;
                  max-width: 1280px;
                  margin: 0 auto;
                  padding: 0 24px;
            }

            .btn {
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  gap: 8px;
                  padding: 14px 32px;
                  font-weight: 600;
                  font-size: 0.95rem;
                  border-radius: var(--radius-pill);
                  transition: var(--transition);
            }

            .btn-primary {
                  background-color: var(--color-dirty-green);
                  color: var(--color-white);
            }

            .btn-primary:hover {
                  background-color: var(--color-dirty-green-dark);
                  transform: translateY(-2px);
                  box-shadow: var(--shadow-hover);
            }

            .btn-gold {
                  background-color: var(--color-gold);
                  color: var(--color-white);
            }

            .btn-gold:hover {
                  background-color: var(--color-gold-dark);
                  transform: translateY(-2px);
                  box-shadow: var(--shadow-hover);
            }

            .btn-outline {
                  border: 2px solid var(--color-border);
                  color: var(--color-dirty-green);
                  background-color: transparent;
            }

            .btn-outline:hover {
                  border-color: var(--color-dirty-green);
                  background-color: var(--color-dirty-green);
                  color: var(--color-white);
            }

            .text-gold {
                  color: var(--color-gold);
            }

            .text-green {
                  color: var(--color-leaf-green);
            }

            .text-dirty {
                  color: var(--color-dirty-green);
            }

            .hidden-page {
                  display: none !important;
            }

            .section-title {
                  text-align: center;
                  font-size: 2.8rem;
                  margin-bottom: 40px;
                  color: var(--color-dirty-green);
            }

            .section-subtitle {
                  text-align: center;
                  color: var(--color-text-light);
                  font-size: 1.1rem;
                  max-width: 600px;
                  margin: -20px auto 40px;
            }

            /* Header & Navigation */
            header {
                  position: sticky;
                  top: 0;
                  background-color: var(--color-white);
                  z-index: 100;
            }

            .header-shadow {
                  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
                  padding: 20px 0;
            }

            .nav-container {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
            }

            .logo {
                  font-size: 1.8rem;
                  font-weight: 700;
                  color: var(--color-dirty-green);
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  cursor: pointer;
            }

            .logo i {
                  color: var(--color-gold);
                  font-size: 2.2rem;
            }

            .logo-img {
                  height: 48px;
                  width: auto;
                  display: block;
            }

            .brand-title {
                  display: inline-flex;
                  flex-direction: column;
                  align-items: flex-end;
                  gap: 0;
                  line-height: 1;
            }

            .brand-name {
                  display: flex;
                  align-items: baseline;
                  gap: 0;
            }

            .brand-heritage {
                  color: var(--color-dirty-green);
            }

            .brand-botanics {
                  color: var(--color-gold);
            }

            .brand-supply {
                  color: var(--color-dirty-green-dark);
                  font-family: var(--font-sans);
                  font-size: 0.42em;
                  font-weight: 700;
                  letter-spacing: 0.18em;
                  text-transform: uppercase;
                  margin-top: 1px;
            }

            .nav-links {
                  display: flex;
                  gap: 35px;
            }

            .nav-links a {
                  font-weight: 500;
                  font-size: 1rem;
                  color: var(--color-text-main);
                  position: relative;
            }

            .nav-links a::after {
                  content: '';
                  position: absolute;
                  bottom: -5px;
                  left: 0;
                  width: 0;
                  height: 2px;
                  background-color: var(--color-gold);
                  transition: width 0.3s ease;
            }

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

            .nav-links a:hover,
            .nav-links a.active {
                  color: var(--color-dirty-green);
            }

            .nav-icons {
                  display: flex;
                  gap: 20px;
                  align-items: center;
            }

            .icon-btn {
                  font-size: 1.6rem;
                  color: var(--color-dirty-green);
                  position: relative;
                  background: var(--color-off-white);
                  width: 45px;
                  height: 45px;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
            }

            .icon-btn:hover {
                  background: var(--color-gold-light);
                  color: var(--color-gold-dark);
            }

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

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

            /* Contained Rounded Hero Slider (Craft Style) */
            .hero-wrapper {
                  padding: 20px;
                  background-color: var(--color-white);
            }

            .hero-section {
                  position: relative;
                  max-width: 1400px;
                  margin: 0 auto;
                  height: 60vh;
                  max-height: 500px;
                  min-height: 360px;
                  border-radius: var(--radius-lg);
                  overflow: hidden;
                  box-shadow: var(--shadow-soft);

                        /* aui-carousel hero slide items */
                        .hero-section aui-carousel {
                              border-radius: inherit;
                        }

                        .hero-section .hero-slide {
                              height: 100%;
                              background-size: cover;
                              background-position: center;
                              position: relative;
                              display: flex;
                              align-items: center;
                              justify-content: flex-start;
                              padding: 0 10%;
                        }

                        .hero-section .hero-slide::before {
                              content: '';
                              position: absolute;
                              inset: 0;
                              background: linear-gradient(100deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.32) 100%);
                        }

                        /* Override aui-carousel dots position & brand colors for hero */
                        .hero-section aui-carousel .carousel-dots {
                              display: flex !important;
                              bottom: 30px;
                              left: 10%;
                              transform: none;
                              gap: 12px;
                              z-index: 5;
                        }

                        .hero-section aui-carousel .carousel-dot {
                              width: 10px;
                              height: 10px;
                              background: rgba(255, 255, 255, 0.4);
                              border-radius: 50%;
                              transition: var(--transition);
                        }

                        .hero-section aui-carousel .carousel-dot.active {
                              background: var(--color-gold);
                              transform: scale(1.5);
                        }
            }

            .slide {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  transition: opacity 0.8s ease-in-out;
                  background-size: cover;
                  background-position: center;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  padding: 0 10%;
            }

            .slide::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%);
            }

            .slide.active {
                  opacity: 1;
                  z-index: 1;
            }

            .slide-content {
                  position: relative;
                  z-index: 2;
                  color: var(--color-white);
                  max-width: 600px;
                  text-align: left;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  gap: 14px;
            }

            .slide-copy {
                  background: rgba(0, 0, 0, 0.38);
                  border: 1px solid rgba(255, 255, 255, 0.16);
                  border-radius: 14px;
                  padding: 20px 24px;
                  backdrop-filter: blur(2px);
            }

            .slide-tag {
                  display: inline-block;
                  background: rgba(212, 175, 55, 0.9);
                  color: #fff;
                  padding: 6px 16px;
                  border-radius: var(--radius-pill);
                  font-size: 0.85rem;
                  font-weight: 600;
                  text-transform: uppercase;
                  letter-spacing: 1px;
                  margin-bottom: 20px;
            }

            .slide-copy h2 {
                  font-size: 4.5rem;
                  margin-bottom: 20px;
                  line-height: 1.1;
                  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.7);
            }

            .slide-copy p {
                  font-size: 1.25rem;
                  margin-bottom: 35px;
                  font-weight: 300;
                  opacity: 0.98;
                  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
            }

            .slider-controls {
                  position: absolute;
                  bottom: 30px;
                  left: 10%;
                  z-index: 10;
                  display: flex;
                  gap: 12px;
            }

            .dot {
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background-color: rgba(255, 255, 255, 0.4);
                  cursor: pointer;
                  transition: var(--transition);
            }

            .dot.active {
                  background-color: var(--color-gold);
                  transform: scale(1.5);
            }

            /* Etsy-Style Product Cards & Scroller */
            .product-scroller-section {
                  padding: 80px 0;
                  background-color: var(--color-white);
            }

            .scroller-wrapper {
                  position: relative;
                  margin-top: 50px;
            }

            .product-scroller {
                  display: flex;
                  gap: 24px;
                  overflow-x: auto;
                  scroll-snap-type: x mandatory;
                  scrollbar-width: none;
                  padding: 20px 4px 40px 4px;
                  scroll-behavior: smooth;
            }

            .product-scroller::-webkit-scrollbar {
                  display: none;
            }

            .product-card {
                  flex: 0 0 320px;
                  scroll-snap-align: start;
                  border-radius: var(--radius-md);
                  background-color: var(--color-white);
                  border: 1px solid var(--color-border);
                  transition: var(--transition);
                  cursor: pointer;
                  position: relative;
                  display: flex;
                  flex-direction: column;
            }

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

            .product-image-container {
                  height: 280px;
                  border-radius: var(--radius-md) var(--radius-md) 0 0;
                  overflow: hidden;
                  position: relative;
                  background-color: var(--color-off-white);
            }

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

            .product-card:hover .product-image-container img {
                  transform: scale(1.08);
            }

            .product-badge {
                  position: absolute;
                  top: 15px;
                  left: 15px;
                  background-color: var(--color-white);
                  color: var(--color-dirty-green);
                  padding: 6px 12px;
                  border-radius: var(--radius-pill);
                  font-size: 0.75rem;
                  font-weight: 700;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
                  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                  z-index: 2;
            }

            .product-info {
                  padding: 20px;
                  display: flex;
                  flex-direction: column;
                  flex: 1;
            }

            .product-title {
                  font-size: 1.2rem;
                  color: var(--color-text-main);
                  margin-bottom: 8px;
                  line-height: 1.3;
            }

            .product-origin {
                  font-size: 0.85rem;
                  color: var(--color-text-light);
                  display: flex;
                  align-items: center;
                  gap: 5px;
                  margin-bottom: 15px;
            }

            .product-footer {
                  margin-top: auto;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
            }

            .product-price {
                  font-weight: 700;
                  font-size: 1.3rem;
                  color: var(--color-dirty-green);
                  font-family: var(--font-serif);
            }

            .add-to-cart-btn {
                  background: var(--color-off-white);
                  color: var(--color-dirty-green);
                  width: 100%;
                  height: auto;
                  border-radius: 20px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 6px 12px;
                  font-size: 0.7rem;
                  font-weight: 600;
                  letter-spacing: 0.04em;
                  white-space: nowrap;
                  transition: var(--transition);
            }

            .add-to-cart-btn:hover {
                  background: var(--color-dirty-green);
                  color: var(--color-white);
            }

            .scroll-btn {
                  position: absolute;
                  top: 40%;
                  transform: translateY(-50%);
                  width: 50px;
                  height: 50px;
                  background-color: var(--color-white);
                  border: 1px solid var(--color-border);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 1.5rem;
                  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                  z-index: 5;
                  color: var(--color-dirty-green);
            }

            .scroll-btn:hover {
                  background-color: var(--color-dirty-green);
                  color: var(--color-white);
                  border-color: var(--color-dirty-green);
                  transform: translateY(-50%) scale(1.1);
            }

            .scroll-left {
                  left: -25px;
            }

            .scroll-right {
                  right: -25px;
            }

            /* Home About Section - Organic & Asymmetrical */
            .home-about {
                  padding: 120px 0;
                  background-color: var(--color-white);
            }

            .about-grid {
                  display: grid;
                  grid-template-columns: 1fr 1.2fr;
                  gap: 80px;
                  align-items: center;
            }

            .about-image-wrapper {
                  position: relative;
            }

            .about-image-wrapper img {
                  border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
                  position: relative;
                  z-index: 2;
                  box-shadow: var(--shadow-hover);
            }

            .about-blob {
                  position: absolute;
                  top: -30px;
                  right: -30px;
                  width: 80%;
                  height: 80%;
                  border-radius: var(--radius-lg);
                  z-index: 1;
            }

            .about-text h2 {
                  font-size: 3.2rem;
                  color: var(--color-dirty-green);
                  margin-bottom: 25px;
                  line-height: 1.1;
            }

            .about-text p {
                  margin-bottom: 24px;
                  color: var(--color-text-light);
                  font-size: 1.15rem;
                  line-height: 1.8;
            }

            .perks {
                  display: flex;
                  gap: 20px;
                  margin: 30px 0;
            }

            .perk-item {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  font-weight: 500;
                  color: var(--color-dirty-green);
                  background: var(--color-off-white);
                  padding: 10px 16px;
                  border-radius: var(--radius-sm);
            }

            .perk-item i {
                  color: var(--color-gold);
                  font-size: 1.2rem;
            }

            /* Search & Filters (Shop Page) */
            .shop-controls {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 40px;
                  flex-wrap: wrap;
                  gap: 20px;
            }

            .search-box {
                  position: relative;
                  flex: 1;
                  min-width: 280px;
                  max-width: 450px;
            }

            .search-box input {
                  width: 100%;
                  padding: 14px 20px 14px 45px;
                  border-radius: var(--radius-pill);
                  border: 1px solid var(--color-border);
                  background: var(--color-white);
                  font-family: var(--font-sans);
                  font-size: 1rem;
                  transition: var(--transition);
            }

            .search-box input:focus {
                  outline: none;
                  border-color: var(--color-gold);
                  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
            }

            .search-box i {
                  position: absolute;
                  left: 18px;
                  top: 50%;
                  transform: translateY(-50%);
                  color: var(--color-text-light);
                  font-size: 1.3rem;
            }

            .category-filters {
                  display: flex;
                  gap: 12px;
                  flex-wrap: wrap;
            }

            .filter-btn {
                  padding: 10px 24px;
                  border-radius: var(--radius-pill);
                  background: var(--color-white);
                  color: var(--color-text-main);
                  border: 1px solid var(--color-border);
                  font-weight: 500;
                  font-size: 0.95rem;
            }

            .filter-btn.active,
            .filter-btn:hover {
                  background: var(--color-dirty-green);
                  color: var(--color-white);
                  border-color: var(--color-dirty-green);
            }

            /* Footer Updates */
            footer {
                  color: var(--color-white);
                  background-color: #131a0c;
                  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.7) 100%), url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20L20 0ZM20 10L10 20L20 30L30 20L20 10Z' fill='%23D4AF37' fill-opacity='0.15' fill-rule='evenodd'/%3E%3Cpath d='M0 0h5v5H0V0zm35 35h5v5h-5v-5zM0 35h5v5H0v-5zm35-35h5v5h-5V0z' fill='%23D4AF37' fill-opacity='0.2'/%3E%3C/svg%3E");
            }

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

            .footer-brand .logo-img {
                  height: 54px;
                  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
            }

            .footer-brand .brand-title {
                  align-items: flex-start;
                  font-family: var(--font-serif);
            }

            .footer-brand .brand-heritage,
            .footer-brand .brand-botanics,
            .footer-brand .brand-supply {
                  color: #ffffff;
            }

            .footer-content {
                  padding: 80px 0 60px;
                  background: rgba(0, 0, 0, 0.18);
            }

            .footer-grid {
                  display: grid;
                  grid-template-columns: 2fr 1fr 1fr 1.5fr;
                  gap: 50px;
            }

            .footer-col h4 {
                  font-size: 1.2rem;
                  margin-bottom: 25px;
                  color: var(--color-gold);
                  font-family: var(--font-sans);
                  text-transform: uppercase;
                  letter-spacing: 1px;
            }

            .footer-col p,
            .footer-col a {
                  color: rgba(255, 255, 255, 0.94);
                  margin-bottom: 12px;
                  display: block;
                  font-size: 0.95rem;
            }

            .footer-col a:hover {
                  color: var(--color-gold);
                  padding-left: 8px;
            }

            .social-icons {
                  display: flex;
                  gap: 15px;
                  margin-top: 25px;
            }

            .social-icons a {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  background: rgba(255, 255, 255, 0.1);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 1.2rem;
                  color: var(--color-white);
            }

            .social-icons a:hover {
                  background: var(--color-gold);
                  transform: translateY(-3px);
            }

            .newsletter-form {
                  display: flex;
                  margin-top: 20px;
                  background: #fff;
                  border-radius: var(--radius-pill);
                  padding: 4px;
            }

            .newsletter-form input {
                  padding: 10px 20px;
                  border: none;
                  outline: none;
                  flex: 1;
                  font-family: var(--font-sans);
                  border-radius: var(--radius-pill);
                  background: transparent;
                  color: var(--color-text-main);
            }

            .newsletter-form button {
                  background: var(--color-dirty-green);
                  color: #fff;
                  padding: 10px 20px;
                  border-radius: var(--radius-pill);
                  font-weight: 600;
            }

            /* Clean White Bottom Bar */
            .footer-bottom {
                  background-color: #ffffff;
                  color: var(--color-text-main);
                  text-align: center;
                  padding: 25px 0;
                  font-size: 0.95rem;
                  border-top: 1px solid rgba(0, 0, 0, 0.08);
            }

            /* Cart Sidebar */
            .cart-sidebar {
                  position: fixed;
                  top: 0;
                  right: -450px;
                  width: 450px;
                  height: 100vh;
                  background-color: var(--color-white);
                  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
                  z-index: 1000;
                  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                  display: flex;
                  flex-direction: column;
                  border-radius: 20px 0 0 20px;
            }

            .cart-sidebar.open {
                  right: 0;
            }

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

            .cart-header h3 {
                  font-size: 1.5rem;
                  color: var(--color-dirty-green);
            }

            .close-cart {
                  width: 36px;
                  height: 36px;
                  border-radius: 50%;
                  background: var(--color-off-white);
                  color: var(--color-text-main);
                  font-size: 1.2rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;
            }

            .close-cart:hover {
                  background: #fee;
                  color: red;
            }

            .cart-items {
                  flex: 1;
                  overflow-y: auto;
                  padding: 30px;
            }

            .cart-item {
                  display: flex;
                  gap: 20px;
                  margin-bottom: 25px;
                  background: var(--color-off-white);
                  padding: 15px;
                  border-radius: var(--radius-md);
            }

            .cart-item img {
                  width: 90px;
                  height: 90px;
                  object-fit: cover;
                  border-radius: var(--radius-sm);
            }

            .cart-item-details {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
            }

            .cart-item-title {
                  font-weight: 600;
                  font-size: 1rem;
                  color: var(--color-dirty-green);
                  font-family: var(--font-serif);
                  margin-bottom: 4px;
            }

            .cart-item-qty-controls {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  margin: 8px 0;
                  background: var(--color-white);
                  border: 1px solid var(--color-border);
                  border-radius: var(--radius-pill);
                  width: fit-content;
                  padding: 2px 8px;
            }

            .cart-item-qty-btn {
                  background: transparent;
                  border: none;
                  color: var(--color-text-main);
                  font-size: 1rem;
                  cursor: pointer;
                  padding: 2px 5px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
            }

            .cart-item-qty-btn:hover {
                  color: var(--color-gold);
            }

            .cart-item-qty {
                  font-size: 0.9rem;
                  font-weight: 600;
                  min-width: 16px;
                  text-align: center;
            }

            .cart-item-price {
                  color: var(--color-text-main);
                  font-weight: 600;
                  margin-top: auto;
            }

            .cart-item-remove {
                  color: #d9534f;
                  font-size: 0.8rem;
                  font-weight: 500;
                  text-transform: uppercase;
                  margin-top: 8px;
                  text-align: left;
            }

            .cart-footer {
                  padding: 30px;
                  border-top: 1px solid var(--color-border);
                  background-color: var(--color-white);
            }

            .cart-total {
                  display: flex;
                  justify-content: space-between;
                  font-size: 1.4rem;
                  font-weight: 700;
                  margin-bottom: 25px;
                  color: var(--color-dirty-green);
                  font-family: var(--font-serif);
            }

            .cart-actions {
                  display: flex;
                  flex-direction: column;
                  gap: 15px;
            }

            .cart-actions button {
                  width: 100%;
                  padding: 16px;
                  font-size: 1.05rem;
            }

            .overlay {
                  position: fixed;
                  top: 0;
                  left: 0;
                  width: 100vw;
                  height: 100vh;
                  background-color: rgba(0, 0, 0, 0.4);
                  backdrop-filter: blur(3px);
                  z-index: 999;
                  opacity: 0;
                  visibility: hidden;
                  transition: var(--transition);
            }

            .overlay.active {
                  opacity: 1;
                  visibility: visible;
            }

            /* Generic Pages */
            .page-header {
                  padding: 80px 0 60px;
                  text-align: center;
            }

            .page-header-banner {
                  position: relative;
                  overflow: hidden;
                  padding: 90px 0 70px;
                  background-image: linear-gradient(90deg, rgba(22, 30, 10, 0.84) 0%, rgba(22, 30, 10, 0.74) 100%),
                        url('/CDN/heritagebotanics/images/banner.jpg'),
                        url('/assets/images/banner.jpg');
                  background-size: cover;
                  background-position: center;
                  color: var(--color-white);
            }

            .page-header-banner::after {
                  content: '';
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  height: 10px;
                  background-color: var(--color-gold);
                  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0l10 10-10 10L0 10z' fill='%234A5D23' fill-opacity='0.8'/%3E%3C/svg%3E");
                  background-size: 20px 20px;
            }

            .page-header-banner .container {
                  position: relative;
                  z-index: 1;
            }

            .page-header-banner h1 {
                  color: var(--color-white);
            }

            .page-header-banner p {
                  color: rgba(255, 255, 255, 0.9);
            }

            .page-header:not(.page-header-banner) h1 {
                  font-size: 3.5rem;
                  color: var(--color-dirty-green);
                  margin-bottom: 15px;
            }

            .page-header.page-header-banner h1 {
                  font-size: 3.5rem;
                  color: var(--color-white);
                  margin-bottom: 15px;
            }

            .page-content {
                  padding: 40px 0 100px;
            }

            /* Shop Page Grid */
            .shop-grid {
                  display: grid;
                  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                  gap: 40px;
            }

            /* Forms */
            .form-container {
                  max-width: 500px;
                  margin: 0 auto;
                  background: var(--color-white);
                  padding: 50px;
                  border-radius: var(--radius-lg);
                  border: 1px solid var(--color-border);
                  box-shadow: var(--shadow-soft);
            }

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

            .form-group label {
                  display: block;
                  margin-bottom: 8px;
                  font-weight: 600;
                  color: var(--color-text-main);
                  font-size: 0.95rem;
            }

            .form-group input,
            .form-group textarea {
                  width: 100%;
                  padding: 16px;
                  border: 1px solid var(--color-border);
                  border-radius: var(--radius-sm);
                  background: var(--color-off-white);
                  font-family: var(--font-sans);
                  transition: var(--transition);
            }

            .form-group input:focus,
            .form-group textarea:focus {
                  outline: none;
                  border-color: var(--color-gold);
                  background: var(--color-white);
                  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
            }

            /* Product Detail Page */
            .product-detail-grid {
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  gap: 60px;
                  align-items: start;
            }

            .product-detail-image img {
                  width: 100%;
                  border-radius: var(--radius-lg);
                  box-shadow: var(--shadow-soft);
            }

            .product-detail-info {
                  padding: 20px 0;
            }

            .product-detail-info h1 {
                  font-size: 3rem;
                  color: var(--color-dirty-green);
                  margin-bottom: 15px;
                  line-height: 1.1;
            }

                  /* --- Price Tier Selector --- */
                  .price-tier-section {
                        margin-bottom: 28px;
                  }

                  .tier-label {
                        font-size: 0.85rem;
                        font-weight: 700;
                        text-transform: uppercase;
                        letter-spacing: 0.08em;
                        color: var(--color-text-light);
                        margin-bottom: 10px;
                  }

                  .tier-buttons {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;
                        margin-bottom: 18px;
                  }

                  .tier-btn {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 3px;
                        padding: 10px 18px;
                        border-radius: var(--radius-md);
                        border: 2px solid var(--color-border);
                        background: var(--color-white);
                        color: var(--color-text-main);
                        font-size: 0.9rem;
                        font-weight: 600;
                        cursor: pointer;
                        transition: var(--transition);
                  }

                  .tier-btn .tier-price {
                        font-size: 0.82rem;
                        font-weight: 400;
                        color: var(--color-text-light);
                  }

                  .tier-btn:hover {
                        border-color: var(--color-dirty-green);
                        background: var(--color-off-white);
                  }

                  .tier-btn.tier-active {
                        border-color: var(--color-dirty-green);
                        background: var(--color-dirty-green);
                        color: var(--color-white);
                  }

                  .tier-btn.tier-active .tier-price {
                        color: rgba(255, 255, 255, 0.8);
                  }

                  .product-price-display {
                        font-size: 2.4rem;
                        font-weight: 700;
                        color: var(--color-dirty-green);
                        font-family: var(--font-serif);
                  }

                  /* --- Product Inline Rating --- */
                  .product-rating-inline {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        margin-bottom: 6px;
                  }

                  .product-stars {
                        color: var(--color-gold);
                        font-size: 1rem;
                  }

                  .product-rating-avg {
                        font-weight: 700;
                        font-size: 0.95rem;
                        color: var(--color-text-main);
                  }

                  .product-rating-count {
                        font-size: 0.85rem;
                        color: var(--color-text-light);
                  }

                  /* --- Cart weight label --- */
                  .cart-item-weight-label {
                        font-size: 0.78rem;
                        color: var(--color-text-light);
                        margin-top: 2px;
                  }

                  /* --- Reviews Section --- */
                  .product-reviews-section {
                        margin-top: 20px;
                  }

                  .reviews-divider {
                        border: none;
                        border-top: 1px solid var(--color-border);
                        margin: 50px 0 40px;
                  }

                  .rating-summary {
                        margin-bottom: 36px;
                  }

                  .rating-summary h3 {
                        font-size: 2rem;
                        color: var(--color-dirty-green);
                        margin-bottom: 16px;
                  }

                  .rating-overview {
                        display: flex;
                        align-items: center;
                        gap: 20px;
                  }

                  .rating-score {
                        font-size: 4rem;
                        font-weight: 700;
                        font-family: var(--font-serif);
                        color: var(--color-dirty-green);
                        line-height: 1;
                  }

                  .rating-stars-lg {
                        color: var(--color-gold);
                        font-size: 1.4rem;
                        margin-bottom: 4px;
                  }

                  .rating-count {
                        font-size: 0.9rem;
                        color: var(--color-text-light);
                  }

                  .reviews-list {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        margin-bottom: 50px;
                  }

                  .review-card {
                        background: var(--color-off-white);
                        border-radius: var(--radius-md);
                        padding: 24px;
                        border-left: 4px solid var(--color-gold);
                  }

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

                  .review-author {
                        font-weight: 700;
                        color: var(--color-text-main);
                        font-size: 1rem;
                  }

                  .review-meta {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                  }

                  .review-stars {
                        color: var(--color-gold);
                        font-size: 0.9rem;
                  }

                  .review-date {
                        font-size: 0.82rem;
                        color: var(--color-text-light);
                  }

                  .review-text {
                        color: var(--color-text-main);
                        line-height: 1.75;
                        font-size: 0.97rem;
                        margin: 0;
                  }

                  /* --- Write a Review Form --- */
                  .write-review {
                        background: var(--color-white);
                        border: 1px solid var(--color-border);
                        border-radius: var(--radius-lg);
                        padding: 36px;
                  }

                  .write-review h4 {
                        font-size: 1.6rem;
                        color: var(--color-dirty-green);
                        margin-bottom: 24px;
                  }

                  .review-form-row {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 20px;
                        margin-bottom: 20px;
                  }

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

                  .review-form label {
                        font-size: 0.85rem;
                        font-weight: 600;
                        text-transform: uppercase;
                        letter-spacing: 0.06em;
                        color: var(--color-text-light);
                  }

                  .review-form input[type="text"],
                  .review-form textarea {
                        border: 1.5px solid var(--color-border);
                        border-radius: var(--radius-md);
                        padding: 12px 16px;
                        font-family: var(--font-sans);
                        font-size: 0.95rem;
                        color: var(--color-text-main);
                        background: var(--color-off-white);
                        transition: var(--transition);
                  }

                  .review-form input[type="text"]:focus,
                  .review-form textarea:focus {
                        outline: none;
                        border-color: var(--color-dirty-green);
                        background: var(--color-white);
                  }

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

                  .star-rating-input {
                        display: flex;
                        gap: 6px;
                        font-size: 1.6rem;
                        color: var(--color-gold);
                        cursor: pointer;
                        padding: 4px 0;
                  }

                  .star-rating-input i:hover,
                  .star-rating-input .ph-fill {
                        color: var(--color-gold);
                  }

            /* FAQ Accordion */
            .faq-item {
                  border-bottom: 1px solid var(--color-border);
                  padding: 24px 0;
            }

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

            .faq-question {
                  font-weight: 600;
                  font-size: 1.15rem;
                  color: var(--color-dirty-green);
                  cursor: pointer;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  transition: var(--transition);
            }

            .faq-question:hover {
                  color: var(--color-gold-dark);
            }

            .faq-question i {
                  transition: transform 0.3s ease;
                  color: var(--color-gold);
            }

            .faq-answer {
                  margin-top: 15px;
                  color: var(--color-text-light);
                  display: none;
                  line-height: 1.7;
                  font-size: 1.05rem;
            }

            .faq-item.active .faq-answer {
                  display: block;
                  animation: fadeIn 0.4s ease;
            }

            .faq-item.active .faq-question i {
                  transform: rotate(180deg);
            }

            @keyframes fadeIn {
                  from {
                        opacity: 0;
                        transform: translateY(-5px);
                  }

                  to {
                        opacity: 1;
                        transform: translateY(0);
                  }
            }

            /* Dashboard, Orders & Tracking */
            .dashboard-layout {
                  display: grid;
                  grid-template-columns: 280px 1fr;
                  gap: 40px;
                  align-items: start;
            }

            .dashboard-nav {
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  background: var(--color-off-white);
                  padding: 30px;
                  border-radius: var(--radius-lg);
                  border: 1px solid var(--color-border);
            }

            .dashboard-nav button,
            .dashboard-nav a {
                  text-align: left;
                  padding: 14px 20px;
                  font-weight: 500;
                  border-radius: var(--radius-pill);
                  font-size: 1rem;
                  color: var(--color-text-main);
                  display: flex;
                  align-items: center;
                  gap: 10px;
            }

            .dashboard-nav button i,
            .dashboard-nav a i {
                  font-size: 1.3rem;
                  color: var(--color-gold);
                  transition: var(--transition);
            }

            .dashboard-nav button.active,
            .dashboard-nav button:hover,
            .dashboard-nav a.active,
            .dashboard-nav a:hover {
                  background: var(--color-dirty-green);
                  color: var(--color-white);
            }

            .dashboard-nav button.active i,
            .dashboard-nav button:hover i,
            .dashboard-nav a.active i,
            .dashboard-nav a:hover i {
                  color: var(--color-white);
            }

            .form-container p button {
                  display: inline;
                  padding: 0;
                  background: transparent;
                  border: none;
                  font-size: inherit;
            }

            .dashboard-pane {
                  background: var(--color-white);
                  padding: 40px;
                  border-radius: var(--radius-lg);
                  border: 1px solid var(--color-border);
                  box-shadow: var(--shadow-soft);
            }

            .order-card {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 24px;
                  border: 1px solid var(--color-border);
                  border-radius: var(--radius-md);
                  margin-bottom: 20px;
                  transition: var(--transition);
            }

            .order-card:hover {
                  border-color: var(--color-gold);
                  box-shadow: var(--shadow-soft);
            }

            .order-info h4 {
                  color: var(--color-dirty-green);
                  margin-bottom: 8px;
                  font-size: 1.1rem;
            }

            .order-info p {
                  color: var(--color-text-light);
                  font-size: 0.95rem;
            }

            .status-badge {
                  padding: 6px 16px;
                  border-radius: var(--radius-pill);
                  font-size: 0.85rem;
                  font-weight: 600;
                  text-transform: uppercase;
                  display: inline-block;
            }

            .status-processing {
                  color: #b8860b;
                  background: #fdf5e6;
                  border: 1px solid #f5deb3;
            }

            .status-shipped {
                  color: #2e8b57;
                  background: #e8f5e9;
                  border: 1px solid #c8e6c9;
            }

            .status-delivered {
                  color: var(--color-text-light);
                  background: var(--color-off-white);
                  border: 1px solid var(--color-border);
            }

            /* Tracking Timeline */
            .tracking-timeline {
                  display: flex;
                  justify-content: space-between;
                  position: relative;
                  margin: 50px 0;
            }

            .tracking-timeline::before {
                  content: '';
                  position: absolute;
                  top: 25px;
                  left: 40px;
                  right: 40px;
                  height: 2px;
                  background: var(--color-border);
                  z-index: 1;
            }

            .tracking-step {
                  position: relative;
                  z-index: 2;
                  text-align: center;
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
            }

            .tracking-icon {
                  width: 50px;
                  height: 50px;
                  margin-bottom: 15px;
                  border-radius: 50%;
                  background: var(--color-white);
                  border: 2px solid var(--color-border);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 1.4rem;
                  color: var(--color-border);
                  transition: var(--transition);
            }

            .tracking-step.completed .tracking-icon {
                  background: var(--color-dirty-green);
                  border-color: var(--color-dirty-green);
                  color: white;
            }

            .tracking-step.active .tracking-icon {
                  background: var(--color-gold);
                  border-color: var(--color-gold);
                  color: white;
                  box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.2);
            }

            .tracking-step h5 {
                  color: var(--color-text-main);
                  font-size: 0.95rem;
                  margin-bottom: 5px;
            }

            .tracking-step p {
                  color: var(--color-text-light);
                  font-size: 0.85rem;
            }

            /* Responsive */
            @media (max-width: 992px) {

                  .about-grid,
                  .product-detail-grid,
                  .footer-grid {
                        grid-template-columns: 1fr;
                        gap: 40px;
                  }

                  .hero-section {
                        height: 60vh;
                        border-radius: 0;
                  }

                  .hero-wrapper {
                        padding: 0;
                  }
            }

            @media (max-width: 768px) {
                  .nav-links {
                        display: none;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        width: 100%;
                        background: var(--color-white);
                        flex-direction: column;
                        padding: 30px;
                        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                        gap: 20px;
                  }

                  .nav-links.active {
                        display: flex;
                  }

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

                  .slide-content h2 {
                        font-size: 2.8rem;
                  }

                  .cart-sidebar {
                        width: 100%;
                        right: -100%;
                        border-radius: 0;
                  }

                  .page-header h1 {
                        font-size: 2.5rem;
                  }

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

                  .search-box {
                        max-width: 100%;
                  }
            }