@media (max-width: 768px) {
    .header {
        position: relative; /* Ensures the header is the parent container */
        z-index: 10; /* Keeps header elements on top */
    }
    .site-logo {
        position: absolute;
        left: 50%;
        top: 0px; /* Adjust this to position the logo vertically in the header */
        transform: translateX(-50%);
        z-index: 20; /* Ensures the logo stays above other elements */
    }
    .hamburger-menu {
        position: absolute;
        left: 15px;
        top: 15px; /* Aligns with the logo */
        z-index: 30; /* Ensures it is always on top */
    }
    .menu-dropdown {
        position: absolute; /* Makes the dropdown independent of the logo and header */
        top: 100%; /* Positions the menu below the header */
        left: 0;
        width: 100%;
        z-index: 5; /* Keeps it below the logo */
    }
}

body {
    overflow-x: hidden;
}

.post-content, .single-post {
    max-width: 100%;
    overflow-x: hidden;
    padding: 0 15px;
    box-sizing: border-box;
}


.tags-links { display:none; }


.comments-link,
.entry-meta .comments-link {
    display: none;
}


/* FIX narrow mobile width in GeneratePress */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .inside-article {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .entry-content {
    max-width: 100% !important;
  }

}

/* Force single post white article to span full viewport on mobile */
@media (max-width: 768px) {

  body.single-post .site-main {
    max-width: 100vw;
  }

  body.single-post .inside-article {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

}

/* Force header background to span full width on mobile (all pages) */
@media (max-width: 768px) {

  .site-header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

}


/* =========================================================
   SHOP PAGE GRID LAYOUT
   Styles the /shop/ parent page child listings
   Mobile-first, responsive grid for desktop
   ========================================================= */

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

/* Tablet layout */
@media (min-width: 768px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop layout */
@media (min-width: 1100px) {
    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.shop-item img {
    width: 100%;
    height: auto;
    display: block;
}

.shop-item h3 {
    margin-top: 15px;
    margin-bottom: 8px;
}

.shop-item p {
    margin-top: 0;
    color: #555;
    line-height: 1.5;
}

/* Blog image captions inside post content (Gutenberg) */
.wp-block-image figcaption {
    font-size: 14px;
    text-align: left;
	  font-style: italic;
	  color: #555;
}

/* Amazon Affiliate Disclosure
   This inserts the required Amazon Associates disclosure
   at the top of every single blog post for compliance */
.single-post .entry-content::before {
    content: "This article may contain affiliate links. If you click and make a purchase, we may earn a commission at no extra cost to you. As an Amazon Associate, we earn from qualifying purchases.";
    display: block;
    font-size: 12px;
		font-style: italic;
    color: #555;
    background: #f6f6f6;
    padding: 10px 12px;
    margin-bottom: 20px;
    border-radius: 4px;
}


/* Hide Pinterest save button inside "Our Top Picks" and product cards */
.top-picks .pinsavepinterest-pin-it-button,
.product-card .pinsavepinterest-pin-it-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}