/* --- 1. CSS VARIABLES & RESET --- */
  :root {
      --bg-body: var(--bg);
      --bg-card: var(--primary-text);
      --primary-green: var(--primary);
      --dark-green: var(--text-dark);
      --accent-gold: var(--accent);
      --text-main: var(--text-dark);
      --text-light: var(--text-light);

      --font-serif: var(--font-family);
      --font-sans: var(--title-font);

      --radius-card: 20px;
      --radius-btn: 12px;
      --shadow-soft: 0 10px 30px rgba(58, 77, 63, 0.08);
  }

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

  html {
      scroll-behavior: smooth;
  }

  body {
      background-color: var(--bg-body);
      color: var(--text-main);
      font-family: var(--font-sans);
      overflow-x: hidden;
      /* Note: This is a code-generated pattern, not an external image file */
      background-image: radial-gradient(#6b8c72 0.5px, transparent 0.5px);
      background-size: 20px 20px;
  }

  h1,
  h2,
  h3,
  h4 {
      font-family: var(--font-serif);
      color: var(--dark-green);
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

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

  /* Global Image Reset */
  img {
      width: 100%;
      display: block;
      object-fit: cover;
  }


  video {
      width: 100%;
      display: block;
      object-fit: cover;
  }

  /* --- UTILITIES --- */
  .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .section-padding {
      padding: 40px 0;
  }

  /* Custom Button Style */
  .btn-sage {
      display: inline-block;
      padding: 14px 35px;
      background: var(--primary-green);
      color: white;
      font-family: var(--font-sans);
      font-weight: 600;
      text-decoration: none;
      border-radius: var(--radius-btn);
      transition: 0.3s;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.8rem;
      border: 1px solid var(--primary-green);
      cursor: pointer;
  }

  .btn-sage:hover {
      background: transparent;
      color: var(--primary-green);
      transform: translateY(-2px);
  }

  .section-header {
      text-align: center;
      margin-bottom: 50px;
  }

  .section-header h2 {
      font-size: 2.5rem;
      margin-bottom: 10px;
  }

  .section-header i {
      font-size: 2rem;
      color: var(--primary-green);
      margin-bottom: 15px;
      display: block;
  }

  /* --- 2. NAVBAR --- */

  .logo {
      font-family: var(--font-serif);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--dark-green);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .logo i {
      color: var(--primary-green);
  }

  .nav-links {
      list-style: none;
      display: flex;
      gap: 30px;
  }

  .nav-links a {
      text-decoration: none;
      color: var(--dark-green);
      font-weight: 600;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: 0.3s;
  }

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

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

  .cart-icon {
      position: relative;
      color: var(--dark-green);
      cursor: pointer;
  }

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

  .mobile-menu {
      display: none;
      font-size: 1.5rem;
      color: var(--dark-green);
  }

  /* --- 3. HERO SECTION --- */
  .hero {
      padding-top: 40px;
  }

  .hero-card {
      background: var(--bg-card);
      border-radius: 30px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      box-shadow: var(--shadow-soft);
      border: 1px solid white;
      position: relative;
  }

  .hero-text {
      padding: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
  }

  .deco-star {
      color: var(--primary-green);
      font-size: 1.5rem;
      position: absolute;
      opacity: 0.5;
  }

  .star-1 {
      top: 30px;
      right: 30px;
  }

  .star-2 {
      bottom: 30px;
      left: 30px;
  }

  .hero-text h4 {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: var(--primary-green);
      margin-bottom: 15px;
      font-weight: 600;
  }

  .hero-text h1 {
      font-size: 3.5rem;
      margin-bottom: 20px;
      line-height: 1;
  }

  .hero-text p {
      margin-bottom: 30px;
  }

  .hero-info-list {
      list-style: none;
      margin-bottom: 30px;
      border-top: 1px solid #eee;
      padding-top: 20px;
  }

  .hero-info-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 0.9rem;
      color: var(--text-main);
  }

  .hero-info-list i {
      color: var(--primary-green);
  }

  .hero-img-container {
      position: relative;
      background: linear-gradient(317deg, var(--primary) -91%, transparent 53%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
  }

  /* UPDATED: Image is now an HTML tag, styled here */
  .hero-arch-img {
      width: 90%;
      height: 90%;
      object-fit: cover;
      /* clip-path: ellipse(80% 90% at 50% 10%); */
      border-radius: 200px 200px 20px 20px;
      margin-bottom: 5%;
  }

  /* --- CATEGORY NAV CARDS --- */
  .quick-nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 30px;
  }

  .nav-card {
      background: var(--bg-card);
      padding: 25px;
      border-radius: var(--radius-card);
      text-align: center;
      text-decoration: none;
      color: var(--dark-green);
      transition: 0.3s;
      box-shadow: var(--shadow-soft);
      border: 1px solid white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
  }

  .nav-card:hover {
      transform: translateY(-5px);
      background: white;
  }

  .nav-card i {
      font-size: 1.5rem;
      color: var(--primary-green);
  }

  .nav-card span {
      font-family: var(--font-serif);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 1.1rem;
  }

  /* --- 4. PRODUCT GRID --- */
  .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
  }

  .product-card {
      background: var(--bg-card);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-soft);
      transition: 0.3s;
      height: 100%;
      border: 1px solid white;
      position: relative;
  }

  .product-img {
      aspect-ratio: 4/4;
      margin: 15px 15px 0 15px;
      border-radius: 15px;
      overflow: hidden;
  }

  .product-img img {
      height: 100%;
      transition: 0.5s;
      width: 100%;
      object-fit: cover;
  }

  .product-img video {
      height: 100%;
      transition: 0.5s;
      width: 100%;
      object-fit: cover;
  }

  .product-card:hover .product-img img {
      transform: scale(1.05);
  }

  .product-info {
      padding: 20px 25px;
      text-align: left;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .product-info h3 {
      font-size: 1.3rem;
      margin-bottom: 5px;
  }

  .product-info p {
      font-size: 0.85rem;
      margin-bottom: 15px;
      opacity: 0.8;
      width: 100%;
  }

  .price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      padding-top: 15px;
  }

  .price {
      font-family: var(--font-sans);
      font-weight: 700;
      color: var(--primary-green);
      font-size: 1.1rem;
  }

  .btn-add {
      background: transparent;
      border: 1px solid var(--primary-green);
      color: var(--primary-green);
      padding: 8px 15px;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
      font-size: 0.8rem;
      text-transform: uppercase;
      font-weight: 600;
  }

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

  /* --- 5. BEST SELLER (Arch Layout) --- */
  .best-seller {
      background: var(--primary-green);
      color: white;
      border-radius: 30px;
      padding: 60px;
      position: relative;
      overflow: hidden;
  }

  .bs-content-wrapper {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
  }

  .bs-text h2 {
      color: white;
      font-size: 3rem;
      margin-bottom: 20px;
  }

  .bs-text h2 span {
      font-family: var(--font-sans);
      font-size: 1rem;
      display: block;
      margin-bottom: 5px;
      opacity: 0.8;
      letter-spacing: 2px;
  }

  .bs-text p {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 30px;
  }

  .bs-image-frame {
      height: 400px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 200px 200px 20px 20px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      overflow: hidden;
      /* Ensure inner image stays inside */
  }

  .bs-image-frame img {
      width: 100%;
      height: 100%;
      border-radius: 190px 190px 15px 15px;
      object-fit: cover;
  }

    .bs-image-frame video {
      width: 100%;
      height: 100%;
      border-radius: 190px 190px 15px 15px;
      object-fit: cover;
  }


  /* --- 6. ABOUT US --- */
  .about-wrapper {
      text-align: center;
  }

  .highlights-row {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-top: 50px;
      flex-wrap: wrap;
  }

  .highlight-item {
      width: 150px;
      text-align: center;
  }

  .circle-icon {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 2px solid var(--primary-green);
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: var(--primary-green);
      overflow: hidden;
      transition: 0.3s;
  }

  .circle-icon:hover {
      transform: scale(1.1);
      box-shadow: var(--shadow-soft);
  }

  .highlight-item span {
      font-family: var(--font-serif);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.9rem;
  }

  /* --- 7. CONTACT FORM --- */
  .contact-section {
      max-width: 700px;
      margin: 0 auto;
  }

  .contact-card {
      background: white;
      padding: 50px;
      border-radius: 30px;
      box-shadow: var(--shadow-soft);
      border: 1px solid #eee;
  }

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

  .input-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--primary-green);
      text-transform: uppercase;
  }

  .form-input {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-family: var(--font-sans);
      outline: none;
      background: var(--bg-body);
  }

  .form-input:focus {
      border-color: var(--primary-green);
      background: white;
  }

  textarea.form-input {
      resize: none;
      height: 120px;
  }

  /* --- 8. FOOTER --- */
  footer {
      margin-top: 100px;
      background: var(--dark-green);
      color: white;
      padding: 80px 0 30px;
      border-radius: 30px 30px 0 0;
  }

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

  .footer-brand h2 {
      color: white;
      margin-bottom: 15px;
  }

  .footer-brand p {
      color: rgba(255, 255, 255, 0.7);
      max-width: 300px;
  }

  .footer-col h4 {
      color: var(--primary-green);
      margin-bottom: 20px;
      font-family: var(--font-serif);
      font-size: 1.2rem;
  }

  .footer-col ul {
      list-style: none;
  }

  .footer-col li {
      margin-bottom: 10px;
  }

  .footer-col a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 0.9rem;
      transition: 0.3s;
  }

  .footer-col a:hover {
      color: white;
      padding-left: 5px;
  }

  /* Responsive */
  @media (max-width: 900px) {
      .hero-card {
          grid-template-columns: 1fr;
      }

      .hero-img-container {
          background: transparent;
      }

      /* Hide the arch image on small mobile for simpler layout */
      .quick-nav {
          grid-template-columns: 1fr 1fr;
      }

      .bs-content-wrapper {
          grid-template-columns: 1fr;
          text-align: center;
      }

      .bs-image-frame {
          height: 100%;
      }

      .nav-links {
          display: none;
      }

      .mobile-menu {
          display: block;
      }

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

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

      .dropdown-item {

          font-size: 18px !important;
      }

  }


  /*************************************************
************************************************
***********************************************
*********** STABLE CSS STARTS FROM HERE **************
*****************************************************
*************************************************
***********************************************
*************************************************
***************************************************




/*****************************************
*************CART*************************
***************************************/
  /* BACKDROP */
  #cart-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: 0.3s ease;
      z-index: 1000;
  }

  /* SIDEBAR – now appears from the RIGHT */
  #cart-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 50%;
      max-width: 500px;
      background: var(--bg);
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      transform: translateX(100%);
      transition: 0.3s ease;
      padding: 20px;
      overflow-y: auto;
      z-index: 1001;
      /*extra*/
      background: linear-gradient(60deg, var(--bg) 61%, var(--primary-text) 58%);
  }

  @media (max-width: 768px) {
      #cart-sidebar {
          width: 80%;
      }
  }

  /* CLOSE BUTTON */
  .close-btn {
      font-size: 28px;
      background: none;
      border: none;
      cursor: pointer;
      float: right;
      color: var(--accent);
  }

  /* FORM */
  #cart-form input,
  #cart-form textarea {
      width: 100%;
      padding: 8px;
      margin: 5px 0 15px;
      background: var(--bg);
      border: 1px solid var(--text-dark);
      border-radius: 25px;
  }

  /* TABLE */
  .cart-table {
      width: 100%;
      border-collapse: collapse;
  }

  .cart-table th {
      text-align: left;
      padding: 10px 5px;
      border-bottom: 1px solid var(--primary);
      font-size: 14px;
  }

  .cart-table td {
      padding: 12px 5px;
      border-bottom: 1px solid var(--text-dark);
      /* Horizontal separators */
      vertical-align: middle;
  }

  /* Images */
  .prod-img img {
      width: 60px;
      border-radius: 5px;
  }

  /* Delete button */
  .prod-del i {
      cursor: pointer;
      color: #e63946;
  }

  /* SHIPMENT BOX */
  .shipment {
      padding: 15px 0;
      margin-top: 15px;
  }

  /* BOTTOM ROW */
  .bottom-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      gap: 1rem;
  }

  /* CHECKOUT BUTTON */
  .checkout-btn {
      padding: 10px 18px;
      background: var(--primary);
      color: var(--primary-text);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      width: 10rem;
      font-size: 15px;
      justify-content: center;
      border-radius: 25px;
  }

  .preview-item {
      position: relative;
      display: inline-block;
      margin: 6px;
  }

  .preview-item img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid #ccc;
  }

  /*************************************
************ HEADER ****************
***************************************
****************************************
/* --- 2. Header Styles --- */
  .header {

      padding: 20px 0;
      background: var(--bg);
      position: sticky;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid rgba(107, 140, 114, 0.1);
  }

  .header-container {
      max-width: 903px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

  }

  .logo {
      max-width: 100px;
      max-height: 50px;
      margin-top: 5px;
  }

  .logo img {
      width: 100%;
      max-height: 45px;
      object-fit: contain;
  }

  @keyframes shake {
      0% {
          transform: translateX(0);
      }

      20% {
          transform: translateX(-3px);
      }

      40% {
          transform: translateX(3px);
      }

      60% {
          transform: translateX(-3px);
      }

      80% {
          transform: translateX(3px);
      }

      100% {
          transform: translateX(0);
      }
  }

  /* Hover shake */
  #add-to-cart:hover i {
      animation: shake 0.5s;
      filter: grayscale(0.4);
  }

  /* Click shake */
  #add-to-cart:active i {
      animation: shake 0.3s;
  }

  /* Desktop Navigation */
  .nav-desktop {
      display: none;
  }

  .nav-link {
      padding: 0.5rem;
      border-radius: 0.5rem;
      transition: color 0.15s;
      color: var(--text-dark);
      border: none;
      background: none;
      font-size: 14px;
  }

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

  /* Dropdown */
  .dropdown-wrapper {
      position: relative;
      /* Make sure the hover effect covers both button and content area */
      padding-bottom: 0.5rem;
      /* Extend hover area downwards */
      margin-bottom: -0.5rem;
      /* Counteract the padding-bottom to keep layout tight */
  }

  .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 40;
      width: 192px;
      box-shadow: 0 10px 15px rgb(0 0 0 / 25%);
      background-color: var(--bg);
      color: var(--text-dark);
      overflow: hidden;
      /* border: 1px solid #e5e7eb; */
      transform: translateY(-5px);
  }

  .dropdown-wrapper:hover .dropdown-content {
      display: block;
  }

  .dropdown-item {
      display: block;
      padding: 0.5rem 1rem;
      transition: background-color 0.15s;
      font-size: 12px;
  }

  .dropdown-item:hover {
      background-color: var(--primary);
      color: var(--primary-text);
  }

  /* Cart Icon */
  .cart-icon-wrapper {
      position: relative;
      padding: 0.1rem;
      transition: 0.5s;
  }

  .cart-icon-wrapper:hover {
      background-color: rgba(0, 0, 0, 0.067);
      border-radius: 100px;
      /* Gray-700 */
  }


  #template-alert {
      position: fixed;
      top: -60px;
      /* start hidden above screen */
      left: 50%;
      transform: translateX(-50%);
      background: var(--accent);
      color: var(--accent-text);
      padding: 15px 25px;
      box-shadow: 0 14px 10px rgba(0, 0, 0, 0.453);
      font-size: 14px;
      z-index: 9999;
      transition: top 0.4s ease, opacity 0.4s ease;
      opacity: 0;
  }

  .cart-count {
      position: absolute;
      top: 0px;
      right: -3px;
      display: flex;
      height: 20px;
      width: 20px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: var(--primary);
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--primary-text);
      transition: all 0.2s;
      line-height: 1;
  }

  #add-to-cart {
      color: var(--text-dark);
  }

  /* --- 3. Mobile Menu (Off-Canvas) --- */

  /* Initial state */
  .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 256px;
      color: var(--text-dark);
      background: var(--bg);
      box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
      z-index: 50;
      transition: transform 0.3s ease-in-out;
      transform: translateX(-100%);
      /* color: var(--text-light); */

  }

  .m-menu-container {
      background: linear-gradient(45deg, var(--bg), #74747445);
      padding: 1.5rem;
      height: 100%;
  }

  .mobile-menu-open {
      transform: translateX(0);
  }

  .mobile-menu-link {
      display: block;
      padding: 0.75rem;
      margin-bottom: 0.25rem;
      /* border-radius: 0.5rem; */
      transition: background-color 0.15s;
      color: var(--text-dark);
  }

  .mobile-menu-link:hover {
      background-color: var(--primary);
      color: var(--primary-text);
  }

  /* Dropdown content (hidden by default) */
  .dropdown-content-mobile {
      display: none;
      flex-direction: column;
      margin-left: 1rem;
      animation: fadeIn 0.25s ease;
  }

  /* Smooth animation */
  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(-4px);
      }

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

  /* When active */
  .dropdown-content-mobile.active {
      display: flex;
  }

  .close-button {
      color: var(--text-dark);
      transition: color 0.15s;
  }

  .close-button:hover {
      color: var(--primary-color);
  }

  /* Backdrop */
  .backdrop {
      position: fixed;
      inset: 0;
      background-color: #000;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 40;
      display: none;
  }

  .backdrop-visible {
      display: block;
      opacity: 0.5;
  }

  @media (min-width: 768px) {

      /* Desktop Layout */
      .burger-button {
          display: none;
      }

      .nav-desktop {
          display: flex;
          gap: 2rem;
          align-items: center;
      }

      .footer-grid {
          grid-template-columns: 2fr 1fr 2fr;
          /* Adjust grid for wider screens */
      }

      .header {
          backdrop-filter: blur(10px);
      }
  }


  /*///////////////////////////////
///////// SCROLLBAR /////////////
//////////////////////////////////
////////////////////////////////
/* Chrome, Edge, Safari */
  ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
  }

  ::-webkit-scrollbar-track {
      background: rgba(131, 131, 131, 0.318);
      border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
      background-color: var(--primary);
      border-radius: 10px;
      transition: 0.3s;
  }

  *::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button:single-button,
  *::-webkit-scrollbar-button:single-button:horizontal,
  *::-webkit-scrollbar-button:single-button:vertical,
  *::-webkit-scrollbar-button:decrement,
  *::-webkit-scrollbar-button:increment,
  *::-webkit-scrollbar-button:start,
  *::-webkit-scrollbar-button:end {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
      border: none !important;
  }

  /**********FOOTER*******************
*************************************
**********************************/
  /* --- 5. Footer Styles --- */
  .footer {
      background: var(--text-dark);
      color: var(--text-light);
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
  }

  .footer-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 1rem;
  }

  .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--text-dark);
  }

  .footer-heading {
      color: var(--accent);
      margin-bottom: 25px;
      font-size: 1.2rem;
  }

  .footer-links li {
      margin-bottom: 0.5rem;
      list-style: none;

  }

  .footer-links a {
      opacity: 0.9;
      transition: 0.3s;

  }

  .footer-links a:hover {
      color: var(--accent);
      opacity: 1;
      padding-left: 5px;
  }

  p {
      margin: auto;
  }

  .newsletter-form {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
  }

  .newsletter-input {
      padding: 0.75rem;
      border-radius: 11px;
      border: 2px solid var(--primary);
      width: 100%;
      box-sizing: border-box;
      outline: none;
  }


  .newsletter-input:focus,
  .newsletter-input:hover {
      border-color: var(--accent);
  }

  .footer-bottom {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-top: 1rem;
  }

  .footer-bottom p {
      color: var(--text-light) !important;
  }

  .social-links {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
  }

  .social-links a {
      color: var(--text-light);
      font-size: 1.25rem;
      transition: color 0.2s;
      opacity: 0.7;
  }

  .social-links a:hover {
      color: var(--accent);
  }

  /* --- 6. Media Queries (Mobile to Desktop) --- */

  @media (min-width: 640px) {
      .newsletter-form {
          flex-direction: row;
          gap: 0.5rem;
      }

      .newsletter-input {
          flex-grow: 1;
      }

      .newsletter-button {
          width: auto;
      }

      .footer-bottom {
          flex-direction: row;
          margin-top: 0px;
          padding-top: 0px;
      }

      .social-links {
          margin-top: 0;
      }
  }

  @media (min-width: 768px) {

      /* Desktop Layout */
      .burger-button {
          display: none;
      }

      .nav-desktop {
          display: flex;
          gap: 2rem;
          align-items: center;
      }

      .footer-grid {
          grid-template-columns: 2fr 1fr 2fr;
          /* Adjust grid for wider screens */
      }
  }

  /* Footer */
  .footer {

      margin-top: 100px;
      padding: 40px 20px 20px;
  }

  .footer-container {
      display: grid;
      gap: 20px;
  }

  .footer-container h4 {
      margin-bottom: 10px;
  }

  .footer-bottom {
      text-align: center;
      color: var(--muted);
  }

  /*contact stats*/
  .contact-stats {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 20px;
      font-size: smaller;
      padding: 20px 0;
  }

  .stat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 200;
      font-size: 12px;
      min-width: 26%;
  }

  .stat-item .icon {
      font-size: 1.2em;
      color: var(--accent);
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  @media (max-width: 768px) {
      .contact-stats {
          flex-direction: column;
          gap: 15px;
          align-items: flex-start;
      }

      .section-padding {
          padding: 50px 15px;
          box-sizing: border-box;
      }


      .hero {
          padding: 10px !important;
      }

  }

  @media (max-width: 900px) {
      .section-padding {
          padding: 44px 40px;
      }

      .hero {
          padding: 40px;
      }
  }




  /**********************************************************
******************SHOP PAGE*****************************
***********************************************************
**********************************************************/
  .page {
      padding: 2rem 2rem 2rem 2rem;
  }

  .top-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 18px;
  }

  .search-wrap {
      flex: 1 1 auto;
      display: flex;
      gap: 8px;
  }

  .search-input,
  textarea {
      width: 100%;
      padding: 15px 10px;
      border: 1px solid var(--text-dark);
      outline: none;
      font-size: 1em;
      color: var(--text-dark);
      background: none;
      font-family: var(--title-font);
  }

  .search-input {
      border-radius: 15px;
  }

  input:hover,
  .search-input:hover,
  textarea:hover {
      border-color: var(--primary);
  }

  input:focus,
  .search-input:focus,
  textarea:focus {
      border-color: var(--primary);
  }

  /* Layout: sidebar + content */
  .main-grid {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: var(--gap);
      align-items: start;
  }

  /* Sidebar (filters) */

  .filters-overlay {
      position: fixed;
      /* cover the entire viewport */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.35);
      /* semi-transparent black */
      z-index: 1500;
      /* behind the sidebar which is z-index 2000 */
      display: none;
      /* hidden by default */
      transition: opacity 0.3s ease;
      cursor: pointer;
  }

  .filters-overlay.show {
      display: block;
      /* visible when sidebar is open */
      opacity: 1;
  }

  .sidebar {
      background: var(--bg);
      padding: 18px;
      box-shadow: var(--shadow);
      position: sticky;
      border: 1px solid var(--primary);
      top: 24px;
      height: fit-content;
      border-radius: 15px 15px 10px 10px;
  }

  .color.selected {
      outline: 2px solid var(--primary);
      /* optional highlight */
  }

  .size.selected {
      background: var(--primary);
      color: var(--primary-text);
      border-color: var(--primary);
  }

  .sidebar h3 {
      margin: 0 0 18px 0;
      /* font-size: 1.05rem; */
      background-color: var(--primary);
      padding: 0.6rem;
      color: var(--primary-text);
      font-family: var(--title-font);
      font-weight: 200;
      border-radius: 11px;
      text-align: center;
      box-shadow: 2px 18px 23px #6b6b6b5e;
  }

  #closeFiltersBtn {
      visibility: hidden;
  }

  .filter-section {
      margin-bottom: 16px;
  }

  .color.active {
      transform: scale(1.08);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
      border-color: rgba(0, 0, 0, 0.35);
  }

  .size.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
  }

  .checkbox-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-wrap: nowrap;
      align-content: flex-start;
      align-items: flex-start;
  }

  .checkbox-list span {
      text-align: left;
      min-width: 222px;
  }

  .checkbox-list label {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 0.95rem;
      cursor: pointer;
  }

  .price-range {
      display: flex;
      gap: 8px;
      align-items: center;
  }

  .price-range input[type="range"] {
      width: 100%;
      accent-color: var(--primary);
      padding: 0px;
      cursor: pointer;
  }


  /* Update background on input */

  .price-values {
      display: flex;
      gap: 8px;
      justify-content: space-between;
      font-size: 0.85rem;
      margin-top: 6px;
      color: var(--muted);
  }

  .clear-filters {
      display: inline-block;
      margin-top: 6px;
      padding: 8px 12px;
      background: var(--primary);
      cursor: pointer;
      font-weight: 100;
      font-size: 0.9rem;
  }

  /* Product area */
  .products-area {
      min-height: 400px;
  }

  .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
      gap: 16px;

  }

  /* Product card (your original with small tweaks) */
  .product-card {
      overflow: hidden;
      gap: 8px;
      transition: 0.2s ease;
  }

  .shop-products {
      min-width: 0 !important;
  }

  /* Pagination */
  .pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
      flex-wrap: wrap;
  }

  .page-btn {
      padding: 8px 12px;
      border: 1px solid var(--text-dark);
      background: none;
      cursor: pointer;
      color: var(--text-dark);
  }

  .page-btn.active {
      background: var(--primary);
      color: var(--primary-text);
      border-color: var(--primary);
  }

  /* Empty state */
  .empty {
      text-align: center;
      color: var(--muted);
      padding: 60px 12px;
      background: var(--bg);
      border-radius: 12px;
      box-shadow: var(--shadow);
  }

  input[type="checkbox"] {
      accent-color: var(--accent);
      /* simplest modern way */
      width: 18px;
      height: 18px;
      cursor: pointer;
  }

  /* Responsive */
  @media (max-width: 920px) {
      .main-grid {
          grid-template-columns: 260px 1fr;
      }
  }

  @media (max-width: 720px) {
      .main-grid {
          grid-template-columns: 1fr;
      }

      .page {
          padding: 0.5rem 1.5rem 0.5rem 1.5rem;
      }


      .sidebar {
          position: fixed;
          top: 0;
          left: -100%;
          /* hidden initially */
          height: 100%;
          width: 300px;
          /* adjust if needed */
          max-width: 90%;
          padding: 18px;
          border: none;
          box-shadow: var(--shadow);
          overflow-y: auto;
          z-index: 2000;
          transition: left 0.3s ease;
      }

      .sidebar.open {
          left: 0;
      }

      .filters-toggle {
          display: inline-flex !important;
          /* show button */
      }

      .filters-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.35);
          z-index: 1500;
          display: none;
      }

      .filters-overlay.show {
          display: block;
      }

      #closeFiltersBtn {
          display: block;
          /* always visible on mobile */
      }

      .shop-products {
          font-size: small;
      }

      .shop-btn {
          font-size: 10px;
          padding: 0.8rem 0.8rem !important;
      }

      .products-grid {
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }

      .sidedesk {
          display: none;
      }

      .filters-toggle {
          display: inline-flex;
      }
  }

  /* small niceties */
  .muted {
      color: var(--muted);
      font-size: 0.95rem;
  }

  .filters-toggle {
      display: none;
      background: var(--primary);
      color: var(--primary-text);
      border: none;
      padding: 17px 14px;
      /* border-radius: 10px; */
      cursor: pointer;
      height: 100%;
      box-shadow: var(--shadow);
  }

  .colors {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }

  .color {
      width: 30px;
      height: 30px;
      /* border-radius: 50%; */
      cursor: pointer;
      border: 1px solid var(--text-dark);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border-radius: 50%;
  }

  .color:hover {
      outline: 1px solid var(--primary);

  }

  .sizes {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }

  .size {
      padding: 8px 14px;
      border: 1px solid var(--text-dark);
      cursor: pointer;
      font-weight: 500;
      background: var(--bg);
      transition: all 0.2s ease;
      border-radius: 50px;
  }

  .sidebar h1,
  h2,
  h3,
  h4 {
      margin-bottom: 0.5em;
  }

  .size:hover {
      background: var(--primary);
      color: var(--primary-text);
      border-color: var(--primary);
  }

  @media (max-width: 480px) {
      .properties {
          max-width: 95%;
          padding: 0px;
      }

      .category-tab {
          font-size: 11px;
      }

      .product-card-footer {

          padding: 8px !important;
      }

      .product-card-footer .btn {
          font-size: 8px !important;
      }

      .shop-btn {
          font-size: 0.5rem !important;
      }

  }

  .shop-products {
      text-align: center;
      position: relative;
      white-space: normal;
      display: flex;
      flex-direction: column;
      opacity: 1;
      padding: 0 !important;
      /*extre */
      background-color: var(--primary-text);
      border-radius: 15px;
      transition: 0.2s ease-in;
  }

  .shop-products:hover {
      box-shadow: var(--shadow-float);
      transform: translate(-2px, -2px);
  }

  .shop-products .product-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px;
      position: absolute;
      bottom: 0;
      width: 100%;
  }

  .product-discount-badge {
      position: absolute;
      top: 0;
      right: 0;
      background-color: var(--primary);
      color: var(--primary-text);
      padding: 5px 10px;
      font-size: 0.8em;
      font-weight: bold;
      border-radius: 0px 0px 0px 13px;
  }

  .shop-products p {
      font-size: 0.7em;
      color: var(--muted);
      margin-bottom: 53px;
      padding: 0px 24px;
  }

  .shop-btn {
      display: inline-block;
      padding: 5px 10px;
      background: var(--primary-green);
      color: white;
      font-family: var(--font-sans);
      font-weight: 600;
      text-decoration: none;
      border-radius: 11px;
      transition: 0.3s;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.7rem;
      border: 1px solid var(--primary-green);
      cursor: pointer;
  }

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

  .shop-products .product-card-image {
      height: 200px;
      /*margin-bottom: 10px;*/
      display: flex;
      justify-content: center;
      align-items: center;
      /*extra*/
      padding: 1rem;
  }

  .shop-products .product-card-image img {
      height: 100%;
      width: 100%;
      object-fit: contain;
      /*extra*/
      border-radius: 20px;
  }

  .shop-products .product-price {
      font-weight: 700;
      color: var(--text-dark);
      font-size: 17px;
  }

  .shop-products .btn-paint {
      padding: 8px;
      font-size: 13px;
      background: var(--accent);
  }

  main::before {

      content: '';
      position: absolute;
      top: 50%;
      left: -10%;
      width: 50%;
      height: 80%;
      background: var(--primary-orange);
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      z-index: -1;
      opacity: 0.05;

  }


  @media (max-width: 768px) {
      main {
          padding: 1rem;
      }
  }

  /*====================================
=======================================
ONE PRODUCT PAGE
===================================
==================================== */
  .related-products-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(250px, 2fr));
      gap: 20px;
  }


  .single-product {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1rem;
      /*extra*/
  }

  .product-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      border: 1px solid var(--muted);
      padding: 20px;
      background: var(--bg);
      /*extra */
      border-radius: 20px;
      border-color: var(--bg);
      flex-direction: row;

  }

  /* GALLERY */
  .product-gallery {
      flex: 1 1 400px;
  }

  .main-image {
      background: var(--bg);
      /* border-radius: 8px; */
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      width: 100%;
  }

  .main-image img {
      max-width: 100%;
      min-height: 350px;
      object-fit: contain;
      border-radius: 22px;
  }

  .thumbnails {
      display: flex;
      gap: 10px;
      justify-content: center;
  }

  .thumbnails img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .thumbnails img:hover {
      border-color: var(--accent);
      transform: scale(1.05);
  }

  /* DETAILS */
  .product-details {
      flex: 1 1 400px;
  }

  .product-title {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: 10px;
  }

  .product-category {
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 10px;
  }

  .product-category i {
      margin-right: 6px;
      color: var(--accent);
  }

  .product-description {
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 20px;
  }

  .product-info p {
      margin-bottom: 8px;
      font-size: 0.95rem;
      width: 100%;
  }

  .footer-grid .logo img {
      filter: grayscale(1) invert(1);
  }

  .product-info i {
      margin-right: 6px;
      color: var(--primary);
      width: 22px;
  }

  .product-price {
      font-weight: 700;
      color: var(--text-dark);
      font-size: 17px;
  }

  .in-stock {
      color: var(--accent);
      font-weight: 400;
      font-size: 14px;
  }

  /* PROPERTIES */
  .properties {
      margin-top: 1.5rem;
  }

  /* QUANTITY */
  .quantity-section {
      margin-top: 1.5rem;
  }

  .quantity-control {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
  }

  .qty-btn {
      background-color: var(--accent);
      color: var(--accent-text);
      border: none;
      width: 35px;
      height: 35px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s ease;
      /*extra*/
      border-radius: 5px;
  }

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

  #quantity {
      width: 60px;
      text-align: center;
      padding: 9px;
      font-size: 1rem;
  }

  /* BUTTON */
  .btn-add-to-cart {
      margin-top: 1.5rem;
      background-color: var(--primary);
      color: var(--primary-text);
      padding: 20px 30px;
      border: none;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--primary);
      transition: all 0.3s ease;
      /*extra*/
      border-radius: 15px;

  }

  .btn-add-to-cart:hover {
      background-color: var(--bg);
      transform: scale(1.03);
      color: var(--primary);
  }

  .prop-title {
      font-weight: 100;
      font-size: 12px;
      margin-top: 10px;
  }

  .sec-title {
      font-family: var(--title-font);
      margin-top: 40px;
      font-weight: bold;
      font-size: 1.5rem;
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
      .product-container {
          flex-direction: column;
          padding: 15px;
      }

      .product-gallery,
      .product-details {
          flex: 1 1 100%;
      }

      .thumbnails img {
          width: 70px;
          height: 70px;
      }

      .related-products-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 2fr));
          gap: 20px;
      }

      .best-seller {
          padding: 25px;
      }
  }