/*
Theme Name: RTCS - Theme
Theme URI:
Author: Rothirsch Tech. GmbH
Author URI: https://www.rothirsch.tech
Description: This is the main theme for RT Community sites
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-rtcs
Tags: minimal, blog
*/


/* Basic styling */
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.invisible {
    display: none;
}

/* 
 * FONTS
 * Stylings for Fonts
 */


/* 
 * TEMPLATES 
 * Stylings for Templates
 * End END_TEMPLATES
 */

/* Main paragraph styling for optimal readability */
p {
    line-height: 1.4!important;
    margin-bottom: 30px!important;
  }
  
  /* Clearer numbering and section titles */
  h2, h3, h4 {
    margin-top: 1.5rem!important;
    margin-bottom: 0.8rem!important;
    font-weight: 600!important;
  }
  
  /* Styling numbered sections for clarity */
  ol {
    list-style-type: decimal!important;
    padding-left: 1.6rem!important;
    margin-bottom: 2rem!important;
  }
  
  ol > li {
    margin-bottom: 1.5rem!important; /* clear gap between sections */
    font-weight: bold!important;
  }
  
  /* Clearly formatted nested list items */
  ol li ul {
    margin-top: 0.8rem!important;
    list-style-type: disc!important;
    padding-left: 1.2rem!important;
  }
  
  ol li ul li {
    font-weight: normal!important;
    margin-bottom: 0.7rem!important;
    line-height: 1.6!important;
  }
  
  /* Highlight strong text clearly */
  strong, b {
    font-weight: 600!important;
  }
  
  /* Optional slight increase in letter spacing for smoother readability */
  p, li {
    letter-spacing: 0.015rem!important;
  }
  

/* 
 * Site
 * Filename: index.php
 *****************/

.default-page {
    line-height: 30px; /* Aligns text vertically */
    max-width: 800px; /* Adjust based on your layout */
    margin: 0 auto; /* Centers the header content */
    padding: 20px; /* Adds some spacing on the sides */
}
.default-page-content {
    text-align: justify;
}


/* 
 * Header
 * Filename: header.php
 ******************/

.site-header {
    margin-bottom: 50px;
    position: relative; /* Needed for absolutely positioned pseudo-element */
    height: 70px;
    line-height: 1.2;
}

.site-header::after {
    content: "";
    position: absolute;
    bottom: 0; /* Aligns to the bottom of the header */
    left: 0;
    width: 100%; /* Ensures the gradient spans the full width of the header */
    height: 1px; /* The thickness of the gradient border */
    background: linear-gradient(to right, transparent, #bbb); /* Gradient from transparent to #bbb */
    display: block;
}

.header-container {
    width: 100%;
    max-width: 1200px; /* Adjust based on your layout */
    margin: 0 auto; /* Centers the header content */
    padding: 0 20px; /* Adds some spacing on the sides */
    box-sizing: border-box;
}

.header-content::after {
    content: "";
    display: table;
    clear: both;
}

.header-page-title {
    position: absolute; /* Position the title absolutely within the header */
    right: 20px; /* Align to the right, with spacing consistent with .header-container padding */
    bottom: 0px; /* Position the title right on the gradient line */
    margin: 0;
    font-style: normal;
}

/* 
 * Front Page 
 * File: front-page.php
 **********************/

.front-page-content-wrapper {
    max-width: 500px;
    margin: 0 auto; /* Centers the .content-wrapper horizontally */
    padding: 20px;
    box-sizing: border-box;
    text-align: justify; /* Centers the text within the content wrapper */
}

.front-page-content-wrapper h1 {
    text-align: center; /* Ensure headers are also centered */
    font-size: 40px;
    line-height: 44px;
}

.front-page-content-wrapper h2, .front-page-content-wrapper h3 {
    text-align: center; /* Ensure headers are also centered */
    font-size: 30px;
    line-height: 34px;
}

/* If .content specifically needs different alignment, you can override it here */
.front-page-content {
    text-align: justify; /* Center text for the main content area */
}

.front-page-site-logo {
    display: block; /* Center the logo */
    margin: 0 auto; /* Apply auto margins to horizontally center block elements */
}

.front-page-site-logo svg,
.front-page-site-logo img {
    max-width: 100%; /* Ensure the logo is responsive */
    height: auto; /* Maintain aspect ratio */
}


/* Loading spinner */
.loading-spinner {
  display: none;
}
.loading-spinner.show {
  display: block;
}
/* Robust spinner for WooCommerce grid loader */
/* Always hide product grid spinner by default (so it never appears on initial load) */
/* Center grid section headers on front page */
.front-page-grid-header {
    text-align: center !important;
}

/* Robust, visible, always-on-top spinner for loading */
.loading-spinner {
    /* display default is controlled by #products-loading-spinner, don't force always-on visible */
    width: 48px !important;
    height: 48px !important;
    margin: 24px auto !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    z-index: 2147483647 !important;
    position: relative !important;
    min-width: 48px;
    min-height: 48px;
    text-align: center;
    font-size: 16px;
    font-family: Arial, sans-serif;
}


#products-loading-spinner {
    position: fixed!important;
    left: calc(50% - 24px)!important;
    bottom: 100px!important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tag Filter */
.tag-filter {
    display: flex;
    justify-content: center; /* Center horizontally */
    margin: 20px 0;
}
#tag-filter-form .tagify {
    min-width: 350px;
}
.tagify,
#tag-input {
    width: 50%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#tag-input {
    opacity: 0;  /* or display: none; */
    transition: opacity 0.2s;
}




/* 
 * Blog Posts
 * File: single.php
 *****************/

.single-featured-image {
    width: 100%; /* Ensure the container spans the full width */
    height: 300px; /* Fixed height for the container */
    overflow: hidden; /* Hide parts of the image that overflow the container */
}

.single-featured-image img {
    width: 100%; /* Make the image span the full width of its container */
    height: 300px; /* Fixed height */
    object-fit: cover; /* Cover the area, cropping as needed */
}

.single-content-area {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* New wrapper style */
.content-and-sidebar-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.single-site-main {
    margin-top: 30px;
    flex: 0 0 70%;
    padding-right: 20px; /* Space between main content and sidebar */
}

.single-site-sidebar {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Adjust based on your design */
    padding-top: 30px;
}

.single-site-sidebar img {
    width: calc( 100% - 20px );
    height: auto;
}

@media (max-width: 768px) {
    .content-and-sidebar-wrapper {
        flex-direction: column;
    }
    .single-site-main, .single-site-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .single-site-sidebar {
        padding-left: 0; /* Remove spacing on smaller screens */
    }
}

.groups .content-and-sidebar-wrapper,
.no-sidebar .content-and-sidebar-wrapper {
    justify-content: center;
}

.groups .single-site-main,
.no-sidebar .single-site-main {
    flex: 0 0 100% !important; /* Main area full width */
    padding-right: 0 !important;
}

.single-entry-content {
    text-align: justify;
}


/* Author */
.post-author {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.post-author img {
    border-radius: 50%; /* Circular avatar */
    margin-right: 15px;
    border: 2px solid #ddd;
}

.avatar.user-1862-avatar.avatar-50.photo,
.activity-avatar.item-avatar img,
.profile-photo.avatar,
#item-header-avatar a img {
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #ddd;
}

.activity-meta .generic-button a {
    font-size: 10px!important;
}

.post-author strong {
    margin-right: 10px;
    font-size: 1.2em;
}

.post-author p {
    margin: 0;
    font-size: 0.9em;
}

/* Post Navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    margin-top: 40px;
}

.single-nav-subtitle {
    display: block;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.single-nav-title {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
}

@media (max-width: 768px) {
    .post-navigation {
        flex-direction: column;
        align-items: center;
    }

    .post-navigation > *:first-child {
        margin-bottom: 20px;
    }
}


/* 
 * Blog Comments
 * File: comments
 **********************/

.comment-list .comment {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.comment-metadata a {
    font-size: 0.875em;
}

.comment-author .fn {
    font-weight: 700;
}

.children .comment {
    margin-top: 15px;
    padding-left: 30px;
}

.comment-reply-link {
    font-size: 0.875em;
    text-decoration: none;
}

#respond {
    margin-top: 30px;
}

.comment-form-comment, .comment-notes, .comment-form-author, .comment-form-email, .comment-form-url {
    margin-bottom: 15px;
}

.comment-form-comment textarea, .comment-form-author input, .comment-form-email input, .comment-form-url input {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
}

/* 
 * BUTTONS
 */

.pmpro_btn,
.wp-block-button__link,
#buddypress #members-all a,
#buddypress #activity-all a,
#buddypress #groups-all a,
.add_to_cart_button,
.checkout-button,
.product-button a,
button,
a.button, 
input[type='submit'],
input[type='button'],
input[type='reset'] {
    padding: 5px 10px;
    border: none;
    border-radius: 4px!important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pmpro_btn:hover,
.wp-block-button__link:hover,
#buddypress #members-all a:hover,
#buddypress #activity-all a:hover,
#buddypress #groups-all a:hover,
.add_to_cart_button:hover,
.checkout-button:hover,
.product-button a:hover,
button:hover,
a.button:hover,
input[type='submit']:hover,
input[type='button']:hover,
input[type='reset']:hover {
    transform: translateY(2px);
}
 
.pmpro_btn:active,
.wp-block-button__link:active,
.add_to_cart_button:active,
.checkout-button:active,
.product-button a:active,
button:active, 
button.condition-active,
a.button:active, 
input[type='submit']:active, 
input[type='button']:active, 
input[type='reset']:active {
    transform: translateY(4px);
}

/* 
 * PLUGINS
 */

/* post-to-wordpress */
.wf_edit_posts_overview {
    max-width: 1000px;
    margin: 0 auto;
}

.wf-pagination-panel {
}

.wp-block-video {
    padding-bottom: 20px;
}

.wf-edit-table img {
    max-width: 50px !important;
}



/*
 * Tribe Events
 */

#tribe-events-pg-template  {
    width: 500px;
}
.tribe-events-event-image img {
    max-width: 100%; /* Ensure the logo is responsive */
    height: auto; /* Maintain aspect ratio */
}
.tribe-events-single-event-description.tribe-events-content p {
    justify-content: center!important;
}
#tribe-events-pg-template {
    margin: auto;
    padding: 0;
    max-width: 100%;
}
#tribe-events-content {
    padding-left: 5px;
    padding-right: 5px;
}
.tribe-events-back,
.tribe-events-single-event-title {
    display: none;
}
.tribe-common-g-row {
    border-radius: 10px;
}
#tribe-events-content h2 {
    font-weight: 400;
    font-size: 1.75em;
    line-height: 1.95em;
}

/********************************************
 * BUDDYPRESS NOUVEAU - MODERN PROFILE STYLES
 ********************************************/

/*-------------------------------------------
  General Container
-------------------------------------------*/
#buddypress .bp-user,
#buddypress .bp-user-nav,
#buddypress #item-header {
    box-sizing: border-box;
}
#buddypress #bp-message-thread-list li {
    margin-bottom: 5px !important;
}
#buddypress #members-all,
#buddypress #groups-all,
#buddypress #activity-all {
    border: none !important;
}

/*-------------------------------------------
  Navigation Tabs (Primary & Secondary Nav)
-------------------------------------------*/
#buddypress #object-nav ul,
#buddypress #subnav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 20px auto 30px;
    gap: 10px;
}

#buddypress #object-nav ul li,
#buddypress #subnav ul li {
    display: inline-block;
}

#buddypress #object-nav ul li a,
#buddypress #subnav ul li a {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

/*-------------------------------------------
  Profile Body Content Container
-------------------------------------------*/
#buddypress #item-body.members-body {
    border-radius: 10px;
    padding: 20px;
    margin: 0 auto 50px;
    max-width: 900px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/*-------------------------------------------
  Profile Fields
-------------------------------------------*/
#buddypress .profile,
#buddypress .profile .bp-widget {
    margin-bottom: 30px;
}

#buddypress .profile .bp-widget h4 {
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

#buddypress .profile .bp-widget table.profile-fields {
    width: 100%;
    border-collapse: collapse;
}

#buddypress .profile .bp-widget table.profile-fields tr {
    border-bottom: 1px solid #f2f2f2;
}

#buddypress .profile .bp-widget table.profile-fields td {
    padding: 10px 5px;
    vertical-align: top;
    font-size: 0.95em;
}

#buddypress .profile .bp-widget table.profile-fields .label {
    font-weight: bold;
    width: 30%;
}

#buddypress .profile .bp-widget table.profile-fields .data {
    width: 70%;
}

/* Example for BuddyPress Nouveau:
   Target the username in the header area. */
#buddypress #cover-image-container #item-header-cover-image #item-header-content h2,
#buddypress #cover-image-container #item-header-cover-image #item-header-content h3 {
    padding: 5px 10px;  
    border-radius: 5px;   
    display: inline-block; 
    max-width: fit-content;
}
   
/*-------------------------------------------
  Activity Stream in Profile
-------------------------------------------*/
#buddypress #item-body .activity {
    margin-top: 20px;
}

/*-------------------------------------------
  Buttons (Message, Add Friend, etc.)
-------------------------------------------*/
#buddypress a.button,
#buddypress button,
#buddypress input[type="submit"] {
    border-radius: 5px;
    padding: 10px 15px;
    margin-right: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

#buddypress #dir-groups-search-form,
#buddypress #dir-members-search-form,
#buddypress #dir-activity-search-form {
    border: none;
}
#buddypress #dir-groups-search,
#buddypress #dir-members-search,
#dir-activity-search { 
    width: 250px;
}
#buddypress #dir-groups-search-submit,
#buddypress #dir-members-search-submit,
#buddypress #dir-activity-search-submit {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
}

#buddypress #dir-groups-search-submit::before,
#buddypress #dir-members-search-submit::before,
#buddypress #dir-activity-search-submit::before {
    font-family: 'dashicons';
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#buddypress #dir-groups-search-submit input,
#buddypress #dir-members-search-submit input,
#buddypress #dir-activity-search-submit input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#groups-order-by {
    width: 200px;
}

/*-------------------------------------------
  Responsive Adjustments
-------------------------------------------*/
@media (max-width: 768px) {
    #buddypress #object-nav ul li a,
    #buddypress #subnav ul li a {
        font-size: 0.85em;
        padding: 8px 12px;
    }
    #buddypress #item-body.members-body {
        padding: 10px;
    }
}

#buddypress li.selected {
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#buddypress .groups-type-navs,
#buddypress .activity-update-form,
.buddypress-wrap.bp-dir-hori-nav:not(.bp-vertical-navs) nav:not(.tabbed-links) {
    box-shadow: none !important;
}

#buddypress #aw-whats-new-submit {
    width: 200px;
}

/* --- Unified Card Grid & Card Styles ---
   Optimized for consistent, responsive card layouts (Posts, WooCommerce products, etc.)
*/

/* --- 1. Consistent Grid Layout --- */
.posts-container,
.card-products-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.default-page,
.posts-container,
.woocommerce ul.products,
.woocommerce-page ul.products,
.card-products-container {
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 2. Uniform Card Dimensions & Styling --- */
.posts-container .post-item,
.woocommerce ul.products li.product,
.card-products-container .card-product {
  aspect-ratio: 320 / 430 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  border: 2px solid #ddd;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-header, .entry-summary {
    padding: 10px 0 20px 10px!important;
    width: calc(100% - 20px);
    height: 30px!important;
    text-align: center;
    margin-bottom: 10px !important;
}

.posts-container .post-item:hover,
.woocommerce ul.products li.product:hover,
.card-products-container .card-product:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* --- 3. Image Container (60% Height) --- */
.posts-container .post-item .post-thumbnail,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.card-products-container .card-product-image {
  flex: 0 0 60% !important;
  height: 60% !important;
  overflow: hidden;
  position: relative; /* added to correctly contain the picture */
}

/* Explicitly target <picture> tags for thumbnails */
.posts-container .post-item .post-thumbnail picture,
.posts-container .post-item .post-thumbnail img,
.woocommerce ul.products li.product .woocommerce-loop-product__link picture,
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.card-products-container .card-product-image picture,
.card-products-container .card-product-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important; /* ensures no inline spacing issues */
  object-fit: cover;
  object-position: center;
}


/* --- 4. Content Container (40% Height) --- */
.posts-container .post-item .post-content,
.woocommerce ul.products li.product .product-details,
.card-products-container .card-product-content {
  flex: 0 0 40%;
  height: 40%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.posts-container .post-item a.post-card-link {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.posts-container .post-item a.post-card-link .post-thumbnail {
    flex: 0 0 60% !important;
    height: 60% !important;
    overflow: hidden;
    position: relative;
}

.posts-container .post-item a.post-card-link .post-thumbnail img,
.posts-container .post-item a.post-card-link .post-thumbnail picture {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}


/* --- 5. Titles, Excerpts & Prices --- */
.post-item .entry-title,
.posts-container .post-item .post-content h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.card-products-container .card-product-content h2 {
    margin: 0 0 0px;
    text-align: center!important;
}

.post-item .entry-summary p,
.card-products-container .card-product-content p {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure product titles do not wrap */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center !important;
}

.woocommerce ul.products li.product .price {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

/* --- 6. Buttons (Product & Post links) --- */
.woocommerce ul.products li.product .button {
  border-radius: 4px;
  text-align: center;
  padding: 8px 10px;
  transition: background 0.3s ease;
  margin-top: auto;
  width: 100%;
  font-weight: bold;
}

.woocommerce ul.products li.product .button:hover {
  background: #e59400;
}

.post-card .read-more, .post-card .more-link {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
}

.post-card .read-more:hover, .post-card .more-link:hover {
  text-decoration: underline;
}

/* --- 7. Responsive Adjustments --- */
@media (max-width: 992px) {
  .posts-container,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}


/* --- 8. Accessibility Enhancements --- */
.woocommerce ul.products li.product .button:focus,
.post-card .read-more:focus,
.post-card .more-link:focus {
  outline: 2px solid #005a8e;
  outline-offset: 2px;
}

/* Correct "Add to Cart" Button styling */
.woocommerce ul.products li.product .button.add_to_cart_button {
  border-radius: 4px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: bold !important;
  margin-top: auto !important;
  transition: background 0.3s ease !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
}

/* Ensure WooCommerce Cards height precisely matches Post Cards */
.woocommerce ul.products li.product {
  height: auto !important; /* Allow height to adjust naturally */
  min-height: 510px !important; /* Match exact height to posts */
  max-height: 510px !important;
  box-sizing: border-box !important;
}

/* Remove potential conflicting paddings/margins */
.woocommerce ul.products li.product .product-details,
.woocommerce-page ul.products li.product .product-details {
  padding: 10px !important;
  margin: 0 !important;
}

/* Slight responsive adjustments for mobile devices */
@media (max-width: 600px) {
  .woocommerce ul.products li.product {
    min-height: unset !important;
    max-height: unset !important;
  }
}

.woocommerce-loop-product__link {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Optimal alignment and spacing for Add to Cart button container */
.woocommerce ul.products li.product .product-button {
    margin-top: auto !important;  /* Push the button container to the bottom */
    padding: 8px 10px !important; /* Provide appropriate spacing */
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Optimal styling for the Add to Cart button itself */
.woocommerce ul.products li.product .product-button a.button,
.woocommerce ul.products li.product .product-button .button {
    display: inline-block !important;
    width: 100% !important;
    padding: 10px 15px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure consistent spacing above button */
.woocommerce ul.products li.product .price {
    margin-bottom: 15px !important; /* consistent spacing between price and button */
    text-align: center;
}
.product-button a.woocommerce-LoopProduct-link {
    display: none!important;
}
.woocommerce .product-info {
    margin-bottom: 0!important;
    overflow: hidden!important;
    height: 120px !important;
}
.woocommerce .product .woocommerce-product-details__short-description {
    overflow: hidden!important;
    height: 150px !important;
    max-height: 150px !important;
}
.woocommerce .product .cart {
    margin-top: 50px !important;
}

.card-products-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    grid-gap: 60px; /* adjust spacing as needed */
}

/* Add margin or padding to separate the tabs from the upper content */
body.single-product div.product .woocommerce-tabs {
    clear: both;               /* Ensures it starts on a new line */
    padding-top: 150px !important; /* Or padding-top, if you prefer */
    /* padding-top: 30px !important; */
  }


/* html5 video player */

.post iframe {
    max-width: 100% !important;
}

@media (max-width: 600px) {
    /* Force the WooCommerce catalog to use grid with one column */
    ul.products.columns-3 {
      display: grid !important;
      grid-template-columns: 1fr !important;
    }
    /* Remove float and fixed width from individual product items */
    ul.products.columns-3 li.product {
      float: none !important;
      width: auto !important;
    }
    /* Optionally, ensure buttons inside products span full width */
    ul.products.columns-3 li.product .button {
      width: 100% !important;
    }
}

@media (max-width: 600px) {
    /* Force single column for posts and add margin */
    .posts-container {
      grid-template-columns: 1fr;   /* Already in your code, repeated for clarity */
      margin: 0 15px !important;   /* Add some horizontal margin for portrait mode */
    }
  
    /* Keep WooCommerce at full width (no margin) */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
      grid-template-columns: 1fr !important;  /* single column, no margin */
      margin: 0 auto !important;              /* or 0 if you want no horizontal margin */
    }
  }

  @media (max-width: 600px) {
    /* Let the header expand as needed on small screens */
    .site-header {
      height: auto;         /* Remove fixed height */
      min-height: 70px;     /* Ensure at least 70px tall */
      margin-bottom: 20px;  /* Adjust spacing below header */
      padding: 10px 0;      /* Optional top/bottom padding */
    }
  
    /* Position the title normally so it doesn’t overlap content */
    .header-page-title {
      position: static;     /* Remove absolute positioning */
      margin: 0;
      text-align: center;   /* Center the title on small screens */
      line-height: 1.4;     /* Improve readability on mobile */
    }
  }
  

  /* Modal Background Fix
 * This CSS specifically addresses the transparency issue with the Terms of Use
 * and Privacy Policy modals
 */

/* Make modal background fully opaque */
.rtcs-modal-content {
    background-color: var(--another-shade) !important;
    opacity: 1 !important;
}

/* Ensure the text is fully opaque */
.rtcs-modal-body {
    opacity: 1 !important;
    color: var(--text-color) !important;
}

/* Increase the overlay opacity to provide better contrast */
.rtcs-modal {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Ensure the modal content has proper borders for clear separation */
.rtcs-modal-content {
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode adjustments */
body.dark-mode .rtcs-modal-content {
    background-color: var(--another-shade-dark) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .rtcs-modal-body {
    color: var(--dark-paragraph-color) !important;
}

/* Form input fields that appear within modals */
.rtcs-modal-body input[type="text"],
.rtcs-modal-body input[type="password"],
.rtcs-modal-body input[type="email"] {
    background-color: var(--bg-color) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: var(--text-color) !important;
}

body.dark-mode .rtcs-modal-body input[type="text"],
body.dark-mode .rtcs-modal-body input[type="password"],
body.dark-mode .rtcs-modal-body input[type="email"] {
    background-color: var(--bg-color-dark) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--dark-paragraph-color) !important;
}


/* Notification/Hint Box Styling Improvements */

/* Target the notification/hint box */
.notification-box,
.info-box {
    /* Improved background with better contrast */
    background-color: rgba(210, 235, 242, 0.9) !important;
    
    /* Add a subtle border for better definition */
    border: 1px solid rgba(70, 130, 180, 0.5) !important;
    border-left: 4px solid rgba(70, 130, 180, 0.8) !important;
    
    /* Rounded corners for a modern look */
    border-radius: 4px !important;
    
    /* Better padding for readability */
    padding: 15px 20px !important;
    
    /* Add a subtle shadow for depth */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    
    /* Ensure proper margin */
    margin: 15px 0 !important;
}
}
.info-box * {

/* Style the text inside the notification box */
    /* Darker text color for better contrast */
    color: rgba(0, 60, 90, 0.9) !important;
    
    /* Improve font weight for better visibility */
    font-weight: 500 !important;
    
    /* Ensure proper line height for readability */
    line-height: 1.5 !important;
    
}
body.dark-mode .info-box {
    /* Text shadow for better contrast on light backgrounds */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* Dark mode support */
}
body.dark-mode .info-box * {
    /* Dark mode background */
    background-color: rgba(40,
    border-color: rgba(100, 160, 200, 0.5) !important;
}
    border-left-color: rgba(100, 160, 200, 0.8) !important;
}

    /* Dark mode text color */
    color: rgba(210, 235, 255, 0.95) !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5) !important;
}

/* Add a standard info icon for added clarity */
.notification-box::before,
.hint-box::before,
.message-box::before,
.info-box::before {
    content: "ℹ️";
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* Mobile responsiveness */
@media (max-width: 767px) {
    .notification-box,
    .hint-box,
    .message-box,
    .info-box,
    div[class*="hint"]:not(.product-info),
    div[class*="info"]:not(.product-info),
    div[class*="message"]:not(.product-info) {
        padding: 12px 15px !important;
    }
}