/*
 Theme Name: Toafa Hotel Booking Pro Child
 Template: hotel-booking-pro
 Version: 1.0.2
*/

/* ================================
   GLOBAL / LAYOUT
==================================*/
html, body { overflow-x: hidden; }
#masthead {
  position: sticky; top: 0; z-index: 1000; background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Accessible focus */
a:focus-visible, button:focus-visible { outline: 3px solid #ff7f50; outline-offset: 2px; }

/* Kill any theme-injected hero overlays */
.hero-banner::before,
.hero-banner::after,
.hero-overlay,
.hero__overlay { content: none !important; background: none !important; box-shadow: none !important; opacity: 0 !important; }

/* ================================
   NAVIGATION (Desktop-first)
==================================*/
.menu-toggle, .mobile-menu-toggle, .hamburger, .offcanvas-toggle { display: none !important; }

.main-navigation, nav.main-navigation { width: 100%; }
.main-navigation .menu,
.main-navigation ul.menu,
#site-navigation .menu { 
  display: flex; flex-wrap: wrap; gap: 22px; 
  list-style: none; margin: 0; padding: 14px 20px;
  align-items: center; justify-content: flex-end;
}

.main-navigation .menu > li { position: relative; }
.main-navigation .menu > li > a {
  text-decoration: none; padding: 8px 0; font-weight: 600;
  color: #1a1a1a;
}
.main-navigation .menu > li > a:hover { color: #0aa; }

/* Dropdowns */
.main-navigation .menu li:hover > ul.sub-menu { display: block; }
.main-navigation .menu ul.sub-menu {
  display: none; position: absolute; top: 120%; left: 0;
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  padding: 10px 14px; min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.main-navigation .menu ul.sub-menu li { margin: 0; }
.main-navigation .menu ul.sub-menu a { display: block; padding: 8px 6px; }

/* Hide off-canvas / mobile nav on desktop */
#sidr, .sidr, .mm-menu, .offcanvas-menu, .drawer, .mobile-nav { display: none !important; }

/* MOBILE (≤ 991.98px): re-enable hamburger + drawer */
@media (max-width: 991.98px) {
  .menu-toggle, .mobile-menu-toggle, .hamburger, .offcanvas-toggle { 
    display: inline-flex !important; align-items: center; gap: 8px; margin: 10px 16px;
  }
  .main-navigation .menu,
  #site-navigation .menu { display: none; }
  /* remove display:none override for drawer if your theme uses it */
}

/* ================================
   HERO (full-width bright banner)
==================================*/
.title-box { display: none !important; }

.hero-banner,
.home .hero,
.section-hero {
  background-image: url('/wp-content/uploads/2025/09/toafa-lodge-banner.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 68vh;
  display: grid; place-items: center;
  margin: 0; padding: 0;
}

.hero-banner .container,
.section-hero .container,
.home .hero .container {
  width: min(1100px, 92vw);
  padding: 24px;
}

.hero-banner h1, .hero-banner h2, .hero-banner p,
.section-hero h1, .section-hero h2, .section-hero p {
  color: #0a0a0a; text-shadow: none;
}

/* Hero CTA button */
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid #0aa;
  font-weight: 700; text-decoration: none;
}
.hero-cta:hover { transform: translateY(-1px); }

/* ================================
   CONTENT
==================================*/
main { padding: 40px 20px; }
.container, .site-container { max-width: 1100px; margin: 0 auto; }

img { height: auto; }
/* ===== Reset nav UI cleanly without touching layout ===== */

/* Desktop (≥992px): hide *mobile* controls and the mobile drawer */
@media (min-width: 992px){
  .toggle-nav.mobile-menu,
  .menu-toggle,
  .hamburger,
  .offcanvas-toggle,
  .closebtn.mobile-menu,
  #mySidenav { display: none !important; }
}

/* Mobile (≤991.98px): hamburger visible; "X" only when drawer is open */
@media (max-width: 991.98px){
  /* show the hamburger */
  .toggle-nav.mobile-menu,
  .menu-toggle,
  .hamburger,
  .offcanvas-toggle {
    display: inline-flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10002 !important;
  }

  /* by default keep the "X" hidden */
  .closebtn.mobile-menu { display: none !important; }

  /* when the drawer is open (theme JS sets a non-zero width), show the "X" */
  #mySidenav[style]:not([style*="width:0"]) .closebtn.mobile-menu {
    display: block !important;
  }

  /* when the drawer is closed, it must not intercept taps */
  #mySidenav[style*="width:0"]{
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* keep drawer menu text left-aligned */
  #mySidenav .mobile_nav, #mySidenav .menu { text-align: left !important; }
}
/* === DESKTOP REPAIR (≥992px): use #mySidenav as the inline desktop menu === */
@media (min-width: 992px){
  /* Make the sidenav behave like a normal header container */
  #mySidenav.nav.sidenav{
    display: block !important;
    position: static !important;
    width: auto !important; height: auto !important;
    visibility: visible !important; pointer-events: auto !important;
    box-shadow: none !important; transform: none !important;
    background: transparent !important;
  }
  /* Horizontal menu list */
  #mySidenav .mobile_nav{
    display: flex !important; flex-wrap: wrap;
    gap: 22px; list-style: none !important;
    margin: 0 !important; padding: 14px 20px !important;
    justify-content: flex-end !important; align-items: center !important;
  }
  #mySidenav .mobile_nav li{ float:none !important; display:block !important; margin:0 !important; padding:0 !important; }
  #mySidenav .mobile_nav a{ display:block; padding:8px 0; font-weight:600; color:#1a1a1a; text-decoration:none; }

  /* Hide mobile-only controls on desktop */
  .toggle-nav.mobile-menu,
  .menu-toggle,
  .hamburger,
  .offcanvas-toggle,
  .closebtn.mobile-menu{ display: none !important; }
}

/* === MOBILE KEEP (≤991.98px): hamburger visible; X only when open; closed drawer inert === */
@media (max-width: 991.98px){
  .toggle-nav.mobile-menu, .menu-toggle, .hamburger, .offcanvas-toggle{
    display: inline-flex !important; align-items: center;
    visibility: visible !important; opacity: 1 !important; z-index: 10002 !important;
  }
  /* Default: hide the X */
  .closebtn.mobile-menu{ display: none !important; }
  /* When drawer is open (any non-zero width), show the X */
  #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]) .closebtn.mobile-menu{
    display: block !important;
  }
  /* When drawer is closed, it must not intercept taps */
  #mySidenav[style*="width:0"], #mySidenav[style*="width: 0"]{
    pointer-events: none !important; visibility: hidden !important;
  }
}
/* ===== MOBILE FINAL TOUCHES (≤991.98px) ===== */
@media (max-width: 991.98px){
  /* Show hamburger; keep it tappable */
  .toggle-nav.mobile-menu, .menu-toggle, .hamburger, .offcanvas-toggle{
    display: inline-flex !important; align-items: center;
    visibility: visible !important; opacity: 1 !important; z-index: 10002 !important;
  }

  /* Hide the X by default; only show when drawer is actually open */
  .closebtn.mobile-menu{ display: none !important; }
  #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]) .closebtn.mobile-menu{
    display: block !important;
  }

  /* When the drawer is closed (width:0), it must not steal taps or overlay */
  #mySidenav[style*="width:0"], #mySidenav[style*="width: 0"]{
    pointer-events: none !important; visibility: hidden !important;
    box-shadow: none !important;
  }

  /* Align the mobile list left */
  #mySidenav .mobile_nav, #mySidenav .menu{ text-align: left !important; }
  #mySidenav .mobile_nav{ list-style: none !important; margin: 0 !important; padding: 12px 18px !important; }
  #mySidenav .mobile_nav > li{ display: block !important; float: none !important; margin: 0 !important; }
  #mySidenav .mobile_nav a{ display: block !important; padding: 12px 8px !important; }
}
/* ===== MOBILE DRAWER: make OPEN state visible, sized, and on top ===== */
@media (max-width: 991.98px){
  /* Base drawer box (respect theme JS width changes) */
  #mySidenav.nav.sidenav{
    position: fixed !important;
    top: 0 !important; right: 0 !important;   /* theme opens from the right */
    height: 100vh !important;
    overflow-y: auto !important;
    background: #fff !important;
    z-index: 10050 !important;
    transition: width .25s ease !important;
  }

  /* CLOSED state (theme sets width:0) — keep it inert and hidden */
  #mySidenav[style*="width:0"], #mySidenav[style*="width: 0"]{
    width: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    box-shadow: none !important;
  }

  /* OPEN state (any non-zero width) — show as a readable panel */
  #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]){
    width: 80vw !important;                     /* visible panel width */
    pointer-events: auto !important;
    visibility: visible !important;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35) !important; /* dim backdrop */
  }

  /* Show the X only when the drawer is open */
  .closebtn.mobile-menu{ display: none !important; }
  #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]) .closebtn.mobile-menu{
    display: block !important;
    position: absolute !important; top: 12px !important; right: 14px !important;
  }

  /* Left-align the list items inside the drawer */
  #mySidenav .menu, #mySidenav .mobile_nav { text-align: left !important; }
  #mySidenav .mobile_nav{
    list-style: none !important; margin: 0 !important; padding: 14px 18px !important;
  }
  #mySidenav .mobile_nav > li{ display:block !important; float:none !important; margin:0 !important; }
  #mySidenav .mobile_nav a{ display:block !important; padding:12px 8px !important; }
}
/* ===== MOBILE DRAWER CONTENT FIX (≤991.98px) ===== */
@media (max-width: 991.98px){
  /* Base drawer box */
  #mySidenav.nav.sidenav{
    position: fixed !important;
    top: 0 !important; right: 0 !important;
    height: 100vh !important; overflow-y: auto !important;
    background: #fff !important; z-index: 10050 !important;
    transition: width .25s ease !important;
  }

  /* CLOSED: inert & hidden */
  #mySidenav[style*="width:0"], #mySidenav[style*="width: 0"]{
    width: 0 !important; pointer-events: none !important; visibility: hidden !important; box-shadow: none !important;
  }

  /* OPEN: visible panel + readable content */
  #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]){
    width: 80vw !important; pointer-events: auto !important; visibility: visible !important;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35) !important;
    background: #fff !important; color: #111 !important;
  }

  /* Make sure the navigation and list actually render */
  #mySidenav #site-navigation{ display:block !important; width:100% !important; position: relative !important; }
  #mySidenav .menu{ display:block !important; width:100% !important; opacity:1 !important; visibility:visible !important; }
  #mySidenav .menu ul{ display:block !important; }
  #mySidenav .mobile_nav{
    display:block !important; width:100% !important;
    list-style:none !important; margin:0 !important; padding:56px 18px 18px !important; /* room under the X */
    text-align:left !important;
  }
  #mySidenav .mobile_nav > li{ display:block !important; float:none !important; margin:0 !important; }
  #mySidenav .mobile_nav a{
    display:block !important; padding:12px 8px !important;
    color:#111 !important; text-decoration:none !important; font-weight:600 !important;
  }

  /* Show the X only when open, and keep it on top */
  .closebtn.mobile-menu{ display:none !important; }
  #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]) .closebtn.mobile-menu{
    display:block !important; position:absolute !important; top:12px !important; right:14px !important; z-index:10060 !important;
  }
}
/* ===== MOBILE: drawer closed by default; only visible when JS opens it ===== */
@media (max-width: 991.98px){
  /* Default CLOSED state (before JS runs) */
  html body #mySidenav.nav.sidenav{
    position: fixed !important;
    top: 0 !important; right: 0 !important;
    height: 100vh !important; overflow-y: auto !important;
    background: #fff !important;
    z-index: 10050 !important;

    /* closed-by-default */
    width: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;           /* avoid off-canvas remnants */
  }

  /* If JS explicitly sets width:0, keep it closed */
  html body #mySidenav[style*="width:0"],
  html body #mySidenav[style*="width: 0"]{
    width: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }

  /* When JS opens it (any non-zero width), show as a readable panel */
  html body #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]){
    width: 80vw !important;                 /* visible panel */
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35) !important; /* dim background */
    background: #fff !important;
  }

  /* X only when open */
  .closebtn.mobile-menu{ display: none !important; }
  html body #mySidenav[style]:not([style*="width:0"]):not([style*="width: 0"]) .closebtn.mobile-menu{
    display: block !important;
    position: absolute !important; top: 12px !important; right: 14px !important;
    z-index: 10060 !important;
  }

  /* Ensure menu items are visible */
  #mySidenav #site-navigation{ display:block !important; width:100% !important; }
  #mySidenav .menu, #mySidenav .mobile_nav{ display:block !important; opacity:1 !important; visibility:visible !important; text-align:left !important; }
  #mySidenav .mobile_nav{ list-style:none !important; margin:0 !important; padding:56px 18px 18px !important; }
  #mySidenav .mobile_nav > li{ display:block !important; float:none !important; margin:0 !important; }
  #mySidenav .mobile_nav a{ display:block !important; padding:12px 8px !important; color:#111 !important; font-weight:600 !important; text-decoration:none !important; }
}
/* === Toafa: homepage hero + header/menu fixes ======================= */
#masthead{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.04);}
body.home .hero-banner{
  position:relative;
  background-image:url('/wp-content/uploads/2025/09/toafa-lodge-banner.webp')!important;
  background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;
  display:grid;place-items:center;text-align:center;color:#fff;min-height:60vh;
}
body.home .hero-banner .hero-overlay{background:rgba(0,0,0,.35);padding:32px 20px;border-radius:12px;}
body.home .hero-banner h1,body.home .hero-banner p{color:#fff;margin:0 0 10px;}
@media (min-width:992px){ body.home .hero-banner{min-height:82vh;} }
@media (min-width:1200px){ body.home .hero-banner{min-height:90vh;} }

/* Desktop: hide mobile controls */
@media (min-width:992px){
  .toggle-nav.mobile-menu,.menu-toggle,.hamburger,.offcanvas-toggle,.closebtn.mobile-menu,#mySidenav{display:none!important;}
}
/* Mobile: hamburger visible; X only when drawer is open */
@media (max-width:991.98px){
  .toggle-nav.mobile-menu,.menu-toggle,.hamburger,.offcanvas-toggle{
    display:inline-flex!important;align-items:center;visibility:visible!important;opacity:1!important;z-index:10002!important;
  }
  .closebtn.mobile-menu{display:none!important;}
  #mySidenav[style]:not([style*="width:0"]) .closebtn.mobile-menu{display:block!important;}
  #mySidenav[style*="width:0"]{pointer-events:none!important;visibility:hidden!important;}
  #mySidenav .mobile_nav,#mySidenav .menu{text-align:left!important;}
}
/* ==================================================================== */
  /* Insert a block before the content that acts as the hero */
  /* Remove the page title strip on Home (desktop) */
}
/* Home (desktop): hide the old collage row just under the header */
@media (min-width: 992px){
  body.home .outer_dpage > .container > .row:first-of-type,
  body.home .outer_dpage > .container > .middle-content > .row:first-of-type,
  body.home .outer_dpage .middle-content > .wp-block-columns:first-of-type,
  body.home .outer_dpage .middle-content > .wp-block-group:first-of-type,
  body.home .outer_dpage .middle-content > .wp-block-gallery:first-of-type,
  body.home .outer_dpage .middle-content > .gallery:first-of-type{
    display:none !important;
    margin:0 !important; padding:0 !important; height:0 !important; overflow:hidden !important;
  }
}
/* Remove theme's page title bar */
.title-box { display: none !important; }
/* Hide any collage/first row under the header on Home */
body.home .outer_dpage > .container > .row:first-of-type,
body.home .outer_dpage > .container > .middle-content > .row:first-of-type,
body.home .outer_dpage .middle-content > .wp-block-columns:first-of-type,
body.home .outer_dpage .middle-content > .wp-block-group:first-of-type,
body.home .outer_dpage .middle-content > .wp-block-gallery:first-of-type,
body.home .outer_dpage .middle-content > .gallery:first-of-type{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* ===== Footer enhancements ===== */
.footer-cols { row-gap: 24px; }
.footer-contacts { font-size: 15px; line-height: 1.6; }

.footer-heading {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 16px;
}

.footer-line {
  margin: 4px 0;
  display: flex; align-items: center; gap: 10px;
}

.footer-line i { width: 18px; text-align: center; opacity: .85; }

.footer-contacts a { color: #222; text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,.2); }
.footer-contacts a:hover { border-bottom-color: transparent; }

.footer-social {
  margin-top: 10px; display: flex; gap: 10px; align-items: center;
}
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; transition: transform .15s ease, background .15s ease;
  color: #222; background: #fff;
}
.footer-social a:hover { transform: translateY(-2px); background: #f7f7f7; }

.footer-social .facebook { color: #1877F2; }
.footer-social .instagram { color: #E1306C; }
.footer-social .tiktok { color: #111; }
.footer-social .youtube { color: #FF0000; }

/* Tighten copyright row a bit */
.copyright .copy-text { padding: 10px 0; }
.copyright p { margin: 0; font-size: 14px; }
/* (Book Now styles – hero, nav, product cards) */
.toafa-book-hero{background-image:url('https://toafalodge.to/wp-content/uploads/2025/09/toafa-lodge-banner.webp');background-size:cover;background-position:center;padding:80px 20px;color:#fff;text-align:center;position:relative}
.toafa-book-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35))}
.toafa-book-hero__inner{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.toafa-book-hero h1{font-size:44px;margin:0 0 10px}
.toafa-book-hero p{font-size:18px;margin:0 0 20px}
.toafa-cta{display:inline-block;padding:12px 20px;border-radius:10px;background:#e63946;color:#fff;font-weight:700;text-decoration:none}
.toafa-book-wrapper{max-width:1100px;margin:40px auto;padding:0 20px}
.toafa-book-nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.toafa-book-nav a{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:10px 14px;text-decoration:none;color:#111827;font-weight:600}
.toafa-book-nav a:hover{background:#e5e7eb}
.toafa-section{margin:48px 0}
.toafa-section header{text-align:center;margin-bottom:16px}
.toafa-section h2{font-size:28px;margin:0 0 6px}
.toafa-section p{color:#6b7280;margin:0}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.woocommerce ul.products{grid-template-columns:1fr}}
.woocommerce ul.products li.product{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.woocommerce ul.products li.product img{border-radius:10px;margin-bottom:12px}
.woocommerce ul.products li.product h2{font-size:20px;line-height:1.2;margin-bottom:6px}
.woocommerce ul.products li.product .price{font-size:18px;color:#065f46;font-weight:700;margin-bottom:10px}
.woocommerce ul.products li.product .button{background:#e63946;color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;text-transform:uppercase}
.woocommerce .woocommerce-breadcrumb,.page-title,.woocommerce-products-header{display:none}
/* === Book Now grid fixes (override parent widths/floats) === */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-left: 0 !important;
}
@media (max-width: 900px){ .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .woocommerce ul.products { grid-template-columns: 1fr; } }

/* Nuke theme-imposed floats/widths/margins */
.woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

/* Make product images fill the card width */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px;
  margin-bottom: 12px;
  display: block;
}

/* Typography & spacing tweaks */
.woocommerce ul.products li.product h2 { font-size: 20px; line-height: 1.25; margin: 8px 0 6px; }
.woocommerce ul.products li.product .price { font-size: 18px; color: #065f46; font-weight: 700; margin-bottom: 10px; }

/* Buttons */
.woocommerce ul.products li.product .button {
  background: #e63946;
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Hide duplicate default titles around the shop area */
.woocommerce .woocommerce-breadcrumb,
.page-title,
.woocommerce-products-header { display: none !important; }

/* ===== Book Now (no hero) ===== */
.toafa-book-wrapper{max-width:1100px;margin:30px auto;padding:0 20px}
.toafa-book-header{text-align:center;margin-bottom:10px}
.toafa-book-title{font-size:36px;margin:0 0 6px}
.toafa-book-sub{color:#6b7280;margin:0 0 16px}

/* Category pills */
.toafa-book-nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:10px 0 24px}
.toafa-book-nav a{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:10px 14px;text-decoration:none;color:#111827;font-weight:600}
.toafa-book-nav a:hover{background:#e5e7eb}

/* Sections */
.toafa-section{margin:38px 0}
.toafa-section header{text-align:center;margin-bottom:16px}
.toafa-section h2{font-size:28px;margin:0 0 6px}
.toafa-section p{color:#6b7280;margin:0}

/* Product grid (keep from earlier fix) */
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-left:0 !important}
@media (max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.woocommerce ul.products{grid-template-columns:1fr}}
.woocommerce ul.products li.product{float:none !important;width:auto !important;max-width:none !important;margin:0 !important;background:#fff;border:1px solid #eee;border-radius:14px;padding:16px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.woocommerce ul.products li.product a img,.woocommerce ul.products li.product img{width:100% !important;height:auto !important;border-radius:10px;margin-bottom:12px;display:block}
.woocommerce ul.products li.product h2{font-size:20px;line-height:1.25;margin:8px 0 6px}
.woocommerce ul.products li.product .price{font-size:18px;color:#065f46;font-weight:700;margin-bottom:10px}
.woocommerce ul.products li.product .button{background:#e63946;color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;text-transform:uppercase}

/* Hide default shop headers */
.woocommerce .woocommerce-breadcrumb,.page-title,.woocommerce-products-header{display:none !important}
/* Uniform card images */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  width:100% !important;
  height:auto !important;
  border-radius:10px;
  display:block;
  aspect-ratio: 4 / 3;   /* keeps all cards the same height */
  object-fit: cover;     /* nicely crops */
}
/* Smarter grid that adapts to how many items exist */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  margin-left:0 !important;
}
/* ===== Compact footer (black band) ===== */
#colophon,
footer.site-footer{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* If the theme has a widgets zone in the footer */
.site-footer .footer-widgets,
#colophon .footer-widgets{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Reduce space inside each footer column/widget */
.site-footer .widget,
#colophon .widget{
  margin-bottom: 8px !important;
}

/* Make the copyright strip tighter */
.site-footer .site-info{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Shrink social icons a touch */
.site-footer .social-icons a,
.site-footer .social a{
  width: 28px; height: 28px; line-height: 28px;
  font-size: 14px;
}

/* Slightly smaller footer text so it looks lighter */
.site-footer, #colophon{
  font-size: 14px;
}
/* ===== FORCE compact footer across common wrappers ===== */
/* Main footer block */
#footer,
.footer,
.site-footer,
#colophon {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Inner containers often add their own padding */
#footer .container,
.footer .container,
.site-footer .container,
#colophon .container,
.site-footer .footer-inner,
.site-footer .footer-main,
.site-footer .footer-top,
#colophon .footer-inner,
#colophon .footer-main,
#colophon .footer-top {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Widgets/columns spacing */
.site-footer .footer-widgets,
#colophon .footer-widgets,
.site-footer .widget,
#colophon .widget,
.site-footer .footer-column .widget,
#colophon .footer-column .widget {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-bottom: 6px !important;
}

/* Copyright / bottom strip (often a separate band) */
.site-footer .site-info,
#colophon .site-info,
.site-footer .copyright,
#colophon .copyright,
.site-footer .copyright-area,
#colophon .copyright-area,
.site-footer .footer-bottom,
#colophon .footer-bottom {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Footer typography + icons a touch smaller */
.site-footer, #colophon { font-size: 14px !important; }
.site-footer .social-icons a, .site-footer .social a { width: 28px; height: 28px; line-height: 28px; font-size: 14px; }

/* Also trim heading spacing within footer columns */
.site-footer h3, #colophon h3,
.site-footer h4, #colophon h4 {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}
/* --- Compact the black footer band (override Customizer rule) --- */
.outer-footer #footer .footer-cols { padding: 12px 0 !important; }   /* was 42px */
.outer-footer .copyright { padding: 8px 0 !important; }              /* tighten bottom strip */
.outer-footer { margin-top: 0 !important; }                          /* avoid any extra gap */
.outer-footer #footer .widget { margin-bottom: 6px !important; }     /* shorter widget spacing */
.outer-footer #footer .footer-heading,
.outer-footer #footer .widget-title { margin: 4px 0 8px !important; }/* tighter headings */