/*
Theme Name: Web Muzahid (LipiBD Custom)
Version: 9.0 (Reorganized & Documented)
*/

/* #############################################################################
   SECTION 1: THE "DNA" OF THE WEBSITE (VARIABLES)
   
   Think of this as the "Settings" menu for your code. 
   Instead of typing a specific green color code 50 times throughout the file,
   we define it here once. If you change the color here, it updates EVERYWHERE.
   ############################################################################# */

:root {
  /* -- Primary Colors -- */
  /* The main dark green used for headings and buttons */
  --lipibd-primary-green: #1a5f3f; 
  /* A slightly lighter green for hover effects */
  --lipibd-light-green: #2d7a56;   
  /* Very pale green, used for backgrounds behind text */
  --lipibd-lighter-green: #e8f5ee; 
  /* Bright green for highlights or links */
  --lipibd-accent-green: #3d9970;  

  /* -- Neutral Colors -- */
  /* Pure white background */
  --lipibd-bg-white: #ffffff;      
  /* Very dark text (almost black) */
  --lipibd-text-dark: #1a2b23;     
  /* Medium gray for descriptions and secondary text */
  --lipibd-text-gray: #556b5f;     

  /* -- Shadows (3D Effects) -- */
  /* A soft shadow for cards sitting flat */
  --lipibd-shadow-soft: 0 2px 12px rgba(26, 95, 63, 0.08); 
  /* A deeper shadow for when you hover over a card (lifts it up) */
  --lipibd-shadow-hover: 0 4px 20px rgba(26, 95, 63, 0.12); 
}


/* #############################################################################
   SECTION 2: THE CANVAS (GLOBAL RESETS)
   
   This prepares the browser. It removes default gaps that browsers add 
   automatically and sets the default background and font for the whole page.
   ############################################################################# */

* { 
  /* Ensures padding doesn't make boxes wider than they should be */
  max-width:100%; 
}

html, body {
  /* PROHIBITS side-scrolling. Keeps the site locked to vertical scrolling only. */
  overflow-x:hidden; 
}

body {
  /* The main font style for the entire website */
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  
  /* Remove the white frame usually found around basic HTML pages */
  margin:0;
  
  /* The default light gray background color behind everything */
  background:#f5f5f5;
  
  /* Default text size */
  font-size:15px; 
}

/* Images should never be wider than the screen */
img {
  max-width:100%;
  height:auto;
  display:block;
}

/* A wrapper to keep content centered on big screens (like a max-width box) */
.container {
  max-width:1400px;
  margin:auto;
  padding:20px;
}


/* #############################################################################
   SECTION 3: THE HEADER (TOP NAVIGATION BAR)
   
   This controls the white strip at the top containing the Logo and Menu Links.
   It handles how the menu looks on Desktop computers.
   ############################################################################# */

.site-header {
  background:#fff;
  /* Adds a faint shadow so the header separates from the page content */
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  
  /* Ensures the header sits ON TOP of everything else (Z-Index) */
  position: relative;
  z-index: 1000;
}

/* An inner container to constrain the width of the header content */
.header-inner {
  max-width:1200px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between; /* Pushes Logo left, Menu right */
}

/* This is an alternative flex container used in some templates */
.header-flex {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* -- The Logo -- */
.custom-logo {
  max-height:60px; /* Limits logo height so it doesn't stretch the header */
  width:auto;
  display:block;
}

.logo a {
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  color:#111;
}

/* -- Desktop Navigation Menu -- */
/* This logic applies when screens are BIGGER than 769px (Tablets/Desktops) */
@media (min-width: 769px) {
  
  /* Hide the hamburger button on desktop */
  .menu-toggle {
    display: none !important;
  }
  
  /* Display the menu items in a row */
  .main-nav {
    display: flex;
  }
  
  .main-nav .nav-menu {
    display: flex;
    list-style: none; /* Removes bullet points */
    gap: 20px;        /* Space between "Home", "About", etc. */
    margin: 0;
    padding: 0;
  }
  
  .main-nav .nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight:500;
    padding: 10px 15px;
  }
  
  .main-nav .nav-menu a:hover {
    color: #0066cc; /* Changes color when mouse hovers */
  }
}

/* Specific styling for the list itself (legacy support) */
.nav-menu {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
}


/* #############################################################################
   SECTION 4: THE HERO SECTION (WELCOME BANNER)
   
   This is the big colorful area at the top of the homepage that says 
   "Welcome to LipiBD" or similar.
   ############################################################################# */

.lipibd-hero {
  /* Creates a subtle fade from light green to white */
  background: linear-gradient(135deg, var(--lipibd-lighter-green) 0%, var(--lipibd-bg-white) 100%);
  padding: 4rem 0; /* Vertical breathing room */
  margin-bottom: 3rem;
}

.lipibd-hero .hero-content {
  max-width: 800px;
  margin: 0 auto; /* Centers the text block */
  text-align: center;
}

.lipibd-hero h1 {
  font-size: 2.5rem;
  color: var(--lipibd-primary-green);
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Responsive Text Scaling for Mobile */
.page-header h1,
.hero-title {
  /* "Clamp" makes the font size fluid: minimum 26px, preferred 6vw, max 44px */
  font-size: clamp(26px, 6vw, 44px);
  line-height: 1.15;
}

.lipibd-hero .hero-subtitle {
  font-size: 1.1rem;
  color: var(--lipibd-text-gray);
  margin-bottom: 2rem;
  line-height: 1.8;
}

/* The list of features with checkmarks */
.lipibd-hero .hero-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap; /* Allows items to drop to next line on small screens */
}

.lipibd-hero .feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

/* The circle circle behind the checkmark */
.lipibd-hero .check-icon {
  width: 24px;
  height: 24px;
  background: var(--lipibd-primary-green);
  border-radius: 50%; /* Makes it a perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
}


/* #############################################################################
   SECTION 5: SEARCH & FILTERS
   
   Controls the input box where users type to find fonts.
   ############################################################################# */

.lipibd-search-wrapper {
  margin-bottom: 3rem;
}

.lipibd-search-section {
  background: var(--lipibd-bg-white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--lipibd-shadow-soft);
}

.lipibd-search-section .search-input {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 2px solid var(--lipibd-lighter-green);
  border-radius: 8px;
  font-size: 1.1rem;
}

/* What happens when you click inside the search box */
.lipibd-search-section .search-input:focus {
  outline: none;
  border-color: var(--lipibd-primary-green); /* Border turns green */
}

/* -- Alternative/Legacy Filter Bar -- */
.filter-bar {
  background:#fff;
  padding:25px;
  border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  margin-bottom:40px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.search-input {
  width:100%;
  padding:14px 18px;
  border:2px solid #e2e8f0;
  border-radius:10px;
  margin-bottom:35px;
  box-sizing:border-box;
}


/* #############################################################################
   SECTION 6: THE GRID SYSTEMS (LAYOUTS)
   
   These styles control how lists of items (fonts, categories) are arranged.
   It usually involves "Grid" layouts which look like bookshelves.
   ############################################################################# */

/* General Section Spacing */
.lipibd-section {
  margin-bottom: 4rem;
}

.lipibd-section .section-title {
  font-size: 2rem;
  color: var(--lipibd-primary-green);
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 600;
}

/* -- 6A: Font Cards Grid (The main list of fonts) -- */
.fonts-grid {
  display: grid;
  /* Auto-fill creates as many columns as will fit, min width 280px */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.fonts-grid .font-card {
  background: var(--lipibd-bg-white);
  border-radius: 12px;
  box-shadow: var(--lipibd-shadow-soft);
  overflow: hidden; /* Ensures content doesn't spill out of rounded corners */
  transition: all 0.3s; /* Smooth animation for hovering */
}

/* Lift effect when hovering over a font */
.fonts-grid .font-card:hover {
  transform: translateY(-4px); /* Moves up slightly */
  box-shadow: var(--lipibd-shadow-hover);
}

.fonts-grid .font-preview {
  background: var(--lipibd-lighter-green);
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: 2rem; /* Large text for the font sample */
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fonts-grid .font-info {
  padding: 1.5rem;
}

.fonts-grid .font-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--lipibd-primary-green);
  margin-bottom: 0.8rem;
}

/* -- 6B: Category Grid (The boxes with icons) -- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.category-card {
  background: var(--lipibd-bg-white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--lipibd-shadow-soft);
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lipibd-shadow-hover);
  border-color: var(--lipibd-light-green);
}

.category-card .category-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.category-card h3 {
  color: var(--lipibd-primary-green);
  font-size: 1.2rem;
  font-weight: 600;
}

/* -- 6C: Tutorials Grid -- */
.tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.tutorial-card {
  background: var(--lipibd-bg-white);
  border-radius: 12px;
  padding: 1.8rem;
  box-shadow: var(--lipibd-shadow-soft);
  transition: all 0.3s;
}

.tutorial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lipibd-shadow-hover);
}

.tutorial-card h3 {
  color: var(--lipibd-primary-green);
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.tutorial-card a {
  color: var(--lipibd-accent-green);
  text-decoration: none;
  font-weight: 600;
}


/* #############################################################################
   SECTION 7: BUTTONS & BADGES
   
   Small UI elements that appear inside cards.
   ############################################################################# */

/* -- Badges (Tags like "New", "Free") -- */
.fonts-grid .font-badges {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.fonts-grid .badge {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.fonts-grid .badge-unicode { background: var(--lipibd-lighter-green); color: var(--lipibd-primary-green); }
.fonts-grid .badge-free { background: var(--lipibd-accent-green); color: white; }
.fonts-grid .badge-popular { background: var(--lipibd-light-green); color: white; }
.fonts-grid .badge-new { background: #ff6b6b; color: white; }

.badge-tag {
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 12px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  color:#fff;
}
.badge-tag.new {background:#48bb78;}
.badge-tag.popular {background:#ed8936;}

/* -- Action Buttons (Download/View) -- */
.fonts-grid .font-actions {
  display: flex;
  gap: 0.8rem;
}

.fonts-grid .btn {
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
  font-size: 0.95rem;
}

.fonts-grid .btn-primary {
  background: var(--lipibd-primary-green);
  color: white;
  flex: 1; /* Takes up available space */
}

.fonts-grid .btn-primary:hover {
  background: var(--lipibd-light-green);
}

.fonts-grid .btn-secondary {
  background: transparent;
  color: var(--lipibd-primary-green);
  border: 2px solid var(--lipibd-primary-green);
  flex: 0.8;
}

.fonts-grid .btn-secondary:hover {
  background: var(--lipibd-lighter-green);
}

.btn-download-grid {
  display:block;
  text-align:center;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;
  font-weight:700;
  text-decoration:none;
}


/* #############################################################################
   SECTION 8: SINGLE PAGE LAYOUT (VIEWING ONE FONT)
   
   Styles for the page you see when you click on a specific font to download it.
   It has a sidebar (Right Info Panel) and a main preview area (Left Panel).
   ############################################################################# */

/* The main wrapper for the two-column layout */
.layout {
  display:grid;
  grid-template-columns:1fr 380px; /* Left takes space, Right is fixed 380px */
  gap:30px;
  align-items: start; /* Prevents columns from forcibly stretching to same height */
}

/* -- Left Side: Preview Tools -- */
.preview-panel {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.font-title {
  font-size:28px;
  font-weight:700;
  border-bottom:2px solid #e2e8f0;
  padding-bottom:12px;
}

/* The box where you type text to test the font */
.textarea-input {
  width:100%;
  padding:14px;
  border:2px solid #e2e8f0;
  border-radius:12px;
  font-size:16px;
  min-height:100px;
}

/* The box showing the large render of the font */
.preview-display {
  border:2px solid #e2e8f0;
  border-radius:12px;
  padding:30px;
  font-size:42px;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.toolbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  background:#f7fafc;
  padding:14px;
  border-radius:12px;
}

.btn-toolbar,
.btn-icon {
  background:#fff;
  border:2px solid #e2e8f0;
  border-radius:8px;
  padding:8px 14px;
  font-weight:600;
  cursor:pointer;
}

/* -- Right Side: Info Panel (Designer, License, Download) -- */
.info-panel {
  display:flex;
  flex-direction:column;
  gap:14px;
  align-self: start;
}

.card {
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:28px;
}

.font-badge {
  width:120px;
  height:120px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;
  font-size:34px;
  font-weight:700;
  margin:auto;
}

.font-badge img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.meta-item {
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid #eee;
}

.btn-download {
  display:block;
  text-align:center;
  padding:14px;
  border-radius:12px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;
  font-weight:700;
  text-decoration:none;
}

.license-box {
  background:#fdebd0;
  padding:14px;
  border-left:4px solid #f39c12;
  border-radius:8px;
}

/* Force specific font family on UI elements */
.meta-label,
.meta-value,
.toolbar,
.btn-download,
.download-count,
.license-box {
  font-family:'Hind Siliguri',sans-serif !important;
}


/* #############################################################################
   SECTION 9: TRUST & FOOTER SECTIONS
   
   The bottom areas of the website.
   ############################################################################# */

/* -- Trust Section (Why choose us) -- */
.trust-section {
  background: var(--lipibd-lighter-green);
  padding: 2.5rem;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 3rem;
}

.trust-section h2 {
  color: var(--lipibd-primary-green);
  margin-bottom: 1rem;
}

.trust-section p {
  color: var(--lipibd-text-gray);
  margin-bottom: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.trust-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.trust-links a {
  color: var(--lipibd-primary-green);
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--lipibd-primary-green);
  border-radius: 8px;
  transition: all 0.3s;
}

.trust-links a:hover {
  background: var(--lipibd-primary-green);
  color: white;
}

/* -- The Main Footer -- */
.lipibd-footer {
  background: #1a2530; /* Dark blue-black */
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0 0;
  margin-top: 4rem;
}

.lipibd-footer .footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr; /* 1st column is 2x wider */
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lipibd-footer .footer-column {
  display: flex;
  flex-direction: column;
}

.lipibd-footer .footer-title {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 700;
}

.lipibd-footer .footer-heading {
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.lipibd-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lipibd-footer .footer-links li {
  margin-bottom: 0.7rem;
}

.lipibd-footer .footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s;
  display: inline-block;
}

.lipibd-footer .footer-links a:hover {
  color: #2d7a56;
  transform: translateX(5px);
}

.lipibd-footer .footer-bottom {
  padding: 2rem 0;
}

.lipibd-footer .footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}


/* #############################################################################
   SECTION 10: MOBILE MENU SYSTEM
   
   This handles the "Hamburger" (three lines) button and the pop-out menu
   that appears on phones and tablets.
   ############################################################################# */

/* -- The Hamburger Button Icon -- */
.menu-toggle {
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  display: none; /* Hidden on desktop */
  flex-direction: column;
  gap: 6px;
  z-index: 1001;
  position: relative;
}

.menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: #333;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* -- The Animation (Turning Hamburger into X) -- */
body.menu-open .menu-toggle span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

body.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0; /* Middle line disappears */
}

body.menu-open .menu-toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

/* -- The Pop-out Menu Logic -- */
/* Applies only on screens smaller than 768px */
@media (max-width: 768px) {
  
  /* Show the hamburger button */
  .menu-toggle {
    display: flex;
  }
  /* Inside @media (max-width: 768px) */
  
  .main-nav .nav-menu {
    display: flex !important;      /* Keep it flex, but... */
    flex-direction: column;        /* ...force it to be a VERTICAL column */
    gap: 0;                        /* Remove the gap used on desktop */
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Optional: Ensure the list items stretch full width */
  .main-nav .nav-menu li {
    width: 100%;
    border-bottom: 1px solid #eee; /* Keeps the separator lines */
  }
  /* The menu itself (hidden by default) */
  .main-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full screen height */
    background: #ffffff;
    z-index: 1000;
    padding: 80px 20px 20px;
    overflow-y: auto;
  }
  
  /* When Javascript adds "active", show the menu */
  .main-nav.active {
    display: block;
  }
  
  /* List styling inside the mobile menu */
  .main-nav .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .main-nav .nav-menu li {
    border-bottom: 1px solid #eee;
  }
  
  .main-nav .nav-menu a {
    display: block;
    padding: 15px 10px;
    font-size: 18px;
    color: #333;
    text-decoration: none;
  }
  
  /* Stop the background page from scrolling when menu is open */
  body.menu-open {
    overflow: hidden;
  }

  /* Close X button inside menu (optional extra control) */
  .main-nav.active .menu-close {
    display: block;
  }
}

.menu-close {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 36px;
  cursor: pointer;
  color: #333;
  padding: 5px 10px;
  line-height: 1;
  z-index: 1001;
  font-weight: 300;
}


/* #############################################################################
   SECTION 11: GENERAL RESPONSIVE TWEAKS
   
   Adjustments for tablets and small phones.
   ############################################################################# */

/* -- Tablet (Medium Screens) -- */
@media(max-width:1024px){
  /* Collapse the 2-column font layout to 1 column */
  .layout {grid-template-columns:1fr;}
}

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

/* -- Mobile (Small Screens around 768px) -- */
/* -- Mobile (Small Screens around 768px) -- */
@media (max-width: 768px) {
  .lipibd-hero h1 { font-size: 1.8rem; }
  
  .lipibd-hero .hero-features {
    flex-direction: column;
    gap: 1rem;
  }
  
  /* FIXED: Changed from repeat(2, 1fr) to 1fr */
  .fonts-grid {
    grid-template-columns: 1fr; 
    gap: 1rem;
  }

  /* ADDED: This ensures the .grid class (used in newer sections) is also 1 column */
  .grid {
    grid-template-columns: 1fr;
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lipibd-section .section-title { font-size: 1.5rem; }
  
  .tutorials-grid { grid-template-columns: 1fr; }
}
/* -- Small Phone (Very small screens) -- */
@media (max-width: 576px) {
  .lipibd-footer { padding: 2rem 0 0; }
  
  .lipibd-footer .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .lipibd-footer .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px){
  .grid { grid-template-columns:1fr; }
  .card-header { padding:18px; }
  .preview-area { padding:28px 16px; }
  .preview-text { font-size:1.4rem; }
  .card-footer { padding:16px; }
  
  body { font-size:15px; }
  
  .custom-logo { max-height:36px; }
  
  .lipibd-hero h1 { font-size: 1.5rem; }
  
  .fonts-grid .font-preview {
    font-size: 1.5rem;
    padding: 2rem 1rem;
  }
}


/* #############################################################################
   SECTION 12: LEGACY / EXTRA STYLES
   
   These styles were part of the original theme. Kept for safety to ensure
   older elements don't break.
   ############################################################################# */

/* Old grid layout used in archive */
.font-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}

.font-card { /* Note: This might overlap with .fonts-grid .font-card */
  background:#fff;
  padding:20px;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

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

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

.page-header p {
  color:#718096;
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}

/* Modern font card specific to homepage grid */
.font-card {
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  transition:.35s;
  border:1px solid #e2e8f0;
  position:relative;
}

.card-header {
  padding:26px;
  border-bottom:1px solid #edf2f7;
}

.font-name {
  font-size:1.6rem;
  font-weight:700;
}

.meta-badge {
  padding:6px 14px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  background:#edf2f7;
}

.meta-badge.type { background:#e6fffa; }
.meta-badge.style { background:#fef5e7; }

.preview-area {
  padding:45px 25px;
  text-align:center;
}

.preview-text {
  font-size:2rem;
  font-weight:600;
}

.card-footer {
  padding:22px;
  background:#fafafa;
}

.card h2 { font-size: 1.6rem; }
.card strong { display:block; font-size: 1.05rem; }
.card p { color:#444; line-height:1.6; }


/* 1. Define Colors */
:root {
    --primary-green: #1a5f3f;
    --light-green: #2d7a56;
    --lighter-green: #e8f5ee;
    --accent-green: #3d9970;
    --bg-white: #ffffff;
    --text-dark: #1a2b23;
    --shadow-soft: 0 2px 12px rgba(26, 95, 63, 0.08);
    --shadow-hover: 0 4px 20px rgba(26, 95, 63, 0.12);
}

/* 2. Setup the Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

/* 3. Style the Card Container */
.font-card {
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Allows us to reorder children */
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.font-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* 4. VISUAL REORDERING: Move Preview to the TOP */
.preview-area {
    order: -1; /* This moves the preview above the header */
    background: var(--lighter-green);
    padding: 40px 20px;
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-text {
    font-size: 2rem !important;
    color: var(--text-dark);
}

/* 5. Style the Info Area (Header) */
.card-header {
    padding: 20px 20px 10px 20px;
}

.font-name {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary-green) !important;
    margin-bottom: 10px !important;
}

/* 6. Style the Badges */
.meta-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.meta-badge.style {
    background: var(--lighter-green);
    color: var(--primary-green);
}

.meta-badge.type {
    background: var(--accent-green);
    color: white;
}

/* 7. Style the Footer Button */
.card-footer {
    padding: 0 20px 20px 20px;
}

.btn-download-grid {
    display: block;
    width: 100%;
    background: var(--primary-green);
    color: white !important;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.3s;
}

.btn-download-grid:hover {
    background: var(--light-green);
}
/* font grid card design end here */
/* ===== CATEGORY FAQ STYLE ===== */

.card h2 {
 font-size: 1.6rem;
}

.card strong {
 display:block;
 font-size: 1.05rem;
}

.card p {
 color:#444;
 line-height:1.6;
}
/*ads for youtube*/
/* hidden on desktop */
.mobile-ad-banner{
    display:none;
    margin:15px 0;
}

/* show only on mobile */
@media (max-width:767px){
    .mobile-ad-banner{
        display:block;
    }

    .mobile-ad-banner img{
        width:100%;
        height:auto;
        border-radius:10px;
        box-shadow:0 6px 20px rgba(0,0,0,0.12);
        display:block;
    }
}
/* =====================================================
   WOOCOMMERCE MODERN SHOP GRID FOR LIPIBD
===================================================== */

/* 1. Product Card Wrapper */
.woocommerce ul.products li.product {
    background: var(--lipibd-bg-white);
    border-radius: 16px;
    box-shadow: var(--lipibd-shadow-soft);
    padding: 0 0 20px 0 !important;
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: var(--lipibd-shadow-hover);
}

/* 2. Product Image */
.woocommerce ul.products li.product img {
    margin-bottom: 20px !important;
    width: 100%;
    border-radius: 16px 16px 0 0;
}

/* 3. Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--lipibd-text-dark) !important;
    padding: 0 15px;
    margin-bottom: 8px !important;
    transition: color 0.2s;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
    color: var(--lipibd-primary-green) !important;
}

/* 4. Price Typography */
.woocommerce ul.products li.product .price {
    color: var(--lipibd-primary-green) !important;
    font-weight: 700;
    font-size: 1.15rem !important;
    margin-bottom: 20px !important;
}

.woocommerce ul.products li.product .price del {
    color: var(--lipibd-text-gray) !important;
    font-weight: 400;
    font-size: 0.9rem;
    opacity: 0.7;
    margin-right: 5px;
}

/* 5. Add to Cart Button */
.woocommerce ul.products li.product .button {
    background: var(--lipibd-primary-green) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-family: 'Hind Siliguri', sans-serif;
    margin: 0 20px !important;
    display: inline-block;
    transition: background 0.3s ease !important;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--lipibd-light-green) !important;
}

/* 6. Sale Badge Redesign */
.woocommerce span.onsale {
    background: #ff6b6b !important; /* Matches your theme's 'new' badge red */
    color: white !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
}

/* 7. Top Bar (Sorting & Results Count) */
.woocommerce .woocommerce-result-count {
    color: var(--lipibd-text-gray);
    font-weight: 500;
    margin-top: 10px;
}

.woocommerce .woocommerce-ordering select {
    padding: 10px 15px;
    border: 2px solid var(--lipibd-lighter-green);
    border-radius: 8px;
    outline: none;
    font-family: 'Hind Siliguri', sans-serif;
    color: var(--lipibd-text-dark);
    background-color: var(--lipibd-bg-white);
    cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus {
    border-color: var(--lipibd-primary-green);
}
/* 8. Responsive Grid System for Shop */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove WooCommerce's default float hacks */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important; 
}

/* Force products to fill the grid cells */
.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
}

/* Push Add to Cart button to the bottom evenly */
.woocommerce ul.products li.product .button {
    margin-top: auto !important;
    margin-bottom: 20px !important;
}

/* 9. Mobile Responsive Rules */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important; /* 1 column on mobile */
        gap: 20px !important;
    }
}
/* =====================================================
   WOOCOMMERCE SINGLE PRODUCT PAGE MODERNIZATION
   (Cleaned & Consolidated)
===================================================== */

/* 1. Main Wrapper Fixes */
.site-main.card {
    display: flow-root !important; 
    padding-bottom: 50px !important;
}

.woocommerce div.product {
    position: relative !important; /* Required for Sale Badge */
}

/* 2. Desktop Layout (Flexbox for perfect wrapping) */
@media (min-width: 768px) {
    .woocommerce div.product {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    .woocommerce div.product .woocommerce-product-gallery {
        width: 45% !important;
        margin: 0 !important;
    }
    .woocommerce div.product .summary {
        width: 50% !important;
        margin: 0 !important;
    }
    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related.products {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 50px !important;
    }
}

/* 3. Sale Badge (Top Left Corner) */
body.single-product .woocommerce div.product > span.onsale,
body.single-product .woocommerce div.product .woocommerce-product-gallery span.onsale {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 999 !important;
}

/* 4. Product Image Styling */
.woocommerce div.product div.images img {
    border-radius: 16px;
    box-shadow: var(--lipibd-shadow-soft);
    border: 1px solid #f0f0f0;
}

/* 5. Typography (Title, Price, Description) */
.woocommerce div.product .product_title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 2.2rem;
    color: var(--lipibd-text-dark);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.woocommerce div.product p.price {
    color: var(--lipibd-primary-green);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.woocommerce div.product p.price del {
    color: var(--lipibd-text-gray);
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.6;
    margin-right: 10px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1.05rem;
    color: var(--lipibd-text-gray);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 6. Add to Cart Section */
.woocommerce div.product form.cart {
    display: flex;
    gap: 15px;
    margin-bottom: 35px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.woocommerce .quantity .qty {
    width: 70px;
    height: 52px;
    border: 2px solid #eee;
    border-radius: 8px;
    text-align: center;
    font-size: 1.1rem;
    font-family: 'DM Mono', monospace, sans-serif;
    color: var(--lipibd-text-dark);
    background: #fafafa;
}

.woocommerce .quantity .qty:focus {
    border-color: var(--lipibd-primary-green);
    outline: none;
}

.woocommerce div.product form.cart .button {
    height: 52px;
    background: var(--lipibd-primary-green) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 0 40px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    font-family: 'Hind Siliguri', sans-serif;
    transition: background 0.3s ease, transform 0.2s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce div.product form.cart .button:hover {
    background: var(--lipibd-light-green) !important;
    transform: translateY(-2px);
}

.woocommerce div.product .product_meta {
    font-size: 0.95rem;
    color: var(--lipibd-text-gray);
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.woocommerce div.product .product_meta a {
    color: var(--lipibd-primary-green);
    text-decoration: none;
    font-weight: 600;
}

/* 7. Modern Tabs */
.woocommerce div.product .woocommerce-tabs {
    padding-top: 40px;
    border-top: 2px solid #f5f5f5;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0 0 30px 0;
    padding: 0;
    border: none;
    display: flex;
    gap: 30px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--lipibd-text-gray);
    transition: color 0.3s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--lipibd-text-dark);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 3px solid var(--lipibd-primary-green) !important;
}

.woocommerce .woocommerce-Tabs-panel {
    font-size: 1.05rem;
    color: var(--lipibd-text-gray);
    line-height: 1.8;
}

.woocommerce .woocommerce-Tabs-panel h2 {
    font-size: 1.6rem;
    color: var(--lipibd-text-dark);
    margin-bottom: 20px;
}

/* 8. Related Products (Left aligned title & Responsive Grid) */
.woocommerce .related.products {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    padding-bottom: 60px !important; 
    margin-bottom: 0 !important; 
    padding-top: 40px;
    border-top: 2px solid #f5f5f5;
}

.woocommerce .related.products > h2 {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 1.8rem;
    color: var(--lipibd-text-dark);
    margin-bottom: 30px;
    text-align: left !important;
}

.woocommerce .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 30px !important;
    align-items: stretch !important; 
}

.woocommerce .related.products ul.products li.product {
    height: auto !important;
}

/* 9. Mobile & Tablet Responsiveness */
@media (max-width: 900px) {
    .woocommerce .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (max-width: 768px) {
    .woocommerce div.product form.cart {
        flex-direction: column;
    }
    .woocommerce div.product form.cart .button {
        width: 100%;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: column;
        gap: 15px;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        border-bottom: 1px solid #eee !important;
        padding-bottom: 15px !important;
    }
    .woocommerce .related.products ul.products {
        grid-template-columns: 1fr !important; 
    }
}

/* =====================================================
   WOOCOMMERCE HOMEPAGE SHORTCODE GRID (FULL WIDTH)
===================================================== */
.woocommerce.columns-4 ul.products,
.woocommerce ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Forces 4 equal columns stretching 100% */
    gap: 30px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Ensure individual cards take up the full space of their column */
.woocommerce.columns-4 ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
}

/* Tablet Responsiveness */
@media (max-width: 992px) {
    .woocommerce.columns-4 ul.products,
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablet */
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .woocommerce.columns-4 ul.products,
    .woocommerce ul.products.columns-4 {
        grid-template-columns: 1fr !important; /* 1 column on phones */
    }
}
/* =====================================================
   WOOCOMMERCE MODERN CART PAGE REDESIGN
===================================================== */

/* 1. Desktop Flexbox Layout (Side by Side) */
@media (min-width: 992px) {
    .woocommerce-cart .woocommerce {
        display: flex;
        flex-wrap: nowrap;
        gap: 40px;
        align-items: flex-start;
    }
    .woocommerce-cart .woocommerce-cart-form {
        flex: 1 1 65%;
        margin-bottom: 0 !important;
    }
    .woocommerce-cart .cart-collaterals {
        flex: 1 1 35%;
        width: 100% !important;
        margin-top: 0 !important;
    }
}

/* 2. Cart Table Styling */
.woocommerce table.shop_table.cart {
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    box-shadow: var(--lipibd-shadow-soft);
    background: #fff;
    overflow: hidden;
    border-collapse: separate;
    margin-bottom: 30px;
}

.woocommerce table.shop_table.cart thead th {
    background: #f9fafb;
    color: var(--lipibd-text-dark);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 20px;
    border: none;
    border-bottom: 2px solid #eee;
}

.woocommerce table.shop_table.cart tbody td {
    padding: 20px;
    border: none;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}

/* Remove 'X' Button */
.woocommerce table.shop_table.cart a.remove {
    color: #ff6b6b !important;
    font-weight: 700;
    font-size: 1.5rem;
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.woocommerce table.shop_table.cart a.remove:hover {
    transform: scale(1.2);
    color: #ff5252 !important;
    background: none !important;
}

/* Product Image & Link */
.woocommerce table.shop_table.cart .product-thumbnail img {
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    width: 70px;
}

.woocommerce table.shop_table.cart .product-name a {
    color: var(--lipibd-text-dark);
    font-family: 'Hind Siliguri', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.3s;
}

.woocommerce table.shop_table.cart .product-name a:hover {
    color: var(--lipibd-primary-green);
}

/* Price text */
.woocommerce table.shop_table.cart .product-price,
.woocommerce table.shop_table.cart .product-subtotal {
    color: var(--lipibd-primary-green);
    font-weight: 600;
}

/* 3. Coupon & Actions Row */
.woocommerce table.shop_table.cart td.actions {
    padding: 25px 20px;
    background: #fafafa;
}

.woocommerce-cart table.cart td.actions .coupon {
    display: flex;
    gap: 10px;
    align-items: center;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
    width: 200px;
    height: 48px !important;
    margin: 0 !important;
    border: 2px solid #eee !important;
    border-radius: 8px !important;
    padding: 0 15px !important;
    font-family: 'Hind Siliguri', sans-serif;
    box-shadow: none !important;
    outline: none;
}

.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
    border-color: var(--lipibd-primary-green) !important;
}

.woocommerce-cart table.cart td.actions .button {
    height: 48px !important;
    border-radius: 8px !important;
    padding: 0 25px !important;
    font-weight: 600 !important;
    font-family: 'Hind Siliguri', sans-serif;
    transition: all 0.3s ease !important;
}

/* Apply Coupon Button */
.woocommerce-cart table.cart td.actions .coupon .button {
    background: var(--lipibd-text-dark) !important;
    color: #fff !important;
}
.woocommerce-cart table.cart td.actions .coupon .button:hover {
    background: #333 !important;
}

/* Update Cart Button */
.woocommerce-cart table.cart td.actions > .button {
    background: #fff !important;
    border: 2px solid #eee !important;
    color: var(--lipibd-text-gray) !important;
}
.woocommerce-cart table.cart td.actions > .button:hover {
    border-color: var(--lipibd-primary-green) !important;
    color: var(--lipibd-primary-green) !important;
}

/* 4. Cart Totals Card */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    float: none !important;
    width: 100% !important;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--lipibd-shadow-soft);
    padding: 35px;
    border: 1px solid #f0f0f0;
}

.woocommerce .cart_totals h2 {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 1.6rem;
    color: var(--lipibd-text-dark);
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.woocommerce .cart_totals table.shop_table {
    border: none !important;
    margin: 0 0 25px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    border-top: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 15px 0 !important;
    background: transparent !important;
}

.woocommerce .cart_totals table.shop_table th {
    color: var(--lipibd-text-gray);
    font-weight: 500;
}

.woocommerce .cart_totals table.shop_table td {
    text-align: right;
    color: var(--lipibd-text-dark);
    font-weight: 600;
}

.woocommerce .cart_totals table.shop_table tr.order-total td strong {
    color: var(--lipibd-primary-green);
    font-size: 1.4rem;
}

/* 5. Checkout Button Redesign */
.woocommerce .cart-collaterals .checkout-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 56px !important;
    background: var(--lipibd-primary-green) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    font-family: 'Hind Siliguri', sans-serif;
    transition: all 0.3s ease !important;
}

.woocommerce .cart-collaterals .checkout-button:hover {
    background: var(--lipibd-light-green) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25);
}

/* 6. Mobile Responsiveness */
@media (max-width: 768px) {
    .woocommerce-cart table.cart td.actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .woocommerce-cart table.cart td.actions .coupon {
        width: 100%;
        flex-direction: column;
    }
    .woocommerce-cart table.cart td.actions .coupon .input-text,
    .woocommerce-cart table.cart td.actions .coupon .button,
    .woocommerce-cart table.cart td.actions > .button {
        width: 100% !important;
    }
}
/* =====================================================
   CART PAGE: LEFT/RIGHT GAPS & BUTTON SPACING FIX
===================================================== */

/* 1. Force Left and Right Gaps on all screens */
body.woocommerce-cart .woocommerce {
    max-width: 1250px !important;
    margin-top: 60px !important;
    margin-bottom: 80px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 4% !important;  /* Forces a guaranteed gap on the left */
    padding-right: 4% !important; /* Forces a guaranteed gap on the right */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Fix the missing gap under the Proceed to Checkout button */
.woocommerce-cart .cart-collaterals .cart_totals {
    padding: 35px 35px 45px 35px !important; /* The '45px' adds the bottom gap inside the white card */
}

/* Prevents the button wrapper from collapsing the card */
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* =====================================================
   CART PAGE: CHECKOUT BUTTON SPACING FIX
===================================================== */
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
    padding-top: 15px !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
}

/* Force the white card to keep its bottom padding */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    padding-bottom: 40px !important;
}

/* =========================================
FIX CART TOTAL BOX WIDTH
========================================= */

.woocommerce-cart .cart-collaterals{
    width: 100%;
}

.woocommerce-cart .cart-collaterals .cart_totals{
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop keep right alignment */

@media (min-width:992px){

.woocommerce-cart .cart-collaterals .cart_totals{
    margin-left: auto;
    margin-right: 0;
}

}


/* =========================================
CHECKOUT BUTTON SIDE GAP FIX
========================================= */

.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout{
    padding-left: 10px;
    padding-right: 10px;
}

/* Button full width with gap */

.woocommerce-cart .cart-collaterals .checkout-button{
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}


/* =========================================
IMPROVE BUTTON LOOK
========================================= */

.woocommerce-cart .cart-collaterals .checkout-button{
    height: 58px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all .25s ease;
}

.woocommerce-cart .cart-collaterals .checkout-button:hover{
    transform: translateY(-2px);
}


/* =========================================
MOBILE FIX
========================================= */

@media (max-width:768px){

.woocommerce-cart .cart-collaterals .cart_totals{
    max-width: 100%;
}

}
/* =========================================
MOBILE FIX FOR CART TOTAL BOX
========================================= */

@media (max-width:768px){

/* Full width card */
.woocommerce-cart .cart-collaterals .cart_totals{
max-width:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
padding:30px 20px 35px 20px !important;
}

/* Fix container spacing */
body.woocommerce-cart .woocommerce{
padding-left:20px !important;
padding-right:20px !important;
}

/* Button spacing fix */
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout{
padding-left:0 !important;
padding-right:0 !important;
}

/* Better button size */
.woocommerce-cart .cart-collaterals .checkout-button{
width:100% !important;
height:56px;
font-size:16px;
border-radius:10px;
}

}

/* =================================
MOBILE CART TOTAL RIGHT GAP FIX
================================= */

@media (max-width:768px){

/* Fix main container spacing */
body.woocommerce-cart .woocommerce{
padding-left:20px !important;
padding-right:20px !important;
box-sizing:border-box;
}

/* Make totals card use full container width */
.woocommerce-cart .cart-collaterals{
width:100% !important;
padding:0 !important;
margin:0 !important;
}

/* Fix cart totals box spacing */
.woocommerce-cart .cart-collaterals .cart_totals{
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:30px 20px 35px 20px !important;
box-sizing:border-box;
}

/* Fix checkout button spacing */
.woocommerce-cart .cart-collaterals .checkout-button{
width:100% !important;
margin-top:10px;
}

}

/* =====================================================
   CART PAGE: NOTICES & ALERTS FIX
===================================================== */
/* 1. Allow the main flex container to wrap items into new rows */
@media (min-width: 992px) {
    .woocommerce-cart .woocommerce {
        flex-wrap: wrap !important; 
    }
}

/* 2. Force the notices wrapper to take 100% width and sit on top */
.woocommerce-cart .woocommerce-notices-wrapper {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 20px !important;
}

/* 3. Modernize the notice message box to match your theme */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    border-radius: 12px !important;
    border-top-color: var(--lipibd-primary-green) !important;
    box-shadow: var(--lipibd-shadow-soft) !important;
    font-family: 'Hind Siliguri', sans-serif !important;
    background: #fff !important;
}
/* =====================================================
   CART PAGE: ALIGNMENT & NOTICE FIX (FINAL)
===================================================== */
@media (min-width: 992px) {
    /* Allow wrapping and distribute space between columns */
    .woocommerce-cart .woocommerce {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 0 !important; 
    }
    
    /* 1. Force Notice to top (100% width) */
    .woocommerce-cart .woocommerce-notices-wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 30px !important;
    }
    
    /* 2. Cart Table (Left side - 64% width) */
    .woocommerce-cart .woocommerce-cart-form {
        width: 64% !important; 
        flex: 0 0 64% !important;
    }
    
    /* 3. Cart Totals (Right side - 33% width) */
    .woocommerce-cart .cart-collaterals {
        width: 33% !important; 
        flex: 0 0 33% !important;
        margin-top: 0 !important;
    }
    /* Note: The missing 3% acts as the perfect gap between them! */
}

/* =====================================================
   WOOCOMMERCE MODERN CHECKOUT PAGE (ULTIMATE FIX)
===================================================== */

/* =====================================================
   WOOCOMMERCE CHECKOUT: FULL WIDTH TEMPLATE MASTER FIX
===================================================== */

/* 1. UNIVERSAL MATH FIX (STOPS ALL MOBILE BLEEDING) */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .woocommerce *,
body.woocommerce-checkout .woocommerce *::before,
body.woocommerce-checkout .woocommerce *::after {
    box-sizing: border-box !important;
    max-width: 100vw !important;
}

/* 2. KILL WOOCOMMERCE INVISIBLE LAYOUT BREAKERS */
form.checkout.woocommerce-checkout::before,
form.checkout.woocommerce-checkout::after {
    display: none !important;
}

/* 3. MAIN CONTAINER REBUILD (REPLACES THE NO-LIMITS TEMPLATE) */
body.woocommerce-checkout {
    overflow-x: hidden !important; 
}
body.woocommerce-checkout .woocommerce {
    max-width: 1300px !important;
    margin: 60px auto 80px auto !important;
    padding-left: 20px !important; 
    padding-right: 20px !important;
    width: 100% !important;
    overflow-x: hidden !important; /* Traps everything inside */
}

/* 4. DESKTOP GRID (LOCKED COLUMNS) */
@media (min-width: 992px) {
    body.woocommerce-checkout .woocommerce {
        padding-left: 5% !important; 
        padding-right: 5% !important;
    }
    form.checkout.woocommerce-checkout {
        display: grid !important;
        grid-template-columns: 55% 40% !important;
        justify-content: space-between !important;
        align-items: start !important;
    }
    #customer_details {
        grid-column: 1 !important;
        grid-row: 1 / span 3 !important; 
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    #customer_details .col-1, 
    #customer_details .col-2 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }
    #order_review_heading {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 0 20px 0 !important;
    }
    #order_review {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        position: sticky !important;
        top: 40px !important; 
    }
}

/* 5. TYPOGRAPHY & FORMS */
.woocommerce-checkout h3 {
    font-family: 'Hind Siliguri', sans-serif !important;
    font-size: 1.6rem !important;
    color: var(--lipibd-text-dark) !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 15px;
}
.woocommerce-checkout .form-row {
    margin-bottom: 20px !important;
}
.woocommerce-checkout .form-row label {
    font-family: 'Hind Siliguri', sans-serif;
    color: var(--lipibd-text-dark);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100% !important;
    height: 52px !important;
    border: 2px solid #eee !important;
    border-radius: 8px !important;
    padding: 0 15px !important;
    font-family: 'Hind Siliguri', sans-serif !important;
    background: #fafafa !important;
    color: var(--lipibd-text-dark) !important;
    box-shadow: none !important;
}
.woocommerce-checkout textarea {
    height: 120px !important;
    padding-top: 15px !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--lipibd-primary-green) !important;
    background: #fff !important;
    outline: none !important;
}

/* 6. SELECT2 DROPDOWN FIXES (Country & District) */
.woocommerce-checkout .select2-container {
    width: 100% !important;
}
.woocommerce-checkout .select2-container .select2-selection--single {
    height: 52px !important;
    border: 2px solid #eee !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 5px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    right: 15px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--lipibd-text-dark) !important;
    font-family: 'Hind Siliguri', sans-serif !important;
}

/* 7. ORDER SUMMARY CARD */
#order_review {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: var(--lipibd-shadow-soft) !important;
    padding: 35px !important;
    border: 1px solid #f0f0f0 !important;
}
.woocommerce-checkout table.shop_table {
    border: none !important;
    width: 100% !important;
    table-layout: fixed !important; 
    margin-bottom: 0 !important;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    border-top: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 15px 5px !important;
    word-wrap: break-word !important; 
}
.woocommerce-checkout table.shop_table th {
    width: 60% !important;
    color: var(--lipibd-text-gray);
}
.woocommerce-checkout table.shop_table td {
    width: 40% !important;
    text-align: right;
    font-weight: 600;
}
.woocommerce-checkout table.shop_table tr.order-total td strong {
    color: var(--lipibd-primary-green);
    font-size: 1.4rem;
}

/* 8. PAYMENT & BUTTON */
#payment {
    background: #f9fafb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 30px !important;
    border: 1px solid #eee !important;
    width: 100% !important;
}
#payment ul.payment_methods {
    border-bottom: 1px solid #eee !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    padding-left: 0 !important;
    list-style: none !important;
}
#payment div.payment_box {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 15px !important;
    font-size: 0.95rem;
    word-break: break-word !important;
}
#place_order {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 56px !important;
    background: var(--lipibd-primary-green) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    border: none !important;
}

/* 9. COUPON NOTICES */
.woocommerce-form-coupon-toggle { margin-bottom: 30px; }
.woocommerce-checkout .woocommerce-info {
    border-top-color: var(--lipibd-primary-green) !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: var(--lipibd-shadow-soft) !important;
}

/* 10. STRICT MOBILE BOUNDARY LOCK */
@media (max-width: 991px) {
    form.checkout.woocommerce-checkout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    #customer_details, 
    #order_review_heading,
    #order_review,
    #payment {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #order_review_heading {
        margin-top: 40px !important;
    }
    #order_review {
        padding: 20px 15px !important;
    }
    .woocommerce-checkout table.shop_table th { width: 55% !important; font-size: 0.9rem !important; }
    .woocommerce-checkout table.shop_table td { width: 45% !important; font-size: 0.9rem !important; }
}

/* =====================================================
   CHECKOUT: MOBILE HORIZONTAL SCROLL (FINAL KILL SWITCH)
===================================================== */
@media (max-width: 991px) {
    /* 1. Remove 100vw and force strict 100% limits */
    body.woocommerce-checkout,
    body.woocommerce-checkout .woocommerce,
    body.woocommerce-checkout .woocommerce *,
    form.checkout * {
        max-width: 100% !important; 
    }

    /* 2. Destroy WooCommerce's hidden negative margins */
    .woocommerce-checkout .col2-set,
    .woocommerce-checkout .woocommerce-notices-wrapper,
    .woocommerce-form-coupon-toggle .woocommerce-info,
    .woocommerce-checkout form.checkout_coupon {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Absolute lock on the website foundation */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }
}

/* =====================================================
   HEADER SUB-MENU / DROPDOWN FIX
===================================================== */

/* 1. Add a small dropdown arrow to the parent link */
.menu-item-has-children > a::after {
    content: " ▼";
    font-size: 0.6em;
    vertical-align: middle;
    margin-left: 6px;
    opacity: 0.6;
}

/* 2. Desktop Dropdown Logic */
@media (min-width: 992px) {
    /* Make the parent item the anchor point */
    .menu-item-has-children {
        position: relative !important;
    }

    /* Hide and style the dropdown box */
    ul.sub-menu {
        position: absolute !important;
        top: 130% !important; /* Starts slightly lower for a slide-up effect */
        left: 0 !important;
        background: #fff !important;
        min-width: 220px !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        list-style: none !important; /* Removes the bullet point */
        z-index: 9999 !important; /* Forces it to sit above page content */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease !important;
        pointer-events: none;
    }

    /* Show dropdown cleanly on hover */
    .menu-item-has-children:hover > ul.sub-menu {
        top: 100% !important; /* Slides up into perfect position */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Sub-menu structure */
    ul.sub-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sub-menu link styling */
    ul.sub-menu li a {
        display: block !important;
        padding: 12px 20px !important;
        color: #333 !important;
        font-family: 'Hind Siliguri', sans-serif !important;
        font-size: 0.95rem !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f9f9f9 !important;
        transition: all 0.2s ease !important;
        white-space: nowrap !important;
    }

    ul.sub-menu li:last-child a {
        border-bottom: none !important;
    }

    /* LipiBD hover effect inside the dropdown */
    ul.sub-menu li a:hover {
        background-color: #f4fdf7 !important; 
        color: var(--lipibd-primary-green) !important; 
        padding-left: 25px !important; /* Adds a nice micro-interaction slide */
    }
}
/* =====================================================
   MOBILE MENU: SUB-MENU FIX (TAP TO OPEN)
===================================================== */
/* =====================================================
   MOBILE MENU: SUB-MENU FIX (TOGGLE CLICK)
===================================================== */
@media (max-width: 991px) {
    /* 1. Hide the sub-menu by default on mobile */
    ul.sub-menu {
        display: none !important; 
        list-style: none !important;
        padding: 0 0 0 15px !important;
        margin: 5px 0 10px 10px !important;
        border-left: 2px solid var(--lipibd-primary-green) !important;
    }

    /* 2. Show the sub-menu ONLY when our Javascript class is active */
    li.menu-item-has-children.active-dropdown > ul.sub-menu {
        display: block !important;
    }

    /* 3. Format the mobile sub-menu items */
    ul.sub-menu li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 4. Style the actual link text */
    ul.sub-menu li a {
        display: block !important;
        padding: 10px 15px !important;
        font-family: 'Hind Siliguri', sans-serif !important;
        font-size: 0.95rem !important;
        color: var(--lipibd-text-dark) !important;
        text-decoration: none !important;
        background: #fafafa !important;
        border-radius: 6px !important;
        margin-bottom: 5px !important;
    }

    ul.sub-menu li a:active {
        background: #eefdf2 !important;
        color: var(--lipibd-primary-green) !important;
    }
}
/* =====================================================
   MY ACCOUNT PAGE: STRICT GRID LAYOUT (SIDE-BY-SIDE)
===================================================== */

/* 1. Kill WooCommerce invisible elements that break layouts */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after {
    display: none !important;
}

/* 2. Main Container - Strict Grid Layout */
body.woocommerce-account .woocommerce {
    max-width: 1200px !important;
    margin: 50px auto !important;
    padding: 0 5% !important;
    display: grid !important;
    grid-template-columns: 25% 70% !important; /* 25% sidebar, 70% content */
    justify-content: space-between !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* 3. Left Sidebar Navigation */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 8px !important;
    border: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #444 !important;
    text-decoration: none !important;
    font-family: 'Hind Siliguri', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #f4fdf7 !important; 
    color: var(--lipibd-primary-green) !important; 
    padding-left: 25px !important; /* Slide effect */
}

/* 4. Right Content Area */
body.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    padding: 40px !important;
    font-family: 'Hind Siliguri', sans-serif !important;
    color: #333 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--lipibd-primary-green) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-decoration: underline !important;
}

/* 5. Mobile Responsiveness (Forced Stacking) */
@media (max-width: 991px) {
    body.woocommerce-account .woocommerce {
        display: flex !important; /* Swaps grid for flex on mobile to ensure clean stacking */
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-content {
        padding: 25px 15px !important;
    }
}

/* =====================================================
   ORDER RECEIVED (THANK YOU) PAGE REDESIGN
===================================================== */

/* 1. Main Container Setup */
body.woocommerce-order .woocommerce {
    max-width: 900px !important;
    margin: 60px auto 100px auto !important;
    padding: 0 20px !important;
    font-family: 'Hind Siliguri', sans-serif !important;
}

/* 2. Success Banner ("Thank you. Your order has been received.") */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received {
    background: #f4fdf7 !important;
    color: var(--lipibd-primary-green) !important;
    border: 2px dashed var(--lipibd-primary-green) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 40px !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.1) !important;
}

/* 3. Order Overview Bar (Number, Date, Email, Total) */
ul.woocommerce-order-overview {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    list-style: none !important;
    padding: 30px 20px !important;
    margin: 0 0 40px 0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    border: 1px solid #f0f0f0 !important;
}

ul.woocommerce-order-overview li {
    border-right: 1px solid #eee !important;
    border-bottom: none !important;
    padding: 0 20px !important;
    flex: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    color: #777 !important;
    margin: 0 !important;
}

ul.woocommerce-order-overview li:last-child {
    border-right: none !important;
}

ul.woocommerce-order-overview li strong {
    display: block !important;
    font-size: 1.15rem !important;
    color: var(--lipibd-text-dark) !important;
    text-transform: none !important;
    margin-top: 8px !important;
    word-break: break-word !important;
}

/* 4. Headings */
.woocommerce-order h2 {
    font-size: 1.6rem !important;
    color: var(--lipibd-text-dark) !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f5f5f5 !important;
    padding-bottom: 10px !important;
    font-family: 'Hind Siliguri', sans-serif !important;
}

/* 5. Order Details Table */
.woocommerce-order table.shop_table {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    border: 1px solid #f0f0f0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 40px !important;
    overflow: hidden !important;
}

.woocommerce-order table.shop_table thead th {
    background: #fafafa !important;
    padding: 15px 20px !important;
    border-bottom: 2px solid #eee !important;
    color: var(--lipibd-text-gray) !important;
}

.woocommerce-order table.shop_table tbody td,
.woocommerce-order table.shop_table tfoot td,
.woocommerce-order table.shop_table tfoot th {
    padding: 15px 20px !important;
    border-bottom: 1px solid #eee !important;
    border-top: none !important;
}

/* Fix purple links */
.woocommerce-order table.shop_table a {
    color: var(--lipibd-primary-green) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.woocommerce-order table.shop_table a:hover {
    text-decoration: underline !important;
}

.woocommerce-order table.shop_table tfoot th {
    text-align: right !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.woocommerce-order table.shop_table tfoot td {
    text-align: right !important;
    font-weight: 600 !important;
    color: var(--lipibd-text-dark) !important;
}

/* Highlight Final Total */
.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
    font-size: 1.25rem !important;
    color: var(--lipibd-primary-green) !important;
    border-bottom: none !important;
}

/* 6. Billing Address Box */
.woocommerce-customer-details {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    border: 1px solid #f0f0f0 !important;
    padding: 30px !important;
}

.woocommerce-customer-details address {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    font-style: normal !important;
    line-height: 1.8 !important;
    color: #555 !important;
}

/* 7. Mobile Responsiveness */
@media (max-width: 768px) {
    ul.woocommerce-order-overview {
        flex-direction: column !important;
        padding: 15px !important;
    }
    
    ul.woocommerce-order-overview li {
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 15px 0 !important;
    }
    
    ul.woocommerce-order-overview li:last-child {
        border-bottom: none !important;
    }
    
    .woocommerce-order table.shop_table th,
    .woocommerce-order table.shop_table td {
        padding: 12px 10px !important;
        font-size: 0.9rem !important;
    }
}
/* =====================================================
   FIX HEADER HIDING BEHIND WP ADMIN BAR
===================================================== */
/* Desktop Admin Bar Height */
body.admin-bar header {
    top: 5px !important;
}

/* Mobile Admin Bar Height */
@media screen and (max-width: 782px) {
    body.admin-bar header {
        top: 46px !important; 
    }
}