/*
Theme Name: ALF TOOLS Theme
Theme URI: https://alftools.com
Author: GET MOGGED
Author URI: https://getmogged.co.nz/
Description: Custom WordPress theme for ALF TOOLS - Professional tools designed by tradies, for tradies
Version: 1.0
License: GPL v2 or later
Text Domain: alftools
*/

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

:root {
  --white: #fefdfd;
  --coral: #f8af8c;
  --blue: #036699;
  --orange: #f26623;
  --light-blue: #7cb0ca;
  --light-gray-bg: #f9f9f9;
  --dark-gray: #2a2a2a;
}

html {
  scroll-padding-top: 90px;
}

body {
  font-family: "Chakra Petch", "Arial", sans-serif;
  line-height: 1.6;
  color: var(--dark-gray);
  background: var(--white);
  font-weight: 400;
}

body.home {
  background: var(--white);
}

body.woocommerce-shop,
body.page-template-page-shop {
  background: var(--light-gray-bg);
}

body:not(.home) header {
  background-color: rgba(254, 253, 253, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body:not(.home) nav {
  padding: 15px 0;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Chakra Petch", "Arial", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p,
.features-list li,
.author-info span,
.testimonial-text {
  font-family: "Roboto", "Arial", sans-serif;
  font-weight: 300;
}

h1 {
  font-size: 3rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--blue);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.8rem;
  }
}

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

/* Navigation */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: transparent;
  z-index: 1000;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

header.scrolled {
  background-color: rgba(254, 253, 253, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

nav {
  background: transparent;
  padding: 20px 0;
  transition: padding 0.4s ease;
}

header.scrolled nav {
  padding: 15px 0;
}

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

.logo img {
  height: 75px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: height 0.4s ease, filter 0.4s ease;
}

header.scrolled .logo img,
body:not(.home) .logo img {
  height: 50px;
  filter: none;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 35px;
  align-items: center;
}

.nav-menu a {
  text-decoration: none;
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  transition: color 0.3s;
}

.nav-menu a.active,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
  color: var(--orange);
}

header.scrolled .nav-menu a,
body:not(.home) .nav-menu a {
  color: var(--dark-gray);
}

.nav-menu a:hover {
  color: var(--orange);
}

.phone-cta {
  background: transparent;
  color: var(--white);
  padding: 10px 18px;
  border: 2px solid var(--white);
  border-radius: 0;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-cta:hover {
  background: rgba(255, 255, 255, 0.2);
}

header.scrolled .phone-cta,
body:not(.home) .phone-cta {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

header.scrolled .phone-cta:hover,
body:not(.home) .phone-cta:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--white);
  cursor: pointer;
  transition: color 0.3s;
}

header.scrolled .mobile-menu-toggle,
body:not(.home) .mobile-menu-toggle {
  color: var(--dark-gray);
}

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

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

  .nav-menu.active a {
    color: var(--dark-gray);
  }
  .nav-menu.active a:hover {
    color: var(--orange);
  }
  .nav-menu.active .phone-cta {
    background: var(--orange);
    color: var(--white);
    border-color: var(--orange);
  }
  .nav-menu.active .phone-cta:hover {
    background: var(--blue);
    border-color: var(--blue);
  }

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

/* Inner Page Shared Elements */
.page-header {
  margin-top: 0;
  padding: 80px 0;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

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

.page-header .section-subtitle {
  color: var(--white);
  opacity: 0.9;
}

/* NEW: Video Header Styles */
.video-header {
  position: relative;
  overflow: hidden;
  padding: 120px 0; /* Adjusted padding for better visual */
  background-color: var(--dark-gray); /* Fallback bg color */
}

.video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(3, 102, 153, 0.7), rgba(42, 42, 42, 0.8));
  z-index: 2;
}

.video-content {
  position: relative;
  z-index: 3;
}

body.about-page .page-header {
  background: linear-gradient(rgba(3, 102, 153, 0.7), rgba(42, 42, 42, 0.8)),
    url("image assets/2.jpg") no-repeat center center/cover;
}

body.contact-page .page-header {
  background: linear-gradient(rgba(3, 102, 153, 0.7), rgba(42, 42, 42, 0.8)),
    url("image assets/4.jpg") no-repeat center center/cover;
}

.section-subtitle {
  text-align: center;
  color: #666;
  font-size: 1.2rem;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Roboto", sans-serif;
}

/* Hero Section */
.hero {
  margin-top: 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1; /* Layer 1: The video itself */
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(79, 148, 184, 0.5),
    rgba(106, 106, 106, 0.7)
  );
  z-index: 2; /* Layer 2: The dark overlay */
}

.hero-content {
  position: relative;
  z-index: 3; /* Layer 3: The text and buttons */
}

.hero-text h1 {
  color: var(--white);
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-btn {
  display: inline-block;
  padding: 15px 35px;
  background: var(--orange);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.3s;
  font-size: 1rem;
  letter-spacing: 1px;
  border: 2px solid transparent;
}

.hero-btn:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

/* Section Styles */
section {
  padding: 80px 0;
  background: var(--white);
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.section-subtitle {
  text-align: center;
  color: #666;
  font-size: 1.2rem;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* WooCommerce Styles */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.woocommerce ul.products li.product {
  background: var(--white);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.woocommerce ul.products li.product img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  background: #fff;
  padding: 20px;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--blue);
  font-size: 1.5rem;
  padding: 0 25px;
  margin-top: 20px;
}

.woocommerce ul.products li.product .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--orange);
  margin: 15px 25px;
  font-family: "Chakra Petch", sans-serif;
}

.woocommerce ul.products li.product .button {
  margin: 0 25px 25px;
  padding: 15px 35px;
  background: var(--orange);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s;
  font-size: 1rem;
  text-align: center;
  border-radius: 0;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--blue);
}

/* Footer */
footer {
  background: var(--blue);
  color: var(--white);
  padding: 60px 0 20px;
}

.footer-logo img {
  height: 60px;
  width: auto;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column h4 {
  margin-bottom: 20px;
  color: var(--orange);
}

.footer-column p,
.footer-column a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  line-height: 1.8;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: var(--coral);
}

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

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

.footer-social {
  margin-top: 20px;
  display: flex;
  gap: 15px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  background: var(--orange);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.3s;
}

.footer-social a:hover {
  background: var(--coral);
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 968px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* Animated Sections Styles */

/* Features List */
.features-list {
  list-style: none;
  margin-bottom: 40px;
  padding-left: 0;
}

.features-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
  color: #555;
  font-size: 1.1rem;
}

.features-list i {
  color: var(--orange);
  font-size: 1.2rem;
  margin-top: 4px;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 968px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.service-card {
  min-height: 350px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: transform 0.4s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.new-badge {
  position: absolute;
  width: 140px;
  height: 32px;
  background: var(--orange);
  color: var(--white);
  top: 18px;
  right: -35px;
  text-align: center;
  line-height: 32px;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.service-card:hover {
  transform: scale(1.03);
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  transition: background 0.4s ease;
  z-index: 1;
}

.service-card:hover::before {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

.service-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.service-content h3 {
  color: var(--white);
  font-size: 1.8rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* Contact Page */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}

.contact-info {
  padding: 40px;
  background: var(--blue);
  color: var(--white);
}

.contact-info-image {
  width: 100%;
  height: auto;
  margin: 30px auto 0;
  display: block;
}

.contact-info h3 {
  color: var(--white);
  margin-bottom: 30px;
  font-size: 1.8rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 25px;
}

.contact-item i {
  font-size: 1.5rem;
  color: var(--orange);
  width: 30px;
  margin-top: 5px;
}

.contact-item p {
  margin: 0;
  line-height: 1.4;
}

.contact-item p:first-of-type {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-family: "Chakra Petch";
}

.contact-form {
  background: var(--blue);
  padding: 40px;
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--white);
  text-transform: uppercase;
  font-size: 0.9rem;
  font-family: "Chakra Petch";
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  font-size: 1rem;
  transition: border-color 0.3s;
  background: var(--white);
}

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

.form-group select {
  width: 100%;
  padding: 12px 40px 12px 12px;
  border: 1px solid #ddd;
  font-size: 1rem;
  transition: border-color 0.3s;
  background: var(--white);
  cursor: pointer;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.form-group select:hover {
  border-color: var(--orange);
}

.form-group select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 102, 35, 0.1);
}

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

.form-submit {
  background: var(--orange);
  color: var(--white);
  padding: 15px 40px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
  font-family: "Chakra Petch";
}

.form-submit:hover {
  background: var(--blue);
}

/* Ruler Marquee Section */
.ruler-marquee-section {
  padding: 20px 0;
  overflow: hidden;
}

.ruler-marquee-wrap {
  width: 100% !important;
  overflow: hidden;
}

.ruler-marquee {
  display: flex;
  width: fit-content;
  animation: scroll-ruler 80s linear infinite;
}

.ruler-marquee svg {
  flex-shrink: 0;
  color: var(--orange);
}

.ruler-bg-orange {
  background: var(--orange);
}

.ruler-white .ruler-marquee svg {
  color: var(--white);
}

@keyframes scroll-ruler {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Spirit Levels Section */
.spirit-levels-section .section-title {
  color: var(--orange);
}

.spirit-level-layout {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* MODIFICATION: Updated for 2-column layout */
.spirit-level-details-box {
  background: var(--blue);
  color: var(--white);
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.spirit-level-details-box .level-features-content h3 {
  color: var(--white);
  margin-bottom: 25px;
  font-size: 1.8rem;
}

.spirit-level-details-box .features-list li {
  color: rgba(255, 255, 255, 0.9);
  align-items: center;
}

.spirit-level-details-box .features-list i {
  color: var(--orange);
}

.spirit-level-details-box .section-cta-container {
  text-align: left;
  margin-top: 30px;
}

.spirit-level-features-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* MODIFICATION: New styles for full-width image section */
.full-width-image-section {
  padding: 10px 20px; /* Slight padding */
  background: var(--white);
}

.full-width-image-section img {
  width: 100%;
  height: auto;
  display: block; /* Removes bottom space */
  border-radius: 0; /* No rounded corners */
}

/* Launch Section */
.launch-section {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f4f4f4;
  align-items: center;
}

.launch-content {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.launch-content h2 {
  color: var(--blue);
}

.launch-content .tagline {
  color: var(--orange);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.launch-content p {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.8;
}

.launch-content .hero-btn {
  margin-top: 20px;
  align-self: flex-start;
}

/* MODIFICATION: Changed from slider to video container */
.launch-video {
  min-height: 400px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.launch-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Attachment Sections */
@keyframes floatAnimation {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-15px);
  }
}

.attachment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.attachment-grid.reverse .attachment-image {
  order: -1;
}

.attachment-image {
  background-color: var(--orange);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-image img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 10px 20px rgba(42, 42, 42, 0.3));
  animation: floatAnimation 3s ease-in-out infinite alternate;
}

.attachment-content h2 {
  color: var(--orange);
  margin-bottom: 20px;
  font-size: 2.2rem;
}

.attachment-content h3 {
  color: var(--blue);
  margin-top: 10px;
  margin-bottom: 20px;
}

.attachment-content .features-list {
  margin-bottom: 20px;
}

.attachment-content .hero-btn {
  margin-top: 10px;
}

/* Best Sellers Section */
.bestsellers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bestseller-card {
  min-height: 350px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: transform 0.4s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.bestseller-card:hover {
  transform: scale(1.03);
}

.bestseller-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  transition: background 0.4s ease;
}

.bestseller-card:hover::before {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

.bestseller-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bestseller-content h3 {
  color: var(--white);
  font-size: 1.8rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* Card CTA Button */
.card-btn {
  padding: 12px 28px;
  font-size: 0.9rem;
  margin-top: 20px;
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.service-card:hover .card-btn,
.bestseller-card:hover .card-btn {
  opacity: 1;
  transform: translateY(0);
}

.card-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(0) !important;
}

/* Full Range CTA Section */
.full-range-promo {
  padding: 0;
}

.full-range-cta-container {
  min-height: 620px;
  background: linear-gradient(rgba(3, 102, 153, 0.6), rgba(42, 42, 42, 0.8)),
    url("https://alftools.previews.co.nz/wp-content/uploads/2025/10/11.jpg")
      no-repeat center center/cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.full-range-cta-container h2 {
  color: var(--white);
  font-size: 2.2rem;
}

/* Gallery Marquee Section */
.gallery {
  padding: 0;
  overflow: hidden;
}

.gallery-marquee-wrap {
  width: 100%;
  overflow: hidden;
}

.gallery-marquee {
  display: flex;
  width: fit-content;
  animation: scroll 40s linear infinite;
}

@media (max-width: 768px) {
  .gallery {
	   display: none;
	}
}

.gallery-marquee img {
  height: 200px;
  max-height: 400px;
  width: auto;
  object-fit: contain;
  padding: 10px 15px;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Stockist Banner Section */
#stockist-promo {
  background: var(--blue);
  padding: 60px 0;
}

.promo-banner-content {
  text-align: center;
  color: var(--white);
}

.promo-banner-content h2 {
  color: var(--white);
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.promo-banner-content p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 2rem auto;
  color: var(--white);
}

/* Responsive Styles */
@media (max-width: 968px) {
  .spirit-level-details-box {
    grid-template-columns: 1fr;
  }
  
  .spirit-level-image-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .launch-section {
    grid-template-columns: 1fr;
  }

  .launch-content {
    padding: 40px 20px;
  }
  
  .launch-video {
    order: -1; /* Video appears above text on mobile */
  }

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

  .attachment-grid.reverse .attachment-image {
    order: initial;
  }

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

@media (max-width: 600px) {
  .spirit-level-product-grid {
    grid-template-columns: 1fr;
  }

  .spirit-level-details-box {
    padding: 30px 20px;
  }

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

/* Inner Page Shared Elements */
.page-header {
  padding: 80px 0;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body.woocommerce-shop .page-header {
	margin-top: 60px;
}

.page-header h1 {
  color: var(--white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-header .section-subtitle {
  color: var(--white);
  opacity: 0.9;
}

/* About Page Styles */
.about {
  background: var(--orange);
}

.about .section-title {
  color: var(--white);
}

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

.about-text {
  background: var(--white);
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-text h3 {
  color: var(--orange);
  margin-bottom: 20px;
}

.about-text p {
  margin-bottom: 20px;
  color: #555;
  line-height: 1.8;
  font-family: "Roboto", sans-serif;
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.about-feature {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Roboto", sans-serif;
  color: var(--dark-gray);
  font-weight: bold;
}

.about-feature i {
  color: var(--orange);
  font-size: 1.4rem;
}

.about-image-side {
  height: 80%;
}

.about-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-image {
  grid-column: 1 / -1;
  text-align: center;
}

.about-image img {
  max-width: 60%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 40px auto 0;
}

/* Why Choose Section */
.why-choose {
  background: var(--orange);
  padding: 60px 0;
}

.why-choose .section-title,
.why-choose .section-subtitle {
  color: var(--white);
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.why-card {
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.why-card i {
  font-size: 2.5rem;
  color: var(--blue);
  margin-bottom: 20px;
}

.why-card h3 {
  color: var(--dark-gray);
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.why-card p {
  color: #666;
  line-height: 1.8;
  font-family: "Roboto", sans-serif;
}

.why-card-image {
  background-size: cover;
  background-position: center;
  min-height: 300px;
  border: 2px solid var(--white);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.why-card-image:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Testimonials Section */
.testimonials {
  background: var(--blue);
  color: var(--white);
  padding: 80px 0;
}

.testimonials .section-title,
.testimonials .section-subtitle {
  color: var(--white);
}

.testimonials .section-subtitle {
  opacity: 0.9;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 20px;
  line-height: 1.8;
  font-size: 1.05rem;
  font-family: "Roboto", sans-serif;
  color: var(--white);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  font-family: "Chakra Petch", sans-serif;
  color: var(--white);
}

.author-info h4 {
  margin-bottom: 5px;
  font-size: 1rem;
  color: var(--white);
  font-family: "Chakra Petch", sans-serif;
  text-transform: uppercase;
}

.author-info span {
  opacity: 0.9;
  font-size: 0.9rem;
  font-family: "Roboto", sans-serif;
}

.stars {
  color: var(--coral);
  margin-bottom: 15px;
}

/* Contact Page Styles */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}

/* Active Menu Item Styles */
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current-menu-parent > a,
.nav-menu .current_page_parent > a,
.nav-menu .current_page_ancestor > a {
  color: var(--orange) !important;
}

/* For scrolled header */
header.scrolled .nav-menu .current-menu-item > a,
header.scrolled .nav-menu .current_page_item > a,
header.scrolled .nav-menu .current-menu-ancestor > a,
header.scrolled .nav-menu .current-menu-parent > a {
  color: var(--orange) !important;
}

/* For non-home pages */
body:not(.home) .nav-menu .current-menu-item > a,
body:not(.home) .nav-menu .current_page_item > a,
body:not(.home) .nav-menu .current-menu-ancestor > a,
body:not(.home) .nav-menu .current-menu-parent > a {
  color: var(--orange) !important;
}

/* For WooCommerce shop page */
body.woocommerce-shop .nav-menu li.menu-item-shop > a,
body.single-product .nav-menu li.menu-item-shop > a,
body.archive.tax-product_cat .nav-menu li.menu-item-shop > a {
  color: var(--orange) !important;
}

/* Mobile menu active states */
.nav-menu.active .current-menu-item > a,
.nav-menu.active .current_page_item > a {
  color: var(--orange) !important;
}

/* Shop Page */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: flex-start;
}

.filter-sidebar {
  position: sticky;
  top: 120px; /* Header height (90px) + 30px space */
  background: var(--white);
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.filter-sidebar h3 {
  color: var(--blue);
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--orange);
  font-size: 1.2rem;
}

.filter-sidebar ul {
  list-style: none;
}

.filter-sidebar ul li {
  margin-bottom: 10px;
}

.filter-sidebar a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: var(--dark-gray);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.filter-sidebar a:hover {
  background: var(--light-gray-bg);
  color: var(--orange);
  border-left-color: var(--orange);
}

.filter-sidebar a.active {
  background: var(--light-gray-bg);
  color: var(--orange);
  font-weight: 700;
  border-left-color: var(--orange);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.product-card {
  background: var(--white);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s, display 0.3s;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.product-image {
  width: 100%;
  height: 280px;
  object-fit: contain;
  background: #fff;
  padding: 20px;
}

.product-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-content h3 {
  color: var(--blue);
}

.product-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
  flex-grow: 1;
}

.product-price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 20px;
  font-family: "Chakra Petch", sans-serif;
}

.product-btn {
  display: inline-block;
  padding: 15px 35px;
  background: var(--orange);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s;
  font-size: 1rem;
  text-align: center;
}

.product-btn:hover {
  background: var(--blue);
}

/* WooCommerce Shop Page Fixes */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0;
  padding: 0;
}

.woocommerce ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: var(--white);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Product Image Container */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 280px !important;
  object-fit: contain !important;
  background: #fff;
  padding: 20px;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Product Content Area */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  color: var(--blue) !important;
  font-size: 1.5rem !important;
  padding: 20px 25px 10px 25px !important;
  margin: 0 !important;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

/* Product Description (if using excerpt) */
.woocommerce ul.products li.product .product-description,
.woocommerce ul.products li.product p {
  padding: 0 25px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
  font-family: "Roboto", sans-serif;
}

/* Price Styling */
.woocommerce ul.products li.product .price {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  margin: 15px 25px !important;
  font-family: "Chakra Petch", sans-serif;
  display: block;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 700;
}

.woocommerce ul.products li.product .price del {
  opacity: 0.5;
  font-size: 1.4rem;
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 0 25px 25px 25px !important;
  padding: 15px 35px !important;
  background: var(--orange) !important;
  color: var(--white) !important;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s;
  font-size: 1rem !important;
  text-align: center;
  border-radius: 0 !important;
  display: inline-block;
  border: none !important;
  font-family: "Chakra Petch", sans-serif;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
  background: var(--blue) !important;
  color: var(--white) !important;
}

/* Remove default WooCommerce spacing */
.woocommerce ul.products li.product .onsale {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  padding: 5px 10px;
  font-weight: 700;
  text-transform: uppercase;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  margin: 0 !important;
}

/* Shop Layout with Sidebar */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* Responsive Grid */
@media (max-width: 1200px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* Remove WooCommerce default columns */
.woocommerce .products.columns-3,
.woocommerce .products.columns-4 {
  display: grid !important;
}

/* Fix WooCommerce Shop Page Gap */

/* Remove the shop loop header completely */
.woocommerce-products-header {
  display: none !important;
}

/* Remove result count and sorting */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering,
.woocommerce nav.woocommerce-pagination {
  display: none !important;
}

/* Remove before/after shop loop wrappers */
.woocommerce .products::before,
.woocommerce .products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

/* Remove any top margin/padding from products grid */
.woocommerce ul.products {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure products section doesn't have extra spacing */
.products-section {
  padding-top: 0;
  margin-top: 0;
}

/* Remove WooCommerce notices margin if on shop page */
.woocommerce-shop .woocommerce-notices-wrapper {
  margin-bottom: 0;
}

/* Clear floats that might be causing issues */
.woocommerce ul.products {
  clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  clear: both;
  display: table;
  content: "";
}

/* Ensure the first product doesn't have extra margin */
.woocommerce ul.products li.product:first-child {
  margin-top: 0 !important;
}

/* Fix any breadcrumb spacing */
.woocommerce .woocommerce-breadcrumb {
  display: none; /* or margin-bottom: 0 if you want to keep it */
}

/* Responsive Tweaks for Inner Pages */
@media (max-width: 1200px) {
  .why-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 968px) {
  .contact-content {
    grid-template-columns: 1fr;
  }
  .about-content {
    grid-template-columns: 1fr;
  }
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .filter-sidebar {
    position: static;
    top: auto;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .why-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .about-features {
    grid-template-columns: 1fr;
  }
}


/* Cart Icon Styles */
.nav-cart {
  position: relative;
}

.cart-icon-link {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px;
  transition: all 0.3s;
}

.cart-icon-link i {
  font-size: 1.2rem;
  transition: all 0.3s;
}

/* Cart Count Bubble */
.cart-count-bubble {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--orange);
  color: var(--white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: "Chakra Petch", sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: pulse 2s infinite;
}

/* Pulse animation for new items */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Different states for cart icon */
header:not(.scrolled) .cart-icon-link {
  color: var(--white);
}

header.scrolled .cart-icon-link,
body:not(.home) .cart-icon-link {
  color: var(--dark-gray);
}

.cart-icon-link:hover {
  color: var(--orange) !important;
  transform: scale(1.1);
}

/* Ensure bubble stays orange */
.cart-count-bubble {
  background: var(--orange) !important;
  color: var(--white) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .nav-menu.active .cart-icon-link {
    color: var(--dark-gray);
  }

  .nav-cart {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 0;
  }

  .cart-icon-link {
    justify-content: center;
  }

  .cart-count-bubble {
    right: 45%;
  }
}

/* ============================================
   WOOCOMMERCE SINGLE PRODUCT PAGE STYLES
   ============================================ */

/* Single Product - Add to Cart Button */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  padding: 15px 35px !important;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s;
  font-family: "Chakra Petch", sans-serif;
  border: 2px solid var(--orange) !important;
  font-size: 1rem !important;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.single_add_to_cart_button:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--white) !important;
}

/* Disabled state for Add to Cart */
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled:hover {
  background: #ccc !important;
  border-color: #ccc !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================
   CART NOTIFICATION MESSAGE
   ============================================ */

/* Success message container */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 60px !important;
}

.woocommerce-message::before {
  content: "\2713" !important;
  color: var(--orange) !important;
  font-weight: 700;
  font-size: 14px;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  line-height: 1;
}

/* Info messages with blue */
.woocommerce-info {
  border-top-color: var(--blue) !important;
}

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

/* Error messages stay warning color but match style */
.woocommerce-error {
  border-top-color: #e74c3c !important;
}

/* View Cart button in message */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  padding: 10px 20px !important;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--orange) !important;
  float: right;
  font-family: "Chakra Petch", sans-serif;
  text-decoration: none;
  transition: all 0.3s;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--white) !important;
}

/* Remove default before element and use better spacing */
.woocommerce-message {
  border-top: 3px solid var(--orange) !important;
  border-radius: 0 !important;
  background: #fff;
  padding: 1.5em 2em 1.5em 3.5em !important; /* More left padding */
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Position tick properly */
.woocommerce-message::before {
  content: "\2713" !important; /* Checkmark */
  color: var(--orange) !important;
  font-weight: 700;
  font-size: 1.2em;
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* Alternative: Use Font Awesome icon instead */
.woocommerce-message::before {
  content: "\f00c" !important; /* Font Awesome check */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  color: var(--orange) !important;
  position: absolute;
  left: 1.2em;
  top: 50%;
  transform: translateY(-50%);
}

/* Ensure message text has proper spacing */
.woocommerce-message a.button {
  float: right;
  margin-left: 20px; /* Space between text and button */
}

/* Fix for info and error messages too */
.woocommerce-info {
  border-top: 3px solid var(--blue) !important;
  padding: 1.5em 2em 1.5em 3.5em !important;
}

.woocommerce-info::before {
  color: var(--blue) !important;
  position: absolute;
  left: 1.2em;
  top: 50%;
  transform: translateY(-50%);
}

.woocommerce-error {
  padding: 1.5em 2em 1.5em 3.5em !important;
}

.woocommerce-error::before {
  position: absolute;
  left: 1.2em;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================
   PRODUCT & CATEGORY LINKS
   ============================================ */

/* Product links */
.woocommerce div.product .product_meta a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-breadcrumb a,
.woocommerce .star-rating,
.woocommerce p.stars a,
.woocommerce-product-rating a,
.woocommerce-review-link {
  color: var(--dark-gray) !important;
  text-decoration: none;
  transition: color 0.3s;
}

.woocommerce div.product .product_meta a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-breadcrumb a:hover,
.woocommerce-product-rating a:hover,
.woocommerce-review-link:hover {
  color: var(--orange) !important;
}

/* Active tab */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--orange) !important;
  border-bottom: 2px solid var(--orange);
}

/* Category links in meta */
.product_meta .posted_in a,
.product_meta .tagged_as a {
  color: var(--dark-gray) !important;
  font-weight: 600;
}

.product_meta .posted_in a:hover,
.product_meta .tagged_as a:hover {
  color: var(--orange) !important;
}

/* ============================================
   ADDITIONAL BUTTON STYLES
   ============================================ */

/* All WooCommerce buttons - no rounded corners */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  border-radius: 0 !important;
  font-family: "Chakra Petch", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.3s;
}

/* Secondary buttons (like "Clear" in variations) */
.woocommerce a.reset_variations {
  color: var(--dark-gray) !important;
  text-decoration: underline;
}

.woocommerce a.reset_variations:hover {
  color: var(--orange) !important;
}

/* ============================================
   QUANTITY BUTTONS
   ============================================ */

/* Container alignment */
.woocommerce div.product form.cart {
  display: flex;
  align-items: stretch; /* Make all items same height */
}

/* 1. Stack the variations table and the add-to-cart section vertically */
.woocommerce div.product form.cart.variations_form {
    display: block; /* Override the default flex-row behavior */
	margin-top: 20px;
}

/* 2. Style the container for the quantity input and button */
.woocommerce-variation-add-to-cart {
    display: flex;      /* Make this a flex container */
    flex-wrap: nowrap;  /* Ensure items stay on one line */
    gap: 15px;          /* Add space between the quantity and button */
    margin-top: 20px;   /* Add space above, below the variations dropdown */
}

/* 3. Make the button grow to fill available space */
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    flex-grow: 0; 
    white-space: nowrap;    /* Prevent the text inside the button from wrapping */
}

/* 4. Ensure the quantity input doesn't grow */
.woocommerce-variation-add-to-cart .quantity {
    flex: 0 0 auto; /* Prevent the quantity box from growing or shrinking */
}

.woocommerce div.product form.cart div.quantity {
  margin-right: 20px;
  display: flex;
}

/* Quantity input - match button height */
.woocommerce .quantity .qty {
  border: 2px solid #ddd;
  border-radius: 0 !important;
  padding: 15px 20px !important; /* Match button padding */
  font-weight: 700;
  font-family: "Chakra Petch", sans-serif;
  font-size: 1rem;
  height: auto;
  min-height: 52px; /* Match button height */
  width: 80px;
  text-align: center;
}

.woocommerce .quantity .qty:focus {
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 102, 35, 0.1);
}

/* Ensure Add to Cart button has consistent height */
.woocommerce div.product form.cart .single_add_to_cart_button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* If using quantity buttons (+ and -) */
.woocommerce .quantity {
  display: inline-flex;
  align-items: stretch;
}

.woocommerce .quantity input[type="button"] {
  height: 52px !important;
  width: 40px;
  border: 2px solid #ddd;
  background: var(--white);
  color: var(--dark-gray);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.3s;
}

.woocommerce .quantity input[type="button"]:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

/* ============================================
   PRODUCT VARIATIONS
   ============================================ */

/* Variation dropdown styling */
.woocommerce div.product form.cart .variations select {
  border-radius: 0 !important;
  border: 2px solid #ddd;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  transition: all 0.3s;
}

.woocommerce div.product form.cart .variations select:focus {
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 102, 35, 0.1);
}

/* ============================================
   PRODUCT PRICE
   ============================================ */

/* Single product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--orange) !important;
  font-size: 2rem !important;
  font-weight: 700;
  font-family: "Chakra Petch", sans-serif;
}

/* Sale price */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: #999 !important;
  font-size: 1.5rem !important;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none;
  color: var(--orange) !important;
}

/* ============================================
   PRODUCT IMAGES & GALLERY
   ============================================ */

/* Remove border radius from product images */
.woocommerce div.product div.images img {
  border-radius: 0 !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: 0 !important;
}

/* Gallery thumbnail hover */
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border: 2px solid var(--orange) !important;
}

/* ============================================
   PRODUCT TABS
   ============================================ */

/* Remove all default borders and backgrounds */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border: none !important;
  background: none !important;
  margin-bottom: 30px;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 30px 0 0;
  padding: 0;
  border-bottom: 3px solid transparent !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--dark-gray) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Chakra Petch", sans-serif;
  padding: 10px 0;
  display: inline-block;
  border: none !important;
  background: none !important;
}

/* Active tab with orange underline only */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: none !important;
  border: none !important;
  border-bottom: 3px solid var(--orange) !important;
  margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--orange) !important;
  background: none !important;
}

/* Remove panel borders */
.woocommerce div.product .woocommerce-tabs .panel {
  border: none !important;
  background: none !important;
  padding: 20px 0;
}

/* Alternative cleaner tab style with bottom border */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid #eee !important;
  display: flex;
  align-items: flex-end;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  margin-bottom: -2px !important; /* Overlap the border */
}

/* Remove any before/after pseudo elements that might create borders */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

/* ============================================
   RELATED PRODUCTS
   ============================================ */

/* Related products section */
.woocommerce .related.products h2 {
  color: var(--blue);
  text-transform: uppercase;
  font-family: "Chakra Petch", sans-serif;
  margin-bottom: 30px;
}

/* ============================================
   SALE BADGE
   ============================================ */

.woocommerce span.onsale {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  padding: 10px 15px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Chakra Petch", sans-serif;
  min-width: auto;
}

/* ============================================
   REVIEWS
   ============================================ */

/* Review submit button */
.woocommerce #review_form #respond .form-submit input {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  padding: 15px 35px !important;
  border: 2px solid var(--orange) !important;
}

.woocommerce #review_form #respond .form-submit input:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* Star rating color */
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
  color: var(--orange) !important;
}

/* ============================================
   WOOCOMMERCE CART & CHECKOUT OVERRIDES
   ============================================ */

/* 1. Cart Page - Dark Grey Links & No Rounded Borders */
/* Only target links within the main WooCommerce content area */
.woocommerce-cart .woocommerce a:not(.button),
.woocommerce-cart .woocommerce a:not(.button):hover,
.woocommerce-cart .woocommerce a:not(.button):focus,
.woocommerce-cart .woocommerce a:not(.button):visited,
.woocommerce-cart .entry-content a:not(.button),
.woocommerce-cart main a:not(.button):not(.cart-icon-link):not(.phone-cta) {
  color: var(--dark-gray) !important;
  text-decoration: none;
}

.woocommerce-cart .woocommerce a:not(.button):hover,
.woocommerce-cart .entry-content a:not(.button):hover,
.woocommerce-cart
  main
  a:not(.button):not(.cart-icon-link):not(.phone-cta):hover {
  color: var(--orange) !important;
}

/* Exclude footer links from the override */
.woocommerce-cart footer a,
.woocommerce-cart footer a:hover,
.woocommerce-cart footer a:visited,
.woocommerce-checkout footer a,
.woocommerce-checkout footer a:hover,
.woocommerce-checkout footer a:visited {
  color: rgba(255, 255, 255, 0.8) !important;
}

.woocommerce-cart footer a:hover,
.woocommerce-checkout footer a:hover {
  color: var(--coral) !important;
}

/* Also exclude header navigation links */
.woocommerce-cart header a,
.woocommerce-cart header a:hover,
.woocommerce-cart header a:visited,
.woocommerce-checkout header a,
.woocommerce-checkout header a:hover,
.woocommerce-checkout header a:visited {
  color: inherit !important;
}

/* More specific targeting for cart table links */
.woocommerce table.cart a:not(.button),
.woocommerce .cart-collaterals a:not(.button),
.woocommerce .woocommerce-cart-form a:not(.button) {
  color: var(--dark-gray) !important;
  text-decoration: underline;
}

.woocommerce table.cart a:not(.button):hover,
.woocommerce .cart-collaterals a:not(.button):hover,
.woocommerce .woocommerce-cart-form a:not(.button):hover {
  color: var(--orange) !important;
}

/* Checkout page links - more specific */
.woocommerce-checkout .woocommerce a:not(.button),
.woocommerce-checkout .woocommerce-checkout-review-order-table a:not(.button) {
  color: var(--dark-gray) !important;
}

.woocommerce-checkout .woocommerce a:not(.button):hover,
.woocommerce-checkout
  .woocommerce-checkout-review-order-table
  a:not(.button):hover {
  color: var(--orange) !important;
}

/* Rest of your existing CSS for removing rounded borders stays the same */
/* Remove ALL rounded borders on cart/checkout */
.woocommerce-cart input,
.woocommerce-cart select,
.woocommerce-cart textarea,
.woocommerce-cart .input-text,
.woocommerce-cart .button,
.woocommerce-cart button,
.woocommerce-cart .woocommerce-input-wrapper,
.woocommerce-cart .select2-container .select2-selection,
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .input-text,
.woocommerce-checkout .button,
.woocommerce-checkout button,
.woocommerce-checkout .woocommerce-input-wrapper,
.woocommerce-checkout .select2-container .select2-selection,
.woocommerce table.shop_table,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce .checkout_coupon,
.woocommerce #payment,
.woocommerce #payment .payment_box,
.woocommerce .woocommerce-checkout-payment,
.woocommerce .woocommerce-form__label-for-checkbox span,
.woocommerce-checkout .woocommerce-checkout-review-order {
  border-radius: 0 !important;
}

/* Style Place Order button */
#place_order {
  background: var(--orange) !important;
  color: var(--white) !important;
  border: 2px solid var(--orange) !important;
  border-radius: 0 !important;
  padding: 15px 35px !important;
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
  margin-top: 20px;
}

#place_order:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* Fix for Privacy Policy and other standard pages without page headers */
body.page:not(.home):not(.about-page):not(.shop-page):not(.contact-page):not(
    .woocommerce-shop
  )
  main,
body.page:not(.home):not(.about-page):not(.shop-page):not(.contact-page):not(
    .woocommerce-shop
  )
  .site-content,
body.privacy-policy main,
body.privacy-policy .site-content {
  padding-top: 60px; /* Header height + some breathing room */
  padding-bottom: 80px; /* Bottom padding */
}

/* Alternative: If your privacy policy has a specific page class */
body.page-template-default:not(.home) main {
  padding-top: 60px;
  padding-bottom: 80px;
}

/* If the content is in an article or entry-content */
body.page:not(.home):not(.about-page):not(.shop-page):not(.contact-page)
  article.page,
body.page:not(.home):not(.about-page):not(.shop-page):not(.contact-page)
  .entry-content {
  min-height: 50vh; /* Ensures there's enough content height */
}

/* Specific targeting for privacy policy if it has a unique class or ID */
body.privacy-policy .entry-content,
body.page-id-privacy .entry-content,
#post-3 .entry-content {
  /* Replace 3 with your actual privacy policy page ID */
  padding-top: 40px;
}

.wp-block-heading {
  margin-top: 40px;
}

/* ============================================
   WOOCOMMERCE BLOCKS - CART PAGE STYLING
   ============================================ */

/* Proceed to Checkout button - WooCommerce Blocks version (Cart page only) */
.wc-block-cart__submit-container a,
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit-button.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-button.wc-block-cart__submit-button {
  background: var(--orange) !important;
  background-color: #f26623 !important;
  color: #ffffff !important;
  padding: 15px 35px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 2px solid #f26623 !important;
  font-family: "Chakra Petch", sans-serif !important;
  font-size: 1rem !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  width: 100% !important; /* Full width on cart page */
  box-shadow: none !important;
}

/* Place Order button - Checkout page (NOT full width) */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-components-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button,
#place_order,
.woocommerce-checkout button#place_order {
  background: var(--orange) !important;
  background-color: #f26623 !important;
  color: #ffffff !important;
  padding: 15px 35px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 2px solid #f26623 !important;
  font-family: "Chakra Petch", sans-serif !important;
  font-size: 1rem !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  box-shadow: none !important;
  display: inline-block !important; /* NOT full width */
  width: auto !important; /* Natural width */
  margin-left: 10px !important; /* Space from "Return to cart" link */
}

/* Hover states for all buttons */
.wc-block-cart__submit-container a:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button.wc-block-components-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions
  .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
#place_order:hover,
.woocommerce-checkout button#place_order:hover {
  background: var(--blue) !important;
  background-color: #036699 !important;
  border-color: #036699 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.wc-block-checkout__actions,
.woocommerce-checkout-payment .form-row.place-order {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Return to cart link styling */
.wc-block-checkout__actions a,
.woocommerce-checkout-payment .back-to-cart {
  color: var(--dark-gray) !important;
  text-decoration: underline;
  font-size: 0.95rem;
}

.wc-block-checkout__actions a:hover,
.woocommerce-checkout-payment .back-to-cart:hover {
  color: var(--orange) !important;
}

/* Mobile responsive - stack on mobile */
@media (max-width: 768px) {
  .wc-block-checkout__actions,
  .woocommerce-checkout-payment .form-row.place-order {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .wc-block-checkout__actions a,
  .woocommerce-checkout-payment .back-to-cart {
    margin: 0 0 10px 0 !important;
    text-align: center;
    order: 1;
  }

  .wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
  #place_order {
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    order: 2;
  }
}

.wc-block-cart__submit-container a,
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit-button.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-cart__submit-container a *,
.wc-block-cart__submit-container .wc-block-cart__submit-button *,
.wc-block-cart__submit-button.wc-block-components-button * {
  color: #ffffff !important;
}

.wc-block-cart__submit-container a span,
.wc-block-cart__submit-button span,
.wc-block-components-button.wc-block-cart__submit-button span {
  color: #ffffff !important;
}

.wc-block-cart__submit-container a:hover,
.wc-block-cart__submit-container a:hover *,
.wc-block-cart__submit-container a:hover span,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover *,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover span {
  color: #ffffff !important;
}

/* ==================================================
   NEW STYLES FOR SPIRIT LEVEL & PROMO BANNER
   ================================================== */

/* Spirit Level Product Cards Grid */
.spirit-level-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.spirit-level-card {
  background: var(--white);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.spirit-level-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.spirit-level-card img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: #fdfdfd;
  padding: 20px;
}

.spirit-level-card-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.spirit-level-card-content h3 {
  color: var(--blue);
  font-size: 1.3rem;
  margin-bottom: 15px;
}

.spirit-level-card-content p {
  color: #666;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  flex-grow: 1;
}

/* ALF SET Promotional Banner */
#alf-set-promo {
  background: var(--white);
  padding: 80px 0;
}

.promo-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.promo-banner-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(42, 42, 42, 0.2));
}

.promo-banner-content h2 {
  color: var(--orange);
  font-size: 2.8rem;
  margin-bottom: 10px;
}

.promo-banner-content h3 {
  color: var(--blue);
  font-size: 1.4rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.promo-banner-content p {
  font-family: "Roboto", sans-serif;
  color: #555;
  margin-bottom: 30px;
}

.promo-price {
  font-family: "Chakra Petch", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 30px;
}

.promo-banner-content .hero-btn {
  align-self: flex-start;
}

/* Responsive styles for new sections */
@media (max-width: 968px) {
  .promo-banner-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .promo-banner-content .hero-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .spirit-level-product-grid {
    grid-template-columns: 1fr;
  }
  .promo-banner-content h2 {
    font-size: 2.2rem;
  }
  .promo-price {
    font-size: 2.5rem;
  }
}

/* ============================================
   FIX: WordPress Block Product Buttons on Cart Page
   ============================================ */

/* Fix for block-based product buttons on cart page */
.woocommerce-cart .wp-block-button__link.add_to_cart_button,
.woocommerce-cart .wp-block-button__link.ajax_add_to_cart,
.woocommerce-cart .wp-block-button__link,
body.woocommerce-cart .wp-block-button__link.add_to_cart_button,
body.woocommerce-cart .wp-block-button__link.ajax_add_to_cart {
    background: var(--orange) !important;
    color: var(--white) !important;
    border: 2px solid var(--orange) !important;
    padding: 15px 35px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-family: "Chakra Petch", sans-serif !important;
    display: inline-block !important;
    transition: all 0.3s !important;
}

/* Hover state */
.woocommerce-cart .wp-block-button__link.add_to_cart_button:hover,
.woocommerce-cart .wp-block-button__link.ajax_add_to_cart:hover,
.woocommerce-cart .wp-block-button__link:hover,
body.woocommerce-cart .wp-block-button__link.add_to_cart_button:hover,
body.woocommerce-cart .wp-block-button__link.ajax_add_to_cart:hover {
    background: var(--blue) !important;
    color: var(--white) !important;
    border-color: var(--blue) !important;
}

/* Make absolutely sure text is white */
.woocommerce-cart .wp-block-button__link.add_to_cart_button *,
.woocommerce-cart .wp-block-button__link.ajax_add_to_cart *,
.woocommerce-cart .wp-block-button__link span,
body.woocommerce-cart .wp-block-button__link {
    color: var(--white) !important;
}

/* Fix for loading state */
.woocommerce-cart .wp-block-button__link.loading {
    color: var(--white) !important;
    opacity: 0.7;
}

/* Fix for added to cart state */
.woocommerce-cart .wp-block-button__link.added,
.woocommerce-cart a.added_to_cart {
    background: var(--blue) !important;
    color: var(--white) !important;
}

/* Global fix for ALL block buttons in WooCommerce contexts */
.woocommerce .wp-block-button__link,
.woocommerce-page .wp-block-button__link,
.wp-block-woocommerce-all-products .wp-block-button__link,
.wp-block-woocommerce-best-selling-products .wp-block-button__link,
.wp-block-woocommerce-featured-product .wp-block-button__link,
.wp-block-woocommerce-handpicked-products .wp-block-button__link,
.wp-block-woocommerce-product-category .wp-block-button__link,
.wp-block-woocommerce-product-new .wp-block-button__link,
.wp-block-woocommerce-product-on-sale .wp-block-button__link,
.wp-block-woocommerce-product-top-rated .wp-block-button__link,
.wp-block-woocommerce-products-by-attribute .wp-block-button__link {
    background: var(--orange) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
}

/* Hover for all WooCommerce block buttons */
.woocommerce .wp-block-button__link:hover,
.woocommerce-page .wp-block-button__link:hover {
    background: var(--blue) !important;
    color: var(--white) !important;
}

/* Extra specificity for stubborn cases */
body.woocommerce-cart main .wp-block-button__link,
body.woocommerce-cart article .wp-block-button__link,
body.woocommerce-cart .entry-content .wp-block-button__link,
body.woocommerce-cart .site-content .wp-block-button__link {
    color: var(--white) !important;
    background-color: var(--orange) !important;
}

body.woocommerce-cart main .wp-block-button__link:hover,
body.woocommerce-cart article .wp-block-button__link:hover,
body.woocommerce-cart .entry-content .wp-block-button__link:hover {
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

/* ============================================
   PRODUCT RECOMMENDATION MODAL
   ============================================ */

/* Modal Overlay */
.alftools-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    backdrop-filter: blur(5px);
}

/* Modal Container */
.alftools-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Modal Close Button */
.alftools-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    color: #999;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

.alftools-modal-close:hover {
    color: var(--dark-gray);
    transform: rotate(90deg);
}

/* Modal Content */
.alftools-modal-content {
    padding: 40px;
}

.alftools-modal-title {
    text-align: center;
    color: var(--blue);
    margin-bottom: 30px;
    font-size: 1.8rem;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* Product Display in Modal */
.alftools-modal-product {
    display: flex;
    gap: 30px;
    align-items: center;
}

.alftools-modal-product-image {
    flex: 0 0 250px;
}

.alftools-modal-product-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #f9f9f9;
    padding: 20px;
}

.alftools-modal-product-details {
    flex: 1;
}

.alftools-modal-product-details h3 {
    color: var(--blue);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-family: "Chakra Petch", sans-serif;
    text-transform: uppercase;
}

.alftools-modal-product-details p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: "Roboto", sans-serif;
}

.alftools-modal-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 25px;
    font-family: "Chakra Petch", sans-serif;
}

/* Modal Actions */
.alftools-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.alftools-btn {
    padding: 15px 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Chakra Petch", sans-serif;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
    border-radius: 0;
}

.alftools-btn-primary {
    background: var(--orange);
    color: var(--white);
}

.alftools-btn-primary:hover {
    background: var(--blue);
    transform: translateY(-2px);
}

.alftools-btn-secondary {
    background: transparent;
    color: var(--orange);
    border: 2px solid #ddd;
}

.alftools-btn-secondary:hover {
    border-color: var(--orange);
    background: #f9f9f9;
}

.alftools-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Link */
.alftools-modal-link {
    display: inline-block;
    color: var(--blue);
    text-decoration: underline;
    font-size: 0.95rem;
    margin-top: 10px;
    transition: color 0.3s;
}

.alftools-modal-link:hover {
    color: var(--orange);
}

/* Attachment Modal Specific */
.alftools-modal-attachment {
    text-align: center;
    padding: 20px 0;
}

.alftools-modal-icon {
    font-size: 4rem;
    color: var(--blue);
    margin-bottom: 20px;
}

.alftools-modal-attachment h3 {
    color: var(--blue);
    margin-bottom: 20px;
    font-family: "Chakra Petch", sans-serif;
}

.alftools-modal-attachment p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: "Roboto", sans-serif;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Body Modal Open State */
body.modal-open {
    overflow: hidden;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .alftools-modal {
        width: 95%;
        max-height: 95vh;
    }
    
    .alftools-modal-content {
        padding: 30px 20px;
    }
    
    .alftools-modal-product {
        flex-direction: column;
        text-align: center;
    }
    
    .alftools-modal-product-image {
        flex: 1;
        max-width: 200px;
        margin: 0 auto;
    }
    
    .alftools-modal-title {
        font-size: 1.5rem;
    }
    
    .alftools-modal-actions {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .alftools-modal-close {
        top: 10px;
        right: 10px;
        font-size: 24px;
        width: 35px;
        height: 35px;
    }
    
    .alftools-modal-content {
        padding: 25px 15px;
    }
    
    .alftools-btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
}

/* ============================================
   MOBILE OVERFLOW FIXES FOR ELEMENTOR
   ============================================ */

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Main content wrapper */
#main,
.site-main,
main,
.entry-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Elementor specific overflow fixes */
.elementor {
    overflow-x: hidden !important;
}

.elementor-section {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.elementor-container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.elementor-row,
.elementor-column {
    max-width: 100% !important;
}

/* Fix Elementor widgets */
.elementor-widget-wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.elementor-widget {
    max-width: 100% !important;
}

/* Fix images in Elementor */
.elementor img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix Elementor text editor widget */
.elementor-text-editor {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    /* Reset all Elementor paddings on mobile */
    .elementor-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
        padding: 10px !important;
    }
    
    /* Ensure containers don't exceed viewport */
    .elementor-container {
        max-width: calc(100vw - 30px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Fix column widths */
    .elementor-column {
        width: 100% !important;
    }
    
    /* Handle inner sections */
    .elementor-inner-section {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 480px) {
    /* Even tighter controls for small mobile */
    .elementor-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Prevent any fixed widths */
    .elementor *[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Fix specific Elementor widgets that commonly cause overflow */
.elementor-widget-image img,
.elementor-widget-video,
.elementor-widget-google_maps {
    max-width: 100% !important;
}

/* Fix Elementor carousels and sliders */
.elementor-carousel-wrapper,
.elementor-slides-wrapper,
.swiper-container {
    overflow: hidden !important;
    max-width: 100% !important;
}

/* Fix tables in Elementor */
.elementor-widget-text-editor table {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
}

/* Fix form elements */
.elementor-form-fields-wrapper,
.elementor-field-group {
    max-width: 100% !important;
}

.elementor-field {
    max-width: 100% !important;
    width: 100% !important;
}

/* Handle absolute positioned elements */
@media (max-width: 768px) {
    .elementor-absolute {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Fix custom positioning that might cause overflow */
.elementor-widget:not(.elementor-absolute) {
    position: relative !important;
}

/* Ensure no negative margins cause overflow */
@media (max-width: 768px) {
    .elementor-section,
    .elementor-column,
    .elementor-widget {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Reset any transforms that might push content off-screen */
    .elementor-widget {
        transform: none !important;
    }
}

@media (min-width: 992px) {
  body.woocommerce-shop main {
    padding-top: 58px !important;
  }
	
  body.woocommerce-cart main,
  body.woocommerce-checkout main,
  body.single-product main {
    padding-top: 100px !important;
  }

  /* Reset the existing margin on the shop page header to prevent double spacing */
  body.woocommerce-shop .page-header {
    margin-top: 0 !important;
  }
  
  /* Ensure the Sidebar Filter (on Shop page) sticks at the correct position */
  .filter-sidebar {
    top: 140px; /* Header (when scrolled ~80px) + Gap */
  }
}

/* ============================================
   SHOP LAYOUT SPACING FIXES
   ============================================ */

/* Add breathing room between the Video Header and the Shop Content */
section.shop {
    padding-top: 60px; /* Adjust this value to increase/decrease space */
    padding-bottom: 80px;
}

/* Ensure the Sidebar and Product Grid align correctly at the top */
.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px; /* Increased gap between sidebar and products */
    align-items: flex-start;
}

/* Sticky Sidebar positioning adjustment */
.filter-sidebar {
    position: sticky;
    top: 120px; 
    align-self: start; /* Ensures it sticks properly in a grid item */
}

/* Mobile Responsiveness for the updates */
@media (max-width: 968px) {
    .shop-layout {
        grid-template-columns: 1fr; /* Stack sidebar on top of products */
        gap: 30px;
    }

    .filter-sidebar {
        position: relative; /* Unstick on mobile */
        top: 0;
        margin-bottom: 20px;
        background: var(--light-gray-bg); /* Slight bg to differentiate */
        padding: 20px;
        border-radius: 0;
    }
    
    /* Make sidebar links display as a horizontal scrollable list or pills on mobile? 
       Optional: Keep as list for now */
    .filter-sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .filter-sidebar ul li {
        width: auto;
        margin-bottom: 0;
    }
    
    .filter-sidebar a {
        background: var(--white);
        border: 1px solid #ddd;
        padding: 8px 15px;
        border-radius: 0;
        border-left: 1px solid #ddd; /* Reset the left border style */
    }
    
    .filter-sidebar a.active {
        background: var(--orange);
        color: var(--white);
        border-color: var(--orange);
    }
}

/* Styling for the new CTA button below the Spirit Level Grid */
.spirit-levels-section .section-cta-container.centered {
    text-align: center;
    margin-top: 40px;
    width: 100%;
}